:root{--glass:rgba(255,255,255,.6);--glass-edge:rgba(0,0,0,.08);--glass-chip:rgba(0,0,0,.05);--bg:#f7f6f2;--fg:#1d1d1b;--mute:#8a877f;--line:#e5e2da;--card:#fff;--me:#ebeff9;--acc:#c4623f;--ok:#3a9a5b;--bad:#c4472f}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--glass:rgba(40,40,46,.55);--glass-edge:rgba(255,255,255,.12);--glass-chip:rgba(255,255,255,.08);--bg:#141417;--fg:#ebe9e4;--mute:#8e8b84;--line:#2a2a2f;--card:#1d1d22;--me:#222b42;--acc:#d0714c;--ok:#5cc07a;--bad:#e2765f}}
:root[data-theme=dark]{--glass:rgba(40,40,46,.55);--glass-edge:rgba(255,255,255,.12);--glass-chip:rgba(255,255,255,.08);--bg:#141417;--fg:#ebe9e4;--mute:#8e8b84;--line:#2a2a2f;--card:#1d1d22;--me:#222b42;--acc:#d0714c;--ok:#5cc07a;--bad:#e2765f}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,sans-serif}
.status{position:fixed;top:calc(12px + env(safe-area-inset-top));right:14px;width:8px;height:8px;border-radius:50%;background:var(--line);font-size:0}
.status.connected{background:var(--ok)}.status.error{background:var(--bad)}
.interaction-status{display:none}
main{flex:1;min-height:0;overflow-y:auto;padding:28px 16px 12px;max-width:720px;width:100%;margin:0 auto}
.hint{color:var(--mute);text-align:center;margin-top:30vh}
.chat-log:not(:empty)+.hint{display:none}
.chat-log{display:flex;flex-direction:column;gap:14px}
.message{max-width:88%;white-space:pre-wrap;word-wrap:break-word}
.message.user{align-self:flex-end;background:var(--me);padding:8px 13px;border-radius:16px;color:var(--fg)}
.message.gemini{align-self:flex-start;padding:2px 2px}
.message:empty{display:none}
footer{padding:0 12px calc(10px + env(safe-area-inset-bottom))}
.card{max-width:720px;margin:0 auto;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--glass-edge);border-radius:28px;padding:10px 10px 10px 16px;box-shadow:0 10px 32px rgba(0,0,0,.18),inset 0 1px 0 var(--glass-edge)}
.row{display:flex;align-items:center;gap:10px;margin-top:6px}.sp{flex:1}
input[type=text]{width:100%;height:36px;padding:4px 0;border:0;outline:0;background:transparent;color:var(--fg);font:inherit;font-size:17px}
input::placeholder{color:var(--mute)}
button{font:inherit;color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ic{width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid var(--glass-edge);background:var(--glass-chip);color:var(--mute)}
.chip{border:0;color:var(--fg)}.send{border:0;background:var(--acc);color:#fff}
#micBtn.on{background:var(--acc);color:#fff;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(196,98,63,.35)}50%{box-shadow:0 0 0 8px rgba(196,98,63,0)}}
@media (prefers-reduced-motion:reduce){#micBtn.on{animation:none}}
.more{position:relative}
.menu{position:absolute;left:0;bottom:50px;min-width:210px;padding:6px;border-radius:16px;background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--glass-edge);box-shadow:0 10px 32px rgba(0,0,0,.18)}
.menu label,.menu button{display:flex;gap:10px;align-items:center;width:100%;padding:9px 10px;border:0;background:none;border-radius:10px;font-size:15px;text-align:left}
.menu label:hover,.menu button:hover{background:var(--glass-chip)}
.menu input{accent-color:var(--acc);margin:0}
#disconnectBtn{color:var(--bad)}.mh{padding:6px 10px 2px;font-size:12px;color:var(--mute)}
.hidden{display:none!important}
/* проявление слова — как у ChatGPT (d-word-enter): 0.7 с ease; прозрачность 0→1 за первые 15% (0.18 на 6%, 0.72 на 12%),
   цвет акцента держится до 45% и к концу уходит в обычный текст */
.w{animation:word-enter .7s ease backwards}
@keyframes word-enter{0%{color:var(--acc);opacity:0;animation-timing-function:ease-out}6%{opacity:.18}12%{opacity:.72}15%{opacity:1}45%{color:var(--acc);opacity:1;animation-timing-function:ease-in-out}100%{color:inherit;opacity:1}}
@media (prefers-reduced-motion:reduce){.w{animation:none}}
.message.note{align-self:center;font-size:13px;color:var(--mute)}
.pill{display:flex;gap:8px;align-items:center;width:max-content;margin:0 auto 8px;padding:5px 12px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-edge);font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mute)}
.pill .ps{font-family:system-ui;color:var(--ok)}
.pill .bars rect{transform-box:fill-box;transform-origin:center;transition:transform .12s}
.pill.speaking .bars{color:var(--acc)}
.pill.speaking .bars .b1{animation:bar .9s ease-in-out infinite}.pill.speaking .bars .b2{animation:bar .9s ease-in-out -.3s infinite}.pill.speaking .bars .b3{animation:bar .9s ease-in-out -.6s infinite}.pill.speaking .bars .b4{animation:bar .9s ease-in-out -.45s infinite}
@keyframes bar{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.25)}}
@media (prefers-reduced-motion:reduce){.pill.speaking .bars rect{animation:none}}