/* ═══════════════════════════════════════════════════════════
   Fun Modes Visual Effects
   Horror, Disco, Pirate, Zen
   ═══════════════════════════════════════════════════════════ */

/* ── AI Mode Display — fun-mode tint overrides only ── */
/* Base styling is handled by ui-enhancements.css; only tint per active fun mode here */

/* ── HORROR MODE ──────────────────────────────────────── */
body.horror-mode {
    --bg-primary: #1a0000 !important;
    --bg-secondary: #2a0000 !important;
    --accent-primary: #ff0000 !important;
    --accent-glow: rgba(255, 0, 0, 0.3) !important;
}

body.horror-mode::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(80, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 9998;
    animation: horrorPulse 4s ease-in-out infinite;
}

@keyframes horrorPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

.horror-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9997;
}

.horror-vignette {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    box-shadow: inset 0 0 200px rgba(100, 0, 0, 0.8);
    pointer-events: none;
}

.horror-scanlines {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
    pointer-events: none;
    animation: scanlineFlicker 0.1s infinite;
}

@keyframes scanlineFlicker {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.4; }
}

.horror-flash-msg {
    position: fixed;
    z-index: 10000;
    font-family: 'Courier New', monospace;
    font-size: 1.3em;
    color: #ff2222;
    text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff000080;
    pointer-events: none;
    animation: horrorFlash 2.5s ease-in-out forwards;
    white-space: nowrap;
    letter-spacing: 4px;
}

@keyframes horrorFlash {
    0% { opacity: 0; transform: scale(0.8) translateY(10px); filter: blur(4px); }
    15% { opacity: 1; transform: scale(1.05) translateY(0); filter: blur(0); }
    70% { opacity: 0.8; }
    100% { opacity: 0; transform: scale(1.1) translateY(-10px); filter: blur(3px); }
}

body.horror-mode .chat-container {
    background: linear-gradient(180deg, #0a0000 0%, #1a0000 100%) !important;
}

body.horror-mode .message.assistant .message-content {
    background: rgba(60, 0, 0, 0.5) !important;
    border-color: rgba(255, 0, 0, 0.2) !important;
    color: #ffcccc !important;
}

body.horror-mode .message.user .message-content {
    background: rgba(100, 0, 0, 0.4) !important;
    border-color: rgba(255, 0, 0, 0.15) !important;
}

body.horror-mode .input-area,
body.horror-mode .chat-header {
    background: rgba(20, 0, 0, 0.9) !important;
    border-color: rgba(255, 0, 0, 0.15) !important;
}

body.horror-mode .sidebar {
    background: linear-gradient(180deg, #0d0000, #1a0000) !important;
}

/* ── DISCO MODE ──────────────────────────────────────── */
body.disco-mode {
    --disco-hue: 0deg;
    animation: discoBackground 0.5s linear infinite;
}

@keyframes discoBackground {
    0%, 100% { background-color: hsl(var(--disco-hue, 0), 80%, 8%); }
}

body.disco-mode::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, hsla(var(--disco-hue, 0), 100%, 50%, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, hsla(calc(var(--disco-hue, 0) + 120), 100%, 50%, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, hsla(calc(var(--disco-hue, 0) + 240), 100%, 50%, 0.1) 0%, transparent 60%);
    pointer-events: none;
    z-index: 9997;
    animation: discoLightSweep 3s ease-in-out infinite;
}

@keyframes discoLightSweep {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(2deg) scale(1.02); }
    50% { transform: rotate(-1deg) scale(0.98); }
    75% { transform: rotate(1deg) scale(1.01); }
}

.disco-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
}

.disco-ball {
    position: fixed;
    top: 10px;
    right: 20px;
    font-size: 50px;
    z-index: 10001;
    animation: discoBallSpin 2s linear infinite;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.5));
    pointer-events: none;
}

