/* avatar.css */
/* ///////////////////////////////////////////////////////////////////////////////////////////////// */
.avatar-container {
    position: absolute;
    left: 100px;
    top: 100px;
    cursor: pointer;
    user-select: none;
}

    .avatar-container.smooth-move {
        transition: left 0.3s ease-out, top 0.3s ease-out !important;
    }
    .avatar-container.just-born {
        /* Отключаем все анимации принудительно */
        transition: none !important;
        animation: none !important;
    }

    /* Для СВОЕГО аватара (с классом .my-avatar) переопределяем курсор на "руку". */
    .avatar-container.my-avatar {
        cursor: grab;
    }

        /* Когда свой аватар перетаскивается, курсор меняется на "сжатую руку". */
        .avatar-container.my-avatar:active {
            cursor: grabbing;
        }

.avatar {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 10;
    background-image: radial-gradient(circle at center, #C1D5C0, #D0F0C0);
    background-size: cover;
    background-position: center;
}
.speaking-outline {
    position: absolute;
    border-radius: 50%;
    border: 5px solid black;
    z-index: 9;
    transition: outline-width 0.05s ease-out, outline-color 0.05s ease-out;
    outline-style: solid;
    outline-color: limegreen;
    outline-width: 0px;
}
.video-element {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.05) contrast(1.1) saturate(1.1) blur(0.2px) url(#barrel-correction);
    transform: scaleX(-1);
}

.circles-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 8;
    display: none;
}
.avatar-name-tag {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    /* 1. Задаем ширину, равную ширине аватара */
    width: 150px; /* У вас здесь уже стоит правильное значение, равное avatarSize. Оставляем его. */
    max-width: 150px; /* Добавляем max-width на всякий случай */
    /* 2. Разрешаем перенос текста (убираем nowrap, если он был) */
    white-space: normal;
    /* 3. Управляем переносом длинных слов */
    word-wrap: break-word; /* Для старых браузеров */
    overflow-wrap: break-word; /* Современный стандарт. Разрешает разрыв слова в любом месте. */
    hyphens: auto;
    text-align: center;
    color: white;
    font-weight: bold;
    text-shadow: 0 0 5px black;
    font-size: 16px;
    user-select: none;
    pointer-events: none;
}
.speaker-btn {
    position: absolute;
    width: 32px; /* замените на нужное значение iconSize */
    height: 32px;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
    z-index: 20;
    left: 0;
    top: -8px; /* рассчитывается как -(iconSize / 2 - 8), пример для iconSize=32 */
    border-radius: 25%;
}
.camera-btn {
    position: absolute;
    width: 32px; /* замените на нужное значение iconSize */
    height: 32px;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
    z-index: 20;
    top: -8px; /* -(iconSize / 2 - 8), пример для iconSize=32 */
    border-radius: 25%;
}

.avatar-container .speaker-btn,
.avatar-container .camera-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease; /* Плавный переход */
}

body.user-logged-in .avatar-container:hover .speaker-btn,
body.user-logged-in .avatar-container:hover .camera-btn {
    opacity: 1;
    pointer-events: auto; /* Делаем кнопки кликабельными, когда они видимы */
}

/* ======================================================= */
/* === СТИЛИ ДЛЯ КОНТЕКСТНОГО МЕНЮ АВАТАРА === */
/* ======================================================= */

