/* OmniBuddy redesign — design tokens + base */

:root{
  /* Studio (paper / light) — default */
  --bg:        #F4EFE3;
  --bg-2:      #EDE6D4;
  --paper:     #FBF8F1;
  --surface:   #FFFFFF;
  --ink:       #131211;
  --ink-2:     #2A2724;
  --muted:     #6E665A;
  --muted-2:   #97907F;
  --line:      #E5DECD;
  --line-2:    #D7CFBB;
  --accent:    #2A2A6E;      /* deep indigo */
  --accent-2:  #4F46E5;
  --verified:  #11754B;
  --verified-bg: #E6F2EA;
  --warn:      #B65E07;
  --warn-bg:   #FBEBD3;
  --cost:      #0B6E45;
  --user-bg:   #131211;
  --user-fg:   #FAF7EE;
  --chip-bg:   #F1ECE0;
  --chip-bd:   #DCD3BF;
  --shadow-card: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(40,30,10,.04), 0 12px 32px -16px rgba(40,30,10,.18);
  --shadow-pop: 0 24px 60px -20px rgba(40,30,10,.32), 0 1px 0 rgba(255,255,255,.6) inset;

  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:'Instrument Serif', 'New York', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;
}

[data-theme="console"]{
  --bg:        #0B0D10;
  --bg-2:      #0F1216;
  --paper:     #14181E;
  --surface:   #161B22;
  --ink:       #ECECEC;
  --ink-2:     #D6D6D6;
  --muted:     #8A93A1;
  --muted-2:   #61697A;
  --line:      #232932;
  --line-2:    #2E3540;
  --accent:    #8B85FF;
  --accent-2:  #A399FF;
  --verified:  #4ADE80;
  --verified-bg: #0E2A1C;
  --warn:      #FBBF24;
  --warn-bg:   #2A2310;
  --cost:      #4ADE80;
  --user-bg:   #ECECEC;
  --user-fg:   #0B0D10;
  --chip-bg:   #1B2129;
  --chip-bd:   #2A323E;
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 36px -18px rgba(0,0,0,.6);
  --shadow-pop: 0 30px 70px -20px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.06) inset;
}

[data-theme="crystal"]{
  --bg:        #EEF0F7;
  --bg-2:      #E2E6F2;
  --paper:     rgba(255,255,255,.62);
  --surface:   rgba(255,255,255,.78);
  --ink:       #15172A;
  --ink-2:     #2A2D45;
  --muted:     #66698A;
  --muted-2:   #8A8DAF;
  --line:      rgba(20,22,50,.10);
  --line-2:    rgba(20,22,50,.18);
  --accent:    #3D2EBD;
  --accent-2:  #6E48F0;
  --verified:  #10885A;
  --verified-bg: rgba(16,136,90,.12);
  --warn:      #B65E07;
  --warn-bg:   rgba(182,94,7,.12);
  --cost:      #0B6E45;
  --user-bg:   #15172A;
  --user-fg:   #FFFFFF;
  --chip-bg:   rgba(255,255,255,.65);
  --chip-bd:   rgba(20,22,50,.10);
  --shadow-card: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 60px -28px rgba(38,32,90,.25);
  --shadow-pop: 0 36px 90px -30px rgba(38,32,90,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";letter-spacing:-0.005em;
  height:100%; overflow:hidden;}
#root{height:100%;}

button{font-family:inherit;color:inherit;letter-spacing:inherit;}

/* Page background — softly textured paper / gradient depending on theme */
.page-bg{position:fixed;inset:0;z-index:0;pointer-events:none;}
.page-bg::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 700px at 12% 0%,  rgba(255,235,200,.55), transparent 70%),
    radial-gradient(900px 700px at 100% 100%, rgba(220,210,240,.50), transparent 70%),
    var(--bg);
}
[data-theme="console"] .page-bg::before{
  background:
    radial-gradient(900px 700px at 10% -10%, rgba(80,70,200,.18), transparent 70%),
    radial-gradient(900px 700px at 110% 110%, rgba(34,160,120,.10), transparent 70%),
    var(--bg);
}
[data-theme="crystal"] .page-bg::before{
  background:
    radial-gradient(700px 500px at 18% 8%,  rgba(168,130,255,.55), transparent 65%),
    radial-gradient(700px 500px at 86% 12%, rgba(180,220,255,.55), transparent 65%),
    radial-gradient(900px 700px at 50% 110%, rgba(255,200,220,.50), transparent 65%),
    var(--bg);
}
/* subtle grain */
.page-bg::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;
  background-image:
    radial-gradient(rgba(80,60,20,.06) 1px, transparent 1px);
  background-size: 3px 3px;}
[data-theme="console"] .page-bg::after{opacity:.18; mix-blend-mode:screen;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);}
[data-theme="crystal"] .page-bg::after{opacity:0;}

/* Mono — pure neutral, minimal */
[data-theme="mono"]{
  --bg:        #F5F4F1;
  --bg-2:      #ECEAE5;
  --paper:     #FFFFFF;
  --surface:   #FFFFFF;
  --ink:       #0A0A0A;
  --ink-2:     #2A2A2A;
  --muted:     #6E6E6E;
  --muted-2:   #999999;
  --line:      #E5E3DE;
  --line-2:    #CFCBC3;
  --accent:    #0A0A0A;
  --accent-2:  #2A2A2A;
  --verified:  #166A3E;
  --verified-bg: #ECF3EE;
  --warn:      #9A4A00;
  --warn-bg:   #F5E6D3;
  --cost:      #166A3E;
  --user-bg:   #0A0A0A;
  --user-fg:   #FFFFFF;
  --chip-bg:   #F0EDE7;
  --chip-bd:   #DCD8D0;
}
[data-theme="mono"] .page-bg::before{
  background:
    radial-gradient(900px 700px at 8% 0%,   rgba(0,0,0,.04), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(0,0,0,.04), transparent 60%),
    var(--bg);
}
[data-theme="mono"] .page-bg::after{opacity:.2;}

/* Forest — deep green executive */
[data-theme="forest"]{
  --bg:        #EEF3EC;
  --bg-2:      #E2EBDF;
  --paper:     #F8FAF6;
  --surface:   #FFFFFF;
  --ink:       #0E1A13;
  --ink-2:     #1F2B23;
  --muted:     #5A6A5D;
  --muted-2:   #87937F;
  --line:      #D7E1D3;
  --line-2:    #C0CCBB;
  --accent:    #1F6B3A;
  --accent-2:  #2E8A52;
  --verified:  #1F6B3A;
  --verified-bg: #DDEDDE;
  --warn:      #B65E07;
  --warn-bg:   #FBEBD3;
  --cost:      #1F6B3A;
  --user-bg:   #0E1A13;
  --user-fg:   #F4F8F0;
  --chip-bg:   #E8EFE5;
  --chip-bd:   #CBD8C5;
}
[data-theme="forest"] .page-bg::before{
  background:
    radial-gradient(900px 700px at 12% 0%,  rgba(60,130,90,.16), transparent 65%),
    radial-gradient(900px 700px at 100% 100%, rgba(160,200,120,.20), transparent 65%),
    var(--bg);
}

