/* =============================================
     Tab Bar
     ============================================= */
     .tab-bar {
        display: flex;
        gap: 4px;
    }
    
    .tab-bar__btn {
        flex: 1;
        border-radius: var(--radius-sm);
        color: var(--color-text-muted);
        font-weight: 500;
    }

    /* Квадратная кнопка-лупа (поиск) — первой, не растягивается как текстовые вкладки */
    .tab-bar__btn--search {
        flex: 0 0 auto;
        width: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .tab-bar__btn--search svg { width: 18px; height: 18px; }
    
    /* Col1 top bar — menu left, logo center, phone right */
    .col1-top-bar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 2px 4px;
    }

    .col1-logo {
      flex: 0 0 auto;
      width: 39px;
      height: 39px;
      border-radius: 50%;      /* обрезанный логотип в круг */
      border: 1px solid rgba(0,0,0,.08);   /* еле серый бордер */
      margin-right: 14px;
      margin-left: 9px;
      object-fit: cover;       /* обрезаем под круг */
      cursor: pointer;
      user-select: none;
    }

    /* Tab badge */
    .tab-badge[hidden] { display: none !important; }

    .tab-bar__btn { position: relative; }

    .tab-badge {
      position: absolute;
      top: 1px;
      right: 1px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      font-size: 11px;
      font-weight: 700;
      line-height: 18px;
      color: #fff;
      background: var(--color-red, #e11d48);
      border-radius: 99px;
      letter-spacing: 0;
      pointer-events: none;
    }

    /* При активной вкладке бирка остаётся красной (не становится белой) */
    .tab-bar__btn.active .tab-badge {
      background: var(--color-red, #e11d48);
      color: #fff;
    }

    .tab-bar__btn.active {
        background: rgba(0,0,0,.06);
        color: var(--color-primary);
        font-weight: 600;
    }

    /* Спиннер загрузки над кнопкой вкладки — маленький серый, по центру верхней кромки
       кнопки (половина над кнопкой, половина на ней). */
    .tab-spinner {
        position: absolute;
        top: 0; left: 50%;
        width: 16px; height: 16px;
        margin: -8px 0 0 -8px;                       /* центр на верхней кромке кнопки */
        border: 2px solid rgba(140,140,140,.25);
        border-top-color: rgba(140,140,140,.85);
        border-radius: 50%;
        animation: tab-spin .7s linear infinite;
        pointer-events: none;
    }
    @keyframes tab-spin { to { transform: rotate(360deg); } }
    
    /* =============================================
         Chat List
         ============================================= */
    .col__middle {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px 6px;
    }
    
    .chat-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        padding: 8px 10px;
        border: none;
        border-radius: var(--radius-md);
        background: transparent;
        cursor: pointer;
        text-align: left;
        transition: background var(--transition);
        font-family: var(--font);
        color: var(--color-text);
        user-select: none;
        -webkit-user-select: none;
    }
    
    .chat-item:hover  { background: rgba(0,0,0,.04); }
    .chat-item.active { background: rgba(10,23,131,.08); }
    
    .chat-item__avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    
    .chat-item__avatar svg { width: 16px; height: 16px; }
    
    .chat-item__avatar--dialog {
        border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
        color: var(--color-primary);
    }
    .chat-item__avatar--peer {
        position: relative;
        background: var(--color-bg);
        border: 2px solid var(--color-border);
    }
    .chat-item__avatar--peer .contact-item__status {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        border: 2px solid var(--color-surface);
        background: var(--color-border);
    }
    .chat-item__avatar--peer .contact-item__status--unauth {
        border-radius: 99px;
        width: 18px;
        height: 6px;
        bottom: 2px;
        right: -8px;
    }
    .chat-item__avatar--peer .contact-item__status--working { background: #22c55e; }
    .chat-item__avatar--peer .contact-item__status--paused  { background: #ef4444; }
    .chat-item__avatar--in-voice { border: 2px solid #22c55e; }
    .chat-item__avatar--group  { background: #475569; }
    .chat-item__avatar--broadcast { background: var(--color-primary); color: #fff; }
    /* Системная кнопка-переключатель Архив/Активные — нейтральный приглушённый вид. */
    .chat-item__avatar--sysview { background: var(--color-border); color: var(--color-text-muted); }
    .chat-item--sysview .chat-item__name { color: var(--color-text-muted); }
    /* «Активные» (выход из архива) — синяя аватарка + чёрное название (акцент возврата). */
    .chat-item--sysview[data-view-toggle="active"] .chat-item__avatar--sysview { background: var(--color-primary); color: #fff; }
    .chat-item--sysview[data-view-toggle="active"] .chat-item__name { color: var(--color-text); }
    /* Аватарка темы («#») — фирменный синий (тема = раздел группы). */
    .chat-item__avatar--topic { background: var(--color-primary); color: #fff; }
    /* Значок темы (эмодзи/символ) по центру аватарки. */
    .chat-item__avatar-emoji { font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; }

    /* Групповая аватарка-identicon: SVG-мозаика во всю площадь + затемняющая плёнка,
       чтобы цвета были приглушённее. Круг задаёт overflow:hidden поверх border-radius. */
    .chat-item__avatar--ident {
        position: relative;
        overflow: hidden;
        background: transparent;
    }
    .chat-item__avatar--ident svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    .chat-item__avatar--ident::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        /* Плёнка яркого синего — подсинивает мозаику, слегка приглушая. */
        background: rgb(0 27 255 / 15%);
        pointer-events: none;
    }
    
    .chat-item__body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    
    .chat-item__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .chat-item__avatar-wrap {
        position: relative;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }
    .chat-item__pin {
        position: absolute;
        bottom: 12px;
        left: -16px;
        width: 13px; height: 13px;
        display: flex; align-items: center; justify-content: center;
        color: #f59e0b;
        pointer-events: none;
    }
    .chat-item__pin svg {
        width: 13px; height: 13px;
    }
    /* Метка «группа с темами» — мелкая иконка «#» с круглой подложкой в верхнем правом углу
       аватарки (визуально — слева от названия группы). */
    .chat-item__topics-badge,
    .chat-item__channel-badge {
        position: absolute;
        top: -2px; right: -7px;
        width: 18px; height: 18px;
        display: flex; align-items: center; justify-content: center;
        color: #fff;
        border-radius: 50%;
        border: 2px solid var(--color-bg);
        box-sizing: content-box;
        pointer-events: none;
    }
    .chat-item__topics-badge  { background: #ff6c00; }             /* группа с темами — оранжевый */
    .chat-item__channel-badge { background: #e920ff; }              /* канал — фиолетовый */
    .chat-item__topics-badge svg,
    .chat-item__channel-badge svg { width: 9px; height: 9px; }
    /* Канал — не решётка, а жирная белая точка внутри синего кружка. */
    .chat-item__channel-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
    
    .chat-item__name {
        font-weight: 600;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .chat-item__time {
        font-size: 11px;
        color: var(--color-text-muted);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .chat-item__last {
        font-size: 12px;
        color: var(--color-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
    }

    /* Скрепка перед «Файл» в превью — размер и цвет как у текста строки. */
    .chat-item__last-clip {
        width: 1em;
        height: 1em;
        vertical-align: -0.13em;
        margin-right: 3px;
    }

    /* Иконка статуса справа в списке (вместо бейджа непрочитанного).
       Моё сообщение: галочка — серая = не прочитано, синяя = прочитано (как в чате).
       Чужое (--in): серая стрелка вниз-влево. */
    .chat-item__read {
        display: inline-flex;
        align-items: center;
        color: #999;
        flex: none;
        margin-left: auto;
    }
    .chat-item__read svg {
        width: 14px;
        height: 14px;
    }
    .chat-item__read--read {
        color: var(--color-primary);
    }

    .chat-item__last--members {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.4;
        display: flex;
        flex-direction: column;
        gap: 1px;
        align-items: flex-start;
    }

    /* Строка участника созвона: серая сумма времени слева + имя */
    .call-member {
        display: flex;
        align-items: baseline;
        gap: 6px;
        max-width: 100%;
        min-width: 0;
    }

    .call-member-time {
        flex: 0 0 auto;
        color: #9ca3af;
        font-variant-numeric: tabular-nums;
    }
    /* «м» — мельче и светлее самого числа */
    .call-member-time::after {
        content: ' м';
        font-size: .8em;
        color: #c3c7ce;
    }
    /* точка-разделитель между временем и именем */
    .call-member-sep {
        flex: 0 0 auto;
        color: #9ca3af;
    }

    .call-member-name {
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Звонок: заголовок (название + мета) слева, время справа */
    .chat-item__call-head {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .call-meta {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 11px;
        color: var(--color-text-muted);
        flex-shrink: 0;
    }
    .call-meta svg { width: 12px; height: 12px; }
    
    /* =============================================
         Badge
         ============================================= */
    .badge {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--color-primary);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
    }
    /* Протухание непрочитанного (8 градаций, каждые 3ч, всего сутки): свежее — яркое синее,
       протухшее — светло-голубое с тёмным текстом. Класс badge--sN ставит utils.js. */
    .badge--s0 { background: #0a1783; color: #fff; }
    .badge--s1 { background: #263192; color: #fff; }
    .badge--s2 { background: #414ba1; color: #fff; }
    .badge--s3 { background: #5d65b0; color: #fff; }
    .badge--s4 { background: #7880be; color: #fff; }
    .badge--s5 { background: #949acd; color: #fff; }
    .badge--s6 { background: #afb4dc; color: #1e293b; }
    .badge--s7 { background: #cbceeb; color: #1e293b; }
    
    /* =============================================
         Empty hint
         ============================================= */
    .empty-hint {
        padding: 24px 12px;
        text-align: center;
        color: var(--color-text-muted);
        font-size: 13px;
    }
    
    /* =============================================
         Col top / bottom padding override
         ============================================= */
    .col__top    { padding: 8px; }
    .col__bottom { padding: 8px; }
    
    /* =============================================
         Contacts
         ============================================= */
    .dept {
        margin-bottom: 4px;
    }
    
    .dept__header {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 6px 8px;
        border: none;
        border-radius: var(--radius-sm);
        background: transparent;
        cursor: pointer;
        font-family: var(--font);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        transition: background var(--transition);
        text-align: left;
    }
    
    .dept__header:hover { background: rgba(0,0,0,.04); }
    
    .dept__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    
    .dept__name { flex: 1; }
    
    .dept__count {
        font-size: 10px;
        font-weight: 600;
        color: var(--color-text-muted);
    }
    
    .dept__chevron {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        transition: transform var(--transition);
    }
    
    .dept--collapsed .dept__chevron { transform: rotate(-90deg); }
    
    .dept__list {
        display: flex;
        flex-direction: column;
        gap: 1px;
        overflow: hidden;
        transition: max-height 250ms ease;
        /* overflow:hidden (нужен для анимации сворачивания) обрезал звёздочку закреплённого,
           которая выступает влево за строку. Даём слева место под клип и компенсируем
           отрицательным margin — строки визуально на месте, звёздочка больше не режется. */
        padding-left: 12px;
        margin-left: -12px;
    }
    
    .dept--collapsed .dept__list {
        max-height: 0 !important;
    }
    
    /* Contact item */
    /* Плавающая кнопка списка звонков (к отмеченным / наверх). */
    .calls-fab {
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 6;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--color-surface);
        color: #f59e0b;
        cursor: pointer;
        box-shadow: var(--shadow-md);          /* как у кнопки промотки чата */
        transition: transform var(--transition), box-shadow var(--transition);
    }
    .calls-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(10,23,131,.18); }
    .calls-fab[hidden] { display: none; }
    .calls-fab svg { width: 20px; height: 20px; }

    /* Отдельная кнопка «наверх» — меньше, над серединой вкладки «Звонки» (left задаёт JS). */
    .calls-up-btn {
        position: absolute;
        bottom: calc(100% + 6px);
        transform: translateX(-50%);
        z-index: 20;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--color-surface);
        color: #4b5563;                 /* тёмно-серый */
        box-shadow: var(--shadow-md);
        cursor: pointer;
        transition: color var(--transition);
    }
    .calls-up-btn:hover { color: var(--color-primary); }   /* синяя иконка при наведении */
    .calls-up-btn[hidden] { display: none; }
    .calls-up-btn svg { width: 16px; height: 16px; }

    .contact-item {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 6px 8px;
        border: none;
        border-radius: var(--radius-sm);
        background: transparent;
        cursor: pointer;
        font-family: var(--font);
        text-align: left;
        transition: background var(--transition);
        color: var(--color-text);
    }
    
    .contact-item:hover { background: rgba(0,0,0,.04); }
    .contact-item.active { background: rgba(10,23,131,.08); }

    /* Кнопка «Диалог» в строке контакта — справа, появляется при наведении (только на десктопе:
       под @media hover, чтобы на тач-устройствах не занимала место и не мешала). */
    .contact-item__dialog-btn {
        margin-left: auto;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--color-text-muted);
        cursor: pointer;
        border-radius: 50%;
    }
    .contact-item__dialog-btn svg { width: 17px; height: 17px; }
    .contact-item__dialog-btn:hover { background: rgba(10,23,131,.10); color: var(--color-primary); }
    @media (hover: hover) and (pointer: fine) {
        .contact-item:hover .contact-item__dialog-btn { display: inline-flex; }
    }
    
    .contact-item__avatar {
        position: relative;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--color-bg);
        border: 2px solid var(--color-border);
        flex-shrink: 0;
    }
    
    .contact-item__status {
        position: absolute;
        bottom: -3px;
        right: -3px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        border: 2px solid var(--color-surface);
        background: var(--color-border);
    }
    
    /* Серая точка в правом верхнем углу = у юзера включён тумблер «Требовать описание звонка»
       (чистый флаг require_call_desc). z-index выше косой бирки «ЗАНЯТ» (6), обводка цветом фона. */
    .contact-item__avatar--reqdesc::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 2px;
        border-radius: 50%;
        background: #8e95a3;
        box-shadow: 0 0 0 1.5px var(--color-surface);
        z-index: 7;
        pointer-events: none;
    }

    /* Shape: --online = circle, --unauth = dash */
    /* Color: --working = green, --paused = red (default = gray until work_status known) */
    
    .contact-item__status--online { }
    .contact-item__status--unauth {
        border-radius: 99px;
        width: 18px;
        height: 6px;
        bottom: 2px;
        right: -8px;
    }
    
    /* Work status colors */
    .contact-item__status--working { background: #22c55e; }
    .contact-item__status--paused  { background: #ef4444; }

    /* Мгновенная подсказка статуса при наведении — без задержки нативного title
       (как tooltip у галочек прочтения). Текст выводится из классов формы (online/unauth)
       и цвета (working/paused), поэтому работает везде, где рисуется индикатор
       (col1/col3/контакты), и сам меняется при смене статуса. Только для мыши.
       Якорим по левому краю точки и ведём вверх — так не режется краем колонки. */
    @media (hover: hover) {
      .contact-item__status:hover::after {
        position: absolute;
        left: 0;
        bottom: calc(100% + 6px);
        background: #1a1c22;
        color: #fff;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
        pointer-events: none;
        z-index: 10000;
      }
      .contact-item__status--online.contact-item__status--working:hover::after { content: "Работает и онлайн"; }
      .contact-item__status--online.contact-item__status--paused:hover::after  { content: "Перерыв, но онлайн"; }
      .contact-item__status--unauth.contact-item__status--working:hover::after { content: "Оффлайн, но работает"; }
      .contact-item__status--unauth.contact-item__status--paused:hover::after  { content: "Перерыв и оффлайн"; }
    }

    .contact-item__name {
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Разница часового пояса с Москвой — блёкло рядом с именем (только если есть) */
    .contact-tz {
        color: #868d9b;
        font-weight: 400;
        font-size: 10px;
        margin-left: 2px;
    }

    /* Звёздочка закреплённого контакта — слева от аватарки (в обоих списках) */
    .contact-pin-star {
        position: absolute;
        left: -16px;
        top: 50%;
        transform: translateY(-50%);
        width: 13px;
        height: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f59e0b;
        pointer-events: none;
    }
    .contact-pin-star svg {
        width: 13px;
        height: 13px;
        filter: drop-shadow(0 0 1.5px var(--color-surface));
    }

    /* Общий список закреплённых — над контактами, с отделяющей чертой */
    .contacts-pinned {
        display: flex;
        flex-direction: column;
        gap: 1px;
        margin-bottom: 20px;   /* отступ между списками (без линии-разделителя) */
    }

    /* Иконка «Закрепить/Открепить» в контекстном меню (обёрнута в span для смены) */
    .dd-pin-icon { display: inline-flex; }

    /* =============================================
       Кабинеты — активные голосовые каналы (Инк.1)
       ============================================= */
    .voice-cabinets {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 8px 8px 0;
      margin-bottom: 20px;   /* увеличенный отступ до следующего списка (вместо линии) */
    }
    /* Нет кабинетов → box.hidden=true: display:flex перебивает атрибут hidden, гасим явно */
    .voice-cabinets[hidden] { display: none; }
    .voice-cabinet-row {
      display: flex;
      align-items: flex-start;   /* иконка у верхнего угла */
      gap: 6px;
    }
    .voice-cabinet {
      position: relative;
      flex: 1;
      min-width: 0;
      background: transparent;
      border: 1px solid var(--color-border);   /* серый бордер */
      border-radius: 8px;
      padding: 10px 12px 24px;   /* верх = низ */
      border-left: 2px solid var(--color-green);
    }
    .voice-cabinet--locked { border-left-color: #eab308; }   /* под замком — жёлтый левый бордер */
    .voice-cabinet__members {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-right: 60px;   /* место под кнопку «Войти» справа-снизу */
    }
    /* Моя инфа о звонке в кабинете (бирки + описание) — перед списком собеседников. */
    .voice-cabinet__req { margin-bottom: 6px; padding-right: 60px; }
    .voice-cabinet__req-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 3px; }
    .voice-cabinet__req-desc { font-size: 12.5px; color: var(--color-text); white-space: normal; overflow-wrap: anywhere; }
    .voice-cabinet__member {
      display: flex;
      align-items: baseline;
      gap: 8px;
      line-height: 1.3;
      min-width: 0;
      padding: 6px 0;        /* +3px до и после строки */
      cursor: pointer;       /* открывает контекст-меню участника */
    }
    .voice-cabinet__time {
      flex-shrink: 0;
      width: 36px;              /* фикс. ширина колонки — имя не сдвигается */
      text-align: right;        /* счётчик по правому краю */
      font-size: 11px;          /* как .contact-voice-time в нижних списках */
      font-weight: 500;
      line-height: 1.2;
      color: var(--color-green);
      font-variant-numeric: tabular-nums;
    }
    .voice-cabinet__time::after {
      content: ' м';
      font-weight: 400;
      opacity: .4;
    }
    /* Дозваниваемый в кабинете: оранжевый спиннер вместо счётчика времени (та же колонка 36px). */
    .voice-cabinet__ring-spinner {
      flex-shrink: 0;
      width: 36px;
      display: flex;
      justify-content: flex-end;   /* по правому краю, как таймер */
      align-self: center;
      color: #f97316;              /* оранжевый дозвона (как бордер --ringing) */
    }
    .voice-cabinet__ring-spinner svg {
      width: 13px;
      height: 13px;
      animation: voice-cab-ring-spin .9s linear infinite;
    }
    @keyframes voice-cab-ring-spin { to { transform: rotate(360deg); } }
    .voice-cabinet__name {
      font-size: 14px;          /* как .contact-item__name в нижних списках */
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Инк.6: при поиске — участники, не подходящие под запрос, приглушены */
    .voice-cabinet__member--dim { opacity: .35; }
    .voice-cabinet__enter {
      position: absolute;
      right: -1px;                          /* прилипает к нижне-правому углу — без зазора */
      bottom: -1px;
      border: none;
      background: color-mix(in srgb, var(--color-green, #22c55e) 20%, transparent);   /* полупрозрачный зелёный */
      color: #fff;
      font-size: 10px;
      padding: 8px 16px 7px;
      /* внешний (нижне-правый) угол совпадает со скруглением кабинета, внутренний — мягкий */
      border-radius: 8px 0 8px 0;
      cursor: pointer;
      text-transform: uppercase;
        letter-spacing: 1px;
        color: #112317;
        transition: .3s;
    }
    .voice-cabinet__enter:hover { background: var(--color-green, #22c55e); color: #fff; }   /* при наведении — сплошной */
    /* Под замком — жёлтая, некликабельная (нажатие заблокировано) */
    .voice-cabinet__enter--locked {
      background: color-mix(in srgb, #eab308 25%, transparent);
      color: #eab308;
      cursor: not-allowed;
    }
    .voice-cabinet__enter--locked:hover { background: color-mix(in srgb, #eab308 25%, transparent); color: #eab308; }
    
    
    /* =============================================
       Contacts search bar
       ============================================= */
    .contacts-search {
      padding: 8px;   /* верхний отступ над полем уменьшен на 2px (было 8) */
      position: sticky;
      top: 0;
      background: var(--color-surface);
      z-index: 10;
    }
    
    .contacts-search__wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--color-surface);
      border: 1.5px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 0 6px 0 10px;
    }
    .contacts-search__wrap:focus-within { border-color: #b5becb; }

    .contacts-search__icon {
      display: flex;
      color: var(--color-text-muted);
      flex-shrink: 0;
    }
    .contacts-search__icon svg { width: 16px; height: 16px; }

    .contacts-search__input {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      outline: none;
      font-size: 14px;
      color: var(--color-text);
      padding: 8px 0;
      font-family: var(--font);
    }
    .contacts-search__input::placeholder { color: var(--color-text-muted); }
    
    .contacts-search__clear {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      padding: 0;
      line-height: 0;
      border: none;
      border-radius: 50%;
      background: none;
      color: var(--color-text-muted);
      cursor: pointer;
      flex-shrink: 0;
    }
    .contacts-search__clear:hover { background: rgba(0,0,0,.08); color: var(--color-text); }
    .contacts-search__clear svg   { width: 14px; height: 14px; }
    
    /* Call type chat avatar */
    .chat-item__avatar--call { background: #9098a8; color: #fff; }
    
    /* Col1 top bar — menu left, phone right */
    .col1-top-bar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 2px 4px;
    }
    /* Правая группа кнопок топбара кол-1: один margin-left:auto на контейнер, внутри — flex-gap,
       чтобы кнопка пропущенных стояла вплотную к «Занят» (без деления свободного места). */
    .col1-top-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
    /* Кнопка необработанных пропущенных: круглая, серая иконка + фиолетовая бирка-счётчик в углу. */
    .col1-missed-btn { color: var(--color-text-muted); position: relative; }
    .col1-missed-btn[hidden] { display: none; }
    .col1-missed-btn svg { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
    .col1-missed-count {
      position: absolute; top: 0; left: 0;
      min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
      display: flex; align-items: center; justify-content: center;
      background: #8b5cf6; color: #fff; border-radius: 999px;
      font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    }
    .col1-missed-count[hidden] { display: none; }
    /* Есть открытые обращения, но новых нет — кнопка остаётся входом на страницу, приглушённая. */
    .col1-missed-btn--quiet { opacity: .6; }
/* =============================================
   SW Update Banner
   ============================================= */
.sw-update-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 6px 2px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    border-radius: var(--radius-md);
}

.sw-update-banner__text {
    font-size: 13px;
    color: var(--color-text);
    font-weight: 500;
    flex: 1;
}

.sw-update-banner__btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* =============================================
   About iframe
   ============================================= */
.about-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
}
/* ── Обновление APK из приложения (app-update.js) ─────────────────────────── */
.about-update-btn { margin-left: auto; font-size: 13px; white-space: nowrap; }

.app-update-banner {
    position: fixed;
    left: 50%;
    bottom: calc(16px + var(--safe-bottom, 0px));
    transform: translateX(-50%);
    z-index: 9000;
    width: min(440px, calc(100vw - 24px));
    background: var(--color-surface, #1b1e30);
    border: 1px solid var(--color-border, #2c3050);
    border-left: 3px solid var(--green, #22c55e);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}
.app-update-banner__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.app-update-banner__text strong { font-size: 14px; }
.app-update-banner__ver { font-size: 12px; color: var(--muted, #9ca3af); font-variant-numeric: tabular-nums; }
.app-update-banner__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.app-update-banner__btn {
    border: 1px solid var(--color-border, #2c3050);
    background: transparent;
    color: var(--color-text, #e6e8f0);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
}
.app-update-banner__btn:disabled { opacity: .7; cursor: default; }
.app-update-banner__btn--primary {
    background: var(--green, #22c55e);
    border-color: var(--green, #22c55e);
    color: #fff;
    font-weight: 600;
}
.app-update-banner__bar {
    flex: 1 0 100%;
    height: 4px;
    background: var(--color-border, #2c3050);
    border-radius: 3px;
    overflow: hidden;
}
.app-update-banner__bar-fill {
    height: 100%;
    width: 2%;
    background: var(--green, #22c55e);
    transition: width .2s ease;
}