:root {
  --bg: #0c0e14;
  --panel: #141821;
  --panel-2: #1b2130;
  --line: rgba(255, 255, 255, 0.07);
  --text: #f3f5fa;
  --muted: #8b93a7;
  --accent: #5fd46a;
  --accent-dim: rgba(95, 212, 106, 0.16);
  --danger: #ff6b7a;
  --me: #1a3a24;
  --them: #222838;
  --radius: 20px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tab-bar-h: 56px;
  --tab-bar-float: 14px;
  --nav-reserve: calc(var(--tab-bar-h) + var(--tab-bar-float) + var(--safe-b) + 8px);
  --kb-h: 280px;
  --emoji-dock-h: 320px;
  --compose-reserve: 116px;
  --compose-lift: 0px;
  --input-dock-bottom: 0px;
  --composer-bottom: 0px;
  /* шапка: padding-top 14 + кнопка 36 + padding-bottom 12 */
  --head-h: calc(62px + var(--safe-t));
  --banner-top: calc(var(--head-h) + 8px);
  --banner-stack: 56px;
  --menu-glass: color-mix(in srgb, var(--panel) 88%, transparent);
  --confirm-glass: color-mix(in srgb, var(--panel) 86%, transparent);
  --confirm-scrim: rgba(8, 10, 16, 0.42);
}

html[data-platform="ios"],
html[data-platform="android"] {
  --tab-bar-float: 0px;
  --nav-reserve: calc(var(--tab-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  min-height: 100%;
  min-height: 100dvh;
  min-height: 100lvh;
  min-height: -webkit-fill-available;
  overflow: hidden;
  /* Один сплошной фон на весь экран — без деления «верх/низ» */
  background: #0c0e14;
  background-color: #0c0e14;
}
html {
  color-scheme: dark;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #0c0e14;
}
html[data-session="1"] #auth { display: none !important; }
html[data-session="1"] #app { display: grid !important; }
html:not([data-session="1"]) #app { display: none !important; }

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
body {
  margin: 0;
  font: 15px/1.45 ui-sans-serif, system-ui, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  background: #0c0e14;
  color: var(--text);
  min-height: 100dvh;
  min-height: 100lvh;
  min-height: -webkit-fill-available;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.app {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  padding-bottom: 0;
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  overflow: hidden;
  min-height: 0;
  background: #0c0e14;
}
/* Клавиатура / эмодзи — высота из JS */
html.kb-open .app,
html.emoji-kb .app {
  top: var(--app-top, 0px);
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: var(--app-h, 100dvh);
  inset: auto;
}
.app.show-chat {
  padding-bottom: var(--kb-overlap, 0px);
}
.auth {
  --auth-ink: #f4f1ea;
  --auth-muted: #9aa3b5;
  --auth-red: #e84855;
  --auth-panel: rgba(14, 16, 22, 0.72);
  position: fixed;
  top: var(--app-top, 0px);
  left: 0;
  width: 100%;
  height: var(--app-h, 100dvh);
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: Manrope, "Segoe UI", sans-serif;
  background: #07080c;
  color: var(--auth-ink);
}
.auth-stage {
  position: relative;
  width: 100%;
  min-height: var(--app-h, 100dvh);
  display: grid;
  align-content: end;
  justify-items: center;
  padding: calc(18px + var(--safe-t)) 16px calc(22px + var(--safe-b));
  overflow: hidden;
}
.auth-hero {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 18%, rgba(232, 72, 85, 0.28), transparent 62%),
    radial-gradient(55% 40% at 80% 80%, rgba(40, 70, 120, 0.22), transparent 70%),
    linear-gradient(180deg, #10131b 0%, #07080c 58%, #05060a 100%);
}
.auth-hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
}
.auth-hero-glow {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(70vw, 340px);
  height: min(70vw, 340px);
  transform: translate(-50%, -18%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,72,85,0.35), transparent 68%);
  filter: blur(8px);
  animation: auth-glow 5.5s ease-in-out infinite alternate;
}
.auth-hero-mark {
  position: absolute;
  left: 50%;
  top: 12%;
  width: min(58vw, 280px);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 28px 50px rgba(0,0,0,0.55));
  animation: auth-float 6s ease-in-out infinite;
}
@keyframes auth-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}
@keyframes auth-glow {
  from { opacity: 0.7; transform: translate(-50%, -18%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -18%) scale(1.06); }
}
.auth .tabs { margin-top: 0; }
.auth-card {
  position: relative;
  z-index: 2;
  width: min(400px, 100%);
  margin-top: min(42vh, 320px);
  background: var(--auth-panel);
  border: 1px solid color-mix(in srgb, #e84855 28%, rgba(255,255,255,0.12));
  border-radius: 28px 28px 22px 22px;
  padding: 26px 22px 18px;
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: auth-card-in .55s ease both;
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.auth .brand { text-align: center; margin-bottom: 18px; }
.auth .brand-auth-title {
  margin: 0 0 8px;
  font-family: Syne, Manrope, sans-serif;
  font-size: clamp(34px, 9vw, 44px);
  letter-spacing: -0.06em;
  font-weight: 800;
  line-height: 0.95;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  color: var(--auth-ink);
}
.auth .brand-auth-title .brand-x {
  color: #ff3b4e;
  font-weight: 800;
}
.auth .brand p {
  margin: 0;
  color: var(--auth-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.auth .field span { color: var(--auth-muted); }
.auth .field input {
  background: rgba(8, 10, 14, 0.75);
  border-color: rgba(255,255,255,0.12);
  color: var(--auth-ink);
}
.auth .field input:focus {
  border-color: color-mix(in srgb, var(--auth-red) 55%, #fff);
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 72, 85, 0.18);
}
.auth .auth-tabs {
  border-color: rgba(255,255,255,0.14);
  background: rgba(8, 10, 14, 0.55);
}
.auth .tab.is-on {
  background: color-mix(in srgb, var(--auth-red) 88%, #fff);
  color: #fff;
}
.auth .auth-submit {
  background: linear-gradient(135deg, #f05a66, #c83340);
  border: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 28px rgba(232, 72, 85, 0.28);
}
.auth .auth-submit:active { transform: scale(0.98); }
.auth .auth-recover-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  color: var(--auth-muted);
}
.auth .recover-form { margin-top: 4px; }
.auth .recover-lead { margin: 0 0 12px; text-align: center; }
.auth .recover-q {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(232, 72, 85, 0.14), transparent 55%),
    rgba(8, 10, 14, 0.72);
  border: 1px solid color-mix(in srgb, #e84855 32%, rgba(255,255,255,0.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.auth .recover-q[hidden] { display: none !important; }
.auth .recover-q-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff8a93;
  margin-bottom: 8px;
}
.auth .recover-q-spoiler {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.35);
  color: var(--auth-ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  overflow: hidden;
  transition: background .2s ease, box-shadow .2s ease;
}
.auth .recover-q-spoiler:hover {
  background: rgba(0, 0, 0, 0.45);
}
.auth .recover-q-text {
  display: block;
  filter: blur(7px);
  opacity: 0.55;
  user-select: none;
  transition: filter .25s ease, opacity .25s ease;
}
.auth .recover-q-hint {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(244, 241, 234, 0.88);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18));
  pointer-events: none;
  transition: opacity .2s ease;
}
.auth .recover-q-spoiler.is-on .recover-q-text {
  filter: none;
  opacity: 1;
  user-select: text;
}
.auth .recover-q-spoiler.is-on .recover-q-hint {
  opacity: 0;
}
.auth .recover-q-spoiler.is-on {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(232, 72, 85, 0.25);
}
.auth .auth-recover-back {
  display: flex;
  margin: 20px auto 4px;
  padding: 0;
}
.auth .auth-recover-back .menu-ico svg,
.auth .auth-recover-back .menu-ico .fa-solid {
  width: 22px;
  height: 22px;
}
.access-blocked {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg, #0c0e14);
}
.access-blocked.is-modal {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}
.access-blocked-card {
  width: min(420px, 100%);
  padding: 28px 24px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.access-blocked-logo {
  margin: 0 auto 16px;
  border-radius: 18px;
}
.access-blocked-card h1 {
  margin: 0 0 10px;
  font-size: 22px;
}
.access-blocked-kind {
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--danger, #e84855);
}
.access-blocked-reason {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.45;
}
.access-blocked-info {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
}
.access-blocked-info code {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--panel-2);
}
.access-blocked-card .btn {
  min-width: 140px;
}
.role-notice-card .sheet-head {
  align-items: flex-start;
}
.role-notice-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.role-notice-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
  color: var(--accent);
}
.role-notice-icon svg {
  width: 20px;
  height: 20px;
}
.role-notice-body {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.role-notice-body p {
  margin: 0 0 10px;
}
.role-howto {
  margin-top: 8px !important;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel-2);
  font-size: 13px;
  color: var(--text);
}
.bot-kb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.bot-kb-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--accent, #5FD46A);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.bot-kb-btn:hover { background: var(--panel); }
.bot-kb-btn:active { transform: scale(0.97); }
.bubble.them .bot-kb-btn {
  border-color: color-mix(in srgb, var(--accent, #5FD46A) 35%, var(--line));
}
.role-notice-list {
  margin: 0 0 12px;
  padding-left: 1.2em;
  text-align: left;
}
.role-notice-list li {
  margin: 4px 0;
}
.role-notice-card #role-notice-ok {
  width: 100%;
}
.auth .legal-mini a { color: var(--auth-muted); }
.auth .terms-check { color: var(--auth-muted); }
.auth .terms-check a { color: #ff8a93; }
.captcha-wrap {
  display: grid;
  gap: 8px;
  margin: 4px 0 12px;
}
.captcha-wrap > span {
  color: var(--auth-muted);
  font-size: 13px;
}
.captcha-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.captcha-img {
  display: block;
  width: 188px;
  height: 58px;
  border-radius: 12px;
  background: #0b0d12;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.captcha-refresh {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(8, 10, 14, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--auth-ink);
  font-size: 18px;
}
.captcha-refresh:active { transform: rotate(90deg); }
.captcha-wrap input[name="captcha"] {
  background: rgba(8, 10, 14, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--auth-ink);
  border-radius: 12px;
  padding: 10px 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.captcha-wrap input[name="captcha"]:focus {
  border-color: color-mix(in srgb, var(--auth-red) 55%, #fff);
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 72, 85, 0.18);
}
.auth-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (min-width: 720px) {
  .auth-stage {
    align-content: center;
    padding: 40px 24px;
  }
  .auth-hero-mark {
    top: 50%;
    left: 22%;
    width: min(34vw, 360px);
    transform: translate(-50%, -50%);
    animation: auth-float-desk 7s ease-in-out infinite;
  }
  .auth-hero-glow {
    top: 50%;
    left: 22%;
    transform: translate(-50%, -50%);
  }
  .auth-card {
    margin-top: 0;
    margin-left: min(28vw, 280px);
    width: min(420px, 100%);
  }
}
@keyframes auth-float-desk {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 12px)); }
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--panel-2);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
}
.tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 0;
  padding: 10px;
  font-weight: 600;
  border-right: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
}
.tab:last-child { border-right: 0; }
.tab.is-on {
  background: var(--bg);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.tab:hover:not(.is-on) { background: color-mix(in srgb, var(--panel-2) 80%, transparent); color: var(--text); }
.tab:active { transform: scale(0.98); }

.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field span { font-size: 12px; color: var(--muted); font-weight: 600; }
.field input, .field textarea, .search input, .composer textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
}
.pass-wrap {
  position: relative;
  display: block;
}
.pass-wrap input {
  width: 100%;
  padding-right: 46px;
}
.pass-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pass-toggle:hover { color: var(--text); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.pass-toggle:active { transform: translateY(-50%) scale(0.94); }
.field textarea { resize: none; min-height: 84px; }
.field input:focus, .search input:focus, .composer textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.btn, .send {
  border: 0;
  background: var(--accent);
  color: #08210c;
  font-weight: 800;
  border-radius: 14px;
  padding: 12px 16px;
}
.btn { width: 100%; margin-top: 8px; transition: filter .15s ease, transform .1s ease; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.6; }
.error { color: var(--danger); font-size: 13px; margin: 0 0 8px; }
.terms-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 4px;
}
.terms-check input { margin-top: 3px; }
.terms-check a, .legal-mini a { color: var(--accent); }
.legal-mini { text-align: center; color: var(--muted); font-size: 12px; margin: 12px 0 0; }

