:root{
  --bg:#f4f6fb; --card:#ffffff; --ink:#101828; --muted:#667085;
  --line:#e6e9f0; --brand:#3b5bdb; --brand2:#5f7cff; --brandsoft:#eef2ff;
  --user:#3b5bdb; --ok:#0f9d58; --shadow:0 10px 30px rgba(16,24,40,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}
button{font:inherit;cursor:pointer}

/* ---------- LOGIN ---------- */
.login-wrap{
  min-height:100dvh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(1200px 600px at 15% -10%, #e6ecff 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #eaf7f1 0%, transparent 55%),
    var(--bg);
}
.login-card{
  width:100%; max-width:420px; background:var(--card); border:1px solid var(--line);
  border-radius:24px; padding:34px 30px; box-shadow:var(--shadow);
}
.brand{display:flex; gap:14px; align-items:center; margin-bottom:26px}
.logo{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff;
  font-weight:800; letter-spacing:.5px; box-shadow:0 8px 18px rgba(59,91,219,.28);
}
.logo.small{width:38px;height:38px;border-radius:11px;font-size:13px}
.brand h1{font-size:20px;margin:0}
.sub{margin:2px 0 0;color:var(--muted);font-size:13px}
.login-card label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
.login-card input{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
  font-size:15px;background:#fbfcfe;outline:none;transition:.15s;
}
.login-card input:focus{border-color:var(--brand2);background:#fff;box-shadow:0 0 0 4px var(--brandsoft)}
.primary{
  width:100%;margin-top:16px;padding:13px;border:0;border-radius:12px;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand2));font-weight:600;
  box-shadow:0 8px 18px rgba(59,91,219,.24);
}
.primary:hover{filter:brightness(1.05)}
.primary:disabled{opacity:.55;cursor:default}
.err{color:#d92d20;font-size:13px;min-height:18px;margin:10px 0 0;text-align:center}
.foot{color:var(--muted);font-size:12px;text-align:center;margin:14px 0 0}

/* ---------- APP ---------- */
.app{display:flex;flex-direction:column;height:100dvh}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 20px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;
}
.topbar .left{display:flex;gap:12px;align-items:center}
.title{font-weight:700;font-size:15px}
.tag{font-size:12px;color:var(--muted)}
.right{display:flex;gap:8px;align-items:center}
select{
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:13px;color:var(--ink);outline:none;max-width:190px
}
.ghost{
  padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;
  color:var(--muted);font-size:13px
}
.ghost:hover{color:var(--brand);border-color:#cdd7f7;background:#f8faff}

.chat{flex:1;overflow-y:auto;padding:26px 20px 8px;scroll-behavior:smooth}
.chat>*{max-width:820px;margin-left:auto;margin-right:auto}
.empty{text-align:center;color:var(--muted);padding:56px 10px}
.empty h2{color:var(--ink);margin:0 0 8px;font-size:20px}
.chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.chip{
  padding:10px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;
  color:#344054;font-size:13px
}
.chip:hover{border-color:#cdd7f7;color:var(--brand);background:#f8faff}

.msg{display:flex;gap:12px;margin-bottom:20px;align-items:flex-start}
.msg .avatar{
  flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;background:#98a2b3
}
.msg.user{flex-direction:row-reverse}
.msg.user .avatar{background:linear-gradient(135deg,var(--brand),var(--brand2))}
.msg.ai .avatar{background:linear-gradient(135deg,#0f9d58,#34c38f)}
.bubble{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 16px;box-shadow:0 2px 8px rgba(16,24,40,.04);
  max-width:min(680px,86vw);overflow-wrap:anywhere;
}
.msg.user .bubble{background:var(--brandsoft);border-color:#dbe3ff}
.bubble p{margin:0 0 10px}
.bubble p:last-child{margin-bottom:0}
.bubble pre{
  background:#0f172a;color:#e6edf3;padding:12px 13px;border-radius:10px;
  overflow-x:auto;font-size:13px;margin:10px 0
}
.bubble code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.bubble :not(pre)>code{background:#eef1f6;padding:2px 6px;border-radius:6px}
.bubble h1,.bubble h2,.bubble h3{font-size:16px;margin:14px 0 6px}
.bubble ul,.bubble ol{margin:6px 0 10px;padding-left:22px}
.caret{display:inline-block;width:8px;height:16px;background:var(--brand2);
  vertical-align:-3px;animation:blink 1s steps(2,start) infinite;border-radius:2px}
@keyframes blink{to{visibility:hidden}}

details.think{
  margin:0 0 10px;border:1px dashed #d5dbea;border-radius:10px;background:#fafbff;
  max-width:min(680px,86vw)
}
details.think summary{
  cursor:pointer;padding:8px 12px;font-size:12.5px;color:var(--muted);list-style:none
}
details.think summary::-webkit-details-marker{display:none}
details.think summary::before{content:"▸ ";}
details.think[open] summary::before{content:"▾ ";}
details.think .body{
  padding:0 12px 12px;font-size:12.5px;color:#5b6478;white-space:pre-wrap;
  border-top:1px solid #eef1f7;margin-top:2px;padding-top:9px
}
.typing{display:inline-flex;gap:4px;align-items:center;color:var(--muted);font-size:13px}
.typing i{width:6px;height:6px;border-radius:50%;background:#b6c0d4;animation:up .9s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes up{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ---------- COMPOSER ---------- */
.composer{padding:10px 20px 18px;background:linear-gradient(180deg,transparent,var(--bg) 40%)}
.composer>*{max-width:820px;margin:0 auto}
.box{
  display:flex;gap:10px;align-items:flex-end;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:10px 10px 10px 16px;box-shadow:var(--shadow)
}
.box:focus-within{border-color:var(--brand2);box-shadow:0 0 0 4px var(--brandsoft),var(--shadow)}
#input{
  flex:1;border:0;outline:none;resize:none;max-height:190px;font:inherit;
  background:transparent;padding:8px 0;color:var(--ink)
}
.primary.round{width:42px;height:42px;margin:0;border-radius:13px;display:grid;place-items:center;flex:0 0 42px}
.meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);padding:8px 6px 0;min-height:18px}

@media (max-width:640px){
  .topbar{padding:10px 12px}
  .tag{display:none}
  select{max-width:130px;font-size:12px}
  .chat{padding:18px 12px 6px}
  .composer{padding:8px 12px 14px}
  .bubble{max-width:80vw}
}