/* Axorai chat interface 392. One stylesheet, tokens first. */
:root{--bg:#0b0b0c;--side:#0f0f11;--card:#17171a;--hover:rgba(255,255,255,.06);--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);--tx:#f3f0ea;--tx2:#cfcbc3;--mut:#9a968e;--dim:#6f6c66;--acc:#e9dcc3;--acc-ink:#15130f;--me:#232326;--err:#f0a79c;--ok:#9fd3a8;--code:#0d0d0f;--shadow:0 30px 80px rgba(0,0,0,.6);--ease:cubic-bezier(.2,.7,.2,1);--glow1:rgba(233,220,195,.075);--glow2:rgba(150,170,210,.05);color-scheme:dark}
:root[data-theme=light]{--bg:#f7f5f0;--side:#efece5;--card:#fff;--hover:rgba(0,0,0,.05);--line:rgba(0,0,0,.09);--line2:rgba(0,0,0,.17);--tx:#1b1a17;--tx2:#34322d;--mut:#6b685f;--dim:#96928a;--acc:#1b1a17;--acc-ink:#f7f5f0;--me:#e9e5dc;--err:#a23228;--ok:#2f7d3f;--code:#17171a;--shadow:0 30px 80px rgba(0,0,0,.16);--glow1:rgba(255,255,255,.9);--glow2:rgba(214,196,160,.28);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 15.5px/1.55 'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
::selection{background:var(--acc);color:var(--acc-ink)}
:root[data-theme=light] .logo img,:root[data-theme=light] .boot img{filter:invert(1)}
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}

.boot{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:26px;text-align:center;color:var(--mut);background:var(--bg);transition:opacity .45s var(--ease),visibility .45s}
.boot.out{opacity:0;visibility:hidden;pointer-events:none}
.boot.out .boot-mark{transform:scale(1.06)}
.boot-mark{position:relative;display:grid;place-items:center;transition:transform .45s var(--ease)}
.boot-mark img{position:relative;animation:boot-in .7s var(--ease) both}
.boot-mark i{position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(38px);opacity:.0;animation:boot-glow 3.6s ease-in-out infinite}
.boot-mark i:nth-child(1){background:rgba(233,196,140,.34);translate:-46px -8px}
.boot-mark i:nth-child(2){background:rgba(140,165,235,.3);translate:46px 10px;animation-delay:-1.8s}
@keyframes boot-glow{0%,100%{opacity:.25;transform:scale(.86)}50%{opacity:.8;transform:scale(1.08)}}
@keyframes boot-in{from{opacity:0;transform:translateY(8px);filter:blur(6px)}}
.app{animation:app-in .5s var(--ease)}
@keyframes app-in{from{opacity:0;transform:scale(.992)}}
@media(prefers-reduced-motion:reduce){.boot-mark i,.boot-mark img,.app{animation:none}.boot-mark i{opacity:.4}}
[data-lite] .boot-mark i{animation:none;opacity:.4}
.boot span{width:132px;height:2px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.boot span::after{content:"";position:absolute;inset:0;width:40%;background:var(--acc);animation:boot 1.1s var(--ease) infinite}
@keyframes boot{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

.app{display:grid;grid-template-columns:284px minmax(0,1fr);height:100dvh;transition:grid-template-columns .3s var(--ease)}
.side-off .app{grid-template-columns:0 minmax(0,1fr)}
.side-off .side{visibility:hidden}

/* sidebar */
.side{display:flex;flex-direction:column;min-width:0;background:var(--side);border-right:1px solid var(--line);padding:14px 10px 10px;overflow:hidden}
.side-top{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 14px 10px}
.icon-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--mut);transition:background .2s,color .2s}
.icon-btn:hover{background:var(--hover);color:var(--tx)}
.new-chat{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);font-weight:500;font-size:14.5px;transition:background .2s,border-color .2s}
.new-chat:hover{background:var(--hover);border-color:var(--mut)}
.search{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;margin:10px 0 4px;border-radius:10px;color:var(--dim);transition:background .2s}
.search:focus-within{background:var(--hover);color:var(--tx)}
.search svg{width:16px;height:16px}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:14px}
.search input::placeholder{color:var(--dim)}
.chats{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px 12px}
.chats h3{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:16px 10px 6px}
.chats-empty{color:var(--dim);font-size:13.5px;padding:18px 10px}
.chat-row{position:relative;display:flex;align-items:center;border-radius:10px;transition:background .15s}
.chat-row:hover,.chat-row.on{background:var(--hover)}
.chat-open{flex:1;min-width:0;text-align:left;padding:8px 10px;font-size:14px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-row.on .chat-open{color:var(--tx)}
.chat-more{width:30px;height:30px;margin-right:3px;border-radius:8px;display:grid;place-items:center;color:var(--mut);opacity:0;transition:opacity .15s,background .15s}
.chat-row:hover .chat-more,.chat-row.on .chat-more,.chat-more:focus-visible{opacity:1}
.chat-more:hover{background:var(--hover);color:var(--tx)}
.chat-more svg{stroke-width:2.6}
.chat-rename{flex:1;min-width:0;margin:3px;padding:5px 8px;border-radius:8px;border:1px solid var(--acc);background:var(--bg);font-size:14px;outline:0}
.menu{position:absolute;z-index:20;min-width:190px;padding:6px;border-radius:14px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);display:grid;animation:pop .18s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:9px;font-size:14px;transition:background .15s}
.menu a:hover,.menu button:hover{background:var(--hover)}
.menu .danger{color:var(--err)}
.row-menu{right:4px;top:36px}
.side-foot{position:relative;border-top:1px solid var(--line);padding-top:8px}
.account{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:12px;text-align:left;transition:background .2s}
.account:hover{background:var(--hover)}
.account svg{width:16px;height:16px;color:var(--dim)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
.account-text{flex:1;min-width:0;display:grid;line-height:1.3}
.account-text b{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-text small{font-size:12px;color:var(--mut)}
#account-menu{left:0;right:0;bottom:calc(100% + 6px)}

/* main */
.main{display:flex;flex-direction:column;min-width:0;height:100dvh;position:relative;isolation:isolate}
/* Ambient light: two static gradients, no blur or animation, so it costs nothing on weak devices. */
.main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 46% at 50% -6%,var(--glow1),transparent 70%),radial-gradient(42% 36% at 88% 104%,var(--glow2),transparent 70%)}
.bar{display:flex;align-items:center;gap:8px;height:56px;padding:0 14px;flex:none}
#side-open{display:none}
.side-off #side-open{display:grid}
.model-btn{display:flex;align-items:center;gap:9px;height:38px;padding:0 10px 0 12px;border-radius:10px;font-weight:500;font-size:15px;transition:background .2s}
.model-btn:hover{background:var(--hover)}
#model-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.model-btn{min-width:0}
.model-btn svg{width:16px;height:16px;color:var(--mut)}
.model-btn img{border-radius:5px}
.quota-wrap{margin-left:auto;position:relative;flex:none;display:flex;align-items:center;gap:6px}
.bell{position:relative}.bell.new::after{content:"";position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--err);box-shadow:0 0 0 2px var(--bg)}
.bell-pop{width:340px;max-height:min(70dvh,520px);overflow-y:auto;gap:0}
.bell-pop h3{padding-bottom:6px}
.notice{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--line)}
.notice b{font-weight:500;font-size:14px}.notice.new b::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--err);vertical-align:1px}
.notice p{font-size:14px;line-height:1.45;color:var(--tx2);white-space:pre-line;overflow-wrap:anywhere}
.notice small{font-size:12px;color:var(--dim)}
.quota{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:12.5px;color:var(--mut);padding:5px 12px 5px 7px;border:1px solid var(--line);border-radius:999px;font-variant-numeric:tabular-nums;transition:border-color .2s,color .2s}
.quota:hover,.quota[aria-expanded=true]{border-color:var(--line2);color:var(--tx)}
.ring{width:20px;height:20px;transform:rotate(-90deg)}
.ring circle{stroke:var(--line2);stroke-width:2.6}
.ring circle+circle{stroke:var(--acc);transition:stroke-dasharray .6s var(--ease),stroke .3s}
.quota.high .ring circle+circle{stroke:#e0b45c}
.quota.low .ring circle+circle{stroke:var(--err)}
.quota-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:300px;max-width:calc(100vw - 24px);padding:16px 18px;border-radius:18px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);display:grid;gap:16px;animation:pop .18s var(--ease)}
.quota-pop h3{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.meter{display:grid;gap:7px}
.meter-head{display:flex;justify-content:space-between;font-size:14px}
.meter-head b{font-weight:500}.meter-head span{color:var(--mut);font-variant-numeric:tabular-nums}
.meter-bar{height:6px;border-radius:6px;background:var(--hover);overflow:hidden}
.meter-bar i{display:block;height:100%;border-radius:6px;background:var(--acc);transition:width .6s var(--ease)}
.meter.high .meter-bar i{background:#e0b45c}.meter.full .meter-bar i{background:var(--err)}
.meter small{font-size:12.5px;line-height:1.4;color:var(--dim)}
.meter-link{font-size:13.5px;color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.meter-link:hover{color:var(--tx)}
.meter-note{font-size:13px;line-height:1.45;color:var(--mut)}
.quota.money{padding-left:12px}.quota.money .ring{display:none}
.quota-pop.bal{width:328px;padding:20px;border-radius:22px;gap:18px}
.balance-info{display:grid;gap:18px}
.bal-head{display:grid;gap:2px}
.bal-head span{font-size:14px;color:var(--mut)}
.bal-sum{font-size:34px;line-height:1.12;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bal-head small{margin-top:4px;font-size:13.5px;color:var(--mut)}
.bal-rows{display:grid;gap:10px;padding:14px 0;border-block:1px solid var(--line)}
.bal-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px}
.bal-row span{color:var(--mut)}
.bal-row b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.bal-bar{display:block;height:4px;border-radius:4px;background:var(--hover);overflow:hidden}
.bal-bar i{display:block;height:100%;border-radius:4px;background:var(--acc);transition:width .6s var(--ease)}
.bal-link{display:flex;align-items:center;justify-content:space-between;margin:-8px -10px -10px;padding:10px;border-radius:12px;font-size:14px;color:var(--mut);transition:background .15s,color .15s}
.bal-link:hover{background:var(--hover);color:var(--tx)}
.bal-link svg{width:16px;height:16px}
.bal-link[hidden]{display:none}
/* The top-up field is built like the message box: one rounded field with its button inside. */
.topup{display:grid;gap:10px}
.topup-row{display:flex;align-items:center;height:52px;padding:0 6px 0 18px;border-radius:999px;background:var(--hover);border:1px solid var(--line);cursor:text;transition:border-color .2s}
.topup-row:focus-within{border-color:var(--line2)}
.topup-row input{flex:1;width:0;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;font-size:16px;font-variant-numeric:tabular-nums}
.topup-row input::placeholder{color:var(--dim)}
.topup-unit{flex:none;margin:0 12px 0 6px;font-size:16px;color:var(--dim)}
.topup-row .btn{flex:none;height:40px;padding:0 18px}
.topup-sums{display:flex;gap:6px}
.topup-sum{flex:1;height:36px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;color:var(--tx2);font-variant-numeric:tabular-nums;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.topup-sum:hover{border-color:var(--line2);color:var(--tx);background:var(--hover)}
.topup .legal-error{padding:0 4px}
.st-note-link{padding:0;background:none;border:0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.quota.low{color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,transparent)}

.thread{flex:1;overflow-y:auto;padding:12px 20px 28px;outline:0;scroll-behavior:auto}
.thread.empty{display:grid;place-items:center}
.col{max-width:768px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.hello{width:min(100%,680px);text-align:center;padding-bottom:6vh;animation:rise .6s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.hello{--c1:#f2bd78;--c2:#f08db0;--c3:#cf86ea;--c4:#86a2fb;--c5:#62d4bc;--h1:var(--c1);--h2:var(--c2);--h3:var(--c3)}
:root[data-theme=light] .hello{--c1:#dc8526;--c2:#d9487f;--c3:#a548cc;--c4:#3f68e2;--c5:#0e9a83}
.hello[data-tone="2"]{--h1:var(--c2);--h2:var(--c3);--h3:var(--c4)}
.hello[data-tone="3"]{--h1:var(--c3);--h2:var(--c4);--h3:var(--c5)}
.hello[data-tone="4"]{--h1:var(--c5);--h2:var(--c4);--h3:var(--c3)}
.hello[data-tone="5"]{--h1:var(--c4);--h2:var(--c3);--h3:var(--c2)}
.hello[data-tone="6"]{--h1:var(--c1);--h2:var(--c2);--h3:var(--c1)}
.hello h1{font-weight:500;font-size:clamp(30px,4.4vw,52px);letter-spacing:-.035em;line-height:1.08;margin-bottom:6px;text-wrap:balance}
.hello-w{display:inline-block;animation:hello-in .8s var(--ease) both}
.hello-name{background:linear-gradient(100deg,var(--h1),var(--h2) 50%,var(--h3)) 0 0/200% 100%;animation:hello-hue 9s ease-in-out infinite alternate;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block;padding:0 .07em .1em;margin:0 -.07em -.1em}
@keyframes hello-hue{to{background-position:100% 0}}
@keyframes hello-in{from{opacity:0;transform:translateY(.45em);filter:blur(8px)}}
@media(prefers-reduced-motion:reduce){.hello-w{animation:none}}
.ideas{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.idea{text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line);display:grid;gap:2px;transition:border-color .2s,background .2s,transform .3s var(--ease)}
.idea:hover{border-color:var(--line2);background:var(--hover);transform:translateY(-2px)}
.idea b{font-weight:500;font-size:14.5px}.idea span{font-size:13.5px;color:var(--mut)}

.msg{display:flex;flex-direction:column;gap:8px;min-width:0;animation:rise .35s var(--ease)}
.msg.me{align-items:flex-end}
.msg.me .msg-body{max-width:min(86%,600px);background:var(--me);padding:11px 16px;border-radius:18px 18px 5px 18px;white-space:pre-wrap;overflow-wrap:anywhere}
.who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut)}
.who img{border-radius:4px}
.msg.ai .msg-body{color:var(--tx2);font-size:16px;line-height:1.65;overflow-wrap:anywhere;min-width:0}
.msg-body>*+*{margin-top:14px}
.msg-body h2,.msg-body h3,.msg-body h4,.msg-body h5{color:var(--tx);font-weight:500;letter-spacing:-.015em;line-height:1.3;margin-top:26px}
.msg-body h2{font-size:22px}.msg-body h3{font-size:19px}.msg-body h4,.msg-body h5{font-size:16.5px}
.msg-body strong{color:var(--tx);font-weight:600}
.msg-body a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.msg-body a:hover{text-decoration-color:var(--tx)}
.msg-body ul,.msg-body ol{padding-left:24px;margin-bottom:0}
.msg-body li+li{margin-top:6px}.msg-body li>ul,.msg-body li>ol{margin-top:6px}
.msg-body blockquote{margin:14px 0 0;padding-left:16px;border-left:2px solid var(--acc);color:var(--mut)}
.msg-body hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.msg-body :not(pre)>code{font:13.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--hover);padding:2px 6px;border-radius:6px;color:var(--tx)}
.code{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--code)}
.code-head{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 6px 14px;font-size:12px;color:#9a968e;border-bottom:1px solid rgba(255,255,255,.08)}
.code-copy{padding:4px 10px;border-radius:7px;color:#cfcbc3;transition:background .15s}
.code-copy:hover{background:rgba(255,255,255,.09)}
.code pre{margin:0;padding:14px 16px;overflow-x:auto;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#dedad2;tab-size:2}
.code code.hljs{background:none;padding:0}
.table{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.table table{border-collapse:collapse;width:100%;font-size:14.5px}
.table th,.table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
.table th{font-weight:500;color:var(--tx);background:var(--hover)}
.table tr:last-child td{border-bottom:0}
.typing{display:inline-block;width:9px;height:18px;border-radius:2px;background:var(--acc);animation:blink 1s steps(2) infinite;vertical-align:-3px}
@keyframes blink{50%{opacity:.15}}
.msg-error{color:var(--err);background:color-mix(in srgb,var(--err) 9%,transparent);border:1px solid color-mix(in srgb,var(--err) 35%,transparent);padding:10px 14px;border-radius:12px;font-size:14.5px}
.msg-note{color:var(--dim);font-size:13.5px}
.sources{display:flex;flex-wrap:wrap;gap:6px}
.sources a{font-size:12.5px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:4px 11px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s,border-color .2s}
.sources a:hover{color:var(--tx);border-color:var(--line2)}
.msg-tools{display:flex;gap:2px;opacity:0;transition:opacity .2s;margin:-2px 0 0 -8px}
.msg.me .msg-tools{margin:-2px -8px 0 0}
.msg:hover .msg-tools,.msg:focus-within .msg-tools,.msg:last-child .msg-tools{opacity:1}
.msg-tools button{font-size:12.5px;color:var(--mut);padding:4px 8px;border-radius:7px;transition:background .15s,color .15s}
.msg-tools button:hover{background:var(--hover);color:var(--tx)}
.msg-tools .more{color:var(--acc)}

.steps{display:grid;gap:4px;justify-items:start}
.steps:empty{display:none}
.step{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mut);max-width:100%}
.step svg{width:15px;height:15px;color:var(--dim)}
details.step{display:block}
details.step summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:3px 10px 3px 0;border-radius:8px;transition:color .2s}
details.step summary::-webkit-details-marker{display:none}
details.step:not(.flat) summary::after{content:"";width:6px;height:6px;border:solid var(--dim);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:-3px 0 0 2px;transition:transform .2s}
details.step[open] summary::after{transform:rotate(-135deg);margin-top:3px}
details.step summary:hover{color:var(--tx)}
details.step.flat summary{cursor:default}
.thought{margin:6px 0 8px;padding:2px 0 2px 14px;border-left:2px solid var(--line2);color:var(--mut);font-size:14px;line-height:1.6;white-space:pre-wrap;max-height:260px;overflow-y:auto}
:is(div.step.run,details.step.run>summary,.waiting){color:var(--tx2);background:linear-gradient(90deg,var(--mut) 0,var(--tx) 45%,var(--mut) 90%) 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 1.6s linear infinite}
.waiting{display:inline-block;font-size:14.5px}
.step.run svg{color:var(--acc)}
@keyframes shine{to{background-position:-200% 0}}

/* composer */
.composer{flex:none;padding:0 20px 10px}
.composer-box{max-width:768px;margin:0 auto;background:var(--card);border:1px solid var(--line2);border-radius:22px;padding:12px 12px 10px 18px;transition:border-color .2s,box-shadow .2s}
.composer-box:focus-within{border-color:var(--mut);box-shadow:0 0 0 4px var(--hover)}
textarea{display:block;width:100%;resize:none;background:none;border:0;outline:0;font-size:16px;line-height:1.5;max-height:220px;padding:4px 0}
textarea::placeholder{color:var(--dim)}
textarea:focus-visible,.search input:focus-visible{outline:0}
.composer-row{display:flex;align-items:center;gap:6px;margin:6px 0 0 -8px;min-height:38px}
.grow{flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;font-size:13.5px;color:var(--mut);border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.chip svg{width:16px;height:16px}
.chip:hover{background:var(--hover);color:var(--tx)}
.chip[aria-pressed=true]{color:var(--tx);border-color:var(--line2);background:var(--hover)}
.send{width:38px;height:38px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;transition:transform .2s var(--ease),opacity .2s}
.send svg{stroke-width:2}
.send:hover{transform:scale(1.06)}.send:active{transform:scale(.94)}
.send{position:relative}
.mic{display:inline-flex;align-items:center;gap:6px;height:38px;min-width:38px;padding:0 9px;border-radius:999px;color:var(--mut);font-size:13px;font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.mic[hidden]{display:none}
/* Empty box: the microphone covers the send button. Typing: it peels off to the left and the arrow appears. */
.composer{--mic-dx:44px}
.composer[data-merged=true] .mic{transform:translateX(var(--mic-dx));background:var(--acc);color:var(--acc-ink);z-index:1}
.composer[data-merged=true] .mic:hover{background:var(--acc);color:var(--acc-ink);filter:brightness(1.12)}
.composer[data-merged=true] .send{transform:scale(.4);opacity:0;pointer-events:none}
.composer.moved[data-merged=false] .mic{animation:mic-peel .6s cubic-bezier(.3,.8,.3,1)}
.composer.moved[data-merged=true] .mic{animation:mic-stick .55s cubic-bezier(.3,.8,.3,1)}
.composer.moved[data-merged=false] .send{animation:send-pop .45s var(--ease)}
@keyframes mic-peel{0%{transform:translateX(var(--mic-dx))}30%{transform:translateX(calc(var(--mic-dx) - 12px)) scale(1.3,.86)}68%{transform:translateX(-5px) scale(.92,1.06)}100%{transform:none}}
@keyframes mic-stick{0%{transform:none}50%{transform:translateX(calc(var(--mic-dx) - 10px)) scale(1.28,.88)}78%{transform:translateX(calc(var(--mic-dx) + 3px)) scale(.9,1.08)}100%{transform:translateX(var(--mic-dx))}}
@keyframes send-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.composer.moved .mic,.composer.moved .send{animation:none!important}}
.mic svg{width:20px;height:20px;flex:none}
.mic:hover{background:var(--hover);color:var(--tx)}
.mic span:empty{display:none}
.mic[data-state=rec]{color:#fff;background:#e5484d;padding:0 13px 0 10px}
.mic[data-state=rec] svg{animation:mic-pulse 1.4s ease-in-out infinite}
.mic[data-state=wait]{color:var(--tx);pointer-events:none}
.mic[data-state=wait] svg{animation:mic-pulse .8s ease-in-out infinite;opacity:.6}
@keyframes mic-pulse{50%{transform:scale(.84)}}
@media(prefers-reduced-motion:reduce){.mic svg{animation:none!important}}
.btn.ghost.danger-text{color:var(--err)}
:root[data-theme=light] .btn.danger{color:#fff}
.del-form{display:grid;gap:12px;padding:6px 0 12px}
.del-lead{font-size:15px;line-height:1.5;color:var(--tx2);padding:4px 0 6px}
.del-checks{display:grid;gap:9px;padding:4px 0 6px}
.del-check{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.45;color:var(--tx2);cursor:pointer}
.del-check input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--err)}
.del-form>input{width:100%;background:var(--hover);border:1px solid transparent;border-radius:10px;padding:10px 12px;font-size:14.5px;outline:0}
.del-form>input:focus-visible{border-color:var(--mut)}
.del-form .btn{justify-self:start}
.send.stop{background:var(--card);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line2)}
.composer.queued .send{animation:blink 1.1s ease-in-out infinite}
.send.stop svg{fill:currentColor;stroke:none;width:22px;height:22px}
.send.stop::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:var(--acc);border-right-color:color-mix(in srgb,var(--acc) 35%,transparent);animation:send-spin .9s linear infinite;pointer-events:none}
.send.stop:hover{background:var(--hover)}
@keyframes send-spin{to{transform:rotate(360deg)}}
[data-surface=glass] .send.stop{background:var(--g-field,var(--card));box-shadow:inset 0 0 0 1px var(--line2)}
@media(prefers-reduced-motion:reduce){.send.stop::before{animation:none;border-color:var(--acc)}}
.fine{text-align:center;font-size:12px;color:var(--dim);margin-top:8px}

/* dialogs */
dialog{border:1px solid var(--line2);background:var(--card);color:var(--tx);border-radius:20px;padding:0;box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(5px)}
dialog[open]{animation:pop .22s var(--ease)}
.picker{width:min(700px,calc(100vw - 24px));height:min(620px,calc(100dvh - 48px));overflow:hidden}
.picker[open]{display:flex;flex-direction:column}
.picker-head{display:flex;align-items:center;gap:6px;padding:10px 10px 6px 8px;border-bottom:1px solid var(--line)}
.picker-head .search{flex:1;margin:0;height:42px}
.picker-head .search input{font-size:15.5px}
.picker-list{flex:1;min-height:0;display:grid;grid-template-columns:212px minmax(0,1fr)}
.picker-list.flat,.picker-list:has(>.chats-empty){display:block;overflow-y:auto;padding:8px 8px 12px}
.vendors{overflow-y:auto;padding:8px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.vendor{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;text-align:left;font-size:14.5px;color:var(--tx2);transition:background .15s,color .15s}
.vendor img{flex:none;border-radius:6px}
.vendor span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vendor small{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.vendor:hover{background:var(--hover)}
.vendor[aria-selected=true]{background:var(--hover);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line2)}
.vendor-models{overflow-y:auto;padding:4px 8px 12px;min-width:0}
@media(max-width:640px){
 .picker-list{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
 .vendors{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line);padding:8px;scrollbar-width:none}
 .vendor{width:auto;flex:none;padding:8px 12px;border-radius:999px}
 .vendor small{display:none}
}
.picker-list h3{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:16px 10px 6px}
.model{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border-radius:12px;text-align:left;transition:background .15s}
.model:hover:not(:disabled){background:var(--hover)}
.model.on{background:var(--hover)}
.model:disabled{opacity:.45;cursor:default}
.model img{border-radius:6px}
.model-text{flex:1;min-width:0;display:grid;line-height:1.35}
.model-text b{font-weight:500;font-size:15px}
.model-text small{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{font-size:11px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line2);border-radius:999px;padding:3px 9px;color:var(--mut)}
.confirm{width:min(400px,calc(100vw - 24px))}
.confirm form{padding:24px;display:grid;gap:10px}
.confirm h2{font-size:20px;font-weight:500;letter-spacing:-.02em}
.confirm p{color:var(--mut);font-size:14.5px}
.confirm-row{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.btn{height:42px;padding:0 20px;border-radius:999px;font-weight:500;font-size:14.5px;background:var(--acc);color:var(--acc-ink);transition:opacity .2s}
.btn:hover{opacity:.88}
.btn.ghost{background:none;color:var(--tx);border:1px solid var(--line2)}
.btn.danger{background:var(--err);color:#1b0c09}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:50;max-width:min(480px,calc(100vw - 32px));padding:11px 18px;border-radius:14px;background:var(--tx);color:var(--bg);font-size:14px;box-shadow:var(--shadow);animation:pop .22s var(--ease)}
.scrim{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.5)}

.files,.msg-files{display:flex;flex-wrap:wrap;gap:6px}
.files{padding:0 0 10px}
.msg-files{justify-content:flex-end;margin-bottom:6px}
.file{display:inline-flex;align-items:center;gap:6px;max-width:240px;height:32px;padding:0 6px 0 9px;border-radius:10px;border:1px solid var(--line2);font-size:13px;color:var(--tx2);background:var(--hover)}
.file>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file svg{width:15px;height:15px;color:var(--mut)}
.file button{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--mut)}
.file button:hover{background:var(--hover);color:var(--tx)}
.file button svg{width:11px;height:11px;stroke-width:2.2}
.file.busy{background:linear-gradient(100deg,var(--hover) 30%,color-mix(in srgb,var(--acc) 16%,transparent) 50%,var(--hover) 70%);background-size:240% 100%;animation:shine 1.4s linear infinite}
.msg-files .file{padding-right:10px}
#attach{width:34px;height:34px;margin-left:-8px}
.legal{max-width:480px}
.legal form{display:grid;gap:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--tx2);cursor:pointer}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--acc);flex:none}
.check a{text-decoration:underline;text-underline-offset:3px}
.legal-error{color:var(--err);font-size:13.5px}

.plans{width:min(1040px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:22px 24px 24px;border-radius:24px;border:1px solid var(--line2);background:var(--card);color:var(--tx);box-shadow:var(--shadow);overflow-y:auto}
.plans::backdrop{background:rgba(0,0,0,.55)}
.plans-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.plans-head h2{font-size:24px;font-weight:500;letter-spacing:-.02em}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:10px}
.plan-card{display:grid;align-content:start;gap:12px;padding:18px 16px 16px;border-radius:18px;border:1px solid var(--line);transition:border-color .2s}
.plan-card.mine{border-color:var(--line2);background:var(--hover)}
.plan-card.picked{border-color:var(--acc)}
.plan-card h3{font-size:16px;font-weight:500}
.plan-cost{font-size:24px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.plan-cost small{font-size:13px;font-weight:400;color:var(--mut);letter-spacing:0}
.plan-card ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:13.5px;color:var(--tx2)}
.plan-card .btn{height:38px;margin-top:4px}
.plan-now{font-size:13px;color:var(--mut);padding:9px 0;text-align:center}
.pay{display:grid;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);max-width:520px}
.pay-line{display:flex;justify-content:space-between;align-items:baseline;font-size:16px}
.pay-line b{font-weight:500}
.pay-promo{display:grid;gap:6px;font-size:13.5px;color:var(--tx2)}
.pay-promo input{height:42px;padding:0 12px;border-radius:12px;background:var(--hover);border:1px solid transparent;outline:0;text-transform:uppercase}
.pay-promo input::placeholder{text-transform:none;color:var(--dim)}
.pay-promo input:focus-visible{border-color:var(--mut)}
.pay-note{font-size:12.5px;line-height:1.45;color:var(--dim)}
.pay-note a{text-decoration:underline;text-underline-offset:3px}

.support{width:min(460px,calc(100vw - 16px));height:min(680px,calc(100dvh - 16px));padding:0;border-radius:24px;border:1px solid var(--line2);background:var(--card);color:var(--tx);box-shadow:var(--shadow);overflow:hidden}
.support[open]{display:flex;flex-direction:column}
.support::backdrop{background:rgba(0,0,0,.45)}
.sup-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 14px;border-bottom:1px solid var(--line)}
.sup-head .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:3px;border-radius:12px;background:var(--hover);min-width:230px}
.sup-head .seg button{min-height:32px;border-radius:9px;font-size:13.5px;color:var(--mut)}
.sup-head .seg button[aria-selected=true]{background:var(--card);color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 0 0 1px var(--line2)}
.sup-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.sup-hello{display:grid;gap:8px;justify-items:start;margin:auto 0}
.sup-hello h3{font-size:22px;font-weight:500;letter-spacing:-.02em}
.sup-hello p{color:var(--mut);font-size:14px;margin-bottom:8px}
.sup-hello .idea{display:block;padding:9px 13px;font-size:14px}
.sup-msg{max-width:86%;display:grid;gap:3px}
.sup-msg p{padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.sup-msg small{font-size:11.5px;color:var(--dim);padding:0 6px}
.sup-msg.me{align-self:flex-end}.sup-msg.me p{background:var(--me);border-bottom-right-radius:6px}
.sup-msg.them{align-self:flex-start}.sup-msg.them p{background:var(--hover);border-bottom-left-radius:6px}
.sup-photo img{display:block;max-width:180px;border-radius:12px;margin-top:4px}
.sup-pass{align-self:flex-start;height:36px;font-size:13.5px}
.sup-empty{color:var(--mut);font-size:14px;text-align:center;padding:18px 8px}
.sup-new{align-self:stretch}
.sup-ticket{display:grid;gap:4px;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);transition:background .2s,border-color .2s}
.sup-ticket:hover{background:var(--hover);border-color:var(--line2)}
.sup-ticket-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.sup-ticket b{font-weight:500;font-size:14px}
.sup-ticket i{font-style:normal;font-size:12px;padding:2px 9px;border-radius:999px;background:var(--hover);color:var(--tx2)}
.sup-ticket i.st-closed{color:var(--dim)}.sup-ticket i.st-pending{color:#e0b45c}
.sup-ticket>span:not(.sup-ticket-top){font-size:13.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-ticket small{font-size:12px;color:var(--dim)}
.sup-back{align-self:flex-start}
.sup-form{padding:10px 12px 12px;border-top:1px solid var(--line)}
.sup-row{display:flex;align-items:flex-end;gap:8px}
.sup-row textarea{flex:1;min-width:0;resize:none;max-height:120px;background:var(--hover);border:1px solid transparent;border-radius:14px;padding:9px 13px;outline:0;line-height:1.45;field-sizing:content}
.sup-row textarea:focus-visible{border-color:var(--mut)}

.settings{width:min(560px,calc(100vw - 16px));max-height:calc(100dvh - 16px);padding:22px 24px 12px;border-radius:24px;border:1px solid var(--line2);background:var(--card);color:var(--tx);box-shadow:var(--shadow);overflow-y:auto}
.settings::backdrop{background:rgba(0,0,0,.5)}
.set-sec{padding:6px 0 14px}
.set-sec h3{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-bottom:2px}
.settings .btn{height:36px;font-size:13.5px;padding:0 16px;display:inline-grid;place-items:center;white-space:nowrap}
.settings form .btn{justify-self:start}
.legal-error.good{color:var(--ok)}

/* Living background: four large soft circles. Only transform and opacity change, so the browser
   animates them on the compositor without repainting; there is no blur filter. */
.orbs{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.orbs i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;opacity:0;will-change:transform,opacity;background:radial-gradient(closest-side,var(--orb) 0%,color-mix(in srgb,var(--orb) 62%,transparent) 28%,color-mix(in srgb,var(--orb) 26%,transparent) 54%,color-mix(in srgb,var(--orb) 7%,transparent) 78%,transparent 100%)}
.orbs i:nth-child(1){--orb:rgba(240,190,120,.34);left:-22vmax;top:-30vmax;animation:orb-a 64s ease-in-out infinite,orb-fade 34s ease-in-out infinite}
.orbs i:nth-child(2){--orb:rgba(100,135,250,.32);right:-26vmax;bottom:-34vmax;animation:orb-b 78s ease-in-out infinite,orb-fade 42s ease-in-out -14s infinite}
.orbs i:nth-child(3){--orb:rgba(205,110,225,.24);left:28%;top:18%;width:46vmax;height:46vmax;animation:orb-c 92s ease-in-out infinite,orb-fade 50s ease-in-out -30s infinite}
.orbs i:nth-child(4){--orb:rgba(70,200,175,.22);left:-10vmax;bottom:-26vmax;width:50vmax;height:50vmax;animation:orb-b 86s ease-in-out -40s infinite reverse,orb-fade 46s ease-in-out -8s infinite}
:root[data-theme=light] .orbs i:nth-child(1){--orb:rgba(255,196,120,.55)}
:root[data-theme=light] .orbs i:nth-child(2){--orb:rgba(130,165,255,.42)}
:root[data-theme=light] .orbs i:nth-child(3){--orb:rgba(236,150,205,.34)}
:root[data-theme=light] .orbs i:nth-child(4){--orb:rgba(110,210,185,.32)}
@keyframes orb-a{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(26vmax,10vmax,0) scale(1.12)}66%{transform:translate3d(8vmax,24vmax,0) scale(.92)}}
@keyframes orb-b{0%,100%{transform:translate3d(0,0,0) scale(1)}40%{transform:translate3d(-30vmax,-14vmax,0) scale(1.15)}70%{transform:translate3d(-10vmax,-28vmax,0) scale(.9)}}
@keyframes orb-c{0%,100%{transform:translate3d(0,0,0) scale(.95)}30%{transform:translate3d(-22vmax,12vmax,0) scale(1.1)}65%{transform:translate3d(18vmax,-10vmax,0) scale(1)}}
/* Slow breath: a long rise, a long hold, a long fade. Never a flash. */
@keyframes orb-fade{0%,100%{opacity:0}28%,62%{opacity:1}}
[data-lite] .orbs i,.orbs.still i{animation:none;opacity:.7;will-change:auto}
@media (prefers-reduced-motion:reduce){.orbs i{opacity:.7}}

@media (max-width:900px){
 .app,.side-off .app{grid-template-columns:minmax(0,1fr)}
 .side,.side-off .side{position:fixed;inset:0 auto 0 0;z-index:30;width:min(300px,86vw);visibility:visible;transform:translateX(-102%);transition:transform .3s var(--ease);padding-top:max(14px,env(safe-area-inset-top))}
 .drawer .side{transform:none;box-shadow:var(--shadow)}
 #side-open{display:grid}
 .chat-more{opacity:1}
 .thread{padding:8px 14px 20px}
 .composer{padding:0 10px max(8px,env(safe-area-inset-bottom))}
 .ideas{grid-template-columns:1fr}
 .msg-tools{opacity:1}
 .fine{display:none}
 .quota{font-size:12px;padding:4px 10px 4px 6px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Liquid Glass surface ----------
   Optional look. One light source from above and three materials:
   clear glass for controls that float over the page, dense glass for panels that carry text,
   and a bright lozenge for the chosen item inside a recessed track.
   The page scrolls underneath the top bar and the composer, so the glass has something to bend.
   Blur is skipped where the browser lacks it or the user asked for less transparency. */
:root[data-surface=glass]{--glow1:rgba(240,190,120,.20);--glow2:rgba(100,135,250,.18);--glow3:rgba(205,110,225,.11);
 --g-fill:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.03) 46%,rgba(255,255,255,.075));
 --g-dense:linear-gradient(180deg,rgba(42,42,48,.64),rgba(20,20,24,.72));
 --g-pick:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.07));
 --g-line:rgba(255,255,255,.10);
 --g-rim:inset 0 1px 0 rgba(255,255,255,.36),inset 0 -1px 0 rgba(255,255,255,.08),inset 0 14px 20px -16px rgba(255,255,255,.22),inset 0 -18px 24px -20px rgba(255,255,255,.12);
 --g-rim-sm:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.06);
 --g-drop:0 1px 1px rgba(0,0,0,.22),0 14px 34px -10px rgba(0,0,0,.55);
 --g-drop-sm:0 1px 2px rgba(0,0,0,.25),0 6px 14px -6px rgba(0,0,0,.4);
 --g-drop-lg:0 1px 1px rgba(0,0,0,.25),0 44px 110px -12px rgba(0,0,0,.75);
 --g-blur:blur(22px) saturate(1.9) brightness(1.12);--g-blur-lg:blur(44px) saturate(2);
 --g-well:rgba(0,0,0,.28);--g-well-in:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.07);
 --g-field:rgba(255,255,255,.06);--g-dim:rgba(0,0,0,.4);--g-solid:#1e1e22;--dim:#89857d}
