QA / System Chart / HypoGen better UI

.gitignore

@@ -11,4 +11,5 @@ uploaded_files/
 .DS_Store
 .venv/
 chroma_db/
-plotextract/outputs/
+plotextract/outputs/
+CLAUDE.md

index.html

@@ -118,6 +118,12 @@
     html[data-mode="QA"] #app,
     html[data-mode="System Chart Extraction"] #app,
     html[data-mode="Hypotheses Generation"] #app {
+      display: flex;
+    }
+
+    html[data-mode="QA"] .app-glow,
+    html[data-mode="System Chart Extraction"] .app-glow,
+    html[data-mode="Hypotheses Generation"] .app-glow {
       display: block;
     }
 
@@ -222,73 +228,8 @@
       background-color: #f8f8f8;
     }
 
-    #advancedParameters {
-      width: 100%;
-      margin-top: 0.25rem;
-      border: 1px solid #e0e0e0;
-      border-radius: 6px;
-      background-color: #fafafa;
-    }
-
-    #advancedParameters summary {
-      cursor: pointer;
-      padding: 0.5rem 0.75rem;
-      font-size: 0.85rem;
-      color: #444;
-      user-select: none;
-    }
-
-    #advancedParameters summary:hover {
-      background-color: #f1f1f1;
-    }
-
-    .advanced-params-content {
-      padding: 0.6rem 0.75rem 0.8rem;
-      border-top: 1px solid #e9e9e9;
-    }
-
-    .advanced-param-row {
-      display: flex;
-      flex-direction: column;
-      margin-bottom: 0.55rem;
-      font-size: 0.85rem;
-      color: #333;
-      max-width: 360px;
-    }
-
-    .advanced-param-row:last-child {
-      margin-bottom: 0;
-    }
-
-    .advanced-param-meta {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.25rem;
-      gap: 0.75rem;
-    }
-
-    .advanced-param-value {
-      color: #666;
-      font-size: 0.8rem;
-      min-width: 38px;
-      text-align: right;
-    }
-
-    .advanced-param-row input[type="range"] {
-      width: 100%;
-      margin: 0;
-    }
-
-    .advanced-param-row input[type="number"],
-    .advanced-param-row select {
-      margin-top: 0;
-      max-width: 180px;
-      background-color: #fff;
-    }
-
-    /* Multi-select dropdown styling */
-    select[multiple] {
+    /* Multi-select dropdown styling — light defaults; dark modes override below */
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) select[multiple] {
       min-height: 80px;
       padding: 0.2rem 0.4rem;
       background-color: #ffffff;
@@ -300,12 +241,12 @@
       transition: border-color 0.2s ease;
     }
 
-    select[multiple]:focus {
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) select[multiple]:focus {
       border-color: #4285F4;
       box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
     }
 
-    select[multiple] option {
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) select[multiple] option {
       padding: 0.3rem 0.5rem;
       margin: 0.1rem 0;
       border-radius: 3px;
@@ -313,12 +254,12 @@
       color: #333;
     }
 
-    select[multiple] option:checked {
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) select[multiple] option:checked {
       background-color: #4285F4;
       color: white;
     }
 
-    select[multiple] option:hover {
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) select[multiple] option:hover {
       background-color: #f0f0f0;
     }
 
@@ -1026,21 +967,24 @@
       gap: 0.2rem;
     }
 
-    form input[type="text"],
-    form select,
-    form input[type="file"],
-    form input[type="password"],
-    form input[type="number"],
-    textarea,
-    #followUpQuestion,
-    #hypothesis-chat-input,
-    #hypothesis-text-input,
-    #original-paper-content-input {
+    /* Light form chrome — only when NOT in a dark app mode. Scoped so the
+       forced white background cannot fight dark-mode select/input overrides
+       (which previously left white ink on a white field). */
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) form input[type="text"],
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) form select,
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) form input[type="file"],
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) form input[type="password"],
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) form input[type="number"],
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) textarea,
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) #followUpQuestion,
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) #hypothesis-chat-input,
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) #hypothesis-text-input,
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) #original-paper-content-input {
       margin-top: 0.3rem;
       border: 1px solid #c8d6ec !important;
       border-radius: 10px !important;
       background-color: #ffffff !important;
-      color: var(--text);
+      color: #1f2937;
       box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
       transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
     }
@@ -1087,20 +1031,10 @@
       border-radius: var(--radius-sm);
     }
 
-    #advancedParameters {
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      background: var(--surface-soft);
-    }
-
-    #advancedParameters summary {
-      color: #2a3550;
-      font-weight: 500;
-    }
-
-    #chat-area,
-    #hypothesis-chat-messages,
-    #conversation-messages {
+    /* Light chat panes — scoped out of dark app modes (dark overlay owns these) */
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) #chat-area,
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) #hypothesis-chat-messages,
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) #conversation-messages {
       border: 1px solid var(--border) !important;
       border-radius: var(--radius-md) !important;
       background: linear-gradient(180deg, #fbfcff 0%, color-mix(in srgb, var(--primary-soft) 35%, #ffffff 65%) 100%) !important;
@@ -1122,9 +1056,9 @@
       border: 1px solid var(--chat-ai-border);
     }
 
-    .model-selection-banner,
-    #visualizationContainer,
-    .progress-container {
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) .model-selection-banner,
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) #visualizationContainer,
+    html:not([data-mode="QA"]):not([data-mode="System Chart Extraction"]):not([data-mode="Hypotheses Generation"]) .progress-container {
       border-radius: var(--radius-md);
       border-color: var(--border);
       background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
@@ -1435,7 +1369,7 @@
       --radius-md: 14px;
       --radius-lg: 18px;
       --font-display: "Electrolize", "Space Grotesk", "Segoe UI", sans-serif;
-      --font-body: "Space Grotesk", "Segoe UI", sans-serif;
+      --font-body: "Electrolize", "Segoe UI", sans-serif;
       --font-mono: "JetBrains Mono", "SFMono-Regular", monospace;
     }
 
@@ -1450,12 +1384,12 @@
       --bg-glow-secondary: rgba(6, 182, 212, 0.16);
       --accent-shadow: rgba(59, 130, 246, 0.32);
       --focus-ring: rgba(59, 130, 246, 0.4);
