/* ---- themes ---- */
:root[data-theme="midnight"]{--bg:#0b0c0f;--bg2:#121419;--panel:#15181f;--line:#242833;--fg:#eef0f4;--muted:#9aa2b1;--accent:#8b7cf6;--accent2:#6d5ce0;--user:#8b7cf6;--code:#0e1014;color-scheme:dark}
:root[data-theme="slate"]{--bg:#0f1419;--bg2:#161c24;--panel:#1a222c;--line:#2b3542;--fg:#e9eef5;--muted:#93a1b3;--accent:#38bdf8;--accent2:#0ea5e9;--user:#38bdf8;--code:#111821;color-scheme:dark}
:root[data-theme="dawn"]{--bg:#f7f7fb;--bg2:#ffffff;--panel:#ffffff;--line:#e6e6ef;--fg:#1a1b2b;--muted:#6b7280;--accent:#6d5ce0;--accent2:#5a49c9;--user:#6d5ce0;--code:#f1f1f7;color-scheme:light}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
.muted{color:var(--muted)}
.brand{font-weight:720;letter-spacing:-.02em;font-size:1.1rem;display:flex;align-items:center;gap:7px}
.brand-lg{font-size:1.8rem}
.raven{filter:saturate(1.1)}

.btn{border:1px solid transparent;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;padding:9px 14px;transition:.15s}
.btn.sm{padding:6px 10px;font-size:.85rem;border-radius:8px}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--bg2);border-color:var(--line);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent)}

/* ---- gate ---- */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:
  radial-gradient(60% 50% at 50% 0%,rgba(139,124,246,.18),transparent 70%),var(--bg)}
.gate-card{width:100%;max-width:420px;text-align:center}
.gate-tag{color:var(--muted);margin:10px 0 26px;font-size:1.05rem}
.gate-foot{margin-top:24px;font-size:.88rem;color:var(--muted)}
#clerk-signin{display:flex;justify-content:center}

/* ---- app layout ---- */
.app{display:grid;grid-template-columns:272px 1fr;height:100vh;height:100dvh}
.sidebar{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;padding:14px 12px}
.side-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:2px 4px}
.side-section{margin-bottom:16px;min-height:0}
.side-grow{flex:1;display:flex;flex-direction:column}
.side-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin:0 4px 8px}
.templates{display:flex;flex-direction:column;gap:4px}
.tpl{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;cursor:pointer;color:var(--fg);font-size:.9rem}
.tpl:hover{background:var(--panel)}
.tpl .emoji{font-size:1rem}
.history{overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.hist{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.88rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist:hover,.hist.active{background:var(--panel);color:var(--fg)}
.side-bottom{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.plan-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.plan-card .pl-row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem}
.plan-card .bar{height:6px;background:var(--bg);border-radius:4px;margin:8px 0 4px;overflow:hidden}
.plan-card .bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.plan-card .up{margin-top:8px;width:100%;text-align:center}
.acct{display:flex;align-items:center;justify-content:space-between;gap:8px}
.acct-email{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- main ---- */
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--line);gap:12px;flex-wrap:wrap}
.model-pick{display:flex;align-items:center;gap:10px}
.model-pick .side-label{margin:0}
.model-select,.theme-select{background:var(--bg2);border:1px solid var(--line);color:var(--fg);border-radius:9px;padding:7px 10px;font:inherit;font-size:.9rem}
.traits{display:flex;gap:4px}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--line)}
.tdot.on{background:var(--accent)}
.topbar-right{display:flex;align-items:center;gap:12px}
.trust{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--bg2)}
.trust-dot{width:7px;height:7px;border-radius:50%;background:#f5a623;box-shadow:0 0 0 3px rgba(245,166,35,.15)}

.thread{flex:1;overflow-y:auto;padding:28px 0}
.welcome{max-width:720px;margin:6vh auto 0;text-align:center;padding:0 20px}
.welcome-mark{font-size:2.6rem}
.welcome h1{font-size:clamp(1.6rem,4vw,2.2rem);letter-spacing:-.02em;margin:.3em 0 .2em}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.chip{border:1px solid var(--line);background:var(--bg2);border-radius:999px;padding:9px 16px;cursor:pointer;font-size:.9rem;color:var(--fg)}
.chip:hover{border-color:var(--accent)}

.msg{max-width:760px;margin:0 auto;padding:12px 20px;display:flex;gap:14px}
.msg .who{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:.85rem;font-weight:700}
.msg.user .who{background:var(--user);color:#fff}
.msg.ai .who{background:var(--panel);border:1px solid var(--line)}
.msg .body{min-width:0;flex:1;padding-top:3px}
.msg .body :is(h1,h2,h3){letter-spacing:-.01em;margin:1em 0 .4em;line-height:1.25}
.msg .body h1{font-size:1.4rem}.msg .body h2{font-size:1.2rem}.msg .body h3{font-size:1.05rem}
.msg .body p{margin:.5em 0}
.msg .body ul,.msg .body ol{margin:.5em 0;padding-left:1.3em}
.msg .body li{margin:.25em 0}
.msg .body code{background:var(--code);border:1px solid var(--line);border-radius:5px;padding:.1em .4em;font-size:.88em}
.msg .body pre{background:var(--code);border:1px solid var(--line);border-radius:10px;padding:14px;overflow:auto}
.msg .body pre code{border:none;padding:0}
.msg .body a{text-decoration:underline;text-underline-offset:2px}
.msg .tools{display:flex;gap:8px;margin-top:8px;opacity:0;transition:.15s}
.msg.ai:hover .tools{opacity:1}
.msg .tools button{background:none;border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:4px 9px;font-size:.78rem;cursor:pointer}
.msg .tools button:hover{color:var(--fg);border-color:var(--accent)}
.cursor{display:inline-block;width:8px;height:1.1em;background:var(--accent);vertical-align:text-bottom;animation:blink 1s steps(2) infinite;border-radius:1px}
@keyframes blink{50%{opacity:0}}

/* ---- composer ---- */
.composer{max-width:760px;margin:0 auto;width:100%;padding:0 20px 6px;display:flex;gap:10px;align-items:flex-end}
#input{flex:1;resize:none;background:var(--bg2);border:1px solid var(--line);border-radius:14px;color:var(--fg);
  padding:13px 16px;font:inherit;max-height:200px;line-height:1.5}
#input:focus{outline:none;border-color:var(--accent)}
.send{width:44px;height:44px;border-radius:12px;font-size:1.2rem;padding:0;flex:none}
.send:disabled{opacity:.4;cursor:default}
.composer-foot{max-width:760px;margin:0 auto;width:100%;padding:6px 20px 16px;text-align:center;font-size:.76rem}

.banner{max-width:760px;margin:10px auto;padding:10px 16px;border-radius:12px;border:1px solid var(--accent);
  background:var(--bg2);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.9rem}

@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:30;left:0;top:0;bottom:0;width:272px;transform:translateX(-100%);transition:.2s;box-shadow:0 0 60px rgba(0,0,0,.5)}
  .sidebar.open{transform:none}
}