/* Slate — cool gray, enterprise */
[data-theme="slate"]{
  --bg:        #E8EBF0;
  --bg-2:      #DDE1E9;
  --paper:     #F5F7FA;
  --surface:   #FFFFFF;
  --ink:       #0F141C;
  --ink-2:     #1F2733;
  --muted:     #5B6573;
  --muted-2:   #8C95A4;
  --line:      #D2D7E0;
  --line-2:    #B7BFCC;
  --accent:    #3252D2;
  --accent-2:  #5670E8;
  --verified:  #146A4A;
  --verified-bg: #DCEDE3;
  --warn:      #B45309;
  --warn-bg:   #FBEBD3;
  --cost:      #146A4A;
  --user-bg:   #0F141C;
  --user-fg:   #F0F3F8;
  --chip-bg:   #E6EAF1;
  --chip-bd:   #C8CFDC;
}
[data-theme="slate"] .page-bg::before{
  background:
    radial-gradient(900px 700px at 10% 0%,  rgba(80,120,220,.16), transparent 65%),
    radial-gradient(900px 700px at 100% 100%, rgba(140,160,200,.20), transparent 65%),
    var(--bg);
}

/* Sunset — warm coral + ink */
[data-theme="sunset"]{
  --bg:        #FBEFE6;
  --bg-2:      #F5E2D2;
  --paper:     #FEF8F2;
  --surface:   #FFFFFF;
  --ink:       #1A0E0B;
  --ink-2:     #2D1B14;
  --muted:     #7A5D4F;
  --muted-2:   #A5897A;
  --line:      #EBD9C7;
  --line-2:    #DBC4AC;
  --accent:    #C2410C;
  --accent-2:  #E55B1F;
  --verified:  #2F6B3A;
  --verified-bg: #E0EDE0;
  --warn:      #92400E;
  --warn-bg:   #F8E3CB;
  --cost:      #2F6B3A;
  --user-bg:   #1A0E0B;
  --user-fg:   #FBEFE6;
  --chip-bg:   #F7E6D5;
  --chip-bd:   #E6CDB2;
}
[data-theme="sunset"] .page-bg::before{
  background:
    radial-gradient(900px 700px at 14% 0%,  rgba(255,180,120,.45), transparent 65%),
    radial-gradient(900px 700px at 100% 100%, rgba(255,220,180,.50), transparent 65%),
    var(--bg);
}

/* Midnight — navy + electric purple */
[data-theme="midnight"]{
  --bg:        #0A0E1E;
  --bg-2:      #0E1228;
  --paper:     #161B36;
  --surface:   #1A1F3D;
  --ink:       #ECEAFF;
  --ink-2:     #D6D2FF;
  --muted:     #8A87BD;
  --muted-2:   #5F5C8A;
  --line:      #2A2F55;
  --line-2:    #3A4070;
  --accent:    #A98BFF;
  --accent-2:  #C3ADFF;
  --verified:  #4ADE80;
  --verified-bg: #0E2A1C;
  --warn:      #FBBF24;
  --warn-bg:   #2A2310;
  --cost:      #4ADE80;
  --user-bg:   #ECEAFF;
  --user-fg:   #0A0E1E;
  --chip-bg:   #1F2547;
  --chip-bd:   #2F3660;
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 36px -18px rgba(0,0,0,.6);
  --shadow-pop: 0 30px 70px -20px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.06) inset;
}
[data-theme="midnight"] .page-bg::before{
  background:
    radial-gradient(900px 700px at 10% -10%, rgba(150,120,255,.20), transparent 70%),
    radial-gradient(900px 700px at 110% 110%, rgba(80,130,255,.18), transparent 70%),
    var(--bg);
}
[data-theme="midnight"] .page-bg::after{opacity:.18; mix-blend-mode:screen;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);}

/* App shell */
.app{position:relative; z-index:1; display:grid;
  grid-template-columns: var(--sidebar-w, 268px) 1fr;
  height:100%; transition: grid-template-columns .28s ease;}
.app[data-sidebar="closed"]{ grid-template-columns: 1fr; }

/* Sidebar */
.sb{position:relative; min-width:0; height:100%;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  display:flex; flex-direction:column; overflow:hidden;}
[data-theme="crystal"] .sb{ background: rgba(255,255,255,.32); backdrop-filter: blur(20px); }

.sb-hd{padding:18px 16px 8px; display:flex; align-items:center; justify-content:space-between;}
.sb-brand{display:flex; align-items:center; gap:10px;}
.sb-brand .mark{width:30px;height:30px;border-radius:8px; display:grid; place-items:center;
  background:var(--ink); color:var(--paper); font-family:var(--font-serif); font-size:18px;}
.sb-brand .name{font-family:var(--font-serif); font-size:20px; letter-spacing:-0.01em;}
.sb-brand .name em{font-style:italic; color:var(--accent);}

.sb-newbtn{margin:6px 12px 10px; display:flex; align-items:center; gap:8px;
  padding:11px 14px; border-radius:var(--r-2); border:1px solid var(--ink); background:var(--ink);
  color:var(--paper); cursor:pointer; font-size:13px; font-weight:500;
  transition: transform .12s ease;}
.sb-newbtn:hover{ transform: translateY(-1px); }
.sb-newbtn .plus{font-family:var(--font-serif); font-size:18px; line-height:0;}

.sb-search{margin:0 12px 8px; position:relative;}
.sb-search input{width:100%; padding:8px 10px 8px 32px; border-radius:var(--r-2);
  border:1px solid var(--line); background:transparent; color:var(--ink); font:13px var(--font-sans);
  outline:none;}
.sb-search input:focus{border-color:var(--ink); }
.sb-search .ico{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted);}

.sb-group{padding:14px 12px 4px;}
.sb-group h4{margin:0 6px 6px; font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600;}
.sb-list{display:flex; flex-direction:column; gap:1px; overflow-y:auto; flex:1; min-height:0;
  padding:0 8px 12px;
  scrollbar-width:thin; scrollbar-color: var(--line-2) transparent;}
.sb-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  cursor:pointer; color:var(--ink-2); font-size:13px; line-height:1.35;
  transition: background .12s ease;}