:root[data-surface=glass][data-theme=light]{--glow1:rgba(255,206,140,.55);--glow2:rgba(140,172,255,.42);--glow3:rgba(240,160,210,.32);
 --g-fill:linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,255,255,.22) 46%,rgba(255,255,255,.40));
 --g-dense:linear-gradient(180deg,rgba(255,255,255,.72),rgba(250,248,243,.58));
 --g-pick:linear-gradient(180deg,#fff,rgba(255,255,255,.76));
 --g-line:rgba(255,255,255,.8);
 --g-rim:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.75),inset 0 14px 20px -16px #fff,inset 0 -18px 24px -20px rgba(255,255,255,.95);
 --g-rim-sm:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.6);
 --g-drop:0 0 0 .5px rgba(64,50,24,.13),0 1px 2px rgba(64,50,24,.06),0 14px 32px -12px rgba(72,54,22,.26);
 --g-drop-sm:0 0 0 .5px rgba(64,50,24,.12),0 1px 2px rgba(64,50,24,.08),0 6px 14px -8px rgba(72,54,22,.22);
 --g-drop-lg:0 0 0 .5px rgba(64,50,24,.13),0 44px 110px -14px rgba(60,46,20,.34);
 --g-blur:blur(22px) saturate(1.8);--g-blur-lg:blur(44px) saturate(1.9);
 --g-well:rgba(64,52,28,.085);--g-well-in:inset 0 1px 2px rgba(64,50,24,.16),inset 0 -1px 0 rgba(255,255,255,.75);
 --g-field:rgba(255,255,255,.6);--g-dim:rgba(62,56,46,.22);--g-solid:#fbfaf7;--dim:#817d74}