-      --chat-user-top: rgba(16, 185, 129, 0.42);
-      --chat-user-bottom: rgba(15, 118, 110, 0.42);
-      --chat-user-border: rgba(16, 185, 129, 0.55);
-      --chat-ai-top: rgba(59, 130, 246, 0.4);
-      --chat-ai-bottom: rgba(37, 99, 235, 0.4);
-      --chat-ai-border: rgba(59, 130, 246, 0.55);
+      --chat-user-top: #15201c;
+      --chat-user-bottom: #121a18;
+      --chat-user-border: rgba(16, 185, 129, 0.32);
+      --chat-ai-top: #151c2a;
+      --chat-ai-bottom: #121826;
+      --chat-ai-border: rgba(59, 130, 246, 0.32);
       --progress-gradient: linear-gradient(120deg, #3b82f6, #06b6d4);
       --scrollbar-thumb: rgba(59, 130, 246, 0.5);
       --scrollbar-track: rgba(15, 23, 42, 0.6);
@@ -1472,12 +1406,12 @@
       --bg-glow-secondary: rgba(16, 185, 129, 0.16);
       --accent-shadow: rgba(20, 184, 166, 0.32);
       --focus-ring: rgba(20, 184, 166, 0.4);
-      --chat-user-top: rgba(16, 185, 129, 0.42);
-      --chat-user-bottom: rgba(15, 118, 110, 0.42);
-      --chat-user-border: rgba(16, 185, 129, 0.55);
-      --chat-ai-top: rgba(20, 184, 166, 0.4);
-      --chat-ai-bottom: rgba(15, 118, 110, 0.4);
-      --chat-ai-border: rgba(20, 184, 166, 0.55);
+      --chat-user-top: #15201c;
+      --chat-user-bottom: #121a18;
+      --chat-user-border: rgba(16, 185, 129, 0.32);
+      --chat-ai-top: #14201e;
+      --chat-ai-bottom: #121826;
+      --chat-ai-border: rgba(20, 184, 166, 0.32);
       --progress-gradient: linear-gradient(120deg, #14b8a6, #10b981);
       --scrollbar-thumb: rgba(20, 184, 166, 0.5);
       --scrollbar-track: rgba(15, 23, 42, 0.6);
@@ -1494,22 +1428,34 @@
       --bg-glow-secondary: rgba(236, 72, 153, 0.16);
       --accent-shadow: rgba(168, 85, 247, 0.32);
       --focus-ring: rgba(168, 85, 247, 0.4);
-      --chat-user-top: rgba(168, 85, 247, 0.42);
-      --chat-user-bottom: rgba(124, 58, 237, 0.42);
-      --chat-user-border: rgba(168, 85, 247, 0.55);
-      --chat-ai-top: rgba(236, 72, 153, 0.4);
-      --chat-ai-bottom: rgba(168, 85, 247, 0.4);
-      --chat-ai-border: rgba(168, 85, 247, 0.55);
+      --chat-user-top: #1a1624;
+      --chat-user-bottom: #15121e;
+      --chat-user-border: rgba(168, 85, 247, 0.32);
+      --chat-ai-top: #1a1524;
+      --chat-ai-bottom: #121826;
+      --chat-ai-border: rgba(168, 85, 247, 0.32);
       --progress-gradient: linear-gradient(120deg, #a855f7, #ec4899);
       --scrollbar-thumb: rgba(168, 85, 247, 0.5);
       --scrollbar-track: rgba(15, 23, 42, 0.6);
     }
 
+    html[data-mode="QA"],
+    html[data-mode="System Chart Extraction"],
+    html[data-mode="Hypotheses Generation"] {
+      color-scheme: dark;
+    }
+
     html[data-mode="QA"] body,
     html[data-mode="System Chart Extraction"] body,
     html[data-mode="Hypotheses Generation"] body {
+      display: block;
+      justify-content: initial;
+      align-items: initial;
+      padding: 0;
+      min-height: 100vh;
+      color-scheme: dark;
       background:
-        radial-gradient(circle at top right, var(--bg-glow-primary), transparent 42%),
+        radial-gradient(circle at top left, var(--bg-glow-primary), transparent 50%),
         radial-gradient(circle at 20% 80%, var(--bg-glow-secondary), transparent 45%),
         linear-gradient(160deg, #0b0d12 0%, #0c121f 60%, #0a0f1a 100%);
       color: var(--text);
@@ -1522,29 +1468,120 @@
       font-family: inherit;
     }
 
-    /* App shell */
+    /* Glow orb (PlotExtract .glow) */
+    .app-glow {
+      display: none;
+      position: fixed;
+      inset: -20% 10% auto auto;
+      width: 420px;
+      height: 420px;
+      border-radius: 50%;
+      background: radial-gradient(circle, var(--bg-glow-primary), transparent 70%);
+      filter: blur(5px);
+      z-index: -1;
+      pointer-events: none;
+    }
+
+    /* App shell — match PlotExtract .shell (transparent, stacked panels) */
     html[data-mode="QA"] #app,
     html[data-mode="System Chart Extraction"] #app,
     html[data-mode="Hypotheses Generation"] #app {
-      background: linear-gradient(145deg, var(--primary-soft), rgba(15, 23, 42, 0.92));
+      max-width: 1150px;
+      width: 100%;
+      margin: 0 auto;
+      padding: 48px 24px 64px;
+      flex-direction: column;
+      gap: 32px;
+      background: transparent;
+      border: none;
+      box-shadow: none;
+      backdrop-filter: none;
+      border-radius: 0;
+      color: var(--text);
+    }
+
+    /* Floating panels (PlotExtract .panel) */
+    html[data-mode="QA"] .panel,
+    html[data-mode="System Chart Extraction"] .panel,
+    html[data-mode="Hypotheses Generation"] .panel {
+      background: var(--surface);
+      border-radius: var(--radius-lg);
+      padding: 28px;
       border: 1px solid var(--border);
       box-shadow: var(--shadow-md);
       backdrop-filter: blur(12px);
+    }
+
+    html[data-mode="QA"] .panel-head,
+    html[data-mode="System Chart Extraction"] .panel-head,
+    html[data-mode="Hypotheses Generation"] .panel-head {
+      margin-bottom: 8px;
+    }
+
+    html[data-mode="QA"] .panel-head h2,
+    html[data-mode="System Chart Extraction"] .panel-head h2,
+    html[data-mode="Hypotheses Generation"] .panel-head h2 {
+      margin: 0 0 8px;
+      color: var(--text);
+      font-family: var(--font-display);
+      font-size: 1.35rem;
+      font-weight: 600;
+    }
+
+    html[data-mode="QA"] .panel-head p,
+    html[data-mode="System Chart Extraction"] .panel-head p,
+    html[data-mode="Hypotheses Generation"] .panel-head p {
+      margin: 0;
+      color: var(--muted);
+      line-height: 1.55;
+    }
+
+    html[data-mode="QA"] .panel-subtitle,
+    html[data-mode="System Chart Extraction"] .panel-subtitle,
+    html[data-mode="Hypotheses Generation"] .panel-subtitle {
+      margin: 0 0 10px;
+      color: var(--text);
+      font-family: var(--font-display);
+      font-size: 1.05rem;
+    }
+
+    /* Hero / brand (PlotExtract .brand + .subhead) */
+    html[data-mode="QA"] .app-header,
+    html[data-mode="System Chart Extraction"] .app-header,
+    html[data-mode="Hypotheses Generation"] .app-header {
+      text-align: left;
+      margin-bottom: 0;
+    }
+
+    html[data-mode="QA"] .app-header .brand,
+    html[data-mode="System Chart Extraction"] .app-header .brand,
+    html[data-mode="Hypotheses Generation"] .app-header .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 1.7rem;
+      font-weight: 600;
+      margin-bottom: 12px;
       color: var(--text);
+      font-family: var(--font-display);
     }
 
-    html[data-mode="QA"] .app-header h1,
-    html[data-mode="System Chart Extraction"] .app-header h1,
-    html[data-mode="Hypotheses Generation"] .app-header h1 {
+    html[data-mode="QA"] .app-header .brand #appTitle,
+    html[data-mode="System Chart Extraction"] .app-header .brand #appTitle,
+    html[data-mode="Hypotheses Generation"] .app-header .brand #appTitle {
       color: var(--text);
       font-family: var(--font-display);
       letter-spacing: 0.02em;
     }
 
-    html[data-mode="QA"] .app-header p,
-    html[data-mode="System Chart Extraction"] .app-header p,
-    html[data-mode="Hypotheses Generation"] .app-header p {
+    html[data-mode="QA"] .app-header .subhead,
+    html[data-mode="System Chart Extraction"] .app-header .subhead,
+    html[data-mode="Hypotheses Generation"] .app-header .subhead {
       color: var(--muted);
+      line-height: 1.6;
+      margin: 0;
+      font-size: 1rem;
+      max-width: 720px;
     }
 
     html[data-mode="QA"] .section-title,
@@ -1552,6 +1589,74 @@
     html[data-mode="Hypotheses Generation"] .section-title {
       color: var(--text);
       font-family: var(--font-display);
+      margin-top: 1.4rem;
+      margin-bottom: 0.75rem;
+    }
+
+    html[data-mode="QA"] .panel > .section-title:first-child,
+    html[data-mode="System Chart Extraction"] .panel > .section-title:first-child,
+    html[data-mode="Hypotheses Generation"] .panel > .section-title:first-child {
+      margin-top: 0.4rem;
+    }
+
+    html[data-mode="QA"] .hint,
+    html[data-mode="System Chart Extraction"] .hint,
+    html[data-mode="Hypotheses Generation"] .hint {
+      margin: 0 0 0.65rem;
+      color: var(--muted);
+      font-size: 0.85rem;
+      line-height: 1.5;
+    }
+
+    html[data-mode="QA"] .hint.left,
+    html[data-mode="System Chart Extraction"] .hint.left,
+    html[data-mode="Hypotheses Generation"] .hint.left {
+      text-align: left;
+      display: block;
+    }
+
+    html[data-mode="QA"] .label,
+    html[data-mode="System Chart Extraction"] .label,
+    html[data-mode="Hypotheses Generation"] .label {
+      display: block;
+      font-weight: 600;
+      color: var(--text);
+      margin-bottom: 6px;
+    }
+
+    html[data-mode="QA"] .input-row,
+    html[data-mode="System Chart Extraction"] .input-row,
+    html[data-mode="Hypotheses Generation"] .input-row {
+      display: flex;
+      gap: 12px;
+      align-items: flex-end;
+      flex-wrap: wrap;
+    }
+
+    html[data-mode="QA"] .input-row input[type="text"],
+    html[data-mode="System Chart Extraction"] .input-row input[type="text"],
+    html[data-mode="Hypotheses Generation"] .input-row input[type="text"] {
+      flex: 1;
+      min-width: 180px;
+    }
+
+    html[data-mode="QA"] .result-card,
+    html[data-mode="System Chart Extraction"] .result-card,
+    html[data-mode="Hypotheses Generation"] .result-card {
+      background: var(--surface-strong);
+      border-radius: 16px;
+      padding: 18px;
+      border: 1px solid rgba(148, 163, 184, 0.2);
+      display: grid;
+      gap: 12px;
+      margin: 5px 0;
+    }
+
+    html[data-mode="QA"] .result-card.hypotheses-options,
+    html[data-mode="System Chart Extraction"] .result-card.hypotheses-options,
+    html[data-mode="Hypotheses Generation"] .result-card.hypotheses-options {
+      min-width: 280px;
+      flex-shrink: 0;
     }
 
     html[data-mode="QA"] hr,
@@ -1568,26 +1673,215 @@
       color: var(--text);
     }
 
-    /* Inputs, selects, textareas */
+    /* Flatten nested form cards — panels already provide the PlotExtract surface */
+    html[data-mode="QA"] #apiKeyForm,
+    html[data-mode="QA"] #uploadForm,
+    html[data-mode="QA"] #askForm,
+    html[data-mode="QA"] #conversationForm,
+    html[data-mode="QA"] #hypotheses-conversation-section,
+    html[data-mode="QA"] #conversation-section,
+    html[data-mode="System Chart Extraction"] #apiKeyForm,
+    html[data-mode="System Chart Extraction"] #uploadForm,
+    html[data-mode="System Chart Extraction"] #askForm,
+    html[data-mode="System Chart Extraction"] #conversationForm,
+    html[data-mode="System Chart Extraction"] #hypotheses-conversation-section,
+    html[data-mode="System Chart Extraction"] #conversation-section,
+    html[data-mode="Hypotheses Generation"] #apiKeyForm,
+    html[data-mode="Hypotheses Generation"] #uploadForm,
+    html[data-mode="Hypotheses Generation"] #askForm,
+    html[data-mode="Hypotheses Generation"] #conversationForm,
+    html[data-mode="Hypotheses Generation"] #hypotheses-conversation-section,
+    html[data-mode="Hypotheses Generation"] #conversation-section {
+      border: none !important;
+      background: transparent !important;
+      box-shadow: none !important;
+      padding: 0 !important;
+      margin-top: 0;
+    }
+
+    /* Inputs, selects, textareas — PlotExtract field chrome */
     html[data-mode="QA"] form input[type="text"],
     html[data-mode="QA"] form input[type="password"],
     html[data-mode="QA"] form input[type="number"],
     html[data-mode="QA"] form select,
     html[data-mode="QA"] form textarea,
+    html[data-mode="QA"] #hypothesis-text-input,
+    html[data-mode="QA"] #original-paper-content-input,
+    html[data-mode="QA"] #hypothesis-chat-input,
+    html[data-mode="QA"] #followUpQuestion,
+    html[data-mode="QA"] #conversationSelect,
     html[data-mode="System Chart Extraction"] form input[type="text"],
     html[data-mode="System Chart Extraction"] form input[type="password"],
     html[data-mode="System Chart Extraction"] form input[type="number"],
     html[data-mode="System Chart Extraction"] form select,
     html[data-mode="System Chart Extraction"] form textarea,
+    html[data-mode="System Chart Extraction"] #hypothesis-text-input,
+    html[data-mode="System Chart Extraction"] #original-paper-content-input,
+    html[data-mode="System Chart Extraction"] #hypothesis-chat-input,
+    html[data-mode="System Chart Extraction"] #followUpQuestion,
+    html[data-mode="System Chart Extraction"] #conversationSelect,
     html[data-mode="Hypotheses Generation"] form input[type="text"],
     html[data-mode="Hypotheses Generation"] form input[type="password"],
     html[data-mode="Hypotheses Generation"] form input[type="number"],
     html[data-mode="Hypotheses Generation"] form select,
-    html[data-mode="Hypotheses Generation"] form textarea {
-      background-color: var(--surface-soft) !important;
+    html[data-mode="Hypotheses Generation"] form textarea,
+    html[data-mode="Hypotheses Generation"] #hypothesis-text-input,
+    html[data-mode="Hypotheses Generation"] #original-paper-content-input,
+    html[data-mode="Hypotheses Generation"] #hypothesis-chat-input,
+    html[data-mode="Hypotheses Generation"] #followUpQuestion,
+    html[data-mode="Hypotheses Generation"] #conversationSelect {
+      background-color: rgba(15, 23, 42, 0.7) !important;
       color: var(--text) !important;
       border: 1px solid var(--border) !important;
-      border-radius: var(--radius-sm);
+      border-radius: 12px !important;
+      padding: 12px 14px !important;
+      font-size: 0.95rem;
+      box-shadow: none !important;
+    }
+
+    html[data-mode="QA"] #hypothesis-text-input,
+    html[data-mode="QA"] #original-paper-content-input,
+    html[data-mode="System Chart Extraction"] #hypothesis-text-input,
+    html[data-mode="System Chart Extraction"] #original-paper-content-input,
+    html[data-mode="Hypotheses Generation"] #hypothesis-text-input,
+    html[data-mode="Hypotheses Generation"] #original-paper-content-input {
+      width: 100%;
+      min-height: 120px;
+      resize: vertical;
+      font-family: var(--font-mono);
+      font-size: 0.85rem;
+      line-height: 1.45;
+      background: rgba(2, 6, 23, 0.7) !important;
+      color: #e2e8f0 !important;
+    }
+
+    /* Ask Questions — vertical stack, equal-width fields (match API key step) */
+    html[data-mode="QA"] #askForm,
+    html[data-mode="System Chart Extraction"] #askForm {
+      display: flex !important;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 16px;
+      max-width: 520px;
+    }
+
+    html[data-mode="QA"] #askForm .form-inputs,
+    html[data-mode="System Chart Extraction"] #askForm .form-inputs {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 16px;
+      width: 100%;
+      flex-grow: 0;
+    }
+
+    html[data-mode="QA"] #databaseContainer,
+    html[data-mode="System Chart Extraction"] #databaseContainer,
+    html[data-mode="QA"] #visualizationContainer,
+    html[data-mode="System Chart Extraction"] #visualizationContainer,
+    html[data-mode="QA"] #questionContainer,
+    html[data-mode="System Chart Extraction"] #questionContainer {
+      width: 100%;
+      max-width: 100%;
+    }
+
+    html[data-mode="QA"] #databaseContainer label,
+    html[data-mode="System Chart Extraction"] #databaseContainer label {
+      display: flex;
+      flex-direction: column;
+      gap: 0.45rem;
+      width: 100%;
+      font-weight: 600;
+    }
+
+    html[data-mode="QA"] #databaseSelect,
+    html[data-mode="System Chart Extraction"] #databaseSelect {
+      width: 100% !important;
+      min-height: 110px !important;
+      box-sizing: border-box;
+    }
+
+    /* Multi-select listboxes (Databases) — light-theme rules force white option
+       backgrounds; without these overrides, white ink on white options is
+       invisible (esp. Safari / native listboxes). */
+    html[data-mode="QA"] select[multiple],
+    html[data-mode="System Chart Extraction"] select[multiple],
+    html[data-mode="Hypotheses Generation"] select[multiple],
+    html[data-mode="QA"] #databaseSelect,
+    html[data-mode="System Chart Extraction"] #databaseSelect {
+      background-color: rgba(15, 23, 42, 0.85) !important;
+      color: #f8fafc !important;
+      border: 1px solid var(--border-strong) !important;
+      color-scheme: dark;
+    }
+
+    html[data-mode="QA"] select[multiple] option,
+    html[data-mode="System Chart Extraction"] select[multiple] option,
+    html[data-mode="Hypotheses Generation"] select[multiple] option,
+    html[data-mode="QA"] select option,
+    html[data-mode="System Chart Extraction"] select option,
+    html[data-mode="Hypotheses Generation"] select option {
+      background-color: #121826 !important;
+      color: #f8fafc !important;
+    }
+
+    html[data-mode="QA"] select[multiple] option:checked,
+    html[data-mode="System Chart Extraction"] select[multiple] option:checked,
+    html[data-mode="Hypotheses Generation"] select[multiple] option:checked {
+      background-color: var(--primary) !important;
+      background: linear-gradient(0deg, var(--primary) 0%, var(--primary) 100%) !important;
+      color: #ffffff !important;
+    }
+
+    html[data-mode="QA"] select[multiple] option:hover,
+    html[data-mode="System Chart Extraction"] select[multiple] option:hover,
+    html[data-mode="Hypotheses Generation"] select[multiple] option:hover {
+      background-color: rgba(148, 163, 184, 0.18) !important;
+    }
+
+    /* QA question field — full-width, roomy textarea */
+    html[data-mode="QA"] #questionContainer {
+      width: 100%;
+      margin-top: 0;
+    }
+
+    html[data-mode="QA"] #questionLabel {
+      display: block;
+      margin-bottom: 0.45rem;
+      font-weight: 600;
+      color: var(--text);
+    }
+
+    html[data-mode="QA"] #questionInput {
+      display: block;
+      width: 100%;
+      min-height: 96px;
+      resize: vertical;
+      padding: 14px 16px !important;
+      font-size: 1rem !important;
+      line-height: 1.5;
+      border-radius: 14px !important;
+      background-color: rgba(15, 23, 42, 0.85) !important;
+      border: 1px solid var(--border-strong) !important;
+      color: var(--text) !important;
+      box-sizing: border-box;
+    }
+
+    html[data-mode="QA"] #questionInput::placeholder {
+      color: var(--muted);
+      opacity: 0.85;
+    }
+
+    html[data-mode="QA"] #questionInput:focus {
+      border-color: var(--primary) !important;
+      box-shadow: 0 0 0 3px var(--focus-ring) !important;
+      outline: none;
+    }
+
+    html[data-mode="QA"] #original-paper-content-input,
+    html[data-mode="System Chart Extraction"] #original-paper-content-input,
+    html[data-mode="Hypotheses Generation"] #original-paper-content-input {
+      min-height: 200px;
     }
 
     html[data-mode="QA"] form input[type="file"],
