/* Обнуление отступов и базовая настройка */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Отключаем стандартную мобильную подсветку при клике на призраков */
    -webkit-tap-highlight-color: transparent; 
}

body, html {
    width: 100%;
    max-width: 100%; /* Запрещаем расширяться больше экрана */
    height: 100vh;
    height: 100dvh; 
    background-color: #000000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Жесткая блокировка прокруток в любую сторону */
    overflow: hidden; 
    overflow-x: hidden; /* Гарантия от сдвигов вправо */
    
    position: fixed;
    top: 0;
    left: 0;
}



/* Арена для призраков */
.ghost-arena {
    position: relative;
    width: 100%;
    height: calc(100% - 70px);
    overflow: hidden; /* КРИТИЧЕСКИ ВАЖНО: прячет призраков, когда они за экраном */
}

/* --- СТИЛИЗАЦИЯ CSS-ПРИЗРАКА (ПО ОБРАЗЦУ) --- */
.ghost {
    position: absolute;
    width: 70px;
    height: 85px;
    background-color: #ffffff; /* Белое тело */
    
    /* Делаем идеальный купол сверху, как на картинке */
    border-radius: 35px 35px 0 0; 
    
    /* Белая толстая обводка (вместо черной из образца, так как фон сайта черный) */
    border: 5px solid #ffffff; 
    border-bottom: none; /* Нижнюю часть пока не ограничиваем рамкой */
    
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 28px; /* Смещаем глаза немного ниже к центру */
    user-select: none;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

/* Вытянутые овальные глаза из образца */
.ghost-eyes {
    display: flex;
    gap: 14px; /* Расстояние между глазами */
}

.ghost-eyes .eye {
    width: 8px;
    height: 14px; /* Делаем их вытянутыми овалами */
    background-color: #000000; /* Черные бусинки */
    border-radius: 50%;
}

/* Округлая развевающаяся мантия с частыми волнами, как на образце */
.ghost-skirt {
    position: absolute;
    bottom: -15px;
    left: -5px; /* Компенсируем толщину левой рамки */
    width: calc(100% + 10px); /* Компенсируем толщину левой и правой рамок */
    height: 16px;
    background-color: #ffffff;
    
    /* SVG-путь, который рисует 5 частых округлых волн */
    clip-path: path('M 0,0 L 80,0 L 80,2 C 75,10 71,10 66,2 C 61,10 57,10 52,2 C 47,10 43,10 38,2 C 33,10 29,10 24,2 C 19,10 15,10 10,2 C 5,10 1,10 0,2 Z');
}


/* Эффект при наведении на призрака */
.ghost:hover {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
}


/* --- ОБЛАКО И ЗАТЕМНЕНИЕ --- */
/* Затемняющий слой */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Мягкое затемнение */
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* --- СТИЛИ ЗАТЕМНЕНИЯ И ЦЕНТРАЛЬНОГО ТЕКСТА --- */

/* Более глубокое затемнение экрана (0.85), чтобы текст хорошо читался, 
   но летающие на фоне призраки всё еще были слегка видны */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.90); 
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Контейнер для текста строго по центру экрана */
.message-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90%;
    max-width: 800px; /* Чтобы текст не растягивался слишком широко на больших мониторах */
    z-index: 20; /* Выше слоя затемнения */
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.message-container.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* Белая надпись, выровненная по центру */
.ghost-message {
    color: #ffffff; /* Чистый белый цвет */
    font-size: 1.8rem; /* Крупный, атмосферный размер шрифта */
    line-height: 1.5;
    font-weight: 300; /* Слегка утонченный шрифт */
    letter-spacing: 0.5px;
    word-break: break-word;
    user-select: none;
    /* Небольшое мягкое свечение для букв, чтобы добавить мистики */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4); 
}

/* Адаптивность шрифта под маленькие экраны мобильных телефонов */
@media (max-width: 480px) {
    .ghost-message {
        font-size: 1.3rem; /* Чуть уменьшаем на смартфонах, чтобы длинный текст аккуратно умещался */
        line-height: 1.4;
    }
}




/* --- НИЖНЯЯ ПАНЕЛЬ ВВОДА --- */
.input-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #111111;
    border-top: 1px solid #222222;
    z-index: 5;
    
    /* Идеальное выравнивание внутренних элементов */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.input-form {
    width: 100%;
    /* На смартфонах форма займет всю ширину (минус отступы), 
       а на ПК аккуратно остановится на 600px */
    max-width: 600px; 
    
    display: flex;
    gap: 10px;
    align-items: center;
}

#messageInput {
    display: block;
    width: 100%; /* Занимает всё отведенное флексом место */
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0; /* Разрешает инпуту сжиматься в ноль на ультра-узких экранах */
    
    background-color: #222222;
    border: 1px solid #444444;
    border-radius: 20px;
    color: #ffffff;
    padding: 10px 15px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

#messageInput:focus {
    border-color: #ffffff;
}

.send-btn {
    display: block;
    background-color: #ffffff;
    color: #000000;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
    
    flex-grow: 0;
    flex-shrink: 0; 
}

/* НОВЫЙ БЛОК: Стили для неактивной кнопки */
.send-btn:disabled {
    opacity: 0.3 !important; /* Делаем кнопку блеклой, когда поле пустое */
    cursor: not-allowed !important; /* Меняем курсор на запрещающий знак */
}


.send-btn:hover {
    background-color: #cccccc;
}

/* --- СТИЛИ ДЛЯ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ (TOAST) --- */
.toast-notification {
    position: absolute;
    /* Гарантированно поднимаем подсказку НАД всей нижней панелью, 
       независимо от высоты экрана и выезжающей клавиатуры */
    bottom: 85px; 
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    background-color: #ffffff; /* Белая аккуратная плашка */
    color: #000000;
    padding: 10px 24px; /* Увеличили боковые отступы для солидности */
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: bold;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
    
    /* КРИТИЧЕСКИ ВАЖНО ДЛЯ МОБИЛЬНЫХ: */
    white-space: nowrap; /* Запрещает тексту переноситься на новую строку */
    text-align: center; /* Центрирует текст внутри плашки */
    width: max-content; /* Плашка идеально растягивается под ширину текста */
    
    /* Изначально скрыта */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}

/* Класс активации */
.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* В медиа-запросе для мобильных (в самом низу css) тоже обновим max-width */
@media (max-width: 480px) {
    .input-panel {
        padding: 0 10px;
    }
    .input-form {
        /* На маленьких экранах жестко вписываем форму в границы */
        max-width: calc(100vw - 20px);
        gap: 8px;
    }
    #messageInput {
        padding: 10px 12px;
        font-size: 0.95rem;
    }
    .send-btn {
        padding: 10px 15px;
        font-size: 0.95rem;
    }
}