/* ======================================================================
   Drippy — собственный стиль: «плавающие» стеклянные панели на тёмном
   фоне с мягким сиянием, сообщения-пузыри, крупные скругления, фирменный
   градиент. На телефоне: экраны и панель вкладок внизу.
   ====================================================================== */

:root {
  --accent: #7c5cff;
  --accent-h: color-mix(in srgb, var(--accent) 84%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-text: color-mix(in srgb, var(--accent) 55%, var(--text));
  --brand-a: #ffb547;
  --brand-b: #8b6bff;
  --grad: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, #ff5ea8) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 80%, #2aa7ff) 100%);
  --grad-brand: linear-gradient(120deg, var(--brand-a), #ff6f91 45%, var(--brand-b));
  --green: #2bc77a; --green-h: #22a866;
  --red: #ff4d5e; --red-h: #e23a4b;
  --yellow: #ffbf3c;
  --st-online: #2bc77a; --st-idle: #ffbf3c; --st-dnd: #ff4d5e; --st-offline: #7d8090;
  --font-scale: 1;
  --fs: calc(15px * var(--font-scale));
  --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 28px;
  --ease: cubic-bezier(.22, .9, .25, 1);
  --font: 'Onest', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, Menlo, monospace;
  --rail-w: 68px; --side-w: 290px; --members-w: 264px; --gap: 8px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #08080c;
  --glow-a: rgba(124, 92, 255, .22); --glow-b: rgba(255, 150, 70, .10); --glow-c: rgba(40, 170, 255, .10);
  --panel: rgba(20, 20, 28, .82); --panel-solid: #14141c; --panel-2: rgba(28, 28, 38, .92);
  --bg-1: #12121a; --bg-2: #181822; --bg-3: #22222e; --bg-4: #2c2c3a;
  --bg-float: #191923; --bg-input: rgba(255, 255, 255, .055); --bg-hover: rgba(255, 255, 255, .05); --bg-active: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .12);
  --text: #f2f1f7; --text-2: #c2c1cf; --text-3: #8e8d9f; --text-4: #626175;
  --bubble: #23232f; --bubble-text: var(--text);
  --mention-bg: rgba(255, 191, 60, .10); --mention-bar: #ffbf3c;
  --code-bg: rgba(0, 0, 0, .32); --scroll: rgba(255, 255, 255, .14);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 26px rgba(0, 0, 0, .38);
  --stage: #050508;
}
[data-theme="midnight"] {
  color-scheme: dark;
  --bg-app: #000;
  --glow-a: rgba(124, 92, 255, .12); --glow-b: rgba(255, 150, 70, .05); --glow-c: rgba(40, 170, 255, .05);
  --panel: rgba(10, 10, 14, .92); --panel-solid: #0a0a0e; --panel-2: #111117;
  --bg-1: #0a0a0e; --bg-2: #0e0e13; --bg-3: #18181f; --bg-4: #22222b;
  --bg-float: #111117; --bg-input: rgba(255, 255, 255, .06);
  --bubble: #17171f;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .13);
  --text: #f4f4f8; --text-2: #c0c0cc; --text-3: #8b8b9b; --text-4: #5d5d6d;
  --stage: #000;
}
[data-theme="light"] {
  color-scheme: light;
  --bg-app: #eceaf3;
  --glow-a: rgba(124, 92, 255, .20); --glow-b: rgba(255, 170, 80, .18); --glow-c: rgba(40, 170, 255, .14);
  --panel: rgba(255, 255, 255, .86); --panel-solid: #ffffff; --panel-2: #f6f5fa;
  --bg-1: #f4f3f9; --bg-2: #ffffff; --bg-3: #ecebf3; --bg-4: #e0dfea;
  --bg-float: #ffffff; --bg-input: rgba(20, 16, 50, .055); --bg-hover: rgba(20, 16, 50, .045); --bg-active: rgba(20, 16, 50, .08);
  --line: rgba(20, 16, 50, .08); --line-2: rgba(20, 16, 50, .14);
  --text: #16151f; --text-2: #3f3d4f; --text-3: #6c6a7e; --text-4: #a2a0b2;
  --bubble: #efeef6;
  --mention-bg: rgba(255, 180, 40, .16);
  --code-bg: rgba(20, 16, 50, .06); --scroll: rgba(20, 16, 50, .2);
  --shadow-lg: 0 18px 50px rgba(40, 30, 90, .18), 0 2px 10px rgba(40, 30, 90, .08);
  --shadow-md: 0 8px 26px rgba(40, 30, 90, .14);
  --st-offline: #a2a0b2;
  --stage: #15141c;
}
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { position: fixed; inset: 0; width: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: var(--fs); line-height: 1.4; color: var(--text); background: var(--bg-app);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: ''; position: fixed; inset: -20%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 35% at 12% 8%, var(--glow-a), transparent 70%),
    radial-gradient(35% 30% at 92% 92%, var(--glow-b), transparent 70%),
    radial-gradient(30% 30% at 75% 15%, var(--glow-c), transparent 70%);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: #6cb6ff; text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img, video { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
.ic { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.fill { fill: currentColor; stroke: none; }
.ic.red { color: var(--red); }
.ic.gold { color: var(--yellow); }

.scroll { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-track { background: transparent; }

.spin { display: inline-block; width: 18px; height: 18px; border: 2.5px solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(6px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes sheet { from { transform: translateY(100%); } }

/* ---------------- кнопки и поля ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border-radius: 999px; font-weight: 600; font-size: .9em; white-space: nowrap; transition: background .15s, color .15s, transform .12s, box-shadow .15s, filter .15s;
  background: var(--bg-3); color: var(--text);
}
.btn:hover:not(:disabled) { background: var(--bg-4); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--grad); }
.btn.green { background: var(--green); color: #fff; }
.btn.green:hover:not(:disabled) { background: var(--green-h); }
.btn.danger { background: var(--red); color: #fff; }
.btn.danger:hover:not(:disabled) { background: var(--red-h); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn.ghost:hover:not(:disabled) { background: var(--bg-hover); }
.btn.danger-ghost { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--red) 50%, transparent); }
.btn.danger-ghost:hover:not(:disabled) { background: var(--red); color: #fff; }
.btn.small { min-height: 34px; padding: 0 14px; font-size: .85em; }
.btn.tiny { min-height: 28px; padding: 0 11px; font-size: .78em; }
.btn.big { min-height: 48px; padding: 0 24px; font-size: .98em; }
.btn.loading { color: transparent !important; position: relative; }
.btn.loading::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.link-like { color: #6cb6ff; font-weight: 500; }
.link-like:hover { text-decoration: underline; }
.linkish { color: var(--text-3); font-size: .9em; }
.linkish:hover { color: var(--text); }

.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--text-3); transition: color .12s, background .12s; flex: none; }
.icon-btn:hover:not(:disabled) { color: var(--text); background: var(--bg-hover); }
.icon-btn.on { color: var(--accent-text); background: var(--accent-soft); }
.icon-btn.tiny { width: 26px; height: 26px; border-radius: 8px; }
.icon-btn.small { width: 32px; height: 32px; }
.icon-btn.danger:hover { color: #fff; background: var(--red); }
.icon-btn.round { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-3); color: var(--text-2); }
.icon-btn.round:hover { color: var(--text); background: var(--bg-4); }
.icon-btn.round.green:hover { color: #fff; background: var(--green); }
.icon-btn.round.red:hover { color: #fff; background: var(--red); }
.icon-btn.round.big { width: 60px; height: 60px; }
.icon-btn.round.big.green { background: var(--green); color: #fff; }
.icon-btn.round.big.red { background: var(--red); color: #fff; }
.icon-btn.off { color: var(--red); }

input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), textarea, select, .select {
  width: 100%; background: var(--bg-input); border: 1.5px solid transparent; border-radius: var(--r-sm); padding: 11px 14px; color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, textarea:focus, select:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 4px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--text-4); }
textarea { resize: vertical; min-height: 46px; }
select, .select { appearance: none; padding-right: 36px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--bg-float); color: var(--text); }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; min-width: 0; }
.field > span { font-size: .78em; font-weight: 600; color: var(--text-3); }
.field > span em { font-style: normal; font-weight: 500; color: var(--red); }
.field.bad > span { color: var(--red); }
.field.bad input { border-color: color-mix(in srgb, var(--red) 70%, transparent); }
.field-hint { color: var(--text-3); font-size: .8em; }
.field-error { color: var(--red); font-size: .875em; margin: 6px 0; }
.muted-text { color: var(--text-2); margin: 0 0 14px; line-height: 1.55; overflow-wrap: anywhere; }
.muted-text.small, small.muted-text { font-size: .84em; color: var(--text-3); }
.danger-text { color: var(--red) !important; }
.copyable { cursor: pointer; }
.copyable:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: .86em; background: var(--code-bg); padding: 1px 6px; border-radius: 6px; }

.switch { appearance: none; width: 46px; height: 28px; border-radius: 14px; background: var(--bg-4); position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.switch:checked { background: var(--grad); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .4; cursor: not-allowed; }
.range { width: 100%; accent-color: var(--accent); }
.range-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.range-val { min-width: 54px; text-align: right; color: var(--text-2); font-size: .875em; }

.set-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-text { min-width: 0; flex: 1; }
.set-title { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.set-desc { color: var(--text-3); font-size: .86em; margin-top: 4px; line-height: 1.45; }
.set-row > select { width: auto; min-width: 190px; }
.row-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sub-h { font-size: .8em; letter-spacing: .02em; color: var(--text-3); margin: 28px 0 10px; font-weight: 700; text-transform: uppercase; }
.note { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-sm); background: var(--accent-soft); font-size: .88em; margin-bottom: 16px; }
.badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: .7em; font-weight: 800; line-height: 1; flex: none; }
kbd { display: inline-block; min-width: 28px; padding: 4px 8px; border-radius: 8px; background: var(--bg-3); box-shadow: inset 0 -2px 0 var(--line-2); font-family: var(--font); font-size: .8em; font-weight: 700; text-align: center; color: var(--text-2); }
.kbd-row { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---------------- аватары ---------------- */

.avatar { position: relative; width: var(--s); height: var(--s); flex: none; }
.av-img { width: 100%; height: 100%; border-radius: 34%; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: calc(var(--s) * .42); user-select: none; position: relative; }
.av-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.speaking .av-img { box-shadow: 0 0 0 2px var(--ring-bg, var(--panel-solid)), 0 0 0 4px var(--green); }
.avatar.clickable { cursor: pointer; }
.avatar.clickable:hover .av-img { filter: brightness(1.08); }
.status-dot { position: absolute; right: -3px; bottom: -3px; width: max(10px, calc(var(--s) * .34)); height: max(10px, calc(var(--s) * .34)); border-radius: 50%; border: max(2.5px, calc(var(--s) * .075)) solid var(--ring-bg, var(--panel-solid)); background: var(--st-offline); }
.status-dot.online { background: var(--st-online); }
.status-dot.idle { background: var(--st-idle); }
.status-dot.dnd { background: var(--st-dnd); }
.status-dot.offline { background: var(--ring-bg, var(--panel-solid)); box-shadow: inset 0 0 0 max(2px, calc(var(--s) * .06)) var(--st-offline); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--st-offline); margin-right: 4px; vertical-align: middle; }
.dot.online { background: var(--st-online); }

/* ---------------- вход ---------------- */

#auth { position: fixed; top: 0; left: 0; right: 0; height: var(--vvh, 100dvh); display: grid; place-items: center; padding: calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b)); overflow-y: auto; z-index: 2; }
.auth-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.auth-bg i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; animation: drift 24s ease-in-out infinite alternate; }
.auth-bg i:nth-child(1) { width: 520px; height: 520px; left: -160px; top: -160px; background: var(--brand-b); }
.auth-bg i:nth-child(2) { width: 460px; height: 460px; right: -140px; bottom: -160px; background: var(--brand-a); animation-delay: -8s; opacity: .35; }
.auth-bg i:nth-child(3) { width: 360px; height: 360px; left: 45%; top: 55%; background: #ff6f91; animation-delay: -14s; opacity: .22; }
@keyframes drift { to { transform: translate(50px, 40px) scale(1.12); } }
.auth-card {
  position: relative; width: 100%; max-width: 400px; padding: 34px 28px 26px; border-radius: var(--r-xl);
  background: var(--panel); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); animation: rise .45s var(--ease);
}
.auth-logo { display: grid; place-items: center; margin-bottom: 12px; }
.auth-card h1 { font-family: var(--display); font-size: 1.6em; font-weight: 700; text-align: center; margin-bottom: 26px; letter-spacing: -.01em; }
.auth-card .field { margin-bottom: 14px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; color: var(--text-3); border-radius: 10px; }
.pw-eye:hover { color: var(--text); }
.pw-meter { height: 4px; border-radius: 2px; background: var(--bg-4); margin: -4px 0 14px; overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; transition: width .25s, background .25s; }
.pw-meter[data-s="0"] i, .pw-meter[data-s="1"] i { width: 25%; background: var(--red); }
.pw-meter[data-s="2"] i { width: 50%; background: var(--yellow); }
.pw-meter[data-s="3"] i { width: 75%; background: #8ad46f; }
.pw-meter[data-s="4"] i { width: 100%; background: var(--green); }
.auth-error { color: var(--red); font-size: .875em; min-height: 1.2em; margin: 0 0 10px; text-align: center; }
.auth-card .btn.big { width: 100%; }
.auth-switch { text-align: center; margin: 16px 0 0; }
.auth-dl { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .85em; }
#splash { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--bg-app); z-index: 5; color: var(--text-3); }
.splash-logo { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .8; } }

/* ---------------- каркас: плавающие панели ---------------- */

#app {
  position: fixed; top: 0; left: 0; right: 0; height: var(--vvh, 100dvh); z-index: 1; display: grid;
  grid-template-columns: var(--rail-w) var(--side-w) minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr);
  gap: var(--gap); padding: var(--gap) var(--gap) var(--gap) 0;
}
#rail { grid-column: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; overflow-y: auto; scrollbar-width: none; --ring-bg: var(--bg-app); }
#rail::-webkit-scrollbar { display: none; }
#side, #main, #members {
  background: var(--panel); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
#side { grid-column: 2; display: flex; flex-direction: column; min-height: 0; overflow: hidden; --ring-bg: var(--panel-solid); }
#main { grid-column: 3; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; overflow: hidden; --ring-bg: var(--panel-solid); }
#members { grid-column: 4; width: var(--members-w); padding: 10px 10px 16px; --ring-bg: var(--panel-solid); }
#scrim, #tabbar { display: none; }

/* док серверов */
.rail-item { position: relative; width: var(--rail-w); display: flex; justify-content: center; flex: none; }
.rail-item .pill { position: absolute; left: 0; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: var(--grad-brand); transition: height .2s var(--ease); transform: translateY(-50%); }
.rail-item.unread .pill { height: 8px; }
.rail-item:hover .pill { height: 18px; }
.rail-item.active .pill { height: 34px; }
.rail-btn { width: 50px; height: 50px; border-radius: 17px; overflow: hidden; display: grid; place-items: center; background: var(--panel); color: var(--text-2); transition: transform .18s var(--ease), background .18s, color .18s, box-shadow .18s; box-shadow: inset 0 0 0 1px var(--line); }
.rail-item:hover .rail-btn { transform: translateY(-1px); }
.rail-item.active .rail-btn { box-shadow: 0 0 0 2px var(--accent), 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
.rail-item.home.active .rail-btn { background: var(--grad); }
.rail-item.home.active .logo circle { fill: #fff !important; }
.rail-item.add .rail-btn { color: var(--green); border: 1.5px dashed color-mix(in srgb, var(--green) 55%, transparent); box-shadow: none; background: transparent; }
.rail-item.add:hover .rail-btn { background: var(--green); color: #fff; border-color: var(--green); }
.rail-item .badge { position: absolute; right: 8px; bottom: -3px; box-shadow: 0 0 0 3px var(--bg-app); min-width: 20px; height: 20px; border-radius: 10px; font-size: .72em; }
.rail-item.in-voice::after { content: ''; position: absolute; right: 9px; top: -3px; width: 15px; height: 15px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19'/%3E%3C/svg%3E") center/9px no-repeat; box-shadow: 0 0 0 3px var(--bg-app); }
.rail-item.dragging { opacity: .4; }
.rail-item.drop::before { content: ''; position: absolute; top: -5px; left: 14px; right: 14px; height: 3px; border-radius: 2px; background: var(--accent); }
.rail-sep { width: 28px; height: 2px; border-radius: 1px; background: var(--line-2); flex: none; margin: 2px 0; }
.rail-guilds { display: flex; flex-direction: column; gap: 8px; }
.gicon { width: var(--s); height: var(--s); display: grid; place-items: center; background: var(--bg-3); color: var(--text); font-weight: 700; font-size: calc(var(--s) * .33); overflow: hidden; flex: none; border-radius: 32%; }
.rail-btn .gicon { width: 100%; height: 100%; background: transparent; border-radius: 0; }
.rail-item:not(.home):not(.add):hover .rail-btn:not(:has(img)), .rail-item.active:not(.home) .rail-btn:not(:has(img)) { background: var(--grad); color: #fff; }
.gicon img { width: 100%; height: 100%; object-fit: cover; }
.gicon span.small { font-size: .82em; }
.rail-item.dm-unread .rail-btn { background: transparent; box-shadow: none; }
.rail-item.dm-unread .av-img { border-radius: 17px; }

/* боковая панель */
.side-head { height: 56px; flex: none; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--line); }
.side-title { font-family: var(--display); font-size: 1.15em; padding: 0 4px; }
.find-btn { width: 100%; height: 36px; border-radius: 12px; background: var(--bg-input); color: var(--text-3); font-size: .88em; text-align: left; padding: 0 12px; display: flex; align-items: center; gap: 8px; }
.find-btn:hover { color: var(--text-2); }
.guild-title { width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; font-family: var(--display); font-size: .98em; font-weight: 600; border-radius: 12px; }
.guild-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guild-title:hover { background: var(--bg-hover); }
#sideBody { flex: 1; padding: 10px 10px 14px; }
.side-empty { color: var(--text-4); font-size: .88em; text-align: center; padding: 24px 10px; }
.side-locked, .side-cta { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; color: var(--text-3); text-align: center; font-size: .9em; }
.nav-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 44px; border-radius: 14px; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.nav-row:hover { background: var(--bg-hover); color: var(--text); }
.nav-row.active { background: var(--accent-soft); color: var(--text); }
.nav-row .badge { margin-left: auto; }
.side-label { display: flex; align-items: center; justify-content: space-between; padding: 14px 6px 6px 12px; font-size: .74em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); }
.dm-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 14px; color: var(--text-2); cursor: pointer; margin-bottom: 2px; }
.dm-row:hover { background: var(--bg-hover); }
.dm-row.active { background: var(--accent-soft); color: var(--text); }
.dm-row.unread { color: var(--text); }
.dm-row.offline .avatar { opacity: .6; }
.dm-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dm-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row.unread .dm-name { font-weight: 800; }
.dm-sub { color: var(--text-3); font-size: .78em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.dm-sub.live { color: var(--green); }
.dm-close { opacity: 0; }
.dm-row:hover .dm-close { opacity: 1; }
.dm-row:hover .badge { display: none; }

.cat-row { display: flex; align-items: center; padding: 14px 4px 4px 2px; color: var(--text-4); }
.cat-row:first-child { padding-top: 4px; }
.cat-name { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; font-size: .74em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 2px 6px; }
.cat-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-name .ic { transition: transform .15s; }
.cat-row.closed .cat-name .ic { transform: rotate(-90deg); }
.cat-row:hover .cat-name { color: var(--text-2); }
.cat-row .icon-btn { opacity: 0; }
.cat-row:hover .icon-btn { opacity: 1; }
.cat-row.drop, .ch-row.drop { box-shadow: inset 0 2px 0 var(--accent); }
.ch-row { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; margin: 2px 0; border-radius: 12px; color: var(--text-3); cursor: pointer; }
.ch-row:hover { background: var(--bg-hover); color: var(--text-2); }
.ch-row.active { background: var(--accent-soft); color: var(--text); }
.ch-row.active .ch-ic { color: var(--accent-text); }
.ch-row.unread { color: var(--text); }
.ch-row.unread .ch-name { font-weight: 700; }
.ch-row.muted { opacity: .5; }
.ch-row.connected { color: var(--green); }
.ch-row.dragging { opacity: .4; }
.ch-ic { color: var(--text-4); }
.ch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.unread-dot { position: absolute; left: -10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--text); display: none; }
.ch-row.unread:not(.active) .unread-dot { display: block; }
.ch-actions { display: none; gap: 2px; }
.ch-row:hover .ch-actions { display: flex; }
.ch-row:hover .badge { display: none; }
.voice-users { padding: 2px 0 6px 28px; }
.voice-user { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 10px; color: var(--text-3); cursor: pointer; }
.voice-user:hover { background: var(--bg-hover); color: var(--text-2); }
.voice-user.speaking .av-img { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 4px var(--green); }
.vu-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88em; }
.vu-icons { display: flex; align-items: center; gap: 4px; color: var(--text-4); }
.live-badge { background: var(--red); color: #fff; font-size: .6em; font-weight: 800; padding: 2px 6px; border-radius: 6px; letter-spacing: .03em; }

#sideFoot { flex: none; padding: 8px; display: grid; gap: 8px; }
#userPanel { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--r); background: var(--bg-input); }
.me-btn { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px; border-radius: 12px; text-align: left; }
.me-btn:hover { background: var(--bg-hover); }
.me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.me-text b { font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-sub { font-size: .75em; color: var(--text-3); height: 1.25em; overflow: hidden; }
.me-sub span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform .2s var(--ease); }
.me-btn:hover .me-sub span { transform: translateY(-100%); }
.me-actions { display: flex; }
.me-actions .icon-btn { width: 34px; height: 34px; }
#voicePanel { padding: 10px; border-radius: var(--r); background: color-mix(in srgb, var(--green) 9%, var(--bg-input)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent); animation: rise .25s var(--ease); }
.vp-top { display: flex; align-items: center; gap: 4px; }
.vp-info { flex: 1; min-width: 0; }
.vp-status { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88em; color: var(--green); }
.vp-status.connecting { color: var(--yellow); }
.vp-status.lost { color: var(--red); }
.vp-room { display: block; max-width: 100%; color: var(--text-3); font-size: .76em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.vp-room:hover { color: var(--text); text-decoration: underline; }
.vp-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.vp-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 12px; background: var(--bg-3); color: var(--text-2); font-size: .8em; font-weight: 600; }
.vp-btn:hover { background: var(--bg-4); color: var(--text); }
.vp-btn.on { background: var(--green); color: #fff; }
.vs-pop { width: 290px; padding: 16px; }
.vs-pop h4 { margin-bottom: 10px; font-family: var(--display); font-size: .95em; }
.vs-line { font-size: .8em; color: var(--text-3); margin: 0 0 8px; display: flex; gap: 6px; align-items: flex-start; }
.vs-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .88em; }
.vs-row span { flex: 1; }
.vs-row .good { color: var(--green); }
.vs-row .warn { color: var(--yellow); }

/* ---------------- главная область ---------------- */

.main-head { min-height: 56px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--line); min-width: 0; z-index: 2; position: relative; }
.menu-btn { display: none; }
.head-ic { color: var(--text-4); }
.head-title { font-family: var(--display); font-weight: 600; font-size: 1.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 40%; }
.head-title.link-like { color: var(--text); }
.head-div { width: 1px; height: 22px; background: var(--line-2); margin: 0 6px; flex: none; }
.head-topic { color: var(--text-3); font-size: .86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; text-align: left; }
button.head-topic:hover { color: var(--text-2); }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.search-box { position: relative; margin-left: 6px; }
.head-search { width: 160px !important; height: 34px; padding: 0 30px 0 12px !important; font-size: .85em; border-radius: 999px !important; transition: width .2s var(--ease) !important; }
.head-search:focus { width: 240px !important; }
.search-box .ic { position: absolute; right: 11px; top: 9px; color: var(--text-3); pointer-events: none; }
.empty-main { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--text-3); text-align: center; padding: 20px; }

.chat-wrap { flex: 1; display: flex; min-height: 0; position: relative; }
.chat-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.messages { flex: 1; min-height: 0; padding-bottom: 10px; overflow-anchor: none; }
#msgList { display: flex; flex-direction: column; min-height: 100%; justify-content: flex-end; padding-top: 16px; }
.load-more { display: grid; place-items: center; padding: 24px; color: var(--text-3); }
.chat-error { color: var(--red); padding: 24px; text-align: center; }
.skeleton { padding: 20px 18px; display: grid; gap: 22px; }
.sk-row { display: flex; gap: 12px; }
.sk-av { width: 38px; height: 38px; border-radius: 34%; background: var(--bg-3); flex: none; }
.sk-row div { display: grid; gap: 8px; }
.sk-line { height: 14px; border-radius: 8px; background: var(--bg-3); animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 50% { opacity: .45; } }

.chat-welcome { padding: 18px 20px 10px; margin-bottom: 8px; }
.chat-welcome h2 { font-family: var(--display); font-size: 1.6em; font-weight: 700; margin: 14px 0 6px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.chat-welcome p { color: var(--text-3); margin: 4px 0; }
.chat-welcome .wl-user { font-size: 1.1em; color: var(--text-2); margin-top: -2px; }
.wl-icon { width: 68px; height: 68px; border-radius: 22px; background: var(--grad); display: grid; place-items: center; color: #fff; box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 35%, transparent); }
.e2e-note { display: inline-flex !important; align-items: center; gap: 6px; font-size: .8em; color: var(--green) !important; background: color-mix(in srgb, var(--green) 12%, transparent); padding: 5px 12px; border-radius: 999px; margin-top: 12px !important; }

.day-div { display: flex; justify-content: center; margin: 18px 16px 8px; pointer-events: none; }
.day-div span { padding: 3px 12px; border-radius: 999px; background: var(--bg-input); color: var(--text-3); font-size: .74em; font-weight: 600; }
.new-div { display: flex; align-items: center; gap: 10px; margin: 10px 18px 6px; color: var(--red); font-size: .72em; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.new-div::before, .new-div::after { content: ''; flex: 1; height: 1.5px; background: color-mix(in srgb, var(--red) 60%, transparent); border-radius: 1px; }

/* ===== сообщения-пузыри ===== */
.msg { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; padding: 1px 16px; }
.msg.start { margin-top: 12px; }
.msg-gutter { display: flex; justify-content: center; align-items: flex-start; grid-row: span 3; }
.msg-ref + .msg-gutter { grid-row: 2 / span 2; }
.hover-time { display: none; }
.msg-body { min-width: 0; grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; }
.bubble {
  position: relative; max-width: min(680px, 88%); min-width: 0; padding: 8px 12px 6px; border-radius: 6px 18px 18px 6px;
  background: var(--bubble); color: var(--bubble-text); overflow-wrap: anywhere;
}
.msg.start .bubble { border-top-left-radius: 18px; }
.msg-head { display: flex; align-items: baseline; gap: 8px; line-height: 1.3; margin-bottom: 2px; }
.msg-head time { display: none; }
.author { font-weight: 700; color: var(--accent-text); cursor: pointer; font-size: .9em; }
.author:hover { text-decoration: underline; }
.msg-text { line-height: 1.45; overflow-wrap: anywhere; }
.msg-text.jumbo { font-size: 2.6em; line-height: 1.15; }
.b-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 8px 0 -2px 10px; font-size: .68em; color: var(--text-4); line-height: 1; user-select: none; position: relative; }
.bubble.jumbo, .bubble.media { background: transparent; padding: 0; }
.bubble.media .b-meta { position: absolute; right: 8px; bottom: 8px; margin: 0; padding: 3px 7px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; float: none; }
.bubble.jumbo .b-meta { margin-top: 4px; }
.bubble.media .msg-head { margin: 2px 4px 4px; }
.bubble.media .attachments, .bubble.media .gif-msg { margin-top: 0; }
.edited { display: none; }
/* свои сообщения: справа, с градиентом */
.msg.own { grid-template-columns: minmax(0, 1fr); }
.msg.own .msg-gutter { display: none; }
.msg.own .msg-body { grid-column: 1; align-items: flex-end; }
.msg.own .bubble { background: var(--grad); color: #fff; border-radius: 18px 6px 6px 18px; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent); }
.msg.own.start .bubble { border-top-right-radius: 18px; }
.msg.own .bubble.media, .msg.own .bubble.jumbo { background: transparent; box-shadow: none; }
.msg.own .msg-head { display: none; }
.msg.own .b-meta { color: rgba(255, 255, 255, .72); }
.msg.own .bubble.jumbo .b-meta { color: var(--text-4); }
.msg.own .bubble a.link { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); }
.msg.own .bubble code.inline, .msg.own .bubble .codeblock { background: rgba(0, 0, 0, .22); border-color: rgba(255, 255, 255, .12); }
.msg.own .bubble .mention { background: rgba(255, 255, 255, .22); color: #fff; }
.msg.own .bubble blockquote { border-left-color: rgba(255, 255, 255, .5); }
.msg.own .bubble .spoiler { background: rgba(255, 255, 255, .35); }
.msg.own .bubble .md-sub, .msg.own .undecrypted { color: rgba(255, 255, 255, .75); }
.msg.own .reactions { justify-content: flex-end; }
.msg.mentioned:not(.own) .bubble { background: color-mix(in srgb, var(--mention-bar) 13%, var(--bubble)); box-shadow: inset 3px 0 0 var(--mention-bar); }
.msg.replying .bubble { box-shadow: 0 0 0 2px var(--accent); }
.msg.flash .bubble { animation: flash 1.8s ease-out; }
@keyframes flash { 0%, 35% { box-shadow: 0 0 0 3px var(--yellow); } }
.msg.pending .bubble { opacity: .65; }
.msg.failed .bubble { box-shadow: 0 0 0 2px var(--red); }
.msg.editing .bubble { width: min(680px, 88%); }
.msg-failed { font-size: .8em; color: var(--red); margin-top: 4px; }
.undecrypted { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-style: italic; font-size: .9em; }
.blocked-msg { color: var(--text-3); font-size: .875em; font-style: italic; }
.msg.blocked > :not(.note-gutter):not(.note-body) { display: none; }
.msg.blocked.reveal > :not(.note-gutter):not(.note-body) { display: revert; }
.msg.blocked.reveal > .note-gutter { display: none; }
/* ответ */
.msg-ref { grid-column: 2; display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: .8em; color: var(--text-3); cursor: pointer; min-width: 0; max-width: min(560px, 88%); padding: 4px 10px 4px 8px; border-radius: 12px; background: var(--bg-input); border-left: 3px solid var(--accent); justify-self: start; }
.msg.own .msg-ref { grid-column: 1; justify-self: end; }
.msg-ref .ref-spine { display: none; }
.msg-ref .ref-name { font-weight: 700; color: var(--text-2); flex: none; }
.msg-ref .ref-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.msg-ref:hover .ref-text { color: var(--text); }
.msg-ref.deleted { cursor: default; font-style: italic; border-left-color: var(--text-4); }
/* системные сообщения */
.msg.system { display: flex; justify-content: center; padding: 6px 16px; margin: 6px 0; }
.msg.system .msg-gutter { display: contents; }
.msg.system .msg-body { display: block; max-width: min(520px, 92%); padding: 5px 12px; border-radius: 14px; background: var(--bg-input); text-align: center; line-height: 1.45; }
.msg.system .msg-body > * { vertical-align: middle; }
.msg.system .sys-ic { margin-right: 4px; display: inline-block; }
.msg.system time { margin-left: 6px; }
.sys-ic { color: var(--text-3); }
.sys-ic.green { color: var(--green); }
.sys-ic.red { color: var(--red); }
.sys-text { color: var(--text-3); font-size: .86em; text-align: center; }
.sys-text .author { font-size: inherit; color: var(--text); }
.msg.system time { font-size: .72em; color: var(--text-4); }

/* вид «Список» вместо пузырей */
[data-density="compact"] .msg { grid-template-columns: 40px minmax(0, 1fr); padding: 1px 48px 1px 16px; }
[data-density="compact"] .msg.system { justify-content: flex-start; padding-left: 16px; }
[data-density="compact"] .msg.system .msg-body { text-align: left; background: none; padding: 0; }
[data-density="compact"] .msg:not(.system):hover { background: var(--bg-hover); }
[data-density="compact"] .msg.start { margin-top: 10px; }
[data-density="compact"] .msg.own { grid-template-columns: 40px minmax(0, 1fr); }
[data-density="compact"] .msg.own .msg-gutter { display: flex; }
[data-density="compact"] .msg.own .msg-body, [data-density="compact"] .msg-body { grid-column: 2; align-items: stretch; }
[data-density="compact"] .msg .bubble { background: none !important; color: var(--text); padding: 0; border-radius: 0; max-width: none; box-shadow: none !important; }
[data-density="compact"] .msg.own .msg-head { display: flex; }
[data-density="compact"] .msg-head time { display: inline; font-size: .74em; color: var(--text-4); }
[data-density="compact"] .b-meta { display: none; }
[data-density="compact"] .edited { display: inline; font-size: .7em; color: var(--text-4); }
[data-density="compact"] .hover-time { display: block; visibility: hidden; font-size: .66em; color: var(--text-4); line-height: 1.45rem; }
[data-density="compact"] .msg:hover .hover-time { visibility: visible; }
[data-density="compact"] .msg .avatar { --s: 32px !important; }
[data-density="compact"] .msg-ref, [data-density="compact"] .msg.own .msg-ref { grid-column: 2; justify-self: start; }
[data-density="compact"] .msg.mentioned { background: var(--mention-bg); box-shadow: inset 2px 0 0 var(--mention-bar); }
[data-density="compact"] .msg.own .bubble a.link { color: #6cb6ff; }
[data-density="compact"] .msg.own .bubble .mention { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-text); }
[data-density="compact"] .msg.own .reactions { justify-content: flex-start; }
[data-density="compact"] .msg.own .att-file, [data-density="compact"] .msg.own .att-play, [data-density="compact"] .msg.own .invite-embed { background: var(--bg-input); color: var(--text); }
[data-density="compact"] .msg.own .att-name { color: #6cb6ff; }

/* разметка */
.md-p { min-height: 1.4em; }
.md strong { font-weight: 700; }
.md blockquote { margin: 3px 0; padding: 0 0 0 12px; border-left: 3px solid var(--text-4); border-radius: 2px; }
.md-h { font-weight: 700; margin: 6px 0 4px; line-height: 1.3; font-family: var(--display); }
h3.md-h { font-size: 1.35em; } h4.md-h { font-size: 1.15em; } h5.md-h { font-size: 1.02em; }
.md-sub { font-size: .8em; color: var(--text-3); }
.md-list { margin: 2px 0; padding-left: 22px; }
.md-list li.nested { margin-left: 18px; }
code.inline { font-size: .86em; padding: 2px 5px; background: var(--code-bg); border-radius: 6px; white-space: pre-wrap; }
.codeblock { position: relative; margin: 6px 0; padding: 10px 12px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; font-family: var(--mono); font-size: .82em; line-height: 1.5; max-width: 100%; }
.codeblock code { background: none; padding: 0; white-space: pre; font-size: 1em; }
.codeblock[data-lang]::before { content: attr(data-lang); position: absolute; right: 38px; top: 7px; font-size: .75em; color: var(--text-4); font-family: var(--font); }
.code-copy { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--text-3); opacity: 0; background: var(--bg-3); }
.codeblock:hover .code-copy { opacity: 1; }
.spoiler { background: var(--text-4); color: transparent; border-radius: 5px; cursor: pointer; transition: background .15s; padding: 0 2px; }
.spoiler * { visibility: hidden; }
.spoiler.shown { background: var(--bg-hover); color: inherit; cursor: text; }
.spoiler.shown * { visibility: visible; }
.mention { background: color-mix(in srgb, var(--mc, var(--accent)) 22%, transparent); color: color-mix(in srgb, var(--mc, var(--accent)) 65%, var(--text)); border-radius: 6px; padding: 0 4px; font-weight: 600; }
.mention[role=button] { cursor: pointer; }
.mention[role=button]:hover { background: var(--mc, var(--accent)); color: #fff; }
a.link { color: #6cb6ff; word-break: break-word; }

/* инструменты сообщения */
.msg-tools { position: absolute; right: 18px; top: -18px; display: none; align-items: center; gap: 2px; padding: 3px; border-radius: 14px; background: var(--bg-float); box-shadow: var(--shadow-md), 0 0 0 1px var(--line); z-index: 3; animation: fade .1s; }
.msg:not(.own) .msg-tools { right: auto; left: 64px; }
.msg:hover .msg-tools { display: flex; }
[data-density="compact"] .msg .msg-tools { left: auto; right: 18px; }
.tool { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--text-3); }
.tool:hover { background: var(--bg-hover); color: var(--text); }
.emoji-tool { font-size: 1.1em; }
.tool-sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 2px; }

/* реакции */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; max-width: min(680px, 88%); }
.reaction { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 999px; background: var(--bg-input); border: 1.5px solid transparent; font-size: .86em; }
.reaction:hover { border-color: var(--line-2); }
.reaction.mine { background: var(--accent-soft); border-color: var(--accent); }
.r-emoji { font-size: 1.05em; }
.r-count { font-weight: 700; color: var(--text-2); font-size: .9em; }
.reaction.mine .r-count { color: var(--accent-text); }
.reaction.add { opacity: 0; color: var(--text-3); padding: 0 7px; }
.msg:hover .reaction.add { opacity: 1; }

/* вложения */
.attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; align-items: flex-start; max-width: 100%; }
.attachments.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); width: min(440px, 100%); }
.att-img { position: relative; border-radius: 14px; overflow: hidden; background: var(--bg-3); display: grid; place-items: center; cursor: zoom-in; width: 100%; }
.att-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-img.spoiler-img img { filter: blur(40px) brightness(.7); }
.spoiler-label { position: absolute; padding: 6px 12px; border-radius: 16px; background: rgba(0, 0, 0, .6); color: #fff; font-weight: 800; font-size: .8em; letter-spacing: .04em; pointer-events: none; }
.att-img:not(.spoiler-img) .spoiler-label { display: none; }
.att-err { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-3); font-size: .8em; padding: 16px; }
.att-file { display: flex; align-items: center; gap: 12px; padding: 12px; width: min(380px, 100%); border-radius: 14px; background: var(--bg-input); color: var(--text-3); }
.msg.own .att-file, .msg.own .att-play { background: rgba(0, 0, 0, .18); color: #fff; }
.att-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.att-name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.own .att-name { color: #fff; }
.att-meta small { opacity: .7; }
.att-media { width: min(440px, 100%); }
.att-media video { width: 100%; border-radius: 14px; background: #000; max-height: 360px; }
.att-media audio { width: 100%; }
.att-play { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border-radius: 14px; background: var(--bg-input); color: var(--text-2); text-align: left; }
.att-play span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-play small { opacity: .7; }
.att-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: .82em; }
.att-pending span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: rgba(0, 0, 0, .15); }
.upload-progress { height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .2); margin-top: 6px; width: 220px; max-width: 100%; overflow: hidden; }
.upload-progress i { display: block; height: 100%; width: 0; background: currentColor; transition: width .2s; }
.gif-msg { position: relative; margin-top: 6px; border-radius: 14px; overflow: hidden; background: var(--bg-3); width: 100%; }
.gif-msg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-tag { position: absolute; left: 8px; top: 8px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .62em; font-weight: 800; }
.gif-load { width: 100%; height: 100%; min-height: 120px; color: var(--text-3); font-size: .85em; }
.invite-embed { margin-top: 8px; padding: 14px; border-radius: 16px; background: var(--bg-input); width: min(400px, 100%); color: var(--text); }
.msg.own .invite-embed { background: rgba(0, 0, 0, .2); color: #fff; }
.ie-label { font-size: .72em; font-weight: 700; text-transform: uppercase; opacity: .7; margin-bottom: 10px; letter-spacing: .03em; }
.ie-row { display: flex; align-items: center; gap: 12px; }
.ie-icon { width: 50px; height: 50px; border-radius: 16px; object-fit: cover; flex: none; }
.ie-icon.letter { display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 700; font-size: 1.3em; }
.ie-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ie-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-text small { opacity: .75; font-size: .78em; }
.ie-row.dead { opacity: .7; }
.join-preview { min-height: 8px; margin: -6px 0 14px; }
.join-preview .ie-row { padding: 12px; background: var(--bg-input); border-radius: 14px; }
.edit-box { margin: 2px 0; min-width: min(420px, 66vw); }
.edit-input { min-height: 44px !important; max-height: 300px; resize: none !important; background: rgba(0, 0, 0, .2) !important; color: inherit !important; }
.edit-hint { font-size: .74em; opacity: .75; margin-top: 4px; }
.msg.own .edit-hint .link-like { color: #fff; text-decoration: underline; }

.jump-present { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 8px 16px; margin: 0 auto 6px; border-radius: 999px; background: var(--grad); color: #fff; font-size: .82em; font-weight: 600; z-index: 3; animation: rise .2s var(--ease); box-shadow: var(--shadow-md); }
.typing { height: 22px; padding: 0 20px; display: flex; align-items: center; gap: 8px; font-size: .78em; color: var(--text-3); flex: none; overflow: hidden; white-space: nowrap; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: bounce 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* поиск и закрепы */
.side-panel { width: 380px; flex: none; border-left: 1px solid var(--line); padding: 0 12px 16px; }
.sp-head { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; height: 52px; background: var(--panel-solid); z-index: 1; }
.sp-head b { flex: 1; }
.sp-note { font-size: .75em; color: var(--text-4); margin: 0 0 10px; display: flex; gap: 4px; align-items: center; }
.sp-card { display: block; width: 100%; text-align: left; padding: 10px; border-radius: 14px; background: var(--bg-input); margin-bottom: 8px; border: 1.5px solid transparent; }
.sp-card:hover { border-color: var(--line-2); }
.sp-empty { display: grid; justify-items: center; gap: 8px; color: var(--text-3); padding: 40px 0; }
.msg-preview { display: flex; gap: 10px; min-width: 0; }
.msg-preview > div { min-width: 0; flex: 1; }
.mp-head { display: flex; gap: 8px; align-items: baseline; }
.mp-head time { font-size: .72em; color: var(--text-4); }
.mp-text { font-size: .9em; color: var(--text-2); max-height: 140px; overflow: hidden; overflow-wrap: anywhere; }
.pins-pop { width: min(420px, 92vw); max-height: min(560px, 80vh); display: flex; flex-direction: column; }
.pins-pop header { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pins-pop h3 { font-size: 1em; font-family: var(--display); }
.pins-list { overflow-y: auto; padding: 10px; display: grid; gap: 8px; }
.pins-list > .spin { margin: 20px auto; }
.pin-card { position: relative; padding: 12px; border-radius: 14px; background: var(--bg-input); }
.pin-actions { position: absolute; top: 6px; right: 6px; display: none; gap: 4px; align-items: center; background: var(--bg-float); border-radius: 10px; padding: 3px; box-shadow: var(--shadow-md); }
.pin-card:hover .pin-actions { display: flex; }
.pins-empty { display: grid; justify-items: center; gap: 12px; padding: 30px 20px; text-align: center; color: var(--text-3); }

/* ---------------- поле ввода ---------------- */

.composer-wrap { position: relative; padding: 0 14px 14px; flex: none; }
.composer { background: var(--bg-input); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s; }
.composer:focus-within { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.composer.disabled { display: flex; align-items: center; gap: 10px; padding: 14px 18px; color: var(--text-3); font-size: .9em; }
.comp-row { display: flex; align-items: flex-end; min-height: 50px; padding: 0 6px; }
.comp-btn { width: 40px; height: 40px; margin: 0 0 5px; color: var(--text-3); border-radius: 50%; }
.comp-btn.plus { color: var(--accent-text); }
#composerInput { flex: 1; resize: none; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 13px 6px !important; min-height: 50px; max-height: 45vh; line-height: 1.45; min-width: 0; }
#composerInput:focus-visible, .add-friend input:focus-visible, .copy-row input:focus-visible, .edit-input:focus-visible { outline: none; }
.comp-tools { display: flex; align-items: center; }
.send-btn { display: none; background: var(--grad); color: #fff !important; }
.send-btn:hover { filter: brightness(1.1); background: var(--grad) !important; }
.composer.has-text .send-btn { display: grid; }
.slow { display: flex; align-items: center; gap: 4px; font-size: .72em; color: var(--text-3); margin: 0 6px 16px 0; }
.reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 18px; border-bottom: 1px solid var(--line); font-size: .85em; color: var(--text-3); }
.reply-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar b { color: var(--text); }
.reply-ping { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: .85em; color: var(--text-3); }
.reply-ping.on { color: var(--accent-text); }
.attach-bar { display: flex; gap: 12px; padding: 16px 16px 8px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.att-card { position: relative; flex: none; width: 150px; height: 150px; padding: 8px; border-radius: 16px; background: var(--bg-2); display: flex; flex-direction: column; gap: 6px; }
.att-card img { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: 10px; }
.att-card.spoiler img { filter: blur(20px); }
.att-card-ic { flex: 1; display: grid; place-items: center; color: var(--text-3); background: var(--bg-3); border-radius: 10px; }
.att-card-name { font-size: .78em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-card-tools { position: absolute; top: -8px; right: -8px; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-float); box-shadow: var(--shadow-md); }
.ac-box { position: absolute; left: 14px; right: 14px; bottom: calc(100% - 10px); max-height: 340px; overflow-y: auto; padding: 8px; border-radius: 18px; background: var(--bg-float); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); z-index: 10; animation: rise .15s var(--ease); }
.ac-title { font-size: .72em; font-weight: 700; text-transform: uppercase; color: var(--text-4); padding: 4px 8px 8px; }
.ac-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; text-align: left; }
.ac-row.sel { background: var(--accent-soft); }
.ac-label { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-row small { margin-left: auto; color: var(--text-3); font-size: .8em; }
.ac-emoji { font-size: 1.3em; width: 24px; text-align: center; }
.drop-overlay { position: absolute; inset: 0; z-index: 20; display: none; place-items: center; background: color-mix(in srgb, var(--bg-app) 65%, transparent); backdrop-filter: blur(4px); pointer-events: none; }
.drop-overlay.on { display: grid; }
.drop-overlay > div { display: grid; justify-items: center; gap: 8px; padding: 40px 56px; border-radius: var(--r-xl); background: var(--grad); color: #fff; box-shadow: var(--shadow-lg); text-align: center; }
.drop-overlay p { margin: 0; opacity: .85; font-size: .9em; }

/* эмодзи и GIF */
.popover.flat { padding: 0; }
.emoji-picker { width: min(380px, 94vw); height: min(430px, 62vh); display: grid; grid-template-rows: auto auto 1fr auto; }
.ep-search { margin: 12px 12px 8px; width: calc(100% - 24px) !important; }
.ep-tabs { display: flex; gap: 2px; padding: 0 8px 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ep-tab { width: 34px; height: 32px; border-radius: 10px; font-size: 1.05em; filter: grayscale(.6); flex: none; }
.ep-tab:hover { background: var(--bg-hover); filter: none; }
.ep-grid { padding: 6px 8px; }
.ep-grid h5 { font-size: .7em; text-transform: uppercase; color: var(--text-4); padding: 8px 4px 4px; position: sticky; top: -6px; background: var(--bg-float); z-index: 1; }
.ep-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.ep-cell { height: 40px; font-size: 1.5em; border-radius: 10px; line-height: 1; }
.ep-cell:hover { background: var(--bg-hover); }
.ep-none { text-align: center; color: var(--text-3); padding: 30px; }
.ep-preview { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-top: 1px solid var(--line); font-size: .85em; color: var(--text-2); }
.ep-big { font-size: 1.7em; }
.gif-picker { width: min(400px, 94vw); height: min(460px, 62vh); display: flex; flex-direction: column; }
.gif-wrap { flex: 1; padding: 0 10px 10px; }
.gif-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gif-col { display: flex; flex-direction: column; gap: 6px; }
.gif-item { width: 100%; border-radius: 12px; overflow: hidden; background: var(--bg-3); }
.gif-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-item:hover { outline: 2px solid var(--accent); }
.gif-status { text-align: center; color: var(--text-3); padding: 12px; font-size: .85em; }

/* ---------------- участники и профили ---------------- */

.mem-group { font-size: .74em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); padding: 16px 10px 6px; }
.mem-group:first-child { padding-top: 6px; }
.mem-row { display: flex; align-items: center; gap: 11px; padding: 6px 8px; border-radius: 14px; cursor: pointer; margin-bottom: 2px; }
.mem-row:hover { background: var(--bg-hover); }
.mem-row.offline { opacity: .4; }
.mem-row.offline:hover { opacity: 1; }
.mem-text { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.mem-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; color: var(--text-2); }
.mem-row:hover .mem-name { color: var(--text); }
.mem-text small { color: var(--text-3); font-size: .75em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-voice { display: flex; align-items: center; gap: 2px; color: var(--green) !important; }
.crown { color: var(--yellow); display: inline-flex; }
.crown.red { color: var(--red); }
.mem-back { display: none; }

.popover { position: fixed; z-index: 1000; background: var(--bg-float); border-radius: var(--r-lg); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); overflow: hidden; animation: pop .16s var(--ease); --ring-bg: var(--bg-float); max-width: calc(100vw - 16px); }
.profile-pop { width: 320px; }
.profile-card { position: relative; background: var(--bg-float); --ring-bg: var(--bg-float); }
.pc-banner { height: 96px; position: relative; }
.pc-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .25)); }
.pc-avatar { position: absolute !important; left: 16px; top: 52px; padding: 5px; background: var(--ring-bg); border-radius: 38%; width: calc(var(--s) + 10px) !important; height: calc(var(--s) + 10px) !important; }
.pc-avatar .av-img { width: var(--s); height: var(--s); }
.pc-avatar .status-dot { right: 2px; bottom: 2px; }
.pc-body { padding: 50px 16px 16px; }
.profile-card.panel .pc-body, .profile-card.full .pc-body { padding-top: 62px; }
.pc-names h3 { font-family: var(--display); font-size: 1.2em; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.pc-user { color: var(--text-3); font-size: .875em; }
.pc-status { margin-top: 8px; font-size: .875em; color: var(--text-2); }
.pc-extra { margin-top: 12px; display: grid; gap: 14px; padding: 12px; background: var(--bg-input); border-radius: 16px; }
.pc-extra:empty { display: none; }
.pc-extra > .spin { justify-self: center; }
.pc-extra h5 { font-size: .72em; text-transform: uppercase; color: var(--text-4); margin-bottom: 6px; font-weight: 700; letter-spacing: .03em; }
.pc-bio { font-size: .88em; white-space: pre-wrap; }
.pc-since-row { display: flex; gap: 14px; flex-wrap: wrap; }
.pc-since { display: flex; align-items: center; gap: 6px; font-size: .82em; color: var(--text-2); }
.pc-since img, .pc-gdot { width: 16px; height: 16px; border-radius: 5px; object-fit: cover; display: inline-grid; place-items: center; background: var(--accent); color: #fff; font-size: 9px; font-style: normal; }
.pc-actions { display: flex; gap: 8px; margin-top: 12px; }
.pc-actions .btn { flex: 1; }
.pc-list { display: grid; gap: 2px; }
.pc-li { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; text-align: left; font-size: .875em; }
.pc-li:hover { background: var(--bg-hover); }
.pc-safety { display: inline-flex; align-items: center; gap: 6px; font-size: .8em; justify-self: start; }
.pc-safety .warn { color: var(--red); }
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.role-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: 999px; background: var(--bg-3); font-size: .76em; font-weight: 600; }
.rc-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-grid; place-items: center; color: transparent; flex: none; }
button.rc-dot:hover { color: #fff; }
.role-chip.add { padding: 0 8px; color: var(--text-3); }
#members.dm-profile { padding: 0; }
#members.dm-profile .profile-card { background: transparent; min-height: 100%; --ring-bg: var(--panel-solid); }
#members.dm-profile .pc-avatar { background: var(--panel-solid); }
.safety-code { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px; border-radius: var(--r); background: var(--bg-input); font-family: var(--mono); font-size: 1.05em; text-align: center; letter-spacing: .05em; margin-bottom: 14px; }

/* ---------------- друзья ---------------- */

.tabs { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tab { height: 32px; padding: 0 14px; border-radius: 999px; color: var(--text-3); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: .88em; flex: none; }
.tab:hover { background: var(--bg-hover); color: var(--text-2); }
.tab.active { background: var(--bg-active); color: var(--text); }
.tab.add { background: var(--grad); color: #fff; }
.tab.add.active { background: var(--accent-soft); color: var(--accent-text); }
.home-wrap { flex: 1; display: flex; min-height: 0; }
.friends { flex: 1; padding: 16px 22px 22px; min-width: 0; }
.fs-wrap { position: relative; margin-bottom: 8px; }
.friend-search { padding-right: 38px !important; border-radius: 999px !important; }
.fs-wrap .ic { position: absolute; right: 13px; top: 13px; color: var(--text-3); }
.friends-title { font-size: .74em; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin: 16px 0 8px; font-weight: 700; }
.friend-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 8px; border-radius: 18px; cursor: pointer; background: var(--bg-input); transition: background .15s, transform .12s; }
.friend-row:hover { background: var(--bg-active); }
.friend-row:active { transform: scale(.99); }
.fr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-text b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-user { font-weight: 400; color: var(--text-3); margin-left: 6px; font-size: .86em; }
.fr-text small { color: var(--text-3); font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-actions { display: flex; gap: 8px; }
.home-empty { display: grid; justify-items: center; gap: 16px; padding: 56px 20px; color: var(--text-3); text-align: center; }
.he-art { opacity: .6; }
.add-head h2 { font-family: var(--display); font-size: 1.15em; margin-bottom: 6px; }
.add-head p { color: var(--text-3); margin: 0 0 16px; font-size: .9em; }
.add-friend { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 16px; border-radius: 999px; background: var(--bg-input); border: 1.5px solid var(--line-2); }
.add-friend:focus-within { border-color: var(--accent); }
.add-friend.ok { border-color: var(--green); }
.add-friend.err { border-color: var(--red); }
.add-friend input { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 10px 0 !important; min-width: 0; }
.add-msg { font-size: .85em; margin: 8px 0 0 16px; }
.add-msg.ok { color: var(--green); }
.add-msg.err { color: var(--red); }
.active-now { width: 320px; flex: none; border-left: 1px solid var(--line); padding: 18px; }
.active-now h3 { font-family: var(--display); font-size: 1.05em; margin-bottom: 16px; }
.an-empty { text-align: center; padding: 18px; border-radius: var(--r); background: var(--bg-input); }
.an-empty p { color: var(--text-3); font-size: .85em; margin-bottom: 0; }
.an-card { padding: 14px; border-radius: var(--r); background: var(--bg-input); cursor: pointer; margin-bottom: 10px; }
.an-card:hover { background: var(--bg-active); }
.an-head { display: flex; gap: 10px; align-items: center; }
.an-head small { display: block; color: var(--text-3); font-size: .78em; }
.an-room { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-input); font-size: .85em; color: var(--text-2); }
.an-room span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-avs { display: flex; }
.an-avs .avatar { margin-left: -6px; }

/* быстрый переход */
.switcher { width: min(560px, 100%); }
.switcher .modal-body { padding: 18px; }
.qs-input { font-size: 1.1em !important; padding: 14px 18px !important; border-radius: 999px !important; }
.qs-list { max-height: 50vh; margin-top: 12px; display: grid; gap: 2px; }
.qs-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 14px; text-align: left; }
.qs-row.sel, .qs-row:hover { background: var(--accent-soft); }
.qs-row span { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-row small { margin-left: auto; color: var(--text-3); font-size: .8em; }
.qs-none { color: var(--text-3); text-align: center; padding: 16px; }
.qs-tip { font-size: .76em; color: var(--text-3); margin: 14px 0 0; }
.qs-tip b { color: var(--accent-text); }

/* ---------------- голос ---------------- */

.voice-stage { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--stage); --ring-bg: var(--stage); }
.stage { flex: 1; min-height: 0; padding: 16px; display: grid; gap: 10px; place-content: center; overflow: auto; }
.stage.grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-content: center; }
.stage.grid.n1 { grid-template-columns: minmax(0, 860px); }
.stage.grid.n2 { grid-template-columns: repeat(2, minmax(0, 560px)); }
.stage.focus-mode { display: flex; flex-direction: column; gap: 10px; }
.stage-main { flex: 1; min-height: 0; display: flex; }
.stage-main .tile { flex: 1; aspect-ratio: auto; }
.stage-strip { display: flex; gap: 10px; overflow-x: auto; justify-content: center; flex: none; }
.stage-strip .tile { width: 170px; flex: none; }
.stage.empty { color: #aaa; text-align: center; }
.stage-empty { display: grid; justify-items: center; gap: 8px; }
.stage-empty h2 { font-family: var(--display); color: #fff; }
.tile { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tile-bg, #7c5cff) 45%, #15141c), #0d0c12 75%); display: grid; place-items: center; cursor: pointer; outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .15s; }
.tile.speaking { outline-color: var(--green); }
.tile video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.screen video { object-fit: contain; }
video.mirror { transform: scaleX(-1); }
.tile-label { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 20px); padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .8em; font-weight: 600; }
.tile-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-warn { background: var(--red); border-radius: 50%; width: 16px; height: 16px; display: grid; place-items: center; font-size: .8em; }
.tile-tools { position: absolute; right: 10px; top: 10px; opacity: 0; transition: opacity .15s; }
.tile:hover .tile-tools { opacity: 1; }
.tile-tools .icon-btn { background: rgba(0, 0, 0, .55); color: #fff; width: 30px; height: 30px; }
.tile.ringing { cursor: default; animation: breathe 2s ease-in-out infinite; }
.stage-controls { flex: none; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 12px 16px calc(18px + var(--safe-b)); flex-wrap: wrap; }
.stage-controls .ctl { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.stage-controls .ctl:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.stage-controls .ctl.on { background: #fff; color: #111; }
.stage-controls .ctl.off { color: var(--red); background: rgba(255, 77, 94, .15); }
.stage-controls .ctl.hang { background: var(--red); }
.stage-controls .ctl.hang:hover { background: var(--red-h); }
.call-stage { flex: none; height: 300px; display: flex; position: relative; border-bottom: 1px solid var(--line); }
.call-stage.tall { height: 62vh; }
.call-stage .stage { padding: 12px; }
.call-stage .stage.grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 340px)); }
.call-resize { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); width: 40px; height: 24px; border-radius: 12px; background: var(--bg-3); color: var(--text-2); display: grid; place-items: center; z-index: 2; box-shadow: var(--shadow-md); }
.call-stage.tall .call-resize .ic { transform: rotate(180deg); }
#callLayer { position: fixed; right: 20px; bottom: 20px; z-index: 900; }
.incoming { width: 270px; padding: 26px 20px 22px; border-radius: var(--r-xl); background: var(--bg-float); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); display: grid; justify-items: center; gap: 6px; text-align: center; animation: rise .3s var(--ease); --ring-bg: var(--bg-float); }
.incoming .avatar { animation: ringpulse 1.4s ease-out infinite; border-radius: 34%; }
@keyframes ringpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 100% { box-shadow: 0 0 0 22px transparent; } }
.incoming b { font-family: var(--display); font-size: 1.1em; margin-top: 10px; }
.incoming small { color: var(--text-3); }
.inc-actions { display: flex; gap: 14px; margin-top: 14px; }
.sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; max-height: 50vh; overflow-y: auto; }
.source { display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: var(--bg-input); text-align: left; font-size: .8em; }
.source:hover { outline: 2px solid var(--accent); }
.source img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; background: #000; }
.source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-opts { display: flex; gap: 20px; align-items: flex-end; margin-top: 16px; flex-wrap: wrap; }
.inline-check { display: inline-flex; gap: 10px; align-items: center; margin-bottom: 18px; }

/* ---------------- окна ---------------- */

#layer { position: relative; z-index: 800; }
.modal-back { position: fixed; top: 0; left: 0; right: 0; height: var(--vvh, 100dvh); z-index: 800; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; background: rgba(4, 4, 10, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s; overflow: hidden; }
.modal-back.in { opacity: 1; }
.modal-back.out { opacity: 0; }
.modal { position: relative; width: min(480px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--bg-float); border-radius: var(--r-xl); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); transform: scale(.96) translateY(8px); transition: transform .22s var(--ease); --ring-bg: var(--bg-float); min-width: 0; }
.modal-back.in .modal { transform: none; }
.modal.small { width: min(440px, 100%); }
.modal.wide { width: min(760px, 100%); }
.modal.profile { width: min(560px, 100%); overflow: hidden; }
.modal.profile .modal-body { padding: 0; }
.modal.profile .pc-banner { height: 130px; }
.modal.profile .pc-avatar { top: 80px; }
.modal.profile .pc-body { padding-top: 66px; }
.modal.full { width: 100%; height: 100%; max-height: none; border-radius: 0; background: transparent; box-shadow: none; }
.modal-back:has(.modal.full) { padding: 0; background: var(--bg-app); backdrop-filter: none; }
.modal.bare { background: transparent; box-shadow: none; width: auto; }
.modal-head { padding: 24px 58px 4px 24px; }
.modal-head h2 { font-family: var(--display); font-size: 1.25em; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.modal-sub { color: var(--text-3); font-size: .9em; margin: 6px 0 0; }
.modal-x { position: absolute; right: 14px; top: 16px; }
.modal-body { padding: 18px 24px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 20px; flex-wrap: wrap; }
.choice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; margin-bottom: 10px; border-radius: var(--r); background: var(--bg-input); text-align: left; transition: background .15s, transform .12s; }
.choice:hover { background: var(--bg-active); }
.choice:active { transform: scale(.99); }
.choice > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.choice small { color: var(--text-3); }
.choice-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--grad); color: #fff; }
.icon-pick-wrap { display: grid; place-items: center; margin: 4px 0 20px; }
.icon-pick { position: relative; width: 88px; height: 88px; border-radius: 30px; cursor: pointer; flex: none; }
.icon-pick img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; }
.icon-pick-empty { width: 100%; height: 100%; border-radius: 30px; border: 2px dashed var(--text-4); display: grid; place-content: center; justify-items: center; color: var(--text-3); gap: 2px; }
.icon-pick-empty small { font-size: .55em; font-weight: 800; }
.icon-pick:hover .icon-pick-empty { color: var(--text); border-color: var(--accent); }
.icon-pick-x { position: absolute; right: -4px; top: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; }
.type-pick { display: grid; gap: 8px; }
.type-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--bg-input); text-align: left; color: var(--text-2); border: 1.5px solid transparent; }
.type-opt > span { flex: 1; display: flex; flex-direction: column; }
.type-opt small { color: var(--text-3); font-size: .8em; }
.type-opt.on { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text-4); flex: none; }
.radio.on { border: 6px solid var(--accent); }
.copy-row { display: flex; gap: 8px; padding: 4px; border-radius: 999px; background: var(--bg-input); }
.copy-row input { background: transparent !important; border: 0 !important; box-shadow: none !important; min-width: 0; }
.invite-link { margin-top: 18px; }
.inv-friends { max-height: 240px; margin: 10px 0; display: grid; gap: 2px; }
.inv-friend { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 14px; }
.inv-friend:hover { background: var(--bg-hover); }
.inv-friend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-opts summary { cursor: pointer; color: var(--text-3); font-size: .85em; margin: 10px 0; }
.lightbox .modal-body { padding: 0; display: grid; place-items: center; }
.lb-img { max-width: 94vw; max-height: 80dvh; border-radius: 14px; cursor: zoom-in; box-shadow: var(--shadow-lg); }
.lb-img.zoom { max-width: none; max-height: none; cursor: zoom-out; }
.lb-bar { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #ddd; }
.lb-name { font-size: .85em; margin-right: 10px; }
.lb-bar .icon-btn { color: #ddd; }
.modal.bare .modal-body { overflow: auto; max-height: 100dvh; }

/* меню */
.menu { position: fixed; z-index: 1001; min-width: 210px; max-width: min(300px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px; border-radius: 18px; background: var(--bg-float); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); animation: pop .12s var(--ease); scrollbar-width: thin; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 7px 10px; border-radius: 12px; color: var(--text-2); text-align: left; font-size: .88em; font-weight: 500; }
.menu-item:hover:not(:disabled) { background: var(--accent-soft); color: var(--text); }
.menu-item.danger { color: var(--red); }
.menu-item.danger:hover:not(:disabled) { background: var(--red); color: #fff; }
.menu-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-label small { font-size: .82em; opacity: .7; font-weight: 400; }
.menu-sep { height: 1px; background: var(--line-2); margin: 4px 8px; }
.menu-header { font-size: .7em; font-weight: 700; text-transform: uppercase; color: var(--text-4); padding: 8px 10px 4px; letter-spacing: .03em; }
.menu-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.menu-dot.big { width: 14px; height: 14px; }
.menu-check { width: 20px; height: 20px; border-radius: 7px; border: 2px solid var(--text-4); display: grid; place-items: center; flex: none; }
.menu-check.radio { border-radius: 50%; }
.menu-check.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.menu-reacts { display: flex; gap: 4px; padding: 2px 2px 6px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.menu-react { flex: 1; height: 42px; border-radius: 14px; background: var(--bg-input); font-size: 1.25em; }
.menu-react:hover { background: var(--bg-active); }
.menu-slider { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 6px 10px; font-size: .8em; color: var(--text-3); }
.menu-slider input { grid-column: 1 / -1; accent-color: var(--accent); }

#tip { position: fixed; z-index: 2000; max-width: 280px; padding: 6px 11px; border-radius: 10px; background: #0b0b10; color: #fff; font-size: .8em; font-weight: 600; box-shadow: var(--shadow-md); pointer-events: none; animation: fade .1s; }
#toasts { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 3000; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
.toast { padding: 11px 18px; border-radius: 999px; background: var(--bg-float); color: var(--text); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); font-size: .9em; font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .25s var(--ease); text-align: center; }
.toast.in { opacity: 1; transform: none; }
.toast.error { background: var(--red); color: #fff; }
#conn { position: fixed; top: 0; left: 0; right: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; gap: 10px; padding: calc(8px + var(--safe-t)) 12px 8px; background: var(--yellow); color: #1c1300; font-weight: 600; font-size: .875em; }
#conn .spin { width: 14px; height: 14px; }
.notif-offer { display: flex; align-items: center; gap: 12px; margin: 10px 12px 0; padding: 10px 10px 10px 16px; border-radius: var(--r); background: var(--grad); color: #fff; font-size: .875em; font-weight: 600; flex: none; flex-wrap: wrap; }
.notif-offer span { flex: 1; min-width: 160px; }
.notif-offer .btn.primary { background: #fff; color: var(--accent); box-shadow: none; }
.notif-offer .icon-btn { color: #fff; }

/* ---------------- страницы настроек ----------------
   Слева «шапка» и сгруппированные разделы с цветными иконками, справа содержимое
   из отдельных плиток. Без процентных высот: так прокрутка работает и в Safari на iPhone. */

.modal.full { height: 100vh; height: var(--vvh, 100dvh); max-height: var(--vvh, 100dvh) !important; }
.modal-back { grid-template-rows: minmax(0, 1fr); }
.settings-modal .modal-body { flex: 1; min-height: 0; display: flex; padding: 0; overflow: hidden; }
.settings-page { position: relative; flex: 1; min-height: 0; min-width: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: var(--gap); padding: var(--gap); }
.sp-side { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
.sp-nav { flex: 1; min-height: 0; padding: 16px 14px 28px; }
.sp-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 22px 16px 18px; margin-bottom: 18px; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%), var(--bg-input); text-align: center; --ring-bg: var(--panel-solid); }
.sp-hero b { font-family: var(--display); font-size: 1.15em; margin-top: 6px; overflow-wrap: anywhere; }
.sp-hero small { color: var(--text-3); font-size: .82em; overflow-wrap: anywhere; }
.sp-hero .gicon { border-radius: 26px; }
button.sp-hero:hover { filter: brightness(1.06); }
.sp-nav h6 { font-size: .72em; font-weight: 700; text-transform: uppercase; color: var(--text-4); padding: 0 12px 7px; letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-group { background: var(--bg-input); border-radius: 18px; padding: 4px; margin-bottom: 18px; }
.sp-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 14px; color: var(--text); font-weight: 600; text-align: left; font-size: .94em; }
.sp-item + .sp-item { margin-top: 2px; }
.sp-item:hover { background: var(--bg-hover); }
.sp-item.active { background: var(--accent-soft); }
.sp-item.danger .sp-label { color: var(--red); }
.sp-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--tint); color: #fff; flex: none; box-shadow: 0 4px 12px color-mix(in srgb, var(--tint) 35%, transparent); }
.sp-chev { color: var(--text-4); display: none; }
.sp-version { font-size: .72em; color: var(--text-4); padding: 0 12px; text-align: center; }
.sp-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.sp-content { flex: 1; min-height: 0; padding: 30px 40px 80px; }
.sp-inner { max-width: 720px; margin: 0 auto; position: relative; padding-bottom: 60px; min-width: 0; }
.sp-title { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-right: 50px; }
.sp-title .sp-ic { width: 44px; height: 44px; border-radius: 14px; }
.sp-title h2 { font-family: var(--display); font-size: 1.35em; overflow-wrap: anywhere; min-width: 0; }
.sp-back { display: none; align-items: center; gap: 2px; color: var(--accent-text); margin: 0 0 14px -6px; font-weight: 600; font-size: 1.02em; }
.sp-close { position: absolute; top: calc(var(--gap) + 18px); right: calc(var(--gap) + 18px); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-input); color: var(--text-2); z-index: 3; }
.sp-close:hover { color: var(--text); background: var(--bg-active); }
.sp-inner .set-row { background: var(--bg-input); border-radius: var(--r); padding: 14px 16px; margin-bottom: 8px; border-bottom: 0; }
.sp-inner .sub-h { margin: 26px 4px 10px; }
.sp-inner > .field, .sp-inner > .row2, .sp-inner .pe-form > .field { background: var(--bg-input); padding: 14px 16px; border-radius: var(--r); }
.sp-inner .row2 > .field { margin: 0; }
.save-bar { position: sticky; bottom: 18px; margin-top: 24px; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--bg-float); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); animation: rise .2s var(--ease); z-index: 5; flex-wrap: wrap; }
.save-bar span { flex: 1; font-weight: 600; font-size: .9em; min-width: 140px; }
.save-bar .link-like { color: var(--text-2); }
/* сгруппированные списки */
.list-title { font-size: .72em; font-weight: 700; text-transform: uppercase; color: var(--text-4); letter-spacing: .05em; margin: 24px 6px 8px; }
.list-group { background: var(--bg-input); border-radius: 18px; overflow: hidden; }
.list-group.pad { padding: 16px; }
.list-group.pad .muted-text { margin: 12px 0 0; }
.list-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 16px; text-align: left; }
.list-row + .list-row { border-top: 1px solid var(--line); }
.list-row.tap:hover { background: var(--bg-hover); }
.lr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lr-label { font-weight: 600; }
.lr-text small { color: var(--text-3); font-size: .8em; margin-top: 2px; }
.lr-value { color: var(--text-3); font-size: .92em; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-chev { color: var(--text-4); }
.list-row.danger .lr-label { color: var(--red); }
.acc-hero { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--r-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--banner) 55%, transparent), color-mix(in srgb, var(--banner) 10%, transparent)), var(--bg-input); --ring-bg: var(--panel-solid); flex-wrap: wrap; }
.acc-hero .avatar .av-img { box-shadow: 0 0 0 4px var(--panel-solid); }
.acc-hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-hero-text h3 { font-family: var(--display); font-size: 1.25em; overflow-wrap: anywhere; }
.acc-hero-text span { color: var(--text-2); font-size: .9em; }
.storage-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.storage-top b { font-family: var(--display); font-size: 1.2em; }
.storage-top span { color: var(--text-3); font-size: .88em; }