.app-grid {
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  overflow: hidden;
}
.sidebar {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-right: 1px solid var(--line);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.side-head, .chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(14px + var(--safe-t)) 8px 12px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
  z-index: 3;
}
.side-head {
  flex-direction: row;
  align-items: center;
  gap: 0;
}
.chat-head {
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: blur(16px);
}
.chat-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.chat-head-actions .chat-more-wrap { margin-left: 0; }
.chat-head .ava-wrap.xs {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
}
.chat-head .ava-wrap.xs > .ava,
.chat-head .ava.xs {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-size: 14px;
}
.chat-head .ava-wrap > .ava {
  overflow: hidden;
}
#btn-attach.head-more-btn { font-size: 18px; }
.icon-btn .menu-ico {
  width: auto;
  height: auto;
  background: transparent;
  border-radius: inherit;
  color: inherit;
}
.icon-btn .menu-ico svg,
.icon-btn .menu-ico .fa-solid {
  width: 1.25em;
  height: 1em;
  font-size: 17px;
  display: block !important;
  line-height: 1 !important;
}
.toast-x .menu-ico {
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.toast-x .menu-ico svg,
.toast-x .menu-ico .fa-solid {
  width: 14px;
  height: 14px;
  font-size: 13px;
}
#btn-offline .menu-ico .fa-solid { color: #ffc24d; }
#btn-offline.is-online .menu-ico .fa-solid { color: #5fd46a; }
#btn-offline.is-online:hover .menu-ico .fa-solid { color: #7dff9a; }
#btn-offline.is-reconnecting .menu-ico .fa-solid { color: #ffc24d; }
#btn-offline.is-offline .menu-ico .fa-solid { color: #ff6b7a; }
#btn-offline:hover .menu-ico .fa-solid { color: #ffd36a; }
#btn-offline.is-offline:hover .menu-ico .fa-solid { color: #ff8a96; }
.side-stories-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
  padding: 10px 12px 12px;
  min-height: 58px;
  box-sizing: border-box;
}
.side-stories-bar .stories-rail {
  flex: 1;
  min-width: 0;
  padding: 0;
  min-height: 44px;
}
@media (min-width: 821px) {
  .side-stories-bar { border-bottom: none; }
}
.side-stories-bar[hidden] { display: none; }
.side-stories-slot-mobile:empty { display: none; }
.side-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
}
.side-head-actions,
.profile-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.side-page-title {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
#btn-archive-back {
  display: none !important;
  flex-shrink: 0;
}
.side-head.is-archive #btn-archive-back {
  display: grid !important;
  place-items: center;
  margin-right: 2px;
}
.side-head.is-archive #btn-profile,
.side-head.is-archive #brand-mark,
.side-head.is-archive .side-stories-slot-mobile {
  display: none !important;
}
.side-head.is-archive #side-page-title {
  display: block;
  flex: 1;
  min-width: 0;
}
.side-stories {
  width: 100%;
  min-height: 54px;
}
.side-stories[hidden] { display: none; }
.profile-more-wrap { margin-left: 0; }
.side-head img { border-radius: 10px; }
.me-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 2px 0;
  overflow: visible;
}
.me-btn .ava {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 10px;
  flex-shrink: 0;
  overflow: hidden;
}
.me-btn > div:not(.ava) {
  display: grid;
  min-width: 0;
  flex: 1;
}
.me-btn > div.ava { flex: 0 0 auto; }
.me-btn:hover .ava { outline: 2px solid var(--accent); }
.side-head-row > .me-btn, .who { min-width: 0; flex: 1; }
.side-head-row strong, .who strong {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.name-line {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}
.nick {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}
.role-crown, .group-badge { flex-shrink: 0; }
.side-head small, .who small { color: var(--muted); font-size: 13px; }
#thread .chat-head .who strong {
  font-size: 17px;
  font-weight: 700;
}
.icon-btn {
  border: 0;
  background: var(--panel-2);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--muted);
  display: grid;
  place-items: center;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.icon-btn:hover {
  background: color-mix(in srgb, var(--panel-2) 70%, var(--accent));
  color: var(--text);
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn.is-on {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-dim) 60%, var(--panel-2));
}
.icon-btn.profile-back-btn {
  display: grid;
  flex-shrink: 0;
}
.profile-head-top {
  display: flex;
  align-items: center;
  gap: 4px;
}
.peer-profile-head {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: calc(14px + var(--safe-t)) 8px 12px 14px;
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
}
.peer-profile-head .profile-head-top {
  width: 100%;
}
.peer-profile-head .peer-more-wrap { position: relative; flex-shrink: 0; }
.peer-card.is-scrolled .profile-head-title {
  opacity: 0;
}
.admin-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: calc(14px + var(--safe-t)) 8px 12px 14px;
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
}
.admin-head-title {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.admin-row.is-auto-report {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}
.icon-btn[data-head-icon]:not(.emo-btn) {
  border: 0;
  outline: none;
  box-shadow: none;
}
.sheet-head .icon-btn[data-head-icon]:not(.emo-btn),
.select-bar .icon-btn[data-head-icon],
.chat-search .icon-btn[data-head-icon],
.reply-bar .icon-btn[data-head-icon],
.pin-bar .icon-btn[data-head-icon],
.img-preview .icon-btn[data-head-icon],
#img-preview .icon-btn[data-head-icon] {
  background: var(--panel);
  color: var(--text);
}
.sheet-head .icon-btn[data-head-icon]:not(.emo-btn):hover,
.select-bar .icon-btn[data-head-icon]:hover,
.chat-search .icon-btn[data-head-icon]:hover,
.reply-bar .icon-btn[data-head-icon]:hover,
.pin-bar .icon-btn[data-head-icon]:hover,
.img-preview .icon-btn[data-head-icon]:hover,
#img-preview .icon-btn[data-head-icon]:hover {
  background: color-mix(in srgb, var(--panel-2) 70%, var(--accent));
  color: var(--text);
}
.peer-danger { display: none !important; }
#btn-offline {
  position: relative;
  color: #ffb020;
}
#btn-offline.is-online { color: #5fd46a; }
#btn-offline.is-online:hover { color: #7dff9a; }
#btn-offline.is-offline { color: #ff6b7a; }
#btn-offline.is-offline:hover { color: #ff8a96; }
#btn-offline:hover { color: #ffc24d; }
#btn-offline.is-tip::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 8;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  pointer-events: none;
}
.side-head .icon-btn,
.head-more-btn { width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
.head-more-btn,
#btn-profile-more,
#btn-side-more,
#btn-peer-more {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  align-self: center;
  margin: 0;
  flex-shrink: 0;
  background: var(--panel);
  color: var(--text);
  border: 0;
  outline: none;
  box-shadow: none;
}
.head-more-btn:hover,
#btn-profile-more:hover,
#btn-side-more:hover,
#btn-peer-more:hover {
  background: color-mix(in srgb, var(--panel-2) 70%, var(--accent));
  color: var(--text);
}
.head-more-btn.is-on,
.head-more-btn[aria-expanded="true"],
#btn-profile-more.is-on,
#btn-side-more.is-on,
#btn-peer-more.is-on,
#btn-peer-profile-more.is-on {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-dim) 60%, var(--panel-2));
}
.side-more-wrap, .chat-more-wrap, .attach-more-wrap {
  position: relative;
  flex: 0 0 auto;
}
.attach-more.side-more {
  position: fixed;
  z-index: 40;
  min-width: 168px;
}
#btn-attach.is-on {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-dim) 60%, var(--panel-2));
}
.side-more {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 24;
  min-width: 188px;
  max-width: min(280px, calc(100vw - 16px));
  max-height: min(72vh, 480px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(0,0,0,.4);
  backdrop-filter: blur(16px);
  padding: 4px;
  display: none;
}
.side-more::-webkit-scrollbar { display: none; width: 0; height: 0; }
.side-more.chat-more {
  position: fixed;
  top: 0;
  z-index: 40;
}
.side-more:not([hidden]) { display: grid; }
.side-more-main,
.side-more-panel,
.side-more-settings {
  display: grid;
}
.side-more-main[hidden],
.side-more-panel[hidden],
.side-more-settings[hidden] { display: none !important; }
.side-more-sep {
  height: 1px;
  margin: 4px 8px;
  background: var(--line);
}
.side-more-sep[hidden] { display: none !important; }
.side-more-act {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  transition: background .15s ease, transform .1s ease;
}
.menu-ico {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-2));
  color: var(--accent);
  line-height: 0;
}
.call-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}
/* Круглые action-кнопки: иконка строго по центру круга */
.note-orbit-btn,
.note-rec-icon-btn,
.note-rec-icon,
.note-rec-main,
.peer-ico-btn,
.call-btn,
.send {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
}
.note-orbit-btn .call-ico,
.note-rec-icon-btn .call-ico,
.note-rec-icon .call-ico,
.note-rec-main .call-ico,
.peer-ico-btn .call-ico,
.peer-ico-btn .menu-ico,
.call-btn .call-ico,
.send .call-ico {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: transparent;
  border-radius: 0;
  color: inherit;
}
.note-orbit-btn .fa-solid,
.note-rec-icon-btn .fa-solid,
.note-rec-icon .fa-solid,
.note-rec-main .fa-solid,
.peer-ico-btn .fa-solid,
.call-btn .fa-solid,
.send .fa-solid {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 16px;
  text-align: center;
  transform: none;
}
.note-orbit-btn .fa-fw,
.note-rec-icon-btn .fa-fw,
.note-rec-icon .fa-fw,
.note-rec-main .fa-fw,
.peer-ico-btn .fa-fw,
.call-btn .fa-fw,
.send .fa-fw {
  width: auto !important;
}
/* Play визуально тяжелее слева — лёгкий оптический сдвиг */
.note-rec-icon-btn .fa-play {
  transform: translateX(1px);
}
.send .fa-paper-plane,
.note-rec-send-btn .fa-paper-plane {
  transform: translate(-0.5px, 0.5px);
}
.note-orbit-btn .fa-solid { font-size: 15px; }
.note-rec-icon-btn .fa-solid { font-size: 16px; }
.note-rec-main .fa-solid { font-size: 18px; }
.peer-actions-top .peer-ico-btn .fa-solid { font-size: 20px; }
.send .fa-solid { font-size: 17px; }
.send.is-mic .fa-solid,
.send.is-note .fa-solid { font-size: 18px; }