.sb-item:hover{ background: rgba(0,0,0,.04); }
[data-theme="console"] .sb-item:hover{ background: rgba(255,255,255,.04); }
.sb-item.active{ background:var(--paper); box-shadow: 0 0 0 1px var(--line); color:var(--ink); font-weight:500;}
.sb-item .ico{width:18px; flex:none; color:var(--muted); font-size:13px;}
.sb-item .ttl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sb-item .when{font-size:11px; color:var(--muted-2); font-variant-numeric:tabular-nums;}
.sb-item.pinned .ico{ color: var(--accent); }

.sb-foot{padding:10px 12px 14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px;}
.sb-foot button{display:flex; align-items:center; gap:10px; padding:8px 10px; border:0; background:transparent;
  border-radius:8px; cursor:pointer; color:var(--ink-2); font-size:13px; text-align:left;}
.sb-foot button:hover{ background: rgba(0,0,0,.05); }
[data-theme="console"] .sb-foot button:hover{ background: rgba(255,255,255,.05); }

/* Main */
.main{position:relative; min-width:0; min-height:0; height:100%;
  display:flex; flex-direction:column; overflow:hidden;}
.topbar{display:flex; align-items:center; gap:14px; padding:14px 22px;
  border-bottom:1px solid var(--line); background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(12px);}
.topbar .iconbtn{ width:32px; height:32px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper); display:grid; place-items:center; cursor:pointer; color:var(--ink-2);}
.topbar .iconbtn:hover{ border-color: var(--line-2); }
.tb-title{font-family:var(--font-serif); font-size:18px; letter-spacing:-0.01em; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tb-meta{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px;}
.tb-meta .dot{width:4px;height:4px;border-radius:99px;background:var(--muted-2);}
.tb-actions{display:flex; align-items:center; gap:6px;}
.tb-actions .iconbtn{ border:1px solid transparent; background:transparent;}
.tb-actions .iconbtn:hover{ background: var(--paper); border-color: var(--line);}

/* Pitch Deck Studio launcher (external app: pitch.localhost5173.live) */
.tb-pitch-btn{display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--r-pill); border:0;
  background: linear-gradient(135deg, #F59E0B, #F97316);
  color:#fff; font-size:12px; font-weight:500; letter-spacing:-0.005em;
  text-decoration:none; cursor:pointer; box-shadow: 0 1px 2px rgba(245,158,11,.25);
  transition: filter .15s ease, transform .15s ease;}
.tb-pitch-btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.tb-pitch-btn:active{ transform: translateY(0); }

/* Mode/persona chips in topbar */
.seg{display:inline-flex; padding:3px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill);}
.seg button{appearance:none; border:0; background:transparent; padding:5px 12px;
  border-radius:var(--r-pill); font:12px var(--font-sans); color:var(--muted); cursor:pointer;
  letter-spacing:-0.005em;}
.seg button.on{ background:var(--ink); color:var(--paper); }

.persona{display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:12px; color:var(--ink-2); cursor:pointer;}
.persona .avatar{width:18px;height:18px;border-radius:99px;background:linear-gradient(135deg, var(--accent), var(--accent-2));}

/* Conversation feed */
.feed{flex:1; min-height:0; overflow-y:auto; padding: 32px 0 200px;
  scrollbar-width:thin; scrollbar-color: var(--line-2) transparent;}
.feed-inner{max-width: 880px; margin: 0 auto; padding: 0 28px; display:flex; flex-direction:column; gap:28px;}

/* User message bubble — kept anchored to right but flatter, more confident */
.bubble-user{align-self:flex-end; max-width: 78%;
  padding: 14px 18px; background: var(--user-bg); color:var(--user-fg);
  border-radius: 18px 18px 4px 18px;
  font-size: 15px; line-height:1.5; letter-spacing:-0.01em;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px -12px rgba(20,15,5,.35);}

/* Response — chatbot-first treatment (no heavy card chrome). */
.response{display:flex; flex-direction:column; gap:10px;}

.byline{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted);}
.byline .bl-mark{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:var(--paper); border:1px solid var(--line); color:var(--accent); flex:none;}
.byline .bl-text{display:flex; align-items:center; gap:6px;}
.byline .bl-text b{color:var(--ink-2); font-weight:600;}
.byline .bl-sep{color:var(--muted-2);}
.byline .bl-muted{color:var(--muted);}
.byline .bl-verify{display:inline-flex; align-items:center; gap:5px; padding:3px 8px 3px 7px;
  border-radius:var(--r-pill); background:var(--verified-bg); color:var(--verified);
  font-size:11px; font-weight:600; letter-spacing:0; cursor:default;
  border:1px solid color-mix(in oklab, var(--verified) 22%, transparent);}
.byline .bl-verify:hover{ filter:brightness(1.02); }

.resp-body{font-size: 15px; line-height: 1.6; color:var(--ink-2);}
.resp-body > p{margin: 0 0 14px;}
.resp-body > p:last-child{margin-bottom: 0;}
.resp-body b, .resp-body strong{color:var(--ink); font-weight:600;}

/* Big-number stat — executive default */
.stat-row{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin: 8px 0 20px;}
.stat{padding: 18px 20px; border:1px solid var(--line); border-radius:var(--r-2);
  background: color-mix(in oklab, var(--paper) 85%, transparent);}
.stat .lbl{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted-2); font-weight:600;}
.stat .val{font-family:var(--font-serif); font-size:34px; letter-spacing:-0.02em; color:var(--ink);
  margin-top:4px; font-variant-numeric:tabular-nums;}
.stat .sub{font-size:12px; color:var(--muted); margin-top:4px;}
.stat.delta-up .sub{ color: var(--verified); }
.stat.delta-down .sub{ color: #B45309; }

/* Table */
.tbl-wrap{border:1px solid var(--line); border-radius:var(--r-2); overflow:hidden; margin: 4px 0 18px;}
.tbl{width:100%; border-collapse: collapse; font-size:13.5px;}
.tbl thead th{background: var(--paper); color:var(--muted); font-weight:600;
  text-align:left; padding: 10px 14px; border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;}
.tbl tbody td{padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink); font-variant-numeric:tabular-nums;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr:hover{ background: color-mix(in oklab, var(--paper) 60%, transparent); }
.tbl td.num{text-align:right; font-family:var(--font-mono); font-size:13px;}
.tbl th.num{text-align:right;}

/* Mini chart (inline) */
.chart{height:130px; display:flex; align-items:flex-end; gap:8px; padding: 10px 0 28px;
  border-bottom:1px dashed var(--line); margin-bottom: 28px;}
.chart .bar{flex:1; background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 60%, white));
  border-radius:4px 4px 0 0; min-height:6px; position:relative; transition: height .8s cubic-bezier(.2,.7,.2,1);}