.acc-card { border-radius: var(--r-lg); overflow: hidden; background: var(--bg-input); --ring-bg: var(--panel-solid); }
.acc-banner { height: 96px; }
.acc-top { display: flex; align-items: flex-end; gap: 14px; padding: 0 16px; margin-top: -34px; flex-wrap: wrap; }
.acc-top .avatar { border: 5px solid var(--panel-solid); border-radius: 38%; width: calc(var(--s) + 10px); height: calc(var(--s) + 10px); background: var(--panel-solid); }
.acc-top h3 { flex: 1; font-family: var(--display); font-size: 1.15em; margin-bottom: 8px; min-width: 0; overflow-wrap: anywhere; }
.acc-top .btn { margin-bottom: 8px; }
.acc-rows { margin: 14px; padding: 16px; border-radius: var(--r); background: var(--bg-input); display: grid; gap: 18px; }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.acc-row > div { min-width: 0; }
.acc-row h5 { font-size: .72em; text-transform: uppercase; color: var(--text-4); margin-bottom: 4px; letter-spacing: .03em; }
.acc-row span { overflow-wrap: anywhere; }
.profile-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
.profile-preview h5 { font-size: .72em; text-transform: uppercase; color: var(--text-4); margin-bottom: 10px; }
.profile-preview .profile-card { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md), 0 0 0 1px var(--line); }
.color-btn { width: 64px; height: 40px; border-radius: 12px; cursor: pointer; display: block; box-shadow: inset 0 0 0 1px var(--line-2); }
.color-btn input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.counter { float: right; color: var(--text-4); font-weight: 500; }
.radio-list { display: grid; gap: 8px; margin-bottom: 8px; }
.radio-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--r); background: var(--bg-input); cursor: pointer; border: 1.5px solid transparent; }
.radio-row:hover { background: var(--bg-active); }
.radio-row input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin: 0; }
.radio-row span { display: flex; flex-direction: column; min-width: 0; }
.radio-row small { color: var(--text-3); font-size: .82em; }
.radio-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.facts li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: .9em; line-height: 1.5; }
.facts li .ic { margin-top: 3px; color: var(--green); }
.e2e-card { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--green) 10%, var(--bg-input)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 28%, transparent); margin-bottom: 20px; }
.e2e-card > .ic { color: var(--green); }
.e2e-card p { margin: 6px 0 0; color: var(--text-2); font-size: .9em; line-height: 1.5; }
.devices { display: grid; gap: 8px; }
.devices h5 { font-size: .72em; text-transform: uppercase; color: var(--text-4); margin: 12px 0 4px; }
.device { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r); background: var(--bg-input); }
.dev-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-3); color: var(--text-2); flex: none; }
.dev-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dev-text small { color: var(--text-3); }
.look-sample { padding: 8px 0 16px; border-radius: var(--r-lg); background: var(--bg-input); margin-bottom: 8px; overflow: hidden; }
.theme-pick { display: flex; gap: 14px; flex-wrap: wrap; }
.theme-opt { display: grid; justify-items: center; gap: 6px; font-size: .8em; color: var(--text-2); }
.theme-opt i { width: 64px; height: 64px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line-2); }
.t-dark i { background: linear-gradient(135deg, #1d1c28 50%, #08080c 50%); }
.t-midnight i { background: #000; }
.t-light i { background: linear-gradient(135deg, #fff 50%, #eceaf3 50%); }
.t-system i { background: linear-gradient(135deg, #fff 50%, #14141c 50%); }
.theme-opt.on i { box-shadow: 0 0 0 3px var(--accent); }
.swatches { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.swatch-grid { display: grid; grid-template-columns: repeat(9, 24px); gap: 8px; }
.swatch-grid.big { grid-template-columns: repeat(8, 40px); gap: 12px; }
.swatch { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.swatch-grid.big .swatch { width: 40px; height: 40px; border-radius: 14px; }
.swatch.big { width: 66px; height: 52px; border-radius: 14px; }
.swatch.on { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 4px var(--text); }
.swatch.custom { position: relative; cursor: pointer; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mic-test { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.mic-meter { position: relative; flex: 1; min-width: 140px; height: 10px; border-radius: 5px; background: var(--bg-4); overflow: hidden; }
.mic-meter .lvl { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--yellow); transition: width .05s linear; }
.mic-meter .lvl.over { background: var(--green); }
.mic-meter .thr { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--text); border-radius: 2px; }
.key-cap { min-width: 140px; padding: 9px 14px; border-radius: 12px; background: var(--bg-input); box-shadow: inset 0 0 0 1.5px var(--line-2); font-weight: 700; }
.key-cap.rec { box-shadow: inset 0 0 0 2px var(--red); color: var(--red); }
.cam-preview { position: relative; aspect-ratio: 16/9; max-width: 420px; border-radius: var(--r-lg); background: var(--bg-input); display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--text-4); overflow: hidden; }
.cam-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-stop { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .55) !important; color: #fff !important; }
.about { display: grid; justify-items: center; gap: 8px; padding: 24px; text-align: center; }
.about h3 { font-family: var(--display); }
.overview-row { display: flex; gap: 24px; align-items: flex-start; }
.overview-row .icon-pick-wrap { margin: 0; }
.grow { flex: 1; min-width: 0; }
.storage { margin-bottom: 6px; }
.storage-bar { height: 10px; border-radius: 5px; background: var(--bg-4); overflow: hidden; }
.storage-bar i { display: block; height: 100%; background: var(--grad); border-radius: 5px; }
.storage-bar.warn i { background: var(--yellow); }
.storage-bar.full i { background: var(--red); }
.storage-text { margin-top: 8px; font-size: .85em; color: var(--text-3); overflow-wrap: anywhere; }
.storage-text b { color: var(--text); }

/* роли и права */
.roles-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.role-list { display: grid; gap: 4px; margin-top: 8px; }
.role-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r); background: var(--bg-input); cursor: pointer; width: 100%; text-align: left; }
.role-row:hover { background: var(--bg-active); }
.role-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-row .grip { color: var(--text-4); cursor: grab; }
.role-row.locked { opacity: .55; cursor: default; }
.role-row.drop { box-shadow: inset 0 2px 0 var(--accent); }
.role-row.everyone { padding: 14px; margin-bottom: 4px; }
.role-row.everyone > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.role-row.everyone small { color: var(--text-3); }
.role-count { display: flex; align-items: center; gap: 4px; color: var(--text-3); font-size: .85em; }
.tag { font-size: .7em; padding: 2px 7px; border-radius: 999px; background: var(--bg-4); color: var(--text-2); }
.role-edit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.role-edit-head h3 { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); min-width: 0; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); }
.sp-inner .tabs { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 16px; }
.sp-inner h5 { font-size: .74em; text-transform: uppercase; color: var(--text-3); margin: 22px 0 4px; font-weight: 700; letter-spacing: .03em; }
.mem-line { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; }
.mem-line:hover { background: var(--bg-hover); }
.mem-line span { font-weight: 600; }
.mem-line small { color: var(--text-3); flex: 1; }
.ow-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
.ow-list { display: grid; gap: 2px; align-content: start; }
.ow-head { display: flex; align-items: center; justify-content: space-between; font-size: .75em; text-transform: uppercase; color: var(--text-3); padding: 0 4px 6px; }
.ow-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; text-align: left; font-size: .9em; color: var(--text-2); }
.ow-item:hover { background: var(--bg-hover); }
.ow-item.on { background: var(--accent-soft); color: var(--text); }
.ow-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-perms h4 { margin-bottom: 4px; font-family: var(--display); }
.tri { display: flex; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--line-2); flex: none; }
.tri-btn { width: 36px; height: 32px; display: grid; place-items: center; color: var(--text-3); font-weight: 700; }
.tri-btn + .tri-btn { border-left: 1px solid var(--line-2); }
.tri-btn.deny.on { background: var(--red); color: #fff; }
.tri-btn.inherit.on { background: var(--bg-4); color: var(--text); }
.tri-btn.allow.on { background: var(--green); color: #fff; }
.gm-list { display: grid; gap: 2px; margin-top: 12px; }
.gm-head, .gm-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr minmax(0, 1.4fr) auto; gap: 12px; align-items: center; padding: 8px 10px; }
.gm-row.two { grid-template-columns: minmax(0, 1fr) auto; }
.gm-head { font-size: .7em; text-transform: uppercase; color: var(--text-4); font-weight: 700; }
.gm-row { border-radius: 14px; }
.gm-row:hover { background: var(--bg-hover); }
.gm-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gm-user > div { min-width: 0; display: flex; flex-direction: column; }
.gm-user b { display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-user small { color: var(--text-3); font-size: .8em; }
.gm-date { color: var(--text-3); font-size: .85em; display: flex; align-items: center; gap: 8px; }

/* ---------------- планшет ---------------- */

@media (max-width: 1100px) {
  #members:not([hidden]) { position: fixed; top: 8px; right: 8px; bottom: 8px; z-index: 60; transform: translateX(calc(100% + 20px)); transition: transform .25s var(--ease); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); background: var(--panel-solid); }
  #app.members-open #members { transform: none; }
  #app.members-open #scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .5); }
  .active-now { display: none; }
  .side-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 10; width: min(380px, 100%); box-shadow: var(--shadow-lg); background: var(--panel-solid); }
}

/* ---------------- телефон: экраны и вкладки внизу ---------------- */

@media (max-width: 760px) {
  :root { --fs: calc(16px * var(--font-scale)); }
  /* iPhone увеличивает страницу, если шрифт в поле меньше 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select { font-size: 16px !important; }
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; padding: 0; }
  #side, #main, #members { border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--panel-solid); }
  #rail { display: none; }
  #side { grid-column: 1; grid-row: 1 / 3; padding-top: var(--safe-t); }
  #main { display: none; grid-column: 1; grid-row: 1 / 4; padding-top: var(--safe-t); }
  #app.m-main #main { display: flex; }
  #app.m-main #side, #app.m-main #rail { display: none !important; }
  #app.m-main.m-root #main { grid-row: 1 / 3; }
  #app.m-root #tabbar { display: grid; grid-column: 1; grid-row: 3; grid-template-columns: repeat(4, 1fr); padding: 6px 6px calc(6px + var(--safe-b)); background: var(--panel-solid); border-top: 1px solid var(--line); z-index: 5; --ring-bg: var(--panel-solid); }
  .tb-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border-radius: 14px; color: var(--text-3); font-size: .7em; font-weight: 600; min-width: 0; }
  .tb-item.on { color: var(--text); }
  .tb-item.on .tb-ic { background: var(--accent-soft); color: var(--accent-text); }
  .tb-ic { position: relative; display: grid; place-items: center; width: 56px; height: 32px; border-radius: 16px; transition: background .2s; }
  .tb-ic .badge { position: absolute; top: -3px; right: 6px; box-shadow: 0 0 0 2px var(--panel-solid); }
  #sideFoot { padding: 8px 10px; }
  #sideFoot:empty, #sideFoot:has(#voicePanel[hidden]) { display: none; }
  #userPanel { display: none; }
  .side-head { height: 60px; padding: 0 14px; }
  #sideBody { padding: 8px 12px 16px; }
  .ch-row { height: 46px; font-size: 1.02em; }
  .dm-row { padding: 9px 10px; }
  .ch-actions { display: none !important; }
  .cat-row .icon-btn { opacity: 1; }
  .dm-close { display: none; }
  .menu-btn { display: inline-grid; margin-left: -8px; }
  .m-root .menu-btn { display: none; }
  .main-head { min-height: 56px; padding: 0 6px 0 12px; gap: 6px; }
  .head-topic, .head-div, .search-box { display: none; }
  .head-title { max-width: none; flex: 1; min-width: 0; }
  .head-right { gap: 0; }
  .head-right .icon-btn { width: 40px; height: 40px; }
  .msg { padding: 1px 10px; column-gap: 8px; grid-template-columns: 32px minmax(0, 1fr); }
  .msg .msg-gutter .avatar { --s: 32px !important; }
  .bubble, .reactions, .msg-ref { max-width: 88%; }
  .msg:not(.own) .bubble, .msg:not(.own) .reactions, .msg:not(.own) .msg-ref { max-width: 94%; }
  .msg-tools, .msg:hover .msg-tools { display: none !important; }
  .reaction.add { display: none; }
  [data-density="compact"] .msg { padding: 1px 10px; grid-template-columns: 32px minmax(0, 1fr); }
  .composer-wrap { padding: 0 8px calc(8px + var(--safe-b)); }
  .chat-welcome { padding: 16px 14px 8px; }
  .chat-welcome h2 { font-size: 1.35em; }
  .attach-bar { padding: 14px 12px 8px; }
  .att-card { width: 120px; height: 120px; }
  #members:not([hidden]) { position: fixed; inset: 0; z-index: 70; width: auto; padding: calc(10px + var(--safe-t)) 12px calc(16px + var(--safe-b)); transform: translateX(100%); background: var(--panel-solid); top: 0; right: 0; bottom: 0; }
  #app.members-open #members { transform: none; }
  #app.members-open #scrim { display: none; }
  .mem-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 600; padding: 6px 4px 10px; }
  #members.dm-profile .mem-back { position: absolute; top: calc(10px + var(--safe-t)); left: 10px; z-index: 2; background: rgba(0, 0, 0, .4); color: #fff; border-radius: 999px; padding: 6px 12px; }
  .main-head .tabs { position: absolute; left: 0; right: 0; top: 100%; padding: 8px 12px; background: var(--panel-solid); border-bottom: 1px solid var(--line); }
  .home-wrap { margin-top: 48px; }
  .friends { padding: 12px 14px 16px; }
  .stage { padding: 8px; }
  .stage.grid, .stage.grid.n2 { grid-template-columns: minmax(0, 1fr); }
  .stage-strip .tile { width: 130px; }
  .call-stage { height: 46vh; }
  .stage-controls { gap: 10px; }
  .stage-controls .ctl { width: 52px; height: 52px; }
  #callLayer { left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); display: flex; justify-content: center; }
  .incoming { width: 100%; max-width: 360px; }
  .modal-back { padding: 0; place-items: end center; }
  .modal { width: 100% !important; max-height: 92dvh; border-radius: 26px 26px 0 0; transform: translateY(40px); }
  .modal::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--line-2); z-index: 1; }
  .modal.full::before, .modal.bare::before { display: none; }
  .modal-back.in .modal { transform: none; }
  .modal-head { padding-top: 26px; }
  .modal-body { padding: 16px 18px; }
  .modal-foot { padding: 12px 16px calc(14px + var(--safe-b)); }
  .modal-foot .btn { flex: 1; }
  .modal.full { border-radius: 0; transform: none; }
  .modal.bare { border-radius: 0; transform: none; }
  .modal-back:has(.modal.bare) { place-items: center; }
  .settings-page { display: flex; padding: 0; gap: 0; }
  .sp-side { flex: 1; border-radius: 0; box-shadow: none; background: var(--panel-solid); }
  .sp-nav { padding: calc(16px + var(--safe-t)) 14px calc(30px + var(--safe-b)); }
  .sp-hero { padding-top: 26px; }
  .sp-item { padding: 10px 10px; font-size: 1em; }
  .sp-chev { display: block; }
  .sp-item.active { background: none; }
  .sp-main { display: none; flex: 1; border-radius: 0; box-shadow: none; background: var(--panel-solid); }
  .settings-page.show-content .sp-side { display: none; }
  .settings-page.show-content .sp-main { display: flex; }
  .sp-content { padding: calc(12px + var(--safe-t)) 14px calc(40px + var(--safe-b)); }
  .sp-title { margin-bottom: 18px; }
  .sp-title h2 { font-size: 1.2em; }
  .sp-back { display: inline-flex; }
  .sp-close { top: calc(12px + var(--safe-t)); right: 12px; }
  .settings-page.show-content .sp-close { display: none; }
  .acc-hero { flex-direction: column; text-align: center; }
  .acc-hero .btn { width: 100%; }
  .profile-edit, .row2, .ow-wrap { grid-template-columns: minmax(0, 1fr); }
  .profile-preview { display: none; }
  .gm-head { display: none; }
  .gm-row { grid-template-columns: minmax(0, 1fr) auto; }
  .gm-row > :nth-child(2), .gm-row > :nth-child(3) { display: none; }
  .gm-row.two > :nth-child(2) { display: inline-flex; }
  .set-row { flex-wrap: wrap; }
  .set-row > select { min-width: 0; width: 100%; }
  .swatch-grid.big { grid-template-columns: repeat(4, 44px); }
  .swatch-grid { grid-template-columns: repeat(6, 28px); }
  .swatch { width: 28px; height: 28px; }
  .overview-row { flex-direction: column; align-items: center; }
  .save-bar { border-radius: 20px; bottom: calc(10px + var(--safe-b)); }
  .menu { border-radius: 20px; }
  .menu-item { min-height: 44px; font-size: .95em; }
  #toasts { bottom: calc(84px + var(--safe-b)); }
  .notif-offer { margin: 8px 10px 0; }
  .auth-card { padding: 28px 20px 22px; border-radius: 24px; }
  .profile-pop { width: min(340px, calc(100vw - 16px)); }
  .emoji-picker, .gif-picker { width: calc(100vw - 16px); }
}

@media (hover: none) {
  .msg-tools, .reaction.add { display: none !important; }
  .ch-actions { display: none !important; }
  .dm-close { display: none; }
}

/* ======================================================================
   Док разделов, дерево серверов, минималистичные страницы
   ====================================================================== */

#rail { justify-content: flex-start; gap: 6px; padding: 10px 0; }
.dock-logo { display: grid; place-items: center; width: 48px; height: 44px; margin-bottom: 10px; }
.dock-item { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: var(--text-3); transition: background .15s, color .15s; flex: none; }
.dock-item:hover { color: var(--text); background: var(--bg-hover); }
.dock-item.on { color: #fff; background: var(--grad); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.dock-item .badge { position: absolute; top: 2px; right: 0; box-shadow: 0 0 0 3px var(--bg-app); }
.dock-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--bg-app); }
.dock-item.on .dock-dot { display: none; }
.dock-item.add { color: var(--text-3); border: 1.5px dashed var(--line-2); }
.dock-item.add:hover { color: var(--green); border-color: var(--green); background: transparent; }
.dock-space { flex: 1; }
.dock-me { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; --ring-bg: var(--bg-app); margin-top: 4px; }
.dock-me:hover { background: var(--bg-hover); }

.side-head { gap: 8px; }
.side-title { flex: 1; min-width: 0; font-family: var(--display); font-size: 1.1em; padding-left: 6px; }
.side-tools { display: flex; gap: 2px; }
.side-cta { padding: 34px 16px; }
.side-cta p { margin: 0; }

.srv-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 8px; margin-bottom: 2px; border-radius: 14px; cursor: pointer; color: var(--text-2); }
.srv-row:hover { background: var(--bg-hover); color: var(--text); }
.srv-row.current { color: var(--text); }
.srv-row.open { background: var(--bg-input); border-radius: 14px 14px 0 0; margin-bottom: 0; }
.srv-row .gicon { border-radius: 11px; font-size: 12px; }
.srv-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-row.unread .srv-name { font-weight: 800; }
.srv-row.unread::before { content: ''; position: absolute; left: -6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--text); }
.srv-voice { color: var(--green); }
.srv-more { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--text-3); opacity: 0; }
.srv-row:hover .srv-more, .srv-row.open .srv-more { opacity: 1; }
.srv-more:hover { background: var(--bg-active); color: var(--text); }
.srv-row.drop { box-shadow: inset 0 2px 0 var(--accent); }
.srv-row.dragging { opacity: .4; }
.srv-channels { background: var(--bg-input); border-radius: 0 0 14px 14px; padding: 2px 6px 8px; margin-bottom: 8px; }
.srv-channels .cat-row { padding-top: 10px; }
.srv-channels .ch-row { height: 34px; }