/* FA в меню/тостах (не круги) */
.menu-ico .fa-solid,
.menu-ico .fa,
.toast-ico .fa-solid,
.toast-ico .fa,
.role-badge .fa-solid,
.bottom-ico .fa-solid,
.icon-btn .fa-solid {
  --fa-display: block;
  display: block;
  font-size: 14px;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: center;
}
.menu-ico .fa-solid::before,
.menu-ico .fa::before,
.toast-ico .fa-solid::before,
.role-badge .fa-solid::before,
.bottom-ico .fa-solid::before,
.icon-btn .fa-solid::before {
  display: block;
  width: 100%;
  line-height: 1;
  text-align: center;
}
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
}
.icon-btn[hidden],
.peer-ico-btn[hidden],
.call-btn[hidden],
.note-rec-icon[hidden],
.note-rec-main[hidden],
.note-rec-icon-btn[hidden],
.send[hidden],
.note-orbit-btn[hidden] {
  display: none !important;
}
.icon-btn .menu-ico,
.icon-btn .call-ico {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  line-height: 0;
  background: transparent;
  border-radius: 0;
  color: inherit;
  flex-shrink: 0;
}
.icon-btn .menu-ico .fa-solid,
.icon-btn .call-ico .fa-solid {
  font-size: 17px;
}
.bottom-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.bottom-ico .fa-solid {
  font-size: 18px;
}
.menu-label {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.side-more-act.danger-btn .menu-ico,
.msg-pop-act.danger-btn .menu-ico,
.attach-opt.danger-btn .menu-ico {
  background: color-mix(in srgb, var(--danger) 14%, var(--panel-2));
  color: var(--danger);
}
.side-more-act:hover { background: var(--panel-2); }
.side-more-act:active { transform: scale(0.98); }
.side-more-act.danger-btn { color: var(--danger); }
@media (max-width: 820px) {
  .side-more-desktop-only { display: none; }
}
.side-more-act.is-on { color: var(--accent); }
.side-more-act.is-on .menu-ico {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, var(--panel-2));
}
.side-more-act.is-install-ok {
  color: var(--accent);
}
.side-more-act.is-install-ok .menu-ico {
  color: var(--accent);
}
.side-more-act.is-install-need {
  color: var(--danger);
}
.side-more-act.is-install-need .menu-ico {
  color: var(--danger);
}
.search { padding: 6px 12px 4px; }
.search-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-row[hidden] { display: none !important; }
.search-row input {
  flex: 1;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.2;
  min-height: 0;
  height: 32px;
}
.search-row .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
  font-size: 13px;
}
.side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin: 8px 12px 0;
  background: var(--panel-2);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
}
.side-tabs .tab { padding: 8px 4px; font-size: 13px; }
.mini-badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  padding: 0 4px;
}
.user-list {
  flex: 1;
  overflow: auto;
  padding: 8px 10px 12px;
  overscroll-behavior: contain;
}
.user-list.is-skel { pointer-events: none; }
.user-row.skel { cursor: default; }
.user-row.skel .meta > b { display: block; }
.skel-bone {
  display: block;
  background: linear-gradient(
    105deg,
    color-mix(in srgb, var(--panel-2) 86%, #fff) 0%,
    color-mix(in srgb, var(--panel-2) 55%, #c8d0e6) 46%,
    color-mix(in srgb, var(--panel-2) 86%, #fff) 100%
  );
  background-size: 180% 100%;
  animation: skel-shimmer 1.15s ease infinite;
}
.skel-ava {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  flex-shrink: 0;
}
.skel-ava-round {
  width: 44px;
  height: 44px;
  border-radius: 16px;
}
.skel-line {
  height: 11px;
  border-radius: 99px;
  max-width: 160px;
}
.skel-line.sm {
  height: 9px;
  margin-top: 8px;
  max-width: 210px;
  opacity: 0.85;
}
.skel-time {
  width: 28px;
  height: 8px;
  border-radius: 99px;
}
.skel-story-name {
  height: 8px;
  margin-top: 2px;
  border-radius: 99px;
}
@keyframes skel-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -80% 0; }
}
.user-list.is-in,
.stories-rail.is-in {
  animation: list-in .32s ease;
}
.user-list.is-in .user-row,
.stories-rail.is-in .story-item {
  animation: row-in .34s ease both;
}
.user-list.is-in .user-row:nth-child(1), .stories-rail.is-in .story-item:nth-child(1) { animation-delay: .02s; }
.user-list.is-in .user-row:nth-child(2), .stories-rail.is-in .story-item:nth-child(2) { animation-delay: .05s; }
.user-list.is-in .user-row:nth-child(3), .stories-rail.is-in .story-item:nth-child(3) { animation-delay: .08s; }
.user-list.is-in .user-row:nth-child(4), .stories-rail.is-in .story-item:nth-child(4) { animation-delay: .11s; }
.user-list.is-in .user-row:nth-child(5), .stories-rail.is-in .story-item:nth-child(5) { animation-delay: .14s; }
.user-list.is-in .user-row:nth-child(6), .stories-rail.is-in .story-item:nth-child(6) { animation-delay: .17s; }
.user-list.is-in .user-row:nth-child(7) { animation-delay: .2s; }
.user-list.is-in .user-row:nth-child(8) { animation-delay: .23s; }
.user-list.is-in .user-row:nth-child(n+9) { animation-delay: .26s; }
@keyframes list-in {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
@keyframes row-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .skel-bone, .user-list.is-in, .stories-rail.is-in,
  .user-list.is-in .user-row, .stories-rail.is-in .story-item, .ava img {
    animation: none !important;
  }
}
.user-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border-radius: 16px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  transition: background .15s ease, transform .1s ease;
  overflow: visible;
}
.user-row > .ava-wrap {
  width: 44px;
  height: 44px;
  align-self: center;
}
.user-row:hover, .user-row.is-on { background: var(--panel-2); }
.user-row:active { transform: scale(0.985); }
.ava-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
}
.ava-wrap.sm { width: 36px; height: 36px; }
.ava-wrap.xs { width: 28px; height: 28px; }
.ava-wrap > .ava {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ava-wrap > .dot {
  right: -2px;
  bottom: -2px;
}
.ava {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #0c0e14;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: var(--accent);
  box-sizing: border-box;
}
.ava.sm { width: 36px; height: 36px; border-radius: 12px; font-size: 13px; }
.ava.xs { width: 28px; height: 28px; border-radius: 10px; font-size: 11px; }
.ava.xl { width: 96px; height: 96px; border-radius: 32px; font-size: 32px; margin: 8px auto 0; }
.ava-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}
.ava-photo img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
  border-radius: inherit;
}
.ava-letters {
  position: relative;
  z-index: 1;
  line-height: 1;
}
.profile-ava {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  font-size: 80px;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.profile-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.profile-head {
  position: relative;
  flex-shrink: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
}
.profile-head-top {
  width: 100%;
}
.profile-head-slot {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
}
.profile-head-title {
  flex: 1;
  min-width: 0;
  transition: opacity .2s ease;
}
.profile-head-who {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.profile-name-mini {
  font-size: 16px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-card.is-scrolled:not(.is-settings) .profile-head-title {
  opacity: 0;
}
.profile-card.is-scrolled:not(.is-settings) .profile-head-who,
.peer-card.is-scrolled .profile-head-who {
  opacity: 1;
}
.profile-head-actions .profile-more-wrap { margin-left: 0; }
.profile-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0;
  max-width: 100%;
}
.profile-cover {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  flex-shrink: 0;
}
.profile-ava-actions {
  position: static;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 0;
  flex-wrap: wrap;
}
.profile-ava-actions[hidden] {
  display: none !important;
}
.settings-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 0 16px;
}
.settings-ava {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  margin: 0;
  font-size: 42px;
  flex-shrink: 0;
  overflow: hidden;
}
.settings-ava img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.settings-head .profile-ava-actions {
  position: static;
  padding: 0;
}
.profile-content {
  padding: 0 16px 20px;
}
.profile-card.is-settings .profile-head-who {
  display: none;
}
.profile-content .profile-nick {
  font-size: 22px;
  margin: 10px 0 4px;
  text-align: center;
}
.profile-content .handle {
  color: var(--muted);
  margin: 0 0 10px;
  text-align: center;
}
.profile-content > .bio-box .bio,
.profile-content > .bio {
  white-space: pre-wrap;
  margin: 0;
  text-align: left;
  color: var(--text);
}
.bio-box {
  text-align: left;
  margin: 0 0 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
}
.bio-box-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}
.profile-content > .bio-box {
  width: 100%;
}
.ava-photo img { animation: ava-in .28s ease both; }
.ava img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
  z-index: 0;
  animation: ava-in .28s ease both;
}
.profile-ava img,
.profile-ava .ava-photo,
.profile-ava .ava-photo img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center;
  border-radius: 0 !important;
}
@keyframes ava-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ava-emo {
  position: relative;
  z-index: 1;
  font-size: 1.25em;
  line-height: 1;
  font-weight: 400;
}
.ava.xl .ava-emo { font-size: 48px; }
.ava.has-photo, .ava.has-emo { color: var(--text); background: var(--panel-2) !important; }
.ava-hit { cursor: pointer; }
.ava-hit:hover { outline: 2px solid var(--accent); outline-offset: 2px; }
.dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff4d5a;
  border: 2px solid var(--panel);
  z-index: 3;
  pointer-events: none;
  box-sizing: border-box;
}
.dot.on { background: #3ee06a; }
.meta { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.meta b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  min-width: 0;
}
.meta b .name-line { min-width: 0; }
.meta > span { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #08210c;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.side-foot {
  padding: 8px 12px calc(12px + var(--safe-b));
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
}
@media (max-width: 820px) {
  .side-foot {
    display: none;
  }
}
.app-ver {
  margin: 2px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.02em;
  opacity: 0.75;
}
.ghost {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
  border-radius: 12px;
  padding: 10px;
  transition: background .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
}
.ghost:hover { background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); color: var(--text); }
.ghost:active { transform: scale(0.97); }
.ghost.is-on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ghost.danger-btn {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.chat {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.empty {
  margin: auto;
  text-align: center;
  color: var(--muted);
  padding: 24px;
  max-width: 360px;
}
.empty img { border-radius: 24px; opacity: 0.95; }
.empty h2 { color: var(--text); margin: 12px 0 6px; }
#thread {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(95, 212, 106, 0.14), transparent 52%),
    radial-gradient(700px 380px at 110% 8%, rgba(139, 124, 246, 0.16), transparent 48%),
    linear-gradient(180deg, #12162a 0%, #0c101c 55%, #0a0d16 100%);
}
#thread::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(95, 212, 106, 0.18) 0 1px, transparent 2px),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 180px 180px, 22px 22px;
  animation: chat-drift 48s linear infinite;
}
#thread::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -60px;
  bottom: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 156, 255, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: chat-orb 12s ease-in-out infinite alternate;
}
@keyframes chat-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 180px 90px, 22px 44px; }
}
@keyframes chat-orb {
  from { transform: translate3d(0, 0, 0); opacity: 0.7; }
  to { transform: translate3d(-24px, -18px, 0); opacity: 1; }
}
.chat-head, .messages-pane, .messages, .compose, .pin-bar, .chat-search {
  position: relative;
  z-index: 1;
}
.chat-head { z-index: 20; }
.messages {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overscroll-behavior: contain;
}
.messages-pane {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}
.messages > :first-child { margin-top: auto; }
.day {
  align-self: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 999px;
  margin: 10px 0 6px;
  pointer-events: none;
}
.day-float {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.day-float.is-show {
  opacity: 1;
}
.admin-note {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.messages-loading {
  align-self: center;
  font-size: 12px;
  color: var(--muted);
  padding: 8px;
}
.bubble {
  max-width: min(78%, 560px);
  padding: 8px 11px;
  border-radius: 16px;
  background: var(--them);
  align-self: flex-start;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
  font-size: 13.75px;
  line-height: 1.35;
}
.bubble.me {
  align-self: flex-end;
  background: var(--me);
}
.bubble.is-emoji-only,
.bubble.is-emoji-only.me,
.bubble.is-emoji-only.them {
  background: transparent !important;
  padding: 0 2px;
  max-width: none;
  box-shadow: none;
  overflow: visible;
}
.bubble.is-emoji-n1 {
  font-size: 80px;
  line-height: 1.05;
  white-space: nowrap;
}
.bubble.is-emoji-n2 {
  font-size: 52px;
  line-height: 1.08;
  white-space: nowrap;
}
.bubble.is-emoji-n3 {
  font-size: 34px;
  line-height: 1.15;
}
.bubble.is-emoji-only time {
  float: none;
  display: flex;
  margin: 4px 1px 0;
  opacity: 0.82;
}
.msg-wrap.me .bubble.is-emoji-only time { justify-content: flex-end; }
.msg-wrap.them .bubble.is-emoji-only time { justify-content: flex-start; }
.msg-wrap.is-sticker {
  width: min(176px, 56vw) !important;
  min-width: 0;
}
.bubble.has-sticker {
  background: transparent !important;
  padding: 0;
  overflow: visible;
}
.bubble.has-sticker .msg-media,
.bubble.has-sticker .msg-media.is-square,
.bubble.has-sticker .msg-media.is-portrait,
.bubble.has-sticker .msg-media.is-landscape {
  aspect-ratio: 1 / 1;
  max-height: 176px;
  background: transparent;
  border-radius: 12px;
}
.bubble.has-sticker img.msg-img {
  background: transparent;
  border-radius: 8px;
  margin: 0;
  max-height: 176px;
  width: 100%;
  height: auto;
}
.bubble.has-sticker .msg-media-spin { display: none; }
.bubble.has-sticker time {
  float: none;
  margin: 4px 2px 0;
}
.bubble.is-flash { outline: 2px solid var(--accent); }
.pin-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  flex-shrink: 0;
}
.pin-bar-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 4px 6px;
  border-radius: 10px;
  color: inherit;
}
.pin-bar-main:hover { background: var(--panel-2); }
.pin-ico { flex-shrink: 0; }
#pin-bar-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.pin-bar-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pin-bar-meta {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pin-sheet-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 8px;
  border-radius: 12px;
  color: inherit;
}
.pin-sheet-row:hover,
.pin-sheet-row.is-on { background: var(--panel-2); }
.pin-sheet-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pin-sheet-copy b {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-status.group-read {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: baseline;
}
.msg-status.group-read .read-n {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.pin-count {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 999px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
}
.pin-mark { font-size: 10px; }
.bubble time {
  float: right;
  clear: both;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  margin: 2px 0 0 10px;
  line-height: 1.35;
  position: relative;
  z-index: 1;
}
.bubble::after {
  content: '';
  display: table;
  clear: both;
}
.bubble time .edited { font-style: italic; }
.bubble a { color: var(--accent); }
.bubble b { font-weight: 800; }
.bubble i { font-style: italic; }
.bubble s { text-decoration: line-through; opacity: 0.88; }
.msg-code, .msg-pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 6px;
}
.msg-code { padding: 0 5px; }
.msg-pre {
  display: block;
  padding: 8px 10px;
  margin: 4px 0;
  white-space: pre-wrap;
  overflow-x: auto;
}
.spoiler {
  background: currentColor;
  color: transparent;
  border-radius: 5px;
  cursor: pointer;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.spoiler * { color: inherit; pointer-events: none; }
.spoiler.is-on {
  background: color-mix(in srgb, currentColor 14%, transparent);
  color: inherit;
}
.fmt-pop {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 6px);
  z-index: 12;
  display: flex;
  gap: 4px;
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
}
.fmt-pop[hidden] { display: none; }
.fmt-pop button {
  min-width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 14px;
}
.sel-pop {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 6px);
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 148px;
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
}
.sel-pop[hidden] { display: none; }
.sel-pop button {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  text-align: left;
  padding: 0 12px;
}
.sel-pop button:hover, .sel-pop button:active, .sel-pop button.is-on { background: var(--accent-dim); color: var(--accent); }
.sel-pop button.sel-fmt-btn { font-weight: 700; }
.composer-field.is-selecting #input {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
}
.schedule-card {
  width: min(400px, calc(100% - 8px));
}
.schedule-head-text {
  display: flex;
  align-items: center;
  gap: 10px;
}
.schedule-ico { font-size: 22px; line-height: 1; }
.schedule-body { display: flex; flex-direction: column; gap: 12px; }
.schedule-preview {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.schedule-input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: inherit;
  padding: 10px 12px;
  font: inherit;
}
.schedule-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.schedule-quick .ghost.sm {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid var(--line);
}
.schedule-save-btn { margin-top: 4px; }
.group-active-call {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel-2)), var(--panel-2));
}
.group-active-call-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.group-active-call-copy strong { display: block; font-size: 15px; }
.group-active-call-copy small { display: block; margin-top: 2px; font-size: 12px; }
.group-active-call-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  animation: group-call-pulse 1.6s ease-out infinite;
  flex-shrink: 0;
}
@keyframes group-call-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.emoji-add-sticker {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.emoji-add-sticker:not([hidden]) + .emoji-del-btn { margin-left: 0; }
.scheduled-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.scheduled-row:last-child { margin-bottom: 0; }
.scheduled-row b { display: block; margin-bottom: 4px; font-size: 14px; }
.scheduled-row-main { min-width: 0; flex: 1; }
.sticker-add-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.sticker-add-plus {
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
}
.bots-box { margin-top: 16px; }
.bots-hint { margin: 6px 0 10px; font-size: 13px; }
.bot-list { display: flex; flex-direction: column; gap: 8px; }
.bot-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.bot-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bot-row-desc { margin: 0; font-size: 12px; line-height: 1.4; }
.bot-row-desc code { font-size: 11px; }
.bot-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bot-token-once {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 12px;
  word-break: break-all;
}
.fmt-pop button:hover, .fmt-pop button.is-on { background: var(--panel-2); }
#btn-fmt { font-weight: 800; font-size: 13px; }
.typing-bubble {
  padding: 12px 16px 10px;
  min-width: 62px;
}
.dots {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 14px;
}
.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9d0e3;
  animation: typing-dot 1.15s infinite ease-in-out;
}
.dots i:nth-child(2) { animation-delay: 0.18s; }
.dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-dot {
  0%, 80%, 100% { opacity: 0.28; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.compose {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 11;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px calc(10px + var(--safe-b));
  background: transparent;
  flex-shrink: 0;
  pointer-events: none;
}
.compose > * {
  pointer-events: auto;
}
html.kb-open:not(.emoji-kb) .compose {
  /* Клавиатура закрывает home indicator — лишний safe-area даёт щель над клавой */
  padding-bottom: 6px;
}
html.emoji-kb .compose {
  padding-bottom: 0;
}
html.emoji-kb .app.show-chat .compose {
  z-index: 96;
  padding-bottom: 0;
  background: transparent;
}
html.kb-open .messages,
html.emoji-kb .messages {
  scroll-padding-bottom: 12px;
  padding-bottom: 12px;
}
.compose-attach {
  display: flex;
  align-items: center;
  gap: 8px;
}
.compose-attach .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 0;
  flex-shrink: 0;
}
.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  flex-shrink: 0;
}
.composer textarea {
  resize: none;
  flex: 1;
  width: 100%;
  min-height: 40px;
  max-height: calc(16px + 5 * 1.35em);
  line-height: 1.35;
  font-size: 16px;
  padding: 8px 12px;
  margin: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  field-sizing: content;
}
.composer-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.composer-field > textarea {
  width: 100%;
  min-width: 0;
}
/* Войс: док поверх поля — textarea остаётся в фокусе, клавиатура не закрывается */
.compose.is-voice-rec .compose-attach {
  opacity: 0.55;
}
.composer.is-voice-rec .composer-field > textarea {
  color: transparent;
  caret-color: transparent;
  pointer-events: none;
}
.composer.is-voice-rec .voice-dock {
  position: absolute;
  inset: 0;
  margin: 0;
  width: auto;
  min-height: 0;
  z-index: 6;
}
.voice-dock {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.voice-dock[hidden] { display: none !important; }
.voice-dock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4d5e;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.45);
  animation: voicePulse 1.1s ease-out infinite;
}
@keyframes voicePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(255, 77, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); }
}
#voice-dock-time {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  min-width: 3.2ch;
  color: var(--text);
}
.voice-dock-wave,
.voice-viz {
  flex: 1;
  min-width: 0;
  height: 40px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(120% 180% at 50% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--panel) 55%, transparent);
}
.voice-viz-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.voice-viz-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, #fff) 0%, transparent 72%);
  opacity: calc(0.18 + var(--amp, 0) * 0.55);
  filter: blur(12px);
  transform: translate(-50%, -50%) scale(calc(0.85 + var(--amp, 0) * 0.55));
  pointer-events: none;
  transition: opacity 0.08s linear, transform 0.08s linear;
}
.voice-viz-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 90%, #fff);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: calc(0.3 + var(--amp, 0) * 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.voice-viz.is-live .voice-viz-core {
  animation: voiceCorePulse 1.1s ease-in-out infinite;
}
@keyframes voiceCorePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.35); }
}
.composer.is-voice-rec .voice-dock-wave.is-live {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.voice-dock-cancel {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 8px 6px;
  flex-shrink: 0;
  cursor: pointer;
}
.voice-dock-cancel:active { color: var(--danger, #ff5a6a); }
.composer.is-voice-rec .send {
  background: #ff4d5e;
  color: #fff;
}
@media (min-width: 821px) {
  .composer.is-voice-rec .voice-dock {
    width: 100%;
  }
  .voice-dock-wave {
    flex: 1 1 auto;
    width: 100%;
    height: 44px;
  }
}
.compose-attach .icon-btn .menu-ico {
  display: grid;
  place-items: center;
}
.composer .icon-btn,
.composer .send {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  align-self: flex-end;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.composer .icon-btn.is-on {
  color: var(--accent);
  background: var(--accent-dim);
}
.send {
  background: var(--accent);
  color: #08210c;
  font-weight: 800;
  border: 0;
  transition: filter .15s ease, transform .1s ease;
}
.send:hover { filter: brightness(1.08); }
.send:active { transform: scale(0.92); }
.emo-btn { font-size: 18px; }
.admin-tabs .tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px 10px;
  min-width: 0;
}
.admin-tabs .tab .menu-ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}
.admin-tabs .tab .menu-ico svg,
.admin-tabs .tab .menu-ico .fa-solid {
  width: 15px;
  height: 15px;
}
.admin-tabs .tab .menu-label {
  flex: 0;
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
}
.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  vertical-align: middle;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.role-badge svg,
.role-badge .fa-solid {
  width: 14px;
  height: 14px;
  display: block;
}
.role-badge-admin svg,
.role-badge-mod svg {
  width: 14px;
  height: 14px;
}
.muted .role-badge {
  width: 14px;
  height: 14px;
  margin: 0 1px;
  vertical-align: -2px;
}
.role-badge-admin { color: #f0c040; }
.role-badge-mod { color: var(--accent); }
.role-crown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  margin: 0;
  padding: 0 1px;
  background: none;
  border: 0;
  cursor: pointer;
  filter: none;
}
.group-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 16px;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  background: #7c9cff;
  color: #fff !important;
  border-radius: 4px;
  white-space: nowrap;
}
.mute-ico {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--muted);
  opacity: 0.92;
  vertical-align: middle;
}
.mute-ico svg {
  width: 14px;
  height: 14px;
  display: block;
}
.meta .meta-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.meta > b {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 14px;
}
.chat-time {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.2;
}
.chat-preview {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.list-status {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--muted);
  flex-shrink: 0;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.list-status .fa-solid {
  font-size: 12px;
  line-height: 1;
  width: 1em;
  text-align: center;
  color: inherit;
}
.list-status.sent,
.list-status.pending,
.list-status.delivered {
  color: var(--muted) !important;
}
.list-status.delivered .fa-solid,
.list-status.sent .fa-solid,
.list-status.pending .fa-solid {
  color: var(--muted) !important;
}
.list-status.read {
  color: #5fd46a !important;
}
.list-status.read .fa-solid,
.list-status.read .fa-solid::before {
  color: #5fd46a !important;
}
.list-status .menu-ico,
.list-status .msg-clock {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: inherit;
}
.list-status .menu-ico svg,
.list-status .menu-ico .fa-solid,
.list-status .msg-clock svg {
  width: 14px;
  height: 14px;
}
.row-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  gap: 6px;
  flex-shrink: 0;
  min-width: 36px;
  padding: 1px 0;
}
.row-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.row-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  min-height: 16px;
}
.row-badges {
  display: flex;
  align-items: center;
  gap: 2px;
}
.fav-ico {
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  padding: 0 0 0 2px;
}
.fav-ico.is-on { color: #ffc15a; }
.list-label {
  margin: 8px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.bubble img.msg-img {
  display: block;
  max-width: 100%;
  max-height: min(52vh, 420px);
  width: auto;
  height: auto;
  border-radius: 12px;
  margin-bottom: 6px;
  cursor: pointer;
  object-fit: contain;
  object-position: center;
  background: #12151c;
}
/* Медиа-пузырь без подписи — крупный кадр */
.msg-wrap.is-media:not(.is-media-caption) {
  width: min(300px, 82vw);
  max-width: calc(100% - 12px);
  min-width: 0;
  flex-shrink: 0;
}
.msg-wrap.is-media.is-album:not(.is-media-caption) {
  width: min(300px, 82vw);
}
/* С подписью — шире под текст; фото квадратом на ширину пузыря (как TG) */
.msg-wrap.is-media.is-media-caption {
  width: auto;
  max-width: min(320px, 86vw);
  min-width: min(260px, 78vw);
}
.msg-wrap.is-media.is-portrait-media:not(.is-media-caption) {
  width: min(260px, 72vw);
}
.msg-wrap.is-video:not(.is-media-caption) {
  width: min(300px, 82vw);
}
.msg-wrap.is-video.is-portrait-media:not(.is-media-caption) {
  width: min(240px, 68vw);
}
.bubble.has-media {
  padding: 3px;
  background: transparent;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.bubble.has-media.has-album {
  width: 100%;
  max-width: 100%;
}
.bubble.has-media.me,
.bubble.has-media.them {
  background: transparent;
}
.bubble.has-media .msg-media {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  /* до известных размеров — уже крупный кадр, не «точка» */
  aspect-ratio: 3 / 4;
  max-height: min(70vh, 560px);
  border-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
  background: #12151c;
}
.bubble.has-media .msg-media.is-landscape {
  aspect-ratio: 4 / 3;
}
.bubble.has-media .msg-media.is-portrait {
  aspect-ratio: 3 / 4;
}
.bubble.has-media .msg-media.is-square {
  aspect-ratio: 1 / 1;
}
.bubble.has-media .msg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
  background: #12151c;
  display: block;
}
.peer-name-lock,
.secret-lock {
  margin-right: 4px;
  font-size: 0.92em;
  vertical-align: -0.05em;
}
/* Telegram-like photo album mosaic */
.msg-album {
  display: grid !important;
  gap: 2px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #12151c;
  position: relative;
  box-sizing: border-box;
}
.msg-album-item {
  margin: 0;
  padding: 0;
  border: 0;
  background: #1a1d24;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.msg-album-item.is-empty {
  background: #151820;
  pointer-events: none;
}
.bubble .msg-album .msg-img,
.bubble.has-media .msg-album .msg-img,
.msg-album .msg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.msg-album.count-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 150px;
  height: 150px;
}
.msg-album.count-3 {
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 98px 98px;
  height: 198px;
}
.msg-album.count-3 .msg-album-item:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.msg-album.count-3 .msg-album-item:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.msg-album.count-3 .msg-album-item:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}
.msg-album.count-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 126px 126px;
  height: 254px;
}
.msg-album.count-5 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 128px 110px;
  height: 240px;
}
.msg-album.count-5 .msg-album-item:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.msg-album.count-5 .msg-album-item:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}
.msg-album.count-5 .msg-album-item:nth-child(3),
.msg-album.count-5 .msg-album-item:nth-child(4),
.msg-album.count-5 .msg-album-item:nth-child(5) {
  grid-column: auto;
  grid-row: 2;
}
.bubble.has-media time {
  position: absolute;
  right: 10px;
  bottom: 8px;
  margin: 0;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  backdrop-filter: blur(6px);
  white-space: nowrap;
  z-index: 2;
}
.bubble.has-media .msg-status { color: rgba(255,255,255,0.9); }
.bubble.has-media .msg-status.read,
.bubble.has-media .msg-status.read .fa-solid,
.bubble.has-media .msg-status.read .fa-solid::before { color: #7dff9a !important; }
.bubble.has-media .quote,
.bubble.has-media .fwd,
.bubble.has-media .who {
  margin: 6px 8px 4px;
}
.bubble.has-media-caption {
  padding: 3px 3px 8px;
  background: var(--them);
  width: max-content;
  max-width: 100%;
  min-width: min(260px, 78vw);
  box-sizing: border-box;
}
.bubble.has-media-caption.me { background: var(--me); }
.bubble.has-media-caption .msg-media {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 1 !important;
  max-height: min(340px, 86vw);
  margin: 0 0 4px;
  background: #12151c;
  border-radius: 12px;
}
.bubble.has-media-caption .msg-caption {
  display: block;
  padding: 2px 10px 0 10px;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: min(320px, 78vw);
}
.bubble.has-media-caption .msg-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0;
  object-fit: cover !important;
  object-position: center;
  display: block;
  border-radius: 12px;
}
.bubble.has-media-caption time {
  float: right;
  margin: 2px 8px 0 10px;
  position: static;
  background: transparent;
  color: inherit;
  padding: 0;
  backdrop-filter: none;
}
.msg-media {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.msg-media.is-loading img,
.msg-media.is-loading video {
  filter: blur(12px);
  transform: none;
}
.msg-media.is-uploading img,
.msg-media.is-uploading video {
  filter: blur(10px);
  transform: none;
}
.bubble.has-sticker .msg-media.is-loading img,
.bubble.has-sticker .msg-media.is-uploading img {
  filter: none;
}
.msg-upload-pct {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(12, 14, 20, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.msg-media.is-uploading .msg-upload-pct { display: block; }
.msg-media.is-uploading .msg-media-spin { display: none; }
.msg-media-spin {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: media-spin .7s linear infinite;
}
.msg-media.is-loading .msg-media-spin { display: block; }
@keyframes media-spin { to { transform: rotate(360deg); } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.msg-wrap.msg-enter { animation: fadeInUp .22s ease; }
.msg-wrap.is-selected .bubble {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.select-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--safe-t)) 10px 10px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  z-index: 20;
  flex-shrink: 0;
}
.select-bar[hidden] { display: none !important; }
.select-count {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.select-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.select-bar .icon-btn {
  width: 40px;
  height: 40px;
}
.select-bar .select-del-btn {
  color: #ff6b7a;
}
body.select-mode .chat-head { display: none; }
body.select-mode .select-bar { display: flex !important; }
.chat-preview.is-draft {
  color: var(--accent);
  font-style: italic;
}
.chat-preview.is-typing {
  color: var(--accent);
  font-style: italic;
}
.user-row.is-saved .ava { background: #3a455c !important; }
.e2e-fail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.ghost.mini {
  padding: 4px 8px;
  font-size: 12px;
  width: auto;
  margin: 0;
}
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #07080c;
  font-family: Manrope, "Segoe UI", sans-serif;
  color: var(--text);
  transition: opacity .4s ease;
  padding: calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b));
  overflow: hidden;
}
.boot-splash.is-hide {
  opacity: 0;
  pointer-events: none;
}
.boot-splash-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 18%, rgba(232, 72, 85, 0.24), transparent 62%),
    radial-gradient(55% 40% at 80% 82%, rgba(40, 70, 120, 0.2), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(95, 212, 106, 0.08), transparent 70%),
    linear-gradient(180deg, #10131b 0%, #07080c 58%, #05060a 100%);
}
.boot-splash-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
}
.boot-splash-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  display: grid;
  justify-items: center;
  gap: 8px;
}
.boot-splash img {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: #12161f;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  animation: panda-wink 1.4s ease-in-out infinite;
}
.boot-splash-brand {
  font-family: Syne, Manrope, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 8vw, 36px);
  letter-spacing: -0.06em;
  line-height: 0.95;
  color: #f4f1ea;
}
.boot-splash-brand .brand-x {
  color: #ff3b4e;
}
.boot-splash-tag {
  margin: 0 0 8px;
  color: #9aa3b5;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.boot-card {
  width: 100%;
  background: rgba(14, 16, 22, 0.72);
  border: 1px solid color-mix(in srgb, #e84855 28%, rgba(255,255,255,0.12));
  border-radius: 22px;
  padding: 8px 6px;
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.boot-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.boot-checks li {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 14px;
  color: var(--text);
  opacity: 0.42;
  transition: opacity .2s ease, background .2s ease;
}
.boot-checks li[data-status="run"],
.boot-checks li[data-status="ok"],
.boot-checks li[data-status="warn"],
.boot-checks li[data-status="fail"] {
  opacity: 1;
}
.boot-checks li[data-status="run"] {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.boot-check-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 40%, transparent);
  position: relative;
  flex-shrink: 0;
}
.boot-check-label {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boot-check-detail {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boot-checks li[data-status="run"] .boot-check-mark {
  background: transparent;
  box-shadow: none;
  border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  animation: boot-spin 0.7s linear infinite;
}
.boot-checks li[data-status="ok"] .boot-check-mark,
.boot-checks li[data-status="warn"] .boot-check-mark,
.boot-checks li[data-status="fail"] .boot-check-mark {
  border: 0;
  animation: none;
}
.boot-checks li[data-status="ok"] .boot-check-mark {
  background: var(--accent);
  box-shadow: none;
}
.boot-checks li[data-status="ok"] .boot-check-mark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: 2px solid #0c0e14;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}
.boot-checks li[data-status="ok"] .boot-check-detail {
  color: var(--accent);
}
.boot-checks li[data-status="warn"] .boot-check-mark {
  background: #ffc15a;
  box-shadow: none;
}
.boot-checks li[data-status="warn"] .boot-check-mark::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 2px;
  height: 6px;
  background: #0c0e14;
  border-radius: 2px;
}
.boot-checks li[data-status="warn"] .boot-check-mark::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 3px;
  width: 2px;
  height: 2px;
  background: #0c0e14;
  border-radius: 50%;
}
.boot-checks li[data-status="warn"] .boot-check-detail {
  color: #ffc15a;
}
.boot-checks li[data-status="fail"] .boot-check-mark {
  background: #ff3b4e;
  box-shadow: none;
}
.boot-checks li[data-status="fail"] .boot-check-mark::before,
.boot-checks li[data-status="fail"] .boot-check-mark::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 2px;
  height: 10px;
  background: #fff;
  border-radius: 2px;
}
.boot-checks li[data-status="fail"] .boot-check-mark::before {
  transform: rotate(45deg);
}
.boot-checks li[data-status="fail"] .boot-check-mark::after {
  transform: rotate(-45deg);
}
.boot-checks li[data-status="fail"] .boot-check-detail {
  color: #ff3b4e;
}
@keyframes boot-spin {
  to { transform: rotate(360deg); }
}
@keyframes panda-wink {
  0%, 40%, 100% { transform: scale(1); filter: brightness(1); }
  48% { transform: scale(1.02, 0.92); filter: brightness(1.08); }
  56% { transform: scale(1); filter: brightness(1); }
}
.photo-view {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(56px + var(--safe-t))
    max(12px, env(safe-area-inset-right, 0px))
    calc(36px + var(--safe-b))
    max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  overflow: hidden;
  touch-action: pan-y;
}
.photo-view img {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}
.photo-view .photo-close,
.photo-view .photo-dl {
  position: absolute;
  top: calc(10px + var(--safe-t));
  z-index: 2;
  background: rgba(20, 24, 33, 0.85);
  color: #fff;
}
.photo-view .photo-close { right: 12px; }
.photo-view .photo-dl { right: 56px; }
.photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 64px;
  border: 0;
  border-radius: 12px;
  background: rgba(20, 24, 33, 0.55);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.photo-nav.prev { left: 8px; }