@@ -1596,6 +1890,15 @@
       color: var(--muted);
     }
 
+    /* Single-select dropdown chrome (model / conversation pickers) */
+    html[data-mode="QA"] select:not([multiple]),
+    html[data-mode="System Chart Extraction"] select:not([multiple]),
+    html[data-mode="Hypotheses Generation"] select:not([multiple]) {
+      background-color: rgba(15, 23, 42, 0.7) !important;
+      color: #f8fafc !important;
+      color-scheme: dark;
+    }
+
     html[data-mode="QA"] form input:focus,
     html[data-mode="QA"] form select:focus,
     html[data-mode="QA"] form textarea:focus,
@@ -1610,36 +1913,163 @@
       box-shadow: 0 0 0 3px var(--focus-ring);
     }
 
-    /* Buttons */
+    /* Submit / Upload / Ask — same size, left-aligned across all modes */
+    html[data-mode="QA"] #modelSubmitButton,
+    html[data-mode="QA"] #uploadForm button[type="submit"],
+    html[data-mode="QA"] #askForm > button[type="submit"],
+    html[data-mode="System Chart Extraction"] #modelSubmitButton,
+    html[data-mode="System Chart Extraction"] #uploadForm button[type="submit"],
+    html[data-mode="System Chart Extraction"] #askForm > button[type="submit"],
+    html[data-mode="Hypotheses Generation"] #modelSubmitButton,
+    html[data-mode="Hypotheses Generation"] #uploadForm button[type="submit"],
+    html[data-mode="Hypotheses Generation"] #askForm > button[type="submit"] {
+      width: 140px !important;
+      min-width: 140px !important;
+      max-width: 140px !important;
+      height: 44px !important;
+      padding: 0 20px !important;
+      margin: 0 !important;
+      margin-left: 0 !important;
+      margin-top: 4px !important;
+      align-self: flex-start !important;
+      box-sizing: border-box;
+      display: inline-flex !important;
+      align-items: center;
+      justify-content: center;
+    }
+
+    html[data-mode="QA"] .api-key-actions,
+    html[data-mode="System Chart Extraction"] .api-key-actions,
+    html[data-mode="Hypotheses Generation"] .api-key-actions,
+    html[data-mode="QA"] .upload-panel-grid .upload-actions,
+    html[data-mode="System Chart Extraction"] .upload-panel-grid .upload-actions,
+    html[data-mode="Hypotheses Generation"] .upload-panel-grid .upload-actions {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 20px;
+    }
+
+    html[data-mode="QA"] #askForm > button[type="submit"],
+    html[data-mode="System Chart Extraction"] #askForm > button[type="submit"],
+    html[data-mode="Hypotheses Generation"] #askForm > button[type="submit"] {
+      align-self: flex-start !important;
+      margin-top: 4px !important;
+    }
+
+    /* Buttons — PlotExtract .primary, keeping each mode's accent pair */
+    html[data-mode="QA"] form button:not(.ghost),
     html[data-mode="QA"] form button[type="submit"],
     html[data-mode="QA"] button.primary,
+    html[data-mode="QA"] #start-hypothesis-conversation-btn,
+    html[data-mode="QA"] #send-hypothesis-message-btn,
+    html[data-mode="QA"] #loadConversationBtn,
+    html[data-mode="System Chart Extraction"] form button:not(.ghost),
     html[data-mode="System Chart Extraction"] form button[type="submit"],
     html[data-mode="System Chart Extraction"] button.primary,
+    html[data-mode="System Chart Extraction"] #start-hypothesis-conversation-btn,
+    html[data-mode="System Chart Extraction"] #send-hypothesis-message-btn,
+    html[data-mode="System Chart Extraction"] #loadConversationBtn,
+    html[data-mode="Hypotheses Generation"] form button:not(.ghost),
     html[data-mode="Hypotheses Generation"] form button[type="submit"],
-    html[data-mode="Hypotheses Generation"] button.primary {
+    html[data-mode="Hypotheses Generation"] button.primary,
+    html[data-mode="Hypotheses Generation"] #start-hypothesis-conversation-btn,
+    html[data-mode="Hypotheses Generation"] #send-hypothesis-message-btn,
+    html[data-mode="Hypotheses Generation"] #loadConversationBtn {
       background: linear-gradient(120deg, var(--primary), var(--accent-2)) !important;
       color: #fff !important;
       border: none !important;
-      padding: 0.6rem 1.4rem;
-      border-radius: var(--radius-sm);
+      padding: 12px 26px !important;
+      border-radius: 12px !important;
       font-weight: 600;
       cursor: pointer;
-      box-shadow: 0 8px 24px var(--accent-shadow);
-      transition: transform 0.15s ease, box-shadow 0.15s ease;
-    }
-
-    html[data-mode="QA"] form button[type="submit"]:hover:not(:disabled),
-    html[data-mode="System Chart Extraction"] form button[type="submit"]:hover:not(:disabled),
-    html[data-mode="Hypotheses Generation"] form button[type="submit"]:hover:not(:disabled) {
+      box-shadow: 0 10px 30px var(--accent-shadow);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    html[data-mode="QA"] form button:not(.ghost):hover:not(:disabled),
+    html[data-mode="QA"] #start-hypothesis-conversation-btn:hover:not(:disabled),
+    html[data-mode="QA"] #send-hypothesis-message-btn:hover:not(:disabled),
+    html[data-mode="QA"] #loadConversationBtn:hover:not(:disabled),
+    html[data-mode="System Chart Extraction"] form button:not(.ghost):hover:not(:disabled),
+    html[data-mode="System Chart Extraction"] #start-hypothesis-conversation-btn:hover:not(:disabled),
+    html[data-mode="System Chart Extraction"] #send-hypothesis-message-btn:hover:not(:disabled),
+    html[data-mode="System Chart Extraction"] #loadConversationBtn:hover:not(:disabled),
+    html[data-mode="Hypotheses Generation"] form button:not(.ghost):hover:not(:disabled),
+    html[data-mode="Hypotheses Generation"] #start-hypothesis-conversation-btn:hover:not(:disabled),
+    html[data-mode="Hypotheses Generation"] #send-hypothesis-message-btn:hover:not(:disabled),
+    html[data-mode="Hypotheses Generation"] #loadConversationBtn:hover:not(:disabled) {
       transform: translateY(-1px);
-      box-shadow: 0 12px 30px var(--accent-shadow);
+      box-shadow: 0 12px 34px var(--accent-shadow);
     }
 
-    html[data-mode="QA"] form button[type="submit"]:disabled,
-    html[data-mode="System Chart Extraction"] form button[type="submit"]:disabled,
-    html[data-mode="Hypotheses Generation"] form button[type="submit"]:disabled {
-      opacity: 0.55;
+    html[data-mode="QA"] form button:not(.ghost):disabled,
+    html[data-mode="System Chart Extraction"] form button:not(.ghost):disabled,
+    html[data-mode="Hypotheses Generation"] form button:not(.ghost):disabled {
+      opacity: 0.6;
       cursor: not-allowed;
+      transform: none;
+    }
+
+    /* PlotExtract .ghost (Show / Hide key) */
+    html[data-mode="QA"] .ghost,
+    html[data-mode="System Chart Extraction"] .ghost,
+    html[data-mode="Hypotheses Generation"] .ghost {
+      background: transparent !important;
+      border: 1px solid var(--border) !important;
+      color: var(--text) !important;
+      padding: 10px 14px !important;
+      border-radius: 12px !important;
+      cursor: pointer;
+      font-weight: 500;
+      box-shadow: none !important;
+      transition: border 0.2s ease, color 0.2s ease;
+      white-space: nowrap;
+    }
+
+    html[data-mode="QA"] .ghost:hover,
+    html[data-mode="System Chart Extraction"] .ghost:hover,
+    html[data-mode="Hypotheses Generation"] .ghost:hover {
+      border-color: var(--accent-2) !important;
+      color: var(--accent-2) !important;
+      transform: none;
+      box-shadow: none !important;
+    }
+
+    html[data-mode="QA"] #apiKeyForm,
+    html[data-mode="System Chart Extraction"] #apiKeyForm,
+    html[data-mode="Hypotheses Generation"] #apiKeyForm {
+      display: block !important;
+      flex-wrap: nowrap;
+    }
+
+    html[data-mode="QA"] .api-key-stack,
+    html[data-mode="System Chart Extraction"] .api-key-stack,
+    html[data-mode="Hypotheses Generation"] .api-key-stack {
+      max-width: 520px;
+    }
+
+    html[data-mode="QA"] .api-key-stack .input-row,
+    html[data-mode="System Chart Extraction"] .api-key-stack .input-row,
+    html[data-mode="Hypotheses Generation"] .api-key-stack .input-row {
+      align-items: stretch;
+      flex-wrap: nowrap;
+    }
+
+    html[data-mode="QA"] .api-key-stack .input-row input,
+    html[data-mode="System Chart Extraction"] .api-key-stack .input-row input,
+    html[data-mode="Hypotheses Generation"] .api-key-stack .input-row input {
+      flex: 1;
+      min-width: 0;
+    }
+
+    html[data-mode="QA"] #modelSelect,
+    html[data-mode="System Chart Extraction"] #modelSelect,
+    html[data-mode="Hypotheses Generation"] #modelSelect {
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      background-image: none !important;
     }
 
     /* Provider badge + model status (used in API key form) */
@@ -1686,42 +2116,47 @@
       color: #34d399;
     }
 
-    /* Advanced parameter rows */
-    html[data-mode="QA"] .advanced-params-content,
-    html[data-mode="System Chart Extraction"] .advanced-params-content,
-    html[data-mode="Hypotheses Generation"] .advanced-params-content {
-      background: var(--surface-soft);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-md);
-    }
-
-    html[data-mode="QA"] .advanced-param-row,
-    html[data-mode="System Chart Extraction"] .advanced-param-row,
-    html[data-mode="Hypotheses Generation"] .advanced-param-row {
-      color: var(--text);
-    }
-
-    html[data-mode="QA"] .advanced-param-value,
-    html[data-mode="System Chart Extraction"] .advanced-param-value,
-    html[data-mode="Hypotheses Generation"] .advanced-param-value {
-      color: var(--muted);
-    }
-
     html[data-mode="QA"] details summary,
     html[data-mode="System Chart Extraction"] details summary,
     html[data-mode="Hypotheses Generation"] details summary {
       color: var(--text);
     }
 
