#scr-chat{background:var(--chat-bg)}
#scr-chat::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 85% 8%,color-mix(in srgb,var(--blood) 10%,transparent),transparent 40%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
}
.statusbar{
  display:flex;justify-content:space-between;align-items:center;font:600 .74rem var(--f-chat);
  color:var(--header-ink);background:var(--header);padding:7px max(18px,env(safe-area-inset-right,0px)) 3px max(18px,env(safe-area-inset-left,0px));
  font-variant-numeric:tabular-nums;position:relative;z-index:5;
}
.sb-right{display:flex;gap:6px}
.sb-right .icon{width:15px;height:15px}
.chat-head{
  display:flex;align-items:center;gap:10px;background:var(--header);color:var(--header-ink);
  padding:4px max(8px,env(safe-area-inset-right,0px)) 10px max(4px,env(safe-area-inset-left,0px));
  position:relative;z-index:5;box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.chat-back,.chat-ic{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--header-ink)}
.chat-who{flex:1;min-width:0}
.chat-who b{display:block;font:600 1rem var(--f-chat);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-who small{display:block;font:400 .76rem var(--f-chat);color:var(--header-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.chat-who small.typing{color:var(--brand);font-style:italic}
.hud{
  display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px));
  position:relative;z-index:4;background:linear-gradient(var(--chat-bg),color-mix(in srgb,var(--chat-bg) 70%,transparent));
}
.hud-left,.hud-right{display:flex;align-items:center;gap:8px}
.hearts{display:flex;gap:3px}
.hearts .icon{width:19px;height:19px;color:var(--blood);transition:.25s;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--blood) 55%,transparent))}
.hearts .icon.gone{color:var(--line);filter:none;opacity:.6}
.hearts .icon.hit{animation:hit .55s}
@keyframes hit{30%{transform:scale(1.55) rotate(-14deg)}}
.combo{display:flex;align-items:center;gap:3px;font-weight:800;font-size:.78rem;color:var(--sun);opacity:0;transform:translateY(4px);transition:.25s}
.combo.on{opacity:1;transform:none}
.combo .icon{width:15px;height:15px}
.score-pill{font-weight:800;font-size:.82rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:6px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
.time-pill{display:flex;align-items:center;gap:5px;font-weight:800;font-size:.78rem;color:var(--brand);background:var(--surface);border:1px solid var(--line);padding:6px 10px;border-radius:999px;font-variant-numeric:tabular-nums;min-width:66px;justify-content:center;transition:color .2s,background .2s}
.time-pill .icon{width:15px;height:15px}
.time-pill.warn{color:var(--sun)}
.time-pill.danger{color:#fff;background:var(--blood);border-color:var(--blood);animation:blink .5s infinite}
.time-pill.idle{opacity:.5}
@keyframes blink{50%{opacity:.55}}

.msgs{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px max(12px,env(safe-area-inset-right,0px)) 12px max(12px,env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;gap:4px;position:relative;z-index:1;scroll-behavior:smooth;
}
.msg{
  max-width:84%;padding:7px 10px 8px;border-radius:10px;font:400 calc(1rem * var(--cs))/1.4 var(--f-chat);
  color:var(--bub-ink);position:relative;box-shadow:0 1px .5px rgba(0,0,0,.25);word-wrap:break-word;
  animation:pop .3s cubic-bezier(.3,1.5,.5,1) both;transform-origin:bottom left;
}
.msg.in{align-self:flex-start;background:var(--bub-in)}
.msg.out{align-self:flex-end;background:var(--bub-out);transform-origin:bottom right}
.msg .nm{display:block;font:700 .8rem var(--f-chat);margin-bottom:2px;color:var(--blood)}
.msg .meta{float:right;margin:7px 0 -4px 10px;font-size:.66rem;color:var(--meta);display:inline-flex;gap:3px;align-items:center;font-variant-numeric:tabular-nums}
.msg.out .meta{color:var(--meta-out)}
.msg .tk{width:16px;height:11px;color:var(--meta);transition:color .3s}
.msg .tk.read{color:var(--tick)}
.msg.deleted{font-style:italic;color:var(--meta);background:transparent;border:1px dashed var(--line);box-shadow:none}
@keyframes pop{from{opacity:0;transform:scale(.7) translateY(8px)}}
.sysm{
  align-self:center;background:var(--sys);color:var(--sys-ink);font:500 calc(.74rem * var(--cs))/1.4 var(--f-chat);
  padding:6px 12px;border-radius:9px;margin:9px 0;text-align:center;max-width:86%;box-shadow:0 1px .5px rgba(0,0,0,.2);animation:fade .35s both;
}
.sysm.day{background:transparent;text-transform:uppercase;font-size:.66rem;letter-spacing:.1em;color:var(--meta)}
.typingb{
  align-self:flex-start;background:var(--bub-in);border-radius:4px 12px 12px 12px;padding:11px 14px;display:flex;gap:4px;margin-top:4px;
  animation:pop .22s both;box-shadow:0 1px .5px rgba(0,0,0,.25);align-items:center;
}
.typingb i{width:6px;height:6px;border-radius:6px;background:var(--meta);animation:tdot 1.1s infinite}
.typingb i:nth-child(2){animation-delay:.15s}
.typingb i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-5px);opacity:1}}

