/* ═══════════════════════════════════════════════════════
   Соккет Chat — Modern Redesign
   ═══════════════════════════════════════════════════════ */

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ── Theme Variables ── */
:root {
  --bg-body: #0a0a0f;
  --bg-panel: #12121a;
  --bg-element: #1a1a28;
  --bg-input: #0e0e16;
  --border-color: rgba(255, 255, 255, 0.06);
  --text-primary: #eef0f6;
  --text-secondary: #8b8da3;
  --accent-color: #6c5ce7;
  --accent-glow: rgba(108, 92, 231, 0.35);
  --danger-color: #ff4757;
  --success-color: #2ed573;
  --glass-bg: rgba(18, 18, 26, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(20px);
  --shadow-ambient: 0 8px 32px rgba(0, 0, 0, 0.4);
  --transition-smooth: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Global Resets ── */
* {
    -webkit-tap-highlight-color: transparent !important;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input, textarea {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

html, body {
    margin: 0; padding: 0; width: 100%; height: 100dvh;
    background-color: var(--bg-body); color: var(--text-primary);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    overflow: hidden;
    touch-action: manipulation;
}

/* ── Layout ── */
.chat-container { display: flex; width: 100%; height: 100%; background-color: var(--bg-panel); }

.chat-sidebar {
    position: relative !important;
    width: 350px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-panel);
    z-index: 100;
}

/* ── Sidebar Header ── */
.sidebar-header {
    padding: 15px; border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 10px;
    position: relative; flex-shrink: 0;
}

.sidebar-icon-btn {
    background: none; border: none; color: var(--text-secondary); font-size: 20px;
    cursor: pointer; padding: 8px; transition: all 0.3s ease;
    border-radius: 12px;
}
.sidebar-icon-btn:hover { color: #fff; background: rgba(108, 92, 231, 0.15); }

.chat-search-input {
    flex: 1; background: var(--bg-input); border: 1px solid var(--border-color);
    color: var(--text-primary); border-radius: 20px; padding: 8px 15px;
    outline: none; font-family: inherit;
    transition: all 0.3s ease;
}
.chat-search-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
/* Поля поиска объявлены type="search" (браузеры не считают такие поля логином
   и не подставляют туда сохранённые данные). Собственные украшения WebKit —
   крестик очистки и «лупу» — снимаем, чтобы вид не изменился. */
.chat-search-input {
    -webkit-appearance: none;
    appearance: none;
}
.chat-search-input::-webkit-search-cancel-button,
.chat-search-input::-webkit-search-decoration,
.chat-search-input::-webkit-search-results-button,
.chat-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* ── Dropdowns ── */
.dropdown-menu {
    position: absolute; top: 60px; background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 14px; width: 200px; display: none; z-index: 100;
    box-shadow: var(--shadow-ambient); overflow: hidden;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    animation: fadeInModal 0.2s ease;
}
.dropdown-menu.left { left: 10px; }
.dropdown-menu.right { right: 10px; }

.dropdown-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 15px;
    color: #fff; text-decoration: none; font-size: 14px; cursor: pointer;
    transition: all 0.2s ease;
}
.dropdown-item:hover { background: rgba(108, 92, 231, 0.12); }
.dropdown-item i { width: 20px; text-align: center; color: var(--text-secondary); transition: color 0.2s; }
.dropdown-item:hover i { color: var(--accent-color); }

.search-results-dropdown {
    position: absolute; top: 60px; left: 50px; right: 50px;
    background: var(--bg-element); z-index: 100; max-height: 200px;
    overflow-y: auto; border-radius: 14px; box-shadow: var(--shadow-ambient);
    border: 1px solid var(--border-color);
}

/* ── Notification button ── */
.notif-sidebar-btn {
    background: rgba(108, 92, 231, 0.08); border-bottom: 1px solid var(--border-color);
    color: var(--accent-color); padding: 12px 15px; text-align: center;
    cursor: pointer; font-size: 13px; display: none;
    transition: background 0.3s;
}
.notif-sidebar-btn:hover { background: rgba(108, 92, 231, 0.15); }

/* ── Chat List ── */
.chat-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 85px;
    -webkit-overflow-scrolling: touch;
}

.chat-list-item {
    display: flex; padding: 15px; cursor: pointer; transition: all 0.25s ease;
    position: relative; user-select: none; overflow: hidden;
    border-radius: 0;
    border-left: 3px solid transparent;
    background-clip: padding-box;
}
.chat-list-item:hover { background-color: rgba(108, 92, 231, 0.06); }
.chat-list-item.active { background-color: rgba(108, 92, 231, 0.1); }

.chat-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--bg-element); margin-right: 12px; object-fit: cover; flex-shrink: 0; transition: transform 0.2s; }
.chat-list-item:hover .chat-avatar { transform: scale(1.05); }
.chat-info { overflow: hidden; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.chat-name { color: var(--text-primary); font-weight: 600; margin-bottom: 4px; font-size: 15px; }
/* line-height фиксирован и равен высоте счётчика непрочитанных: иначе строка
   с бейджем выше строки без него, и имя над ней прыгает на пару пикселей
   между диалогами. display оставляем блочным — text-overflow: ellipsis
   работает только в блочном контейнере. */
.chat-last-msg { color: var(--text-secondary); font-size: 13px; line-height: 20px; min-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Счётчик непрочитанных в списке диалогов.
   Был `border-radius: 50% + padding: 4px 8px`: 50% от НЕквадратной коробки —
   это эллипс, а на однозначном счётчике (коробка 20×18.6) он читается как
   скруглённый квадрат с заметными углами. Теперь коробка фиксированной
   высоты, `min-width` равен высоте (одна цифра = ровный круг), а
   `border-radius: 999px` даёт правильные полукруглые торцы на любом
   количестве цифр — углов не видно никогда. */
.unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 20px;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent-color);
    color: white;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    align-self: center;
    flex: none;
    /* БЕЗ box-shadow. Свечение (0 2px 8px) выходило за коробку бейджа на 8px
       вбок и на 10px вниз, а бейдж стоит вплотную к правому краю .chat-info,
       у которого overflow: hidden. Ореол срезался по прямой — и читался как
       квадратная подложка, «выпадающая» из блока. */
}
.muted-icon { color: #555; font-size: 12px; margin-left: 5px; }

/* ── Chat Main ── */
.chat-main {
    flex: 1; display: flex; flex-direction: column; background-color: var(--bg-body);
    position: relative; height: 100%; min-width: 0;
}

.back-btn { display: none; background: none; border: none; color: #fff; font-size: 20px; margin-right: 15px; cursor: pointer; }

/* ── Media Grid ── */
.chat-media-grid {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    width: 100%;
    max-width: 480px;
    border-radius: 8px;
    overflow: hidden;
}

.chat-media-video {
    width: 100%;
    min-height: 150px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    background: #050508;
    border-radius: 8px;
}

.chat-media-item, .chat-media-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
    border: none;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: filter 0.2s;
}
.chat-media-item:hover, .chat-media-video:hover { filter: brightness(1.1); }

.chat-media-grid:has(> *:last-child:nth-child(1)) {
    display: block;
}

/* Одиночный медиа-блок: подгоняем пузырь под пропорции файла.
   Размеры приходят с сервера (probeImage/VideoDimensions) и ставятся
   inline (aspect-ratio + max-height). Здесь — только общие лимиты и
   радиус, без форсированного aspect-ratio и letterbox-фона. Поля
   min-* убраны умышленно: «маленькое» фото должно выглядеть маленьким,
   а не растягиваться до квадрата 150×150. */
.chat-media-grid:has(> *:last-child:nth-child(1)) > * {
    max-height: 520px;
    max-width: 100%;
    border-radius: 8px;
}

/* Картинка без серверных размеров (legacy) — фолбэк к натуральному
   соотношению. width:auto/height:auto + max-height ограничивает,
   браузер сам рисует по реальной форме файла, без letterbox. */
.chat-media-grid:has(> *:last-child:nth-child(1)) > img.chat-media-item {
    width: auto;
    height: auto;
    object-fit: cover;
}

/* Одиночное медиа в широком пузыре: файл центрируется, а пустые поля по
   бокам заливаются размытой «палитрой» самого медиа. --media-bg для фото
   ставится inline при рендере, для видео — из первого кадра (canvas,
   см. captureVideoBg в chat_ui_messaging.js). */
.chat-media-grid.single-media { position: relative; }
.chat-media-grid.single-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--media-bg);
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(1.25);
    transform: scale(1.2);
}
.chat-media-grid.single-media > * {
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
}
.chat-media-grid.single-media > img.chat-media-item { display: block; }

/* Видео без серверных размеров — фолбэк к 16/9, как раньше. */
.chat-media-grid:has(> *:last-child:nth-child(1)) > div:has(> video.chat-media-video):not([style*="aspect-ratio"]),
.chat-media-grid:has(> *:last-child:nth-child(1)) > video.chat-media-video:not([style*="aspect-ratio"]) {
    aspect-ratio: 16 / 9;
}

.chat-media-grid:has(> *:last-child:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
}

.chat-media-grid:has(> *:last-child:nth-child(2)) > * {
    height: 220px;
}

.chat-media-grid:has(> *:last-child:nth-child(3)) {
    grid-template-columns: 1fr 1fr;
}

.chat-media-grid:has(> *:last-child:nth-child(3)) > *:first-child {
    grid-column: 1 / -1;
    height: 250px;
}

.chat-media-grid:has(> *:last-child:nth-child(3)) > *:not(:first-child) {
    height: 150px;
}

.chat-media-grid:has(> *:last-child:nth-child(4)) {
    grid-template-columns: 1fr 1fr;
}

.chat-media-grid:has(> *:last-child:nth-child(4)) > * {
    height: 160px;
}

.chat-media-grid:has(> *:last-child:nth-child(n+5)) {
    grid-template-columns: repeat(3, 1fr);
}

.chat-media-grid:has(> *:last-child:nth-child(n+5)) > * {
    height: 130px;
}

.chat-media-grid > .chat-media-audio {
    grid-column: 1 / -1 !important;
    height: 40px !important;
    border-radius: 20px;
    margin-top: 5px;
}

.chat-media-audio {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 5px;
}

/* ── Reactions ── */
.reactions-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

.reaction-pill {
    background: rgba(108, 92, 231, 0.08);
    border: 1px solid rgba(108, 92, 231, 0.15);
    border-radius: 14px;
    padding: 3px 8px 3px 4px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.25s ease;
}
.reaction-pill:hover { background: rgba(108, 92, 231, 0.18); transform: scale(1.05); }

.reaction-pill.active {
    background: rgba(108, 92, 231, 0.2);
    border-color: var(--accent-color);
    color: #fff;
    box-shadow: 0 0 8px var(--accent-glow);
}

.reaction-avatars {
    display: flex;
    align-items: center;
    margin-right: 6px;
    padding-left: 2px;
}

.reaction-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #15151f;
    margin-left: -8px;
    object-fit: cover;
    position: relative;
}

.reaction-avatar:first-child {
    margin-left: 0;
}

.reaction-pill.active .reaction-avatar {
    border-color: #1e1e2e;
}

/* Посты канала: реакции и статистика (просмотры + время) одной строкой, на
   одном уровне — реакции слева, статистика прижата вправо. */
.post-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    width: 100%;
}
.post-stat-row > .reactions-list {
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 0;
    row-gap: 4px;
}
.post-stat-row > .reactions-list:empty {
    flex: 0 0 0;
    margin: 0;
}
.post-stat-row > .msg-meta {
    position: static !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    flex: 0 0 auto;
    white-space: nowrap;
    align-self: center;
}

/* ── Reply & Forward ── */
.reply-quote { background: rgba(108, 92, 231, 0.08); border-left: 3px solid var(--accent-color); padding: 5px 8px; margin-bottom: 8px; border-radius: 4px; font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: background 0.2s; }
.reply-quote:hover { background: rgba(108, 92, 231, 0.15); }
.reply-quote strong { display: block; color: #fff; margin-bottom: 2px; }

.forward-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(108, 92, 231, 0.06);
    border-left: 3px solid var(--accent-color);
    padding: 6px 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.forward-header:hover { background: rgba(108, 92, 231, 0.12); }
.forward-icon { color: var(--accent-color); font-size: 11px; flex-shrink: 0; }
.forward-label { font-size: 11px; color: #888; white-space: nowrap; }
.forward-user { display: flex; align-items: center; gap: 6px; }
.forward-avatar-wrap {
    position: relative; width: 20px; height: 20px; flex-shrink: 0;
}
.forward-avatar {
    width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
}
.fwd-avatar-frame {
    position: absolute; top: -15%; left: -15%;
    width: 130%; height: 130%;
    pointer-events: none; object-fit: contain; z-index: 1;
}
/* Имя источника пересылки (пользователь или канал) — белым: акцентный
   фиолетовый сливался с рамкой-полоской и иконкой блока. Анимированные
   никнеймы (nick-fx-*) красят текст сами, их это правило не трогает. */
.forward-tag {
    font-size: 12px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 140px;
}
.chat-bubble > .forward-header { order: 0; }

/* ── Modals ── */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 2000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-content { background: var(--bg-element); width: 400px; border-radius: 16px; padding: 20px; border: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 15px; box-shadow: var(--shadow-ambient); }
.docs-modal-list { display: flex; flex-direction: column; gap: 8px; }
.docs-modal-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-primary); text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.docs-modal-item:hover { background: rgba(108,92,231,0.10); border-color: var(--accent-color); }
.docs-modal-item > .fa-file-pdf { color: #ff5b5b; font-size: 20px; flex-shrink: 0; }
.docs-modal-name { flex: 1; font-size: 14px; font-weight: 600; }
.docs-modal-dl { color: var(--text-secondary); font-size: 14px; flex-shrink: 0; }

/* «Ваша статистика» — под-категории (Соккет / Steam / EpicGames) с баннером */
.gs-section {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-input);
    margin-bottom: 18px;
}
.gs-section-banner {
    position: relative;
    width: 100%;
    /* Та же ориентация, что и баннеры под-категорий рамок в магазине —
       изображения 4000x850. Коробка повторяет пропорции, картинка влезает
       целиком без обрезки. */
    aspect-ratio: 4000 / 850;
    background: linear-gradient(135deg, rgba(108,92,231,0.18), rgba(108,92,231,0.05));
    border-bottom: 1px solid var(--border-color);
}
.gs-section-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-section-banner-ph {
    display: none;
    position: absolute; inset: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: var(--text-secondary); opacity: 0.6;
}
.gs-section-banner-ph i { font-size: 22px; }
.gs-section-banner-ph span { font-size: 12px; font-weight: 600; letter-spacing: 0.3px; }
.gs-section-banner.is-empty .gs-section-banner-ph { display: flex; }

/* Аватар пользователя поверх «чёрного круга» баннера «Статистика Соккет».
   Позиция/размер привязаны к конкретному баннеру 4000x850 — если перерисуете
   баннер и круг сместится, подправьте только эти три переменные (в % от
   ширины/высоты баннера): --gs-av-x (центр по X), --gs-av-y (центр по Y),
   --gs-av-size (диаметр в % от ширины баннера). */
.gs-banner-avatar {
    --gs-av-x: 50%;
    --gs-av-y: 50%;
    --gs-av-size: 18%;
    position: absolute;
    left: var(--gs-av-x);
    top: var(--gs-av-y);
    transform: translate(-50%, -50%);
    width: var(--gs-av-size);
    aspect-ratio: 1;
    z-index: 4;
}
/* Баннеры «Статистика игр Steam» и «EpicGames» (тоже 4000x850): аватар
   Соккета слева с центром в 900px от левого края (900/4000 = 22.5%), на
   Steam-баннере справа ещё аватар Steam с центром в 900px от правого края
   (3100/4000 = 77.5%). */
.gs-banner-avatar--left  { --gs-av-x: 22.5%; }
.gs-banner-avatar--right { --gs-av-x: 77.5%; }
.gs-banner-avwrap { position: relative; width: 100%; height: 100%; }
.gs-banner-av {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
/* Рамка плотнее, чем в списке диалогов (там 130%): здесь круг занимает почти
   всю высоту баннера, поэтому рамку поджимаем, чтобы аватар целиком закрывал
   чёрный круг, а рамка не вылезала на заголовок секции снизу. */
.gs-banner-frame {
    position: absolute; top: -8%; left: -8%;
    width: 116%; height: 116%;
    z-index: 2; pointer-events: none;
}
/* .presence-dot добавляется из JS. По умолчанию она фиксированная (14px) и на
   увеличенном аватаре «отлетает» в угол — здесь масштабируем её в % от размера
   аватара, чтобы точка села ровно на край круга и плотно прилегала. */
.gs-banner-avatar .presence-dot {
    width: 18%; height: 18%;
    right: 6%; bottom: 6%;
    border-width: 2px;
}
.gs-banner-avatar .presence-dot.is-game {
    width: 28%; height: 28%;
    right: 1%; bottom: 1%;
}

.gs-section-main { padding: 14px; }
.gs-section-head {
    display: flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 12px;
}
.gs-section-head i { color: var(--accent-color, #6c5ce7); font-size: 15px; width: 18px; text-align: center; }

/* Игровая статистика (Steam) — раздел настроек и модалка мини-профиля */
.gs-loading, .gs-empty { text-align: center; color: var(--text-secondary); padding: 28px 16px; }
.gs-empty i { font-size: 26px; display: block; margin-bottom: 10px; opacity: 0.7; }
.gs-empty--sm { padding: 16px; }
.gs-empty--sm i { font-size: 18px; margin-bottom: 6px; }
.gs-list { display: flex; flex-direction: column; gap: 10px; }
.gs-game { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; background: var(--bg-body); }
.gs-subhead { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; color: var(--text-secondary); margin: 16px 2px 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.gs-subhead:first-child { margin-top: 2px; }
.gs-subhead--gold { color: #e8b332; }
.gs-game--perfect {
    border-color: rgba(232, 179, 50, 0.55);
    background-color: var(--bg-body);
    background-image: linear-gradient(110deg,
        rgba(232, 179, 50, 0.10) 0%,
        rgba(255, 226, 130, 0.30) 25%,
        rgba(232, 179, 50, 0.10) 50%,
        rgba(255, 226, 130, 0.30) 75%,
        rgba(232, 179, 50, 0.10) 100%);
    background-size: 220% 100%;
    animation: gsGoldShimmer 6s linear infinite;
}
@keyframes gsGoldShimmer { from { background-position: 0% 0; } to { background-position: -220% 0; } }
.gs-game--perfect .gs-game-name { color: #ffd968; }
.gs-game--perfect .gs-game-head:hover { background: rgba(232, 179, 50, 0.10); }
.gs-game-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; transition: background 0.2s; }
.gs-game-head:hover { background: rgba(108,92,231,0.08); }
.gs-game-banner { width: 92px; height: 43px; flex-shrink: 0; border-radius: 6px; background-color: #1a1a1f; background-size: cover; background-position: center; }
.gs-game-info { flex: 1; min-width: 0; }
.gs-game-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-game-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.gs-game-arrow { color: var(--text-secondary); font-size: 13px; transition: transform 0.2s; }
.gs-game.gs-open .gs-game-arrow { transform: rotate(180deg); }
.gs-game-body { padding: 4px 12px 14px; border-top: 1px solid var(--border-color); }
.gs-ach-progress { margin: 12px 0 14px; }
.gs-ach-progress-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.gs-ach-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.gs-ach-bar-fill { height: 100%; background: linear-gradient(90deg, #6c5ce7, #a78bfa); border-radius: 4px; }
.gs-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.gs-ach { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); }
.gs-ach img, .gs-ach-noimg { width: 34px; height: 34px; border-radius: 7px; flex-shrink: 0; object-fit: cover; }
.gs-ach-noimg { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.gs-ach.is-off { opacity: 0.5; }
.gs-ach.is-off img { filter: grayscale(1); }
.gs-ach-meta { min-width: 0; }
.gs-ach-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-ach-rarity { font-size: 11px; color: #b9d33e; }
.gs-stats { margin-top: 16px; }
.gs-stats-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 8px; }
.gs-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.gs-stat { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); font-size: 12px; }
.gs-stat-k { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-stat-v { font-weight: 700; flex-shrink: 0; }

/* ── Инвентарь игры (Steam) ──────────────────────────────────────────────
   Живёт внутри раскрытой карточки игры, под достижениями. Цвет редкости
   приходит от Steam и подставляется в --gs-rar (валидный HEX проверяет
   normalizeSteamColor на сервере) — им красится левая кромка и название. */
.gs-inv { margin-top: 16px; }
.gs-inv-title { display: flex; align-items: center; gap: 7px; }
.gs-inv-note { font-size: 11px; color: var(--text-secondary); margin: -2px 0 8px; }
.gs-inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gs-inv-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    min-width: 0;
}
.gs-inv-item.has-rarity { border-left-color: var(--gs-rar); }
.gs-inv-ico { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.gs-inv-ico img, .gs-inv-noimg {
    width: 40px; height: 40px; border-radius: 7px; object-fit: contain;
    background: rgba(255,255,255,0.05); display: block;
}
.gs-inv-noimg { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
/* Счётчик одинаковых предметов — «×12» в углу иконки. */
.gs-inv-amount {
    position: absolute; right: -3px; bottom: -3px;
    padding: 0 4px; border-radius: 7px;
    background: var(--accent-color); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.gs-inv-meta { min-width: 0; }
.gs-inv-name {
    font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-inv-item.has-rarity .gs-inv-name { color: var(--gs-rar); }
.gs-inv-sub {
    font-size: 11px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Скролл в модалке статистики чужого профиля — тот же accent-скроллбар, что
   и в «Настройках» (см. .settings-page). */
#gameStatsModalBody {
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 92, 231, 0.35) transparent;
}
#gameStatsModalBody::-webkit-scrollbar { width: 6px; }
#gameStatsModalBody::-webkit-scrollbar-track { background: transparent; }
#gameStatsModalBody::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.28);
    border-radius: 10px;
    transition: background 0.2s;
}
#gameStatsModalBody::-webkit-scrollbar-thumb:hover { background: rgba(108, 92, 231, 0.55); }
.forward-section-label { color: #777; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; padding: 10px 6px 4px; }
.forward-show-more { text-align: center; color: #6c5ce7; font-size: 14px; font-weight: 600; padding: 12px; cursor: pointer; border-radius: 10px; transition: background 0.2s; }
.forward-show-more:hover { background: rgba(108,92,231,0.12); }
#forwardResults .chat-list-item { cursor: pointer; }
.modal-header { font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; color: #fff; }
.group-avatar-upload { display: flex; align-items: center; gap: 15px; }
.group-avatar-preview { width: 60px; height: 60px; border-radius: 50%; background: var(--bg-element); object-fit: cover; border: 1px solid var(--border-color); }
.upload-btn { background: var(--bg-element); border: 1px solid var(--border-color); color: #fff; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.user-select-list { max-height: 200px; overflow-y: auto; background: var(--bg-input); border-radius: 12px; }
.user-select-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; border-radius: 10px; transition: all 0.2s; }
.user-select-item:hover { background: rgba(108, 92, 231, 0.08); }
.user-select-item img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.user-select-item span { flex: 1; font-size: 14px; font-weight: 600; color: #fff; font-family: 'Inter', sans-serif; }
.user-select-item.selected { background: rgba(108, 92, 231, 0.18); }
.user-select-item.selected:hover { background: rgba(108, 92, 231, 0.25); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.modal-btn { padding: 8px 15px; border-radius: 10px; cursor: pointer; border: none; font-weight: 600; transition: all 0.2s; }
.modal-btn.cancel { background: var(--bg-element); color: #fff; border: 1px solid var(--border-color); }
.modal-btn.cancel:hover { background: rgba(255,255,255,0.08); }
.modal-btn.create { background: var(--accent-color); color: #fff; box-shadow: 0 4px 12px var(--accent-glow); }
.modal-btn.create:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-glow); }
.modal-btn.danger { background: linear-gradient(135deg, #ff4757, #d63042); color: #fff; box-shadow: 0 4px 12px rgba(255, 71, 87, 0.35); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.modal-btn.danger:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 71, 87, 0.5); }
.modal-btn.danger:disabled { opacity: 0.65; cursor: wait; transform: none; }

/* ── Logout Modal ── */
.logout-modal-content {
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 28px 26px 22px;
    background: linear-gradient(180deg, var(--bg-element), var(--bg-panel));
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    text-align: center;
    align-items: center;
    gap: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 71, 87, 0.06) inset;
}
.logout-modal-icon-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, rgba(255, 71, 87, 0.22), rgba(255, 71, 87, 0.05) 70%, transparent 100%);
    margin-bottom: 4px;
}
.logout-modal-icon-glow {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: rgba(255, 71, 87, 0.12);
    border: 1px solid rgba(255, 71, 87, 0.35);
    box-shadow: 0 0 24px rgba(255, 71, 87, 0.4), inset 0 0 12px rgba(255, 71, 87, 0.2);
}
.logout-modal-icon-wrap i {
    position: relative;
    font-size: 28px;
    color: #ff4757;
    filter: drop-shadow(0 2px 6px rgba(255, 71, 87, 0.45));
}
.logout-modal-title {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
}
.logout-modal-text {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 290px;
    margin: 0 auto;
}
.logout-modal-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
}
.logout-modal-btn {
    flex: 1;
    padding: 11px 14px;
    font-size: 14px;
    border-radius: 12px;
}

/* ── Typing ── */
.typing-dots::after {
    content: '.';
    animation: typing 1.5s steps(5, end) infinite;
}
@keyframes typing {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60% { content: '...'; }
    80%, 100% { content: ''; }
}

/* ── Photo Modal ── */
.photo-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.92); z-index: 5000;
    display: none; align-items: center; justify-content: center;
    flex-direction: column;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.photo-modal img {
    max-width: 90%; max-height: 85%;
    border-radius: 8px; box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.photo-modal-close {
    position: absolute; top: 20px; right: 30px;
    color: #fff; font-size: 30px; cursor: pointer;
    transition: transform 0.2s;
}
.photo-modal-close:hover { transform: rotate(90deg); }

/* ── Chat Header (Floating Pill) ── */
.chat-header {
    justify-content: center !important;
    position: relative;
    overflow: visible;
}
.chat-header-content {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s;
}
.chat-header-content:hover { opacity: 0.8; }

.chat-settings-btn {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary); font-size: 18px; cursor: pointer; padding: 10px;
    transition: all 0.2s;
}
.chat-settings-btn:hover { color: #fff; }

.back-btn { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }

/* ── Video Circle Hot-Bar (active playback strip in chat header) ── */
/* bottom отсчитывается от низа .chat-header (header высотой 60px).
   Сдвигаем хот-бар ВНИЗ от шапки с отступом ~16px, чтобы он
   читался как отдельный плавающий элемент, а не «прилипал» к блоку
   пользователя (аватар/имя/уровень собеседника). */
.vn-hotbar {
    position: absolute;
    left: 0; right: 0; bottom: -62px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: linear-gradient(135deg, rgba(108,92,231,0.22) 0%, rgba(26,26,32,0.95) 50%, rgba(26,26,32,0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(108,92,231,0.3);
    border-radius: 15px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(108,92,231,0.08);
    z-index: 110;
    pointer-events: auto;
    animation: vnHotBarIn 0.28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vnHotBarIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.vn-hotbar-btn {
    width: 32px; height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(108,92,231,0.25);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.vn-hotbar-btn:hover { background: rgba(108,92,231,0.55); transform: scale(1.06); }
.vn-hotbar-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vn-hotbar-title {
    color: #cfcad9;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vn-hotbar-track {
    position: relative;
    height: 6px;
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
    cursor: pointer;
    overflow: visible;
    padding: 8px 0;
    margin: -8px 0;
    background-clip: content-box;
}
.vn-hotbar-progress {
    position: absolute;
    top: 8px; left: 0;
    height: 6px;
    width: 0%;
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
    border-radius: 3px;
    pointer-events: none;
    /* RAF обновляет ширину каждый кадр — transition даёт «догоняющий» лаг. */
    will-change: width;
}
.vn-hotbar-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
    pointer-events: none;
    will-change: left;
    /* transform-only transition для hover-scale без affect на left */
    transition: transform 0.18s ease;
}
.vn-hotbar-track:hover .vn-hotbar-thumb { transform: translate(-50%, -50%) scale(1.25); }
.vn-hotbar-time {
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    min-width: 70px;
    text-align: right;
}

.voice-mini {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 24px));
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(108,92,231,0.24) 0%, rgba(26,26,32,0.96) 55%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(108,92,231,0.3);
    border-radius: 15px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(108,92,231,0.08);
    z-index: 1200;
    animation: voiceMiniIn 0.28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes voiceMiniIn {
    from { transform: translateX(-50%) translateY(-130%); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}
.voice-mini-btn {
    width: 32px; height: 32px;
    border: none; border-radius: 50%;
    background: rgba(108,92,231,0.25);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
}
.voice-mini-btn:hover { background: rgba(108,92,231,0.55); transform: scale(1.06); }
.voice-mini-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.voice-mini-title {
    color: #cfcad9; font-size: 11px; font-weight: 600;
    font-family: 'Inter', sans-serif; letter-spacing: 0.3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.voice-mini-title i { color: #a29bfe; margin-right: 4px; }
.voice-mini-track {
    position: relative; height: 6px;
    background: rgba(255,255,255,0.12); border-radius: 3px;
    cursor: pointer; overflow: visible;
    padding: 8px 0; margin: -8px 0; background-clip: content-box;
}
.voice-mini-progress {
    position: absolute; top: 8px; left: 0; height: 6px; width: 0%;
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
    border-radius: 3px; pointer-events: none; will-change: width;
}
.voice-mini-thumb {
    position: absolute; top: 50%; left: 0%;
    width: 14px; height: 14px; background: #fff; border-radius: 50%;
    transform: translate(-50%, -50%); box-shadow: 0 1px 6px rgba(0,0,0,0.5);
    pointer-events: none; will-change: left; transition: transform 0.18s ease;
}
.voice-mini-track:hover .voice-mini-thumb { transform: translate(-50%, -50%) scale(1.25); }
.voice-mini-time {
    color: #fff; font-size: 11px; font-weight: 600;
    font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
    flex-shrink: 0; min-width: 42px; text-align: right;
}

/* ── Context Menu ── */
.context-menu {
    position: absolute; display: none; flex-direction: column;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 14px; box-shadow: var(--shadow-ambient); z-index: 9999; overflow: hidden; min-width: 180px;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    animation: fadeInModal 0.15s ease;
}
.context-item { padding: 12px 15px; color: #fff; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 14px; transition: all 0.2s; }
.context-item:hover { background: rgba(108, 92, 231, 0.12); }
.context-item:hover i { color: var(--accent-color); }
.context-item.danger, .context-item.danger i { color: #ff4757; }
.context-item.danger:hover { background: rgba(255, 71, 87, 0.1); }
.context-item.danger:hover i { color: #ff4757; }

/* ── Emoji Picker ── */
.emoji-picker { position: absolute; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 10px; display: none; gap: 5px; box-shadow: var(--shadow-ambient); z-index: 100; flex-wrap: wrap; width: 220px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.emoji-btn { font-size: 20px; cursor: pointer; padding: 5px; border-radius: 8px; background: transparent; border: none; transition: all 0.2s; }
.emoji-btn:hover { background: rgba(108, 92, 231, 0.15); transform: scale(1.15); }

/* ── Notifications (Gold Shimmer) ── */
#notification-area {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 99999; display: flex; flex-direction: column; align-items: center;
    gap: 10px; pointer-events: none; width: 360px; max-width: calc(100vw - 24px);
}
.toast {
    background: linear-gradient(120deg, #1a1200 0%, #2b1f05 35%, #3a2a08 60%, #2b1f05 80%, #1a1200 100%);
    background-size: 300% 100%;
    animation: toastGoldShimmer 4s ease infinite;
    border: 1px solid rgba(212,175,55,0.35);
    box-shadow: 0 6px 28px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,215,0,0.12);
    padding: 13px 16px; border-radius: 16px; color: #fff;
    width: 100%; display: flex; align-items: center; gap: 12px;
    pointer-events: all; cursor: default; user-select: none;
    will-change: transform, opacity;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
@keyframes toastGoldShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.ma-premium-shimmer {
    animation: premiumShimmer 4s ease infinite !important;
}
@keyframes premiumShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.profile-card-premium-shimmer {
    background-size: 300% 100% !important;
    animation: premiumShimmer 4s ease infinite;
}

.toast img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(212,175,55,0.3); object-fit: cover; }
.toast-content { flex: 1; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 700; color: #f5d876; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-msg { font-size: 12px; color: #ddd; margin-top: 2px; line-height: 1.4; }
.toast-close { background: rgba(255,255,255,0.1); border: none; color: var(--text-secondary); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.toast-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* ── Menus ── */
.menu-list { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.menu-item { padding: 10px; background: var(--bg-element); border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 14px; transition: all 0.2s; border: 1px solid transparent; }
.menu-item:hover { background: rgba(108, 92, 231, 0.08); border-color: rgba(108, 92, 231, 0.15); }
.menu-item.danger { color: #ff4757; }
.menu-item.danger:hover { background: rgba(255, 71, 87, 0.08); border-color: rgba(255, 71, 87, 0.15); }
.menu-item i { width: 20px; text-align: center; color: var(--text-secondary); }
.menu-item:hover i { color: var(--accent-color); }
.menu-item.danger i, .menu-item.danger:hover i { color: #ff4757; }

/* ── Unread Divider ── */
.unread-divider {
  width: 100%;
  border-bottom: 1px solid var(--accent-color);
  line-height: 0.1em;
  margin: 20px 0;
  color: var(--accent-color);
}
.unread-divider span { background: var(--bg-body); padding: 0 10px; }

/* ── System Messages (единый стиль с разделителями дат «Сегодня/Вчера») ── */
.system-msg-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.system-msg-pill {
    background: rgba(108, 92, 231, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(108, 92, 231, 0.1);
}

.system-msg-pill strong,
.system-msg-pill b {
    color: #fff;
    font-weight: 600;
}

/* ── Preview Area (пред-загрузка вложений композера) ── */
.preview-area { display: flex; gap: 10px; padding: 4px 2px 12px; overflow-x: auto; }
.preview-item {
    position: relative;
    width: 112px; height: 112px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-element);
    border: 1px solid var(--border-color);
}
.preview-item img,
.preview-item video { width: 100%; height: 100%; object-fit: cover; display: block; }

.preview-file-ph {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; color: var(--text-secondary);
    background: var(--bg-element);
}
.preview-file-ph i { font-size: 26px; }
.preview-file-ph-name { font-size: 10px; max-width: 88%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Кнопка «убрать» — по центру (готовое вложение, как на макете); во время
   загрузки уезжает в угол, чтобы не перекрывать индикатор прогресса. */
.preview-remove {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.95);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; cursor: pointer;
    transition: background 0.2s, transform 0.15s, border-color 0.2s;
    z-index: 4;
}
.preview-remove:hover { background: var(--danger-color); border-color: var(--danger-color); transform: translate(-50%, -50%) scale(1.06); }

.preview-item--uploading .preview-remove,
.preview-item--error .preview-remove {
    top: 6px; right: 6px; left: auto;
    transform: none;
    width: 22px; height: 22px;
    font-size: 14px;
    border-width: 1px;
    background: rgba(0, 0, 0, 0.6);
}
.preview-item--uploading .preview-remove:hover,
.preview-item--error .preview-remove:hover { transform: scale(1.08); }

.preview-progress {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 3;
}
.preview-progress-bar { width: 72%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.preview-progress-fill { height: 100%; width: 0%; background: var(--accent-color); border-radius: 3px; box-shadow: 0 0 8px var(--accent-glow); transition: width 0.12s linear; }
.preview-progress-text { color: #fff; font-size: 11px; font-weight: 600; }
.preview-progress--error { background: rgba(120, 24, 24, 0.55); color: #fff; font-size: 20px; cursor: pointer; }

/* ── Recording ── */
.recording-dot {
    width: 10px; height: 10px; background-color: #ff4757;
    border-radius: 50%; animation: blink 1s infinite;
    box-shadow: 0 0 8px rgba(255, 71, 87, 0.5);
    flex: none;
}

.recording-timer { font-size: 14px; font-weight: 600; color: var(--text-primary); min-width: 50px; flex: none; white-space: nowrap; }
/* Единственный сжимаемый элемент плашки записи: при узком экране или
   системном увеличении шрифта подпись схлопывается с многоточием, а таймер,
   «Отмена» и кнопка отправки остаются целиком в кадре. */
.recording-text {
    font-size: 13px; color: var(--text-secondary);
    flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cancel-voice-btn {
    color: var(--text-primary); font-size: 13px; cursor: pointer;
    padding: 5px 10px; border-radius: 8px; font-weight: 600;
    transition: all 0.2s;
    flex: none; white-space: nowrap;
}
.cancel-voice-btn:hover { color: #ff4757; background: rgba(255, 71, 87, 0.1); }

/* ── Call Overlay ── */
.call-overlay {
  position: fixed;
  top: 0;
  left: 0;
  /* width:100% (а не 100vw) — 100vw на мобильных включает ширину скроллбара
     и даёт горизонтальное переполнение. height:100dvh — динамическая высота
     вьюпорта: исключает адресную строку браузера, иначе ряд нижних кнопок
     уезжал под неё и казался «пропавшим». 100vh оставлен как фолбэк. */
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(15px);
  z-index: 9999;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
}

.call-header { padding: 20px; text-align: center; color: #fff; font-size: 20px; font-weight: 600; flex-shrink: 0; }
.call-status { font-size: 14px; color: var(--success-color); margin-top: 5px; font-weight: 400; }

.call-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  flex: 1;
  overflow-y: auto;
  align-content: center;
}

.grid-item {
  position: relative;
  background: var(--bg-element);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-ambient);
  border: 3px solid transparent;
  transition: all 0.3s ease;
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
}

.call-grid.count-1 .grid-item { width: 100%; max-width: 800px; max-height: 100%; }
.call-grid.count-2 .grid-item { width: calc(50% - 15px); min-width: 300px; }
.call-grid.count-3 .grid-item, .call-grid.count-4 .grid-item { width: calc(50% - 15px); min-width: 300px; max-height: 50vh; }
.call-grid.count-more .grid-item { width: calc(33.333% - 15px); min-width: 250px; }

.grid-item video {
  width: 100%; height: 100%;
  object-fit: contain !important;
  background: #000;
}

.grid-item .grid-avatar {
  width: 90px; height: 90px; border-radius: 50%; object-fit: cover; z-index: 1;
}

.grid-name {
  position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.6);
  padding: 5px 12px; border-radius: 10px; font-size: 13px; color: #fff; font-weight: 500; z-index: 10;
  backdrop-filter: blur(5px);
}

.grid-item.speaking { border-color: var(--success-color); box-shadow: 0 0 25px rgba(46, 213, 115, 0.4); }

.call-controls {
  padding: 30px; display: flex; justify-content: center; gap: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  flex-shrink: 0;
  flex-wrap: wrap;        /* fallback на случай, если inline-стиль не подхватился */
  align-items: center;
  /* iOS notch — без env() ряд кнопок мог уезжать под home-bar и казаться «пропавшим» */
  padding-bottom: max(30px, env(safe-area-inset-bottom));
}
/* На узких экранах (телефоны) уменьшаем кнопки и отступы, чтобы все
   гарантированно влезли в одну-две строки и точно НЕ обрезались за
   пределами viewport — это был один из репортов «пропали кнопки». */
@media (max-width: 600px) {
  .call-controls {
    padding: 14px 10px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    gap: 10px;
  }
  .call-btn {
    width: 50px; height: 50px; font-size: 20px;
  }
  .fps-toggle { height: 50px; }
  .fps-option { padding: 0 12px; font-size: 13px; }
}
.call-btn {
  width: 60px; height: 60px; border-radius: 50%; border: none; font-size: 24px; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s;
}
.call-btn:hover { transform: scale(1.1); }
.call-btn.mic { background: rgba(255,255,255,0.1); }
.call-btn.mic.muted { background: #fff; color: #333; }
.call-btn.mic.ptt-mode { box-shadow: inset 0 0 0 1px rgba(169,157,255,0.65); }
.call-btn.mic.ptt-speaking, .pip-btn.mic.ptt-speaking, .rc-btn.rc-mic.ptt-speaking {
  color: #fff; background: #6c5ce7; box-shadow: 0 0 18px rgba(108,92,231,0.62);
}
.call-btn.cam { background: rgba(255,255,255,0.1); }
.call-btn.cam.off { background: #fff; color: #333; }
.call-btn.hangup { background: #ff4757; box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4); }
.call-btn.hangup:hover { background: #ff6b81; box-shadow: 0 6px 20px rgba(255, 71, 87, 0.5); }
.call-btn.switch-cam { background: rgba(255,255,255,0.1); }
.call-btn.screen { background: rgba(255,255,255,0.1); }
.call-btn.screen.active { background: var(--success-color); color: #fff; box-shadow: 0 0 15px rgba(46, 213, 115, 0.4); }

.call-minimize-btn {
  position: absolute; top: 20px; left: 20px; background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border); border-radius: 14px; color: #fff; font-size: 15px; font-weight: 500;
  padding: 8px 15px; cursor: pointer; display: flex; align-items: center; gap: 8px; z-index: 10;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
}
.call-minimize-btn:hover { background: rgba(255,255,255,0.15); }

/* ── Call PIP ── */
.call-pip {
  position: fixed; top: 80px; right: 20px; width: 220px;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: var(--shadow-ambient);
  z-index: 10000; display: flex; flex-direction: column; overflow: hidden;
}
.pip-drag-handle {
  background: rgba(255,255,255,0.03); color: #555; text-align: center; padding: 4px;
  cursor: grab; font-size: 12px; touch-action: none;
}
.pip-drag-handle:active { cursor: grabbing; }
.pip-info { padding: 10px; text-align: center; color: #fff; border-bottom: 1px solid var(--border-color); }
.pip-info #pipName { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pip-timer { font-size: 13px; color: var(--success-color); margin-top: 4px; font-weight: 500; }
.pip-controls { display: flex; justify-content: space-around; padding: 10px; }
.pip-btn {
  background: transparent; border: none; color: #fff; cursor: pointer;
  font-size: 16px; width: 36px; height: 36px; border-radius: 50%; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.pip-btn:hover { background: rgba(108, 92, 231, 0.15); }
.pip-btn.hangup { color: #f04747; background: rgba(240, 71, 71, 0.1); }
.pip-btn.hangup:hover { background: #f04747; color: #fff; }
.pip-btn.mic.muted { color: #f04747; }

/* ── PiP demo-screen embed (Discord-style) ── */
/* Когда в звонке кто-то шарит экран, в драг-окне показываем живой
   превью экрана: pip становится не «аватар + имя», а реальный видео-кадр.
   Клик — открывает на весь экран (см. .call-screen-fullscreen ниже).
   Используем JS-toggled класс .has-screen вместо :has(), потому что
   :has() на части мобильных WebKit парсится как invalid и в режиме
   восстановления старые движки могут пропустить соседние правила —
   из-за этого «пропадали кнопки на некоторых устройствах». */
.call-pip.has-screen {
    width: 280px;
}
.pip-screen-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    cursor: zoom-in;
    border-bottom: 1px solid var(--border-color);
}
.pip-screen-container {
    position: absolute; inset: 0;
}
.pip-screen-container video {
    width: 100% !important; height: 100% !important; object-fit: contain !important;
}
.pip-screen-overlay-label {
    position: absolute; left: 8px; bottom: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 8px;
    display: flex; align-items: center; gap: 6px;
    pointer-events: none;
    max-width: calc(100% - 32px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pip-screen-overlay-label i { color: #6c5ce7; }
.pip-screen-expand-hint {
    position: absolute; top: 8px; right: 8px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    pointer-events: none;
    opacity: 0; transition: opacity 0.18s;
}
.pip-screen-wrap:hover .pip-screen-expand-hint { opacity: 1; }

/* ── Fullscreen screen-share viewer ── */
.call-screen-fullscreen {
    position: fixed; inset: 0;
    z-index: 10001;
    background: #000;
    display: flex;
    flex-direction: column;
    animation: callScreenFsIn 0.22s ease;
}
@keyframes callScreenFsIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.call-screen-fs-topbar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    position: absolute; top: 0; left: 0; right: 0;
    z-index: 2;
    pointer-events: none;
}
.call-screen-fs-topbar > * { pointer-events: auto; }
.call-screen-fs-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 600;
    background: rgba(0,0,0,0.45);
    padding: 6px 12px; border-radius: 10px;
}
.call-screen-fs-title i { color: #6c5ce7; }
.call-screen-fs-close {
    width: 40px; height: 40px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    transition: background 0.18s;
}
.call-screen-fs-close:hover { background: rgba(255,255,255,0.18); }
.call-screen-fs-container {
    flex: 1 1 auto;
    position: relative;
    width: 100%;
    height: 100%;
}
.call-screen-fs-container video {
    width: 100% !important; height: 100% !important;
    object-fit: contain !important;
    background: #000;
}

/* ── «Смотреть» overlay поверх плитки шарящего ──────────────────────
   Видео под ним продолжает играть, мы лишь накладываем размытое
   стекло + кнопку по центру. Жмёшь — открывается fullscreen.
   На самом шарящем эта плашка не отрисовывается (см. syncWatchOverlay
   в chat_calls_extras.js). ─────────────────────────────────────── */
.grid-screen-watch-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    overflow: hidden;
    cursor: default;
    pointer-events: auto;
    animation: gridWatchIn 0.22s ease;
}
@keyframes gridWatchIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.grid-screen-watch-backdrop {
    position: absolute;
    inset: 0;
    /* Размываем видео ПОД оверлеем — пользователь видит силуэт того,
       что шарят, но в превью разобрать невозможно. Кликнул → fullscreen. */
    backdrop-filter: blur(22px) saturate(1.05) brightness(0.55);
    -webkit-backdrop-filter: blur(22px) saturate(1.05) brightness(0.55);
    background: rgba(8, 10, 16, 0.35);
}
.grid-screen-watch-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.95), rgba(108, 92, 231, 0.65));
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.45), 0 0 0 1px rgba(255,255,255,0.08) inset;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.grid-screen-watch-btn:hover {
    transform: translateY(-1px) scale(1.03);
    background: linear-gradient(135deg, #7d70ec, #6c5ce7);
    box-shadow: 0 14px 40px rgba(108, 92, 231, 0.55);
}
.grid-screen-watch-btn:active { transform: scale(0.97); }
.grid-screen-watch-btn i { font-size: 14px; }

/* На очень узких плитках кнопка становится компактной (только иконка) */
@media (max-width: 600px) {
    .grid-screen-watch-btn {
        padding: 10px 18px;
        font-size: 13px;
    }
}

/* ── Incoming Call Modal ── */
.incoming-call-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: radial-gradient(ellipse at center, rgba(20, 25, 35, 0.92) 0%, rgba(0, 0, 0, 0.95) 100%);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  display: flex; align-items: center; justify-content: center;
  /* Внутренний отступ + box-sizing — чтобы карточка с кнопками никогда
     не упиралась в края экрана на планшетах/телефонах. */
  padding: 20px; box-sizing: border-box;
  animation: incomingFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes incomingFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.incoming-call-modal-content {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative; padding: 48px 56px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 120px rgba(46, 213, 115, 0.06);
  /* Карточка не должна выходить за пределы видимой области. */
  max-width: 100%; box-sizing: border-box;
}

.incoming-call-pulse-ring {
  position: absolute; top: 48px; left: 50%; width: 130px; height: 130px;
  transform: translateX(-50%);
  border-radius: 50%; border: 2px solid rgba(46, 213, 115, 0.35);
  animation: pulseRing 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
.incoming-call-pulse-ring.ring-2 {
  animation-delay: 1.2s;
  border-color: rgba(46, 213, 115, 0.2);
}
@keyframes pulseRing {
  0% { transform: translateX(-50%) scale(1); opacity: 0.7; }
  100% { transform: translateX(-50%) scale(2.5); opacity: 0; }
}

.incoming-call-avatar-glow {
  position: absolute; top: 58px; left: 50%; width: 110px; height: 110px;
  transform: translateX(-50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(46, 213, 115, 0.2) 0%, transparent 70%);
  animation: avatarGlow 3s ease-in-out infinite;
}
@keyframes avatarGlow {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
}

.incoming-call-modal-avatar {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(46, 213, 115, 0.5);
  box-shadow: 0 0 50px rgba(46, 213, 115, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px; position: relative; z-index: 1;
  animation: avatarFloat 3s ease-in-out infinite;
}
@keyframes avatarFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.incoming-call-modal-name {
  font-size: 24px; font-weight: 700; color: #fff;
  margin-bottom: 8px; letter-spacing: 0.3px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.incoming-call-modal-status {
  font-size: 14px; color: rgba(46, 213, 115, 0.9); font-weight: 500;
  margin-bottom: 44px; display: flex; align-items: center; gap: 8px;
  animation: pulseText 2s infinite;
}
.incoming-call-icon-shake {
  font-size: 13px;
  animation: phoneShake 0.8s ease-in-out infinite;
  display: inline-block;
}
@keyframes phoneShake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(15deg); }
  30% { transform: rotate(-15deg); }
  45% { transform: rotate(12deg); }
  60% { transform: rotate(-10deg); }
  75% { transform: rotate(5deg); }
}
@keyframes pulseText { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.incoming-call-modal-actions {
  display: flex; gap: 72px; align-items: center;
}

.incoming-call-action-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}

.incoming-call-btn {
  width: 68px; height: 68px; border-radius: 50%; border: none;
  font-size: 26px; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}
.incoming-call-btn:hover { transform: scale(1.15); }
.incoming-call-btn:active { transform: scale(0.92); }

.incoming-call-btn.accept {
  background: linear-gradient(135deg, #2ed573, #20bf6b);
  box-shadow: 0 6px 28px rgba(46, 213, 115, 0.45), 0 0 60px rgba(46, 213, 115, 0.15);
  animation: btnAcceptPulse 2s infinite;
}
@keyframes btnAcceptPulse {
  0%, 100% { box-shadow: 0 6px 28px rgba(46, 213, 115, 0.45), 0 0 60px rgba(46, 213, 115, 0.15); }
  50% { box-shadow: 0 6px 40px rgba(46, 213, 115, 0.7), 0 0 80px rgba(46, 213, 115, 0.25); }
}

.incoming-call-btn.decline {
  background: linear-gradient(135deg, #f04747, #d63031);
  box-shadow: 0 6px 25px rgba(240, 71, 71, 0.35);
}
.incoming-call-btn.decline:hover {
  box-shadow: 0 6px 35px rgba(240, 71, 71, 0.55);
}

.incoming-call-btn-label {
  font-size: 12px; color: rgba(255, 255, 255, 0.5); font-weight: 500;
  letter-spacing: 0.5px; text-transform: uppercase;
}

/* Узкие экраны (планшеты/телефоны): ужимаем отступы карточки и расстояние
   между кнопками, чтобы «Принять/Отклонить» не уезжали за края браузера. */
@media (max-width: 600px) {
  .incoming-call-modal-content { padding: 36px 24px; border-radius: 24px; }
  .incoming-call-modal-actions { gap: clamp(28px, 14vw, 56px); }
  .incoming-call-btn { width: 62px; height: 62px; font-size: 24px; }
  .incoming-call-modal-avatar { width: 100px; height: 100px; }
  .incoming-call-modal-name { font-size: 21px; }
}
@media (max-width: 360px) {
  .incoming-call-modal-content { padding: 28px 16px; }
  .incoming-call-modal-actions { gap: 24px; }
  .incoming-call-btn { width: 56px; height: 56px; font-size: 22px; }
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
.call-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    height: 100%;
}

.call-grid.count-1 .grid-item {
    width: 100% !important;
    height: 50vh !important;
    max-height: 400px !important;
    aspect-ratio: auto !important;
}

.call-grid.count-2 .grid-item,
.call-grid.count-3 .grid-item,
.call-grid.count-4 .grid-item {
    width: calc(50% - 5px) !important;
    height: 30vh !important;
    min-height: 120px !important;
    aspect-ratio: auto !important;
}

.call-grid.count-more .grid-item {
    width: calc(33.333% - 7px) !important;
    height: 20vh !important;
    min-height: 100px !important;
    aspect-ratio: auto !important;
}

.grid-item .grid-avatar {
    width: 60px !important;
    height: 60px !important;
}

.chat-sidebar.hidden { display: none; }
.back-btn { display: block; }

.chat-sidebar {
    width: 100% !important;
}

.chat-main {
    display: flex !important;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform: translateX(100%);
    transition: transform 0.3s var(--transition-smooth);
    z-index: 100;
    background-color: var(--bg-body);
}

.chat-main.active { transform: translateX(0); }
.chat-main.dragging { transition: none; }
}

@media (max-width: 360px) {
.input-area-wrapper {
    padding: 8px 10px;
    box-sizing: border-box;
    width: 100%;
}

.tg-input-container {
    padding: 4px 5px 4px 12px;
    min-height: 44px;
}

.send-btn, .voice-btn {
    width: 36px;
    height: 36px;
    font-size: 15px;
}

.input-controls {
    gap: 6px;
}
}

/* ── FPS Toggle ── */
.fps-toggle {
    display: flex;
    background: var(--bg-input);
    border-radius: 12px;
    padding: 4px;
    align-items: center;
    height: 60px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
}

.fps-option {
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
}
.fps-option.active {
    background: var(--accent-color);
    color: #ffffff;
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* ── Upload Progress ── */
.upload-progress-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.upload-progress-bar-bg {
  width: 80%;
  max-width: 200px;
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  overflow: hidden;
}

.upload-progress-bar-fill {
  height: 100%;
  background: var(--accent-color);
  width: 0%;
  transition: width 0.1s linear;
  border-radius: 3px;
  box-shadow: 0 0 8px var(--accent-glow);
}

.upload-progress-text {
  color: #fff;
  font-size: 12px;
  margin-top: 8px;
  font-weight: 600;
}

/* ── Avatar Wrappers ── */
.chat-avatar-wrapper, .chat-msg-avatar-wrapper {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.chat-avatar-wrapper { width: 50px; height: 50px; margin-right: 12px; }
.chat-avatar-wrapper .chat-avatar { width: 100%; height: 100%; margin-right: 0; }

.chat-msg-avatar-wrapper { width: 28px; height: 28px; }
.chat-msg-avatar-wrapper .chat-card-avatar { width: 100%; height: 100%; }

.chat-avatar-frame {
    position: absolute; top: -15%; left: -15%;
    width: 130%; height: 130%; z-index: 2; pointer-events: none;
}

/* ── Presence dot (онлайн / игра в Steam) ──
   Маленький индикатор в правом-нижнем углу аватара в СПИСКЕ диалогов.
   Базовый вариант — зелёная точка («В сети»), при .is-game точка превращается
   в маленький логотип игры из Steam. Координаты подобраны так, чтобы центр
   точки лёг строго на «5 часов» круглого аватара 50×50 (r=25 → sin45·r≈17.7,
   значит центр индикатора в (42.7, 42.7), правый-нижний край в (49.7, 49.7),
   что и даёт right/bottom = 0).
   В ШАПКЕ открытого диалога индикатор скрыт — там остаётся только текстовый
   статус «В сети» / «Играет в …».
   ВАЖНО про имя класса: внизу файла есть глобальный селектор
   `.chat-list-item [class*="badge"]` (для .unread-badge) с
   `position: static !important;` — он раньше «ловил» нашу .presence-badge
   и роняла её в поток налево-вниз. Поэтому имя НЕ должно содержать слово
   "badge". Если будешь переименовывать — проверь, чтобы новый класс не
   попадал ни под "badge", ни под "unread". Премиум-звезда .prem-badge тоже
   попадала под этот селектор (фон палитры за звездой) — исключена через
   :not(.prem-badge). */
.presence-dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #43b581;
    border: 2px solid var(--bg-panel, #1e1e24);
    box-shadow: 0 0 6px rgba(67, 181, 129, 0.55);
    z-index: 3;
    pointer-events: auto;
    cursor: default;
    box-sizing: border-box;
}
/* Цвет индикатора: база (зелёный) = онлайн на сайте; is-steam = только Steam
   (мягко-синий); is-both = и сайт, и Steam (золотой). См. presenceDotClass. */
.presence-dot.is-steam {
    background: #5b8cff;
    box-shadow: 0 0 6px rgba(91, 140, 255, 0.6);
}
.presence-dot.is-both {
    background: #f3b73e;
    box-shadow: 0 0 6px rgba(243, 183, 62, 0.6);
}
.presence-dot.is-game {
    width: 22px;
    height: 22px;
    right: -4px;
    bottom: -4px;
    border-radius: 6px;
    background: #1b2838;
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--bg-panel, #1e1e24), 0 2px 6px rgba(0, 0, 0, 0.4);
    border: none;
}
.presence-dot.is-game img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* В шапке диалога индикатор полностью скрыт — там работает только текстовый
   subtitle (см. chat_ui_messaging.js → _applyPresenceToHeaderSubtitle). */
.chat-header-avatar-wrapper .presence-dot { display: none !important; }

/* ── Попап действий пользователя (Профиль / Статистика / Инвентарь) ──
   Открывается одним нажатием по аватару в списке диалогов (ПК и мобильные),
   а также из «Поиска» и LFG (window.openMiniProfile → алиас). */
.user-actions-pop {
    position: fixed;
    z-index: 9999;
    min-width: 172px;
    padding: 6px;
    background: linear-gradient(180deg, rgba(30,30,44,0.98), rgba(18,18,26,0.98));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.09));
    border-radius: 14px;
    box-shadow: 0 18px 44px -12px rgba(0,0,0,0.7);
    display: none;
    flex-direction: column;
    gap: 2px;
    animation: uapIn 0.14s ease;
}
.user-actions-pop.is-visible { display: flex; }
@keyframes uapIn { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
.user-actions-pop button {
    display: flex; align-items: center; gap: 10px;
    background: none; border: none; cursor: pointer;
    color: #dfe1ea; font-family: 'Inter', sans-serif;
    font-size: 13.5px; font-weight: 600;
    padding: 9px 12px; border-radius: 9px; text-align: left;
    transition: background 0.15s, color 0.15s;
}
.user-actions-pop button:hover { background: rgba(108,92,231,0.16); color: #fff; }
.user-actions-pop button:active { background: rgba(108,92,231,0.28); }
.user-actions-pop button i { width: 17px; text-align: center; font-size: 13px; color: var(--accent-color, #6c5ce7); }

/* ── Бабл уровня «33 Ур.» ──
   Скруглённый бабл с номером в цветах band'а (палитра BANDS в levels.js) на
   полупрозрачной пилюле. В карточке настроек — напротив ника
   (#myLevelChipHost), в едином окне профиля — справа от баннера (#cpProfileLevel). */
.lvl-chip {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,0.09);
    border-radius: 999px;
    padding: 2px 8px 2px 2px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    transition: background 0.15s;
}
.lvl-chip:hover { background: rgba(255,255,255,0.15); }
/* Компактнее прежнего: бабл слишком тянул на себя внимание в карточке
   профиля, где главное — ник и аватар. */
.lvl-chip-num {
    min-width: 17px; height: 20px;
    padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--lvl-c2), var(--lvl-c1));
    border: 1.5px solid rgba(255,255,255,0.9);
    box-shadow: 0 0 8px -3px var(--lvl-c1);
    color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1;
}
.lvl-chip-lbl { margin-left: 5px; font-size: 11px; font-weight: 700; color: #cfd2dc; }
/* Бабл уровня прижат вправо, но НИКОГДА не сжимается и не выдавливается за
   пределы карточки длинным ником (см. комментарий у .profile-name). */
.profile-level-host { margin-left: auto; display: inline-flex; flex-shrink: 0; }
.profile-level-host .lvl-chip { flex-shrink: 0; }

/* ── Настройка «Посты в профиле» (Настройки, под карточкой профиля) ── */
.pp-setting {
    margin: 0 15px 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 13px 14px;
    flex-shrink: 0;
}
.pp-head { display: flex; align-items: center; gap: 11px; }
.pp-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(108,92,231,0.14);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-color); font-size: 14px; flex-shrink: 0;
}
.pp-titles { flex: 1; min-width: 0; }
.pp-title { color: var(--text-primary); font-size: 14px; font-weight: 700; }
.pp-sub { color: var(--text-secondary); font-size: 11.5px; margin-top: 2px; line-height: 1.35; }
.pp-body { margin-top: 11px; }
.pp-loading { text-align: center; color: #8b8da3; padding: 10px 0; font-size: 15px; }
.pp-empty { display: flex; flex-direction: column; gap: 10px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; }
.pp-create-btn {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(108,92,231,0.16);
    border: 1px solid rgba(108,92,231,0.3);
    color: #9b8cff; font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700;
    padding: 8px 14px; border-radius: 10px; cursor: pointer;
    transition: background 0.15s;
}
.pp-create-btn:hover { background: rgba(108,92,231,0.28); }
.pp-channel {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 9px; border-radius: 11px; cursor: pointer;
    transition: background 0.15s;
}
.pp-channel:hover { background: rgba(255,255,255,0.05); }
.pp-channel img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pp-channel-meta { flex: 1; min-width: 0; }
.pp-channel-name { color: var(--text-primary); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-channel-sub { color: var(--text-secondary); font-size: 11.5px; margin-top: 1px; }
.pp-check {
    width: 21px; height: 21px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-sizing: border-box;
    transition: all 0.15s;
}
.pp-check i { font-size: 9px; color: #fff; opacity: 0; transition: opacity 0.15s; }
.pp-channel.is-selected .pp-check { background: var(--accent-color); border-color: var(--accent-color); }
.pp-channel.is-selected .pp-check i { opacity: 1; }

/* ── Telegram-style Message Menu ── */
.tg-msg-menu {
    position: fixed;
    z-index: 10000;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px var(--glass-border);
    width: 230px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    animation: fadeInModal 0.15s ease;
}

.tg-msg-menu-reactions {
    display: flex;
    padding: 10px 15px;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: auto;
}

.tg-msg-menu-reaction {
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s;
}

.tg-msg-menu-reaction:hover { transform: scale(1.25); }

.tg-msg-menu-list {
    display: flex;
    flex-direction: column;
    padding: 5px 0;
}

.tg-msg-menu-item {
    padding: 10px 15px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.tg-msg-menu-item:hover { background: rgba(108, 92, 231, 0.12); }
.tg-msg-menu-item:hover i { color: var(--accent-color); }
.tg-msg-menu-item.danger { color: #ff4757; }
.tg-msg-menu-item.danger i { color: #ff4757; }

/* Подсветка выделенного сообщения (long-press на телефоне): визуальная копия
   баббла поднимается над затемнением и уезжает к центру, меню — под ней. */
#tgMsgSpotlight {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.22s ease;
    display: none;
}
#tgMsgSpotlight.active { opacity: 1; }
.chat-card.msg-spotlighted {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center center;
    will-change: transform;
}
.chat-card.msg-spotlight-clone {
    pointer-events: none;
}
.chat-card.msg-spotlighted .chat-bubble {
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.55) !important;
}
.tg-msg-menu-item i { width: 20px; text-align: center; color: var(--text-secondary); font-size: 16px; transition: color 0.2s; }

.chat-card {
    -webkit-touch-callout: none;
    user-select: none;
}

/* ── Множественное выделение сообщений (как в Telegram) ──
   Плавно расширяем левый отступ области под колонку кружков-чекбоксов.
   Сам баббл НЕ получает padding/border/box-shadow — его размер не меняется,
   меняется только позиция (сдвиг вправе) и появляется полоса-подсветка. */
#messagesArea { transition: padding-left 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
body.msg-selection-mode #messagesArea { padding-left: 54px; }

body.msg-selection-mode #messagesArea .chat-card {
    cursor: pointer;
    position: relative;
}
/* В режиме выделения клики по медиа/ссылкам не должны открывать вложения —
   ловим клик на уровне карточки и переключаем выделение. */
body.msg-selection-mode #messagesArea .chat-card * { pointer-events: none; }

/* Полоса-подсветка на всю ширину области (от кружка слева до правого края).
   Плавно проявляется фон; геометрия сообщения не затрагивается.
   Вертикальные вылеты подобраны под РЕАЛЬНЫЙ просвет между карточками, иначе
   полоса соседа заезжает на чужое сообщение: между сериями просвет 23px
   (gap 15 + margin-bottom 8), а ВНУТРИ серии всего 2px (margin-bottom: -13px,
   см. правило [data-group]). */
body.msg-selection-mode #messagesArea .chat-card::before {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -54px;
    right: -20px;
    background: rgba(108, 92, 231, 0);
    transition: background 0.2s ease;
    pointer-events: none;
    z-index: 0;
}
/* Низ карточки, за которой сразу идёт продолжение серии. */
body.msg-selection-mode #messagesArea .chat-card[data-group="group-first"]::before,
body.msg-selection-mode #messagesArea .chat-card[data-group="group-middle"]::before {
    bottom: -1px;
}
/* Верх карточки, перед которой стоит предыдущее сообщение той же серии. */
body.msg-selection-mode #messagesArea .chat-card[data-group="group-middle"]::before,
body.msg-selection-mode #messagesArea .chat-card[data-group="group-last"]::before {
    top: -1px;
}
body.msg-selection-mode #messagesArea .chat-card.msg-selected::before {
    background: rgba(108, 92, 231, 0.18);
}

/* Кружок-чекбокс в левой колонке. Появляется с fade + scale (без fill —
   по завершении анимации возвращается к базовому transform). */
body.msg-selection-mode #messagesArea .chat-card::after {
    content: "";
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: #fff;
    z-index: 3;
    transition: background 0.15s ease, border-color 0.15s ease;
    animation: msgSelCheckIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes msgSelCheckIn {
    from { opacity: 0; transform: translateY(-50%) translateX(-6px) scale(0.5); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}
/* Полный префикс — иначе базовое правило (#messagesArea) перебивает content/фон. */
body.msg-selection-mode #messagesArea .chat-card.msg-selected::after {
    content: "\f00c";
    border-color: var(--accent-color, #6c5ce7);
    background: var(--accent-color, #6c5ce7);
}
/* Само сообщение — над полосой подсветки. */
body.msg-selection-mode #messagesArea .chat-card > * { position: relative; z-index: 1; }

/* ── Композер в режиме выделения ──
   Поле ввода уезжает, на его месте — панель «N сообщений» с удалением слева и
   пересылкой справа. display у #textInputContainer дёргает JS (запись ГС),
   поэтому здесь !important. */
.msg-sel-bar { display: none; }
body.msg-selection-mode #textInputContainer,
body.msg-selection-mode #recordingUi { display: none !important; }
/* В канале без права постить композер скрыт целиком — панель выделения там
   всё равно нужна. */
body.msg-selection-mode #inputArea { display: flex !important; }
body.msg-selection-mode .msg-sel-bar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 5px 8px;
    border-radius: 24px;
    background-color: var(--bg-element);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    animation: msgSelBarIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes msgSelBarIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.msg-sel-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.msg-sel-btn:hover { background: rgba(255, 255, 255, 0.07); }
.msg-sel-btn--danger { color: #e05c6b; }
.msg-sel-btn--danger:hover { background: rgba(224, 92, 107, 0.12); }
.msg-sel-count {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-text-content {
    -webkit-touch-callout: default;
    user-select: text;
}

/* ── Messages Area ── */
.messages-area {
    flex: 1;
    padding: 20px;
    padding-top: 90px;
    /* Композер лежит НАД лентой (position:absolute), поэтому место под него
       ленте приходится оставлять самой. Раньше здесь стояло фиксированное
       90px — ровно под односстрочное поле; стоило тексту разрастись (или
       появиться ответу/превью вложений), и поле ввода наползало на последние
       сообщения. Реальную высоту #inputArea пишет в --composer-h
       syncComposerHeight (chat_core.js), фолбэк 68px = пустой композер. */
    padding-bottom: calc(var(--composer-h, 68px) + 22px);
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 15px;
    background-color: rgba(10, 10, 15, 0.95);
    background-image: linear-gradient(rgba(10, 10, 15, 0.95), rgba(10, 10, 15, 0.95)), url('/static/default-icons/background-help-topic.png');
    background-size: 1500px;
    background-repeat: repeat;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* overflow-anchor НЕ выключаем: браузерный scroll anchoring — единственное,
       что держит ленту, когда высота контента над экраном меняется сама
       (догрузка «легаси» картинок без размеров, шрифты). Наши собственные
       компенсации сделаны «померить и добрать остаток», поэтому с ним не
       складываются. Дублирующее правило — в блоке #messagesArea ниже. */
    overflow-anchor: auto;
}

/* ── Input Area ── */
.input-area-wrapper {
    background-color: transparent;
    border-top: none;
    display: none;
    flex-direction: column;
    padding: 10px 15px;
    flex-shrink: 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    box-sizing: border-box;
    max-width: 100%;
}

.mention-suggestions {
    position: absolute;
    left: max(15px, env(safe-area-inset-left));
    right: max(15px, env(safe-area-inset-right));
    bottom: calc(100% - 4px);
    max-height: min(360px, 48vh);
    overflow-y: auto;
    padding: 6px;
    border-radius: 18px;
    background: rgba(28, 28, 31, .98);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .48);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 80;
}
.mention-suggestion {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}
.mention-suggestion:hover,
.mention-suggestion.active { background: rgba(255, 255, 255, .075); }
.mention-suggestion-avatar { position: relative; width: 40px; height: 40px; flex: 0 0 40px; }
.mention-suggestion-avatar > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mention-suggestion-frame { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); pointer-events: none; }
.mention-suggestion-name { min-width: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-suggestion-tag { margin-left: 7px; color: #a9a9b1; font-weight: 500; }

.premium-message-gate {
    position: absolute;
    left: max(15px, env(safe-area-inset-left));
    right: max(15px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 55;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 70px;
    padding: 10px 16px;
    box-sizing: border-box;
    border-radius: 22px;
    color: #fff;
    background: rgba(31, 31, 34, .97);
    border: 1px solid rgba(139, 111, 255, .28);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .4);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.premium-message-gate-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #8e68ef, #6c3ba4);
}
.premium-message-gate-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.premium-message-gate-copy strong { font-size: 14px; line-height: 1.3; }
.premium-message-gate-copy button { padding: 0; border: 0; background: transparent; color: #9b83ff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* ── Композер не должен выезжать за правый край экрана ──
   Поле ввода — это <textarea>, а у неё как у flex-элемента `min-width: auto`
   равен собственной внутренней ширине (cols=20 ≈ 184px при шрифте 15px).
   Chrome на Android умножает px-размеры шрифта на системный масштаб текста
   (в HiOS на TECNO это до 1.5–2×), «минималка» textarea растёт вместе с ним,
   строка перестаёт сжиматься — и правая часть композера (скрепка и круглая
   кнопка ГС/отправки) уходит за экран. Лечится снятием автоматической
   минималки по всей цепочке flex-элементов: сжимается текстовое поле, а
   кнопки остаются на месте. overflow здесь ставить НЕЛЬЗЯ — из обёртки
   вверх выходят панель стикеров, меню скрепки и кнопка «вниз». */
.input-controls,
.tg-input-container,
.msg-input,
.recording-ui,
.recording-text {
    min-width: 0;
}

.input-controls {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    position: relative;
    max-width: 100%;
}

.tg-input-container {
    flex: 1;
    position: relative;
    background-color: var(--bg-element);
    border-radius: 24px;
    display: flex;
    /* По центру — иконка-смайл, текст, скрепка и круглая кнопка (38px) стоят
       на одной вертикальной оси. flex-end оставлял мелкие иконки (24px) ниже
       центра кнопки-действия. */
    align-items: center;
    /* Меньше вертикального паддинга — внутри поля помещается круглая
       кнопка-действие (ГС/видео/отправка, 38px), не раздувая высоту. */
    padding: 5px 6px 5px 14px;
    min-height: 48px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.tg-input-container:focus-within {
    border-color: rgba(108, 92, 231, 0.4);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3), 0 0 0 3px rgba(108, 92, 231, 0.1);
}

.msg-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 0 10px;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: 15px;
    max-height: 120px;
    height: 24px;
    line-height: 24px;
    overflow-y: auto;
}

.tg-icon-btn {
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin: 0;
    transition: all 0.2s;
}
.tg-icon-btn:hover { color: var(--accent-color); }

/* Статус набора живёт внутри самой кнопки композера: смайлик превращается в
   приглушённый аватар, а точки накладываются поверх него. Все размеры
   ограничены кругом 26px, поэтому слой не зависит от ширины экрана. */
.composer-typing-avatar-btn {
    --composer-avatar-size: 26px;
    position: relative; width: 30px; min-width: 30px; border: 0; background: none;
    font: inherit; flex: none; overflow: visible;
}
.composer-smile-icon,
.composer-typing-avatar {
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.75,.2,1), filter .2s ease;
}
.composer-smile-icon { opacity: 1; transform: scale(1) rotate(0); }
.composer-typing-avatar {
    position: absolute; left: 50%; top: 50%; width: var(--composer-avatar-size); height: var(--composer-avatar-size);
    border-radius: 50%; object-fit: cover; opacity: 0; transform: translate(-50%,-50%) scale(.58);
    filter: brightness(.5) saturate(.58); box-shadow: 0 2px 8px rgba(0,0,0,.3);
    pointer-events: none;
}
.composer-typing-avatar-btn.is-typing .composer-smile-icon {
    opacity: 0; transform: scale(.55) rotate(-12deg);
}
.composer-typing-avatar-btn.is-typing .composer-typing-avatar {
    opacity: .64; transform: translate(-50%,-50%) scale(1);
}
.composer-typing-indicator {
    position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.82);
    display: flex; align-items: center; justify-content: center; gap: 2px;
    width: var(--composer-avatar-size); height: var(--composer-avatar-size); opacity: 0; visibility: hidden;
    pointer-events: none; transition: opacity .16s ease, transform .2s ease, visibility 0s linear .2s;
}
.tg-input-container.has-remote-typing .composer-typing-indicator {
    opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1);
    transition-delay: 0s;
}
.composer-typing-indicator > span {
    width: 3px; height: 3px; flex: 0 0 3px; border-radius: 50%; background: rgba(220,219,228,.92);
    box-shadow: 0 1px 2px rgba(0,0,0,.55);
    opacity: 0; transform: scale(.4); animation: composer-typing-dot-one 1.2s ease-in-out infinite;
}
.composer-typing-indicator > span:nth-child(2) { animation-name: composer-typing-dot-two; }
.composer-typing-indicator > span:nth-child(3) { animation-name: composer-typing-dot-three; }
@keyframes composer-typing-dot-one {
    0%, 8% { opacity: 0; transform: scale(.4); }
    15%, 70% { opacity: 1; transform: scale(1); }
    78%, 100% { opacity: 0; transform: scale(.4); }
}
@keyframes composer-typing-dot-two {
    0%, 28% { opacity: 0; transform: scale(.4); }
    36%, 70% { opacity: 1; transform: scale(1); }
    78%, 100% { opacity: 0; transform: scale(.4); }
}
@keyframes composer-typing-dot-three {
    0%, 49% { opacity: 0; transform: scale(.4); }
    57%, 70% { opacity: 1; transform: scale(1); }
    78%, 100% { opacity: 0; transform: scale(.4); }
}
@media (prefers-reduced-motion: reduce) {
    .composer-smile-icon, .composer-typing-avatar, .composer-typing-indicator { transition: none; }
    .composer-typing-indicator > span { animation: none; opacity: .86; transform: none; }
}

/* Круглая кнопка-действие ВНУТРИ поля ввода (справа): ГС / видео-кружок /
   отправка. Сплошной акцентный «пузырь» с белой иконкой (как на скриншоте).
   Простой тап переключает ГС ⇄ видео-кружок, зажатие — запись, при наборе
   текста она превращается в кнопку отправки. Переходы — «пузырик». */
.send-btn, .voice-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    margin-left: 4px;
    color: #fff;
    background: var(--accent-color);
    box-shadow: 0 2px 10px var(--accent-glow);
    transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, filter 0.18s ease;
}
.send-btn:hover, .voice-btn:hover { filter: brightness(1.08); box-shadow: 0 4px 14px var(--accent-glow); }
.send-btn:active, .voice-btn:active { transform: scale(0.9); }

/* Режим видео-кружка — та же круглая кнопка (иконка камеры). */
.voice-btn.video-mode { background: var(--accent-color); }
/* Идёт запись ГС — кнопка-«стоп» красная. */
.voice-btn.recording { background: #ff4757; box-shadow: 0 2px 10px rgba(255, 71, 87, 0.45); }
.send-btn i, .voice-btn i { display: inline-block; }

/* Кнопка отправки голосового внутри плашки записи (плашка заменяет поле). */
.recording-send-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    background: var(--accent-color);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.recording-send-btn:hover { filter: brightness(1.1); }
.recording-send-btn:active { transform: scale(0.9); }

/* «Пузырик»: пружинистое появление кнопки/иконки при смене состояния. */
@keyframes composerPop {
    0%   { transform: scale(0.25); }
    55%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.composer-pop { animation: composerPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Video Note Message (in chat) ─────────────────────────────────────── */
/* ── Video Note Circle ────────────────────────────────────────────────── */
.video-note-msg {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: visible;
    cursor: pointer;
    flex-shrink: 0;
    background: #0a0a14;
    transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.video-note-msg.vn-playing {
    transform: scale(1.06);
}

.video-note-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* SVG progress ring around the circle */
.video-note-ring {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.3s;
}
.video-note-msg.vn-playing .video-note-ring,
.video-note-msg.vn-paused .video-note-ring { opacity: 1; pointer-events: auto; cursor: pointer; }

.video-note-ring-bg {
    fill: transparent;
    stroke: rgba(255,255,255,0.12);
    stroke-width: 3.5;
}
.video-note-ring-progress {
    fill: none;
    stroke: #6c5ce7;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 609.47;
    stroke-dashoffset: 609.47;
    transition: stroke-dashoffset 0.25s linear;
    cursor: pointer;
    pointer-events: stroke;
}

/* Play overlay */
.video-note-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fff;
    font-size: 22px;
    border-radius: 50%;
    transition: opacity 0.25s, background 0.2s;
    z-index: 4;
    pointer-events: none;
}
/* Preview mode: subtle muted-speaker hint, visible on hover */
.video-note-msg.vn-preview .video-note-play {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
}
.video-note-msg.vn-preview:hover .video-note-play {
    opacity: 0.85;
    background: rgba(0, 0, 0, 0.28);
}
.video-note-msg.vn-playing .video-note-play { opacity: 0; pointer-events: none; }
.video-note-msg.vn-paused .video-note-play {
    opacity: 1; pointer-events: auto;
    background: rgba(0,0,0,0.45);
    font-size: 28px;
}

/* Time overlay inside circle (bottom-left) */
.video-note-time-overlay {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    font-family: 'Inter', sans-serif;
}
/* Telegram-style: overlay только при активном проигрывании, в preview скрыт */
.video-note-msg.vn-playing .video-note-time-overlay,
.video-note-msg.vn-paused .video-note-time-overlay { opacity: 1; }

/* Transparent bubble for standalone video note */
.video-note-bubble {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    position: relative;
    overflow: visible !important;
}

/* Meta overlay inside the circle */
.video-note-meta {
    position: absolute !important;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 10px;
    padding: 2px 7px;
    color: #fff !important;
    font-size: 11px;
    pointer-events: none;
    z-index: 5;
}
.video-note-meta .msg-time { color: #fff !important; }
.video-note-meta i { color: rgba(255,255,255,0.85) !important; }

/* ── Video Note PiP (floating mini-player) ───────────────────────────── */
.vn-pip {
    position: fixed;
    top: 80px;
    left: 14px;
    width: 110px;
    height: 110px;
    z-index: 600;
    border-radius: 50%;
    overflow: visible;
    cursor: pointer;
    box-shadow: 0 6px 28px rgba(0,0,0,0.7);
    animation: vnPipIn 0.35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vnPipIn {
    from { transform: scale(0.3); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.vn-pip-video {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.vn-pip-ring {
    position: absolute;
    inset: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    transform: rotate(-90deg);
    pointer-events: none;
}
.vn-pip-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.15);
    stroke-width: 3;
}
.vn-pip-ring-progress {
    fill: none;
    stroke: #6c5ce7;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 295.31;
    stroke-dashoffset: 295.31;
    transition: stroke-dashoffset 0.25s linear;
}

.vn-pip-close, .vn-pip-pause {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 5;
}
.vn-pip-close {
    top: -4px;
    right: -4px;
    background: rgba(255,71,87,0.85);
}
.vn-pip-close:hover { background: #ff4757; }
.vn-pip-pause {
    bottom: -4px;
    right: -4px;
    background: rgba(108,92,231,0.85);
}
.vn-pip-pause:hover { background: #6c5ce7; }

/* Flash highlight when jumping to active circle from PiP */
.video-note-msg.vn-highlight {
    animation: vnHighlight 0.9s ease;
}
@keyframes vnHighlight {
    0%   { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0); }
    30%  { box-shadow: 0 0 0 10px rgba(108, 92, 231, 0.55); }
    100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0); }
}

.recording-ui {
    /* gap/padding через min(): на обычных экранах (≥360px) это ровно прежние
       15px и 20px, а на узких — пропорционально меньше, чтобы таймер, «Отмена»
       и кнопка отправки не выдавливали друг друга за край. */
    flex: 1; display: none; align-items: center; gap: min(15px, 4.2vw);
    background: var(--bg-element); padding: 0 min(20px, 5.5vw); border-radius: 24px;
    min-height: 48px; animation: slideInUi 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid rgba(255, 71, 87, 0.2);
}

.reply-context-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border-left: 3px solid var(--accent-color);
    padding: 8px 12px; margin-bottom: 10px;
    border-radius: 12px; font-size: 13px; color: #ccc;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid var(--glass-border);
}

/* ── Scroll to Bottom ── */
.scroll-to-bottom-btn {
    position: absolute;
    right: 20px;
    top: -60px;
    width: 42px;
    height: 42px;
    background: var(--bg-element);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 100;
    transition: all 0.25s;
    font-size: 16px;
    border: 1px solid var(--border-color);
}
.scroll-to-bottom-btn:hover {
    color: #fff;
    background: var(--accent-color);
    box-shadow: 0 4px 20px var(--accent-glow);
    transform: translateY(-3px);
}

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 71, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); } }
@keyframes blink { 50% { opacity: 0.5; } }
@keyframes slideInUi { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Chat Header (Floating Glass Pill) ── */
.chat-header {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 30px);
  max-width: 600px;
  height: 60px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  z-index: 100;
  box-sizing: border-box;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5), 0 0 0 1px rgba(108, 92, 231, 0.05);
}

.chat-header-back {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-header-back:hover { background: rgba(108, 92, 231, 0.2); }

.chat-header-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    height: 46px;
    margin: 0 10px;
    transition: all 0.2s;
}

.chat-header-center:hover { background: rgba(108, 92, 231, 0.1); }

.chat-header-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.chat-header-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 1px;
}

.chat-header-right {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.chat-header-right:hover { transform: scale(1.05); }

.chat-header-avatar-wrapper { width: 42px; height: 42px; position: relative; display: flex; align-items: center; justify-content: center; margin: 0; }
.chat-header-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Override scroll-to-bottom position */
.scroll-to-bottom-btn {
  position: absolute;
  right: 20px;
  /* Над композером, а не на фиксированных 80px: поле ввода растёт вместе с
     текстом (--composer-h, см. syncComposerHeight в chat_core.js). */
  bottom: calc(var(--composer-h, 68px) + 12px);
  top: auto;
  width: 44px;
  height: 44px;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  z-index: 100;
  transition: all 0.25s;
  font-size: 16px;
}

.scroll-to-bottom-btn:hover {
  background: var(--accent-color);
  box-shadow: 0 4px 20px var(--accent-glow);
  transform: translateY(-3px);
}

/* ── Chat Profile Modal ── */
.chat-profile-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100dvh;
    background: rgba(0,0,0,0.85); z-index: 3000; display: none;
    align-items: center; justify-content: center;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.chat-profile-content {
    --cp-topbar-h: 62px;
    width: 100%; max-width: 420px; height: 100%;
    background: var(--bg-body); display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    min-height: 450px;
}

/* Прокручивается всё окно целиком (как в Телеграм), а не только нижние
   разделы: баннер, шапка, блок «канал/имя/ключ» и содержимое разделов лежат в
   одном скроллере. Сам .chat-profile-content остаётся неподвижной рамкой —
   благодаря этому кнопка выхода (.cp-back-btn, position:absolute) не уезжает
   вверх при прокрутке и доступна на любой глубине. */
/* overflow-y: scroll, а не auto — полоса прокрутки занимает место ВСЕГДА.
   С auto она появлялась только у длинных разделов, и содержимое (аватар, имя,
   пилюли) дёргалось на ширину полосы при каждом переходе «Медиа» ⇄ «Голосовые».
   scrollbar-gutter решает то же самое, но его нет в Safari до 16 и в старых
   WebView, а окно должно стоять намертво везде. */
.cp-scroll {
    flex: 1; min-height: 0;
    overflow-y: scroll;
    overscroll-behavior: contain;
    background: #0d0d14;
    position: relative; z-index: 1;
}

/* Полоса под кнопкой выхода. На баннере её нет (кнопка и так контрастна), а
   как только баннер уехал — проявляется и становится непрозрачной, иначе
   содержимое проезжало бы прямо под кнопкой и читалось вперемешку с ней.
   Класс .scrolled вешает cpBindScroll() (chat_modals_groups.js). */
.cp-topbar {
    position: absolute; top: 0; left: 0; right: 0;
    height: var(--cp-topbar-h);
    background: var(--bg-body);
    border-bottom: 1px solid transparent;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    z-index: 5;
}
.chat-profile-content.scrolled .cp-topbar {
    opacity: 1;
    border-bottom-color: var(--border-color);
}

#cpBody {
    background: #0d0d14;
    min-height: 200px;
}

@media(min-width: 450px) { .chat-profile-content { border-radius: 20px; height: 90vh; max-height: 800px; box-shadow: var(--shadow-ambient); } }

.cp-banner {
    height: 160px; background: var(--bg-element); background-size: cover; background-position: center;
    position: relative; flex-shrink: 0;
}
/* Бейджи и уровень лежат на нижней границе баннера по сторонам от аватара.
   Строка находится внутри общего скроллера и уезжает вместе с баннером. */
.cp-profile-rail {
    position: absolute;
    top: 164px;
    left: 16px;
    right: 16px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 112px;
    pointer-events: none;
}
.cp-profile-rail[hidden] { display: none !important; }
.cp-profile-badges,
.cp-profile-level {
    width: calc(50% - 56px);
    min-width: 0;
    display: flex;
    align-items: center;
    pointer-events: auto;
}
.cp-profile-badges {
    gap: 3px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.cp-profile-badges::-webkit-scrollbar { display: none; }
.cp-profile-badges .ubadge { width: 21px; height: 21px; }
.cp-profile-badges .ubadge-row { margin: 0; flex-wrap: nowrap; }
.cp-profile-level { justify-content: flex-end; }
.cp-profile-level .lvl-chip {
    flex-shrink: 0;
    background: rgba(16, 16, 24, 0.64);
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* Кнопка «назад» в шапке окна профиля.
   Это ЕДИНСТВЕННЫЙ выход из окна на мобильной вёрстке, поэтому она обязана
   рисоваться в любом браузере, даже когда часть оформления не поддерживается:

   1) backdrop-filter здесь убран. Он был вложенным (blur есть и у самой
      .chat-profile-modal), а вложенный backdrop-filter в ряде версий
      Safari/Chromium схлопывает элемент в полностью прозрачный — кнопка
      исчезала, и окно становилось невозможно закрыть.
   2) Шеврон рисуется средствами CSS, а не глифом Font Awesome: если
      иконочный шрифт не загрузился (заблокирован, не докачался, ошибка
      кэша), <i> не отрисует НИЧЕГО, и от кнопки остался бы невидимый
      тёмный круг на тёмном баннере.
   3) Контрастная рамка и тень — чтобы кнопка читалась и на светлом
      баннере, и на тёмном.
   Дополнительно окно теперь закрывается кликом по фону и клавишей Escape
   (см. chat_modals_groups.js) — на случай, если кнопка всё же не видна. */
.cp-back-btn {
    position: absolute; top: 15px; left: 15px; width: 40px; height: 40px;
    border-radius: 50%; background: rgba(0,0,0,0.62);
    border: 1px solid rgba(255,255,255,0.35); color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
    cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px;
    transition: background 0.2s, border-color 0.2s;
    z-index: 6; padding: 0; flex: none;
}
.cp-back-btn::before {
    content: '';
    width: 10px; height: 10px;
    border-left: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 4px;
}
/* Глиф иконочного шрифта прячем — шеврон уже нарисован псевдоэлементом,
   иначе на браузерах с загруженным Font Awesome было бы две стрелки. */
.cp-back-btn > i { display: none; }
.cp-back-btn:hover { background: rgba(108, 92, 231, 0.55); border-color: rgba(255,255,255,0.55); }

.cp-header {
    display: flex; flex-direction: column; align-items: center; margin-top: -50px;
    flex-shrink: 0; padding-bottom: 20px; border-bottom: 1px solid var(--border-color);
}
.cp-avatar-wrapper { position: relative; width: 100px; height: 100px; border-radius: 50%; border: 4px solid var(--bg-body); box-sizing: border-box; background: var(--bg-element); }
.cp-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.cp-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 115%; height: 115%; object-fit: contain; pointer-events: none; z-index: 2; }
.cp-name { font-size: 22px; font-weight: 700; color: #fff; margin-top: 10px; padding: 0 20px; text-align: center; }
.cp-status { font-size: 14px; color: var(--text-secondary); margin-top: 2px; }

.cp-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: center; width: 100%; padding: 0 20px; box-sizing: border-box; }
.cp-action-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: rgba(108, 92, 231, 0.06); border: 1px solid rgba(108, 92, 231, 0.12); color: #fff; border-radius: 16px;
    padding: 12px 0; cursor: pointer; transition: all 0.25s; font-size: 12px; font-weight: 600;
}
.cp-action-btn:hover { background: rgba(108, 92, 231, 0.15); transform: translateY(-2px); box-shadow: 0 4px 15px var(--accent-glow); }
.cp-action-btn i { font-size: 22px; color: var(--accent-color); }

/* Разделы окна собеседника — сегментированный переключатель («пилюли»), а не
   подчёркивание: разделов теперь переменное число (лишние скрыты, см.
   cpAvailableTabs), и при одном-двух пунктах подчёркивание выглядело как
   случайная полоска под словом. Пустую полосу убираем целиком — именно для
   этого JS кладёт в #cpTabs строго пустую строку. */
/* Полоса разделов липнет под шапкой окна: содержимое разделов уезжает под неё,
   а переключатель остаётся под рукой на любой глубине прокрутки. */
.cp-tabs {
    display: flex; padding: 14px 16px 12px;
    flex-shrink: 0; background: var(--bg-body);
    position: sticky; top: var(--cp-topbar-h); z-index: 3;
}
.cp-tabs:empty { display: none; padding: 0; }
/* Центрирование — через margin:auto, а НЕ justify-content: center у родителя.
   Разделов бывает и пять; центрирующий flex-контейнер обрезает переполнившего
   ребёнка с ОБЕИХ сторон, и первый раздел становится недоступен — прокрутка
   упирается в нулевой scrollLeft. С margin:auto лишнее уезжает только вправо и
   нормально долистывается. */
/* Цвет полосы: палитра владельца премиума (--p-color ставит renderChatProfile
   на .chat-profile-content), а без премиума — акцент Соккета, ровно как у
   кнопок «звонок/поиск/звук» выше (.cp-action-btn). Серым блок больше не
   выглядит: раньше запасным значением был #ffffff. */
.cp-seg {
    --cp-seg-color: var(--p-color, var(--accent-color));
    display: flex; gap: 4px; padding: 4px;
    margin: 0 auto;
    max-width: 100%; overflow-x: auto;
    position: relative;
    background: color-mix(in srgb, var(--cp-seg-color) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--cp-seg-color) 14%, transparent);
    border-radius: 999px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.cp-seg::-webkit-scrollbar { display: none; }
/* Бегунок — отдельный слой под названиями: он ЕДЕТ к выбранному разделу, а не
   перекрашивается скачком (как в Телеграм). Ширину и сдвиг считает
   cpSyncSegThumb() по реальным размерам названия. */
.cp-seg-thumb {
    position: absolute; top: 4px; bottom: 4px; left: 0;
    width: 0; border-radius: 999px;
    background: color-mix(in srgb, var(--cp-seg-color) 26%, rgba(255, 255, 255, 0.06));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cp-seg-color) 18%, transparent);
    pointer-events: none;
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                width 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
/* Первая расстановка не должна ехать из левого края — анимацию включаем со
   следующего кадра. */
.cp-seg-thumb.no-anim { transition: none; }
.cp-tab {
    padding: 8px 15px; border-radius: 999px;
    color: var(--text-secondary); font-size: 13.5px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    position: relative; z-index: 1;
    transition: color 0.2s;
}
.cp-tab:hover { color: #ddd; }
.cp-tab.active { color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .cp-seg-thumb { transition: none; }
}

/* ── Блок «канал / имя пользователя / ключ шифрования» ── */
.cp-info { padding: 14px 16px 0; flex-shrink: 0; background: var(--bg-body); }
.cp-info:empty { display: none; padding: 0; }
.cp-info-card {
    background: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}
.cp-info-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; cursor: pointer;
    transition: background 0.2s;
}
.cp-info-row:hover { background: rgba(108, 92, 231, 0.07); }
.cp-info-row + .cp-info-row { border-top: 1px solid var(--border-color); }
.cp-info-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cp-info-main { flex: 1; min-width: 0; }
.cp-info-title { font-size: 14.5px; font-weight: 700; color: #fff; }
.cp-info-value {
    font-size: 16px; color: var(--accent-color); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-info-side { font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }
.cp-info-qr { font-size: 22px; color: var(--accent-color); flex-shrink: 0; }
.cp-info-chevron { font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }
.cp-info-keypreview { width: 34px; height: 34px; flex-shrink: 0; }

/* Сетка отпечатка ключа: в строке блока — крошечная, в отдельном окне — крупная.
   У миниатюры зазоров между клетками нет: на 34 пикселях они съедали половину
   картинки, и отпечаток превращался в серое пятно. */
.cp-key-grid { display: grid; gap: 1px; width: 100%; height: 100%; }
.cp-key-cell { display: block; width: 100%; aspect-ratio: 1; }
.cp-info-keypreview .cp-key-grid { gap: 0; border-radius: 6px; overflow: hidden; }

.cp-key-card {
    max-width: 420px; width: calc(100% - 40px);
    padding: 0; overflow: hidden; box-sizing: border-box;
}
.cp-key-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--border-color);
}
/* Шеврон рисуется CSS, а не глифом Font Awesome: это единственная явная кнопка
   закрытия у обоих окон (см. ту же причину у .cp-back-btn) — если иконочный
   шрифт не загрузился, от кнопки осталось бы пустое место. */
.cp-key-back {
    width: 34px; height: 34px; flex-shrink: 0;
    background: none; border: none; color: #fff;
    font-size: 16px; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s;
}
.cp-key-back::before {
    content: '';
    width: 9px; height: 9px;
    border-left: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 4px;
}
.cp-key-back > i { display: none; }
.cp-key-title { font-size: 16px; font-weight: 700; color: #fff; }
.cp-key-body { padding: 24px 24px 26px; text-align: center; max-height: 76dvh; overflow-y: auto; }
.cp-key-body #cpKeyGrid {
    width: 216px; margin: 0 auto;
    border-radius: 10px; overflow: hidden;
}
.cp-key-hex {
    margin-top: 20px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 14px; letter-spacing: 1px; line-height: 1.7; color: #dfe3f0;
}
.cp-key-hex-row { white-space: nowrap; }
.cp-key-note { margin-top: 20px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.cp-key-note b { color: #fff; }

/* ── QR-код тега собеседника ── */
/* Тот же вид, что у визитки собственного профиля: код рисуется белыми модулями
   прямо по тёмной карточке (без белой подложки), в центре — аватар с рамкой.
   Поэтому здесь переиспользуется .profile-qr-avatar из модалки «Поделиться
   профилем» — вид у обоих кодов обязан совпадать. */
/* Шапка с шевроном — та же, что у «Ключа шифрования» (.cp-key-head): оба окна
   открываются из одного блока и закрываются одинаково. */
.cp-qr-card {
    max-width: 340px; width: calc(100% - 40px);
    padding: 0; overflow: hidden; box-sizing: border-box;
}
.cp-qr-body { padding: 24px; text-align: center; max-height: 76dvh; overflow-y: auto; }
.cp-qr-wrap {
    position: relative;
    width: 224px; height: 224px;
    margin: 0 auto;
    line-height: 0;
}
.cp-qr-box, .cp-qr-box svg { width: 100%; height: 100%; display: block; }
.cp-qr-tag { margin-top: 16px; font-size: 18px; font-weight: 700; color: #fff; }
.cp-qr-link { margin-top: 4px; font-size: 13px; color: var(--accent-color); word-break: break-all; }
.cp-key-back:hover, .cp-qr-card .cp-key-back:hover { color: var(--accent-color); }

/* Подарки в окне собеседника: та же сетка, что в инвентаре, с полями по краям. */
.cp-gift-grid { padding: 14px; }

.cp-body { background: #0d0d14; }

.cp-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.cp-media-item { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer; background: var(--bg-element); transform: translateZ(0); -webkit-transform: translateZ(0); transition: filter 0.2s; }
.cp-media-item:hover { filter: brightness(1.2); }

.cp-list { display: flex; flex-direction: column; }
.cp-file-item { display: flex; align-items: center; gap: 15px; padding: 12px 20px; text-decoration: none; color: #fff; transition: all 0.2s; border-bottom: 1px solid rgba(255,255,255,0.02); }
.cp-file-item:hover { background: rgba(108, 92, 231, 0.06); }
.cp-file-icon { width: 44px; height: 44px; background: rgba(108, 92, 231, 0.15); color: var(--accent-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;}
.cp-file-info { flex: 1; overflow: hidden; }
.cp-file-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ddd; }
.cp-file-date { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

.cp-member-item { display: flex; align-items: center; gap: 15px; padding: 10px 20px; cursor: pointer; transition: all 0.2s; position: relative; isolation: isolate; overflow: hidden; border-left: 3px solid transparent; background-clip: padding-box; }
.cp-member-item:hover { background: rgba(108, 92, 231, 0.06); }
.cp-member-banner {
    position: absolute;
    z-index: -1;
    top: 0; left: 0; bottom: 0;
    width: 68%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.72) 36%, rgba(0,0,0,.24) 70%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.72) 36%, rgba(0,0,0,.24) 70%, transparent 100%);
}
.cp-member-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-member-banner::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,.58));
}
.cp-member-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.cp-member-info { flex: 1; overflow: hidden; }
.cp-member-name { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-member-status { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.cp-member-status.online { color: var(--accent-color); }

.cp-action-sheet-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 4000; display: none;
    align-items: flex-end; justify-content: center;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.cp-action-sheet {
    width: 100%; max-width: 420px; background: var(--bg-panel); border-radius: 20px 20px 0 0;
    padding: 10px 0; padding-bottom: max(10px, env(safe-area-inset-bottom));
    animation: slideUpSheet 0.25s cubic-bezier(0.1, 0.9, 0.2, 1);
    border-top: 1px solid var(--border-color);
}
@keyframes slideUpSheet { from{transform:translateY(100%);} to{transform:translateY(0);} }
.cp-sheet-btn {
    width: 100%; padding: 16px 20px; text-align: left; background: none; border: none;
    color: #fff; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 15px; cursor: pointer;
    transition: all 0.2s;
}
.cp-sheet-btn:hover { background: rgba(108, 92, 231, 0.08); }
.cp-sheet-btn.danger { color: #ff4757; }
.cp-sheet-btn i { width: 24px; text-align: center; font-size: 20px; color: var(--text-secondary); }
.cp-sheet-btn.danger i { color: #ff4757; }

/* ── Scrollbars ── */
.chat-list::-webkit-scrollbar,
.messages-area::-webkit-scrollbar,
.cp-scroll::-webkit-scrollbar,
.tg-msg-menu-reactions::-webkit-scrollbar,
.tg-msg-menu-list::-webkit-scrollbar,
.cp-tabs::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.chat-list::-webkit-scrollbar-track,
.messages-area::-webkit-scrollbar-track,
.cp-scroll::-webkit-scrollbar-track,
.tg-msg-menu-reactions::-webkit-scrollbar-track,
.tg-msg-menu-list::-webkit-scrollbar-track,
.cp-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.chat-list::-webkit-scrollbar-thumb,
.messages-area::-webkit-scrollbar-thumb,
.cp-scroll::-webkit-scrollbar-thumb,
.tg-msg-menu-reactions::-webkit-scrollbar-thumb,
.tg-msg-menu-list::-webkit-scrollbar-thumb,
.cp-tabs::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.2);
    border-radius: 4px;
}

.chat-list::-webkit-scrollbar-thumb:hover,
.messages-area::-webkit-scrollbar-thumb:hover,
.cp-scroll::-webkit-scrollbar-thumb:hover,
.tg-msg-menu-reactions::-webkit-scrollbar-thumb:hover,
.tg-msg-menu-list::-webkit-scrollbar-thumb:hover,
.cp-tabs::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.4);
}

/* ── Sticker Picker ── */
/* ─────────────────────── Модалка стикеров ─────────────────────── */
.sticker-picker {
    position: absolute;
    bottom: 100%;
    left: 15px;
    flex-direction: column;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-ambient);
    z-index: 100;
    width: 340px;
    max-width: calc(100vw - 30px);
    height: 430px;
    max-height: 62vh;
    margin-bottom: 10px;
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.sticker-scroll {
    position: relative;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 12px 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 92, 231, 0.2) transparent;
}
.sticker-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.sticker-scroll::-webkit-scrollbar-track { background: transparent; }
.sticker-scroll::-webkit-scrollbar-thumb { background: rgba(108, 92, 231, 0.2); border-radius: 4px; }
.sticker-scroll::-webkit-scrollbar-thumb:hover { background: rgba(108, 92, 231, 0.4); }
.sticker-loading { text-align: center; color: var(--text-secondary); padding: 40px 0; font-size: 22px; }

.st-section { margin-bottom: 12px; }
.st-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 4px 2px 8px;
}
.st-section-empty {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.8;
    padding: 4px 2px 8px;
    line-height: 1.4;
}
.st-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.st-item {
    position: relative;
    aspect-ratio: 1;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.st-item:hover { background: rgba(108, 92, 231, 0.12); }
.st-item:active { transform: scale(0.92); }
.st-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.st-fav-btn {
    position: absolute;
    top: 3px;
    right: 4px;
    border: none;
    background: transparent;
    padding: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.st-item:hover .st-fav-btn { opacity: 1; }
.st-fav-btn:hover { transform: scale(1.18); color: #ffce4d; }
.st-item.is-fav .st-fav-btn { color: #ffce4d; }

.st-empty-all {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 20px;
    line-height: 1.5;
}
.st-empty-all i { font-size: 40px; color: var(--accent-color); display: block; margin-bottom: 14px; opacity: 0.8; }
.st-empty-shop {
    margin-top: 16px;
    border: none;
    background: rgba(108, 92, 231, 0.18);
    color: #b6a8ff;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.st-empty-shop:hover { background: rgba(108, 92, 231, 0.3); }

.sticker-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid var(--glass-border);
    scrollbar-width: none;
}
.sticker-nav::-webkit-scrollbar { display: none; }
.st-nav-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
}
.st-nav-btn:hover { background: rgba(108, 92, 231, 0.14); color: #fff; }
.st-nav-btn.active { background: rgba(108, 92, 231, 0.22); color: #fff; }
.st-nav-pack img { width: 26px; height: 26px; object-fit: contain; }

.sticker-tabs {
    display: flex;
    border-top: 1px solid var(--glass-border);
}
.sticker-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 17px;
    padding: 11px 0;
    cursor: pointer;
    transition: color 0.2s ease;
}
.sticker-tab:hover { color: #fff; }
.sticker-tab.active { color: var(--accent-color); }

/* ─────────────── Стикерпаки в магазине ─────────────── */
.st-pack-grid { display: flex; flex-direction: column; padding-top: 42px; }
.st-pack-card {
    position: relative;
    overflow: visible;
    border-radius: 16px;
    padding: 48px 14px 14px;
    margin-bottom: 46px;
    background: var(--pack-tint, rgba(255, 255, 255, 0.03));
    border: 1.5px solid var(--pack-border, var(--border-color));
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28), 0 0 16px -3px var(--pack-glow, transparent);
}
.st-pack-card:last-child { margin-bottom: 8px; }
/* Затемнение поверх ФОТО-фона (только .has-bg-image), под контентом — чтобы белое
   название/счётчик читались на светлых снимках. Тёмное по краям (название вверху,
   кнопка внизу), светлее в центре. Силу регулируй альфами rgba ниже. */
.st-pack-card.has-bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 38%, rgba(0, 0, 0, 0.58) 100%);
    pointer-events: none;
}
/* Плавный выезд купленной карточки из магазина. */
.st-pack-card.removing {
    transition: height 0.45s ease, opacity 0.45s ease, transform 0.45s ease,
        margin 0.45s ease, padding 0.45s ease;
    opacity: 0;
    transform: scale(0.94);
    box-shadow: none;
    pointer-events: none;
}
/* Слой боковой анимации — обрезан рамкой карточки, под контентом и героем. */
.st-pack-anim {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}
.st-pack-floater {
    position: absolute;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.5) translateY(8px);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.st-pack-floater.show { opacity: 0.9; transform: scale(1) translateY(0); }
/* Герой — первый стикер набора, чуть вылезает за верх карточки. */
.st-pack-hero {
    position: absolute;
    top: -34px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}
.st-pack-hero-img { width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45)); }
.st-pack-body { position: relative; z-index: 2; }
/* Заголовок: название, под ним — количество стикеров (в столбик). */
.st-pack-head { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 12px; text-align: center; }
.st-pack-name { font-weight: 700; color: #fff; font-size: 18px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
.st-pack-count { font-size: 12px; color: rgba(255, 255, 255, 0.72); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
/* Кнопка покупки — общий стиль .shop-buy-btn, перекрашена палитрой набора:
   фон/текст/рамка берутся из тех же --pack-* переменных, что и рамка карточки,
   поэтому кнопка и border карточки всегда в одной палитре. */
.shop-buy-btn.st-pack-buy.can-buy {
    background: var(--pack-btn, rgba(108, 92, 231, 0.12));
    color: var(--pack-color, var(--accent-color));
    border: 1px solid var(--pack-border, rgba(108, 92, 231, 0.3));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.shop-buy-btn.st-pack-buy.can-buy:hover {
    background: var(--pack-btn-hover, rgba(108, 92, 231, 0.2));
    border-color: var(--pack-color, rgba(108, 92, 231, 0.5));
    box-shadow: 0 4px 14px var(--pack-glow, rgba(108, 92, 231, 0.2));
    filter: brightness(1.12);
    transform: translateY(-1px);
}
.shop-buy-btn.st-pack-buy img { width: 14px; height: 14px; }
/* Кнопка раскрытия — только стрелка, без фона и текста, чуть крупнее. */
.st-pack-expand {
    width: 100%;
    margin-top: 6px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 18px;
    padding: 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.st-pack-expand:hover { opacity: 1; }
/* Список всех стикеров набора: плавное раскрытие через max-height + opacity.
   Сетка отрисована всегда (display:grid), в свёрнутом виде сжата в 0. */
.st-pack-all {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease, margin-top 0.4s ease;
}
.st-pack-all.open { opacity: 1; margin-top: 8px; }
.st-pack-all-item { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.st-pack-all-item img { width: 100%; height: 100%; object-fit: contain; }

/* ─────────────── Стикеры в инвентаре ─────────────── */
.st-inv-pack-name { font-weight: 700; color: #fff; font-size: 14px; margin-bottom: 10px; }
.st-inv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.st-inv-item {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.st-inv-item img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 768px) {
    .sticker-picker {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        height: 56vh;
    }
    .st-inv-grid { grid-template-columns: repeat(4, 1fr); }
}

.chat-sticker {
    width: 130px;
    height: 130px;
    object-fit: contain;
    background: transparent;
    border: none;
    margin-top: 5px;
}

.nav-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--accent-color);
    color: white;
    border-radius: 10px;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 2px 8px var(--accent-glow);
    border: 2px solid var(--bg-panel);
}

.settings-content {
    background-image: linear-gradient(to bottom, rgba(18,18,26,1) 0%, rgba(18,18,26,0) 10px);
}

.sidebar-view {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

.sidebar-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar-view.active {
    display: flex;
}

.sidebar-content-wrapper {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sidebar-tab-pane {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    /* Без CSS-transitions: анимацию въезда делает Web Animations API в
       switchSidebarTab. Прерванный transition умел замораживать панель на
       промежуточном transform — «раздел застыл, не долиставшись». */
    transition: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
}

.sidebar-tab-pane.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Без !important: important-транcформ перебивал бы Web Animations-въезд
       (анимации в каскаде ниже important-деклараций). Inline-трансформы на
       панелях больше не используются — switchSidebarTab их зачищает. */
    transform: translateX(0);
    z-index: 2;
}

.sidebar-tab-pane .chat-list,
.sidebar-tab-pane .settings-content {
    padding-bottom: 90px;
}

/* Плашка «Доступно обновление» встаёт над меню и перекрыла бы последний
   диалог — добираем ей высоту (см. chat_update.js). */
body.has-update-bar .sidebar-tab-pane .chat-list,
body.has-update-bar .sidebar-tab-pane .settings-content {
    padding-bottom: 156px;
}

/* ── Bottom Navigation (Glass) ── */
.bottom-nav {
    position: absolute !important;
    bottom: 20px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    display: flex;
    align-items: center;
    padding: 8px;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 30px;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    z-index: 1000;
}

.settings-page {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background: var(--bg-panel);
    z-index: 10;
}

.nav-slider {
    position: absolute;
    top: 8px;
    left: 0;
    height: calc(100% - 16px);
    background: rgba(108, 92, 231, 0.2) !important;
    border-radius: 30px;
    transition: transform 0.35s ease, width 0.35s ease;
    z-index: 1;
    pointer-events: none;
    border: 1px solid rgba(108, 92, 231, 0.15);
}

.bottom-nav .nav-item {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.bottom-nav .nav-item.active {
    color: #fff;
}

.bottom-nav .nav-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.bottom-nav span {
    font-size: 11px;
    font-weight: 500;
}

.nav-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: var(--accent-color);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* ── Settings ── */
.settings-section {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(108, 92, 231, 0.04);
    border-radius: 16px;
    border: 1px solid rgba(108, 92, 231, 0.08);
    transition: border-color 0.3s;
}
.settings-section:hover {
    border-color: rgba(108, 92, 231, 0.15);
}

.settings-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-label {
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 5px;
    display: block;
}

.settings-input-file {
    margin-bottom: 12px;
    color: #fff;
    width: 100%;
    font-size: 13px;
}

/* ── Chat Cards (Messages) ── */
.chat-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
    max-width: 100% !important;
    margin-bottom: 8px !important;
    /* Собственный stacking-context: хвостик пузыря (::after, z-index:-1) должен
       уйти ПОД пузырь/фото, но остаться НАД обоями .messages-area. Без isolate
       отрицательный z-index проваливается за фон .chat-main (у него transform
       на мобиле) и хвост исчезает. */
    isolation: isolate;
}

.chat-card.theirs { flex-direction: row; align-self: flex-start; }
.chat-card.mine { flex-direction: row-reverse; align-self: flex-end; }

/* Удаление сообщения (как в Телеграм): плавный коллапс высоты + затухание +
   лёгкое сжатие; соседи мягко подтягиваются вверх. opacity/transform идут по
   композитору, height/margin — единственный layout-триггер и лишь на одном
   короткоживущем элементе, так что дёшево. */
.chat-card.msg-deleting {
    overflow: hidden;
    transform-origin: center center;
    will-change: height, opacity, transform, margin;
    transition:
        height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease,
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.chat-card.msg-deleting-active {
    opacity: 0;
    transform: scale(0.85);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@keyframes msg-appear {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.chat-card.msg-new {
    animation: msg-appear 0.25s ease-out both;
}

/* Сообщения одного отправителя подряд — вплотную, как в Телеграм.
   Контейнер .messages-area — flex с gap:15px, поэтому фактический отступ =
   15px + margin-bottom. Отрицательным margin гасим gap до ~2px, но только
   ВНУТРИ серии (у group-last/одиночных остаётся +8px → ~23px, что визуально
   отделяет сообщения разных людей). */
.chat-card[data-group="group-first"],
.chat-card[data-group="group-middle"] {
    margin-bottom: -13px !important;
}

.msg-avatar-col {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.msg-avatar-col .tg-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.msg-avatar-col .chat-avatar-frame { position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; pointer-events: none; z-index: 2; }

.chat-card.theirs[data-group="group-first"] .msg-avatar-col,
.chat-card.theirs[data-group="group-middle"] .msg-avatar-col {
    opacity: 0;
    pointer-events: none;
}

/* Никнейм автора — только над первым сообщением серии «подряд» (group-first или
   одиночное). У продолжений группы (middle/last) имя скрыто. */
.chat-card.theirs[data-group="group-middle"] .msg-author,
.chat-card.theirs[data-group="group-last"] .msg-author {
    display: none;
}

/* Личный диалог — только «голое» сообщение: ни ника собеседника, ни его
   бейджей (премиум-звезда / галочка верификации) над текстом. В переписке
   один на один автор и так очевиден, а шапка диалога уже показывает и имя,
   и статус. Признак лички — ненулевой data-chat-target-id на body (у бесед и
   каналов он 0, см. openChat), поэтому в беседах имя остаётся как было. */
body[data-chat-target-id]:not([data-chat-target-id="0"]) #messagesArea .msg-author {
    display: none;
}

/* ── Chat Bubble ── */
.msg-content-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 80%;
}

.chat-card.mine .msg-content-col { align-items: flex-end; }
.chat-card.theirs .msg-content-col { align-items: flex-start; }

.chat-bubble {
    background: var(--bg-element);
    padding: 6px 10px 8px 12px;
    border-radius: 18px;
    max-width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 60px;
    /* Без рамки: у входящих пузырей светлый контур 1px давал «обводку» вокруг
       сообщения собеседника (в беседах — вокруг каждого). Исходящие её и так
       не имели (border: none ниже), теперь оформление одинаковое. */
    border: none;
    transition: transform 0.15s ease;
    box-sizing: border-box;
}

.chat-card.mine .chat-bubble {
    background: linear-gradient(135deg, #6c5ce7, #5a4bd1);
    border: none;
    box-shadow: 0 2px 12px rgba(108, 92, 231, 0.25);
}

.chat-card.theirs[data-group="group-first"] .chat-bubble { border-bottom-left-radius: 4px !important; }
.chat-card.theirs[data-group="group-middle"] .chat-bubble { border-bottom-left-radius: 4px !important; border-top-left-radius: 4px !important; }
.chat-card.theirs[data-group="group-last"] .chat-bubble { border-top-left-radius: 4px !important; border-bottom-left-radius: 18px !important; }
.chat-card.theirs:not([data-group]) .chat-bubble { border-bottom-left-radius: 4px; }

.chat-card.mine[data-group="group-first"] .chat-bubble { border-bottom-right-radius: 4px !important; }
.chat-card.mine[data-group="group-middle"] .chat-bubble { border-bottom-right-radius: 4px !important; border-top-right-radius: 4px !important; }
.chat-card.mine[data-group="group-last"] .chat-bubble { border-top-right-radius: 4px !important; border-bottom-right-radius: 18px !important; }
.chat-card.mine:not([data-group]) .chat-bubble { border-bottom-right-radius: 4px; }

/* ── Telegram-style «хвостик» последнего/одиночного сообщения (вариант 6:
   чёткий острый SVG-плавник). Форма задаётся mask из inline-SVG, поэтому хвост
   остаётся чистым поверх любых обоев диалога. Цвет: у текстовых / файловых /
   опросных пузырей — цвет самого пузыря; у медиа-без-подписи (.media-only-bubble)
   — переменная --mtail, которую JS подбирает по палитре того угла картинки, где
   находится хвост (paintMediaTails в chat_ui_messaging.js): входящие — нижне-левый
   угол, исходящие — нижне-правый. Одиночное сообщение после updateGroupings имеет
   data-group="". Исключены прозрачные (стикер / видеосообщение) и обрезанные
   overflow:hidden (.media-text-bubble) пузыри. */

/* приплюснутый угол со стороны хвоста, чтобы плавник вытекал из пузыря */
.chat-card.theirs:is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble {
    border-bottom-left-radius: 6px !important;
}
.chat-card.mine:is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble {
    border-bottom-right-radius: 6px !important;
}
.chat-card.theirs:is([data-group="group-last"], [data-group=""], :not([data-group])) .media-only-bubble :is(.chat-media-wrapper, .chat-media-grid, .chat-media-item, .chat-media-video) {
    border-bottom-left-radius: 6px !important;
}
.chat-card.mine:is([data-group="group-last"], [data-group=""], :not([data-group])) .media-only-bubble :is(.chat-media-wrapper, .chat-media-grid, .chat-media-item, .chat-media-video) {
    border-bottom-right-radius: 6px !important;
}

/* форма плавника (общая для всех хвостатых пузырей).
   z-index:-1 — плавник рисуется ПОД пузырём (карточка изолирована, поэтому он
   всё равно поверх обоев): его прямоугольное основание прячется за непрозрачным
   фоном пузыря / фотографией, снаружи торчит только сам «плавник», а в выемке
   приплюснутого угла (радиус 6px) основание просвечивает и сшивает плавник с
   пузырём. Так цвет основания не может «проступить» ни на premium-градиентах,
   ни поверх медиа. */
.chat-card:is(.theirs, .mine):is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble:not(.sticker-bubble):not(.video-note-bubble):not(.media-text-bubble)::after {
    content: "";
    position: absolute;
    bottom: 0;
    z-index: -1;
    width: 17px;
    height: 19px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'><path d='M0 0 H14 C14 18 20 30 30 34 C16 34 2 28 0 14 Z' fill='black'/></svg>") no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'><path d='M0 0 H14 C14 18 20 30 30 34 C16 34 2 28 0 14 Z' fill='black'/></svg>") no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    pointer-events: none;
}

/* сторона: входящие — слева (зеркально), исходящие — справа */
.chat-card.theirs:is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble::after {
    left: -9px;
    transform: scaleX(-1);
}
.chat-card.mine:is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble::after {
    right: -9px;
}

/* цвет: обычные пузыри — под цвет пузыря; медиа — палитра угла картинки */
.chat-card.theirs:is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble:not(.media-only-bubble)::after {
    background: var(--bg-element);
}
.chat-card.mine:is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble:not(.media-only-bubble)::after {
    background: #5a4bd1;
}
.chat-card:is(.theirs, .mine):is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble.media-only-bubble::after {
    background: var(--mtail, rgba(18, 16, 28, 0.55));
}

/* premium-styled пузыри — градиентные, поэтому плавнику даём цвет градиента в
   том углу, где он находится: у theirs (135deg, mix(p 26%)→bg) нижне-левый угол
   ≈ 20% примеси p-color; у mine градиент заканчивается ровно в нижне-правом
   углу — чистый #6c5ce7. */
.chat-card.theirs:is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble.premium-styled-msg:not(.media-only-bubble)::after {
    background: color-mix(in srgb, var(--p-color) 20%, var(--bg-element));
}
.chat-card.mine:is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble.premium-styled-msg:not(.media-only-bubble)::after {
    background: #6c5ce7;
}

.msg-author { font-size: 13px; font-weight: 600; color: var(--accent-color); margin-bottom: 4px; }
.chat-card.mine .msg-author { display: none; }

.msg-text-content {
    font-size: 14.5px;
    color: #fff;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    max-width: 100%;
}

.chat-media-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 0 !important;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.media-text-bubble {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

.media-text-bubble .msg-text-content,
.media-text-bubble .chat-files-list {
    padding: 6px 10px 8px 12px;
}

.media-text-bubble .reply-quote {
    margin: 6px 10px 0 12px;
}

.media-text-bubble .reactions-list {
    padding: 0 10px 6px 12px;
}

/* Пузырь с медиа И подписью/файлом обнуляет собственный padding и раздаёт его
   блокам внутри (текст, файлы, цитата, реакции). Времени отправки и подвалу
   поста канала (просмотры + время) отступа не доставалось: они прилипали к
   самому краю, а overflow:hidden у этого пузыря срезал последнюю цифру —
   «18:49» превращалось в «18:4». Медиа-варианты .msg-meta исключены: они
   позиционируются абсолютно поверх картинки и свои отступы уже имеют. */
.media-text-bubble > .msg-meta:not(.media-meta):not(.media-meta-inline),
.media-text-bubble > .post-stat-row {
    padding: 0 10px 8px 12px !important;
    box-sizing: border-box !important;
}

/* Реакции внутри подвала поста отступ уже получили от самого подвала —
   иначе он задваивается и строка съезжает вправо. */
.media-text-bubble .post-stat-row > .reactions-list {
    padding: 0 !important;
}

/* Реакции идут строкой выше времени; их нижний отступ здесь лишний. */
.media-text-bubble > .reactions-list:not(:last-child) {
    padding-bottom: 0;
}

.media-text-bubble .chat-media-grid,
.media-only-bubble .chat-media-grid {
    margin-top: 0 !important;
}

.media-only-bubble {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 18px;
    overflow: hidden;
}

.media-only-bubble .chat-media-wrapper {
    border-radius: 18px !important;
}

.msg-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

/* Просмотры поста канала («глаз» как в Telegram) внутри msg-meta */
.msg-views {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 5px;
    opacity: 0.85;
}
.msg-views-eye {
    width: 13px;
    height: 13px;
    object-fit: contain;
    opacity: 0.8;
}

.float-meta {
    float: right;
    margin-left: 12px;
    margin-top: 6px;
    position: relative;
    top: 2px;
}

.msg-meta.media-meta {
    position: absolute;
    bottom: 8px !important;
    right: 8px !important;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    padding: 2px 8px;
    border-radius: 12px;
    color: #fff;
    margin: 0;
    z-index: 10;
}

.msg-meta.media-meta-inline {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    padding: 2px 8px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    pointer-events: none;
}

.reactions-list {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    width: 100%;
    align-self: flex-start;
}

/* ── File Message ── */
.tg-file-msg {
    display: flex; align-items: center; gap: 12px; background: transparent !important;
    padding: 8px 12px; border-radius: 12px; margin-top: 4px;
    border: 1px solid rgba(255,255,255,0.08) !important; text-decoration: none;
    transition: all 0.2s;
    min-width: 0; max-width: 100%; box-sizing: border-box;
    width: min(260px, 100%);
}
.tg-file-msg:hover { background: rgba(108, 92, 231, 0.06) !important; }
.tg-file-icon { width: 44px; height: 44px; flex-shrink: 0; background: rgba(108, 92, 231, 0.2); color: var(--accent-color); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.tg-file-info { display: flex; flex-direction: column; overflow: hidden; flex: 1 1 0; min-width: 0; }
.tg-file-name { font-weight: 600; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chat-files-list { min-width: 0; max-width: 100%; }
.chat-card.mine .tg-file-msg { border-color: rgba(255, 255, 255, 0.18) !important; }
.chat-card.mine .tg-file-icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.chat-card.mine .tg-file-size { color: rgba(255, 255, 255, 0.75); }
.tg-file-size { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ── Voice Message ── */
.tg-voice-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 4px 0;
    min-width: 260px;
    max-width: 340px;
    position: relative;
    flex-wrap: wrap;
}

.tg-voice-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #fff;
    border: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0 !important;
    box-sizing: border-box;
    transition: all 0.2s;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.tg-voice-play:hover { transform: scale(1.08); }

.chat-card.theirs .tg-voice-play { background: rgba(108, 92, 231, 0.4); }
.chat-card.mine .tg-voice-play { background: #fff; color: #6c5ce7; }

/* Точка «не прослушано» в правом нижнем углу кнопки: гаснет после первого
   запуска (класс снимает markVoiceHeard в chat_core.js). Только на входящих —
   у своих голосовых статус прослушивания смысла не имеет. Колечко цвета пузыря
   отделяет точку от круга кнопки, как в Телеграме. */
.tg-voice-play { position: relative; }
.chat-card.theirs .tg-voice-msg.is-unheard .tg-voice-play::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 0 2.5px var(--bg-element);
    pointer-events: none;
}
/* На премиум-пузыре фон градиентный — берём его же примесь, чтобы колечко не
   выглядело заплаткой. */
.chat-card.theirs .chat-bubble.premium-styled-msg .tg-voice-msg.is-unheard .tg-voice-play::after {
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--p-color) 22%, var(--bg-element));
}

.tg-voice-track {
    flex: 1; height: 30px; display: flex; align-items: center;
    position: relative; overflow: hidden;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,50 L100,50' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,50 L100,50' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.tg-voice-progress-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(108, 92, 231, 0.15);
}

.chat-card.mine .tg-voice-progress-bg { background: rgba(255,255,255,0.4); }

.tg-voice-progress {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: var(--accent-color);
    width: 0%;
    transition: width 0.1s linear;
}

.chat-card.mine .tg-voice-progress { background: #fff; }

.tg-voice-time { font-size: 12px; color: var(--text-secondary); margin-top: 2px; font-weight: 500; }
.chat-card.mine .tg-voice-time { color: rgba(255,255,255,0.8); }

/* ── Простой аудио-плеер (обычный аудиофайл, НЕ голосовое) ──
   Без волн и без транскрипции: имя файла + полоса прогресса + время/размер. */
.tg-audio-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.chat-card.mine .tg-audio-name { color: #fff; }
.tg-audio-bar {
    position: relative;
    height: 5px;
    border-radius: 3px;
    background: rgba(108, 92, 231, 0.18);
    cursor: pointer;
    overflow: hidden;
}
.chat-card.mine .tg-audio-bar { background: rgba(255,255,255,0.35); }
.tg-audio-bar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: var(--accent-color);
    transition: width 0.1s linear;
}
.chat-card.mine .tg-audio-bar-fill { background: #fff; }
.tg-audio-size { font-size: 11px; color: var(--text-secondary); margin-left: auto; }
.chat-card.mine .tg-audio-size { color: rgba(255,255,255,0.7); }

/* ════════════════════════════════════════════════════════════════════════
   МЕНЮ ПРИКРЕПЛЕНИЯ (скрепка) + ОПРОСЫ
   ════════════════════════════════════════════════════════════════════════ */
.tg-attach-wrap { position: relative; display: flex; align-items: center; }
.attach-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    background: var(--bg-panel, #1e1e24);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 210px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 60;
    animation: fadeInModal 0.15s ease;
}
.attach-menu-item {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 14px; border-radius: 10px; cursor: pointer;
    color: #e8e8ec; font-size: 14px; font-weight: 500;
    transition: background 0.15s;
}
.attach-menu-item:hover { background: rgba(108,92,231,0.16); }
.attach-menu-item i { width: 20px; text-align: center; font-size: 17px; color: var(--text-secondary); }

/* ── Модалка создания опроса ── */
.poll-section-label {
    color: var(--accent-color); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.poll-input, .poll-option-input {
    width: 100%; box-sizing: border-box; background: var(--bg-panel);
    border: 1px solid var(--border-color); border-radius: 10px; color: #fff;
    padding: 11px 14px; font-size: 14px; outline: none;
    font-family: 'Inter', sans-serif;
}
.poll-input { resize: none; }
.poll-input:focus, .poll-option-input:focus { border-color: var(--accent-color); }
.poll-option-input-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.poll-option-remove {
    color: var(--text-secondary); cursor: pointer; padding: 8px; font-size: 14px;
    transition: color 0.15s; flex-shrink: 0;
}
.poll-option-remove:hover { color: #ff5a5a; }
.poll-add-option {
    display: flex; align-items: center; gap: 10px; color: var(--accent-color);
    cursor: pointer; padding: 8px 4px; font-size: 14px; font-weight: 600;
}
.poll-add-option i { font-size: 16px; }
.poll-hint { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }
.poll-setting-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 0; color: #fff; font-size: 14px;
}

/* ── Опрос внутри сообщения ── */
.chat-bubble.poll-bubble { min-width: 250px; }
.poll-block { min-width: 240px; max-width: 360px; }
.poll-question {
    font-weight: 700; font-size: 15px; color: #fff; line-height: 1.3;
    margin-bottom: 2px; white-space: pre-wrap; word-break: break-word;
}
.poll-subtitle { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.poll-options { display: flex; flex-direction: column; gap: 10px; }
.poll-option { border-radius: 8px; }
.poll-option.clickable { cursor: pointer; }
.poll-option.clickable:hover .poll-option-text { color: #fff; }
.poll-option-top { display: flex; align-items: center; gap: 9px; }
.poll-percent { font-size: 13px; font-weight: 700; color: #fff; min-width: 40px; flex-shrink: 0; }
.poll-radio {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--text-secondary); flex-shrink: 0; box-sizing: border-box;
}
.poll-radio.square { border-radius: 5px; }
.poll-option-text { flex: 1; font-size: 14px; color: #e4e4ea; line-height: 1.3; word-break: break-word; }
.poll-check { color: var(--accent-color); font-size: 14px; flex-shrink: 0; }
.poll-bar {
    height: 4px; border-radius: 3px; background: rgba(255,255,255,0.12);
    margin-top: 6px; margin-left: 49px; overflow: hidden;
}
.poll-bar-fill { height: 100%; background: var(--accent-color); border-radius: 3px; transition: width 0.35s ease; }
.poll-footer { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.poll-total { font-size: 12px; color: var(--text-secondary); }
.poll-actions { display: flex; gap: 16px; }
.poll-action { font-size: 13px; color: var(--accent-color); cursor: pointer; font-weight: 600; }
.poll-action.poll-stop { color: #ff6b6b; }

/* Победивший вариант в завершённом опросе — мягкая зелёная подсветка. */
.poll-option-winner {
    background: rgba(67, 181, 129, 0.13);
    box-shadow: inset 0 0 0 1px rgba(67, 181, 129, 0.35);
    border-radius: 8px;
    padding: 5px 7px;
    margin: -5px -7px;
}
.poll-option-winner .poll-percent { color: #43b581; }
.poll-option-winner .poll-bar-fill { background: #43b581; }
.chat-card.mine .poll-option-winner { background: rgba(255,255,255,0.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }
.chat-card.mine .poll-option-winner .poll-percent { color: #d6ffe9; }
.chat-card.mine .poll-option-winner .poll-bar-fill { background: #b9f5d6; }

/* Превью аватаров проголосовавших (НЕанонимные опросы). */
.poll-voters-preview { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.poll-voters-preview .poll-voter-av { margin-right: -8px; }
.poll-voters-preview .poll-voter-av:last-child { margin-right: 4px; }
.poll-voter-av {
    position: relative; width: 22px; height: 22px; display: inline-block;
    border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-panel, #1e1e24);
}
.chat-card.mine .poll-voter-av { box-shadow: 0 0 0 2px var(--accent-color, #6c5ce7); }
.poll-av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.poll-av-frame { position: absolute; top: -18%; left: -18%; width: 136%; height: 136%; pointer-events: none; }

/* Модалка «Проголосовали». */
.poll-voters-group { margin-bottom: 14px; }
.poll-voters-opt {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 700; color: var(--accent-color);
    padding: 4px 2px 8px; border-bottom: 1px solid var(--border-color); margin-bottom: 6px;
}
.poll-voters-opt-count {
    font-size: 12px; color: var(--text-secondary); font-weight: 600;
    background: rgba(255,255,255,0.06); border-radius: 10px; padding: 1px 8px;
}
.poll-voter-row { display: flex; align-items: center; gap: 11px; padding: 7px 4px; }
.poll-voter-row-av { position: relative; width: 36px; height: 36px; display: inline-block; flex-shrink: 0; border-radius: 50%; }
.poll-voter-name { font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poll-voters-empty { text-align: center; color: var(--text-secondary); padding: 24px; font-size: 14px; }

/* Контраст для исходящих (моих) опросов на акцентном фоне. */
.chat-card.mine .poll-subtitle { color: rgba(255,255,255,0.78); }
.chat-card.mine .poll-option-text { color: rgba(255,255,255,0.95); }
.chat-card.mine .poll-radio { border-color: rgba(255,255,255,0.7); }
.chat-card.mine .poll-check { color: #fff; }
.chat-card.mine .poll-bar { background: rgba(255,255,255,0.25); }
.chat-card.mine .poll-bar-fill { background: #fff; }
.chat-card.mine .poll-total { color: rgba(255,255,255,0.78); }
.chat-card.mine .poll-action { color: #fff; }
.chat-card.mine .poll-action.poll-stop { color: #ffd0d0; }

/* ── Date Divider ── */
.date-divider {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 15px 0 20px 0;
    clear: both;
}
.date-divider span {
    background: rgba(108, 92, 231, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: 12px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(108, 92, 231, 0.1);
}

.msg-actions { display: none !important; }

/* ── Bubble Ordering ── */
.chat-bubble > .reply-quote { order: 1; }
.chat-bubble > .msg-author { order: 2; }
.chat-bubble > .chat-media-wrapper { order: 3; }
.chat-bubble > .chat-files-list { order: 4; }
.chat-bubble > .msg-text-content { order: 5; }
.chat-bubble > .link-preview-card { order: 6; }
.chat-bubble > .reactions-list { order: 7; margin-top: 4px; align-self: flex-start; }
.chat-bubble > .post-stat-row { order: 8; align-self: stretch; }

.draft-label { color: #e0245e; }

.msg-link { color: #6cb2ff; text-decoration: none; word-break: break-all; }
.msg-link:hover { text-decoration: underline; }
.chat-card.mine .msg-link { color: #d6e4ff; text-decoration: underline; }
.msg-mention {
    color: #8475da;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    cursor: pointer;
    touch-action: manipulation;
}
.msg-mention:hover { text-decoration: underline; }
.msg-mention:focus-visible {
    outline: 2px solid rgba(132, 117, 218, .65);
    outline-offset: 2px;
    border-radius: 3px;
}
.link-preview-card {
    display: block;
    margin-top: 6px;
    padding: 7px 10px;
    min-width: 240px;
    max-width: 100%;
    border-left: 3px solid var(--p-color, var(--accent-color));
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.18);
    text-decoration: none;
    overflow: hidden;
    box-sizing: border-box;
    transition: background 0.18s;
}
.chat-card.mine .link-preview-card { background: rgba(0, 0, 0, 0.16); border-left-color: rgba(255, 255, 255, 0.85); }
.link-preview-card:hover { background: rgba(0, 0, 0, 0.3); }
.link-preview-card .lp-site { color: var(--p-color, var(--accent-color)); font-weight: 700; font-size: 12px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-card.mine .link-preview-card .lp-site { color: #fff; }
.link-preview-card .lp-title { color: var(--text-primary, #fff); font-weight: 600; font-size: 14px; line-height: 1.25; margin-bottom: 3px; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-preview-card .lp-desc { font-size: 12.5px; line-height: 1.3; color: var(--text-secondary, #b9b9c0); word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chat-card.mine .link-preview-card .lp-desc { color: rgba(255, 255, 255, 0.85); }
.link-preview-card .lp-image { display: block; margin-top: 8px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background-color: rgba(0,0,0,0.25); }

.chat-bubble > .msg-meta.block-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    clear: both !important;
    float: none !important;
    text-align: right !important;
    width: 100% !important;
    margin-top: 6px !important;
    position: static !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 0 !important;
}

.media-only-bubble {
    overflow: visible !important;
}

.media-only-bubble .reactions-list {
    position: relative;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    z-index: 1;
}

.media-only-bubble .reply-quote {
    position: absolute;
    top: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-left: 3px solid #fff;
    color: #eee;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0;
    box-sizing: border-box;
}

.media-only-bubble .reply-quote strong {
    color: #fff;
}

.msg-search-item:hover { background: rgba(108, 92, 231, 0.1) !important; }

.chat-bubble > .reactions-list {
    order: 10 !important;
    margin-bottom: 2px !important;
}

.chat-bubble > .msg-meta:not(.media-meta) {
    order: 11 !important;
    align-self: flex-end !important;
    margin-top: 4px !important;
    margin-left: 0 !important;
    float: none !important;
    position: static !important;
}

/* ── Media Modal ── */
.media-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100dvh;
    background: rgba(10, 10, 15, 0.98); z-index: 5000;
    display: none; flex-direction: column;
}

.media-modal-header {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
    max-width: 600px;
    height: 60px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    z-index: 100;
    box-sizing: border-box;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

.media-modal-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.media-modal-btn:hover { background: rgba(108, 92, 231, 0.2); }

.media-modal-info {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 0 10px; margin: 0 10px; overflow: hidden;
}

.media-modal-name {
    color: #fff; font-weight: 700; font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

.media-modal-date {
    color: var(--text-secondary); font-size: 12px; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

.media-modal-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    touch-action: none;
}

#photoViewerImg {
    cursor: zoom-in;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#photoViewerImg.zoomed {
    transform: scale(2.5);
    cursor: zoom-out;
}

.media-modal-body img, .media-modal-body video {
    max-width: 100%; max-height: 100%; object-fit: contain;
}

.media-dropdown-menu {
    position: absolute; top: 70px; right: 0; background: var(--glass-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border); border-radius: 14px; padding: 5px 0;
    min-width: 220px; box-shadow: var(--shadow-ambient); display: none; z-index: 101;
    animation: fadeInModal 0.15s ease;
}

.media-dropdown-item {
    padding: 12px 20px; color: #fff; cursor: pointer; display: flex;
    align-items: center; gap: 15px; text-decoration: none; font-size: 15px; font-weight: 500;
    transition: all 0.2s;
}

.media-dropdown-item:hover { background: rgba(108, 92, 231, 0.12); }
.media-dropdown-item.danger { color: #ff4757; }
.media-dropdown-item.danger:hover { background: rgba(255, 71, 87, 0.08); }
.media-dropdown-item i { width: 20px; text-align: center; font-size: 18px; }

.media-modal-body img {
    transition: transform 0.25s ease;
}

.media-modal-body img.zoomed {
    transform: scale(2.5);
    cursor: zoom-out;
}

/* ── Просмотрщик медиа: зум, поворот, переключение (chat_media_viewer.js) ──
   Панель и стрелки — соседи .media-modal-body, а не его дети: у body висит
   onclick="closeMediaModal(event)", и вложенные кнопки закрывали бы окно. */
#photoViewerImg {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.mv-toolbar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    z-index: 102;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 26px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.55);
    transition: opacity 0.15s linear;
}

.mv-tool {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.mv-tool:hover:not(:disabled) { background: rgba(108, 92, 231, 0.34); transform: scale(1.06); }
.mv-tool:active:not(:disabled) { transform: scale(0.94); }
.mv-tool:disabled { opacity: 0.32; cursor: default; }

/* Кнопка-процент: она же «вписать в экран». */
.mv-tool--level {
    width: auto;
    min-width: 62px;
    border-radius: 20px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: transparent;
}
.mv-tool--level:hover { background: rgba(255, 255, 255, 0.1); }

.mv-tool-sep {
    width: 1px;
    height: 24px;
    margin: 0 4px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.16);
}

/* Повёрнутое фото — подсвечиваем панель, чтобы состояние было очевидным. */
.mv-toolbar.is-rotated { border-color: rgba(108, 92, 231, 0.55); }

.mv-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    z-index: 101;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, opacity 0.15s linear;
}
.mv-nav:hover { background: rgba(108, 92, 231, 0.34); }
.mv-prev { left: 14px; }
.mv-next { right: 14px; }

.mv-counter {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: max(86px, calc(env(safe-area-inset-top, 0px) + 79px));
    z-index: 101;
    display: none;
    padding: 5px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    pointer-events: none;
    transition: opacity 0.15s linear;
}

@media (max-width: 600px) {
    .mv-nav { width: 40px; height: 40px; font-size: 15px; }
    .mv-prev { left: 8px; }
    .mv-next { right: 8px; }
    .mv-tool { width: 38px; height: 38px; }
    .mv-tool--level { min-width: 56px; font-size: 12px; }
    .mv-toolbar { gap: 2px; padding: 5px; }
}

/* Узкие экраны без места под курсорную навигацию — листаем свайпом. */
@media (max-width: 380px) {
    .mv-nav { display: none !important; }
}

/* WebView без backdrop-filter (см. html.wv-lite) — плотный фон. */
html.wv-lite .mv-toolbar,
html.wv-lite .mv-nav,
html.wv-lite .mv-counter {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(24, 24, 32, 0.96);
}

/* ── Media-only and Sticker Bubble Grid ──
   Внимание: у пузыря-грида КАЖДЫЙ блок обязан иметь свой grid-area. Всё, что
   области не получило (шапка пересылки, имя автора), раскладывается
   авто-потоком: свободных ячеек в шаблоне нет, и такой блок уезжает в неявную
   строку ПОД содержимым — «Переслано от» оказывалось внизу сообщения. Поэтому
   строки fwd/author заведены явно; пустыми они схлопываются в 0. */
.chat-card .chat-bubble.media-only-bubble {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-areas:
        "fwd"
        "reply"
        "media"
        "reactions";
    position: relative !important;
    overflow: visible !important;
    width: fit-content !important;
}

.chat-card .chat-bubble.media-only-bubble > .forward-header {
    grid-area: fwd;
}

.chat-card .chat-bubble.media-only-bubble .reply-quote {
    grid-area: reply;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    z-index: 10 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-left: 3px solid var(--accent-color, #6c5ce7) !important;
    color: #eee !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
}

.chat-card .chat-bubble.media-only-bubble .reply-quote strong {
    color: #fff !important;
}

.chat-card .chat-bubble.media-only-bubble .chat-media-wrapper {
    grid-area: media;
    border-radius: 18px !important;
    margin: 0 !important;
}

.chat-card .chat-bubble.media-only-bubble .msg-meta.media-meta {
    grid-area: media;
    justify-self: end !important;
    align-self: end !important;
    margin: 0 8px 8px 0 !important;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 5 !important;
}

.chat-card .chat-bubble.media-only-bubble .reactions-list {
    grid-area: reactions;
    margin: 6px 0 0 4px !important;
    padding: 0 !important;
    z-index: 1 !important;
    position: relative !important;
    align-self: start !important;
}

/* Реакции на медиа-без-подписи вынесены ИЗ пузыря (см. createMessageCard): у
   такого сообщения «пузырь» — это сама картинка, а хвостик приклеен к её низу
   (bottom:0 у .chat-bubble::after). Если реакции оставить внутри, они удлиняют
   пузырь вниз, и хвостик отрывается от фото. Поэтому для медиа кладём их
   отдельным блоком под картинкой прямо в .msg-content-col — сторону (лево у
   входящих / право у исходящих) задаёт align-items самого столбца. */
.msg-content-col > .reactions-list {
    margin: 6px 0 0 0;
}
.msg-content-col > .reactions-list:empty {
    display: none;
}

.media-text-bubble .chat-media-grid,
.chat-card .chat-bubble.media-only-bubble .chat-media-grid {
    max-width: 100% !important;
    width: 100% !important;
}

/* Одиночное медиа в media-only/media-text-бабле: подгоняем под форму
   файла. Размеры приходят inline'ом (aspect-ratio + width/height на img,
   aspect-ratio на видео-обёртке), letterbox-фона быть не должно — поэтому
   background: transparent. width НЕ форсим в 100%: для портретных фото
   нужно auto-сжатие, иначе бабл «вытянет» картинку шире её высоты. */
.media-text-bubble .chat-media-grid:has(> *:last-child:nth-child(1)) > *,
.chat-card .chat-bubble.media-only-bubble .chat-media-grid:has(> *:last-child:nth-child(1)) > * {
    background: transparent !important;
    object-position: center !important;
    border-radius: 0 !important;
}

.chat-card .chat-bubble.sticker-bubble {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-areas:
        "fwd"
        "reply"
        "media"
        "reactions";
    position: relative !important;
    overflow: visible !important;
    width: fit-content !important;
}

.chat-card .chat-bubble.sticker-bubble > .forward-header {
    grid-area: fwd;
}

.chat-card .chat-bubble.sticker-bubble .reply-quote {
    grid-area: reply;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    z-index: 10 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-left: 3px solid var(--accent-color, #6c5ce7) !important;
    color: #eee !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
}

.chat-card .chat-bubble.sticker-bubble .reply-quote strong {
    color: #fff !important;
}

.chat-card .chat-bubble.sticker-bubble .chat-sticker {
    grid-area: media;
    margin: 0 !important;
}

.chat-card .chat-bubble.sticker-bubble .msg-meta.media-meta {
    grid-area: media;
    justify-self: end !important;
    align-self: end !important;
    margin: 0 2px 2px 0 !important;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 5 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 2px 6px !important;
    border-radius: 12px !important;
    color: #fff !important;
}

.chat-card .chat-bubble.sticker-bubble .reactions-list {
    grid-area: reactions;
    margin: 6px 0 0 4px !important;
    padding: 0 !important;
    z-index: 1 !important;
    position: relative !important;
    align-self: start !important;
}

/* File-only bubble.
   Строки fwd/author обязательны: без них шапка «Переслано от» и имя автора
   попадали в авто-поток и уезжали ПОД карточку файла — у пересланного файла
   ник отправителя оказывался под временем, ниже всего сообщения. */
.chat-card .chat-bubble.file-only-bubble {
    display: grid !important;
    grid-template-areas:
        "fwd"
        "author"
        "reply"
        "files"
        "meta"
        "reactions";
    position: relative !important;
    overflow: visible !important;
}

.chat-card .chat-bubble.file-only-bubble > .forward-header {
    grid-area: fwd;
}

.chat-card .chat-bubble.file-only-bubble > .msg-author {
    grid-area: author;
}

.chat-card .chat-bubble.file-only-bubble .reply-quote {
    grid-area: reply;
}

.chat-card .chat-bubble.file-only-bubble .chat-files-list {
    grid-area: files;
}

.chat-card .chat-bubble.file-only-bubble .tg-voice-msg {
    grid-area: files;
}

.chat-card .chat-bubble.file-only-bubble .tg-file-msg {
    grid-area: files;
}

.chat-card .chat-bubble.file-only-bubble > .msg-meta.file-meta {
    grid-area: meta;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 2px 0 0 0 !important;
    padding: 0 4px !important;
    position: static !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    float: none !important;
    font-size: 11px;
    box-sizing: border-box;
}

.chat-card .chat-bubble.file-only-bubble .reactions-list {
    grid-area: reactions;
    margin: 6px 0 0 4px !important;
    padding: 0 !important;
    z-index: 1 !important;
    position: relative !important;
    align-self: start !important;
}

/* ── Settings Profile Preview ── */
.settings-profile-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-element);
    border-radius: 16px;
    margin: 15px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.s-banner {
    width: 100%;
    height: 100px;
    background-color: var(--bg-element);
    background-size: cover;
    background-position: center;
}

.s-avatar-container {
    position: relative;
    width: 84px;
    height: 84px;
    margin-top: -42px;
    border-radius: 50%;
    background: var(--bg-element);
    padding: 6px;
    box-sizing: border-box;
}

.s-avatar-container .s-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.s-avatar-container .s-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.s-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 15px 20px 15px;
    width: 100%;
    box-sizing: border-box;
}

.s-name {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.s-status {
    font-size: 13px;
    color: var(--success-color);
    font-weight: 600;
    margin-top: 4px;
}

.s-badges {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.profile-badge {
    font-size: 16px;
    background: rgba(108, 92, 231, 0.1);
    padding: 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 5px 15px;
    flex-shrink: 0;
}

.s-menu-list {
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.s-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #ccc;
    border: 1px solid transparent;
}

.s-menu-item:hover {
    background: rgba(108, 92, 231, 0.08);
    border-color: rgba(108, 92, 231, 0.1);
    color: #fff;
    transform: translateX(4px);
}

/* Унифицированный «фон категории» — одинаковая подложка для всех
   пунктов настроек, без разноцветных градиентов. Делаем чуть более
   контрастный, чем body, чтобы пункты читались как карточки. */
.s-menu-item--uniform {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.s-menu-item--uniform:hover {
    background: rgba(108, 92, 231, 0.10);
    border-color: rgba(108, 92, 231, 0.25);
}

.s-menu-item .s-icon {
    width: 24px;
    font-size: 16px;
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
    margin-right: 12px;
    transition: color 0.2s;
}
.s-menu-item:hover .s-icon { color: var(--accent-color); }

.s-menu-item .s-text {
    flex: 1;
    font-size: 14.5px;
    font-weight: 500;
}

.s-menu-item .s-arrow {
    font-size: 12px;
    color: #555;
    transition: transform 0.2s;
}
.s-menu-item:hover .s-arrow { transform: translateX(3px); color: var(--accent-color); }

.s-menu-item.danger .s-icon,
.s-menu-item.danger .s-text {
    color: var(--danger-color);
}

.s-menu-item.danger:hover {
    background: rgba(255, 71, 87, 0.08);
    border-color: rgba(255, 71, 87, 0.15);
}

.edit-cosmetics-btn {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,0.6); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; transition: all 0.2s; display: flex;
    align-items: center; justify-content: center; z-index: 10;
    backdrop-filter: blur(5px);
}

.edit-cosmetics-btn:hover { background: var(--accent-color); box-shadow: 0 0 12px var(--accent-glow); }

/* ── Settings Pill Header ── */
.settings-pill-header {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    margin: 15px;
    transition: all 0.2s;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.settings-pill-header:hover { background: rgba(108, 92, 231, 0.12); }
.settings-pill-header i { color: var(--text-secondary); font-size: 16px; margin-right: 12px; }
.settings-pill-header span { color: #fff; font-weight: 700; font-size: 14px; }

/* ── Active Sessions ── */
.sessions-refresh-btn {
    background: none; border: none; color: var(--accent-color); cursor: pointer;
    padding: 8px 15px; font-size: 15px; transition: transform 0.3s;
}
.sessions-refresh-btn:hover { transform: rotate(180deg); }
.sessions-refresh-btn:active { color: #5a4bd1; }

/* ── «Подключить устройство» — кнопка над списком сессий ── */
.connect-device-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%;
    padding: 14px 18px;
    margin: 8px 0 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #5865f2, #7289da);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    box-shadow: 0 6px 16px rgba(88,101,242,0.35);
}
.connect-device-btn i { font-size: 18px; }
.connect-device-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(88,101,242,0.45); }
.connect-device-btn:active { transform: translateY(0); opacity: .9; }

/* ── Полноэкранный сканер QR ── */
.qr-scanner-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: #000;
    color: #fff;
    display: flex; flex-direction: column;
}
.qr-scanner-stage {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column; align-items: stretch;
    padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}
.qr-scanner-back {
    position: absolute; top: calc(env(safe-area-inset-top, 0) + 14px); left: 14px;
    z-index: 4;
    background: rgba(0,0,0,0.0);
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    display: flex; align-items: center; gap: 4px;
    cursor: pointer; padding: 8px;
}
.qr-scanner-back i { font-size: 18px; }

.qr-scanner-title-block {
    position: relative; z-index: 3;
    padding: 70px 22px 18px;
    text-align: center;
}
.qr-scanner-title { font-size: 28px; font-weight: 800; line-height: 1.15; }
.qr-scanner-subtitle { color: #b9b9b9; font-size: 14px; line-height: 1.45; margin-top: 10px; }

.qr-scanner-viewport {
    /* Жёстко квадратный на всех устройствах. Раньше flex:1 вытягивал
       блок по высоте на вертикальных экранах, и aspect-ratio
       проигрывал flex-сайзингу — отсюда «прямоугольная» камера. Без
       flex aspect-ratio теперь честный 1:1, высота вычисляется из
       ширины и квадрат сохраняется. */
    position: relative;
    flex: 0 0 auto;
    margin: 18px auto;
    width: min(80vw, 360px);
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    background: #050505;
}
.qr-scanner-viewport video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.qr-scanner-crosshair {
    position: absolute; inset: 12%;
    pointer-events: none;
}
.qr-corner {
    position: absolute; width: 36px; height: 36px;
    border: 3px solid #fff;
}
.qr-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.qr-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 6px; }
.qr-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 6px; }
.qr-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 6px; }

.qr-scanner-hint {
    position: absolute; left: 0; right: 0; bottom: -38px;
    text-align: center;
    color: #ddd;
    font-size: 13px;
}
.qr-scanner-hint.warn { color: #faa61a; }
.qr-scanner-hint.error { color: #ff4757; }

.qr-scanner-controls {
    display: flex; justify-content: center; align-items: center;
    gap: 18px;
    padding: 60px 0 28px;
}
.qr-torch-btn {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.qr-torch-btn.active { background: #fff; color: #111; }
.qr-torch-btn:hover { background: rgba(255,255,255,0.22); }

/* ── Карточка подтверждения после успешного скана ── */
.qr-confirm-card {
    position: absolute; left: 50%; bottom: 36px;
    transform: translateX(-50%);
    width: min(92vw, 380px);
    background: #1e1e24;
    border-radius: 18px;
    padding: 22px 22px 18px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.55);
    text-align: center;
    z-index: 5;
    border: 1px solid rgba(255,255,255,0.08);
}
.qr-confirm-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; margin-bottom: 12px;
    border: 2px solid rgba(255,255,255,0.1);
}
.qr-confirm-title { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.qr-confirm-meta { margin-bottom: 16px; }
.qr-confirm-name { color: #fff; font-size: 14px; font-weight: 600; }
.qr-confirm-device { color: #888; font-size: 12px; margin-top: 4px; }
.qr-confirm-actions { display: flex; gap: 10px; }
.qr-confirm-reject, .qr-confirm-approve {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease;
}
.qr-confirm-reject { background: #2f3136; color: #fff; }
.qr-confirm-reject:hover { background: #393c43; }
.qr-confirm-approve { background: linear-gradient(135deg, #5865f2, #7289da); color: #fff; }
.qr-confirm-approve:hover { transform: translateY(-1px); }

.sessions-loading {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 40px 0; color: #555; font-size: 13px;
}
.sessions-loading i { font-size: 24px; color: var(--accent-color); }

.session-current-section {
    margin-bottom: 8px;
}
.session-section-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--accent-color);
    padding: 12px 4px 8px; user-select: none;
}
.session-current-card {
    background: rgba(108, 92, 231, 0.04);
    border: 1px solid rgba(108, 92, 231, 0.12);
    border-radius: 16px; padding: 14px 16px;
    display: flex; align-items: center; gap: 14px;
    position: relative;
}
.session-current-card::before {
    content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--success-color);
}

.session-icon-wrap {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 20px;
    background: rgba(108, 92, 231, 0.1);
    transition: transform 0.2s;
}
.session-card:hover .session-icon-wrap { transform: scale(1.08); }

.session-info { flex: 1; min-width: 0; }
.session-device-name {
    color: #fff; font-weight: 600; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-browser {
    color: var(--text-secondary); font-size: 12.5px; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-meta {
    color: #555; font-size: 12px; margin-top: 3px;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-meta-dot { color: #444; }
.session-online-badge {
    color: var(--success-color); font-weight: 600; font-size: 12px;
}

.sessions-terminate-all {
    width: 100%; padding: 12px 16px; margin: 12px 0 4px;
    background: rgba(255, 71, 87, 0.06); border: 1px solid rgba(255, 71, 87, 0.15);
    border-radius: 14px; color: #ff4757; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sessions-terminate-all:hover {
    background: rgba(255, 71, 87, 0.12); border-color: rgba(255, 71, 87, 0.3);
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.1);
}
.sessions-terminate-all:active { transform: scale(0.98); }

.sessions-terminate-hint {
    font-size: 12px; color: #444; text-align: center;
    padding: 4px 10px 8px; line-height: 1.4;
}

.session-other-section { margin-top: 4px; }

/* ── Срок жизни текущей сессии (radio-список) ───────────────────── */
.session-expiry-section { margin-top: 4px; }
.session-expiry-list {
    display: flex; flex-direction: column; gap: 6px;
}
.session-expiry-option {
    width: 100%; text-align: left;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px; padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: background 0.18s, border-color 0.18s, transform 0.12s;
    color: inherit;
}
.session-expiry-option:hover {
    background: rgba(108, 92, 231, 0.06);
    border-color: rgba(108, 92, 231, 0.18);
}
.session-expiry-option:active { transform: scale(0.99); }
.session-expiry-option.active {
    background: rgba(108, 92, 231, 0.10);
    border-color: rgba(108, 92, 231, 0.45);
}
.session-expiry-radio {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: border-color 0.18s;
}
.session-expiry-radio span {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent-color);
    transform: scale(0); transition: transform 0.18s;
}
.session-expiry-option.active .session-expiry-radio {
    border-color: var(--accent-color);
}
.session-expiry-option.active .session-expiry-radio span { transform: scale(1); }
.session-expiry-text { flex: 1; min-width: 0; }
.session-expiry-label {
    color: #fff; font-weight: 600; font-size: 14px;
}
.session-expiry-hint {
    color: var(--text-secondary); font-size: 12px; margin-top: 2px;
}

.session-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px; padding: 12px 14px;
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 8px; cursor: pointer;
    transition: all 0.25s; position: relative;
    overflow: hidden;
}
.session-card:hover {
    background: rgba(108, 92, 231, 0.06);
    border-color: rgba(108, 92, 231, 0.12);
}
.session-card:active { transform: scale(0.985); }

.session-terminate-btn {
    background: none; border: none; color: #ff4757;
    cursor: pointer; padding: 8px; font-size: 14px;
    border-radius: 50%; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; opacity: 0.6;
}
.session-card:hover .session-terminate-btn { opacity: 1; }
.session-terminate-btn:hover { background: rgba(255, 71, 87, 0.15); }

.sessions-empty {
    text-align: center; padding: 30px 20px; color: #555;
}
.sessions-empty i { font-size: 36px; color: #333; margin-bottom: 12px; display: block; }
.sessions-empty-text { font-size: 13px; line-height: 1.5; }

.session-card.removing {
    animation: sessionSlideOut 0.3s ease forwards;
}
@keyframes sessionSlideOut {
    to { opacity: 0; transform: translateX(60px); max-height: 0; padding: 0 14px; margin: 0; overflow: hidden; }
}

/* ── Toggle Switch ── */
.toggle-switch {
    position: relative; display: inline-block; width: 44px; height: 24px; margin-top: 5px;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-element); transition: .4s; border-radius: 24px;
    border: 1px solid var(--border-color);
}

.toggle-slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 2px;
    background-color: white; transition: .4s; border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider { background-color: var(--accent-color); border-color: var(--accent-color); box-shadow: 0 0 8px var(--accent-glow); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

.settings-title-clickable {
    cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.2s;
}

.settings-title-clickable:hover { color: #fff; }

.blocked-user-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px; background: rgba(0,0,0,0.3); border-radius: 10px; margin-bottom: 5px;
}

.unblock-btn {
    background: none; border: none; color: #ff4757; cursor: pointer; font-size: 14px; transition: all 0.2s;
}

.unblock-btn:hover { color: #ff6b81; }

.frame-item.active {
    border-color: var(--accent-color) !important;
    background: rgba(108, 92, 231, 0.1) !important;
}

.frame-item:hover {
    background: rgba(108, 92, 231, 0.08);
}

#messagesArea {
    overflow-anchor: auto;
    -webkit-overflow-scrolling: touch;
}

/* Глобально НЕ форсим min-height на медиа — иначе портретные/маленькие
   фото получают letterbox. Минимум применяется только к гридам с >1
   элементом (см. правила .chat-media-grid:has(...) выше). */

/* ── Stars ── */
.stars-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.star-package-form {
    width: 100%;
    margin: 0;
}

.package-btn {
    width: 100%;
    background: var(--bg-element);
    border: 2px solid var(--border-color);
    border-radius: 14px;
    padding: 20px 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.package-btn:hover {
    border-color: #f1c40f;
    background: rgba(241, 196, 15, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(241, 196, 15, 0.1);
}

.package-amount {
    font-size: 22px;
    font-weight: 800;
    color: #f1c40f;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.package-amount::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/static/default-icons/balance.png');
    background-size: cover;
}

.package-price {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.package-popular {
    border-color: #f1c40f;
    background: rgba(241, 196, 15, 0.08);
}

.package-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #f1c40f;
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-bottom-left-radius: 8px;
    text-transform: uppercase;
}

.stars-info-card {
    border: 1px solid rgba(108, 92, 231, 0.15);
    background: rgba(108, 92, 231, 0.04);
    padding: 20px;
    border-radius: 16px;
}

.stars-card-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
}

.stars-card-divider {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 0;
    margin-bottom: 15px;
}

.stars-card-body {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.stars-features-list {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.feature-icon {
    color: var(--accent-color);
    width: 20px;
    text-align: center;
}

.feature-text {
    flex: 1;
}

.balance-section {
    margin-top: 20px;
}

.balance-card {
    background: rgba(108, 92, 231, 0.06);
    padding: 15px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(108, 92, 231, 0.1);
}

.balance-star-icon {
    width: 32px;
    height: 32px;
}

.balance-amount {
    font-size: 32px;
    font-weight: 800;
    color: #f1c40f;
    text-shadow: 0 0 15px rgba(241,196,15,0.4);
}

.packages-section {
    margin-top: 20px;
}

.stars-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.star-package-form {
    width: 100%;
    margin: 0;
}

.package-card-btn {
    width: 100%;
    background: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.package-card-btn:hover {
    border-color: rgba(108, 92, 231, 0.3);
    background: rgba(108, 92, 231, 0.06);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.package-star-icon {
    width: 18px;
    height: 18px;
}

.package-star-amount {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.package-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.package-price-btn {
    background: var(--bg-body);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 30px;
    border-radius: 10px;
    transition: all 0.2s;
}

.package-popular {
    border-color: var(--accent-color);
    background: rgba(108, 92, 231, 0.06);
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.15);
}

.package-popular:hover {
    border-color: #7c6ef0;
    background: rgba(108, 92, 231, 0.1);
    box-shadow: 0 10px 35px rgba(108, 92, 231, 0.25);
}

.package-popular .package-glow-effect {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(108, 92, 231, 0.3) 0%, rgba(108, 92, 231, 0) 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.package-popular .package-star-amount {
    color: #a29bfe;
}

.package-popular .package-price-btn {
    background: var(--accent-color);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.stacked-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.stacked-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--bg-element);
    margin-left: -12px;
    position: relative;
    background-color: var(--bg-input);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: border-color 0.2s;
}

.stacked-icon:first-child {
    margin-left: 0;
}

.package-card-btn:hover .stacked-icon {
    border-color: rgba(108, 92, 231, 0.2);
}

.package-popular .stacked-icon {
    border-color: rgba(108, 92, 231, 0.15);
}

.package-popular:hover .stacked-icon {
    border-color: rgba(108, 92, 231, 0.25);
}

/* ── Shop ── */
.shop-categories-nav {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    margin-bottom: 20px;
    scrollbar-width: none;
}

.shop-categories-nav::-webkit-scrollbar {
    display: none;
}

.shop-category-chip {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.shop-category-chip.active, .shop-category-chip:hover {
    background: rgba(108, 92, 231, 0.12);
    color: var(--accent-color);
    border-color: rgba(108, 92, 231, 0.3);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.15);
}

.shop-category-banner-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.shop-category-banner-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 70px;
    opacity: 0.15;
    z-index: 1;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
}

.shop-item-card {
    background: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.shop-item-card:hover {
    transform: translateY(-4px);
    background: rgba(108, 92, 231, 0.06);
    border-color: rgba(108, 92, 231, 0.2);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.shop-item-preview {
    position: relative;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
}

.shop-item-avatar-bg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
}

.shop-item-image {
    width: 64px;
    height: 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    object-fit: contain;
}

.shop-item-name {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    flex: 1;
}

.shop-buy-btn {
    width: 100%;
    padding: 8px 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
}

.shop-buy-btn.can-buy {
    background: rgba(108, 92, 231, 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(108, 92, 231, 0.3);
}

.shop-buy-btn.can-buy:hover {
    background: rgba(108, 92, 231, 0.2);
    border-color: rgba(108, 92, 231, 0.5);
    box-shadow: 0 0 12px var(--accent-glow);
    transform: translateY(-1px);
}

.shop-buy-btn.cannot-buy {
    background: rgba(255, 71, 87, 0.08);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.2);
    cursor: not-allowed;
}

.shop-categories-nav-wrapper {
    position: sticky;
    top: -15px;
    z-index: 100;
    background: var(--bg-panel);
    padding: 15px 0 10px 0;
    margin-top: -15px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.shop-categories-nav {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
}

.shop-categories-nav::-webkit-scrollbar { display: none; }

.shop-category-chip {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.shop-category-chip.active, .shop-category-chip:hover {
    background: rgba(108, 92, 231, 0.12);
    color: var(--accent-color);
    border-color: rgba(108, 92, 231, 0.3);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.15);
}

.shop-category-block {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 30px;
}

.shop-category-banner {
    height: 120px;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--border-color);
}

.shop-category-banner-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.shop-category-banner-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.shop-category-body {
    padding: 20px;
}

.header-balance-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid rgba(108, 92, 231, 0.4);
    border-radius: 20px;
    padding: 4px 10px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 0 12px rgba(108, 92, 231, 0.15);
}

.header-balance-pill img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(108,92,231,0.6));
}

.settings-content.custom-scroll::-webkit-scrollbar {
    width: 4px;
}

.settings-content.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.settings-content.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.2);
    border-radius: 10px;
}

.settings-content.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.4);
}

.chat-card.mine.temp-msg {
    animation: messagePopUp 0.25s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes messagePopUp {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Cosmetics ── */
.profile-cosmetics-grid { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 15px; }
.cosmetic-item { display: flex; flex-direction: column; gap: 10px; }
.cosmetic-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.edit-image-box { position: relative; cursor: pointer; background: var(--bg-element); border: 2px dashed var(--border-color); border-radius: 14px; overflow: hidden; transition: all 0.3s; }
.edit-image-box:hover { border-color: var(--accent-color); box-shadow: 0 0 15px var(--accent-glow); }
.edit-image-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.avatar-box { width: 120px; height: 120px; border-radius: 50%; }
.banner-box { width: 320px; height: 100px; }

.edit-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; opacity: 0; transition: all 0.3s; font-size: 13px; font-weight: 500; backdrop-filter: blur(4px); }
.edit-image-box:hover .edit-overlay { opacity: 1; }

.cropper-container { width: 100%; height: 400px; background: var(--bg-input); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cropper-container img { max-width: 100%; max-height: 100%; display: block; }

.btn-cancel { background: transparent; border: 1px solid var(--text-secondary); color: var(--text-primary); padding: 8px 16px; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.btn-cancel:hover { background: rgba(255,255,255,0.05); }
.btn-save { background: var(--accent-color); border: none; color: #fff; padding: 8px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.2s; box-shadow: 0 4px 12px var(--accent-glow); }
.btn-save:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-save:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Cropper Modal ── */
.cropper-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cropper-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    width: 100%;
    max-width: 650px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: scale(0.95);
    opacity: 0;
    animation: cropperPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@keyframes cropperPopIn {
    to { transform: scale(1); opacity: 1; }
}

.cropper-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(108, 92, 231, 0.03);
}

.cropper-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}

.cropper-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cropper-close:hover {
    background: rgba(255, 71, 87, 0.1);
    color: var(--danger-color);
}

.cropper-body {
    padding: 24px;
    background: var(--bg-body);
}

.cropper-workspace {
    width: 100%;
    height: 400px;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

.cropper-workspace img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.cropper-hint {
    margin: 15px 0 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.cropper-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(108, 92, 231, 0.03);
}

.cropper-btn {
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cropper-btn-cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.cropper-btn-cancel:hover { background: rgba(255,255,255,0.05); }

.cropper-btn-save {
    background: var(--accent-color);
    border: none;
    color: #fff;
    box-shadow: 0 4px 15px var(--accent-glow);
}

.cropper-btn-save:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--accent-glow);
}

.cropper-btn-save:disabled {
    opacity: 0.7; cursor: not-allowed; transform: none;
}

/* ── Desktop Override ── */
@media (min-width: 769px) {
    .bottom-nav {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        background: var(--bg-panel) !important;
        border: none !important;
    }
}

/* ── Premium Chat List ── */
.chat-list-user-banner {
    position: absolute;
    z-index: 0;
    top: 0; left: 0; bottom: 0;
    width: 70%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.72) 36%, rgba(0,0,0,.24) 70%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.72) 36%, rgba(0,0,0,.24) 70%, transparent 100%);
}
.chat-list-user-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-list-user-banner::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,.58));
}
.chat-list-item > *:not(.chat-list-user-banner):not(.chat-call-avatars) { position: relative; z-index: 1; }
.chat-list-item.has-user-banner:hover .chat-last-msg {
    text-shadow: 0 1px 4px rgba(0,0,0,.75);
}
/* Чёрная тень родителя визуально глушила прозрачный текст анимированных
   никнеймов при наведении. Эффекты ника всегда остаются на полной яркости. */
.chat-list-item .chat-name .nick-fx,
.cp-member-item .cp-member-name .nick-fx {
    opacity: 1;
    text-shadow: none;
}

.chat-list-item.premium-styled-chat {
    background: linear-gradient(90deg, color-mix(in srgb, var(--p-color) 10%, transparent) 0%, transparent 100%) !important;
}

.chat-list-item.premium-styled-chat:hover,
.chat-list-item.premium-styled-chat.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--p-color) 18%, transparent) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}

.chat-card.theirs .chat-bubble.premium-styled-msg {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p-color) 26%, var(--bg-element)) 0%, var(--bg-element) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--p-color) 30%, transparent) !important;
}

.chat-card.mine .chat-bubble.premium-styled-msg {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p-color) 55%, #6c5ce7) 0%, #6c5ce7 100%) !important;
    border: 1px solid color-mix(in srgb, var(--p-color) 40%, transparent) !important;
}

.chat-card.theirs .chat-bubble.premium-styled-msg .tg-voice-play {
    background: color-mix(in srgb, var(--p-color) 85%, #000) !important;
    color: #fff !important;
}
.chat-card.mine .chat-bubble.premium-styled-msg .tg-voice-play {
    background: #fff !important;
    color: var(--p-color) !important;
}
.chat-card .chat-bubble.premium-styled-msg .tg-voice-progress {
    background: var(--p-color) !important;
}
.chat-card.mine .chat-bubble.premium-styled-msg .tg-voice-progress {
    background: #fff !important;
}
.chat-card .chat-bubble.premium-styled-msg .tg-voice-time {
    color: color-mix(in srgb, var(--p-color) 60%, #aaa) !important;
}
.chat-card .chat-bubble.premium-styled-msg .tg-voice-progress-bg {
    background: color-mix(in srgb, var(--p-color) 20%, transparent) !important;
}
.chat-card.mine .chat-bubble.premium-styled-msg .tg-voice-progress-bg {
    background: rgba(255,255,255,0.35) !important;
}

.chat-card.theirs .chat-bubble.premium-styled-msg .tg-file-icon {
    background: color-mix(in srgb, var(--p-color) 25%, #1a1a1a) !important;
    color: var(--p-color) !important;
}
.chat-card.mine .chat-bubble.premium-styled-msg .tg-file-icon {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}
.chat-card.theirs .chat-bubble.premium-styled-msg .tg-file-msg {
    border-color: color-mix(in srgb, var(--p-color) 20%, transparent) !important;
}
.chat-card.mine .chat-bubble.premium-styled-msg .tg-file-msg {
    border-color: rgba(255,255,255,0.15) !important;
}
.chat-card .chat-bubble.premium-styled-msg .tg-file-name {
    color: color-mix(in srgb, var(--p-color) 50%, #fff) !important;
}

.chat-card .chat-bubble.premium-styled-msg .forward-header {
    border-left-color: var(--p-color);
}
.chat-card .chat-bubble.premium-styled-msg .forward-icon {
    color: var(--p-color);
}
.chat-card .chat-bubble.premium-styled-msg .forward-tag {
    color: var(--p-color);
}

.chat-list-item [class*="badge"]:not(.prem-badge),
.chat-list-item [class*="unread"]:not(.prem-badge) {
    background-color: color-mix(in srgb, var(--accent-color, #6c5ce7) 20%, transparent) !important;
    color: var(--accent-color, #6c5ce7) !important;
    position: static !important;
    margin-top: 0 !important;
    /* transform: scale(0.9) убран: он мылил цифры (дробный масштаб) и не
       менял геометрию коробки. Итоговый размер задан в .unread-badge. */
}

.chat-list-item.premium-styled-chat [class*="badge"]:not(.prem-badge),
.chat-list-item.premium-styled-chat [class*="unread"]:not(.prem-badge) {
    background-color: color-mix(in srgb, var(--p-color) 20%, transparent) !important;
    color: var(--p-color) !important;
}

.premium-modal-header {
    background: linear-gradient(180deg, color-mix(in srgb, var(--p-color) 25%, transparent) 0%, rgba(18, 18, 26, 0.9) 100%) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--p-color) 30%, transparent) !important;
}

.premium-modal-action-btn {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p-color) 15%, transparent) 0%, rgba(255,255,255,0.05) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--p-color) 40%, transparent) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--p-color) 10%, transparent) !important;
    transition: all 0.25s ease-in-out;
    color: #fff !important;
}

.premium-modal-action-btn i {
    color: var(--p-color) !important;
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--p-color) 50%, transparent));
}

.premium-modal-action-btn:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--p-color) 25%, transparent) 0%, rgba(255,255,255,0.1) 100%) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--p-color) 20%, transparent) !important;
    transform: translateY(-2px);
}

.premium-star {
    color: var(--p-color) !important;
    font-size: 0.9em;
    margin-left: 6px;
    vertical-align: middle;
    filter: drop-shadow(0 0 3px var(--p-color));
}

.reaction-pill .reaction-icon,
.emoji-btn .reaction-icon {
    max-height: 20px;
    vertical-align: middle;
    display: inline-block;
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--p-color) 40%, transparent));
}

.star-reaction-btn {
    background: rgba(108, 92, 231, 0.1) !important;
    border: 1px solid rgba(108, 92, 231, 0.4) !important;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(108, 92, 231, 0.15);
    transition: all 0.25s ease;
    padding: 0 10px !important;
}

.star-reaction-btn:hover {
    background: rgba(108, 92, 231, 0.2) !important;
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.3);
    transform: scale(1.1);
}

.reaction-pill.star-reaction-pill {
    background: rgba(108, 92, 231, 0.05);
    border: 1px solid rgba(108, 92, 231, 0.25);
    color: #fff;
}

.reaction-pill.star-reaction-pill.active {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.15) 0%, rgba(108, 92, 231, 0.05) 100%);
    border-color: rgba(108, 92, 231, 0.6);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.2);
}

.reaction-pill {
    position: relative;
    overflow: visible;
}

.star-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #6c5ce7;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 5px #6c5ce7;
    opacity: 0;
    animation: particleExplosion var(--duration) ease-out infinite;
}

@keyframes particleExplosion {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translate(calc(-50% + (var(--tx) * 0.1)), calc(-50% + (var(--ty) * 0.1))) scale(1);
    }
    100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
        opacity: 0;
    }
}

/* ── Profile Card ── */
/* Карточка профиля без рамки: аватар по центру баннера, под ним ник со
   статусом и тег, а по краям — QR-визитка (слева) и бабл уровня (справа)
   на высоте сразу под баннером. Премиум-подложка (градиент палитры) снята
   намеренно — карточка одинаковая у всех. */
/* Сама карточка НЕ выделяется на фоне «Настроек»: без подложки, тени и рамки —
   это просто область страницы. Скругление и обрезка тоже сняты: скруглён
   отдельно баннер, а аватар с рамкой должен свободно свисать за его край
   (overflow: hidden срезал бы нижнюю половину). */
.profile-card {
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
    position: relative;
    box-shadow: none;
    margin: 15px 24px 20px 24px;
    flex-shrink: 0;
    border: none;
}

.profile-banner-wrapper {
    position: relative;
    width: 100%;
    height: 120px;
    cursor: pointer;
    border-radius: 16px;
}

.profile-banner {
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    background-size: cover;
    background-position: center;
    transition: filter 0.3s ease;
}

.profile-avatar-container {
    position: absolute;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 88px;
    z-index: 2;
}

/* Строка «QR слева — уровень справа». Лежит сразу под баннером, ровно в той
   полосе, куда свисает аватар: сам аватар абсолютный и на поток не влияет. */
.profile-side-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 0 14px;
    min-height: 44px;
    box-sizing: border-box;
}

.profile-avatar-wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--bg-panel);
    background-color: var(--bg-element);
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.profile-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 115%;
    height: 115%;
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
}

/* Затемнение с блюром при наведении на аватар/баннер.
   ВАЖНО: собственный border-radius обязателен. backdrop-filter создаёт свой
   слой и НЕ обрезается скруглением родителя (overflow: hidden у .profile-card
   и .profile-avatar-wrapper на него не действует) — из-за этого блюр вылезал
   квадратом за круг аватара и за скруглённые углы баннера. */
.profile-hover-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Аватар — круг. */
.profile-avatar-wrapper .profile-hover-overlay {
    border-radius: 50%;
}

/* Баннер лежит на фоне «Настроек» сам по себе (у карточки подложки нет),
   поэтому скруглены все четыре угла — и у него, и у слоя наведения. */
.profile-banner-wrapper .profile-hover-overlay {
    border-radius: 16px;
}

.profile-banner-wrapper:hover .profile-hover-overlay,
.profile-avatar-wrapper:hover .profile-hover-overlay {
    opacity: 1;
}

/* filter на самом баннере тоже даёт свой слой — скругляем и его. */
.profile-banner-wrapper:hover .profile-banner {
    filter: blur(2px) brightness(0.7);
}
.profile-banner {
    border-radius: 16px;
}

.profile-info {
    padding: 6px 20px 18px 20px;
    text-align: center;
}

/* Заголовок карточки профиля: [ник] [бейдж] … [бабл уровня].
   Длинный ник раньше ломал всю карточку: .js-own-nick — флекс-элемент с
   min-width: auto, то есть сжиматься ниже своей ширины он не мог, строка
   вылезала за карточку, налезала на соседей, а бабл уровня (margin-left:auto)
   уезжал за границу .profile-card и обрезался её overflow: hidden.
   Лечится тремя правилами: ник сжимается и получает многоточие, бейдж и бабл
   уровня не сжимаются никогда. */
.profile-name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}
.profile-name .js-own-nick {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-name .prem-badge { flex-shrink: 0; }

.profile-tag {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 4px;
    display: block;
}
/* Строка «@тег + бейджи»: у .profile-tag display:block, поэтому без flex
   бейджи уезжали под тег на отдельную строку. */
.profile-tag-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.profile-tag-row .ubadge-row { margin-top: 4px; }

/* ── Modal Content Override ── */
.modal-content {
    background: var(--bg-element);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--shadow-ambient);
}

.modal-header {
    font-size: 22px;
    color: var(--text-primary);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#groupStepIndicator {
    font-size: 13px;
    font-weight: normal;
    background: rgba(108, 92, 231, 0.12);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(108, 92, 231, 0.1);
}

#groupStep1 .chat-search-input {
    background: var(--bg-input);
}

#userSelectList {
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-input);
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 0;
}

#selectedCount {
    color: var(--accent-color);
}

#groupStep2 {
    display: none;
}

#groupAvatarPreview {
    border: 3px solid rgba(255, 255, 255, 0.05);
    object-fit: cover;
    background: var(--bg-input);
}

.group-banner-upload {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0,0,0,0.1);
    overflow: hidden;
}

#groupBannerPreview {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.group-banner-upload .upload-btn {
    position: absolute;
    bottom: 8px; right: 8px;
}

.upload-btn {
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    text-align: center;
    transition: all 0.2s;
}

.upload-btn:hover {
    background: rgba(108, 92, 231, 0.15);
}

.settings-page, #settingsMain {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 90px !important;
    height: 100%;
    box-sizing: border-box;
    /* По запросу пользователя: красивый accent-скроллбар показываем всем,
       не только премиум-аккаунтам (раньше `body:not(.is-premium)` гасил его). */
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 92, 231, 0.35) transparent;
}

.settings-page::-webkit-scrollbar,
#settingsMain::-webkit-scrollbar {
    width: 6px;
}

.settings-page::-webkit-scrollbar-track,
#settingsMain::-webkit-scrollbar-track {
    background: transparent;
}

.settings-page::-webkit-scrollbar-thumb,
#settingsMain::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.28);
    border-radius: 10px;
    transition: background 0.2s;
}

.settings-page::-webkit-scrollbar-thumb:hover,
#settingsMain::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.55);
}

/* Hide empty shop categories.
   ВАЖНО: правило ограничено #shopCategoriesContent (витрина магазина). Раньше
   оно было глобальным и прятало ЛЮБОЙ .shop-category-block без .shop-item-card,
   из-за чего в «Инвентаре» (где рамки рендерятся как .frame-selector-card, а не
   .shop-item-card) скрывались вообще все блоки — и купленные рамки, и карточка
   «Без рамки». */
#shopCategoriesContent .shop-category-body:not(:has(.shop-item-card)) {
    display: none;
}
#shopCategoriesContent .shop-category-block:not(:has(.shop-item-card)) {
    display: none;
}

/* ── Settings Submit Button ── */
.settings-submit-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: var(--accent-color);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s;
    margin-top: 4px;
    box-shadow: 0 4px 12px var(--accent-glow);
}
.settings-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-glow); }
.settings-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── Frame Selector ── */
.frame-selector-wrap {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px;
}
.frame-selector-wrap::-webkit-scrollbar { display: none; }
.frame-selector-card {
    flex-shrink: 0; width: 78px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: transform 0.2s;
}
.frame-selector-card:hover { transform: translateY(-2px); }
.frame-selector-preview {
    width: 72px; height: 72px; position: relative; border-radius: 50%;
    border: 2px solid transparent; transition: all 0.25s;
}
.frame-selector-card.active .frame-selector-preview {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.25);
}
.frame-selector-preview img.frame-sel-avatar {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.frame-selector-preview img.frame-sel-frame {
    position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
    object-fit: contain; pointer-events: none;
}
.frame-selector-preview .frame-sel-noframe {
    width: 100%; height: 100%; border-radius: 50%;
    background: rgba(255,255,255,0.03); border: 2px dashed #444;
    display: flex; align-items: center; justify-content: center;
    color: #555; font-size: 22px;
}
.frame-selector-label {
    font-size: 11px; color: var(--text-secondary); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72px;
}

/* ── Premium Upsell Modal ── */
.premium-upsell-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(10px);
    z-index: 100000; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.premium-upsell-overlay.visible { opacity: 1; }

.premium-upsell-card {
    width: 380px; max-width: 90vw; border-radius: 24px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 50px rgba(108,92,231,0.3);
    animation: premiumCardAppear 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

@keyframes premiumCardAppear {
    from { transform: scale(0.85) translateY(30px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.premium-upsell-header {
    position: relative; padding: 40px 30px 30px; text-align: center;
    background: linear-gradient(135deg, #6c5ce7, #a55eea, #6c5ce7, #5a4bd1);
    background-size: 300% 300%;
    animation: premiumGradientShift 4s ease infinite;
    overflow: hidden;
}

@keyframes premiumGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.premium-upsell-header::before {
    content: ''; position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: premiumUpsellFloat 3s ease-in-out infinite;
}

@keyframes premiumUpsellFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20px, -20px) rotate(5deg); }
}

.premium-upsell-header .premium-star-icon {
    width: 64px; height: 64px; margin: 0 auto 16px;
    background: rgba(255,255,255,0.15); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 30px rgba(108,92,231,0.4);
}

.premium-upsell-header .premium-star-icon svg {
    width: 32px; height: 32px; color: #fff;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
}

.premium-upsell-header h3 {
    font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 8px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.premium-upsell-header p {
    font-size: 14px; color: rgba(255,255,255,0.85); margin: 0;
    line-height: 1.5;
}

.premium-upsell-body {
    background: var(--bg-body); padding: 24px 30px;
}

.premium-upsell-features {
    list-style: none; padding: 0; margin: 0 0 20px;
}

.premium-upsell-features li {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; font-size: 14px; color: #ccc;
    border-bottom: 1px solid var(--border-color);
}

.premium-upsell-features li:last-child { border-bottom: none; }

.premium-upsell-features li .feature-icon {
    width: 32px; height: 32px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
    background: rgba(108,92,231,0.15); color: #a55eea;
}

.premium-upsell-features li .feature-highlight {
    background: rgba(108,92,231,0.25); color: #c084fc;
    border: 1px solid rgba(108,92,231,0.3);
}

.premium-upsell-btn {
    width: 100%; padding: 14px; border: none; border-radius: 14px;
    font-size: 16px; font-weight: 600; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #6c5ce7, #a55eea);
    box-shadow: 0 4px 20px rgba(108,92,231,0.4);
    transition: all 0.25s ease; display: flex; align-items: center;
    justify-content: center; gap: 8px;
}

.premium-upsell-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(108,92,231,0.5);
}

.premium-upsell-close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: none;
    color: #fff; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(5px);
}
.premium-upsell-close:hover { background: rgba(255,255,255,0.25); }

.premium-upsell-header .floating-particle {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.15);
    animation: floatParticle linear infinite;
    pointer-events: none;
}

@keyframes floatParticle {
    0% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { opacity: 1; }
    100% { transform: translateY(-120px) scale(0); opacity: 0; }
}

/* ── Voice Transcription ── */
.tg-voice-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.tg-voice-bottom {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

/* Кнопка транскрипции — «таблетка» с надписью Aa (было: круглая иконка). */
.tg-voice-transcribe-btn {
    min-width: 36px; height: 30px; border-radius: 10px;
    padding: 0 9px;
    background: rgba(255,255,255,0.06); border: none;
    color: var(--accent-color); cursor: pointer;
    font-size: 14px; font-weight: 700; line-height: 1;
    font-family: inherit; letter-spacing: 0.2px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, color 0.2s ease; z-index: 2;
    flex-shrink: 0;
    align-self: center;
}

.tg-voice-transcribe-btn:hover {
    background: rgba(108,92,231,0.2);
}

.tg-voice-transcribe-btn.active {
    background: rgba(108,92,231,0.25); color: var(--accent-color);
}

/* В исходящем (фиолетовом) пузыре акцентный цвет на фоне не читается. */
.chat-card.mine .tg-voice-transcribe-btn {
    background: rgba(255,255,255,0.16); color: #fff;
}
.chat-card.mine .tg-voice-transcribe-btn:hover { background: rgba(255,255,255,0.28); }

/* ── Скорость воспроизведения (ГС и видео-кружки), как в Телеграм ─────────── */
/* В верхних барах (#vnHotBar, #voiceMiniPlayer) переключатель — «таблетка»
   переменной ширины (влезает «1.5×»), а не круглая кнопка-иконка. */
.speed-btn.js-speed-btn {
    width: auto;
    min-width: 36px;
    padding: 0 9px;
    border-radius: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.js-speed-label { line-height: 1; white-space: nowrap; }

/* Инлайн-бейдж на самом играющем голосовом — виден только во время проигрывания. */
.tg-voice-speed {
    display: none;
    align-items: center; justify-content: center;
    height: 18px; min-width: 30px;
    padding: 0 7px; margin-left: 2px;
    border: none; border-radius: 9px;
    background: rgba(108,92,231,0.18);
    color: var(--accent-color, #7289da);
    font-size: 11px; font-weight: 700; line-height: 1;
    cursor: pointer; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    transition: background 0.15s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.tg-voice-msg.tg-playing .tg-voice-speed { display: inline-flex; }
.tg-voice-speed:hover { background: rgba(108,92,231,0.32); }
.tg-voice-speed:active { transform: scale(0.92); }
.chat-card.mine .tg-voice-speed { background: rgba(255,255,255,0.18); color: #fff; }
.chat-card.mine .tg-voice-speed:hover { background: rgba(255,255,255,0.30); }

.tg-voice-transcript {
    width: 100%; max-width: 340px;
    padding: 8px 12px; margin-top: 4px;
    font-size: 13px; color: #ccc; line-height: 1.5;
    background: rgba(108,92,231,0.04);
    border-radius: 10px; border-top: 1px solid rgba(108,92,231,0.15);
    animation: transcriptSlideDown 0.3s ease;
    word-break: break-word;
    box-sizing: border-box;
    flex-basis: 100%;
}

@keyframes transcriptSlideDown {
    from { opacity: 0; max-height: 0; padding: 0 12px; margin-top: 0; }
    to { opacity: 1; max-height: 200px; padding: 8px 12px; margin-top: 4px; }
}

.tg-voice-transcript .transcript-loading {
    display: flex; align-items: center; gap: 8px; color: var(--text-secondary);
}

.tg-voice-transcript .transcript-loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Folder Tabs (iOS Telegram-style underline tabs) ── */

/* Wrapper holds the bar + left/right scroll arrows */
.folder-tabs-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-panel);
}

/* Arrow buttons collapse to 0 width when not needed */
.folder-tabs-arrow {
    flex-shrink: 0;
    width: 0;
    overflow: hidden;
    border: none;
    background: var(--bg-panel);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 0;
    transition: width 0.18s ease, color 0.15s;
    z-index: 2;
}
.folder-tabs-arrow.visible { width: 26px; }
.folder-tabs-arrow:hover { color: #fff; }

.folder-tabs-bar {
    display: flex;
    overflow-x: auto;
    gap: 0;
    padding: 0 6px;
    scrollbar-width: none;
    flex: 1;
    background: var(--bg-panel);
}
.folder-tabs-bar::-webkit-scrollbar { display: none; }

/* Flex-column layout lets ::before reserve the bold width without shifting siblings */
.folder-tab {
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px 14px 11px;
    margin: 0 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    letter-spacing: 0.1px;
    transition: color 0.18s ease;
}
/* Invisible bold clone — reserves the bold-state width so the tab never shifts */
.folder-tab::before {
    content: attr(data-label);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    white-space: nowrap;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}
.folder-tab::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    background: var(--accent-color);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
}
.folder-tab:hover { color: #fff; }
.folder-tab.active {
    color: var(--accent-color);
    font-weight: 600;
}
.folder-tab.active::after { transform: scaleX(1); }
.folder-tab:focus-visible { outline: none; color: var(--accent-color); }

/* Hide the search-bar bottom border when the folder tabs are shown — avoids double line */
#tab-chats.has-folders .sidebar-header {
    border-bottom: none;
}

/* ── Folder Settings Modal ── */
.folder-settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 10px;
    transition: background 0.15s;
}
.folder-settings-row:hover { background: rgba(108,92,231,0.06); }
.folder-settings-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(108,92,231,0.15);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-color);
    font-size: 16px;
    flex-shrink: 0;
}
.folder-settings-info { flex: 1; min-width: 0; }
.folder-settings-name { font-size: 14px; font-weight: 600; color: #fff; }
.folder-settings-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.folder-settings-btns { display: flex; gap: 6px; }
.folder-action-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
}
.folder-action-btn:hover { background: rgba(108,92,231,0.15); color: #fff; }
.folder-action-btn.danger:hover { background: rgba(231,76,60,0.2); color: #e74c3c; border-color: rgba(231,76,60,0.3); }
.folder-empty-hint {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.folder-chat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.folder-chat-row:hover { background: rgba(108,92,231,0.07); }
.folder-chat-avatar-wrap {
    position: relative;
    width: 38px; height: 38px;
    flex-shrink: 0;
}
.folder-chat-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* Рамка аватара — повторяет геометрию .chat-avatar-frame из списка диалогов. */
.folder-chat-frame {
    position: absolute; top: -15%; left: -15%;
    width: 130%; height: 130%;
    z-index: 2; pointer-events: none;
}
/* Точка онлайн/оффлайн в правом-нижнем углу аватара. */
.folder-chat-dot {
    position: absolute;
    right: 0; bottom: 0;
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 2px solid var(--bg-panel, #1e1e24);
    box-sizing: border-box;
    z-index: 3;
}
.folder-chat-dot.online { background: #43b581; box-shadow: 0 0 5px rgba(67,181,129,0.5); }
.folder-chat-dot.offline { background: #6b6b75; }
.folder-chat-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.folder-chat-name {
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.folder-chat-status {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.folder-chat-status.online { color: #43b581; }
.folder-chat-cb {
    width: 18px; height: 18px;
    accent-color: var(--accent-color);
    cursor: pointer;
    flex-shrink: 0;
}
#folderNameInput:focus { border-color: var(--accent-color); }

/* ── Drag & Drop file overlay (desktop) ── */
.drag-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.drag-drop-overlay.active {
    display: flex;
    pointer-events: auto;
    animation: ddFadeIn 0.18s ease-out;
}
.drag-drop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 14, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.drag-drop-modal {
    position: relative;
    z-index: 1;
    width: min(460px, 78%);
    padding: 38px 32px 30px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(40, 34, 60, 0.92), rgba(22, 20, 32, 0.92));
    border: 2px dashed rgba(169, 103, 255, 0.55);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 60px rgba(169, 103, 255, 0.18);
    text-align: center;
    color: #fff;
    animation: ddPop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.drag-drop-icon-stack {
    position: relative;
    width: 110px;
    height: 92px;
    margin: 0 auto 18px;
}
.drag-drop-icon-stack .dd-ic {
    position: absolute;
    top: 50%; left: 50%;
    width: 64px; height: 64px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
    transform-origin: center;
}
.drag-drop-icon-stack .dd-ic-1 {
    background: linear-gradient(135deg, #6c5ce7, #a967ff);
    transform: translate(-50%, -50%) rotate(-14deg) translateX(-34px);
    animation: ddFloat1 3.4s ease-in-out infinite;
}
.drag-drop-icon-stack .dd-ic-2 {
    background: linear-gradient(135deg, #a967ff, #ff6bcb);
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 2;
    animation: ddFloat2 3.4s ease-in-out infinite;
}
.drag-drop-icon-stack .dd-ic-3 {
    background: linear-gradient(135deg, #ff6bcb, #ff9d5c);
    transform: translate(-50%, -50%) rotate(14deg) translateX(34px);
    animation: ddFloat3 3.4s ease-in-out infinite;
}
.drag-drop-title {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #fff, #d9c6ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.drag-drop-subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.68);
    margin-bottom: 16px;
    line-height: 1.5;
}
.drag-drop-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}
.drag-drop-hint i { color: #a967ff; }

@keyframes ddFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ddPop {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ddFloat1 {
    0%, 100% { transform: translate(-50%, -50%) rotate(-14deg) translateX(-34px) translateY(0); }
    50%      { transform: translate(-50%, -50%) rotate(-18deg) translateX(-38px) translateY(-6px); }
}
@keyframes ddFloat2 {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg) translateY(0); }
    50%      { transform: translate(-50%, -50%) rotate(2deg) translateY(-10px); }
}
@keyframes ddFloat3 {
    0%, 100% { transform: translate(-50%, -50%) rotate(14deg) translateX(34px) translateY(0); }
    50%      { transform: translate(-50%, -50%) rotate(18deg) translateX(38px) translateY(-6px); }
}

/* Hide on touch / narrow screens — drag-and-drop is desktop-only */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
    .drag-drop-overlay { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   iOS PWA / Safe Area — фиксы для «Добавить на экран Домой»
   ─────────────────────────────────────────────────────────────────────
   viewport-fit=cover уже стоит в <meta>, поэтому env() доступны.
   На обычном браузере все max() схлопываются до базовых значений —
   визуально ничего не меняется.
   ════════════════════════════════════════════════════════════════════ */

/* 1. Шапка сайдбара — отодвигаем ниже строки состояния iOS */
.sidebar-header {
    padding-top: max(15px, env(safe-area-inset-top));
}

/* 2. Плавающая шапка чата — сдвигаем вниз на величину safe area */
.chat-header {
    top: max(15px, env(safe-area-inset-top));
}

/* 3. Зона сообщений — увеличиваем верхний padding вместе со шапкой.
      Формула: высота шапки 60px + отступ 15px = 75px базовый офсет. */
.messages-area {
    padding-top: max(90px, calc(env(safe-area-inset-top) + 75px));
}

/* 4. Нижняя навигация на мобиле — поднимаем выше «полоски домой» */
@media (max-width: 768px) {
    .bottom-nav {
        bottom: max(20px, env(safe-area-inset-bottom)) !important;
    }
}

/* 5. Вкладка «Настройки» (#settingsMain) — единственная вкладка сайдбара без
      своей .sidebar-header, поэтому её верх (баннер профиля) в PWA уходил под
      «чёлку». box-sizing: border-box уже стоит (см. правило .settings-page,
      #settingsMain), значит padding остаётся внутри inset:0 без переполнения. */
#settingsMain {
    padding-top: env(safe-area-inset-top);
}

/* 6. Полноэкранные оверлеи, доходящие до самого верха экрана — их верхние
      элементы управления (крестик просмотра фото, шапка звонка) в PWA
      попадали под строку состояния. Сдвигаем на величину safe area.
      На обычном браузере env()=0 → значения совпадают с базовыми. */
.call-screen-fs-topbar {
    padding-top: calc(12px + env(safe-area-inset-top));
}
.photo-modal-close {
    top: max(20px, calc(env(safe-area-inset-top) + 8px));
}
/* Шапка просмотрщика медиа — та же беда: в PWA уезжала под «чёлку». */
.media-modal-header {
    top: max(15px, calc(env(safe-area-inset-top) + 8px));
}


/* ════════════════════════════════════════════════════════════════════
   МУЛЬТИ-АККАУНТЫ
   ─────────────────────────────────────────────────────────────────────
   Кнопка «Добавить аккаунт» оформлена как обычная категория настроек
   (.s-menu-item--uniform). В правую часть встроены компактные «head»-
   аватары до 3 шт. + кружок «…» (если их больше 3). Клик по аватарам
   останавливает propagation и анимированно «расползается» в модалку.
   ════════════════════════════════════════════════════════════════════ */

.multi-account-row {
    gap: 0;
}
.multi-account-row .s-icon.ma-plus-icon {
    color: #43b581;
    filter: drop-shadow(0 0 5px rgba(67, 181, 129, 0.5));
}
.multi-account-row:hover .s-icon.ma-plus-icon { color: #5ee5a5; }

/* Инлайн-полоска аватаров справа от текста, перед стрелкой.
   Overlapping вправо (margin-left: -8px) — компактно умещает 3 аватара. */
.ma-inline-avatars {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 8px;
    /* Лёгкая анимация при смене набора аватаров. */
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ma-strip-loading-inline {
    color: #555;
    font-size: 12px;
    padding: 0 8px;
    display: inline-flex; align-items: center;
}
.ma-strip-loading-inline i { font-size: 12px; }

/* Маленький «head»-аватар внутри кнопки. Появляется со staggered-задержкой
   (см. JS: --ma-delay), создавая эффект «расползания» от центра. */
.ma-mini {
    width: 30px; height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    padding: 2px;
    margin-left: -8px;       /* overlap */
    cursor: pointer;
    transition: transform 0.2s ease, z-index 0s;
    z-index: 1;
    opacity: 0;
    transform: translateX(-6px) scale(0.85);
    animation: maMiniIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--ma-delay, 0ms);
}
.ma-mini:first-child { margin-left: 0; }
@keyframes maMiniIn {
    to { opacity: 1; transform: translateX(0) scale(1); }
}
.ma-mini:hover {
    transform: scale(1.12) translateY(-1px);
    z-index: 5;
}
.ma-mini::before {
    /* Зелёный обод активного — такой же conic-gradient, как и раньше. */
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #43b581, #5ee5a5, #43b581);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 0;
}
.ma-mini.is-active::before { opacity: 1; }
.ma-mini img {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #1a1a1a;
    /* Обводка тоном кнопки, чтобы overlap читался как «карточки». */
    box-shadow: 0 0 0 2px rgba(20, 20, 24, 1);
}
.ma-mini:not(.is-active) img {
    box-shadow: 0 0 0 2px rgba(20, 20, 24, 1), 0 0 0 3px rgba(255,255,255,0.04);
}
.ma-mini .ma-mini-unread {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 14px; height: 14px;
    border-radius: 7px;
    background: #ff4757;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    z-index: 4;
    box-shadow: 0 0 0 2px rgba(20, 20, 24, 1);
}

/* Кружок с троеточием — показывается только если аккаунтов больше 3. */
.ma-mini.ma-mini-more {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
    color: #ddd;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    padding: 0;
    box-sizing: border-box;
}
.ma-mini.ma-mini-more:hover {
    background: rgba(114, 137, 218, 0.18);
    border-color: #7289da;
    color: #fff;
}

/* ── Модалка со всеми мульти-аккаунтами ──────────────────────────── */
.ma-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: maOverlayIn 0.2s ease;
}
@keyframes maOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.ma-modal-content {
    width: 100%;
    max-width: 440px;
    background: #1d1d22;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    max-height: min(80vh, 700px);
    animation: maModalIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
@keyframes maModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Грабер сверху — на десктопе скрыт, на мобильном bottom-sheet виден и
   служит зоной для drag-to-dismiss. */
.ma-modal-grabber {
    display: none;
    width: 40px; height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    margin: 8px auto 0;
    flex-shrink: 0;
    cursor: grab;
}
.ma-modal-grabber:active { cursor: grabbing; }

.ma-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.ma-modal-title { color: #fff; font-size: 16px; font-weight: 700; }

/* ──────────────────────────────────────────────────────────────────
   Универсальная модалка под категории «Настройки» (повторяет
   форм-фактор «барабана» мульти-аккаунтов). Содержимое категории
   временно перемещается в .ma-modal-scroll.

   ВАЖНО: высоту НЕ просим у flex — родитель .ma-modal-content имеет
   только max-height, а не height, поэтому `flex:1` на скролле
   схлопывался в 0 и модалка выглядела пустой. Делаем block + сам
   ставим max-height с overflow-y, чтобы:
     • короткие категории (Cache) подгоняли модалку под себя;
     • длинные (Stars, Sessions) скроллились внутри.
   ────────────────────────────────────────────────────────────────── */
.ma-modal-content--settings {
    max-width: 560px;
    max-height: 88vh;
}
.ma-modal-scroll {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 90px = .ma-modal-grabber (~12) + .ma-modal-header (~60) + paddings */
    max-height: calc(88vh - 90px);
    /* Firefox: тонкий accent-цветной скроллбар как на остальном сайте. */
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 92, 231, 0.35) transparent;
}
/* WebKit: тот же стиль, что используется у .chat-list/.messages-area/.cp-body. */
.ma-modal-scroll::-webkit-scrollbar {
    width: 6px;
}
.ma-modal-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}
.ma-modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.28);
    border-radius: 10px;
    transition: background 0.2s;
}
.ma-modal-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.55);
}
/* Внутренние скролл-области отдельных категорий (например, длинные списки
   сессий, фолдеров и т.п.), если они переопределяют overflow на своём уровне. */
.settings-page.in-settings-modal .settings-content::-webkit-scrollbar,
.settings-page.in-settings-modal .sessions-list::-webkit-scrollbar,
.settings-page.in-settings-modal .folders-list::-webkit-scrollbar {
    width: 6px;
}
.settings-page.in-settings-modal .settings-content::-webkit-scrollbar-thumb,
.settings-page.in-settings-modal .sessions-list::-webkit-scrollbar-thumb,
.settings-page.in-settings-modal .folders-list::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.28);
    border-radius: 10px;
}
.settings-page.in-settings-modal .settings-content::-webkit-scrollbar-thumb:hover,
.settings-page.in-settings-modal .sessions-list::-webkit-scrollbar-thumb:hover,
.settings-page.in-settings-modal .folders-list::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.55);
}
/* Когда .settings-page лежит внутри модалки — гасим её собственный
   flex-layout, который был нужен для слайда внутри сайдбара.
   КРИТИЧНО: в основной теме `.settings-page` имеет
   `position: absolute !important; top/left/right/bottom: 0`
   (см. правила выше в файле). С этим !important блок выпрыгивает
   из ma-modal-scroll и заполняет всю .ma-modal-content до краёв.
   Отсюда жалоба «модалка очень сжата / контент налезает на хедер».
   Глушим абсолют, padding-bottom (90px под bottom-nav, в модалке
   bottom-nav скрыт), background и z-index. */
.settings-page.in-settings-modal {
    display: block !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    background: transparent !important;
    z-index: auto !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
}
.settings-page.in-settings-modal > .sidebar-header {
    display: none !important;
}
.settings-page.in-settings-modal > .settings-content {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 15px !important;
}
.settings-page.in-settings-modal .sessions-refresh-btn {
    /* Кнопку refresh сессий выносим в правый верхний угол модалки. */
    position: absolute;
    top: 12px; right: 56px;
    z-index: 2;
}
.ma-modal-close {
    background: none; border: none; color: #888;
    cursor: pointer; font-size: 16px;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
.ma-modal-close:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ma-modal-loading { padding: 30px; text-align: center; color: #777; }

/* ══════════════════════════════════════════════════════════════════
   БАРАБАН: 6 ячеек, 3 × 2 (на широком), 2 × 3 (на узком)
   ────────────────────────────────────────────────────────────────── */
.ma-modal-content--drum {
    max-width: 720px;
}
.ma-drum-wrap {
    padding: 18px;
    overflow-y: auto;
}
.ma-drum {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.ma-drum-loading {
    grid-column: 1 / -1;
    padding: 40px;
    text-align: center;
    color: #777;
}
.ma-drum-hint {
    margin-top: 14px;
    text-align: center;
    color: #777;
    font-size: 12px;
    line-height: 1.5;
}
.ma-drum-hint #multiAccountCount {
    color: #fff;
    font-weight: 700;
    margin-right: 2px;
}

/* ── Ячейка барабана ────────────────────────────────────────────── */
.ma-cell {
    position: relative;
    aspect-ratio: 1 / 1.15;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #14141a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    animation: maCellIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--ma-delay, 0ms);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
@keyframes maCellIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ma-cell:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(108, 92, 231, 0.4);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.ma-cell.is-active {
    border-color: rgba(67, 181, 129, 0.65);
    box-shadow: 0 0 0 1px rgba(67, 181, 129, 0.5), 0 8px 24px rgba(67, 181, 129, 0.18);
}
.ma-cell.is-active:hover {
    transform: translateY(-2px) scale(1.01);
}

/* Баннер занимает верхние ~58% карточки. */
.ma-cell-banner {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 58%;
    background-size: cover;
    background-position: center;
    background-color: #1f1f28;
    z-index: 0;
}
.ma-cell-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg,
        rgba(20, 20, 26, 0.10) 0%,
        rgba(20, 20, 26, 0.45) 50%,
        rgba(20, 20, 26, 0.95) 100%);
    z-index: 1;
}

/* Аватар по центру, между баннером и текстом. */
.ma-cell-avatar-wrap {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    z-index: 2;
}
.ma-cell-avatar {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #1a1a1a;
    box-shadow: 0 0 0 3px #14141a, 0 4px 14px rgba(0, 0, 0, 0.6);
}
.ma-cell-frame {
    position: absolute; top: -8px; left: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    pointer-events: none;
    object-fit: contain;
    z-index: 3;
}

.ma-cell-name {
    position: relative;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    text-align: center;
    line-height: 1.2;
    margin-top: auto;
    margin-bottom: 2px;
    padding: 0 8px;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex; align-items: center; justify-content: center;
    gap: 4px;
}
.ma-cell-name .ma-cell-premium {
    font-size: 10px;
    flex-shrink: 0;
}
.ma-cell-tag {
    position: relative;
    z-index: 2;
    color: #999;
    font-size: 11px;
    text-align: center;
    margin-bottom: 12px;
    padding: 0 8px;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Бейдж непрочитанных — поверх баннера, в правом верхнем углу. */
.ma-cell-unread {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 4;
    min-width: 22px; height: 22px;
    border-radius: 11px;
    background: #ff4757;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 7px;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.5);
}

/* «Текущий аккаунт» — зелёный чек в правом верхнем углу. */
.ma-cell-active-pin {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 4;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #43b581;
    color: #fff;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(67, 181, 129, 0.55);
}

/* Крестик-отвязка — слева вверху. Появляется при hover. */
.ma-cell-remove {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 4;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ddd;
    font-size: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}
.ma-cell:hover .ma-cell-remove { opacity: 1; }
.ma-cell-remove:hover {
    color: #ff4757;
    background: rgba(255, 71, 87, 0.15);
    border-color: rgba(255, 71, 87, 0.5);
    transform: scale(1.1);
}

/* ── Пустая ячейка («Свободно» + «+») ────────────────────────────── */
.ma-cell--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    gap: 10px;
}
.ma-cell--empty:hover {
    background: rgba(67, 181, 129, 0.06);
    border-color: rgba(67, 181, 129, 0.45);
    border-style: solid;
}
.ma-cell-plus-circle {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(67, 181, 129, 0.18);
    color: #43b581;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
    filter: drop-shadow(0 0 6px rgba(67, 181, 129, 0.4));
}
.ma-cell--empty:hover .ma-cell-plus-circle {
    background: #43b581;
    color: #fff;
    transform: scale(1.08);
}
.ma-cell-empty-label {
    color: #888;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ma-cell--empty:hover .ma-cell-empty-label { color: #43b581; }

/* ── Мобильные экраны: bottom-sheet с граббером ─────────────────── */
@media (max-width: 600px) {
    .ma-modal { padding: 0; align-items: flex-end; }
    .ma-modal-content {
        max-width: 100%;
        border-radius: 18px 18px 0 0;
        max-height: 92vh;
        animation: maModalInMobile 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .ma-modal-content--drum { max-width: 100%; }
    .ma-modal-content--settings { max-width: 100%; max-height: 92vh; }
    /* На bottom-sheet 92vh — высота карточки. У скролла даём чуть меньше,
       чтобы хедер + грабер всегда оставались над краем. */
    .ma-modal-scroll { max-height: calc(92vh - 90px); }
    .ma-drum { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ma-drum-wrap { padding: 14px; }

    /* На мобильном грабер виден — это handle для свайпа. */
    .ma-modal-grabber { display: block; }
    /* Хедер уже не drag-handle — на мобильном свайп начинается с граббера
       или с любого места выше .ma-modal-scroll (см. JS). */

    @keyframes maModalInMobile {
        from { opacity: 0; transform: translateY(100%); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ============================================================================
   ИНТЕГРАЦИИ (settings → Интеграции)
   Каждая интеграция — «карточка» (.integration-card). Левая полоса-акцент
   красится в фирменный цвет конкретного сервиса (steam = синий, soon =
   нейтральный серый). Базовый фон сделан под общую тему профиля — лёгкая
   фиолетовая «глассморфоза», чтобы карточка выглядела как часть стандартной
   .settings-section, но при этом выделялась как самостоятельный объект.
   ============================================================================ */

.integrations-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(102, 192, 244, 0.15);
    color: #66c0f4;
    margin-right: 10px;
    box-shadow: 0 0 12px rgba(102, 192, 244, 0.3);
}
.integrations-badge svg,
.integrations-badge i { width: 14px; height: 14px; font-size: 14px; line-height: 1; }
.integrations-badge--epic {
    background: rgba(230, 230, 238, 0.14);
    color: #e6e6ee;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    margin-right: 10px;
}

.integration-card {
    position: relative;
    background: linear-gradient(160deg, rgba(108, 92, 231, 0.07), rgba(108, 92, 231, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid rgba(108, 92, 231, 0.5);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.integration-card:last-child { margin-bottom: 0; }
.integration-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Цвет акцента — фирменный Steam blue (#66c0f4). is-linked делает его
   ярче и добавляет небольшое внутреннее свечение. */
.integration-card--steam { border-left-color: #66c0f4; }
.integration-card--steam.is-linked {
    background: linear-gradient(160deg, rgba(102, 192, 244, 0.10), rgba(102, 192, 244, 0.02));
    border-left-color: #66c0f4;
    box-shadow: inset 0 0 24px rgba(102, 192, 244, 0.05);
}

/* Epic Games — фирменный нейтрально-светлый акцент (логотип чёрно-белый). */
.integration-card--epic { border-left-color: #cfd0db; }
.integration-card--epic.is-linked {
    background: linear-gradient(160deg, rgba(207, 208, 219, 0.10), rgba(207, 208, 219, 0.02));
    border-left-color: #e6e6ee;
    box-shadow: inset 0 0 24px rgba(207, 208, 219, 0.05);
}
.integration-card__icon--epic {
    background: linear-gradient(135deg, rgba(45, 45, 54, 0.9), rgba(20, 20, 26, 0.9));
    color: #e6e6ee;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.integration-card--soon {
    border-left-color: rgba(139, 141, 163, 0.5);
    background: linear-gradient(160deg, rgba(139, 141, 163, 0.05), rgba(139, 141, 163, 0.01));
    opacity: 0.7;
    cursor: default;
}
.integration-card--soon:hover { transform: none; box-shadow: none; }

.integration-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.integration-card__icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(102, 192, 244, 0.20), rgba(102, 192, 244, 0.05));
    color: #66c0f4;
    box-shadow: 0 4px 14px rgba(102, 192, 244, 0.18);
}
.integration-card__icon svg,
.integration-card__icon i { width: 28px; height: 28px; font-size: 28px; line-height: 1; }
.integration-card__icon--soon {
    background: linear-gradient(135deg, rgba(139, 141, 163, 0.18), rgba(139, 141, 163, 0.04));
    color: var(--text-secondary);
    box-shadow: none;
    font-size: 18px;
}

.integration-card__meta {
    min-width: 0; flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.integration-card__title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.2px;
}
.integration-card__subtitle {
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.4;
}

.integration-status {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    width: fit-content;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.integration-status i { font-size: 10px; }
.integration-status.is-linked {
    color: #43b581;
    background: rgba(67, 181, 129, 0.12);
    border: 1px solid rgba(67, 181, 129, 0.25);
}
.integration-status.is-unlinked {
    color: var(--text-secondary);
    background: rgba(139, 141, 163, 0.10);
    border: 1px solid rgba(139, 141, 163, 0.20);
}

/* Мини-карточка профиля Steam внутри integration-card.
   Лёгкий темно-синий «steam-blue» фон, чтобы блок выглядел как часть
   фирменного интерфейса самого Steam, но при этом гармонировал с тёмной
   темой Sokket. Аватар — круглый 56px, рамка в цвет аккента. */
.steam-profile-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(27, 40, 56, 0.85), rgba(42, 71, 94, 0.55));
    border: 1px solid rgba(102, 192, 244, 0.25);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate; /* чтобы ::before/video не вылезли поверх соседних карточек */
}
.steam-profile-strip:hover {
    background: linear-gradient(135deg, rgba(34, 50, 74, 0.95), rgba(58, 91, 120, 0.65));
    border-color: #66c0f4;
    transform: translateY(-1px);
}

/* ── Фон профиля Steam (image_large / movie_mp4 из GetProfileItemsEquipped) ──
   Если у пользователя установлен фон профиля Steam, мы рисуем его на всю
   подложку strip-а, поверх кладём левосторонний градиент к чёрному, чтобы
   аватар и никнейм оставались читаемыми. Эффект как в самом Steam. */
.steam-profile-strip.has-bg {
    /* Базовая подложка прозрачнее — фон должен быть виден. */
    background: rgba(11, 17, 28, 0.55);
    border-color: rgba(102, 192, 244, 0.35);
}
.steam-profile-strip.has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--steam-bg, none);
    background-size: cover;
    background-position: center;
    z-index: -2;
    /* Лёгкое затемнение фона целиком, чтобы яркие сцены не «выжигали». */
    filter: brightness(0.85) saturate(1.05);
}
.steam-profile-strip.has-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(11, 17, 28, 0.92) 0%,
        rgba(11, 17, 28, 0.65) 35%,
        rgba(11, 17, 28, 0.35) 65%,
        rgba(11, 17, 28, 0.55) 100%);
    z-index: -1;
}
.steam-profile-strip__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
    filter: brightness(0.85) saturate(1.05);
}
/* Когда есть видео-фон — img-вариант ::before гасим, чтобы не пересекались. */
.steam-profile-strip.has-bg:has(.steam-profile-strip__bg-video)::before {
    display: none;
}
/* Под фоном текст и avatar должны быть выше z-index'ом — все children выше -1. */
.steam-profile-strip.has-bg > .steam-profile-strip__avatar,
.steam-profile-strip.has-bg > .steam-profile-strip__meta,
.steam-profile-strip.has-bg > .steam-profile-strip__link {
    position: relative;
    z-index: 1;
}
/* Hover: ярче, чтобы фон ожил. */
.steam-profile-strip.has-bg:hover {
    background: rgba(11, 17, 28, 0.45);
    border-color: #66c0f4;
}
.steam-profile-strip.has-bg:hover::before,
.steam-profile-strip.has-bg:hover .steam-profile-strip__bg-video {
    filter: brightness(1) saturate(1.15);
}
.steam-profile-strip__avatar {
    position: relative;
    width: 56px; height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(102, 192, 244, 0.10);
    border: 2px solid rgba(102, 192, 244, 0.40);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(102, 192, 244, 0.15);
}
.steam-profile-strip__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.steam-profile-strip__avatar-fallback {
    color: #66c0f4;
    font-size: 22px;
    line-height: 1;
}
.steam-profile-strip__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #66c0f4;
    font-size: 18px;
    background: rgba(11, 17, 28, 0.5);
}
.steam-profile-strip__meta {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.steam-profile-strip__name {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.steam-profile-strip__id {
    color: #8fa9c2;
    font-size: 12px;
    margin-top: 4px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}
.steam-profile-strip__link {
    color: rgba(102, 192, 244, 0.6);
    font-size: 13px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.steam-profile-strip:hover .steam-profile-strip__link {
    color: #66c0f4;
}

.integration-card__body {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.integration-card__desc {
    color: #c8cad6;
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 14px;
}
.integration-card__warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(250, 166, 26, 0.08);
    border: 1px solid rgba(250, 166, 26, 0.25);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    color: #f0c674;
    font-size: 12.5px;
    line-height: 1.5;
}
.integration-card__warning i { margin-top: 2px; color: #faa61a; }
.integration-card__warning a { color: #faa61a; text-decoration: underline; font-weight: 600; }
.integration-card__warning a:hover { color: #ffcc66; }

.integration-card__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Универсальная кнопка интеграции. Базовая — нейтральная стеклянная;
   модификаторы перекрашивают её в фирменный цвет сервиса. */
.integration-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.integration-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}
.integration-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.integration-btn svg,
.integration-btn i { width: 18px; height: 18px; font-size: 18px; line-height: 1; }

.integration-btn--steam {
    background: linear-gradient(135deg, #1b2838, #2a475e);
    border-color: rgba(102, 192, 244, 0.35);
    color: #fff;
    box-shadow: 0 6px 18px rgba(27, 40, 56, 0.45);
}
.integration-btn--steam:hover:not(:disabled) {
    background: linear-gradient(135deg, #22324a, #3a5b78);
    border-color: #66c0f4;
    box-shadow: 0 8px 22px rgba(102, 192, 244, 0.25);
}

.integration-btn--epic {
    background: linear-gradient(135deg, #2a2a32, #15151b);
    border-color: rgba(230, 230, 238, 0.30);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.integration-btn--epic:hover:not(:disabled) {
    background: linear-gradient(135deg, #34343f, #1e1e26);
    border-color: rgba(230, 230, 238, 0.6);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.integration-btn--danger {
    background: rgba(255, 71, 87, 0.10);
    border-color: rgba(255, 71, 87, 0.35);
    color: #ff4757;
}
.integration-btn--danger:hover:not(:disabled) {
    background: rgba(255, 71, 87, 0.18);
    border-color: rgba(255, 71, 87, 0.55);
}

@media (max-width: 600px) {
    .integration-card { padding: 14px; }
    .integration-card__icon { width: 42px; height: 42px; }
    .integration-card__icon svg,
    .integration-card__icon i { width: 24px; height: 24px; font-size: 24px; }
    .integration-card__title { font-size: 15px; }
    .integration-card__actions .integration-btn { flex: 1; justify-content: center; }
}


/* ════════════════════════════════════════════════════════════════════════
   ГОЛОСОВЫЕ КОМНАТЫ (Discord-style)
   Свёрнутый бар под плавающей шапкой + раскрываемая панель со списком комнат.
   ════════════════════════════════════════════════════════════════════════ */

/* Когда показан бар комнат — опускаем плашку видео-кружка ниже бара,
   чтобы они не накладывались (см. .vn-hotbar bottom:-62px). */
.chat-header.has-rooms-bar .vn-hotbar { bottom: -120px; }

/* Бар комнат — плавающая «таблетка» прямо под шапкой. */
.rooms-bar {
    position: absolute;
    /* Шапка диалога: top max(15px, safe-area) + высота 60px + зазор 9px.
       Без привязки к safe-area бар на iOS-PWA уезжал ПОД опущенную шапку
       (z-index 99 < 100) и «исчезал». */
    top: calc(max(15px, env(safe-area-inset-top)) + 69px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
    max-width: 600px;
    height: 42px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--glass-bg, rgba(26,26,32,0.9));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(108,92,231,0.28);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.4);
    cursor: pointer;
    z-index: 99;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.rooms-bar:hover { border-color: rgba(108,92,231,0.5); }

/* ── Закреплённые сообщения (Telegram-стиль плавающий бар под шапкой) ── */
.pinned-bar {
    position: absolute;
    top: calc(max(15px, env(safe-area-inset-top)) + 69px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
    max-width: 600px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 6px 10px 6px 12px;
    background: rgba(26, 26, 32, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(108, 92, 231, 0.28);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
    z-index: 98;
}
/* Если над баром показан rooms-bar — опускаем закреп ниже, чтобы не наложить.
   Состояние берём с #chatMain (класс rooms-active ставится тем же кодом, что
   показывает и прячет сам бар комнат), а НЕ одноразовым снимком видимости в
   момент отрисовки закрепа: снимок устаревал, если бар комнат появлялся или
   исчезал после закрепа (/api/rooms и /api/chat/pins отвечают вразнобой), и
   закреп залипал на 52px ниже до перезагрузки страницы.
   Класс-алиас оставлен, чтобы старый закэшированный JS не ломал вёрстку. */
.chat-main.rooms-active .pinned-bar,
.pinned-bar.pinned-bar--below-rooms {
    top: calc(max(15px, env(safe-area-inset-top)) + 121px);
}
.pinned-bar-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 3px;
    flex: 0 0 3px;
    padding: 3px 0;
}
.pinned-seg {
    flex: 1;
    min-height: 4px;
    border-radius: 2px;
    background: rgba(108, 92, 231, 0.35);
}
.pinned-seg.active { background: var(--accent-color, #6c5ce7); }
.pinned-bar-body {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pinned-bar-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-color, #6c5ce7);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pinned-bar-text {
    font-size: 13px;
    color: var(--text-primary, #e6e6ea);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pinned-bar-author { color: var(--text-secondary, #aaa); font-weight: 500; }
.pinned-bar-action {
    flex: 0 0 auto;
    align-self: center;
    background: none;
    border: none;
    color: var(--text-secondary, #aaa);
    cursor: pointer;
    font-size: 15px;
    padding: 8px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.pinned-bar-action:hover { color: #ff6b6b; background: rgba(255, 107, 107, 0.12); }
/* Первые сообщения не должны прятаться под плавающим баром. */
.messages-area.has-pinned-bar { padding-top: calc(max(15px, env(safe-area-inset-top)) + 125px); }
/* Оба бара сразу: закреп стоит под баром комнат, отступ считаем от НИЗА закрепа
   (иначе правило .rooms-active .messages-area с его 138px выигрывало по
   специфичности и первые сообщения уезжали под закреп). */
.chat-main.rooms-active .messages-area.has-pinned-bar {
    padding-top: calc(max(15px, env(safe-area-inset-top)) + 177px);
}
.rooms-bar-pulse {
    animation: roomsBarPulse 0.9s ease;
}
@keyframes roomsBarPulse {
    0%,100% { box-shadow: 0 6px 22px rgba(0,0,0,0.4); }
    40%     { box-shadow: 0 0 0 2px rgba(67,181,129,0.6), 0 6px 22px rgba(0,0,0,0.4); }
}
.rooms-bar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rooms-bar-icon { color: #6c5ce7; font-size: 15px; }
.rooms-bar-title {
    color: #fff; font-size: 13px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rooms-bar-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: #43b581; color: #fff; font-size: 11px; font-weight: 700;
    border-radius: 10px;
}
.rooms-bar-chevron { color: #aaa; font-size: 13px; transition: transform 0.2s; }
.rooms-bar-chevron.open { transform: rotate(180deg); }

/* Раскрываемая панель — дропдаун поверх сообщений. */
.rooms-panel {
    position: absolute;
    /* Под баром комнат: top бара + 42px высоты + 6px зазора (см. .rooms-bar). */
    top: calc(max(15px, env(safe-area-inset-top)) + 117px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
    max-width: 600px;
    max-height: 52vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    background: rgba(20,20,26,0.97);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(108,92,231,0.25);
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.55);
    z-index: 101;
}
.rooms-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 6px 10px;
    color: #8a8a96; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px;
}
.rooms-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(108,92,231,0.16); color: #b9adf5;
    border: 1px solid rgba(108,92,231,0.35); border-radius: 9px;
    padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
    text-transform: none; letter-spacing: 0;
    transition: background 0.2s;
}
.rooms-add-btn:hover { background: rgba(108,92,231,0.3); }

/* Карточка комнаты. */
.room-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}
.room-card:last-child { margin-bottom: 0; }
/* Без затемнения при наведении — только лёгкая подсветка рамки. */
.room-card:hover { border-color: rgba(108,92,231,0.25); }
.room-card.active-room { background: rgba(67,181,129,0.1); border-color: rgba(67,181,129,0.4); }
.room-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-card-title {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    color: #e8e8ee; font-size: 14px; font-weight: 700;
}
.room-card-title i { color: #6c5ce7; font-size: 13px; }
.room-card-title span:first-of-type {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px;
}
.room-card-num {
    color: #8a8a96; font-size: 12px; font-weight: 700;
}
.room-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.room-join-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(67,181,129,0.16); color: #57d39a;
    border: 1px solid rgba(67,181,129,0.4); border-radius: 9px;
    padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
    transition: background 0.2s;
}
.room-join-btn:hover { background: rgba(67,181,129,0.3); }
.room-leave-btn {
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: rgba(255,71,87,0.16); color: #ff6b78;
    border: 1px solid rgba(255,71,87,0.4);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
    transition: background 0.2s;
}
.room-leave-btn:hover { background: rgba(255,71,87,0.3); }
.room-mng-btn {
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,0.05); color: #9a9aa6;
    border: 1px solid rgba(255,255,255,0.1);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
    transition: background 0.2s, color 0.2s;
}
.room-mng-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.room-del-btn:hover { background: rgba(255,71,87,0.2); color: #ff6b78; }
.room-mng-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Что играет бот «Музыка» в этой комнате. Строка одна: длинное название
   обрезается многоточием, счётчик очереди не сжимается. */
.room-music {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 14px;
    background: rgba(108,92,231,0.14);
    border: 1px solid rgba(108,92,231,0.28);
    font-size: 12px;
    color: var(--text-secondary, #b8b8c4);
    min-width: 0;
}
.room-music-ico { color: #a29bfe; font-size: 11px; flex-shrink: 0; }
.room-music-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-music-queue {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 9px;
    background: rgba(108,92,231,0.3);
    color: #d8d4ff;
    font-size: 11px;
    font-weight: 600;
}

/* Участники комнаты — стек аватаров с именами. */
.room-members { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.room-empty { color: #6a6a76; font-size: 12px; font-style: italic; padding: 2px 0; }
.room-member { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border-radius: 20px; padding: 3px 10px 3px 3px; }
.room-member-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.room-member-name { color: #cfcfd8; font-size: 12px; font-weight: 600; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Когда панель/бар комнат активны — отодвигаем сообщения ниже бара. */
.chat-main.rooms-active .messages-area { padding-top: 138px; }
@media (max-width: 768px) {
    .chat-main.rooms-active .messages-area {
        padding-top: max(138px, calc(env(safe-area-inset-top) + 123px));
    }
}

/* ── Комнаты: таймер, статусы участников, рамки ─────────────────────────── */
.room-timer {
    color: #43d17a; font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums; margin-left: 2px;
}
.room-card-name.room-connecting { color: #b9adf5; font-style: italic; opacity: 0.85; }
/* Участник: аватар с рамкой + ник + статусы в одну строку.
   gap отвечает за расстояние аватар↔ник — оно намеренно маленькое (было 7px):
   ник должен читаться как подпись к аватару, а не висеть отдельно. Статусные
   значки после ника отодвигаются своим margin-left. Нажатие на карточку
   открывает модалку участника (#roomUserModal). */
.room-member {
    position: relative;
    display: flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.04); border-radius: 20px;
    padding: 3px 10px 3px 3px; cursor: pointer;
}
.room-member-mic, .room-member-localmute, .room-member-live { margin-left: 2px; }

/* Обложка профиля фоном карточки — та же техника, что в карточке контакта
   (.contact-card-banner): картинка справа, растворяется к середине маской.
   Ставится ТОЛЬКО премиум-аккаунтам — у остальных сервер отдаёт banner пустым
   (participantBanner в handlers/rooms.go), и карточка выглядит как раньше.
   Скругление на самой обложке, а не overflow:hidden у карточки: overflow
   срезал бы рамку аватара, которая шире фото на 134%. */
.room-member-banner {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 70%;
    z-index: 0;
    overflow: hidden;
    border-radius: 0 20px 20px 0;
    pointer-events: none;
    opacity: 0.62;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 38%, rgba(0, 0, 0, 0.7) 68%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 38%, rgba(0, 0, 0, 0.7) 68%, #000 100%);
}
.room-member-banner > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Затемнение под той же маской: светлые обложки съедали белый ник. */
.room-member-banner::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25));
}
.room-member.has-banner > *:not(.room-member-banner) { position: relative; z-index: 2; }
.room-member.has-banner .room-member-name { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); }

/* Перетаскивание участника в другую комнату (владелец/админ беседы). */
.room-member.is-draggable { cursor: grab; }
.room-member.is-dragging { opacity: 0.35; }
/* Летящая копия карточки под курсором. */
.room-member-ghost {
    position: fixed; z-index: 10050; pointer-events: none;
    opacity: 0.95; transform: scale(1.04);
    box-shadow: 0 10px 24px rgba(0,0,0,0.55);
    background: rgba(40,40,52,0.98);
}
/* Комната, на которую сейчас наведён перенос. */
.room-card.drop-target {
    outline: 2px dashed var(--accent-color, #6c5ce7);
    outline-offset: -3px;
    background-color: rgba(108,92,231,0.12);
}
body.room-drag-active { user-select: none; -webkit-user-select: none; }
body.room-drag-active .room-member { cursor: grabbing; }
.room-member-avwrap {
    position: relative; z-index: 3; width: 26px; height: 26px; flex-shrink: 0;
    /* Обёртка аватара носит и общий класс .chat-avatar-wrapper, а у него
       margin-right: 12px под список диалогов. В карточке участника расстояние
       до ника задаёт только gap — иначе «уменьшить разрыв» ничего не меняет. */
    margin-right: 0;
}
.room-member-av {
    position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block;
}
.room-member-frame {
    position: absolute; z-index: 2; top: 50%; left: 50%;
    width: 134%; height: 134%; transform: translate(-50%, -50%);
    pointer-events: none; object-fit: contain;
}
.room-member-name {
    color: #cfcfd8; font-size: 12px; font-weight: 600;
    max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.room-member-mic { color: #ff6b78; font-size: 11px; }
/* Персональная заглушка собеседника — мягко-голубой зачёркнутый микрофон.
   Виден только тому, кто заглушил (хранится локально). */
.room-member-localmute { color: #7fbbff; font-size: 11px; filter: drop-shadow(0 0 4px rgba(127,187,255,0.45)); }
.room-member-live {
    display: inline-flex; align-items: center;
    background: #f23f43; color: #fff; font-size: 9px; font-weight: 800;
    letter-spacing: 0.4px; padding: 2px 6px; border-radius: 7px; line-height: 1;
}
/* Голосовая активность: зелёная обводка КАРТОЧКИ участника, как в Discord.
   Ставится только участникам ТОЙ комнаты, в которой мы сами (кто говорит в
   соседней — медиа-слою неизвестно).
   Аватар намеренно НЕ подсвечиваем: кольцо вокруг него дублировало обводку
   карточки и вдобавок лезло на рамку аватара (.room-member-frame шире фото на
   134%). Индикатор речи здесь один — рамка блока.
   Рамка рисуется отдельным слоем карточки, но остаётся ниже аватара и его
   декоративной рамки. Поэтому активность не перекрывает оформление профиля,
   даже когда сама рамка заметно шире фотографии. */
.room-member.speaking { background: rgba(59,165,93,0.16); }
.room-member.speaking::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    border-radius: 20px; pointer-events: none;
    box-shadow: 0 0 0 1.5px #3ba55d inset;
}
.room-member.speaking .room-member-name { color: #fff; }

/* ── Модалка участника голосовой комнаты (Discord-style) ─────────────────────
   Открывается простым нажатием на карточку участника и держит всё, что раньше
   было мелкими кнопками в самой карточке: профиль, персональную громкость и
   заглушение, звук трансляции, перемещение по комнатам и «Отключить».
   Разметка — #roomUserModal в chat.html, логика — chat_rooms.js. */
/* Полный селектор: .room-modal-card ниже в файле центрирует текст. Здесь
   карточка участника получает собственную структуру: шапка, секции, действия.
   Контент прокручивается внутри, поэтому кнопки не налезают друг на друга. */
.room-modal#roomUserModal { padding: 16px; box-sizing: border-box; overflow-y: auto; }
.room-modal-card.rum-card {
    width: min(440px, 100%); max-width: 440px; max-height: calc(100dvh - 32px);
    position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column;
    text-align: left; border-color: rgba(132,116,255,0.36);
    background: linear-gradient(155deg, rgba(38,37,49,0.99), rgba(20,20,27,0.99));
}
.rum-close {
    position: absolute; z-index: 5; top: 12px; right: 12px; width: 34px; height: 34px;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 11px; background: rgba(10,10,16,0.42);
    color: #e6e3f4; cursor: pointer; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(10px); transition: background .16s, transform .16s;
}
.rum-close:hover { background: rgba(255,255,255,0.16); transform: scale(1.06); }

/* Шапка: обложка профиля фоном, поверх — аватар, ник и статусы. */
.rum-head {
    position: relative; overflow: hidden; min-height: 116px; flex-shrink: 0;
    display: flex; align-items: flex-end; gap: 14px; padding: 20px;
    background: radial-gradient(circle at 85% 0%, rgba(121,102,255,0.26), transparent 52%), rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rum-banner { position: absolute; inset: 0; pointer-events: none; opacity: .62; }
.rum-banner.is-empty { display: none; }
.rum-banner > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rum-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(16,16,23,.88) 0%, rgba(16,16,23,.48) 60%, rgba(16,16,23,.72) 100%); }
.rum-avwrap { position: relative; width: 68px; height: 68px; flex-shrink: 0; z-index: 1; }
.rum-av {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,.72); box-shadow: 0 7px 24px rgba(0,0,0,.38);
}
.rum-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; object-fit: contain; pointer-events: none; }
.rum-ident { flex: 1; min-width: 0; position: relative; z-index: 1; padding-right: 24px; }
.rum-name { color: #fff; font-size: 19px; font-weight: 850; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 8px rgba(0,0,0,.65); }
.rum-sub { color: #d0cedb; font-size: 12px; line-height: 1.4; margin-top: 4px; text-shadow: 0 1px 5px rgba(0,0,0,.65); }
.rum-status { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.rum-status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 750; background: rgba(12,12,18,.46); color: #e5e2ef; border: 1px solid rgba(255,255,255,.12); }
.rum-status-chip i { color: #bcb3ff; }
.rum-status-chip.is-muted i { color: #ff8b95; }
.rum-status-chip.is-live i { color: #65dc95; }

.rum-body { min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rum-panel { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); }
.rum-panel-title { color: #9290a1; font-size: 10px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; margin: 0 2px 9px; }
.rum-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rum-quick-actions:empty { display: none; }

/* Кнопки-тайлы не имеют внешних margin, поэтому в узкой карточке никогда не
   накладываются на соседние блоки. */
.rum-body .rum-act,
.rum-body .rmm-item {
    width: 100%; min-width: 0; min-height: 48px; box-sizing: border-box;
    display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.09); color: #dedce7; font-family: inherit;
    font-size: 13px; font-weight: 700; padding: 10px 11px; border-radius: 11px;
    cursor: pointer; text-align: left; transition: background .15s, border-color .15s, transform .15s;
}
.rum-body .rum-act:only-child { grid-column: 1 / -1; }
.rum-body .rum-act i, .rum-body .rmm-item i { width: 16px; text-align: center; font-size: 13px; color: #b9b3cd; flex: none; }
.rum-body .rum-act span, .rum-body .rmm-item span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rum-body .rum-act:hover, .rum-body .rmm-item:hover { background: rgba(255,255,255,.12); border-color: rgba(180,169,255,.38); color: #fff; transform: translateY(-1px); }
.rum-body .rum-act.danger, .rum-body .rmm-danger { color: #ff8792; border-color: rgba(255,111,123,.26); }
.rum-body .rum-act.danger i, .rum-body .rmm-danger i { color: #ff8792; }
.rum-body .rum-act.danger:hover, .rum-body .rmm-danger:hover { background: rgba(255,71,87,.16); border-color: rgba(255,111,123,.5); color: #ff9da5; }
.rum-manage .rmm-item + .rmm-item { margin-top: 7px; }
.rum-manage-label { color: #b9b5c8; font-size: 12px; font-weight: 650; margin: 0 2px 8px; }
.rum-hint { color: #9591a5; font-size: 11px; line-height: 1.42; margin: 10px 2px 1px; }

/* Громкость и заглушение участника. */
.rum-body .uvp-mute-btn { width: 100%; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #d8d6e0; font-family: inherit; font-size: 13px; font-weight: 700; padding: 10px; border-radius: 10px; cursor: pointer; margin-bottom: 12px; transition: all .15s; }
.rum-body .uvp-mute-btn:hover { background: rgba(255,255,255,.12); }
.rum-body .uvp-mute-btn.active { background: rgba(127,187,255,.16); color: #8fc7ff; border-color: rgba(127,187,255,.42); }
.rum-body .uvp-vol-row { display: flex; align-items: center; gap: 8px; }
.rum-body .uvp-vol-ico { color: #a6a1b5; font-size: 12px; }
.rum-body .uvp-val { color: #d9d6e4; font-size: 12px; font-weight: 700; min-width: 40px; text-align: right; }
.rum-body .uvp-slider { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); outline: none; cursor: pointer; }
.rum-body .uvp-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-color, #6c5ce7); cursor: pointer; box-shadow: 0 0 7px rgba(108,92,231,.56); }
.rum-body .uvp-slider::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--accent-color, #6c5ce7); cursor: pointer; }
.rum-body .uvp-screen-row { margin-top: 11px; }
.rum-body .uvp-screen-row .uvp-vol-ico { color: #8fc7ff; }
.rum-body .uvp-screen-hint { margin-top: 8px; color: #9692a7; font-size: 11px; line-height: 1.4; }
@media (max-width: 440px) {
    .room-modal#roomUserModal { padding: 10px; }
    .room-modal-card.rum-card { max-height: calc(100dvh - 20px); }
    .rum-head { min-height: 102px; padding: 16px; }
    .rum-avwrap, .rum-frame { width: 58px; height: 58px; }
    .rum-av { width: 50px; height: 50px; }
    .rum-name { font-size: 17px; }
    .rum-body { padding: 12px; }
}

/* ── Модалка управления комнатой ────────────────────────────────────────── */
.room-modal {
    position: fixed; inset: 0; z-index: 4000;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: roomModalFade 0.18s ease;
}
@keyframes roomModalFade { from { opacity: 0; } to { opacity: 1; } }
.room-modal-card {
    width: calc(100% - 40px); max-width: 380px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(34,34,42,0.98), rgba(24,24,30,0.98));
    border: 1px solid rgba(108,92,231,0.25);
    border-radius: 20px; padding: 26px 24px 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    text-align: center;
    animation: roomModalPop 0.22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes roomModalPop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.room-modal-icon-wrap {
    width: 56px; height: 56px; margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(108,92,231,0.16); color: #b9adf5;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.room-modal-icon-wrap.danger { background: rgba(242,63,67,0.16); color: #ff7a82; }
.room-modal-title { color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.room-modal-sub { color: #9a9aa6; font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.room-modal-input {
    width: 100%; box-sizing: border-box;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: 12px 14px; color: #fff; font-size: 14px;
    outline: none; transition: border-color 0.2s; margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
}
.room-modal-input:focus { border-color: rgba(108,92,231,0.6); }
.room-modal-input.shake { animation: roomInputShake 0.4s; border-color: #ff6b78; }
@keyframes roomInputShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-6px); } 75% { transform: translateX(6px); }
}
.room-modal-actions { display: flex; gap: 10px; }
.room-modal-cancel, .room-modal-confirm {
    flex: 1; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 700;
    cursor: pointer; border: none; transition: all 0.18s; font-family: 'Inter', sans-serif;
}
.room-modal-cancel { background: rgba(255,255,255,0.06); color: #cfcfd8; border: 1px solid rgba(255,255,255,0.1); }
.room-modal-cancel:hover { background: rgba(255,255,255,0.12); }
.room-modal-confirm { background: linear-gradient(135deg,#6c5ce7,#5a4bd1); color: #fff; }
.room-modal-confirm:hover { filter: brightness(1.1); }
.room-modal-confirm.danger { background: linear-gradient(135deg,#f23f43,#d12f33); }


/* ── Индикатор звонка в списке диалогов (аватары участников) ─────────────── */
/* Плавающий стек в правом-нижнем углу всего элемента списка — НЕ расширяет
   строку диалога. Контейнер является прямым ребёнком .chat-list-item, поэтому
   right/bottom не зависят от высоты внутреннего .chat-info. */
.chat-call-avatars { position: absolute; right: 14px; bottom: 9px; z-index: 2; display: flex; pointer-events: none; }
.chat-call-avatars:empty { display: none; }
.cca-stack { display: flex; align-items: center; }
.cca-av-wrap { position: relative; width: 20px; height: 20px; margin-left: -6px; }
.cca-av-wrap:first-child { margin-left: 0; }
.cca-av {
    width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
    border: 1.5px solid var(--bg-card, #1c1c24); display: block;
}
/* Рамка чуть опущена, сдвинута вправо и плотно облегает аватар. */
.cca-frame {
    position: absolute; left: calc(50% + 1.5px); top: calc(50% + 1px); width: 138%; height: 138%;
    transform: translate(-50%, -50%); pointer-events: none; object-fit: contain;
}
.cca-more {
    width: 20px; height: 20px; border-radius: 50%; margin-left: -6px;
    background: #3a3a44; border: 1.5px solid var(--bg-card, #1c1c24);
    display: flex; align-items: center; justify-content: center; gap: 2px;
}
.cca-more span { width: 3px; height: 3px; border-radius: 50%; background: #cfcfd8; display: block; }

/* ── Фоны комнат (пресеты-перспективы) ──────────────────────────────────── */
/* Карточка комнаты с фоном: затемняющий оверлей + лёгкий blur, контент выше. */
/* Карточка с фоном. Затемнение запекается прямо в background-image (тёмный
   linear-gradient поверх картинки — см. chat_rooms.js), поэтому покрывает
   ровно область картинки: ни светлых зазоров по краям, ни вылезания за углы.
   overflow:hidden + background-clip:padding-box клиппят картинку по
   скруглению и не дают ей залезать под бордер. */
.room-card.has-bg {
    position: relative; overflow: hidden;
    background-size: cover; background-position: center;
    background-clip: padding-box;
}
.room-card.has-bg > * { position: relative; z-index: 1; }
.room-card.has-bg:hover { background-color: transparent; }

.room-bg-aurora { background-image: linear-gradient(135deg,#6c5ce7,#00cec9); }
.room-bg-sunset { background-image: linear-gradient(135deg,#ff7e5f,#feb47b); }
.room-bg-ocean  { background-image: linear-gradient(135deg,#2193b0,#6dd5ed); }
.room-bg-grape  { background-image: linear-gradient(135deg,#42275a,#734b6d); }
.room-bg-forest { background-image: linear-gradient(135deg,#134e5e,#71b280); }
.room-bg-night  { background-image: linear-gradient(135deg,#0f2027,#2c5364); }
.room-bg-rose   { background-image: linear-gradient(135deg,#ee9ca7,#ffdde1); }
.room-bg-mono   { background-image: linear-gradient(135deg,#232526,#414345); }

/* Сетка свотчей в модалке выбора фона. */
.room-bg-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px;
}
.room-bg-swatch {
    position: relative; height: 64px; border-radius: 12px; cursor: pointer;
    border: 2px solid rgba(255,255,255,0.08); overflow: hidden;
    display: flex; align-items: flex-end; padding: 6px; transition: border-color 0.18s, transform 0.12s;
    background-size: cover; background-position: center;
}
.room-bg-swatch:hover { transform: translateY(-2px); border-color: rgba(108,92,231,0.6); }
.room-bg-swatch.selected { border-color: #6c5ce7; }
.room-bg-swatch.room-bg-none { background: rgba(255,255,255,0.05); }
.room-bg-swatch.room-bg-upload {
    background: rgba(108,92,231,0.12); flex-direction: column; gap: 4px;
    align-items: center; justify-content: center; color: #b9adf5;
}
.room-bg-swatch.room-bg-upload i { font-size: 18px; }
.room-bg-swatch.room-bg-upload .room-bg-swatch-label { color: #b9adf5; }
.room-bg-swatch-label {
    color: #fff; font-size: 11px; font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7); position: relative; z-index: 1;
}
.room-bg-check {
    position: absolute; top: 6px; right: 6px; color: #fff; font-size: 12px;
    background: #6c5ce7; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* ── Панель управления звонком в блоке комнаты (беседы) ──────────────────── */
.room-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 9px; padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.rc-btn {
    width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: #e8e8ee; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.18s, color 0.18s, transform 0.1s;
}
.rc-btn:hover { background: rgba(255,255,255,0.13); transform: translateY(-1px); }
.rc-btn.active { background: rgba(108,92,231,0.25); border-color: rgba(108,92,231,0.5); color: #b9adf5; }
.rc-btn.danger { background: rgba(242,63,67,0.16); border-color: rgba(242,63,67,0.4); color: #ff7a82; }
.rc-btn.danger:hover { background: rgba(242,63,67,0.3); }
.rc-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.rc-btn.is-busy i { animation: room-leave-pulse .8s ease-in-out infinite alternate; }
.rc-leave { margin-left: auto; }
.room-controls--remote-device { flex-wrap: nowrap; }
.room-remote-device-note {
    min-width: 0; display: flex; align-items: center; gap: 7px;
    color: rgba(232,232,238,.7); font-size: 11px; line-height: 1.25;
}
.room-remote-device-note i { color: #aaa0ef; flex: none; }
.room-remote-device-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes room-leave-pulse { from { opacity: .45; } to { opacity: 1; } }
/* Компактный FPS-переключатель внутри бара комнаты. */
.rc-fps.fps-toggle { height: 30px; padding: 3px; border-radius: 9px; }
.rc-fps .fps-option { padding: 0 9px; font-size: 11px; border-radius: 6px; }

/* ── Плавающее окно видео/демонстраций (#mediaStage) ─────────────────────── */
.media-stage {
    position: fixed; z-index: 3500;
    display: none; flex-direction: column;
    width: 440px; height: 320px; min-width: 260px; min-height: 180px;
    background: rgba(18,18,24,0.97);
    border: 1px solid rgba(108,92,231,0.3); border-radius: 14px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.6);
    overflow: hidden; user-select: none;
}
.media-stage.expanded {
    left: 3vw !important; top: 3vh !important;
    width: 94vw !important; height: 92vh !important;
}
.media-stage-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; cursor: move; flex-shrink: 0;
    background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08);
    touch-action: none;
}
.media-stage-title { color: #e8e8ee; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.media-stage-title i { color: #6c5ce7; }
.media-stage-actions { display: flex; gap: 6px; }
.media-stage-actions button {
    width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: #cfcfd8; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.media-stage-actions button:hover { background: rgba(255,255,255,0.14); color: #fff; }
.media-stage-grid {
    flex: 1; display: grid; gap: 4px; padding: 4px; min-height: 0;
    grid-template-columns: 1fr; grid-auto-rows: 1fr;
}
.media-stage-grid.count-2 { grid-template-columns: 1fr 1fr; }
.media-stage-grid.count-3, .media-stage-grid.count-4 { grid-template-columns: 1fr 1fr; }
.media-stage-grid.count-more { grid-template-columns: repeat(3, 1fr); }
.ms-tile {
    position: relative; background: #000; border-radius: 8px; overflow: hidden; min-height: 0;
}
.ms-tile-video { position: absolute; inset: 0; }
.ms-tile-video video { width: 100% !important; height: 100% !important; object-fit: contain; }
.ms-tile-label {
    position: absolute; left: 6px; bottom: 6px; z-index: 2;
    background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 7px; display: flex; align-items: center; gap: 5px;
    max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-stage-empty {
    position: absolute; inset: 40px 0 0; display: flex; align-items: center; justify-content: center;
    color: #6a6a76; font-size: 13px; pointer-events: none;
}
.media-stage-resize {
    position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
    cursor: nwse-resize; z-index: 3;
    background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.35) 50%);
    border-bottom-right-radius: 14px;
}
@media (max-width: 600px) {
    .media-stage { width: 92vw !important; height: 46vh !important; left: 4vw !important; }
}

/* ════════════════════════════════════════════════════════════════════
   SETTINGS V2 — единый строчный дизайн категорий настроек
   (см. редизайн: строки label↔value/кнопка, секции с заголовком,
   попап-диалоги редактирования, верхние табы для магазина/инвентаря).
   Применяется к содержимому .settings-page внутри #settingsModal.
   ════════════════════════════════════════════════════════════════════ */
.st2 { display: flex; flex-direction: column; padding: 2px; }
.st2-section { display: flex; flex-direction: column; }
.st2-section + .st2-section {
    margin-top: 22px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.st2-section-title {
    font-size: 20px; font-weight: 800; color: #fff;
    margin: 0 0 8px; letter-spacing: -0.2px;
}
.st2-section-sub { color: #8b8b96; font-size: 13px; line-height: 1.5; margin: 0 0 12px; }

/* Строка: лейбл слева, значение/кнопка справа. */
.st2-row {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 6px; min-height: 30px;
}
.st2-row + .st2-row { border-top: 1px solid rgba(255,255,255,0.04); }
.st2-row.clickable { cursor: pointer; border-radius: 12px; transition: background 0.15s; }
.st2-row.clickable:hover { background: rgba(255,255,255,0.04); }
.st2-label { color: #fff; font-size: 16px; font-weight: 500; flex-shrink: 0; }
.st2-label .st2-label-ico { color: var(--accent-color, #6c5ce7); width: 20px; margin-right: 10px; text-align: center; }
.st2-right { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.st2-value { color: #cfcfd8; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.st2-value.muted { color: #8b8b96; }
.st2-reveal { color: var(--accent-color, #7c6cff); font-size: 14px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.st2-reveal:hover { text-decoration: underline; }
.st2-chevron { color: #6f6f7a; font-size: 14px; flex-shrink: 0; }

/* Серая «pill»-кнопка «Изменить». */
.st2-btn {
    background: rgba(255,255,255,0.08); color: #fff; border: none;
    border-radius: 12px; padding: 10px 20px; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: background 0.15s; flex-shrink: 0;
    font-family: inherit;
}
.st2-btn:hover { background: rgba(255,255,255,0.15); }
.st2-btn.primary { background: linear-gradient(135deg, #6c5ce7, #5a4bd1); }
.st2-btn.primary:hover { filter: brightness(1.08); }
.st2-btn.danger { background: rgba(255,71,87,0.12); color: #ff6b78; }
.st2-btn.danger:hover { background: rgba(255,71,87,0.2); }
.st2-btn.full { width: 100%; padding: 13px; }

/* Тогглы в строке. */
.st2-row .toggle-switch { margin: 0; flex-shrink: 0; }

/* ── Верхние табы (магазин / инвентарь) ── */
.st2-tabs {
    display: flex; gap: 6px; padding: 5px;
    background: rgba(255,255,255,0.04); border-radius: 14px;
    margin-bottom: 18px;
}
.st2-tab {
    flex: 1; text-align: center; padding: 10px 8px; border-radius: 10px;
    color: #9aa3b2; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.18s; white-space: nowrap; user-select: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.st2-tab:hover { color: #fff; }
.st2-tab.active { background: linear-gradient(135deg, #6c5ce7, #5a4bd1); color: #fff; box-shadow: 0 4px 14px rgba(108,92,231,0.35); }
.st2-tab .st2-tab-soon { display: block; font-size: 10px; font-weight: 600; color: #6f6f7a; margin-top: 1px; }
.st2-tabpane { display: none; }
.st2-tabpane.active { display: block; animation: fadeInModal 0.18s ease; }

.st2-soon-block {
    text-align: center; padding: 50px 20px; color: #777;
}
.st2-soon-block i { font-size: 40px; margin-bottom: 14px; color: #4a4a55; display: block; }
.st2-soon-block .st2-soon-title { font-size: 17px; font-weight: 700; color: #cfcfd8; margin-bottom: 6px; }

/* ── Premium-карточка покупки (магазин/инвентарь) ── */
.st2-premium-card {
    border-radius: 16px; padding: 20px;
    background: linear-gradient(160deg, rgba(169,103,255,0.14) 0%, rgba(108,92,231,0.04) 60%, transparent 100%);
    border: 1px solid rgba(169,103,255,0.35);
    box-shadow: 0 10px 30px rgba(108,92,231,0.12);
}
.st2-premium-head { display: flex; align-items: center; gap: 10px; }
.st2-premium-head .st2-premium-star { width: 26px; height: 26px; color: #a967ff; filter: drop-shadow(0 0 8px #a967ff); flex-shrink: 0; }
.st2-premium-title { font-size: 21px; font-weight: 800; color: #fff; }
.st2-premium-price-row { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.st2-premium-buy {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #a967ff, #6c5ce7); color: #fff; border: none;
    border-radius: 12px; padding: 13px; font-size: 16px; font-weight: 700; cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
}
.st2-premium-buy:hover { filter: brightness(1.08); transform: translateY(-1px); }
.st2-premium-buy:disabled { opacity: 0.55; cursor: default; filter: none; transform: none; }
.st2-premium-buy img { width: 18px; height: 18px; }
.st2-premium-active-badge {
    flex: 1; text-align: center; background: rgba(67,181,129,0.14); color: #43b581;
    border: 1px solid rgba(67,181,129,0.3); border-radius: 12px; padding: 13px;
    font-weight: 700; font-size: 15px;
}
.st2-perks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.st2-perk { display: flex; align-items: flex-start; gap: 12px; }
.st2-perk-ico {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: rgba(169,103,255,0.16); color: #c89bff;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.st2-perk-text { color: #d7d7df; font-size: 14px; line-height: 1.45; padding-top: 2px; }
.st2-perk-text b { color: #fff; font-weight: 700; }

/* Премиум-палитра (перенос из общих настроек в инвентарь). */
.st2-palette-card {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: 16px 18px;
}
.st2-palette-card .st2-palette-meta .st2-palette-title { color: #fff; font-weight: 700; font-size: 15px; }
.st2-palette-card .st2-palette-meta .st2-palette-sub { color: #9aa3b2; font-size: 13px; margin-top: 3px; }
.st2-palette-card input[type="color"] { width: 44px; height: 44px; border: none; background: none; cursor: pointer; flex-shrink: 0; }

/* Статус подписки над палитрой: «Активен до: 18 августа 2026г., 18:30 по МСК».
   Дату форматирует сервер (МСК + русские месяцы), см. formatMoscowDate. */
.st2-premium-status {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(120deg, rgba(169,103,255,0.16) 0%, rgba(255,255,255,0.04) 60%);
    border: 1px solid rgba(169,103,255,0.28);
    border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
}
.st2-premium-status-icon {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(169,103,255,0.18); color: #c79bff; font-size: 18px;
}
.st2-premium-status-meta { flex: 1; min-width: 0; }
.st2-premium-status-title { color: #fff; font-weight: 700; font-size: 15px; }
.st2-premium-status-until { color: #b9a8d8; font-size: 13px; margin-top: 3px; line-height: 1.35; }
.st2-premium-status-left {
    flex: none; text-align: center; line-height: 1;
    padding: 8px 12px; border-radius: 11px;
    background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.07);
}
.st2-premium-days { display: block; color: #fff; font-weight: 800; font-size: 18px; }
.st2-premium-days-lbl { display: block; color: #9aa3b2; font-size: 11px; margin-top: 3px; }

/* ── Подкатегория устройств звонков ── */
.st2-select {
    width: 100%; box-sizing: border-box; background: #0e0e16;
    border: 1px solid rgba(255,255,255,0.08); color: #fff; padding: 12px 14px;
    border-radius: 10px; font-family: inherit; font-size: 14px; outline: none;
    transition: border-color 0.2s; margin-bottom: 12px;
}
.st2-select:focus { border-color: rgba(108,92,231,0.6); }
.st2-field-label { display: block; color: #aaa; font-size: 13px; margin: 8px 0 6px; }
.st2-field-label i { margin-right: 6px; color: var(--accent-color, #6c5ce7); }

/* Порог голосового ввода и живая громкость микрофона используют одну шкалу:
   цвет подложки показывает границу, полупрозрачная заливка — текущий уровень. */
.input-sensitivity-setting {
    --mic-threshold: 0%;
    --mic-level: 0%;
    margin: 2px 0 13px;
    padding: 13px 14px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}
.input-sensitivity-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.input-sensitivity-head label { color: #f3f2f8; font-size: 14px; font-weight: 700; }
.input-sensitivity-head span { color: #aaa6b7; font-size: 12px; white-space: nowrap; }
.input-sensitivity-setting p {
    margin: 4px 0 12px; color: #8b8b96; font-size: 12px; line-height: 1.4;
}
.input-sensitivity-scale {
    position: relative; height: 22px; border-radius: 11px; overflow: visible;
}
.input-sensitivity-track-clip {
    position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
    background: linear-gradient(to right,
        #f2b94b 0, #f2b94b var(--mic-threshold),
        #43b581 var(--mic-threshold), #43b581 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    pointer-events: none;
}
.input-sensitivity-meter {
    position: absolute; z-index: 1; inset: 0 auto 0 0; width: var(--mic-level);
    border-radius: inherit; pointer-events: none;
    background: rgba(255,255,255,.38);
    box-shadow: inset -1px 0 rgba(255,255,255,.48);
    transition: width 55ms linear, background .16s ease;
}
.input-sensitivity-scale.is-speaking .input-sensitivity-meter {
    background: rgba(235,255,245,.52);
}
.input-sensitivity-scale input[type="range"] {
    position: absolute; z-index: 2; inset: 0; width: 100%; height: 22px;
    margin: 0; padding: 0; appearance: none; -webkit-appearance: none;
    background: transparent; cursor: pointer; touch-action: pan-y;
}
.input-sensitivity-scale input[type="range"]::-webkit-slider-runnable-track {
    height: 22px; background: transparent; border: 0;
}
.input-sensitivity-scale input[type="range"]::-moz-range-track {
    height: 22px; background: transparent; border: 0;
}
.input-sensitivity-scale input[type="range"]::-webkit-slider-thumb {
    width: 24px; height: 24px; margin-top: -1px; border-radius: 50%;
    appearance: none; -webkit-appearance: none;
    background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(220,216,244,.34));
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.86),
                inset 0 -1px 1px rgba(73,62,126,.2),
                0 4px 11px rgba(0,0,0,.36), 0 0 0 1px rgba(45,38,77,.16);
}
.input-sensitivity-scale input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(220,216,244,.34));
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.86),
                inset 0 -1px 1px rgba(73,62,126,.2),
                0 4px 11px rgba(0,0,0,.36), 0 0 0 1px rgba(45,38,77,.16);
}
.input-sensitivity-scale input[type="range"]:focus-visible { outline: none; }
.input-sensitivity-scale:focus-within {
    box-shadow: 0 0 0 3px rgba(108,92,231,.28), inset 0 0 0 1px rgba(255,255,255,.12);
}
.input-sensitivity-hint {
    min-height: 17px; margin-top: 8px; color: #777; font-size: 12px; line-height: 1.4;
}
.input-sensitivity-hint.error { color: #d79595; }

/* ── Настройка режима микрофона ─────────────────────────────────────────── */
.call-ptt-settings {
    padding: 0; overflow: hidden;
    background: linear-gradient(145deg, rgba(104,87,221,.19), rgba(33,32,43,.72) 55%, rgba(22,22,29,.86));
    border: 1px solid rgba(143,130,255,.3); box-shadow: 0 12px 28px rgba(8,7,17,.18);
}
.call-ptt-hero { display: flex; align-items: center; gap: 12px; padding: 16px 16px 13px; }
.call-ptt-hero-icon {
    width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center;
    border-radius: 13px; color: #f4f2ff; background: linear-gradient(145deg, #8b7cff, #6554d8);
    box-shadow: 0 7px 17px rgba(108,92,231,.34); font-size: 16px;
}
.call-ptt-settings .st2-section-title { margin: 0; color: #f4f2ff; }
.call-ptt-settings .st2-section-sub { margin: 3px 0 0; color: #c0bcd0; font-size: 12px; line-height: 1.45; }
.call-mode-options { display: grid; gap: 8px; padding: 0 12px 12px; }
.call-mode-card {
    position: relative; min-height: 61px; box-sizing: border-box; display: flex; align-items: center; gap: 11px;
    padding: 11px 12px; cursor: pointer; border: 1px solid rgba(255,255,255,.09); border-radius: 13px;
    color: #d9d6e5; background: rgba(7,7,12,.22); transition: border-color .16s, background .16s, transform .16s;
}
.call-mode-card:hover { transform: translateY(-1px); background: rgba(255,255,255,.075); border-color: rgba(184,173,255,.38); }
.call-mode-card.selected { color: #fff; border-color: rgba(164,149,255,.76); background: rgba(108,92,231,.23); box-shadow: 0 5px 15px rgba(71,57,166,.17); }
.call-mode-card.disabled { opacity: .52; cursor: not-allowed; transform: none; }
.call-mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.call-mode-icon {
    width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; color: #c9c2e6; background: rgba(255,255,255,.075); font-size: 14px;
}
.call-mode-card.selected .call-mode-icon { color: #fff; background: rgba(150,133,255,.32); }
.call-mode-icon.is-ptt { color: #f0b8ff; }
.call-mode-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.call-mode-copy strong { font-size: 13px; font-weight: 780; line-height: 1.25; }
.call-mode-copy small { color: #aaa5b8; font-size: 11px; line-height: 1.35; }
.call-mode-card.selected .call-mode-copy small { color: #d0c9f4; }
.call-mode-check {
    width: 19px; height: 19px; flex: none; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: transparent; font-size: 10px;
}
.call-mode-card.selected .call-mode-check { color: #fff; border-color: #9585ff; background: #7969ec; box-shadow: 0 0 0 3px rgba(130,111,245,.15); }
.call-ptt-key-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 12px 12px; padding: 11px 12px; border-radius: 12px; background: rgba(7,7,12,.29);
    border: 1px solid rgba(255,255,255,.1);
}
.call-ptt-native-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 0 12px 12px; padding: 10px 11px;
    border-radius: 11px; color: #c9c3e8; background: rgba(108,92,231,.1);
    border: 1px solid rgba(151,137,245,.2); font-size: 11px; line-height: 1.4;
}
.call-ptt-native-note i { flex: none; margin-top: 2px; color: #aa9dff; }
.call-ptt-key-copy { min-width: 0; }
.call-ptt-key-title { color: #e8e5f1; font-size: 13px; font-weight: 750; }
.call-ptt-key-title i { color: #bdb4ff; margin-right: 7px; }
.call-ptt-key-sub { margin-top: 3px; color: #9894a6; font-size: 11px; line-height: 1.35; }
.call-ptt-key-btn {
    flex: 0 0 auto; min-width: 46px; height: 34px; padding: 0 10px; border-radius: 9px;
    color: #fff; background: rgba(108,92,231,.26); border: 1px solid rgba(173,161,255,.48);
    font: 750 13px/1 inherit; cursor: pointer; transition: background .15s, transform .15s;
}
.call-ptt-key-btn:hover, .call-ptt-key-btn.binding { background: rgba(108,92,231,.48); transform: translateY(-1px); }
.call-ptt-key-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.call-ptt-key-btn.binding { animation: pttKeyPulse .9s ease-in-out infinite alternate; }
@keyframes pttKeyPulse { from { box-shadow: 0 0 0 rgba(145,126,255,0); } to { box-shadow: 0 0 0 4px rgba(145,126,255,.15); } }
.call-ptt-warning {
    align-items: flex-start; gap: 8px; margin: 0 12px 12px; padding: 10px 11px;
    border-radius: 10px; background: rgba(255,183,77,.1); color: #ffd395;
    border: 1px solid rgba(255,183,77,.24); font-size: 11px; line-height: 1.4;
}
.call-ptt-warning.is-error { background: rgba(255,87,101,.1); color: #ffadb4; border-color: rgba(255,87,101,.24); }
.call-ptt-warning i { flex: none; margin-top: 2px; }
.call-history-section { margin-top: 16px; }
@media (max-width: 420px) {
    .call-ptt-hero { padding: 14px 13px 12px; }
    .call-mode-options { padding: 0 10px 10px; }
    .call-ptt-key-row, .call-ptt-native-note, .call-ptt-warning { margin-left: 10px; margin-right: 10px; }
    .call-mode-copy small { font-size: 10px; }
}

/* ── Попап-диалог редактирования (имя/пароль) ── */
.st2-dialog-overlay {
    position: fixed; inset: 0; z-index: 100000;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    padding: 20px; box-sizing: border-box;
}
.st2-dialog-overlay.open { display: flex; animation: fadeInModal 0.16s ease; }
.st2-dialog {
    width: 100%; max-width: 460px; box-sizing: border-box;
    background: #1c1c24; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px; padding: 26px 28px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6); position: relative;
    animation: roomModalPop 0.2s cubic-bezier(.34,1.56,.64,1);
}
.st2-dialog-close {
    position: absolute; top: 18px; right: 18px; background: none; border: none;
    color: #888; font-size: 18px; cursor: pointer; width: 30px; height: 30px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.15s;
}
.st2-dialog-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.st2-dialog-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 6px; padding-right: 30px; }
.st2-dialog-sub { color: #9aa3b2; font-size: 14px; margin: 0 0 22px; line-height: 1.45; }
.st2-dialog-field { margin-bottom: 18px; }
.st2-dialog-field label { display: block; color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.st2-dialog-field label .req { color: #ff7a82; }
.st2-dialog-field input {
    width: 100%; box-sizing: border-box; background: #14141b;
    border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 14px 16px;
    border-radius: 12px; font-family: inherit; font-size: 15px; outline: none;
    transition: border-color 0.2s;
}
.st2-dialog-field input:focus { border-color: rgba(108,92,231,0.7); }
.st2-dialog-hint { color: #8b8b96; font-size: 12.5px; margin: -10px 0 18px; line-height: 1.4; }
.st2-dialog-actions { display: flex; gap: 12px; margin-top: 6px; }
.st2-dialog-actions button {
    flex: 1; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 700;
    cursor: pointer; border: none; font-family: inherit; transition: all 0.15s;
}
.st2-dialog-cancel { background: rgba(255,255,255,0.08); color: #cfcfd8; }
.st2-dialog-cancel:hover { background: rgba(255,255,255,0.14); }
.st2-dialog-confirm { background: linear-gradient(135deg, #6c5ce7, #5a4bd1); color: #fff; }
.st2-dialog-confirm:hover { filter: brightness(1.1); }

/* ── Унификация цвета иконок категорий в сайдбаре настроек ── */
.s-menu-list .s-menu-item:not(.danger) .s-icon,
.s-menu-list .s-menu-item:not(.danger) .s-icon i {
    color: var(--text-secondary) !important;
    filter: none !important;
}
.s-menu-list .s-menu-item:not(.danger):hover .s-icon,
.s-menu-list .s-menu-item:not(.danger):hover .s-icon i {
    color: var(--accent-color) !important;
}

/* ── Инвентарь: блоки рамок с баннерами (как в магазине) ── */
.st2-inv-empty { text-align: center; color: #777; padding: 40px 16px; }
.st2-inv-empty i { font-size: 36px; color: #4a4a55; margin-bottom: 12px; display: block; }

/* ── ПК: обои диалога на всю страницу + отступы окна ──
   Обои рисуются на всей странице (.chat-container) — по умолчанию дефолтные,
   при открытии чата с кастомным фоном он подменяет обои (body.has-custom-chat-bg),
   пока пользователь в чате. Вокруг — отступ (видно обои по краям, в т.ч. слева).
   Боковая панель — плавающий скруглённый блок; диалог без отдельной рамки —
   сообщения лежат прямо на обоях страницы. Только десктоп (>768px). */
@media (min-width: 769px) {
    .chat-container {
        box-sizing: border-box;
        padding: 12px;
        gap: 12px;
        background-image:
            linear-gradient(rgba(18, 18, 21, 0.95), rgba(18, 18, 21, 0.95)),
            url('/static/default-icons/background-help-topic.png');
        background-size: 1500px;
        background-repeat: repeat;
        background-position: center;
    }

    body.has-custom-chat-bg .chat-container {
        background-image:
            linear-gradient(rgba(18, 18, 21, 0.8), rgba(18, 18, 21, 0.8)),
            var(--chat-custom-bg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Боковая панель — плавающий скруглённый блок (с отступом слева/по краям). */
    .chat-sidebar {
        border-right: none;
        border-radius: 18px;
        overflow: hidden;
    }

    /* Диалог без отдельной рамки/фона — сквозь него видно обои страницы.
       !important перебивает инлайн-фон, который JS ставит на .messages-area. */
    .chat-main { background-color: transparent; }
    .messages-area { background: transparent !important; }
}

/* ====================================================================
   РАЗДЕЛ «ПОИСК» — discovery-блоки (карусели карточек пользователей)
   Логика — static/assets/js/search_discovery.js. Карточка повторяет
   стиль профиля (баннер + аватар с рамкой + ник/тег + премиум + статус),
   листание влево/вправо проигрывает «колесо» (3D-поворот карточек).
   ==================================================================== */
.disco-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0 96px 0;
    -webkit-overflow-scrolling: touch;
    /* Accent-скроллбар как в «Настройках» (см. .settings-page). */
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 92, 231, 0.35) transparent;
}
.disco-scroll::-webkit-scrollbar { width: 6px; }
.disco-scroll::-webkit-scrollbar-track { background: transparent; }
.disco-scroll::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.28);
    border-radius: 10px;
    transition: background 0.2s;
}
.disco-scroll::-webkit-scrollbar-thumb:hover { background: rgba(108, 92, 231, 0.55); }

/* Кнопка-подсказка «?» рядом с заголовком блока карточек. Текст показываем
   собственным тултипом (.disco-help-tip) — не зависит от нативного title и
   читается на мобиле по тапу/долгому нажатию. Тултип раскрывается ВНИЗ и
   привязан к заголовку (.disco-block-head — position:relative), чтобы его не
   обрезал overflow прокручиваемого контейнера .disco-scroll (особенно у
   первого блока — вверх места нет). */
.disco-block-head { position: relative; }
.disco-help {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-secondary);
    background: rgba(108, 92, 231, 0.16);
    cursor: help;
    transition: background 0.18s ease, color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.disco-help:hover,
.disco-help:focus-visible { background: var(--accent-color); color: #fff; outline: none; }
.disco-help-tip {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    padding: 9px 11px;
    border-radius: 10px;
    border-left: 2px solid var(--accent-color);
    background: var(--glass-bg, rgba(26, 26, 40, 0.96));
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: normal;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    z-index: 30;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.disco-help:hover .disco-help-tip,
.disco-help:focus-visible .disco-help-tip {
    opacity: 1;
    transform: translateY(0);
}

.disco-block {
    padding: 14px 12px 18px 12px;
    border-bottom: 1px solid var(--border-color);
}
.disco-block:last-child { border-bottom: none; }

.disco-block-head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 4px 14px 4px;
}
.disco-block-head i { color: var(--accent-color); font-size: 14px; }

.disco-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 266px;
    padding: 0 50px;
}

.disco-stage {
    position: relative;
    width: 100%;
    max-width: 250px;
    min-height: 266px;
    perspective: 1100px;
    overflow: hidden;
}

.disco-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--glass-bg, rgba(26,26,40,.85));
    color: var(--text-primary);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
.disco-arrow:hover { transform: translateY(-50%) scale(1.12); background: var(--accent-color); border-color: transparent; }
.disco-arrow:active { transform: translateY(-50%) scale(.94); }
.disco-arrow--left { left: 6px; }
.disco-arrow--right { right: 6px; }
.disco-arrow.is-disabled { opacity: .25; pointer-events: none; }

.disco-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(0,0,0,.35);
    transform-origin: center center;
    will-change: transform, opacity;
    transition: transform .46s cubic-bezier(.22,.61,.36,1), opacity .46s ease;
    backface-visibility: hidden;
}
/* Премиум-карточка переливается основным цветом пользователя — тот же приём,
   что и у карточки профиля в «Настройках» (.profile-card-premium-shimmer):
   градиент на цвете --p-color + анимация background-position (premiumShimmer).
   Сам градиент и border задаются инлайном из JS (нужен конкретный цвет). */
.disco-card--premium {
    background-size: 300% 100% !important;
    animation: premiumShimmer 4s ease infinite;
}

.disco-card--active { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; }
.disco-card--enter-right { transform: translateX(78%) rotateY(-42deg) scale(.82); opacity: 0; }
.disco-card--enter-left  { transform: translateX(-78%) rotateY(42deg) scale(.82); opacity: 0; }
.disco-card--exit-left   { transform: translateX(-78%) rotateY(42deg) scale(.82); opacity: 0; }
.disco-card--exit-right  { transform: translateX(78%) rotateY(-42deg) scale(.82); opacity: 0; }

.disco-card-banner {
    position: relative;
    width: 100%;
    height: 92px;
    background-color: var(--accent-color);
    background-size: cover;
    background-position: center;
}
.disco-card-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.28) 100%);
}

.disco-card-avatar {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 4px solid var(--bg-element);
    background: var(--bg-panel);
    overflow: visible;
    z-index: 3;
}
.disco-card-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.disco-card-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 122%;
    height: 122%;
    object-fit: contain;
    pointer-events: none;
    z-index: 4;
}
/* У премиум-пользователей в «Поиске» убрана обводка вокруг аватара:
   прозрачный border сохраняет геометрию (тот же размер, что у обычных карточек),
   но кольца не видно. */
.disco-card--premium .disco-card-avatar {
    border-color: transparent;
    box-shadow: none;
}

.disco-card-avatar .presence-dot {
    right: 5px;
    bottom: 5px;
    width: 18px;
    height: 18px;
    border-width: 3px;
    border-color: var(--bg-element);
    z-index: 6;
}
.disco-card-avatar .presence-dot.is-game {
    right: -1px;
    bottom: -1px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.disco-flag {
    position: absolute;
    top: 0;
    right: 16px;
    z-index: 5;
    min-width: 26px;
    padding: 4px 5px 12px 5px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: #2a1c00;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
    box-shadow: 0 3px 7px rgba(0,0,0,.4);
}
.disco-flag--gold   { background: linear-gradient(160deg, #ffe487, #f3b015); }
.disco-flag--silver { background: linear-gradient(160deg, #f6f9fd, #b6c2d2); }
.disco-flag--bronze { background: linear-gradient(160deg, #e2a366, #b06a2c); color: #3a1e07; }
.disco-flag--blue   { background: linear-gradient(160deg, #9ec0ff, #4f7ef0); color: #fff; }

.disco-card-body {
    padding: 50px 16px 4px 16px;
    text-align: center;
}
.disco-card-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.disco-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.disco-star { width: 14px; height: 14px; flex-shrink: 0; }
.disco-card-tag {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    padding-bottom: 1px;
    color: var(--text-secondary);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.disco-card-stat {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    line-height: 1.4;
}
.disco-stat-total {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.disco-stat-week {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.disco-write-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 28px);
    margin: 14px 14px 16px 14px;
    padding: 11px 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(120deg, var(--accent-color), #8b7bf0);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 6px 16px -4px rgba(108,92,231,.6);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.disco-write-btn i { font-size: 13px; }
.disco-write-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -4px rgba(108,92,231,.7); filter: brightness(1.06); }
.disco-write-btn:active { transform: translateY(0) scale(.98); }
.disco-write-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg);
    animation: discoShine 3.4s ease-in-out infinite;
}
@keyframes discoShine {
    0% { left: -120%; }
    55% { left: 130%; }
    100% { left: 130%; }
}
.disco-write-btn--self {
    background: var(--bg-panel);
    color: var(--text-secondary);
    box-shadow: none;
    cursor: default;
    border: 1px solid var(--border-color);
}
.disco-write-btn--self:hover { transform: none; filter: none; }

.disco-empty-msg {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 90px 10px;
}
.disco-block.disco-empty .disco-arrow { display: none; }
.disco-block.disco-empty .disco-counter { display: none; }

.disco-counter {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: .05em;
}

/* ============================== LFG «Ищу тиммейта» ============================== */
.lfg-publish-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 8px);
    margin: 0 4px 12px 4px;
    padding: 11px 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(120deg, var(--accent-color), #5747c9);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.lfg-publish-btn:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 8px 18px -6px rgba(108,92,231,.65); }
.lfg-publish-btn i { font-size: 13px; }

.lfg-filter {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 4px 10px 4px;
}
.lfg-filter-row { display: flex; flex-direction: column; gap: 5px; }
.lfg-filter-row > small {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.lfg-filter-row > div { display: flex; flex-wrap: wrap; gap: 6px; }
.lfg-chip {
    border: 1px solid var(--border-color);
    background: var(--bg-element);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lfg-chip b { font-weight: 700; opacity: .7; }
.lfg-chip:hover { color: var(--text-primary); }
.lfg-chip.is-active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}
.lfg-chip.is-active b { opacity: .85; }

.lfg-list { display: flex; flex-direction: column; gap: 8px; }
#lfgMine:not(:empty) { margin-bottom: 8px; }

.lfg-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-element);
}
.lfg-card--mine { border-color: rgba(108,92,231,.45); background: rgba(108,92,231,.08); }

.lfg-card-avatar {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
}
.lfg-card-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.lfg-card-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 126%;
    height: 126%;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}
.lfg-card-avatar .presence-dot {
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    border-width: 2px;
    border-color: var(--bg-element);
    z-index: 3;
}
.lfg-card-avatar .presence-dot.is-game {
    right: -3px;
    bottom: -3px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

.lfg-card-body { flex: 1; min-width: 0; }
.lfg-card-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lfg-star { font-size: 11px; }
.lfg-card-game {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lfg-game-icon { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.lfg-game-icon-ph { font-size: 12px; flex-shrink: 0; }
.lfg-card-comment {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lfg-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}
.lfg-card-details span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
    color: var(--text-secondary);
    font-size: 10.5px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lfg-card-details i { color: var(--accent-color); font-size: 9px; }
.lfg-card-meta { margin-top: 4px; font-size: 11px; color: var(--text-secondary); opacity: .75; }

.lfg-write-btn, .lfg-cancel-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}
.lfg-write-btn { background: linear-gradient(120deg, var(--accent-color), #5747c9); color: #fff; }
.lfg-write-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.lfg-cancel-btn { background: rgba(237,66,69,.12); color: #ed4245; }
.lfg-cancel-btn:hover { background: rgba(237,66,69,.2); }

.lfg-empty {
    text-align: center;
    padding: 18px 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.lfg-games-pick {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.lfg-game-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.lfg-game-opt img { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; }
.lfg-game-opt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfg-game-opt:hover { background: var(--bg-element); }
.lfg-game-opt.is-active { background: rgba(108,92,231,.18); color: var(--accent-color); }

.lfg-ttl { display: flex; gap: 8px; }
.lfg-ttl button {
    flex: 1;
    border: 1px solid var(--border-color);
    background: var(--bg-element);
    color: var(--text-secondary);
    border-radius: 10px;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lfg-ttl button.is-active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

/* Многошаговая публикация LFG */
.lfg-wizard {
    width: 590px;
    max-width: calc(100vw - 28px);
    max-height: min(820px, calc(100vh - 28px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 84%, var(--accent-color));
    border-radius: 22px;
    background: var(--bg-panel);
    color: var(--text-primary);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .025) inset;
}
.lfg-wizard-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    padding: 16px 62px 14px;
    border-bottom: 1px solid var(--border-color);
    background:
        radial-gradient(circle at 14% -30%, rgba(108, 92, 231, .23), transparent 58%),
        color-mix(in srgb, var(--bg-panel) 93%, var(--accent-color));
}
.lfg-wizard-title-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; }
.lfg-wizard-title-wrap strong { font-size: 19px; line-height: 1.15; letter-spacing: -.02em; }
.lfg-wizard-kicker {
    color: var(--accent-color);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.lfg-wizard-count {
    margin-top: 3px;
    color: var(--accent-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.lfg-wizard-count b { color: inherit; }
.lfg-wizard-close {
    position: absolute;
    top: 17px;
    right: 18px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--bg-element);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.lfg-wizard-close:hover { color: var(--text-primary); border-color: var(--accent-color); transform: rotate(3deg); }
.lfg-wizard-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 0 24px; transform: translateY(-2px); }
.lfg-wizard-progress span { height: 3px; border-radius: 999px; background: var(--border-color); transition: background .2s ease, box-shadow .2s ease; }
.lfg-wizard-progress span.is-active { background: var(--accent-color); box-shadow: 0 0 10px rgba(108, 92, 231, .35); }
.lfg-wizard-body {
    flex: 1;
    min-height: 460px;
    overflow-y: auto;
    padding: 26px 28px 24px;
}
.lfg-step { display: none; animation: lfg-step-in .2s ease both; }
.lfg-step.is-active { display: block; }
@keyframes lfg-step-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.lfg-step-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border: 1px solid rgba(108, 92, 231, .24);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(108, 92, 231, .2), rgba(108, 92, 231, .06));
    color: var(--accent-color);
    font-size: 17px;
}
.lfg-step h3 { margin: 4px 0 6px; font-size: 23px; line-height: 1.18; letter-spacing: -.03em; }
.lfg-step > p { margin: 0 0 22px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.lfg-field-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 17px 0 7px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
}
.lfg-field-label b { color: var(--accent-color); font-size: 10px; font-weight: 800; }
.lfg-field-label small { color: var(--text-secondary); font-size: 10px; font-weight: 600; }
.lfg-field {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    outline: none;
    background: var(--bg-element);
    color: var(--text-primary);
    padding: 12px 13px;
    font: inherit;
    font-size: 13.5px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.lfg-field::placeholder { color: var(--text-secondary); opacity: .72; }
.lfg-field:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(108, 92, 231, .13); }
.lfg-field.has-error { border-color: #ed4245; box-shadow: 0 0 0 3px rgba(237, 66, 69, .12); }
.lfg-field--textarea { min-height: 86px; resize: vertical; line-height: 1.45; }
.lfg-count-picker {
    width: 150px;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-element);
}
.lfg-count-picker button { height: 42px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.lfg-count-picker button:hover:not(:disabled) { background: rgba(108, 92, 231, .12); color: var(--accent-color); }
.lfg-count-picker button:disabled { opacity: .3; cursor: default; }
.lfg-count-picker strong { text-align: center; font-size: 16px; }
.lfg-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 19px; }
.lfg-choice-grid button,
.lfg-choice-list button {
    border: 1px solid var(--border-color);
    background: var(--bg-element);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.lfg-choice-grid button {
    min-height: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 12px;
    padding: 8px;
    font-size: 11px;
    font-weight: 700;
}
.lfg-choice-grid button i { font-size: 16px; }
.lfg-choice-grid button:hover,
.lfg-choice-list button:hover { color: var(--text-primary); transform: translateY(-1px); }
.lfg-choice-grid button.is-active,
.lfg-choice-list button.is-active { border-color: var(--accent-color); background: rgba(108, 92, 231, .14); color: var(--accent-color); }
.lfg-choice-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 18px; }
.lfg-choice-list button {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 11px;
    padding: 8px 11px;
    font-size: 11.5px;
    font-weight: 700;
}
.lfg-choice-list button i { opacity: 0; }
.lfg-choice-list button.is-active i { opacity: 1; }
.lfg-voice-toggle {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: var(--bg-element);
    cursor: pointer;
}
.lfg-voice-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(108, 92, 231, .14); color: var(--accent-color); }
.lfg-voice-toggle > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.lfg-voice-toggle b { font-size: 12px; }
.lfg-voice-toggle small { color: var(--text-secondary); font-size: 10.5px; line-height: 1.3; }
.lfg-voice-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.lfg-toggle-visual { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--border-color); transition: background .15s ease; }
.lfg-toggle-visual::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.lfg-voice-toggle input:checked + .lfg-toggle-visual { background: var(--accent-color); }
.lfg-voice-toggle input:checked + .lfg-toggle-visual::after { transform: translateX(16px); }
.lfg-summary { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; border: 1px solid rgba(108, 92, 231, .22); border-radius: 13px; background: rgba(108, 92, 231, .07); }
.lfg-summary span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: var(--bg-element); color: var(--text-secondary); font-size: 11px; font-weight: 650; }
.lfg-summary i { color: var(--accent-color); }
.lfg-inline-error { display: none; margin: 0 28px 10px; padding: 9px 11px; border: 1px solid rgba(237, 66, 69, .26); border-radius: 10px; background: rgba(237, 66, 69, .1); color: #ed6769; font-size: 11.5px; line-height: 1.4; }
.lfg-inline-error.is-visible { display: block; }
.lfg-wizard-footer { display: flex; align-items: center; gap: 9px; min-height: 70px; padding: 13px 24px; border-top: 1px solid var(--border-color); background: color-mix(in srgb, var(--bg-panel) 94%, #000); }
.lfg-wizard-footer button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 0 17px; font-size: 12px; font-weight: 800; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.lfg-wizard-footer button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.lfg-wizard-back { border: 1px solid var(--border-color); background: var(--bg-element); color: var(--text-secondary); }
.lfg-wizard-next,
.lfg-wizard-publish { margin-left: auto; border: 0; background: linear-gradient(120deg, var(--accent-color), #5747c9); color: #fff; box-shadow: 0 8px 20px -9px rgba(108, 92, 231, .75); }
.lfg-wizard-publish { display: none; }
.lfg-wizard-publish:disabled { opacity: .62; cursor: wait; }
.lfg-wizard-publish.is-loading i { animation: lfg-send-pulse .7s ease infinite alternate; }
@keyframes lfg-send-pulse { to { transform: translateX(3px); } }

@media (max-width: 620px) {
    .lfg-wizard { max-width: 100vw; width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
    .lfg-wizard-head { min-height: 68px; padding: 13px 56px 11px; }
    .lfg-wizard-close { top: 13px; right: 13px; }
    .lfg-wizard-progress { padding: 0 18px; }
    .lfg-wizard-body { min-height: 0; padding: 21px 18px 18px; }
    .lfg-step h3 { font-size: 21px; }
    .lfg-choice-grid { grid-template-columns: repeat(2, 1fr); }
    .lfg-choice-list { grid-template-columns: 1fr; }
    .lfg-inline-error { margin-left: 18px; margin-right: 18px; }
    .lfg-wizard-footer { padding: 10px 18px; min-height: 64px; }
    .lfg-wizard-footer button { padding: 0 14px; }
    .lfg-card { align-items: flex-start; }
    .lfg-write-btn span, .lfg-cancel-btn span { display: none; }
    .lfg-write-btn, .lfg-cancel-btn { padding: 9px 10px; }
}

/* Скролл в модалке «Ищу тиммейта» — тот же accent-скроллбар, что и в других
   модалках (#gameStatsModalBody). Применяется и к списку игр Steam внутри. */
#lfgModalBody, .lfg-games-pick {
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 92, 231, 0.35) transparent;
}
#lfgModalBody::-webkit-scrollbar, .lfg-games-pick::-webkit-scrollbar { width: 6px; }
#lfgModalBody::-webkit-scrollbar-track, .lfg-games-pick::-webkit-scrollbar-track { background: transparent; }
#lfgModalBody::-webkit-scrollbar-thumb, .lfg-games-pick::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.28);
    border-radius: 10px;
    transition: background 0.2s;
}
#lfgModalBody::-webkit-scrollbar-thumb:hover, .lfg-games-pick::-webkit-scrollbar-thumb:hover { background: rgba(108, 92, 231, 0.55); }

/* ===================== ПОДАРКИ (3D-модели) ===================== */
.gift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.gift-card {
    background: #15151f;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.gift-card:hover { transform: translateY(-3px); border-color: rgba(108,92,231,0.5); }
.gift-card-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #14141d;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gift-card-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.gift-coll-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    max-width: calc(100% - 50px);
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gift-eye-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease;
    z-index: 2;
}
.gift-eye-btn:hover { background: rgba(108,92,231,0.85); transform: scale(1.08); }
.gift-supply {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    z-index: 2;
    text-align: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    color: #d8d8e0;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 6px;
    border-radius: 8px;
}
.gift-supply--out { color: #ff7a7a; }
.gift-serial-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    color: #ffd86b;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 8px;
    letter-spacing: 0.3px;
}
.gift-card-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 4px; }
.gift-card-name { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.25; }
.gift-card-collection { color: #8a8a96; font-size: 11px; }
.gift-star-ico { width: 14px; height: 14px; vertical-align: -2px; }
/* Кнопки покупки подарков используют общий стиль .shop-buy-btn (как «Рамки»). */
.gift-card .shop-buy-btn { margin-top: 8px; }

/* Модалки покупки/дарения */
.gift-modal-card {
    background: #12121a;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.06);
    max-width: 440px;
    width: calc(100% - 40px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 86dvh;
    font-family: 'Inter', sans-serif;
    animation: fadeInModal 0.25s ease;
}
.gift-modal-preview {
    height: 120px;
    border-radius: 12px;
    margin-bottom: 14px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.06);
}
.gift-modal-title { text-align: center; color: #fff; font-size: 19px; margin: 0 0 6px; font-weight: 800; }
.gift-modal-sub { text-align: center; color: #b7b7c2; font-size: 14px; margin: 0 0 16px; line-height: 1.4; }
.gift-modal-sub b { color: #fff; }
.gift-opt-btn {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    background: #1a1a28;
    color: #e6e6ee;
    padding: 13px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    transition: background 0.18s ease, filter 0.18s ease;
}
.gift-opt-btn:hover { background: #222233; }
.gift-opt-btn.gift-opt-primary { background: linear-gradient(135deg, #6c5ce7, #5a4bd1); color: #fff; border-color: transparent; }
.gift-opt-btn.gift-opt-primary:hover { filter: brightness(1.12); background: linear-gradient(135deg, #6c5ce7, #5a4bd1); }
.gift-cancel-btn {
    width: 100%;
    background: transparent;
    color: #9a9aa6;
    border: none;
    padding: 11px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 2px;
    font-family: 'Inter', sans-serif;
    transition: color 0.18s ease;
}
.gift-cancel-btn:hover { color: #fff; }
.gift-search-input {
    width: 100%;
    background: #0e0e16;
    border: 2px solid transparent;
    color: #fff;
    padding: 12px 15px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    box-sizing: border-box;
    margin-bottom: 12px;
    outline: none;
    transition: border-color 0.25s ease;
}
.gift-search-input:focus { border-color: #6c5ce7; }
.gift-confirm-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: rgba(108,92,231,0.16);
    color: #9b8cff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* 3D-просмотр на весь экран */
.gift-viewer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #0b0b12;
    flex-direction: column;
    animation: fadeInModal 0.2s ease;
}
.gift-viewer-overlay.open { display: flex; }
.gift-viewer-stage {
    flex: 1;
    position: relative;
    min-height: 0;
    background: radial-gradient(circle at 50% 45%, #2b2b3a 0%, #14141d 70%, #0b0b12 100%);
}
.gift-viewer-pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
#giftViewerCanvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: grab;
}
#giftViewerCanvas:active { cursor: grabbing; }
.gift-viewer-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gift-viewer-info {
    position: absolute;
    left: 24px;
    bottom: 64px;
    z-index: 2;
    pointer-events: none;
}
.gift-viewer-name {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.gift-viewer-collection {
    color: #d8d8e0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    margin-top: 4px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.gift-viewer-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 3;
    transition: background 0.18s ease;
}
.gift-viewer-close:hover { background: rgba(255,255,255,0.22); }
.gift-viewer-hint {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    pointer-events: none;
    z-index: 2;
}
@media (max-width: 600px) {
    .gift-viewer-info { left: 16px; bottom: 56px; }
    .gift-viewer-name { font-size: 19px; }
}

/* ===================== КАРТОЧКА ПОДАРКА В СООБЩЕНИИ ===================== */
/* Подарок — центрированный блок: системная строка + карточка. */
.chat-card.gift-card-msg {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
}
.gift-card-msg .system-msg-container { margin: 4px 0 12px; }
.gift-msg {
    width: 280px;
    max-width: 80%;
}
.gift-msg-card {
    position: relative;
    width: 100%;
    aspect-ratio: 0.78;
    border: 7px solid #1b192b;
    border-radius: 26px;
    overflow: hidden;
    background: #1a1320;
    box-shadow: 0 8px 26px rgba(0,0,0,0.45);
    isolation: isolate;
}
.gift-msg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
}
.gift-msg-scrim {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 66%;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
.gift-msg-info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.gift-msg-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.gift-msg-eyebrow-av {
    width: 20px; height: 20px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}
.gift-msg-name {
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 2px;
    max-width: 100%;
    word-break: break-word;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.gift-msg-rows {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.gift-msg-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    line-height: 1.3;
}
.gift-row-label { color: rgba(255,255,255,0.6); font-weight: 500; }
.gift-row-val { color: #fff; font-weight: 700; }
.gift-msg-view {
    margin-top: 14px;
    border: none;
    cursor: pointer;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.18s ease;
}
.gift-msg-view:hover { background: rgba(255,255,255,0.28); }

/* ============= ПОДАРОК ВМЕСТО ЗВЕЗДЫ PREMIUM (статус рядом с именем) =============
   ВАЖНО про размеры. Бейдж рядом с именем — это либо звезда/галочка (маска
   14×14), либо статус-подарок (живой 3D-<canvas>). Раньше канвас занимал в
   потоке 24×24, то есть на 10px больше звезды: как только у собеседника
   появлялся подарок, строка имени в списке диалогов становилась выше и всё
   под ней — последнее сообщение, бейдж непрочитанных — уезжало вниз.
   Теперь МЕСТО в потоке у обоих одинаковое (--prem-badge-box), а подарок
   рисуется крупнее строго поверх этого места (absolute + translate), поэтому
   вёрстка не «дышит» при смене бейджа. */
.prem-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    /* Размер места под бейдж и во сколько раз крупнее рисуется 3D-подарок. */
    --prem-badge-box: 14px;
    --prem-gift-scale: 1.7;
}
.prem-badge.has-gift { cursor: pointer; }
/* Иконка-бейдж (premium-звезда / галочка верификации) как перекрашиваемая
   CSS-маска: силуэт берётся из PNG/SVG, цвет — из --pc (премиум-палитра
   пользователя, дефолт #7289da). Один размер/свечение для обоих. */
.prem-ico {
    display: inline-block;
    width: var(--prem-badge-box, 14px); height: var(--prem-badge-box, 14px);
    margin-left: 5px;
    flex: none;
    vertical-align: middle;
    background-color: var(--pc, #7289da);
    -webkit-mask: var(--prem-ico-src) center / contain no-repeat;
            mask: var(--prem-ico-src) center / contain no-repeat;
    filter: drop-shadow(0 0 3px var(--pc, #7289da));
}
.prem-ico--star  { --prem-ico-src: url('/static/default-icons/premium-star.png'); }
.prem-ico--check { --prem-ico-src: url('/static/default-icons/checkmark.png'); }
/* Оформление премиума сброшено («Инвентарь» → «Премиум»): иконка остаётся,
   свечение снимается, цвет — нейтральный дефолт. Ставится там же, где сервер
   отдаёт пустой premium_color (см. window.premStyleOff). */
.prem-ico--flat { filter: none; background-color: #7289da; }

/* ── Бейджи профиля (в духе Discord) ──
   Картинки-значки рядом с @тегом: карточка «Настроек», «Добавить аккаунт»,
   окно «Профиль», поиск, карусели «Поиска», визитка /u/:tag. Файл иконки и
   акцентный цвет (--ub, для модалки-пояснения) приходят с сервера. */
.ubadge-row {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    vertical-align: middle;
}
.ubadge {
    display: inline-block;
    width: 19px;
    height: 19px;
    flex: none;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    /* Значки — 3D-рендеры на прозрачном фоне; лёгкая тень отделяет их от
       тёмной подложки, а не рисует рамку вокруг. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.ubadge:hover { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55)); }
/* Карточка аккаунта в «барабане» — там строка тега мелкая, значки тоже. */
.ma-cell-tag .ubadge { width: 16px; height: 16px; }
.ma-cell-tag .ubadge-row { margin-left: 5px; gap: 2px; }

/* ── Локальное окно-пояснение бейджа ──
   Это не модалка: компактное окно привязано к нажатому значку и выбирает
   сторону по свободному месту. Прямой хвост указывает точно в центр бейджа. */
.badge-info-popover {
    --badge-pop-bg: #202027;
    position: fixed;
    z-index: 100050;
    width: min(276px, calc(100vw - 16px));
    box-sizing: border-box;
    display: block;
    padding: 11px 14px 12px;
    border-radius: 16px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--ub, #8b8da3) 8%, transparent), transparent 58%),
        var(--badge-pop-bg);
    border: 1px solid transparent;
    box-shadow:
        0 12px 30px rgba(0,0,0,.52);
    color: var(--text-primary);
    animation: badge-pop-in .16s cubic-bezier(.2,.8,.2,1);
}
.badge-info-popover[hidden] { display: none; }
@keyframes badge-pop-in {
    from { opacity: 0; transform: translateY(3px) scale(.97); }
    to { opacity: 1; transform: none; }
}
.badge-info-popover::after {
    content: "";
    position: absolute;
    left: var(--badge-tail-left, 50%);
    bottom: -9px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--badge-pop-bg);
    transform: translateX(-50%);
    pointer-events: none;
}
.badge-info-popover[data-placement="below"]::after {
    top: -9px;
    bottom: auto;
    border-top: 0;
    border-bottom: 10px solid var(--badge-pop-bg);
}
.badge-info-popover-meta { flex: 1; min-width: 0; }
.badge-info-popover-title { font-size: 14px; line-height: 1.25; font-weight: 800; color: #fff; letter-spacing: -.1px; }
.badge-info-popover-desc { margin-top: 4px; font-size: 11.75px; line-height: 1.4; color: #b5b6c2; }
.badge-info-popover-desc:empty { display: none; }
.badge-info-popover-granted { margin-top: 6px; font-size: 10.75px; line-height: 1.3; font-weight: 700; color: color-mix(in srgb, var(--ub, #8b8da3) 75%, #fff); }

/* ── Панель выдачи бейджей (аккаунт Администрации) ── */
/* Переключатель «кому выдаём»: пользователь (бейджи + галочка) или канал
   (только галочка — user_badges привязаны к пользователю). */
.badge-admin-modes { display: flex; gap: 8px; margin: 12px 0 0; }
.badge-admin-mode {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.badge-admin-mode:hover { color: var(--text-primary); }
.badge-admin-mode.active {
    background: rgba(108, 92, 231, 0.16);
    border-color: rgba(108, 92, 231, 0.5);
    color: var(--text-primary);
}
.badge-admin-search { display: flex; gap: 8px; margin: 12px 0 4px; }
.badge-admin-search input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 11px 14px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: #0e0e16;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.badge-admin-search input:focus { border-color: var(--accent-color); }
.badge-admin-search .st2-btn { flex: none; background: var(--accent-color); color: #fff; }
.badge-admin-empty { padding: 22px 6px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.badge-admin-note {
    margin-top: 10px;
    padding: 0 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}
.badge-admin-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 10px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}
.badge-admin-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.badge-admin-user-name { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.badge-admin-user-tag { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.badge-admin-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--glass-border);
}
.badge-admin-row.is-on { border-color: rgba(67, 181, 129, 0.45); background: rgba(67, 181, 129, 0.08); }
.badge-admin-ico { width: 38px; height: 38px; object-fit: contain; flex: none; }
.badge-admin-meta { flex: 1; min-width: 0; }
.badge-admin-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.badge-admin-desc { font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); margin-top: 2px; }
.badge-admin-btn {
    flex: none;
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    background: var(--accent-color);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.badge-admin-btn.revoke { background: rgba(224, 92, 107, 0.16); color: #e05c6b; }
.badge-admin-btn:disabled { opacity: 0.6; cursor: default; }
.badge-admin-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.badge-admin-benefit {
    padding: 12px; border-radius: 12px; background: rgba(0,0,0,.22);
    border: 1px solid var(--glass-border); min-width: 0;
}
.badge-admin-benefit-head { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13.5px; font-weight: 700; }
.badge-admin-benefit-head i { color: var(--accent-color); }
.badge-admin-benefit-state { min-height: 17px; margin: 5px 0 8px; color: var(--text-secondary); font-size: 11.5px; line-height: 1.4; }
.badge-admin-benefit-controls { display: flex; gap: 6px; }
.badge-admin-benefit-controls input {
    min-width: 0; width: 100%; box-sizing: border-box; padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.09); border-radius: 9px;
    background: #0e0e16; color: #fff; font: inherit; font-size: 13px; outline: none;
}
.badge-admin-benefit-controls input:focus { border-color: var(--accent-color); }
.badge-admin-action-btn {
    flex: none; border: 0; border-radius: 9px; padding: 8px 11px;
    background: var(--accent-color); color: #fff; font: inherit; font-size: 12.5px;
    font-weight: 700; cursor: pointer;
}
.badge-admin-action-btn:disabled { opacity: .55; cursor: default; }
.badge-admin-journal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.badge-admin-journal-head .st2-section-sub { margin-bottom: 8px; }
.badge-admin-refresh {
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05);
    color: var(--text-secondary); cursor: pointer;
}
.badge-admin-refresh:hover { color: #fff; background: rgba(255,255,255,.09); }
.badge-admin-log { display: flex; flex-direction: column; gap: 7px; }
.badge-admin-log-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.065); border-radius: 11px;
    background: rgba(0,0,0,.16);
}
.badge-admin-log-icon {
    width: 30px; height: 30px; flex: none; display: flex; align-items: center;
    justify-content: center; border-radius: 9px; color: var(--accent-color);
    background: rgba(108,92,231,.14);
}
.badge-admin-log-main { flex: 1; min-width: 0; }
.badge-admin-log-title { color: #e8e6ef; font-size: 12.5px; line-height: 1.4; }
.badge-admin-log-target { color: #fff; font-weight: 700; }
.badge-admin-log-meta { margin-top: 3px; color: #777583; font-size: 11px; }
.badge-admin-log-more {
    width: 100%; margin-top: 9px; padding: 9px; border-radius: 9px;
    border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04);
    color: var(--text-secondary); font: inherit; font-size: 12.5px; cursor: pointer;
}
.badge-admin-log-more:hover { color: #fff; background: rgba(255,255,255,.08); }
@media (max-width: 520px) {
    .badge-admin-benefits { grid-template-columns: 1fr; }
    .badge-info-popover { width: min(260px, calc(100vw - 16px)); }
}
/* Галочка верификации в панели выдачи: тот же бейдж, что рядом с именем
   (маска .prem-ico), просто крупнее и по центру места под иконку. */
.badge-admin-ico--check { display: inline-flex; align-items: center; justify-content: center; }
.badge-admin-ico--check .prem-badge { --prem-badge-box: 26px; }
.badge-admin-ico--check .prem-ico { margin-left: 0; }
/* Пикер палитры при выключенном оформлении: цвет остаётся, но он ни на что
   не влияет — показываем это состоянием, а не отключением инпута. */
.st2-palette-card.is-style-off { opacity: 0.55; }
/* Силуэт подарка — заглушка на месте 3D-модели, пока она грузится (или если
   WebGL недоступен). Раньше заглушкой была ЗВЕЗДА PREMIUM, и пользователь с
   выбранным подарком выглядел как обычный премиум: 3D-бейджи рендерятся по
   бюджету (см. MAX_RENDERS_PER_FRAME в gift_viewer.module.js) и в списке
   диалогов часто не успевали проснуться. Теперь на месте подарка всегда
   подарок. */
.prem-gift-glyph {
    --prem-ico-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.2' cy='4.2' r='2.6'/%3E%3Ccircle cx='15.8' cy='4.2' r='2.6'/%3E%3Crect x='2' y='6.6' width='9' height='4.4' rx='1'/%3E%3Crect x='13' y='6.6' width='9' height='4.4' rx='1'/%3E%3Crect x='3.4' y='12' width='7.6' height='9.6' rx='1'/%3E%3Crect x='13' y='12' width='7.6' height='9.6' rx='1'/%3E%3C/svg%3E");
}
/* Обёртка статус-подарка: место фиксированного размера, внутри — заглушка
   и живой <canvas> поверх неё. */
.prem-gift-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--prem-badge-box, 14px);
    height: var(--prem-badge-box, 14px);
    flex: none;
    margin-left: 5px;
    vertical-align: middle;
}
.prem-gift-ph {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.prem-gift-ph svg,
.prem-gift-ph .prem-ico {
    margin: 0 !important;
    width: var(--prem-badge-box, 14px);
    height: var(--prem-badge-box, 14px);
}
.prem-gift-wrap.gift-ready .prem-gift-ph { display: none; }
/* Живой вращающийся 3D-объект вместо звезды — прозрачный <canvas>, без фона.
   Вынесен из потока: крупнее места под бейдж, но на вёрстку не влияет. */
.prem-gift-ico {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--prem-badge-box, 14px) * var(--prem-gift-scale, 1.7));
    height: calc(var(--prem-badge-box, 14px) * var(--prem-gift-scale, 1.7));
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
    transition: transform 0.15s ease;
}
.prem-badge.has-gift:hover .prem-gift-ico { transform: translate(-50%, -50%) scale(1.2); }
/* Контекстные размеры звезды/подарка в специфичных местах (мини-профиль,
   карусели «Поиска», LFG) — единый чокпоинт getStarSvg рисует .prem-badge,
   а размер задаётся модификатором. Меняем ТОЛЬКО переменные: и звезда, и
   подарок пересчитываются от них согласованно. */
.prem-badge--mp,
.prem-badge--disco { --prem-gift-scale: 1.43; }
.prem-badge--lfg { --prem-badge-box: 12px; --prem-gift-scale: 1.33; }
/* В этих местах имя выкладывается флексом с gap — убираем «лишний» левый
   отступ звезды/подарка (он нужен только в списках/шапке без gap). */
.prem-badge--mp:not(.has-gift) > svg,
.prem-badge--disco:not(.has-gift) > svg,
.prem-badge--lfg:not(.has-gift) > svg,
.prem-badge--mp:not(.has-gift) > .prem-ico,
.prem-badge--disco:not(.has-gift) > .prem-ico,
.prem-badge--lfg:not(.has-gift) > .prem-ico { margin-left: 0 !important; }
.prem-badge--mp .prem-gift-wrap,
.prem-badge--disco .prem-gift-wrap,
.prem-badge--lfg .prem-gift-wrap { margin-left: 0; }

/* Кнопка «Сделать статусом» в своём инвентаре подарков */
.gift-status-btn {
    margin-top: 8px;
    width: 100%;
    border: 1px solid rgba(108, 92, 231, 0.3);
    background: rgba(108, 92, 231, 0.1);
    color: var(--accent-color);
    border-radius: 10px;
    padding: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.gift-status-btn:hover { background: rgba(108, 92, 231, 0.2); border-color: rgba(108,92,231,0.5); }
.gift-status-btn.is-active { background: rgba(67, 181, 129, 0.12); border-color: rgba(67, 181, 129, 0.4); color: #43b581; }

/* Модалка «Предмет {владелец}» */
.gift-item-owner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 14px;
}
.gift-item-owner-label { color: #9a9aa6; font-size: 14px; font-weight: 600; }
.gift-item-owner-av { position: relative; width: 30px; height: 30px; flex-shrink: 0; }
.gift-item-owner-av img { position: absolute; inset: 0; width: 100%; height: 100%; }
#giftItemOwnerAvatar { border-radius: 50%; object-fit: cover; }
#giftItemOwnerFrame { transform: scale(1.34); pointer-events: none; }
.gift-item-owner-name { color: #fff; font-size: 16px; font-weight: 800; }
#giftItemCardSlot { display: flex; justify-content: center; margin-bottom: 14px; }
#giftItemCardSlot .gift-msg { width: 260px; max-width: 100%; }

.nick-fx {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-repeat: no-repeat;
    font-weight: 700;
}
.nick-fx-shine {
    background-image: linear-gradient(100deg, #ffffff 0%, #aef0ff 12%, #38b6ff 26%, #ffffff 40%, #7d74ff 56%, #c44dff 70%, #6fe0ff 86%, #ffffff 100%);
    background-size: 230% 100%;
    filter: drop-shadow(0 0 5px rgba(90, 150, 255, 0.55));
    animation: nickShine 3.2s linear infinite;
}
@keyframes nickShine { 0% { background-position: 0% 0; } 100% { background-position: 230% 0; } }
.nick-fx-hue {
    background-image: linear-gradient(90deg, #ffd23f, #ffd23f);
    animation: nickHue 5s linear infinite;
}
@keyframes nickHue {
    0% { filter: hue-rotate(0deg) drop-shadow(0 0 4px rgba(255, 210, 63, 0.5)); }
    100% { filter: hue-rotate(360deg) drop-shadow(0 0 4px rgba(255, 210, 63, 0.5)); }
}
.nick-fx-rainbow {
    background-image: linear-gradient(90deg, #ff4d6d, #ff9e3d, #ffe14d, #5dff7a, #4dd2ff, #b86bff, #ff4d6d);
    background-size: 200% 100%;
    animation: nickRainbow 3s linear infinite;
}
@keyframes nickRainbow { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } }

.nick-fx-aura { position: relative; display: inline-block; overflow: visible; isolation: isolate; vertical-align: baseline; }
.nick-fx-aura-shine::before,
.nick-fx-aura-shine::after {
    content: "";
    position: absolute;
    left: -28%; right: -28%; top: -95%; bottom: -95%;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    will-change: transform, opacity;
}
.nick-fx-aura-shine::before {
    background-image:
        radial-gradient(55% 34% at 16% 50%, rgba(70,170,255,0.55), transparent 72%),
        radial-gradient(46% 30% at 52% 40%, rgba(150,220,255,0.5), transparent 72%),
        radial-gradient(52% 34% at 84% 58%, rgba(60,150,255,0.55), transparent 72%);
    filter: blur(7px);
    animation: nickWaveA 3.4s ease-in-out infinite alternate;
}
.nick-fx-aura-shine::after {
    background-image:
        radial-gradient(34% 30% at 34% 60%, rgba(120,200,255,0.5), transparent 70%),
        radial-gradient(30% 26% at 68% 36%, rgba(90,180,255,0.5), transparent 70%);
    filter: blur(9px);
    mix-blend-mode: screen;
    animation: nickWaveB 4.2s ease-in-out infinite alternate;
}
@keyframes nickWaveA {
    0%   { transform: translate3d(-4%, 3%, 0) scale(1);    opacity: 0.65; }
    50%  { transform: translate3d(3%, -4%, 0) scale(1.08); opacity: 1; }
    100% { transform: translate3d(-2%, 2%, 0) scale(1.02); opacity: 0.7; }
}
@keyframes nickWaveB {
    0%   { transform: translate3d(4%, -2%, 0) scale(1.04); opacity: 0.5; }
    50%  { transform: translate3d(-3%, 3%, 0) scale(0.96); opacity: 0.85; }
    100% { transform: translate3d(2%, -3%, 0) scale(1.06); opacity: 0.6; }
}

/* ===== Эффект «Голубые частицы» (key: particles) =====
   Бирюзово-голубой переливающийся текст + объёмная аура из голубого свечения,
   энергетических клубов и россыпи мерцающих частиц, разлетающихся за пределы
   текста. Воссоздание анимации ника NICEGOJKLL. */
.nick-fx-particles {
    background-image: linear-gradient(100deg,
        #eafaff 0%, #ffffff 13%, #7fd4ff 29%, #d6f3ff 45%,
        #34a8ff 61%, #ffffff 77%, #8fe0ff 91%, #eafaff 100%);
    background-size: 240% 100%;
    filter: drop-shadow(0 0 6px rgba(70, 170, 255, 0.65)) drop-shadow(0 0 13px rgba(40, 140, 255, 0.35));
    animation: nickParticlesShine 3.6s linear infinite;
}
@keyframes nickParticlesShine { 0% { background-position: 0% 0; } 100% { background-position: 240% 0; } }

.nick-fx-aura-particles > .nick-fx { position: relative; z-index: 3; }

.nfp-field {
    position: absolute;
    left: -45%; right: -45%; top: -130%; bottom: -130%;
    pointer-events: none;
}
/* мягкое голубое свечение-подложка за текстом */
.nfp-field::before {
    content: "";
    position: absolute;
    left: 16%; right: 16%; top: 34%; bottom: 34%;
    z-index: 0;
    background: radial-gradient(62% 130% at 50% 50%, rgba(60, 160, 255, 0.5), rgba(40, 120, 255, 0.14) 55%, transparent 76%);
    filter: blur(8px);
    animation: nfpGlow 3s ease-in-out infinite alternate;
}
/* дрейфующие энергетические клубы (тело «пламени») */
.nfp-field::after {
    content: "";
    position: absolute;
    left: 4%; right: 4%; top: 22%; bottom: 22%;
    z-index: 1;
    background:
        radial-gradient(40% 62% at 28% 56%, rgba(80, 185, 255, 0.5), transparent 70%),
        radial-gradient(38% 58% at 70% 44%, rgba(56, 158, 255, 0.5), transparent 70%),
        radial-gradient(30% 50% at 50% 62%, rgba(150, 225, 255, 0.45), transparent 72%);
    filter: blur(9px);
    mix-blend-mode: screen;
    animation: nfpCloud 4.2s ease-in-out infinite alternate;
}
@keyframes nfpGlow {
    0%   { opacity: 0.5;  transform: scale(0.9); }
    100% { opacity: 0.95; transform: scale(1.07); }
}
@keyframes nfpCloud {
    0%   { transform: translate(-4%, 2%)  scale(1);    opacity: 0.55; }
    50%  { transform: translate(3%, -3%)  scale(1.08); opacity: 0.9; }
    100% { transform: translate(-2%, 1%)  scale(1.03); opacity: 0.6; }
}

/* мерцающие частицы поверх свечения */
.nfp-field i {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 2;
    width: 4px; height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #bfeaff 30%, #3aa8ff 66%, rgba(58, 168, 255, 0) 72%);
    box-shadow: 0 0 6px 1px rgba(95, 195, 255, 0.85);
    opacity: 0;
    will-change: transform, opacity;
    animation: nfpRise 3.4s ease-in-out infinite;
}
@keyframes nfpRise {
    0%   { opacity: 0;    transform: translate(var(--sx, 0), var(--sy, 0)) scale(0.3); }
    15%  { opacity: 1; }
    72%  { opacity: 0.85; }
    100% { opacity: 0;    transform: translate(var(--ex, 0), var(--ey, -40px)) scale(1); }
}
.nfp-field i:nth-child(1)  { --sx: -60px; --sy: 6px;  --ex: -80px; --ey: -42px; width: 4px; height: 4px; animation-delay: 0s;   animation-duration: 3.4s; }
.nfp-field i:nth-child(2)  { --sx: -44px; --sy: 10px; --ex: -54px; --ey: -48px; width: 3px; height: 3px; animation-delay: .6s;  animation-duration: 3.0s; }
.nfp-field i:nth-child(3)  { --sx: -30px; --sy: 4px;  --ex: -40px; --ey: -54px; width: 5px; height: 5px; animation-delay: 1.2s; animation-duration: 3.8s; }
.nfp-field i:nth-child(4)  { --sx: -16px; --sy: 12px; --ex: -22px; --ey: -46px; width: 3px; height: 3px; animation-delay: .3s;  animation-duration: 2.8s; }
.nfp-field i:nth-child(5)  { --sx: -4px;  --sy: 6px;  --ex: -8px;  --ey: -58px; width: 5px; height: 5px; animation-delay: 1.7s; animation-duration: 4.0s; }
.nfp-field i:nth-child(6)  { --sx: 8px;   --sy: 10px; --ex: 14px;  --ey: -50px; width: 4px; height: 4px; animation-delay: .9s;  animation-duration: 3.2s; }
.nfp-field i:nth-child(7)  { --sx: 22px;  --sy: 4px;  --ex: 32px;  --ey: -56px; width: 3px; height: 3px; animation-delay: 2.0s; animation-duration: 3.6s; }
.nfp-field i:nth-child(8)  { --sx: 36px;  --sy: 12px; --ex: 48px;  --ey: -44px; width: 5px; height: 5px; animation-delay: .4s;  animation-duration: 3.0s; }
.nfp-field i:nth-child(9)  { --sx: 50px;  --sy: 6px;  --ex: 66px;  --ey: -52px; width: 4px; height: 4px; animation-delay: 1.4s; animation-duration: 3.8s; }
.nfp-field i:nth-child(10) { --sx: 64px;  --sy: 10px; --ex: 82px;  --ey: -40px; width: 3px; height: 3px; animation-delay: 2.3s; animation-duration: 3.2s; }
.nfp-field i:nth-child(11) { --sx: -50px; --sy: 14px; --ex: -68px; --ey: 2px;   width: 4px; height: 4px; animation-delay: 1.0s; animation-duration: 3.4s; }
.nfp-field i:nth-child(12) { --sx: 52px;  --sy: 14px; --ex: 70px;  --ey: 4px;   width: 4px; height: 4px; animation-delay: 1.9s; animation-duration: 3.6s; }
.nfp-field i:nth-child(13) { --sx: -20px; --sy: 16px; --ex: -26px; --ey: 22px;  width: 3px; height: 3px; animation-delay: 2.6s; animation-duration: 3.0s; }
.nfp-field i:nth-child(14) { --sx: 24px;  --sy: 16px; --ex: 30px;  --ey: 24px;  width: 3px; height: 3px; animation-delay: .7s;  animation-duration: 3.2s; }

.nick-fx-card { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 104px; padding: 12px 8px; border-radius: 12px; background: rgba(0,0,0,0.25); border: 2px solid transparent; cursor: pointer; transition: 0.15s; }
.nick-fx-card.active { border-color: var(--accent-color, #7289da); background: rgba(114,137,218,0.12); }
.nick-fx-card .nick-fx-sample { font-size: 18px; line-height: 1.2; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nick-fx-card .nick-fx-name { font-size: 12px; color: #aaa; text-align: center; }
.nick-fx-shop-grid { display: flex; gap: 12px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
    .nick-fx-shine, .nick-fx-hue, .nick-fx-rainbow, .nick-fx-particles,
    .nick-fx-aura-shine::before, .nick-fx-aura-shine::after,
    .nfp-field::before, .nfp-field::after { animation: none; }
    .nfp-field i { display: none; }
}

/* ── Перф: пауза premium-эффектов ников вне экрана ──────────────────────────
   Класс .fx-idle навешивает fx_perf.js на .nick-fx / .nick-fx-aura, когда они
   прокручены за пределы вьюпорта. Пока эффект не виден, его анимации (и вложенных
   частиц .nfp-field i) простаивают — это убирает фоновую нагрузку и нагрев на
   длинных списках. На экране (без .fx-idle) внешний вид не меняется. */
.nick-fx.fx-idle,
.nick-fx-aura.fx-idle,
.nick-fx.fx-idle *,
.nick-fx-aura.fx-idle * { animation-play-state: paused !important; }

/* ════════════════════════════════════════════════════════════════════
   Модалка удаления сообщений (аватар+рамка/название, «для себя/для всех»)
   ════════════════════════════════════════════════════════════════════ */
.del-modal-content {
    width: 330px;
    max-width: calc(100vw - 40px);
    padding: 20px;
    border-radius: 18px;
    border: none;
    background: var(--bg-element, #1f1f26);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    gap: 14px;
}
.del-modal-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.del-modal-avatar-wrap {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}
.del-modal-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.del-modal-frame {
    position: absolute;
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;
    pointer-events: none;
    z-index: 2;
}
.del-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.del-modal-text {
    font-size: 14px;
    color: var(--text-secondary, #aaa);
    line-height: 1.45;
}
.del-modal-check {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}
.del-modal-check input { display: none; }
.del-modal-check-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.28);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.del-modal-check-box i { opacity: 0; transform: scale(0.5); transition: opacity 0.16s ease, transform 0.16s ease; }
.del-modal-check input:checked + .del-modal-check-box {
    background: var(--accent-color, #6c5ce7);
    border-color: var(--accent-color, #6c5ce7);
}
.del-modal-check input:checked + .del-modal-check-box i { opacity: 1; transform: scale(1); }
.del-modal-check-label { font-size: 14px; color: #fff; }
.del-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 22px;
    margin-top: 4px;
}
.del-modal-btn {
    background: none;
    border: none;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 2px;
    transition: opacity 0.15s ease;
}
.del-modal-btn.cancel { color: var(--accent-color, #6c5ce7); }
.del-modal-btn.danger { color: #ff4757; }
.del-modal-btn:hover { opacity: 0.75; }

.invite-friends-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    margin: 6px 8px;
    background: rgba(114, 137, 218, 0.10);
    border: 1px dashed rgba(114, 137, 218, 0.4);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.invite-friends-entry:hover { background: rgba(114, 137, 218, 0.18); }
.invite-friends-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7289da, #6c5ce7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.invite-friends-icon i { color: #fff; font-size: 15px; }
.invite-friends-info { flex: 1; min-width: 0; }
.invite-friends-title { color: #fff; font-weight: 700; font-size: 14px; }
.invite-friends-sub { color: #8fa3e8; font-size: 12px; margin-top: 2px; }
.invite-friends-arrow { color: #8fa3e8; font-size: 12px; }

.invite-modal-card {
    position: relative;
    background: #12121a;
    border-radius: 16px;
    padding: 28px 24px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-width: 380px;
    width: calc(100% - 40px);
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 90dvh;
    overflow-y: auto;
    animation: fadeInModal 0.25s ease;
}
.invite-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #1a1a28;
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.invite-close-btn:hover { background: #222233; color: #fff; }
.invite-qr-wrap {
    position: relative;
    width: 224px;
    height: 224px;
    line-height: 0;
}
.invite-qr-box, .invite-qr-box svg { width: 100%; height: 100%; display: block; }
.invite-qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    object-fit: contain;
}
.invite-modal-title {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin: 18px 0 6px;
    text-align: center;
}
.invite-modal-sub {
    color: #9aa0b4;
    font-size: 13px;
    margin: 0 0 16px;
    text-align: center;
    line-height: 1.45;
}
.invite-link-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: #0e0e16;
    border-radius: 10px;
    padding: 12px 15px;
    color: #8fa3e8;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
    margin-bottom: 14px;
    transition: background 0.2s, color 0.2s;
}
.invite-link-box:hover { background: #15151f; }
.invite-link-box.copied { color: #43b581; }
.invite-link-box span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.invite-btn {
    width: 100%;
    border: none;
    padding: 13px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    background: #1a1a28;
    color: #ccc;
    transition: background 0.2s;
    margin-top: 8px;
}
.invite-btn:hover { background: #222233; }
.invite-btn-primary { background: #6c5ce7; color: #fff; margin-top: 0; }
.invite-btn-primary:hover { background: #7d6ef0; }
.invite-socials-label { color: #666e85; font-size: 12px; margin: 12px 0 8px; text-align: center; }
.invite-socials { display: flex; gap: 14px; justify-content: center; }
.invite-social-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, filter 0.15s;
}
.invite-social-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.invite-social-tg { background: #2aabee; }
.invite-social-vk { background: #0077ff; }
.invite-social-wa { background: #25d366; }
.invite-type-row {
    display: flex;
    width: 100%;
    background: #0e0e16;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    box-sizing: border-box;
    margin-bottom: 12px;
}
.invite-type-btn {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 9px 6px;
    background: transparent;
    color: #9aa0b4;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.invite-type-btn.active { background: #6c5ce7; color: #fff; }
.invite-type-btn:not(.active):hover { background: #15151f; color: #ccc; }

/* ── Визитка: кнопка «Поделиться профилем» и QR-модалка ──
   Кнопка живёт в левом краю строки под баннером (.profile-side-row), напротив
   бабла уровня. Круглая: круг задаёт именно рамка кнопки. */
.profile-share-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(20, 20, 30, 0.72);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}
.profile-share-btn:hover {
    background: #6c5ce7;
    border-color: #6c5ce7;
    color: #fff;
    transform: translateY(-1px);
}
.profile-share-btn:active { transform: translateY(0); }

/* Аватар в центре QR. Дырка в коде — 13×13 модулей (QR_HOLE в
   chat_profile_share.js), это ~65px при коде 224px: аватар 56px плюс рамка
   (118%, как везде в интерфейсе) укладываются в неё и не закрывают данные. */
.profile-qr-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    line-height: 0;
}
.profile-qr-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #12121a;
}
.profile-qr-avatar .profile-qr-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 118%;
    height: 118%;
    border-radius: 0;
    object-fit: contain;
    background: none;
    pointer-events: none;
}

/* ── WebView lite mode (Android-приложение, html.wv-lite) ──
   Chromium внутри Android WebView пересчитывает backdrop-filter/blur на
   каждом кадре скролла и анимаций — это главный источник лагов приложения.
   Класс wv-lite ставится инлайн-скриптом в chat.html (и дублируется
   инжектом из приложения). Блюры выключаются, «стеклянные» поверхности
   получают плотный фон, анимированные blur-слои замораживаются. */
html.wv-lite *,
html.wv-lite *::before,
html.wv-lite *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.wv-lite .chat-header,
html.wv-lite .bottom-nav,
html.wv-lite .dropdown-menu,
html.wv-lite .tg-msg-menu,
html.wv-lite .media-dropdown-menu,
html.wv-lite .rooms-bar,
html.wv-lite .rooms-panel,
html.wv-lite .room-modal,
html.wv-lite .sticker-picker,
html.wv-lite .vn-hotbar,
html.wv-lite .voice-mini,
html.wv-lite .settings-pill-header,
html.wv-lite .scroll-to-bottom-btn,
html.wv-lite .media-modal-header,
html.wv-lite .ma-modal,
html.wv-lite .call-pip,
html.wv-lite .toast,
html.wv-lite .reply-context-bar {
    background: rgba(18, 18, 26, 0.96) !important;
}
html.wv-lite .date-divider span,
html.wv-lite .system-msg-pill {
    background: rgba(40, 36, 66, 0.92);
}
html.wv-lite .msg-meta.media-meta,
html.wv-lite .msg-meta.media-meta-inline,
html.wv-lite .media-only-bubble .reply-quote,
html.wv-lite .chat-card .chat-bubble.media-only-bubble .reply-quote,
html.wv-lite .chat-card .chat-bubble.sticker-bubble .reply-quote {
    background: rgba(0, 0, 0, 0.68) !important;
}
html.wv-lite .chat-media-grid.single-media::before {
    filter: none;
    transform: none;
    opacity: 0.3;
}
html.wv-lite .nick-fx-aura-shine::before,
html.wv-lite .nick-fx-aura-shine::after,
html.wv-lite .nfp-field::before,
html.wv-lite .nfp-field::after,
html.wv-lite .profile-card-premium-shimmer,
html.wv-lite .ma-premium-shimmer,
html.wv-lite .premium-upsell-header,
html.wv-lite .premium-upsell-header .floating-particle,
html.wv-lite .disco-card--premium,
html.wv-lite .gs-game--perfect {
    animation: none !important;
}

/* ── content-visibility у карточек СНЯТ намеренно (не возвращать!).
   Пока он стоял, карточка вне экрана занимала не свою высоту, а плейсхолдер
   contain-intrinsic-size (72px): «auto» запоминает размер только ПОСЛЕ первого
   рендера, а первый рендер как раз и случается в момент, когда пользователь до
   карточки долистал. Реальное короткое сообщение ниже 72px → при подъёме по
   истории лента над вьюпортом схлопывалась на 15-25px на каждую карточку и
   прокрутку «отбрасывало» назад, к новым сообщениям (фото, наоборот, дёргали
   вперёд). Chrome это иногда прикрывал scroll anchoring, WebKit (iOS) не
   прикрывает никогда — отсюда «на телефонах постоянно, на ПК иногда».
   Экономия layout/paint не стоит дёрганой прокрутки: картинки и так грузятся
   лениво (loading=lazy + decoding=async), а карточек в ленте немного —
   история страничная. ── */

/* ── Вспышка-подсветка сообщения при переходе к нему (закреп/ответ/поиск).
   НЕ через @keyframes: у .chat-card фон задан с !important (см. базовое
   правило), а CSS-анимации проигрывают important-декларациям — такой флеш
   вообще не красился. Пара important-правил + transition работает: класс
   msg-jump-flash зажигает фон, msg-jump-fade плавно гасит (chat_modals_groups.js). ── */
.chat-card.msg-jump-flash {
    background: rgba(114, 137, 218, 0.42) !important;
    border-radius: 14px;
    transition: background 0.25s ease;
}
.chat-card.msg-jump-flash.msg-jump-fade {
    background: transparent !important;
    transition: background 1.5s ease;
}

/* ── Ускорение загрузки фото: content-visibility: auto — браузер не рендерит
   и не декодирует картинки вне экрана, пока к ним не доскроллили.
   ВАЖНО: только сетки в модалках (профиль/стикеры/магазин). В ленте диалога
   (.chat-media-item) его нет намеренно — там плейсхолдер 250px перебивал
   inline aspect-ratio фотографии и дёргал прокрутку (см. комментарий выше). ── */
@supports (content-visibility: auto) {
    .cp-media-item,
    .st-item,
    .shop-item-card {
        content-visibility: auto;
    }
    .cp-media-item,
    .st-item { contain-intrinsic-size: auto 90px; }
    .shop-item-card { contain-intrinsic-size: auto 220px; }
}

/* ── Видео-кружки: кольцо прогресса (inset -4px) и scale(1.06) при
   воспроизведении вылезают за бокс карточки — оставляем им дополнительный
   отступ от соседних сообщений. ── */
#messagesArea .chat-card.vn-card {
    margin-top: 10px;
    margin-bottom: 18px !important;
}

/* ============================================================================
   БОТ «МУЗЫКА»: кнопка библиотеки, карточки бота, меню библиотеки, оверлей
   ==========================================================================*/

/* Кнопка-нота в шапке диалога с ботом «Музыка» */
.chat-header-music-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    margin-right: 8px;
    border: none;
    border-radius: 50%;
    background: rgba(108, 92, 231, 0.16);
    color: var(--accent-color);
    font-size: 16px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.18s ease, transform 0.18s ease;
}
.chat-header-music-btn:hover { background: rgba(108, 92, 231, 0.3); transform: scale(1.06); }
.chat-header-music-btn:active { transform: scale(0.94); }

/* ── Карточки сообщений бота ─────────────────────────────────────────────── */
.music-msg {
    max-width: 460px;
    width: 100%;
    margin: 6px 0;
    padding: 12px 14px;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(108,92,231,0.12), rgba(255,255,255,0.03));
    border: 1px solid var(--border-color);
    border-radius: 16px;
}
.music-msg-head {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.music-msg-head i { color: var(--accent-color); }
.music-msg-time { margin-top: 8px; font-size: 11px; color: var(--text-secondary); text-align: right; }

/* Иконки выбора источника */
.music-src-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}
.music-src-row--loading { opacity: 0.5; pointer-events: none; }
.music-src {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    color: var(--text-primary);
    font-size: 11px; font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.music-src:hover { transform: translateY(-2px); border-color: var(--accent-color); background: rgba(108,92,231,0.1); }
.music-src img { width: 34px; height: 34px; border-radius: 9px; }
.music-src span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.music-src--soon { opacity: 0.5; }
.music-src--soon:hover { transform: none; border-color: var(--border-color); background: rgba(255,255,255,0.02); }

/* Результаты поиска */
.music-res-list { display: flex; flex-direction: column; gap: 6px; }
.music-res {
    display: flex; align-items: center; gap: 10px;
    padding: 6px; border-radius: 12px;
    background: rgba(255,255,255,0.02);
    transition: background 0.15s ease;
}
.music-res:hover { background: rgba(255,255,255,0.05); }
.music-res-art { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: #1a1a20; }
.music-res-meta { flex: 1; min-width: 0; }
.music-res-title { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-res-artist { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-res-play, .music-res-add, .music-res-noadd {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: rgba(108,92,231,0.16); color: var(--accent-color);
    font-size: 13px; cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.music-res-play:hover, .music-res-add:hover { background: rgba(108,92,231,0.34); transform: scale(1.08); }
.music-res-add--done { background: rgba(67,181,129,0.22); color: #43b581; }
.music-res-play--off, .music-res-noadd { opacity: 0.4; cursor: default; background: rgba(255,255,255,0.04); color: var(--text-secondary); }

/* ── Меню библиотеки (bottom sheet) ──────────────────────────────────────── */
.music-modal { position: fixed; inset: 0; z-index: 1400; }
.music-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.music-modal-sheet {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: min(520px, 100%);
    max-height: 88vh;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    animation: musicSheetIn 0.28s cubic-bezier(.34,1.4,.64,1);
}
.music-modal-sheet--compact { max-height: 76vh; }
.music-modal-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.music-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 2px 8px; font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.music-sec-action { border: none; background: rgba(108,92,231,0.14); color: var(--accent-color); border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.music-sec-action:hover { background: rgba(108,92,231,0.26); }
@keyframes musicSheetIn { from { transform: translate(-50%, 40px); opacity: 0.4; } to { transform: translate(-50%, 0); opacity: 1; } }
.music-modal-grabber { width: 40px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.18); margin: 6px auto 10px; }
.music-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.music-modal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 9px; }
.music-modal-title i { color: var(--accent-color); }
.music-modal-close { width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(255,255,255,0.06); color: var(--text-secondary); cursor: pointer; }
.music-modal-close:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
.music-add-btn {
    width: 100%; margin-bottom: 12px; padding: 12px;
    border: 1px dashed rgba(108,92,231,0.5); border-radius: 14px;
    background: rgba(108,92,231,0.08); color: var(--accent-color);
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.15s ease;
}
.music-add-btn:hover { background: rgba(108,92,231,0.18); }
.music-add-btn:disabled { opacity: 0.6; cursor: default; }
.music-lib-list { overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 4px; }
.music-lib-empty { text-align: center; color: var(--text-secondary); font-size: 13px; padding: 30px 10px; }
.music-lib-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px; border-radius: 12px;
    transition: background 0.15s ease;
}
.music-lib-item:hover { background: rgba(255,255,255,0.05); }
.music-lib-item--playing { background: rgba(108,92,231,0.14); }
.music-lib-art { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: #1a1a20; }
.music-lib-meta { flex: 1; min-width: 0; }
.music-lib-title { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-lib-artist { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-lib-play, .music-lib-del {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; cursor: pointer; font-size: 13px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.music-lib-play { background: rgba(108,92,231,0.18); color: var(--accent-color); }
.music-lib-play:hover { background: rgba(108,92,231,0.34); transform: scale(1.08); }
.music-lib-del { background: transparent; color: var(--text-secondary); }
.music-lib-del:hover { background: rgba(237,66,69,0.16); color: #ed4245; }

/* ── Оверлей воспроизведения (перетаскиваемый, примагничивается) ──────────── */
.music-overlay {
    position: fixed;
    left: 50%; transform: translateX(-50%);
    top: calc(10px + env(safe-area-inset-top, 0px));
    width: min(440px, calc(100vw - 20px));
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(108,92,231,0.30) 0%, rgba(20,20,26,0.97) 62%);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(108,92,231,0.32);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    z-index: 1300;
    touch-action: none;
    animation: musicOvIn 0.28s ease;
}
@keyframes musicOvIn { from { opacity: 0; } to { opacity: 1; } }
.music-overlay--dragging { transition: none !important; cursor: grabbing; box-shadow: 0 14px 44px rgba(0,0,0,0.6); }
.music-overlay-grip { flex: 0 0 auto; width: 16px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); cursor: grab; font-size: 12px; }
.music-overlay-grip:active { cursor: grabbing; }
.music-overlay-art { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: #14141a; }
.music-overlay-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.music-overlay-title { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-overlay-artist { font-size: 11px; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-overlay-track { position: relative; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.18); cursor: pointer; margin-top: 2px; }
.music-overlay-progress { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 3px; background: #a29bfe; }
.music-overlay-thumb { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(0,0,0,0.5); }
.music-overlay-controls { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.music-overlay-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,0.1); color: #fff; font-size: 13px; cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.music-overlay-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.06); }
.music-overlay-play { background: rgba(162,155,254,0.9); color: #14141a; }
.music-overlay-play:hover { background: #a29bfe; }
.music-overlay-x { background: transparent; color: rgba(255,255,255,0.6); }
.music-overlay-x:hover { background: rgba(237,66,69,0.2); color: #fff; }

/* ── Цветовые палитры плейлистов (белый список ключей на бэке) ────────────── */
.music-color-violet { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; }
.music-color-blue   { background: linear-gradient(135deg, #38bdf8, #2563eb); color: #fff; }
.music-color-green  { background: linear-gradient(135deg, #34d399, #059669); color: #fff; }
.music-color-red    { background: linear-gradient(135deg, #fb7185, #e11d48); color: #fff; }
.music-color-orange { background: linear-gradient(135deg, #fbbf24, #f97316); color: #fff; }
.music-color-pink   { background: linear-gradient(135deg, #f0abfc, #db2777); color: #fff; }
.music-color-teal   { background: linear-gradient(135deg, #2dd4bf, #0d9488); color: #fff; }
.music-color-gold   { background: linear-gradient(135deg, #fde68a, #d4a017); color: #3a2d00; }
.music-color-mono   { background: linear-gradient(135deg, #4b5563, #1f2937); color: #fff; }

/* ── Плейлисты: сетка карточек (стиль Яндекс.Музыки) ─────────────────────── */
.music-pls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.music-pls-empty { grid-column: 1 / -1; color: var(--text-secondary); font-size: 12px; padding: 8px 2px 4px; }
.music-pl-card { border: none; background: transparent; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.music-pl-cover { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; }
img.music-pl-cover { background: #1a1a20; }
.music-pl-card:hover .music-pl-cover { filter: brightness(1.08); }
.music-pl-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-pl-count { font-size: 11px; color: var(--text-secondary); }

/* Шапка плейлиста */
.music-pl-hero { display: flex; gap: 14px; align-items: flex-end; margin: 4px 2px 14px; }
.music-pl-hero-cover { width: 108px; height: 108px; border-radius: 16px; object-fit: cover; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.music-pl-hero-meta { flex: 1; min-width: 0; }
.music-pl-hero-title { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.music-pl-hero-sub { font-size: 12px; color: var(--text-secondary); margin: 2px 0 10px; }
.music-pl-hero-actions { display: flex; gap: 8px; }
.music-pl-play-all { border: none; border-radius: 22px; padding: 9px 18px; background: var(--accent-color); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.music-pl-play-all:hover { filter: brightness(1.1); }
.music-pl-del-all { border: none; border-radius: 50%; width: 38px; height: 38px; background: rgba(255,255,255,0.06); color: var(--text-secondary); cursor: pointer; }
.music-pl-del-all:hover { background: rgba(237,66,69,0.16); color: #ed4245; }

/* Модалка создания/кастомизации плейлиста */
.music-pl-edit-preview { width: 120px; height: 120px; border-radius: 18px; margin: 6px auto 12px; display: flex; align-items: center; justify-content: center; font-size: 40px; overflow: hidden; }
.music-pl-edit-preview img { width: 100%; height: 100%; object-fit: cover; }
.music-pl-cover-btn { display: block; margin: 0 auto 12px; border: none; background: rgba(255,255,255,0.06); color: var(--text-primary); border-radius: 20px; padding: 8px 16px; font-size: 13px; cursor: pointer; }
.music-pl-cover-btn:hover { background: rgba(255,255,255,0.12); }
.music-pl-title-input { width: 100%; box-sizing: border-box; background: var(--bg-input, rgba(255,255,255,0.05)); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 12px; padding: 11px 14px; font-size: 15px; margin-bottom: 14px; outline: none; }
.music-pl-title-input:focus { border-color: var(--accent-color); }
.music-pl-colors { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 16px; }
.music-color-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.music-color-dot.is-sel { border-color: #fff; box-shadow: 0 0 0 2px var(--accent-color); }
.music-pl-save { margin-bottom: 0; border-style: solid; }

/* Выбор «куда сохранить» */
.music-choose-row { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; border: none; background: rgba(255,255,255,0.03); color: var(--text-primary); border-radius: 12px; padding: 11px 12px; margin-bottom: 6px; cursor: pointer; font-size: 14px; font-weight: 500; text-align: left; }
.music-choose-row:hover { background: rgba(255,255,255,0.07); }
.music-choose-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 15px; }
.music-choose-ic img { width: 100%; height: 100%; object-fit: cover; }

/* Нижнюю навигацию оверлей НЕ двигает: он сам встаёт над ней, когда примагничен
   к низу (см. bottomNavClearance в chat_music.js). Раньше здесь поднимали
   .bottom-nav на 84px при любом воспроизведении — меню уезжало вверх, даже
   когда оверлей висел у верхнего края. */

/* ── Мобильная адаптация системы музыки ──────────────────────────────────── */
@media (max-width: 600px) {
    .music-msg { max-width: 100%; }
    .music-src-row { grid-template-columns: repeat(3, 1fr); gap: 7px; }
    .music-src { padding: 9px 4px; font-size: 10px; }
    .music-src img { width: 30px; height: 30px; }
    .music-modal-sheet { width: 100%; max-height: 90vh; border-radius: 18px 18px 0 0; padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .music-overlay { width: calc(100vw - 12px); gap: 8px; padding: 7px 9px; }
    .music-overlay-art { width: 40px; height: 40px; }
    .music-overlay-btn { width: 32px; height: 32px; }
    .music-overlay-grip { width: 12px; }
    .music-pls-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
    .music-pl-hero-cover { width: 84px; height: 84px; font-size: 26px; }
    .music-pl-hero-title { font-size: 17px; }
    .music-res-art { width: 40px; height: 40px; }
    .music-res-play, .music-res-add, .music-res-noadd { width: 32px; height: 32px; }
}

/* ── Баннер «Доступно обновление» ─────────────────────────────────────────
   Висит поверх списка диалогов, чуть выше нижней навигации и ровно по её
   краям. Точные left/right/bottom проставляет chat_update.js по реальному
   прямоугольнику .bottom-nav (в координатах вьюпорта) — здесь только вид. */
.app-update-bar {
    position: fixed;
    z-index: 1001;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 12px;
    box-sizing: border-box;
    border-radius: 18px;
    border: 1px solid rgba(108, 92, 231, 0.35);
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.28) 0%, rgba(20, 20, 26, 0.97) 68%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    /* Выезд снизу — переходом, а не @keyframes: элемент создаётся скрытым, и
       анимация на display:none залипала бы на первом кадре (плашка оставалась
       смещённой на 14px и наезжала на меню). */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(.34, 1.35, .64, 1);
}
.app-update-bar.is-in { opacity: 1; transform: translateY(0); }
.app-update-ic {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(108, 92, 231, 0.32);
    color: #cfc7ff;
    font-size: 14px;
}
.app-update-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.app-update-title {
    font-size: 13.5px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-update-sub {
    font-size: 11.5px; color: rgba(255, 255, 255, 0.62);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-update-btn {
    flex: 0 0 auto;
    border: none; border-radius: 20px;
    padding: 9px 18px;
    background: var(--accent-color);
    color: #fff; font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.app-update-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.app-update-btn:disabled { opacity: 0.75; cursor: default; transform: none; }

/* Узкая плашка (сайдбар на ПК, телефон) — только заголовок и кнопка. */
.app-update-bar.is-narrow .app-update-sub { display: none; }
.app-update-bar.is-narrow { padding: 9px 9px 9px 11px; }

/* В WebView без backdrop-filter (см. html.wv-lite) — плотный фон вместо блюра. */
html.wv-lite .app-update-bar {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: linear-gradient(135deg, rgba(88, 74, 205, 0.98) 0%, rgba(20, 20, 26, 0.99) 68%);
}

/* Кнопка-вход «Музыка» на экране «Поиск» */
.music-bot-entry {
    display: flex; align-items: center; gap: 12px;
    width: 100%; margin: 0 0 12px; padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid rgba(108,92,231,0.25);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(108,92,231,0.22), rgba(139,92,246,0.08));
    color: var(--text-primary);
    cursor: pointer; text-align: left;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.music-bot-entry:hover { transform: translateY(-1px); border-color: rgba(108,92,231,0.5); }
.music-bot-entry-icon {
    width: 44px; height: 44px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 18px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff;
}
.music-bot-entry-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.music-bot-entry-title { font-size: 15px; font-weight: 700; }
.music-bot-entry-sub { font-size: 12px; color: var(--text-secondary); }
.music-bot-entry-chevron { color: var(--text-secondary); font-size: 13px; flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   «Поделиться контактом» (скрепка → «Пользователь»)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Модалка выбора пользователя ── */
.share-contact-card {
    width: 420px;
    max-width: 94vw;
    max-height: 82dvh;
    padding: 0;
    overflow: hidden;
    gap: 0;
}
.share-contact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    font-size: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.share-contact-head i {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 16px;
    transition: color 0.2s;
}
.share-contact-head i:hover { color: var(--text-primary); }
/* Распорка справа от заголовка — ровно ширина крестика слева, чтобы текст
   стоял по центру шапки, а не «съезжал» вправо. */
.share-contact-head-spacer { width: 16px; flex-shrink: 0; }

.share-contact-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 14px 6px;
    padding: 0 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    min-height: 42px;
    flex-shrink: 0;
    transition: border-color 0.2s;
}
.share-contact-search-row:focus-within { border-color: rgba(108, 92, 231, 0.5); }
.share-contact-search-row > i { color: var(--text-secondary); font-size: 13px; flex-shrink: 0; }
.share-contact-search-row input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    padding: 10px 0;
}

.share-contact-results {
    flex: 1;
    min-height: 140px;
    max-height: 56dvh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8px 10px;
}
.share-contact-results .chat-list-item { cursor: pointer; border-radius: 12px; }
.share-contact-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 22px 14px;
}

/* ── Подтверждение отправки ── */
.share-contact-confirm {
    width: 340px;
    max-width: 92vw;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 24px 20px 18px;
}
.scc-avatar-wrap { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.scc-avatar-wrap img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 76px; height: 76px;
    border-radius: 50%;
    object-fit: cover;
}
.scc-avatar-wrap .scc-frame {
    width: 84px; height: 84px;
    border-radius: 0;
    object-fit: contain;
    pointer-events: none;
}
.scc-name {
    margin-top: 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
}
.scc-tag { margin-top: 3px; font-size: 13px; color: var(--accent-color); font-weight: 600; }
.scc-tag:empty { display: none; }
.scc-question { margin-top: 14px; font-size: 14px; color: var(--text-secondary); line-height: 1.45; }
.scc-btn {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s, background 0.2s;
}
.scc-btn-primary { background: var(--accent-color); color: #fff; box-shadow: 0 4px 14px var(--accent-glow); }
.scc-btn-primary:hover { filter: brightness(1.08); }
.scc-btn-primary:disabled { opacity: 0.6; cursor: default; }
.scc-btn-cancel { background: transparent; color: var(--text-secondary); box-shadow: none; }
.scc-btn-cancel:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }

/* ── Карточка контакта внутри сообщения ── */
/* Баббл с карточкой не должен растягиваться на всю ширину ленты: карточка
   сама задаёт ширину, а min-width держит её читаемой у коротких имён. */
.chat-bubble.contact-bubble { min-width: 232px; }

.contact-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 6px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.contact-card:hover { background: rgba(108, 92, 231, 0.14); border-color: rgba(108, 92, 231, 0.45); }
.contact-card--deleted { cursor: default; opacity: 0.7; }
.contact-card--deleted:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--glass-border); }

/* Обложка профиля фоном правой половины карточки. Растворяется к середине:
   маска гасит картинку слева, чтобы имя и @тег читались по обычному фону. */
.contact-card-banner {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 68%;
    pointer-events: none;
    opacity: 0.62;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 38%, rgba(0, 0, 0, 0.7) 68%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 38%, rgba(0, 0, 0, 0.7) 68%, #000 100%);
}
.contact-card-banner > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Затемнение поверх обложки: светлые баннеры иначе съедают белое имя.
   Оно под той же маской, поэтому слева, где картинки уже нет, не темнит. */
.contact-card-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25));
}
/* Содержимое поверх обложки. */
.contact-card > *:not(.contact-card-banner) { position: relative; z-index: 1; }
/* Длинное имя заходит на картинку — подложка тенью держит контраст. */
.contact-card--banner .contact-card-name,
.contact-card--banner .contact-card-tag { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); }
.contact-card--banner .contact-card-go { color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); }

.contact-card-av { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.contact-card-av > img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
.contact-card-av > .contact-card-frame {
    width: 46px; height: 46px;
    border-radius: 0;
    object-fit: contain;
    pointer-events: none;
}

/* min-width: 0 — иначе длинное имя распирает карточку и она вылезает из
   баббла (та же ловушка, что у композера: у flex-элемента min-width: auto). */
.contact-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact-card-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-card-tag {
    font-size: 12.5px;
    font-weight: 600;
    color: #b3a9f2;
    color: color-mix(in srgb, var(--accent-color) 42%, #ffffff);
}
.contact-card-tag--muted { color: var(--text-secondary); font-weight: 500; font-style: italic; }
.contact-card-go { color: var(--text-secondary); font-size: 12px; flex-shrink: 0; }

/* @тег под именем в результатах глобального поиска («Поиск»). */
.search-user-tag { color: var(--accent-color); font-weight: 600; }

/* ── Предпросмотр файла (chat_file_preview.js) ──
   Клик по карточке файла открывает окно, а не уводит на /api/download.
   Раскладка: шапка с именем и кнопками + тело, которое скроллится само;
   на телефоне окно разворачивается на весь экран с учётом «чёлки». */
.fp-overlay {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 8, 12, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.fp-overlay.is-open { display: flex; }
body.fp-open { overflow: hidden; }

.fp-window {
    display: flex;
    flex-direction: column;
    width: min(900px, 100%);
    height: min(78vh, 100%);
    background: var(--bg-element);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--shadow-ambient);
    overflow: hidden;
}

.fp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
}
/* Полоска-«ручка» свайпа вниз — только на телефоне. */
.fp-grip { display: none; }

.fp-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 10px;
    background: rgba(108, 92, 231, 0.2);
    color: var(--accent-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.fp-title { flex: 1; min-width: 0; }
.fp-name {
    font-size: 14.5px; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.fp-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.fp-btn:hover { background: rgba(108, 92, 231, 0.16); border-color: rgba(108, 92, 231, 0.45); }
.fp-btn.fp-close { width: 36px; padding: 0; justify-content: center; }

.fp-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-body);
}

.fp-text {
    margin: 0;
    padding: 16px;
    font: 13px/1.55 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    tab-size: 4;
}
.fp-note {
    padding: 10px 16px 18px;
    font-size: 12px;
    color: var(--text-secondary);
}

.fp-frame { width: 100%; height: 100%; border: none; background: #fff; }

.fp-stage {
    min-height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.fp-img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.fp-media { width: 100%; max-width: 720px; border-radius: 10px; }

.fp-state {
    min-height: 220px;
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    padding: 24px;
    text-align: center;
}
.fp-stub-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: rgba(108, 92, 231, 0.16);
    color: var(--accent-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin-bottom: 4px;
}
.fp-stub-title { color: var(--text-primary); font-weight: 600; font-size: 15px; }
.fp-stub-sub { font-size: 13px; }

@media (max-width: 600px) {
    .fp-overlay { padding: 0; align-items: flex-end; }
    .fp-window {
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: none;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .fp-header { padding: 10px 12px; }
    .fp-grip {
        display: block;
        position: absolute;
        top: 4px; left: 50%;
        transform: translateX(-50%);
        width: 38px; height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.22);
    }
    .fp-btn.fp-download span { display: none; }
    .fp-btn.fp-download { width: 36px; padding: 0; justify-content: center; }
}

/* WebView без backdrop-filter (html.wv-lite) — плотный фон вместо размытия. */
html.wv-lite .fp-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 8, 12, 0.95);
}

/* ── Превью содержимого в карточке файла (как в Телеграме) ──
   Картинка с первой страницей PDF / кадром видео (/api/file-thumb) кладётся
   поверх иконки документа и закрывает её целиком. Класс has-thumb ставит
   onload самой картинки: пока она не загрузилась (или пришла 404 — тогда
   onerror её удаляет), карточка выглядит ровно как раньше. */
.tg-file-icon,
.cp-file-icon,
.fp-icon {
    position: relative;
    overflow: hidden;
}
.tg-file-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Верх страницы информативнее середины: у документов там заголовок. */
    object-position: top center;
    display: block;
}
.tg-file-icon.has-thumb,
.cp-file-icon.has-thumb,
.fp-icon.has-thumb {
    background: rgba(255, 255, 255, 0.06);
}
.tg-file-icon.has-thumb > i,
.cp-file-icon.has-thumb > i,
.fp-icon.has-thumb > i {
    display: none;
}
/* Кружок в списке «Файлы» — картинку режем по той же форме. */
.cp-file-icon.has-thumb { border-radius: 50%; }

/* ═══════════ Настройки: плиточные иконки категорий и группы ═══════════════
   Иконка категории — цветная плитка со стеклянным глифом (как в системных
   настройках телефона). Цвета задаются инлайном парой переменных --ti1/--ti2,
   поэтому новая категория не требует новых CSS-правил.
   ВАЖНО: выше по файлу есть блок «Унификация цвета иконок категорий», который
   красит .s-icon !important в серый — глиф плитки перебивает его тем же
   !important, иначе на цветном фоне он оставался бы серым. */
.s-menu-item .s-icon--tile {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(180deg, var(--ti1, #7f8aa0), var(--ti2, #5b6478));
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.55);
    font-size: 14px;
    flex-shrink: 0;
    align-items: center;
}
.s-menu-list .s-menu-item:not(.danger) .s-icon--tile,
.s-menu-list .s-menu-item:not(.danger) .s-icon--tile i,
.s-menu-list .s-menu-item:not(.danger):hover .s-icon--tile,
.s-menu-list .s-menu-item:not(.danger):hover .s-icon--tile i {
    color: #fff !important;
}

/* Группа категорий — ОДИН общий блок (как в системных настройках телефона):
   пункты внутри лежат вплотную и разделены тонкой линией, а между группами
   стоит отступ. Отдельных карточек у пунктов больше нет — фон и скругление
   принадлежат группе. Колонка уже, чем раньше (боковой отступ 24px). */
.s-menu-list.s-menu-group {
    padding: 0;
    margin: 0 24px 14px 24px;
    gap: 0;
    /* Подложка блока — ровный цвет из палитры темы: --bg-element, тот самый
       «элемент поверх панели». Фон раздела «Настройки» = --bg-panel, так что
       блок ложится на него ровно на одну ступень выше, без своих оттенков и
       без градиентов. */
    background: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}
/* Последняя группа («Выйти из аккаунта») — единственный последний ребёнок
   #settingsMain; :last-of-type здесь не годится, тип элемента у всех div. */
.s-menu-list.s-menu-group:last-child { margin-bottom: 20px; }

/* Пункт внутри общего блока: без собственного фона, рамки и скругления —
   иначе поверх подложки группы видны «карточки в карточке». Селектор из двух
   классов перебивает .s-menu-item--uniform без !important. */
.s-menu-group .s-menu-item,
.s-menu-group .s-menu-item--uniform {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 13px 14px;
}
/* Разделитель между пунктами: линия по центру блока, к обоим краям плавно
   растворяется в фоне (градиент от прозрачного к прозрачному). Рисуем
   псевдоэлементом, чтобы не трогать box-модель. */
.s-menu-group .s-menu-item + .s-menu-item::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0) 100%);
}
/* Сдвиг строки при наведении внутри общего блока не годится — пункт уезжал
   бы из-под своей же подложки. */
.s-menu-group .s-menu-item:hover,
.s-menu-group .s-menu-item--uniform:hover {
    background: rgba(108, 92, 231, 0.10);
    border-color: transparent;
    transform: none;
}
.s-menu-group .s-menu-item.danger:hover { background: rgba(255, 71, 87, 0.10); }

/* ── Категория «Изменить аватар/баннер» ── */
/* overflow: hidden здесь СНЯТ намеренно (не возвращать): аватар с рамкой
   свисает ниже баннера, и обрезка съедала его нижнюю половину. Скругление
   переехало на сам баннер — обрезать превью целиком незачем. */
.ab-preview {
    position: relative;
    overflow: visible;
    background: transparent;
    margin-bottom: 58px;
}
.ab-preview-banner {
    height: 120px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-color: var(--accent-color);
}
.ab-preview-avatar {
    position: absolute;
    left: 50%;
    top: 76px;
    transform: translateX(-50%);
    width: 88px;
    height: 88px;
}
/* Кольцо вокруг аватара — цвета подложки модалки настроек (#1d1d22),
   иначе на ней виден чужой тёмный ободок. */
.ab-preview-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #1d1d22;
    box-sizing: border-box;
    background: var(--bg-element);
}
.ab-preview-avatar .ab-preview-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 115%;
    height: 115%;
    border: none;
    border-radius: 0;
    object-fit: contain;
    pointer-events: none;
    background: none;
}
/* Кнопки собраны в один блок с разделителями — так же, как группы категорий
   в списке настроек. */
.ab-actions {
    display: flex;
    flex-direction: column;
    background: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}
.ab-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}
.ab-btn + .ab-btn::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0) 100%);
}
.ab-btn:hover {
    background: rgba(108, 92, 231, 0.10);
}
.ab-btn-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--ti1, #7f8aa0), var(--ti2, #5b6478));
}
.ab-btn-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ab-btn-title { font-size: 14.5px; font-weight: 600; }
.ab-btn-sub { font-size: 12px; color: var(--text-secondary); }
.ab-btn-arrow { font-size: 12px; color: #555; flex-shrink: 0; }

/* ── Категория «Папки с чатами» ── */
.fld-hero {
    text-align: center;
    padding: 6px 10px 18px;
}
.fld-hero-ico {
    font-size: 40px;
    color: #6cc9f0;
    margin-bottom: 12px;
}
.fld-hero-text {
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.45;
    margin-bottom: 16px;
}
.fld-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #6c5ce7, #5a4bd1);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.fld-new-btn:hover { filter: brightness(1.1); }
.fld-section {
    background: var(--bg-element);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px 14px;
}
.fld-section-title {
    color: #9b8cff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}
.fld-list { display: flex; flex-direction: column; }
/* Разделители в списках — та же растворяющаяся к краям линия, что и между
   категориями (border-top не годится: он ровный по всей ширине). */
.fld-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}
.fld-row + .fld-row::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0) 100%);
}
.fld-row-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #6cc9f0, #2a9bd8);
}
.fld-row-meta { flex: 1; min-width: 0; }
.fld-row-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fld-row-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.fld-row-btns { display: flex; gap: 6px; flex-shrink: 0; }
.fld-row-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: #cfcfd8;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s, color 0.15s;
}
.fld-row-btn:hover { background: rgba(108, 92, 231, 0.25); color: #fff; }
.fld-row-btn.danger:hover { background: rgba(255, 71, 87, 0.25); color: #ff8b95; }
.fld-empty { color: var(--text-secondary); font-size: 13px; padding: 10px 0; text-align: center; }

/* ── Категория «Звонки» (история звонков) ── */
.ch-list { display: flex; flex-direction: column; }
.ch-loading, .ch-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 34px 16px;
    font-size: 13.5px;
}
.ch-empty i { display: block; font-size: 34px; color: #4a4a55; margin-bottom: 12px; }
.ch-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.15s;
}
.ch-row + .ch-row::before {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0) 100%);
}
.ch-row:hover { background: rgba(108, 92, 231, 0.08); }
.ch-avatar-wrap { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.ch-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-element);
}
.ch-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 118%;
    height: 118%;
    object-fit: contain;
    pointer-events: none;
}
.ch-meta { flex: 1; min-width: 0; }
.ch-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ch-name.missed { color: #ff6b78; }
.ch-sub {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ch-dir { font-size: 11px; }
.ch-dir.out { color: #5ee5a5; }
.ch-dir.in { color: #6ea8ff; }
.ch-dir.missed { color: #ff6b78; }
.ch-right { text-align: right; flex-shrink: 0; }
.ch-time { font-size: 12px; color: var(--text-secondary); }
.ch-dur { font-size: 12px; color: #8b8b96; margin-top: 3px; }
.ch-more {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 11px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #cfcfd8;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.ch-more:hover { background: rgba(108, 92, 231, 0.18); color: #fff; }

/* ========================================================================== */
/* Сменные пузыри сообщений. Весь новый контур намеренно изолирован префиксами
   sok-msgskin / sok-bubble, чтобы ни один селектор не менял default-пузыри. */
/* ========================================================================== */

.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin,
.sok-bubble-live-preview .chat-bubble.sok-msgskin {
    --sok-skin-ink: #241d1b;
    --sok-skin-muted: rgba(36, 29, 27, 0.62);
    --sok-skin-tail-mine: #d9ad6e;
    --sok-skin-tail-theirs: #d9ad6e;
    color: var(--sok-skin-ink) !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 12px rgba(18, 13, 23, 0.16) !important;
    min-height: 0;
    isolation: isolate;
    overflow: visible !important;
    margin-top: 0;
}

/* У декоративных вариантов форма и палитра одинаковы у автора и получателя;
   Telegram-tail и групповые «срезанные» углы принадлежат только default CSS. */
.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin::after {
    display: none !important;
}

/* Персонаж — самостоятельный слой поверх пузыря, а не часть его фоновой
   заливки. Отрицательные координаты намеренно выпускают рисунок наружу. */
.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin::before,
.sok-bubble-live-preview .chat-bubble.sok-msgskin::before {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
}
.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin > *,
.sok-bubble-live-preview .chat-bubble.sok-msgskin > * {
    z-index: 2;
}

.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin--capybara,
.sok-bubble-live-preview .chat-bubble.sok-msgskin--capybara {
    --sok-skin-ink: #17213b;
    --sok-skin-muted: rgba(37, 51, 87, 0.58);
    /* Градиент входящего сообщения ниже зеркалится вместе с композицией,
       поэтому с обеих сторон хвост примыкает к одному и тому же конечному
       цвету без заметного шва. */
    --sok-skin-tail-mine: #d2def8;
    --sok-skin-tail-theirs: #d2def8;
    background-color: #dce5fb !important;
    background-image: linear-gradient(145deg, #e9efff 0%, #dce5fb 62%, #d2def8 100%) !important;
    padding: 6px 10px 8px 12px !important;
}
.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin--capybara::before,
.sok-bubble-live-preview .chat-bubble.sok-msgskin--capybara::before {
    width: 48px;
    height: 27px;
    left: -9px;
    right: auto;
    bottom: -4px;
    z-index: 3;
    background-image: url('/static/assets/message-bubbles/sleepy-mouse-v2.png');
    background-size: contain;
    background-position: left bottom;
    transform: none;
}
.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin--capybara::after,
.sok-bubble-live-preview .chat-bubble.sok-msgskin--capybara::after {
    content: "";
    display: block !important;
    position: absolute;
    z-index: 3 !important;
    width: 37px !important;
    height: 27px !important;
    left: auto !important;
    right: -8px !important;
    top: -9px !important;
    bottom: auto !important;
    pointer-events: none;
    background-color: transparent !important;
    background-image: url('/static/assets/message-bubbles/tiny-shark-v2.png') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: right top !important;
    -webkit-mask: none !important;
            mask: none !important;
    transform: none !important;
}
.chat-card.theirs .chat-bubble.sok-msgskin--capybara::after {
    transform: scaleX(-1) !important;
}
.chat-card.theirs .chat-bubble.sok-msgskin--capybara {
    background-image: linear-gradient(215deg, #e9efff 0%, #dce5fb 62%, #d2def8 100%) !important;
}

.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin--blossom,
.sok-bubble-live-preview .chat-bubble.sok-msgskin--blossom {
    --sok-skin-tail-mine: #e49bb6;
    --sok-skin-tail-theirs: #e49bb6;
    background-color: #efb2c6 !important;
    background-image: linear-gradient(145deg, #f8cede 0%, #efb0c6 58%, #e49bb6 100%) !important;
    padding: 6px 10px 8px 12px !important;
}
.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin--blossom::before,
.sok-bubble-live-preview .chat-bubble.sok-msgskin--blossom::before {
    width: 31px;
    height: 31px;
    left: -7px;
    right: auto;
    top: -12px;
    bottom: auto;
    z-index: 3;
    background-image: url('/static/assets/message-bubbles/blossom.png');
    background-size: contain;
    background-position: center;
    /* Второй оттенок того же рисунка: мягкий сиренево-голубой цвет вместо
       дублирования исходной розовой палитры. */
    filter: hue-rotate(245deg) saturate(0.72) brightness(1.08);
    transform: rotate(-7deg);
}
.chat-card.theirs .chat-bubble.sok-msgskin--blossom::before {
    left: auto;
    right: -7px;
    transform: scaleX(-1) rotate(-7deg);
}
.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin--blossom::after,
.sok-bubble-live-preview .chat-bubble.sok-msgskin--blossom::after {
    content: "";
    display: block !important;
    position: absolute;
    z-index: 3 !important;
    width: 24px !important;
    height: 24px !important;
    left: auto !important;
    right: -7px !important;
    top: auto !important;
    bottom: -5px !important;
    pointer-events: none;
    background-color: transparent !important;
    background-image: url('/static/assets/message-bubbles/blossom.png') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    -webkit-mask: none !important;
            mask: none !important;
    transform: none !important;
}
.chat-card.theirs .chat-bubble.sok-msgskin--blossom::after {
    left: -7px !important;
    right: auto !important;
    transform: scaleX(-1) !important;
}
.chat-card.theirs .chat-bubble.sok-msgskin--blossom {
    background-image: linear-gradient(215deg, #f8cede 0%, #efb0c6 58%, #e49bb6 100%) !important;
}

.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin--duckpond,
.sok-bubble-live-preview .chat-bubble.sok-msgskin--duckpond {
    --sok-skin-tail-mine: #e9d954;
    --sok-skin-tail-theirs: #e9d954;
    background-color: #f4e66d !important;
    background-image: linear-gradient(145deg, #fff59d 0%, #f4e66d 62%, #e9d954 100%) !important;
    /* Текст и метаданные используют ровно геометрию стандартного пузыря.
       Персонажи находятся снаружи и больше не требуют отдельного отступа. */
    padding: 6px 10px 8px 12px !important;
}
.chat-card:is(.mine, .theirs) .chat-bubble.sok-msgskin--duckpond::before,
.sok-bubble-live-preview .chat-bubble.sok-msgskin--duckpond::before {
    width: 39px;
    height: 29px;
    left: -9px;
    right: auto;
    top: auto;
    /* Нижние лапки заходят на пузырь на 12px: герои визуально сидят на нём. */
    bottom: calc(100% - 12px);
    background-image: url('/static/assets/message-bubbles/duckpond-characters-v2.png');
    background-size: contain;
    background-position: left bottom;
    transform: rotate(-18deg);
}
.chat-card.theirs .chat-bubble.sok-msgskin--duckpond {
    background-image: linear-gradient(215deg, #fff59d 0%, #f4e66d 62%, #e9d954 100%) !important;
}
.chat-card.theirs .chat-bubble.sok-msgskin--duckpond::before {
    left: auto;
    right: -9px;
    background-position: right bottom;
    transform: scaleX(-1) rotate(-18deg);
}

/* Хвостик декоративных пузырей — тот же SVG-контур, что у стандартных
   сообщений, но отдельным DOM-слоем: персонажи и цветы могут независимо
   занимать ::before/::after. Цвет задаётся палитрой конкретного стиля. */
.chat-bubble > .sok-msgskin-tail,
.sok-bubble-live-preview .sok-default-preview-tail {
    position: absolute;
    bottom: 0;
    z-index: -1 !important;
    width: 17px;
    height: 19px;
    pointer-events: none;
    background: var(--sok-skin-tail-mine, var(--bg-element));
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'><path d='M0 0 H14 C14 18 20 30 30 34 C16 34 2 28 0 14 Z' fill='black'/></svg>") no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'><path d='M0 0 H14 C14 18 20 30 30 34 C16 34 2 28 0 14 Z' fill='black'/></svg>") no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.chat-card .chat-bubble > .sok-msgskin-tail { display: none; }
.chat-card.mine:is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble.sok-msgskin > .sok-msgskin-tail {
    display: block;
    right: -9px;
}
.chat-card.theirs:is([data-group="group-last"], [data-group=""], :not([data-group])) .chat-bubble.sok-msgskin > .sok-msgskin-tail {
    display: block;
    left: -9px;
    background: var(--sok-skin-tail-theirs, var(--bg-element));
    transform: scaleX(-1);
}
.sok-bubble-live-preview .chat-bubble > .sok-msgskin-tail,
.sok-bubble-live-preview .chat-bubble > .sok-default-preview-tail {
    display: block;
    right: -9px;
}
.sok-bubble-live-preview .sok-default-preview-tail {
    background: var(--bg-element);
    z-index: 0 !important;
}

.chat-card .chat-bubble.sok-msgskin .msg-text-content,
.chat-card .chat-bubble.sok-msgskin .msg-author,
.chat-card .chat-bubble.sok-msgskin .forward-tag,
.chat-card .chat-bubble.sok-msgskin .tg-file-name,
.chat-card .chat-bubble.sok-msgskin .tg-audio-name,
.chat-card .chat-bubble.sok-msgskin .poll-title,
.chat-card .chat-bubble.sok-msgskin .poll-option-text,
.sok-bubble-live-preview .chat-bubble.sok-msgskin .msg-text-content {
    color: var(--sok-skin-ink) !important;
}
.chat-card .chat-bubble.sok-msgskin :is(.msg-meta, .msg-time, .tg-voice-time, .tg-file-size, .tg-audio-size, small),
.sok-bubble-live-preview .chat-bubble.sok-msgskin :is(.msg-meta, .msg-time) {
    color: var(--sok-skin-muted) !important;
}
.chat-card .chat-bubble.sok-msgskin :is(.msg-link, .mention-link) {
    color: #694aa0 !important;
    text-decoration-color: rgba(105, 74, 160, 0.5) !important;
}
.chat-card .chat-bubble.sok-msgskin :is(.reply-quote, .link-preview-card, .tg-file-msg, .tg-voice-msg) {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(69, 46, 37, 0.18) !important;
    color: var(--sok-skin-ink) !important;
}
/* Ответ является частью пузыря отвечающего пользователя: никнейм автора
   цитаты, системный текст, иконки и любые вложенные подписи используют тот же
   контрастный цвет, что и основной текст этого стиля. Это правило намеренно
   не применяется к стандартным пузырям. */
.chat-card .chat-bubble.sok-msgskin .reply-quote,
.chat-card .chat-bubble.sok-msgskin .reply-quote * {
    color: var(--sok-skin-ink) !important;
    -webkit-text-fill-color: var(--sok-skin-ink) !important;
}
.chat-card .chat-bubble.sok-msgskin :is(.tg-voice-progress-bg, .tg-audio-bar) {
    background: rgba(51, 39, 31, 0.22) !important;
}
.chat-card .chat-bubble.sok-msgskin :is(.tg-voice-progress, .tg-audio-bar-fill) {
    background: #64478f !important;
}

/* Раздел магазина / инвентаря. */
.st2-tabs {
    overflow-x: auto;
    scrollbar-width: none;
}
.st2-tabs::-webkit-scrollbar { display: none; }
.st2-tabs .st2-tab { min-width: 82px; }
.sok-bubble-section-head { margin-bottom: 14px; }
.sok-bubble-shop-grid,
.sok-bubble-inventory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.sok-bubble-shop-card,
.sok-bubble-inventory-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
}
.sok-bubble-live-preview {
    min-height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 18px 14px;
    overflow: visible;
}
.sok-bubble-live-preview .chat-bubble {
    min-width: 155px;
    max-width: 100%;
    pointer-events: none;
}
.sok-bubble-live-preview .msg-meta.block-meta {
    position: static !important;
    align-self: flex-end;
    margin: 2px 0 -3px 8px;
}
.sok-bubble-shop-name {
    margin-top: 7px;
    color: #fff;
    font-size: 15px;
    font-weight: 750;
}
.sok-bubble-shop-desc {
    min-height: 34px;
    margin: 4px 0 11px;
    color: #9293a0;
    font-size: 12.5px;
    line-height: 1.35;
}
.sok-bubble-buy {
    width: 100%;
    height: 38px;
    border: 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #7665e8, #5a4bd1);
    color: #fff;
    font: 700 13.5px/1 inherit;
    cursor: pointer;
}
.sok-bubble-buy img { width: 15px; height: 15px; }
.sok-bubble-buy:disabled { cursor: default; }
.sok-bubble-buy.cannot-buy { opacity: 0.46; }
.sok-bubble-buy.is-owned { background: rgba(67, 181, 129, 0.14); color: #68d5a2; }
.sok-bubble-shop-card {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}
.sok-bubble-shop-card.sok-bubble-purchased-exit {
    transform: scale(0.9);
    opacity: 0;
    pointer-events: none;
}
.sok-bubble-shop-empty .fa-check-circle { color: #43b581; }

/* Окно выбора из меню долгого нажатия. */
.sok-bubble-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 100030;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
    background: rgba(2, 2, 8, 0.72);
    backdrop-filter: blur(10px);
}
.sok-bubble-picker-overlay.open { display: flex; animation: fadeInModal 0.16s ease; }
.sok-bubble-picker {
    width: min(580px, 100%);
    max-height: min(720px, 88dvh);
    overflow: auto;
    padding: 18px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 21px;
    background: #13131c;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}
.sok-bubble-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
}
.sok-bubble-picker-title { color: #fff; font-size: 19px; font-weight: 800; }
.sok-bubble-picker-sub { color: #898a96; font-size: 12.5px; margin-top: 4px; }
.sok-bubble-picker-close {
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: #aaaab5;
    cursor: pointer;
}
.sok-bubble-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.sok-bubble-choice {
    position: relative;
    min-width: 0;
    padding: 8px 10px 11px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.035);
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.sok-bubble-choice:hover { transform: translateY(-1px); background: rgba(255,255,255,0.06); }
.sok-bubble-choice.active { border-color: #7d6ef0; background: rgba(108, 92, 231, 0.12); }
.sok-bubble-choice-name { display: block; text-align: left; font-size: 13.5px; font-weight: 700; }
.sok-bubble-choice-check {
    position: absolute;
    right: 9px;
    top: 9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    background: #6c5ce7;
    color: #fff;
    font-size: 10px;
}
.sok-bubble-choice.active .sok-bubble-choice-check { display: flex; }

@media (max-width: 640px) {
    .sok-bubble-shop-grid,
    .sok-bubble-inventory-grid { grid-template-columns: 1fr; }
    .sok-bubble-picker-overlay { align-items: flex-end; padding: 0; }
    .sok-bubble-picker {
        width: 100%;
        max-height: 78dvh;
        border-radius: 22px 22px 0 0;
        padding: 17px 14px calc(17px + env(safe-area-inset-bottom));
    }
    .sok-bubble-picker-grid { grid-template-columns: 1fr; }
    .sok-bubble-choice .sok-bubble-live-preview { min-height: 72px; }
}