/* table.css */
/* ///////////////////////////////////////////////////////////////////////////////////////////////// */

/* --- КОРРЕКЦИЯ ГАБАРИТОВ И ПОЗИЦИИ --- */
.group-wrapper.react-table {
    width: 895px;
    height: 500px;
    position: absolute;
    pointer-events: none;
    z-index: auto;
}

    /* Плавное перемещение стола только по команде React */
    .group-wrapper.react-table.smooth-move {
        transition: left 0.3s ease-out, top 0.3s ease-out !important;
    }
    .group-wrapper.react-table.just-born {
        /* Принудительно отключаем плавность при появлении */
        transition: none !important;
        animation: none !important;
    }

/* --- СТОЛЕШНИЦА (ОКНО) --- */
.react-table .table-window {
    width: 895px; /* Возвращаем жесткую ширину */
    height: 500px; /* Возвращаем жесткую высоту */
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid black;
    box-sizing: border-box;
    pointer-events: auto;
    overflow: visible;
}

/* --- ОБЛАСТЬ ЧАТА (РАСТЯГИВАНИЕ) --- */
.react-table .table-chat-area {
    flex-grow: 1; /* Растягивается */
    height: 0; /* Технический фикс для корректного flex-растяжения */
    display: flex;
    flex-direction: column;
    position: relative;
}

