/* november — calm monochrome. One accent: the ink itself. */
:root{
  --bg:#f4f4f2;--panel:#ffffff;--side:#ebebe8;--soft:#e6e6e2;--line:rgba(17,17,19,.10);--ink:#111113;--ink2:#3b3b40;--muted:#77777d;--inv:#111113;--inv-ink:#ffffff;
  --code:#f0f0ed;--danger:#b4372b;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.35,.5,1);
  --sans:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e0e10;--panel:#17171a;--side:#121214;--soft:#222226;--line:rgba(255,255,255,.09);--ink:#f2f2f0;--ink2:#cfcfcb;--muted:#8d8d93;--inv:#f2f2f0;--inv-ink:#111113;--code:#1d1d21;--danger:#ff8a7a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e0e10;--panel:#17171a;--side:#121214;--soft:#222226;--line:rgba(255,255,255,.09);--ink:#f2f2f0;--ink2:#cfcfcb;--muted:#8d8d93;--inv:#f2f2f0;--inv-ink:#111113;--code:#1d1d21;--danger:#ff8a7a;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
button,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}

.app{height:100dvh;display:grid;grid-template-columns:272px minmax(0,1fr)}
/* Sidebar */
.side{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;padding:14px 10px calc(12px + env(safe-area-inset-bottom))}
.side-top{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-decoration:none;font-size:16px}
.mark{width:26px;height:26px;stroke:none}.mark circle[fill="none"]{stroke:currentColor}
.new-chat{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-weight:600;transition:transform .15s var(--ease),background-color .15s}
.new-chat:hover{background:var(--soft)}.new-chat:active{transform:scale(.98)}
.chats{flex:1;overflow-y:auto;margin:14px -2px 8px;padding:0 2px;display:flex;flex-direction:column;gap:2px}
.chat-item{display:flex;align-items:center;gap:6px;border-radius:10px;padding:0 4px 0 12px;min-height:38px;color:var(--ink2);transition:background-color .15s}
.chat-item:hover{background:var(--soft)}
.chat-item[aria-current="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.chat-item .open{flex:1;min-width:0;border:0;background:none;text-align:left;padding:8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.chat-item .del{border:0;background:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);opacity:0;transition:opacity .15s}
.chat-item:hover .del,.chat-item[aria-current="true"] .del{opacity:1}.chat-item .del:hover{color:var(--danger);background:var(--soft)}
.chat-item .del svg{width:16px;height:16px}
.chats-label{font-size:12px;color:var(--muted);padding:12px 12px 4px}
.side-bottom{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.side-link{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 12px;border-radius:10px;color:var(--ink2);text-align:left}
.side-link:hover{background:var(--soft)}
.side-note{font-size:12px;color:var(--muted);padding:0 12px}

/* Main */
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{height:56px;display:flex;align-items:center;gap:8px;padding:0 16px;flex:none}
.title{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2);font-size:14.5px}
.icon-btn{width:40px;height:40px;border:0;border-radius:12px;background:transparent;display:grid;place-items:center;color:var(--ink)}
.icon-btn:hover{background:var(--soft)}
.only-phone{display:none}
.thread{position:relative;flex:1;overflow-y:auto;scroll-behavior:smooth;overscroll-behavior:contain}
.messages{max-width:780px;margin:0 auto;padding:8px 24px 24px;display:flex;flex-direction:column;gap:22px}
.empty{max-width:720px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}
.empty[hidden]{display:none}
.mark.big{width:56px;height:56px;color:var(--ink);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.06);opacity:.8}}
.empty h1{margin:0;font-size:30px;font-weight:600;letter-spacing:-.02em}

/* Messages */
.msg{display:flex;flex-direction:column;gap:6px;animation:rise .28s var(--ease) both}
.msg.user{align-items:flex-end}
.msg.user .body{background:var(--soft);padding:10px 16px;border-radius:20px 20px 6px 20px;max-width:85%;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.bot .body{overflow-wrap:anywhere;min-width:0}
.body p{margin:0 0 .75em}.body p:last-child{margin-bottom:0}
.body h3,.body h4{margin:1.1em 0 .4em;font-size:1.05em;font-weight:700}
.body ul,.body ol{margin:.2em 0 .8em;padding-left:1.4em}.body li{margin:.25em 0}
.body a{color:inherit;text-underline-offset:3px}
.body code{font-family:var(--mono);font-size:.88em;background:var(--code);padding:.12em .38em;border-radius:6px}
.body pre{position:relative;background:var(--code);border:1px solid var(--line);border-radius:14px;padding:14px 16px;overflow-x:auto;margin:.6em 0 1em}
.body pre code{background:none;padding:0;font-size:13.5px;line-height:1.55}
.copy-code{position:absolute;top:8px;right:8px;border:1px solid var(--line);background:var(--panel);border-radius:8px;font-size:12px;padding:3px 9px;color:var(--muted)}
.body blockquote{margin:.6em 0;padding-left:14px;border-left:3px solid var(--line);color:var(--ink2)}
.body table{border-collapse:collapse;margin:.6em 0;display:block;overflow-x:auto}.body th,.body td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.think{border:1px solid var(--line);border-radius:14px;padding:0 14px;color:var(--muted);font-size:14px}
.think summary{cursor:pointer;padding:10px 0;list-style:none;display:flex;align-items:center;gap:8px}
.think summary::-webkit-details-marker{display:none}
.think[open] summary{border-bottom:1px solid var(--line)}
.think .think-text{white-space:pre-wrap;padding:10px 0;max-height:320px;overflow:auto}
.tools{display:flex;gap:2px;opacity:0;transition:opacity .2s}
.msg:hover .tools,.msg:focus-within .tools,.msg.last .tools{opacity:1}
.tools button{border:0;background:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.tools button:hover{background:var(--soft);color:var(--ink)}
.tools svg{width:17px;height:17px}
.tools .via{font-size:12px;color:var(--muted);align-self:center;margin-left:6px}
.cursor::after{content:'';display:inline-block;width:8px;height:1.05em;margin-left:2px;vertical-align:-2px;border-radius:2px;background:var(--ink);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.waiting{display:flex;gap:5px;padding:8px 0}.waiting i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dot 1.2s infinite}
.waiting i:nth-child(2){animation-delay:.15s}.waiting i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.error{color:var(--danger);font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.error button{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:4px 12px;color:var(--ink)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Composer */
.composer{flex:none;padding:0 24px calc(10px + env(safe-area-inset-bottom))}
.box{max-width:780px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:10px 10px 10px 18px;box-shadow:0 10px 30px -18px rgba(0,0,0,.25);transition:border-color .2s,box-shadow .2s}
.box:focus-within{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.box textarea{display:block;width:100%;border:0;outline:none;background:transparent;resize:none;max-height:220px;min-height:28px;padding:6px 0;font-size:16px;line-height:1.45}
.box textarea::placeholder{color:var(--muted)}
.box textarea{scrollbar-width:none}.box textarea::-webkit-scrollbar{display:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.modes{display:flex;gap:2px;background:var(--soft);border-radius:12px;padding:3px}
.modes button{border:0;background:none;border-radius:9px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--muted);transition:background-color .2s,color .2s}
.modes button[aria-checked="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.send{width:40px;height:40px;border-radius:50%;border:0;background:var(--inv);color:var(--inv-ink);display:grid;place-items:center;transition:transform .2s var(--spring),opacity .2s}
.send:disabled{opacity:.35;cursor:default}.send:not(:disabled):active{transform:scale(.9)}
.send.stop svg{display:none}.send.stop::after{content:'';width:12px;height:12px;border-radius:3px;background:currentColor}
.hint{max-width:780px;margin:8px auto 0;text-align:center;font-size:12px;color:var(--muted)}

/* Phone */
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:20;transform:translateX(-100%);transition:transform .3s var(--ease);padding-top:calc(14px + env(safe-area-inset-top))}
  .app.side-open .side{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.25)}
  .scrim{position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.3);animation:fade .25s both}
  @keyframes fade{from{opacity:0}}
  .only-phone{display:grid}
  .top{padding:env(safe-area-inset-top) 8px 0;height:calc(52px + env(safe-area-inset-top))}
  .title{text-align:center}
  .messages{padding:4px 16px 16px;gap:18px}
  .empty h1{font-size:25px}
  .composer{padding:0 10px calc(8px + env(safe-area-inset-bottom))}
  .box{border-radius:22px;padding:8px 8px 8px 14px}
  .tools{opacity:1}
  .chat-item .del{opacity:1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.thread{scroll-behavior:auto}}
@media (max-width:400px){.modes{overflow-x:auto;scrollbar-width:none;max-width:calc(100% - 48px)}.modes::-webkit-scrollbar{display:none}.modes button{padding:5px 9px;font-size:12.5px;white-space:nowrap}}
/* Inside Telegram: its own header and safe areas; the theme follows Telegram, so our toggle is hidden */
.in-tg #theme{display:none}
.in-tg .top{padding-top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));height:calc(52px + var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px))}
.in-tg .composer{padding-bottom:calc(8px + var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px))}
.in-tg .side{padding-top:calc(14px + var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px))}
.in-tg .hint{display:none}

/* ---------- attachments ---------- */
.tray{display:flex;gap:8px;flex-wrap:wrap;padding:2px 0 8px}
.atts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:85%}
.att{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:14px;animation:rise .2s var(--ease) both}
.att.image{width:64px;height:64px;padding:0;overflow:hidden}
.atts .att.image{width:140px;height:140px;border-radius:16px}
.att.image img{width:100%;height:100%;object-fit:cover;display:block}
.att.file{padding:8px 12px 8px 10px;max-width:240px;min-height:44px}
.att.file svg{width:20px;height:20px;color:var(--muted)}
.att-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.att.file small{font-size:12px;color:var(--muted);white-space:nowrap}
.att-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:0;background:var(--inv);color:var(--inv-ink);display:grid;place-items:center;padding:0}
.att-x svg{width:12px;height:12px;stroke-width:2.6}
.box.drop{border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 10%,transparent)}
.attach-error{font-size:13px;color:var(--danger);padding:6px 2px 0}