.photo-nav.next { right: 8px; }
.photo-nav[hidden] { display: none !important; }
.photo-counter {
  position: absolute;
  bottom: calc(16px + var(--safe-b));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20, 24, 33, 0.7);
  color: #fff;
  font-size: 13px;
}
.photo-counter[hidden] { display: none !important; }
.media-peek {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(6, 8, 12, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(28px + var(--safe-t)) 18px calc(28px + var(--safe-b));
  pointer-events: none;
}
.media-peek[hidden] { display: none !important; }
.media-peek img {
  display: block;
  max-width: min(86vw, 560px);
  max-height: min(74vh, 560px);
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  animation: media-peek-in 0.16s ease-out;
}
.media-peek.is-sticker img {
  max-width: min(78vw, 440px);
  max-height: min(70vh, 440px);
  filter: drop-shadow(0 16px 48px rgba(0, 0, 0, 0.5));
}
.media-peek.is-gif img {
  max-width: min(92vw, 680px);
  max-height: min(78vh, 640px);
  border-radius: 18px;
  background: #111;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
@keyframes media-peek-in {
  from { transform: scale(0.72); opacity: 0.35; }
  to { transform: scale(1); opacity: 1; }
}
.ptr {
  position: fixed;
  top: calc(8px + var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
}
.ptr.is-ready { color: var(--accent); }
.draft-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  box-sizing: border-box;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 16px;
  flex-shrink: 0;
}
.draft-bar[hidden],
.draft-thumb[hidden] { display: none !important; }
.draft-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--panel);
}
.draft-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.draft-text small {
  display: block;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
}
.draft-nocomp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  font-weight: 600;
}
.draft-nocomp[hidden] { display: none !important; }
.draft-nocomp input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  margin: 0;
  flex-shrink: 0;
}
.draft-text b,
.file-pending {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text);
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
}
.reason-list {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}
.reason-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 16px;
  padding: 11px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.reason-card:hover { border-color: color-mix(in srgb, var(--text) 16%, var(--line)); }
