:root{
  --ink:#10222E;
  --ink-soft:#3E5260;
  --ink-faint:#7A8B96;
  --paper:#F6F8F8;
  --surface:#FFFFFF;
  --line:#E3E9EB;
  --accent:#0E7C6B;
  --accent-deep:#0A5F52;
  --accent-soft:#E4F2EE;
  --accent-wash:#F2F9F7;
  --amber:#B97F10;
  --amber-soft:#FBF3E1;
  --red:#B4423A;
  --red-soft:#F9E9E7;
  --user-bubble:#10222E;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,34,46,.05),0 4px 16px rgba(16,34,46,.06);
  --font-ui:'Inter',system-ui,sans-serif;
  --font-display:'Sora',system-ui,sans-serif;
  --font-answer:'Newsreader',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font-ui);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.55;overflow:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-soft)}

.app{display:flex;height:100vh;height:100dvh}

/* ───────── Sidebar ───────── */
.sidebar{width:284px;min-width:284px;background:var(--ink);color:#DDE7EA;display:flex;flex-direction:column;transition:margin .28s ease}
.sidebar.collapsed{margin-left:-284px}
.side-head{padding:20px 18px 14px;display:flex;align-items:center;gap:11px}
.side-logo{height:26px;display:block;margin-bottom:7px}
.logo-seal{width:36px;height:36px;border-radius:10px;background:linear-gradient(140deg,#12A38C,#0A5F52);display:grid;place-items:center;flex-shrink:0}
.logo-seal svg{width:19px;height:19px;stroke:#fff}
.side-head .name{font-family:var(--font-display);font-weight:600;font-size:15.5px;color:#fff;letter-spacing:.01em}
.side-head .tag{font-size:11px;color:#8FA6AE;letter-spacing:.04em}
.new-chat{margin:6px 14px 12px;display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;font-weight:500;font-size:13.5px;transition:background .15s}
.new-chat:hover{background:rgba(255,255,255,.13)}
.new-chat svg{width:15px;height:15px}
.side-search{margin:0 14px 8px;position:relative}
.side-search input{width:100%;padding:8px 12px 8px 32px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#E7EEF0;font-size:12.5px;font-family:inherit}
.side-search input::placeholder{color:#7C929B}
.side-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:13px;height:13px;stroke:#7C929B}
.history{flex:1;overflow-y:auto;padding:4px 10px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.hist-group{margin-top:14px}
.hist-label{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#6E858E;padding:0 8px 6px}
.hist-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border-radius:9px;color:#C4D2D7;font-size:13px;transition:background .12s;position:relative}
.hist-item:hover{background:rgba(255,255,255,.06);color:#fff}
.hist-item.active{background:rgba(18,163,140,.18);color:#fff}
.hist-item.active::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:3px;background:#12A38C}
.hist-item .h-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-item .h-del{opacity:0;color:#7C929B;font-size:15px;line-height:1;padding:2px 4px;border-radius:5px;flex-shrink:0}
.hist-item:hover .h-del{opacity:1}
.hist-item .h-del:hover{background:rgba(255,255,255,.12);color:#fff}
.hist-empty{padding:10px 8px;font-size:12.5px;color:#6E858E}
.side-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px}
.side-foot a{color:#8FA6AE;font-size:12px;text-decoration:none}
.side-foot a:hover{color:#fff}

/* ───────── Main ───────── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.topbar{height:56px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.icon-btn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--ink-soft);transition:background .13s}
.icon-btn:hover{background:var(--paper)}
.icon-btn svg{width:17px;height:17px}
.topbar .title{font-family:var(--font-display);font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-pill{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--accent-deep);background:var(--accent-soft);padding:5px 11px;border-radius:99px;white-space:nowrap}
.status-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.2s infinite}
.status-pill.warn{color:var(--amber);background:var(--amber-soft)}
.status-pill.warn .dot{background:var(--amber)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.chat-scroll{flex:1;overflow-y:auto;scroll-behavior:smooth}
.chat-inner{max-width:760px;margin:0 auto;padding:28px 24px 12px}

/* Empty state */
.hero{padding-top:7vh;text-align:center;animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-seal{width:58px;height:58px;border-radius:16px;background:linear-gradient(140deg,#12A38C,#0A5F52);display:grid;place-items:center;margin:0 auto 20px;box-shadow:0 8px 24px rgba(14,124,107,.28)}
.hero-seal svg{width:29px;height:29px;stroke:#fff}
.hero h1{font-family:var(--font-display);font-size:27px;font-weight:600;letter-spacing:-.01em}
.hero h1 em{font-family:var(--font-answer);font-style:italic;font-weight:500;color:var(--accent-deep)}
.hero p{margin-top:9px;color:var(--ink-faint);font-size:14.5px;max-width:460px;margin-left:auto;margin-right:auto}
.suggest-grid{margin-top:34px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;text-align:left}
.suggest{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;transition:border-color .15s,transform .15s,box-shadow .15s;display:flex;flex-direction:column;gap:5px}
.suggest:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.suggest .cat{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}
.suggest .q{font-size:13.5px;color:var(--ink);line-height:1.45}

/* Messages */
.msg{display:flex;gap:13px;margin-bottom:26px;animation:rise .35s ease both}
.msg .m-avatar{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;font-weight:600;font-size:11.5px;margin-top:2px}
.msg.user .m-avatar{background:linear-gradient(135deg,#E0A845,#B97F10);color:#fff;border-radius:50%}
.msg.bot .m-avatar{background:linear-gradient(140deg,#12A38C,#0A5F52)}
.msg.bot .m-avatar svg{width:16px;height:16px;stroke:#fff}
.m-body{min-width:0;flex:1}
.m-who{font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;font-family:var(--font-display)}
.msg.user .m-text{background:var(--user-bubble);color:#F2F6F7;padding:11px 15px;border-radius:4px 14px 14px 14px;display:inline-block;font-size:14.5px;max-width:100%;white-space:pre-wrap;overflow-wrap:break-word}
.msg.bot .m-text{font-family:var(--font-answer);font-size:16.5px;line-height:1.68;color:#1B2E3A;overflow-wrap:break-word}
.msg.bot.error .m-text{color:var(--red)}
.m-text p+p{margin-top:11px}
.m-text strong{font-weight:600;color:var(--ink)}
.m-text ul,.m-text ol{margin:9px 0 9px 21px}
.m-text li+li{margin-top:5px}
.m-text .m-h{font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--ink);margin-top:14px;letter-spacing:.01em}

/* Sources */
.sources{margin-top:14px;padding:11px 13px;background:var(--accent-wash);border:1px solid #DCEEE8;border-radius:11px}
.sources .s-label{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-deep);display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;user-select:none}
.sources .s-label::-webkit-details-marker{display:none}
.sources .s-label svg{width:12px;height:12px}
.sources .s-chevron{margin-left:auto;font-size:12px;transition:transform .15s}
.sources[open] .s-chevron{transform:rotate(90deg)}
.sources .s-chips{margin-top:9px}
.src-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:6px 11px;font-size:12px;font-weight:500;color:var(--ink-soft);margin:0 7px 6px 0}
.src-chip svg{width:13px;height:13px;stroke:var(--accent-deep);flex-shrink:0}
.src-chip .v{color:var(--ink-faint);font-weight:400;font-size:11px}

/* Actions */
.m-actions{margin-top:10px;display:flex;align-items:center;gap:4px}
.m-act{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;color:var(--ink-faint);transition:background .12s,color .12s}
.m-act:hover{background:var(--accent-soft);color:var(--accent-deep)}
.m-act.on{color:var(--accent-deep);background:var(--accent-soft)}
.m-act svg{width:14.5px;height:14.5px}
.escalate{margin-left:6px;font-size:12px;font-weight:500;color:var(--ink-faint);padding:5px 10px;border-radius:8px;transition:background .12s,color .12s;text-decoration:none}
.escalate:hover{background:var(--amber-soft);color:var(--amber)}

/* Typing */
.typing{display:inline-flex;gap:5px;padding:13px 4px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes tp{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-4px)}}

/* Composer */
.composer-wrap{padding:10px 24px 16px;background:linear-gradient(to top,var(--paper) 72%,transparent)}
.composer{max-width:760px;margin:0 auto;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;box-shadow:var(--shadow);transition:border-color .15s;display:flex;align-items:flex-end;padding:9px 9px 9px 17px;gap:9px}
.composer:focus-within{border-color:var(--accent)}
.composer textarea{flex:1;border:none;resize:none;font-family:inherit;font-size:14.5px;line-height:1.5;max-height:150px;padding:7px 0;background:transparent;color:var(--ink)}
.composer textarea::placeholder{color:var(--ink-faint)}
.composer textarea:focus{outline:none}
.send{width:38px;height:38px;border-radius:12px;background:var(--accent);display:grid;place-items:center;transition:background .15s,transform .12s;flex-shrink:0}
.send:hover{background:var(--accent-deep)}
.send:active{transform:scale(.93)}
.send:disabled{background:var(--line);cursor:default}
.send svg{width:17px;height:17px;stroke:#fff}
.disclaimer{max-width:760px;margin:9px auto 0;text-align:center;font-size:11.5px;color:var(--ink-faint)}
.disclaimer b{font-weight:600;color:var(--ink-soft)}

/* Toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,14px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:11px;font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:all .25s;z-index:60;box-shadow:0 10px 30px rgba(16,34,46,.3)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:860px){
  .sidebar{position:fixed;z-index:40;height:100%;box-shadow:12px 0 40px rgba(0,0,0,.25)}
  .sidebar.collapsed{margin-left:-284px;box-shadow:none}
  .suggest-grid{grid-template-columns:1fr}
  .chat-inner{padding:20px 16px 8px}
  .composer-wrap{padding:8px 14px 12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}