.shot{max-width:76%;padding:4px}
.shot .media{width:min(240px,58vw);border-radius:12px;overflow:hidden;background:#0b1512;border:1px solid var(--line);position:relative;aspect-ratio:4/5;display:grid;place-items:center}
.shot .media .art{font-size:3.4rem;opacity:.9}
.shot .media .grain{position:absolute;inset:0;background:radial-gradient(circle at 40% 30%,rgba(255,255,255,.08),transparent 60%),repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px);mix-blend-mode:overlay}
.shot .media .lbl{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;font:500 .78rem var(--f-chat);background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff}
.shot .cap{display:block;padding:6px 6px 0;font:400 calc(.92rem * var(--cs))/1.4 var(--f-chat);color:var(--bub-ink)}
.voice{display:flex;align-items:center;gap:10px;min-width:180px}
.voice .play{width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;flex:none}
.voice .wave{display:flex;align-items:center;gap:2px;height:22px;flex:1}
.voice .wave i{width:2px;background:var(--meta);border-radius:2px;height:6px}
.voice .wave i:nth-child(3n){height:16px}
.voice .wave i:nth-child(2n){height:10px}
.voice small{font-size:.72rem;color:var(--meta)}

.composer{
  position:relative;z-index:5;background:var(--surface);border-top:1px solid var(--line);
  padding:10px max(10px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));
}
.tbar{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-bottom:8px}
.tbar i{display:block;height:100%;width:100%;background:var(--brand);transform-origin:left;transform:scaleX(1)}
.tbar.warn i{background:var(--sun)}
.tbar.danger i{background:var(--blood);animation:blink .5s infinite}
.task-line{display:flex;justify-content:space-between;gap:10px;font-size:.72rem;color:var(--ink-2);margin-bottom:7px;min-height:1em;font-weight:600}
.task-line span:last-child{color:var(--brand);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow{display:flex;align-items:flex-end;gap:8px}
.pillx{flex:1;min-width:0;display:flex;align-items:flex-end;background:var(--surface-2);border:1px solid var(--line);border-radius:22px;padding:4px 6px;min-height:48px;transition:box-shadow .2s,border-color .2s}
.pillx.focus{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 30%,transparent)}
.pillx.warn{border-color:var(--sun)}
.pillx.danger{border-color:var(--blood);box-shadow:0 0 0 2px color-mix(in srgb,var(--blood) 30%,transparent)}
.ic{display:grid;place-items:center;width:40px;height:40px;flex:none;color:var(--meta);border-radius:50%}
.ic .icon{width:22px;height:22px}
.field{flex:1;min-width:0;position:relative;padding:9px 4px;max-height:calc(6.4em * var(--cs));overflow-y:auto;cursor:text}
#render{font:400 calc(1.06rem * var(--cs))/1.4 var(--f-chat);white-space:pre-wrap;word-break:break-word;min-height:1.4em;color:var(--ghost)}
#render .ok{color:var(--bub-ink)}
#render .gh{color:var(--ghost)}
#render .miss{color:var(--bad);background:color-mix(in srgb,var(--bad) 22%,transparent);border-radius:3px;animation:shake .3s}
#render .cur{display:inline-block;width:2px;height:1.05em;background:var(--brand);vertical-align:-.16em;margin-left:1px;animation:car 1s steps(1) infinite}
#render .cur.err{background:var(--bad)}
#render.idle{color:var(--meta);font-style:italic}
#hiddenInput{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;color:transparent;background:transparent;caret-color:transparent;font-size:16px}
#hiddenInput:focus,#hiddenInput:focus-visible{outline:none}
.field.shake{animation:shake .35s}
@keyframes shake{15%{transform:translateX(-6px)}45%{transform:translateX(6px)}70%{transform:translateX(-4px)}90%{transform:translateX(3px)}}
.send{width:48px;height:48px;border-radius:50%;background:var(--line);color:var(--ink-2);display:grid;place-items:center;flex:none;transition:.2s;position:relative}
.send .icon{position:absolute;transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.send .s2{opacity:0;transform:scale(.4) rotate(-60deg)}
.send.ready{background:var(--send);color:var(--brand-ink)}
.send.ready .s1{opacity:0;transform:scale(.4)}
.send.ready .s2{opacity:1;transform:none}
.send.ready{animation:readyb .35s}
@keyframes readyb{50%{transform:scale(1.12)}}
.emoji-pad{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding-top:8px;max-height:140px;overflow-y:auto}
.emoji-pad button{font-size:1.5rem;padding:6px 0;border-radius:10px;min-height:44px}

#scr-chat.dark .msgs{filter:brightness(.7) contrast(1.1)}
#scr-chat.flicker::after,#scr-chat.flicker-hard::after{
  content:"";position:absolute;inset:0;z-index:40;pointer-events:none;
  background:rgba(0,0,0,.55);animation:flick .5s
}
#scr-chat.flicker-hard::after{background:var(--blood);animation:flick2 .6s}
@keyframes flick{0%,100%{opacity:0}12%{opacity:1}20%{opacity:0}34%{opacity:.8}44%{opacity:0}}
@keyframes flick2{0%,100%{opacity:0}8%{opacity:.5}16%{opacity:0}28%{opacity:.35}40%{opacity:0}}
#scr-chat.jolt .msgs{animation:shake .5s}

.kb-open .composer{padding-bottom:8px}