/* ========================================================= */
    /* [01] THEME TOKENS: Glass / Cyber-Fire */
    /* ========================================================= */
    :root{
      --bg: #0b0f17;

      --panel: rgba(255,255,255,0.08);
      --panel-strong: rgba(255,255,255,0.12);
      --stroke: rgba(255,255,255,0.14);

      --text: rgba(255,255,255,0.92);
      --muted: rgba(255,255,255,0.65);

      --shadow: 0 18px 45px rgba(0,0,0,0.35);
      --radius: 16px;

      /* 🔥 огненный акцент */
      --fire1:#ff6a00;
      --fire2:#ffb300;
      --fire3:#ff2d55;
    }

    /* ========================================================= */
    /* [02] BASE / RESET */
    /* ========================================================= */
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    body {
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-sizing: border-box;
      padding: 10px;

      background:
        radial-gradient(900px 500px at 20% 0%, rgba(255,106,0,0.18), transparent 60%),
        radial-gradient(700px 450px at 80% 10%, rgba(255,45,85,0.16), transparent 55%),
        radial-gradient(900px 600px at 50% 100%, rgba(255,179,0,0.10), transparent 60%),
        var(--bg);

      color: var(--text);
    }

    /* ========================================================= */
    /* [03] GLOBAL LAYOUT */
    /* ========================================================= */

    /* Glass-panels общий стиль */
    #top-bar,
    #all-users,
    #messages {
      background: var(--panel);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* Контейнер с чатом и колонками пользователей */
    #chat-container {
      flex: 1;
      display: none;              
      flex-direction: row;
      gap: 20px;
      align-items: stretch;
      min-height: 0;
    }

    /* Системные уведомления */
    #notifications{
      margin-bottom: 10px;        /* 🟩 было inline-style */
      min-height: 18px;
    }

    /* ========================================================= */
    /* [04] TOP BAR */
    /* ========================================================= */
    
    /* Верхний бар с заголовком и кнопкой */
    #top-bar {
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;

      padding: 10px 12px;
      margin-bottom: 1px;

      border-radius: 12px;
      overflow: hidden;
    }

    /* Левый блок (пока пустой) */
    #top-bar .top-left { justify-self: start; }
    
    /* Центральный блок с заголовком */
    #top-bar h2 {
      margin: 0;
      justify-self: center;
      text-align: center;

      font-size: 26px;
      font-weight: 900;
      letter-spacing: 1px;

      background: linear-gradient(90deg, var(--fire1), var(--fire2), var(--fire3));
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      text-shadow:
        0 0 10px rgba(255,120,0,0.35),
        0 0 18px rgba(255,45,85,0.22);
    }

    /* Правый блок с кнопкой */
    #top-bar .top-right {
      justify-self: end;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    /* лёгкая огненная линия снизу */
    #top-bar::after {
      content:"";
      position:absolute;
      left: 12px; right: 12px; bottom: 6px;
      height: 2px;
      background: linear-gradient(90deg,
        rgba(255,120,0,0.05),
        rgba(255,140,60,0.55),
        rgba(255,120,0,0.05)
      );
      opacity: 0.97;
      z-index: 1;
    }

    /* Кнопка "Профиль" */
    #profileBtn{
      padding: 8px 12px;
      border-radius: 14px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,0.10);
      color: var(--text);
      cursor: pointer;
      transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;

      display: none; /* скрыто на экране авторизации */
    }

    #profileBtn:hover{
      background: rgba(255,255,255,0.16);
      box-shadow: 0 0 18px rgba(255,120,0,0.18);
      transform: translateY(-1px);
    }

    #profileBtn:active{ transform: translateY(0px); }

    /* ========================================================= */
    /* [05] USERS PANEL */
    /* ========================================================= */
      #all-users {
        width: 220px;
        max-width: 28%;
        padding: 10px;
        overflow-y: auto;
        box-sizing: border-box;
      }

      #all-users h3 {
        margin-top: 0;
        font-size: 16px;
        text-align: center;
      }

      .user-item {
        display: flex;
        align-items: center;
        gap: 10px;

        border-radius: 10px;
        padding: 8px 10px;
        border-bottom: none;
        cursor: pointer;
      }

      .user-list-avatar {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        border-radius: 50%;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at 30% 25%, rgba(255,190,120,0.38), rgba(255,120,0,0.12) 48%, rgba(0,0,0,0.32));
        border: 1px solid rgba(255, 190, 120, 0.18);
        color: rgba(255,255,255,0.9);
        font-size: 13px;
        font-weight: 900;
      }

      .user-list-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .user-item:hover {
        background: rgba(255,140,60,0.10);
        box-shadow: 0 0 12px rgba(255,120,0,0.10);
      }

      .user-status-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex: 0 0 10px;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset;
      }

      .user-status-dot.online {
        background: #2ecc71;
        box-shadow:
          0 0 10px rgba(46, 204, 113, 0.45),
          0 0 0 1px rgba(255,255,255,0.08) inset;
      }

      .user-status-dot.offline {
        background: rgba(255,255,255,0.35);
      }

      .user-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

    /* ========================================================= */
    /* [06] AUTH SCREEN */
    /* ========================================================= */
    
    /* Центрируем auth по экрану */
    #auth {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Стеклянная панель auth */
    .auth-card {
      width: min(420px, 92vw);
      padding: 18px 18px 16px;
      border-radius: 18px;

      background: rgba(18, 18, 24, 0.62);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      border: 1px solid rgba(255, 160, 70, 0.22);
      box-shadow:
        0 20px 60px rgba(0,0,0,0.55),
        0 0 26px rgba(255, 140, 60, 0.12);
    }

    /* GIF на экране авторизации */
    #auth-gif {
      display: flex;
      justify-content: center;
      margin: 10px 0 15px;
    }

    #auth-gif img {
      max-width: 260px;
      width: 100%;
      height: auto;
      border: 2px solid #ddd;
      border-radius: 30%;
    }

    /* Подписи полей в форме авторизации */
    #auth p {
      margin: 10px auto 6px;
      width: 80%;
      font-size: 14px;
      opacity: 0.85;
      color: rgba(255,255,255,0.75);
    }

    /* Поля ввода в форме авторизации */
    #auth input {
      width: 80%;
      padding: 10px 12px;
      border-radius: 12px;

      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.92);

      outline: none;
      margin: 0 auto;
      display: block;
      /* border-box — иначе width:100% у input внутри .auth-password-wrap
         (тот же box) считается только от content-box, и добавленный туда
         padding-right под иконку-глаз раздувает реальную ширину input'а
         за пределы обёртки (см. коммит). Ставим здесь, а не только в
         .auth-password-wrap input, чтобы все auth-поля остались
         одинаковой фактической ширины — с паролем и без него. */
      box-sizing: border-box;
    }

    /* подсветка фокуса */
    #auth input:focus {
      border-color: rgba(255, 160, 70, 0.35);
      box-shadow: 0 0 0 3px rgba(255, 140, 60, 0.12);
    }

    /* Автозаполнение браузера (сохранённые логин/пароль) принудительно
       красит фон поля в почти-белый (Chrome: rgb(232,240,254)) через
       внутренний UA-стиль, который обычный background/background-color
       не может перебить — это отдельный, более сильный механизм, а не
       вопрос специфичности обычных правил. Стандартный обход — залить
       поле изнутри через box-shadow inset (это отдельный визуальный слой
       поверх фона, к нему автозаполнение не применяется), достаточно
       большим, чтобы перекрыть всё поле целиком.
       rgb(31, 32, 37) — не догадка и не текущее значение background
       (rgba(255,255,255,0.06) само по себе почти прозрачное и поверх
       навязанного белого фона автозаполнения останется почти белым же —
       проверено); это реальный итоговый цвет, который сейчас рендерится
       у обычного (не автозаполненного) поля — замерено напрямую по
       пикселям скриншота, чтобы совпадало один в один. */
    #auth input:-webkit-autofill,
    #auth input:-webkit-autofill:hover,
    #auth input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 1000px rgb(31, 32, 37) inset;
      -webkit-text-fill-color: rgba(255, 255, 255, 0.92);
      transition: background-color 5000s ease-in-out 0s;
    }

    /* Обёртка для показать/скрыть пароль: даёт локальный positioning
       context под абсолютно позиционированную кнопку-глаз. Сама берёт на
       себя width/margin, которые обычно задаёт #auth input — сам input
       внутри становится 100% обёртки, визуально занимая то же место. */
    .auth-password-wrap {
      position: relative;
      width: 80%;
      margin: 0 auto;
    }

    /* #auth input (id-селектор) иначе перебивает эти правила по
       специфичности — тот же баг, что уже был с .auth-field-status,
       поэтому здесь тоже нужен префикс #auth. */
    #auth .auth-password-wrap input {
      width: 100%;
      margin: 0;
      padding-right: 40px;
    }

    .auth-password-toggle {
      position: absolute;
      top: 50%;
      right: 4px;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      color: rgba(255,255,255,0.5);
      transition: color .15s ease, background .15s ease;
    }

    .auth-password-toggle:hover {
      color: rgba(255, 180, 110, 0.9);
      background: rgba(255,255,255,0.06);
    }

    .auth-password-toggle svg {
      width: 18px;
      height: 18px;
    }

    .auth-password-toggle .icon-eye-off {
      display: none;
    }

    .auth-password-toggle.is-visible .icon-eye {
      display: none;
    }

    .auth-password-toggle.is-visible .icon-eye-off {
      display: block;
    }

    /* Кнопка "Войти" — базовый вид */
    #loginBtn {
      width: 100%;
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255, 160, 70, 0.25);

      background: rgba(255, 140, 60, 0.14);
      color: rgba(255,255,255,0.95);

      font-size: 15px;
      font-weight: 800;
      cursor: pointer;

      transition: transform 0.12s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

    /* Огонь при наведении на кнопку*/
    #loginBtn:hover {
      background-image: url("gif/fire_02.gif");
      background-size: cover;
      background-position: center;

      color: white;
      box-shadow: 0 0 24px rgba(255, 120, 0, 0.9);
      transform: scale(0.97);
    }

    /* кнопка "регистрация" */
    #registerBtn {
      width: 100%;
      margin-top: 10px;
      padding: 11px 14px;
      border-radius: 14px;

      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.85);

      font-size: 14px;
      font-weight: 700;
      cursor: pointer;

      transition: background 0.25s ease, transform 0.12s ease;
    }

    #registerBtn:hover {
      background: rgba(255,255,255,0.09);
      transform: translateY(-1px);
    }

    /* ---- Многошаговая email-verification форма: шаги 2-5 ---- */
    /* .auth-step[hidden] уже работает через встроенный UA-стиль [hidden],
       отдельная CSS-декларация тут не нужна. */

    /* Кнопки "вперёд" (Далее / Подтвердить / Отправить код / Сбросить пароль) —
       тот же primary-стиль, что и #loginBtn, но без анимированного fire-gif
       на hover: этот эффект — акцент именно для главной кнопки "Войти" на
       экране, а не общий паттерн для любой primary-кнопки. */
    #requestRegisterCodeBtn,
    #confirmRegisterCodeBtn,
    #requestResetCodeBtn,
    #confirmResetPasswordBtn {
      width: 100%;
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255, 160, 70, 0.25);

      background: rgba(255, 140, 60, 0.14);
      color: rgba(255,255,255,0.95);

      font-size: 15px;
      font-weight: 800;
      cursor: pointer;

      transition: transform 0.12s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

    #requestRegisterCodeBtn:hover,
    #confirmRegisterCodeBtn:hover,
    #requestResetCodeBtn:hover,
    #confirmResetPasswordBtn:hover {
      background: rgba(255, 140, 60, 0.22);
      box-shadow: 0 0 18px rgba(255, 120, 0, 0.35);
      transform: scale(0.98);
    }

    /* Кнопки "Отправить код повторно" — вторичное действие, как #registerBtn */
    #resendRegisterCodeBtn,
    #resendResetCodeBtn {
      width: 100%;
      margin-top: 10px;
      padding: 11px 14px;
      border-radius: 14px;

      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.85);

      font-size: 14px;
      font-weight: 700;
      cursor: pointer;

      transition: background 0.25s ease, transform 0.12s ease, opacity 0.2s ease;
    }

    #resendRegisterCodeBtn:hover:not(:disabled),
    #resendResetCodeBtn:hover:not(:disabled) {
      background: rgba(255,255,255,0.09);
      transform: translateY(-1px);
    }

    /* Визуально приглушаем во время обратного отсчёта. button.disabled
       выставляется в JS настоящим DOM-свойством (startResendCountdown),
       так что :disabled матчится напрямую, без отдельной синхронизации. */
    #resendRegisterCodeBtn:disabled,
    #resendResetCodeBtn:disabled {
      opacity: 0.55;
      cursor: default;
      transform: none;
    }

    /* Второстепенные ссылки шагов (Забыли пароль? / Назад) — тот же
       приглушённый идиом, что и .profile-avatar-delete-link, но с огненным
       акцентом на hover вместо красного: там красный — это "разрушительное
       действие", здесь ссылки просто навигационные. */
    .auth-link {
      display: block;
      margin-top: 12px;
      text-align: center;
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      text-decoration: underline;
      text-decoration-color: transparent;
      transition: color .15s ease, text-decoration-color .15s ease;
    }

    .auth-link:hover {
      color: rgba(255, 180, 110, 0.9);
      text-decoration-color: rgba(255, 180, 110, 0.55);
    }

    /* Живой статус доступности логина при регистрации. По умолчанию —
       красный (используется и для "занят", и для ошибки формата), зелёный —
       только когда JS явно подтвердил доступность (.auth-field-status--ok).
       Цвета — те же литералы, что и в showNotification(), чтобы это читалось
       как тот же язык успеха/ошибки, а не третья независимая цветовая схема.

       ВАЖНО про специфичность: #auth p / #auth input (ID-селекторы) всегда
       перебивают чистые class-селекторы вроде .auth-field-status, независимо
       от порядка объявления в файле. Без префикса #auth здесь margin/
       font-size/color молча откатывались на значения #auth p — из-за этого
       зелёный/красный статус никогда не отображался (всегда серый текст
       лейбла), а margin-фикс из коммита c1d06ee не имел эффекта вовсе. */
    #auth .auth-field-status {
      /* было -2px: пуллап к полю логина, из-за которого текст статуса
         (не пустое состояние) реально накладывался на нижнюю границу
         #registerUsername на -2px. +2px даёт четкий зазор вместо наложения,
         не трогая min-height — резервирование места под пустое состояние
         не зависит от margin-top. */
      margin: 2px auto 0;
      width: 80%;
      font-size: 12px;
      text-align: center;
      color: rgb(226, 15, 15);
      opacity: 1;
      min-height: 14px; /* держим место под сообщение, чтобы оно не сдвигало layout при появлении */
    }

    #auth .auth-field-status--ok {
      color: #1a7f37;
    }

    /* Группировка полей на шаге 1 регистрации: email — отдельно (контактные
       данные), логин+пароль — вместе (данные для входа). Между группами —
       заметный, но небольшой отступ; внутри группы поля идут вплотную,
       без отдельного зазора. Тут конфликта специфичности нет — .auth-field-group
       таргетит <div>, а не <p>/<input>, так что #auth p/input тут ни при чём. */
    .auth-field-group + .auth-field-group {
      margin-top: 36px;
    }

    /* Логин->Пароль внутри группы 2 должны идти теснее, чем между группами:
       14px min-height резерва под статус доступности логина + margin-top
       лейбла "Пароль:" в сумме давали те же ~22px, что и межгрупповой отступ.
       Сужаем именно этот margin-top (только для лейбла сразу после статуса,
       других <p> не касается) — с префиксом #auth, чтобы реально перебить
       #auth p (см. комментарий про специфичность выше). 0 — статус-блок и
       лейбл "Пароль:" просто соприкасаются краями, без доп. зазора и без
       отрицательного пуллап (тестировали 4/2/0/-2/-4px, см. коммит). */
    #auth .auth-field-status + p {
      margin-top: 0;
    }

    /* Поля 6-значного кода — лёгкий OTP-акцент без полноценных сегментов:
       крупнее, по центру, вразрядку. Полноценный сегментный ввод (отдельные
       ячейки на цифру, авто-переход между ними) добавил бы отдельную
       JS-логику без прецедента в проекте — не оправдано для этого масштаба. */
    #registerCode,
    #resetCode {
      text-align: center;
      font-size: 26px;
      font-weight: 700;
      letter-spacing: 8px;
      font-variant-numeric: tabular-nums;
    }

    /* padding-right (компенсация letter-spacing после последнего символа,
       чтобы текст не уезжал влево от центра) отдельно — #auth input задаёт
       padding через шорткод с более высокой специфичностью (id+type против
       голого id), поэтому нужен #auth-префикс, чтобы это реально победило. */
    #auth #registerCode,
    #auth #resetCode {
      padding-right: 8px;
    }

    /* ========================================================= */
    /* [07] CHAT LAYOUT */
    /* ========================================================= */
    
    /* основной чат */
    #chat {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
    }

    /* окно сообщений */
    #messages {
      padding: 12px;
      margin-bottom: 6px;
      overflow-y: auto;

      display: flex;
      flex-direction: column;
    }

    /* Контекст для плавающей кнопки возврата вниз */
    #chat {
      position: relative;
    }

    /* Кнопка "вниз к новым сообщениям" */
    #scrollToBottomBtn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 98px;
      z-index: 5;

      width: 62px;
      height: 62px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.14);

      background: rgba(255,255,255,0.10);
      color: rgba(255,255,255,0.94);

      display: none;
      align-items: center;
      justify-content: center;

      font-size: 20px;
      line-height: 1;
      cursor: pointer;

      box-shadow:
        0 10px 24px rgba(0,0,0,0.28),
        0 0 16px rgba(255,120,0,0.10);

      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    #scrollToBottomBtn.show {
      display: inline-flex;
    }

    #scrollToBottomBtn:hover {
      background: rgba(255,255,255,0.14);
      box-shadow:
        0 12px 28px rgba(0,0,0,0.34),
        0 0 18px rgba(255,120,0,0.18);
      transform: translateX(-50%) translateY(-1px);
    }

    #scrollToBottomBtn:active {
      transform: translateX(-50%) translateY(0) scale(0.98);
    }

    /* Индикатор "печатает..." */
    #typingIndicator{
      font-size: 12px;
      color: #888;
      min-height: 16px;
      margin-top: 4px;
    }

    /* ========================================================= */
    /* [07.1] TEMP SCREEN SHARE PROTOTYPE */
    /* ========================================================= */

    #screenShareRemoteVideo {
      display: none;
      width: 100%;
      max-height: 360px;
      border-radius: 14px;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.10);
    }

    #screenShareRemoteVideo.show {
      display: block;
    }

    #screenShareStatus {
      margin-bottom: 8px;
      font-size: 12px;
      color: rgba(255,255,255,0.62);
    }

    #screenShareStatus.is-ok {
      color: rgba(80, 220, 130, 0.90);
    }

    #screenShareStatus.is-warn {
      color: rgba(255, 190, 90, 0.95);
    }

    #screenShareStatus.is-error {
      color: rgba(255, 90, 110, 0.95);
    }

    #screenShareStopWatchBtn,
    #screenShareUnmuteBtn,
    #screenShareCollapseBtn,
    #screenShareStopBroadcastBtn {  
      display: none;
      padding: 9px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
      cursor: pointer;
      font-size: 13px;
      font-weight: 800;
    }

    #screenShareStopWatchBtn.show,
    #screenShareUnmuteBtn.show,
    #screenShareCollapseBtn.show,
    #screenShareStopBroadcastBtn.show {  
      display: inline-flex;
    }

    #screenShareStopWatchBtn:hover,
    #screenShareUnmuteBtn:hover,
    #screenShareCollapseBtn:hover {
      background: rgba(255,255,255,0.12);
      box-shadow: 0 0 18px rgba(255,120,0,0.22);
    }

    #liveRoomActivePlayer.is-video-collapsed #screenShareRemoteVideo {
      height: 0;
      max-height: 0;
      opacity: 0;
      margin: 0;
      border-width: 0;
      pointer-events: none;
    }


    /* ========================================================= */
    /* [07.2] Voice-mesh audio transport (Live-комната) */
    /* ========================================================= */

    #voiceRemoteAudios {
      display: none;
    }

    /* ========================================================= */
    /* [07.3] LIVE ROOM V1 */
    /* ========================================================= */

    #liveRoomPanel {
      display: none;
      margin-bottom: 8px;
      padding: 12px;
      border-radius: 16px;
      box-sizing: border-box;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 10px 25px rgba(0,0,0,0.22);
    }

    #liveRoomPanel.show {
      display: block;
    }

    #liveRoomHeader {
      display: grid;
      grid-template-columns: 34px 1fr 34px;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    #liveRoomTitleWrap {
      grid-column: 2;
      justify-self: center;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    #liveRoomTitle {
      text-align: center;
      font-size: 15px;
      font-weight: 900;
      color: rgba(255,255,255,0.92);
      min-width: 0;
    }

    .live-connection-quality {
      display: inline-flex;
      align-items: flex-end;
      gap: 3px;
      padding: 5px 7px;
      border-radius: 10px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .live-connection-quality-bar {
      width: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.20);
    }

    .live-connection-quality-bar:nth-child(1) { height: 7px; }
    .live-connection-quality-bar:nth-child(2) { height: 11px; }
    .live-connection-quality-bar:nth-child(3) { height: 15px; }

    .live-connection-quality.quality-poor .live-connection-quality-bar:nth-child(1) {
      background: rgba(255, 90, 110, 0.95);
      box-shadow: 0 0 8px rgba(255, 90, 110, 0.26);
    }

    .live-connection-quality.quality-medium .live-connection-quality-bar:nth-child(-n+2) {
      background: rgba(255, 190, 80, 0.95);
      box-shadow: 0 0 8px rgba(255, 190, 80, 0.24);
    }

    .live-connection-quality.quality-good .live-connection-quality-bar {
      background: rgba(80, 220, 130, 0.95);
      box-shadow: 0 0 8px rgba(80, 220, 130, 0.22);
    }

    #liveRoomCollapseBtn {
      grid-column: 3;
      justify-self: end;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
      cursor: pointer;
      font-size: 16px;
      font-weight: 900;
      line-height: 1;
    }

    #liveRoomCollapseBtn:hover {
      background: rgba(255,255,255,0.12);
      box-shadow: 0 0 14px rgba(255,120,0,0.18);
    }

    #liveRoomCollapseBtn:active {
      transform: scale(0.98);
    }

    #liveRoomScrollArea {
      min-height: 0;
    }

    #liveRoomPanel.is-collapsed #liveRoomHeader {
      margin-bottom: 0;
    }

    #liveRoomPanel.is-collapsed #liveRoomScrollArea {
      display: none;
    }

    #liveRoomControls {
      display: none;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      margin-top: 12px;
    }

    #liveRoomControls.show {
      display: flex;
    }

    /* Media Area v2 */
    #liveRoomMediaArea {
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    #liveRoomMediaArea.show {
      display: flex;
    }

    /* Большой плеер */
    #liveRoomActivePlayer {
      display: none;
      flex-direction: column;
      gap: 8px;
    }

    #liveRoomActivePlayer.show {
      display: flex;
    }

    /* Контейнер preview-карточек */
    #liveRoomStreamPreviews {
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
      gap: 8px;

      overflow-x: auto;
      padding: 2px 0 4px;
    }

    /* Временная карточка потока */
    .live-stream-preview {
      flex: 0 0 auto;

      width: 180px;
      height: 100px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 12px;
      cursor: pointer;

      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);

      transition:
        background 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;
    }

    .live-stream-preview:hover {
      background: rgba(255,255,255,0.10);
      transform: translateY(-1px);
    }

    .live-stream-preview.active {
      border-color: rgba(255,255,255,0.25);
    }

    #liveRoomStreamActions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 8px;
    }

    #liveJoinBtn,
    #liveMicBtn,
    #liveAudioBtn,
    #liveStreamBtn,
    #liveSettingsBtn,
    #liveLeaveBtn {
      padding: 9px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
      cursor: pointer;
      font-size: 13px;
      font-weight: 800;
    }

    #liveJoinBtn:hover,
    #liveMicBtn:hover,
    #liveAudioBtn:hover,
    #liveStreamBtn:hover,
    #liveSettingsBtn:hover,
    #liveLeaveBtn:hover {
      background: rgba(255,255,255,0.12);
      box-shadow: 0 0 18px rgba(255,120,0,0.22);
    }

    #liveJoinBtn {
      display: none;
      margin: 0 auto 12px;
    }

    #liveJoinBtn.show {
      display: flex;
    }

    #liveMicBtn.is-muted,
    #liveAudioBtn.is-muted {
      position: relative;
      opacity: 1;
      background: rgba(255, 90, 110, 0.10);
      border-color: rgba(255, 90, 110, 0.25);
      color: rgba(255,255,255,0.88);
    }

    #liveMicBtn.is-muted::after,
    #liveAudioBtn.is-muted::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;

      width: 24px;
      height: 2px;

      background: rgba(255, 160, 160, 0.75);
      transform: translate(-50%, -50%) rotate(-35deg);

      border-radius: 999px;
      pointer-events: none;
    }

    #liveRoomParticipantsTitle {
      margin-bottom: 8px;
      font-size: 13px;
      font-weight: 850;
      color: rgba(255,255,255,0.76);
    }

    #liveRoomParticipants {
      display: flex;
      flex-direction: column;
      gap: 7px;
      font-size: 13px;
      color: rgba(255,255,255,0.86);
    }

    .live-room-participant {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 24px;
    }

    .live-room-participant-name {
      font-weight: 750;
      position: relative;
      z-index: 1; 

      transition:
        color 0.16s ease,
        text-shadow 0.16s ease;
    }

    .live-room-participant-name::after {
      content: "";
      position: absolute;
      inset: -2px -6px;
      border-radius: 10px;
      background: rgba(255, 140, 60, 0.12);
      box-shadow:
        0 0 12px rgba(255, 120, 0, 0.18),
        0 0 20px rgba(255, 120, 0, 0.10);
      z-index: -1;
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    .live-room-participant-name.is-speaking::after {
      opacity: 1;
    }

    .live-room-participant-status {
      color: rgba(255,255,255,0.62);
      font-size: 12px;
    }

    .live-room-participant-status.is-muted {
      position: relative;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-width: 26px;
      height: 26px;
      padding: 0 7px;

      border-radius: 10px;

      border: 1px solid rgba(255, 90, 110, 0.25);
      background: rgba(255, 90, 110, 0.10);

      color: rgba(255,255,255,0.88);
    }

    .live-room-participant-status.is-muted::after {
      content: "";

      position: absolute;

      width: 18px;
      height: 2px;

      background: rgba(255, 120, 120, 0.85);

      transform: rotate(-35deg);

      border-radius: 999px;

      pointer-events: none;
    }

    .live-room-local-mute-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      padding: 0;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.88);
      cursor: pointer;
      font-size: 13px;
      line-height: 1;
    }

    .live-room-local-mute-btn:hover {
      background: rgba(255,255,255,0.10);
    }

    .live-room-local-mute-btn.is-locally-muted {
      background: rgba(255, 90, 110, 0.10);
      border-color: rgba(255, 90, 110, 0.24);
    }

    .live-room-watch-btn {
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.90);
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
    }

    .live-room-watch-btn:hover {
      background: rgba(255,255,255,0.12);
      box-shadow: 0 0 14px rgba(255,120,0,0.18);
    }

    #voiceBtn {
      flex: 0 0 auto;
      height: 52px;
      padding: 0 14px;

      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);

      cursor: pointer;
      font-size: 13px;
      font-weight: 900;

      transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    #voiceBtn:hover {
      background: rgba(255,255,255,0.12);
      box-shadow: 0 0 18px rgba(255,120,0,0.22);
      transform: translateY(-1px);
    }

    #voiceBtn:active {
      transform: translateY(0px) scale(0.98);
    }

    #voiceBtn.is-active {
      background: rgba(255, 106, 0, 0.18);
      border-color: rgba(255, 160, 70, 0.35);
      box-shadow: 0 0 18px rgba(255,120,0,0.22);
    }

    /* Панель выбранного вложения перед отправкой */
    #composerAttachment {
      display: none;
      margin-bottom: 8px;
      padding: 10px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    #composerAttachment.show {
      display: block;
    }

    /* Внутренний ряд выбранного вложения */
    .composer-attachment-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Превью картинки в composer */
    .composer-attachment-thumb {
      width: 160px;
      height: 160px;
      object-fit: cover;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.10);
      flex: 0 0 96px;

      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.2s ease;
    }

    .composer-attachment-thumb:hover {
      transform: scale(1.02);
      box-shadow: 0 0 14px rgba(255, 140, 60, 0.18);
    }

    /* Иконка/заглушка для аудиофайла в composer */
    .composer-attachment-audio {
      width: 56px;
      height: 56px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.10);
      flex: 0 0 56px;

      display: none;
      align-items: center;
      justify-content: center;

      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.92);
      font-size: 24px;
      line-height: 1;
    }

    .composer-attachment-audio-player {
      display: none;
      width: 620px;
      max-width: 100%;
      flex: 1 1 auto;
      border-radius: 10px;
      margin-right: 2px;
    }

    /* Заглушка для видеофайла в composer */
    .composer-attachment-video {
      width: 56px;
      height: 56px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.10);
      flex: 0 0 56px;

      display: none;
      align-items: center;
      justify-content: center;

      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.92);
      font-size: 24px;
      line-height: 1;
    }

    /* Видео-плеер в composer */
    .composer-attachment-video-player {
      display: none;
      width: 420px;
      max-width: 100%;
      max-height: 236px;
      flex: 0 0 auto;
      border-radius: 12px;
      background: rgba(0,0,0,0.18);
      margin-right: 2px;
    }

    /* Текстовая часть выбранного вложения */
    .composer-attachment-meta {
      min-width: 0;
      flex: 1;
    }

    .composer-attachment-name {
      font-size: 13px;
      color: rgba(255,255,255,0.90);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .composer-attachment-status {
      margin-top: 4px;
      font-size: 12px;
      color: rgba(255,255,255,0.65);
    }

    /* Кнопка "отправить оригинал" в composer */
    .composer-attachment-options {
      margin-top: 8px;
    }

    .composer-original-option {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: rgba(221, 193, 179, 0.82);
      cursor: pointer;
      user-select: none;
    }

    .composer-original-option input {
      margin: 0;
      accent-color: #f1771f;
      cursor: pointer;
      filter: saturate(0.85) brightness(0.92);
    }

    .composer-original-option:hover {
      color: rgba(255, 235, 220, 0.92);
    }

    /* Кнопка удаления выбранного вложения */
    #composerAttachmentRemove {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.90);
      cursor: pointer;
    }

    #composerAttachmentRemove:hover {
      background: rgba(255,255,255,0.10);
    }

    /* Лента всех выбранных вложений в composer */
    .composer-attachment-list {
      display: none;
      margin-top: 10px;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 2px;
    }

    /* Показываем ленту, когда в ней есть элементы */
    .composer-attachment-list.show {
      display: flex;
    }

    /* Один мини-элемент вложения */
    .composer-attachment-chip {
      position: relative;
      flex: 0 0 auto;
      width: 52px;
      height: 52px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      cursor: pointer;
      color: rgba(255,255,255,0.92);
      font-size: 20px;
    }

    /* Маленький крестик удаления у конкретного вложения в мини-ленте */
    .composer-attachment-chip-remove {
      position: absolute;
      top: 3px;
      right: 3px;

      width: 18px;
      height: 18px;
      border: none;
      border-radius: 999px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      background: rgba(20,20,26,0.82);
      color: rgba(255,255,255,0.92);
      font-size: 12px;
      line-height: 1;
      cursor: pointer;

      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      padding: 0;
    }

    .composer-attachment-chip-remove:hover {
      background: rgba(255,120,0,0.85);
    }

    /* Активное вложение в ленте */
    .composer-attachment-chip.is-active {
      box-shadow:
        0 0 0 1px rgba(255,160,90,0.28) inset,
        0 0 14px rgba(255,120,0,0.18);
      border-color: rgba(255,160,90,0.22);
    }

    /* Мини-превью картинки */
    .composer-attachment-chip img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Кнопка прикрепления файла */
    #attachBtn {
      flex: 0 0 auto;
      width: 45px;
      height: 60px;
      border-top-left-radius: 18px;
      border-bottom-left-radius: 18px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    #attachBtn:hover {
      background: rgba(255,255,255,0.12);
      box-shadow: 0 0 18px rgba(255,120,0,0.22);
      transform: translateY(-1px);
    }

    #attachBtn:active {
      transform: translateY(0px) scale(0.98);
    }

    #attachBtn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      box-shadow: none;
    }

    #liveBtn {
      flex: 0 0 auto;
      height: 52px;
      padding: 0 14px;

      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);

      cursor: pointer;
      font-size: 13px;
      font-weight: 900;

      transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    #liveBtn:hover {
      background: rgba(255,255,255,0.12);
      box-shadow: 0 0 18px rgba(255,120,0,0.22);
      transform: translateY(-1px);
    }

    #liveBtn:active {
      transform: translateY(0px) scale(0.98);
    }

    #liveBtn.is-active {
      background: rgba(255, 106, 0, 0.18);
      border-color: rgba(255, 160, 70, 0.35);
      box-shadow: 0 0 18px rgba(255,120,0,0.22);
    }

    /* Панель ввода сообщения (чат)  */
    /* Важно: #input теперь textarea (многострочный ввод) */
    #input-row{
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 12px;
      border-radius: 18px;

      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    }

    /* Контейнер поля ввода сообщения (textarea + счётчик) */
    .input-wrap{
      position: relative;
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
    }


    /* Поле ввода: “стекло”, растёт по высоте до лимита */
    #input{
      flex: 1;
      min-width: 0;

      width: 100%;
      box-sizing: border-box;

      padding-bottom: 34px; /* место под счётчик внутри поля */
      
      resize: none;              /* пользователь не тянет мышкой (мы сами растим) */
      overflow-y: auto;          /* если выше лимита — появится скролл */
      min-height: 60px;          /* стартовая высота */
      max-height: 140px;         /* лимит роста (примерно 5-6 строк) */

      padding: 12px 12px;
      border-top-right-radius: 18px;
      border-bottom-right-radius: 18px;
      border: 1px solid rgba(255,255,255,0.12);

      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.92);

      font-size: 14px;
      line-height: 1.35;

      outline: none;
    }

    /* Счётчик: внизу справа внутри поля ввода */
    #inputStats{
      position: absolute;
      right: 12px;
      bottom: 10px;

      font-size: 12px;
      opacity: 0.65;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
    }

    /* когда близко к лимиту — делаем заметнее */
    #inputStats.is-warning{
      color: rgba(255, 179, 0, 0.85); /* тёплый */
    }

    /* когда превышен лимит — красим */
    #inputStats.is-error{
      color: rgba(255, 45, 85, 0.85); /* красно-розовый */
    }

    #input::placeholder{
      color: rgba(255,255,255,0.45);
    }

    #input:focus{
      border-color: rgba(255, 160, 70, 0.35);
      box-shadow: 0 0 0 3px rgba(255, 140, 60, 0.12);
    }

    /* Кнопка отправки: круглая, иконка */
    #send{
      flex: 0 0 auto;
      width: 80px;
      height: 60px;

      border-top-right-radius: 18px;
      border-bottom-right-radius: 18px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;

      border: 1px solid rgba(255, 160, 70, 0.28);
      background: rgba(255, 120, 0, 0.10);
      color: rgba(255,255,255,0.96);

      display: inline-flex;
      align-items: center;
      justify-content: center;

      cursor: pointer;

      box-shadow:
        0 0 14px rgba(255,120,0,0.10),
        0 8px 20px rgba(0,0,0,0.20);

      transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    /* Иконка внутри кнопки */
    .send-icon{
      width: 30px;
      height: 30px;
      display: block;
    }

    /* Hover: лёгкое “огненное” свечение */
    #send:hover{
      background: rgba(255,255,255,0.12);
      box-shadow: 0 0 18px rgba(255,120,0,0.22);
      transform: translateY(-1px);
    }

    /* Active: “нажал” */
    #send:active{
      transform: translateY(0px) scale(0.98);
    }

    /* Disabled (если в будущем решим блокировать кнопку) */
    #send:disabled{
      opacity: 0.55;
      cursor: not-allowed;
      box-shadow: none;
    }

    /* ========================================================= */
    /* [08] MESSAGE BUBBLES */
    /* ========================================================= */
    
     /* Разделитель дат в истории */
    .date-separator {
      text-align: center;
      color: #888;
      margin: 10px 0;
      font-size: 12px;
      font-weight: normal;
      opacity: 0.9;

      align-self: center;
      width: 100%;
    }

    /* Строка сообщения */
    .msg-row {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      margin: 6px 0;
    }

    /* Чужие сообщения — слева */
    .msg-row.other { justify-content: flex-start; }
    /* Свои сообщения — справа */
    .msg-row.me    { justify-content: flex-end; }

    .msg-avatar {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      padding: 0;
      border-radius: 50%;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at 30% 25%, rgba(255,190,120,0.38), rgba(255,120,0,0.12) 48%, rgba(0,0,0,0.32));
      border: 1px solid rgba(255, 190, 120, 0.18);
      color: rgba(255,255,255,0.9);
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      user-select: none;
      box-shadow: 0 6px 16px rgba(0,0,0,0.22);
    }

    .msg-avatar:hover {
      border-color: rgba(255, 190, 120, 0.34);
      box-shadow:
        0 7px 18px rgba(0,0,0,0.26),
        0 0 12px rgba(255,120,0,0.12);
    }

    .msg-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Бабл */
    .msg-bubble {
      max-width: 68%;
      padding: 10px 12px;
      border-radius: 16px;
      line-height: 1.35;

      position: relative;
      padding-bottom: 18px;

      white-space: pre-wrap;
      word-wrap: break-word;

      border: 1px solid transparent;

      background:
        linear-gradient(rgba(20,20,26,0.65), rgba(20,20,26,0.65)) padding-box,
        linear-gradient(135deg, rgba(255,150,70,0.35), rgba(255,210,120,0.25), rgba(255,80,120,0.35)) border-box;

      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      box-shadow:
        0 12px 30px rgba(0,0,0,0.35),
        0 0 22px rgba(255, 140, 60, 0.10);

      color: rgba(255, 255, 255, 0.92);
    }

    /* Свой бабл */
    .msg-row.me .msg-bubble {
      box-shadow:
        0 16px 36px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,160,90,0.20) inset;
    }

    /* Чужой бабл */
    .msg-row.other .msg-bubble {
      box-shadow:
        0 16px 36px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.10) inset;
    }

    /* Бабл с аудио можно делать шире обычного текста */
    .msg-bubble.has-audio {
      width: min(560px, 100%);
      max-width: 560px;
    }

    /* Локальный pending bubble сообщения с несколькими вложениями */
    .msg-row.pending-message {
      justify-content: flex-end;
      opacity: 0.96;
    }

    .msg-bubble.pending-message {
      border-style: dashed;
      border-color: rgba(255, 190, 120, 0.28);
      box-shadow:
        0 14px 32px rgba(0,0,0,0.34),
        0 0 0 1px rgba(255,160,90,0.12) inset;
    }

    /* Текст локального pending message */
    .msg-pending-text {
      font-size: 14px;
      margin-top: -5px;
      margin-bottom: 8px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    /* Список вложений внутри pending message */
    .msg-pending-attachments {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    /* Один элемент вложения внутри pending message */
    .msg-pending-attachment {
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
    }

    /* Верхняя строка вложения */
    .msg-pending-attachment-top {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    /* Иконка типа вложения */
    .msg-pending-attachment-icon {
      flex: 0 0 auto;
      width: 24px;
      text-align: center;
      font-size: 16px;
      line-height: 1;
    }

    /* Имя файла */
    .msg-pending-attachment-name {
      min-width: 0;
      flex: 1;
      font-size: 13px;
      color: rgba(255,255,255,0.92);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Статус вложения */
    .msg-pending-attachment-status {
      margin-top: 5px;
      font-size: 12px;
      color: rgba(255,255,255,0.62);
    }

    /* Действия нового pending message bubble */
    .msg-pending-actions {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }

    .msg-pending-action-btn {
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
      cursor: pointer;
      font-size: 13px;
    }

    .msg-pending-action-btn:hover {
      background: rgba(255,255,255,0.12);
    }

    /* Небольшая строка мета-инфы (кто + время) */
    .msg-meta {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 4px;

      font-size: 12px;
      opacity: 0.75;
    }

    /* Имя пользователя в бабле */
    .msg-name {
      font-size: 16px;        /* Размер шрифта имени (делает имя заметнее текста сообщения) */
      font-weight: 500;       /* Толщина шрифта: 400 — обычный, 500 — чуть жирнее */
      opacity: 0.98;          /* Прозрачность: 1 — полностью, меньше — чуть мягче */
      display: inline-block;  /* Позволяет применять отступы и смещения корректно */
      margin-left: -6px;      /* Сдвигает имя влево относительно текста сообщения */
      color: #f1771f;       /* Цвет имени, если JS-цвет не задан (огненный акцент для быстрого распознавания) */
    }

    /* Текст сообщения */
    .msg-text {
      font-size: 14px;
      margin-top: -5px;       /* вниз от имени */
    }

    /* Контейнер набора вложений в одном сообщении */
    .msg-attachments {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    /* Базовый контейнер visual-layout */
    .msg-visual-layout {
      margin-top: 8px;
    }

    /* Все вложения внутри специальных visual-layout без лишнего верхнего отступа */
    .msg-visual-layout .msg-attachment {
      margin-top: 0;
    }

    /* Картинки и видео внутри специальных layout приводим к аккуратному виду */
    .msg-visual-layout .msg-image,
    .msg-visual-layout .msg-video {
      width: 100%;
      max-width: 100%;
      max-height: none;
      display: block;
      object-fit: cover;
      border-radius: 12px;
    }

    /* 1 visual */
    .msg-visual-layout-single {
      display: block;
      margin-top: 8px;
    }

    .msg-visual-layout-single .msg-attachment {
      margin-top: 0;
    }

    .msg-visual-layout-single .msg-image {
      display: block;
      width: 100%;
      max-width: min(520px, 100%);
      max-height: 420px;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 12px;
    }

    .msg-visual-layout-single .msg-video-placeholder {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      width: 100%;
      max-width: min(560px, 100%);
      min-height: 380px;
      max-height: 480px;

      aspect-ratio: 16 / 10;
      border-radius: 12px;
      overflow: hidden;
    }

    /* 2 visual — горизонтально */
    .msg-visual-layout-two {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .msg-visual-layout-two .msg-image,
    .msg-visual-layout-two .msg-video {
      aspect-ratio: 1 / 1;
    }

    /* 3 visual — один большой сверху, два снизу */
    .msg-visual-layout-three {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .msg-visual-layout-three .msg-visual-main .msg-image,
    .msg-visual-layout-three .msg-visual-main .msg-video {
      aspect-ratio: 16 / 10;
    }

    .msg-visual-layout-three .msg-visual-subgrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .msg-visual-layout-three .msg-visual-subgrid .msg-image,
    .msg-visual-layout-three .msg-visual-subgrid .msg-video {
      aspect-ratio: 1 / 1;
    }

    /* 4 visual — большой слева, колонка справа */
    .msg-visual-layout-four {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
      gap: 8px;
      align-items: stretch;
    }

    .msg-visual-layout-four .msg-visual-main .msg-image,
    .msg-visual-layout-four .msg-visual-main .msg-video {
      aspect-ratio: 4 / 5;
    }

    .msg-visual-layout-four .msg-visual-side-column {
      display: flex;
      flex-direction: column;
      gap: 8px;
      height: 100%;
    }

    .msg-visual-layout-four .msg-visual-side-column .msg-attachment {
      flex: 1 1 0;
      min-height: 0;
    }

    .msg-visual-layout-four .msg-visual-side-column .msg-image,
    .msg-visual-layout-four .msg-visual-side-column .msg-video-placeholder {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      object-fit: cover;
    }

    /* 5+ visual — fallback grid */
    .msg-visual-layout-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .msg-visual-layout-grid .msg-image,
    .msg-visual-layout-grid .msg-video {
      aspect-ratio: 1 / 1;
    }

    /* Превью изображения в сообщении */
    .msg-image {
      display: block;
      max-width: min(320px, 100%);
      max-height: 360px;
      border-radius: 12px;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 10px 24px rgba(0,0,0,0.28);
    }

    .msg-image:hover {
      opacity: 0.96;
    }

    /* Аудио-вложение внутри сообщения */
    .msg-audio {
      display: block;
      width: 100%;
      min-width: 260px;
      margin-top: 8px;
      border-radius: 12px;
    }

    /* Имя аудиофайла в сообщении */
    .msg-audio-name {
      margin-top: 8px;
      margin-bottom: 4px;
      font-size: 12px;
      line-height: 1.3;
      color: rgba(255,255,255,0.62);
      word-break: break-word;
    }

    /* Ленивый placeholder для аудио до загрузки файла */
    .msg-audio-placeholder {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-width: 260px;
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      box-sizing: border-box;
      cursor: pointer;
    }

    .msg-audio-placeholder:hover {
      background: rgba(255,255,255,0.09);
    }

    .msg-audio-placeholder-play {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.14);
      font-size: 16px;
      color: rgba(255,255,255,0.94);
    }

    .msg-audio-placeholder-meta {
      min-width: 0;
      flex: 1;
    }

    .msg-audio-placeholder-title {
      font-size: 13px;
      color: rgba(255,255,255,0.90);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .msg-audio-placeholder-subtitle {
      margin-top: 4px;
      font-size: 12px;
      color: rgba(255,255,255,0.62);
    }

    /* Видео-вложение внутри сообщения */
    .msg-video {
      display: block;
      width: 100%;
      max-width: 100%;
      line-height: 0;
      object-fit: contain;
      margin-top: 0;
      border-radius: 12px;
      background: rgba(0,0,0,0.18);
    }

    /* Ленивый placeholder для видео до загрузки файла */
    .msg-video-placeholder {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
      width: 100%;
      max-width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 10px 24px rgba(0,0,0,0.20);
      cursor: pointer;
      overflow: hidden;
    }

    .msg-video-placeholder:hover {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    }

    .msg-video-placeholder-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px;
      text-align: center;
    }

    .msg-video-preview-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .msg-video-placeholder-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(
        180deg,
        rgba(0,0,0,0.10),
        rgba(0,0,0,0.20)
      );
      pointer-events: none;
    }

    .msg-video-placeholder-label {
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 10px;
      font-size: 12px;
      line-height: 1.3;
      color: rgba(255,255,255,0.86);
      text-align: center;
      text-shadow: 0 1px 4px rgba(0,0,0,0.45);
      pointer-events: none;
      word-break: break-word;
    }

    .msg-video-placeholder-play {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.14);
      font-size: 22px;
      color: rgba(255,255,255,0.94);
    }

    .msg-video-placeholder-text {
      font-size: 12px;
      color: rgba(255,255,255,0.70);
      line-height: 1.3;
      word-break: break-word;
      max-width: 220px;
    }

    /* Бабл с видео делаем шире обычного текста */
    .msg-bubble.has-video {
      width: min(560px, 100%);
      max-width: 560px;
    }

    /* Время сообщения */
    .msg-time {
      position: absolute;
      right: 6px;
      bottom: 3px;

      font-size: 11px;
      opacity: 0.4;

      pointer-events: none;
    }

    /* ========================================================= */
    /* [09.1] PROFILE MODAL */
    /* ========================================================= */

    /* блокируем прокрутку страницы, когда открыта модалка */
    body.modal-open { overflow: hidden; }

    /* блокируем прокрутку окна сообщений, когда открыта модалка */
    body.modal-open #messages { overflow: hidden; }

    /* затемнение фона */
    #profileModalOverlay,
    #publicProfileModalOverlay {
      position: fixed;
      inset: 0;

      background: rgba(0, 0, 0, 0.62);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      display: none;
      align-items: center;
      justify-content: center;

      z-index: 9999;
    }

    /* показываем */
    #profileModalOverlay.open,
    #publicProfileModalOverlay.open { display: flex; }

    /* само окно */
    #profileModal,
    #publicProfileModal {
      width: min(460px, 92vw);
      border-radius: 18px;
      padding: 16px 16px 14px;

      /* glass */
      background: rgba(18, 18, 24, 0.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);

      /* огненный контур */
      border: 1.5px solid transparent;
      background:
        linear-gradient(rgba(18, 18, 24, 0.78), rgba(18, 18, 24, 0.98)) padding-box,
        linear-gradient(
          135deg,
          rgba(255, 160, 70, 0.5),        /*  основной огонь — ярче */
          rgba(255, 200, 110, 0.15),      /*  тёплый свет */
          rgba(255, 110, 140, 0.4)        /*  розово-красный акцент */
        ) border-box;

      /* огненное свечение + тень */
      box-shadow:
        0 18px 50px rgba(0,0,0,0.45),
        0 0 22px rgba(255, 140, 60, 0.22);
    }

    /* шапка модалки */
    .profile-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    /* Текст в модалки */
    .profile-modal-title {
      font-size: 16px;
      font-weight: 800;
      color: rgba(255, 255, 255, 0.92);
    }

    /* Крестик "закрыть" в модалки */
    #profileModalClose,
    #publicProfileModalClose {
      border: none;
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.88);

      width: 34px;
      height: 34px;
      border-radius: 12px;

      font-size: 22px;
      line-height: 1;

      cursor: pointer;
      opacity: 0.9;
    }

    #profileModalClose:hover,
    #publicProfileModalClose:hover {
      background: rgba(255, 255, 255, 0.12);
      opacity: 1;
    }

    /* Тело модалки профиля */
    .profile-modal-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      color: rgba(255, 255, 255, 0.86);
    }

    /* Аватар в профиле */
    .profile-avatar-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }

    .profile-avatar {
      width: 250px;
      height: 250px;
      border-radius: 50%;

      background: radial-gradient(circle at 30% 25%, rgba(255,190,120,0.38), rgba(255,120,0,0.12) 48%, rgba(0,0,0,0.32));

      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;

      border: 1px solid rgba(255, 190, 120, 0.22);
      box-shadow:
        0 10px 22px rgba(0,0,0,0.35),
        0 0 18px rgba(255,120,0,0.12);
    }

    .profile-avatar.is-clickable {
      cursor: pointer;
    }

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

    .profile-avatar.has-image img {
      display: block;
    }

    .profile-avatar.has-image .profile-avatar-fallback {
      display: none;
    }

    .profile-avatar-fallback {
      color: rgba(255,255,255,0.92);
      font-size: 82px;
      font-weight: 900;
      line-height: 1;
      text-transform: uppercase;
      text-shadow: 0 4px 20px rgba(0,0,0,0.32);
    }

    .profile-avatar::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(255,255,255,0.22),
        rgba(255,255,255,0.04) 45%,
        rgba(0,0,0,0.18)
      );
      pointer-events: none;
    }

    .profile-avatar-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .profile-secondary-btn {
      padding: 9px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.85);
      cursor: pointer;
      opacity: 0.9;
    }

    .profile-secondary-btn:hover {
      background: rgba(255,255,255,0.12);
      opacity: 1;
    }

    .profile-secondary-btn.primary {
      border-color: rgba(255,160,70,0.18);
      background: rgba(255, 140, 60, 0.14);
      font-weight: 800;
    }

    .profile-secondary-btn[hidden] {
      display: none;
    }

    .profile-secondary-btn:disabled {
      opacity: 0.55;
      cursor: default;
    }

    /* второстепенная ссылка "Удалить" — разрушительное действие,
       не должно конкурировать по весу с "Изменить" */
    .profile-avatar-delete-link {
      border: none;
      background: transparent;
      padding: 4px 6px;
      border-radius: 8px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      text-decoration: underline;
      text-decoration-color: transparent;
      transition: color .15s ease, text-decoration-color .15s ease;
    }

    .profile-avatar-delete-link:hover {
      color: rgba(255, 132, 132, 0.85);
      text-decoration-color: rgba(255, 132, 132, 0.55);
    }

    .profile-avatar-delete-link:disabled {
      opacity: 0.5;
      cursor: default;
    }

    .profile-avatar-delete-link[hidden] {
      display: none;
    }

    /* подсказка про формат файла аватарки (не поле формы) */
    .profile-avatar-hint {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      text-align: center;
    }

    /* строки-заглушки в модалке */
    .profile-field {
      padding: 10px 12px;
      border-radius: 14px;

      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.06);

      box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset;
    }

    .profile-field-label {
      font-size: 12px;
      opacity: 0.75;
      margin-bottom: 4px;
    }

    .profile-field-value {
      font-size: 14px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.92);
    }

    /* поля-заглушки для ещё не реализованных настроек */
    .profile-field--disabled {
      opacity: 0.55;
    }

    .profile-field-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.68);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .profile-field-badge-icon {
      width: 12px;
      height: 12px;
      flex: none;
    }

    .profile-bio-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    #profileBioInput {
      width: 100%;
      min-height: 96px;
      max-height: 150px;
      resize: vertical;
      box-sizing: border-box;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(0,0,0,0.22);
      color: rgba(255,255,255,0.92);
      padding: 10px 11px;
      font: inherit;
      line-height: 1.35;
      outline: none;
    }

    #profileBioInput:focus {
      border-color: rgba(255, 160, 70, 0.44);
      box-shadow: 0 0 0 3px rgba(255, 140, 60, 0.10);
    }

    .profile-bio-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      min-height: 18px;
      font-size: 12px;
      color: rgba(255,255,255,0.62);
    }

    #profileBioError {
      color: rgba(255, 132, 132, 0.95);
    }

    /* единая кнопка сохранения формы профиля */
    .profile-form-save-btn {
      width: 100%;
      padding: 11px 13px;
      border-radius: 12px;
      border: 1px solid rgba(255,160,70,0.18);
      background: rgba(255, 140, 60, 0.14);
      color: rgba(255,255,255,0.92);
      font-weight: 800;
      cursor: pointer;
    }

    .profile-form-save-btn:hover:not(:disabled) {
      background: rgba(255, 140, 60, 0.22);
      box-shadow: 0 0 14px rgba(255,120,0,0.14);
    }

    .profile-form-save-btn:disabled {
      opacity: 0.6;
      cursor: default;
      box-shadow: none;
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.5);
    }

    .public-profile-heading {
      display: flex;
      align-items: baseline;
      gap: 9px;
      min-width: 0;
    }

    .public-profile-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(255,255,255,0.46);
    }

    .public-profile-status::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(255,255,255,0.26);
    }

    .public-profile-status.online::before {
      background: #2ecc71;
      box-shadow: 0 0 10px rgba(46, 204, 113, 0.45);
    }

    #publicProfileBio {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      line-height: 1.45;
      font-weight: 500;
    }

    #avatarViewerOverlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.78);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 10003;
      padding: 18px;
    }

    #avatarViewerOverlay.open {
      display: flex;
    }

    #avatarViewerModal {
      position: relative;
      width: min(72vh, 88vw);
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #avatarViewerImg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      border: 1px solid rgba(255, 190, 120, 0.22);
      box-shadow: 0 22px 70px rgba(0,0,0,0.52);
    }

    #avatarViewerClose {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 12px;
      background: rgba(20,20,26,0.78);
      color: rgba(255,255,255,0.92);
      font-size: 22px;
      cursor: pointer;
    }

    /* Инфа о версии приложения в модалке */
    .profile-version {
      margin: 5px 0 5px;
      font-size: 12px;
      opacity: 0.6;
      text-align: center;
      letter-spacing: 0.3px;
      color: rgba(255,255,255,0.75);
    }

    /* кнопка "выйти" в модалке */
    #modalLogoutBtn {
      margin-top: 5px;
      padding: 11px 14px;
      border-radius: 14px;

      border: 1px solid rgba(255, 80, 96, 0.38);
      background: rgba(210, 36, 58, 0.16);
      color: rgba(255, 255, 255, 0.92);

      font-size: 14px;
      font-weight: 800;
      cursor: pointer;

      box-shadow: 0 0 18px rgba(255, 45, 85, 0.18);
    }

    #modalLogoutBtn:hover { background: rgba(210, 36, 58, 0.24); }

    #modalLogoutBtn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      box-shadow: none;
    }

    /* ========================================================= */
    /* [09.2] MEDIA VIEWER MODALS */
    /* ========================================================= */

    /* Общая база overlay для media viewer */
    #imageViewerOverlay,
    #videoViewerOverlay,
    #mediaViewerOverlay {
      position: fixed;
      inset: 0;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    /* Overlay image viewer */
    #imageViewerOverlay {
      background: rgba(0, 0, 0, 0.82);
      z-index: 10000;
    }

    /* Overlay video viewer */
    #videoViewerOverlay {
      background: rgba(0, 0, 0, 0.86);
      z-index: 10001;
    }

    #mediaViewerOverlay {
      background: rgba(0, 0, 0, 0.88);
      z-index: 10002;
    }

    /* Открытое состояние media viewer */
    #imageViewerOverlay.open,
    #videoViewerOverlay.open,
    #mediaViewerOverlay.open {
      display: flex;
    }

    /* Общая база контейнера viewer modal */
    #imageViewerModal,
    #videoViewerModal,
    #mediaViewerModal {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Контейнер image viewer */
    #imageViewerModal {
      max-width: min(96vw, 1200px);
      max-height: 92vh;
    }

    /* Контейнер video viewer */
    #videoViewerModal {
      width: min(96vw, 1200px);
      max-height: 92vh;
    }

    #mediaViewerModal {
      width: min(96vw, 1240px);
      height: min(92vh, 900px);
      max-height: 92vh;
    }

    /* Общая база media внутри viewer */
    #imageViewerImg,
    #videoViewerPlayer,
    #mediaViewerStage img,
    #mediaViewerStage video {
      display: block;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.45);
      border: 1px solid rgba(255,255,255,0.10);
    }

    /* Изображение в image viewer */
    #imageViewerImg {
      max-width: 100%;
      max-height: 92vh;
      background: rgba(255,255,255,0.04);
    }

    /* Плеер в video viewer */
    #videoViewerPlayer {
      width: 100%;
      max-width: 100%;
      max-height: 92vh;
      background: rgba(0,0,0,0.35);
    }

    #mediaViewerStage {
      width: 100%;
      height: 100%;
      min-height: 260px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #mediaViewerStage img,
    #mediaViewerStage video {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      background: rgba(0,0,0,0.35);
    }

    #mediaViewerStage video {
      width: 100%;
    }

    /* Общая кнопка закрытия media viewer */
    #imageViewerClose,
    #videoViewerClose,
    #mediaViewerClose {
      position: absolute;
      top: -14px;
      right: -14px;

      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(20,20,26,0.88);
      color: rgba(255,255,255,0.92);

      font-size: 24px;
      line-height: 1;
      cursor: pointer;

      box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    }

    /* Hover-состояние кнопки закрытия */
    #imageViewerClose:hover,
    #videoViewerClose:hover,
    #mediaViewerClose:hover,
    .media-viewer-nav:hover:not(:disabled) {
      background: rgba(255,255,255,0.10);
    }

    .media-viewer-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 46px;
      height: 56px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(20,20,26,0.72);
      color: rgba(255,255,255,0.92);
      font-size: 34px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(0,0,0,0.28);
      z-index: 2;
    }

    .media-viewer-nav:disabled {
      opacity: 0.28;
      cursor: default;
    }

    #mediaViewerPrev { left: -62px; }
    #mediaViewerNext { right: -62px; }

    .media-viewer-info {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: rgba(255,255,255,0.88);
      font-size: 13px;
      text-align: center;
      pointer-events: none;
    }

    #mediaViewerCounter {
      font-weight: 800;
      white-space: nowrap;
    }

    #mediaViewerFilename {
      max-width: min(70vw, 720px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: rgba(255,255,255,0.62);
    }

    /* ========================================================= */
    /* [09.3] LIVE SETTINGS MODAL */
    /* ========================================================= */

    #liveModalOverlay {
      position: fixed;
      inset: 0;

      background: rgba(0, 0, 0, 0.62);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      display: none;
      align-items: center;
      justify-content: center;

      padding: 16px;
      z-index: 10002;
    }

    #liveModalOverlay.open {
      display: flex;
    }

    #liveModal {
      width: min(460px, 94vw);
      border-radius: 20px;
      padding: 16px;

      background:
        linear-gradient(rgba(18, 18, 24, 0.86), rgba(18, 18, 24, 0.98)) padding-box,
        linear-gradient(
          135deg,
          rgba(255, 160, 70, 0.48),
          rgba(255, 210, 120, 0.14),
          rgba(255, 90, 130, 0.34)
        ) border-box;

      border: 1.5px solid transparent;

      box-shadow:
        0 24px 70px rgba(0,0,0,0.55),
        0 0 26px rgba(255, 120, 0, 0.16);
    }

    .live-modal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .live-modal-title {
      font-size: 20px;
      font-weight: 950;
      letter-spacing: 0.3px;

      background: linear-gradient(90deg, var(--fire1), var(--fire2), var(--fire3));
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .live-modal-subtitle {
      margin-top: 3px;
      font-size: 12px;
      color: rgba(255,255,255,0.58);
    }

    #liveModalClose {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;

      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.88);

      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }

    #liveModalClose:hover {
      background: rgba(255,255,255,0.12);
    }

    .live-modal-body {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    #liveSettingsModalOverlay {
      position: fixed;
      inset: 0;

      display: flex;
      align-items: center;
      justify-content: center;

      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      transition:
        opacity 0.22s ease,
        visibility 0.22s ease;

      z-index: 10003;

      background: rgba(0, 0, 0, 0.62);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    #liveSettingsModalOverlay.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    #liveSettingsModal {
      width: min(460px, 94vw);
      max-height: 92vh;
      overflow-y: auto;
      border-radius: 20px;
      padding: 16px;

      background: rgba(18, 18, 24, 0.96);
      border: 1px solid rgba(255, 160, 70, 0.28);

      box-shadow:
        0 24px 70px rgba(0,0,0,0.55),
        0 0 26px rgba(255, 120, 0, 0.16);

      transform: translateY(10px) scale(0.98);
      opacity: 0;

      transition:
        transform 0.22s ease,
        opacity 0.22s ease;
    }

    #liveSettingsModalOverlay.open #liveSettingsModal {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .live-settings-header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .live-settings-title {
      font-size: 18px;
      font-weight: 900;
    }

    .live-settings-subtitle {
      margin-top: 3px;
      font-size: 12px;
      color: rgba(255,255,255,0.58);
    }

    #liveSettingsModalClose {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.9);
      cursor: pointer;
      font-size: 22px;
    }

    .live-settings-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .live-settings-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 12px;
      border-radius: 16px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .live-settings-section-title {
      font-size: 14px;
      font-weight: 900;
      color: rgba(255,255,255,0.90);
    }

    .live-settings-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 13px;
      color: rgba(255,255,255,0.78);
    }

    .live-settings-check {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-size: 13px;
      line-height: 1.35;
      color: rgba(255,255,255,0.84);
      cursor: pointer;
      user-select: none;
    }

    .live-settings-check input {
      flex: 0 0 auto;
      margin-top: 2px;
      accent-color: #f1771f;
      cursor: pointer;
    }

    .live-settings-check strong {
      color: rgba(255, 190, 90, 0.95);
      font-size: 11px;
      text-transform: uppercase;
    }

    .live-voice-processing-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .live-voice-processing-option {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 9px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.045);
      cursor: pointer;
      user-select: none;
    }

    .live-voice-processing-option input {
      flex: 0 0 auto;
      margin-top: 2px;
      accent-color: #f1771f;
      cursor: pointer;
    }

    .live-voice-processing-option strong {
      display: block;
      font-size: 13px;
      line-height: 1.25;
      color: rgba(255,255,255,0.90);
    }

    .live-voice-processing-option small {
      display: block;
      margin-top: 3px;
      font-size: 11px;
      line-height: 1.35;
      color: rgba(255,255,255,0.55);
    }

    .live-settings-hint {
      margin-top: -5px;
      font-size: 11px;
      line-height: 1.35;
      color: rgba(255,255,255,0.50);
    }

    .live-settings-field select,
    .live-settings-field input,
    #liveSettingsCameraTestBtn,
    #liveSettingsMicTestBtn,
    #liveSettingsSpeakerTestBtn {
      padding: 9px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.07);
      color: rgba(255,255,255,0.92);
    }

    #liveSettingsCameraTestBtn,
    #liveSettingsMicTestBtn,
    #liveSettingsSpeakerTestBtn {
      cursor: pointer;
      font-weight: 800;
    }

    #liveSettingsCameraPreview {
      display: none;
      width: 100%;
      max-height: 220px;
      border-radius: 14px;
      object-fit: cover;
      background: rgba(0,0,0,0.30);
      border: 1px solid rgba(255,255,255,0.10);
    }

    #liveSettingsCameraPreview.show {
      display: block;
    }

    #liveSettingsMicLevel {
      font-family: monospace;
      font-size: 18px;
      letter-spacing: 1px;
      color: rgba(255, 180, 90, 0.95);
    }

    .live-section {
      padding: 12px;
      border-radius: 16px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .live-section-title {
      display: block;
      margin-bottom: 9px;

      font-size: 13px;
      font-weight: 850;
      color: rgba(255,255,255,0.88);
    }

    .live-mode-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .live-mode-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 4px;

      padding: 11px 11px 11px 34px;
      border-radius: 14px;

      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);

      cursor: pointer;
      user-select: none;
    }

    .live-mode-card:hover {
      background: rgba(255,255,255,0.08);
      box-shadow: 0 0 14px rgba(255,120,0,0.12);
    }

    .live-mode-card input {
      position: absolute;
      left: 11px;
      top: 13px;
      accent-color: #f1771f;
    }

    .live-mode-main {
      font-size: 14px;
      font-weight: 900;
      color: rgba(255,255,255,0.92);
    }

    .live-mode-active-label {
      display: none;
      margin-left: 6px;
      font-size: 11px;
      font-weight: 900;
      color: rgba(80, 220, 130, 0.95);
      text-shadow: 0 0 8px rgba(80, 220, 130, 0.20);
    }

    .live-mode-card.is-active-broadcast .live-mode-active-label {
      display: inline;
    }

    .live-mode-sub {
      font-size: 11px;
      line-height: 1.25;
      color: rgba(255,255,255,0.56);
    }

    #liveAudioDeviceSelect,
    #liveVideoQualitySelect {
      width: 100%;
      height: 42px;
      box-sizing: border-box;

      padding: 0 52px 0 10px; /* справа оставляем место под стрелку */
      border-radius: 12px;

      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);

      font-size: 13px;
      font-weight: 700;
      outline: none;
    }

    #liveAudioDeviceSelect:focus,
    #liveVideoQualitySelect:focus {
      border-color: rgba(255, 160, 70, 0.35);
      box-shadow: 0 0 0 3px rgba(255, 140, 60, 0.12);
    }

    #liveAudioDeviceSelect option,
    #liveVideoQualitySelect option {
      background: #15151c;
      color: white;
    }

    .live-hint {
      margin-top: 7px;
      font-size: 11px;
      line-height: 1.35;
      color: rgba(255,255,255,0.50);
    }

    .live-current-status {
      padding: 10px 12px;
      border-radius: 14px;

      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);

      font-size: 12px;
      color: rgba(255,255,255,0.62);
    }

    .live-current-status.is-blocked {
      color: rgba(255, 190, 90, 0.95);
      border-color: rgba(255, 190, 90, 0.18);
      background: rgba(255, 190, 90, 0.08);
    }

    #liveStartStopBtn {
      width: 100%;
      height: 46px;

      border-radius: 14px;
      border: 1px solid rgba(255, 160, 70, 0.30);
      background: rgba(255, 106, 0, 0.15);
      color: rgba(255,255,255,0.95);

      font-size: 14px;
      font-weight: 900;
      cursor: pointer;

      box-shadow: 0 0 18px rgba(255, 120, 0, 0.13);
    }

    #liveStartStopBtn:hover {
      background: rgba(255, 106, 0, 0.22);
    }

    #liveStartStopBtn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      box-shadow: none;
    }

    #liveStartStopBtn.is-stop {
      background: rgba(255, 80, 80, 0.18);
      border-color: rgba(255, 120, 120, 0.35);
    }

    .live-settings-footer {
      margin-top: 16px;
      display: flex;
      justify-content: center;
    }

    #liveSettingsDoneBtn {
      min-width: 120px;
      padding: 10px 16px;

      border: none;
      border-radius: 12px;

      cursor: pointer;

      font-weight: 700;

      background: rgba(255, 140, 0, 0.18);
      color: #fff;
    }

    #liveSettingsDoneBtn:hover {
      background: rgba(255, 140, 0, 0.28);
    }

    #liveSettingsDoneBtn {
      min-width: 120px;
      padding: 10px 16px;

      border: none;
      border-radius: 12px;

      cursor: pointer;

      font-weight: 700;

      background: rgba(255, 140, 0, 0.18);
      color: #fff;

      transition:
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
    }

    #liveSettingsDoneBtn:hover {
      background: rgba(255, 140, 0, 0.28);

      transform: translateY(-1px);

      box-shadow:
        0 4px 14px rgba(255, 140, 0, 0.22);
    }

    /* ========================================================= */
    /* [10] FIRE BACKGROUND */
    /* ========================================================= */
    
    /* Фон-огонь (по умолчанию скрыт) */
    #fire-bg {
      position: fixed;
      inset: 0;                /* весь экран */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;

      z-index: 0;
    }

    /* Когда курсор над кнопкой "Войти" — показываем искры огня на весь экран */
    body:has(#loginBtn:hover) #fire-bg {
      opacity: 0.15;          /* прозрачность */
    }

    /* Поднимаем интерфейс над фоном-огнём */
    #top-bar,
    #notifications,
    #auth,
    #chat-container {
      position: relative;
      z-index: 1;
    }

    /* ========================================================= */
    /* [11] MOBILE FOUNDATION */
    /* ========================================================= */

    #mobileUsersBtn {
      display: none;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
    }

    #mobileUsersBtn:hover {
      background: rgba(255,255,255,0.12);
    }

    #mobileUsersOverlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.15);
      display: none;
      z-index: 40;
    }

    #mobileUsersOverlay.open {
      display: block;
    }

    /* Чтобы мобильный браузер не зумил input при фокусе */
    #login,
    #password,
    #input {
      font-size: 16px;
    }

    @media (max-width: 900px) {
      body {
        padding:
          max(8px, env(safe-area-inset-top))
          8px
          max(8px, env(safe-area-inset-bottom))
          8px;
        gap: 8px;
        overflow: hidden;
      }

      #top-bar {
        grid-template-columns: auto 1fr auto;
        padding: 10px;
      }

      #top-bar h2 {
        font-size: 20px;
      }

      #mobileUsersBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      #chat-container {
        gap: 0;
        min-height: 0;
      }

      #chat {
        min-width: 0;
        width: 100%;
      }

      #all-users {
        position: fixed;
        top: 0;
        left: calc(-1 * min(82vw, 320px) - 8px);
        bottom: 0;

        width: min(82vw, 320px);
        max-width: none;

        z-index: 50;
        border-radius: 0 18px 18px 0;

        overflow-y: auto;
        padding: 14px 10px calc(14px + env(safe-area-inset-bottom));

        background: transparent;
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.35);

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        transition: left 0.22s ease;
        isolation: isolate;
      }

      #all-users::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;

        background: rgba(18, 18, 24, 0.72);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        z-index: 0;
        pointer-events: none;
      }

      #all-users h3,
      #all-user-list,
      #all-user-list .user-item,
      #all-user-list .user-name,
      #all-user-list .user-status-dot {
        position: relative;
        z-index: 1;
      }

      #all-users.mobile-open {
        left: 0;
      }

      #all-users h3,
      #all-user-list .user-name {
        color: rgba(255,255,255,0.94);
      }

      #all-user-list .user-name {
        text-shadow: 0 0 1px rgba(0,0,0,0.25);
      }

      #messages {
        padding: 10px;
        margin-bottom: 8px;
      }

      #liveRoomPanel.show {
        display: flex;
        flex-direction: column;
        min-height: min(360px, 58vh);
        max-height: clamp(360px, 58vh, 560px);
        min-height: min(360px, 58dvh);
        max-height: clamp(360px, 58dvh, 560px);
      }

      #liveRoomPanel.show.is-collapsed {
        min-height: 0;
        max-height: none;
      }

      #liveRoomScrollArea {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-right: 2px;
      }

      .msg-bubble {
        max-width: 88%;
      }

      .msg-bubble.has-audio,
      .msg-bubble.has-video {
        width: 100%;
        max-width: 100%;
      }

      .msg-image {
        max-width: 100%;
      }

      .msg-audio,
      .msg-audio-placeholder {
        min-width: 0;
      }

      #composerAttachment {
        padding: 8px;
      }

      .composer-attachment-row {
        align-items: flex-start;
        gap: 8px;
        flex-wrap: wrap;
      }

      .composer-attachment-thumb {
        width: 96px;
        height: 96px;
        flex: 0 0 96px;
      }

      .composer-attachment-audio-player,
      .composer-attachment-video-player {
        width: 100%;
        max-width: 100%;
      }

      #input-row {
        gap: 8px;
        padding: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
      }

      #attachBtn {
        width: 44px;
        height: 52px;
        border-radius: 14px;
      }

      #send {
        width: 64px;
        height: 52px;
        border-radius: 14px;
      }

      #input {
        min-height: 52px;
        max-height: 120px;
        border-radius: 14px;
        padding-bottom: 30px;
      }

      #inputStats {
        right: 10px;
        bottom: 8px;
        font-size: 11px;
      }

      #scrollToBottomBtn {
        bottom: 86px;
        width: 54px;
        height: 54px;
      }

      #profileModal,
      #publicProfileModal {
        width: min(100%, 96vw);
        max-height: 88vh;
        overflow-y: auto;
      }

      .profile-avatar {
        width: 180px;
        height: 180px;
      }

      #imageViewerOverlay,
      #videoViewerOverlay,
      #mediaViewerOverlay {
        padding: 12px;
      }

      #imageViewerClose,
      #videoViewerClose,
      #mediaViewerClose {
        top: 8px;
        right: 8px;
      }

      #mediaViewerModal {
        width: 100%;
        height: 86vh;
      }

      #mediaViewerPrev {
        left: 8px;
      }

      #mediaViewerNext {
        right: 8px;
      }

      .media-viewer-nav {
        width: 42px;
        height: 52px;
        background: rgba(20,20,26,0.82);
      }

      .media-viewer-info {
        bottom: 10px;
        padding: 0 64px;
      }
    }