/* contactsModal.css */
/* ///////////////////////////////////////////////////////////////////////////////////////////////// */
/* --- Стили для модального окна контактов --- */

/* Оверлей (невидимый контейнер, не блокирующий клики) */
.contacts-modal-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    z-index: 8000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
}

    .contacts-modal-overlay.visible {
        visibility: visible;
        opacity: 1;
    }

/* Контентная часть окна (сама панель) */
.contacts-modal-content {
    pointer-events: auto;
    background-color: #f8f9fa;
    height: 100%;
    width: 350px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.contacts-modal-overlay.visible .contacts-modal-content {
    transform: translateX(0);
}

/* Шапка окна */
.contacts-modal-header {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    gap: 10px;
    z-index: 1001;
}

/* Стили для кнопки "Вход/Регистрация" */
.login-register-btn {
    /* --- Свойства Flexbox для выравнивания --- */
    display: flex; /* Включаем Flexbox */
    align-items: center; /* Выравниваем аватар и текст по вертикальному центру */
    gap: 8px; /* Добавляем отступ между аватаром и текстом */
    /* --- Свойства для управления размером и позицией --- */
    flex-grow: 1; /* Занимает доступное место */
    min-width: 0; /* КЛЮЧЕВОЕ СВОЙСТВО: Разрешает кнопке сжиматься */
    margin-left: auto; /* Отталкивает кнопку вправо */
    /* --- Внешний вид  --- */
    background-color: black;
    color: white;
    padding: 3px 8px; /* Немного увеличим отступ для красоты */
    border: 1px solid black;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .login-register-btn:hover {
        background-color: orange;
        color: black;
        border-color: black;
    }

/* 
   Стили для текстового элемента ВНУТРИ кнопки
*/
#loginRegisterBtnText {
    /* Применяем три "волшебных" свойства для многоточия */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* (Опционально) Заставляем текст занять все оставшееся место в кнопке */
    flex-grow: 1;
    min-width: 0; /* И разрешаем ему сжиматься */
}

/* Кнопка закрытия */
.contacts-modal-close {
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    color: black;
    font-size: 40px;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    padding-bottom: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .contacts-modal-close:hover {
        background-color: red;
        color: white;
    }

/* Поиск */
.contacts-modal-search {
    padding: 3px 3px;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

/* Новая обертка для поля поиска и кнопки "Создать" */
.search-and-add-wrapper {
    display: flex;
    align-items: center; /* Выравниваем по вертикали */
    gap: 0px; /* Отступ между полем поиска и кнопкой */
}

/* Обертка для поля ввода */
.search-input-wrapper {
    position: relative;
    flex-grow: 1; /* Заставляем поле поиска занять все доступное место */
}

/* Убираем стандартный крестик очистки в браузерах Chrome, Safari, Edge */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* На всякий случай для Internet Explorer / старого Edge */
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* Новая кнопка "Создать" */
.create-new-btn {
    /* Размеры и базовые стили остаются */
    width: auto; /* <<< ИЗМЕНЕНИЕ: Ширина теперь будет автоматической по контенту */
    min-width: 80px; /* Можно задать минимальную ширину */
    height: 35px;
    padding: 0 5px; /* <<< ИЗМЕНЕНИЕ: Задаем горизонтальные отступы */
    border: 1px solid #ccc;
    background-color: #e9ecef;
    border-radius: 5px;
    cursor: pointer;
    flex-shrink: 0;
    /* Стили для Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* <<< ИЗМЕНЕНИЕ: Отступ между иконкой и текстом */

    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin-left: 3px;
}

    .create-new-btn:hover {
        background-color: rgb(119 189 67);
        border-color: #333;
    }

    /* Стили для ИКОНКИ внутри кнопки */
    .create-new-btn img {
        /* <<< КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Задаем фиксированный размер >>> */
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    /* Стили для ТЕКСТА внутри кнопки */
    .create-new-btn span {
        font-size: 0.9rem;
        font-weight: 500;
        color: black;
    }

/* Иконка поиска */
.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    opacity: 0.5;
}

/* Поле ввода */
.contacts-modal-search input {
    width: 100%;
    padding: 5px 12px 5px 40px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Список контактов */
/* Родительский контейнер теперь просто flex-обертка */
/* 1. Возвращаем ОСНОВНОМУ контейнеру ответственность за прокрутку */
.contacts-modal-list {
    position: relative;
    flex-grow: 1;
    overflow-y: auto; 
    padding: 5px; 
}

/* Контейнер для результатов поиска в списке контактов */
.search-results-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* <<< ЭТО КЛЮЧЕВОЕ ИЗМЕНЕНИЕ */

    background-color: #ffffff;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.search-results-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0; /* Шапка не должна сжиматься */
    position: relative;
    z-index: 1000;
}

.search-results-title {
    font-weight: 600;
    color: #333;
    padding: 0 40px;
    text-align: center; /* Дополнительно центрируем сам текст внутри span */
}

.search-results-close {
    /* 1. Задаем явные квадратные размеры */
    width: 25px;
    height: 25px;
    /* 2. Используем Flexbox для идеального центрирования крестика */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 3. Убираем лишние отступы, которые могут помешать центрированию */
    padding: 0;
    /* Эти стили остаются или корректируются */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 30px; /* Размер самого символа "×" */
    color: black;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
    .search-results-close span {
        position: relative; /* Включаем относительное позиционирование для span */
        top: -2px; /* Смещаем сам символ вверх */
        line-height: 1; /* Дополнительно убираем высоту строки для точности */
    }


    .search-results-close:hover {
        color: white; /* Делаем сам крестик белым, чтобы он был виден на красном фоне */
        background-color: red; /* Задаем красный фон при наведении */
    }

.search-results-list {
    /* Список результатов будет занимать все оставшееся место и получит свою прокрутку */
    flex-grow: 1;
    overflow-y: auto;
    padding: 5px;
}

/* Новая логика: подсказка слева от кнопки, по центру вертикали */
.header-tooltip-button.tooltip-left::before {
    bottom: auto;
    top: 50%;
    right: 105%; /* Выносим влево от кнопки с небольшим зазором */
    left: auto;
    transform: translateY(-50%); /* Центрируем точно по вертикали кнопки */
    margin-bottom: 0;
    margin-right: 5px; /* Отступ от иконки плюсика */
    white-space: nowrap; /* Гарантируем, что текст в одну строку */
}

/* =============================================== */
/* === СТИЛИ ДЛЯ КНОПОК-ФИЛЬТРОВ "ЧАТЫ/СТОЛЫ" === */
/* =============================================== */

/* Контейнер для вкладок-фильтров */
.contacts-filter-tabs {
    display: flex; /* Выстраиваем кнопки в ряд */
    padding: 2px; /* Небольшой отступ от краев */
    background-color: #e9ecef; /* Слегка серый фон, чтобы отделить от остального контента */
    border-bottom: 1px solid #ddd;
    flex-shrink: 0; /* Запрещаем контейнеру сжиматься */
}

/* Общий стиль для каждой кнопки-вкладки */
.filter-tab-btn {
    flex-grow: 1; /* Заставляем обе кнопки занять по 50% ширины */
    padding: 4px;
    font-size: 0.9rem;
    font-weight: 600; /* Делаем текст жирным */
    text-align: center;
    background-color: transparent; /* По умолчанию кнопки прозрачные */
    color: #6c757d; /* Серый цвет для неактивного текста */
    border: 1px solid transparent; /* Прозрачная рамка, чтобы не было "прыжка" при появлении рамки у активной кнопки */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease; /* Плавные переходы */
}

    /* Стиль для кнопки при наведении (если она НЕ активна) */
    .filter-tab-btn:not(.active):hover {
        background-color: #dee2e6; /* Слегка темнее фон */
    }

    /* Стиль для АКТИВНОЙ кнопки (с классом .active) */
    .filter-tab-btn.active {
        background-color: #fff; /* Белый фон */
        color: #000; /* Черный текст */
        border-color: #ced4da; /* Видимая серая рамка */
        box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Легкая тень для эффекта "приподнятости" */
        cursor: default; /* У активной вкладки курсор обычный */
    }

/* ================================================== */
/* === Стили для кнопок контактов, чатов и столов === */
/* ================================================== */
/* Основной контейнер-кнопка */
.user-item-btn,
.chat-item-btn,
.table-item-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 3px;
    background: none;
    border: none;
    border-radius: 0px;
    text-align: left;
    cursor: default;
    transition: background-color 0.2s ease;
}
/* Контейнер для двух строк текста */
.user-item-text,
.chat-item-text,
.table-item-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    overflow: hidden;
    min-width: 0; /* Разрешает элементу сжиматься меньше его содержимого */
}
/* 4. Верхняя строка */
.user-item-title,
.chat-item-title,
.table-item-title {
    display: block;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* Разрешаем названию занимать все свободное место */
    min-width: 0; /* Разрешаем названию сжиматься */
}

/* Контейнер для строки с названием и временем */
.chat-item-title-row,
.user-item-title-row,
.table-item-title-row {
    display: flex; /* Включаем Flexbox */
    justify-content: space-between; /* <-- Главная магия: расталкивает элементы по краям */
    align-items: baseline; /* Выравнивает текст по базовой линии, если шрифты разного размера */
    width: 100%; /* Занимает всю ширину */
    gap: 8px; /* Небольшой отступ между элементами, если они сойдутся */
}

/* Стили для самого времени */
.chat-item-timestamp,
.user-item-timestamp,
.table-item-timestamp {
    font-size: 0.75rem; /* Маленький шрифт */
    color: #6c757d; /* Серый цвет, как у подзаголовка */
    white-space: nowrap; /* Запрещаем перенос времени */
    flex-shrink: 0; /* Запрещаем времени сжиматься */
}


/* ========================================= */
/* === Стили для кнопок типа "Контакт" === */
/* ========================================= */

/* 2. Аватар контакта */
.user-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    /* Устанавливаем градиент как фон по умолчанию */
    background-image: radial-gradient(circle at center, #C1D5C0, #D0F0C0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 5. Нижняя строка (Статус или сообщение) */
.user-item-subtitle {
    display: block;
    font-size: 0.875rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================================== */
/* === Стили для кнопок типа "Чат" === */
/* ===================================== */

/* Обертка для аватара чата */
.chat-item-avatar-wrapper {
    
    width: 40px;
    height: 40px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* стиль для самого аватара чата */
.chat-item-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Устанавливаем градиент как фон по умолчанию */
    background-image: radial-gradient(circle at center, #C1D5C0, #D0F0C0);
    /* Настраиваем отображение фоновой картинки (когда она будет) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    /* Новая иконка перед названием чата */
.chat-item-title::before {
    /* 1. Создаем пустой блочный элемент */
    content: '';
    display: inline-block; /* Ведет себя как картинка в тексте, но позволяет задать размеры */
    /* 2. Задаем ему нужные размеры */
    width: 15px;
    height: 15px;
    /* 3. Устанавливаем картинку как ФОН */
    background-image: url('/images/chat.webp');
    /* 4. Масштабируем фон, чтобы он полностью поместился в наш блок 10x10 */
    background-size: contain; /* или 'cover', если нужно заполнить, обрезав лишнее */
    background-repeat: no-repeat;
    background-position: center;
    /* 5. Остальные стили оставляем как были */
    margin-right: 6px;
    flex-shrink: 0;
}
.chat-item-btn.is-admin .chat-item-title::before {
    background-image: url('/images/chat-admin.webp');
}

/* 5. Нижняя строка (Превью сообщения) */
.chat-item-subtitle {
    display: block; /* <<< ИСПРАВЛЕНИЕ: Заставляем элемент занимать всю строку */
    font-size: 0.875rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ======================================= */
/* === Стили для кнопок типа "Стол" === */
/* ======================================= */

/* Обертка для аватара/иконки стола */
.table-item-avatar-wrapper {
   
    width: 50px;
    height: 30px;
    margin-right: 12px;
    flex-shrink: 0;
    position: relative;
}

/* Стиль для аватара/иконки стола */
.table-item-avatar {
    /* Размеры должны быть 100%, чтобы заполнить обертку */
    width: 100%;
    height: 100%;
    border-radius: 10%;
    background-image: radial-gradient(circle at center, #C1D5C0, #D0F0C0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Новая иконка перед названием чата */
.table-item-title::before {
    /* 1. Создаем пустой блочный элемент */
    content: '';
    display: inline-block; /* Ведет себя как картинка в тексте, но позволяет задать размеры */
    /* 2. Задаем ему нужные размеры */
    width: 20px;
    height: 20px;
    /* 3. Устанавливаем картинку как ФОН */
    background-image: url('/images/table-icon.png');
    /* 4. Масштабируем фон, чтобы он полностью поместился в наш блок 10x10 */
    background-size: contain; /* или 'cover', если нужно заполнить, обрезав лишнее */
    background-repeat: no-repeat;
    background-position: center;
    /* 5. Остальные стили оставляем как были */
    margin-right: 6px;
    flex-shrink: 0;
    vertical-align: middle;
}
/* Новое правило для иконки админа в списке контактов */
.table-item-btn.is-admin .table-item-title::before {
    background-image: url('/images/table-admin-icon.png');
}

/* -------------------------------------------------------------------------------------------------------------- */
/* Стили для обёртки кнопки чата или стола и кнопки добавить в контакты */

/* Обертка для каждого элемента списка */
.contact-item-container {
    position: relative; /* Обязательно для позиционирования дочерней кнопки */
    display: flex; /* Чтобы элементы внутри выстроились в ряд */
    align-items: center; /* Выравнивание по вертикали */
    cursor: pointer;
    border-radius: 5px; /* Задаем скругление для всей строки */
    border-bottom: 1px solid #f0f0f0;
}
    .contact-item-container:hover {
        background-color: #e9ecef; /* Наш серый цвет фона */
    }
    /* Заставляем основную кнопку растягиваться на доступное место */
    .contact-item-container .chat-item-btn,
    .contact-item-container .table-item-btn {
        flex-grow: 1;
        min-width: 0; /* Важный хак для правильной работы text-overflow внутри flex */
    }
    .contact-item-container.is-active-with-menu {
        border: 1px solid grey;
        border-bottom: none;
        /* Убираем скругление нижних углов, чтобы "слиться" с меню/чатом */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        /* (Опционально) Можно сделать фон чуть темнее, чтобы было видно, что элемент "нажат" */
        background-color: #e9ecef;
    }

        /* 
   Правило: "Найти элемент с классом .chat-item-subtitle ИЛИ .user-item-subtitle,
   который находится ВНУТРИ контейнера с классом .is-active-with-menu"
*/
        .contact-item-container.is-active-with-menu .chat-item-subtitle,
        .contact-item-container.is-active-with-menu .user-item-subtitle {
            /* И просто скрыть его */
            display: none;
        }

        /* Скрываем шестиугольник, если чат/меню открыты */
        .contact-item-container.is-active-with-menu .unread-hexagon {
            /* Используем !important, чтобы перебить инлайновый стиль style="display: flex", 
               который ставит JavaScript */
            display: none !important;
        }

/* Класс для скрытия отфильтрованных элементов */
.contact-item-hidden {
    display: none;
}

/* === СТИЛИ ДЛЯ РЕЖИМА Открытого чата === */

/* 1. Когда открыт чат, сам список становится flex-контейнером на всю высоту */
.contacts-modal-list.in-chat-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Тот самый отступ снизу, о котором вы говорили */
    padding: 5px 5px 20px 5px;
    box-sizing: border-box;
    overflow: hidden; /* Убираем двойную прокрутку */
}

    /* 2. Растягиваем контейнер инстанса чата */
    .contacts-modal-list.in-chat-view .chat-instance-container {
        flex: 1; /* Занимает всё свободное место */
        display: flex;
        flex-direction: column;
        min-height: 0; /* Важно для корректной работы скролла внутри */
        margin-top: 0;
        border-top: none;
    }

    /* 3. Гарантируем, что сам чат внутри растянется на 100% родителя */
    .contacts-modal-list.in-chat-view .chat-container {
        flex: 1;
        height: 100%;
    }

    /* 1. Когда открыт чат, контейнер результатов поиска перестает быть абсолютным */
    .contacts-modal-list.in-chat-view #searchResultsContainer {
        position: static; /* Отменяем absolute, чтобы учитывать padding родителя */
        display: flex;
        flex-direction: column;
        height: 100%; /* Растягиваем на всю высоту с учетом padding родителя */
        width: 100%;
        background-color: transparent; /* Чтобы не перекрывать фон модалки */
    }

    /* 2. Список результатов поиска тоже превращаем в гибкую колонку */
    .contacts-modal-list.in-chat-view .search-results-list {
        display: flex;
        flex-direction: column;
        flex: 1; /* Занимает всё доступное пространство */
        padding: 0; /* Обнуляем внутренние отступы, они уже есть у родителя */
        margin: 0;
        overflow: hidden; /* Скролл будет только внутри чата */
    }

        /* 3. Убираем лишние рамки у чата внутри поиска, чтобы он слился с кнопкой */
        .contacts-modal-list.in-chat-view .search-results-list .chat-instance-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-top: 0; /* Прилипает к кнопке сверху */
        }

        .contacts-modal-list.in-chat-view .search-results-list .chat-container {
            border-top: none;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

    /* Стиль для подсветки ПОСЛЕДНЕГО ВЗАИМОДЕЙСТВИЯ */
    .contact-item-container.last-interacted {
        background-color: rgb(206, 236, 192); /* Светло-зеленый цвет */
        /* Убираем !important, если это возможно, но оставим для надежности */
        transition: background-color 0.2s ease-in-out;
    }

        /* 
   Дополнительное правило: когда контейнер подсвечен зеленым, 
   эффект серого фона при наведении не должен срабатывать, чтобы цвета не смешивались.
*/
        .contact-item-container.last-interacted:hover {
            background-color: rgb(200, 228, 192); /* Остается тот же зеленый */
        }

/* Кнопка "Добавить в контакты" */
.add-to-contacts-btn {
    width: 25px;
    height: 25px;
    border-radius: 0%;
    border: 1px solid #dee2e6;
    color: #495057;
    display: flex;
    border-radius: 10%; /* Задаем скругление для всей строки */
    align-items: center;
    justify-content: center;
    padding: 0; /* Убедимся, что нет отступов */
    cursor: pointer;
    flex-shrink: 0; /* Кнопка не будет сжиматься */
    margin-left: 0px; /* Небольшой отступ от основной кнопки */
    margin-right: 8px;

    background-color: transparent; /* Убираем белый фон */
    /* Накладываем иконку поверх градиента */
    background-image: url('/images/add-icon.png'), radial-gradient(circle at center, #C1D5C0, #D0F0C0);
    background-size: 100%, cover;
    background-repeat: no-repeat;
    background-position: center;

    transition: background-color 0.2s, border-color 0.2s, opacity 0.5s ease-out;
}

    .add-to-contacts-btn:hover {
        background-color: rgb(156, 200, 45); /* Наш целевой зеленый цвет */
        /* <<< ИСПРАВЛЕНИЕ: Оставляем только иконку, убирая градиент >>> */
        background-image: url('/images/add-icon.png');
        background-size: 100%;
        border-color: grey;
        color: white;
    }
    .add-to-contacts-btn.removing {
        opacity: 0;
    }

/* -------------------------------------------------------------------------------------------------------------- */
/* Стили для подсказок кнопок в контактах */
.contacts-tooltip {
    position: relative; /* Обязательно, чтобы подсказка позиционировалась относительно кнопки */
}

    /* 2. Сама подсказка (создается с помощью псевдоэлемента) */
    .contacts-tooltip::before {
        content: attr(data-tooltip); /* <-- Магия: берем текст из data-атрибута */
        position: absolute;
        /* Позиционируем подсказку над кнопкой */
        bottom: 50%; /* Чуть выше кнопки (100% + отступ) */
        left: 0%;
       
        /* Внешний вид */
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 3px 7px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap; /* Чтобы текст не переносился */
        /* Плавное появление */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        /* Чтобы не мешала кликам */
        pointer-events: none;
        z-index: 1000; /* Чтобы была поверх других элементов */
    }

    /* 3. Показываем подсказку при наведении на кнопку ИЛИ при добавлении класса force-tooltip */
    .contacts-tooltip:hover::before,
    .contacts-tooltip.force-tooltip::before { 
        opacity: 1;
        visibility: visible;
    }

/* -------------------------------------------------------------------------------------------------------------- */
/* --- Стили для контейнера личного кабинета внутри окна контактов --- */

#personalCabinetPanel {
    display: none; /* Скрыт по умолчанию */
    position: relative;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    margin: 15px auto 0 auto; /* Отступ сверху и горизонтальное центрирование */
    /* Добавьте, если нужно */
    overflow-y: auto;
    max-height: 80vh;
}

/* Заголовок личного кабинета */
.header-with-avatar {
    display: flex;
    align-items: center; 
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    position: relative;
}

/* Заголовок кнопка */
.personal-cabinet-title {
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.2;
}

/* Иконка в заголовке */
.title-icon {
    width: 20px;
    height: 20px;
    transition: filter 0.2s ease;
    transform: translateY(1px);
}

/* Кнопка закрытия */
.header-with-avatar .close-button {
    align-self: flex-start;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: black;
    font-size: 40px;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    padding-bottom: 8px;
    box-sizing: border-box;
    transition: color 0.2s ease, background-color 0.2s ease;
    margin-left: auto;
}

    .header-with-avatar .close-button:hover {
        background-color: red;
        color: white;
    }

/* Обертка для аватара в личном кабинете (для позиционирования подсказки) */
.personal-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 10px; 
}

/* Аватар */
.avatar-image {
    width: 100%; /* Теперь занимает всю ширину обертки */
    height: 100%; /* Теперь занимает всю высоту обертки */
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    background-image: radial-gradient(circle at center, #C1D5C0, #D0F0C0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .avatar-image:hover {
        cursor: pointer;
    }

/* Стили формы */
.personal-cabinet-modal-content .form-group {
    margin-bottom: 10px;
}

.personal-cabinet-modal-content label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.personal-cabinet-modal-content input.form-control {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Кнопки сохранения и выхода */
.personal-cabinet-buttons {
    display: flex;
    justify-content: flex-end; /* Прижимаем содержимое ВПРАВО */
    margin-top: 20px;
}

    .personal-cabinet-buttons .buttonExit {
        width: auto;
        background-color: black;
        border: 1px solid black;
        color: white;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

        .personal-cabinet-buttons .buttonExit:hover {
            background-color: orange;
            color: white;
            border-color: black;
        }

/* Сообщение об ошибках и успехах */
#personalCabinetMessage {
    font-size: 14px;
}

/* Иконка кнопки выхода */
.logout-button-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}


/* --- Стили для встроенных НАСТРОЕК в личном кабинете --- */

/* Общий контейнер для контента настроек */
.settings-content-area {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Расстояние между элементами настроек */
}

/* Стили для кнопок-опций (Настройка звука и камеры) */
.settings-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background-color: #f1f3f5;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .settings-option-btn:hover {
        background-color: #e9ecef;
        border-color: #ced4da;
    }

.settings-option-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Блок выбора языка */
.language-selector-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #f1f3f5;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.language-selector-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.language-buttons-container {
    display: flex;
    gap: 8px;
}

/* Кнопки выбора языка */
.language-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}

    .language-btn:hover {
        background-color: #e9ecef;
    }

    .language-btn.active { /* Класс для активного языка */
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }

.language-flag-icon {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
}

/* Текст с предложением удалить профиль */
.delete-profile-prompt {
    font-size: 0.9rem;
    color: #6c757d;
    text-align: center;
    margin: 10px 0 0 0;
}

    .delete-profile-prompt a {
        color: #dc3545; /* Красный цвет для опасного действия */
        font-weight: 500;
        text-decoration: underline;
    }

        .delete-profile-prompt a:hover {
            text-decoration: none;
        }

/* --- Стили для модального окна ПОДТВЕРЖДЕНИЯ УДАЛЕНИЯ --- */

/* Оверлей (фон) */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Полупрозрачный черный фон */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    /* Управление видимостью для плавного появления */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* САМОЕ ГЛАВНОЕ: z-index выше, чем у окна контактов! */
    z-index: 10002;
}

    /* Класс для показа окна */
    .confirm-overlay.visible {
        opacity: 1;
        visibility: visible;
    }

/* Сам диалоговый блок */
.confirm-dialog {
    background-color: white;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    max-width: 450px;
    width: 100%;
    text-align: center;
    /* Эффект плавного "выезда" при появлении */
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.confirm-overlay.visible .confirm-dialog {
    transform: scale(1);
}

/* Текст внутри диалога */
.confirm-dialog-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin-top: 0;
    margin-bottom: 25px;
}

/* Контейнер для кнопок */
.confirm-dialog-buttons {
    display: flex;
    justify-content: center; /* Или flex-end, если хотите прижать вправо */
    gap: 50px; /* Расстояние между кнопками */
}

/* Общие стили для кнопок */
.confirm-btn {
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

/* Кнопка "Вернуться" (Отмена) */
.confirm-btn-cancel {
    background-color: #dedede;
    color: #333;
    border: 1px solid #dee2e6;
}

    .confirm-btn-cancel:hover {
        background-color: rgb(119 189 67);
        color: white;
    } 

/* Кнопка "Удалить" (Опасное действие) */
.confirm-btn-delete {
    background-color: #dc3545; /* Красный цвет */
    color: white;
    border: 1px solid #dc3545;
}

    .confirm-btn-delete:hover {
        background-color: #c82333; /* Более темный красный при наведении */
        border-color: #c82333;
    }


/* Кнопка "Выйти" в окне подтверждения выхода — ЧЕРНАЯ ПО УМОЛЧАНИЮ (ОРАНЖЕВАЯ НА HOVER) */
/* Цветовая гамма полностью совпадает с кнопкой .buttonExit из личного кабинета */
.confirm-btn-exit {
    background-color: black;
    color: white;
    border: 1px solid black;
}

    .confirm-btn-exit:hover {
        background-color: orange; /* Наш оранжевый цвет при наведении */
        border-color: black;
        color: white;
    }

/* Контейнер для чекбоксов */
.confirm-options-container {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Расстояние между строками */
    margin-bottom: 25px;
    padding: 0 10px; /* Небольшой отступ сбоку */
}

/* Строка: Чекбокс + Текст */
.confirm-checkbox-row {
    display: flex;
    align-items: center; /* Выравнивание по центру по вертикали */
    gap: 10px; /* Отступ между квадратиком и текстом */
    cursor: pointer;
    text-align: left; /* Текст выравниваем по левому краю */
}

    /* Сам чекбокс */
    .confirm-checkbox-row input[type="checkbox"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: rgb(119 189 67);
    }

/* Текст */
.checkbox-label {
    font-size: 0.95rem;
    color: #333;
    user-select: none; /* Чтобы текст не выделялся при клике */
}

/* ========================================= */
/* === Стили для всплывающих меню настроек === */
/* ========================================= */

    .chat-settings-menu,
    .table-settings-menu,
    .chat-usermenu,
    .table-usermenu,
    .user-contact-menu {
        width: 100%; /* Занимает всю ширину родителя (списка) */
        background-color: #f8f9fa; /* Слегка сероватый фон для выделения */
        border-top: none;
        border-right: 1px solid grey;
        border-bottom: 1px solid grey;
        border-left: 1px solid grey;
        /* Убираем скругление верхних углов */
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        /* Добавляем скругление нижних углов, чтобы завершить блок */
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); /* Тень внутрь */
        padding: 5px;
        margin-top: 0px; /* Отступ сверху от кнопки */
        margin-bottom: 10px; /* Отступ снизу до следующей кнопки */
        display: flex;
        flex-direction: column;
        gap: 5px;
        box-sizing: border-box;
        /* Добавляем плавное появление */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px); /* Слегка "подпрыгнет" при появлении */
        transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
    }

    .chat-settings-menu.visible,
    .table-settings-menu.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        padding: 5px; /* Возвращаем отступы */
    }
.chat-usermenu.visible,
.table-usermenu.visible,
.user-contact-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

    .chat-settings-group,
    .table-settings-group {
        display: flex;
        flex-direction: column;
    }

/* Обертка для иконки и поля */
.input-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Обертка для иконки/аватара (для позиционирования подсказки) */
.chat-icon-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
}