.avatar-context-menu {
    /* --- Состояние по умолчанию: СКРЫТО --- */
    display: none; /* Изначально полностью скрыто */
    opacity: 0;
    /* --- Позиционирование --- */
    position: fixed; /* Позиционирование относительно окна браузера */
    z-index: 1100; /* Должно быть поверх всех остальных элементов (аватаров, столов и т.д.) */
    /* --- Внешний вид "окошка" 200x200 --- */
    /* Ширина задана, высота будет автоматической, что лучше для разного контента */
    width: 230px;
    background-color: #ffffff;
    border: 2px solid rgb(90 90 90); 
    border-radius: 10px; /* Скругленные углы */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); /* Красивая тень */
    padding: 0; /* Небольшой вертикальный отступ внутри меню */
    /* Анимация плавного появления */
    transform: scale(0.95);
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
    overflow: hidden;
}

    /* Класс ".show", который будет добавлять JavaScript для отображения меню */
    .avatar-context-menu.show {
        display: block; /* Делаем видимым */
        opacity: 1;
        transform: scale(1); /* Возвращаем нормальный размер */
    }

    /* Стили для списка внутри меню (убираем стандартные маркеры и отступы) */
    .avatar-context-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Стили для каждой "кнопки" (элемента списка <li>) */
    .avatar-context-menu li {
        display: flex; /* 1. Включаем Flexbox для выравнивания иконки и текста */
        align-items: center;
        padding: 10px 8px; /* Отступы для текста внутри кнопки */
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: #333; /* Темно-серый цвет текста */
        transition: background-color 0.2s ease; /* Плавный эффект при наведении */
        user-select: none; /* Чтобы текст нельзя было выделить при клике */
    }

        /* Эффект при наведении курсора на кнопку */
        .avatar-context-menu li:hover {
            background-color: rgb(230 230 230); /* Слегка серый фон */
        }

        /* --- ОБНОВЛЕННЫЙ БЛОК СТИЛЕЙ ДЛЯ ИКОНОК --- */

        /* 1. Общее правило для ВСЕХ иконок (задает размер, отступ и т.д.) */
        .avatar-context-menu li::before {
            content: '';
            width: 20px;
            height: 20px;
            margin-right: 8px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 20%;
        }

        /* 2. Специфичные правила для КАЖДОЙ кнопки (устанавливаем уникальные иконки) */

        /* Иконка для "Написать сообщение" */
        .avatar-context-menu li[data-action="message"]::before {
            background-image: url('/images/chat.webp');
        }

        /* Иконка для "Посмотреть профиль" */
        .avatar-context-menu li[data-action="profile"]::before {
            background-image: url('/images/person.png');
        }

        /* Иконка для "Заблокировать/Разблокировать" */
        .avatar-context-menu li[data-action="hide"]::before {
            background-image: url('/images/hide-icon.webp');
        }
        /* Иконка для состояния "Показать" (Перечеркнутый глаз / Открыть) */
        /* Применяется, когда мы добавляем класс .show-mode к пункту меню */
        .avatar-context-menu li[data-action="hide"].show-mode::before {
            background-image: url('/images/show-icon.webp');
        }
        /* Иконка для "Переместить в зал" (используем например viewers.png или что-то похожее) */
        .avatar-context-menu li[data-action="move-to-hall"]::before {
            background-image: url('/images/viewers.png'); /* Или любая иконка "выхода" */
        }

        /* Иконка для "Удалить со стола" (используем иконку удаления) */
        .avatar-context-menu li[data-action="kick-from-table"]::before {
            background-image: url('/images/block.png');
        }

        .avatar-context-menu li[data-action="unban-all"]::before {
            background-image: url('/images/table-icon.png');
        }
/* --- СТИЛИ ДЛЯ ЗАГОЛОВКА МЕНЮ --- */

.context-menu-header {
    padding: 5px 5px; /* Такие же отступы, как у кнопок */
    font-size: 14px;
    font-weight: 600; /* Делаем текст жирным */
    color: #000;
    white-space: nowrap; /* Запрещаем перенос текста */
    overflow: hidden; /* Обрезаем текст, если он не помещается */
    text-overflow: ellipsis; /* Добавляем многоточие в конце, если текст обрезан */
    user-select: none;
    text-align: center;
    cursor: grab; /* Показываем "открытую руку" */
}
    /* Стиль для момента перетаскивания (сжатая рука) */
    .context-menu-header:active {
        cursor: grabbing;
    }

/* Стиль для разделителя (теперь он отдельный элемент) */
.avatar-context-menu .separator {
    height: 1px;
    margin: 0; /* Убираем вертикальные отступы, так как padding уже есть у элементов */
    background-color: #e0e0e0;
}
/* ======================================================= */
/* === СТИЛИ ДЛЯ РЕЖИМА ПРОСМОТРА ПРОФИЛЯ В МЕНЮ === */
/* ======================================================= */

/* Контейнер профиля */
.avatar-profile-info {
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Расстояние между строками */
    position: relative; /* Для позиционирования крестика */
    min-height: 100px; /* Чтобы меню не схлопывалось слишком сильно */
}

