:root{--bg:#fafbfc;--surface:#f0f1f5;--border:#dde0e4;--text:#1e2226;--muted:#5a6169;
  --accent:#d9445c;--accent-hover:#c23a50;--green:#009e7e;--danger:#c0392b;
  --radius-sm:6px;--radius:10px;--radius-lg:16px;--gap:10px;
  --fz-xs:11px;--fz-sm:12px;--fz-md:13px;--fz-base:14px;--fz-lg:15px;
  --lh-tight:1.5;--lh-normal:1.6;
  --space-1:4px;--space-2:8px;--space-3:10px;--space-4:12px;
  --shadow-sm:0 1px 2px rgba(30,34,38,.06);
  --shadow-md:0 4px 12px rgba(30,34,38,.08);
  --shadow-lg:0 8px 24px rgba(30,34,38,.10);
  --z-backdrop:100;--z-sidebar:200;--z-topbar:300;--z-overlay:400;--z-modal:500}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);height:100dvh;overflow:hidden;scroll-behavior:smooth}
/* Layout */
#app{display:flex;height:100%}
#sidebar{width:280px;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;transition:transform .2s}
#sidebar.hidden{transform:translateX(-100%);position:absolute;z-index:var(--z-sidebar);height:100%}
#sidebar-backdrop{display:none;position:absolute;inset:0;background:rgba(30,34,38,.25);z-index:var(--z-backdrop)}
#sidebar-backdrop.open{display:block}
#main{flex:1;display:flex;flex-direction:column;min-width:0}
/* Auth */
#auth-overlay{position:fixed;inset:0;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:var(--z-overlay)}
#auth-overlay.hidden{display:none}
#auth-box{width:340px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-lg)}
#auth-box h2{margin-bottom:16px;text-align:center;font-weight:600;font-size:20px;letter-spacing:-0.01em}
.auth-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.auth-field label{font-size:13px;font-weight:500;color:var(--text)}
#auth-box input{width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-size:15px;
  transition:border-color .2s,box-shadow .2s}
#auth-box input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(217,68,92,.12)}
#auth-box button{width:100%;padding:10px;background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius-sm);font-size:15px;font-weight:500;cursor:pointer;
  transition:background .2s,transform .1s}
#auth-box button:hover{background:var(--accent-hover)}
#auth-box button:active{transform:scale(.98)}
#auth-box a{display:block;text-align:center;margin-top:10px;color:var(--accent);font-size:13px;cursor:pointer;
  transition:opacity .2s}
#auth-box a:hover{opacity:.8}
/* Sidebar content */
#user-bar{display:flex;align-items:center;justify-content:space-between;
  padding:12px;border-bottom:1px solid var(--border)}
#user-bar .name{font-weight:600}
#user-bar button{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;
  transition:color .2s}
#user-bar button:hover{color:var(--text)}
#new-session-btn{margin:8px;padding:8px;background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;
  transition:background .2s,transform .1s,box-shadow .2s}
#new-session-btn:hover{background:var(--accent-hover);box-shadow:var(--shadow-sm)}
#new-session-btn:active{transform:scale(.98)}
#session-list{flex:1;overflow-y:auto}
.session-item{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;font-size:14px;
  transition:background .15s}
.session-item:hover{background:rgba(217,68,92,.08)}
.session-item.active{background:rgba(217,68,92,.14);border-left:3px solid var(--accent);font-weight:500}
.session-item .title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.session-item .del{color:var(--muted);padding:4px;opacity:0;transition:opacity .15s;border-radius:var(--radius-sm)}
.session-item:hover .del{opacity:1}
.session-item .del:hover{color:var(--danger);background:rgba(192,57,43,.08)}
/* Top bar */
#topbar{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);
  gap:8px;min-height:44px}
#menu-btn{display:none;background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;
  transition:opacity .2s}
#menu-btn:hover{opacity:.7}
#topbar .title{flex:1;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-0.01em}
#context-stats{flex-shrink:0;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text);
  padding:5px 12px;border:1px solid rgba(217,68,92,.14);border-radius:999px;
  background:linear-gradient(180deg,rgba(217,68,92,.04) 0%,rgba(250,251,252,0) 100%);white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset}
#context-stats.pending{color:var(--muted);border-color:rgba(90,97,105,.18);
  background:linear-gradient(180deg,rgba(90,97,105,.04) 0%,rgba(250,251,252,0) 100%)}
#context-stats.compressed{color:var(--green);border-color:rgba(0,158,126,.22);
  background:linear-gradient(180deg,rgba(0,158,126,.10) 0%,rgba(0,158,126,.04) 100%)}