.chart .bar.hot{ background: linear-gradient(180deg, var(--verified), color-mix(in oklab, var(--verified) 50%, white));}
.chart .bar .lbl{position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font:11px var(--font-mono); color:var(--muted);}
.chart .bar .v{position:absolute; top:-20px; left:50%; transform:translateX(-50%); font:10px var(--font-mono); color:var(--ink); opacity:0; transition: opacity .15s;}
.chart .bar:hover .v{opacity:1;}
.chart-cap{display:flex; justify-content:space-between; align-items:flex-end; font-size:11px; color:var(--muted); margin: 22px 0 8px;}
.chart-cap .title{font-size:12px; color:var(--ink-2);}

/* Drill chips */
.drill-row{display:flex; flex-wrap:wrap; gap:6px; margin: 6px 0 0; padding-top:14px; border-top:1px dashed var(--line);}
.drill-row .lbl{font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase;
  margin-right:4px; align-self:center; font-weight:600;}
.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2);
  border-radius:var(--r-pill); font-size:12px; cursor:pointer; transition: all .12s;}
.chip:hover{ background: var(--ink); color: var(--paper); border-color:var(--ink); }
.chip .arr{ opacity:.5; }

/* Response footer (trail / cost / actions) — no border-top, lighter */
.resp-foot{padding: 4px 0 0; margin-top: 6px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:12px;}
.trail-pill{display:inline-flex; align-items:center; gap:8px; padding:5px 10px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-pill); cursor:pointer; color:var(--ink-2);
  font-size:12px;}
.trail-pill:hover{border-color:var(--ink); }
.trail-pill .dots{display:flex; gap:3px;}
.trail-pill .dots i{width:5px;height:5px;border-radius:99px;background:var(--accent); display:block;}

.cost-strip{display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-family:var(--font-mono); font-size:11.5px;}
.cost-strip b{color:var(--cost); font-weight:600;}
.cost-strip .sep{opacity:.4;}

.ft-spacer{flex:1;}
.ft-actions{display:flex; align-items:center; gap:2px;}
.ft-actions button{appearance:none; border:0; background:transparent; padding:6px;
  border-radius:6px; cursor:pointer; color:var(--muted);}
.ft-actions button:hover{ background: rgba(0,0,0,.05); color:var(--ink);}
[data-theme="console"] .ft-actions button:hover{ background: rgba(255,255,255,.05); color:var(--ink);}

/* Citations row */
.cite-row{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin: 8px 0 16px;
  padding: 10px 12px; background: color-mix(in oklab, var(--paper) 60%, transparent);
  border:1px dashed var(--line-2); border-radius:var(--r-2); font-size:12px; color:var(--muted);}
.cite-row .lbl{font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted-2);}
.cite{display:inline-flex; align-items:center; gap:6px; padding:4px 9px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pill); color:var(--ink-2); cursor:pointer;
  position:relative;}
.cite:hover{ border-color: var(--ink); }
.cite .kind{font-size:10px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em;}

.honesty-banner{display:flex; align-items:flex-start; gap:10px; padding: 12px 14px;
  background: var(--warn-bg); border:1px solid color-mix(in oklab, var(--warn) 25%, transparent);
  border-radius:var(--r-2); color:var(--warn); font-size:13px; margin: 0 0 14px;}
.honesty-banner .ico{font-size:14px; flex:none; margin-top:2px;}
.honesty-banner b{color:var(--warn);}

/* Live trail (animating) — quieter, no big card */
.live-card{padding: 14px 16px;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border:1px dashed var(--line-2);
  border-radius:var(--r-3);
  display:flex; flex-direction:column; gap:6px;}
.live-route{display:flex; align-items:center; gap:8px; font-size:12.5px;
  color:var(--muted); margin-bottom: 6px;}
.live-route b{ color: var(--ink-2); font-weight:600; }
.live-step{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2);}
.live-step .b{width:8px;height:8px;border-radius:99px;background:var(--accent); flex:none;}
.live-step.done .b{ background: var(--verified); }
.live-step.pending{ color: var(--muted-2); }
.live-step.pending .b{ background: var(--line-2); }
.live-step .tool{font-family:var(--font-mono); font-size:12px; color:var(--accent);}
.live-step .detail{ color: var(--muted); }
.live-step.done .detail{ color: var(--ink-2); }
.live-step .spinner{width:12px;height:12px; border-radius:99px;
  border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite;}
@keyframes spin{ to{ transform: rotate(360deg);} }

/* Composer */
.composer-wrap{position:absolute; left:0; right:0; bottom:0; padding: 20px 28px 22px;
  background: linear-gradient(180deg, transparent, var(--bg) 32%);
  pointer-events:none;}
.composer{max-width:880px; margin: 0 auto; pointer-events:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius: var(--r-4); box-shadow: var(--shadow-pop); overflow:hidden;}
[data-theme="crystal"] .composer{ backdrop-filter: blur(24px) saturate(150%); }

.composer-input{display:flex; align-items:flex-start; padding: 14px 18px; gap:12px;}
.composer-input textarea{flex:1; border:0; outline:0; background:transparent;
  font:15px/1.55 var(--font-sans); color:var(--ink); resize:none; min-height:24px; max-height:160px;
  letter-spacing:-0.005em;}
.composer-input textarea::placeholder{ color: var(--muted-2); }
.send{appearance:none; border:0; background:var(--ink); color:var(--paper);
  width:36px; height:36px; border-radius:99px; cursor:pointer; display:grid; place-items:center;
  transition: transform .12s;}
.send:hover{ transform: scale(1.04); }
.send:disabled{ background: var(--line-2); color: var(--muted); cursor:not-allowed; transform:none;}

.composer-toolbar{display:flex; align-items:center; gap:8px; padding: 8px 12px 10px 14px;
  border-top:1px solid var(--line); background: color-mix(in oklab, var(--paper) 50%, transparent);
  flex-wrap:wrap;}
.t-chip{display:inline-flex; align-items:center; gap:6px; padding: 5px 10px;
  background: transparent; border:1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: 12px; color: var(--ink-2); cursor:pointer;}