/* страницы (друзья и т. п.): спокойная шапка без вкладок */
.page-head { min-height: 56px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 20px; }
.page-title { flex: 1; min-width: 0; font-family: var(--display); font-size: 1.25em; font-weight: 700; }
.icon-btn.accent { color: #fff; background: var(--grad); border-radius: 50%; width: 40px; height: 40px; }
.icon-btn.accent:hover { color: #fff; background: var(--grad); filter: brightness(1.1); }
.icon-btn.soft { background: var(--bg-input); border-radius: 50%; width: 38px; height: 38px; color: var(--text-2); }
.icon-btn.soft.green:hover { background: var(--green); color: #fff; }
.icon-btn.soft.red:hover { background: var(--red); color: #fff; }
.page-body { flex: 1; min-height: 0; padding: 4px 20px 24px; max-width: 760px; width: 100%; margin: 0 auto; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg-input); margin-bottom: 12px; }
.seg-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 10px; color: var(--text-3); font-weight: 600; font-size: .88em; white-space: nowrap; min-width: 0; }
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--bg-3); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
[data-theme="light"] .seg-btn.on { background: #fff; }
.page-search { margin-bottom: 8px; border-radius: 12px !important; }
.people { display: flex; flex-direction: column; }
.person { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 14px; cursor: pointer; }
.person:hover { background: var(--bg-hover); }
.person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.person-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-text small { color: var(--text-3); font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-actions { display: flex; gap: 6px; align-items: center; }
.quiet { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; color: var(--text-3); text-align: center; font-size: .92em; }
.quiet.big { flex: 1; align-content: center; gap: 14px; }
.quiet.big b { font-family: var(--display); color: var(--text); font-size: 1.05em; }
.page-link { display: inline-flex; align-items: center; gap: 4px; align-self: center; margin-top: 18px; color: var(--text-3); font-size: .84em; }
.page-link:hover { color: var(--text); }
.at-input { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 14px; border-radius: 14px; background: var(--bg-input); }
.at-input span { color: var(--text-3); font-weight: 700; }
.at-input input { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 2px !important; }
.add-msg { margin: 10px 2px 0; }

@media (max-width: 760px) {
  .page-head { padding: 0 8px 0 16px; }
  .page-body { padding: 4px 12px 20px; }
  .srv-row { padding: 9px 8px; }
  .srv-more { opacity: 1; }
  .srv-channels .ch-row { height: 44px; }
}

/* клавиатура открыта: убираем отступ под «домашнюю полоску» и даём больше места сообщениям */
@media (max-width: 760px) {
  .kb-open .composer-wrap { padding-bottom: 6px; }
  .kb-open #tabbar { display: none !important; }
  .kb-open .modal { max-height: calc(var(--vvh, 100dvh) - 10px); }
  .kb-open .modal-foot { padding-bottom: 12px; }
  .kb-open #toasts { bottom: 12px; }
}

/* меню на телефоне — «шторка» снизу */
.menu-back { position: fixed; top: 0; left: 0; right: 0; height: var(--vvh, 100dvh); z-index: 1000; background: rgba(4, 4, 10, .5); animation: fade .15s; }
.menu.sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; max-width: none; width: 100%; max-height: 75dvh; border-radius: 24px 24px 0 0; padding: 14px 10px calc(10px + var(--safe-b)); animation: sheet .25s var(--ease); }
.menu.sheet::before { content: ''; display: block; width: 40px; height: 5px; margin: -4px auto 10px; border-radius: 3px; background: var(--line-2); }
.menu.sheet .menu-item { min-height: 48px; font-size: 1em; }
.menu.sheet .has-sub .ic { transform: none; }

/* видеосообщения-«кружки» */
.composer.has-text .vn-btn { display: none; }
.vn { position: relative; width: 240px; height: 240px; border-radius: 50%; overflow: hidden; background: var(--bg-3); display: grid; place-items: center; cursor: pointer; margin-top: 2px; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.vn video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vn-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.vn-ring circle { fill: none; stroke-width: 3.2; }
.vn-ring-bg { stroke: transparent; }
.vn.playing .vn-ring-bg, .vn-rec .vn-ring-bg { stroke: rgba(255, 255, 255, .18); }
.vn-ring-fg { stroke: #fff; stroke-linecap: round; transition: stroke-dasharray .1s linear; }
.vn-rec .vn-ring-fg { stroke: var(--red); }
.vn-dur { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; font-size: .72em; font-weight: 700; }
.vn-sound { position: absolute; right: 18%; top: 12%; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; }
.vn.playing .vn-sound { display: none; }
.msg .bubble.media .vn + .b-meta, .bubble.media:has(.vn) .b-meta { right: 4px; bottom: 4px; }
.vn-modal .modal-body { padding-top: 28px; }
.vn-rec { display: grid; justify-items: center; gap: 14px; text-align: center; }
.vn-circle { position: relative; width: min(280px, 72vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #000; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.vn-circle video { width: 100%; height: 100%; object-fit: cover; }
.vn-time { display: flex; align-items: center; gap: 8px; font-size: 1.1em; font-variant-numeric: tabular-nums; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: breathe 1s ease-in-out infinite; }
.vn-rec .muted-text { margin: 0; }
@media (max-width: 760px) { .vn { width: 200px; height: 200px; } }

/* ======================================================================
   Звонки: сетка, которая всегда помещается; личный звонок на весь экран
   ====================================================================== */
.voice-stage { position: relative; }
.stage { padding: 12px 12px 92px; }
.stage.grid { display: grid; grid-template-columns: repeat(var(--cols, 1), var(--tw, 1fr)); grid-auto-rows: calc(var(--tw, 320px) * 9 / 16); gap: 8px; place-content: center; overflow: hidden; }
.stage.grid .tile { width: 100%; height: 100%; aspect-ratio: auto; }
.stage.focus { display: flex; flex-direction: column; gap: 8px; }
.stage.focus .stage-main { flex: 1; min-height: 0; display: flex; }
.stage.focus .stage-main .tile { flex: 1; aspect-ratio: auto; }
.stage.focus .stage-strip { display: flex; gap: 8px; overflow-x: auto; flex: none; height: 96px; justify-content: center; }
.stage.focus .stage-strip .tile { width: 170px; height: 96px; flex: none; aspect-ratio: auto; }
.tile .avatar { --s: clamp(48px, 30%, 96px) !important; }
.stage-controls { display: none; }
.call-bar { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 999px; background: rgba(18, 18, 26, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .08); z-index: 5; max-width: calc(100% - 24px); }
.call-bar .ctl { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.call-bar .ctl:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.call-bar .ctl.on { background: #fff; color: #111; }
.call-bar .ctl.off { background: rgba(255, 77, 94, .2); color: #ff8a95; }
.call-bar .ctl.hang { background: var(--red); }
.call-bar .ctl.hang:hover { background: var(--red-h); }
.call-bar .btn { min-height: 46px; padding: 0 22px; }

/* личный звонок */
#callStage.call-view { position: relative; flex: none; height: min(62%, 560px); display: flex; overflow: hidden; background: radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--peer) 40%, #0c0b12), #07070b 75%); border-bottom: 1px solid var(--line); --ring-bg: #0c0b12; }
.call-main { position: absolute; inset: 0; display: grid; place-items: center; }
.call-main video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.call-main video.contain { object-fit: contain; }
.call-person { display: grid; justify-items: center; gap: 12px; }
.call-person .avatar .av-img { box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.call-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent); color: #fff; z-index: 3; }
.call-top .call-min { color: #fff; background: rgba(255, 255, 255, .12); border-radius: 50%; }
.call-who { display: flex; flex-direction: column; min-width: 0; }
.call-who b { font-family: var(--display); font-size: 1.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-who small { display: flex; align-items: center; gap: 4px; opacity: .8; font-variant-numeric: tabular-nums; }
.call-pip { position: absolute; right: 14px; bottom: calc(92px + var(--safe-b)); width: 110px; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 255, 255, .15); z-index: 4; }
.call-pip video { width: 100%; height: 100%; object-fit: cover; }
#callStage.call-strip { flex: none; display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 6px 6px 6px 14px; border-radius: 16px; background: color-mix(in srgb, var(--green) 14%, var(--bg-input)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; animation: breathe 1.4s ease-in-out infinite; }
.cs-text { flex: 1; min-width: 0; text-align: left; font-size: .9em; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-text b { color: var(--text); }
#callStage .icon-btn.hang { color: #fff; background: var(--red); }
#callStage .icon-btn.off { color: var(--red); }

/* входящий звонок */
#callLayer { z-index: 950; }
.incoming { width: 300px; padding: 22px 20px 20px; border-radius: var(--r-xl); background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--peer) 40%, var(--bg-float)), var(--bg-float) 70%); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); display: grid; justify-items: center; gap: 18px; text-align: center; animation: rise .3s var(--ease); --ring-bg: var(--bg-float); }
.inc-who { display: grid; justify-items: center; gap: 6px; }
.inc-who .avatar { animation: ringpulse 1.4s ease-out infinite; border-radius: 34%; margin-bottom: 6px; }
.inc-who b { font-family: var(--display); font-size: 1.15em; }
.inc-who small { color: var(--text-3); }
.inc-actions { display: flex; gap: 18px; justify-content: center; margin: 0; }
.inc-btn { display: grid; justify-items: center; gap: 6px; color: var(--text-2); font-size: .74em; font-weight: 600; }
.inc-btn span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #fff; }
.inc-btn.red span { background: var(--red); }
.inc-btn.green span { background: var(--green); }
.inc-btn:hover span { filter: brightness(1.1); }

@media (max-width: 760px) {
  .stage { padding: 8px 8px 92px; }
  .stage.focus .stage-strip { height: 84px; }
  .stage.focus .stage-strip .tile { width: 120px; height: 84px; }
  .call-bar { gap: 8px; padding: 7px; }
  .call-bar .ctl { width: 50px; height: 50px; }
  /* развёрнутый звонок на телефоне — на весь экран поверх всего */
  #callStage.call-view { position: fixed; top: 0; left: 0; right: 0; height: var(--vvh, 100dvh); z-index: 700; border: 0; padding-top: var(--safe-t); }
  .call-top { padding-top: calc(12px + var(--safe-t)); }
  .call-pip { width: 96px; top: calc(70px + var(--safe-t)); bottom: auto; }
  #callStage.call-strip { margin: 6px 8px 0; }
  /* входящий звонок — отдельный экран */
  #callLayer { left: 0; right: 0; bottom: auto; top: 0; }
  #callLayer:empty { display: none; }
  .incoming { position: fixed; top: 0; left: 0; right: 0; width: auto; max-width: none; height: var(--vvh, 100dvh); border-radius: 0; padding: calc(80px + var(--safe-t)) 24px calc(50px + var(--safe-b)); align-content: space-between; background: radial-gradient(120% 70% at 50% 20%, color-mix(in srgb, var(--peer) 55%, #0c0b12), #07070b 80%); color: #fff; animation: fade .2s; }
  .inc-who b { font-size: 1.6em; }
  .inc-who small { color: rgba(255, 255, 255, .7); font-size: .95em; }
  .inc-actions { width: 100%; justify-content: space-around; }
  .inc-btn { color: rgba(255, 255, 255, .85); font-size: .8em; }
  .inc-btn span { width: 68px; height: 68px; }
}

/* ======================================================================
   Материал «Жидкое стекло»: яркая подложка, полупрозрачные панели
   с сильным размытием, светящаяся кромка и мягкие блики.
   Включается поверх любой темы: <html data-material="glass">.
   ====================================================================== */

[data-material="glass"] {
  --g-tint: rgba(18, 16, 30, .26);
  --g-tint-2: rgba(30, 28, 46, .4);
  --g-float: rgba(28, 26, 42, .58);
  --g-rim-a: rgba(255, 255, 255, .55);
  --g-rim-b: rgba(255, 255, 255, .06);
  --g-rim-c: rgba(255, 255, 255, .22);
  --g-hi: rgba(255, 255, 255, .16);
  --g-blur: blur(30px) saturate(1.9);
  --g-shadow: 0 10px 40px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .2);
  --bubble: rgba(255, 255, 255, .09);
  --bg-input: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .09);
  --panel-solid: #1b1a28;
  --bg-float: #1d1c2b;
  --scene:
    radial-gradient(38% 42% at 18% 22%, color-mix(in srgb, var(--accent) 85%, transparent), transparent 70%),
    radial-gradient(34% 38% at 82% 18%, rgba(40, 170, 255, .7), transparent 70%),
    radial-gradient(40% 44% at 78% 82%, rgba(255, 84, 160, .62), transparent 70%),
    radial-gradient(36% 40% at 22% 84%, rgba(255, 160, 50, .5), transparent 70%),
    radial-gradient(30% 30% at 52% 50%, rgba(80, 230, 200, .28), transparent 75%),
    #0b0a14;
}
[data-material="glass"][data-theme="midnight"] {
  --g-tint: rgba(6, 6, 12, .5); --g-tint-2: rgba(10, 10, 18, .6); --g-float: rgba(14, 14, 22, .7);
  --panel-solid: #0e0e16; --bg-float: #12121c;
  --scene:
    radial-gradient(40% 36% at 8% 6%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
    radial-gradient(36% 32% at 96% 12%, rgba(40, 170, 255, .3), transparent 70%),
    radial-gradient(42% 38% at 88% 96%, rgba(255, 94, 168, .28), transparent 70%),
    #000;
}
[data-material="glass"][data-theme="light"] {
  --g-tint: rgba(255, 255, 255, .26);
  --g-tint-2: rgba(255, 255, 255, .58);
  --g-float: rgba(255, 255, 255, .7);
  --g-rim-a: rgba(255, 255, 255, .95);
  --g-rim-b: rgba(255, 255, 255, .25);
  --g-rim-c: rgba(255, 255, 255, .7);
  --g-hi: rgba(255, 255, 255, .7);
  --g-shadow: 0 10px 36px rgba(60, 40, 140, .16), 0 1px 2px rgba(60, 40, 140, .08);
  --bubble: rgba(255, 255, 255, .62);
  --bg-input: rgba(255, 255, 255, .5);
  --line: rgba(30, 20, 80, .08);
  --panel-solid: #f3f1fa; --bg-float: #f7f6fc;
  --scene:
    radial-gradient(42% 38% at 8% 6%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(38% 34% at 96% 12%, rgba(40, 190, 255, .45), transparent 70%),
    radial-gradient(44% 40% at 88% 96%, rgba(255, 110, 180, .42), transparent 70%),
    radial-gradient(40% 36% at 14% 92%, rgba(255, 190, 80, .45), transparent 70%),
    #eeeaf8;
}

/* сцена позади всего */
[data-material="glass"] body { background: #0b0a14; }
[data-material="glass"][data-theme="light"] body { background: #eeeaf8; }
[data-material="glass"] body::before { inset: -10%; background: var(--scene); animation: lg-drift 40s ease-in-out infinite alternate; }
@keyframes lg-drift { 50% { transform: translate(3%, -2%) scale(1.06) rotate(2deg); } to { transform: translate(-2%, 3%) scale(1.03) rotate(-2deg); } }
[data-material="glass"][data-motion="reduce"] body::before { animation: none; }

/* общий рецепт стекла */
[data-material="glass"] :is(#side, #main, #members, .sp-side, .sp-main, .auth-card) {
  background: var(--g-tint); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-hi);
  border-radius: var(--r-xl);
}
[data-material="glass"] :is(.modal, .menu, .popover, .ac-box, .msg-tools, .toast, .save-bar, .pin-actions, .att-card-tools) {
  background: var(--g-float); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--g-hi);
}
[data-material="glass"] .ep-grid h5 { background: transparent; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* светящаяся кромка: градиентная рамка в 1px */
[data-material="glass"] :is(#side, #main, #members, .sp-side, .sp-main, .auth-card, .modal, .menu, .popover, .composer, .call-bar, .save-bar, .toast, .ac-box)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(155deg, var(--g-rim-a), var(--g-rim-b) 30%, transparent 55%, var(--g-rim-b) 75%, var(--g-rim-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-material="glass"] :is(#side, #members, .sp-side, .sp-main, .composer, .toast) { position: relative; }

/* шапки и разделители мягче */
[data-material="glass"] :is(.side-head, .main-head) { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--line); }

/* док */
[data-material="glass"] .rail-btn { background: var(--g-tint); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); box-shadow: inset 0 1px 0 var(--g-hi), inset 0 0 0 1px var(--line); }
[data-material="glass"] .dock-item:not(.on):not(.add):hover { background: var(--g-tint); box-shadow: inset 0 1px 0 var(--g-hi), inset 0 0 0 1px var(--line); }
[data-material="glass"] .dock-item.on { box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); }

/* поле ввода — парящая стеклянная капсула */
[data-material="glass"] .composer {
  background: var(--g-tint-2); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-hi); border-radius: 26px;
}
[data-material="glass"] .composer:focus-within { box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-hi), 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }

/* пузыри */
[data-material="glass"] .msg:not(.own) .bubble { box-shadow: inset 0 1px 0 var(--g-hi), inset 0 0 0 1px var(--line); }
[data-material="glass"] .msg.own .bubble { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .12); }
[data-material="glass"][data-density="compact"] .msg .bubble { box-shadow: none !important; }

/* кнопки */
[data-material="glass"] .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-material="glass"] .call-bar { background: rgba(20, 20, 30, .42); backdrop-filter: blur(30px) saturate(1.9); -webkit-backdrop-filter: blur(30px) saturate(1.9); box-shadow: 0 12px 34px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .2); }

/* полноэкранные окна (настройки) — на той же сцене */
[data-material="glass"] .modal-back:has(.modal.full) { background: transparent; }
[data-material="glass"] .modal-back:has(.modal.full)::before { content: ''; position: absolute; inset: -10%; background: var(--scene); z-index: -1; }
[data-material="glass"] .modal.full { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
[data-material="glass"] .modal.full::after { display: none; }
[data-material="glass"] .modal-back:not(:has(.modal.full)) { background: rgba(4, 4, 12, .35); }
[data-material="glass"] .sp-head { background: transparent; }

@media (max-width: 760px) {
  /* на телефоне экраны лежат прямо на сцене — без тяжёлого размытия */
  [data-material="glass"] :is(#side, #main) { background: var(--g-tint); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; box-shadow: none; }
  [data-material="glass"] :is(#side, #main)::after { display: none; }
  [data-material="glass"] #side, [data-material="glass"] #app.m-root #main { background: transparent; }
  [data-material="glass"] :is(.sp-side, .sp-main) { border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--g-tint); }
  [data-material="glass"] :is(.sp-side, .sp-main)::after { display: none; }
  [data-material="glass"] #members:not([hidden]) { background: var(--g-float); border-radius: 0; position: fixed; }
  [data-material="glass"] #members::after { display: none; }
  [data-material="glass"] .main-head .tabs { background: var(--g-float); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); }
  /* парящая панель вкладок */
  [data-material="glass"] #app.m-root #tabbar {
    margin: 0 12px calc(10px + var(--safe-b)); padding: 6px; border: 0; border-radius: 30px;
    background: var(--g-float); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
    box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-hi), inset 0 0 0 1px var(--line); position: relative; z-index: 6;
  }
  [data-material="glass"] .tb-item.on .tb-ic { background: color-mix(in srgb, var(--accent) 26%, transparent); box-shadow: inset 0 1px 0 var(--g-hi); }
  [data-material="glass"] .modal:not(.full) { background: var(--g-float); }
}

@media (min-width: 761px) {
  [data-material="glass"] .incoming { position: relative; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--peer) 40%, transparent), transparent 70%), var(--g-float); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--g-hi), inset 0 0 0 1px var(--line); }
}

