/* field.css */
/* ///////////////////////////////////////////////////////////////////////////////////////////////// */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Задаем основной шрифт для ВСЕГО приложения */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.page-container {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

main {
    grid-row: 2;
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

#coordinate-plane {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: radial-gradient(circle at center,#E8F5E9, white);
    cursor: default;
}

    #coordinate-plane.dragging {
        cursor: grabbing;
    }

        /* 1. Блокируем ЛЮБЫЕ транзакции на всех объектах, когда мы тащим ПОЛЕ */
        #coordinate-plane.dragging .world-object,
        #coordinate-plane.zooming .world-object {
            transition: none !important;
        }

/* 1. НОВЫЙ общий контейнер для всех кнопок в правом нижнем углу */
.bottom-right-controls {
    position: fixed;
    bottom: 30px; /* Отступ от нижнего края */
    right: 10px; /* Отступ от правого края */
    z-index: 1000;
    display: flex; /* Элементы в ряд */
    align-items: center; /* Выравниваем по центру */
    gap: 5px; /* Расстояние между блоком зума и кнопкой контактов */
}

/* 2. НОВЫЕ стили для кнопок зума */
.zoom-controls {
    display: flex;
    flex-direction: column; /* Кнопки друг под другом */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 8px; /* Общее скругление для группы */
}

.zoom-button {
    width: 20px;
    height: 30px;
    border: 1px solid #ccc;
    background-color: rgb(180, 180, 180, 0.5);
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    color: black;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

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

#zoomInBtn { /* Кнопка "+" (сверху) */
    border-bottom: none; /* Убираем границу между кнопками */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#zoomOutBtn { /* Кнопка "-" (снизу) */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Убираем стандартную рамку фокуса у кнопок зума */
.zoom-button:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* 3. ИЗМЕНЯЕМ ваш существующий `.contacts-button-wrapper` */
/* Скрываем всю обертку (кнопку + подпись) */
.contacts-button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    opacity: 0; /* Полностью прозрачна */
    visibility: hidden; /* Скрыта */
    transform: translateY(20px); /* Слегка сдвигаем вниз для эффекта появления */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* Плавный переход */
}

/* На всякий случай отключаем клики по самой кнопке */
.contacts-button {
    pointer-events: none;
}


/* --- Сценарий 2: Пользователь АВТОРИЗОВАН --- */

/* Когда на body появляется класс .user-logged-in, показываем обертку */
body.user-logged-in .contacts-button-wrapper {
    opacity: 1; /* Делаем видимой */
    visibility: visible; /* Показываем */
    transform: translateY(0); /* Возвращаем на место */
}

/* И включаем кликабельность для самой кнопки */
body.user-logged-in .contacts-button {
    pointer-events: auto;
}


/* 2. Изменяем стили для САМОЙ кнопки */
.contacts-button {
    width: 80px;
    height: 90px;
    border: none;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    transition: filter 0.3s ease, transform 0.2s ease;
    /* pointer-events управляется логикой выше */
}

    /* Псевдоэлемент кнопки (остается без изменений) */
    .contacts-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('/images/central-hub.webp');
        background-color: transparent;
        background-size: 85%;
        background-position: center;
        background-repeat: no-repeat;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    /* Эффект при наведении (остается без изменений) */
    .contacts-button:hover {
        transform: scale(1.1);
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
    }

/* 3. НОВЫЕ стили для подписи под кнопкой */
.contacts-button-label {
    color: black;
    font-size: 14px;
    font-weight: 500;
    user-select: none; /* Чтобы текст нельзя было выделить */
}

body.dragging,
body.dragging * {
    cursor: grabbing !important;
}

/* --- Глобальный счетчик непрочитанных (Шестиугольник) --- */

