Update index.html

static/index.html

@@ -6,561 +6,225 @@
   <title>QueryMind — Natural Language to SQL</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
   <style>
-    /* ── Reset & Tokens ─────────────────────────────────────── */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     :root {
-      --bg:       #0a0c10;
-      --surface:  #111318;
-      --card:     #161920;
-      --border:   #23272f;
-      --border2:  #2e3340;
-      --accent:   #00e5a0;
-      --accent2:  #00b87a;
-      --accent-dim: rgba(0,229,160,0.10);
-      --accent-glow: rgba(0,229,160,0.22);
-      --danger:   #ff4d6d;
-      --warn:     #f59e0b;
-      --text:     #e8eaf0;
-      --muted:    #7a8294;
-      --mono:     'Space Mono', monospace;
-      --sans:     'DM Sans', sans-serif;
-      --radius:   10px;
-      --radius-lg:16px;
-    }
-
-    html, body {
-      height: 100%;
-      background: var(--bg);
-      color: var(--text);
-      font-family: var(--sans);
-      font-size: 14px;
-      line-height: 1.6;
-      overflow-x: hidden;
-    }
-
-    /* ── Noise texture overlay ──────────────────────────────── */
-    body::before {
-      content: '';
-      position: fixed; inset: 0;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
-      pointer-events: none;
-      z-index: 9999;
-      opacity: 0.5;
-    }
-
-    /* ── Layout ─────────────────────────────────────────────── */
-    #app {
-      display: grid;
-      grid-template-rows: 56px 1fr;
-      grid-template-columns: 300px 1fr;
-      height: 100vh;
-    }
-
-    /* ── Header ─────────────────────────────────────────────── */
-    header {
-      grid-column: 1 / -1;
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      padding: 0 24px;
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      position: relative;
-      z-index: 10;
-    }
-
-    .logo-icon {
-      width: 28px; height: 28px;
-      background: var(--accent);
-      border-radius: 6px;
-      display: flex; align-items: center; justify-content: center;
-      font-size: 14px;
-      flex-shrink: 0;
-    }
-
-    .logo-text {
-      font-family: var(--mono);
-      font-weight: 700;
-      font-size: 15px;
-      letter-spacing: -0.3px;
-      color: var(--text);
-    }
-
+      --bg:          #1a1814;
+      --surface:     #211f1b;
+      --card:        #272420;
+      --card2:       #2e2b27;
+      --border:      #373330;
+      --border2:     #443f3a;
+      --accent:      #e8a455;
+      --accent2:     #c8843a;
+      --accent-dim:  rgba(232,164,85,0.10);
+      --accent-glow: rgba(232,164,85,0.20);
+      --sql-keyword: #e8a455;
+      --sql-func:    #8ecfa8;
+      --sql-string:  #c8a97e;
+      --sql-num:     #a8c4e0;
+      --sql-comment: #5c5650;
+      --sql-op:      #d4a574;
+      --sql-default: #d4cfc9;
+      --danger:      #c96b5a;
+      --success:     #7ab897;
+      --text:        #e8e0d5;
+      --text2:       #b8afa4;
+      --muted:       #7a7268;
+      --mono:        'JetBrains Mono', monospace;
+      --sans:        'Inter', sans-serif;
+      --radius:      8px;
+      --radius-lg:   14px;
+      --sidebar-w:   280px;
+      --header-h:    54px;
+    }
+
+    html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.6; overflow-x: hidden; }
+
+    #app { display: grid; grid-template-rows: var(--header-h) 1fr; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; }
+
+    /* Header */
+    header { grid-column: 1/-1; display: flex; align-items: center; gap: 12px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border); z-index: 100; }
+    .logo-wrap { display: flex; align-items: center; gap: 10px; }
+    .logo-icon { width: 30px; height: 30px; background: linear-gradient(135deg,var(--accent),var(--accent2)); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
+    .logo-text { font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--text); letter-spacing: -0.2px; }
     .logo-text span { color: var(--accent); }