/* выбор материала в настройках */
.material-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; }
.mat-opt { position: relative; display: grid; gap: 8px; padding: 8px 8px 10px; border-radius: 20px; background: var(--bg-input); color: var(--text-2); font-size: .85em; font-weight: 600; text-align: center; box-shadow: inset 0 0 0 1px var(--line); }
.mat-opt.on { box-shadow: 0 0 0 2px var(--accent); color: var(--text); }
.mat-opt i { position: relative; display: block; height: 74px; border-radius: 14px; overflow: hidden; background: #15141e; }
.mat-opt i b { position: absolute; left: 14%; right: 14%; top: 22%; bottom: 22%; border-radius: 12px; background: #23222f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.mat-opt.m-glass i { background:
  radial-gradient(60% 70% at 10% 10%, var(--accent), transparent 70%),
  radial-gradient(60% 70% at 95% 20%, #28aaff, transparent 70%),
  radial-gradient(60% 70% at 80% 100%, #ff5ea8, transparent 70%), #0b0a14; }
.mat-opt.m-glass i b { background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px) saturate(1.8); -webkit-backdrop-filter: blur(10px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 16px rgba(0, 0, 0, .25); }

/* ---------- шапка лички: «в сети» / «был(а) …» ---------- */
.head-ttl { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.15; }
.head-ttl .head-title { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.head-sub { font-size: .74em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-sub.on { color: var(--accent-text); }

/* ---------- статусы сообщений ---------- */
.b-st { display: inline-grid; place-items: center; margin-left: 1px; vertical-align: -3px; }
.b-st .ic { stroke-width: 2.2; }
.msg.own .b-st.sent { opacity: .55; }
.msg.own .b-st.dlv { opacity: 1; }
.msg.own .b-st.read { color: #bff3ff; opacity: 1; }
.msg.own .b-st.failed { color: #ffd0d4; }
[data-density="compact"] .b-st.read { color: var(--accent-text); }

/* ---------- счётчик непрочитанных в списке чатов ---------- */
.dm-row .badge { margin-left: auto; background: var(--accent); min-width: 22px; height: 22px; border-radius: 11px; font-size: .72em; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
@media (hover: none) { .dm-row:hover .badge { display: inline-grid; } .dm-row .dm-close { display: none; } }

/* ---------- плашка уведомления внутри приложения ---------- */
.inapp { position: fixed; z-index: 1200; left: 50%; top: calc(10px + var(--safe-t)); width: min(420px, calc(100vw - 20px)); transform: translate(-50%, -140%); display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 20px; text-align: left; color: var(--text);
  background: color-mix(in srgb, var(--bg-float) 82%, transparent); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); transition: transform .32s var(--ease); --ring-bg: var(--bg-float); }
.inapp.in { transform: translate(-50%, 0); }
.inapp-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.inapp-text b { font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inapp-text span { font-size: .85em; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* предложение включить уведомления — плавающая карточка */
body > .notif-offer { position: fixed; z-index: 900; left: 0; right: 0; bottom: calc(96px + var(--safe-b)); width: min(460px, calc(100vw - 20px)); margin: 0 auto; flex-wrap: nowrap; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 20px; font-size: .88em; box-shadow: var(--shadow-lg); }
body > .notif-offer > span { flex: 1; min-width: 0; }
@media (min-width: 761px) { body > .notif-offer { bottom: auto; top: 72px; } }

/* ---------- «Жидкое стекло», вариант 2: спокойный фон как в iOS 26 ----------
   Фон почти однотонный с мягким свечением акцента сверху; стеклянными остаются
   «плавающие» элементы: панель вкладок, поле ввода, меню, окна, звонок. */
[data-material="glass"] {
  --text-2: rgba(235, 235, 245, .84); --text-3: rgba(235, 235, 245, .62); --text-4: rgba(235, 235, 245, .46);
  --scene:
    radial-gradient(140% 55% at 50% -12%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 64%),
    radial-gradient(70% 45% at 105% 105%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    linear-gradient(180deg, #0e0d16 0%, #08080c 55%, #050507 100%);
}
[data-material="glass"][data-theme="midnight"] {
  --scene: radial-gradient(140% 50% at 50% -14%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%), #000;
}
[data-material="glass"][data-theme="light"] {
  --text-2: rgba(30, 30, 40, .86); --text-3: rgba(60, 60, 67, .64); --text-4: rgba(60, 60, 67, .5);
  --scene:
    radial-gradient(140% 55% at 50% -12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 64%),
    radial-gradient(70% 45% at 105% 105%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(180deg, #f6f5fb, #efeff4);
}
[data-material="glass"] body::before { animation: none; inset: 0; }
[data-material="glass"] .cat-row, [data-material="glass"] .cat-name { color: var(--text-3); }
[data-material="glass"] .ch-row { color: var(--text-2); }

.audio-unlock { position: fixed; z-index: 1300; left: 0; right: 0; margin: 0 auto; top: calc(16px + var(--safe-t)); width: max-content; max-width: calc(100vw - 24px); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 700; box-shadow: var(--shadow-lg); animation: rise .25s var(--ease); }

/* ====================== список чатов ====================== */
.dm-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin: 2px 2px 10px; border-radius: 14px; background: var(--bg-input); color: var(--text-3); }
.dm-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--text); }
.dm-search input::-webkit-search-cancel-button { display: none; }
.online-strip { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; margin: 0 -10px 8px; padding: 2px 10px 6px; scrollbar-width: none; }
.online-strip::-webkit-scrollbar { display: none; }
.os-item { flex: none; display: grid; justify-items: center; gap: 5px; width: 64px; color: var(--text-2); font-size: .72em; font-weight: 600; }
.os-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-item .avatar { --ring-bg: var(--panel-solid); }
.dm-sec { padding: 12px 8px 6px; font-size: .74em; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); }
#side:not(.split) .dm-row { gap: 12px; padding: 8px 10px; border-radius: 16px; }
.dm-row .dm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-top, .dm-bottom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dm-top .dm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); }
.dm-time { flex: none; font-size: .74em; color: var(--text-4); font-variant-numeric: tabular-nums; }
.dm-row.unread .dm-time { color: var(--accent-text); }
.dm-top .b-st { color: var(--text-4); opacity: 1; }
.dm-top .b-st.read { color: var(--accent-text); }
.dm-bottom .dm-sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84em; color: var(--text-3); display: block; }
.dm-row.unread .dm-sub { color: var(--text-2); }
.dm-sub.live { color: var(--accent-text); display: flex; align-items: center; gap: 6px; }
.dm-sub.missed { color: var(--red); }
.dm-you { color: var(--text-2); }
.dm-sub .dots { display: inline-flex; gap: 2px; }
.dm-sub .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite; }
.dm-sub .dots i:nth-child(2) { animation-delay: .2s; }
.dm-sub .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.dm-bottom .badge { margin-left: auto; }
.dm-row .dm-close { position: absolute; right: 6px; top: 6px; opacity: 0; }
.dm-row:hover .dm-close { opacity: 1; }
.dm-row:hover .badge { display: inline-grid; }
.side-cta .ic { color: var(--text-4); }

/* ====================== серверы: колонка значков + выбранный сервер ====================== */
#side.split #sideHead { display: none; }
#side.split #sideBody { display: flex; padding: 0; overflow: hidden; }
.srv-rail-wrap { flex: none; width: 72px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; border-right: 1px solid var(--line); }
.srv-rail-wrap::-webkit-scrollbar { display: none; }
.srv-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 16px; }
.srv-ic { position: relative; display: grid; place-items: center; width: 72px; flex: none; }
.srv-ic .gicon { border-radius: 50%; transition: border-radius .2s var(--ease), transform .15s; font-size: 14px; }
.srv-ic:hover .gicon, .srv-ic.on .gicon { border-radius: 16px; }
.srv-ic:active .gicon { transform: scale(.94); }
.srv-pill { position: absolute; left: 0; top: 50%; width: 4px; height: 0; margin-top: 0; border-radius: 0 4px 4px 0; background: var(--text); transition: height .2s var(--ease), margin-top .2s var(--ease); }
.srv-ic.unread .srv-pill { height: 8px; margin-top: -4px; }
.srv-ic:hover .srv-pill { height: 20px; margin-top: -10px; }
.srv-ic.on .srv-pill { height: 40px; margin-top: -20px; background: var(--accent); }
.srv-ic.on .gicon { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.srv-ic .badge { position: absolute; right: 8px; bottom: -2px; box-shadow: 0 0 0 3px var(--panel-solid); }
.srv-live { position: absolute; right: 9px; bottom: -1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-3); color: var(--green); box-shadow: 0 0 0 3px var(--panel-solid); }
.srv-live.me { background: var(--green); color: #fff; }
.srv-ic.add { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-input); color: var(--green); transition: border-radius .2s, background .2s, color .2s; }
.srv-ic.add:hover { border-radius: 16px; background: var(--green); color: #fff; }
.srv-sep { width: 32px; height: 2px; border-radius: 1px; background: var(--line-2); flex: none; }
.srv-ic.drop .gicon { box-shadow: 0 0 0 2px var(--accent); }
.srv-ic.dragging { opacity: .4; }
.srv-pane { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
.srv-hero { position: relative; margin: 8px 8px 4px; border-radius: 20px; overflow: hidden; isolation: isolate; background: color-mix(in srgb, var(--hue) 22%, var(--bg-2)); }
.srv-hero-bg { position: absolute; inset: -30px; z-index: -1; background: radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--hue) 70%, transparent), transparent 70%), radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%); background-size: cover; background-position: center; filter: blur(26px) saturate(1.4); opacity: .75; }
.srv-hero-in { display: grid; justify-items: start; gap: 8px; padding: 16px 14px 14px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--panel-solid) 55%, transparent)); --ring-bg: var(--panel-solid); }
.srv-hero .gicon { border-radius: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25), 0 0 0 3px color-mix(in srgb, #fff 18%, transparent); }
.srv-title { display: flex; align-items: center; gap: 4px; max-width: 100%; font-family: var(--display); font-size: 1.12em; font-weight: 700; color: var(--text); text-align: left; }
.srv-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78em; color: var(--text-2); font-weight: 600; }
.srv-stats span { display: inline-flex; align-items: center; gap: 5px; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-4); }
.st-dot.on { background: var(--green); }
.srv-desc { margin: 0; font-size: .82em; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srv-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; width: 100%; margin-top: 4px; }
.srv-act { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 14px; background: color-mix(in srgb, var(--panel-solid) 55%, transparent); color: var(--text); font-size: .72em; font-weight: 700; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.srv-act:hover { background: color-mix(in srgb, var(--panel-solid) 75%, transparent); }
.srv-chs { padding: 4px 8px 16px; }
@media (max-width: 760px) {
  .srv-rail-wrap { width: 76px; }
  .srv-ic { width: 76px; }
  .srv-chs .ch-row { height: 44px; }
  .srv-pane { padding-bottom: 8px; }
}
[data-material="glass"] .srv-hero { background: color-mix(in srgb, var(--hue) 18%, transparent); }
[data-material="glass"] .srv-rail-wrap { border-right-color: var(--line); }

.dm-search input, .dm-search input:focus { background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0; }
.dm-sub-ic { vertical-align: -1px; margin-right: 4px; }

/* ====================== серверы: капсулы, карточка, комнаты ====================== */
.srv-chips { position: sticky; top: -10px; z-index: 3; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; margin: -10px -10px 0; padding: 10px 10px 10px; scrollbar-width: none; background: linear-gradient(var(--panel-solid) 75%, transparent); }
[data-material="glass"] .srv-chips { background: transparent; }
.srv-chips::-webkit-scrollbar { display: none; }
.srv-chip { position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 42px; max-width: 180px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--bg-input); color: var(--text-2); font-weight: 700; font-size: .86em; box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s, transform .15s; }
.srv-chip:active { transform: scale(.97); }
.srv-chip .gicon { border-radius: 50%; font-size: 11px; flex: none; }
.chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-chip.on { background: var(--grad); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.srv-chip.unread:not(.on) { color: var(--text); }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.srv-chip.on .chip-dot { background: #fff; }
.chip-live { display: grid; place-items: center; color: var(--green); }
.srv-chip.on .chip-live { color: #fff; }
.srv-chip .badge { margin-left: 2px; }
.srv-chip.add { width: 42px; padding: 0; justify-content: center; color: var(--green); background: transparent; box-shadow: inset 0 0 0 1.5px dashed var(--line-2); border: 1.5px dashed var(--line-2); }
.srv-chip.add:hover { color: #fff; background: var(--green); border-color: var(--green); }
.srv-chip.drop { box-shadow: 0 0 0 2px var(--accent); }
.srv-chip.dragging { opacity: .4; }
#side:not(.split) .srv-hero { margin: 4px 0 6px; }
.srv-sec { margin-top: 12px; }
.sec-head { display: flex; align-items: center; gap: 4px; padding: 0 4px 6px 6px; }
.sec-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: .74em; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); text-align: left; }
.sec-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-title small { font-size: .95em; font-weight: 700; color: var(--text-4); }
.sec-chev { margin-left: auto; transition: transform .2s; color: var(--text-4); }
.srv-sec.closed .sec-chev { transform: rotate(-90deg); }
.sec-head .icon-btn { opacity: .7; }
.sec-head.drop { box-shadow: inset 0 -2px 0 var(--accent); }
.sec-card { padding: 4px; border-radius: 18px; background: var(--bg-input); box-shadow: inset 0 0 0 1px var(--line); }
.sec-card .ch-row { border-radius: 13px; }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.room { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; background: var(--bg-input); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; min-width: 0; transition: transform .15s, box-shadow .2s; }
.room:active { transform: scale(.98); }
.room.live { background: linear-gradient(160deg, color-mix(in srgb, var(--green) 16%, transparent), transparent 70%), var(--bg-input); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent); }
.room.here { box-shadow: inset 0 0 0 2px var(--green); }
.room.active:not(.here) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.room.drop { box-shadow: inset 0 0 0 2px var(--accent); }
.room-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.room-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: var(--bg-active); color: var(--text-2); flex: none; }
.room.live .room-ic { background: var(--green); color: #fff; }
.room-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92em; }
.room-gear { opacity: .6; }
.room-people { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 30px; }
.room-face { position: relative; border-radius: 50%; --ring-bg: var(--bg-2); }
.room-face.speaking .avatar { box-shadow: 0 0 0 2px var(--green); border-radius: 50%; }
.room-muted { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 0 0 2px var(--bg-2); }
.room-more { font-size: .75em; font-weight: 800; color: var(--text-3); padding-left: 2px; }
.room-empty { color: var(--text-4); font-size: .8em; min-height: 30px; display: flex; align-items: center; }
.room-join { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--bg-active); font-size: .76em; font-weight: 800; color: var(--text-2); }
.room.live .room-join { background: var(--green); color: #fff; }
.room.here .room-join { background: transparent; color: var(--green); padding-left: 0; }
@media (max-width: 760px) {
  .srv-chips { top: -8px; margin: -8px -12px 0; padding: 8px 12px 10px; }
  .sec-card .ch-row { height: 46px; }
}
.row-btns.wrap { flex-wrap: wrap; gap: 8px; }
.row-btns .btn .ic { margin-right: 4px; }
@media (max-width: 760px) {
  .call-bar { gap: 6px; padding: 6px; }
  .call-bar .ctl { width: 48px; height: 48px; }
}

/* ====================== два вида: телефон и компьютер ====================== */
/* компьютер: колонка «Главная» + серверы */
#rail .srv-ic { width: var(--rail-w); }
#rail .srv-ic .badge { right: 6px; box-shadow: 0 0 0 3px var(--bg-app); }
#rail .srv-live { right: 7px; box-shadow: 0 0 0 3px var(--bg-app); }
#rail .srv-pill { background: var(--text); }
#rail .srv-ic.on .srv-pill { background: var(--text); }
.srv-ic.home .home-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-input); transition: border-radius .2s var(--ease), background .2s; }
.srv-ic.home:hover .home-ic, .srv-ic.home.on .home-ic { border-radius: 16px; background: var(--grad); }
#rail .srv-ic.add { width: 48px; }
#rail .srv-sep { margin: 2px 0; }
.guild-head { gap: 6px; }
.gh-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 1.02em; color: var(--text); text-align: left; }
.gh-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-chs { padding: 2px 0 10px; }
#side .srv-hero { margin: 2px 0 8px; }
.dm-row.compact { gap: 10px; padding: 6px 8px; border-radius: 12px; }
.dm-row.compact .dm-sub { font-size: .8em; }
.dm-row.compact .dm-top .dm-name { font-weight: 600; }