/* ---------- composer tools: paper clip and «Размышление» ---------- */
.left{display:flex;align-items:center;gap:6px;min-width:0}
.tool{height:36px;min-width:36px;border:1px solid var(--line);background:transparent;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 9px;color:var(--ink2);transition:background-color .15s,border-color .15s,color .15s}
.tool:hover{background:var(--soft);color:var(--ink)}
.tool svg{width:18px;height:18px}
.reason{position:relative}
.reason-btn span{font-size:13.5px;font-weight:600}
.reason-btn b{font-size:12px;font-weight:600;color:var(--muted);background:var(--soft);border-radius:8px;padding:2px 7px}
.reason-btn.on{border-color:var(--ink);color:var(--ink)}
.reason-btn.on b{background:var(--inv);color:var(--inv-ink)}
.reason-menu{position:absolute;left:0;bottom:calc(100% + 10px);z-index:30;width:min(320px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:6px;box-shadow:0 18px 50px -12px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:2px;animation:rise .18s var(--ease) both}
.reason-menu button{border:0;background:none;text-align:left;border-radius:12px;padding:10px 36px 10px 12px;position:relative;display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.reason-menu button:hover,.reason-menu button:focus-visible{background:var(--soft);outline:none}
.reason-menu b{font-size:14.5px;font-weight:600}
.reason-menu span{font-size:12.5px;color:var(--muted);line-height:1.35}
.reason-menu button[aria-checked="true"]::after{content:'';position:absolute;right:14px;top:50%;width:14px;height:8px;margin-top:-6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
@media (max-width:340px){.reason-btn span{display:none}}
.reason-menu[hidden],.tray[hidden],.attach-error[hidden]{display:none}
@media (max-width:600px){.box{position:relative}.reason{position:static}.reason-menu{left:0;right:0;width:auto;bottom:calc(100% + 8px)}}

/* ---------- ChatGPT-style compact tools: «+» and a pill with the current mode ---------- */
.tool{border:0;background:transparent;height:34px;border-radius:999px;color:var(--ink2)}
.tool.round{width:34px;min-width:34px;padding:0;border:1px solid var(--line)}
.tool.round svg{width:18px;height:18px;stroke-width:2}
.reason-btn{gap:5px;padding:0 10px 0 9px;border:1px solid var(--line)}
.reason-btn svg{width:16px;height:16px}
.reason-btn b{background:none;padding:0;color:inherit;font-size:13.5px;font-weight:600}
.reason-btn .chev{width:14px;height:14px;opacity:.6;transition:transform .2s var(--ease)}
.reason-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.reason-btn.on{border-color:transparent;background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink)}
.reason-btn.on b{background:none;color:inherit}
.reason-menu{width:248px;padding:6px;border-radius:16px;gap:0}
.reason-head{font-size:12px;color:var(--muted);padding:6px 10px 4px}
.reason-menu button{flex-direction:row;align-items:center;gap:10px;padding:9px 34px 9px 10px;border-radius:10px}
.reason-menu button svg{width:17px;height:17px;flex:none;color:var(--ink2)}
.reason-menu button b{font-size:14px;font-weight:500}
.reason-menu button span{display:none}
.reason-menu button[aria-checked="true"]::after{right:12px;width:12px;height:7px}
@media (max-width:600px){.reason-menu{right:auto;width:248px}}
.reason-menu{width:270px}
.reason-menu button{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:1px;align-items:center}
.reason-menu button svg{grid-row:span 2}
.reason-menu button span{display:block;grid-column:2;font-size:12px;line-height:1.3}
@media (max-width:600px){.reason-menu{width:270px}}

/* ===================== Brand: november ===================== */
/* Deep night with one violet «iris» colour that glows where attention belongs: the eye, focus, the send button.
   (Token names say «amber» for history; the colour is violet.) */
:root{--amber:#6b4fd6;--on-amber:#fff;--amber-soft:rgba(107,79,214,.10);--glow:rgba(107,79,214,.20);--user:#ece9e2;--card:#ffffff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#09090c;--panel:#131318;--side:#0d0d11;--soft:#1c1c23;--line:rgba(255,255,255,.075);--ink:#f3f1ec;--ink2:#cbc8c0;--muted:#86858f;--code:#101015;
  --amber:#b19cff;--on-amber:#140f22;--amber-soft:rgba(177,156,255,.11);--glow:rgba(150,118,255,.30);--user:#1d1c22;--card:#121217;--inv:#f3f1ec;--inv-ink:#0b0b0e}}
:root[data-theme="dark"]{--bg:#09090c;--panel:#131318;--side:#0d0d11;--soft:#1c1c23;--line:rgba(255,255,255,.075);--ink:#f3f1ec;--ink2:#cbc8c0;--muted:#86858f;--code:#101015;
  --amber:#b19cff;--on-amber:#140f22;--amber-soft:rgba(177,156,255,.11);--glow:rgba(150,118,255,.30);--user:#1d1c22;--card:#121217;--inv:#f3f1ec;--inv-ink:#0b0b0e}
.main{position:relative;isolation:isolate;overflow:clip}
/* Aurora: three soft lights behind everything. Each one drifts, turns and stretches on its own slow cycle, so where
   they meet they flow into each other and change shape. Only transform moves (smooth on phones); the blur is fixed. */
.aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:1;margin:calc(var(--w) / -2) 0 0 calc(var(--w) / -2);border-radius:50%;
  background:radial-gradient(closest-side,var(--c) 0%,color-mix(in srgb,var(--c) 70%,transparent) 25%,color-mix(in srgb,var(--c) 38%,transparent) 50%,color-mix(in srgb,var(--c) 12%,transparent) 75%,transparent 100%);
  filter:blur(36px);will-change:transform;animation:var(--a) ease-in-out infinite alternate;opacity:var(--o)}
.aurora i:nth-child(1){--w:min(900px,130vw);--c:var(--glow);--o:.9;--a:aur-a 34s}
.aurora i:nth-child(2){--w:min(760px,115vw);--c:color-mix(in srgb,var(--glow) 70%,#3a6bff 30%);--o:.55;--a:aur-b 41s}
.aurora i:nth-child(3){--w:min(640px,100vw);--c:color-mix(in srgb,var(--glow) 65%,#ff5fc8 35%);--o:.4;--a:aur-c 47s}
@keyframes aur-a{0%{transform:translate(-10%,-58%) rotate(0deg) scale(1.15,.8)}25%{transform:translate(18%,-40%) rotate(40deg) scale(.85,1.2)}50%{transform:translate(-22%,-20%) rotate(95deg) scale(1.3,.75)}75%{transform:translate(6%,-52%) rotate(150deg) scale(.9,1.1)}100%{transform:translate(12%,-30%) rotate(200deg) scale(1.2,.9)}}
@keyframes aur-b{0%{transform:translate(32%,18%) rotate(0deg) scale(.8,1.25)}30%{transform:translate(-24%,-26%) rotate(-50deg) scale(1.3,.8)}60%{transform:translate(8%,30%) rotate(-110deg) scale(.9,1.15)}100%{transform:translate(-30%,4%) rotate(-170deg) scale(1.15,.85)}}
@keyframes aur-c{0%{transform:translate(-34%,26%) rotate(0deg) scale(1.2,.85)}35%{transform:translate(26%,6%) rotate(70deg) scale(.8,1.3)}70%{transform:translate(-6%,-34%) rotate(140deg) scale(1.25,.9)}100%{transform:translate(20%,28%) rotate(210deg) scale(.95,1.1)}}
:focus-visible{outline-color:var(--amber)}

/* The eye: two rings, an iris that slowly turns, a pupil that breathes */
.empty{gap:14px}
.eye{position:relative;width:96px;height:96px;margin-bottom:8px}
.eye span{position:absolute;inset:0;border-radius:50%}
.eye .halo{inset:-40%;background:radial-gradient(closest-side,var(--glow),transparent 70%);animation:halo 5s ease-in-out infinite}
.eye .ring{border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.eye .r2{inset:16%;border-color:color-mix(in srgb,var(--ink) 34%,transparent)}
.eye .iris{inset:28%;background:conic-gradient(from 0deg,var(--amber),color-mix(in srgb,var(--amber) 35%,transparent),var(--amber),color-mix(in srgb,var(--amber) 55%,transparent),var(--amber));animation:iris 14s linear infinite;
  -webkit-mask:radial-gradient(circle,transparent 38%,#000 40%);mask:radial-gradient(circle,transparent 38%,#000 40%)}
.eye .pupil{inset:41%;background:var(--ink);box-shadow:0 0 18px var(--glow);animation:pupil 4s ease-in-out infinite}
@keyframes iris{to{transform:rotate(360deg)}}
@keyframes pupil{50%{transform:scale(.72)}}
@keyframes halo{50%{opacity:.55;transform:scale(1.08)}}
.hello{margin:0;font-size:15px;color:var(--amber);font-weight:600;letter-spacing:.01em}
.empty h1{font-size:34px;letter-spacing:-.03em;font-weight:600}
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .2s,transform .2s var(--ease),background-color .2s}

/* Messages: the answer reads like a page, the question sits in a soft card */
.messages{gap:26px;padding-top:20px}
.msg.user .body{background:var(--user);border:1px solid var(--line);border-radius:22px 22px 6px 22px;padding:11px 16px}
.msg.bot{gap:8px}
.who{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink2)}
.who b{font-weight:600}
.who-mark{width:22px;height:22px;border-radius:50%;flex:none;background:radial-gradient(circle,var(--ink) 0 18%,transparent 20%),conic-gradient(var(--amber),color-mix(in srgb,var(--amber) 40%,transparent),var(--amber));
  -webkit-mask:radial-gradient(circle,#000 0 20%,transparent 21% 34%,#000 36%);mask:radial-gradient(circle,#000 0 20%,transparent 21% 34%,#000 36%)}
.msg.bot.last .who-mark{animation:iris 6s linear infinite}
.msg.bot .body{font-size:15.5px;line-height:1.7;padding-left:31px}
.msg.bot .tools,.msg.bot .think,.msg.bot .error{margin-left:31px}
.body h3,.body h4{letter-spacing:-.01em}
.body strong{font-weight:650}
.body code{background:var(--amber-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--amber) 18%,transparent)}
.body blockquote{border-left-color:var(--amber)}
.body ul li::marker,.body ol li::marker{color:var(--amber)}
.body a{text-decoration-color:color-mix(in srgb,var(--amber) 70%,transparent)}
.code{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:.7em 0 1em;background:var(--code)}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:7px 8px 7px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);font-family:var(--mono)}
.code .copy-code{position:static;border:0;background:transparent;font-family:var(--sans);font-size:12px;color:var(--muted);padding:4px 8px;border-radius:8px}
.code .copy-code:hover{background:var(--soft);color:var(--ink)}
.code pre{margin:0;border:0;border-radius:0;background:transparent;padding:14px 16px}
.code pre code{border:0;background:none}
.body table{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.body th{background:var(--soft);font-weight:600}.body th,.body td{border:0;border-bottom:1px solid var(--line);padding:8px 12px}
.body tr:last-child td{border-bottom:0}.body td+td,.body th+th{border-left:1px solid var(--line)}
.think{border-color:color-mix(in srgb,var(--amber) 25%,transparent);background:var(--amber-soft)}
.think summary svg{color:var(--amber)}
.cursor::after{background:var(--amber);box-shadow:0 0 10px var(--glow)}
.waiting i{background:var(--amber)}

/* Composer: glows softly when you type */
.box{background:color-mix(in srgb,var(--panel) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.box:focus-within{border-color:color-mix(in srgb,var(--amber) 55%,transparent);box-shadow:0 0 0 4px var(--amber-soft),0 16px 40px -16px var(--glow)}
.send{background:var(--amber);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .send:not(:disabled){color:#140b2b}}
:root[data-theme="dark"] .send:not(:disabled){color:#140b2b}
.send:disabled{background:var(--soft);color:var(--muted);opacity:1}
.reason-btn.on{background:var(--amber-soft);color:var(--ink);border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
.reason-btn.on svg:first-child{color:var(--amber)}
.reason-menu button[aria-checked="true"] svg{color:var(--amber)}
.chat-item[aria-current="true"]{box-shadow:inset 2px 0 0 var(--amber)}
.mark circle[fill="currentColor"]{fill:var(--amber)}
@media (max-width:820px){.msg.bot .body{padding-left:0}.msg.bot .tools,.msg.bot .think,.msg.bot .error{margin-left:0}.eye{width:84px;height:84px}.empty h1{font-size:28px}}
@media (prefers-reduced-motion:reduce){.eye *,.who-mark{animation:none!important}}
.empty{justify-content:safe center}
@media (max-width:820px){
  .empty{gap:10px;padding:16px}
  .eye{width:72px;height:72px;margin-bottom:4px}
  .hello{font-size:14px}
}

/* ---------- send animation ---------- */
.msg.user.fly{animation:fly-in .55s cubic-bezier(.22,1.2,.36,1) both;transform-origin:100% 100%}
.msg.user.fly .body{animation:fly-glow .9s ease-out both}
@keyframes fly-in{0%{opacity:0;transform:translate(var(--fly-x,0),var(--fly-y,80px)) scale(.86)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes fly-glow{0%{box-shadow:0 0 0 0 var(--glow),0 10px 30px -6px var(--glow)}100%{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}}
.send.launch svg{animation:launch .5s cubic-bezier(.3,.7,.3,1)}
@keyframes launch{0%{transform:none;opacity:1}40%{transform:translateY(-22px);opacity:0}41%{transform:translateY(16px);opacity:0}100%{transform:none;opacity:1}}
.box.pulse{animation:box-pulse .6s ease-out}
@keyframes box-pulse{0%{box-shadow:0 0 0 0 var(--glow)}100%{box-shadow:0 0 0 12px transparent}}
/* While the greeting fades it no longer takes room, so the first message flies straight to its real place. */
.empty.leave{position:absolute;inset:0;pointer-events:none;animation:empty-leave .22s ease-in both}
@keyframes empty-leave{to{opacity:0;transform:translateY(-14px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.msg.user.fly,.msg.user.fly .body,.send.launch svg,.box.pulse,.empty.leave{animation:none}}

/* ===================== Logo: «Туманность» ===================== */
/* A deep violet sphere with slow light streams turning inside; they turn faster while november is answering. */
.orb{position:relative;display:inline-block;flex:none;border-radius:50%;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 50% 55%,#7a5cf0 0%,#4a2fb8 45%,#1d1250 100%);box-shadow:0 0 calc(var(--s,40px) * .35) rgba(150,118,255,.45);width:var(--s,40px);height:var(--s,40px)}
.orb::before{content:'';position:absolute;inset:-25%;background:conic-gradient(from 0deg,transparent 0 15%,rgba(255,255,255,.55) 22%,transparent 32%,rgba(196,170,255,.6) 48%,transparent 58%,rgba(255,180,240,.45) 72%,transparent 82%);
  filter:blur(calc(var(--s,40px) * .065));animation:orb-spin 9s linear infinite}
.orb::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75),rgba(255,255,255,0) 32%);box-shadow:inset calc(var(--s,40px) * -.06) calc(var(--s,40px) * -.1) calc(var(--s,40px) * .19) rgba(10,4,40,.55)}
@keyframes orb-spin{to{transform:rotate(360deg)}}
.orb.lg{--s:104px}.orb.sm{--s:26px}.orb.xs{--s:22px}
body.thinking .orb::before{animation-duration:2.4s}
.orb-hero{position:relative;width:104px;height:104px;margin-bottom:10px;display:grid;place-items:center}
.orb-halo{position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(closest-side,rgba(150,118,255,.35),transparent 70%);animation:halo 5s ease-in-out infinite}
.brand .orb{margin-right:2px}
@media (max-width:820px){.orb.lg{--s:84px}.orb-hero{width:84px;height:84px}}
@media (prefers-reduced-motion:reduce){.orb::before,.orb-halo{animation:none!important}}

/* «Туманность» shimmers instead of turning: soft light clouds drift and the colours breathe between violet, pink and blue. */
.orb::before{inset:-10%;animation:none;filter:blur(calc(var(--s,40px) * .09));
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.38),transparent 30%),radial-gradient(circle at 72% 40%,rgba(255,170,235,.55),transparent 36%),radial-gradient(circle at 45% 78%,rgba(120,190,255,.5),transparent 38%),radial-gradient(circle at 60% 60%,rgba(196,170,255,.5),transparent 40%);
  background-size:180% 180%,170% 170%,190% 190%,160% 160%;animation:orb-drift 7s ease-in-out infinite alternate,orb-hue 9s ease-in-out infinite}
@keyframes orb-drift{0%{background-position:0% 0%,100% 0%,0% 100%,50% 50%}50%{background-position:60% 40%,30% 70%,70% 30%,20% 80%}100%{background-position:100% 100%,0% 100%,100% 0%,80% 20%}}
@keyframes orb-hue{0%,100%{filter:blur(calc(var(--s,40px) * .09)) hue-rotate(0deg) brightness(1)}50%{filter:blur(calc(var(--s,40px) * .09)) hue-rotate(-28deg) brightness(1.15)}}
body.thinking .orb::before{animation-duration:2.2s,3s}
@media (prefers-reduced-motion:reduce){.orb::before{animation:none!important}}

/* ---------- «+» menu and pictures ---------- */
.plus{position:relative}
.plus-menu[hidden]{display:none}
@media (max-width:600px){.plus{position:static}}
.draw-chip{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;padding:4px 6px 4px 10px;border-radius:999px;background:var(--amber-soft);color:var(--ink);font-size:13px;font-weight:600;animation:rise .2s var(--ease) both}
.draw-chip[hidden]{display:none}
.draw-chip svg{width:15px;height:15px;color:var(--amber)}
.draw-chip button{border:0;background:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--muted);padding:0}
.draw-chip button:hover{background:var(--soft);color:var(--ink)}.draw-chip button svg{width:13px;height:13px;color:inherit}
.box.drawing{border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.paint-wait{display:flex;align-items:center;gap:14px;width:min(360px,100%);aspect-ratio:1;justify-content:center;flex-direction:column;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(110deg,var(--soft) 30%,color-mix(in srgb,var(--amber) 14%,var(--soft)) 50%,var(--soft) 70%);background-size:300% 100%;animation:paint-shimmer 1.8s linear infinite;color:var(--muted);font-size:14px;margin-left:31px}
@keyframes paint-shimmer{to{background-position:-150% 0}}
.gen{margin:0 0 0 31px;max-width:min(520px,100%)}
.gen img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid var(--line);cursor:zoom-in;animation:gen-in .5s var(--ease) both}
@keyframes gen-in{from{opacity:0;transform:scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.tool-link{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.tool-link:hover{background:var(--soft);color:var(--ink)}.tool-link svg{width:17px;height:17px}
.viewer{position:fixed;inset:0;z-index:50;background:rgba(5,4,10,.86);display:grid;place-items:center;padding:24px;animation:fade .2s both;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.viewer img{max-width:100%;max-height:100%;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.viewer-x{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
@keyframes fade{from{opacity:0}}
@media (max-width:820px){.paint-wait,.gen{margin-left:0}}
@media (prefers-reduced-motion:reduce){.paint-wait,.gen img{animation:none}}

/* ---------- voice input ---------- */
.right{display:flex;align-items:center;gap:8px}
.mic .i-done{display:none}
.mic.on{background:var(--amber);color:#fff;border-color:transparent;box-shadow:0 0 0 0 var(--glow);animation:mic-pulse 1.6s ease-out infinite}
.mic.on .i-mic{display:none}.mic.on .i-done{display:block}
@keyframes mic-pulse{0%{box-shadow:0 0 0 0 var(--glow)}100%{box-shadow:0 0 0 12px transparent}}
.box.recording textarea,.box.recording .tray,.box.recording .draw-chip,.box.recording .left{display:none}
.box.recording .row{justify-content:flex-end}
.rec{display:flex;align-items:center;gap:10px;min-height:44px;padding:2px 0 4px;animation:rise .2s var(--ease) both}
.rec[hidden]{display:none}
.rec-x{border:0;background:var(--soft);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);flex:none}
.rec-x svg{width:15px;height:15px}
.rec-dot{width:9px;height:9px;border-radius:50%;background:#ef4444;animation:rec-blink 1s steps(2) infinite;flex:none}
@keyframes rec-blink{50%{opacity:.25}}
.rec-time{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;min-width:34px}
.rec-level{flex:1;min-width:0;display:flex;align-items:center;gap:3px;height:30px;overflow:hidden}
.rec-level i{flex:1;max-width:5px;min-width:2px;height:100%;border-radius:3px;background:var(--amber);transform:scaleY(.12);transition:transform .09s linear}
.rec-note{font-size:12.5px;color:var(--muted);white-space:nowrap}
.box.transcribing .rec-level i{animation:rec-wave 1s ease-in-out infinite}
.box.transcribing .rec-level i:nth-child(odd){animation-delay:.2s}
@keyframes rec-wave{50%{transform:scaleY(.6)}}
@media (max-width:420px){.rec-note{display:none}}
@media (prefers-reduced-motion:reduce){.mic.on,.rec-dot,.box.transcribing .rec-level i{animation:none}}

/* ---------- voice chat ---------- */
.vc{position:fixed;inset:0;z-index:60;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:calc(24px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 80% at 50% 42%,rgba(120,92,240,.16),transparent 60%),var(--bg);color:var(--ink);animation:vc-in .28s ease-out}
.vc[hidden]{display:none}
@keyframes vc-in{from{opacity:0}}
.vc-top{position:absolute;top:calc(18px + env(safe-area-inset-top));left:16px;right:16px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.vc-top span{font-weight:600;letter-spacing:.01em}.vc-top small{color:var(--muted);font-size:13px}
.vc-orb{--lvl:0;position:relative;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.vc-orb .orb{clip-path:circle(50%);transform:scale(calc(1 + var(--lvl) * .16));transition:transform .08s linear}
.vc-halo{position:absolute;inset:-30%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(150,118,255,.42),transparent 70%);opacity:calc(.35 + var(--lvl) * .9);transform:scale(calc(.9 + var(--lvl) * .35))}
.vc[data-state="think"] .vc-orb .orb{animation:vc-think 1.4s ease-in-out infinite}
.vc[data-state="think"] .orb::before{animation-duration:3s}
@keyframes vc-think{50%{transform:scale(.93)}}
.vc[data-state="muted"] .vc-orb .orb,.vc[data-state="error"] .vc-orb .orb{filter:grayscale(.7) brightness(.8)}
.vc-status{margin:6px 0 0;font-size:19px;font-weight:600;min-height:1.6em;text-align:center}
.vc-caption{margin:0;max-width:34em;min-height:3.2em;color:var(--muted);text-align:center;font-size:14.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vc-actions{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));display:flex;gap:28px}
.vc-btn{width:60px;height:60px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.vc-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vc-btn .i-off{display:none}.vc.muted .vc-btn .i-on{display:none}.vc.muted .vc-btn .i-off{display:block}
.vc.muted #vc-mute{background:var(--ink);color:var(--bg)}
.vc-btn.end{background:#e5484d;color:#fff;border-color:transparent}
body.vc-on{overflow:hidden}
@media (prefers-reduced-motion:reduce){.vc,.vc-orb .orb,.vc[data-state="think"] .vc-orb .orb{animation:none;transition:none}}

/* ---------- account ---------- */
.moving body{visibility:hidden}
.auth{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:16px;background:rgba(8,6,16,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .2s both}
.auth[hidden]{display:none}
.auth-card{position:relative;width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 24px 22px;border-radius:22px;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 60px -20px rgba(20,10,60,.45);text-align:center}
.auth-card form,.auth-in{display:flex;flex-direction:column;gap:10px;width:100%}
.auth-in[hidden],.auth-card form[hidden]{display:none}
.auth-card h2{margin:6px 0 0;font-size:20px}
.auth-note{margin:0 0 6px;color:var(--muted);font-size:14px}
.auth-card input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;outline:none}
.auth-card input:focus{border-color:var(--amber)}
.auth-error{margin:0;color:var(--danger,#d4483b);font-size:14px}
.auth-error[hidden]{display:none}
.auth-go{padding:12px;border:0;border-radius:12px;background:var(--amber);color:var(--on-amber);font:inherit;font-weight:600;cursor:pointer}
.auth-go:disabled{opacity:.6}
.auth-go.ghost{background:var(--soft);color:var(--ink)}
.auth-switch{border:0;background:none;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;padding:4px}
.auth-switch:hover{color:var(--ink)}
.auth-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.auth-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.auth-x:hover{background:var(--soft)}

/* ---------- settings ---------- */
.set-card{width:min(520px,100%);max-height:min(88vh,760px);overflow-y:auto;align-items:stretch;text-align:left;gap:4px;padding:24px 22px 20px;scrollbar-width:thin}
.set-card h2{margin:0 0 8px;font-size:20px}
.set-group{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid var(--line)}
.set-group[hidden]{display:none}
.set-group h3{margin:0;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.set-row>span{font-size:15px}
.set-note{margin:-2px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--soft);gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;color:var(--ink2);font:inherit;font-size:13.5px;padding:7px 12px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.set-row input,.set-row select{min-width:0;flex:1 1 180px;max-width:260px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:15px;outline:none}
.set-row input:focus,.set-row select:focus{border-color:var(--amber)}
.set-voice{display:flex;gap:8px;flex:1 1 240px;justify-content:flex-end;flex-wrap:wrap}
.set-voice select{max-width:240px}
.set-btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;padding:8px 14px;border-radius:10px;cursor:pointer}
.set-btn:hover{background:var(--soft)}
.set-btn.danger{color:var(--danger,#d4483b);border-color:color-mix(in srgb,var(--danger,#d4483b) 35%,transparent)}
@media (max-width:520px){.set-row{align-items:stretch;flex-direction:column}.set-row input,.set-row select,.set-voice select{max-width:none}.set-voice{justify-content:stretch}.seg{display:flex}.seg button{flex:1}}
.seg button[aria-pressed="true"]{background:var(--amber);color:var(--on-amber);font-weight:600;box-shadow:0 2px 8px -2px var(--glow)}
.set-row:has(.set-voice){flex-direction:column;align-items:stretch}
.set-voice{flex:none;justify-content:stretch}.set-voice select{flex:1 1 220px;max-width:none}
.announce{display:flex;align-items:center;gap:10px;margin:8px auto 0;width:min(760px,calc(100% - 32px));padding:10px 10px 10px 16px;border-radius:14px;background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);color:var(--ink);font-size:14.5px;box-sizing:border-box}
.announce.warn{background:color-mix(in srgb,#e2963c 16%,transparent);border-color:color-mix(in srgb,#e2963c 40%,transparent)}
.announce[hidden]{display:none}
.announce span{flex:1}
.announce button{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.announce button[hidden]{display:none}
.announce button:hover{background:var(--soft)}
.announce svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#auth-admin{text-decoration:none;text-align:center}
#auth-admin[hidden]{display:none}
.reason-menu [hidden],.plus-menu [hidden],#voice-chat[hidden]{display:none}

/* ---------- task modes: three compact tiles under the model modes ---------- */
.reason-menu{max-height:min(70vh,560px);overflow-y:auto;scrollbar-width:thin}
.reason-head{text-transform:none;letter-spacing:0}
.reason-menu>button{padding-top:8px;padding-bottom:8px}
.task-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:2px 4px 0}
.reason-menu .task-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px 10px;border:1px solid var(--line);border-radius:14px;text-align:center}
.reason-menu .task-grid button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.reason-menu .task-grid b{font-size:13px}
.reason-menu .task-grid button[aria-checked="true"]{border-color:var(--amber);background:var(--amber-soft)}
.reason-menu .task-grid button[aria-checked="true"] svg{color:var(--amber)}
.reason-menu .task-grid button[aria-checked="true"]::after{display:none}
.task-hint{margin:6px 10px 6px;font-size:12px;color:var(--muted);line-height:1.35;min-height:2.7em}
.reason-menu{width:min(360px,calc(100vw - 32px))}
.reason-menu>button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.reason-menu{left:0;right:0;width:auto;max-width:none}}

/* ======================= «Сумерки» =======================
   The sky at dusk behind everything (lilac → rose → peach by day, indigo → plum at night), a big orb to greet,
   Unbounded for the voice of the brand, white cards that float on soft shadows. Violet stays the accent. */
:root{--sky:linear-gradient(180deg,#dcd4ff 0%,#e8e0ff 34%,#f5e8f3 68%,#fbeee6 100%);--float:rgba(255,255,255,.74);--float-solid:#ffffff;
  --float-line:rgba(255,255,255,.9);--tw-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 48px -30px rgba(70,50,160,.5);--tw-ink:#1d1b2b;--display:'Unbounded',var(--sans)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sky:linear-gradient(180deg,#12101f 0%,#191430 40%,#22162c 75%,#26172a 100%);--float:rgba(30,26,48,.62);--float-solid:#1c1830;
  --float-line:rgba(255,255,255,.07);--tw-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 50px -30px rgba(0,0,0,.8);--tw-ink:#f1eefb}}
:root[data-theme="dark"]{--sky:linear-gradient(180deg,#12101f 0%,#191430 40%,#22162c 75%,#26172a 100%);--float:rgba(30,26,48,.62);--float-solid:#1c1830;
  --float-line:rgba(255,255,255,.07);--tw-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 50px -30px rgba(0,0,0,.8);--tw-ink:#f1eefb}

body{background:var(--sky) fixed}
.app{background:var(--sky)}
.main::before{content:'';position:absolute;z-index:-1;left:50%;top:6%;width:min(620px,90vw);aspect-ratio:1;transform:translateX(-40%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 42% 38%,rgba(255,255,255,.75),rgba(255,255,255,0) 62%);filter:blur(8px)}
:root[data-theme="dark"] .main::before{background:radial-gradient(circle at 42% 38%,rgba(150,118,255,.22),transparent 62%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .main::before{background:radial-gradient(circle at 42% 38%,rgba(150,118,255,.22),transparent 62%)}}
.aurora{opacity:.55}
.top{background:transparent}
.title{font-family:var(--display);font-weight:500;font-size:13.5px;letter-spacing:-.01em;color:var(--tw-ink)}

/* the sidebar floats as a card */
@media (min-width:821px){
  .app{grid-template-columns:288px minmax(0,1fr)}
  .side{margin:14px 0 14px 14px;border:1px solid var(--float-line);border-radius:24px;background:var(--float);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--tw-shadow)}
}
@media (max-width:820px){.side{background:var(--float-solid)}}
.brand{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em}
.new-chat{background:var(--tw-ink);color:var(--bg);border-color:transparent;box-shadow:0 10px 22px -14px rgba(30,20,80,.7)}
.new-chat:hover{background:color-mix(in srgb,var(--tw-ink) 88%,var(--amber))}
.chat-item{border-radius:12px}
.chat-item[aria-current="true"]{background:var(--float-solid);box-shadow:0 8px 18px -12px rgba(70,50,160,.45)}
.chat-item .open{display:flex;align-items:center;gap:10px}
.chat-item .open::before{content:'';width:7px;height:7px;border-radius:50%;flex:none;background:var(--dot,#8b6cff)}
.chat-item[data-mode="fast"]{--dot:#f0a640}.chat-item[data-mode="think"]{--dot:#6b4fd6}.chat-item[data-mode="council"]{--dot:#a48bff}
.chat-item[data-mode="search"]{--dot:#3bb07d}.chat-item[data-mode="code"]{--dot:#4a9df0}.chat-item[data-mode="tutor"]{--dot:#e07ab0}.chat-item[data-mode="draw"]{--dot:#ff8a65}
.chats-label{font-size:11.5px}

/* the greeting */
.orb-hero{width:120px;height:120px;margin-bottom:18px}
.orb-hero .orb.lg{--s:120px;box-shadow:0 30px 70px -18px rgba(110,80,240,.7)}
.hello{font-size:14px}
.empty h1{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.2vw,44px);line-height:1.15;letter-spacing:-.025em;color:var(--tw-ink)}

/* messages: the question is a white bubble, the answer a floating card */
.msg.user .body{background:var(--float-solid);border:1px solid var(--float-line);box-shadow:0 12px 26px -18px rgba(70,50,160,.5);color:var(--tw-ink)}
.msg.bot{background:var(--float);border:1px solid var(--float-line);border-radius:22px;padding:14px 20px 10px;box-shadow:var(--tw-shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.msg.bot .body{padding-left:0}
.msg.bot .tools,.msg.bot .think,.msg.bot .error{margin-left:0}
.who b{font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--amber);letter-spacing:-.01em}

/* the composer floats, the send button glows */
.box{background:var(--float-solid);border-color:var(--float-line);box-shadow:var(--tw-shadow)}
.box:focus-within{border-color:color-mix(in srgb,var(--amber) 45%,transparent);box-shadow:0 0 0 4px var(--amber-soft),0 24px 50px -24px var(--glow)}
.send:not(:disabled){background:linear-gradient(140deg,#7f63ff,#4e7dff);color:#fff;box-shadow:0 10px 22px -10px rgba(90,80,255,.8)}
.reason-btn.on{background:var(--amber-soft);color:var(--amber)}
.hint{color:color-mix(in srgb,var(--tw-ink) 55%,transparent)}
@media (max-width:820px){.msg.bot{padding:12px 16px 8px}.orb-hero,.orb-hero .orb.lg{--s:96px;width:96px;height:96px}}
/* code reads best dark on the light cards too */
.msg.bot .code,.msg.bot .body pre{background:#1d1b2b;border-color:transparent;color:#ece8ff}
.msg.bot .code-head{border-bottom-color:rgba(255,255,255,.08);color:#a9a3c7}
.msg.bot .code .copy-code{color:#a9a3c7}.msg.bot .code .copy-code:hover{background:rgba(255,255,255,.08);color:#fff}
.empty .lead{margin:-4px 0 0;max-width:46ch;color:color-mix(in srgb,var(--tw-ink) 62%,transparent);font-size:15px;line-height:1.55}
@media (max-width:820px){.empty .lead{font-size:14px}}
.msg.bot .code code,.msg.bot .body pre code{color:#ece8ff;background:none;border:0;padding:0}
.chat-item[data-mode="smart"]{--dot:#14a3a3}

/* a picture answer: the card hugs the image, frosted glass; drawing looks like colour taking shape, then the image develops top to bottom */
.msg.bot.pic{width:fit-content;max-width:100%;padding:10px 10px 6px;background:color-mix(in srgb,var(--float) 55%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}
.msg.bot.pic .who{padding:4px 6px 8px}
.msg.bot.pic .gen,.msg.bot.pic .paint-wait{margin:0;width:min(440px,calc(100vw - 64px));max-width:none}
.msg.bot.pic .tools{margin:0;padding:6px 2px 0}
.msg.bot.pic .error{margin:4px 6px 8px}
.gen{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:1}
.gen img{border:0;border-radius:16px;width:100%;height:100%;object-fit:cover;animation:none}
.paint-wait{position:relative;overflow:hidden;aspect-ratio:1;border:0;border-radius:16px;background:color-mix(in srgb,var(--float-solid) 50%,transparent);animation:none;display:block;padding:0}
.pw-blob{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(46px);opacity:.75;background:#9b87ff;left:-10%;top:-10%;animation:pw-drift 7s ease-in-out infinite alternate}
.pw-blob.b2{background:#ff9ec7;left:40%;top:30%;animation-duration:9s;animation-delay:-3s}
.pw-blob.b3{background:#7fd0ff;left:5%;top:55%;width:55%;animation-duration:8s;animation-delay:-5s}
@keyframes pw-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(18%,12%) scale(1.25)}100%{transform:translate(-8%,22%) scale(.9)}}
.pw-label{position:absolute;left:16px;top:14px;font-size:14px;font-weight:600;color:transparent;background:linear-gradient(90deg,color-mix(in srgb,var(--tw-ink) 45%,transparent) 30%,var(--tw-ink) 50%,color-mix(in srgb,var(--tw-ink) 45%,transparent) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:pw-text 2s linear infinite}
@keyframes pw-text{from{background-position:100% 0}to{background-position:-150% 0}}
@property --reveal{syntax:'<percentage>';inherits:false;initial-value:0%}
.gen.fresh::before{content:'';position:absolute;inset:0;background:var(--src) center/cover;filter:blur(28px) saturate(1.2);transform:scale(1.15);animation:gen-blurfade 3.2s ease both}
.gen.fresh img{position:relative;-webkit-mask-image:linear-gradient(to bottom,#000 var(--reveal),transparent calc(var(--reveal) + 18%));mask-image:linear-gradient(to bottom,#000 var(--reveal),transparent calc(var(--reveal) + 18%));animation:gen-develop 2.8s cubic-bezier(.4,0,.2,1) .2s both}
@keyframes gen-develop{from{--reveal:-18%}to{--reveal:100%}}
@keyframes gen-blurfade{0%,70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.pw-blob,.pw-label,.gen.fresh img,.gen.fresh::before{animation:none}.gen.fresh img{-webkit-mask-image:none;mask-image:none}}

/* memory: the list in Settings and a quiet note when something is remembered */
.mem-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.mem-list li{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 14px;border-radius:12px;background:var(--soft);font-size:14px;transition:opacity .25s,transform .25s}
.mem-list li span{flex:1;min-width:0}
.mem-list li button{width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
.mem-list li button:hover{background:var(--panel);color:var(--ink)}.mem-list li button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mem-list li.gone{opacity:0;transform:translateX(8px)}
.memo-toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:9px 16px;border-radius:999px;font-size:13.5px;color:var(--tw-ink,var(--ink));background:var(--float,var(--panel));border:1px solid var(--float-line,var(--line));box-shadow:var(--tw-shadow,0 10px 30px rgba(0,0,0,.2));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:memo-in .35s cubic-bezier(.2,.8,.2,1) both}
.memo-toast svg{width:16px;height:16px;fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.memo-toast span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.memo-toast.out{opacity:0;transform:translate(-50%,6px);transition:opacity .4s,transform .4s}
@keyframes memo-in{from{opacity:0;transform:translate(-50%,10px)}}

/* «eyes»: pictures of the generated site, a scanning wait, the fix button */
.eye-btn{display:inline-flex!important;align-items:center;gap:6px;width:auto!important;padding:0 10px!important;font:inherit;font-size:13px}
.eye-btn span{white-space:nowrap}
.eyes-wait{display:flex;align-items:center;gap:12px;padding:12px 0;color:var(--muted);font-size:14px}
.eyes-scan{position:relative;width:46px;height:34px;border-radius:8px;border:1.5px solid color-mix(in srgb,var(--amber) 60%,transparent);overflow:hidden;flex:none}
.eyes-scan::after{content:'';position:absolute;left:0;right:0;height:10px;background:linear-gradient(transparent,color-mix(in srgb,var(--amber) 55%,transparent));animation:eyes-scan 1.2s ease-in-out infinite alternate}
@keyframes eyes-scan{from{top:-10px}to{top:100%}}
.eyes-shots{display:grid;grid-template-columns:3fr 1fr;gap:10px;margin:4px 0 12px;align-items:start}
.eyes-shots figure{margin:0}
.eyes-shots img{display:block;width:100%;max-height:340px;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--line);cursor:zoom-in}
.eyes-shots figcaption{margin-top:4px;font-size:12px;color:var(--muted)}
.eyes-fix{align-self:flex-start;margin:6px 0 4px;padding:9px 16px;border-radius:999px;border:0;font:inherit;font-size:14px;font-weight:600;color:#fff;background:linear-gradient(140deg,#7f63ff,#4e7dff);box-shadow:0 10px 22px -10px rgba(90,80,255,.8);cursor:pointer}
@media (prefers-reduced-motion:reduce){.eyes-scan::after{animation:none}}

/* «Запустить»: the page runs in the chat; «Опубликовать» gives a link */
.run-btn.on{background:var(--amber-soft);color:var(--amber)}
.run-btn svg{fill:currentColor;stroke:none}
.preview{margin:8px 0 6px;border-radius:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--float-solid,var(--panel)) 70%,transparent);overflow:hidden;animation:pv-in .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes pv-in{from{opacity:0;transform:translateY(6px)}}
.pv-bar{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid var(--line)}
.pv-bar .seg{margin:0}.pv-bar .seg button{font-size:12.5px;padding:5px 10px}
.pv-sp{flex:1}
.pv-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.pv-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pv-pub{background:linear-gradient(140deg,#7f63ff,#4e7dff);color:#fff;border:0}
.pv-stage{--pw:100%;display:flex;justify-content:center;background:color-mix(in srgb,var(--ink) 4%,transparent);padding:0}
.preview.phone .pv-stage{padding:14px 0}
.pv-stage iframe{display:block;width:var(--pw);max-width:100%;height:min(560px,70vh);border:0;background:#fff;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.preview.phone .pv-stage iframe{border-radius:22px;box-shadow:0 0 0 8px #1d1b2b,0 20px 40px -20px rgba(0,0,0,.5)}
.pv-stage:fullscreen{background:#000;align-items:center}.pv-stage:fullscreen iframe{height:100%}
.preview.max .pv-stage{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.85);align-items:center}.preview.max .pv-stage iframe{height:100%}
.pv-link{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;font-size:13.5px;border-top:1px solid var(--line)}
.pv-link a{color:var(--amber);font-weight:600;word-break:break-all}
.pv-link button{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:12.5px;padding:4px 10px;border-radius:8px;cursor:pointer}
.pv-link.bad{color:var(--danger,#d4483b)}
@media (max-width:820px){.pv-btn span{display:none}.pv-pub span{display:inline}}

/* Python in the browser */
.code-head .run-code{margin-left:auto}
.run-code{border:0;background:rgba(127,99,255,.22);color:#d9d2ff;font:inherit;font-size:12px;font-weight:600;padding:3px 10px;border-radius:7px;cursor:pointer;margin-right:6px}
.run-code:hover{background:rgba(127,99,255,.36)}.run-code[data-running]{background:rgba(255,120,120,.22);color:#ffd0d0}
.py-out{margin:-4px 0 12px;border-radius:0 0 12px 12px;border:1px solid var(--line);border-top:0;background:color-mix(in srgb,var(--float-solid,var(--panel)) 75%,transparent);padding:10px 12px;font-size:13px}
.py-status{color:var(--muted);font-size:12px;margin-bottom:4px}
.py-text{margin:0;white-space:pre-wrap;word-break:break-word;font:12.5px/1.5 var(--mono,monospace);max-height:320px;overflow:auto}
.py-text:empty{display:none}.py-text .err{color:var(--danger,#d4483b)}.py-text .res{color:var(--amber)}
.py-figs{display:flex;flex-wrap:wrap;gap:8px}.py-figs:empty{display:none}
.py-figs img{max-width:100%;border-radius:10px;background:#fff;cursor:zoom-in;margin-top:6px}

/* presentations: 16:9 slides that scale with their box (container units), the theme comes from the model */
.deck-wait{display:flex;align-items:center;gap:12px;padding:14px 0;color:var(--muted)}
.deck{margin:8px 0 6px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--d-bg);outline:none}
.deck-view{position:relative;aspect-ratio:16/9;cursor:pointer;overflow:hidden;container-type:inline-size}
.slide{position:absolute;inset:0;box-sizing:border-box;padding:6cqw 7cqw 5cqw;background:var(--d-bg);color:var(--d-ink);font-family:var(--d-font);display:flex;flex-direction:column;opacity:0;transform:translateX(3%);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.s-deco{position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 60% at 100% 0%,color-mix(in srgb,var(--d-accent) 38%,transparent),transparent 70%),radial-gradient(40% 50% at 0% 100%,color-mix(in srgb,var(--d-accent2) 30%,transparent),transparent 70%)}
.slide>*:not(.s-deco){position:relative}
.slide h1{font:800 6.4cqw/1.05 var(--d-head);letter-spacing:-.02em;margin:0}
.slide h2{font:800 4cqw/1.1 var(--d-head);letter-spacing:-.015em;margin:0 0 3cqw}
.slide h3{font:600 2.2cqw/1.2 var(--d-head);margin:0 0 1.4cqw;color:var(--d-accent)}
.slide ul{margin:0;padding:0;list-style:none;display:grid;gap:1.6cqw}
.slide li{font-size:2.15cqw;line-height:1.4;padding-left:3cqw;position:relative}
.slide li::before{content:'';position:absolute;left:0;top:.62em;width:1.2cqw;height:1.2cqw;border-radius:50%;background:linear-gradient(135deg,var(--d-accent),var(--d-accent2))}
.s-mid{margin:auto 0;display:flex;flex-direction:column;gap:1.6cqw}
.s-kicker{margin:0;font-size:1.8cqw;font-weight:600;color:var(--d-accent)}
.s-sub{margin:0;font-size:2.3cqw;color:var(--d-muted);max-width:70%}
.s-num{margin:0;font:800 10cqw/1 var(--d-head);background:linear-gradient(135deg,var(--d-accent),var(--d-accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.s-text{margin:-1.4cqw 0 2.4cqw;font-size:2.2cqw;line-height:1.45;color:var(--d-muted);max-width:85%}
.s-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2.4cqw;margin-top:auto;margin-bottom:auto}
.s-stats div{padding:2.6cqw;border-radius:2cqw;background:color-mix(in srgb,var(--d-ink) 7%,transparent);border:1px solid color-mix(in srgb,var(--d-ink) 12%,transparent)}
.s-stats b{display:block;font:800 5.4cqw/1 var(--d-head);background:linear-gradient(135deg,var(--d-accent),var(--d-accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.s-stats span{display:block;margin-top:1cqw;font-size:1.8cqw;color:var(--d-muted)}
.s-note{font-size:1.7cqw;color:var(--d-muted);margin:0}
.slide blockquote{margin:0;font:600 4.2cqw/1.25 var(--d-head);max-width:85%}
.s-two{display:grid;grid-template-columns:1fr 1fr;gap:4cqw}
.slide footer{margin-top:auto;display:flex;justify-content:space-between;font-size:1.4cqw;color:var(--d-muted);padding-top:2cqw}
.deck-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;background:var(--float-solid,var(--panel));border-top:1px solid var(--line)}
.deck-bar button{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:13px;height:32px;min-width:32px;padding:0 10px;border-radius:9px;cursor:pointer}
.deck-bar .pv-pub{border:0;color:#fff;background:linear-gradient(140deg,#7f63ff,#4e7dff)}
.deck-pos{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:48px;text-align:center}
.deck:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#000}.deck:fullscreen .deck-view{width:min(100vw,177.8vh);margin:auto}
.deck.max{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:center;background:#000;border-radius:0}.deck.max .deck-view{width:min(100vw,177.8vh);margin:auto}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}

/* the camera in a voice talk: the picture fills the screen behind a small orb */
.vc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;animation:vc-cam-in .4s ease forwards}
.vc-video.mirror{transform:scaleX(-1)}
@keyframes vc-cam-in{to{opacity:1}}
.vc.cam>*:not(.vc-video){position:relative;z-index:1}
.vc.cam::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(0,0,0,.45),transparent 30%,transparent 55%,rgba(0,0,0,.65));pointer-events:none}
.vc.cam .vc-orb .orb{--s:min(110px,26vw)!important;width:min(110px,26vw);height:min(110px,26vw)}
.vc.cam .vc-orb{margin-top:auto}
.vc.cam .vc-status,.vc.cam .vc-caption,.vc.cam .vc-top,.vc.cam .vc-top small{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
#vc-cam[aria-pressed="true"]{background:#fff;color:#111}

/* shared chats */
.share-btn{width:auto!important;padding:0 12px!important;gap:6px;display:inline-flex!important;align-items:center;font:inherit;font-size:13px;border-radius:999px!important}
.share-btn[hidden]{display:none!important}
.share-btn.on{background:var(--amber-soft);color:var(--amber)}
.msg.user.other{align-items:flex-start}
.msg.user.other .body{background:color-mix(in srgb,var(--amber) 12%,var(--float-solid,var(--panel)))}
.msg .from{font-size:12px;font-weight:600;color:var(--amber);margin:0 0 3px 12px}
.chat-item[data-mode="room"]{--dot:#3cc8ff}
@media (max-width:820px){.share-btn span{display:none}.share-btn{padding:0 10px!important}}

/* answers sit right on the background, like a conversation — no card around the text */
.msg.bot{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:2px 2px 0;border-radius:0}
@media (max-width:820px){.msg.bot{padding:2px 0 0}}
/* long code is folded: the first lines, a soft fade and «Развернуть» */
.code.folded pre{max-height:calc(1.55em * 9 + 28px);overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.code-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:0;border-top:1px solid rgba(255,255,255,.07);background:transparent;color:#bfb8e6;font:inherit;font-size:12.5px;font-weight:600;padding:8px;cursor:pointer}
.code-more:hover{background:rgba(255,255,255,.05);color:#fff}
.code-more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .25s}
.code:not(.folded) .code-more svg{transform:rotate(180deg)}

/* richer slides: cards, a timeline, fuller text, an accent rule under titles */
.slide h2{position:relative;padding-bottom:1.4cqw}
.slide h2::after{content:'';position:absolute;left:0;bottom:0;width:6cqw;height:.45cqw;border-radius:1cqw;background:linear-gradient(90deg,var(--d-accent),var(--d-accent2))}
.slide li{font-size:1.85cqw;line-height:1.45}
.slide ul{gap:1.3cqw}
.s-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2cqw;margin-top:auto;margin-bottom:auto}
.s-cards div{padding:2.4cqw;border-radius:1.8cqw;background:color-mix(in srgb,var(--d-ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--d-ink) 12%,transparent)}
.s-cards i{font-style:normal;font:800 2.2cqw var(--d-head);color:var(--d-accent)}
.s-cards h3{margin:1cqw 0 .8cqw;color:var(--d-ink);font-size:2.1cqw}
.s-cards p,.s-time p{margin:0;font-size:1.55cqw;line-height:1.45;color:var(--d-muted)}
.s-time{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2cqw;margin-top:auto;margin-bottom:auto;position:relative;padding-top:3cqw}
.s-time::before{content:'';position:absolute;left:0;right:0;top:.9cqw;height:.3cqw;background:linear-gradient(90deg,var(--d-accent),var(--d-accent2));border-radius:1cqw}
.s-time div{position:relative}.s-time div::before{content:'';position:absolute;top:-3cqw;left:0;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--d-bg);border:.4cqw solid var(--d-accent)}
.s-time b{display:block;font:800 2.4cqw var(--d-head);color:var(--d-accent)}
.s-time h3{margin:.6cqw 0 .6cqw;color:var(--d-ink);font-size:1.9cqw}
.l-title .s-mid h1{font-size:7.2cqw}
.l-title .s-deco{background:radial-gradient(55% 75% at 92% 10%,color-mix(in srgb,var(--d-accent) 55%,transparent),transparent 70%),radial-gradient(45% 60% at 0% 100%,color-mix(in srgb,var(--d-accent2) 45%,transparent),transparent 70%)}
/* the answer is signed by the orb alone, standing in the margin to the left of the first line */
.msg.bot{position:relative}
.msg.bot>.who{position:absolute;left:-40px;top:3px;margin:0;padding:0}
.msg.bot>.who b{display:none}
.msg.bot>.who .orb.xs{--s:24px;width:24px;height:24px}
.msg.bot.pic{width:auto;padding:2px 0 0}
.msg.bot.pic .who{padding:0}
@media (max-width:1060px){.msg.bot{padding-left:34px!important}.msg.bot>.who{left:0}.msg.bot>.who .orb.xs{--s:22px;width:22px;height:22px}}

/* thinking: one quiet line — a little constellation in november colours, what it is doing, the time; the details unfold */
.spark{position:relative;width:16px;height:16px;flex:none;display:inline-block}
.spark i{position:absolute;width:4.5px;height:4.5px;border-radius:50%;left:50%;top:50%;margin:-2.25px}
.spark i:nth-child(1){background:#8b74ff}.spark i:nth-child(2){background:#4e9dff}.spark i:nth-child(3){background:#ff8fc8}
.live .spark{animation:spark-turn 1.6s linear infinite}
.live .spark i:nth-child(1){animation:spark-a 1.6s ease-in-out infinite}.live .spark i:nth-child(2){animation:spark-b 1.6s ease-in-out infinite}.live .spark i:nth-child(3){animation:spark-c 1.6s ease-in-out infinite}
.done .spark i:nth-child(1){transform:translate(0,-5px)}.done .spark i:nth-child(2){transform:translate(4.5px,3px)}.done .spark i:nth-child(3){transform:translate(-4.5px,3px)}
@keyframes spark-turn{to{transform:rotate(360deg)}}
@keyframes spark-a{0%,100%{transform:translate(0,-6px) scale(1)}50%{transform:translate(0,-2px) scale(.7)}}
@keyframes spark-b{0%,100%{transform:translate(5.2px,3px) scale(.75)}50%{transform:translate(2px,1px) scale(1)}}
@keyframes spark-c{0%,100%{transform:translate(-5.2px,3px) scale(.9)}50%{transform:translate(-2px,1px) scale(.65)}}
.tline{display:flex;align-items:center;gap:10px;padding:4px 0;color:var(--muted);font-size:14px}
.tl-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live .tl-label{background:linear-gradient(90deg,var(--muted) 30%,var(--tw-ink,var(--ink)) 50%,var(--muted) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pw-text 2.2s linear infinite}
.tl-time{flex:none;font-variant-numeric:tabular-nums;color:var(--muted);opacity:.8;font-size:13px}
.msg.bot .think{border:0;background:none;padding:0;margin:0 0 4px;border-radius:0;color:var(--muted)}
.msg.bot .think summary{padding:4px 0;gap:10px;font-size:14px;border:0!important;width:fit-content;max-width:100%}
.msg.bot .think summary:hover .tl-label{color:var(--tw-ink,var(--ink))}
.tl-chev{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;opacity:.7}
.think[open] .tl-chev{transform:rotate(90deg)}
.msg.bot .think .think-text{margin:4px 0 8px 7px;padding:2px 0 2px 16px;border-left:2px solid color-mix(in srgb,var(--amber) 35%,transparent);font-size:13.5px;line-height:1.55;max-height:300px}
@media (prefers-reduced-motion:reduce){.live .spark,.live .spark i,.live .tl-label{animation:none}}

/* the dark theme: «Графит» — calm neutral graphite, violet only in the accents */
:root[data-theme="dark"]:not([data-night]){--sky:#18181b;--float:rgba(255,255,255,.03);--float-solid:#232327;--side:#121214;--tw-ink:#ececee;--amber:#a996ff}
:root[data-theme="dark"]:not([data-night]) .aurora{display:none}

/* 👍/👎 and «что не так» */
.tools .vote.on{color:var(--ink);background:none}
.tools .vote.on svg{fill:currentColor}
.tools .vote svg{transition:transform .2s cubic-bezier(.2,.8,.2,1)}.tools .vote:active svg{transform:scale(.85)}
.tools .vote.on svg{animation:vote-pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes vote-pop{40%{transform:scale(1.25)}}
.why{margin:6px 0 8px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--float-solid,var(--panel)) 70%,transparent);max-width:560px;animation:pv-in .25s both}
.why p{margin:0 0 8px;font-size:13.5px;font-weight:600}
.why-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.why-chips button{border:1px solid var(--line);background:var(--panel);color:var(--ink2);font:inherit;font-size:12.5px;padding:4px 10px;border-radius:999px;cursor:pointer}
.why-chips button:hover{border-color:var(--amber);color:var(--amber)}
.why-row{display:flex;gap:8px}
.why-row input{flex:1;min-width:0;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;outline:none}
.why-row input:focus{border-color:var(--amber)}
.why-row button{border:0;border-radius:10px;padding:0 14px;background:linear-gradient(140deg,#7f63ff,#4e7dff);color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.why-done{font-weight:500!important;color:var(--muted);margin:0!important}

/* background self-check */
.review-note{display:flex;align-items:flex-start;gap:10px;margin:8px 0 4px;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,#e2963c 40%,transparent);background:color-mix(in srgb,#e2963c 9%,transparent);font-size:13.5px;max-width:640px;animation:pv-in .3s both}
.review-note svg{width:18px;height:18px;flex:none;fill:none;stroke:#e2963c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.review-note div{flex:1;min-width:0}.review-note b{font-weight:600}.review-note p{margin:2px 0 0;color:var(--muted);font-size:12.5px;white-space:pre-line}
.review-note button{flex:none;border:0;border-radius:9px;padding:6px 10px;background:#e2963c;color:#fff;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.review-done{margin:6px 0 0;font-size:12px;color:var(--muted)}
@media (max-width:640px){.review-note{flex-wrap:wrap}.review-note button{width:100%}}

/* projects */
.proj-head{display:flex;align-items:center;justify-content:space-between;padding-right:6px}
.proj-add{border:0;background:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.proj-add:hover{background:var(--soft);color:var(--ink)}.proj-add svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.chat-item.proj .open::before{border-radius:2px;background:var(--amber)}
.chat-item.proj[aria-current="true"] .open{font-weight:600;color:var(--ink)}
.chat-item .del.edit svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chats-empty{margin:6px 12px;color:var(--muted);font-size:13px;line-height:1.4}
.proj-field{display:flex;flex-direction:column;gap:6px;padding:8px 0}
.proj-field>span{font-size:12.5px;font-weight:600;color:var(--muted)}
.set-card .proj-field textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:15px;line-height:1.45;outline:none;resize:vertical;min-height:110px}
.set-card .proj-field textarea:focus{border-color:var(--amber)}
.proj-files{display:flex;flex-direction:column;gap:6px}.proj-files:empty{display:none}
.proj-file{display:flex;align-items:center;gap:8px;padding:7px 6px 7px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.proj-file span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.proj-file small{color:var(--muted);flex:none}
.proj-file button{border:0;background:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--muted);cursor:pointer;flex:none}
.proj-file button:hover{background:var(--soft);color:var(--danger,#d4483b)}.proj-file svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.proj-field .set-btn{align-self:flex-start}
.proj-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px}
.proj-actions .auth-go{margin-left:auto;padding:10px 22px}
.proj-actions [hidden]{display:none}

/* posters */
.poster{margin:8px 0 6px;max-width:440px}
.poster-frame{position:relative;width:100%;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#fff;box-shadow:0 10px 30px -18px rgba(20,10,60,.35)}
.poster-frame iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.poster-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.poster-bar button{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;padding:8px 14px;border-radius:10px;cursor:pointer}
.poster-bar button:hover{background:var(--soft)}.poster-bar button:disabled{opacity:.55;cursor:default}
.poster-note{color:var(--muted);font-size:13px}
.tools .pdf-btn{width:auto;padding:0 9px;font:600 12px/1 inherit;letter-spacing:.02em;color:var(--muted)}
.tools .pdf-btn:hover{color:var(--ink)}
/* the file that was asked for (PDF, Word, Excel) under the answer */
.file-card{display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:9px 10px 9px 9px;border:1px solid var(--line);border-radius:14px;max-width:420px;background:var(--card)}
.file-card .fc-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;font-weight:700;font-size:11px;line-height:1;color:#fff;background:#c0392b}
.file-card .fc-docx{background:#2b579a}.file-card .fc-xlsx{background:#217346}
.file-card .fc-name{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-card .fc-get{flex:none;border:0;border-radius:10px;padding:8px 12px;font-family:inherit;font-weight:600;font-size:13px;line-height:1;background:var(--amber);color:var(--on-amber);cursor:pointer}
.file-card .fc-get:disabled{opacity:.6;cursor:default}
/* a fraction as in a textbook: the numerator over a line over the denominator */
.frac{display:inline-flex;flex-direction:column;align-items:stretch;vertical-align:middle;text-align:center;font-size:.86em;line-height:1.15;margin:0 .12em}
.frac>span:first-child{border-bottom:1.2px solid currentColor;padding:0 .2em .05em}.frac>span:last-child{padding:.05em .2em 0}
.frac .frac{font-size:1em}

/* ======================= «Горизонт» =======================
   Black and white only. Geist for every word, a perfect sphere with scattered stars rises behind the greeting,
   the mode is one pill that opens into a strip. «Ночная» keeps its violet; «Тёмная» is pure black, «Светлая» pure white. */
:root,:root[data-theme="light"]{--bg:#fff;--panel:#fff;--side:#fafafa;--soft:#f1f1f1;--line:rgba(0,0,0,.1);--ink:#0a0a0a;--ink2:#2b2b2b;--muted:#6f6f6f;--inv:#0a0a0a;--inv-ink:#fff;--code:#f4f4f4;
  --amber:#0a0a0a;--on-amber:#fff;--amber-soft:rgba(0,0,0,.06);--glow:rgba(0,0,0,.08);--user:#f1f1f1;--card:#fff;
  --sky:#fff;--float:rgba(0,0,0,.02);--float-solid:#fff;--float-line:rgba(0,0,0,.1);--tw-shadow:none;--tw-ink:#0a0a0a;
  --sans:'Geist','Onest',system-ui,-apple-system,'Segoe UI',sans-serif;--display:'Geist','Onest',system-ui,sans-serif;--orb-a:#fff;--orb-b:#0a0a0a}
:root[data-theme="dark"]:not([data-night]){--bg:#000;--panel:#111112;--side:#050505;--soft:#1a1a1b;--line:rgba(255,255,255,.1);--ink:#fff;--ink2:rgba(255,255,255,.8);--muted:rgba(255,255,255,.5);--inv:#fff;--inv-ink:#000;--code:#0d0d0e;
  --amber:#fff;--on-amber:#000;--amber-soft:rgba(255,255,255,.08);--glow:rgba(255,255,255,.1);--user:#161617;--card:#0b0b0c;
  --sky:#000;--float:rgba(255,255,255,.03);--float-solid:#141415;--float-line:rgba(255,255,255,.1);--tw-shadow:none;--tw-ink:#fff;--orb-a:#000;--orb-b:#fff}
:root[data-night]{--sans:'Geist','Onest',system-ui,sans-serif;--display:'Geist','Onest',system-ui,sans-serif;--orb-a:#0d0b1a;--orb-b:#c9bcff}
html:not([data-night]) .aurora,html:not([data-night]) .main::before{display:none}
body{font-family:var(--sans)}
.horizon{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s}
.horizon.on{opacity:1}
html[data-night] .horizon{display:none}

/* the logo: a small black sphere with a lit rim (white in the light theme) */
.orb{background:radial-gradient(circle at 50% 135%,var(--orb-a) 58%,color-mix(in srgb,var(--orb-b) 22%,var(--orb-a)) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--orb-b) 85%,transparent),0 0 0 1px color-mix(in srgb,var(--orb-b) 45%,transparent),0 -2px calc(var(--s,40px) * .3) color-mix(in srgb,var(--orb-b) 22%,transparent)}
.orb::before{display:none}
.orb::after{background:radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--orb-b) 30%,transparent),transparent 45%);box-shadow:none}
.orb-halo{display:none}

/* sidebar: flat, a hairline instead of a floating card */
@media (min-width:821px){
  .app{grid-template-columns:268px minmax(0,1fr)}
  .side{margin:0;border:0;border-right:1px solid var(--line);border-radius:0;background:var(--side);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
}
.brand{font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:-.02em}
.new-chat{border-radius:999px;height:40px;background:var(--ink);color:var(--bg);box-shadow:none;font-weight:500}
.new-chat:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg))}
.chat-item[aria-current="true"]{background:var(--soft);box-shadow:none}
.chat-item .open::before{background:currentColor;opacity:.35;width:5px;height:5px}
.title{font-family:var(--display);font-weight:500;font-size:14px;color:var(--ink2)}

/* the greeting */
.orb-hero{display:none}
.empty{gap:0}
.hello{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 5%,transparent);
  font:400 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 75%,transparent)}
.hello i{width:6px;height:6px;border-radius:50%;background:var(--ink)}
.empty h1{margin-top:26px;font-family:var(--display);font-weight:300;font-size:clamp(40px,5.2vw,76px);line-height:1.04;letter-spacing:-.04em;color:var(--ink)}
.empty h1 span{display:block;color:color-mix(in srgb,var(--ink) 42%,transparent)}
.empty .lead{margin:18px 0 0;font-size:16px;color:var(--muted)}
@keyframes hz-rise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.empty:not([hidden]) .hello{animation:hz-rise .9s .1s cubic-bezier(.2,.7,.2,1) both}
.empty:not([hidden]) h1{animation:hz-rise .9s .2s cubic-bezier(.2,.7,.2,1) both}
.empty:not([hidden]) .lead{animation:hz-rise .9s .35s cubic-bezier(.2,.7,.2,1) both}

/* the composer */
.box{position:relative;border-radius:20px;background:var(--panel);border-color:var(--line);box-shadow:0 0 48px color-mix(in srgb,var(--ink) 5%,transparent),inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent);padding:12px 12px 10px 18px}
.box:focus-within{border-color:color-mix(in srgb,var(--ink) 28%,transparent);box-shadow:0 0 0 4px var(--amber-soft),0 0 48px color-mix(in srgb,var(--ink) 6%,transparent)}
.send,.send:not(:disabled){background:var(--ink);color:var(--bg);box-shadow:none}
.send:disabled{background:var(--soft);color:var(--muted)}
.tool.round{border-color:color-mix(in srgb,var(--ink) 14%,transparent);width:36px;min-width:36px;height:36px}

/* the mode: one pill «Авто ⌄»; it opens into a strip of all five (above the box on a phone) */
.reason-btn{height:36px;padding:0 10px 0 14px;gap:6px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);color:var(--ink)}
.reason-btn>svg:first-child{display:none}
.reason-btn b{font-weight:500;font-size:13px}
.reason-btn.on{background:transparent;border-color:color-mix(in srgb,var(--ink) 14%,transparent);color:var(--ink)}
.reason-btn:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent);background:transparent}
.reason-menu{width:auto;flex-direction:row;gap:2px;padding:3px;border-radius:999px;background:var(--panel);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:0 12px 32px -12px rgba(0,0,0,.5);
  left:0;top:50%;bottom:auto;transform-origin:left center;animation:hz-strip .32s cubic-bezier(.3,.8,.2,1) both}
@keyframes hz-strip{from{opacity:0;transform:translateY(-50%) scaleX(.35)}to{opacity:1;transform:translateY(-50%) scaleX(1)}}
.reason-menu:not([hidden]){display:flex;transform:translateY(-50%)}
.reason-menu .reason-head,.reason-menu button svg,.reason-menu button span{display:none!important}
.reason-menu button{display:block;padding:7px 12px;border-radius:999px;color:var(--muted);white-space:nowrap;transition:color .2s,background-color .25s}
.reason-menu button b{font-size:13px;font-weight:400}
.reason-menu button:hover,.reason-menu button:focus-visible{background:transparent;color:var(--ink)}
.reason-menu button[aria-checked="true"]{background:var(--ink);color:var(--bg);box-shadow:0 0 18px color-mix(in srgb,var(--ink) 18%,transparent)}
.reason-menu button[aria-checked="true"] b{font-weight:500}
.reason-menu button[aria-checked="true"]::after{display:none}
.reason:has(.reason-menu:not([hidden])) .reason-btn{visibility:hidden}
@media (max-width:600px){
  .reason-menu{left:0;right:0;top:auto;bottom:calc(100% + 10px);width:auto;padding:4px;transform-origin:center bottom;animation:hz-up .28s cubic-bezier(.3,.8,.2,1) both;
    background:color-mix(in srgb,var(--panel) 94%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 16px 40px rgba(0,0,0,.5)}
  .reason-menu:not([hidden]){transform:none}
  .reason-menu button{flex:1 1 auto;padding:9px 6px;text-align:center}
  .reason-menu button b{font-size:12.5px}
  .reason:has(.reason-menu:not([hidden])) .reason-btn{visibility:visible;border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
}
@keyframes hz-up{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

/* examples under the box: only on the greeting, only on a computer */
.sugs{display:none;max-width:780px;margin:16px auto 0;gap:8px;flex-wrap:wrap;justify-content:center}
.sugs button{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,transparent);border-radius:999px;padding:7px 12px;font-size:12.5px;color:var(--muted);transition:color .2s,border-color .2s}
.sugs button:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.sugs svg{width:12px;height:12px;stroke-width:1.6;opacity:.8}

/* on a computer the greeting, the box and the examples stand together; the sphere rises below them */
@media (min-width:821px){
  .main:has(#empty:not([hidden]):not(.leave)) .thread{flex:none;overflow:visible}
  .main:has(#empty:not([hidden]):not(.leave)) .empty{min-height:0;max-width:980px;padding:clamp(28px,7vh,84px) 24px 32px}
  .empty h1{font-size:clamp(44px,4.6vw,72px);white-space:nowrap}
  .main:has(#empty:not([hidden]):not(.leave)) .composer{margin-bottom:auto}
  .main:has(#empty:not([hidden]):not(.leave)) .box{max-width:720px}
  .main:has(#empty:not([hidden]):not(.leave)) .sugs{display:flex;animation:hz-rise .9s .6s cubic-bezier(.2,.7,.2,1) both}
  .main:has(#empty:not([hidden]):not(.leave)) .composer .box{animation:hz-rise .9s .5s cubic-bezier(.2,.7,.2,1) both}
  .main:has(#empty:not([hidden]):not(.leave)) .hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;padding:6px 14px;border-radius:999px;white-space:nowrap;
    background:color-mix(in srgb,var(--bg) 85%,transparent);border:1px solid var(--line);font:9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .main:has(#empty:not([hidden]):not(.leave)) .title{visibility:hidden}
}
@media (max-width:820px){
  .hello{font-size:9px;padding:5px 10px;letter-spacing:.08em}
  .empty{justify-content:flex-start;padding-top:28px}
  .empty h1{margin-top:20px;font-size:34px;line-height:1.08}
  .empty .lead{margin-top:12px;font-size:14px}
  .main:has(#empty:not([hidden]):not(.leave)) .box{background:color-mix(in srgb,var(--panel) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .main:has(#empty:not([hidden]):not(.leave)) .hint{font:8px var(--mono);letter-spacing:.1em;text-transform:uppercase}
}

/* messages: the question in a quiet bubble, the answer straight on the page, no colour */
.msg.user .body{background:var(--user);border:1px solid var(--line);box-shadow:none;color:var(--ink)}
.msg.bot{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.who b{color:var(--ink)}
.msg.bot .code,.msg.bot .body pre{background:#0d0d0e;border:1px solid rgba(255,255,255,.08);color:#ededed}
.msg.bot .code code,.msg.bot .body pre code{color:#ededed}
.msg.bot .code-head,.msg.bot .code .copy-code{color:#9a9a9a}
.code-more{color:#9a9a9a}
.spark i:nth-child(1){background:var(--ink)}.spark i:nth-child(2){background:color-mix(in srgb,var(--ink) 60%,transparent)}.spark i:nth-child(3){background:color-mix(in srgb,var(--ink) 35%,transparent)}
.chat-item[data-mode]{--dot:currentColor}
.eyes-fix,.pv-pub,.deck-bar .pv-pub,.why-row button{background:var(--ink);color:var(--bg);box-shadow:none}
.run-code{background:rgba(255,255,255,.1);color:#ededed}.run-code:hover{background:rgba(255,255,255,.18)}
.pw-blob{background:color-mix(in srgb,var(--ink) 40%,transparent)}.pw-blob.b2{background:color-mix(in srgb,var(--ink) 25%,transparent)}.pw-blob.b3{background:color-mix(in srgb,var(--ink) 15%,transparent)}
@media (prefers-reduced-motion:reduce){.horizon{transition:none}}

/* the chat list is a drawer on a computer too: the round button at the top left opens it */
.top-brand,.login-top{display:none}
@media (min-width:821px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:0 auto 0 0;width:300px;z-index:20;transform:translateX(-100%);transition:transform .3s var(--ease),visibility 0s .3s;visibility:hidden}
  .app.side-open .side{transform:none;visibility:visible;transition:transform .3s var(--ease);box-shadow:20px 0 60px rgba(0,0,0,.5)}
  .scrim{position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.45);animation:fade .25s both}
  .top{height:72px;padding:0 28px;gap:16px}
  .menu-btn{width:38px;height:38px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
  .menu-btn:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
  .menu-btn svg{width:16px;height:16px}
  .top-brand{display:block;color:var(--ink);text-decoration:none;font:500 17px var(--display);letter-spacing:-.02em;white-space:nowrap}
  .title{text-align:center}
  .new-top{width:auto;height:auto;padding:8px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);font:500 13px var(--sans);gap:0}
  .new-top svg{display:none}
  .new-top:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
  .login-top{display:block;border:1px solid var(--ink);background:var(--ink);color:var(--bg);border-radius:999px;padding:8px 16px;font:500 13px var(--sans);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .login-top:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg))}
  .login-top.in{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
}
@media (max-width:820px){.new-top span{display:none}}
/* answers start straight with the text: no avatar beside them */
.msg.bot>.who{display:none}
@media (max-width:1060px){.msg.bot{padding-left:0!important}}
/* no round logo anywhere on the site (the tab icon stays); voice chat keeps a plain lit ring to tap */
.orb{display:none!important}
.vc-orb .orb{display:block!important;background:none;border:1.5px solid var(--ink);box-shadow:0 0 50px color-mix(in srgb,var(--ink) 18%,transparent),inset 0 0 40px color-mix(in srgb,var(--ink) 8%,transparent)}
.vc-orb .orb::before,.vc-orb .orb::after{display:none}
.vc-halo{background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 14%,transparent),transparent 70%)!important}
/* smooth on slow computers: no blur in the entrance, no live blur of the moving sky behind the box */
@keyframes hz-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.box,.main:has(#empty:not([hidden]):not(.leave)) .box{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.main:has(#empty:not([hidden]):not(.leave)) .box{background:var(--panel)}
.hz-bg{height:auto;will-change:transform,opacity;transform-origin:top}
/* sign-in: «вход обязателен» keeps the window (no cross, the page behind is dark), password recovery */
.auth.locked{background:color-mix(in srgb,var(--bg) 92%,transparent)}
.auth.locked .auth-x{display:none}
.auth-card{box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.auth-card h2{font-weight:500;letter-spacing:-.02em}
.auth-card input:focus{border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.auth-go{border-radius:999px;font-weight:500}
#reset-step2{display:flex;flex-direction:column;gap:10px}#reset-step2[hidden]{display:none}
.auth-rec{display:flex;flex-direction:column;gap:8px;width:100%;padding:12px 0 4px;border-top:1px solid var(--line);margin-top:4px;text-align:left}
.auth-rec[hidden]{display:none}
.auth-label{margin:0;font:400 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rec-row{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:14px;color:var(--ink2)}
.rec-row[hidden]{display:none}
.rec-row input{flex:1;min-width:0;padding:9px 12px!important;font-size:14px!important}
.rec-btn{flex:none;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);background:none;color:var(--ink);border-radius:999px;padding:7px 14px;font:500 13px var(--sans);cursor:pointer}
.rec-btn:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}.rec-btn[hidden]{display:none}
.auth-note.small{font-size:12.5px;margin:0}.auth-note[hidden]{display:none}
/* the greeting never scrolls: a finger on the sphere lights the stars instead of dragging the page */
.main:has(#empty:not([hidden]):not(.leave)) .thread{overflow:hidden;overscroll-behavior:none;touch-action:none}
html,body{overscroll-behavior:none}
.main:has(#empty:not([hidden]):not(.leave)) .messages{padding:0}

/* ---------- settings in the «Горизонт» look: a quiet sheet, small-capital section labels, pill switches ---------- */
.set-card{width:min(540px,100%);gap:0;padding:28px 26px 22px;border-radius:22px;background:var(--panel);border:1px solid var(--line)}
.set-card h2{font-family:var(--display);font-weight:300;font-size:30px;letter-spacing:-.03em;margin:0 0 14px}
.set-group{gap:12px;padding:18px 0}
.set-group h3{font:400 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.set-row>span{font-size:14.5px;color:var(--ink)}
.set-note{font-size:12.5px;color:var(--muted)}
.seg{border-radius:999px;padding:3px;background:none;border:1px solid var(--line)}
.seg button{border-radius:999px;font-size:13px;padding:7px 14px;color:var(--muted)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:500;box-shadow:none}
.set-row input,.set-row select{border-radius:999px;background:none;border:1px solid var(--line);font-size:14px;padding:9px 16px}
.set-row select{appearance:none;-webkit-appearance:none;padding-right:36px;background:no-repeat right 14px center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.set-row select option{background:var(--panel);color:var(--ink)}
.set-row input:focus,.set-row select:focus{border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.set-btn{border-radius:999px;background:none;border:1px solid var(--line);font-size:13px;padding:8px 16px;color:var(--ink)}
.set-btn:hover{background:var(--soft)}
.set-btn.danger{color:var(--danger,#d4483b);border-color:color-mix(in srgb,var(--danger,#d4483b) 30%,transparent);background:none}
.set-btn.danger:hover{background:color-mix(in srgb,var(--danger,#d4483b) 8%,transparent)}
.settings .auth-x{top:20px;right:20px}

/* november: the wordmark (letters as outlines, the «o» is the moon with a meteor) — its colour is the ink of the theme */
.wordmark{display:block;height:19px;width:auto;color:var(--ink);fill:currentColor;stroke:none}
.hint .nm{text-transform:none}
.top-brand .wordmark{height:20px}