/* A richer backdrop: glass over a flat colour is just a grey card. */
[data-surface=glass] .main::before{background:radial-gradient(48% 42% at 22% 0%,var(--glow1),transparent 70%),radial-gradient(44% 40% at 92% 96%,var(--glow2),transparent 70%),radial-gradient(34% 30% at 70% 30%,var(--glow3),transparent 70%)}
[data-surface=glass] .orbs i:nth-child(1){--orb:rgba(240,190,120,.46)}
[data-surface=glass] .orbs i:nth-child(2){--orb:rgba(100,135,250,.44)}
[data-surface=glass] .orbs i:nth-child(3){--orb:rgba(205,110,225,.34)}
[data-surface=glass] .orbs i:nth-child(4){--orb:rgba(70,200,175,.30)}
:root[data-surface=glass][data-theme=light] .orbs i:nth-child(1){--orb:rgba(255,186,105,.72)}
:root[data-surface=glass][data-theme=light] .orbs i:nth-child(2){--orb:rgba(120,155,255,.56)}
:root[data-surface=glass][data-theme=light] .orbs i:nth-child(3){--orb:rgba(236,130,200,.46)}
:root[data-surface=glass][data-theme=light] .orbs i:nth-child(4){--orb:rgba(90,205,180,.44)}

/* Clear glass: controls floating over the page. */
[data-surface=glass] :is(.composer-box,.quota,.model-btn,.bar .icon-btn,.st-settings,.track){background:var(--g-solid);border:1px solid var(--g-line);box-shadow:var(--g-rim),var(--g-drop)}
/* Dense glass: anything that carries text over the page. */
[data-surface=glass] :is(.menu,.quota-pop,dialog,.side,.toast){background:var(--g-solid);border:1px solid var(--g-line);box-shadow:var(--g-rim),var(--g-drop-lg)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 [data-surface=glass] :is(.composer-box,.quota,.model-btn,.bar .icon-btn,.st-settings,.track){background:var(--g-fill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
 [data-surface=glass] :is(.menu,.quota-pop,dialog,.side,.toast){background:var(--g-dense);-webkit-backdrop-filter:var(--g-blur-lg);backdrop-filter:var(--g-blur-lg)}
}
[data-surface=glass] .side{box-shadow:var(--g-rim),var(--g-drop)}
/* A menu opened from a glass sheet has nothing clean to blur, so it turns nearly opaque. */
[data-surface=glass] :is(.side,dialog) .menu{background:color-mix(in srgb,var(--g-solid) 95%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
[data-surface=glass] .composer-box{border-radius:28px}
[data-surface=glass] .composer-box:focus-within{border-color:var(--g-line);box-shadow:var(--g-rim),var(--g-drop),0 0 0 4px var(--hover)}
[data-surface=glass] .model-btn{border-radius:999px;padding:0 12px 0 14px}
[data-surface=glass] .bar .icon-btn{border-radius:50%;width:38px;height:38px;color:var(--tx2)}
[data-surface=glass] .quota{padding:6px 13px 6px 8px;color:var(--tx2)}
[data-surface=glass] .quota-pop{border-radius:24px}
[data-surface=glass] .menu{border-radius:18px;padding:7px}
[data-surface=glass] :is(.menu a,.menu button){border-radius:12px}
[data-surface=glass] dialog{border-radius:28px}
[data-surface=glass] dialog::backdrop{background:var(--g-dim);-webkit-backdrop-filter:none;backdrop-filter:none}
[data-surface=glass] .scrim{background:var(--g-dim)}
[data-surface=glass] .toast{color:var(--tx);border-radius:20px}
[data-surface=glass] .st-settings{border-radius:26px}
[data-surface=glass] .track{border-radius:22px}
[data-surface=glass] .side-foot{border-top-color:var(--g-line)}

/* Lozenge: the chosen item, and small buttons that already sit on glass. */
[data-surface=glass] :is(.new-chat,.btn.ghost,.chip[aria-pressed=true],.msg.me .msg-body,.modes button[aria-current=true],.seg button[aria-checked=true]){background:var(--g-pick);border-color:var(--g-line);box-shadow:var(--g-rim-sm),var(--g-drop-sm)}
[data-surface=glass] :is(.chat-row.on,.model.on){background:var(--g-pick);box-shadow:var(--g-rim-sm)}
[data-surface=glass] .new-chat{border-radius:999px;padding:0 16px}
[data-surface=glass] .msg.me .msg-body{background:var(--g-fill);border:1px solid var(--g-line);border-radius:22px 22px 7px 22px}
[data-surface=glass] :is(.chat-row,.account,.model){border-radius:14px}
/* Recessed tracks the lozenge slides in. */
[data-surface=glass] :is(.modes,.seg){background:var(--g-well);box-shadow:var(--g-well-in)}
[data-surface=glass] .modes{border-radius:18px;padding:4px}
[data-surface=glass] .modes button{border-radius:14px}
[data-surface=glass] .seg{border-radius:14px}
[data-surface=glass] .seg button{border-radius:11px}
[data-surface=glass] dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),textarea,select){background:var(--g-field);border-color:var(--g-line);box-shadow:var(--g-well-in)}
[data-surface=glass] dialog :is(.plan-card,.sup-msg,.ticket,.set-sec){border-color:var(--g-line)}
[data-surface=glass] .code-copy{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
[data-surface=glass] .switch{box-shadow:var(--g-well-in)}

/* Tinted glass for the main action. */
[data-surface=glass] :is(.send:not(.stop),.btn:not(.ghost):not(.danger),.avatar,.composer[data-merged=true] .mic){background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 78%,#fff),var(--acc) 52%,color-mix(in srgb,var(--acc) 90%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.2),inset 0 8px 10px -8px rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.25),0 8px 18px -6px color-mix(in srgb,var(--acc) 40%,transparent)}
[data-surface=glass] .send.stop{background:var(--g-pick);box-shadow:var(--g-rim-sm),var(--g-drop-sm)}

/* Glass answers a touch: it brightens, then gives a little under the finger. */
[data-surface=glass] :is(.new-chat,.btn,.quota,.model-btn,.bar .icon-btn){transition:transform .3s cubic-bezier(.3,1.5,.5,1),filter .2s,color .2s}
[data-surface=glass] :is(.new-chat,.btn,.quota,.model-btn,.bar .icon-btn):hover{filter:brightness(1.12);opacity:1;color:var(--tx)}
[data-surface=glass] :is(.new-chat,.btn,.quota,.model-btn,.bar .icon-btn):active{transform:scale(.96)}

/* The chat and the studio run under the floating bar; the chat also runs under the composer.
   A soft fade keeps text from colliding with the controls at the very edge. */
[data-surface=glass] .main{overflow-y:clip}
[data-surface=glass] .bar{position:relative;z-index:3}
[data-surface=glass] .bar::before{content:"";position:absolute;inset:0 0 -14px;z-index:-1;pointer-events:none;background:linear-gradient(var(--bg) 12%,transparent);opacity:.82}
[data-surface=glass] .composer{position:relative;z-index:2}
[data-surface=glass] .composer::before{content:"";position:absolute;inset:44px 0 0;z-index:-1;pointer-events:none;background:linear-gradient(transparent,var(--bg) 62%);opacity:.9}
[data-surface=glass] .thread{margin:-56px 0 -92px;padding-top:68px;padding-bottom:122px}
[data-surface=glass] .studio{margin-top:-56px;padding-top:64px}
@media (min-width:1081px){[data-surface=glass] .st-settings{top:64px;max-height:calc(100dvh - 84px)}}

/* The sidebar becomes a floating sheet, and the backdrop continues behind it. */
@media (min-width:901px){
 [data-surface=glass] .side{position:relative;z-index:4;margin:8px 0 8px 8px;border-radius:26px}
 [data-surface=glass] .orbs{left:-284px;transition:left .3s var(--ease)}
 [data-surface=glass] .main::before{left:-284px;transition:left .3s var(--ease)}
 [data-surface=glass] .side-off .orbs{left:0}
 [data-surface=glass] .side-off .main::before{left:0}
}
@media (max-width:900px){
 [data-surface=glass] .side{inset:8px auto 8px 8px;border-radius:26px;transform:translateX(-112%);padding-top:14px}
 [data-surface=glass] .drawer .side{transform:none;box-shadow:var(--g-rim),var(--g-drop-lg)}
}
@media (prefers-reduced-transparency:reduce){[data-surface=glass] :is(.composer-box,.quota,.model-btn,.bar .icon-btn,.st-settings,.track,.menu,.quota-pop,dialog,.side,.toast){background:var(--g-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* guest trial */
[data-guest] #attach,[data-guest] .side-search{display:none}
.hello-note{max-width:520px;margin:10px auto 0;color:var(--mut);font-size:14.5px;line-height:1.5;text-align:center}
.sup-pass.quiet{align-self:flex-start;font-size:13px;color:var(--mut);margin-top:-4px}
.sup-pass.quiet:hover{color:var(--tx)}
.sup-pass:disabled{opacity:.6;cursor:progress}
.sup-pass.quiet{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit}
/* native dropdown lists: the popup is drawn by the system, so give it the theme's own colours */
select{color:var(--tx);color-scheme:dark}
:root[data-theme=light] select{color-scheme:light}
select option,select optgroup{background:#1b1b1e;color:#f3f0ea}
:root[data-theme=light] select :is(option,optgroup){background:#fff;color:#1b1a17}
.sup-ticket-wrap{position:relative;display:grid}
.sup-ticket-wrap .sup-ticket{padding-right:46px}
.sup-del{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--dim);opacity:.55;transition:opacity .2s,background .2s,color .2s}
.sup-del svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sup-ticket-wrap:hover .sup-del,.sup-del:focus-visible{opacity:1}
.sup-del:hover{background:var(--hover);color:#ff9d8f}
.sup-clear{justify-self:center;margin-top:6px;font-size:13.5px;color:var(--mut)}
.sup-event{align-self:center;text-align:center;font-size:12.5px;color:var(--mut);padding:5px 12px;border-radius:999px;background:var(--hover);margin:4px auto}

/* 394: formulas and the rest of the notation models use */
.math .katex{font-size:1.1em;color:inherit}
.math.block{display:block;overflow-x:auto;overflow-y:hidden;padding:4px 0;text-align:center;scrollbar-width:none}
.math.block .katex-display{margin:0}
.math.wait,.math.bad{font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--mut)}
.math.block.wait,.math.block.bad{text-align:left;white-space:pre-wrap}
.callout{padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--hover)}
.callout>*+*{margin-top:8px}
.callout-title{display:block;font-size:13px;font-weight:500;color:var(--mut)}
.callout:is(.warning,.caution,.important) .callout-title{color:var(--err)}
.callout:is(.warning,.caution,.important){border-color:color-mix(in srgb,var(--err) 38%,transparent)}
.msg-body mark{padding:0 .22em;border-radius:4px;background:color-mix(in srgb,var(--acc) 28%,transparent);color:inherit}
.msg-body kbd{padding:1px 6px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.msg-body sub,.msg-body sup{font-size:.72em;line-height:0}
.msg-body li.task{list-style:none;margin-left:-1.35em}
.msg-body li.task input{margin:0 .35em 0 0;accent-color:var(--acc);vertical-align:-1px}
.table :is(th,td).a-center{text-align:center}
.table :is(th,td).a-right{text-align:right}
.code-tools{display:flex;align-items:center;gap:2px}
.code-run{display:inline-flex;align-items:center;gap:6px}
.code-run svg{width:11px;height:11px;fill:currentColor;stroke:none}

/* 395: "a new version of the site is out". A small glass card with a gold thread running round its edge. */
@property --live-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.live-pill{--gold-a:#f6e6b8;--gold-b:#dcb565;--gold-c:#b98a3c;position:fixed;top:14px;left:50%;translate:-50% 0;z-index:45;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:9px 9px 9px 11px;border-radius:18px;background:color-mix(in srgb,var(--card) 84%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);box-shadow:0 22px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);animation:live-in .6s var(--ease) both}
.live-pill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--live-a),var(--line2) 0 62%,var(--gold-b) 78%,var(--gold-a) 84%,var(--gold-b) 90%,var(--line2) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:live-turn 5s linear infinite;pointer-events:none}
.live-mark{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:var(--gold-a);background:radial-gradient(120% 120% at 30% 20%,rgba(246,230,184,.2),rgba(220,181,101,.07) 60%,transparent);box-shadow:inset 0 0 0 1px rgba(220,181,101,.26)}
.live-mark svg{width:18px;height:18px;animation:live-spin 1.1s .25s var(--ease) both}
.live-pill p{display:grid;gap:1px;min-width:0;margin-right:6px;line-height:1.3}
.live-pill p b{font-size:13.5px;font-weight:600;color:var(--tx);white-space:nowrap}
.live-pill p span{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-go{position:relative;flex:none;height:36px;padding:0 17px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,var(--gold-a),var(--gold-b) 52%,var(--gold-c));color:#1b1408;font-size:13.5px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(90,58,18,.35),0 6px 20px rgba(214,170,84,.22);transition:transform .25s var(--ease),box-shadow .25s}
.live-go::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);translate:-110% 0;transition:translate .7s var(--ease)}
.live-go:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(90,58,18,.35),0 10px 28px rgba(214,170,84,.34)}
.live-go:hover::after{translate:110% 0}
.live-go:active{transform:translateY(0) scale(.98)}
.live-skip{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:var(--dim);transition:color .2s,background .2s}
.live-skip svg{width:15px;height:15px}
.live-skip:hover{color:var(--tx);background:var(--hover)}
:root[data-theme=light] .live-mark{color:#8a5f1c;background:radial-gradient(120% 120% at 30% 20%,rgba(220,181,101,.34),rgba(220,181,101,.1) 60%,transparent)}
@keyframes live-in{from{opacity:0;translate:-50% -16px;scale:.96;filter:blur(8px)}}
@keyframes live-turn{to{--live-a:360deg}}
@keyframes live-spin{from{rotate:-200deg;opacity:0}}
/* beside the sidebar the card sits over the middle of the page, not of the window */
@media (min-width:901px){.live-pill{left:calc(50% + 142px)}.side-off .live-pill{left:50%}}
@media (max-width:560px){.live-pill{left:12px;right:12px;translate:none;gap:10px}.live-pill p{flex:1;margin-right:0}.live-pill p b{white-space:normal;font-size:13px;line-height:1.25}.live-pill p span{display:none}.live-go{padding:0 14px}@keyframes live-in{from{opacity:0;translate:0 -16px;scale:.96;filter:blur(8px)}}}
@media (prefers-reduced-motion:reduce){.live-pill,.live-pill::before,.live-mark svg{animation:none}}

/* Insider invitation */
.invite{width:min(440px,calc(100vw - 24px));overflow:hidden}
.invite::before{content:"";display:block;height:3px;background:linear-gradient(90deg,transparent,var(--acc) 30%,var(--acc) 70%,transparent);opacity:.75}
.invite-box{padding:26px 26px 20px;display:grid;gap:12px}
.invite-eyebrow{font-size:11.5px!important;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)!important}
.invite h2{font-size:24px}
.invite-facts{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:4px 0 2px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);font-size:14px}
.invite-facts dt{color:var(--mut)}
.invite-facts dd{margin:0;text-align:right;color:var(--tx)}
.invite .confirm-row{margin-top:6px}
.invite .confirm-row .btn{flex:1}
.invite-no{justify-self:center;margin-top:2px;padding:4px 8px;font-size:13px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.invite-no:hover{color:var(--mut)}
.notice-go{justify-self:start;margin-top:2px;font-size:13.5px;color:var(--tx);text-decoration:underline;text-underline-offset:3px}