/* телефон: папки чатов */
.folders { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
.folders::-webkit-scrollbar { display: none; }
.folder { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--bg-input); color: var(--text-2); font-weight: 700; font-size: .86em; }
.folder.on { background: var(--grad); color: #fff; }
.f-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--accent); color: #fff; font-size: .74em; font-weight: 800; }
.folder.on .f-count { background: #fff; color: var(--accent); }

/* канал сервера в общем списке */
.ch-pic { position: relative; flex: none; display: grid; }
.ch-pic .gicon { border-radius: 50%; font-size: 15px; }
.ch-pic-hash { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-3); color: var(--text-2); box-shadow: 0 0 0 2px var(--panel-solid); }
.dm-srv { font-weight: 500; color: var(--text-4); font-size: .86em; }
.dm-muted { color: var(--text-4); flex: none; }
.badge.muted { background: var(--bg-4) !important; color: var(--text-2); box-shadow: none !important; }
.badge.mention { background: var(--accent) !important; }
.dm-bottom .badge + .badge { margin-left: 4px; }

/* телефон: звонки */
.call-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; cursor: pointer; }
.call-row:hover { background: var(--bg-hover); }
.call-row .dm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.call-row .dm-name { font-weight: 700; color: var(--text); }
.call-row.missed .dm-name { color: var(--red); }
.call-row .dm-sub { display: flex; align-items: center; gap: 4px; font-size: .82em; }
.call-dir { color: var(--green); }
.call-row.missed .call-dir { color: var(--red); }
.call-cb { color: var(--accent-text); }
.call-row.live { background: color-mix(in srgb, var(--green) 10%, transparent); }

