Update static/styles.css

static/styles.css

@@ -103,7 +103,7 @@ body {
     width: 48px;
     height: 48px;
     border-radius: 50%;
-    background: hsl(var(--muted));
+    background: var(--muted);
     border: none;
     cursor: pointer;
     display: flex;
@@ -121,7 +121,7 @@ body {
 .dark-mode-toggle .sun-icon,
 .dark-mode-toggle .moon-icon {
     position: absolute;
-    color: hsl(var(--foreground));
+    color: var(--foreground);
     transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
@@ -208,6 +208,7 @@ body {
     background: var(--background);
     color: var(--foreground);
     transition: all 0.2s;
+    flex: 1;
 }
 
 .api-key-input:focus {
@@ -216,6 +217,30 @@ body {
     box-shadow: 0 0 0 2px hsla(14, 85%, 58%, 0.1);
 }
 
+.api-key-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+}
+
+.get-api-key-inline {
+    white-space: nowrap;
+    padding: 0.55rem 0.9rem;
+    background: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: var(--radius);
+    text-decoration: none;
+    font-size: 0.85rem;
+    font-weight: 500;
+    transition: var(--transition-smooth);
+}
+
+.get-api-key-inline:hover {
+    background: hsl(14, 85%, 52%);
+}
+
+
 /* Upload Area */
 .upload-area {
     border: 2px dashed var(--border);
@@ -602,3 +627,21 @@ body {
         padding: 1.5rem;
     }
 }
+
+/* API Key Input Section Responsive Adjustments */
+@media (max-width: 640px) {
+    .api-key-row {
+        flex-direction: row !important;
+        align-items: center;
+    }
+
+    .api-key-input {
+        flex: 1 1 auto !important;
+        width: auto !important;
+    }
+
+    .get-api-key-inline {
+        flex-shrink: 0;
+    }
+}
+