-
-    .header-badge {
-      margin-left: auto;
-      display: flex; align-items: center; gap: 8px;
-    }
-
-    .badge {
-      font-family: var(--mono);
-      font-size: 10px;
-      padding: 3px 8px;
-      border-radius: 4px;
-      border: 1px solid var(--border2);
-      color: var(--muted);
-      letter-spacing: 0.5px;
-    }
-
-    .badge.active {
-      border-color: var(--accent2);
-      color: var(--accent);
-      background: var(--accent-dim);
-    }
-
-    .status-dot {
-      width: 7px; height: 7px;
-      border-radius: 50%;
-      background: var(--muted);
-      animation: pulse-idle 3s ease-in-out infinite;
-    }
-    .status-dot.ready { background: var(--accent); animation: pulse-green 2s ease-in-out infinite; }
-
-    @keyframes pulse-idle {
-      0%,100% { opacity: 0.5; } 50% { opacity: 1; }
-    }
-    @keyframes pulse-green {
-      0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); }
-      50% { box-shadow: 0 0 0 5px transparent; }
-    }
-
-    /* ── Sidebar ─────────────────────────────────────────────── */
-    aside {
-      background: var(--surface);
-      border-right: 1px solid var(--border);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .aside-section {
-      padding: 18px 16px 14px;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .section-label {
-      font-family: var(--mono);
-      font-size: 9px;
-      letter-spacing: 1.5px;
-      color: var(--muted);
-      text-transform: uppercase;
-      margin-bottom: 10px;
-    }
-
-    /* ── Upload Zone ─────────────────────────────────────────── */
-    .upload-zone {
-      border: 1.5px dashed var(--border2);
-      border-radius: var(--radius);
-      padding: 20px 16px;
-      text-align: center;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      position: relative;
-      background: var(--card);
-    }
-    .upload-zone:hover, .upload-zone.dragover {
-      border-color: var(--accent);
-      background: var(--accent-dim);
-    }
-    .upload-zone input[type="file"] {
-      position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
-    }
-    .upload-icon {
-      font-size: 22px; margin-bottom: 6px;
-      display: block;
-    }
-    .upload-zone p {
-      font-size: 12px; color: var(--muted); line-height: 1.5;
-    }
-    .upload-zone p strong { color: var(--text); font-weight: 500; }
-
-    /* ── File Info Card ──────────────────────────────────────── */
-    #file-info {
-      display: none;
-      background: var(--card);
-      border: 1px solid var(--border2);
-      border-radius: var(--radius);
-      padding: 12px;
-      font-size: 12px;
-    }
+    #menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--text2); font-size: 20px; padding: 4px; margin-right: 4px; }
+    .header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+    .clear-btn { background: none; border: 1px solid var(--border2); color: var(--muted); font-size: 11px; padding: 4px 10px; border-radius: 5px; cursor: pointer; font-family: var(--mono); letter-spacing: 0.5px; transition: all 0.15s; }
+    .clear-btn:hover { border-color: var(--danger); color: #e07a6a; }
+    .status-wrap { display: flex; align-items: center; gap: 6px; }
+    .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 3s ease-in-out infinite; }
+    .status-dot.ready { background: var(--success); animation: pulse-ok 2s ease-in-out infinite; }
+    @keyframes blink { 0%,100%{opacity:.4} 50%{opacity:1} }
+    @keyframes pulse-ok { 0%,100%{box-shadow:0 0 0 0 var(--accent-glow)} 50%{box-shadow:0 0 0 4px transparent} }
+    .badge { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border2); color: var(--muted); letter-spacing: 0.5px; }
+    .badge.active { border-color: var(--accent2); color: var(--accent); background: var(--accent-dim); }
+
+    /* Sidebar */
+    aside { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.25s ease; }
+    .aside-section { padding: 16px 14px 12px; border-bottom: 1px solid var(--border); }
+    .section-label { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; }
+    .upload-zone { border: 1.5px dashed var(--border2); border-radius: var(--radius); padding: 18px 12px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; background: var(--card); }
+    .upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: var(--accent-dim); }
+    .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
+    .upload-icon { font-size: 20px; margin-bottom: 6px; display: block; }
+    .upload-zone p { font-size: 12px; color: var(--muted); line-height: 1.5; }
+    .upload-zone p strong { color: var(--text2); font-weight: 500; }
+    #file-info { display: none; background: var(--card); border: 1px solid var(--border2); border-radius: var(--radius); padding: 11px; font-size: 12px; }
     #file-info.show { display: block; }
-
-    .file-info-row {
-      display: flex; justify-content: space-between;
-      color: var(--muted);
-      margin-bottom: 4px;
-    }
-    .file-info-row span:last-child { color: var(--text); }
-
-    .file-name {
-      font-family: var(--mono);
-      font-size: 11px;
-      color: var(--accent);
-      word-break: break-all;
-      margin-bottom: 8px;
-      font-weight: 700;
-    }
-
-    /* ── Schema Box ──────────────────────────────────────────── */
-    #schema-box {
-      display: none;
-      font-family: var(--mono);
-      font-size: 10px;
-      color: var(--muted);
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 10px;
-      max-height: 120px;
-      overflow-y: auto;
-      white-space: pre-wrap;
-      word-break: break-all;
-      margin-top: 10px;
-      line-height: 1.7;
-    }
+    .file-name { font-family: var(--mono); font-size: 10px; color: var(--accent); word-break: break-all; margin-bottom: 7px; font-weight: 600; }
+    .file-info-row { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 3px; }
+    .file-info-row span:last-child { color: var(--text2); }
+    .schema-label { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin-top: 9px; margin-bottom: 4px; }
+    #schema-box { display: none; font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 8px; max-height: 100px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; line-height: 1.7; }
     #schema-box.show { display: block; }
-
-    .schema-label {
-      font-family: var(--mono);
-      font-size: 9px;
-      letter-spacing: 1px;
-      color: var(--muted);
-      text-transform: uppercase;
-      margin-top: 10px;
-      margin-bottom: 4px;
-    }
-
-    /* ── Suggestions ─────────────────────────────────────────── */
     .aside-section.suggestions { flex: 1; overflow-y: auto; }
-    #suggestions-list { display: flex; flex-direction: column; gap: 6px; }
-    .suggestion-chip {
-      padding: 8px 10px;
-      border-radius: 6px;
-      border: 1px solid var(--border);
-      background: var(--card);
-      font-size: 11px;
-      color: var(--muted);
-      cursor: pointer;
-      transition: all 0.15s;
-      text-align: left;
-      font-family: var(--sans);
-    }
-    .suggestion-chip:hover {
-      border-color: var(--accent2);
-      color: var(--text);
-      background: var(--accent-dim);
-    }
-
-    /* ── Main Panel ──────────────────────────────────────────── */
-    main {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    /* ── Chat Area ───────────────────────────────────────────── */
-    #chat {
-      flex: 1;
-      overflow-y: auto;
-      padding: 20px 24px;
-      display: flex;
-      flex-direction: column;
-      gap: 18px;
-      scroll-behavior: smooth;
-    }
-
-    /* ── Empty state ─────────────────────────────────────────── */
-    #empty-state {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 12px;
-      color: var(--muted);
-    }
-    .empty-icon {
-      font-size: 40px;
-      filter: grayscale(0.5);
-      animation: float 4s ease-in-out infinite;
-    }
-    @keyframes float {
-      0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); }
-    }
-    #empty-state h2 {
-      font-size: 16px;
-      color: var(--text);
-      font-weight: 500;
-    }
-    #empty-state p { font-size: 13px; text-align: center; max-width: 360px; }
-
-    /* ── Message Bubbles ─────────────────────────────────────── */
-    .msg { display: flex; flex-direction: column; gap: 4px; max-width: 800px; }
+    #suggestions-list { display: flex; flex-direction: column; gap: 5px; }
+    .suggestion-chip { padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); font-size: 11px; color: var(--muted); cursor: pointer; transition: all 0.15s; text-align: left; font-family: var(--sans); }
+    .suggestion-chip:hover { border-color: var(--accent2); color: var(--text); background: var(--accent-dim); }
+
+    /* Main */
+    main { display: flex; flex-direction: column; overflow: hidden; }
+    #chat { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
+    #empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: center; }
+    .empty-icon { font-size: 36px; animation: float 4s ease-in-out infinite; }
+    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
+    #empty-state h2 { font-size: 15px; color: var(--text2); font-weight: 500; }
+    #empty-state p { font-size: 12px; max-width: 320px; line-height: 1.7; }
+
+    /* Messages */
+    .msg { display: flex; flex-direction: column; gap: 3px; max-width: 780px; }
     .msg.user { align-self: flex-end; align-items: flex-end; }
     .msg.assistant { align-self: flex-start; align-items: flex-start; }