/* проверка собеседника */
.trust-ok { display: inline-grid; place-items: center; margin-left: 6px; color: var(--green); vertical-align: -2px; }
.trust-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 8px 12px 0; border-radius: 14px; background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--text); font-size: .85em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 35%, transparent); flex: none; }
.trust-bar > .ic { color: var(--red); }
.trust-bar span { flex: 1; min-width: 0; }
.safety-ok { display: flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; margin: 8px 0 0; }

/* ====================== вход и регистрация: компьютер и телефон ====================== */
#auth { display: block; padding: 0; overflow: hidden auto; background: #0b0a12; }
#auth .auth-bg { background:
  radial-gradient(60% 55% at 15% 20%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
  radial-gradient(50% 50% at 85% 85%, rgba(255, 120, 170, .28), transparent 70%),
  radial-gradient(45% 45% at 80% 15%, rgba(60, 170, 255, .22), transparent 70%),
  linear-gradient(160deg, #13112a 0%, #0b0a12 60%); }
#auth .auth-bg i { opacity: .35; }
.auth-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 85%); }
#auth[data-theme-light] .auth-bg { filter: none; }
.auth-welcome { display: none; }
.auth-shell { position: relative; z-index: 1; min-height: var(--vvh, 100dvh); display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
#auth .auth-card {
  display: flex; flex-direction: column; width: 100%; max-width: 480px; padding: 32px; border-radius: 20px;
  background: #17161f; color: #f2f1f7; box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06); backdrop-filter: none; -webkit-backdrop-filter: none; animation: pop .35s var(--ease);
  --text: #f2f1f7; --text-2: #c2c1cf; --text-3: #9b9aad; --bg-input: #0d0c14; --line: rgba(255, 255, 255, .07);
}
#auth .auth-top { display: none; }
#auth .auth-logo { margin-bottom: 10px; }
#auth .auth-card h1 { font-size: 1.55em; margin-bottom: 6px; }
.auth-sub { text-align: center; color: var(--text-3); margin: 0 0 22px; }
#auth .field > span { font-size: .72em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
#auth .field em { font-style: italic; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--red); }
.req { color: var(--red); font-style: normal; }
#auth .field input { height: 46px; background: var(--bg-input); border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); color: var(--text); font-size: 1em; }
#auth .field input:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); outline: none; }
#auth .field.bad input { box-shadow: inset 0 0 0 1.5px var(--red); }
#auth .pw-meter { margin: -6px 0 14px; }
.auth-note { margin: -4px 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--yellow) 12%, transparent); color: #f5d98a; font-size: .8em; line-height: 1.35; }
#auth .auth-error { text-align: left; }
#auth #authBtn { height: 46px; border-radius: 10px; font-size: 1em; }
#auth .auth-switch { text-align: left; margin-top: 12px; font-size: .88em; color: var(--text-3); }
#auth .auth-switch .linkish { color: #8fb4ff; font-weight: 600; }
#auth .auth-dl { border-top-color: var(--line); }