.reason-card.is-on {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  background: color-mix(in srgb, var(--danger) 12%, var(--panel-2));
}
.reason-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--bg);
  font-size: 20px;
  line-height: 1;
}
.reason-text { display: grid; gap: 2px; min-width: 0; }
.reason-text b { font-size: 14px; font-weight: 700; }
.reason-text small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.report-card { width: min(420px, calc(100% - 8px)); }
.report-body { padding-top: 16px; }
.report-lead {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 16px;
}
.report-note { margin: 0 0 14px; font-size: 13px; line-height: 1.45; }
.report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--panel) 92%, transparent) 30%);
}
.report-actions .ghost,
.report-actions .btn { width: auto; margin: 0; padding: 10px 14px; }
.admin-card { width: min(560px, 100%); }
#admin .admin-tabs {
  margin: 12px 12px 0;
  flex-shrink: 0;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 0;
}
#admin .admin-tabs .tab { font-size: 12px; padding: 9px 2px; }
#media-tabs {
  margin: 12px 12px 0;
  flex-shrink: 0;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 0;
}
.confirm-choices {
  display: grid;
  gap: 4px;
  padding: 4px 0 0;
}
.confirm-choices .side-more-act { margin: 0; }
.admin-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.admin-stat {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
}
.admin-stat b { display: block; font-size: 18px; }
.admin-stat b small { font-size: 12px; color: var(--muted); font-weight: 600; }
.admin-stat span { color: var(--muted); font-size: 12px; }
.admin-stat.is-hot b { color: var(--danger); }
.restart-report {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0 14px;
  white-space: pre-wrap;
}
.audit-row .audit-detail {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  word-break: break-word;
}
.audit-target-id {
  font-size: 12px;
  font-family: ui-monospace, monospace;
}
.audit-sessions {
  margin: 8px 0;
  display: grid;
  gap: 4px;
}
.audit-session {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.admin-online-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.admin-online-chip {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-list {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  margin: 8px 0 12px;
}
.pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 13px;
}
button.pick-row {
  width: 100%;
  margin: 0 0 6px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.pick-row input { accent-color: var(--accent); }
.admin-row {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.admin-row .row-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-actions .ghost, .admin-actions .btn { width: auto; margin: 0; padding: 8px 10px; font-size: 12px; }
.admin-cmd-help {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.admin-cmd-help p { margin: 0 0 8px; }
.admin-cmd-help b { color: var(--text); font-weight: 600; }
.admin-cmd-list {
  margin: 0 0 8px;
  padding-left: 1.15em;
  color: var(--muted);
}
.admin-cmd-list li { margin: 2px 0; }
.admin-filters .ghost.is-on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.admin-role-form { margin-bottom: 12px; }
.admin-role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.admin-role-row input {
  flex: 1 1 120px;
  min-width: 0;
}
.admin-role-row select {
  flex: 0 0 auto;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 0 10px;
}
.admin-role-row .btn {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 10px 14px;
}
.ip-form { display: grid; gap: 8px; margin-bottom: 16px; }
.emo-btn { font-size: 18px; }

.compose > .emoji-pop:not(.float),
.emoji-pop {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  width: auto;
  height: var(--emoji-dock-h, 320px);
  max-height: min(var(--emoji-dock-h, 320px), 48dvh);
  margin: 8px -10px 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
  overflow: hidden;
  z-index: 2;
  flex: 0 0 var(--emoji-dock-h, 320px);
  flex-shrink: 0;
}
html.emoji-kb .app.show-chat {
  padding-bottom: 0;
}
html.emoji-kb .app.show-chat .compose {
  z-index: 96;
}
html.emoji-kb .compose .emoji-pop:not(.float) {
  margin: 0;
}
.emoji-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 4px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.emoji-head .emoji-cats {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
  padding-right: 0;
}
.emoji-del-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  margin: 4px 4px 4px 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
}
.emoji-del-btn:active {
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 70%, var(--accent));
}
.emoji-del-btn .menu-ico svg,
.emoji-del-btn .menu-ico .fa-solid {
  width: 20px;
  height: 20px;
}
.emoji-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px 4px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.emoji-recent[hidden] { display: none !important; }
.emoji-recent button {
  border: 0;
  background: transparent;
  border-radius: 10px;
  font-size: 22px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
}
.emoji-recent button:hover { background: var(--panel-2); }
.emoji-recent-label {
  width: 100%;
  margin: 0 0 2px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.emoji-grid-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
html.emoji-kb #thread {
  padding-bottom: 0;
}
.emoji-pop.float {
  position: fixed;
  left: auto;
  right: auto;
  bottom: auto;
  width: 380px;
  max-width: calc(100vw - 16px);
  height: 320px;
  max-height: min(360px, 52dvh);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  z-index: 110;
}
.emoji-pop.sheet-emoji {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: min(42dvh, 360px) !important;
  max-height: min(42dvh, 360px) !important;
  margin: 0 !important;
  border-radius: 18px 18px 0 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  z-index: 140;
  background: var(--panel);
  padding-bottom: var(--safe-b);
}
.emoji-cats {
  display: flex;
  gap: 4px;
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  flex-shrink: 0;
}
.emoji-cats button {
  border: 0;
  background: transparent;
  border-radius: 10px;
  width: 40px;
  height: 36px;
  padding: 0;
  font-size: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.emoji-cats button.is-on { background: var(--panel-2); }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px;
  align-content: start;
}
.emoji-grid.is-stickers {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.emoji-grid.is-stickers .sticker-btn {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 2px;
  min-width: 0;
}
.emoji-grid.is-stickers .sticker-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.emoji-grid.is-stickers .sticker-add-cell {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  font-size: 20px;
}
.emoji-grid.is-stickers .sticker-add-plus {
  font-size: 26px;
}
.emoji-grid button {
  border: 0;
  background: transparent;
  border-radius: 10px;
  font-size: 22px;
  aspect-ratio: 1;
  padding: 0;
  display: grid;
  place-items: center;
}
.emoji-grid button:hover { background: var(--panel-2); }

.emoji-gif-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.emoji-gif-panel:not([hidden]) ~ .emoji-grid,
.emoji-gif-panel:not([hidden]) ~ .emoji-recent {
  display: none !important;
}
.emoji-gif-panel .gif-search {
  flex-shrink: 0;
  margin: 8px 10px 0;
  width: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}
.emoji-gif-panel .gif-hint {
  margin: 0;
  padding: 6px 12px 0;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.emoji-gif-panel .gif-hint[hidden] { display: none !important; }
.emoji-gif-panel .gif-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  align-content: start;
  padding: 8px 10px 10px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 821px) {
  .emoji-gif-panel .gif-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.emoji-gif-panel .gif-empty {
  margin: 0;
  padding: 8px 12px 12px;
  text-align: center;
  flex-shrink: 0;
}
.gif-loading {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px 8px;
  text-align: center;
  font-size: 13px;
}
.emoji-gif-panel .gif-grid button {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding: 0 0 78%;
  border: 0;
  margin: 0;
  background: var(--panel-2);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}
.emoji-gif-panel .gif-grid button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.gif-grid button {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding: 0 0 100%;
  border: 0;
  margin: 0;
  background: var(--panel-2);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.gif-grid button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.gif-empty {
  margin: 0;
  text-align: center;
  padding: 12px 8px;
}

.sheet {
  position: fixed;
  inset: 0;
  background: var(--confirm-scrim, rgba(8, 10, 16, 0.42));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  z-index: 20;
  padding: 16px;
}
#confirm.sheet {
  background: var(--confirm-scrim, rgba(8, 10, 16, 0.42));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#confirm .sheet-card,
.sheet-card.confirm-card,
.sheet-card.schedule-card,
.sheet-card.report-card,
.sheet-card.role-notice-card,
#group-sheet .sheet-card,
#secret-sheet .sheet-card,
#forward-sheet .sheet-card,
#pub-sheet .sheet-card,
#group-call-sheet .sheet-card {
  background: var(--confirm-glass, color-mix(in srgb, var(--panel) 86%, transparent));
}
.sheet-card.confirm-card .sheet-head,
.sheet-card.schedule-card .sheet-head,
.sheet-card.report-card .sheet-head,
.sheet-card.role-notice-card .sheet-head,
#group-sheet .sheet-head,
#secret-sheet .sheet-head,
#forward-sheet .sheet-head,
#pub-sheet .sheet-head,
#password-sheet .sheet-head,
#poll-sheet .sheet-head,
#pins-sheet .sheet-head,
#reacts-sheet .sheet-head,
#readers-sheet .sheet-head,
#group-call-sheet .sheet-head {
  background: transparent;
}
#confirm .sheet-head {
  background: transparent;
}
#confirm.sheet,
#role-notice.sheet,
#readers-sheet.sheet,
#password-sheet.sheet,
#pub-sheet.sheet,
#group-sheet.sheet,
#poll-sheet.sheet,
#media-sheet.sheet,
#forward-sheet.sheet,
#report.sheet {
  z-index: 120;
}
.profile-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--line);
}
.profile-tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.profile-tab.is-on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.profile-pub-wrap {
  width: 100%;
  margin: 0 0 12px;
}
.profile-pub-new {
  width: 100%;
  margin: 0 0 12px;
}
.pub-list {
  display: grid;
  gap: 10px;
}
.pub-card {
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  overflow: hidden;
}
.pub-card:not(.is-story) img {
  width: calc(100% + 28px);
  max-width: none;
  margin: 10px -14px -12px;
  display: block;
  object-fit: cover;
  max-height: 320px;
}
.pub-card.is-story {
  text-align: center;
}
.pub-story-open {
  display: inline-grid;
  place-items: center;
  margin: 8px auto 0;
  padding: 0;
  border: 2px solid var(--line);
  background: none;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.pub-story-open .pub-story-img,
.pub-card.is-story .pub-story-img {
  width: 72px;
  height: 72px;
  max-width: 72px;
  max-height: 72px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.pub-card .pub-body {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  line-height: 1.45;
}
.pub-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.pub-kind {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pub-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pub-actions .ghost {
  padding: 6px 10px;
  font-size: 12px;
}
.pub-sheet-card { width: min(420px, calc(100% - 8px)); }
.pub-img-preview {
  position: relative;
  margin-bottom: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.pub-img-preview img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
}
.pub-img-preview .icon-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,.55);
  color: #fff;
}
.pub-sheet-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pub-sheet-actions .btn { flex: 1; min-width: 120px; margin-top: 0; }
.pub-empty {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 20px 8px;
}
.attach-card { width: min(360px, calc(100% - 8px)); }
.attach-menu {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}
.attach-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  text-align: left;
  transition: background .15s ease, transform .1s ease;
}
.attach-opt .menu-ico {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
}
.attach-opt:hover { background: color-mix(in srgb, var(--panel-2) 70%, var(--accent)); }
.attach-opt:active { transform: scale(0.985); }
.sheet-card {
  width: min(460px, calc(100% - 8px));
  max-height: min(86dvh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--confirm-glass, color-mix(in srgb, var(--panel) 86%, transparent));
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  flex-shrink: 0;
  z-index: 3;
  background: transparent;
}
.sheet-head.profile-head {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: calc(14px + var(--safe-t)) 8px 12px 14px;
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
}
.sheet-body { padding: 18px 16px 20px; overflow-x: hidden; overflow-y: auto; min-height: 0; max-width: 100%; box-sizing: border-box; }
.sheet-body.peer-body { padding-top: 0; }
.ava-edit { text-align: center; margin-bottom: 16px; }
.ava-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.ava-actions .ghost { padding: 8px 12px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 28px; height: 28px;
  border-radius: 10px;
  border: 2px solid transparent;
}
.swatch.is-on { border-color: #fff; outline: 2px solid var(--accent); }
.peer-body { text-align: center; }
.peer-cover {
  position: relative;
  margin: 0 -16px 12px;
  width: calc(100% + 32px);
  aspect-ratio: 1 / 1;
}
.peer-cover .profile-ava {
  width: 100%;
}
.profile-ava .ava-emo { font-size: 88px; }
.peer-body h2, .profile-nick {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
}
.profile-nick { font-size: 20px; margin-bottom: 12px; }
.peer-body .handle { color: var(--muted); margin: 4px 0 10px; }
.peer-body .bio-box {
  margin: 0 0 12px;
}
.peer-body .bio-box .bio {
  white-space: pre-wrap;
  margin: 0;
  text-align: left;
}
.peer-body .bio { white-space: pre-wrap; margin: 0 0 8px; }
.shared-box {
  text-align: left;
  margin: 16px 0 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
}
.shared-box .profile-tabs {
  margin-bottom: 10px;
}
.shared-box .profile-tab {
  font-size: 13px;
  padding: 8px 4px;
}
.peer-shared-body {
  min-height: 72px;
}
.shared-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.shared-head .ghost { padding: 6px 10px; font-size: 13px; }
.shared-files { display: grid; gap: 6px; margin-top: 2px; }
.shared-voice-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--line);
  text-align: left;
}
.shared-voice-row small { color: var(--muted); }
.shared-link-row {
  display: block;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--line);
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
  font-size: 13px;
}
.member-card {
  text-align: left;
  margin-top: 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 420px);
}
.member-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 6px;
}
.member-card-head strong { font-size: 13px; }
.member-card-head .ghost { width: auto; margin: 0; padding: 6px 10px; font-size: 12px; }
.member-list {
  text-align: left;
  margin: 0;
  display: grid;
  gap: 8px;
  overflow: auto;
  min-height: 0;
  padding: 2px;
}
.member-sec { display: grid; gap: 8px; }
.member-sec > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 4px;
}
.member-list .user-row {
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
#btn-leave-group { width: 100%; }
.admin-row .row-top b {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.pick-row .name-line { flex: 0 1 auto; }
.peer-actions { display: grid; gap: 8px; margin-top: 8px; }
.peer-actions-top {
  margin: 8px 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.peer-actions-icos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.peer-actions-top .peer-ico-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}
.peer-actions-top .peer-ico-btn:active { transform: scale(0.96); }
.peer-actions-top #view-write.peer-request-btn {
  width: auto;
  height: auto;
  min-height: 44px;
  border-radius: 14px;
  margin: 0;
  padding: 10px 14px;
  position: relative;
}
.peer-notify-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.peer-notify-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 168px;
  z-index: 40;
}
.peer-actions-top #view-add {
  align-self: center;
}
.peer-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 2px;
  text-align: center;
}
.peer-identity h2 { margin: 0; justify-content: center; }
.peer-identity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 8px;
}
.peer-handle-row .handle {
  margin: 0;
  color: var(--muted);
}
.peer-seen {
  margin: 0;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
}
.peer-body .handle { text-align: center; }
.member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
}
.member-row .meta { flex: 1; min-width: 0; }
.member-row .mini {
  flex: 0 0 auto;
  width: auto;
  padding: 6px 8px;
  font-size: 12px;
}
#thread .chat-head .who {
  cursor: pointer;
  min-width: 0;
  flex: 1;
}
#thread .chat-head .who:active { opacity: .85; }
.user-row.is-saved .ava-wrap > .dot,
.user-row.is-saved .ava .dot { display: none !important; }
#group-edit { margin: 8px 0 4px; text-align: left; width: 100%; }
#group-edit .ava-actions { justify-content: center; margin: 8px 0 12px; }
#group-edit .btn { width: 100%; }
.muted { color: var(--muted); }
.danger-btn { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 40%, var(--line)) !important; }
.id-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  background: var(--panel-2);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 8px 0 12px;
  font-size: 12px;
  text-align: left;
}
.id-box code { overflow: hidden; text-overflow: ellipsis; }
.id-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.id-actions .ghost { width: auto; margin: 0; padding: 8px 10px; }
.quote {
  font-size: 12px;
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
}
.quote:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fwd, .who { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.who { font-weight: 700; color: var(--accent); }
.bubble { position: relative; cursor: pointer; }
.bubble.deleted { opacity: 0.7; font-style: italic; color: var(--muted); }
.msg-wrap {
  display: flex;
  flex-direction: column;
  max-width: min(85%, 560px);
  width: auto;
  align-self: flex-start;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}
.msg-wrap.me { align-self: flex-end; align-items: flex-end; }
.bubble.call-log-bubble {
  padding: 10px 14px 8px;
  min-width: min(100%, 280px);
}
.call-log {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding-right: 4px;
}
.call-log-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}
.call-log-ico svg {
  width: 16px;
  height: 16px;
}
.call-log.is-ok .call-log-ico {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
  color: var(--accent);
}
.call-log.is-ok .call-log-text {
  color: var(--accent);
}
.call-log.is-fail .call-log-ico {
  background: color-mix(in srgb, #ff6b7a 18%, var(--panel-2));
  color: #ff6b7a;
}
.call-log.is-fail .call-log-text {
  color: #ff8a96;
}
.call-log-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}
.msg-wrap .bubble.them.call-log-bubble {
  background: color-mix(in srgb, var(--them) 92%, transparent);
}
.msg-wrap .bubble.me.call-log-bubble {
  background: color-mix(in srgb, var(--me) 92%, transparent);
}
.msg-wrap.system {
  align-self: center;
  align-items: center;
  justify-content: center;
  max-width: min(92%, 420px);
  width: max-content;
  margin: 4px auto;
  padding: 0 8px;
}
.msg-wrap.system .sys-msg {
  width: 100%;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  border-radius: 12px;
  padding: 6px 12px;
  user-select: text;
}
.msg-wrap .bubble { max-width: 100%; min-width: 0; box-sizing: border-box; }
.msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
  padding: 0 4px;
}
.msg-status {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--muted);
  user-select: none;
  display: inline-flex;
  align-items: center;
}
.msg-status .fa-solid {
  font-size: 11px;
  line-height: 1;
  width: 1em;
  text-align: center;
}
.msg-status.sent,
.msg-status.pending,
.msg-status.delivered { color: var(--muted) !important; }
.msg-status.read,
.msg-status.read .fa-solid,
.msg-status.read .fa-solid::before { color: #5fd46a !important; }
.msg-status.failed { color: #ffb020; }
.msg-status .msg-clock,
.msg-status .menu-ico {
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  color: inherit;
}
.msg-status .msg-clock svg,
.msg-status .menu-ico svg,
.msg-status .menu-ico .fa-solid { width: 12px; height: 12px; font-size: 11px; }
.msg-cancel-row {
  display: none;
}
.msg-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 100%;
}
.msg-wrap.me .msg-bubble-row {
  flex-direction: row;
  justify-content: flex-end;
}
.msg-cancel {
  display: none !important;
}
.msg-cancel:active { transform: scale(0.94); }
.msg-cancel .call-ico {
  display: none;
}
.msg-cancel .call-ico svg,
.msg-cancel .call-ico .fa-solid {
  width: 14px;
  height: 14px;
}
.draft-thumbs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  max-width: min(56vw, 220px);
  overflow-x: auto;
}
.draft-thumbs .draft-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.read-by {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  padding: 0 4px;
  cursor: pointer;
  text-align: right;
}
.read-by:hover { color: var(--accent); }
.msg-wrap .reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  justify-content: flex-end;
  align-items: center;
}
.msg-wrap.them .reacts { justify-content: flex-start; }
.reacts .react-chip,
.reacts button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 2px 6px 2px 5px;
  font-size: 12px;
  line-height: 1;
  color: inherit;
  transition: transform .1s ease;
  max-width: 100%;
}
.reacts .react-chip:hover,
.reacts button:hover { transform: scale(1.06); }
.reacts .react-chip:active,
.reacts button:active { transform: scale(0.94); }
.reacts .react-chip.me,
.reacts button.me { outline: 1px solid var(--accent); }
.react-emoji { flex: 0 0 auto; font-size: 13px; }
.react-n { flex: 0 0 auto; font-size: 11px; opacity: .9; }
.react-avas {
  display: inline-flex;
  align-items: center;
  margin-left: 1px;
}
.react-avas .react-ava-wrap {
  width: 18px;
  height: 18px;
  margin-left: -10px;
  position: relative;
  flex-shrink: 0;
}
.react-avas .react-ava-wrap:first-child { margin-left: 0; }
.react-avas .react-ava-wrap:nth-child(1) { z-index: 1; }
.react-avas .react-ava-wrap:nth-child(2) { z-index: 2; }
.react-avas .react-ava-wrap:nth-child(3) { z-index: 3; }
.react-avas .react-ava-wrap:nth-child(4) { z-index: 4; }
.react-avas .react-ava-wrap:nth-child(5) { z-index: 5; }
.react-ava {
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  font-size: 8px !important;
  margin-left: 0;
  border: 1.5px solid color-mix(in srgb, var(--panel) 70%, transparent);
  box-sizing: border-box;
  overflow: hidden;
}
.react-avas .react-ava:first-child { margin-left: 0; }
.react-ava img,
.react-ava .ava-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.react-ava .ava-emo { font-size: 10px; line-height: 1; }
.react-more {
  margin-left: 2px;
  font-size: 10px;
  opacity: .85;
}
.msg-pop {
  position: fixed;
  z-index: 35;
  pointer-events: none;
}
.msg-pop:not([hidden]) { pointer-events: auto; }
.msg-pop-stack {
  --pop-react: 34px;
  --pop-gap: 3px;
  --pop-pad: 12px;
  --pop-w: calc(var(--pop-react) * 6 + var(--pop-gap) * 5 + var(--pop-pad));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: min(var(--pop-w), calc(100vw - 24px));
  animation: pop-in .15s ease;
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: none; }
}
.msg-pop-emoji-bar {
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 10px 32px rgba(0,0,0,.4);
  backdrop-filter: blur(16px);
  padding: 5px 6px;
  width: 100%;
  box-sizing: border-box;
}
.msg-pop-reacts {
  display: flex;
  gap: var(--pop-gap);
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.msg-pop-reacts::-webkit-scrollbar { display: none; }
.msg-pop-reacts button {
  box-sizing: border-box;
  flex: 0 0 var(--pop-react);
  width: var(--pop-react);
  height: var(--pop-react);
  display: grid;
  place-items: center;
  border: 0;
  background: var(--panel-2);
  border-radius: 10px;
  font-size: 17px;
  scroll-snap-align: start;
  transition: transform .1s ease, background .15s ease;
  padding: 0;
}
.msg-pop-reacts button:hover { background: color-mix(in srgb, var(--panel-2) 65%, var(--accent)); }
.msg-pop-reacts button:active { transform: scale(0.88); }
.msg-pop-reacts button.me { outline: 2px solid var(--accent); outline-offset: -2px; }
.msg-pop-menu {
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(0,0,0,.4);
  backdrop-filter: blur(16px);
  padding: 3px;
  width: min(220px, calc(100vw - 24px));
  max-width: none;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  align-self: center;
}
.msg-pop-act {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  transition: background .15s ease, transform .1s ease;
}
.msg-pop-act .menu-ico {
  width: 26px;
  height: 26px;
}
.msg-pop-act .menu-ico svg,
.msg-pop-act .menu-ico .fa-solid {
  width: 15px;
  height: 15px;
}
.msg-pop-act.msg-pop-seen-more {
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted);
}
.msg-pop-act.msg-pop-seen-more .menu-ico {
  width: 22px;
  height: 22px;
  background: transparent;
  color: var(--muted);
}
.msg-pop-act.msg-pop-seen-more .menu-ico svg,
.msg-pop-act.msg-pop-seen-more .menu-ico .fa-solid {
  width: 14px;
  height: 14px;
}
.msg-pop-act:hover { background: var(--panel-2); }
.msg-pop-act:active { transform: scale(0.98); }
.msg-pop-act.danger-btn { color: var(--danger); }
.msg-pop-meta {
  display: block;
  padding: 6px 12px 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.msg-pop-seen {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 2px;
}
.msg-pop-ticks {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: -2px;
  line-height: 1;
  user-select: none;
}
.msg-pop-seen-more {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
  text-align: right;
  color: var(--muted);
}
.msg-pop-seen-time {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 4px;
}
.msg-pop-readers-avas {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.msg-pop-readers-avas .ava {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 10px;
  margin-left: -10px;
  border: 1.5px solid var(--panel);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.msg-pop-readers-avas .ava:first-child { margin-left: 0; }
.msg-pop-readers-avas .ava:nth-child(1) { z-index: 1; }
.msg-pop-readers-avas .ava:nth-child(2) { z-index: 2; }
.msg-pop-readers-avas .ava:nth-child(3) { z-index: 3; }
.msg-pop-readers-avas .ava:nth-child(4) { z-index: 4; }
.msg-pop-readers-avas .ava:nth-child(5) { z-index: 5; }
.msg-pop-sep {
  height: 1px;
  margin: 4px 8px;
  background: var(--line);
}
.msg-pop-readers-panel {
  display: grid;
  max-height: 240px;
}
.msg-pop-readers-panel[hidden] { display: none !important; }
.msg-pop-readers-body {
  overflow: auto;
  max-height: 200px;
}
.msg-pop-readers-body .user-row,
.msg-pop-reader-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
}
.msg-pop-readers-body .user-row:hover { background: var(--panel-2); }
.msg-pop-reader-row .meta {
  min-width: 0;
  flex: 1;
}
.msg-pop-reader-row .meta span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.msg-pop-reader-reacts {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 16px;
  line-height: 1;
  padding-left: 6px;
}
#readers-body .user-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
#readers-body .user-row .meta { flex: 1; min-width: 0; }
#readers-body .msg-pop-reader-reacts { margin-left: auto; }
.msg-pop-react-people {
  display: none !important;
}
.msg-pop-react-people[hidden] { display: none !important; }
#msg-pop-actions[hidden] { display: none !important; }
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text);
  text-decoration: none;
}