-
-    .msg-meta {
-      font-size: 10px;
-      color: var(--muted);
-      font-family: var(--mono);
-      padding: 0 4px;
-    }
-
-    .bubble {
-      padding: 12px 16px;
-      border-radius: var(--radius-lg);
-      line-height: 1.6;
-      font-size: 13.5px;
-    }
-    .msg.user .bubble {
-      background: var(--accent);
-      color: #000;
-      border-bottom-right-radius: 4px;
-      font-weight: 500;
-    }
-    .msg.assistant .bubble {
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-bottom-left-radius: 4px;
-      color: var(--text);
-    }
-
-    /* ── SQL Block ───────────────────────────────────────────── */
-    .sql-block {
-      background: var(--bg);
-      border: 1px solid var(--border2);
-      border-radius: var(--radius);
-      margin-top: 10px;
-      overflow: hidden;
-    }
-    .sql-block-header {
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 8px 12px;
-      background: #0d0f14;
-      border-bottom: 1px solid var(--border);
-    }
-    .sql-block-header span {
-      font-family: var(--mono);
-      font-size: 9px;
-      letter-spacing: 1.5px;
-      text-transform: uppercase;
-      color: var(--accent);
-    }
-    .copy-btn {
-      background: none;
-      border: 1px solid var(--border2);
-      color: var(--muted);
-      font-size: 10px;
-      padding: 3px 8px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-family: var(--mono);
-      transition: all 0.15s;
-    }
+    .msg-meta { font-size: 10px; color: var(--muted); font-family: var(--mono); padding: 0 4px; }
+    .bubble { padding: 11px 15px; border-radius: var(--radius-lg); font-size: 13.5px; line-height: 1.65; }
+    .msg.user .bubble { background: linear-gradient(135deg,var(--accent),var(--accent2)); color: #1a1410; border-bottom-right-radius: 4px; font-weight: 500; }
+    .msg.assistant .bubble { background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--text); }
+
+    /* SQL block */
+    .sql-block { background: var(--bg); border: 1px solid var(--border2); border-radius: var(--radius); margin-top: 10px; overflow: hidden; }
+    .sql-block-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; background: var(--card2); border-bottom: 1px solid var(--border); }
+    .sql-block-header span { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
+    .copy-btn { background: none; border: 1px solid var(--border2); color: var(--muted); font-size: 10px; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-family: var(--mono); transition: all 0.15s; }
     .copy-btn:hover { border-color: var(--accent); color: var(--accent); }
-    .sql-code {
-      padding: 14px 16px;
-      font-family: var(--mono);
-      font-size: 12px;
-      color: #a8c0ff;
-      white-space: pre-wrap;
-      word-break: break-word;
-      line-height: 1.8;
-    }
-
-    /* ── Result Table ────────────────────────────────────────── */
-    .result-table-wrap {
-      margin-top: 10px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      overflow: auto;
-      max-height: 320px;
-    }
-    table {
-      width: 100%; border-collapse: collapse;
-      font-size: 12px;
-    }
-    thead th {
-      position: sticky; top: 0;
-      background: #0d0f14;
-      padding: 8px 14px;
-      text-align: left;
-      font-family: var(--mono);
-      font-size: 10px;
-      color: var(--accent);
-      letter-spacing: 0.8px;
-      border-bottom: 1px solid var(--border2);
-      white-space: nowrap;
-    }
+    .sql-code { padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 2; color: var(--sql-default); white-space: pre-wrap; word-break: break-word; }
+    .sql-code .kw { color: var(--sql-keyword); font-weight: 600; }
+    .sql-code .fn { color: var(--sql-func); }
+    .sql-code .st { color: var(--sql-string); }
+    .sql-code .nm { color: var(--sql-num); }
+    .sql-code .cm { color: var(--sql-comment); font-style: italic; }
+    .sql-code .op { color: var(--sql-op); }
+
+    /* Table */
+    .result-table-wrap { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: 300px; }
+    table { width: 100%; border-collapse: collapse; font-size: 12px; }
+    thead th { position: sticky; top: 0; background: var(--card2); padding: 8px 13px; text-align: left; font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.8px; border-bottom: 1px solid var(--border2); white-space: nowrap; }
     tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
     tbody tr:last-child { border-bottom: none; }
-    tbody tr:hover { background: var(--accent-dim); }
-    td { padding: 8px 14px; color: var(--text); white-space: nowrap; }
-
-    .result-count {
-      font-family: var(--mono);
-      font-size: 10px;
-      color: var(--muted);
-      margin-top: 6px;
-      padding-left: 2px;
-    }
-
-    /* ── Error bubble ────────────────────────────────────────── */
-    .error-bubble {
-      background: rgba(255, 77, 109, 0.08);
-      border: 1px solid rgba(255, 77, 109, 0.3);
-      border-radius: var(--radius);
-      padding: 10px 14px;
-      font-size: 12px;
-      color: #ff8fa3;
-      margin-top: 8px;
-      font-family: var(--mono);
-    }
-
-    /* ── Thinking animation ──────────────────────────────────── */
-    .thinking {
-      display: flex; gap: 5px; align-items: center;
-      padding: 12px 16px;
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-lg);
-      border-bottom-left-radius: 4px;
-      width: fit-content;
-    }
-    .thinking span {
-      width: 6px; height: 6px;
-      border-radius: 50%;
-      background: var(--accent);
-      animation: think 1.2s ease-in-out infinite;
-    }
-    .thinking span:nth-child(2) { animation-delay: 0.2s; }
-    .thinking span:nth-child(3) { animation-delay: 0.4s; }
-    @keyframes think {
-      0%,60%,100% { transform: translateY(0); opacity: 0.4; }
-      30% { transform: translateY(-6px); opacity: 1; }
-    }
-
-    /* ── Input Bar ───────────────────────────────────────────── */
-    .input-bar {
-      padding: 14px 24px 16px;
-      background: var(--surface);
-      border-top: 1px solid var(--border);
-    }
-    .input-row {
-      display: flex; gap: 10px; align-items: flex-end;
-    }
-    #question-input {
-      flex: 1;
-      background: var(--card);
-      border: 1.5px solid var(--border2);
-      border-radius: var(--radius);
-      padding: 10px 14px;
-      font-size: 14px;
-      font-family: var(--sans);
-      color: var(--text);
-      resize: none;
-      min-height: 44px;
-      max-height: 120px;
-      outline: none;
-      transition: border-color 0.2s;
-      line-height: 1.5;
-    }
+    tbody tr:hover { background: rgba(232,164,85,0.05); }
+    td { padding: 7px 13px; color: var(--text2); white-space: nowrap; }
+    .result-count { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 5px; padding-left: 2px; }
+    .error-bubble { background: rgba(201,107,90,0.08); border: 1px solid rgba(201,107,90,0.3); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; color: #e07a6a; margin-top: 8px; font-family: var(--mono); }
+
+    /* Thinking */
+    .thinking { display: flex; gap: 5px; align-items: center; padding: 12px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); border-bottom-left-radius: 4px; }
+    .thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: think 1.2s ease-in-out infinite; }
+    .thinking span:nth-child(2){animation-delay:.2s} .thinking span:nth-child(3){animation-delay:.4s}
+    @keyframes think { 0%,60%,100%{transform:translateY(0);opacity:.35} 30%{transform:translateY(-6px);opacity:1} }
+
+    /* Input */
+    .input-bar { padding: 12px 20px 14px; background: var(--surface); border-top: 1px solid var(--border); }
+    .input-row { display: flex; gap: 9px; align-items: flex-end; }
+    #question-input { flex: 1; background: var(--card); border: 1.5px solid var(--border2); border-radius: var(--radius); padding: 10px 13px; font-size: 14px; font-family: var(--sans); color: var(--text); resize: none; min-height: 44px; max-height: 120px; outline: none; transition: border-color 0.2s; line-height: 1.5; }
     #question-input:focus { border-color: var(--accent); }
     #question-input::placeholder { color: var(--muted); }
     #question-input:disabled { opacity: 0.5; cursor: not-allowed; }