/* компьютер: вход — две колонки, как привычно; регистрация — одна */
.auth-side { display: none; }
@media (min-width: 761px) {
  #auth[data-mode="login"] .auth-pair > .auth-card { max-width: 500px; border-radius: 20px 0 0 20px; }
  #auth[data-mode="login"] .auth-side {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 300px;
    padding: 32px 28px; border-radius: 0 20px 20px 0; text-align: center; color: #f2f1f7;
    background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 40%, #17161f), #17161f 75%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 1px 0 0 rgba(255, 255, 255, .06); animation: pop .35s var(--ease);
  }
  .auth-pair { display: flex; align-items: stretch; width: 100%; justify-content: center; }
  #auth[data-mode="login"] .auth-card .auth-logo { display: none; }
  #auth[data-mode="login"] .auth-card h1, #auth[data-mode="login"] .auth-sub { text-align: center; }
  .as-art { position: relative; display: grid; place-items: center; width: 168px; height: 168px; margin-bottom: 10px; border-radius: 40px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
  .as-glow { position: absolute; inset: 20%; border-radius: 50%; background: var(--accent); filter: blur(40px); opacity: .55; animation: breathe 4s ease-in-out infinite; }
  .as-art svg { position: relative; }
  .as-lock { position: absolute; right: -8px; bottom: -8px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(43, 199, 122, .4); }
  .auth-side h2 { font-family: var(--display); font-size: 1.15em; }
  .auth-side p { margin: 0; color: #b9b8c9; font-size: .88em; line-height: 1.45; }
}

/* телефон: приветствие и отдельные экраны входа/регистрации */
@media (max-width: 760px) {
  #auth .auth-bg i { display: none; }
  #auth[data-step="welcome"] .auth-shell { display: none; }
  #auth[data-step="welcome"] .auth-welcome {
    position: relative; z-index: 1; display: flex; flex-direction: column; min-height: var(--vvh, 100dvh);
    padding: calc(20px + var(--safe-t)) 24px calc(20px + var(--safe-b)); text-align: center; animation: fade .3s;
  }
  .aw-art { position: relative; flex: 1; display: grid; place-items: center; min-height: 280px; }
  .aw-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); transform: translate(-50%, -50%); }
  .aw-ring.r1 { width: 170px; height: 170px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%); }
  .aw-ring.r2 { width: 250px; height: 250px; }
  .aw-ring.r3 { width: 330px; height: 330px; border-color: rgba(255, 255, 255, .05); }
  .aw-logo { position: relative; filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--accent) 60%, transparent)); animation: breathe 3.5s ease-in-out infinite; }
  .aw-bubble { position: absolute; display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .09); color: #fff; font-size: .8em; font-weight: 700; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); animation: floaty 5s ease-in-out infinite; }
  .aw-bubble.b1 { left: 4%; top: 22%; border-bottom-left-radius: 4px; }
  .aw-bubble.b2 { right: 2%; top: 40%; background: var(--grad); border-bottom-right-radius: 4px; animation-delay: -1.6s; }
  .aw-bubble.b3 { left: 12%; bottom: 16%; border-bottom-left-radius: 4px; animation-delay: -3.2s; }
  .aw-text h1 { font-family: var(--display); font-size: 1.6em; line-height: 1.15; color: #fff; margin-bottom: 10px; }
  .aw-text p { margin: 0 auto; max-width: 300px; color: #b9b8c9; }
  .aw-btns { display: grid; gap: 10px; margin-top: 28px; }
  .aw-btns .btn { height: 52px; border-radius: 14px; font-size: 1.02em; }
  .aw-login { background: rgba(255, 255, 255, .1); color: #fff; }
  .aw-login:hover { background: rgba(255, 255, 255, .16); }

  #auth .auth-shell { display: block; padding: 0; min-height: var(--vvh, 100dvh); }
  #auth .auth-card { max-width: none; min-height: var(--vvh, 100dvh); border-radius: 0; padding: calc(8px + var(--safe-t)) 20px calc(24px + var(--safe-b)); background: transparent; box-shadow: none; animation: rise .3s var(--ease); }
  #auth .auth-top { display: flex; height: 48px; align-items: center; margin: 0 -8px 8px; }
  .auth-back { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; }
  .auth-back:active { background: rgba(255, 255, 255, .1); }
  #auth .auth-logo { display: none; }
  #auth .auth-card h1 { font-size: 1.7em; }
  #auth #authBtn { height: 52px; border-radius: 14px; margin-top: 4px; }
  #auth .auth-switch { text-align: center; }
  #auth .auth-dl { display: none; }
}
@keyframes floaty { 50% { transform: translateY(-8px); } }

@media (max-width: 760px) { .auth-pair { display: block; } }

/* ====================== сообщения как в Telegram ====================== */
/* цитата ответа внутри пузыря */
.bubble .msg-ref { grid-column: auto; justify-self: stretch; display: flex; flex-direction: column; align-items: stretch; gap: 1px; max-width: none !important; margin: 2px 0 6px; padding: 5px 10px 6px; border: 0; border-radius: 8px;
  background: color-mix(in srgb, var(--ref, var(--accent)) 14%, transparent); box-shadow: inset 3px 0 0 var(--ref, var(--accent)); font-size: .86em; cursor: pointer; min-width: 0; }
.bubble .msg-ref .ref-name { font-weight: 700; color: var(--ref, var(--accent-text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble .msg-ref .ref-text { color: var(--text-2); }
.msg.own .bubble .msg-ref { background: rgba(255, 255, 255, .16); box-shadow: inset 3px 0 0 rgba(255, 255, 255, .9); }
.msg.own .bubble .msg-ref .ref-name, .msg.own .bubble .msg-ref .ref-text { color: #fff; }
.msg.own .bubble .msg-ref .ref-text { opacity: .85; }
.bubble .msg-ref.deleted { flex-direction: row; align-items: center; gap: 6px; font-style: italic; color: var(--text-3); }
.bubble.media .msg-ref { margin: 6px 6px 6px; }
[data-density="compact"] .bubble .msg-ref { max-width: 520px !important; }
/* «Переслано от …» */
.fwd { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; font-size: .8em; color: var(--accent-text); }
.msg.own .fwd { color: rgba(255, 255, 255, .85); }
.fwd b { font-weight: 700; }
/* хвостики у последнего пузыря в группе */
.msg:not(.own).end .bubble { border-bottom-left-radius: 4px; }
.msg.own.end .bubble { border-bottom-right-radius: 4px; }
/* свайп для ответа */
.msg { position: relative; }
.msg.swiping::after { content: ''; position: absolute; right: 14px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; opacity: var(--sw, 0); transform: scale(calc(.6 + var(--sw, 0) * .4));
  background: var(--bg-active) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E") center / 16px no-repeat; pointer-events: none; }
.msg.react-pop .bubble { animation: reactpop .35s var(--ease); }
@keyframes reactpop { 40% { transform: scale(1.04); } }
/* даты прилипают к верху при прокрутке */
.day-div { position: sticky; top: 6px; z-index: 2; }
.day-div span { background: color-mix(in srgb, var(--bg-2) 80%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text-2); }
/* кнопка «вниз» */
.chat-col { position: relative; }
.jump-present { position: absolute; right: 14px; bottom: 86px; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 50%; background: var(--bg-float); color: var(--text-2); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); justify-content: center; }
.jump-present > .ic { transform: rotate(0deg); }
.jp-count:empty { display: none; }
.jp-count { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
/* пересылка */
.fw-search { width: 100%; height: 42px; margin-bottom: 8px; }
.fw-list { max-height: min(420px, 60dvh); display: grid; gap: 2px; }
.fw-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; text-align: left; color: var(--text); }
.fw-row:hover { background: var(--bg-hover); }
.fw-row .gicon { border-radius: 50%; }
.fw-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; overflow: hidden; }
.fw-name small { color: var(--text-3); font-weight: 500; }
.fw-row > .ic { color: var(--accent-text); }
.menu-reacts { justify-content: space-between; }

/* видео не может распереть вёрстку: всегда по размеру своего блока */
.call-main video, .call-pip video { position: absolute; inset: 0; width: 100%; height: 100%; }
.call-pip { contain: strict; }
.vn { flex: none; aspect-ratio: 1; height: auto; clip-path: circle(50% at 50% 50%); contain: layout paint; isolation: isolate; }
.vn video { position: absolute; inset: 0; width: 100%; height: 100%; }
.vn-ring-fg[stroke-dasharray^="0 "] { opacity: 0; }
.vn.playing { width: min(300px, 78vw); transition: width .25s var(--ease); }
.vn { transition: width .25s var(--ease); }
.vn-circle { clip-path: circle(50% at 50% 50%); }
.vn-circle video { position: absolute; inset: 0; width: 100%; height: 100%; }
.msg .bubble .msg-ref, .msg.own .bubble .msg-ref { justify-self: stretch; align-self: stretch; grid-column: auto; }

/* GIF и эмодзи на телефоне — панель снизу, как в Telegram; список всегда прокручивается */
.gif-wrap { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.emoji-picker > * { min-height: 0; }
@media (max-width: 760px) {
  .popover:has(.gif-picker), .popover:has(.emoji-picker) { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-width: none !important; border-radius: 22px 22px 0 0; padding-bottom: var(--safe-b); animation: sheet .25s var(--ease); }
  .gif-picker, .emoji-picker { width: 100% !important; height: min(68dvh, 540px) !important; }
}

/* кружок: без чёрной рамки на iPhone — скругляем само видео, фон прозрачный */
.vn { background: transparent; transition: none; }
.vn video { border-radius: 50%; background: transparent; -webkit-mask-image: -webkit-radial-gradient(white, black); transform: translateZ(0); }
.vn.playing { transition: none; }
.vn .spin { margin: auto; }

/* своя камера на весь экран, пока собеседник без видео */
.call-top .avatar { flex: none; }

.composer.has-files .send-btn { display: grid; }
.composer.has-files .vn-btn { display: none; }

/* ====================== телефон: чат как в Telegram, но в цветах Drippy ====================== */
.comp-field { flex: 1; display: flex; align-items: flex-end; min-width: 0; }
.comp-main { display: flex; align-items: flex-end; }
:root { --tg-glass: color-mix(in srgb, var(--bg-float) 74%, transparent); --tg-line: rgba(255, 255, 255, .09); }
[data-theme="light"] { --tg-glass: rgba(255, 255, 255, .78); --tg-line: rgba(20, 16, 50, .07); }
.tg-glass, .tg-pill { background: var(--tg-glass); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 0 0 1px var(--tg-line), 0 6px 20px rgba(0, 0, 0, .16); }

@media (max-width: 760px) {
  /* обои: перелив цветов Drippy + узор из «капель» */
  .chat-col {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.4'%3E%3Ccircle cx='14' cy='16' r='5'/%3E%3Ccircle cx='20' cy='16' r='5'/%3E%3Ccircle cx='50' cy='52' r='5'/%3E%3Ccircle cx='56' cy='52' r='5'/%3E%3Cpath d='M48 14c2 3 6 3 8 0M14 50c2 3 6 3 8 0'/%3E%3C/svg%3E"),
      radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 60%),
      radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, #ff6f91 30%, transparent), transparent 60%),
      radial-gradient(70% 50% at 100% 20%, color-mix(in srgb, #2aa7ff 20%, transparent), transparent 60%),
      var(--bg-app);
    background-size: 72px 72px, 160% 160%, 160% 160%, 160% 160%, auto;
    animation: tg-wall 26s ease-in-out infinite alternate;
  }
  [data-theme="light"] .chat-col { background-color: #efeaf7; }
  @keyframes tg-wall { to { background-position: 0 0, 30% 20%, 70% 80%, 20% 60%, 0 0; } }
  [data-motion="reduce"] .chat-col { animation: none; }

  /* плавающая шапка */
  #main { --head-h: 64px; }
  .main-head.tg-head { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: block; min-height: 0; padding: calc(6px + var(--safe-t)) 10px 6px; border: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-app) 55%, transparent), transparent); box-shadow: none !important; pointer-events: none; }
  #main:has(.tg-head) { padding-top: 0 !important; }
  .tg-head > * { pointer-events: auto; }
  .tg-row { display: flex; align-items: center; gap: 8px; }
  .tg-pill { display: flex; align-items: center; height: 46px; border-radius: 23px; color: var(--text); }
  .tg-back { gap: 2px; padding: 0 12px 0 8px; flex: none; }
  .tg-count { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; display: grid; place-items: center; background: var(--text); color: var(--bg-app); font-size: .78em; font-weight: 800; }
  .tg-title { flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 1px; padding: 0 14px; text-align: center; }
  .tg-title b { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; font-size: .98em; }
  .tg-title b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tg-title .head-sub { font-size: .74em; max-width: 100%; }
  .tg-muted { color: var(--text-4); }
  .tg-right { display: flex; align-items: center; gap: 6px; flex: none; }
  .tg-round { width: 46px; padding: 0; justify-content: center; color: var(--text); }
  .tg-ava { border-radius: 50%; display: grid; place-items: center; flex: none; --ring-bg: transparent; }
  .tg-ava .avatar, .tg-ava .gicon { border-radius: 50%; box-shadow: 0 0 0 1px var(--tg-line), 0 6px 20px rgba(0, 0, 0, .18); }
  .tg-ava .status-dot { display: none; }
  .tg-bars { display: grid; gap: 6px; margin-top: 6px; }
  .tg-bars:empty { display: none; }
  .tg-bars .trust-bar { margin: 0; }
  .tg-pinbar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px 4px 12px; border-radius: 24px; }
  .pb-marks { display: flex; flex-direction: column; gap: 2px; align-self: stretch; justify-content: center; }
  .pb-marks i { width: 3px; flex: 1; max-height: 12px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
  .pb-marks i.on { background: var(--accent); }
  .pb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; color: var(--text); }
  .pb-text b { font-size: .86em; color: var(--accent-text); }
  .pb-text span { font-size: .84em; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pb-all { color: var(--text-2); }
  #msgScroll { padding-top: calc(var(--head-h) + 4px); scroll-padding-top: calc(var(--head-h) + 8px); }
  #callStage.call-strip { position: absolute; left: 10px; right: 10px; top: calc(var(--head-h) + 2px); z-index: 5; border-radius: 22px; }
  .day-div { top: calc(var(--head-h) + 4px); }

  /* сообщения: компактно, в личке без аватарок и имён */
  .msg { padding: 1px 8px; }
  .msg.start { margin-top: 8px; }
  .is-dm .msg:not(.own) { grid-template-columns: minmax(0, 1fr); }
  .is-dm .msg:not(.own) .msg-gutter { display: none; }
  .is-dm .msg:not(.own) .msg-body { grid-column: 1; }
  .is-dm .msg .msg-head { display: none; }
  .msg:not(.own) .bubble { background: color-mix(in srgb, var(--bubble) 90%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
  [data-theme="light"] .msg:not(.own) .bubble { background: rgba(255, 255, 255, .94); }
  .bubble { padding: 6px 10px 5px; font-size: .97em; }
  .msg.system .msg-body { background: color-mix(in srgb, var(--bg-app) 55%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

  /* поле ввода: ⊕ · капсула · ➤ */
  .composer-wrap { background: transparent; padding: 4px 8px calc(8px + var(--safe-b)); }
  .composer { background: transparent !important; box-shadow: none !important; border-radius: 0; }
  .composer::after { display: none !important; }
  .comp-row { gap: 8px; padding: 0; min-height: 0; align-items: flex-end; }
  .comp-btn.plus { width: 46px; height: 46px; margin: 0; flex: none; color: var(--text); background: var(--tg-glass); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 0 0 1px var(--tg-line), 0 6px 20px rgba(0, 0, 0, .16); }
  .comp-field { min-height: 46px; padding: 0 4px 0 14px; border-radius: 23px; background: var(--tg-glass); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 0 0 1px var(--tg-line), 0 6px 20px rgba(0, 0, 0, .16); }
  .composer:focus-within .comp-field { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 6px 20px rgba(0, 0, 0, .16); }
  #composerInput { min-height: 46px; padding: 12px 0 !important; }
  .comp-field .comp-btn { width: 36px; height: 36px; margin: 0 0 5px; }
  .comp-main .comp-btn { width: 46px; height: 46px; margin: 0; }
  .comp-main .vn-btn { color: var(--text); background: var(--tg-glass); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 0 0 1px var(--tg-line), 0 6px 20px rgba(0, 0, 0, .16); border-radius: 50%; }
  .comp-main .send-btn { border-radius: 50%; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); }
  .reply-bar, .attach-bar:not([hidden]) { margin: 0 0 6px; border-radius: 18px; background: var(--tg-glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: inset 0 0 0 1px var(--tg-line); }
  .typing { background: transparent; }
  .jump-present { bottom: 76px; }
}
@media (max-width: 760px) {
  .tg-ava .av-img, .tg-ava .avatar { border-radius: 50% !important; }
  .msg.system .msg-body { background: color-mix(in srgb, var(--bg-float) 72%, transparent); }
  [data-theme="light"] .msg.system .msg-body { background: rgba(255, 255, 255, .7); }
  [data-theme="light"] .main-head.tg-head { background: linear-gradient(to bottom, rgba(239, 234, 247, .7), transparent); }
}
@media (max-width: 760px) {
  .msg.system { margin: 6px 0; }
  .msg.system .msg-body { font-size: .82em; padding: 5px 12px; max-width: 86%; border-radius: 14px; line-height: 1.35; }
  .msg.system .sys-ic { width: 14px; height: 14px; }
}

/* ====================== телефон: своя шапка Drippy (вместо копии Telegram) ====================== */
@media (max-width: 760px) {
  .tg-row { display: none; }
  .dh-bar { display: flex; align-items: center; gap: 2px; height: 54px; padding: 0 4px 0 2px; border-radius: 22px;
    background: var(--tg-glass); backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
    box-shadow: inset 0 0 0 1px var(--tg-line), 0 10px 28px rgba(0, 0, 0, .18); position: relative; overflow: hidden; }
  /* фирменная «капля» акцента внизу капсулы */
  .dh-bar::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; border-radius: 2px; background: var(--grad); opacity: .55; pointer-events: none; }
  .dh-back { position: relative; display: grid; place-items: center; width: 40px; height: 44px; border-radius: 14px; color: var(--text); flex: none; }
  .dh-count { position: absolute; top: 3px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; box-shadow: 0 0 0 2px var(--panel-solid); }
  .dh-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 4px 6px; border-radius: 16px; text-align: left; color: var(--text); --ring-bg: var(--panel-solid); }
  .dh-who:active { background: var(--bg-hover); }
  .dh-hash { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); flex: none; }
  .dh-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .dh-text b { display: flex; align-items: center; gap: 4px; font-size: .95em; font-weight: 800; }
  .dh-text b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dh-text .head-sub { font-size: .72em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dh-tools { display: flex; align-items: center; flex: none; }
  .dh-btn { width: 36px; height: 40px; border-radius: 12px; color: var(--text-2); }
  .dh-btn:active { background: var(--bg-hover); }
  .dh-btn.on { color: var(--accent-text); }
  /* плашка закреплённого — своя: полоска-градиент и значок */
  .tg-pinbar { min-height: 44px; border-radius: 16px; padding: 3px 4px 3px 10px; }
  .pb-marks i { background: color-mix(in srgb, var(--accent) 30%, transparent); }
  .pb-marks i.on { background: var(--grad); }

  /* пузыри — снова Drippy: плотные, без полупрозрачности, аватарки в личке на месте */
  .is-dm .msg:not(.own) { grid-template-columns: 32px minmax(0, 1fr); }
  .is-dm .msg:not(.own) .msg-gutter { display: flex; }
  .is-dm .msg:not(.own) .msg-body { grid-column: 2; }
  .is-dm .msg .msg-head { display: flex; }
  .msg:not(.own) .bubble { background: var(--bubble); box-shadow: none; }
  [data-theme="light"] .msg:not(.own) .bubble { background: #fff; }
  .bubble { padding: 7px 11px 5px; font-size: 1em; }
  .msg.start { margin-top: 10px; }

  /* системные строки — маленькие пилюли по ширине текста */
  .msg.system { margin: 4px 0; }
  .msg.system .msg-body { width: fit-content; max-width: 84%; margin: 0 auto; padding: 4px 11px; border-radius: 999px; font-size: .78em; box-shadow: none;
    background: color-mix(in srgb, var(--bg-float) 62%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text-2); }
  [data-theme="light"] .msg.system .msg-body { background: rgba(255, 255, 255, .62); }
  .msg.system .msg-body time { font-size: .9em; }

  /* обои — спокойнее: одно мягкое свечение акцента и редкий узор */
  .chat-col { background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='1.4'%3E%3Ccircle cx='20' cy='22' r='6'/%3E%3Ccircle cx='27' cy='22' r='6'/%3E%3Ccircle cx='68' cy='70' r='6'/%3E%3Ccircle cx='75' cy='70' r='6'/%3E%3C/svg%3E"),
      radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 65%),
      radial-gradient(90% 50% at 100% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
      var(--bg-app);
    background-size: 96px 96px, 140% 140%, 140% 140%, auto; }
  [data-theme="light"] .chat-col { background-color: #f3f0f8; }
  @keyframes tg-wall { to { background-position: 0 0, 40% 30%, 60% 70%, 0 0; } }

  /* поле ввода — одна капсула Drippy, все кнопки внутри */
  .composer { background: var(--tg-glass) !important; backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
    box-shadow: inset 0 0 0 1px var(--tg-line), 0 10px 28px rgba(0, 0, 0, .16) !important; border-radius: 24px; }
  .composer:focus-within { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 28px rgba(0, 0, 0, .16) !important; }
  .comp-row { gap: 0; padding: 0 4px; align-items: flex-end; }
  .comp-btn.plus { width: 40px; height: 40px; margin: 0 0 4px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; color: var(--accent-text); }
  .comp-field { min-height: 48px; padding: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none !important; }
  #composerInput { min-height: 48px; padding: 13px 4px !important; }
  .comp-main .comp-btn { width: 40px; height: 40px; margin: 0 0 4px; }
  .comp-main .vn-btn { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; color: var(--text-3); }
  .reply-bar, .attach-bar:not([hidden]) { margin: 0; background: none; backdrop-filter: none; box-shadow: none; border-radius: 0; }
}

/* профиль как вкладка: окно настроек над содержимым, нижнее меню видно и работает */
@media (max-width: 760px) {
  .modal-back.as-tab { top: 0; bottom: var(--tabbar-h, 72px); height: auto !important; }
  .modal-back.as-tab .modal.full { height: 100% !important; max-height: none; }
  .modal-back.as-tab .sp-close { display: none; }
  body.profile-tab #app.m-root #tabbar, body.profile-tab #tabbar { display: grid !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; }
  body.profile-tab #app #tabbar { grid-template-columns: repeat(4, 1fr); }
  .modal-back.as-tab .sp-side { padding-bottom: 12px; }
}
@media (max-width: 760px) {
  .modal-back.as-tab .sp-side { padding-top: var(--safe-t); }
}
/* профиль-вкладка: на весь экран, содержимое прокручивается под парящим нижним меню */
@media (max-width: 760px) {
  .modal-back.as-tab { bottom: 0 !important; height: var(--vvh, 100dvh) !important; }
  .modal-back.as-tab .modal, .modal-back.as-tab .settings-page, .modal-back.as-tab .sp-side, .modal-back.as-tab .sp-main {
    border-radius: 0 !important; box-shadow: none !important; }
  .modal-back.as-tab .modal::after, .modal-back.as-tab .sp-side::after, .modal-back.as-tab .sp-main::after { display: none !important; }
  .modal-back.as-tab .sp-nav, .modal-back.as-tab .sp-content { padding-bottom: calc(var(--tabbar-h, 76px) + 24px) !important; }
}
@media (max-width: 760px) { .modal-back.as-tab { background: var(--bg-app) !important; } }
@media (max-width: 760px) {
  body.profile-tab > #tabbar { display: grid !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; grid-template-columns: repeat(4, 1fr);
    padding: 6px 6px calc(6px + var(--safe-b)); background: var(--panel-solid); border-top: 1px solid var(--line); --ring-bg: var(--panel-solid); }
  [data-material="glass"] body.profile-tab > #tabbar { left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); margin: 0; padding: 6px; border: 0; border-radius: 30px;
    background: var(--g-float); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-hi), inset 0 0 0 1px var(--line); }
}
@media (max-width: 760px) { .modal-back.as-tab .sp-side, .modal-back.as-tab .sp-main { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: transparent !important; } }

/* ====================== аккуратные пузыри: тонкая грань, ровные углы, время в строку ====================== */
:root:not([data-density="compact"]) .bubble { padding: 6px 11px 6px; border-radius: 6px 16px 16px 6px; }
:root:not([data-density="compact"]) .msg:not(.own).start .bubble { border-top-left-radius: 16px; }
:root:not([data-density="compact"]) .msg:not(.own).end .bubble { border-bottom-left-radius: 4px; }
:root:not([data-density="compact"]) .msg.own .bubble { border-radius: 16px 6px 6px 16px; }
:root:not([data-density="compact"]) .msg.own.start .bubble { border-top-right-radius: 16px; }
:root:not([data-density="compact"]) .msg.own.end .bubble { border-bottom-right-radius: 4px; }
/* без свечения: только тонкая светлая грань */
:root:not([data-density="compact"]) .msg.own .bubble:not(.media):not(.jumbo) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .12) !important; }
:root:not([data-density="compact"]) .msg:not(.own) .bubble:not(.media):not(.jumbo) { box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .08) !important; }
[data-theme="light"]:not([data-density="compact"]) .msg:not(.own) .bubble:not(.media):not(.jumbo) { box-shadow: inset 0 0 0 1px rgba(20, 16, 50, .06), 0 1px 2px rgba(20, 16, 50, .06) !important; }
/* своё имя в своих пузырях не нужно; в личке и имя собеседника лишнее */
:root:not([data-density="compact"]) .msg.own .msg-head { display: none !important; }
:root:not([data-density="compact"]) .is-dm .msg .msg-head { display: none !important; }
/* время в конце строки */
.b-spacer { display: inline-block; height: 1px; }
.bubble.inline-meta .b-meta { position: absolute; right: 10px; bottom: 6px; float: none; margin: 0; }
/* плотнее внутри серии, воздух между сериями */
:root:not([data-density="compact"]) .msg { padding-top: 1px; padding-bottom: 1px; }
:root:not([data-density="compact"]) .msg.start { margin-top: 10px; }
.day-div { margin: 14px 0 10px; }

/* ====================== чистые края: сплошные пузыри, мягкое растворение при прокрутке ====================== */
:root { --bubble-solid: #23222f; --bubble-edge: rgba(255, 255, 255, .06); }
[data-theme="midnight"] { --bubble-solid: #17171f; }
[data-theme="light"] { --bubble-solid: #ffffff; --bubble-edge: rgba(20, 16, 50, .07); }
:root:not([data-density="compact"]) .msg:not(.own) .bubble:not(.media):not(.jumbo) { background: var(--bubble-solid) !important; box-shadow: inset 0 0 0 1px var(--bubble-edge) !important; }
:root:not([data-density="compact"]) .msg.own .bubble:not(.media):not(.jumbo) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14) !important; }
/* фото, видео, GIF, кружки — без подложки и рамки */
.bubble.media { background: transparent !important; box-shadow: none !important; }
.msg.mentioned:not(.own) .bubble:not(.media) { box-shadow: inset 3px 0 0 var(--mention-bar), inset 0 0 0 1px var(--bubble-edge) !important; }
@media (max-width: 760px) {
  /* без тёмной полосы под шапкой: сообщения мягко растворяются у шапки и у поля ввода */
  .main-head.tg-head, [data-theme="light"] .main-head.tg-head { background: none !important; }
  #msgScroll {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--head-h) * .75), #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--head-h) * .75), #000 calc(100% - 16px), transparent 100%);
  }
  .composer-wrap { margin-top: -6px; position: relative; z-index: 2; }
}

/* ====================== голосовые сообщения ====================== */
.mic-btn { touch-action: none; user-select: none; -webkit-user-select: none; }
.composer { position: relative; }
.vrec { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 16px; border-radius: inherit; background: var(--bg-float); color: var(--text); font-variant-numeric: tabular-nums; transform: translateX(var(--dx, 0)); }
.vrec .rec-dot { flex: none; }
.vrec-time { flex: none; min-width: 38px; }
.vrec-wave { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow: hidden; }
.vrec-wave i { flex: none; width: 3px; border-radius: 2px; background: var(--accent); }
.vrec-hint { flex: none; display: flex; align-items: center; gap: 4px; font-size: .78em; color: var(--text-3); }
.vrec-hint .ic { transform: rotate(90deg); }
.vrec.cancelling { color: var(--red); }
.vrec.cancelling .vrec-wave i { background: var(--red); }
.vrec-del { color: var(--red); }
.vrec-send { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: #fff !important; }
.composer.has-text .mic-btn, .composer.has-files .mic-btn { display: none; }

.vm { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 300px; padding: 4px 2px 2px; }
.vm-play { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; }
.vm.own .vm-play { background: #fff; color: var(--accent); }
.vm-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.vm-wave { display: flex; align-items: center; gap: 2px; height: 28px; cursor: pointer; }
.vm-wave i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 40%, transparent); }
.vm-wave i.on { background: var(--accent); }
.vm.own .vm-wave i { background: rgba(255, 255, 255, .45); }
.vm.own .vm-wave i.on { background: #fff; }
.vm-meta { display: flex; align-items: center; gap: 8px; font-size: .74em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.vm.own .vm-meta { color: rgba(255, 255, 255, .8); }
.vm-speed { padding: 0 6px; border-radius: 6px; font-weight: 800; font-size: .95em; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.bubble:has(.vm) { min-width: 250px; }

/* ====================== группы и «Избранное» ====================== */
.saved-pic { display: grid; place-items: center; width: var(--s, 52px); height: var(--s, 52px); border-radius: 50%; background: var(--grad); color: #fff; flex: none; }
.group-row .ch-pic .gicon { border-radius: 50%; }
.gp { display: grid; gap: 8px; }
.gp-list { max-height: min(360px, 50dvh); display: grid; gap: 2px; }
.gp-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; text-align: left; color: var(--text); }
.gp-row:hover { background: var(--bg-hover); }
.gp-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; }
.gp-name small { color: var(--text-3); font-weight: 500; }
.gp-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); color: transparent; }
.gp-row.on .gp-check { background: var(--accent); box-shadow: none; color: #fff; }

/* медиа и файлы */
.media-modal .modal-body { display: flex; flex-direction: column; gap: 10px; min-height: min(60dvh, 520px); }
.mm-seg { align-self: stretch; }
.mm-body { flex: 1; min-height: 0; max-height: min(64dvh, 560px); }
.mm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.mm-cell { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--bg-input); display: grid; place-items: center; }
.mm-cell img, .mm-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-cell.round img, .mm-cell.round video { border-radius: 50%; }
.mm-play { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.mm-list { display: grid; gap: 2px; }
.mm-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 12px; }
.mm-row:hover { background: var(--bg-hover); }
.mm-row.voice { align-items: flex-start; }
.mm-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.mm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mm-text b, .mm-text a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mm-text small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ====================== опросы ====================== */
.poll { display: grid; gap: 6px; min-width: 240px; max-width: 340px; padding: 2px 0; }
.poll-q { font-size: 1em; }
.poll-kind { font-size: .74em; opacity: .7; margin-top: -4px; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px; border-radius: 12px; text-align: left; color: inherit; overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.poll-opt::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: color-mix(in srgb, currentColor 16%, transparent); transition: width .3s var(--ease); }
.poll-opt > * { position: relative; }
.poll-mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .7; flex: none; }
.poll-opt.mine .poll-mark { background: currentColor; opacity: 1; }
.poll-opt.mine .poll-mark .ic { color: var(--bubble-solid); }
.msg.own .poll-opt.mine .poll-mark .ic { color: var(--accent); }
.poll-text { flex: 1; min-width: 0; }
.poll-pct { font-weight: 800; font-size: .85em; }
.poll-total { font-size: .74em; opacity: .7; }
.poll-opts { display: grid; gap: 6px; }
.poll-opt-row { display: flex; align-items: center; gap: 6px; }
.poll-opt-row input { flex: 1; }

/* ====================== выбор нескольких сообщений ====================== */
body.selecting #msgList .msg:not(.system) { cursor: pointer; padding-left: 44px !important; }
body.selecting #msgList .msg:not(.system)::before { content: ''; position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); }
body.selecting #msgList .msg.sel::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: none; }
body.selecting #msgList .msg.sel { background: color-mix(in srgb, var(--accent) 10%, transparent); }
body.selecting .composer-wrap { visibility: hidden; }
.sel-bar { position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); z-index: 8; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 20px; background: var(--bg-float); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); animation: rise .2s var(--ease); }
.sel-bar b { font-size: .92em; }
.sel-sp { flex: 1; }
.sel-bar .icon-btn.danger { color: var(--red); }