.table-icon-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 67px;
    height: 40px;
}

.table-settings-icon {
    width: 67px;
    height: 40px;
    border-radius: 10%;
    margin-right: 12px;
    flex-shrink: 0;
    cursor: pointer;
    background-image: radial-gradient(circle at center, #C1D5C0, #D0F0C0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.chat-settings-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    cursor: pointer;
    /* Устанавливаем градиент в качестве фона по умолчанию */
    background-image: radial-gradient(circle at center, #C1D5C0, #D0F0C0);
    /* Настраиваем, как будет отображаться ФОНОВОЕ изображение */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.chat-settings-input,
.table-settings-input {
    flex-grow: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    /* Убираем возможность ручного изменения размера пользователем */
    resize: none;
    /* Устанавливаем базовую высоту (можно и через JS, но так надежнее) */
    min-height: 38px; /* Примерно равно высоте одной строки с padding */
    /* Задаем максимальную высоту, чтобы поле не растягивалось до бесконечности */
    max-height: 120px; /* Например, ~5-6 строк */
    /* Добавляем overflow: auto, чтобы при достижении max-height появлялся скроллбар */
    overflow-y: auto;
    /* Свойства для переноса текста (для textarea они часто работают по умолчанию, но лучше указать) */
    white-space: pre-wrap;
    word-break: break-word;
}

    .chat-settings-input:focus,
    .table-settings-input:focus,
    #contactsSearchInput:focus {
        outline: none; /* Убираем стандартную обводку браузера */
        /* Задаем цвет для самой рамки */
        border-color: rgb(119 189 67);
        /* Задаем цвет для тени-свечения */
        box-shadow: 0 0 0 1px rgba(119, 189, 67, 0.4);
    }
    .chat-settings-actions,
    .table-settings-actions {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end; /* Кнопка "Сохранить" будет справа */
    }
    .chat-settings-save-btn,
    .table-settings-save-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
        font-weight: bold;
        color: #fff;
        background-color: #28a745;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .chat-settings-save-btn:hover,
        .table-settings-save-btn:hover {
            background-color: #218838;
        }


/* Кнопки настроек  */
.chat-settings-extra-actions,
.table-settings-extra-actions,
.user-settings-extra-actions {
    display: flex;
    flex-direction: column; /* Вертикальное расположение */
    gap: 0; /* Убираем промежутки между кнопками */
    margin-top: 5px;
}

    .chat-settings-extra-actions button,
    .table-settings-extra-actions button,
    .user-settings-extra-actions button {
        width: 100%; /* Растягиваем на всю ширину родителя */
        padding: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 0; /* Убираем скругления, чтобы были "плоские" кнопки */
        cursor: pointer;
        border: none;
        transition: background-color 0.2s ease, color 0.2s ease;
        margin: 0; /* Убираем внешние отступы */
        display: flex; /* Включаем Flexbox для внутреннего содержимого */
        align-items: center; /* Выравниваем по центру по вертикали */
        justify-content: flex-start; /* Выравниваем содержимое по левому краю */
        gap: 8px; /* Расстояние между иконкой и текстом */
    }

 /* Общий стиль для иконок внутри кнопок */
        .chat-settings-extra-actions button .btn-icon,
        .table-settings-extra-actions button .btn-icon,
        .user-settings-extra-actions button .btn-icon {
            width: 25px;
            height: 25px;
            object-fit: contain;
            user-select: none;
            pointer-events: none;
        }


/* Отдельные стили для кнопок, можно настроить под дизайн */

.chat-settings-clear-btn {
    background-color: white;
    color: black;
}

    .chat-settings-clear-btn:hover {
        background-color: lightgrey;
    }

.chat-settings-delete-btn {
    background-color: white;
    color: darkred;
}
    .chat-settings-delete-btn:hover {
        background-color: lightgrey;
    }

.table-settings-delete-btn {
    background-color: white;
    color: darkred;
}
    .table-settings-delete-btn:hover {
        background-color: lightgrey;
    }
.chat-settings-remove-contact-btn,
.table-settings-remove-contact-btn,
.user-settings-remove-contact-btn,
.user-settings-block-contact-btn {
    background-color: white;
    color: black;
}
    .chat-settings-remove-contact-btn:hover,
    .table-settings-remove-contact-btn:hover,
    .user-settings-remove-contact-btn:hover,
    .user-settings-block-contact-btn:hover {
        background-color: lightgrey;
    }

/* Подсказка аватарки чата////////////////////////////////////////////////////////// */

/* Подсказка аватарки чата/иконки стола (общие стили) */
.tooltip-text {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    /* УБИРАЕМ общее правило скругления отсюда */
    padding: 6px 8px;
    font-size: 12px;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-sizing: border-box; /* Добавим на всякий случай */
}

/* <<< НАЧАЛО ИЗМЕНЕНИЙ: Специфичные стили для скругления >>> */

/* Скругление для подсказки ВНУТРИ обертки иконки ЧАТА */
.chat-icon-wrapper .tooltip-text {
    border-radius: 50%; /* Делаем ее круглой */
}

/* Скругление для подсказки ВНУТРИ обертки иконки СТОЛА */
.table-icon-wrapper .tooltip-text {
    border-radius: 10%; /* Делаем ее прямоугольной со скругленными углами */
}


.tooltip-text::after {
    display: none; /* Ваша стрелочка не нужна при полном покрытии иконки */
}

/* Показываем подсказку при наведении на .input-with-icon (включая иконку) */
.chat-icon-wrapper:hover .tooltip-text,
.table-icon-wrapper:hover .tooltip-text,
.personal-avatar-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Скругление для подсказки ВНУТРИ обертки ЛИЧНОГО АВАТАРА (Добавлено) */
.personal-avatar-wrapper .tooltip-text {
    border-radius: 50%; /* Круглая, как и аватар */
    font-size: 16px;
}

/* --- Стили для панели создания --- */
.create-panel {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* Стили для новой кнопки "Назад" */
.back-button {
    /* Убираем фиксированные размеры, чтобы кнопка подстраивалась под текст */
    /* width: 30px; */
    /* height: 30px; */
    /* Отступы теперь 5px по бокам, как вы просили */
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #e9ecef;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease;
    /* <<< НАЧАЛО ИЗМЕНЕНИЙ >>> */
    /* 1. Запрещаем кнопке растягиваться на всю ширину родителя */
    align-self: flex-end; /* flex-end или flex-start, оба не дадут растянуться */
    /* 2. "Отталкиваем" кнопку вправо, забирая все свободное место слева */
    margin-left: auto;
    /* <<< КОНЕЦ ИЗМЕНЕНИЙ >>> */
}

    .back-button:hover {
        background-color: rgb(119 189 67);
    }

.create-panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Отступ между кнопками */
}

/* Стили для кнопок "Создать чат/стол" */
.create-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .create-option-btn:hover {
        background-color: #e9ecef;
        border-color: #ced4da;
    }

.create-option-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

#dragGhost {
    position: fixed; /* фиксированное позиционирование */
    pointer-events: none; /* не мешать мышиным событиям */
    display: none; /* изначально скрыт */
    z-index: 99999; /* поверх всего */
    width: auto;
    height: 100px;
    border-radius: 12%;
    object-fit: contain;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* тень для эффекта "отрыва" */
    border: none;
    opacity: 0.9; /* здесь добавлена прозрачность */
}

/* Стили курсоров для перетаскивания */
body.dragging, body.dragging * {
    cursor: grabbing !important; /* Всегда сжатая лапка после захвата */
}

/* ------ Стили для индикатора непрочитанных сообщений ---- */
/* Контейнер для нижней строки (превью + счетчик) */
.chat-item-subtitle-row,
.user-item-subtitle-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Разносим по краям */
    width: 100%;
}