+    #send-btn { background: linear-gradient(135deg,var(--accent),var(--accent2)); color: #1a1410; border: none; border-radius: var(--radius); width: 44px; height: 44px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; font-weight: 700; }
+    #send-btn:hover { opacity: 0.88; transform: scale(1.04); }
+    #send-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
+    .input-hint { font-size: 11px; color: var(--muted); margin-top: 5px; padding-left: 2px; }
 
-    #send-btn {
-      background: var(--accent);
-      color: #000;
-      border: none;
-      border-radius: var(--radius);
-      width: 44px; height: 44px;
-      cursor: pointer;
-      font-size: 18px;
-      display: flex; align-items: center; justify-content: center;
-      transition: all 0.2s;
-      flex-shrink: 0;
-      font-weight: 700;
-    }
-    #send-btn:hover { background: var(--accent2); transform: scale(1.05); }
-    #send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
-
-    .input-hint {
-      font-size: 11px;
-      color: var(--muted);
-      margin-top: 6px;
-      padding-left: 2px;
-    }
+    /* Toast */
+    #toast { position: fixed; bottom: 20px; right: 20px; background: var(--card2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 9px 15px; font-size: 12px; font-family: var(--mono); color: var(--text); z-index: 9999; transform: translateY(50px); opacity: 0; transition: all 0.3s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
+    #toast.show { transform: translateY(0); opacity: 1; }
+    #toast.success { border-color: var(--success); color: #8ecfa8; }
+    #toast.error { border-color: var(--danger); color: #e07a6a; }
+
+    /* Loading bar */
+    #loading-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,var(--accent),var(--accent2)); z-index: 10000; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
+    #loading-bar.active { transform: scaleX(0.8); }
+    #loading-bar.done { transform: scaleX(1); opacity: 0; transition: opacity 0.4s 0.1s; }
 
-    /* ── Scrollbar ───────────────────────────────────────────── */
+    /* Scrollbar */
     ::-webkit-scrollbar { width: 5px; height: 5px; }
     ::-webkit-scrollbar-track { background: transparent; }
     ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; }
-    ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
-
-    /* ── Toast ───────────────────────────────────────────────── */
-    #toast {
-      position: fixed; bottom: 24px; right: 24px;
-      background: var(--card);
-      border: 1px solid var(--border2);
-      border-radius: var(--radius);
-      padding: 10px 16px;
-      font-size: 12px;
-      font-family: var(--mono);
-      color: var(--text);
-      z-index: 10000;
-      transform: translateY(60px);
-      opacity: 0;
-      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-      pointer-events: none;
-    }
-    #toast.show { transform: translateY(0); opacity: 1; }
-    #toast.success { border-color: var(--accent2); color: var(--accent); }
-    #toast.error { border-color: var(--danger); color: #ff8fa3; }
-
-    /* ── Loading bar ─────────────────────────────────────────── */
-    #loading-bar {
-      position: fixed; top: 0; left: 0; right: 0;
-      height: 2px;
-      background: linear-gradient(90deg, var(--accent), var(--accent2));
-      z-index: 10001;
-      transform: scaleX(0);
-      transform-origin: left;
-      transition: transform 0.3s ease;
+
+    /* Overlay */
+    #overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 90; }
+    #overlay.show { display: block; }
+
+    /* ── RESPONSIVE ── */
+    @media (max-width: 900px) {
+      :root { --sidebar-w: 240px; }
+      #chat { padding: 14px 16px; }
+      .input-bar { padding: 10px 16px 12px; }
+    }
+
+    @media (max-width: 640px) {
+      :root { --header-h: 50px; }
+      #app { grid-template-columns: 1fr; }
+      #menu-btn { display: flex; }
+      aside { position: fixed; top: var(--header-h); left: 0; width: 280px; height: calc(100vh - var(--header-h)); z-index: 95; transform: translateX(-100%); box-shadow: 4px 0 20px rgba(0,0,0,0.4); }
+      aside.open { transform: translateX(0); }
+      main { grid-column: 1; }
+      .msg { max-width: 95%; }
+      #chat { padding: 12px; gap: 12px; }
+      .bubble { padding: 10px 13px; font-size: 13px; }
+      .sql-code { font-size: 11.5px; padding: 12px; }
+      td, thead th { padding: 7px 10px; }
+      .input-bar { padding: 8px 12px 10px; }
+      .input-hint { display: none; }
+      .status-wrap .badge { display: none; }
+    }
+
+    @media (max-width: 380px) {
+      .logo-text { font-size: 13px; }
+      .clear-btn { padding: 3px 7px; font-size: 10px; }
     }
