/* ===== OctoEver Design System v3 — Dodger Blue ===== */
:root {
  /* Palette */
  --primary: #1E90FF; --primary-light: #e8f4ff; --primary-dark: #1870cc;
  --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
  --bg: #f2f6fa; --surface: #ffffff; --surface-alt: #f8faff;
  --border: #e2e8f0; --border-light: #eef1f6;
  --text: #1e293b; --text-secondary: #64748b; --text-muted: #94a3b8;

  /* Spacing (4px base) */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 20px; --sp-2xl: 24px;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, monospace;
  --text-xs: 10px; --text-sm: 11px; --text-base: 12px; --text-md: 13px; --text-lg: 14px;
  --text-xl: 16px; --text-2xl: 20px; --text-3xl: 28px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 100px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.08);

  /* Layout */
  --leftnav-w: 36px; --sidebar-w: 230px; --rightbar-w: 290px;
  --transition: .15s ease;
}

[data-theme="dark"] {
  --bg: #0c1929; --surface: #132238; --surface-alt: #152640; --border: #1e3a5c; --border-light: #182d48;
  --text: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b;
  --primary: #4da8ff; --primary-light: #0d2847; --primary-dark: #1E90FF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 1px 3px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.5);
}

/* ===== Reset ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font:var(--text-md)/1.6 var(--font); background:var(--bg); color:var(--text); height:100vh; overflow:hidden; transition:background var(--transition),color var(--transition); }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:var(--r-full); }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* ===== Layout ===== */
#app { display:flex; flex-direction:column; height:100vh; }
#app-body { display:flex; flex:1; overflow:hidden; }

/* ===== Status Bar ===== */
#status-bar { display:flex; align-items:center; gap:var(--sp-md); padding:0 var(--sp-xl); background:var(--surface); border-bottom:1px solid var(--border); font-size:var(--text-base); height:34px; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:5px; flex-shrink:0; }
.dot.ok { background:var(--success); }
.dot.degraded { background:var(--warning); }
.dot.down { background:var(--danger); }
.dot.loading { background:var(--border); animation:dot-pulse 1.2s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { opacity:0.4; } 50% { opacity:1; } }
.brand { font-weight:700; font-size:var(--text-md); color:var(--primary); cursor:pointer; display:flex; align-items:center; gap:6px; margin-right:auto; user-select:none; }
.sb-logo { width:18px; height:18px; flex-shrink:0; }

/* Status Bar — version */
.sb-version { font-size:10px; color:var(--text-dim); flex-shrink:0; line-height:1; }

/* Status Bar — health indicators */
.sb-indicator { position:relative; display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--r-sm); cursor:pointer; transition:background var(--transition); user-select:none; }
.sb-indicator:hover { background:var(--primary-light); }
.sb-label { font-size:12px; font-weight:500; color:var(--text-secondary); transition:color var(--transition); }
.dot.loading ~ .sb-label { color:var(--text-muted); }
.sb-indicator:hover .sb-label { color:var(--primary); }

/* Status Bar — tooltip */
.sb-tip { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:6px; padding:5px 12px; background:var(--text); color:var(--bg); font-size:11px; border-radius:var(--r-sm); white-space:nowrap; z-index:100; pointer-events:none; box-shadow:var(--shadow-lg); }
.sb-tip::before { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-bottom-color:var(--text); }

/* Status Bar — links */
.sb-link { font-size:11px; color:var(--primary); text-decoration:none; transition:opacity var(--transition); }
.sb-link:hover { opacity:0.8; }

/* Status Bar — buttons */
.sb-btn { background:none; border:none; cursor:pointer; font-size:14px; padding:2px 6px; border-radius:var(--r-sm); transition:all var(--transition); color:var(--primary); }
.sb-btn:hover { background:var(--primary-light); opacity:0.8; }
.sb-btn-logout { font-size:11px; color:var(--text-muted); }
.sb-btn-semantic { font-size:13px; color:var(--primary); }

/* Status Bar — Tenant Switcher */
.sb-tenant-switcher { position:relative; display:flex; align-items:center; gap:4px; cursor:pointer; padding:2px 8px; border-radius:6px; transition:background .15s; }
.sb-tenant-switcher:hover { background:var(--bg); }
.sb-tenant-label { font-size:11px; color:var(--text); font-weight:500; }
.sb-tenant-arrow { font-size:9px; color:var(--text-muted); }
.sb-tenant-menu { position:absolute; top:100%; left:0; margin-top:4px; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.1); min-width:180px; z-index:200; overflow:hidden; }
.sb-tenant-item { padding:8px 12px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-size:12px; transition:background .1s; }
.sb-tenant-item:hover { background:var(--bg); }
.sb-tenant-item.active { background:var(--primary-light); color:var(--primary); font-weight:600; }
.sb-tenant-menu-footer { padding:6px 12px; border-top:1px solid var(--border); font-size:11px; }
.sb-tenant-menu-footer a { color:var(--primary); text-decoration:none; }
.sb-sep { width:1px; height:14px; background:var(--border); flex-shrink:0; }

/* ===== Left Nav ===== */
#leftnav { width:var(--leftnav-w); background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:2px; padding:var(--sp-sm) 0; flex-shrink:0; }
#leftnav button { background:none; border:none; cursor:pointer; font-size:16px; color:var(--primary); width:30px; height:30px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
#leftnav button:hover { background:var(--primary-light); opacity:0.8; }
#leftnav button.active { background:var(--primary); color:#fff; }
.nav-divider { width:22px; height:1px; background:var(--border); flex-shrink:0; margin:2px 0; }
.nav-spacer { flex:1; }

/* ===== Sidebar (Schema) ===== */
#sidebar { width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; transition:width var(--transition); overflow:hidden; }
#sidebar.closed { width:0; border-right:none; }

/* ===== Main Area ===== */
#main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; background:var(--bg); }

/* ===== Rightbar ===== */
#rightbar { width:var(--rightbar-w); background:var(--surface); border-left:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; transition:margin-right var(--transition); overflow:hidden; }
#rightbar.closed { margin-right:calc(-1 * var(--rightbar-w)); }