/* Ограничиваем ширину текста превью, чтобы он не наезжал на счетчик */
.chat-item-subtitle,
.user-item-subtitle {
    flex-grow: 1;
    min-width: 0; /* Критично для flex + ellipsis */
    margin-right: 0px; /* Отступ до счетчика */
}

/* --- СТИЛЬ ШЕСТИУГОЛЬНИКА (Копия логики chair-indicator) --- */
.unread-hexagon {
    /* Это контейнер-обертка для тени и позиционирования */
    width: 16px; /* Увеличили размер, чтобы влезли цифры */
    height: 19px; /* Пропорции шестиугольника */
    position: relative;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 3px;
}

    /* Псевдоэлемент - сам цветной шестиугольник */
    .unread-hexagon::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Красный цвет для уведомлений (или можешь взять зеленый #11bd43 как у стульев) */
        background-color: #11bd43;
        /* Тот самый clip-path как у стульев */
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        z-index: 0;
    }

/* Текст с цифрой внутри */
.unread-count-text {
    position: relative;
    z-index: 1; /* Чтобы был поверх фона */
    color: white;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
}

/* Статус сохранения имени в шапке */
.name-save-status {
    font-size: 0.75rem; /* Мелкий шрифт */
    height: 15px; /* Резервируем место по высоте */
    line-height: 1;
    margin-top: 2px;
    color: gray; /* Цвет по умолчанию */
    font-weight: normal;
    transition: color 0.3s ease;
}