.t-chip:hover{ border-color: var(--ink); }
.t-chip.on{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.t-chip .ic{ font-size: 13px; opacity:.7; }
.t-chip .lbl-s{ color: var(--muted); }
.t-chip.on .lbl-s{ color: color-mix(in oklab, var(--paper) 75%, transparent); }

.composer-toolbar .spacer{flex:1;}

/* Welcome / empty state — chatbot-style, centered (suggestions + sources) */
.welcome{max-width: 760px; margin: 0 auto; padding: 8vh 28px 0; text-align:center;
  display:flex; flex-direction:column; align-items:center;}
.welcome-mark{width:54px; height:54px; border-radius: 16px; background: var(--surface);
  border:1px solid var(--line); display:grid; place-items:center; color: var(--accent);
  box-shadow: var(--shadow-card); margin-bottom: 22px;}
.welcome .greet{font-family:var(--font-serif); font-size: 50px; letter-spacing:-0.025em;
  line-height:1.1; margin: 0; color:var(--ink); font-weight: 400;}
.welcome .greet-em{display:block; font-style:italic; color: var(--accent); margin-top: 6px;
  white-space: nowrap;}
.welcome .sub{font-size:15.5px; color:var(--muted); margin: 26px auto 0; max-width: 520px; line-height:1.55;}

.welcome-section{margin-top: 48px; width: 100%;}
.welcome-section .h{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--muted-2); margin-bottom: 14px; text-align:center;}
.link-chip{appearance:none; border:0; background:transparent; padding:0;
  font: inherit; color: var(--accent); cursor:pointer; text-transform: none;
  letter-spacing: 0; font-weight: 500;}
.link-chip:hover{ text-decoration: underline; }

.suggest-list{display:flex; flex-direction:column; gap:6px; max-width: 560px; margin: 0 auto;}
.suggest{display:flex; align-items:center; gap:12px; padding: 12px 16px; background:transparent;
  border:1px solid var(--line); border-radius:var(--r-pill); cursor:pointer; text-align:left;
  color:var(--ink-2); font-size:14px; transition:all .14s;}
.suggest:hover{ background: var(--surface); border-color: var(--ink); transform: translateY(-1px); }
.suggest .q{flex:1;}
.suggest .arr{ color: var(--muted-2); transition: transform .14s; }
.suggest:hover .arr{ transform: translate(2px, -2px); color: var(--ink); }

.src-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
.src-card{padding: 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2);
  cursor:pointer; transition: all .14s; position:relative; text-align:left;}
.src-card:hover{ border-color: var(--ink); transform: translateY(-1px); }
.src-card .glyph{width:22px;height:22px;border-radius:6px; display:grid;place-items:center;
  color:white; font-size:13px; margin-bottom:8px;}
.src-card .name{font-size:13px; font-weight:600; color:var(--ink); letter-spacing:-0.005em;}
.src-card .desc{font-size:11.5px; color:var(--muted); line-height:1.4; margin-top:4px;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;}

/* Palette swatch grid inside the Tweaks panel */
.palette-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top:2px;}
.pal-card{position:relative; padding: 6px; border-radius: 8px; cursor:pointer;
  background: rgba(0,0,0,.04); border: 1px solid transparent; transition: all .12s;}
.pal-card:hover{ background: rgba(0,0,0,.08); }
.pal-card.on{ box-shadow: 0 0 0 1.5px rgba(41,38,27,.85); background: rgba(0,0,0,.06); }
.pal-swatch{display:flex; height: 22px; border-radius: 5px; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);}
.pal-swatch span{flex:1;}
.pal-card .pal-name{display:block; font-size: 10.5px; margin-top: 5px;
  color: rgba(41,38,27,.78); font-weight: 500; text-align:center;}
.pal-card.on .pal-name{ color: rgba(41,38,27,1); font-weight: 600; }

/* Modal */
.modal-backdrop{position:fixed; inset:0; z-index:50;
  background: color-mix(in oklab, var(--ink) 30%, transparent);
  backdrop-filter: blur(2px);
  display:grid; place-items:center; padding: 40px;}
.modal{background:var(--surface); border:1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--shadow-pop); max-width: 760px; width:100%; max-height: calc(100vh - 80px);
  display:flex; flex-direction:column; overflow:hidden; transform: translateY(0);
  animation: pop .22s cubic-bezier(.2,.7,.2,1);}
