/* 4Ring — вариант 6 «4Ring + Бумага», утверждён владельцем 05.11.2026 21:24 МСК.
   Чат и плита — из «4Ring» (брендбук: нейтральные листы, плита #161616, золото #e0a43a),
   шапка с тремя палочками и поле «Спросить Claude…» — из «Бумаги». */
:root{
  --bg:#eeeeee; --sheet:#f8f8f8; --ink:#111; --ink2:#333; --mute:#8a8a8a; --line:#d0d0d0;
  --pill:#ececec; --gold:#e0a43a; --plate1:#2b2b2b; --plate2:#161616; --plate3:#0f0f0f;
  --me:#111; --me-ink:#f8f8f8; --me-mute:#a8a8a8; --bad:#c0392b;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{position:fixed;inset:0;overflow:hidden;background:var(--bg);overscroll-behavior:none}
body{font:16px/1.45 Inter,system-ui,-apple-system,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button,textarea,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
button:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ic{width:22px;height:22px;flex:none;display:block}.s16{width:16px;height:16px}
.phone{position:fixed;top:0;left:0;right:0;height:100dvh;max-width:720px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;padding-top:var(--st);will-change:transform}
/* клавиатура открыта: нижний отступ под «полоску» не нужен */
.kb .cp{margin-bottom:8px}

.hd{display:flex;align-items:center;gap:4px;padding:4px 10px 6px;flex:none}
.ib{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink2);border-radius:22px}
.ib:active{background:var(--pill)}
.who{flex:1;display:flex;flex-direction:column;align-items:center;min-height:44px;justify-content:center}
.who b{font:800 18px/1.2 Inter;display:flex;align-items:center;gap:4px;letter-spacing:-.01em}
.who small{font-size:12px;color:var(--mute)}

.plate{margin:0 12px 4px;border-radius:20px;background:radial-gradient(120% 140% at 20% 0%,var(--plate1),var(--plate2) 60%,var(--plate3));color:#f8f8f8;padding:11px 14px;display:flex;align-items:center;gap:12px;flex:none;transition:opacity .2s}
.plate .av{width:40px;height:40px;border-radius:20px;background:var(--gold);color:#111;display:flex;align-items:center;justify-content:center;flex:none}
.plate .pb{flex:1;min-width:0}.plate b{font-size:14.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate small{display:block;color:#bdbdbd;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{height:4px;border-radius:2px;background:#333;margin-top:6px;overflow:hidden;position:relative}
.prog i{position:absolute;top:0;bottom:0;width:38%;background:var(--gold);border-radius:2px;animation:run 1.6s ease-in-out infinite}
@keyframes run{0%{left:-38%}100%{left:100%}}
.plate .tm2{font:600 13px Inter;color:var(--gold);font-variant-numeric:tabular-nums;flex:none}
.plate.idle .prog{display:none}.plate.idle .av{background:#3a3a3a;color:var(--gold)}
.plate.off{background:#3a1d1a}.plate.off .prog{display:none}.plate.off .av{background:var(--bad);color:#fff}
.net{margin:0 12px 4px;padding:8px 12px;border-radius:12px;background:#fff3d6;color:#6b4a00;font-size:13px;flex:none}

.feed{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;padding:8px 12px 10px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
.more{align-self:center;height:36px;padding:0 14px;border-radius:18px;background:var(--pill);font-size:13px;font-weight:600;color:var(--ink2)}
.day{align-self:center;font-size:12px;color:var(--mute);font-weight:600;margin:6px 0 2px}
.m{max-width:86%;border-radius:18px;padding:10px 14px;word-wrap:break-word;overflow-wrap:anywhere;animation:pop .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.m.noanim{animation:none}
@media (prefers-reduced-motion:reduce){.m{animation:none}.prog i{animation:none;left:0;width:60%}}
.m.me{align-self:flex-end;background:var(--me);color:var(--me-ink);border-radius:18px 18px 4px 18px}
.m.ai{align-self:flex-start;background:var(--sheet);border-radius:18px 18px 18px 4px;box-shadow:0 1px 0 var(--line)}
.m.sys{align-self:center;background:none;color:var(--mute);font-size:13px;padding:2px 8px}
.m .tm{font-size:11px;color:var(--mute);margin-top:3px;text-align:right;display:flex;gap:6px;justify-content:flex-end;align-items:center}
.m.me .tm{color:#939393}
.m.failed{outline:2px solid var(--bad)}
.m .st-fail{color:#ff8a7a;font-weight:600}.m .st-fail button{color:#ffb4a8;text-decoration:underline;font-size:11px}
.m.ai ul,.m.ai ol{margin:4px 0 6px 20px}.m.ai p+p{margin-top:6px}
.m code{font:13px/1.4 "JetBrains Mono",monospace;background:var(--pill);padding:1px 5px;border-radius:5px}
.m.me code{background:#2a2a2a}
.m pre{background:#1a1a1a;color:#eaeaea;border-radius:10px;padding:10px;overflow-x:auto;margin:6px 0;font:12.5px/1.45 "JetBrains Mono",monospace}
.m pre code{background:none;padding:0;color:inherit}
.m a{color:inherit;text-decoration:underline}
.m h3{font-size:16px;margin:6px 0 2px}

.vrow{display:flex;align-items:center;gap:10px;min-width:210px}
.pl{width:36px;height:36px;border-radius:18px;background:var(--gold);color:#111;display:flex;align-items:center;justify-content:center;flex:none}
.pl .ic{width:16px;height:16px}
.wv{display:flex;align-items:center;gap:2px;height:28px;flex:1}
.wv i{width:3px;border-radius:2px;display:block;background:#555}
.m.ai .wv i{background:var(--line)}
.wv i.on{background:var(--gold)}.m.ai .wv i.on{background:var(--ink)}
.vdur{font-size:12px;color:#939393;font-variant-numeric:tabular-nums;min-width:30px}
.m.ai .vdur{color:var(--mute)}
.tr{font-size:13.5px;color:var(--me-mute);margin-top:6px}
.m.ai .tr{color:var(--ink2)}
.tr.wait{font-style:italic}
.img{display:block;max-width:240px;max-height:300px;border-radius:12px;margin:2px 0}
.fl{display:flex;align-items:center;gap:8px;min-height:44px;color:inherit;text-decoration:none}
.fl small{display:block;font-size:11.5px;opacity:.7}
.chipr{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.chipr button{height:34px;padding:0 12px;border-radius:17px;background:var(--pill);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:5px;color:var(--ink2)}
.typing{align-self:flex-start;background:var(--sheet);border-radius:18px;padding:12px 16px;display:flex;gap:4px;box-shadow:0 1px 0 var(--line)}
.typing i{width:7px;height:7px;border-radius:4px;background:var(--mute);animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,80%,100%{opacity:.3}40%{opacity:1}}

.cp{margin:4px 10px calc(10px + var(--sb));background:var(--sheet);border-radius:24px;padding:10px 10px 8px 14px;box-shadow:inset 0 0 0 1px var(--line),0 4px 18px #1111110d;flex:none;position:relative}
.cp textarea{width:100%;border:0;background:none;resize:none;outline:none;font-size:16px;line-height:1.4;max-height:140px;padding:2px 0 6px;display:block}
.cp textarea::placeholder{color:var(--mute)}
.row{display:flex;align-items:center;gap:6px}.row .sp{flex:1}
.chip{white-space:nowrap;flex:none;height:36px;padding:0 12px;border-radius:18px;background:var(--pill);font-size:13px;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:5px}
.mic{width:48px;height:48px;border-radius:24px;background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .15s}
.mic.recording{background:var(--bad);color:#fff;transform:scale(1.12)}
.rec{display:flex;align-items:center;gap:8px;font-weight:600;padding:2px 0 8px;font-variant-numeric:tabular-nums}
.rdot{width:10px;height:10px;border-radius:5px;background:var(--bad);animation:bl 1s infinite}
.rhint{font-weight:500;color:var(--mute);font-size:13px;margin-left:auto}
.cp.recmode textarea{display:none}
.rx{width:36px;height:36px;border-radius:18px;background:var(--pill);font-size:16px;font-weight:700;color:var(--ink2);display:flex;align-items:center;justify-content:center}

.login{position:absolute;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;z-index:20}
.lg{max-width:320px;text-align:center}.lg h1,.dw h2{font:800 34px Inter;letter-spacing:-.02em;margin-bottom:12px}
.lg h1 span,.dw h2 span{color:var(--gold)}.lg p{color:var(--ink2)}

.drawer{position:absolute;inset:0;background:#0006;z-index:15;display:flex}
.dw{width:min(340px,88%);height:100%;overflow-y:auto;background:var(--bg);padding:calc(16px + var(--st)) 14px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:4px 0 24px #0003}
.di{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:14px;background:var(--sheet);text-align:left;font-weight:700;flex-wrap:wrap}
.di small{width:100%;padding-left:34px;margin-top:-6px;font-weight:500;color:var(--mute);font-size:12px}
.di.on{box-shadow:inset 0 0 0 2px var(--gold)}
.di.tg{font-weight:600;gap:10px;flex-wrap:nowrap}.di.tg input{width:22px;height:22px;accent-color:var(--gold)}
.ver{font-size:12px;color:var(--mute);padding:4px 6px}
.toast{position:absolute;left:50%;bottom:calc(120px + var(--sb));transform:translateX(-50%);background:#111;color:#fff;padding:10px 16px;border-radius:14px;font-size:14px;z-index:30;max-width:90%}
@media (min-width:721px){body{background:#e4e4e4}.phone{background:var(--bg);box-shadow:0 0 40px #0001}}
.sess{background:var(--sheet);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px}
.sess h3{font-size:15px;margin-bottom:2px}.sess .lbl{font-size:12px;font-weight:700;color:var(--mute);margin-top:6px;display:flex;justify-content:space-between}
.seg{display:flex;background:var(--pill);border-radius:12px;padding:3px;gap:2px}
.seg button{flex:1;min-height:38px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink2)}
.seg button.on{background:#111;color:var(--gold)}.seg button:disabled{opacity:.5}
.note{font-size:11.5px;color:var(--mute)}
.bar{height:8px;border-radius:4px;background:var(--pill);overflow:hidden;flex:1}.bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:4px;transition:width .3s}
.bar i.hot{background:var(--bad)}
.chip.sm{height:34px;align-self:flex-start;margin-top:4px}
.lim{display:flex;align-items:center;gap:8px;font-size:12.5px}.lim span{width:56px;color:var(--ink2)}.lim b{font-size:12px;min-width:92px;text-align:right;font-weight:600}
.sess>.bar{flex:none;margin-top:2px}
#sessChip{flex:0 1 auto;min-width:0;font-size:12px;max-width:46%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;line-height:36px}
@media (max-width:380px){#fileBtn{font-size:0;gap:0;padding:0 10px}}
.m.act{align-self:stretch;max-width:100%;background:none;box-shadow:none;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px;animation:none}
.as{background:var(--sheet);border-radius:14px;box-shadow:inset 0 0 0 1px #dcdcdc}
.as.agent{box-shadow:inset 0 0 0 1.5px var(--gold)}
.as.err{box-shadow:inset 0 0 0 1.5px #e8b4ad}
.as summary{list-style:none;display:flex;align-items:center;gap:8px;padding:9px 12px;min-height:42px;cursor:pointer}
.as summary::-webkit-details-marker{display:none}
.as .chev{color:var(--mute);font-weight:700;transition:transform .15s;flex:none;width:8px}
.as[open] .chev{transform:rotate(90deg)}
.as .ai{flex:none;width:20px;text-align:center}
.as .at{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink2)}
.as[open] .at{white-space:normal}
.as .am{flex:none;font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:3px}
.as.ok .am{color:#2e8b57}.as.err .am{color:var(--bad);font-weight:700}
.as pre{margin:0 10px 10px 36px;background:#1a1a1a;color:#ddd;border-radius:10px;padding:9px;font:11.5px/1.45 "JetBrains Mono",monospace;white-space:pre-wrap;word-break:break-all;max-height:240px;overflow:auto}
.as pre.empty{background:none;color:var(--mute);padding:0 0 4px;font-family:Inter}
.th{color:#6a6a6a;font-style:italic;font-size:13.5px;padding:2px 6px;line-height:1.45}.th ul,.th ol{margin:2px 0 2px 18px}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--gold);border-right-color:transparent;display:inline-block;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.adone,.alive{font-size:12.5px;color:var(--mute);font-weight:600;padding:2px 6px;display:flex;align-items:center;gap:6px}
.live{width:8px;height:8px;border-radius:4px;background:var(--bad);display:inline-block;animation:bl 1.2s infinite}
.adur{font-variant-numeric:tabular-nums}

/* ---- плавность (просьба владельца 22:40) ---- */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
.plate{max-height:90px;overflow:hidden;transition:max-height .28s var(--ease),opacity .22s var(--ease),margin .28s var(--ease),padding .28s var(--ease),transform .28s var(--ease)}
.plate.hide{max-height:0;opacity:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translateY(-6px);pointer-events:none}
#plateTitle.swap{animation:swap .25s var(--ease)}
@keyframes swap{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
.as.enter,.th.enter{animation:pop .26s var(--ease) both}
.as[open] pre{animation:unfold .22s var(--ease)}
@keyframes unfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.as .am{transition:color .2s}
.drawer{display:flex;background:transparent;transition:background .26s var(--ease)}
.drawer.open{background:#0006}
.dw{transform:translateX(-102%);transition:transform .28s var(--ease)}
.drawer.open .dw{transform:none}
.chip,.mic,.ib,.seg button,.chipr button,.as summary,.di,.pl,.rx,.more{transition:transform .12s var(--ease),background-color .15s,opacity .15s}
.chip:active,.ib:active,.seg button:active,.chipr button:active,.di:active,.pl:active,.rx:active,.more:active{transform:scale(.95)}
.as summary:active{transform:scale(.985)}
.mic:active{transform:scale(.92)}.mic.recording:active{transform:scale(1.05)}
.toast{animation:pop .22s var(--ease)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* идёт сжатие контекста — чип золотой и дышит */
.chip.busy{background:#e0a43a;color:#fff;animation:chipPulse 1.6s var(--ease) infinite}
@keyframes chipPulse{50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.chip.busy{animation:none}}