/* ===================================================================
   Попиздим — stickerpack on a matte black lid
   =================================================================== */

@font-face { font-family: "Unbounded"; src: url(fonts/unbounded-cyrillic.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; src: url(fonts/unbounded-latin.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url(fonts/onest-cyrillic.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url(fonts/onest-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --lid: #131316;
  --panel: #1b1b20;
  --panel-2: #23232a;
  --rule: #2a2a31;
  --text: #f2efe8;
  --text-2: #b4b1bb;
  --text-3: #8f8c98;
  --ink: #141216;
  --rim: #f6f3ec;
  --danger: #ff4d5e;
  --live: #c8f031;
  --afk: #8d8a99;

  --c0: #ff5a1f; --c1: #c8f031; --c2: #4d7cff; --c3: #ff4fa3; --c4: #ffd23f; --c5: #2fd6c3; --c6: #9b6bff;
  --room-hue: var(--afk);

  --lift-0: 0 1px 0 rgb(0 0 0 / .45), 0 4px 10px rgb(0 0 0 / .32);
  --lift-1: 0 2px 0 rgb(0 0 0 / .4), 0 16px 28px rgb(0 0 0 / .5);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --slap: .42s;

  --display: "Unbounded", "Onest", system-ui, sans-serif;
  --ui: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
  accent-color: var(--live);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font: 15px/1.45 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  background-color: var(--lid);
  /* matte plastic: a whisper of grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--live); color: var(--ink); }
input { caret-color: var(--live); }
* { scrollbar-width: thin; scrollbar-color: #34343c transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #34343c; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
:focus-visible { outline: 3px solid var(--live); outline-offset: 3px; }

@keyframes slap {
  0% { opacity: 0; transform: translateY(-10px) scale(1.22) rotate(calc(var(--tilt, 0deg) * -3)); }
  55% { opacity: 1; transform: translateY(0) scale(.95) rotate(var(--tilt, 0deg)); }
  100% { transform: translateY(0) scale(1) rotate(var(--tilt, 0deg)); }
}
@keyframes flash { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(.6); } }
@keyframes shout { 0%, 100% { transform: rotate(var(--tilt, -4deg)) scale(1); } 30% { transform: rotate(-9deg) scale(1.08); } 60% { transform: rotate(2deg) scale(.97); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- mascot ---------- */
.mascot { overflow: visible; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .45)) drop-shadow(0 12px 18px rgb(0 0 0 / .4)); }
.mascot .m-flash { transform-box: fill-box; transform-origin: center; }
.mascot.firing { animation: shout .5s var(--spring); }

/* ---------- avatars (stickers) ---------- */
.av {
  --s: 32px; --r: 2px;
  position: relative;
  width: var(--s); height: var(--s); flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c, #555);
  color: var(--ink);
  font: 800 calc(var(--s) * .42) / 1 var(--display);
  text-transform: uppercase;
  user-select: none;
  box-shadow: 0 0 0 var(--r) var(--rim), var(--lift-0);
  transition: box-shadow .25s var(--out), transform .3s var(--out);
}
.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av-sm { --s: 22px; --r: 2px; }
.av-md { --s: 36px; --r: 2.5px; }
.av-lg { --s: 112px; --r: 5px; }
.av-xl { --s: 128px; --r: 6px; }

/* ===================================================================
   Login
   =================================================================== */
.login {
  min-height: 100%;
  display: grid; place-items: center; align-content: center; gap: 28px;
  padding: 32px 16px 40px;
  overflow-y: auto;
}
.login-stage { display: grid; justify-items: center; gap: 4px; text-align: center; }
.mascot-hero { width: min(240px, 54vw); height: auto; --tilt: -4deg; transform: rotate(var(--tilt)); animation: slap .6s var(--spring) both; }
.mascot-hero .m-flash { animation: flash .18s steps(2) 6 1.2s; }
.mascot-hero:hover .m-flash { animation: flash .14s steps(2) infinite; }
.wordmark {
  margin: -6px 0 0;
  font: 900 clamp(40px, 9vw, 76px) / .95 var(--display);
  letter-spacing: -.035em;
  color: var(--ink);
  -webkit-text-stroke: .16em var(--rim);
  paint-order: stroke fill;
  transform: rotate(-2.5deg);
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / .5)) drop-shadow(0 14px 18px rgb(0 0 0 / .45));
  animation: slap .5s var(--spring) .12s both;
  --tilt: -2.5deg;
}
.login-sub { margin: 14px 0 0; color: var(--text-2); font-size: 16px; }

.login-card {
  width: 100%; max-width: 380px;
  background: var(--panel);
  border-radius: 28px;
  padding: 28px 24px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  box-shadow: 0 0 0 1px var(--rule), var(--lift-1);
  animation: slap .5s var(--spring) .22s both;
}
.av-pick { position: relative; cursor: pointer; border-radius: 50%; display: block; transition: transform .3s var(--out); }
.av-pick:hover { transform: rotate(-4deg) scale(1.03); }
.av-pick .av { background-color: var(--panel-2); color: var(--text-2); font: 600 13px/1.2 var(--ui); text-transform: none; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px #44444e; }
.av-pick .av.has-img, .av-pick .av.has-letter { box-shadow: 0 0 0 6px var(--rim), var(--lift-1); }
.av-pick .av.has-letter { background-color: var(--c); color: var(--ink); font: 900 52px/1 var(--display); }
.av-pick-badge {
  position: absolute; right: -2px; bottom: -2px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--live) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141216' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow: 0 0 0 4px var(--rim), var(--lift-0);
}
.link-btn { background: none; border: 0; color: var(--text-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 0; margin-top: -6px; }

.field { width: 100%; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > span { font: 700 11.5px/1.2 var(--display); color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; gap: 8px; }
.field output { color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.field input:not([type]), .field input[maxlength], .field select, .keybind {
  width: 100%; height: 48px; padding: 0 16px;
  background: var(--lid); border: 2px solid var(--rule); border-radius: 14px;
  outline: none; transition: border-color .2s;
}
.field input::placeholder, .chat-form input::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus, .keybind:focus-visible { border-color: var(--live); }
.field input[type=range] { width: 100%; height: 24px; margin: 0; }

.btn-slap {
  position: relative;
  width: 100%; height: 54px; border: 0; border-radius: 16px;
  background: var(--live); color: var(--ink);
  font: 800 17px/1 var(--display); letter-spacing: -.01em;
  box-shadow: 0 0 0 3px var(--rim), var(--lift-0);
  transition: transform .25s var(--out), box-shadow .25s var(--out);
}
.btn-slap:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 0 0 3px var(--rim), var(--lift-1); }
.btn-slap:active { transform: translateY(1px) scale(.97); }
.btn-slap:disabled { opacity: .65; cursor: wait; transform: none; }
.login-err { margin: 0; color: var(--danger); font-size: 14px; text-align: center; }
.login-err:empty { display: none; }
.login-fine { margin: 0; color: var(--text-3); font-size: 13px; text-align: center; }

/* ===================================================================
   App shell
   =================================================================== */
.app { height: 100%; height: 100dvh; display: grid; grid-template-columns: 304px 1fr; }
.rail { display: flex; flex-direction: column; min-height: 0; background: rgb(0 0 0 / .22); border-right: 1px solid var(--rule); }

.brand { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; }
.mascot-logo { width: 78px; height: 78px; margin: -4px -6px -14px -12px; --tilt: -8deg; transform: rotate(var(--tilt)); transition: transform .3s var(--out); }
.mascot-logo .m-flash { opacity: 0; transition: opacity .06s; }
.brand { overflow: visible; position: relative; z-index: 2; }
.mascot-logo.firing .m-flash { opacity: 1; animation: flash .12s steps(2) infinite; }
.brand-name { font: 800 19px/1 var(--display); letter-spacing: -.02em; }
.online { margin-left: auto; white-space: nowrap; font: 600 12px/1 var(--ui); color: var(--text-2); display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.online.off::before { background: var(--danger); }

/* ---------- room stickers ---------- */
.rooms { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.room-wrap { position: relative; }
.room {
  --tilt: 0deg;
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 14px;
  border: 0; border-radius: 14px;
  background: var(--hue); color: var(--ink);
  font: 700 14.5px/1.15 var(--display); letter-spacing: -.01em; text-align: left;
  box-shadow: 0 0 0 3px var(--rim), var(--lift-0);
  transform: rotate(var(--tilt));
  transition: transform .35s var(--out), box-shadow .3s var(--out);
}
.room:hover { transform: rotate(calc(var(--tilt) * .4)) translateY(-1px); }
.room.active { transform: rotate(0deg) translateX(6px) scale(1.04); box-shadow: 0 0 0 3px var(--rim), 0 0 0 6px var(--ink), var(--lift-1); }
.room.afk { --hue: var(--afk); }
.room svg { width: 18px; height: 18px; flex: none; }
.room .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .count { font: 700 12px/1 var(--ui); font-variant-numeric: tabular-nums; opacity: .8; }
.room-wrap:not(.afk-wrap) .room { padding-right: 20px; }
.room-wrap.fresh .room { animation: slap var(--slap) var(--spring) both; }
.room-edit-mini {
  position: absolute; top: -12px; right: -10px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: var(--panel-2); color: var(--text);
  box-shadow: 0 0 0 2px var(--rim), var(--lift-0);
  opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--out);
}
.room-edit-mini svg { width: 14px; height: 14px; }
.room-wrap:hover .room-edit-mini, .room-edit-mini:focus-visible, .room-wrap.active .room-edit-mini { opacity: 1; transform: scale(1); }
.members { list-style: none; margin: 10px 0 0; padding: 0 0 0 10px; display: flex; flex-direction: column; gap: 3px; }
.member { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 6px; border-radius: 8px; color: var(--text-2); font-size: 14px; }
.member .nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member.me .nick, .member.speaking .nick { color: var(--text); }
.member.speaking .av { box-shadow: 0 0 0 2px var(--hue), var(--lift-0); }
.flags { display: flex; gap: 3px; color: var(--danger); }
.flags svg { width: 15px; height: 15px; }
.room-add {
  width: 100%; min-height: 46px; padding: 0 14px;
  display: flex; align-items: center; gap: 10px;
  border: 2px dashed #3d3d46; border-radius: 14px; background: none;
  color: var(--text-2); font: 700 13.5px/1 var(--display);
  transition: border-color .2s, color .2s, transform .3s var(--out);
}
.room-add svg { width: 18px; height: 18px; }
.room-add:hover { border-color: var(--live); color: var(--text); transform: rotate(-1deg); }

/* ---------- dock ---------- */
.dock { flex: none; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: rgb(0 0 0 / .25); }
.me { display: flex; align-items: center; gap: 6px; }
.me-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.me-who .meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.me-who b { font: 700 14px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-who small { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-who small.live { color: var(--live); }
.me-btns { display: flex; gap: 0; }
.me-btns .tool { width: 34px; height: 36px; border-radius: 10px; }
.tool {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 12px; background: none; color: var(--text-2);
  transition: background .15s, color .15s, transform .25s var(--out);
}
.tool svg { width: 20px; height: 20px; }
.tool:hover { background: var(--panel-2); color: var(--text); }
.tool:active { transform: scale(.9); }
.tool.off { background: var(--danger); color: var(--ink); box-shadow: 0 0 0 2px var(--rim); }
.tool.off:hover { background: #ff6876; color: var(--ink); }

.ptt {
  width: 100%; height: 56px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 16px;
  background: var(--panel-2); color: var(--text);
  font: 700 14px/1 var(--display);
  box-shadow: 0 0 0 2px #3d3d46;
  user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none;
  transition: background .12s, transform .2s var(--spring), box-shadow .2s;
}
.ptt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); transition: background .12s, transform .2s var(--spring); }
.ptt.down { background: var(--live); color: var(--ink); box-shadow: 0 0 0 3px var(--rim), var(--lift-1); transform: scale(1.02); }
.ptt.down .ptt-dot { background: var(--ink); transform: scale(1.3); }

/* ===================================================================
   Main: stage + chat
   =================================================================== */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.room-head { flex: none; display: flex; align-items: center; gap: 14px; height: 68px; padding: 0 22px; }
.room-tag {
  --tilt: -1.5deg;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 12px; border-radius: 12px;
  background: var(--room-hue); color: var(--ink);
  font: 800 17px/1 var(--display); letter-spacing: -.02em; white-space: nowrap;
  box-shadow: 0 0 0 3px var(--rim), var(--lift-0);
  transform: rotate(var(--tilt));
}
.room-tag svg { width: 19px; height: 19px; }
.room-tag.swap { animation: slap var(--slap) var(--spring); }
.room-hint { color: var(--text-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-edit { margin-left: auto; }

.banner { margin: 0 22px 8px; padding: 11px 16px; border-radius: 14px; background: #2a1518; color: #ffd0d5; font-size: 14px; box-shadow: 0 0 0 1px #5a2129; }
.banner.click { cursor: pointer; background: #1e2410; color: #e6f7b0; box-shadow: 0 0 0 1px #4b5c1a; }

.stage {
  position: relative; isolation: isolate;
  flex: 1 1 58%; min-height: 0; overflow-y: auto;
  padding: 26px 22px 30px;
  display: flex; flex-wrap: wrap; align-content: safe center; justify-content: center; gap: 30px 34px;
  view-transition-name: stage;
}

.peer { --tilt: 0deg; position: relative; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.peer.fresh { animation: slap var(--slap) var(--spring) both; }
.peeling { position: absolute; margin: 0; pointer-events: none; z-index: 3; transform-origin: 85% 10%; animation: peel .5s var(--out) forwards; }
@keyframes peel {
  0% { transform: rotate(var(--tilt, 0deg)); opacity: 1; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3)); }
  35% { transform: perspective(400px) rotateX(-28deg) rotate(8deg) translateY(-14px); opacity: 1; filter: drop-shadow(0 18px 18px rgb(0 0 0 / .45)); }
  100% { transform: perspective(400px) rotateX(-70deg) rotate(22deg) translate(40px, -60px) scale(.8); opacity: 0; filter: drop-shadow(0 30px 26px rgb(0 0 0 / 0)); }
}
.peer .av { transform: rotate(var(--tilt)); }
.peer .tape {
  --lvl: 0;
  max-width: 100%;
  padding: 6px 12px; border-radius: 9px;
  background: var(--rim); color: var(--ink);
  font-family: var(--display); font-size: 14px; line-height: 1.1; letter-spacing: -.01em;
  font-weight: calc(560 + var(--lvl) * 340);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: var(--lift-0);
  transform: rotate(calc(var(--tilt) * -1.4));
  transition: transform .3s var(--out), background .2s, font-weight .12s linear;
}
.peer .flags { position: absolute; top: 2px; right: 14px; }
.peer .flags svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--danger); color: var(--ink); box-shadow: 0 0 0 3px var(--rim), var(--lift-0); }
.peer .state { min-height: 16px; font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; margin-top: -6px; }
.peer .state.bad { color: var(--danger); }
.peer .state.wait::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.peer .av { transform-origin: 18% 92%; }
.peer.speaking .av {
  transform: perspective(420px) rotateX(14deg) rotateY(-10deg) rotate(-4deg) translateY(-6px);
  box-shadow: 0 0 0 5px var(--room-hue), 0 0 0 9px var(--rim), 10px 22px 26px -4px rgb(0 0 0 / .62), 2px 4px 0 rgb(0 0 0 / .35);
}
.peer.speaking .tape { background: var(--room-hue); transform: rotate(0deg) translateY(-4px); }
.peer.afk-peer .av { filter: grayscale(.7) brightness(.8); }
.vol { width: 130px; display: flex; align-items: center; gap: 6px; color: var(--text-3); opacity: .55; transition: opacity .2s; margin-top: -4px; }
.peer:hover .vol, .vol:focus-within { opacity: 1; }
.vol svg { width: 15px; height: 15px; flex: none; }
.vol input { flex: 1; min-width: 0; height: 18px; accent-color: var(--room-hue); }

.empty { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 16px 0; text-align: center; color: var(--text-2); max-width: 46ch; margin: 0 auto; }
.empty b { font: 800 20px/1.15 var(--display); color: var(--text); letter-spacing: -.02em; }
.empty .btn-ghost { margin-top: 6px; }

.btn-ghost {
  flex: none; height: 40px; padding: 0 16px; border-radius: 12px; border: 0;
  background: var(--panel-2); color: var(--text); font: 700 13px/1 var(--display);
  box-shadow: 0 0 0 2px #3d3d46;
  transition: box-shadow .2s, transform .25s var(--out), background .2s;
}
.btn-ghost:hover { box-shadow: 0 0 0 2px var(--live); transform: rotate(-1deg); }
.btn-ghost.on { background: var(--live); color: var(--ink); box-shadow: 0 0 0 2px var(--rim); }

/* chat */
.chat { flex: 1 1 42%; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); background: rgb(0 0 0 / .18); }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 22px 6px; display: flex; flex-direction: column; }
.chat-log .none { margin: auto; color: var(--text-3); font-size: 14px; }
.msg { display: flex; gap: 12px; padding: 7px 0 2px; }
.msg.cont { padding-top: 0; }
.msg.fresh { animation: msgIn .35s var(--out) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.msg .body { min-width: 0; flex: 1; }
.msg .head { display: flex; gap: 8px; align-items: baseline; }
.msg .head b { font: 700 14px/1.2 var(--display); color: var(--who, var(--text)); letter-spacing: -.01em; }
.msg .head time { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.msg .text { overflow-wrap: anywhere; white-space: pre-wrap; color: #e3e0e8; max-width: 72ch; }
.msg .text a { color: var(--live); text-underline-offset: 3px; }
.msg.cont .av { visibility: hidden; height: 0; }
.chat-form { flex: none; display: flex; gap: 8px; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); }
.chat-form input {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px;
  background: var(--panel); border: 2px solid var(--rule); border-radius: 14px; outline: none; transition: border-color .2s;
}
.chat-form input:focus { border-color: var(--live); }
.tool.send { width: 46px; height: 46px; border-radius: 14px; background: var(--live); color: var(--ink); box-shadow: 0 0 0 2px var(--rim); }
.tool.send:hover { background: #d6f75a; color: var(--ink); }

/* ===================================================================
   Sheets (dialogs)
   =================================================================== */
.sheet {
  width: min(660px, calc(100% - 24px)); max-height: min(880px, calc(100dvh - 24px));
  padding: 0; border: 0; border-radius: 26px;
  background: var(--panel); color: var(--text);
  box-shadow: 0 0 0 1px var(--rule), 0 40px 90px rgb(0 0 0 / .6);
  overflow: hidden;
}
.sheet[open] { animation: slap .38s var(--spring); }
.sheet::backdrop { background: rgb(8 8 10 / .72); }
.room-sheet { width: min(440px, calc(100% - 24px)); }
.sheet-wrap { display: flex; flex-direction: column; max-height: inherit; margin: 0; outline: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 12px 24px; }
.sheet-head h2 { margin: 0; font: 800 20px/1.1 var(--display); letter-spacing: -.02em; }
.sheet-body { overflow-y: auto; padding: 4px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.sheet-foot { display: flex; gap: 10px; padding: 14px 24px 22px; border-top: 1px solid var(--rule); }
.sheet-foot .btn-slap { flex: 1; width: auto; }
.btn-danger { height: 54px; padding: 0 16px; border-radius: 16px; border: 0; background: none; color: var(--danger); font: 700 13.5px/1 var(--display); box-shadow: 0 0 0 2px #5a2129; transition: background .2s; }
.btn-danger:hover { background: #2a1518; }
.btn-danger.confirm { background: var(--danger); color: var(--ink); box-shadow: 0 0 0 3px var(--rim); }

.room-preview { display: flex; justify-content: center; padding: 10px 0 4px; }
.room-preview .room { max-width: 280px; transform: rotate(-2deg); box-shadow: 0 0 0 3px var(--rim), var(--lift-1); }
.swatches { display: flex; gap: 12px; flex-wrap: wrap; padding: 4px 2px; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--hue); box-shadow: 0 0 0 2px #3d3d46; transition: transform .25s var(--out), box-shadow .2s; }
.swatch:hover { transform: scale(1.1) rotate(-6deg); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--rim), var(--lift-0); transform: scale(1.12); }
.note { margin: 0; font-size: 13px; color: var(--text-2); }
.note b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.set-sec { display: flex; flex-direction: column; gap: 14px; }
.set-sec + .set-sec { border-top: 1px solid var(--rule); padding-top: 20px; }
.set-sec h3 { margin: 0; font: 800 15px/1.2 var(--display); letter-spacing: -.01em; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.keybind { font: 700 14px/1 var(--display); text-align: left; }
.keybind.wait { border-color: var(--live); color: var(--live); }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { position: relative; display: flex; gap: 10px; padding: 13px 14px; border-radius: 16px; background: var(--lid); box-shadow: 0 0 0 2px var(--rule); cursor: pointer; transition: box-shadow .2s, transform .3s var(--out), background .2s; }
.choice:hover { box-shadow: 0 0 0 2px #44444e; }
.choice input { margin: 3px 0 0; flex: none; }
.choice span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.choice b { font: 700 14px/1.2 var(--display); }
.choice small { color: var(--text-2); font-size: 12.5px; line-height: 1.38; }
.choice:has(input:checked) { background: var(--live); color: var(--ink); box-shadow: 0 0 0 3px var(--rim), var(--lift-0); transform: rotate(-.6deg); }
.choice:has(input:checked) small { color: #2c3410; }
.choice:has(input:checked) input { accent-color: var(--ink); }
.choice.hero-choice { grid-column: 1 / -1; }
.choice.hero-choice b::after { content: "лучший"; display: inline-block; margin-left: 10px; padding: 4px 8px; border-radius: 6px; background: var(--c3); color: var(--ink); font: 800 10px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; vertical-align: 2px; box-shadow: 0 0 0 2px var(--rim); transform: rotate(-6deg); }
.choice.disabled { opacity: .4; pointer-events: none; }
.toggles { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.toggle { display: flex; align-items: center; gap: 9px; font-size: 14.5px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; margin: 0; }

.meter-row { display: flex; gap: 12px; align-items: center; }
.meter { position: relative; flex: 1; height: 38px; border-radius: 12px; background: var(--lid); box-shadow: inset 0 0 0 2px var(--rule); overflow: hidden; }
.meter-fill { position: absolute; inset: 0; background: #4a4a54; transform: scaleX(0); transform-origin: left; transition: transform .06s linear; }
.meter.on .meter-fill { background: var(--live); }
.meter-thr { position: absolute; top: 4px; bottom: 4px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--rim); }
.meter input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; }
.meter input[type=range]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.meter input[type=range]::-moz-range-track { height: 100%; background: transparent; }
.meter input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 38px; background: transparent; }
.meter input[type=range]::-moz-range-thumb { width: 18px; height: 38px; background: transparent; border: 0; }
.meter.ptt .meter-thr { display: none; }
.meter.ptt input { pointer-events: none; }

.va-opts, .ptt-opts { display: flex; flex-direction: column; gap: 10px; }
.btn-calibrate {
  position: relative; overflow: hidden; align-self: flex-start;
  height: 46px; padding: 0 18px; border: 0; border-radius: 14px;
  background: var(--panel-2); color: var(--text); font: 700 13.5px/1 var(--display);
  box-shadow: 0 0 0 2px #3d3d46;
  transition: transform .25s var(--out), box-shadow .2s;
}
.btn-calibrate:hover { box-shadow: 0 0 0 2px var(--live); }
.cal-fill { position: absolute; inset: 0; background: var(--live); transform: scaleX(0); transform-origin: left; }
.cal-text { position: relative; }
.btn-calibrate.running { color: var(--ink); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 50;
  max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 14px;
  background: var(--rim); color: var(--ink); font: 600 14px/1.35 var(--ui);
  box-shadow: var(--lift-1);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 24px) rotate(-1.5deg);
  transition: opacity .2s, transform .35s var(--spring);
}
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1.5deg); }

/* view transition between rooms */
::view-transition-old(stage) { animation: .22s var(--out) both vtOut; }
::view-transition-new(stage) { animation: .42s var(--spring) both vtIn; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-14px) scale(.98); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* ===================================================================
   Phone
   =================================================================== */
@media (max-width: 760px) {
  .app { display: flex; flex-direction: column; }
  .rail { display: contents; }
  .brand { order: 1; padding: 10px 14px 6px; }
  .mascot-logo { width: 56px; height: 56px; margin: -2px -4px -10px -8px; }
  .brand-name { font-size: 17px; }
  .rooms { order: 2; flex: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 10px 14px 14px; gap: 12px; scrollbar-width: none; }
  .rooms::-webkit-scrollbar { display: none; }
  .room-wrap { flex: none; }
  .room { width: auto; min-height: 42px; padding: 0 14px; font-size: 13.5px; white-space: nowrap; }
  .room .name { overflow: visible; }
  .members, .room-edit-mini { display: none; }
  .room-add { width: auto; min-height: 42px; flex: none; white-space: nowrap; }
  .main { order: 3; flex: 1; }
  .room-head { height: 48px; padding: 0 14px; }
  .room-tag { display: none; }
  .dock { order: 4; }
  .stage { padding: 14px 12px 20px; gap: 22px 18px; }
  .room.active { transform: rotate(0deg) translateY(-2px) scale(1.03); }
  .peer { width: 112px; gap: 12px; }
  .av-lg { --s: 84px; --r: 4px; }
  .peer .flags { right: 4px; }
  .peer .flags svg { width: 26px; height: 26px; }
  .vol { width: 104px; opacity: 1; }
  .banner { margin: 0 12px 8px; }
  .chat-log { padding: 10px 14px 4px; }
  .chat-form { padding: 8px 12px 10px; }
  .toast { bottom: 96px; }
  .sheet { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .room-sheet { height: auto; max-height: 100dvh; margin: auto 0 0; border-radius: 26px 26px 0 0; }
  .sheet-body { padding: 4px 16px 24px; }
  .sheet-head { padding: 14px 10px 10px 16px; }
  .sheet-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .set-grid, .choices { grid-template-columns: 1fr; }
  .meter-row { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-old(stage), ::view-transition-new(stage) { animation: none; }
}

/* ---------- people: drag between rooms, person sheet ---------- */
.peer-face { padding: 0; border: 0; background: none; border-radius: 50%; cursor: grab; }
.peer-face:disabled { cursor: default; }
.peer-face:not(:disabled):hover .av { transform: rotate(calc(var(--tilt) * -.5)) translateY(-2px); }
.member { cursor: grab; }
.member:hover { background: rgb(255 255 255 / .04); }
.dragging-person .room-wrap .room { transition: transform .2s var(--out), box-shadow .2s var(--out); }
.room-wrap.drop-target .room { transform: rotate(0deg) scale(1.06); box-shadow: 0 0 0 3px var(--rim), 0 0 0 7px var(--hue), var(--lift-1); }
.person-sheet { width: min(420px, calc(100% - 24px)); }
.person-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person-who h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-rooms { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 2px; }
.person-rooms .room:disabled { opacity: .45; cursor: default; transform: rotate(var(--tilt)); }
.btn-danger.wide { flex: 1; }
@media (max-width: 760px) {
  .person-sheet { width: 100%; max-width: none; height: auto; max-height: 100dvh; margin: auto 0 0; border-radius: 26px 26px 0 0; }
}

/* ---------- private rooms ---------- */
.room.private .name::after { content: none; }
.private-toggle { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 16px; background: var(--lid); box-shadow: 0 0 0 2px var(--rule); cursor: pointer; transition: box-shadow .2s, background .2s; }
.private-toggle input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.private-toggle span { display: flex; flex-direction: column; gap: 3px; }
.private-toggle b { font: 700 14px/1.2 var(--display); }
.private-toggle small { color: var(--text-2); font-size: 12.5px; line-height: 1.38; }
.private-toggle:has(input:checked) { background: var(--live); color: var(--ink); box-shadow: 0 0 0 3px var(--rim), var(--lift-0); }
.private-toggle:has(input:checked) small { color: #2c3410; }
.private-toggle:has(input:checked) input { accent-color: var(--ink); }

.auto-toggle { align-self: stretch; font-size: 14px; color: var(--text-2); }
.auto-toggle input { flex: none; }