-    #loading-bar.active { transform: scaleX(0.8); }
-    #loading-bar.done { transform: scaleX(1); transition: transform 0.1s; opacity: 0; transition: opacity 0.4s 0.2s; }
   </style>
 </head>
 <body>
-
 <div id="loading-bar"></div>
 <div id="toast"></div>
+<div id="overlay" onclick="closeSidebar()"></div>
 
 <div id="app">
-  <!-- ── Header ── -->
   <header>
-    <div class="logo-icon">⚡</div>
-    <div class="logo-text">Query<span>Mind</span></div>
-    <div class="header-badge">
-      <button id="clear-btn" onclick="clearChat()" style="background:none;border:1px solid var(--border2);color:var(--muted);font-size:11px;padding:4px 10px;border-radius:5px;cursor:pointer;font-family:var(--mono);letter-spacing:0.5px;transition:all 0.15s;" onmouseover="this.style.borderColor='var(--danger)';this.style.color='#ff8fa3'" onmouseout="this.style.borderColor='var(--border2)';this.style.color='var(--muted)'">CLEAR</button>
-      <span id="status-dot" class="status-dot"></span>
-      <span id="status-label" class="badge">INITIALIZING</span>
+    <button id="menu-btn" onclick="toggleSidebar()">☰</button>
+    <div class="logo-wrap">
+      <div class="logo-icon">⚡</div>
+      <div class="logo-text">Query<span>Mind</span></div>
+    </div>
+    <div class="header-right">
+      <button class="clear-btn" onclick="clearChat()">CLEAR</button>
+      <div class="status-wrap">
+        <span id="status-dot" class="status-dot"></span>
+        <span id="status-label" class="badge">LOADING</span>
+      </div>
     </div>
   </header>
 
-  <!-- ── Sidebar ── -->
-  <aside>
+  <aside id="sidebar">
     <div class="aside-section">
       <div class="section-label">Data Source</div>
       <div class="upload-zone" id="upload-zone">
         <input type="file" id="csv-input" accept=".csv" />
         <span class="upload-icon">📂</span>
-        <p><strong>Drop CSV here</strong><br />or click to browse</p>
+        <p><strong>Drop CSV here</strong><br/>or click to browse</p>
       </div>
       <div id="file-info">
         <div class="file-name" id="file-name-display"></div>
@@ -570,314 +234,171 @@
         <div id="schema-box"></div>
       </div>
     </div>
-
     <div class="aside-section suggestions">
       <div class="section-label">Example Queries</div>
       <div id="suggestions-list">
-        <div class="suggestion-chip" style="color:var(--muted);font-style:italic;">Upload a CSV to see suggestions</div>
+        <div class="suggestion-chip" style="color:var(--muted);font-style:italic;cursor:default;">Upload CSV to see examples</div>
       </div>
     </div>
   </aside>
 
-  <!-- ── Main ── -->
   <main>
     <div id="chat">
       <div id="empty-state">
-        <div class="empty-icon">💬</div>
+        <div class="empty-icon">🗂️</div>
         <h2>Ask anything about your data</h2>
-        <p>Upload a CSV file from the sidebar, then type a question in plain English. QueryMind will convert it to SQL and show you the results.</p>
+        <p>Upload a CSV from the sidebar, then ask a question in plain English. QueryMind converts it to SQL and shows results.</p>
       </div>
     </div>
-
     <div class="input-bar">
       <div class="input-row">
-        <textarea
-          id="question-input"
-          placeholder="Ask a question about your data… e.g. 'Show top 10 rows by sales'"
-          rows="1"
-          disabled
-        ></textarea>
-        <button id="send-btn" disabled title="Send">↑</button>
+        <textarea id="question-input" placeholder="e.g. Show top 10 rows by sales…" rows="1" disabled></textarea>
+        <button id="send-btn" disabled>↑</button>
       </div>
-      <div class="input-hint">Enter to send &nbsp;·&nbsp; Shift+Enter for new line</div>
+      <div class="input-hint">Enter to send &nbsp;·&nbsp; Shift+Enter new line</div>
     </div>
   </main>
 </div>
 
 <script>