/* Кнопка-крестик (Назад) */
.profile-back-btn {
    position: absolute;
    top: 4px; /* Немного отступа сверху */
    right: 4px; /* Немного отступа справа */
    /* Размеры самой интерактивной области (кнопки) */
    width: 24px;
    height: 24px;
    /* Внешний вид (копируем логику из contacts-modal-close) */
    background-color: transparent;
    border: none;
    /* Небольшое скругление, чтобы вписывалось в дизайн меню */
    border-radius: 4px;
    cursor: pointer;
    /* Цвет самого символа */
    color: black;
    font-size: 30px; /* Размер крестика */
    font-weight: normal;
    /* Центрирование крестика внутри кнопки */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    padding-bottom: 5px; /* Небольшая поправка, чтобы крестик был визуально по центру */

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

    /* Эффект при наведении: Красный фон, Белый текст */
    .profile-back-btn:hover {
        background-color: red;
        color: white;
    }

/* Строка с данными (Label + Value) */
.profile-row {
    display: flex;
    flex-direction: column; /* Текст друг под другом? Или в одну строку? */
    /* По запросу "наименования в столбик", но обычно Label: Value идут строкой. 
       Если вы хотите "Город:" а под ним значение, оставьте column.
       Если хотите "Город: Москва", используйте row. Сделаем row для компактности, 
       или column для четкости. Давайте сделаем классический row. */
    flex-direction: row;
    align-items: baseline;
    font-size: 13px;
    color: #333;
    gap: 5px;
}

/* Название поля (жирным) */
.profile-label {
    font-weight: 600;
    color: #555;
    min-width: 60px; /* Чтобы значения выравнивались в колонку */
}

/* Значение поля */
.profile-value {
    font-weight: 400;
    color: #000;
    word-break: break-word; /* Чтобы длинный email не ломал верстку */
}
/* ======================================================= */
/* === СТИЛИ ДЛЯ СКРЫТОГО АВАТАРА === */
/* ======================================================= */

/* Класс, который делает аватар невидимым */
.avatar-container.is-hidden-by-user {
    opacity: 0; /* Полностью прозрачный */
    filter: grayscale(100%); /* (Опционально) Делаем черно-белым, чтобы отличался */
    transition: opacity 0.3s ease, filter 0.3s ease;
}

    /* Когда наводим мышку на скрытый аватар - показываем его полупрозрачным */
    .avatar-container.is-hidden-by-user:hover {
        opacity: 0.5; /* Полупрозрачность */
        cursor: pointer;
    }

/* 1. Базовое состояние над столом (Полупрозрачность) */
.avatar-container.my-avatar.is-flying-over-table {
    z-index: 130 !important;
    opacity: 0.3;
    /* Плавный переход прозрачности за 0.5 сек */
    transition: opacity 0.5s ease, z-index 0s;
}

    /* 2. Состояние "Исчез" (Полная прозрачность) */
    .avatar-container.my-avatar.is-flying-over-table.is-vanished {
        opacity: 0;
        /* Важно: элемент остается на месте и реагирует на мышь, просто он невидим */
    }

    /* 3. При наведении мыши прозрачность возвращается (даже если он vanished) */
    /* Это решает половину задачи без JS */
    .avatar-container.my-avatar.is-flying-over-table:hover {
        opacity: 0.3 !important;
    }

    /* 
   Скрываем зеленые круги слышимости, 
   когда аватар находится в режиме "полета над столом" (полупрозрачный).
   !important нужен, чтобы перебить инлайновый стиль display: block, который ставит JS.
*/
    .avatar-container.my-avatar.is-flying-over-table .circles-container {
        display: none !important;
    }

/* Состояние "Призрак": аватар над столом, полупрозрачный */
.avatar-container.viewer-ghost {
    z-index: 150 !important; /* Поверх столешницы */
    opacity: 0.5 !important;
    transition: opacity 0.5s ease-in-out !important;
}

/* Финальное скрытие после анимации */
.avatar-container.viewer-hidden {
    opacity: 0 !important;
    pointer-events: none !important; /* Чтобы не мешал кликать по чату */
    transition: opacity 0.5s ease-in-out !important;
}

/* Контейнер для спиннера */
.avatar-video-loader {
    position: absolute;
    top: 60%;
    left: 55%;
    transform: translate(-50%, -50%);
    z-index: 5; /* Выше картинки, но ниже видео */
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

/* Сам крутящийся элемент */
.video-spinner-ring {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff; /* Белый "хвостик" */
    animation: spin-video 1s linear infinite;
}

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

/* Опционально: текст под спиннером */
.video-loader-text {
    color: white;
    font-size: 14px;
    margin-top: 5px;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px black;
}