/* --- ОСНОВНЫЕ ПЕРЕМЕННЫЕ ЦЕХА --- */
:root {
    --copper: #b87333;
    --brass: #e1c16e;
    --dark-metal: #0d0d0d;
    --glow-copper: rgba(184, 115, 51, 0.4);
    --panel-glass: rgba(15, 15, 15, 0.85);
}

/* --- ГЛОБАЛЬНЫЙ ФОН --- */
body {
    font-family: 'Fira Code', monospace;
    background-color: var(--dark-metal);
    color: #d1d5db;
    position: relative;
    z-index: 0;
}
/* --- ПРЕМИАЛЬНЫЕ ПАНЕЛИ (Glassmorphism) --- */
.glass-panel {
    background: var(--panel-glass);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(184, 115, 51, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 30px;
}

/* --- СТИЛИ ДЛЯ ЧАТА (messages.html) --- */
.msg-my {
    background: linear-gradient(135deg, rgba(184, 115, 51, 0.1) 0%, rgba(184, 115, 51, 0.05) 100%);
    border-left: 2px solid var(--copper);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);
}

.msg-other {
    background: rgba(255, 255, 255, 0.03);
    border-right: 2px solid #444;
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 15%);
}

/* --- АНИМАЦИИ --- */
@keyframes skeletonPulse {
    0% { background-color: rgba(30, 30, 30, 1); }
    50% { background-color: rgba(60, 40, 30, 0.5); }
    100% { background-color: rgba(30, 30, 30, 1); }
}
.skeleton {
    animation: skeletonPulse 1.5s infinite ease-in-out;
    border-radius: 4px;
}

/* Каскадное появление */
.animate-fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 1. Заменяем обычную мышку на механический прицел (крестик) */
body {
    cursor: crosshair; 
}

/* 2. Курсор над ссылками и кнопками делаем интерактивным */
a, button, .cursor-pointer, input[type="file"] {
    cursor: pointer;
}

/* 3. КОСТЮМНЫЙ ТЕКСТОВЫЙ КУРСОР (каретка ввода) */
/* Терминальные текстовые поля */
input, textarea {
    /* Меняем цвет мигающей палочки на фирменную латунь */
    caret-color: #e1c16e; 
    
    /* Делаем каретку жирным блоком (работает в Firefox и новых версиях Safari) */
    caret-shape: block; 
    
    /* Заменяем мышку на светящийся золотой терминальный прямоугольник при наведении на текст */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20"><rect width="10" height="20" fill="%23e1c16e" opacity="0.8"/></svg>') 5 10, text;
}

/* =========================================
   CRT-МОНИТОР ДЛЯ ЧАТА (ПЕЙДЖЕР)
   ========================================= */
.crt-chat-box {
    background-color: #050505;
    /* Глубокая тень внутри экрана */
    box-shadow: inset 0 0 60px rgba(0,0,0,0.9);
    border: 8px solid #111; /* Толстый пластиковый/металлический корпус */
    border-radius: 8px;
    position: relative;
}

/* Полосы развертки (Scanlines) */
.crt-chat-box::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 10;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none; /* Пропускает клики сквозь себя! */
}

/* Фосфорный текст терминала */
.crt-text {
    color: #e1c16e;
    text-shadow: 0 0 4px rgba(225, 193, 110, 0.6);
    font-family: 'Fira Code', monospace;
}

/* Кастомный ретро-ползунок прокрутки для чата */
.crt-chat-box ::-webkit-scrollbar {
    width: 12px;
}
.crt-chat-box ::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-left: 1px solid #222;
}
.crt-chat-box ::-webkit-scrollbar-thumb {
    background: rgba(225, 193, 110, 0.4);
    border: 1px solid rgba(225, 193, 110, 0.8);
}
.crt-chat-box ::-webkit-scrollbar-thumb:hover {
    background: rgba(225, 193, 110, 0.8);
}