/* ===== Sidebar Sections ===== */
.side-section { display:flex; flex-direction:column; overflow:hidden; }
.side-section.conv { flex:1; min-height:60px; background:var(--surface-alt); border-bottom:1px solid var(--border-light); }
.side-section.schema { flex:2; min-height:60px; background:var(--surface); }
.side-header { display:flex; justify-content:space-between; align-items:center; padding:6px var(--sp-sm); margin:var(--sp-xs) var(--sp-xs) 0; font-size:11px; font-weight:600; letter-spacing:.2px; border-radius:var(--r-sm); }
.side-section.conv .side-header { color:#7c3aed; background:rgba(124,58,237,.10); border:1px solid rgba(124,58,237,.18); }
.side-section.schema .side-header { color:#b45309; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.18); }
[data-theme="dark"] .side-section.conv .side-header { background:rgba(124,58,237,.20); border-color:rgba(124,58,237,.30); }
[data-theme="dark"] .side-section.schema .side-header { background:rgba(245,158,11,.20); border-color:rgba(245,158,11,.30); }
.side-header .btn-icon { background:none; border:none; cursor:pointer; font-size:13px; color:var(--text-secondary); padding:2px 4px; border-radius:var(--r-sm); transition:all var(--transition); }
.side-header .btn-icon:hover { background:var(--primary-light); color:var(--primary); }
.side-header span { position:relative; display:inline-flex; gap:2px; }

/* Export format popover */
.export-popover { position:absolute; top:100%; right:0; margin-top:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); z-index:40; padding:4px; min-width:120px; animation:popover-in .15s ease-out; }
@keyframes popover-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.export-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:12px; color:var(--text); transition:all .12s ease; }
.export-item:hover { background:rgba(124,58,237,.1); color:#7c3aed; }
.export-item:hover .export-fmt { background:rgba(124,58,237,.15); color:#7c3aed; }
.export-fmt { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:5px; background:var(--bg); font-size:10px; font-weight:700; color:var(--text-secondary); font-family:var(--mono); transition:all .12s ease; }
.side-divider { height:4px; background:var(--border-light); cursor:row-resize; flex-shrink:0; transition:background .2s; }
.side-divider:hover, .side-divider.active { background:var(--primary); }
.h-divider { height:1px; background:var(--border-light); cursor:row-resize; flex-shrink:0; }
.h-divider:hover, .h-divider.active { background:var(--primary); }

/* ===== Conversation List ===== */
.conv-list { flex:1; overflow-y:auto; padding:var(--sp-xs) var(--sp-sm); }
.conv-item { padding:7px var(--sp-sm); border-radius:var(--r-sm); cursor:pointer; font-size:var(--text-sm); display:flex; align-items:center; gap:6px; margin-bottom:2px; transition:all var(--transition); color:var(--text); }
.conv-item:hover { background:var(--primary-light); }
.conv-item.active { background:rgba(124,58,237,.08); border-left:3px solid #7c3aed; color:#7c3aed; font-weight:500; }
.conv-item .title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-item .count { font-size:var(--text-xs); color:var(--text-muted); }
.conv-item .del { visibility:hidden; background:none; border:none; cursor:pointer; font-size:var(--text-sm); color:var(--text-muted); }
.conv-item:hover .del { visibility:visible; }
.conv-item .del:hover { color:var(--danger); }

/* ===== Schema Tree ===== */
.schema-wrap { flex:1; overflow-y:auto; padding:0 var(--sp-xs) var(--sp-sm); }
.schema-search, .conv-search { width:calc(100% - var(--sp-md)); margin:var(--sp-xs) 8px; padding:6px 8px 6px 26px; border:1px solid var(--border); border-radius:16px; font-size:11px; outline:none; background:var(--bg); color:var(--text); transition:border-color var(--transition),box-shadow var(--transition); }
.conv-search { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:8px center; }
.schema-search { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:8px center; }
.conv-search:focus { border-color:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,.12); background-color:var(--surface); }
.schema-search:focus { border-color:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.12); background-color:var(--surface); }
.schema-actions { display:flex; gap:3px; margin:var(--sp-xs) 8px 0; }
.schema-actions button { flex:1; padding:3px 0; font-size:var(--text-xs); border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; background:var(--surface); color:var(--text-secondary); }
.schema-actions button:hover { background:rgba(245,158,11,.08); color:#b45309; border-color:#f59e0b; }
.flip-icon svg { transform:rotate(180deg); }
.table-node { padding:6px var(--sp-sm); font-size:var(--text-base); font-weight:500; cursor:pointer; border-radius:var(--r-sm); display:flex; align-items:center; gap:6px; transition:all var(--transition); color:var(--text); }
.table-node:hover { background:rgba(245,158,11,.08); color:#b45309; }
.table-node .col-count { font-size:9px; color:var(--text-muted); background:var(--bg); padding:1px 6px; border-radius:var(--r-full); margin-left:auto; }
.table-node .fk-badge { font-size:9px; color:var(--warning); background:rgba(245,158,11,.1); padding:0 4px; border-radius:var(--r-full); }
.col-list { display:none; padding-left:var(--sp-lg); border-left:1px solid var(--border); margin-left:8px; position:relative; }
.col-list.open { display:block; }
.col-list::before { content:''; position:absolute; left:-1px; top:0; bottom:0; width:1px; background:var(--border); }
.col-item { font-size:var(--text-xs); color:var(--text-secondary); padding:2px 0; display:flex; gap:6px; align-items:center; }
.col-item .pk { color:var(--warning); font-size:9px; }
.col-item .col-type { font-size:9px; color:var(--text-muted); margin-left:auto; font-family:var(--mono); }

/* ===== Chat ===== */
#chat { flex:1; overflow-y:auto; padding:var(--sp-2xl) var(--sp-2xl); display:flex; flex-direction:column; gap:var(--sp-lg); scroll-behavior:smooth; }

/* Scroll-to-bottom FAB */
.scroll-bottom-fab { position:fixed; bottom:130px; left:50%; transform:translateX(-50%); z-index:30; background:none; border:none; cursor:pointer; padding:0; animation:fab-in .2s ease-out; }
@keyframes fab-in { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.sb-fab-circle { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--surface); border:1.5px solid var(--border); box-shadow:var(--shadow-lg); color:var(--text-secondary); transition:all var(--transition); }
.sb-fab-circle::after { content:''; display:block; width:10px; height:10px; border-right:2.5px solid; border-bottom:2.5px solid; transform:rotate(45deg) translateY(-1px); color:inherit; }
.scroll-bottom-fab:hover .sb-fab-circle { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 4px 16px rgba(30,144,255,.35); }

/* User message */
.chat-q { display:flex; justify-content:flex-end; }
.edit-confirm-btn, .edit-cancel-btn { width:26px; height:26px; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.edit-confirm-btn { background:var(--primary); color:#fff; }
.edit-confirm-btn:hover { background:var(--primary-dark); }
.edit-cancel-btn { background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }
.edit-cancel-btn:hover { background:var(--border-light); color:var(--text); }

.chat-q .bubble { background:var(--primary); color:#fff; padding:var(--sp-sm) var(--sp-lg); border-radius:var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); max-width:80%; font-size:var(--text-md); line-height:1.5; box-shadow:0 2px 8px rgba(30,144,255,.2); }
.msg-time { font-size:12px; color:var(--text); font-family:'KaiTi','STKaiti','楷体',serif; flex-shrink:0; }

/* AI response */
.chat-a { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-lg); box-shadow:var(--shadow-sm); position:relative; animation:fadeIn .2s ease; border-left:3px solid var(--primary); color:var(--text); }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.chat-a .actions { position:absolute; top:var(--sp-sm); right:var(--sp-sm); display:flex; gap:2px; opacity:0; transition:opacity var(--transition); }
.chat-a:hover .actions { opacity:1; }
.chat-a .act-btn { background:none; border:none; cursor:pointer; font-size:13px; padding:3px 6px; border-radius:var(--r-sm); color:var(--text-muted); }
.chat-a .act-btn:hover { background:var(--primary-light); color:var(--primary); }
.conf-badge { display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;border-radius:4px;margin-bottom:8px; }
.conf-high { background:#dcfce7;color:#166534;border:1px solid #bbf7d0; }
.conf-mid { background:#fefce8;color:#92400e;border:1px solid #fde68a; }
.conf-low { background:#fee2e2;color:#991b1b;border:1px solid #fecaca; }

/* ===== SQL Block ===== */
.sql-block, .sql-block .cm-wrapper, .sql-block .CodeMirror { max-height:220px !important; }
.sql-block { background:#f0f4f8; border-radius:var(--r-md); padding:var(--sp-md) var(--sp-lg); margin-bottom:var(--sp-md); overflow:auto; border:1px solid var(--border); }
.sql-block code { font-family:var(--mono); font-size:var(--text-base); color:var(--text); white-space:pre-wrap; word-break:break-all; display:block; line-height:1.6; }
.sql-block .sql-kw { color:#0550ae; } .sql-block .sql-fn { color:#8250df; } .sql-block .sql-str { color:#0a3069; } .sql-block .sql-num { color:#0550ae; }
[data-theme="dark"] .sql-block { background:#0f1f3a; }
[data-theme="dark"] .sql-block code { color:#e2e8f0; }
[data-theme="dark"] .sql-block .sql-kw { color:#7dd3fc; } [data-theme="dark"] .sql-block .sql-fn { color:#c4b5fd; } [data-theme="dark"] .sql-block .sql-str { color:#86efac; } [data-theme="dark"] .sql-block .sql-num { color:#fde68a; }

/* ===== Badges ===== */
.meta-row { display:flex; gap:var(--sp-sm); align-items:center; margin-bottom:var(--sp-sm); font-size:var(--text-sm); flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:3px; padding:2px var(--sp-sm); border-radius:var(--r-full); font-size:var(--text-xs); font-weight:500; }
.badge.cache { background:#d1fae5; color:#065f46; }
.badge.llm { background:#fef3c7; color:#92400e; }
.badge.retry { background:#fee2e2; color:#991b1b; }
.badge.time { background:var(--bg); color:var(--text-secondary); }
.badge.ml-auto { margin-left:auto; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes upload-progress { 0%{transform:translateX(-100%)} 50%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }
.upload-zone { border:2px dashed var(--border); border-radius:10px; padding:40px; text-align:center; cursor:pointer; transition:all .2s; background:var(--bg); }
.upload-zone:hover, .upload-zone.dragging { border-color:var(--primary); background:var(--primary-light); }
/* Docs Panel */
.docs-table { width:100%; border-collapse:collapse; font-size:12px; }
.docs-table th { background:var(--bg); text-align:left; padding:6px 8px; border-bottom:2px solid var(--border); }
.docs-table td { padding:6px 8px; border-bottom:1px solid var(--border); }
.clickable { cursor:pointer; }
.muted { color:var(--text-muted); }
.small { font-size:11px; }
.nowrap { white-space:nowrap; }
.text-success { color:var(--success); }
.text-danger { color:var(--danger); }
.btn-danger { background:var(--danger); color:#fff; border:none; border-radius:4px; font-size:11px; padding:3px 8px; cursor:pointer; }
.config-row { margin-bottom:14px; }
.config-row label { display:block; margin-bottom:4px; font-size:12px; }
.config-row select, .config-row input[type=range] { width:100%; margin-top:4px; padding:6px; border:1px solid var(--border); border-radius:4px; }
.test-input { flex:1; padding:8px; border:1px solid var(--border); border-radius:6px; font-size:13px; }
.test-card { margin-bottom:8px; padding:10px; border:1px solid var(--border); border-radius:8px; font-size:12px; }
.tag { font-size:9px; background:var(--bg); padding:1px 4px; border-radius:3px; }
.preview-content { font-size:11px; line-height:1.6; white-space:pre-wrap; background:var(--bg); padding:12px; border-radius:6px; max-height:400px; overflow:auto; }
.chunk-item { margin-bottom:6px; padding:6px; background:var(--bg); border-radius:6px; font-size:11px; }
.progress-bar { width:100%; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; width:60%; background:var(--primary); border-radius:2px; animation:upload-progress 1.5s ease-in-out infinite; }
.active { background:var(--primary-light); color:var(--primary); font-weight:600; border-right:2px solid var(--primary); }
/* Docs config cards */
.config-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:16px; }
.config-card-title { font-size:13px; font-weight:600; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.config-value { font-size:12px; font-weight:700; color:var(--primary); background:var(--primary-light); padding:2px 8px; border-radius:10px; }
.config-select { width:100%; padding:8px 10px; border:1.5px solid var(--border); border-radius:6px; font-size:12px; background:var(--surface); color:var(--text); outline:none; cursor:pointer; }
.config-slider { width:100%; margin-top:4px; accent-color:var(--primary); }
.config-hint { font-size:10px; color:var(--text-dim); margin-top:6px; }
.btn-primary { background:var(--primary); color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:500; transition:filter .15s; }
.btn-primary:hover { filter:brightness(1.1); }
.badge.conf-high { background:#dcfce7; color:#166534; }
.badge.conf-medium { background:#fefce8; color:#92400e; }
.badge.conf-low { background:#fee2e2; color:#991b1b; }
[data-theme="dark"] .badge.cache { background:#064e3b; color:#6ee7b7; }
[data-theme="dark"] .badge.llm { background:#78350f; color:#fcd34d; }
[data-theme="dark"] .badge.retry { background:#7f1d1d; color:#fca5a5; }
[data-theme="dark"] .badge.conf-high { background:#064e3b; color:#6ee7b7; }
[data-theme="dark"] .badge.conf-medium { background:#78350f; color:#fcd34d; }
[data-theme="dark"] .badge.conf-low { background:#7f1d1d; color:#fca5a5; }
/* 黄色提示框（校验错误/洞察降级等） */
.hint-warn { background:#fefce8; border:1px solid #fde68a; color:#92400e; }
.hint-warn strong { color:#92400e; }
.hint-warn div { color:#a16207; }
[data-theme="dark"] .hint-warn { background:#422006; border-color:#78350f; color:#fcd34d; }
[data-theme="dark"] .hint-warn strong { color:#fcd34d; }
[data-theme="dark"] .hint-warn div { color:#fbbf24; }
/* 信息提示框（内置模板等） */
.hint-info { background:#fef3c7; border:1px solid #fcd34d; color:#92400e; }
[data-theme="dark"] .hint-info { background:#422006; border-color:#78350f; color:#fcd34d; }
/* ER 图关系标签 */
.er-tag { background:#fef3c7; color:#92400e; }
[data-theme="dark"] .er-tag { background:#422006; color:#fcd34d; }
/* 搜索高亮 */
mark.hl { background:#fde68a; color:#92400e; padding:0 2px; border-radius:2px; }
[data-theme="dark"] mark.hl { background:#78350f; color:#fcd34d; }

/* ===== Results ===== */
.result-tabs { display:flex; gap:0; margin-bottom:var(--sp-md); border-bottom:2px solid var(--border); }
.result-tab { padding:6px var(--sp-lg); cursor:pointer; border:none; background:none; font-size:var(--text-base); color:var(--text-secondary); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all var(--transition); }
.result-tab:hover { color:var(--text); }
.result-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.result-table-wrap { overflow:auto; max-height:380px; border-radius:var(--r-sm); border:1px solid var(--border); }
.result-table { width:100%; border-collapse:collapse; font-size:var(--text-base); }
.result-table th { background:var(--surface-alt); padding:7px var(--sp-md); text-align:left; font-weight:600; border-bottom:2px solid var(--border); position:sticky; top:0; z-index:1; cursor:pointer; user-select:none; white-space:nowrap; font-size:var(--text-sm); color:var(--text-secondary); text-transform:uppercase; letter-spacing:.2px; }
.result-table th:hover { color:var(--primary); }
.result-table th .sort-icon { font-size:var(--text-xs); margin-left:3px; }
.result-table td { padding:5px var(--sp-md); border-bottom:1px solid var(--border-light); max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.result-table tr:hover td { background:var(--primary-light); }
.result-info { display:flex; justify-content:space-between; align-items:center; padding:var(--sp-sm) 0; font-size:var(--text-sm); color:var(--text-secondary); gap:var(--sp-sm); }
.result-info .page-btns { display:flex; gap:3px; }
.result-info .page-btns button { padding:3px 8px; font-size:var(--text-xs); border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; background:var(--surface); color:var(--text-secondary); }
.result-info .page-btns button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.result-info .page-btns button:disabled { opacity:.3; cursor:default; }

/* ===== Chart ===== */
#chart-container { width:100%; height:360px; }
.chart-config { display:flex; gap:var(--sp-sm); align-items:center; padding:var(--sp-sm) 0; font-size:var(--text-sm); flex-wrap:wrap; }
.chart-config select { border:1px solid var(--border); border-radius:var(--r-sm); padding:3px var(--sp-sm); font-size:var(--text-sm); background:var(--surface); color:var(--text); }

/* ===== Input Area ===== */
/* Input area */
#input-area { padding:var(--sp-lg) var(--sp-2xl) var(--sp-lg); background:var(--surface); border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }

/* Context chip */
.context-chip-row { display:flex; align-items:center; gap:6px; padding:0 4px; }
.context-chip-label { font-size:11px; color:var(--text-muted); }
.context-chip { background:var(--primary-light); color:var(--primary-dark); padding:2px 10px; border-radius:12px; font-size:11px; font-weight:600; }
.context-chip-close { background:none; border:none; cursor:pointer; font-size:12px; color:var(--text-muted); padding:0 2px; line-height:1; }

/* Input capsule */
.input-capsule { display:flex; align-items:center; border:1.5px solid var(--border); border-radius:24px; background:var(--bg); padding:4px 4px 4px 16px; transition:border-color var(--transition),box-shadow var(--transition),opacity var(--transition); position:relative; }
.input-capsule:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(30,144,255,.15); }
.input-capsule.sending { opacity:.55; pointer-events:none; }
#question-input { flex:1; border:none; padding:8px 0; font-size:14px; min-height:24px; max-height:100px; font-family:inherit; outline:none; background:transparent; color:var(--text); overflow-y:auto; word-break:break-word; white-space:pre-wrap; line-height:1.5; resize:none; }
#question-input:empty::before { content:attr(placeholder); color:var(--text-muted); pointer-events:none; }

/* Send button */
.send-btn { width:34px; height:34px; border-radius:50%; border:none; background:var(--primary); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity var(--transition),transform var(--transition); position:relative; }
.send-btn:disabled { opacity:.35; cursor:not-allowed; }
.send-btn:not(:disabled):hover { transform:scale(1.08); }
.send-btn:not(:disabled):active { transform:scale(.92); }
.send-btn::after { content:''; display:block; width:8px; height:8px; border-right:2.5px solid #fff; border-top:2.5px solid #fff; transform:rotate(-45deg) translateY(1px); }

/* @ autocomplete menu */
.at-menu { position:absolute; bottom:calc(100% + 4px); background:var(--surface); border:1px solid var(--primary); border-radius:var(--r-md); box-shadow:var(--shadow-lg); max-height:180px; overflow-y:auto; z-index:50; min-width:160px; font-size:12px; }
.at-menu-empty { padding:8px 12px; color:var(--text-dim); }
.at-menu-item { padding:6px 12px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:background var(--transition); }
.at-menu-item:hover, .at-menu-item.selected { background:var(--primary-light); }
.at-menu-sub { color:var(--text-dim); font-size:10px; }

/* ===== Controls ===== */
.controls { display:flex; gap:var(--sp-sm); align-items:center; flex-wrap:wrap; padding:6px var(--sp-2xl); background:var(--surface); font-size:var(--text-sm); }
.controls label { color:var(--text-secondary); display:flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap; }
.controls select, .controls input[type=number] { border:1px solid var(--border); border-radius:var(--r-sm); padding:3px var(--sp-sm); font-size:var(--text-sm); outline:none; background:var(--bg); color:var(--text); }
.controls select:focus, .controls input[type=number]:focus { border-color:var(--primary); }
.controls input[type=number] { width:56px; }

/* Controls grouping */
.ctrl-group { display:flex; gap:var(--sp-sm); align-items:center; }
.ctrl-sep { width:1px; height:20px; background:var(--border); flex-shrink:0; margin:0 2px; }
.ctrl-toggle { cursor:pointer; user-select:none; }
.ctrl-toggle .slider { margin-right:4px; }
.toggle { position:relative; width:32px; height:18px; display:inline-block; }
.toggle input { opacity:0; width:0; height:0; }
.toggle .slider { position:absolute; cursor:pointer; top:0;left:0;right:0;bottom:0; background:var(--border); transition:.2s; border-radius:var(--r-full); }
.toggle .slider::before { content:""; position:absolute; height:12px; width:12px; left:3px; bottom:3px; background:#fff; transition:.2s; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.toggle input:checked+.slider { background:var(--primary); }
.toggle input:checked+.slider::before { transform:translateX(14px); }

/* ===== Buttons ===== */
.btn { padding:7px var(--sp-lg); border:none; border-radius:var(--r-sm); font-size:var(--text-base); font-weight:500; cursor:pointer; transition:all var(--transition); white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-primary:disabled { opacity:.4; cursor:not-allowed; filter:none; }
.btn-ghost { background:var(--surface); border:1px solid var(--border); color:var(--text); }
.btn-ghost:hover { background:var(--bg); border-color:var(--primary); }
.btn-sm { padding:4px var(--sp-md); font-size:var(--text-sm); }
.btn-danger { background:var(--danger); color:#fff; }

/* ===== Rightbar ===== */
.right-tabs { display:flex; border-bottom:2px solid var(--border); margin:0 var(--sp-md); }
.right-tab { flex:1; padding:8px 0; text-align:center; cursor:pointer; border:none; background:none; font-size:var(--text-sm); color:var(--text-secondary); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all var(--transition); }
.right-tab:hover { color:var(--text); }
.right-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.panel-actions { display:flex; gap:var(--sp-xs); padding:var(--sp-sm) var(--sp-md); }
.panel-actions button { flex:1; padding:4px 0; font-size:var(--text-xs); border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; background:var(--surface); color:var(--text-secondary); transition:all var(--transition); }
.panel-actions button:hover { border-color:var(--primary); color:var(--primary); }
.panel-content { flex:1; overflow-y:auto; padding:var(--sp-xs) var(--sp-sm) var(--sp-sm); }

/* ===== History Items ===== */
.hist-item { padding:8px var(--sp-sm); border-radius:var(--r-sm); cursor:pointer; font-size:var(--text-sm); margin-bottom:3px; position:relative; border:1px solid transparent; transition:all var(--transition); color:var(--text); }
.hist-item { border-bottom:1px solid var(--border-light); margin-bottom:0; border-radius:0; }
.hist-item:last-child { border-bottom:none; }
.hist-item:hover { background:var(--primary-light); }
.hist-item .q { font-size:var(--text-base); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); margin-bottom:1px; }
.hist-item .sql { font-size:var(--text-xs); color:var(--text-muted); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.7; }
.hist-item .meta { font-size:9px; color:var(--text-dim); display:flex; gap:8px; margin-top:3px; }
.hist-item .star { position:absolute; top:6px; right:8px; background:none; border:none; cursor:pointer; font-size:13px; color:var(--text-muted); transition:all var(--transition); }
.hist-item .star:hover { transform:scale(1.2); }
.hist-item .star.on { color:var(--warning); }
.hist-item.expanded { background:var(--primary-light); border-color:var(--primary); }
.hist-item .sql.expanded { white-space:pre-wrap; overflow-y:auto; max-height:100px; opacity:1; padding:6px 8px; background:#fdf8f3; border-radius:var(--r-sm); border-left:2px solid #b45309; }
.hist-insight { font-size:var(--text-xs); color:var(--text-secondary); line-height:1.6; margin-top:4px; padding:6px 8px; background:#faf7ff; border-radius:var(--r-sm); border-left:2px solid #7c3aed; max-height:100px; overflow-y:auto; }
.hist-insight-tag { display:inline-block; font-size:9px; padding:1px 6px; border-radius:3px; background:var(--primary); color:#fff; margin-right:6px; vertical-align:top; }
.hist-expand { display:flex; justify-content:flex-end; margin-top:4px; }
.hist-fill-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border:1px solid var(--primary); border-radius:var(--r-sm); background:var(--primary-light); color:var(--primary); cursor:pointer; font-size:11px; transition:all var(--transition); }
.hist-fill-btn:hover { background:var(--primary); color:#fff; }

/* fill icon: ▼ arrow into horizontal rule */
.hist-fill-icon { display:inline-block; width:14px; height:14px; position:relative; vertical-align:middle; }
.hist-fill-icon::before { content:''; position:absolute; top:1px; left:50%; transform:translateX(-50%); border:4px solid transparent; border-bottom:5px solid currentColor; }
.hist-fill-icon::after { content:''; position:absolute; bottom:1px; left:50%; transform:translateX(-50%); width:12px; height:2px; background:currentColor; border-radius:1px; }

/* ===== Favorites ===== */
.fav-card { padding:var(--sp-sm) var(--sp-md); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:var(--sp-sm); position:relative; background:var(--surface); box-shadow:var(--shadow-sm); cursor:pointer; transition:all var(--transition); }
.fav-card:hover { border-color:var(--primary); box-shadow:var(--shadow); transform:translateY(-1px); }
.fav-card.expanded { border-color:var(--primary); background:var(--primary-light); }
.fav-card .fav-card-del { position:absolute; top:6px; right:8px; opacity:0; background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:13px; transition:all var(--transition); }
.fav-card:hover .fav-card-del { opacity:1; }
.fav-card .fav-card-del:hover { color:var(--danger); }
.fav-sql.expanded { white-space:pre-wrap !important; overflow-y:auto !important; max-height:100px !important; padding:6px 8px !important; background:#fdf8f3 !important; border-radius:var(--r-sm) !important; border-left:2px solid #b45309 !important; }

/* Execute (▶) button — same row as fill btn */
.hist-exec-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--success); border-radius:var(--r-sm); background:#d1fae5; color:#065f46; cursor:pointer; font-size:12px; transition:all var(--transition); }
.hist-exec-btn:hover { background:var(--success); color:#fff; }

/* ===== Annotation Items ===== */
.anno-item { padding:var(--sp-sm) var(--sp-sm); border-radius:var(--r-sm); margin-bottom:2px; border:1px solid var(--border); font-size:var(--text-xs); }
.anno-item .q { font-size:var(--text-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.anno-item .sql { font-size:9px; color:var(--text-muted); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.anno-status { display:inline-block; padding:1px 6px; border-radius:var(--r-full); font-size:9px; font-weight:500; }
.anno-status.pending { background:#fef3c7; color:#92400e; }
.anno-status.approved { background:#d1fae5; color:#065f46; }
.anno-status.rejected { background:#fee2e2; color:#991b1b; }
.anno-status.corrected { background:var(--primary-light); color:var(--primary-dark); }
.filter-row { display:flex; gap:3px; padding:var(--sp-xs) var(--sp-sm); flex-wrap:wrap; }
.filter-row button { padding:2px var(--sp-sm); font-size:9px; border:1px solid var(--border); border-radius:var(--r-full); cursor:pointer; background:var(--surface); color:var(--text-secondary); }
.filter-row button.on { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ===== Empty / Error / Loading ===== */
.empty-state { text-align:center; padding:var(--sp-2xl); color:var(--text-muted); font-size:var(--text-sm); }
.error-box { background:#fef2f2; border:1px solid #fecaca; border-radius:var(--r-md); padding:var(--sp-md); color:#991b1b; font-size:var(--text-base); margin:var(--sp-sm) 0; }
.spinner { display:inline-block; width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ===== Modal ===== */
.modal-overlay { display:flex; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:100; align-items:center; justify-content:center; backdrop-filter:blur(2px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease, visibility .15s ease; }
.modal-overlay.open { opacity:1; visibility:visible; pointer-events:auto; }
.modal-box { background:var(--surface); border-radius:var(--r-lg); padding:var(--sp-2xl); max-width:900px; width:92%; max-height:84vh; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; }
.modal-box h2 { font-size:var(--text-xl); margin-bottom:var(--sp-md); display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.modal-close { background:none; border:none; font-size:18px; cursor:pointer; color:var(--text-muted); padding:var(--sp-xs) var(--sp-sm); border-radius:var(--r-sm); transition:all var(--transition); }
.modal-close:hover { background:var(--bg); color:var(--text); }

/* ===== Welcome ===== */
.welcome { text-align:center; padding:40px var(--sp-xl) 40px; max-width:720px; margin:0 auto; }
.welcome-hero { margin-bottom:32px; }
.welcome-logo { width:450px; height:330px; margin-bottom:12px; border-radius:20px; overflow:hidden; pointer-events:none; }
[data-theme="dark"] .welcome-logo { mix-blend-mode:screen; }
@keyframes logo-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.welcome h1 { font-size:32px; margin-bottom:8px; font-weight:800; color:var(--text); letter-spacing:-.3px; }
.welcome p { color:var(--text-secondary); font-size:14px; }
.welcome-subtitle { font-size:18px !important; font-style:italic; color:var(--text-dim) !important; letter-spacing:1px; animation:subtitle-in .8s ease-out; }
@keyframes subtitle-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.welcome-db { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; background:var(--surface); border:1px solid var(--border); border-radius:16px; font-size:12px; color:var(--text-secondary); margin-bottom:20px; }
.welcome-db em { color:var(--success); font-style:normal; font-weight:500; }
.welcome-db-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.welcome-db-dot.ok { background:var(--success); }
.welcome-db-dot.down { background:var(--danger); }
.welcome-section-title { font-size:11px; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.welcome-cards { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.welcome-card { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; background:var(--surface); border:1px solid var(--border); border-radius:20px; cursor:pointer; transition:all var(--transition); }
.welcome-card:hover { border-color:var(--primary); background:var(--primary-light); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.welcome-card-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.welcome-card-text { font-size:13px; color:var(--text); }
.welcome-hot { margin-top:28px; }
.welcome-hot-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.welcome-hot-chip { padding:6px 14px; background:var(--surface); border:1px solid var(--border); border-radius:16px; cursor:pointer; font-size:11px; color:var(--text); white-space:nowrap; transition:all var(--transition); }
.welcome-hot-chip:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.welcome-hot-chip em { font-size:9px; color:var(--text-dim); font-style:normal; margin-left:4px; }

/* ===== Resize ===== */
.resize-handle { width:1.5px; cursor:col-resize; background:transparent; transition:background .2s; flex-shrink:0; }
.resize-handle:hover, .resize-handle.active { background:var(--primary); width:3px; }

/* ===== Insight ===== */
.insight-card { padding:0; animation:fadeIn .2s ease; }
.insight-header { display:flex; align-items:center; gap:var(--sp-sm); margin-bottom:var(--sp-sm); }
.insight-badge { display:inline-flex; align-items:center; gap:4px; padding:3px var(--sp-md); border-radius:var(--r-full); font-size:var(--text-base); font-weight:600; background:var(--primary-light); color:var(--primary); }
.insight-body { font-size:var(--text-md); line-height:1.8; color:var(--text); padding:0 0 var(--sp-sm); }
.insight-body strong { color:var(--primary-dark); }
.followup-section { border-top:1px solid var(--border-light); padding-top:var(--sp-md); margin-top:var(--sp-sm); }
.followup-title { font-size:var(--text-sm); color:var(--text-muted); font-weight:600; margin-bottom:var(--sp-sm); }
.followup-chips { display:flex; flex-wrap:wrap; gap:var(--sp-xs); }
.followup-chip { padding:5px var(--sp-md); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-full); cursor:pointer; font-size:var(--text-base); color:var(--text); transition:all var(--transition); white-space:nowrap; }
.followup-chip:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.sem-item:hover .sem-item-del { opacity:1 !important; }

/* ===== Utility ===== */
.text-muted { color:var(--text-muted); }
.flex { display:flex; } .gap-sm { gap:var(--sp-xs); } .gap-md { gap:var(--sp-md); }
.mt-sm { margin-top:var(--sp-xs); } .mb-sm { margin-bottom:var(--sp-xs); }
.flex-1 { flex:1; }
.text-sm { font-size:var(--text-xs); color:var(--text-muted); }
.text-xs { font-size:var(--text-sm); color:var(--text-muted); }
.label-sm { font-size:var(--text-xs); color:var(--text-muted); margin-bottom:2px; display:block; }
.section-title { font-weight:600; margin-bottom:var(--sp-sm); }
.danger { color:var(--danger); }
.grid-2-col { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-sm); }
.grid-2-col-sm { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-xs); }
.grid-3-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sp-sm); }

/* Input utilities */
.input-base, .input-base-bg, .input-sm, .input-compact, .input-compact-bg, .input-mono {
  border:1px solid var(--border); border-radius:var(--r-sm); outline:none; transition:border-color var(--transition);
  background:var(--bg); color:var(--text); font-size:var(--text-base);
}
.input-base:focus, .input-base-bg:focus, .input-sm:focus, .input-compact:focus, .input-compact-bg:focus, .input-mono:focus { border-color:var(--primary); }
.input-base, .input-base-bg { width:100%; padding:6px var(--sp-sm); }
.input-sm { width:100%; padding:5px var(--sp-sm); }
.input-compact { padding:5px; }
.input-compact-bg { padding:5px var(--sp-sm); background:var(--bg); }
.input-mono { font-family:var(--mono); font-size:var(--text-sm); padding:6px var(--sp-sm); resize:vertical; }
.input-full { width:100%; margin-bottom:var(--sp-xs); }

/* ===== Responsive ===== */
@media (max-width:1024px) {
  #rightbar { position:absolute; right:0; z-index:10; height:100%; box-shadow:var(--shadow-lg); }
  #rightbar.closed { margin-right:calc(-1 * var(--rightbar-w)); }
  #sidebar { position:absolute; left:var(--leftnav-w); z-index:9; height:100%; width:var(--sidebar-w); box-shadow:var(--shadow-lg); }
  #sidebar.closed { left:calc(-1 * var(--sidebar-w)); width:0; }
  #leftnav { z-index:11; position:relative; }
}
@media (max-width:768px) {
  :root { --sidebar-w:240px; --rightbar-w:280px; }
  #chat { padding:var(--sp-md); gap:var(--sp-md); }
  #input-area { padding:var(--sp-md); }
  .controls { padding:var(--sp-xs) var(--sp-md); gap:var(--sp-sm); font-size:var(--text-xs); }
  .result-table-wrap { max-height:260px; }
  .result-table { font-size:var(--text-sm); }
  .chat-q .bubble { max-width:88%; }
  .modal-box { width:96%; padding:var(--sp-lg); }
  .welcome { padding:24px var(--sp-md) 24px; }
  .welcome h1 { font-size:24px; }
  .welcome-subtitle { font-size:14px !important; }
  .welcome-logo { width:300px; height:225px; }
  #chart-container { height:260px; }
}
@media (max-width:480px) {
  :root { --sidebar-w:260px; --rightbar-w:260px; --leftnav-w:32px; }
  #status-bar { padding:0 var(--sp-sm); font-size:var(--text-xs); height:28px; }
  #chat { padding:var(--sp-sm); gap:var(--sp-sm); }
  #input-area { padding:var(--sp-sm); }
  .input-capsule { padding:2px 2px 2px 10px; }
  #question-input { font-size:12px; }
  .send-btn { width:32px; height:32px; font-size:15px; }
  .controls { padding:4px var(--sp-sm); gap:4px; font-size:9px; }
  .btn { padding:6px var(--sp-md); font-size:var(--text-sm); }
  .welcome { padding:20px var(--sp-sm) 20px; }
  .welcome h1 { font-size:20px; }
  .welcome-subtitle { font-size:12px !important; }
  .welcome-logo { width:240px; height:180px; }
  .welcome-card { padding:8px 14px; }
  .modal-box { width:98%; padding:var(--sp-md); }
}

/* ===== Professional Polish ===== */

/* Modal top tab bar */
.modal-tabs { display:flex; gap:0; padding:0 var(--sp-lg); background:var(--bg); border-bottom:1px solid var(--border); overflow-x:auto; }
.modal-tabs button { flex:1; min-width:fit-content; padding:10px 12px; border:none; background:transparent; border-bottom:2px solid transparent; cursor:pointer; font-size:var(--text-base); color:var(--text-secondary); white-space:nowrap; transition:all var(--transition); }
.modal-tabs button:hover { color:var(--text); background:var(--surface); }
.modal-tabs button.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; background:var(--surface); }

/* Table zebra striping */
.result-table tbody tr:nth-child(even) td { background:var(--surface-alt); }
[data-theme="dark"] .result-table tbody tr:nth-child(even) td { background:rgba(255,255,255,.02); }
.result-table tbody tr:hover td { background:var(--primary-light) !important; }

/* Empty state with icon */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--sp-2xl) var(--sp-lg); color:var(--text-muted); font-size:var(--text-sm); gap:var(--sp-sm); }
.empty-state .empty-icon { font-size:32px; opacity:.3; margin-bottom:var(--sp-xs); }

/* Card style for settings sections */
.settings-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-md); margin-bottom:var(--sp-sm); }
.settings-card-title { font-weight:600; font-size:var(--text-base); margin-bottom:var(--sp-sm); color:var(--text); display:flex; align-items:center; gap:var(--sp-xs); }

/* Welcome feature cards */
.feature-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--sp-md); max-width:720px; margin:var(--sp-lg) auto 0; }
.feature-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-lg); text-align:center; cursor:pointer; transition:all var(--transition); }
.feature-card:hover { border-color:var(--primary); box-shadow:var(--shadow); transform:translateY(-2px); }
.feature-card .fc-icon { font-size:24px; margin-bottom:var(--sp-sm); }
.feature-card .fc-title { font-weight:600; font-size:var(--text-base); margin-bottom:4px; }
.feature-card .fc-desc { font-size:var(--text-xs); color:var(--text-muted); line-height:1.4; }

/* Smooth transitions for interactive elements */
button, a, input, select, textarea, .btn { transition:all var(--transition); }

/* Professional toast notification */
.toast-wrap { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:6px; align-items:center; }
.toast { padding:10px 20px; background:var(--text); color:var(--bg); border-radius:var(--r-full); font-size:var(--text-sm); box-shadow:var(--shadow-lg); animation:toastIn .3s ease; display:flex; align-items:center; gap:6px; }
.toast.success { background:#065f46; color:#d1fae5; }
.toast.error { background:#991b1b; color:#fee2e2; }
@keyframes toastIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* SQL block action buttons */
.sql-actions { display:flex; gap:4px; margin-top:6px; }
.sql-actions button { padding:3px 10px; font-size:var(--text-xs); border:1px solid rgba(255,255,255,.2); border-radius:var(--r-sm); cursor:pointer; background:transparent; color:rgba(255,255,255,.7); }
.sql-actions button:hover { background:rgba(255,255,255,.1); color:#fff; }
[data-theme="dark"] .sql-actions button { border-color:rgba(255,255,255,.1); }

/* ===== Insight Card Grid ===== */
.card-grid { display:flex; flex-direction:column; gap:var(--sp-md); animation:fadeIn .3s ease; }
.insight-card-item { border-radius:8px; padding:var(--sp-lg); box-shadow:0 1px 3px rgba(0,0,0,.06); transition:all .2s ease; border:1px solid rgba(0,0,0,.04); }
.insight-card-item:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.card-title { font-weight:700; font-size:var(--text-md); margin-bottom:var(--sp-sm); display:flex; align-items:center; gap:6px; }
.card-body { font-size:var(--text-base); line-height:1.7; color:var(--text); }
.card-body strong, .insight-body strong { color:var(--primary-dark); font-weight:700; }
[data-theme="dark"] .insight-card-item { border-color:rgba(255,255,255,.04); }

/* ===== JSON Preview Card ===== */
.json-preview-card { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:12px; margin-bottom:4px; }
.json-preview-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.json-preview-header strong { font-size:12px; color:#166534; }
.json-preview-header button { background:none; border:none; cursor:pointer; font-size:14px; color:#166534; }
.json-preview-card pre { font-family:var(--mono); font-size:11px; color:#166534; white-space:pre-wrap; margin:0; line-height:1.6; }

/* Card body */
.card-dot { color:var(--primary); margin-right:4px; }

[data-theme="dark"] .insight-card-item { background-opacity:0.15; }

/* Settings modal tabs */
.modal-tabs button.modal-tab-sub,
.modal-tabs button { flex:1; padding:10px 6px; border:none; background:transparent; border-bottom:2px solid transparent; cursor:pointer; font-size:var(--text-sm); color:var(--text-muted); white-space:nowrap; transition:all var(--transition); }
.modal-tabs button.active { background:var(--surface); color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.modal-tabs button.modal-tab-sub:hover { color:var(--text); }

/* Hot queries */
.hot-queries { max-width:600px; margin:0 auto; padding:0 24px 16px; }
.hot-queries-title { font-size:11px; color:var(--text-dim); margin-bottom:6px; text-align:center; }
.hot-queries-list { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.hot-queries-list span { padding:5px 12px; background:var(--surface); border:1px solid var(--border); border-radius:16px; cursor:pointer; font-size:11px; transition:all .15s; white-space:nowrap; }
.hot-queries-list span:hover { border-color:var(--primary); color:var(--primary); }

/* Dark mode card backgrounds */
[data-theme="dark"] .insight-card-item { background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.06); }
[data-theme="dark"] .card-body strong,
[data-theme="dark"] .insight-body strong { color:var(--primary); }

/* ===== Message Bubble Hover Actions ===== */
.bubble-actions { display:flex; gap:8px; margin-top:2px; }
.bubble-actions button { background:none; border:none; cursor:pointer; font-size:12px; color:var(--text-muted); padding:0; transition:all var(--transition); }
.bubble-actions button:hover { color:var(--primary); }
.bubble-actions .fav-on { color:var(--warning); }

/* Rightbar toggle tab */
.rightbar-toggle { position:absolute; right:0; top:50%; transform:translateY(-50%); width:24px; height:56px; background:var(--surface); border:1px solid var(--border); border-right:none; border-radius:8px 0 0 8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--text-muted); z-index:12; transition:all var(--transition); user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.rightbar-toggle-close { right:calc(var(--rightbar-w) - 24px); border-radius:0; border-right:1px solid var(--border); border-left:1px solid var(--border); }
.rightbar-toggle:hover { background:var(--primary-light); color:var(--primary); border-color:var(--primary); }
@media (max-width:768px) {
  .rightbar-toggle { width:32px; }
  .rightbar-toggle-close { right:calc(var(--rightbar-w) - 32px); }
}

/* ── Processing pulse ── */
@keyframes docPulse { 0%,100%{opacity:.4;transform:scale(.85)} 50%{opacity:1;transform:scale(1.05)} }
.doc-processing-dot { display:inline-flex;width:10px;height:10px;border-radius:50%;background:#3b82f6;animation:docPulse 1.2s ease-in-out infinite;flex-shrink:0; }

/* ── Confirm Dialog ── */
.confirm-overlay { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:10000; animation:fadeIn .15s ease; }
.confirm-box { background:var(--surface); border-radius:14px; padding:28px 32px; max-width:420px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,.15); animation:scaleIn .2s ease; }
.confirm-msg { font-size:14px; line-height:1.6; color:var(--text); margin-bottom:24px; }
.confirm-btns { display:flex; justify-content:flex-end; gap:10px; }
.confirm-btns button { padding:8px 20px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; border:none; transition:all .15s; }
.btn-confirm-cancel { background:var(--bg); color:var(--text-secondary); }
.btn-confirm-cancel:hover { background:var(--border); }
.btn-confirm-ok { background:var(--primary); color:#fff; }
.btn-confirm-ok:hover { background:var(--primary-dark); }
.btn-confirm-ok.danger { background:var(--danger); }
.btn-confirm-ok.danger:hover { background:#dc2626; }
@keyframes fadeIn { from{opacity:0}to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)} }

/* ── Doc error tooltip ── */
.doc-error { color:var(--danger); cursor:help; border-bottom:1px dotted var(--danger); }
.doc-error:hover::after { content:attr(data-error); position:absolute; background:var(--text); color:#fff; font-size:11px; padding:6px 10px; border-radius:6px; max-width:280px; white-space:normal; word-break:break-word; z-index:100; margin-top:20px; }

/* ── Delimiter preset buttons ── */
.delim-preset-btn { padding:3px 10px; border-radius:16px; font-size:11px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.delim-preset-btn:hover { border-color:var(--primary) !important; color:var(--primary); }

/* ── Chunk highlight ── */
.chunk-highlight { background:#fde68a; color:#92400e; padding:1px 0; border-radius:2px; animation:highlightPulse .6s ease; }
@keyframes highlightPulse { 0%{background:#fef3c7} 50%{background:#fde68a} 100%{background:#fef08a} }

/* ── Doc stages tooltip ── */
.doc-tooltip { position:fixed; z-index:99999; background:var(--surface,#fff); color:var(--text,#334155); padding:12px 16px; border-radius:12px; font-size:11px; line-height:1.7; pointer-events:none; white-space:nowrap; box-shadow:0 4px 24px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06); border:1px solid var(--border,#e2e8f0); }
.doc-stages { display:flex; flex-direction:column; gap:3px; }
.doc-stage-row { display:flex; align-items:center; gap:8px; justify-content:space-between; min-width:120px; }
.doc-stage-row span:first-child { display:inline-flex; align-items:center; gap:6px; color:var(--text-secondary,#475569); }
.doc-stage-row span:first-child svg { width:13px; height:13px; opacity:.7; }
.doc-stage-time { color:var(--text-muted,#94a3b8); font-variant-numeric:tabular-nums; margin-left:14px; font-weight:500; }
.doc-stages { display:flex; flex-direction:column; gap:4px; }
.doc-stage-row { display:flex; align-items:center; gap:8px; justify-content:space-between; min-width:130px; }
.doc-stage-row span:first-child { display:inline-flex; align-items:center; gap:5px; }
.doc-stage-row span:first-child svg { width:13px; height:13px; opacity:.85; }
.doc-stage-time { color:#94a3b8; font-variant-numeric:tabular-nums; margin-left:12px; }