-    /* Chat / message areas */
+    /* Chat / message areas — PlotExtract .preview surface */
     html[data-mode="QA"] #chat-area,
     html[data-mode="System Chart Extraction"] #chat-area,
     html[data-mode="Hypotheses Generation"] #chat-area {
-      background: var(--surface-soft);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-md);
-      padding: 1rem;
+      background: rgba(11, 13, 18, 0.72) !important;
+      border: 1px solid var(--border) !important;
+      border-radius: 14px;
+      padding: 20px;
       color: var(--text);
+      margin-top: 1.25rem;
+      min-height: 120px;
+      box-shadow: none;
+    }
+
+    /* Hide empty message panes until a conversation starts */
+    #chat-area:empty,
+    #hypothesis-chat-messages:empty,
+    #conversation-messages:empty {
+      display: none !important;
+    }
+
+    html[data-mode="QA"] #hypothesis-chat-messages,
+    html[data-mode="QA"] #conversation-messages,
+    html[data-mode="System Chart Extraction"] #hypothesis-chat-messages,
+    html[data-mode="System Chart Extraction"] #conversation-messages,
+    html[data-mode="Hypotheses Generation"] #hypothesis-chat-messages,
+    html[data-mode="Hypotheses Generation"] #conversation-messages {
+      background: rgba(11, 13, 18, 0.55) !important;
+      border: 1px solid var(--border) !important;
+      border-radius: 14px !important;
+      padding: 1rem !important;
+      max-height: 400px;
+      overflow-y: auto;
+      margin-bottom: 10px;
+      color: var(--text) !important;
     }
 
     html[data-mode="QA"] .user-bubble,
@@ -1730,6 +2165,7 @@
       background: linear-gradient(160deg, var(--chat-user-top), var(--chat-user-bottom));
       border: 1px solid var(--chat-user-border);
       color: var(--text);
+      box-shadow: none;
     }
 
     html[data-mode="QA"] .ai-bubble,
@@ -1738,6 +2174,7 @@
       background: linear-gradient(160deg, var(--chat-ai-top), var(--chat-ai-bottom));
       border: 1px solid var(--chat-ai-border);
       color: var(--text);
+      box-shadow: none;
     }
 
     html[data-mode="QA"] .error-bubble,
@@ -1751,16 +2188,266 @@
     html[data-mode="QA"] .references-section,
     html[data-mode="System Chart Extraction"] .references-section,
     html[data-mode="Hypotheses Generation"] .references-section {
-      background: var(--surface-soft);
-      border: 1px solid var(--border);
-      box-shadow: var(--shadow-sm);
       color: var(--text);
     }
+    html[data-mode="QA"] .references-section h2,
     html[data-mode="QA"] .references-section h3,
+    html[data-mode="System Chart Extraction"] .references-section h2,
     html[data-mode="System Chart Extraction"] .references-section h3,
+    html[data-mode="Hypotheses Generation"] .references-section h2,
     html[data-mode="Hypotheses Generation"] .references-section h3 {
       color: var(--text);
-      border-bottom-color: var(--primary);
+      border-bottom: none;
+      margin-bottom: 0.75rem;
+    }
+
+    html[data-mode="QA"] .mode-footer,
+    html[data-mode="System Chart Extraction"] .mode-footer,
+    html[data-mode="Hypotheses Generation"] .mode-footer {
+      margin-top: 0;
+      text-align: center;
+      color: var(--muted);
+      font-size: 0.9rem;
+      line-height: 1.6;
+      max-width: 920px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    html[data-mode="QA"] .info-box,
+    html[data-mode="QA"] #openaiOnlyBanner .info-box,
+    html[data-mode="System Chart Extraction"] .info-box,
+    html[data-mode="System Chart Extraction"] #openaiOnlyBanner .info-box,
+    html[data-mode="Hypotheses Generation"] .info-box,
+    html[data-mode="Hypotheses Generation"] #openaiOnlyBanner .info-box {
+      background: var(--primary-soft) !important;
+      border-left: 4px solid var(--primary) !important;
+      border-radius: 12px;
+      color: var(--text) !important;
+    }
+
+    html[data-mode="QA"] .model-selection-banner h2,
+    html[data-mode="QA"] #openaiOnlyBanner h2,
+    html[data-mode="System Chart Extraction"] .model-selection-banner h2,
+    html[data-mode="System Chart Extraction"] #openaiOnlyBanner h2,
+    html[data-mode="Hypotheses Generation"] .model-selection-banner h2,
+    html[data-mode="Hypotheses Generation"] #openaiOnlyBanner h2 {
+      color: var(--text) !important;
+      font-family: var(--font-display);
+      font-size: 1.25rem;
+    }
+
+    html[data-mode="QA"] .model-selection-banner,
+    html[data-mode="QA"] #openaiOnlyBanner,
+    html[data-mode="System Chart Extraction"] .model-selection-banner,
+    html[data-mode="System Chart Extraction"] #openaiOnlyBanner,
+    html[data-mode="Hypotheses Generation"] .model-selection-banner,
+    html[data-mode="Hypotheses Generation"] #openaiOnlyBanner {
+      background: var(--surface-strong) !important;
+      border: 1px solid rgba(148, 163, 184, 0.2) !important;
+      border-radius: 16px;
+      color: var(--text);
+      text-align: left;
+      padding: 18px;
+      margin-bottom: 0.5rem;
+    }
+
+    html[data-mode="QA"] .qa-result-card,
+    html[data-mode="System Chart Extraction"] .qa-result-card,
+    html[data-mode="Hypotheses Generation"] .qa-result-card {
+      background: var(--surface-strong);
+      border: 1px solid rgba(148, 163, 184, 0.2);
+      border-left: 4px solid var(--primary);
+      color: var(--text);
+    }
+
+    html[data-mode="QA"] .qa-response,
+    html[data-mode="QA"] .qa-response .qa-p,
+    html[data-mode="QA"] .qa-response .qa-h,
+    html[data-mode="System Chart Extraction"] .qa-response,
+    html[data-mode="System Chart Extraction"] .qa-response .qa-p,
+    html[data-mode="System Chart Extraction"] .qa-response .qa-h,
+    html[data-mode="Hypotheses Generation"] .qa-response,
+    html[data-mode="Hypotheses Generation"] .qa-response .qa-p,
+    html[data-mode="Hypotheses Generation"] .qa-response .qa-h {
+      color: var(--text);
+    }
+
+    html[data-mode="QA"] .qa-response .qa-blockquote,
+    html[data-mode="System Chart Extraction"] .qa-response .qa-blockquote,
+    html[data-mode="Hypotheses Generation"] .qa-response .qa-blockquote {
+      background: var(--primary-soft);
+      color: var(--muted);
+      border-left-color: var(--primary);
+    }
+
+    html[data-mode="QA"] .qa-response .qa-code-inline,
+    html[data-mode="System Chart Extraction"] .qa-response .qa-code-inline,
+    html[data-mode="Hypotheses Generation"] .qa-response .qa-code-inline {
+      background: rgba(15, 23, 42, 0.85);
+      color: #e2e8f0;
+      border-color: var(--border);
+    }
+
+    html[data-mode="QA"] .qa-response .qa-table-wrap,
+    html[data-mode="System Chart Extraction"] .qa-response .qa-table-wrap,
+    html[data-mode="Hypotheses Generation"] .qa-response .qa-table-wrap {
+      background: var(--surface-strong);
+      border-color: var(--border);
+    }
+
+    html[data-mode="QA"] .qa-response .qa-table th,
+    html[data-mode="System Chart Extraction"] .qa-response .qa-table th,
+    html[data-mode="Hypotheses Generation"] .qa-response .qa-table th {
+      background: var(--primary-soft);
+      color: var(--text);
+      border-bottom-color: var(--border);
+    }
+
+    html[data-mode="QA"] .qa-response .qa-table td,
+    html[data-mode="System Chart Extraction"] .qa-response .qa-table td,
+    html[data-mode="Hypotheses Generation"] .qa-response .qa-table td {
+      border-bottom-color: var(--border);
+      color: var(--muted);
+    }
+
+    html[data-mode="QA"] .qa-sources-body,
+    html[data-mode="System Chart Extraction"] .qa-sources-body,
+    html[data-mode="Hypotheses Generation"] .qa-sources-body {
+      background: var(--surface-soft);
+      border-color: var(--border);
+      color: var(--muted);
+    }
+
+    /* Dropzone + stacks (PlotExtract upload chrome; accent border uses mode primary) */
+    html[data-mode="QA"] .stack,
+    html[data-mode="System Chart Extraction"] .stack,
+    html[data-mode="Hypotheses Generation"] .stack {
+      display: grid;
+      gap: 12px;
+    }
+
+    html[data-mode="QA"] .stack.compact .hint,
+    html[data-mode="System Chart Extraction"] .stack.compact .hint,
+    html[data-mode="Hypotheses Generation"] .stack.compact .hint {
+      margin-bottom: 6px;
+    }
+
+    html[data-mode="QA"] .upload-panel-grid,
+    html[data-mode="System Chart Extraction"] .upload-panel-grid {
+      display: grid !important;
+      grid-template-columns: 1fr;
+      gap: 16px;
+      align-items: stretch;
+      margin-top: 12px;
+      max-width: 520px;
+    }
+
+    html[data-mode="QA"] .upload-panel-grid .stack,
+    html[data-mode="System Chart Extraction"] .upload-panel-grid .stack,
+    html[data-mode="QA"] .upload-panel-grid input[type="text"],
+    html[data-mode="System Chart Extraction"] .upload-panel-grid input[type="text"],
+    html[data-mode="QA"] .upload-panel-grid .dropzone,
+    html[data-mode="System Chart Extraction"] .upload-panel-grid .dropzone {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    html[data-mode="Hypotheses Generation"] .upload-panel-grid {
+      display: grid !important;
+      grid-template-columns: repeat(2, minmax(240px, 1fr));
+      gap: 24px;
+      align-items: start;
+      margin-top: 12px;
+    }
+
+    html[data-mode="QA"] .upload-panel-grid .upload-actions,
+    html[data-mode="System Chart Extraction"] .upload-panel-grid .upload-actions,
+    html[data-mode="Hypotheses Generation"] .upload-panel-grid .upload-actions {
+      grid-column: 1 / -1;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      margin-top: 20px;
+    }
+
+    html[data-mode="QA"] .dropzone,
+    html[data-mode="System Chart Extraction"] .dropzone,
+    html[data-mode="Hypotheses Generation"] .dropzone {
+      position: relative;
+      border: 1px dashed color-mix(in srgb, var(--primary) 70%, transparent);
+      border-radius: 16px;
+      padding: 18px;
+      min-height: 140px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(15, 23, 42, 0.4);
+      transition: border 0.2s ease, transform 0.2s ease;
+    }
+
+    html[data-mode="QA"] .dropzone.tall,
+    html[data-mode="System Chart Extraction"] .dropzone.tall,
+    html[data-mode="Hypotheses Generation"] .dropzone.tall {
+      min-height: 200px;
+    }
+
+    html[data-mode="QA"] .dropzone input[type="file"],
+    html[data-mode="System Chart Extraction"] .dropzone input[type="file"],
+    html[data-mode="Hypotheses Generation"] .dropzone input[type="file"] {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      cursor: pointer;
+      width: 100%;
+      height: 100%;
+      padding: 0 !important;
+      border: none !important;
+      background: transparent !important;
+    }
+
+    html[data-mode="QA"] .dropzone-content,
+    html[data-mode="System Chart Extraction"] .dropzone-content,
+    html[data-mode="Hypotheses Generation"] .dropzone-content {
+      text-align: center;
+      pointer-events: none;
+    }
+
+    html[data-mode="QA"] .dropzone-content p,
+    html[data-mode="System Chart Extraction"] .dropzone-content p,
+    html[data-mode="Hypotheses Generation"] .dropzone-content p {
+      margin: 0 0 8px;
+      color: var(--text);
+    }
+
+    html[data-mode="QA"] .small,
+    html[data-mode="System Chart Extraction"] .small,
+    html[data-mode="Hypotheses Generation"] .small {
+      font-size: 0.85rem;
+      color: var(--muted);
+    }
+
+    html[data-mode="QA"] #adminFab,
+    html[data-mode="System Chart Extraction"] #adminFab,
+    html[data-mode="Hypotheses Generation"] #adminFab {
+      background: var(--surface);
+      color: var(--text);
+      border: 1px solid var(--border);
+      box-shadow: var(--shadow-sm);
+    }
+
+    @media (max-width: 720px) {
+      html[data-mode="QA"] .upload-panel-grid,
+      html[data-mode="System Chart Extraction"] .upload-panel-grid,
+      html[data-mode="Hypotheses Generation"] .upload-panel-grid {
+        grid-template-columns: 1fr;
+      }
+
+      html[data-mode="QA"] #app,
+      html[data-mode="System Chart Extraction"] #app,
+      html[data-mode="Hypotheses Generation"] #app {
+        padding: 28px 16px 48px;
+      }
     }
     html[data-mode="QA"] .reference-item,
     html[data-mode="System Chart Extraction"] .reference-item,