/* --- КРЫШКА СТОЛА --- */
.react-table .table-lid {
    position: absolute;
    /* КРИТИЧНО: Те же отступы, что у .chairs-container */
    top: 0;
    left: -200px;
    right: -200px;
    bottom: -200px;
    border-radius: 100px; /* Скругление как у контейнера стульев */
    border: 2px solid black;
    background: linear-gradient(to right, rgb(200 200 200), rgb(207 238 192));
    z-index: 120; /* Поверх всего */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

/* Новый класс для Админа/Участника: фон закрытого стола, но без крышки */
.chairs-container.closed-status-bg {
    background: linear-gradient(to right, rgb(200 200 200), rgb(207 238 192));
}

/* --- ШАПКА --- */
.react-table .table-header {
    flex-shrink: 0; /* Шапка не должна сжиматься */
    height: 40px;
    display: flex;
    align-items: center;
}


/* Стили старого стола */
.group-wrapper {
    position: absolute;
}

/* --- Стили для иконки и названия над столом --- */

/* 1. Общая обертка для иконки и названия */
.table-info-wrapper {
    position: absolute; /* Позиционируемся относительно .group-wrapper */
    /* <<< ИЗМЕНЕНИЕ: Прижимаем к левому краю >>> */
    left: 0;
    /* "Выталкиваем" блок вверх ровно на высоту иконки */
    top: -100px; /* Высота .table-info-icon */
    /* Используем Flexbox для расположения иконки и текста */
    display: flex;
    align-items: center; /* Выравниваем по вертикальному центру */
    gap: 10px; /* Отступ между иконкой и текстом */
    border: 2px solid black;
    z-index: 110; /* Должен быть ниже .table-window, но выше .chairs-container */
    background-image: url('/images/chat-background.webp');
    background-size: cover; /* Растягиваем фон, чтобы он заполнил весь элемент */
    background-position: center; /* Центрируем фон */
    background-repeat: no-repeat; /* Запрещаем повторение */
    cursor: grab;
    pointer-events: auto;
}

/* 2. Иконка стола внутри обертки */
.table-info-icon {
    width: 167px;
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    flex-shrink: 0; /* Запрещаем иконке сжиматься */
    background-image: radial-gradient(circle at center, #C1D5C0, #D0F0C0);
    background-size: cover;
    background-position: center;
}

/* 3. Название стола внутри обертки */
.table-info-name {
    color: black;
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
    padding-right: 10px;
}

.table-window {
    position: relative;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid black;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    z-index: 110;
    overflow: visible;
    cursor: default;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.table-header {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    cursor: grab;
    user-select: none;
    border-bottom: 2px solid black;
    gap: 10px; /* Задаем отступ между всеми элементами */
    /* Свойства фона, переехавшие из JS */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

    /* 
   При зажатии мыши (клике) на элементах стола меняем курсор на Grab,
   чтобы показать, что мы тащим поле.
   :not(.is-active) гарантирует, что мы не перебьем текстовый курсор в активном чате.
*/
    .table-window:active,
    .table-header:active,
    .table-info-wrapper:active {
        cursor: grabbing !important;
    }

        /* 
   Исключение для активного чата:
   Если мы кликаем внутри активного чата (чтобы выделить текст), 
   курсор должен оставаться текстовым.
*/
        .table-window:active .chat-container.is-active {
            cursor: text !important;
        }


.group-number-display {
    position: relative;
    height: 80%;
    box-sizing: border-box;
    padding: 0 5px;
    background-color: #D0F0C0;
    color: black;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    flex-shrink: 0;
    border-top: 3px solid #a0a0a0;
    border-left: 3px solid #a0a0a0;
    border-bottom: 3px solid #f5f5f5;
    border-right: 3px solid #f5f5f5;
    overflow: visible;
}

.number-icon {
    content: url('/images/number.webp');
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.number-text {
    color: black;
    font-size: 1.1rem;
    font-weight: bold;
    user-select: text;
}

.tooltip-number {
    position: fixed;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 10000;
    user-select: none;
    white-space: nowrap;
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
    opacity: 1;
}

/* Кнопки в шапке стола */
.full-view-header-button,
.remove-table-button,
.close-header-button,
.add-table-button {
    height: 100%;
    width: 40px;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid black;
    border-radius: 20%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8), -2px -2px 5px rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Важно: убираем паддинг, чтобы картинка была на всю кнопку */
    overflow: visible;
}

/* Специфический фон для кнопок, если нужно */
.full-view-header-button {
    background-color: transparent;
}

.remove-table-button {
    background-color: rgb(255 127 39); /* Оранжевый фон для удаления */
}

.close-header-button {
    background-color: transparent;
}

.add-table-button {
    background-color: rgb(156 200 45);
}


    .viewers-count-display {
    padding: 0 5px;
    background-color: #D0F0C0;
    color: black;
    font-size: 1.1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 32px;
    justify-content: center;
    flex-shrink: 0;
    border-top: 3px solid #a0a0a0;
    border-left: 3px solid #a0a0a0;
    border-bottom: 3px solid #f5f5f5;
    border-right: 3px solid #f5f5f5;
}

.viewers-icon {
    content: url('/images/viewers.png');
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-right: 6px;
}

.subscriber-count-text,
.viewers-count-text {
    font-weight: bold;
    font-size: 1.1rem;
    color: black;
}

/* <<< СТИЛЬ для вертикального разделителя >>> */
.count-separator {
    width: 3px; /* Толщина линии */
    align-self: stretch;
    background-image: linear-gradient( to bottom, /* Направление градиента: сверху вниз */
    #a0a0a0, /* Начальный цвет (сверху) */
    #f5f5f5 /* Конечный цвет (снизу) */
    );
    margin: 0 5px;
}

.live-indicator-dot {
    /* 1. Размеры и форма */
    width: 8px;
    height: 8px;
    border-radius: 50%; /* Делает элемент идеальным кругом */
    /* 2. Цвет */
    background-color: red;
    margin-right: 5px;
    /* 3. Тень для эффекта "свечения" */
    /* box-shadow: X-смещение Y-смещение Размытие Распространение Цвет */
    box-shadow: 0 0 4px 1px rgba(255, 0, 0, 0.7);
}

/* класс-прокладка: невидимый div, который растягивается */
.header-spacer {
    flex-grow: 1; /* <-- Эта строка забирает все свободное место */
}

.add-table-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    overflow: hidden;
    border-radius: 20%;
}

.remove-table-icon {
    content: url('/images/remove-icon.png');
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    overflow: hidden;
}

/* --- Стили для области чата --- */
/* Область для чата будет занимать все оставшееся место по высоте */
.table-chat-area {
    position: relative; /* КРИТИЧЕСКИ ВАЖНО: чтобы оверлей позиционировался внутри этой области */
    flex-grow: 1; /* Растягивается на всю доступную высоту */
    height: 0; /* Технический трюк для правильной работы flex-grow */
    background-image: radial-gradient(circle at center, #C1D5C0, #D0F0C0); /* Можно задать фон по умолчанию */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    /* Стили для самого чата внутри этой области */
    .table-chat-area .chat-container {
        width: 100%;
        height: 100%;
    }

/* === Стили для глобальной подсказки области чата === */

/* 2. Стили для самой подсказки */
.chat-area-local-tooltip {
    position: absolute; /* Позиционирование относительно .table-chat-area */
    /* Центрируем подсказку внутри области чата */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Точная центровка */
    /* Внешний вид (как раньше) */
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 5px 5px;
    border-radius: 6px;
    /* Текст */
    font-size: 20px; /* Твой размер шрифта */
    text-align: center;
    max-width: 90%; /* Ограничиваем ширину, чтобы не вылезала за края */
    white-space: normal; /* Разрешаем перенос строк */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Не мешает кликам */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10; /* Должна быть поверх чата, если он есть */
}

body.user-logged-in .table-chat-area:not(.has-content):hover .chat-area-local-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ПРИНУДИТЕЛЬНО СКРЫВАЕМ, если у родителя есть класс .has-content */
.table-chat-area.has-content .chat-area-local-tooltip {
    display: none; /* Используем display: none, чтобы она точно не мешала */
}

/* --- Стили для всплывающих подсказок на кнопках шапки стола --- */

/* 1. Родительский элемент (любая кнопка с этим классом) */
.header-tooltip-button {
    position: relative; /* Обязательно, чтобы подсказка позиционировалась относительно кнопки */
}

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

    /* 3. Показываем подсказку при наведении на кнопку */
    .header-tooltip-button:hover::before {
        opacity: 1;
        visibility: visible;
    }

/* 
   Правило: Выбрать body, у которого НЕТ класса .user-logged-in,
   и найти внутри него все кнопки .add-table-button
*/
body:not(.user-logged-in) .add-table-button {
    display: none;
}

.chairs-container {
    position: absolute;
    top: 0;
    left: -200px;
    right: -200px;
    bottom: -200px;
    pointer-events: none;
    z-index: 90;
    border: 2px solid black;
    border-radius: 100px;
    /* background-color может устанавливаться динамически JS */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* <<< СТИЛИ для крышки стола >>> */

.table-lid {
    /* --- 1. Позиционирование и размеры (копируем у .chairs-container) --- */
    position: absolute;
    top: 0;
    left: -200px;
    right: -200px;
    bottom: -200px;
    border-radius: 100px; /* Такое же скругление, как у контейнера стульев */
    border: 2px solid black;
    /* --- 2. Внешний вид крышки --- */
    /* Используем градиент слева направо */
    background: linear-gradient(to right, rgb(200 200 200), rgb(207 238 192));
    /* --- 3. Стили для текста на крышке --- */
    display: none;
    align-items: center;
    justify-content: center;
    color: grey;
    /* --- 4. Порядок слоев (САМОЕ ВАЖНОЕ) --- */
    /* Должен быть ВЫШЕ, чем z-index у .table-window (110) */
    z-index: 120;
    /* --- 5. По умолчанию крышка скрыта --- */
    /* display: none;*/
}

/* <<< НОВЫЕ СТИЛИ для восьмигранного дисплея >>> */

.lid-display-octagon {
    /* Задаем размеры, как и раньше */
    width: 400px;
    height: 250px;
    /* Делаем его точкой отсчета для псевдоэлемента */
    position: relative;
    /* САМОЕ ВАЖНОЕ: ТЕНЬ ПРИМЕНЯЕТСЯ К РОДИТЕЛЮ! */
    filter: drop-shadow(20px 20px 20px rgba(0, 0, 0, 0.7));
    /* Стили для центрирования текста остаются здесь */
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(90 90 90);
}

    /* 
   2. Создаем ВИДИМУЮ ЧАСТЬ (восьмигранник) с помощью псевдоэлемента.
*/
    .lid-display-octagon::before {
        content: ''; /* Обязательно для псевдоэлементов */
        /* Растягиваем его на всю площадь родителя */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* ВЕСЬ ВНЕШНИЙ ВИД ПЕРЕЕЗЖАЕТ СЮДА */
        background-color: rgb(70, 70, 70, 0.7); /* Фон */
        clip-path: polygon( 25% 0%, /* 1. Верхний левый */
        75% 0%, /* 2. Верхний правый */
        100% 50%, /* 3. Правый центр */
        75% 100%, /* 4. Нижний правый */
        25% 100%, /* 5. Нижний левый */
        0% 50% /* 6. Левый центр */
        );
    }
.lid-text-zone {
    /* 
       Делаем его чуть меньше родителя, чтобы создать рамку.
       calc(100% - 10px) означает "100% ширины родителя минус 10 пикселей".
       Это создаст рамку толщиной 5px с каждой стороны.
    */
    width: calc(100% - 15px);
    height: calc(100% - 10px);
    /* Задаем фон для текстовой области */
    background: linear-gradient(to left, rgb(170 170 170), rgb(240 240 240));
    /* Применяем ТОТ ЖЕ САМЫЙ clip-path, чтобы он тоже был шестигранником */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    
}

/* --- Стили для стульев вокруг группы (с использованием clip-path и псевдоэлемента для тени) --- */
/*
   Основной элемент .group-chair теперь - это прозрачный контейнер для тени.
*/
.group-chair {
    position: absolute;
    width: 100px;
    /* Ваш правильный размер */
    height: 115.47px;
    /* Ваш правильный размер */
    /* Делаем сам контейнер прозрачным */
    background-color: transparent;
    /* "Умная" тень, которая будет создаваться от фона псевдоэлемента */
    filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.6));
    pointer-events: auto;
    transition: transform 0.2s ease, filter 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

    /*
   Псевдоэлемент ::before теперь используется для отрисовки самого шестигранника.
*/
    .group-chair::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Ваш цвет стула теперь задается здесь */
        background-color: gray;
        /* Вырезаем форму шестигранника */
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        /* Плавный переход для цвета фона */
        transition: background-color 0.2s ease;
    }

    /*
   Псевдоэлемент ::after нам больше не нужен.
*/
    /* Эффект при наведении */
    /* Эффект при наведении курсором ИЛИ аватаром */
    .group-chair:hover,
    .group-chair.highlighted-by-avatar {
        transform: scale(1.1) translateY(-2px);
        filter: drop-shadow(8px 16px 12px rgba(0, 0, 0, 0.3));
    }

        /* Меняем цвет фона у псевдоэлемента в обоих случаях */
        .group-chair:hover::before,
        .group-chair.highlighted-by-avatar::before {
            background-color: orange;
        }

.chair-number {
    /* ----- НАЧАЛО ИЗМЕНЕНИЙ ----- */
    position: relative; /* Обязательно для работы z-index */
    z-index: 1; /* Поднимаем номер на слой выше */
    /* ----- КОНЕЦ ИЗМЕНЕНИЙ ----- */

    color: white;
    font-size: 16px;
    font-weight: bold;
    user-select: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* --- Стили для индикаторов рядом со стульями --- */

/* 1. Контейнер для двух шестиугольников */
.chair-indicators-container {
    position: absolute;
    /* Этот контейнер будет невидим, он нужен только для позиционирования */
    /* и для того, чтобы сдвинуть наши шестиугольники вправо от стула */
    width: 100px; /* Ширина стула */
    height: 115.47px; /* Высота стула */
    /* Сдвигаем контейнер вправо на ширину стула + отступ */
    /* transform: translateX(calc(100% + 50px)); */ /* 100% ширины стула + 50px отступ */
    transform: translateX(85px) translateY(35px);
    /* Используем flexbox для расположения шестиугольников внутри */
    display: flex;
    flex-direction: column; /* Ставим их друг под другом */
    justify-content: center; /* Центрируем по вертикали */
    align-items: center; /* Центрируем по горизонтали */
    gap: 0px; /* Отступ между шестиугольниками */

    pointer-events: none; /* Чтобы не мешали кликать на стул */
}

    /* 
   Скрываем ВСЕ индикаторы (и свой, и чужие) в контейнере, 
   когда начинается перетаскивание.
*/
    .chair-indicators-container.dragging-hide .chair-indicator {
        display: none !important;
    }

/* 1. Общий стиль для индикатора. Теперь это НЕВИДИМАЯ ОБЕРТКА ДЛЯ ТЕНИ. */
.chair-indicator {
    width: 10px;
    height: 12px;
    /* ТЕНЬ ПЕРЕЕЗЖАЕТ СЮДА. Она будет применяться к фону псевдоэлемента. */
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.6));
    position: relative; /* Чтобы псевдоэлемент позиционировался внутри */
}

    /* 2. Создаем ВИДИМЫЙ шестигранник с помощью псевдоэлемента ::before */
    .chair-indicator::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* ЦВЕТ И ФОРМА ТЕПЕРЬ ЗДЕСЬ */
        background-color: rgb(119 189 67);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }
    /* Оранжевый индикатор для МОЕГО внимания */
    .chair-indicator.my-attention::before {
        background-color: rgb(255, 127, 39); /* Оранжевый */
        z-index: 2; /* Чтобы был поверх зеленых, если вдруг наложатся */
    }

/* Стили для подсказки при перетаскивании чата на стол */
.table-drop-zone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/table-add-chat.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 90;
    pointer-events: none; /* Оверлей не должен мешать событиям мыши */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

    /* Класс для плавного показа оверлея */
    .table-drop-zone-overlay.visible {
        opacity: 1;
    }

/* Контейнер-мост, который создается в App.jsx для Vanilla-мира */
.react-chat-bridge-container {
    position: absolute; /* Чтобы игнорировать невидимые элементы в .table-chat-area */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: visible; /* Чтобы была видна зеленая рамка фокуса */
    height: 100%;
    width: 100%;
}

    /* Сам компонент чата внутри моста */
    .react-chat-bridge-container .chat-container {
        flex: 1; /* Растягивается на всю доступную высоту */
        height: 100%;
        display: flex;
        flex-direction: column;
    }