.global-unread-badge {
    /* Позиционирование относительно .bottom-right-controls */
    position: absolute;
    top: 3%; /* Чуть выше границы контейнера */
    left: 73%; /* Сдвигаем правее, чтобы висел над кнопкой контактов */
    /* Размеры (чуть больше, чем в списке контактов) */
    width: 23px;
    height: 26px;
    /* Центрирование цифры */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Тень для объема (важно: тень на контейнер, а не на псевдоэлемент) */
    filter: drop-shadow(0 4px 3px rgba(0,0,0,0.5));
    /* Порядок слоев: выше всех кнопок */
    z-index: 2000;
    /* Анимация появления */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Эффект пружины */
    pointer-events: none; /* Чтобы клики проходили сквозь него */
}

    /* Сам красный шестиугольник */
    .global-unread-badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #11bd43; 
        /* Форма шестиугольника */
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    /* Цифра внутри */
    .global-unread-badge span {
        position: relative;
        z-index: 1; /* Поверх фона */
        color: white;
        font-weight: bold;
        font-size: 14px;
        font-family: sans-serif;
    }

    /* Класс для скрытия (добавляем/убираем JS-ом) */
    .global-unread-badge.hidden {
        transform: scale(0); /* Красиво схлопывается */
    }

/* Отключает все переходы и анимации принудительно */
body.no-animations *,
body.no-animations *:before,
body.no-animations *:after {
    transition: none !important;
    animation: none !important;
}

/* Красная рамка чанков */
.chunk-frame {
    position: absolute;
    border: 5px solid green; /* Полупрозрачный красный */
    box-sizing: border-box;
    pointer-events: none; /* Чтобы рамка не мешала кликать по полю */
    z-index: 2; /* Чуть выше сетки, но ниже столов */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
}

.chunk-label {
    position: absolute;
    /* Регулируйте это значение, чтобы опустить блок еще ниже */
    top: 80px;
    left: 40px;
    color: green;
    user-select: none;
    pointer-events: none;
    will-change: transform;
    z-index: 1;
    /* Используем жирный шрифт для лучшей читаемости макро-координат */
    font-family: "SF Mono", "Consolas", "Menlo", "Monaco", "Liberation Mono", "Courier New", monospace;
    font-weight: bold;
}

/* ======================================================= */
/* === СТАРТОВЫЙ ЭКРАН ЗАГРУЗКИ (SPLASH SCREEN) === */
/* ======================================================= */

/* Контейнер-заставка во весь экран */
.start-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 30000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    pointer-events: auto;
}

    /* Класс для запуска анимации растворения */
    .start-splash-screen.fade-out {
        opacity: 0;
        pointer-events: none;
    }

/* 1. Фоновая картинка Start.webp на весь экран */
.start-splash-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Самый нижний слой (1) */
}

/* 2. Зеленое пульсирующее свечение под логотипом */
.start-splash-glow {
    position: absolute;
    width: 450px; /* Диаметр свечения 450px (чуть шире логотипа в 300px) */
    height: 450px;
    border-radius: 50%; /* Идеальный круг */
    /* Радиальный градиент: от фирменного полупрозрачного зеленого в центре до полностью прозрачного по краям */
    background: radial-gradient(circle, rgba(115, 189, 71, 0.60) 0%, rgba(115, 189, 71, 0) 65%);
    z-index: 2; /* Слой посередине (2) */
    /* Подключаем ту же самую анимацию пульсации для идеальной синхронности с логотипом */
    animation: start-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

/* 3. Пульсирующий логотип central-hub2.webp по центру */
.start-splash-logo {
    position: absolute;
    width: 250px;
    height: 250px;
    object-fit: contain;
    z-index: 3; /* Самый верхний слой (3) */
    animation: start-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

/* АНИМАЦИЯ ПЛАВНОЙ СИНХРОННОЙ ПУЛЬСАЦИИ */
@keyframes start-pulse {
    0% {
        transform: scale(0.95); /* Уменьшение на 5% */
    }

    50% {
        transform: scale(1.05); /* Увеличение на 5% */
    }

    100% {
        transform: scale(0.95); /* Возврат к исходному */
    }
}