@@ -1820,49 +2507,27 @@
       color: var(--muted);
     }
 
-    /* Buttons embedded inline (Start hypothesis chat, Send, Load conversation, Submit follow-up) */
-    html[data-mode="QA"] #start-hypothesis-conversation-btn,
-    html[data-mode="QA"] #send-hypothesis-message-btn,
-    html[data-mode="QA"] #loadConversationBtn,
-    html[data-mode="System Chart Extraction"] #start-hypothesis-conversation-btn,
-    html[data-mode="System Chart Extraction"] #send-hypothesis-message-btn,
-    html[data-mode="System Chart Extraction"] #loadConversationBtn,
-    html[data-mode="Hypotheses Generation"] #start-hypothesis-conversation-btn,
-    html[data-mode="Hypotheses Generation"] #send-hypothesis-message-btn,
-    html[data-mode="Hypotheses Generation"] #loadConversationBtn {
-      background: linear-gradient(120deg, var(--primary), var(--accent-2)) !important;
-      color: #fff !important;
-      border: none !important;
-      box-shadow: 0 8px 24px var(--accent-shadow);
-    }
-
-    /* Section panels with hardcoded f8f9fa backgrounds */
-    html[data-mode="QA"] #hypothesesContainer > div,
-    html[data-mode="QA"] #conversation-section > div,
-    html[data-mode="QA"] #hypotheses-conversation-section > div,
-    html[data-mode="System Chart Extraction"] #hypothesesContainer > div,
-    html[data-mode="System Chart Extraction"] #conversation-section > div,
-    html[data-mode="System Chart Extraction"] #hypotheses-conversation-section > div,
-    html[data-mode="Hypotheses Generation"] #hypothesesContainer > div,
-    html[data-mode="Hypotheses Generation"] #conversation-section > div,
-    html[data-mode="Hypotheses Generation"] #hypotheses-conversation-section > div {
-      background: var(--surface) !important;
-      border: 1px solid var(--border) !important;
-      box-shadow: var(--shadow-sm);
-    }
-
     html[data-mode="QA"] #visualizationContainer,
     html[data-mode="System Chart Extraction"] #visualizationContainer,
     html[data-mode="Hypotheses Generation"] #visualizationContainer {
-      background: var(--surface) !important;
-      border: 1px solid var(--border) !important;
-      box-shadow: var(--shadow-sm);
+      background: var(--surface-strong) !important;
+      border: 1px solid rgba(148, 163, 184, 0.2) !important;
+      border-radius: 16px;
+      padding: 14px 16px;
+      box-shadow: none;
+      min-width: 0;
+      width: 100%;
+      box-sizing: border-box;
+      flex-shrink: 1;
+      margin: 0;
     }
 
     html[data-mode="QA"] #visualizationContainer label,
     html[data-mode="System Chart Extraction"] #visualizationContainer label,
     html[data-mode="Hypotheses Generation"] #visualizationContainer label {
       color: var(--text) !important;
+      white-space: normal;
+      align-items: flex-start;
     }
 
     /* h4 inside the hypothesis/conversation panes */
@@ -2066,6 +2731,20 @@
     html[data-mode="Hypotheses Generation"] .step-number-default { display: none; }
     html[data-mode="Hypotheses Generation"] .step-number-hypotheses { display: inline; }
 
+    /* Per-mode footer disclaimers (PlotExtract-style) */
+    .mode-footer {
+      display: none;
+      margin-top: 2rem;
+      text-align: center;
+      color: var(--muted);
+      font-size: 0.9rem;
+    }
+    html[data-mode="QA"] #qaFooter,
+    html[data-mode="System Chart Extraction"] #systemChartFooter,
+    html[data-mode="Hypotheses Generation"] #hypothesesFooter {
+      display: block;
+    }
+
   </style>
 </head>
 <body>
@@ -2091,265 +2770,207 @@
       </button>
     </div>
   </div>
+  <div class="app-glow" aria-hidden="true"></div>
   <div id="app">
-    <!-- Header Section -->
-    <div class="app-header">
-      <h1 id="appTitle">Chatbot</h1>
-      <p>Upload PDF or text files, select a model, and ask questions!</p>
-    </div>
-
-    <div class="model-selection-banner" id="openaiOnlyBanner">
-      <h2>Proprietary Models</h2>
-      <div class="info-box">
-        <strong>Note:</strong> This deployment supports proprietary models with your API key.
+    <!-- Header — PlotExtract-style brand/hero -->
+    <header class="app-header">
+      <div class="brand">
+        <span id="appTitle">Chatbot</span>
       </div>
-    </div>
+      <p class="subhead">Upload PDF or text files, select a model, and ask questions!</p>
+    </header>
+
+    <!-- Setup panel: API key + upload -->
+    <section class="panel" id="setupPanel">
+      <div class="section-title">1) Set API Key</div>
+      <form id="apiKeyForm">
+        <div class="stack compact api-key-stack">
+          <label class="label" id="apiKeyLabel" for="apiKeyInput">API Key</label>
+          <div class="input-row">
+            <input type="password" id="apiKeyInput" name="api_key_input" placeholder="sk-ant-..., sk-proj-..., or Gemini key" autocomplete="off">
+            <button class="ghost" id="toggleKey" type="button">Show</button>
+          </div>
+          <p class="hint left">We never store your key. It is used only for Anthropic, OpenAI, or Google Gemini API requests.</p>
 
-    <!-- API Key Form -->
-    <div class="section-title">1) Set API Key</div>
-    <form id="apiKeyForm">
-      <div class="form-inputs">
-        <label id="apiKeyLabel">
-          API Key:
-          <input type="password" id="apiKeyInput" name="api_key_input" placeholder="sk-... (OpenAI), sk-ant-... (Anthropic), or AIza... (Gemini)" autocomplete="off">
-        </label>
-        <div id="providerBadge" class="provider-badge" data-provider="">Provider: —</div>
-        <label>
-          Model:
+          <label class="label" for="modelSelect">Model</label>
           <select name="model" id="modelSelect" disabled>
             <option value="">Enter API key to load models</option>
           </select>
           <span id="modelStatus" class="model-status"></span>
-        </label>
-        <details id="advancedParameters">
-          <summary>Advanced parameter selection</summary>
-          <div class="advanced-params-content" id="advancedParamsContent">
-            <div class="advanced-param-row" data-param="temperature">
-              <div class="advanced-param-meta">
-                <span>Temperature</span>
-                <span class="advanced-param-value" id="temperatureValue">1.00</span>
-              </div>
-              <input type="range" name="temperature" id="temperatureInput" min="0" max="2" step="0.01" value="1">
-            </div>
+        </div>
+        <div class="actions api-key-actions">
+          <button type="submit" id="modelSubmitButton">Submit</button>
+        </div>
+      </form>
 
-            <div class="advanced-param-row" data-param="top_p">
-              <div class="advanced-param-meta">
-                <span>Top P</span>
-                <span class="advanced-param-value" id="topPValue">1.00</span>
-              </div>
-              <input type="range" name="top_p" id="topPInput" min="0" max="1" step="0.01" value="1">
-            </div>
+      <hr id="uploadSectionDivider">
 
-            <label class="advanced-param-row" data-param="verbosity">
-              <div class="advanced-param-meta">
-                <span>Verbosity</span>
+      <div id="uploadSection">
+        <div class="section-title">2) Upload Files</div>
+        <p class="hint left">If the number of files is greater than 1000, please upload a zip file instead.</p>
+        <form id="uploadForm" class="upload-panel-grid">
+          <div class="stack compact">
+            <label class="label" for="categoryInput">Database</label>
+            <input type="text" name="category" id="categoryInput" value="my-database">
+          </div>
+          <div class="stack">
+            <div class="dropzone tall" id="uploadDropzone">
+              <input type="file" name="files" id="filesInput" multiple accept=".pdf,.txt,.text,.png,.jpg,.jpeg,.gif,.bmp,.tiff,.webp,.zip,application/zip">
+              <div class="dropzone-content">
+                <p>Drag & drop or click to upload files.</p>
+                <span class="small">PDF, TXT, images, or ZIP. For &gt;1000 files, use a ZIP.</span>
               </div>
-              <select name="verbosity" id="verbosityInput">
-                <option value="low">low</option>
-                <option value="medium" selected>medium</option>
-                <option value="high">high</option>
+            </div>
+          </div>
+          <div class="actions upload-actions">
+            <button type="submit">Upload</button>
+          </div>
+        </form>
+      </div>
+    </section>
+
+    <!-- Workspace panel: ask + chat + continuations -->
+    <section class="panel" id="workspacePanel">
+      <div class="section-title"><span class="step-number-default">3)</span><span class="step-number-hypotheses">2)</span> Ask Questions</div>
+      <form id="askForm">
+        <div class="form-inputs">
+          <div id="databaseContainer">
+            <label for="databaseSelect">
+              Databases:
+              <select name="categories" id="databaseSelect" multiple>
+                <option value="my-database">my-database</option>
               </select>
+              <small class="hint left">Hold Ctrl/Cmd to select multiple databases</small>
             </label>
+          </div>
+          <input type="hidden" name="goal" id="goalInput" value="">
 
-            <label class="advanced-param-row" data-param="reasoning_effort">
-              <div class="advanced-param-meta">
-                <span>Reasoning Effort</span>
-              </div>
-              <select name="reasoning_effort" id="reasoningEffortInput">
-                <option value="">Default</option>
-                <option value="minimal">minimal</option>
-                <option value="low">low</option>
-                <option value="medium">medium</option>
-                <option value="high">high</option>
-              </select>
+          <div id="visualizationContainer" style="display: none;">
+            <label style="display: flex; align-items: center; font-weight: 500; margin-bottom: 0;">
+              <input type="checkbox" name="enable_visualization" id="enableVisualization">
+              Enable visualization of extracted system charts
             </label>
+          </div>
 
-            <label class="advanced-param-row" data-param="thinking_level">
-              <div class="advanced-param-meta">
-                <span>Thinking Level</span>
-              </div>
-              <select name="thinking_level" id="thinkingLevelInput">
-                <option value="high">high</option>
-              </select>
+          <div id="hypothesesContainer" style="display: none;">
+            <div class="result-card hypotheses-options">
+              <label style="display: block; margin-bottom: 8px;">
+                System Charts Files:
+                <input type="file" id="systemChartsFile" accept=".txt" multiple style="margin-top: 4px; width: 100%;">
+                <small class="hint left">Select multiple .txt files containing system charts, generated by the System Chart Extraction tool.</small>
+              </label>
+              <label style="display: block; margin-bottom: 8px;">
+                Mechanism 1:
+                <input type="text" id="materialGoal1" placeholder="e.g., property #1 for xxx material" style="margin-top: 4px; width: 100%; padding: 6px;">
+              </label>
+              <label style="display: block; margin-bottom: 8px;">
+                Mechanism 2:
+                <input type="text" id="materialGoal2" placeholder="e.g., property #2 for xxx material" style="margin-top: 4px; width: 100%; padding: 6px;">
+              </label>
+              <label style="display: block; margin-bottom: 0;">
+                Number of Iterations:
+                <input type="number" id="iterationsCount" min="1" max="100" value="1" placeholder="1" style="margin-top: 4px; width: 100%; padding: 6px;">
+                <small class="hint left">Generate multiple hypothesis iterations (1-100)</small>
+              </label>
+            </div>
+          </div>
+
+          <div id="questionContainer">
+            <label id="questionLabel" for="questionInput">
+              Question:
             </label>