-  // ── State ──────────────────────────────────────────────────
-  let sessionId = null;
-  let isLoading = false;
-  let columns = [];
-
-  const chat          = document.getElementById('chat');
-  const emptyState    = document.getElementById('empty-state');
-  const input         = document.getElementById('question-input');
-  const sendBtn       = document.getElementById('send-btn');
-  const csvInput      = document.getElementById('csv-input');
-  const uploadZone    = document.getElementById('upload-zone');
-  const fileInfo      = document.getElementById('file-info');
-  const fileNameDisp  = document.getElementById('file-name-display');
-  const rowCountEl    = document.getElementById('row-count');
-  const colCountEl    = document.getElementById('col-count');
-  const schemaBox     = document.getElementById('schema-box');
-  const suggList      = document.getElementById('suggestions-list');
-  const statusDot     = document.getElementById('status-dot');
-  const statusLabel   = document.getElementById('status-label');
-  const loadingBar    = document.getElementById('loading-bar');
-  const toast         = document.getElementById('toast');
-
-  // ── Health check ────────────────────────────────────────────
-  async function checkHealth() {
-    try {
-      const r = await fetch('/health');
-      const d = await r.json();
-      if (d.status === 'ok') {
-        statusDot.classList.add('ready');
-        statusLabel.textContent = d.model.split('/').pop().toUpperCase();
-        statusLabel.classList.add('active');
-      }
-    } catch {
-      statusLabel.textContent = 'OFFLINE';
-    }
+  let sessionId=null, isLoading=false, columns=[];
+
+  const chat=document.getElementById('chat'), emptyState=document.getElementById('empty-state'),
+    input=document.getElementById('question-input'), sendBtn=document.getElementById('send-btn'),
+    csvInput=document.getElementById('csv-input'), uploadZone=document.getElementById('upload-zone'),
+    fileInfo=document.getElementById('file-info'), fileNameDisp=document.getElementById('file-name-display'),
+    rowCountEl=document.getElementById('row-count'), colCountEl=document.getElementById('col-count'),
+    schemaBox=document.getElementById('schema-box'), suggList=document.getElementById('suggestions-list'),
+    statusDot=document.getElementById('status-dot'), statusLabel=document.getElementById('status-label'),
+    loadingBar=document.getElementById('loading-bar'), toast=document.getElementById('toast'),
+    sidebar=document.getElementById('sidebar'), overlay=document.getElementById('overlay');
+
+  function toggleSidebar(){ sidebar.classList.toggle('open'); overlay.classList.toggle('show'); }
+  function closeSidebar(){ sidebar.classList.remove('open'); overlay.classList.remove('show'); }
+
+  async function checkHealth(){
+    try{
+      const d=await(await fetch('/health')).json();
+      if(d.status==='ok'){ statusDot.classList.add('ready'); statusLabel.textContent=d.model.split('/').pop().toUpperCase(); statusLabel.classList.add('active'); }
+    }catch{ statusLabel.textContent='OFFLINE'; }
   }
   checkHealth();
 
-  // ── Toast ────────────────────────────────────────────────────
   let toastTimer;
-  function showToast(msg, type='success') {
-    toast.textContent = msg;
-    toast.className = `show ${type}`;
-    clearTimeout(toastTimer);
-    toastTimer = setTimeout(() => toast.className = '', 3000);
-  }
+  function showToast(msg,type='success'){ toast.textContent=msg; toast.className=`show ${type}`; clearTimeout(toastTimer); toastTimer=setTimeout(()=>toast.className='',3000); }
 
-  // ── Loading bar ──────────────────────────────────────────────
-  function startLoading() {
-    loadingBar.className = 'active';
-    isLoading = true;
-    sendBtn.disabled = true;
-    input.disabled = true;
-  }
-  function stopLoading() {
-    loadingBar.className = 'done';
-    isLoading = false;
-    if (sessionId) {
-      sendBtn.disabled = false;
-      input.disabled = false;
-    }
-    setTimeout(() => { loadingBar.className = ''; }, 600);
-  }
+  function startLoading(){ loadingBar.className='active'; isLoading=true; sendBtn.disabled=true; input.disabled=true; }
+  function stopLoading(){ loadingBar.className='done'; isLoading=false; if(sessionId){sendBtn.disabled=false;input.disabled=false;} setTimeout(()=>loadingBar.className='',600); }
 
-  // ── Drag & Drop ──────────────────────────────────────────────
-  uploadZone.addEventListener('dragover', e => { e.preventDefault(); uploadZone.classList.add('dragover'); });
-  uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('dragover'));
-  uploadZone.addEventListener('drop', e => {
-    e.preventDefault();
-    uploadZone.classList.remove('dragover');
-    const file = e.dataTransfer.files[0];
-    if (file) handleUpload(file);
-  });
-
-  csvInput.addEventListener('change', e => {
-    if (e.target.files[0]) handleUpload(e.target.files[0]);
-  });
-
-  // ── Upload ───────────────────────────────────────────────────
-  async function handleUpload(file) {
-    if (!file.name.endsWith('.csv')) {
-      showToast('Only .csv files are supported', 'error');
-      return;
-    }
+  uploadZone.addEventListener('dragover',e=>{e.preventDefault();uploadZone.classList.add('dragover');});
+  uploadZone.addEventListener('dragleave',()=>uploadZone.classList.remove('dragover'));
+  uploadZone.addEventListener('drop',e=>{e.preventDefault();uploadZone.classList.remove('dragover');const f=e.dataTransfer.files[0];if(f)handleUpload(f);});
+  csvInput.addEventListener('change',e=>{if(e.target.files[0])handleUpload(e.target.files[0]);});
+
+  async function handleUpload(file){
+    if(!file.name.endsWith('.csv')){showToast('Only .csv files accepted','error');return;}
     startLoading();
-    const fd = new FormData();
-    fd.append('file', file);
-    try {
-      const r = await fetch('/upload', { method: 'POST', body: fd });
-      const d = await r.json();
-      if (!r.ok) throw new Error(d.detail || 'Upload failed');
-
-      sessionId = d.session_id;
-      columns   = d.columns;
-
-      fileNameDisp.textContent = file.name;
-      rowCountEl.textContent   = d.row_count.toLocaleString();
-      colCountEl.textContent   = d.columns.length;
-      schemaBox.textContent    = d.schema;
-      schemaBox.classList.add('show');
-      fileInfo.classList.add('show');
-
-      buildSuggestions(d.columns, d.table_name);
-      showToast(`✓ Loaded ${d.row_count.toLocaleString()} rows`, 'success');
-      emptyState.style.display = 'none';
-
-      // Welcome message
-      addMsg('assistant', `
-        <strong>File loaded:</strong> <code>${file.name}</code><br/>
-        Table <code>${d.table_name}</code> with ${d.row_count.toLocaleString()} rows and ${d.columns.length} columns.<br/><br/>
-        Columns: <code>${d.columns.join(', ')}</code><br/><br/>
-        Ask me anything about this dataset in plain English!
-      `);
-    } catch(e) {
-      showToast(e.message, 'error');
-    }
+    const fd=new FormData(); fd.append('file',file);
+    try{
+      const r=await fetch('/upload',{method:'POST',body:fd});
+      const d=await r.json();
+      if(!r.ok)throw new Error(d.detail||'Upload failed');
+      sessionId=d.session_id; columns=d.columns;
+      fileNameDisp.textContent=file.name;
+      rowCountEl.textContent=d.row_count.toLocaleString();
+      colCountEl.textContent=d.columns.length;
+      schemaBox.textContent=d.schema;
+      schemaBox.classList.add('show'); fileInfo.classList.add('show');
+      buildSuggestions(d.columns,d.table_name);
+      showToast(`✓ Loaded ${d.row_count.toLocaleString()} rows`,'success');
+      emptyState.style.display='none'; closeSidebar();
+      addMsg('assistant',`<strong>File loaded:</strong> <code>${file.name}</code><br/>Table <code>${d.table_name}</code> · ${d.row_count.toLocaleString()} rows · ${d.columns.length} columns.<br/><br/>Columns: <code>${d.columns.join(', ')}</code><br/><br/>Ask me anything about this data in plain English.`);
+    }catch(e){showToast(e.message,'error');}
     stopLoading();
   }
 
-  // ── Suggestions ──────────────────────────────────────────────
-  function buildSuggestions(cols, table) {
-    const qs = [
-      `Show the first 10 rows`,
-      `Count total number of records`,
-      `How many unique values in ${cols[0]}?`,
-      `What is the average of ${cols.find(c => /num|price|val|amt|count|qty|sal/i.test(c)) || cols[1] || cols[0]}?`,
-      `Show rows where ${cols[0]} is not null`,
-      `Group by ${cols[0]} and count records`,
-    ];
-    suggList.innerHTML = '';
-    qs.forEach(q => {
-      const chip = document.createElement('button');
-      chip.className = 'suggestion-chip';
-      chip.textContent = q;
-      chip.onclick = () => { input.value = q; input.focus(); sendQuery(); };
-      suggList.appendChild(chip);
+  function buildSuggestions(cols,table){
+    const numCol=cols.find(c=>/num|price|val|amt|count|qty|sal|rev|cost/i.test(c))||cols[1]||cols[0];
+    const qs=[`Show the first 10 rows`,`Count total number of records`,`How many unique values in ${cols[0]}?`,`What is the average of ${numCol}?`,`Show rows where ${cols[0]} is not null`,`Group by ${cols[0]} and count records`];
+    suggList.innerHTML='';
+    qs.forEach(q=>{
+      const btn=document.createElement('button'); btn.className='suggestion-chip'; btn.textContent=q;
+      btn.onclick=()=>{input.value=q;input.focus();closeSidebar();sendQuery();};
+      suggList.appendChild(btn);
     });
   }
 
-  // ── Auto-resize textarea ─────────────────────────────────────
-  input.addEventListener('input', () => {
-    input.style.height = 'auto';
-    input.style.height = Math.min(input.scrollHeight, 120) + 'px';
-  });
-
-  // ── Keyboard ─────────────────────────────────────────────────
-  input.addEventListener('keydown', e => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      if (!isLoading && sessionId && input.value.trim()) sendQuery();
-    }
-  });
-
-  sendBtn.addEventListener('click', () => {
-    if (!isLoading && sessionId && input.value.trim()) sendQuery();
-  });
-
-  // ── Send Query ───────────────��───────────────────────────────
-  async function sendQuery() {
-    const question = input.value.trim();
-    if (!question || !sessionId) return;
-
-    // user bubble
-    addMsg('user', escapeHtml(question));
-    input.value = '';
-    input.style.height = 'auto';
-    startLoading();
-
-    // thinking indicator
-    const thinkId = addThinking();
-
-    try {
-      const r = await fetch('/query', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ session_id: sessionId, question })
-      });
-      const d = await r.json();
-      removeThinking(thinkId);
-      if (!r.ok) throw new Error(d.detail || 'Query failed');
-
-      addMsg('assistant', buildResultHtml(d.sql, d.results));
-    } catch(e) {
+  input.addEventListener('input',()=>{input.style.height='auto';input.style.height=Math.min(input.scrollHeight,120)+'px';});
+  input.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();if(!isLoading&&sessionId&&input.value.trim())sendQuery();}});
+  sendBtn.addEventListener('click',()=>{if(!isLoading&&sessionId&&input.value.trim())sendQuery();});
+
+  async function sendQuery(){
+    const question=input.value.trim(); if(!question||!sessionId)return;
+    addMsg('user',escapeHtml(question));
+    input.value=''; input.style.height='auto';
+    startLoading(); const thinkId=addThinking();
+    try{
+      const r=await fetch('/query',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({session_id:sessionId,question})});
+      const d=await r.json(); removeThinking(thinkId);
+      if(!r.ok)throw new Error(d.detail||'Query failed');
+      addMsg('assistant',buildResultHtml(d.sql,d.results));
+    }catch(e){
       removeThinking(thinkId);
-      addMsg('assistant', `<div class="error-bubble">⚠ ${escapeHtml(e.message)}</div>`);
-      showToast(e.message, 'error');
+      addMsg('assistant',`<div class="error-bubble">⚠ ${escapeHtml(e.message)}</div>`);
+      showToast(e.message,'error');
     }
     stopLoading();
   }
 