@keyframes pop{ from{ transform: translateY(8px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.modal-hd{display:flex; align-items:center; gap:10px; padding: 18px 22px; border-bottom:1px solid var(--line);}
.modal-hd h3{margin:0; font-family:var(--font-serif); font-size:22px; letter-spacing:-0.01em; font-weight:400;}
.modal-hd .sub{font-size:12px; color:var(--muted); margin-left:6px;}
.modal-hd .x{margin-left:auto; appearance:none; background:transparent; border:0;
  width:30px; height:30px; border-radius:8px; cursor:pointer; color:var(--muted);}
.modal-hd .x:hover{ background: var(--paper); color:var(--ink); }
.modal-bd{padding: 18px 22px; overflow-y:auto; flex:1; min-height:0;}
.modal-ft{padding: 14px 22px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px;
  background: color-mix(in oklab, var(--paper) 55%, transparent);}

.btn{padding: 8px 14px; border-radius: var(--r-pill); border:1px solid var(--line); background:transparent; color:var(--ink-2);
  font:13px var(--font-sans); cursor:pointer;}
.btn:hover{ border-color: var(--ink); color:var(--ink);}
.btn.primary{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn.primary:hover{ filter:brightness(1.1); }
.btn.danger{ color:#C2410C; border-color: #FBBF24; background: var(--warn-bg);}

/* Trail expanded */
.trail-list{display:flex; flex-direction:column; gap:2px;}
.trail-step{display:grid; grid-template-columns: 30px 1fr; gap:14px; padding: 12px 0;
  border-bottom:1px solid var(--line);}
.trail-step:last-child{border-bottom:0;}
.trail-step .num{font-family:var(--font-mono); font-size:11px; color:var(--muted-2); padding-top:2px;}
.trail-step .body .tool{font-family:var(--font-mono); font-size:12px; color:var(--accent); margin-bottom:2px;}
.trail-step .body .detail{font-size:13.5px; color:var(--ink-2);}
.trail-step .body .meta{font-size:11px; color:var(--muted); margin-top:4px; font-family:var(--font-mono);}
.trail-step pre{margin: 8px 0 0; padding: 12px 14px; background: var(--bg-2);
  border:1px solid var(--line); border-radius:8px; font:12px/1.5 var(--font-mono); color:var(--ink);
  overflow-x:auto; white-space:pre;}
[data-theme="console"] .trail-step pre{ background: var(--paper); }

/* Filter pop tooltip */
.filter-pop{position:absolute; z-index:60; top:calc(100% + 8px); right:0;
  background:var(--surface); border:1px solid var(--line); border-radius: var(--r-2);
  box-shadow: var(--shadow-pop); padding: 12px 14px; min-width:260px;}
.filter-pop .h{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin-bottom:8px;}
.filter-pop .row{display:flex; justify-content:space-between; gap:14px; padding: 4px 0; font-size:12px;}
.filter-pop .row .k{color:var(--muted);}
.filter-pop .row .v{color:var(--ink); font-family:var(--font-mono); font-size:11.5px;}

/* Sources picker grid (modal) */
.src-pick-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.src-pick{display:flex; gap:12px; padding: 14px; border:1px solid var(--line); border-radius:var(--r-2); cursor:pointer;
  align-items:flex-start;}
.src-pick:hover{ border-color: var(--ink);}
.src-pick .glyph{ flex:none; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:white; font-size:14px;}
.src-pick .info{flex:1;}
.src-pick .name{font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px;}
.src-pick .desc{font-size:12px; color:var(--muted); line-height:1.45; margin-top:3px;}
.src-pick.on{ background: color-mix(in oklab, var(--accent) 10%, transparent); border-color: var(--accent);}
.src-pick .tog{width:18px;height:18px;border-radius:5px; border:1px solid var(--line-2); display:grid; place-items:center; flex:none;}
.src-pick.on .tog{ background:var(--accent); border-color:var(--accent); color:white;}

/* Saved questions */
.saved-row{display:flex; align-items:center; gap:14px; padding: 14px 0; border-bottom:1px solid var(--line); }
.saved-row:last-child{border-bottom:0;}
.saved-row .glyph{width:28px;height:28px;border-radius:8px; display:grid; place-items:center; color:white; font-size:13px; flex:none;}
.saved-row .info{flex:1;}
.saved-row .ttl{font-size:14px; color:var(--ink); font-weight:500;}
.saved-row .meta{font-size:12px; color:var(--muted); margin-top:2px;}
.saved-row .schedule{font-family:var(--font-mono); font-size:11.5px; color:var(--accent);}

/* Export popover */
.export-pop{position:absolute; right:0; top: 36px; z-index: 30;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-2);
  box-shadow: var(--shadow-pop); padding: 6px; min-width: 200px;}
.export-pop button{display:flex; width:100%; align-items:center; gap:10px; padding:9px 12px;
  border:0; background:transparent; border-radius:8px; cursor:pointer; text-align:left; color:var(--ink-2);
  font-size:13px;}
.export-pop button:hover{ background: var(--paper); color:var(--ink); }
.export-pop .kbd{margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--muted-2);}

/* Compare panels (multi-dashboard answer) */
.compare-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 2px 0 14px;}
.cmp-panel{padding: 16px 16px 18px; border:1px solid var(--line); border-radius:var(--r-2);
  background: color-mix(in oklab, var(--paper) 70%, transparent); position:relative;}
.cmp-panel .agent-chip{margin-bottom: 12px;}
.cmp-panel .head{font-family:var(--font-serif); font-size:30px; letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums;}
.cmp-panel .sub{font-size:12px; color:var(--muted); margin-top: 2px;}
.cmp-panel .delta{font-size:12px; font-weight:600; margin: 8px 0 10px; color:var(--verified);}
.cmp-panel .delta.down{color:#B45309;}
.cmp-panel .note{font-size:13px; color:var(--ink-2); line-height:1.45;}

/* Settings sections */
.set-section{padding: 18px 0; border-bottom:1px solid var(--line);}
.set-section:last-child{border-bottom:0;}
.set-section h4{margin:0 0 4px; font-size:13px; color:var(--ink); font-weight:600;}
.set-section p{margin:0 0 10px; font-size:12.5px; color:var(--muted); line-height:1.5;}
.set-row{display:flex; align-items:center; justify-content:space-between; padding: 8px 0;}
.set-row .info{font-size:13.5px; color:var(--ink-2);}
.set-row .info small{display:block; color:var(--muted); font-size:11.5px; margin-top:2px;}

.switch{position:relative; width:36px; height:20px; background: var(--line-2); border-radius:99px; cursor:pointer; transition: background .15s;}
.switch::after{content:""; position:absolute; left:2px; top:2px; width:16px; height:16px;
  background:white; border-radius:99px; box-shadow:0 1px 2px rgba(0,0,0,.2); transition: left .18s;}
.switch.on{ background: var(--ink); }
.switch.on::after{ left: 18px; }
.switch.danger.on{ background: #C2410C; }

/* Scrollbar */
.feed::-webkit-scrollbar, .modal-bd::-webkit-scrollbar, .sb-list::-webkit-scrollbar{ width:8px; }
.feed::-webkit-scrollbar-thumb, .modal-bd::-webkit-scrollbar-thumb, .sb-list::-webkit-scrollbar-thumb{
  background: var(--line-2); border-radius:4px; }

/* ──────────────────────────────────────────────────────────────────────────
   Long-form report response
   ────────────────────────────────────────────────────────────────────────── */

.report{display:flex; flex-direction:column; gap: 18px;}

.report-hd{margin-top: 4px;}
.report-eyebrow{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color: var(--accent); margin-bottom: 6px;}
.report-title{margin:0; font-family:var(--font-serif); font-size: 32px; font-weight: 400;
  letter-spacing:-0.015em; color:var(--ink); line-height: 1.12;}
.report-dataset{font-size:12.5px; color: var(--muted); margin-top: 6px;
  display:inline-flex; align-items:center; gap: 6px; font-family: var(--font-mono);}

.section-nav{display:flex; flex-wrap:wrap; gap: 4px; padding: 8px;
  background: color-mix(in oklab, var(--paper) 60%, transparent);
  border:1px solid var(--line); border-radius: var(--r-pill);
  position: sticky; top: 0; z-index: 4; backdrop-filter: blur(10px);}
.sn-pill{appearance:none; border:0; background:transparent; padding: 5px 11px;
  border-radius: var(--r-pill); font: 12px var(--font-sans); color: var(--muted);
  cursor:pointer; letter-spacing:-0.005em; transition: all .14s;
  white-space: nowrap;}
.sn-pill:hover{ color: var(--ink); }
.sn-pill.on{ background: var(--ink); color: var(--paper); }

/* Report sections */
.rs{display:flex; flex-direction:column; gap: 12px; padding-top: 8px;}
.rs-hd{display:flex; align-items:center; gap: 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);}
.rs-mark{font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
  letter-spacing: .04em; padding-top: 4px;}
.rs-hd h3{margin:0; font-family: var(--font-serif); font-size: 20px;
  font-weight: 400; letter-spacing: -0.01em; color: var(--ink);}
.rs-p{margin: 4px 0; font-size: 14px; color: var(--ink-2); line-height: 1.55;}
.rs-list{margin: 0; padding-left: 22px; font-size: 13.5px; color: var(--ink-2); line-height: 1.7;}

/* Hero stats — bigger, more confident than the small 2-stat case */
.hero-stats{display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
.hero-stat{padding: 16px 16px 18px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: color-mix(in oklab, var(--paper) 70%, transparent); position: relative;}
.hero-stat .k{font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600;}
.hero-stat .v{font-family: var(--font-serif); font-size: 28px; letter-spacing: -0.02em;
  color: var(--ink); margin-top: 6px; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 8px;}
.hero-stat .s{font-size: 11.5px; color: var(--muted); margin-top: 4px; font-family: var(--font-mono);}
.hero-stat .hero-flag{font-size: 14px; color: var(--warn);}
.hero-stat .hero-flag.ok{color: var(--verified);}
.hero-stat.flag-warn{ background: color-mix(in oklab, var(--warn-bg) 50%, transparent); }
.hero-stat.flag-ok  { background: color-mix(in oklab, var(--verified-bg) 50%, transparent); }

/* Callouts */
.callout{display:flex; gap: 12px; padding: 12px 14px;
  border-radius: var(--r-2); border: 1px solid var(--line);
  background: color-mix(in oklab, var(--paper) 60%, transparent);
  font-size: 13.5px; color: var(--ink-2); line-height: 1.55;}
.callout .lbl{font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--muted-2); padding-top: 2px; flex: none; min-width: 70px;}
.callout-insight{ border-left: 3px solid var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.callout-insight .lbl{ color: var(--accent); }
.callout-trend{ border-left: 3px solid var(--verified); background: color-mix(in oklab, var(--verified) 6%, var(--surface)); }
.callout-trend .lbl{ color: var(--verified); }
.callout-warn{ border-left: 3px solid var(--warn); background: var(--warn-bg); color: var(--ink); }
.callout-warn .lbl{ color: var(--warn); }

/* Smart table — banded rows, sticky header, flag column */
.smart-tbl-wrap{border:1px solid var(--line); border-radius: var(--r-2); overflow:hidden;
  background: var(--surface);}
.smart-tbl{width: 100%; border-collapse: collapse; font-size: 13px;}
.smart-tbl thead th{background: var(--paper); color: var(--muted);
  text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  position: sticky; top: 0; z-index: 1;}
.smart-tbl thead th.num{ text-align: right; }
.smart-tbl thead th.status{ text-align: center; width: 100px; }
.smart-tbl tbody td{padding: 9px 14px; border-bottom: 1px solid var(--line);
  color: var(--ink); font-variant-numeric: tabular-nums;}
.smart-tbl tbody td.num{ text-align: right; font-family: var(--font-mono); font-size: 12.5px; }
.smart-tbl tbody td.status{ text-align: center; }
.smart-tbl tbody tr:nth-child(2n){ background: color-mix(in oklab, var(--paper) 30%, transparent); }
.smart-tbl tbody tr:hover{ background: color-mix(in oklab, var(--paper) 80%, transparent); }
.smart-tbl tbody tr:last-child td{ border-bottom: 0; }
.smart-tbl-wrap.dense .smart-tbl tbody td,
.smart-tbl-wrap.dense .smart-tbl thead th{ padding: 7px 12px; font-size: 12.5px; }

.flag-pill{display:inline-flex; align-items:center; gap: 5px; padding: 3px 8px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 600;
  border: 1px solid currentColor; line-height: 1;}

/* Customer list grid */
.cust-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px;
  font-size: 13.5px; color: var(--ink-2);}
.cust-cell{padding: 6px 0; border-bottom: 1px dashed var(--line);}

/* Collapsible detail blocks */
.detail-list{display:flex; flex-direction:column; gap: 6px;}
.detail-block{border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); overflow: hidden;}
.detail-hd{display:flex; align-items:center; gap: 10px; width: 100%;
  padding: 11px 14px; background: transparent; border: 0; cursor: pointer;
  text-align: left; color: var(--ink); font-size: 13.5px;}
.detail-hd:hover{ background: var(--paper); }
.detail-hd .name{ font-weight: 600; }
.detail-hd .sub{ font-size: 12px; color: var(--muted); font-weight: 400; }
.detail-hd .cnt{ font-size: 11px; color: var(--muted-2); font-family: var(--font-mono); }
.detail-block.open .detail-hd{ border-bottom: 1px solid var(--line); background: var(--paper); }
.detail-bd{padding: 12px;}


/* ────────────────────────────────────────────────────────────────────────────
   Responsive — tablet (<=1024px), mobile (<=720px), narrow mobile (<=480px)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .feed-inner { padding: 0 22px; max-width: 100%; }
  .welcome { padding-top: 6vh; }
  .welcome .greet { font-size: 42px; }
  .src-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .compare-grid { grid-template-columns: 1fr; }
  .src-pick-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
}

/* Sidebar becomes an overlay drawer on small screens */
@media (max-width: 900px) {
  .app.is-mobile { grid-template-columns: 1fr !important; }
  .app.is-mobile .sb {
    position: fixed; left: 0; top: 0; bottom: 0; width: 280px;
    z-index: 60;
    box-shadow: 0 30px 60px -20px rgba(20,15,5,.35);
    transform: translateX(-100%); transition: transform .26s ease;
  }
  .app.is-mobile[data-sidebar="open"] .sb { transform: translateX(0); }
  .sb-scrim {
    position: fixed; inset: 0; z-index: 55;
    background: color-mix(in oklab, var(--ink) 36%, transparent);
    backdrop-filter: blur(2px);
  }
}

@media (max-width: 720px) {
  .topbar { padding: 11px 14px; gap: 8px; }
  .tb-title { font-size: 15px; }
  .tb-meta { display: none; }
  .tb-actions .iconbtn[title="Saved questions"],
  .tb-actions .iconbtn[title="Schedule"] { display: none; }
  .tb-actions .persona span:not(.avatar) { display: none; }
  .tb-actions .persona { padding: 5px 8px; }

  .feed { padding: 22px 0 200px; }
  .feed-inner { padding: 0 14px; gap: 22px; }

  .welcome { padding: 5vh 16px 0; }
  .welcome-mark { width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; }
  .welcome .greet { font-size: 32px; line-height: 1.12; }
  .welcome .greet-em { white-space: normal; }
  .welcome .sub { font-size: 14px; margin-top: 18px; }
  .welcome-section { margin-top: 36px; }
  .src-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .suggest { padding: 11px 14px; font-size: 13.5px; }

  .bubble-user { max-width: 90%; padding: 12px 16px; font-size: 14.5px; border-radius: 16px 16px 4px 16px; }

  .byline { flex-wrap: wrap; gap: 8px; font-size: 12px; }
  .byline .bl-text { flex: 1; min-width: 0; }
  .byline .bl-text .bl-muted { display: none; }
  .byline .bl-text .bl-sep   { display: none; }

  .resp-body { font-size: 14.5px; line-height: 1.55; }

  /* Big-number stats compact */
  .stat { padding: 14px 16px; }
  .stat .val { font-size: 28px; }

  /* Report */
  .report-title { font-size: 24px; }
  .report-eyebrow { font-size: 10px; }
  .section-nav { gap: 3px; padding: 6px; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; }
  .section-nav::-webkit-scrollbar { display: none; }
  .sn-pill { font-size: 11.5px; padding: 5px 9px; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .hero-stat { padding: 12px 14px; }
  .hero-stat .v { font-size: 22px; }
  .rs-hd h3 { font-size: 17px; }
  .callout { flex-direction: column; gap: 4px; padding: 12px 14px; }
  .callout .lbl { min-width: 0; }
  .cust-grid { grid-template-columns: 1fr; }

  /* Tables become horizontally scrollable */
  .tbl-wrap, .smart-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .smart-tbl, .tbl { min-width: 520px; }

  /* Composer */
  .composer-wrap { padding: 12px 14px 14px; }
  .composer { border-radius: 18px; }
  .composer-input { padding: 12px 14px; gap: 8px; }
  .composer-input textarea { font-size: 14.5px; }
  .send { width: 32px; height: 32px; }
  .composer-toolbar { padding: 6px 10px 8px; gap: 6px; flex-wrap: wrap; }
  .composer-toolbar .spacer { display: none; }
  .composer-toolbar > span:last-child { display: none; } /* keyboard hint */

  /* Modals → near-fullscreen on phone */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal { border-radius: 18px 18px 0 0; max-height: 92vh; width: 100%; }
  .modal-hd { padding: 14px 18px; }
  .modal-hd h3 { font-size: 18px; }
  .modal-bd { padding: 14px 18px; }
  .modal-ft { padding: 12px 16px; flex-wrap: wrap; }

  /* Card footer wraps cleanly */
  .resp-foot { gap: 8px; }
  .cost-strip { font-size: 11px; }
}

@media (max-width: 480px) {
  .welcome .greet { font-size: 28px; }
  .src-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; }
  .feed-inner { padding: 0 12px; }
  .ft-actions button { padding: 4px; }
  .trail-pill { font-size: 11px; padding: 5px 9px; }
}

/* Touch-friendliness — bigger tap targets on coarse pointers */
@media (pointer: coarse) {
  .iconbtn, .sb-foot button, .ft-actions button { min-width: 36px; min-height: 36px; }
  .chip, .t-chip, .sn-pill { padding-top: 8px; padding-bottom: 8px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Real backend markdown body (rendered from /ask answer) ───────────────── */
.md-body { font-family: Geist, system-ui, -apple-system, Segoe UI, Arial, sans-serif; color: var(--ink); line-height: 1.55; }
.md-body h1, .md-body h2, .md-body h3 { margin: 1em 0 .4em; font-weight: 600; line-height: 1.2; }
.md-body h1 { font-size: 1.45em; }
.md-body h2 { font-size: 1.2em; }
.md-body h3 { font-size: 1.05em; }
.md-body p { margin: .55em 0; }
.md-body strong, .md-body b { color: var(--ink); font-weight: 600; }
.md-body em { font-style: italic; }
.md-body ul, .md-body ol { margin: .5em 0 .5em 1.4em; }
.md-body li { margin: .2em 0; }
.md-body hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.md-body code { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: .88em;
                background: var(--bg-2); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line-2); }
.md-body pre { background: var(--bg-2); padding: 10px 12px; border-radius: 6px;
               border: 1px solid var(--line-2); overflow-x: auto; margin: .7em 0; }
.md-body pre code { background: transparent; padding: 0; border: 0; }
.md-body blockquote { border-left: 3px solid var(--accent); padding: .2em 0 .2em .8em;
                      margin: .7em 0; color: var(--muted); font-style: italic; }
.md-body table { border-collapse: collapse; width: 100%; margin: .7em 0; font-size: .94em; }
.md-body table th, .md-body table td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.md-body table th { background: var(--bg-2); font-weight: 600; color: var(--ink); }
.md-body table tr:nth-child(even) td { background: rgba(0,0,0,.015); }
.md-body a { color: var(--accent); text-decoration: underline; }

/* ── Thinking indicator (replaces hardcoded LiveTrailCard) ────────────────── */
.thinking-card {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 16px 0 22px; padding: 14px 18px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  color: var(--ink-2); font-size: 14px;
  animation: ti-fade-in .25s ease-out;
}
.ti-text { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 17px; color: var(--ink); }
.ti-dots { display: inline-flex; gap: 3px; }
.ti-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: ti-bounce 1.2s ease-in-out infinite;
}
.ti-dots i:nth-child(1) { animation-delay: 0s; }
.ti-dots i:nth-child(2) { animation-delay: .15s; }
.ti-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ti-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-4px); opacity: 1; }
}
@keyframes ti-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sidebar additions (close button, delete-on-hover, empty state) ───────── */
.sb-hd { display: flex; align-items: center; justify-content: space-between; padding-right: 8px; }
.sb-close {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: 6px; border-radius: 8px; transition: background .15s;
}
.sb-close:hover { background: var(--bg-2); color: var(--ink); }

