/* Shared Qleerly interface. Pricing and model behavior remain server controlled. */
:root{--paper:#FCFBF8;--paper-deep:#F3F2EE;--ink:#202927;--ink-soft:#53605B;--ink-faint:#66716B;--accent:#245AC2;--accent-soft:#5884D8;--line:#DCDDD6}
body{background:var(--paper);color:var(--ink)}
a{color:var(--accent)}
button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid #5884D8;outline-offset:4px}
.btn:not(.ghost),a.cta:not(.ghost),.welcome-actions a:not(.ghost){background:var(--accent);border-color:var(--accent);color:#fff}
.btn:not(.ghost):hover,a.cta:not(.ghost):hover,.welcome-actions a:not(.ghost):hover{background:#19449A}
.btn,.cta{min-height:44px}
.brand,.mark{font-family:Inter,system-ui,sans-serif;font-weight:600;font-style:normal}
#qsSide{background:var(--paper-deep)!important;border-color:var(--line)!important}
#qsSide .qs-tier.locked{color:var(--accent);border-color:var(--accent-soft)}
#qsSide .qs-brand,#qsSide .qs-new{color:var(--ink)}
#qsSide .qs-row,#qsSide .qs-tool{color:var(--ink-soft)}
#qsSide .qs-tier,#qsSide h4,#qsSide .qs-plan{color:var(--ink-faint)}
.side{background:var(--paper-deep)}
.side-top{margin-bottom:24px}
.newchat{justify-content:flex-start;min-height:44px;border-color:var(--line)}
.studio-menu{margin-top:12px}
.studio-menu summary{cursor:pointer;padding:10px 9px;color:var(--ink-soft);font-size:14px;font-weight:500;border-radius:9px}
.studio-menu summary:hover{background:#E8EDF7}
.tools{margin-top:4px}
.convs{margin-top:22px}
.side-foot{gap:4px}
.topbar{display:flex;min-height:68px;padding:14px 28px;border:0;background:transparent}
.topbar .brand{font-size:18px}
.topbar .hamb{display:none}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px}
.top-actions a{text-decoration:none;padding:9px 14px;border-radius:10px;color:var(--ink-soft)}
.top-actions .primary{background:var(--accent);color:#fff;font-weight:500}
.main{min-height:0}
.welcome{padding:0;max-width:690px;margin:0 auto}
.welcome .eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.welcome h1{font-family:Inter,system-ui,sans-serif;font-weight:500;letter-spacing:-.04em;font-size:clamp(30px,4vw,46px);line-height:1.15;margin-bottom:16px}
.welcome p{font-size:16px;line-height:1.6;max-width:490px}
.welcome .welcome-note{font-size:13px;margin-top:14px;color:var(--ink-faint)}
.welcome .sig{font-size:12px;font-family:Inter,system-ui,sans-serif;margin-top:18px}
.welcome-actions{gap:10px;margin:24px 0 12px}
.welcome-actions a,.welcome-actions button{border-radius:12px;padding:11px 18px;min-height:44px;font-size:14px}
.welcome-actions button{border:1px solid var(--line);background:#fff;color:var(--ink-soft);font-weight:400}
.welcome-actions button:hover{border-color:var(--accent-soft);color:var(--accent)}
.home-empty:not(.studio-mode) .log{flex:0 1 auto;padding-top:clamp(24px,11vh,110px);padding-bottom:18px;overflow-y:auto}
.home-empty:not(.studio-mode) .composer{padding-top:16px}
.home-empty:not(.studio-mode) .station-row{order:3;margin-top:18px;flex-wrap:wrap}
.composer{background:var(--paper)}
.composer form{padding:15px 14px 15px 20px;border-radius:22px;box-shadow:0 6px 25px rgba(32,41,39,.045)}
.composer form:focus-within{box-shadow:0 0 0 3px rgba(36,90,194,.12);border-color:var(--accent)}
.composer textarea{min-height:34px}
.send{width:42px;height:42px;background:var(--accent);color:#fff;font-size:21px}
.undertext{line-height:1.8;font-size:11px;margin-top:12px}
.undertext a{color:var(--ink-soft)}
.upgrade{color:var(--accent);min-height:44px}
.station-row{flex-wrap:wrap}
#guest{max-width:480px;margin:0 auto 48px}
#guest h1{font-family:Inter,system-ui,sans-serif;font-size:32px;letter-spacing:-.03em;text-align:center;margin-bottom:16px}
#guest .card{padding:26px;box-shadow:0 8px 30px rgba(32,41,39,.04)}
#guest .signup-note{text-align:center;font-size:14px;color:var(--ink-soft);margin:0 0 22px}
#guest .social button{min-height:48px;background:#fff;border-color:var(--line)}
#guest .tabs button{min-height:44px}
#guest .tabs button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#fff}
#guest #authGo{width:100%;border-radius:12px}
#guest label{color:var(--ink-soft)}
#guest input{background:#fff;min-height:48px}
#guest .auth-policy{font-size:12px;color:var(--ink-faint);text-align:center;margin-top:18px}
.plan[data-rec]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan-badge{background:var(--accent);color:#fff}
@media(min-width:861px){.topbar>.brand{opacity:.7}}
@media(max-width:860px){.topbar{padding:12px 14px;min-height:64px}.topbar .hamb{display:grid;width:42px;height:42px}.top-actions{gap:2px}.top-actions a{padding:8px 10px;font-size:13px}.top-actions #topPlans{display:none}.home-empty:not(.studio-mode) .log{padding-top:clamp(22px,6vh,52px)}.welcome h1{font-size:32px}.welcome p{font-size:15px}.composer{padding-left:14px;padding-right:14px}.welcome-actions{margin-top:18px}.welcome-actions button{font-size:12px;padding:9px 12px}.welcome-actions a{font-size:14px}.side-foot .acct{min-height:44px}}
@media(max-height:620px){.home-empty:not(.studio-mode) .log{padding-top:14px}.welcome .sig{display:none}.welcome-actions{margin:12px 0 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

.welcome-rotator{min-height:38px;font-size:14px!important;color:var(--accent)!important;font-weight:500;max-width:520px}

#qsSide .qs-studio{flex:1;min-height:0;overflow:auto;margin-top:12px}
#qsSide .qs-studio summary{cursor:pointer;min-height:44px;padding:12px 9px;color:var(--ink-soft);border-radius:9px}
#qsSide .qs-studio summary:hover{background:#E8EDF7}

/* Conversation replies scroll; the composer keeps its own space. */
.main{height:100dvh;max-height:100dvh;overflow:hidden}.log{min-height:0}.composer,.topbar,.station-row{flex-shrink:0}.composer textarea{min-width:0}.bubble{overflow-wrap:anywhere}