/* --- Настройки Звука и Видео --- */

/* Обертка для центрирования круга */
.av-preview-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Важно! */
    margin-bottom: 20px;
    /* Задаем размеры обертке равные размеру круга, чтобы центровка работала идеально */
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

/* Пульсирующий контур (копия логики из avatar.css) */
.av-preview-outline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Базовая граница (черная или прозрачная, как у аватара) */
    border: 5px solid rgba(0,0,0,0.1);
    /* Свойства для анимации звука */
    outline-style: solid;
    outline-color: limegreen;
    outline-width: 0px; /* Меняется JS-ом */

    z-index: 0; /* Под кругом */
    transition: outline-width 0.05s ease-out, outline-color 0.05s ease-out;
    pointer-events: none;
}

/* Большой круг предпросмотра */
.av-preview-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #e0e0e0; /* Серый фон пока нет видео */
    background-image: radial-gradient(circle at center, #C1D5C0, #D0F0C0); /* Твой фирменный градиент */
    background-size: cover;
    background-position: center;
    border: 4px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
    position: relative;
    z-index: 1; /* Поверх контура */
}

    /* Видео внутри круга (понадобится позже) */
    .av-preview-circle video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scaleX(-1); /* Зеркалирование */
    }

/* Ряд кнопок управления */
.av-controls-row {
    flex-direction: column;
    display: flex;
    width: 100%; /* Контейнер на всю ширину */
    gap: 10px; /* Зазор ровно 10px */
    box-sizing: border-box; /* Чтобы padding не ломал ширину */
}