+            <textarea id="questionInput" name="question" rows="3" placeholder="Type your question here..."></textarea>
           </div>
-        </details>
-      </div>
-      <button type="submit" id="modelSubmitButton">Submit</button>
-    </form>
+        </div>
 
-    <hr id="uploadSectionDivider">
+        <button type="submit">Ask</button>
+      </form>
 
-    <!-- File Upload Form -->
-    <div id="uploadSection">
-      <div class="section-title">2) Upload Files</div>
-      <p style="font-size: 0.9rem; color: #666; margin-bottom: 0.5rem;">If the number of files is greater than 1000, please upload a zip file instead.</p>
-      <form id="uploadForm">
-        <label>
-          Database:
-          <input type="text" name="category" value="my-database">
-        </label>
+      <div id="chat-area"></div>
 
-        <label>
-          Select File(s) (.pdf, .txt, .zip, etc.):
-          <input type="file" name="files" multiple accept=".pdf,.txt,.text,.png,.jpg,.jpeg,.gif,.bmp,.tiff,.webp,.zip,application/zip">
-        </label>
-        <button type="submit">Upload</button>
-      </form>
+      <div id="hypotheses-conversation-section" style="display: none;">
+        <hr>
+        <div class="section-title">Continue Hypothesis Analysis</div>
+        <div class="result-card">
+          <p class="hint left">
+            Paste any generated hypothesis below to start a continuous conversation with the original papers and system charts.
+          </p>
 
-      <hr>
-    </div>
+          <div style="margin-bottom: 15px;">
+            <label class="label" for="hypothesis-text-input">Hypothesis Text:</label>
+            <textarea id="hypothesis-text-input" placeholder="Paste your hypothesis here..."></textarea>
+          </div>
 
-    <!-- Ask Question Form -->
-    <div class="section-title"><span class="step-number-default">3)</span><span class="step-number-hypotheses">2)</span> Ask Questions</div>
-    <form id="askForm">
-      <div class="form-inputs">
-        <div id="databaseContainer">
-          <label>
-            Databases:
-            <select name="categories" id="databaseSelect" multiple style="min-height: 80px; width: 200px;">
-              <option value="my-database">my-database</option>
-            </select>
-            <small style="color: #666; font-size: 0.8rem;">Hold Ctrl/Cmd to select multiple databases</small>
-          </label>
-        </div>
-        <input type="hidden" name="goal" id="goalInput" value="">
-        
-        <!-- Add the visualization options container -->
-        <div id="visualizationContainer" style="display: none;">
-          <label style="display: flex; align-items: center; font-weight: 500; margin-bottom: 0;">
-            <input type="checkbox" name="enable_visualization" id="enableVisualization">
-            Enable visualization of extracted system charts
-          </label>
-        </div>
-        
-        <!-- Add the hypotheses generation options container -->
-        <div id="hypothesesContainer" style="display: none;">
-          <div style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 12px 15px; margin: 5px 0; min-width: 280px; flex-shrink: 0;">
-            <label style="display: block; margin-bottom: 8px;">
-              System Charts Files:
-              <input type="file" id="systemChartsFile" accept=".txt" multiple style="margin-top: 4px; width: 100%;">
-              <small style="color: #666; font-size: 0.8rem;">Select multiple .txt files containing system charts</small>
-            </label>
-            <label style="display: block; margin-bottom: 8px;">
-              Mechanism 1:
-              <input type="text" id="materialGoal1" placeholder="e.g., property #1 for xxx material" style="margin-top: 4px; width: 100%; padding: 6px;">
-            </label>
-            <label style="display: block; margin-bottom: 8px;">
-              Mechanism 2:
-              <input type="text" id="materialGoal2" placeholder="e.g., property #2 for xxx material" style="margin-top: 4px; width: 100%; padding: 6px;">
-            </label>
-            <label style="display: block; margin-bottom: 0;">
-              Number of Iterations:
-              <input type="number" id="iterationsCount" min="1" max="100" value="1" placeholder="1" style="margin-top: 4px; width: 100%; padding: 6px;">
-              <small style="color: #666; font-size: 0.8rem;">Generate multiple hypothesis iterations (1-100)</small>
-            </label>
+          <div style="margin-bottom: 15px;">
+            <label class="label" for="original-paper-content-input">Original Paper Content:</label>
+            <textarea id="original-paper-content-input" placeholder="Paste the original paper content you want to reference here..."></textarea>
+            <small class="hint left">
+              Instead of automatically retrieving papers from the database, manually paste the content of the original papers you want to reference in your hypothesis analysis.
+            </small>
           </div>
-        </div>
-        
-        <div id="questionContainer">
-          <label id="questionLabel">
-            Question:
-            <input type="text" name="question" placeholder="Type your question here...">
-          </label>
-        </div>
-      </div>
-      
-      <button type="submit">Ask</button>
-    </form>
-
-    <!-- Chat Area BELOW the question input bar -->
-    <div id="chat-area"></div>
-
-    <!-- Hypotheses Continuous Conversation Section -->
-    <div id="hypotheses-conversation-section" style="display: none;">
-      <hr style="margin: 2rem 0;">
-      <div class="section-title">Continue Hypothesis Analysis</div>
-      <div style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;">
-        <p style="margin: 0 0 0.5rem 0; color: #666; font-size: 0.9rem;">
-          Paste any generated hypothesis below to start a continuous conversation with the original papers and system charts.
-        </p>
-        
-        <div style="margin-bottom: 15px;">
-          <label style="display: block; margin-bottom: 5px; font-weight: bold;">Hypothesis Text:</label>
-          <textarea id="hypothesis-text-input" placeholder="Paste your hypothesis here..." style="width: 100%; height: 120px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.4; resize: vertical;"></textarea>
-        </div>
-        
-        <div style="margin-bottom: 15px;">
-          <label style="display: block; margin-bottom: 5px; font-weight: bold;">Original Paper Content:</label>
-          <textarea id="original-paper-content-input" placeholder="Paste the original paper content you want to reference here..." style="width: 100%; height: 200px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.4; resize: vertical;"></textarea>
-          <small style="color: #666; font-size: 0.85rem; display: block; margin-top: 5px;">
-            Instead of automatically retrieving papers from the database, manually paste the content of the original papers you want to reference in your hypothesis analysis.
-          </small>
-        </div>
-        
-        <button id="start-hypothesis-conversation-btn" style="background-color: #4285F4; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">
-          Start Hypothesis Conversation
-        </button>
-        
-        <div id="hypothesis-conversation-status" style="display: none; margin-top: 10px; padding: 10px; border-radius: 4px;">
-          <!-- Status messages will be populated here -->
-        </div>
-      </div>
-      
-      <div id="hypothesis-conversation-chat" style="display: none; margin-top: 15px;">
-        <h4 style="margin: 0 0 10px 0; color: #333;">Hypothesis Analysis Chat:</h4>
-        <div id="hypothesis-chat-messages" style="background-color: #fafafa; border: 1px solid #eee; border-radius: 4px; padding: 1rem; max-height: 400px; overflow-y: auto; margin-bottom: 10px;">
-          <!-- Messages will be populated here -->
-        </div>
-        <div style="display: flex; gap: 10px;">
-          <input type="text" id="hypothesis-chat-input" placeholder="Ask about this hypothesis..." style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
-          <button id="send-hypothesis-message-btn" style="background-color: #4285F4; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">
-            Send
+
+          <button id="start-hypothesis-conversation-btn" type="button">
+            Start Hypothesis Conversation
           </button>
-        </div>
-      </div>
-    </div>
 
-    <!-- Conversation Continuation Section -->
-    <div id="conversation-section" style="display: none;">
-      <hr style="margin: 2rem 0;">
-      <div class="section-title">Continue System Chart Extraction Conversations</div>
-      <div style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;">
-        <p style="margin: 0 0 0.5rem 0; color: #666; font-size: 0.9rem;">
-          After system chart extraction, you can continue conversations with the AI about individual papers.
-        </p>
-        <form id="conversationForm">
-          <div style="display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1rem;">
-            <label style="flex: 1;">
-              Select Paper Conversation:
-              <select id="conversationSelect" style="width: 100%; padding: 0.5rem; margin-top: 0.3rem; border: 1px solid #ddd; border-radius: 4px;">
-                <option value="">Select a paper to continue conversation...</option>
-              </select>
-            </label>
-            <button type="button" id="loadConversationBtn" style="padding: 0.5rem 1rem; background-color: #4285F4; color: white; border: none; border-radius: 4px; cursor: pointer;">
-              Load Conversation
-            </button>
+          <div id="hypothesis-conversation-status" style="display: none; margin-top: 10px; padding: 10px; border-radius: 4px;">
           </div>
-          <div id="followUpContainer" style="display: none;">
-            <label>
-              Follow-up Question:
-              <input type="text" id="followUpQuestion" placeholder="Ask a follow-up question about this paper..." style="width: 100%; padding: 0.5rem; margin-top: 0.3rem; border: 1px solid #ddd; border-radius: 4px;">
-            </label>
-            <button type="submit" style="margin-top: 0.5rem; padding: 0.5rem 1rem; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
-              Continue Conversation
+        </div>
+
+        <div id="hypothesis-conversation-chat" style="display: none; margin-top: 15px;">
+          <h4 class="panel-subtitle">Hypothesis Analysis Chat:</h4>
+          <div id="hypothesis-chat-messages"></div>
+          <div class="input-row">
+            <input type="text" id="hypothesis-chat-input" placeholder="Ask about this hypothesis...">
+            <button id="send-hypothesis-message-btn" type="button">
+              Send
             </button>
           </div>
-        </form>
+        </div>
       </div>
-      
-      <!-- Conversation History Display -->
-      <div id="conversation-history" style="display: none;">
-        <h4 style="margin: 1rem 0 0.5rem 0; color: #333;">Conversation History:</h4>
-        <div id="conversation-messages" style="background-color: #fafafa; border: 1px solid #eee; border-radius: 4px; padding: 1rem; max-height: 400px; overflow-y: auto;">
-          <!-- Messages will be populated here -->
+
+      <div id="conversation-section" style="display: none;">
+        <hr>
+        <div class="section-title">Continue System Chart Extraction Conversations</div>
+        <div class="result-card">
+          <p class="hint left">
+            After system chart extraction, you can continue conversations with the AI about individual papers.
+          </p>
+          <form id="conversationForm">
+            <div class="input-row conversation-load-row">
+              <label style="flex: 1;">
+                Select Paper Conversation:
+                <select id="conversationSelect">
+                  <option value="">Select a paper to continue conversation...</option>
+                </select>
+              </label>
+              <button type="button" id="loadConversationBtn">
+                Load Conversation
+              </button>
+            </div>
+            <div id="followUpContainer" style="display: none;">
+              <label>
+                Follow-up Question:
+                <input type="text" id="followUpQuestion" placeholder="Ask a follow-up question about this paper...">
+              </label>
+              <button type="submit">
+                Continue Conversation
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <div id="conversation-history" style="display: none;">
+          <h4 class="panel-subtitle">Conversation History:</h4>
+          <div id="conversation-messages"></div>
         </div>
       </div>
-    </div>
+    </section>
 
-    <!-- References Section -->
-    <div class="references-section" id="referencesSection">
-      <h3>References</h3>
+    <section class="panel references-section" id="referencesSection">
+      <div class="panel-head">
+        <h2>References</h2>
+      </div>
 
       <div class="reference-item" id="systemChartReference">
         <span class="category-label">System Chart Extraction:</span> Liu, Q., Polak, M. P., Shuvo, M. A. A., Deodhar, H. S., Han, J., Morgan, D., & Oh, H. (2025, October). Automated extraction of materials system charts using a large language model framework. <em>Scripta Materialia</em>. Elsevier BV. http://doi.org/10.1016/j.scriptamat.2025.116815
@@ -2357,7 +2978,33 @@
       <div class="reference-item" id="hypothesesReference">
         <span class="category-label">Hypotheses Generation:</span> Liu, Q., Polak, M. P., Kim, S. Y., Shuvo, M. A. A., Deodhar, H. S., Han, J., … Oh, H. (2025, September). Beyond designer's knowledge: Generating materials design hypotheses via a large language model. <em>Acta Materialia</em>. Elsevier BV. http://doi.org/10.1016/j.actamat.2025.121307
       </div>
