:root{
  --bg:#0f172a; --panel:#1e293b; --panel2:#273548; --line:#334155;
  --text:#e2e8f0; --dim:#94a3b8; --accent:#38bdf8; --accent2:#0ea5e9;
  --ok:#34d399; --warn:#fbbf24; --err:#f87171;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; height:100dvh; overflow:hidden;
}
/* ---- login ---- */
.login-body{display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 800px at 50% -10%,#1e3a5f 0%,var(--bg) 60%)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:36px 30px;width:min(92vw,360px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.login-card .logo{font-size:40px;color:var(--accent)}
.login-card h1{margin:8px 0 2px;font-size:24px;letter-spacing:.5px}
.login-card .sub{margin:0 0 22px;color:var(--dim);font-size:13px}
.login-card input{width:100%;font-size:26px;letter-spacing:10px;text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--text);outline:none}
.login-card input:focus{border-color:var(--accent)}
.login-card button{margin-top:16px;width:100%;font-size:16px;font-weight:600;background:var(--accent2);border:none;border-radius:12px;padding:14px;color:#fff}
.login-card button:active{transform:scale(.98)}
.login-card .err{color:var(--err);font-size:13px;margin-top:12px}
/* ---- header ---- */
header{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
header .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
header .dot.busy{background:var(--warn);box-shadow:0 0 8px var(--warn);animation:pulse 1s infinite}
header .title{font-weight:700;font-size:17px}
header .status{margin-left:auto;font-size:12px;color:var(--dim)}
@keyframes pulse{50%{opacity:.4}}
/* ---- chat ---- */
main{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.msg{max-width:86%;padding:10px 13px;border-radius:16px;line-height:1.45;font-size:15px;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:var(--accent2);color:#fff;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.system{align-self:center;background:none;color:var(--dim);font-size:12px;padding:2px}
.msg .meta{display:block;margin-top:6px;font-size:11px;color:var(--dim)}
.msg.working{color:var(--dim);font-style:italic}
audio{width:min(78vw,320px);height:40px;margin-top:6px;display:block;border-radius:8px}
/* ---- sessions panel ---- */
.menu-btn{background:none;border:none;color:var(--text);font-size:20px;padding:2px 6px;margin-right:2px}
.panel{position:absolute;top:52px;left:8px;right:8px;max-height:62dvh;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;z-index:50;box-shadow:0 18px 50px rgba(0,0,0,.55);display:flex;flex-direction:column}
.panel.hidden{display:none}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-weight:700;border-bottom:1px solid var(--line);font-size:14px}
.panel-x{color:var(--dim);font-size:16px;padding:2px 6px}
.session-list{overflow-y:auto}
.sess{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.sess:active{background:var(--panel2)}
.sess .t{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sess .m{font-size:11px;color:var(--dim);margin-top:3px}
.sess.active{border-left:3px solid var(--accent)}
.sess.active .t{color:var(--accent)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);background:var(--panel);padding:8px 10px calc(env(safe-area-inset-bottom) + 8px)}
footer .row{display:flex;gap:8px;align-items:center}
#text{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:22px;padding:12px 16px;font-size:15px;color:var(--text);outline:none}
#text:focus{border-color:var(--accent)}
.send{width:46px;height:46px;border-radius:50%;border:none;background:var(--accent2);color:#fff;font-size:18px}
.mic{width:46px;height:46px;border-radius:50%;border:none;background:var(--panel2);border:1px solid var(--line);color:var(--text);font-size:18px}
.mic.rec{background:#dc2626;border-color:#dc2626;animation:pulse 1s infinite}
.hint{margin-top:6px;text-align:center;color:var(--dim);font-size:11px}