/* ====================== закреплённые и архив в списке ====================== */
.dm-row.pinned { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.saved-pic.arch { background: var(--bg-3); color: var(--text-2); }
.inline-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .9em; }

/* ====================== поиск в чате (как в Telegram) ====================== */
mark.cs-hl { background: color-mix(in srgb, var(--yellow) 60%, transparent); color: inherit; border-radius: 4px; padding: 0 1px; }
.cs-top { position: absolute; top: 0; left: 0; right: 0; z-index: 8; display: flex; align-items: center; gap: 8px; padding: calc(6px + var(--safe-t)) 10px 6px; animation: cs-drop .2s cubic-bezier(.2, .9, .3, 1.2); }
.cs-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 14px; border-radius: 23px; color: var(--text-3);
  background: var(--tg-glass, var(--panel-solid)); backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 0 0 1px var(--tg-line, var(--line)), 0 10px 28px rgba(0, 0, 0, .18); }
.cs-field:focus-within { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 28px rgba(0, 0, 0, .18); color: var(--accent-text); }
.cs-input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.cs-input::-webkit-search-cancel-button { display: none; }
.cs-clear { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-hover); color: var(--text-2); flex: none; }
.cs-cancel { flex: none; height: 46px; padding: 0 6px; color: var(--accent-text); font-weight: 700; }
.cs-bot { position: absolute; left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); z-index: 7; display: flex; align-items: center; gap: 2px; height: 52px; padding: 0 6px; border-radius: 26px;
  background: var(--tg-glass, var(--panel-solid)); backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 0 0 1px var(--tg-line, var(--line)), 0 -6px 24px rgba(0, 0, 0, .14); animation: cs-rise .2s ease-out; }
.cs-count { flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: .9em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-arrow, .cs-tool { width: 40px; height: 40px; border-radius: 14px; color: var(--accent-text); flex: none; }
.cs-tool { color: var(--text-2); }
.cs-tool.on { color: var(--accent-text); background: var(--accent-soft); }
.cs-arrow.up svg { transform: rotate(180deg); }
.cs-arrow:disabled, .cs-tool:disabled { opacity: .3; }
.cs-list { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 6; padding: calc(68px + var(--safe-t)) 8px calc(72px + var(--safe-b)); background: var(--bg-app); display: flex; flex-direction: column; gap: 2px; animation: cs-fade .15s ease-out; }
.cs-list[hidden] { display: none; }
.cs-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; text-align: left; color: var(--text); flex: none; }
.cs-row:active, .cs-row:hover { background: var(--bg-hover); }
.cs-row.cur { background: var(--accent-soft); }
.cs-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-row-head { display: flex; justify-content: space-between; gap: 8px; }
.cs-row-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-row-head time { color: var(--text-3); font-size: .8em; flex: none; }
.cs-row-body { color: var(--text-2); font-size: .9em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#main.cs-on .tg-head { visibility: hidden; }
#main.cs-on .composer-wrap, #main.cs-on .jump-present, #main.cs-on .typing { display: none; }
#main.cs-on #msgScroll { padding-bottom: calc(72px + var(--safe-b)); }
@keyframes cs-drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes cs-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes cs-fade { from { opacity: 0; } }
[data-motion="reduce"] .cs-top, [data-motion="reduce"] .cs-bot, [data-motion="reduce"] .cs-list { animation: none; }
.cs-field input.cs-input { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; min-height: 0; }

/* ====================== Telegram × Drippy: удобство на телефоне ====================== */

/* единая форма аватарок в списках — фирменный «сквиркл» Drippy */
.ch-pic .gicon, .group-row .ch-pic .gicon, .fw-row .gicon, .saved-pic { border-radius: 34%; }
.gicon.tinted { background: var(--gc); color: #fff; }

@media (max-width: 760px) {
  /* парящее нижнее меню с «каплей», которая перетекает между вкладками */
  :root:not([data-material="glass"]) #app { background: var(--panel-solid); }
  #app.m-root #tabbar, body.profile-tab > #tabbar {
    position: relative; margin: 0 12px calc(8px + var(--safe-b)); padding: 5px; border: 0; border-radius: 30px;
    background: var(--tg-glass); backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
    box-shadow: inset 0 0 0 1px var(--tg-line), 0 10px 30px rgba(0, 0, 0, .28); }
  body.profile-tab > #tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(8px + var(--safe-b)); margin: 0; }
  .tb-pill { position: absolute; left: 5px; top: 5px; bottom: 5px; width: calc((100% - 10px) / 4); border-radius: 25px; pointer-events: none;
    background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
    transform: translateX(calc(var(--i) * 100%)); }
  .tb-item { position: relative; z-index: 1; padding: 5px 0 4px; }
  .tb-item.on { color: var(--accent-text); }
  .tb-item.on .tb-ic, [data-material="glass"] .tb-item.on .tb-ic { background: none; box-shadow: none; }
  .tb-item:active .tb-ic { transform: scale(.9); }
  .tb-ic { transition: transform .15s; }

  /* свайп по чату */
  .dm-row.swipeable { position: relative; overflow: hidden; touch-action: pan-y; }
  .dm-row.swipeable > :not(.sw-acts) { transform: translateX(var(--sw, 0px)); }
  .dm-row.sw-anim > :not(.sw-acts), .dm-row.sw-anim .sw-acts { transition: transform .28s var(--ease), width .28s var(--ease); }
  .sw-acts { position: absolute; top: 0; bottom: 0; right: 0; display: flex; width: max(216px, calc(-1 * var(--sw, 0px))); transform: translateX(calc(100% + var(--sw, 0px))); }
  .sw-act { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font-size: .68em; font-weight: 700; transition: flex .2s var(--ease); overflow: hidden; white-space: nowrap; }
  .sw-act.mute { background: #f0a020; }
  .sw-act.pin { background: #2fb36b; }
  .sw-act.arch { background: #8b8a9b; }
  .dm-row.sw-full .sw-act:not(.arch) { flex: 0; }
  .dm-row:not(.swipeable) .sw-acts { display: none; }
}

/* меню сообщения «в фокусе» */
.mf-layer { position: absolute; inset: 0; z-index: 60; transition: opacity .16s; }
.mf-layer.out { opacity: 0; }
.mf-back { position: absolute; inset: 0; background: rgba(6, 6, 14, .4); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); animation: fade .18s; }
[data-theme="light"] .mf-back { background: rgba(240, 236, 248, .45); }
.mf-msg { position: absolute !important; margin: 0 !important; pointer-events: none; z-index: 1; animation: mf-pop .26s cubic-bezier(.2, .9, .3, 1.25); }
.mf-msg.clipped { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.mf-msg .msg-tools, .mf-msg .msg-head time + * { display: none !important; }
.msg.mf-src { opacity: 0; }
.mf-reacts, .mf-menu { position: absolute; z-index: 2; background: var(--tg-glass, var(--panel-solid)); backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 0 0 1px var(--tg-line, var(--line)), 0 14px 36px rgba(0, 0, 0, .32); }
.mf-reacts { border-radius: 28px; padding: 5px; animation: mf-in .24s cubic-bezier(.2, .9, .3, 1.3); transform-origin: bottom left; }
.mf-reacts.own { transform-origin: bottom right; }
.mf-reacts .menu-reacts { display: flex; gap: 2px; margin: 0; padding: 0; border: 0; }
.mf-reacts .menu-react { flex: none; width: 42px; height: 42px; border-radius: 50%; background: none; font-size: 26px; display: grid; place-items: center; transition: transform .15s; }
.mf-reacts .menu-react:active { transform: scale(1.25); }
.mf-reacts .mf-plus { background: var(--bg-hover); color: var(--text-2); font-size: 0; }
.mf-menu { width: min(250px, calc(100% - 16px)); padding: 5px; border-radius: 18px; overflow-y: auto; animation: mf-in .22s cubic-bezier(.2, .9, .3, 1.15); transform-origin: top left; }
.mf-menu.own { transform-origin: top right; }
.mf-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 12px; color: var(--text); font-size: .95em; font-weight: 500; text-align: left; }
.mf-item .ic { color: var(--text-2); flex: none; }
.mf-item:active { background: var(--bg-hover); }
.mf-item.danger, .mf-item.danger .ic { color: var(--red); }
.mf-sep { display: block; height: 1px; margin: 4px 8px; background: var(--line); }
@keyframes mf-pop { from { transform: scale(.97); } 50% { transform: scale(1.015); } }
@keyframes mf-in { from { opacity: 0; transform: scale(.85); } }
[data-motion="reduce"] :is(.mf-msg, .mf-reacts, .mf-menu, .mf-back) { animation: none; }

/* профиль собеседника: быстрые действия плитками и медиа прямо в профиле */
.pc-quick { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 8px; width: 100%; }
.pc-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 8px; border-radius: 16px; background: var(--bg-input); color: var(--accent-text); font-size: .74em; font-weight: 700; transition: transform .12s, background .15s; }
.pc-tile span { color: var(--text-2); }
.pc-tile:active { transform: scale(.95); background: var(--bg-hover); }
.pc-tile.on { color: var(--text-3); }
.pc-media .mm-box { display: flex; flex-direction: column; gap: 10px; }
.mm-box { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.mm-body.inline { max-height: none; min-height: 120px; }
.pc-seen { margin-top: 2px; font-size: .82em; color: var(--text-3); }
.pc-seen.on { color: var(--accent-text); }
.pc-quick { margin: 4px 0 2px; }
.mf-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-menu { width: min(264px, calc(100% - 16px)); }

/* ====================== одна кнопка: голосовое ↔ кружок ====================== */
.mic-btn .ic { transition: transform .2s; }
.mic-btn.swap .ic { animation: rec-swap .32s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rec-swap { 0% { transform: scale(.4) rotate(-90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.mic-btn.recording { color: #fff !important; background: var(--grad) !important; transform: scale(1.18); box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 45%, transparent) !important; transition: transform .2s; }
.rec-lock { position: fixed; z-index: 1200; transform: translate(-50%, calc(-100% + var(--dy, 0px))); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 18px; pointer-events: none;
  background: var(--tg-glass, var(--panel-solid)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--tg-line, var(--line)), 0 8px 24px rgba(0, 0, 0, .25); color: var(--text-2); animation: mf-in .2s ease-out; }
.rec-lock .ic:last-child { transform: rotate(180deg); animation: rec-up 1.2s ease-in-out infinite; }
@keyframes rec-up { 50% { translate: 0 -3px; } }
.vrec .vrec-label { flex: 1; min-width: 0; color: var(--text-3); font-size: .85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vnr-layer { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; pointer-events: none;
  background: rgba(6, 6, 14, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: fade .2s; transition: opacity .2s; }
.vnr-layer.out { opacity: 0; }
.vnr-circle { position: relative; width: min(72vw, 300px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); animation: mf-pop .3s cubic-bezier(.2, .9, .3, 1.25); transition: transform .2s, filter .2s; }
.vnr-circle video { width: 100%; height: 100%; object-fit: cover; }
.vnr-circle .vn-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.vnr-circle .vn-ring-bg { stroke: rgba(255, 255, 255, .18); }
.vnr-circle .vn-ring-fg { stroke: var(--red); }
.vnr-layer.cancelling .vnr-circle { transform: scale(.9); filter: grayscale(1) brightness(.7); }

/* медиа и ссылки не распирают окно: длинные адреса обрезаются */
.mm-box, .mm-body, .mm-list, .mm-row, .pc-media, .pc-extra, .pc-extra section { min-width: 0; max-width: 100%; }
.mm-text b, .mm-text a, .mm-text small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-seg { min-width: 0; max-width: 100%; }
.mm-seg .seg-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card.full, .profile-card.full .pc-body { min-width: 0; max-width: 100%; overflow-x: hidden; }
.pc-li { min-width: 0; max-width: 100%; }


/* ====================== серверы: свой стиль Drippy ====================== */
@media (min-width: 761px) {
  /* сообщения — в удобной для чтения колонке по центру, а не по краям широкого экрана */
  #msgList, #main .typing { width: 100%; max-width: 940px; margin-left: auto; margin-right: auto; }
  #main .composer-wrap { width: 100%; max-width: 968px; margin-left: auto; margin-right: auto; }
  /* каналы на компьютере — карточками и «комнатами» */
  .desk-chs.spaces { padding: 0 2px 12px; }
  .desk-chs.spaces .srv-sec:first-child { margin-top: 10px; }
  .desk-chs.spaces .room-grid { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
  .desk-chs.spaces .room { padding: 10px; gap: 8px; }
  .desk-chs.spaces .ch-row { cursor: pointer; }
}
.head-faces { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 6px; border-radius: 16px; color: var(--text-2); font-weight: 700; font-size: .82em; transition: background .15s; }
.head-faces:hover, .head-faces.on { background: var(--bg-hover); color: var(--text); }
.hf-stack { display: inline-flex; }
.hf-stack .avatar { margin-left: -6px; --ring-bg: var(--panel-solid); }
.hf-stack .avatar:first-child { margin-left: 0; }
.hf-stack .av-img { box-shadow: 0 0 0 2px var(--panel-solid); }
.hf-n { display: inline-flex; align-items: center; gap: 4px; }
.head-live { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 17px; margin-right: 4px;
  background: color-mix(in srgb, var(--green) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent); color: var(--text); }
.head-live:hover { background: color-mix(in srgb, var(--green) 22%, transparent); }
.head-live.here { box-shadow: inset 0 0 0 2px var(--green); }
.hl-faces { display: inline-flex; }
.hl-faces .avatar { margin-left: -5px; }
.hl-faces .avatar:first-child { margin-left: 0; }
.hl-text { display: flex; flex-direction: column; line-height: 1.1; font-size: .8em; font-weight: 700; text-align: left; }
.hl-text small { color: var(--green); font-weight: 600; font-size: .9em; }
.dh-chev { color: var(--text-3); flex: none; }

/* шторка каналов на телефоне */
.ch-switch .modal-body { display: flex; flex-direction: column; gap: 12px; }
.cs-srv { display: flex; align-items: center; gap: 12px; }
.cs-srv .gicon { border-radius: 34%; }
.cs-srv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-srv-text b { font-size: 1.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-srv-text small { color: var(--text-3); }
.cs-srv-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 8px; }
.cs-srv-list .srv-sec:first-child { margin-top: 0; }
.cs-srv-list .room-grid { grid-template-columns: 1fr 1fr; }

/* ====================== фильтр 18+ ====================== */
.nsfw-block { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 90px; min-width: 160px; padding: 14px; border-radius: 14px;
  background: repeating-linear-gradient(135deg, var(--bg-input) 0 10px, color-mix(in srgb, var(--bg-input) 70%, var(--bg-hover)) 10px 20px); color: var(--text-3); font-size: .85em; font-weight: 600; }
.vn .nsfw-block { width: 100%; height: 100%; border-radius: 50%; min-width: 0; text-align: center; flex-direction: column; }
.nsfw-unsure { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 90px; padding: 14px; border-radius: 14px; background: var(--bg-input); color: var(--text-2); font-size: .85em; font-weight: 600; }
img.nsfw-pending { opacity: 0 !important; }

/* ====================== жалобы ====================== */
.rep-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.rep-preview { padding: 10px; border-radius: 14px; background: var(--bg-input); max-height: 160px; overflow: hidden; }
.rep-reasons { display: grid; gap: 4px; }
.rep-reason { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 12px; background: var(--bg-input); color: var(--text); text-align: left; font-weight: 600; }
.rep-reason .ic { opacity: 0; color: var(--accent-text); }
.rep-reason.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.rep-reason.on .ic { opacity: 1; }
.rep-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--text-3); font-size: .82em; }
.rep-list { display: grid; gap: 12px; margin-top: 14px; }
.rep-card { padding: 14px; border-radius: 18px; background: var(--bg-input); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; }
.rep-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-card-head time { margin-left: auto; color: var(--text-3); font-size: .78em; }
.rep-tag { padding: 3px 10px; border-radius: 999px; font-size: .78em; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); }
.rep-tag.r-18, .rep-tag.r-threat { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.rep-ok { display: inline-flex; align-items: center; gap: 3px; color: var(--green); font-size: .75em; font-weight: 700; }
.rep-unk { color: var(--text-3); font-size: .75em; font-weight: 700; }
.rep-who, .rep-note-text { margin: 0; font-size: .9em; }
.rep-note-text { color: var(--text-2); font-style: italic; }
.rep-items { display: grid; gap: 6px; }
.rep-item { padding: 8px 10px; border-radius: 12px; background: var(--bg-2, var(--panel-solid)); }
.rep-item.main { box-shadow: inset 3px 0 0 var(--red); }
.rep-item-head { display: flex; align-items: center; gap: 8px; font-size: .85em; }
.rep-item-head time { color: var(--text-3); font-size: .9em; }
.rep-text { margin-top: 4px; font-size: .92em; overflow-wrap: anywhere; }
.rep-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rep-att { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: var(--bg-hover); color: var(--text-2); font-size: .82em; }
.rep-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.av-img img:not([src]) { display: none; }

/* ====================== поддержка и админка ====================== */
.sup-modal .modal-body, .sup-ticket .modal-body { display: flex; flex-direction: column; gap: 12px; }
.sup-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, var(--accent-soft), transparent), var(--bg-input); flex-wrap: wrap; }
.sup-hero > div { flex: 1; min-width: 180px; }
.sup-hero p { margin: 2px 0 0; color: var(--text-2); font-size: .9em; }
.sup-hero > .ic { color: var(--accent-text); }
.sup-list { display: grid; gap: 6px; }
.sup-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg-input); text-align: left; color: var(--text); }
.sup-row:hover { background: var(--bg-hover); }
.sup-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sup-row-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-row-text small { color: var(--text-3); }
.sup-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--text-4); }
.sup-dot.s-open { background: var(--yellow); }
.sup-dot.s-answered { background: var(--green); }
.sup-status { font-size: .78em; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.sup-status.s-answered { color: var(--green); }
.sup-status.s-open { color: var(--yellow); }
.sup-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-thread { display: flex; flex-direction: column; gap: 8px; max-height: min(52dvh, 460px); min-height: 160px; padding: 4px; }
.sup-msg { max-width: 88%; padding: 10px 12px; border-radius: 16px; background: var(--bg-input); }
.sup-msg.user { align-self: flex-end; background: var(--accent-soft); }
.sup-msg.staff { align-self: flex-start; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent); }
.sup-who { display: flex; gap: 8px; align-items: center; font-size: .8em; margin-bottom: 4px; }
.sup-who time { color: var(--text-3); }
.sup-msg.staff .sup-who b { color: var(--green); display: inline-flex; align-items: center; }
.sup-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-attach { margin-top: 8px; }
.sup-attach summary { cursor: pointer; color: var(--text-2); font-size: .85em; }
.restrict-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; margin-bottom: 14px; background: color-mix(in srgb, var(--red) 10%, var(--bg-input)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 30%, transparent); }
.restrict-card > .ic { color: var(--red); flex: none; }
.restrict-card p { margin: 4px 0 8px; color: var(--text-2); font-size: .9em; }
body > .restrict-offer { background: linear-gradient(135deg, #e5484d, #b4232f); }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.adm-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: 16px; background: var(--bg-input); text-align: left; color: var(--text-2); font-size: .85em; }
.adm-stat b { font-size: 1.9em; color: var(--text); line-height: 1.1; }
.adm-stat[onclick], button.adm-stat:hover { background: var(--bg-hover); }
.adm-seg { margin: 10px 0; overflow-x: auto; }
.adm-users { display: grid; gap: 4px; }
.adm-user { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-align: left; color: var(--text); }
.adm-user:hover { background: var(--bg-hover); }
.adm-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-user-text b { display: flex; align-items: center; gap: 6px; }
.adm-user-text small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-av { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 34%; background: var(--bg-hover); color: var(--text-2); font-weight: 800; flex: none; }
.adm-av.big { width: 56px; height: 56px; font-size: 1.3em; }
.adm-av.on::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--panel-solid); }
.adm-modal .modal-body { display: block; }
.adm-card { display: grid; gap: 10px; }
.adm-card h5 { margin: 8px 0 0; color: var(--text-3); text-transform: uppercase; font-size: .72em; letter-spacing: .04em; }
.adm-top { display: flex; align-items: center; gap: 12px; }
.adm-top h3 { margin: 0; }
.adm-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.adm-facts span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: var(--bg-input); color: var(--text-3); font-size: .78em; }
.adm-facts b { color: var(--text); font-size: 1.4em; }
.adm-list { display: grid; gap: 4px; font-size: .88em; }
.adm-list small { color: var(--text-3); }
.audit-row { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--bg-input); }
.audit-row time { color: var(--text-3); font-size: .78em; }