/* ==========================================================================
   TrueFon MVP — NEO AI Studio Cyber-Glassmorphism Stylesheet
   Palette: Base #090D16 | Primary Accent #00F0FF | Alert Accent #FF2A54
   ========================================================================== */

:root {
    --cyber-bg: #090D16;
    --cyber-cyan: #00F0FF;
    --cyber-cyan-dim: rgba(0, 240, 255, 0.16);
    --cyber-alert: #FF2A54;
    --cyber-alert-dim: rgba(255, 42, 84, 0.18);
    --cyber-emerald: #10B981;
    --cyber-amber: #F59E0B;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    padding: 0;
    background-color: var(--cyber-bg);
    color: #F8FAFC;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overscroll-behavior: none;
}

.font-mono-tech {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Кибер-сетка фона для стартового дашборда и экрана ожидания */
.cyber-grid-bg {
    background-color: var(--cyber-bg);
    background-image:
        radial-gradient(circle at 15% 15%, rgba(0, 240, 255, 0.09) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(255, 42, 84, 0.08) 0%, transparent 40%),
        linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
}

/* Фирменный стекломорфизм NEO AI Studio */
.neo-glass {
    background: rgba(15, 23, 42, 0.60);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.65);
}

.neo-glass-cyan {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 240, 255, 0.28);
    box-shadow:
        0 12px 36px -8px rgba(0, 0, 0, 0.7),
        0 0 24px -6px rgba(0, 240, 255, 0.18);
}

.neo-glass-alert {
    background: rgba(24, 12, 22, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 42, 84, 0.45);
    box-shadow:
        0 12px 36px -8px rgba(0, 0, 0, 0.75),
        0 0 28px -4px rgba(255, 42, 84, 0.28);
}

/* Неоновые кнопки и акценты */
.btn-cyber-primary {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.92) 0%, rgba(0, 178, 255, 0.92) 100%);
    color: #050911;
    font-weight: 700;
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-cyber-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0 34px rgba(0, 240, 255, 0.55);
    filter: brightness(1.06);
}

.btn-cyber-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-cyber-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-cyber-danger {
    background: linear-gradient(135deg, #FF2A54 0%, #D91642 100%);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 0 22px rgba(255, 42, 84, 0.38);
    transition: all 0.2s ease;
}

.btn-cyber-danger:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0 32px rgba(255, 42, 84, 0.6);
}

/* Зеркальное отображение локальной камеры */
.mirror-video {
    transform: scaleX(-1);
}

/* Плавная смена цветов шкалы стресса */
.stress-bar-fill {
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Тревожная пульсация при высоком уровне стресса (>65%) */
@keyframes pulseAlertGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 42, 84, 0.45);
    }
    50% {
        box-shadow: 0 0 20px 3px rgba(255, 42, 84, 0.65);
    }
}

.stress-high-alert {
    animation: pulseAlertGlow 1.8s infinite ease-in-out;
    border-color: rgba(255, 42, 84, 0.65) !important;
}

/* Скан-кольцо ожидания собеседника */
@keyframes radarPing {
    0% {
        transform: scale(0.85);
        opacity: 0.75;
    }
    100% {
        transform: scale(1.75);
        opacity: 0;
    }
}

.radar-ring::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 9999px;
    border: 1.5px solid var(--cyber-cyan);
    animation: radarPing 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Анимация появления инсайтов и AI-суфлера */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUpFade 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Кастомный тонкий скроллбар для ленты инсайтов */
.cyber-scrollbar::-webkit-scrollbar {
    width: 5px;
}

.cyber-scrollbar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.35);
    border-radius: 9999px;
}

.cyber-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 255, 0.28);
    border-radius: 9999px;
}

.cyber-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 240, 255, 0.5);
}

/* Безопасные отступы для Telegram Mini App на iOS/Android */
.safe-area-top {
    padding-top: max(0.75rem, env(safe-area-inset-top));
}

.safe-area-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}