-    </div>
+    </section>
+
+    <footer class="mode-footer footer" id="qaFooter">
+      <p>
+        This tool lets you upload research papers and ask questions about them; answers are grounded
+        in the content of your uploaded documents. It works best with clear, specific questions about
+        machine-readable PDFs. Because answers are generated by LLMs, they can contain mistakes or
+        omissions and are not guaranteed to be correct. Always verify important information against
+        the original papers before using it for analysis, reporting, or decision-making.
+      </p>
+    </footer>
+    <footer class="mode-footer footer" id="systemChartFooter">
+      <p>
+        This tool automatically extracts materials system charts, the relationships linking
+        processing, structure, and properties, from uploaded research papers. Because extraction relies on LLMs, results can contain mistakes, omissions, or formatting issues and are not guaranteed to be correct. Always review and verify the extracted
+        charts against the original papers before using them for analysis or reporting.
+      </p>
+    </footer>
+    <footer class="mode-footer footer" id="hypothesesFooter">
+      <p>
+        This tool generates materials design hypotheses by synergistically combining materials system charts, helping you explore directions beyond your existing
+        knowledge. Generated hypotheses are produced by LLMs and are not guaranteed to be
+        scientifically valid or novel, so please take the
+        results with caution. Always apply domain expertise and verify against the literature before acting
+        on any hypothesis.
+      </p>
+    </footer>
 
   </div>
 
@@ -2399,17 +3046,16 @@
       if (appTitle) {
         appTitle.textContent = window.selectedMode;
       }