/* Документ как в Telegram: круг с FA + имя + тип/размер, время снизу справа */
.bubble.has-file {
  min-width: min(220px, 78vw);
  max-width: min(300px, 86vw);
  padding: 8px 10px 6px;
}
.bubble.has-file .file-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 0 2px;
  padding: 2px 2px 14px 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bubble.has-file .file-doc:active {
  opacity: 0.88;
}
.bubble.has-file .file-doc-ico {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}
.bubble.has-file.me .file-doc-ico {
  background: color-mix(in srgb, #fff 14%, transparent);
  color: #d7ffe0;
}
.bubble.has-file .file-doc-ico .fa-solid {
  font-size: 22px;
  line-height: 1;
}
.bubble.has-file .file-doc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 4px;
}
.bubble.has-file .file-doc-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bubble.has-file .file-doc-sub {
  font-size: 12px;
  line-height: 1.2;
  color: var(--muted);
}
.bubble.has-file time {
  position: absolute;
  right: 10px;
  bottom: 7px;
  float: none;
  clear: none;
  margin: 0;
  z-index: 2;
}
.bubble.has-file-caption {
  max-width: min(300px, 86vw);
}
.bubble.has-file-caption .file-doc {
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.bubble.has-file-caption time {
  position: static;
  float: right;
  clear: both;
  margin: 2px 0 0 10px;
}
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.media-grid img { width: 100%; height: 88px; object-fit: contain; object-position: center; border-radius: 10px; background: #12151c; }
.media-grid-item {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.media-grid-item img { display: block; }
.menu-list { display: grid; gap: 8px; }
.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding: 8px 14px 8px;
  background: #0c0e14;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  box-sizing: border-box;
}
html[data-platform="ios"] .bottom-nav,
html[data-platform="android"] .bottom-nav {
  /* Не 8px + safe-area: иначе пилюля уезжает вверх, под ней чёрная дыра. */
  padding: 8px 12px 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  background: #0c0e14;
}
html[data-platform="ios"] .bottom-nav-pill,
html[data-platform="android"] .bottom-nav-pill {
  margin-bottom: 0;
}
.bottom-nav-pill {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: stretch;
  justify-content: space-around;
  min-height: var(--tab-bar-h, 56px);
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0 4px;
  gap: 0;
  overflow: hidden;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.bottom-btn {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 2px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}
.bottom-ico {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.bottom-ico svg,
.bottom-ico .fa-solid {
  width: 1.25em;
  height: 1em;
  font-size: 18px;
  display: block !important;
  line-height: 1 !important;
  text-align: center;
}
.bottom-ico-ava.ava {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  font-size: 11px;
  overflow: hidden;
}
.bottom-ico-ava.ava img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.bottom-btn.is-on .bottom-ico-ava {
  box-shadow: 0 0 0 2px var(--accent);
}
.bottom-label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bottom-btn:active { opacity: 0.72; }
.bottom-btn.is-on {
  color: var(--accent);
  background: transparent;
}
.bottom-btn.is-on .bottom-label { font-weight: 600; }
.req-card {
  background: var(--panel-2);
  border-radius: 16px;
  padding: 12px;
  margin: 8px;
  display: grid;
  gap: 8px;
}
.profile-on-ava { cursor: pointer; }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .app.show-chat .sidebar { display: none; }
  .app:not(.show-chat) .chat { display: none; }
  .chat-head .back { display: grid !important; }
  .bottom-nav { display: block; }
  .app.show-chat ~ .bottom-nav { display: none; }
  #side-tabs { display: none; }
  .messages { padding-bottom: 12px; }
  .user-list { padding-bottom: var(--nav-reserve); }
  .compose { padding-bottom: calc(8px + var(--safe-b)); }
  html.kb-open .compose,
  html.emoji-kb .compose {
    padding-bottom: 6px;
  }
  .app.show-chat .messages { padding-bottom: var(--compose-reserve, 116px); }
  .app.show-chat .messages-pane::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--compose-reserve, 96px) + 20px);
    background: linear-gradient(to top, color-mix(in srgb, #0a0d16 92%, transparent), transparent);
    pointer-events: none;
    z-index: 2;
  }
  html.dock-bridge .app.show-chat .messages-pane::after {
    opacity: 0;
  }
  .app.show-chat .compose:not(.is-voice-rec) > #composer {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  .app.show-chat .compose {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 96;
    background: transparent;
    padding: 0;
    pointer-events: none;
  }
  html.kb-open .app.show-chat .compose,
  html.emoji-kb .app.show-chat .compose {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  html.kb-open .app.show-chat .compose > #reply-bar,
  html.kb-open .app.show-chat .compose > #img-preview,
  html.kb-open .app.show-chat .compose > #composer,
  html.emoji-kb .app.show-chat .compose > #reply-bar,
  html.emoji-kb .app.show-chat .compose > #img-preview,
  html.emoji-kb .app.show-chat .compose > #composer {
    pointer-events: auto;
    flex-shrink: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
  html.kb-open:not(.emoji-kb) .app.show-chat .compose > #composer {
    padding-bottom: 6px;
    margin-bottom: 0;
    transition: none;
  }
  html.emoji-kb .app.show-chat .compose > #composer {
    padding-bottom: 6px;
    margin-bottom: var(--composer-bottom, var(--input-dock-bottom, 320px));
    transition: none;
  }
  html.emoji-kb .app.show-chat .compose > .emoji-pop:not(.float) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--input-dock-bottom, var(--emoji-dock-h, 320px));
    max-height: var(--input-dock-bottom, var(--emoji-dock-h, 320px));
    margin: 0;
    flex: none;
    pointer-events: auto;
    z-index: 95;
    transition: none;
  }
  html.emoji-kb .app.show-chat .messages,
  html.kb-open:not(.emoji-kb) .app.show-chat .messages {
    padding-bottom: var(--chat-dock-pad, var(--emoji-compose-pad, var(--messages-dock-pad, var(--compose-reserve, 116px))));
  }
  #profile.sheet:not([hidden]),
  #peer-profile.sheet:not([hidden]),
  #admin.sheet:not([hidden]) {
    display: flex;
    flex-direction: column;
    inset: 0;
    padding: 0;
    z-index: 85;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    place-items: stretch;
    pointer-events: none;
  }
  #profile.sheet:not([hidden]) .profile-card,
  #peer-profile.sheet:not([hidden]) .sheet-card,
  #admin.sheet:not([hidden]) .sheet-card {
    pointer-events: auto;
    background: var(--bg, #0c0e14);
  }
  #profile .sheet-card,
  #peer-profile .sheet-card,
  #admin .sheet-card {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #peer-profile .sheet-head,
  #admin .sheet-head {
    padding-top: calc(14px + var(--safe-t));
  }
  #profile .profile-scroll,
  #peer-profile .peer-body,
  #admin .sheet-body {
    padding-bottom: var(--nav-reserve);
  }
  .app.show-chat ~ #peer-profile .peer-body {
    padding-bottom: calc(20px + var(--safe-b));
  }
  .side-head.has-stories {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding-bottom: 8px;
    gap: 4px;
    overflow: visible;
  }
  .side-head.has-stories .side-head-row {
    display: contents;
  }
  .side-head.has-stories #brand-mark {
    order: 0;
    align-self: center;
  }
  .side-head.has-stories .side-stories-slot-mobile {
    flex: 1;
    min-width: 0;
    order: 1;
    padding-top: 0;
    margin-left: 10px;
    padding-left: 0;
    padding-right: 2px;
    display: flex;
    align-items: center;
  }
  .side-head.has-stories:not(.stories-open) .side-stories-slot-mobile {
    display: none;
  }
  .side-head.has-stories .side-stories .stories-rail,
  .side-head.has-stories .side-stories-slot-mobile .stories-rail {
    padding-left: 6px;
    padding-right: 2px;
  }
  .side-head.has-stories .side-stories {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0;
    min-height: 44px;
    order: 1;
  }
  .side-head.has-stories .side-head-actions {
    order: 2;
    align-self: center;
    padding-top: 0;
  }
}
.back { display: none; }

