/* Sixth Sense — 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{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}
.ideas{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:6px}
.ideas button{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:12px 14px;text-align:left;font-size:14px;color:var(--ink2);line-height:1.4;transition:background-color .15s,transform .15s var(--ease)}
.ideas button:hover{background:var(--soft)}.ideas button:active{transform:scale(.98)}

/* 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)}
.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}
  .ideas{grid-template-columns:1fr}
  .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: Sixth Sense ===================== */
/* 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;--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;--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;--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-x:clip}
.main::before{content:'';position:absolute;z-index:-1;left:50%;top:-30vh;width:min(900px,140vw);height:70vh;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,var(--glow),transparent 72%);opacity:.55;pointer-events:none;filter:blur(20px)}
: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}
.ideas{gap:10px;margin-top:14px;max-width:640px}
.ideas button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--panel) 80%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .2s,transform .2s var(--ease),background-color .2s}
.ideas button:hover{border-color:color-mix(in srgb,var(--amber) 55%,transparent);transform:translateY(-2px)}
.ideas button svg{grid-row:span 2;width:20px;height:20px;color:var(--amber)}
.ideas button small{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.ideas button span{font-size:14px;color:var(--ink);line-height:1.35}

/* 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}
  .ideas{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .ideas button{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:12px;row-gap:4px;border-radius:16px}
  .ideas button svg{grid-row:auto;width:18px;height:18px}
  .ideas button span{font-size:13px}
  .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}}
.empty.leave{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 Sixth Sense 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}}