-  // ── Build result HTML ─────────────────────────────────────────
-  function buildResultHtml(sql, results) {
-    let html = `
-      <div class="sql-block">
-        <div class="sql-block-header">
-          <span>Generated SQL</span>
-          <button class="copy-btn" onclick="copySql(this)">Copy</button>
-        </div>
-        <div class="sql-code">${escapeHtml(sql)}</div>
-      </div>`;
-
-    if (!results || results.length === 0) {
-      html += `<div style="margin-top:10px;font-size:12px;color:var(--muted);">No rows returned.</div>`;
-      return html;
-    }
-
-    const cols = Object.keys(results[0]);
-    let table = `<div class="result-table-wrap"><table><thead><tr>`;
-    cols.forEach(c => { table += `<th>${escapeHtml(c)}</th>`; });
-    table += `</tr></thead><tbody>`;
-    results.forEach(row => {
-      table += '<tr>';
-      cols.forEach(c => { table += `<td>${row[c] === null ? '<span style="color:var(--muted)">null</span>' : escapeHtml(String(row[c]))}</td>`; });
-      table += '</tr>';
-    });
-    table += `</tbody></table></div>
-      <div class="result-count">${results.length.toLocaleString()} row${results.length !== 1 ? 's' : ''} returned</div>`;
+  function highlightSQL(raw){
+    const kw=/\b(SELECT|FROM|WHERE|AND|OR|NOT|IN|IS|NULL|LIKE|BETWEEN|ORDER BY|GROUP BY|HAVING|LIMIT|OFFSET|DISTINCT|AS|JOIN|LEFT|RIGHT|INNER|OUTER|ON|UNION|ALL|INSERT|UPDATE|DELETE|CREATE|TABLE|DROP|ALTER|WITH|CASE|WHEN|THEN|ELSE|END|EXISTS|BY|ASC|DESC|INTO|VALUES|SET)\b/gi;
+    const fn=/\b(COUNT|SUM|AVG|MAX|MIN|COALESCE|NULLIF|IFNULL|ROUND|FLOOR|CEIL|ABS|LENGTH|UPPER|LOWER|TRIM|SUBSTR|REPLACE|CAST|DATE|DATETIME|NOW|RANDOM|IIF|GROUP_CONCAT)\b/gi;
+    return escapeHtml(raw)
+      .replace(/(--[^\n]*)/g,m=>`<span class="cm">${m}</span>`)
+      .replace(/('([^'\\]|\\.)*')/g,m=>`<span class="st">${m}</span>`)
+      .replace(/\b(\d+(\.\d+)?)\b/g,m=>`<span class="nm">${m}</span>`)
+      .replace(kw,m=>`<span class="kw">${m}</span>`)
+      .replace(fn,m=>`<span class="fn">${m}</span>`)
+      .replace(/([=<>!]+|[+\-*\/])/g,m=>`<span class="op">${m}</span>`);
+  }
 
-    return html + table;
+  function buildResultHtml(sql,results){
+    let html=`<div class="sql-block"><div class="sql-block-header"><span>Generated SQL</span><button class="copy-btn" onclick="copySql(this)">Copy</button></div><div class="sql-code">${highlightSQL(sql)}</div></div>`;
+    if(!results||results.length===0) return html+`<div style="margin-top:9px;font-size:12px;color:var(--muted);">No rows returned.</div>`;
+    const cols=Object.keys(results[0]);
+    let tbl=`<div class="result-table-wrap"><table><thead><tr>${cols.map(c=>`<th>${escapeHtml(c)}</th>`).join('')}</tr></thead><tbody>`;
+    results.forEach(row=>{tbl+=`<tr>${cols.map(c=>`<td>${row[c]===null?`<span style="color:var(--muted)">null</span>`:escapeHtml(String(row[c]))}</td>`).join('')}</tr>`;});
+    tbl+=`</tbody></table></div><div class="result-count">${results.length.toLocaleString()} row${results.length!==1?'s':''} returned</div>`;
+    return html+tbl;
   }
 
-  // ── Copy SQL ──────────────────────────────────────────────────
-  window.copySql = function(btn) {
-    const code = btn.closest('.sql-block').querySelector('.sql-code').textContent;
-    navigator.clipboard.writeText(code).then(() => {
-      btn.textContent = 'Copied!';
-      setTimeout(() => btn.textContent = 'Copy', 1500);
-    });
+  window.copySql=function(btn){
+    const code=btn.closest('.sql-block').querySelector('.sql-code').textContent;
+    navigator.clipboard.writeText(code).then(()=>{btn.textContent='Copied!';setTimeout(()=>btn.textContent='Copy',1600);});
   };
 
-  // ── Add message ───────────────────────────────────────────────
-  function addMsg(role, html) {
-    const now = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    const div = document.createElement('div');
-    div.className = `msg ${role}`;
-    div.innerHTML = `
-      <div class="msg-meta">${role === 'user' ? 'You' : 'QueryMind'} · ${now}</div>
-      <div class="bubble">${html}</div>`;
-    chat.appendChild(div);
-    chat.scrollTop = chat.scrollHeight;
-    return div;
+  function addMsg(role,html){
+    const now=new Date().toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'});
+    const div=document.createElement('div'); div.className=`msg ${role}`;
+    div.innerHTML=`<div class="msg-meta">${role==='user'?'You':'QueryMind'} · ${now}</div><div class="bubble">${html}</div>`;
+    chat.appendChild(div); chat.scrollTop=chat.scrollHeight; return div;
   }
 
-  let thinkCounter = 0;
-  function addThinking() {
-    const id = 'think-' + (++thinkCounter);
-    const div = document.createElement('div');
-    div.id = id;
-    div.className = 'msg assistant';
-    div.innerHTML = `
-      <div class="msg-meta">QueryMind</div>
-      <div class="thinking"><span></span><span></span><span></span></div>`;
-    chat.appendChild(div);
-    chat.scrollTop = chat.scrollHeight;
-    return id;
-  }
-  function removeThinking(id) {
-    const el = document.getElementById(id);
-    if (el) el.remove();
+  let tc=0;
+  function addThinking(){
+    const id='think-'+(++tc), div=document.createElement('div');
+    div.id=id; div.className='msg assistant';
+    div.innerHTML=`<div class="msg-meta">QueryMind</div><div class="thinking"><span></span><span></span><span></span></div>`;
+    chat.appendChild(div); chat.scrollTop=chat.scrollHeight; return id;
   }
+  function removeThinking(id){const el=document.getElementById(id);if(el)el.remove();}
 
-  // ── Clear Chat
-  function clearChat() {
-    chat.innerHTML = '';
-    emptyState.style.display = '';
-    chat.appendChild(emptyState);
-    showToast('Chat cleared', 'success');
+  function clearChat(){
+    chat.innerHTML=''; emptyState.style.display='';
+    chat.appendChild(emptyState); showToast('Chat cleared','success');
   }
 
-  // ── Escape HTML ───────────────────────────────────────────────
-  function escapeHtml(str) {
-    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-  }
+  function escapeHtml(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
 </script>
 </body>
 </html>