.profile-actions {
  display: grid;
  gap: 8px;
  margin: 4px 0 16px;
}
.profile-actions .btn { margin-top: 0; }
.pass-hint {
  font-size: 12px;
  font-weight: 600;
  margin: -4px 0 10px;
  color: #5fd46a;
}
.pass-hint.is-bad { color: var(--danger); }
.profile-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.profile-foot .app-ver {
  margin: 0;
  width: 100%;
}
.profile-foot .danger-btn { width: auto; padding: 8px 12px; align-self: flex-end; }
.sessions-box {
  margin: 4px 0 16px;
  background: var(--panel-2);
  border-radius: 14px;
  padding: 10px;
}
.secret-box {
  margin: 16px 0;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 12px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.secret-box > strong { font-size: 15px; letter-spacing: -0.01em; }
.secret-box > .muted { margin: 0; font-size: 12px; line-height: 1.35; }
.secret-box .profile-actions { margin-top: 2px; }
.secret-field { min-width: 0; max-width: 100%; }
.secret-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.secret-select-wrap {
  position: relative;
  min-width: 0;
  max-width: 100%;
}
.secret-select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}
.secret-box select,
.secret-box input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #fff);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.secret-box select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}
.secret-box select:focus,
.secret-box input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
.secret-current {
  padding: 12px;
  border-radius: 14px;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--danger, #ff5a6a) 22%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger, #ff5a6a) 32%, var(--line));
  max-width: 100%;
  min-width: 0;
}
.secret-current[hidden] { display: none !important; }
.secret-current-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--danger, #ff5a6a) 78%, #fff);
  margin-bottom: 10px;
}
.secret-spoiler {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 14px 16px;
  min-height: 52px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), transparent 40%),
    rgba(0, 0, 0, 0.34);
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  overflow: hidden;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.secret-spoiler:hover { background: rgba(0, 0, 0, 0.42); }
.secret-spoiler:active { transform: scale(0.992); }
.secret-spoiler-text {
  display: block;
  filter: blur(8px) saturate(0.7);
  opacity: 0.45;
  user-select: none;
  letter-spacing: 0.02em;
  transition: filter .28s ease, opacity .28s ease, letter-spacing .28s ease;
}
.secret-spoiler-hint {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 92%, transparent);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.28));
  backdrop-filter: blur(1.5px);
  pointer-events: none;
  transition: opacity .22s ease;
}
.secret-spoiler-eye {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger, #ff5a6a) 22%, rgba(0,0,0,0.35));
  border: 1px solid color-mix(in srgb, var(--danger, #ff5a6a) 40%, transparent);
  color: #fff;
}
.secret-spoiler.is-on .secret-spoiler-text {
  filter: none;
  opacity: 1;
  letter-spacing: 0;
  user-select: text;
}
.secret-spoiler.is-on .secret-spoiler-hint { opacity: 0; }
.secret-spoiler.is-on {
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger, #ff5a6a) 34%, transparent);
}
.sessions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.sessions-head .ghost { padding: 6px 8px; font-size: 11px; width: auto; }
.session-list { display: grid; gap: 8px; }
.session-row {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 12px;
}
.session-row .ghost { width: auto; padding: 6px 8px; margin-top: 6px; }
.confirm-card { width: min(400px, calc(100% - 8px)); }
#confirm-text {
  margin: 0;
  white-space: pre-line;
  color: var(--muted);
  line-height: 1.45;
  font-size: 14px;
}
.confirm-input {
  width: 100%;
  margin: 8px 0 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.confirm-actions .ghost,
.confirm-actions .btn { width: auto; margin: 0; padding: 10px 14px; }
.confirm-delete-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
  user-select: none;
}
.confirm-delete-wrap input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent, #5FD46A); }
.user-row.is-archive-folder .archive-folder-ava {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2) !important;
  color: var(--muted, #94A3B8);
}
.user-row.is-archive-folder .archive-folder-ava svg { width: 22px; height: 22px; }
.btn.danger-fill {
  background: #e11d48;
  color: #fff;
}
.toasts {
  position: fixed;
  top: var(--banner-top);
  right: 12px;
  left: auto;
  z-index: 10050;
  display: grid;
  gap: 8px;
  width: min(320px, calc(100% - 24px));
  max-width: calc(100vw - 24px);
  pointer-events: none;
  isolation: isolate;
}
@media (max-width: 820px) {
  .toasts {
    top: var(--banner-top);
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
  }
}
body:has(#update-bar:not([hidden])) .toasts {
  top: calc(var(--banner-top) + var(--banner-stack));
}
body:has(#role-bar:not([hidden])) .toasts {
  top: calc(var(--banner-top) + var(--banner-stack));
}
body:has(#update-bar:not([hidden])):has(#role-bar:not([hidden])) .toasts {
  top: calc(var(--banner-top) + var(--banner-stack) * 2);
}
@media (max-width: 820px) {
  body:has(#update-bar:not([hidden])) .toasts {
    top: calc(var(--banner-top) + var(--banner-stack));
  }
  body:has(#role-bar:not([hidden])) .toasts {
    top: calc(var(--banner-top) + var(--banner-stack));
  }
  body:has(#update-bar:not([hidden])):has(#role-bar:not([hidden])) .toasts {
    top: calc(var(--banner-top) + var(--banner-stack) * 2);
  }
}
.toast {
  pointer-events: auto;
  position: relative;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 10px 34px 10px 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  font-size: 13px;
  animation: toast-in .2s ease;
  touch-action: pan-y;
  transition: transform .15s ease, opacity .15s ease;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.toast-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.toast-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--muted);
}
.toast-ico svg,
.toast-ico .fa-solid {
  width: 16px;
  height: 16px;
}
.toast-ico-panda {
  background: transparent;
  padding: 0;
}
.toast-ico-panda img {
  display: block;
  border-radius: 8px;
}
.toast.panda-sec .toast-ico {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-2));
  color: var(--accent);
}
.toast-body {
  flex: 1;
  min-width: 0;
}
.toast-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  white-space: normal;
}
.toast-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  display: grid;
  place-items: center;
  padding: 0;
}
.toast-x:hover { background: color-mix(in srgb, var(--panel-2) 60%, var(--danger)); color: var(--text); }
.toast b { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.toast.panda-sec {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent-dim) 70%, var(--panel));
}
.toast.panda-sec b { color: var(--accent); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.cookie-bar, .update-bar, .role-bar, .push-perm-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 33;
  width: min(520px, calc(100% - 24px));
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.cookie-bar { bottom: calc(14px + var(--safe-b)); }
.update-bar { top: var(--banner-top); }
.role-bar {
  top: var(--banner-top);
  z-index: 33;
  border-color: color-mix(in srgb, #f0c040 35%, var(--line));
}
body:has(#update-bar:not([hidden])) .role-bar {
  top: calc(var(--banner-top) + var(--banner-stack));
}
.role-bar span {
  margin: 0;
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.role-bar .icon-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.push-perm-bar {
  bottom: calc(14px + var(--safe-b));
  z-index: 96;
  border-color: color-mix(in srgb, #e84855 40%, var(--line));
}
@media (max-width: 820px) {
  body:has(#bottom-nav:not([hidden])) .push-perm-bar {
    bottom: var(--nav-reserve);
  }
}
.push-perm-bar[hidden], .update-bar[hidden], .role-bar[hidden], .cookie-bar[hidden] { display: none !important; }
.push-perm-bar img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  background: #1a1f2c;
}
.push-perm-text { flex: 1; min-width: 0; }
.push-perm-text strong { display: block; font-size: 14px; }
.push-perm-text p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.cookie-bar p, .update-bar span { margin: 0; flex: 1; font-size: 13px; color: var(--muted); }
.cookie-bar .btn, .update-bar .btn, .role-bar .btn, .push-perm-bar .btn { width: auto; margin: 0; padding: 8px 12px; flex-shrink: 0; }
.push-perm-bar .ghost { width: auto; margin: 0; padding: 8px 10px; flex-shrink: 0; }
.update-bar .icon-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}
.ip-source {
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--muted);
}
.ip-source.scanner { background: color-mix(in srgb, var(--danger) 20%, var(--panel-2)); color: var(--danger); }

.msg-wrap.grouped { margin-top: -4px; }
.msg-wrap.grouped .who { display: none; }
.msg-wrap.tail .bubble.me { border-bottom-right-radius: 4px; }
.msg-wrap.tail .bubble.them { border-bottom-left-radius: 4px; }

.chat-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 4px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  flex-shrink: 0;
}
.chat-search[hidden] { display: none; }
.chat-search input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  color: inherit;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 14px;
  line-height: 1.2;
  height: 32px;
}
.chat-search-count {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  min-width: 3ch;
  text-align: right;
}
.chat-search .icon-btn { width: 32px; height: 32px; border-radius: 10px; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 2px 4px 2px 0;
  cursor: pointer;
}
.brand-mark[hidden] { display: none !important; }
.brand-mark img {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}
.brand-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-x {
  color: #ff3b4e;
  margin-left: 1px;
}
.stories-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px;
  flex-shrink: 0;
  min-height: 44px;
  scrollbar-width: none;
  align-items: center;
}
.stories-rail.is-skel { pointer-events: none; }
.stories-rail::-webkit-scrollbar { display: none; }
.stories-rail[hidden] { display: none; }
.story-item.skel .story-ring {
  background: var(--line);
  padding: 3px;
}
.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.story-ring {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 15px;
  padding: 2px;
  background: var(--line);
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
}
.story-item.unseen .story-ring {
  background: conic-gradient(#5fd46a, #7c9cff, #ff7a90, #5fd46a);
}
.story-item.seen .story-ring { background: #4a5160; }
.story-item.mine .story-ring {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel) 85%, transparent);
}
.story-item .ava-wrap {
  width: 36px;
  height: 36px;
}
.story-item .ava {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  font-size: 13px;
  overflow: hidden;
}
.story-item .ava-wrap > .dot,
.story-item .ava .dot { display: none; }
.story-name { display: none !important; }
.skel-story-name { display: none !important; }
.side-head:not(.stories-open) .side-stories-slot-mobile,
.side-head:not(.stories-open) #stories-rail {
  /* brand stays; rail hidden via JS */
}
.story-plus {
  position: absolute;
  right: -1px;
  bottom: -1px;
  left: auto;
  top: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #0c0e14;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  font-style: normal;
  border: 1.5px solid var(--panel);
  z-index: 2;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}
.story-plus.fa-solid,
.story-plus::before {
  font-size: 9px;
  line-height: 1;
}
#story-view-add {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.story-add-fab {
  position: absolute;
  left: 50%;
  bottom: calc(68px + var(--safe-b, 0px));
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(20, 24, 33, 0.88);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.story-add-fab span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #0c0e14;
  font-size: 16px;
  line-height: 1;
}
.story-add-fab[hidden] { display: none !important; }
.story-view.is-paused .story-view-stage::after {
  content: '❚❚';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 28px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.story-name { display: none !important; }
.story-view {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  display: flex;
  flex-direction: column;
}
.story-view[hidden] { display: none; }
.story-view-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  touch-action: manipulation;
}
.story-view-stage img,
.story-view-stage video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.story-view-stage video[hidden],
.story-view-stage img[hidden] { display: none; }
@media (min-width: 821px) {
  .story-view-stage img,
  .story-view-stage video {
    max-width: min(420px, 100%);
    max-height: min(68vh, calc(100dvh - 190px));
    border-radius: 16px;
  }
}
.story-view-bars {
  position: absolute;
  top: calc(8px + var(--safe-t));
  left: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.story-view-bars i {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,0.28);
}
.story-view-bars i.done, .story-view-bars i.on { background: #fff; }
.story-view-bars i.on {
  background: linear-gradient(90deg, #fff 0%, #fff var(--p, 100%), rgba(255,255,255,0.28) var(--p, 100%));
}
.story-view-head {
  position: absolute;
  top: calc(18px + var(--safe-t));
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
  color: #fff;
}
.story-view-head .who small { color: rgba(255,255,255,0.7); }
.story-view-head .icon-btn { background: rgba(20, 24, 33, 0.7); color: #fff; width: 36px; height: 36px; }
.story-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  border: 0;
  background: transparent;
  z-index: 1;
  touch-action: manipulation;
}
.story-hit.left { left: 0; }
.story-hit.right { right: 0; }
.story-viewers-chip {
  position: absolute;
  bottom: calc(68px + var(--safe-b, 0px));
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: rgba(20, 24, 33, 0.78);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.story-viewers-chip[hidden] { display: none; }
.story-viewers-avas {
  display: inline-flex;
  align-items: center;
}
.story-viewers-avas .ava {
  width: 22px;
  height: 22px;
  margin-left: -7px;
  border: 2px solid rgba(20, 24, 33, 0.95);
  border-radius: 8px;
  font-size: 9px;
  overflow: hidden;
}
.story-viewers-avas .ava:first-child { margin-left: 0; }
.story-viewers-count { min-width: 10px; }
.story-reacts {
  position: absolute;
  bottom: calc(12px + var(--safe-b, 0px));
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px;
}
.story-react-btn {
  border: 0;
  background: rgba(20, 24, 33, 0.78);
  color: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 17px;
  line-height: 1;
}
.story-react-btn.me {
  outline: 2px solid var(--accent);
  background: rgba(20, 24, 33, 0.92);
}

.story-cam {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #000;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.story-cam[hidden] { display: none !important; }
.story-cam video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  background: #000;
}
.story-cam.is-back video { transform: none; }
.story-cam-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + var(--safe-t)) 12px 0;
}
.story-cam-head .icon-btn {
  background: rgba(20, 24, 33, 0.7);
  color: #fff;
  width: 40px;
  height: 36px;
}
.story-cam-head #story-cam-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.story-cam-head #story-cam-time[hidden] { display: none; }
.story-cam-modes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(118px + var(--safe-b));
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 18px;
}
.story-cam-mode {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 4px;
  cursor: pointer;
}
.story-cam-mode.is-on { color: #fff; }
.story-cam-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(24px + var(--safe-b));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}
.story-cam-side {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(20, 24, 33, 0.72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.story-cam-side-spacer { visibility: hidden; pointer-events: none; }
.story-cam-shutter {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  padding: 0;
}
.story-cam.is-video .story-cam-shutter {
  background: #ff4d5e;
}
.story-cam.is-rec .story-cam-shutter {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border-width: 0;
  box-shadow: 0 0 0 18px rgba(255, 77, 94, 0.22), 0 0 0 28px #fff;
  background: #ff4d5e;
}
.story-cam.is-rec .story-cam-modes { opacity: 0.35; pointer-events: none; }

.bubble.has-note {
  background: transparent;
  padding: 0;
  max-width: none;
}
.bubble.has-note time {
  position: absolute;
  right: 10px;
  bottom: 8px;
  margin: 0;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
  color: #fff;
}
.msg-wrap.is-note {
  width: auto;
  max-width: calc(100% - 12px);
  padding: 8px 6px;
  overflow: visible;
}
.bubble.has-note {
  background: transparent !important;
  padding: 4px;
  overflow: visible;
  max-width: none;
}
.bubble.has-note .msg-media {
  overflow: visible;
  background: transparent;
  width: auto;
  display: inline-block;
  border-radius: 0;
  padding: 6px;
  margin: -6px;
}
.bubble.has-voice {
  padding: 8px 10px 6px;
  max-width: min(292px, 82vw);
}
.bubble.has-voice .msg-media,
.bubble.has-voice .voice-wrap {
  background: transparent;
  overflow: visible;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  display: block;
}
.bubble.has-voice time {
  position: static;
  display: block;
  margin: 2px 0 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: right;
  opacity: 0.72;
  font-size: 11px;
}
.msg-media.is-note-media {
  overflow: visible;
}
.note-circle {
  position: relative;
  display: block;
  width: 148px;
  height: 148px;
  max-width: min(148px, 42vw);
  max-height: min(148px, 42vw);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none;
}
.note-circle-media {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #111;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 0 4px color-mix(in srgb, #fff 18%, transparent),
    0 6px 18px rgba(0,0,0,0.35);
}
.note-circle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
.note-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 38px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  background: radial-gradient(circle at center, rgba(0,0,0,0.28), rgba(0,0,0,0.08));
}
.note-circle.playing .note-play { display: none; }
.msg-wrap.me .note-circle-media {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--me) 80%, transparent),
    0 0 0 4px rgba(255,255,255,0.16),
    0 6px 18px rgba(0,0,0,0.35);
}
.msg-wrap.them .note-circle-media {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--them) 70%, #fff),
    0 0 0 4px rgba(255,255,255,0.12),
    0 6px 18px rgba(0,0,0,0.35);
}