.context-chip-label{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;opacity:.7}
.context-chip-value{font-size:13px;font-weight:700;letter-spacing:.01em}
.context-chip-meta{font-size:11px;padding:2px 7px;border-radius:999px;background:rgba(30,34,38,.06);opacity:.78}
#context-stats.compressed .context-chip-meta{background:rgba(0,184,148,.14)}
#topbar .actions{display:flex;gap:6px}
#topbar .actions button{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px 8px;
  transition:color .2s;border-radius:var(--radius-sm)}
#topbar .actions button:hover{color:var(--text)}
#topbar .actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#topbar .actions button.sync-hit{
  color:var(--green);
  border-radius:999px;
  background:rgba(0,158,126,.12);
  box-shadow:0 0 0 1px rgba(0,158,126,.22) inset;
  animation:syncPulse 1.2s ease;
}
/* Chat */
.chat-area{flex:1;position:relative;min-height:0;display:flex;flex-direction:column}
#chat{flex:1;overflow-y:auto;padding:12px}
.chat-area:has(#chat .msg) .chat-empty{display:none}
.msg{margin-bottom:12px;max-width:90%}
.msg.user{margin-left:auto}
.msg.user .bubble{background:var(--accent);color:#fff;border-radius:16px 16px 4px 16px}
.msg.assistant .bubble{background:var(--surface);border:1px solid var(--border);
  border-radius:16px 16px 16px 4px}
.msg.tool{display:flex;justify-content:center}
.msg.tool .bubble{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  font-size:12px;color:var(--muted);max-width:95%;padding:4px 8px;opacity:.8}
.bubble{padding:8px 12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font-size:14px}
.bubble.thinking{font-size:12px;color:var(--muted);opacity:.85;margin-bottom:4px}
.msg .meta{font-size:11px;color:var(--muted);margin:2px 4px 0;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.msg.user .meta{text-align:right}

/* Input */
#input-area{position:relative;display:flex;padding:8px 12px;gap:8px;border-top:1px solid var(--border)}
#input-area textarea{flex:1;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--text);
  font-size:15px;resize:none;min-height:42px;max-height:120px;font-family:inherit;
  transition:border-color .2s,box-shadow .2s}
#input-area textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(217,68,92,.10)}
#input-area button{width:44px;background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius-sm);font-size:18px;cursor:pointer;flex-shrink:0;
  transition:background .2s,transform .1s}
#input-area button:hover{background:var(--accent-hover)}
#input-area button:active{transform:scale(.96)}
#input-area button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#input-area button.stop-mode{background:var(--danger)}
/* Loading */
.loading span{display:inline-block;width:6px;height:6px;background:var(--accent);
  border-radius:50%;margin:0 1px;animation:dot .8s infinite alternate}
.loading span:nth-child(2){animation-delay:.2s}
.loading span:nth-child(3){animation-delay:.4s}
@keyframes dot{to{opacity:.3;transform:translateY(-4px)}}
@keyframes syncPulse{
  0%{transform:scale(1);opacity:.75}
  30%{transform:scale(1.04);opacity:1}
  100%{transform:scale(1);opacity:1}
}
/* Ask User card */
.ask-card{background:var(--surface);border:1px solid var(--accent);border-radius:12px;
  padding:12px;margin:8px 12px}
.ask-card .q{font-size:14px;margin-bottom:8px}
.ask-card .stage{font-size:11px;color:var(--muted)}
.scroll-to-bottom{position:fixed;bottom:100px;right:24px;z-index:var(--z-topbar);
  width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;
  border:none;font-size:18px;cursor:pointer;display:none;box-shadow:var(--shadow-md);
  transition:background .2s,transform .1s,opacity .2s}
.scroll-to-bottom:hover{background:var(--accent-hover)}
.scroll-to-bottom:active{transform:scale(.92)}
.scroll-to-bottom.visible{display:flex;align-items:center;justify-content:center}
/* Chat empty state */
.chat-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 24px;text-align:center;color:var(--muted);
  pointer-events:none}
.chat-empty .empty-icon{width:80px;height:80px;border-radius:50%;background:var(--surface);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;color:var(--muted)}
.chat-empty .empty-heading{font-size:16px;font-weight:600;color:var(--text);margin-bottom:8px}
.chat-empty .empty-body{font-size:13px;line-height:1.6;max-width:280px}
/* Responsive */
@media(max-width:640px){
  #sidebar{position:absolute;z-index:var(--z-sidebar);height:100%;transform:translateX(-100%);width:260px}
  #sidebar.open{transform:translateX(0)}
  #sidebar-backdrop.open{display:block}
  #menu-btn{display:block}
  #context-stats{display:flex;max-width:86px;min-width:72px;padding:4px 8px;gap:0;justify-content:center}
  #context-stats .context-chip-label{display:none}
  #context-stats .context-chip-meta{display:none}
  #context-stats .context-chip-value{font-size:12px}
}