-      updateQuestionVisibility();
-      const modelSelect = document.getElementById('modelSelect');
-      if (modelSelect) {
-        configureAdvancedControlsForModel(modelSelect.value);
-        if (window.selectedMode === 'QA') {
-          const advancedParameters = document.getElementById('advancedParameters');
-          if (advancedParameters) {
-            advancedParameters.style.display = 'block';
-          }
-        }
+      const subhead = document.querySelector('#app .app-header .subhead');
+      if (subhead) {
+        const subheads = {
+          'QA': 'Upload research papers, select a model, and ask questions across your documents.',
+          'System Chart Extraction': 'Upload papers, select a model, and extract materials system charts linking processing, structure, and properties.',
+          'Hypotheses Generation': 'Provide system charts and mechanisms, select a model, and generate materials design hypotheses.'
+        };
+        subhead.textContent = subheads[window.selectedMode] || subhead.textContent;
       }
+      updateQuestionVisibility();
     }
 
     function setupModeSelection() {
@@ -2437,180 +3083,7 @@
 
     document.addEventListener('DOMContentLoaded', setupModeSelection);
 
-    // ========================
-    // Handle model selection panel
-    // ========================
-    const MODEL_ADVANCED_CONFIG = {
-      "gpt-5-nano": {
-        visible: ["reasoning_effort", "verbosity"],
-        defaults: { reasoning_effort: "medium", verbosity: "medium" },
-        options: {
-          reasoning_effort: ["minimal", "low", "medium", "high"],
-          verbosity: ["low", "medium", "high"]
-        }
-      },
-      "gpt-5-mini": {
-        visible: ["reasoning_effort", "verbosity"],
-        defaults: { reasoning_effort: "medium", verbosity: "medium" },
-        options: {
-          reasoning_effort: ["minimal", "low", "medium", "high"],
-          verbosity: ["low", "medium", "high"]
-        }
-      },
-      "gpt-5.2": {
-        visible: ["reasoning_effort", "verbosity"],
-        defaults: { reasoning_effort: "medium", verbosity: "medium" },
-        options: {
-          reasoning_effort: ["none", "low", "medium", "high", "xhigh"],
-          verbosity: ["low", "medium", "high"]
-        }
-      },
-      "gemini-2.5-flash-lite": {
-        visible: ["temperature", "top_p"],
-        defaults: { temperature: 1.0, top_p: 0.95 },
-        options: {}
-      },
-      "gemini-3-flash-preview": {
-        visible: ["temperature", "top_p", "thinking_level"],
-        defaults: { temperature: 1.0, top_p: 0.95, thinking_level: "high" },
-        options: {
-          thinking_level: ["minimal", "low", "medium", "high"]
-        }
-      },
-      "gemini-3-pro-preview": {
-        visible: ["temperature", "top_p", "thinking_level"],
-        defaults: { temperature: 1.0, top_p: 0.95, thinking_level: "high" },
-        options: {
-          thinking_level: ["low", "high"]
-        }
-      }
-    };
-
-    function getModelAdvancedConfig(modelName) {
-      if (MODEL_ADVANCED_CONFIG[modelName]) return MODEL_ADVANCED_CONFIG[modelName];
-      const m = (modelName || '').toLowerCase();
-      // Pattern fallback so dynamically-fetched models still surface a sensible advanced-params UI.
-      if (m.includes('gpt-5')) {
-        return {
-          visible: ["reasoning_effort", "verbosity"],
-          defaults: { reasoning_effort: "medium", verbosity: "medium" },
-          options: { reasoning_effort: ["minimal", "low", "medium", "high"], verbosity: ["low", "medium", "high"] }
-        };
-      }
-      if (m.includes('gpt')) {
-        return { visible: ["temperature", "top_p"], defaults: { temperature: 1.0, top_p: 1.0 }, options: {} };
-      }
-      if (m.includes('gemini') && m.includes('pro')) {
-        return {
-          visible: ["temperature", "top_p", "thinking_level"],
-          defaults: { temperature: 1.0, top_p: 0.95, thinking_level: "high" },
-          options: { thinking_level: ["low", "high"] }
-        };
-      }
-      if (m.includes('gemini')) {
-        return { visible: ["temperature", "top_p"], defaults: { temperature: 1.0, top_p: 0.95 }, options: {} };
-      }
-      if (m.includes('claude')) {
-        return { visible: ["temperature", "top_p"], defaults: { temperature: 1.0, top_p: 1.0 }, options: {} };
-      }
-      return { visible: [], defaults: {}, options: {} };
-    }
-
-    function setSelectOptions(selectElement, options, defaultValue) {
-      if (!selectElement) return;
-      selectElement.innerHTML = '';
-      options.forEach((optionValue) => {
-        const option = document.createElement('option');
-        option.value = optionValue;
-        option.textContent = optionValue;
-        if (optionValue === defaultValue) {
-          option.selected = true;
-        }
-        selectElement.appendChild(option);
-      });
-      if (defaultValue && options.includes(defaultValue)) {
-        selectElement.value = defaultValue;
-      }
-    }
-
-    function applyAdvancedDefaultsForModel(modelName) {
-      const config = getModelAdvancedConfig(modelName);
-      const defaults = config.defaults || {};
-      const options = config.options || {};
-
-      const temperatureInput = document.getElementById('temperatureInput');
-      const topPInput = document.getElementById('topPInput');
-      const temperatureValue = document.getElementById('temperatureValue');
-      const topPValue = document.getElementById('topPValue');
-      const reasoningEffortInput = document.getElementById('reasoningEffortInput');
-      const verbosityInput = document.getElementById('verbosityInput');
-      const thinkingLevelInput = document.getElementById('thinkingLevelInput');
-
-      if (options.reasoning_effort) {
-        setSelectOptions(reasoningEffortInput, options.reasoning_effort, defaults.reasoning_effort);
-      }
-      if (options.verbosity) {
-        setSelectOptions(verbosityInput, options.verbosity, defaults.verbosity);
-      }
-      if (options.thinking_level) {
-        setSelectOptions(thinkingLevelInput, options.thinking_level, defaults.thinking_level);
-      }
-
-      if (typeof defaults.temperature === 'number') {
-        temperatureInput.value = defaults.temperature.toFixed(2);
-      }
-      if (typeof defaults.top_p === 'number') {
-        topPInput.value = defaults.top_p.toFixed(2);
-      }
-
-      temperatureValue.textContent = Number(temperatureInput.value).toFixed(2);
-      topPValue.textContent = Number(topPInput.value).toFixed(2);
-    }
-
-    function setAdvancedParamVisibilityForModel(modelName) {
-      const advancedParameters = document.getElementById('advancedParameters');
-      const visibleParams = getModelAdvancedConfig(modelName).visible || [];
-      const rows = advancedParameters.querySelectorAll('[data-param]');
-      advancedParameters.style.display = 'block';
-
-      rows.forEach((row) => {
-        const paramName = row.getAttribute('data-param');
-        const isVisible = visibleParams.includes(paramName);
-        row.style.display = isVisible ? 'flex' : 'none';
-        row.querySelectorAll('input, select').forEach((el) => {
-          el.disabled = !isVisible;
-        });
-      });
-    }
-
-    function configureAdvancedControlsForModel(modelName) {
-      applyAdvancedDefaultsForModel(modelName);
-      setAdvancedParamVisibilityForModel(modelName);
-    }
-
-    function initializeAdvancedParameterControls() {
-      const temperatureInput = document.getElementById('temperatureInput');
-      const topPInput = document.getElementById('topPInput');
-      const temperatureValue = document.getElementById('temperatureValue');
-      const topPValue = document.getElementById('topPValue');
-
-      temperatureInput.addEventListener('input', () => {
-        temperatureValue.textContent = Number(temperatureInput.value).toFixed(2);
-      });
-
-      topPInput.addEventListener('input', () => {
-        topPValue.textContent = Number(topPInput.value).toFixed(2);
-      });
-
-      temperatureValue.textContent = Number(temperatureInput.value).toFixed(2);
-      topPValue.textContent = Number(topPInput.value).toFixed(2);
-
-      const selectedModel = document.getElementById('modelSelect').value;
-      configureAdvancedControlsForModel(selectedModel);
-    }
-
     document.addEventListener('DOMContentLoaded', () => {
-      initializeAdvancedParameterControls();
       setupApiKeyAutoLoad();
     });
 
@@ -2662,12 +3135,9 @@
     function setupApiKeyAutoLoad() {
       const apiKeyInput = document.getElementById('apiKeyInput');
       const modelSelect = document.getElementById('modelSelect');
+      const toggleKeyBtn = document.getElementById('toggleKey');
       if (!apiKeyInput || !modelSelect) return;
 
-      modelSelect.addEventListener('change', () => {
-        configureAdvancedControlsForModel(modelSelect.value);
-      });
-
       apiKeyInput.addEventListener('input', () => {
         const provider = detectProviderFromKey(apiKeyInput.value);
         if (provider) {
@@ -2685,6 +3155,14 @@
       apiKeyInput.addEventListener('blur', () => {
         loadModelsForKey();
       });
+
+      if (toggleKeyBtn) {
+        toggleKeyBtn.addEventListener('click', () => {
+          const isPassword = apiKeyInput.type === 'password';
+          apiKeyInput.type = isPassword ? 'text' : 'password';
+          toggleKeyBtn.textContent = isPassword ? 'Hide' : 'Show';
+        });
+      }
     }
 
     async function loadModelsForKey({ silent = false } = {}) {
@@ -2737,7 +3215,6 @@
         }
         modelSelect.disabled = false;
         modelSelect.value = data.default_model || models[0].id;
-        configureAdvancedControlsForModel(modelSelect.value);
 
         _modelsLoadedForKey = key;
         setProviderBadge(data.provider, data.provider_label);

main.py

@@ -675,6 +675,10 @@ AVAILABLE_MODELS = OPENAI_MODELS + GEMINI_MODELS
 DEFAULT_MODEL = "gpt-5.2"
 DEFAULT_MODEL_QA = DEFAULT_MODEL
 DEFAULT_MODEL_SYSTEM_CHART_EXTRACTION = DEFAULT_MODEL
+# Shared output-length cap for QA, system chart extraction, and hypotheses.
+# LangChain's max_tokens maps to provider-specific names:
+# Anthropic max_tokens, OpenAI max_output_tokens / max_completion_tokens, Gemini maxOutputTokens.
+DEFAULT_MAX_OUTPUT_TOKENS = 8192
 
 # -------------- Global placeholders (ensure they're declared) -------------- #
 api_key = None
@@ -854,83 +858,6 @@ def choose_default_model(models: List[Dict[str, str]], provider: str) -> str:
             return max(pros, key=priority)["id"]
     return max(models, key=priority)["id"]
 
-MODEL_ADVANCED_PARAMETERS: Dict[str, Dict[str, Any]] = {
-    "gpt-5-nano": {
-        "reasoning_effort": {"choices": ["minimal", "low", "medium", "high"]},
-        "verbosity": {"choices": ["low", "medium", "high"]},
-    },
-    "gpt-5-mini": {
-        "reasoning_effort": {"choices": ["minimal", "low", "medium", "high"]},
-        "verbosity": {"choices": ["low", "medium", "high"]},
-    },
-    "gpt-5.2": {
-        "reasoning_effort": {"choices": ["none", "low", "medium", "high", "xhigh"]},
-        "verbosity": {"choices": ["low", "medium", "high"]},
-    },
-    "gemini-2.5-flash-lite": {
-        "temperature": {"min": 0.0, "max": 2.0},
-        "top_p": {"min": 0.0, "max": 1.0},
-    },
-    "gemini-3-flash-preview": {
-        "temperature": {"min": 0.0, "max": 2.0},
-        "top_p": {"min": 0.0, "max": 1.0},
-        "thinking_level": {"choices": ["minimal", "low", "medium", "high"]},
-    },
-    "gemini-3-pro-preview": {
-        "temperature": {"min": 0.0, "max": 2.0},
-        "top_p": {"min": 0.0, "max": 1.0},
-        "thinking_level": {"choices": ["low", "high"]},
-    },
-}
-
-
-def get_model_advanced_parameter_rules(model: str) -> Dict[str, Any]:
-    if model in MODEL_ADVANCED_PARAMETERS:
-        return MODEL_ADVANCED_PARAMETERS[model]
-    # Pattern fallback so models fetched live from a provider's API still
-    # surface a sensible advanced-params UI.
-    m = (model or "").lower()
-    if "gpt-5" in m:
-        return {
-            "reasoning_effort": {"choices": ["minimal", "low", "medium", "high"]},
-            "verbosity": {"choices": ["low", "medium", "high"]},
-        }
-    if "gpt" in m:
-        return {
-            "temperature": {"min": 0.0, "max": 2.0},
-            "top_p": {"min": 0.0, "max": 1.0},
-        }
-    if "gemini" in m and "pro" in m:
-        return {
-            "temperature": {"min": 0.0, "max": 2.0},
-            "top_p": {"min": 0.0, "max": 1.0},
-            "thinking_level": {"choices": ["low", "high"]},
-        }
-    if "gemini" in m:
-        return {
-            "temperature": {"min": 0.0, "max": 2.0},
-            "top_p": {"min": 0.0, "max": 1.0},
-        }
-    if "claude" in m:
-        return {
-            "temperature": {"min": 0.0, "max": 1.0},
-            "top_p": {"min": 0.0, "max": 1.0},
-        }
-    return {}
-
-
-def parse_optional_float(value: Optional[str], field_name: str) -> Tuple[Optional[float], Optional[str]]:
-    if value is None:
-        return None, None
-    value_str = value.strip()
-    if not value_str:
-        return None, None
-    try:
-        return float(value_str), None
-    except ValueError:
-        return None, f"Invalid {field_name}: '{value}'."
-
-
 class AsyncEmbeddingAdapter:
     def __init__(self, embedder):
         self._embedder = embedder
@@ -977,11 +904,6 @@ def llm_content_to_text(content: Any) -> str:
 async def set_api_key(
     api_key_input: Optional[str] = Form(None),
     model: str = Form(DEFAULT_MODEL),
-    temperature: Optional[str] = Form(None),
-    top_p: Optional[str] = Form(None),
-    reasoning_effort: Optional[str] = Form(None),
-    verbosity: Optional[str] = Form(None),
-    thinking_level: Optional[str] = Form(None),
 ):
     """
     Sets up global LLM and embeddings for proprietary models.
@@ -1008,7 +930,6 @@ async def set_api_key(
             content={"message": "Please select a model."},
             status_code=400
         )
-    model_advanced_rules = get_model_advanced_parameter_rules(model)
     DEFAULT_MODEL_QA = model
     DEFAULT_MODEL_SYSTEM_CHART_EXTRACTION = model
 
@@ -1019,120 +940,21 @@ async def set_api_key(
                 status_code=400
             )
 
-        llm_config: Dict[str, Any] = {}
-        allowed_advanced_params = set(model_advanced_rules.keys())
-
-        parsed_temperature, temp_error = parse_optional_float(temperature, "temperature")
-        if temp_error:
-            return JSONResponse(content={"message": temp_error}, status_code=400)
-        if parsed_temperature is not None:
-            temperature_rules = model_advanced_rules.get("temperature", {})
-            min_temp = float(temperature_rules.get("min", 0.0))
-            max_temp = float(temperature_rules.get("max", 2.0))
-            if not min_temp <= parsed_temperature <= max_temp:
-                return JSONResponse(
-                    content={"message": f"temperature must be between {min_temp} and {max_temp}."},
-                    status_code=400
-                )
-            if "temperature" not in allowed_advanced_params:
-                return JSONResponse(
-                    content={"message": f"Model '{model}' does not support temperature."},
-                    status_code=400
-                )
-            llm_config["temperature"] = parsed_temperature
-
-        parsed_top_p, top_p_error = parse_optional_float(top_p, "top_p")
-        if top_p_error:
-            return JSONResponse(content={"message": top_p_error}, status_code=400)
-        if parsed_top_p is not None:
-            top_p_rules = model_advanced_rules.get("top_p", {})
-            min_top_p = float(top_p_rules.get("min", 0.0))
-            max_top_p = float(top_p_rules.get("max", 1.0))
-            if not min_top_p <= parsed_top_p <= max_top_p:
-                return JSONResponse(
-                    content={"message": f"top_p must be between {min_top_p} and {max_top_p}."},
-                    status_code=400
-                )
-            if "top_p" not in allowed_advanced_params:
-                return JSONResponse(
-                    content={"message": f"Model '{model}' does not support top_p."},
-                    status_code=400
-                )
-            llm_config["top_p"] = parsed_top_p
-
-        if reasoning_effort:
-            normalized_reasoning_effort = reasoning_effort.strip().lower()
-            if normalized_reasoning_effort:
-                allowed_reasoning_efforts = model_advanced_rules.get("reasoning_effort", {}).get("choices", [])
-                if normalized_reasoning_effort not in allowed_reasoning_efforts:
-                    return JSONResponse(
-                        content={"message": f"Invalid reasoning_effort: '{reasoning_effort}'."},
-                        status_code=400
-                    )
-                if "reasoning_effort" not in allowed_advanced_params:
-                    return JSONResponse(
-                        content={"message": f"Model '{model}' does not support reasoning_effort."},
-                        status_code=400
-                    )
-                llm_config["reasoning_effort"] = normalized_reasoning_effort
-
-        if verbosity:
-            normalized_verbosity = verbosity.strip().lower()
-            if normalized_verbosity:
-                allowed_verbosity = model_advanced_rules.get("verbosity", {}).get("choices", [])
-                if normalized_verbosity not in allowed_verbosity:
-                    return JSONResponse(
-                        content={"message": f"Invalid verbosity: '{verbosity}'."},
-                        status_code=400
-                    )
-                if "verbosity" not in allowed_advanced_params:
-                    return JSONResponse(
-                        content={"message": f"Model '{model}' does not support verbosity."},
-                        status_code=400
-                    )
-                llm_config["verbosity"] = normalized_verbosity
-
-        if thinking_level:
-            normalized_thinking_level = thinking_level.strip().lower()
-            if normalized_thinking_level:
-                allowed_thinking_levels = model_advanced_rules.get("thinking_level", {}).get("choices", [])
-                if normalized_thinking_level not in allowed_thinking_levels:
-                    return JSONResponse(
-                        content={"message": f"Invalid thinking_level: '{thinking_level}'."},
-                        status_code=400
-                    )
-                if "thinking_level" not in allowed_advanced_params:
-                    return JSONResponse(
-                        content={"message": f"Model '{model}' does not support thinking_level."},
-                        status_code=400
-                    )
-                llm_config["thinking_level"] = normalized_thinking_level
-
         if model_provider == "openai":
             embedding_model = OpenAIEmbeddings(openai_api_key=api_key)
             embedding_model = ensure_async_embeddings(embedding_model)
-            openai_model_kwargs: Dict[str, Any] = {}
-            if "reasoning_effort" in llm_config:
-                openai_model_kwargs["reasoning"] = {
-                    "effort": llm_config["reasoning_effort"]
-                }
-            if "verbosity" in llm_config:
-                openai_model_kwargs["text"] = {
-                    "verbosity": llm_config["verbosity"]
-                }
             openai_common_kwargs: Dict[str, Any] = {
                 "openai_api_key": api_key,
                 "model": DEFAULT_MODEL_QA,
-                "use_responses_api": True
+                "use_responses_api": True,
+                "max_tokens": DEFAULT_MAX_OUTPUT_TOKENS,
             }
             openai_chart_kwargs: Dict[str, Any] = {
                 "openai_api_key": api_key,
                 "model": DEFAULT_MODEL_SYSTEM_CHART_EXTRACTION,
-                "use_responses_api": True
+                "use_responses_api": True,
+                "max_tokens": DEFAULT_MAX_OUTPUT_TOKENS,
             }
-            if openai_model_kwargs:
-                openai_common_kwargs["model_kwargs"] = openai_model_kwargs
-                openai_chart_kwargs["model_kwargs"] = openai_model_kwargs
             llm_QA = ChatOpenAI(
                 **openai_common_kwargs
             )
@@ -1155,25 +977,14 @@ async def set_api_key(
             embedding_model = ensure_async_embeddings(embedding_model)
             gemini_common_kwargs: Dict[str, Any] = {
                 "google_api_key": api_key,
-                "model": DEFAULT_MODEL_QA
+                "model": DEFAULT_MODEL_QA,
+                "max_tokens": DEFAULT_MAX_OUTPUT_TOKENS,
             }
             gemini_chart_kwargs: Dict[str, Any] = {
                 "google_api_key": api_key,
-                "model": DEFAULT_MODEL_SYSTEM_CHART_EXTRACTION
+                "model": DEFAULT_MODEL_SYSTEM_CHART_EXTRACTION,
+                "max_tokens": DEFAULT_MAX_OUTPUT_TOKENS,
             }
-            if "temperature" in llm_config:
-                gemini_common_kwargs["temperature"] = llm_config["temperature"]
-                gemini_chart_kwargs["temperature"] = llm_config["temperature"]
-            if "top_p" in llm_config:
-                gemini_common_kwargs["top_p"] = llm_config["top_p"]
-                gemini_chart_kwargs["top_p"] = llm_config["top_p"]
-
-            gemini_model_kwargs: Dict[str, Any] = {}
-            if "thinking_level" in llm_config:
-                gemini_model_kwargs["thinking_level"] = llm_config["thinking_level"]
-            if gemini_model_kwargs:
-                gemini_common_kwargs["model_kwargs"] = gemini_model_kwargs
-                gemini_chart_kwargs["model_kwargs"] = gemini_model_kwargs
             llm_QA = ChatGoogleGenerativeAI(
                 **gemini_common_kwargs
             )
@@ -1192,17 +1003,13 @@ async def set_api_key(
             anthropic_common_kwargs: Dict[str, Any] = {
                 "anthropic_api_key": api_key,
                 "model": DEFAULT_MODEL_QA,
+                "max_tokens": DEFAULT_MAX_OUTPUT_TOKENS,
             }
             anthropic_chart_kwargs: Dict[str, Any] = {
                 "anthropic_api_key": api_key,
                 "model": DEFAULT_MODEL_SYSTEM_CHART_EXTRACTION,
+                "max_tokens": DEFAULT_MAX_OUTPUT_TOKENS,
             }
-            if "temperature" in llm_config:
-                anthropic_common_kwargs["temperature"] = llm_config["temperature"]
-                anthropic_chart_kwargs["temperature"] = llm_config["temperature"]
-            if "top_p" in llm_config:
-                anthropic_common_kwargs["top_p"] = llm_config["top_p"]
-                anthropic_chart_kwargs["top_p"] = llm_config["top_p"]
             llm_QA = ChatAnthropic(**anthropic_common_kwargs)
             llm_system_chart_extraction = ChatAnthropic(**anthropic_chart_kwargs)
             provider_label = "Anthropic"