.sb-item { position: relative; display: flex; align-items: stretch; }
.sb-item-main {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 10px; border-radius: 10px; color: var(--ink-2);
  font-family: inherit; font-size: 13px; text-align: left; min-width: 0;
  transition: background .15s;
}
.sb-item-main:hover { background: var(--bg-2); }
.sb-item.active .sb-item-main { background: var(--bg-2); color: var(--ink); font-weight: 500; }
.sb-item-main .ico { font-size: 13px; flex: 0 0 16px; }
.sb-item-main .ttl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item-main .when { font-size: 11px; color: var(--muted-2); font-family: var(--font-mono); flex: 0 0 auto; }
.sb-item-del {
  display: none; background: transparent; border: 0; cursor: pointer;
  color: var(--muted-2); padding: 0 8px; border-radius: 8px;
}
.sb-item:hover .sb-item-del { display: inline-flex; align-items: center; }
.sb-item-del:hover { color: var(--warn); }

.sb-empty { text-align: center; padding: 36px 16px; color: var(--muted); }
.sb-empty-icon { font-size: 32px; opacity: .4; margin-bottom: 8px; }
.sb-empty-text { font-size: 12px; line-height: 1.5; }

/* ── Auto-chart in responses (rendered above markdown tables) ─────────────── */
.auto-chart {
  margin: 12px 0;
  padding: 14px 14px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
}
.auto-chart-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 10px;
}
.auto-chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 140px; padding-bottom: 22px; position: relative; }
.auto-chart-bar {
  flex: 1; background: var(--accent);
  border-radius: 4px 4px 0 0; min-height: 2px;
  position: relative;
  animation: ac-grow .5s ease-out forwards;
  transform-origin: bottom;
}
.auto-chart-bar .v {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--ink); font-family: var(--font-mono);
  white-space: nowrap; padding-bottom: 3px;
}
.auto-chart-bar .lbl {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--muted); padding-top: 4px; white-space: nowrap;
}
@keyframes ac-grow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}