/* Обертка для кнопки и её меню */
.av-btn-wrapper {
    width: 100%;
    position: relative; /* Чтобы меню позиционировалось относительно кнопки */
    display: flex; /* Чтобы кнопка внутри растянулась */
    min-width: 0; /* Разрешаем сжиматься меньше контента */
}

/* Кнопки */
.av-control-btn {
    flex: 1;
    height: 30px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 3px;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 0;
}

    .av-control-btn:hover {
        background-color: #f8f9fa;
        transform: scale(1.02);
    }

/* Текст на кнопке (опционально, если захочешь добавить название текущего устройства) */
.av-btn-label {
    margin-left: 10px;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Иконки внутри кнопок */
.av-control-btn img {
    width: 25px;
    height: 25px;
    border-radius: 6px;
    object-fit: contain;
}
/* --- СТИЛИ ДЛЯ ВСПЛЫВАЮЩЕГО СПИСКА --- */
.av-device-popup {
    position: absolute;
    bottom: 110%; /* Появляется НАД кнопкой с небольшим отступом */
    left: 0;
    width: 100%; /* Ширина равна ширине кнопки */
    max-height: 150px; /* Ограничение высоты (если микрофонов много) */
    overflow-y: auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100; /* Поверх круга с видео */

    display: flex;
    flex-direction: column;
    padding: 5px 0;
}

/* Элемент списка в меню */
.av-popup-item {
    padding: 8px 12px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.2s;
}

    .av-popup-item:hover {
        background-color: #f0f0f0;
    }

    /* Выбранный элемент */
    .av-popup-item.selected {
        background-color: #e8f5e9; /* Светло-зеленый */
        font-weight: bold;
        color: rgb(40, 167, 69);
    }

/* Подсказка о коллизии (Место занято) */
.collision-warning-tooltip {
    position: fixed; /* Фиксируем относительно экрана, так как используем clientX/Y */
    background-color: rgba(250, 250, 250, 0.95);
    color: rgb(20 20 20);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    pointer-events: none; /* Чтобы сквозь нее можно было кликать */
    z-index: 100000; /* Поверх всего */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    /* Центрируем относительно точки курсора */
    transform: translate(-50%, -50%);
    /* Анимация исчезновения */
    animation: floatAndFade 1.5s ease-out forwards;
}

/* === КНОПКА "СЖАТЬ КАРТИНКУ" В ОВЕРЛЕЕ ЛИМИТОВ === */
.confirm-btn-compress {
    background-color: #87cc54 !important; /* Пастельно-зеленый (бледный) по умолчанию */
    color: white !important;
    border: 1px solid #90c669 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    /* Эффект при наведении (глубокий темно-зеленый) */
    .confirm-btn-compress:hover {
        background-color: #4c8c22 !important; /* Темно-зеленый */
        border-color: #3b6b19 !important;
        color: white !important;
    }

@keyframes floatAndFade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    70% {
        /* Держимся видимыми большую часть времени */
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    100% {
        opacity: 0;
        /* Немного всплываем вверх при исчезновении */
        transform: translate(-50%, -100%);
    }
}