/* inline playback for video attachments */
.bubble.has-video .msg-media,
.msg-wrap.is-video .msg-media {
  display: block !important;
  width: 100% !important;
  position: relative;
  aspect-ratio: auto !important;
  max-height: none !important;
  min-height: 0;
  background: transparent;
  overflow: visible;
}
.file-video {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(70vh, 560px);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  cursor: pointer;
}
.file-video.is-portrait {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: min(70vh, 560px);
}
.file-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0a0c10;
  pointer-events: none;
}
.file-video.is-portrait video {
  object-fit: contain;
  background: #0a0c10;
}
.file-video .note-play { font-size: 32px; }
.file-video.playing .note-play { display: none; }
.file-video-more {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bubble.has-video {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0;
  background: transparent !important;
  box-shadow: none;
  overflow: visible;
}
.bubble.has-video .file-video {
  border-radius: 16px;
}
.bubble.has-video time {
  position: absolute;
  right: 10px;
  bottom: 8px;
  margin: 0;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
}
.bubble.has-video-caption {
  width: 100%;
  max-width: 100%;
  padding: 0 0 4px;
  overflow: hidden;
}
.bubble.has-video-caption .file-video {
  width: 100%;
  border-radius: 16px 16px 0 0;
}
.bubble.has-video-caption .msg-caption {
  padding: 6px 10px 0;
}
.video-view video {
  max-width: min(100%, 920px);
  max-height: min(88vh, 920px);
  width: auto;
  height: auto;
  border-radius: 12px;
  background: #000;
}
.voice-transcript {
  display: block;
  margin: 6px 2px 2px;
  padding: 6px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  font-size: 13px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--text) 90%, transparent);
  white-space: pre-wrap;
  word-break: break-word;
}
.voice-transcript[hidden] { display: none !important; }
.voice-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.voice-text-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-2) 80%, #fff 6%);
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  font-family: ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0.95;
}
.voice-text-btn.is-on {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-2));
  color: var(--accent);
}
.voice-text-btn.is-busy,
.voice-text-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.bubble.me .voice-text-btn {
  background: color-mix(in srgb, #fff 14%, transparent);
  color: #c8ffd0;
}
.bubble.me .voice-text-btn.is-on {
  background: color-mix(in srgb, #fff 22%, transparent);
  color: #fff;
}

/* Скрытое поле — держит клавиатуру при записи голоса */
.kb-keeper {
  position: fixed;
  left: 8px;
  bottom: 8px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  z-index: -1;
  pointer-events: none;
}
/* Кружок: модалка поверх чата — не привязана к клавиатуре */
html.note-rec-open {
  overflow: hidden;
}
.note-rec {
  position: fixed;
  inset: 0;
  z-index: 118;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--app-top, 0px) + var(--safe-t) + 16px) 16px calc(16px + var(--safe-b));
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.55);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: contain;
  transition: padding 0.22s ease, justify-content 0.22s ease;
}
.note-rec.is-kb {
  justify-content: flex-end;
  padding-bottom: calc(var(--kb-h, 280px) + var(--compose-reserve, 116px) + var(--safe-b) + 12px);
  padding-top: calc(var(--app-top, 0px) + var(--safe-t) + 12px);
}
.note-rec[hidden] { display: none !important; }
.note-rec-panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 14px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, #fff 8%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  position: relative;
  max-width: min(92vw, 300px);
  width: 100%;
  flex-shrink: 0;
  margin: 0 auto;
}
.note-rec-icon {
  position: absolute;
  top: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.note-rec-x { right: 10px; }
.note-rec-flip { left: 10px; touch-action: manipulation; }
.note-rec-stage {
  position: relative;
  width: min(58vw, 220px);
  height: min(58vw, 220px);
  border-radius: 50%;
  overflow: hidden;
  background: #0b0d12;
  margin-top: 18px;
}
.note-rec-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: rotate(-90deg);
}
.note-rec-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 3.5;
}
.note-rec-ring-fg {
  fill: none;
  stroke: #ff4d5e;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  transition: stroke-dashoffset 0.2s linear;
}
.note-rec.is-rec .note-rec-ring-fg { stroke: #ff4d5e; }
.note-rec-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  z-index: 1;
}
.note-rec.is-preview .note-rec-stage video { transform: none; }
.note-rec.is-back .note-rec-stage video { transform: none; }
.note-rec.is-preview.is-back .note-rec-stage video { transform: none; }
#note-rec-time {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  margin: 0;
  min-height: 1.2em;
}
.note-rec-acts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
}
.note-rec-main {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, #fff 55%, transparent);
  background: #ff4d5e;
  box-shadow: 0 0 0 4px color-mix(in srgb, #ff4d5e 25%, transparent);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.note-rec.is-rec .note-rec-main {
  border-radius: 50%;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border-width: 0;
  box-shadow: none;
  background: color-mix(in srgb, var(--panel-2) 90%, #fff 8%);
  color: var(--text);
}
.note-rec.is-preview .note-rec-main { display: none !important; }
.note-rec-icon-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 92%, #fff 6%);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.note-rec-icon-btn[hidden] {
  display: none !important;
}
.note-rec-send-btn {
  background: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line)) !important;
  color: #0a0f14 !important;
}
.note-rec.is-voice .note-rec-stage {
  background: linear-gradient(180deg, #0b0d12 0%, #12182a 55%, #0a101c 100%);
}
.note-rec.is-voice .note-rec-stage video { display: none; }
.note-rec.is-voice .note-rec-flip { display: none; }
.note-rec-wave,
.note-rec-wave.voice-viz {
  display: none;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
  place-items: center;
  --amp: 0;
}
.note-rec.is-voice .note-rec-wave,
.note-rec.is-voice .note-rec-wave.voice-viz {
  display: block !important;
}
.note-rec-wave .voice-viz-canvas {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 50%;
  display: block !important;
}
.note-rec-wave .voice-viz-glow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 42% !important;
  height: 42% !important;
  margin: 0 !important;
  opacity: calc(0.22 + var(--amp, 0) * 0.65);
  transform: translate(-50%, -50%) scale(calc(0.88 + var(--amp, 0) * 0.55));
  filter: blur(14px);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 70%, #9bb9ff) 0%,
    color-mix(in srgb, #7da9ff 35%, transparent) 55%,
    transparent 72%);
}
.voice-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 78%;
  height: 78%;
  margin: 0;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(0.94 + var(--amp, 0) * 0.16));
  opacity: calc(0.2 + var(--amp, 0) * 0.7);
  transition: opacity 0.08s linear, transform 0.08s linear;
}
.voice-ring-pulse {
  background: radial-gradient(circle at 50% 50%,
    transparent 28%,
    color-mix(in srgb, #9bb9ff 55%, var(--accent)) 38%,
    transparent 52%);
  filter: blur(1.5px);
  animation: voiceRingPulse 2.1s ease-in-out infinite alternate;
}
.voice-ring-orbit {
  background: none;
  border: 2.5px dashed color-mix(in srgb, #b7c7ff 70%, var(--accent));
  box-shadow:
    0 0 18px color-mix(in srgb, #4d7aff 45%, transparent),
    inset 0 0 14px color-mix(in srgb, #aac2ff 25%, transparent);
  animation: voiceRingOrbit 7s linear infinite;
}
.voice-ring-rays {
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, #d2dcff 55%, var(--accent)) 0deg 7deg,
    transparent 7deg 18deg
  );
  -webkit-mask: radial-gradient(circle, transparent 32%, #000 52%, #000 68%, transparent 86%);
  mask: radial-gradient(circle, transparent 32%, #000 52%, #000 68%, transparent 86%);
  animation: voiceRingRays 5.5s linear infinite reverse;
  opacity: calc(0.12 + var(--amp, 0) * 0.55);
}
.voice-viz-mic {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4;
  width: 54px;
  height: 54px;
  margin: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) scale(calc(1 + var(--amp, 0) * 0.12));
  color: color-mix(in srgb, #e8eeff 80%, var(--accent));
  background: radial-gradient(circle,
    color-mix(in srgb, var(--panel-2) 70%, #1a2240) 0%,
    color-mix(in srgb, #0f121c 90%, transparent) 100%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, #9bb9ff 25%, transparent),
    0 0 calc(12px + var(--amp, 0) * 18px) color-mix(in srgb, #6b8eff 55%, transparent);
  text-shadow: 0 0 14px color-mix(in srgb, #6b8eff 70%, transparent);
  pointer-events: none;
  transition: transform 0.08s linear, box-shadow 0.08s linear;
}
.voice-viz-mic .fa-solid {
  font-size: 22px;
  line-height: 1;
  display: block;
}
.note-rec.is-rec .note-rec-wave,
.note-rec.is-wave-live .note-rec-wave {
  opacity: 1;
}
.note-rec.is-preview.is-voice:not(.is-preview-playing) .voice-ring,
.note-rec.is-preview.is-voice:not(.is-preview-playing) .note-rec-wave .voice-viz-glow {
  opacity: 0.12;
  animation-play-state: paused;
}
.note-rec.is-preview.is-voice:not(.is-preview-playing) .voice-viz-mic {
  opacity: 0.45;
  box-shadow: 0 0 0 2px color-mix(in srgb, #9bb9ff 18%, transparent);
}
@keyframes voiceRingPulse {
  0% { transform: translate(-50%, -50%) scale(calc(0.82 + var(--amp, 0) * 0.1)); opacity: calc(0.2 + var(--amp, 0) * 0.35); }
  100% { transform: translate(-50%, -50%) scale(calc(1.12 + var(--amp, 0) * 0.2)); opacity: calc(0.45 + var(--amp, 0) * 0.5); }
}
@keyframes voiceRingOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(calc(0.94 + var(--amp, 0) * 0.14)); }
  to { transform: translate(-50%, -50%) rotate(360deg) scale(calc(0.94 + var(--amp, 0) * 0.14)); }
}
@keyframes voiceRingRays {
  from { transform: translate(-50%, -50%) rotate(360deg) scale(calc(0.96 + var(--amp, 0) * 0.12)); }
  to { transform: translate(-50%, -50%) rotate(0deg) scale(calc(0.96 + var(--amp, 0) * 0.12)); }
}
.note-rec-mic {
  display: none !important;
}
.note-rec.is-voice .note-rec-mic {
  display: none !important;
}
.note-circle-expand {
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(12, 14, 20, 0.88);
  color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 12px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  line-height: 0;
}
.note-circle-expand .fa-solid {
  font-size: 12px;
  width: 1em;
  height: 1em;
  display: grid !important;
  place-items: center;
}
.note-view {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 10, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.note-view[hidden] { display: none !important; }
.note-view-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 3;
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.note-view-stage {
  position: relative;
  width: min(78vw, 380px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transition: width .25s ease;
}
.note-view.is-expanded .note-view-stage {
  width: min(92vw, 92vh);
}
.note-view-circle {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #0a0c10;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 0 8px rgba(255,255,255,0.08),
    0 20px 50px rgba(0,0,0,0.45);
}
.note-view-circle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.note-view-play {
  position: absolute;
  inset: 0;
  border: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.28), rgba(0,0,0,0.05));
  color: #fff;
  font-size: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.note-view-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.note-orbit-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: color-mix(in srgb, var(--panel-2) 88%, #000);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  line-height: 0;
  transform: none !important;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  flex-shrink: 0;
  padding: 0;
}
.note-orbit-btn.is-on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.compose-attach .icon-btn .menu-ico {
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: inherit;
  color: inherit;
}
.compose-attach .icon-btn .menu-ico svg,
.compose-attach .icon-btn .menu-ico .fa-solid {
  width: 20px;
  height: 20px;
}
.note-rec-mic .call-ico svg,
.note-rec-mic .call-ico .fa-solid {
  width: 56px;
  height: 56px;
  opacity: 0.88;
}
.note-rec-mic {
  display: none !important;
  place-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--text);
}
.note-rec.is-voice .note-rec-mic { display: none !important; }
.voice-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 176px;
  max-width: 240px;
  flex: 1;
  padding: 4px 2px 2px;
  user-select: none;
}
.voice-play {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1a9b4a;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  padding: 0;
  cursor: pointer;
}
.voice-play .fa-solid {
  font-size: 15px;
  width: 1em;
  height: 1em;
  display: grid;
  place-items: center;
  line-height: 1;
}
.voice-play .fa-play {
  /* оптический центр треугольника */
  transform: translateX(1.5px);
}
.bubble.me .voice-play {
  background: #fff;
  color: #1a9b4a;
}
.bubble.them .voice-play {
  background: color-mix(in srgb, var(--accent) 88%, #fff);
  color: #062812;
}
.voice-msg.is-on .voice-play {
  background: color-mix(in srgb, var(--accent) 30%, #fff);
}
.voice-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}
.voice-wave {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  overflow: hidden;
}
.voice-wave > i {
  flex: 1 1 0;
  max-width: 3px;
  min-width: 2px;
  height: var(--h, 40%);
  border-radius: 99px;
  background: color-mix(in srgb, var(--text) 34%, transparent);
  position: relative;
  z-index: 1;
}
.bubble.me .voice-wave > i {
  background: color-mix(in srgb, #fff 42%, transparent);
}
.voice-wave .voice-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  z-index: 0;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 4px;
  pointer-events: none;
}
.bubble.me .voice-wave .voice-progress {
  background: color-mix(in srgb, #fff 22%, transparent);
}
.voice-msg.is-on .voice-wave > i {
  background: color-mix(in srgb, var(--accent) 70%, #fff);
}
.bubble.me.voice-msg.is-on .voice-wave > i,
.bubble.me .voice-msg.is-on .voice-wave > i {
  background: color-mix(in srgb, #fff 78%, transparent);
}
.voice-dur {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bubble.me .voice-dur { color: color-mix(in srgb, #fff 72%, transparent); }
.voice-msg audio { display: none; }
.mention { color: var(--accent); font-weight: 700; }
.mention.me { background: var(--accent-dim); border-radius: 6px; padding: 0 3px; }
.mention-pop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 12;
  background: var(--menu-glass, color-mix(in srgb, var(--panel) 88%, transparent));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  max-height: 180px;
  overflow-y: auto;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
}
.mention-pop button {
  display: flex;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 12px;
  gap: 8px;
  align-items: center;
}
.mention-pop button:hover, .mention-pop button.is-on { background: var(--panel-2); }
.link-prev {
  display: block;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  max-width: 260px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}
.link-prev img { width: 100%; height: 110px; object-fit: cover; display: block; }
.link-prev div { padding: 8px 10px; }
.link-prev b { display: block; font-size: 13px; }
.link-prev small { color: var(--muted); font-size: 11px; }
.poll-card { min-width: 180px; max-width: 280px; }
.poll-card b { display: block; margin-bottom: 8px; }
.poll-options { display: grid; gap: 8px; margin-bottom: 10px; }
.poll-opt {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0 0 6px;
  overflow: hidden;
}
.poll-opt i {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  pointer-events: none;
}
.poll-opt-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}
.poll-opt-n { color: var(--muted); flex-shrink: 0; }
.poll-opt-avas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.poll-opt span { position: relative; z-index: 1; }
.poll-opt.is-on { outline: 2px solid var(--accent); }
.poll-card small { color: var(--muted); }
.member-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
@keyframes msg-explode {
  0% { transform: scale(1); opacity: 1; filter: none; }
  35% { transform: scale(1.08) rotate(-2deg); opacity: 0.95; filter: brightness(1.35); }
  100% { transform: scale(0.2) rotate(8deg); opacity: 0; filter: blur(2px); }
}
.msg-wrap.msg-explode {
  animation: msg-explode .45s ease-in forwards;
  pointer-events: none;
  transform-origin: center;
}.e2e-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  margin: 8px 0 12px;
  text-align: left;
}
.e2e-card > strong {
  font-size: 14px;
  font-weight: 800;
}
.e2e-card > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.e2e-card .field { margin: 4px 0 0; }
.e2e-card .field input {
  background: var(--bg);
}
.e2e-card .id-actions { margin-top: 2px; }
.msg-wrap.expired { opacity: 0.45; }

@media (min-width: 821px) {
  .empty, #thread { }
}

.scheduled-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.scheduled-row:last-child { margin-bottom: 0; }
.sticker-btn {
  padding: 4px;
  border: 0;
  background: transparent;
  border-radius: 12px;
}
.sticker-btn:active {
  transform: scale(0.94);
}
.sticker-btn img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.call-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
}
.call-remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.call-local-video {
  position: absolute;
  right: 16px;
  bottom: calc(120px + var(--safe-b));
  width: 108px;
  height: 148px;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.25);
  z-index: 2;
}
.call-overlay .call-card { position: relative; z-index: 1; }
.call-overlay:has(#call-video-wrap:not([hidden])) .call-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.call-btn.cam.is-off { opacity: 0.45; }

body.call-open { overflow: hidden; }
.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.call-overlay.is-incoming,
body.call-incoming-fs .call-overlay {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: linear-gradient(165deg, #0a1628 0%, #121a2e 38%, #0c0e14 100%);
}
.call-overlay.is-incoming .call-card,
body.call-incoming-fs .call-card {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100dvh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  justify-content: center;
  padding: calc(48px + var(--safe-t)) 24px calc(48px + var(--safe-b));
  background: transparent;
}
.call-overlay.is-incoming .call-ava,
body.call-incoming-fs .call-ava {
  width: 120px;
  height: 120px;
  border-radius: 36px;
}
.call-overlay.is-incoming #call-name,
body.call-incoming-fs #call-name {
  font-size: 26px;
}
.call-overlay.is-incoming .call-actions,
body.call-incoming-fs .call-actions {
  margin-top: auto;
  padding-bottom: 12px;
  gap: 48px;
}
.call-overlay.is-incoming .call-btn.accept,
body.call-incoming-fs .call-btn.accept {
  width: 72px;
  height: 72px;
}
.call-overlay.is-incoming .call-btn.reject,
body.call-incoming-fs .call-btn.reject {
  width: 64px;
  height: 64px;
}
.call-card {
  width: min(100%, 320px);
  max-height: min(92dvh, 640px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 22px 22px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, #fff 8%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.call-ava {
  width: 88px;
  height: 88px;
  border-radius: 28px;
  margin-bottom: 4px;
}
#call-name {
  font-size: 20px;
  font-weight: 700;
}
#call-status {
  color: var(--muted);
  font-size: 14px;
}
.call-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  max-height: 120px;
  overflow-y: auto;
  margin-top: 4px;
}
.call-participants[hidden] { display: none !important; }
.call-participant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
}
.call-participant-ava {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
.call-participant-name {
  font-size: 11px;
  color: var(--muted);
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.call-timer {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.call-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 18px;
}
.call-btn {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  color: inherit;
}
.call-btn .call-ico .fa-solid {
  font-size: 22px;
  width: auto !important;
  height: auto !important;
}
.call-btn.accept {
  background: #34c759;
  color: #fff;
  box-shadow: 0 8px 24px rgba(52, 199, 89, 0.35);
}
.call-btn.reject,
.call-btn.hangup {
  background: #ff4d5e;
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 77, 94, 0.35);
}
.call-btn.hangup { transform: rotate(135deg); }
.call-btn.mute {
  background: color-mix(in srgb, var(--panel-2) 88%, #fff 6%);
  color: var(--text);
}
.call-btn.mute.is-off {
  background: #4a5160;
  color: #ffb4b4;
}
.call-btn.speaker {
  background: color-mix(in srgb, var(--panel-2) 88%, #fff 6%);
  color: var(--text);
}
.call-btn.speaker.is-on {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-2));
  color: var(--accent);
}