@keyframes discoBallSpin {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

.disco-lights {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: conic-gradient(
        from var(--disco-hue, 0deg),
        hsla(0, 100%, 50%, 0.05),
        hsla(60, 100%, 50%, 0.05),
        hsla(120, 100%, 50%, 0.05),
        hsla(180, 100%, 50%, 0.05),
        hsla(240, 100%, 50%, 0.05),
        hsla(300, 100%, 50%, 0.05),
        hsla(360, 100%, 50%, 0.05)
    );
    pointer-events: none;
    animation: discoRotate 4s linear infinite;
}

@keyframes discoRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

body.disco-mode .message.assistant .message-content {
    border-image: linear-gradient(
        var(--disco-hue, 0deg),
        hsl(var(--disco-hue, 0), 80%, 60%),
        hsl(calc(var(--disco-hue, 0) + 120), 80%, 60%),
        hsl(calc(var(--disco-hue, 0) + 240), 80%, 60%)
    ) 1 !important;
    border-width: 1px !important;
    border-style: solid !important;
}

body.disco-mode .chat-header,
body.disco-mode .input-area {
    border-color: hsla(var(--disco-hue, 0), 80%, 50%, 0.3) !important;
}

body.disco-mode .sidebar {
    background: linear-gradient(
        180deg,
        hsla(var(--disco-hue, 0), 40%, 10%, 0.95),
        hsla(calc(var(--disco-hue, 0) + 180), 40%, 8%, 0.95)
    ) !important;
}

body.disco-mode .send-btn {
    background: linear-gradient(135deg, 
        hsl(var(--disco-hue, 0), 80%, 50%), 
        hsl(calc(var(--disco-hue, 0) + 120), 80%, 50%)
    ) !important;
    animation: discoBtnPulse 0.5s ease-in-out infinite;
}

@keyframes discoBtnPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ── PIRATE MODE ──────────────────────────────────────── */
body.pirate-mode {
    --bg-primary: #1a1200 !important;
    --bg-secondary: #2a1e00 !important;
    --accent-primary: #d4a017 !important;
}

body.pirate-mode::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: 
        radial-gradient(ellipse at bottom, rgba(26, 18, 0, 0.8) 0%, transparent 70%),
        repeating-linear-gradient(
            90deg,
            transparent 0%,
            rgba(139, 90, 0, 0.03) 50%,
            transparent 100%
        );
    pointer-events: none;
    z-index: 9997;
}

.pirate-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9998;
}

.pirate-flag {
    position: fixed;
    top: 8px;
    right: 16px;
    font-size: 40px;
    z-index: 10001;
    pointer-events: none;
    animation: pirateFlag 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

@keyframes pirateFlag {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

body.pirate-mode .chat-container {
    background: linear-gradient(180deg, #0d0a00 0%, #1a1200 100%) !important;
}

body.pirate-mode .message.assistant .message-content {
    background: rgba(50, 35, 0, 0.5) !important;
    border-color: rgba(212, 160, 23, 0.25) !important;
    color: #ffe6a0 !important;
}

body.pirate-mode .sidebar {
    background: linear-gradient(180deg, #0d0800, #1a1200) !important;
    border-color: rgba(212, 160, 23, 0.15) !important;
}

body.pirate-mode .input-area,
body.pirate-mode .chat-header {
    background: rgba(20, 14, 0, 0.95) !important;
    border-color: rgba(212, 160, 23, 0.15) !important;
}

/* ── ZEN MODE ──────────────────────────────────────── */
body.zen-mode {
    --bg-primary: #0a0f0a !important;
    --bg-secondary: #0f1a0f !important;
    --accent-primary: #4ade80 !important;
    transition: all 1s ease;
}

body.zen-mode::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at bottom center, rgba(74, 222, 128, 0.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 9997;
    animation: zenBreathe 8s ease-in-out infinite;
}

@keyframes zenBreathe {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.zen-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
}

.zen-particles {
    width: 100%;
    height: 100%;
    position: relative;
}

.zen-petal {
    position: absolute;
    top: -30px;
    animation: zenFall linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes zenFall {
    0% {
        transform: translateY(-100vh) rotate(0deg) translateX(0);
        opacity: 0;
    }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% {
        transform: translateY(100vh) rotate(360deg) translateX(100px);
        opacity: 0;
    }
}

body.zen-mode .chat-container {
    background: linear-gradient(180deg, #060d06 0%, #0a140a 100%) !important;
}

body.zen-mode .message.assistant .message-content {
    background: rgba(0, 30, 0, 0.4) !important;
    border-color: rgba(74, 222, 128, 0.15) !important;
    color: #c8f7d5 !important;
    border-radius: 20px !important;
}

body.zen-mode .sidebar {
    background: linear-gradient(180deg, #060a06, #0a140a) !important;
}

body.zen-mode .input-area,
body.zen-mode .chat-header {
    background: rgba(6, 13, 6, 0.95) !important;
    border-color: rgba(74, 222, 128, 0.1) !important;
}

body.zen-mode * {
    transition: all 0.5s ease !important;
}

/* ── AI Mode Dropdown Styles for New Modes ───────────── */
.ai-mode-option.horror-mode-opt i { color: #ff2222; }
.ai-mode-option.disco-mode-opt i { 
    background: linear-gradient(135deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ai-mode-option.pirate-mode-opt i { color: #d4a017; }
.ai-mode-option.zen-mode-opt i { color: #4ade80; }

.ai-mode-option.horror-mode-opt:hover { background: rgba(255, 0, 0, 0.1) !important; }
.ai-mode-option.disco-mode-opt:hover { background: linear-gradient(135deg, rgba(255,0,0,0.08), rgba(0,255,0,0.08), rgba(0,0,255,0.08)) !important; }
.ai-mode-option.pirate-mode-opt:hover { background: rgba(212, 160, 23, 0.1) !important; }
.ai-mode-option.zen-mode-opt:hover { background: rgba(74, 222, 128, 0.1) !important; }