:root {
    /* ── Gothic cathedral palette (brightened for readability) ── */
    --bg: #0a080a;
    --bg-panel: #1a1218;
    --bg-input: #151015;
    --red: #c41414;
    --red-bright: #ff3355;
    --red-dim: #700e0e;
    --gold: #e8b020;
    --gold-dim: #a07812;
    --cyan: #f0c850;
    --cyan-dim: #b09038;
    --purple: #6a18a8;
    --purple-dim: #420a70;
    --candle: #ffdd55;
    --candle-dim: #d4a020;
    --parchment: #f0e6d4;
    --parchment-dim: #9a8a78;
    --stone: #8a7a7a;
    --stone-dim: #544848;
    --text: #f8f0e6;
    --text-dim: #b8a890;
    --border: rgba(200, 30, 30, 0.75);
    --font: 'Courier New', Courier, monospace;
    --glow-red: 0 0 12px rgba(168, 5, 5, 0.9), 0 0 35px rgba(168, 5, 5, 0.55), 0 0 60px rgba(168, 5, 5, 0.25);
    --glow-cyan: 0 0 12px rgba(232, 192, 80, 0.7), 0 0 35px rgba(232, 192, 80, 0.4), 0 0 60px rgba(232, 192, 80, 0.15);
    --glow-gold: 0 0 12px rgba(212, 160, 23, 0.7), 0 0 35px rgba(212, 160, 23, 0.4), 0 0 60px rgba(212, 160, 23, 0.15);
    --glow-purple: 0 0 12px rgba(90, 16, 144, 0.75), 0 0 35px rgba(90, 16, 144, 0.4), 0 0 60px rgba(90, 16, 144, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--red) var(--bg);
}

*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--red), var(--gold)); border-radius: 3px; }
*::-webkit-scrollbar-track { background: var(--bg); }

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    overflow: hidden;
    cursor: default;
}
body.custom-cursor-active {
    cursor: none;
}
body.custom-cursor-active a,
body.custom-cursor-active button,
body.custom-cursor-active input,
body.custom-cursor-active select,
body.custom-cursor-active textarea,
body.custom-cursor-active label {
    cursor: none;
}

/* ── Gothic cathedral atmosphere ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -6;
    background:
        radial-gradient(circle at 20% 30%, rgba(90, 16, 144, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(168, 5, 5, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(212, 160, 23, 0.08) 0%, transparent 55%);
    pointer-events: none;
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -5;
    background-image:
        linear-gradient(90deg, rgba(168, 5, 5, 0.05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(90, 16, 144, 0.05) 1px, transparent 1px);
    background-size: 120px 120px;
    pointer-events: none;
}

.bg-painting {
    position: fixed;
    inset: 0;
    z-index: -7;
    background: url('/static/bg-painting.jpg?v=2') center center / cover no-repeat;
    filter: grayscale(10%) contrast(1.1) brightness(0.92);
    opacity: 0.95;
    pointer-events: none;
}
.bg-painting::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, transparent 50%, rgba(5,2,5,0.25) 90%),
        linear-gradient(180deg, rgba(5,2,5,0.15) 0%, transparent 15%, transparent 85%, rgba(5,2,5,0.25) 100%);
}

/* ── Custom cursor ── */
.custom-cursor {
    position: fixed;
    left: -100px;
    top: -100px;
    width: 26px;
    height: 26px;
    pointer-events: none;
    z-index: 2147483647;
    will-change: left, top;
    opacity: 0;
    color: var(--red);
    filter: drop-shadow(0 0 4px var(--red)) drop-shadow(0 0 10px var(--red));
    transition: opacity 0.12s ease, transform 0.12s ease, color 0.12s ease, filter 0.12s ease;
    margin-left: -13px;
    margin-top: -13px;
}
body.custom-cursor-active .custom-cursor {
    opacity: 1;
}
.custom-cursor.click {
    color: var(--gold);
    filter: drop-shadow(0 0 5px var(--gold)) drop-shadow(0 0 15px var(--gold));
    transform: scale(1.3);
}
.cursor-pentagram {
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: cursorSpin 5s linear infinite;
}
@keyframes cursorSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.cursor-trail {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 42, 68, 0.9), transparent 70%);
    pointer-events: none;
    z-index: 2147483646;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ── Background layers ── */
#matrix-canvas, #blood-rain-canvas, #hellfire-canvas, #embers-canvas, #runes-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
#matrix-canvas {
    position: fixed;
    inset: 0;
    z-index: -4;
    opacity: 0.18;
    pointer-events: none;
}

#blood-rain-canvas {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.55;
}

#hellfire-canvas {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
}

#webgl-canvas {
    position: fixed;
    inset: 0;
    z-index: -5;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#particles-js {
    position: fixed;
    inset: 0;
    z-index: -3;
    background: radial-gradient(ellipse at center, #120612 0%, #020202 100%);
}

.scanlines {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent 4px
    );
    opacity: 0.15;
}

.crt-flicker {
    position: fixed;
    inset: 0;
    z-index: 49;
    pointer-events: none;
    background: rgba(138, 3, 3, 0.03);
    animation: flicker 0.5s step-end infinite;
}

.chromatic-aberration {
    position: fixed;
    inset: 0;
    z-index: 47;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(138,3,3,0.04) 0%, transparent 33%, transparent 66%, rgba(75,0,130,0.04) 100%);
    mix-blend-mode: screen;
    animation: chromaticShift 5s ease-in-out infinite;
}

@keyframes chromaticShift {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.vignette {
    position: fixed;
    inset: 0;
    z-index: 48;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 60%, rgba(0,0,0,0.22) 100%);
}

.circuit-lines {
    position: fixed;
    inset: 0;
    z-index: 46;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(138,3,3,0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(75,0,130,0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.5;
    animation: circuitPulse 8s ease-in-out infinite;
}
@keyframes circuitPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.screen-shake {
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    animation: none;
}
.screen-shake.shaking {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 1px, 0); }
    20%, 80% { transform: translate3d(3px, -2px, 0); }
    30%, 50%, 70% { transform: translate3d(-5px, 2px, 0); }
    40%, 60% { transform: translate3d(5px, -1px, 0); }
}

.possession-overlay {
    position: fixed;
    inset: 0;
    z-index: 9980;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 30%, rgba(75, 0, 130, 0.35) 60%, rgba(138, 3, 3, 0.45) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    mix-blend-mode: multiply;
}
.possession-overlay.active {
    opacity: 1;
    animation: possessionPulse 2s ease-in-out infinite;
}
@keyframes possessionPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

.demon-spawn {
    position: fixed;
    inset: 0;
    z-index: 9970;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--red);
    text-shadow: var(--glow-red);
    opacity: 0;
    transition: opacity 0.3s;
    white-space: pre;
    font-family: var(--font);
}
.demon-spawn.active {
    opacity: 0.85;
}

@keyframes flicker {
    0%, 100% { opacity: 0.04; }
    50% { opacity: 0.09; }
}

/* ── Boot overlay ── */
.boot-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.boot-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.05);
    display: none !important;
    visibility: hidden !important;
}
.boot-frame {
    width: min(90vw, 820px);
    border: 1px solid var(--border);
    background: rgba(8, 8, 8, 0.95);
    padding: 24px;
    box-shadow: var(--glow-red);
    position: relative;
    overflow: hidden;
}
.boot-frame::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--purple), var(--red));
    animation: scanbar 2s linear infinite;
}
.boot-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(138, 3, 3, 0.05),
        rgba(138, 3, 3, 0.05) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
}
.boot-title {
    color: var(--red);
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 6px;
    text-shadow: var(--glow-red);
    margin-bottom: 16px;
    text-align: center;
    animation: bootTitleFlicker 1.5s infinite;
}
@keyframes bootTitleFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; text-shadow: 0 0 20px rgba(255,51,51,0.9); }
}
.boot-text {
    color: var(--candle);
    font-size: 0.82rem;
    line-height: 1.5;
    min-height: 240px;
    max-height: 55vh;
    overflow: hidden;
    text-shadow: 0 0 6px rgba(255, 191, 0, 0.35);
    white-space: pre-wrap;
}
.boot-progress {
    width: 100%;
    height: 4px;
    background: rgba(138, 3, 3, 0.15);
    margin-top: 16px;
    overflow: hidden;
    position: relative;
}
.boot-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--purple));
    box-shadow: var(--glow-red);
    transition: width 0.3s ease;
}
.boot-status {
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--gold);
    text-align: right;
    letter-spacing: 2px;
}

/* ── Terminal container ── */
.terminal-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 1700px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-top: none;
    border-bottom: none;
    box-shadow:
        0 0 50px rgba(168, 5, 5, 0.45),
        inset 0 0 100px rgba(90, 16, 144, 0.18);
    position: relative;
    z-index: 10;
    background: rgba(12, 7, 12, 0.48);
    box-shadow:
        0 0 60px rgba(138, 3, 3, 0.45),
        inset 0 0 100px rgba(75, 0, 130, 0.16);
}

.terminal-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--purple), var(--red));
    background-size: 300% 100%;
    animation: scanbar 4s linear infinite, gradientShift 6s linear infinite;
    z-index: 100;
}

.terminal-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 101;
    border-left: 1px solid rgba(168, 5, 5, 0.35);
    border-right: 1px solid rgba(168, 5, 5, 0.35);
    background:
        linear-gradient(180deg, rgba(168,5,5,0.12) 0%, transparent 8%, transparent 92%, rgba(168,5,5,0.12) 100%);
    animation: borderGlowPulse 4s ease-in-out infinite;
}

@keyframes scanbar {
    0% { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}
@keyframes gradientShift {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.6); }
}
@keyframes borderGlowPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ── Header ── */
.terminal-header {
    padding: 16px 24px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(138, 3, 3, 0.12) 0%, rgba(75, 0, 130, 0.06) 50%, transparent 100%);
    position: relative;
}

.logo {
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: 8px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
}

.logo-red {
    color: var(--red);
    text-shadow: var(--glow-red);
    animation: redPulse 3s ease-in-out infinite;
}
.logo-cyan {
    color: var(--cyan);
    text-shadow: var(--glow-cyan);
    animation: cyanPulse 3s ease-in-out infinite 0.5s;
}

@keyframes redPulse {
    0%, 100% { text-shadow: 0 0 10px rgba(255,51,51,0.6), 0 0 20px rgba(255,51,51,0.3); }
    50% { text-shadow: 0 0 20px rgba(255,51,51,0.9), 0 0 40px rgba(255,51,51,0.5); }
}
@keyframes cyanPulse {
    0%, 100% { text-shadow: 0 0 10px rgba(0,255,170,0.5), 0 0 20px rgba(0,255,170,0.2); }
    50% { text-shadow: 0 0 20px rgba(0,255,170,0.8), 0 0 40px rgba(0,255,170,0.4); }
}

.version {
    display: block;
    font-size: 0.75rem;
    color: var(--gold);
    letter-spacing: 4px;
    margin-top: 4px;
    text-shadow: var(--glow-gold);
    animation: candleFlicker 3s ease-in-out infinite alternate;
}

.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-panel);
}
.glitch::before {
    color: var(--purple);
    animation: glitch-1 2.5s infinite linear alternate-reverse;
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitch::after {
    color: var(--red);
    animation: glitch-2 3s infinite linear alternate-reverse;
    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

@keyframes glitch-1 {
    0% { transform: translate(0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(3px, -2px); }
    60% { transform: translate(-2px, 1px); }
    80% { transform: translate(2px, -1px); }
    100% { transform: translate(0); }
}
@keyframes glitch-2 {
    0% { transform: translate(0); }
    20% { transform: translate(3px, -2px); }
    40% { transform: translate(-3px, 1px); }
    60% { transform: translate(2px, -1px); }
    80% { transform: translate(-2px, 2px); }
    100% { transform: translate(0); }
}

.subtitle {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-dim);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.typing-text {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--red);
    animation: typing 3s steps(40, end) forwards, blink-caret 0.75s step-end infinite;
    width: 0;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}
@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--red); }
}
.cursor-blink {
    color: var(--red);
    animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.header-meta {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    background: rgba(138, 3, 3, 0.08);
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--text-dim);
    transition: all 0.2s;
}
.meta-pill:hover {
    box-shadow: var(--glow-red);
    border-color: var(--red);
}
.demon-pill {
    color: var(--red);
    border-color: rgba(138, 3, 3, 0.6);
    animation: demonPulse 2s infinite;
}
.danger-pill {
    color: var(--gold);
    border-color: var(--gold);
    animation: goldPulse 1.5s infinite;
}
@keyframes demonPulse {
    0%, 100% { text-shadow: 0 0 5px rgba(138,3,3,0.5); }
    50% { text-shadow: 0 0 15px rgba(138,3,3,0.9); }
}
@keyframes goldPulse {
    0%, 100% { text-shadow: 0 0 5px rgba(184,134,11,0.5); }
    50% { text-shadow: 0 0 15px rgba(184,134,11,0.9); }
}

/* ── Layout ── */
.chat-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
    width: 320px;
    min-width: 280px;
    background: rgba(34, 22, 30, 0.82);
    border-right: 1px solid var(--border);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}

.panel {
    background: rgba(16, 10, 16, 0.72);
    border: 1px solid var(--border);
    padding: 14px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), var(--gold), transparent);
    opacity: 0.5;
}
.panel::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 30px; height: 30px;
    border-right: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
    opacity: 0.3;
}

.panel-title {
    font-size: 0.7rem;
    color: var(--gold);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-shadow: var(--glow-gold);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

.session-display label {
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* ── Cyber buttons ── */
.cyber-button {
    position: relative;
    background: transparent;
    border: 1px solid var(--red-bright);
    color: var(--red-bright);
    padding: 10px 14px;
    font-family: var(--font);
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: none;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 0 8px rgba(224, 42, 68, 0.35);
}
.cyber-button:hover {
    background: rgba(168, 5, 5, 0.18);
    box-shadow: var(--glow-red);
    transform: translateY(-1px);
}
.cyber-button:active { transform: translateY(1px) scale(0.98); }
.cyber-button.secondary { border-color: var(--candle); color: var(--candle); }
.cyber-button.secondary:hover { background: rgba(255, 191, 0, 0.1); box-shadow: var(--glow-cyan); }
.cyber-button.accent { border-color: var(--gold); color: var(--gold); }
.cyber-button.accent:hover { background: rgba(184, 134, 11, 0.14); box-shadow: var(--glow-gold); }
.cyber-button.send { border-color: var(--candle); color: var(--candle); padding: 10px 18px; }

.btn-text { position: relative; z-index: 2; }
.btn-glitch {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(138, 3, 3, 0.35), transparent);
    transition: left 0.4s ease;
    z-index: 1;
}
.cyber-button:hover .btn-glitch { left: 100%; }

.quick-commands {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.quick-cmd {
    background: rgba(138, 3, 3, 0.08);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 8px;
    font-family: var(--font);
    font-size: 0.75rem;
    cursor: none;
    transition: all 0.2s;
}
.quick-cmd:hover {
    background: rgba(138, 3, 3, 0.2);
    box-shadow: 0 0 8px rgba(138, 3, 3, 0.35);
}

/* ── Inputs ── */
.cyber-input, .cyber-select {
    background: rgba(30, 18, 28, 0.95);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    font-family: var(--font);
    font-size: 0.85rem;
    width: 100%;
    transition: all 0.25s ease;
    cursor: none;
}
.cyber-input::placeholder { color: var(--text-dim); opacity: 0.8; }
.cyber-input:focus, .cyber-select:focus {
    outline: none;
    border-color: var(--red-bright);
    background: rgba(40, 20, 30, 0.98);
    box-shadow: 0 0 15px rgba(224, 42, 68, 0.55), inset 0 0 10px rgba(224, 42, 68, 0.1);
}
.cyber-select option { background: var(--bg); color: var(--text); }

.model-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-dim);
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.status-dot.good { background: var(--cyan); box-shadow: var(--glow-cyan); }
.status-dot.bad { background: var(--red); box-shadow: var(--glow-red); }

.cyber-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-dim);
    cursor: none;
}
.cyber-checkbox-label input { display: none; }
.checkmark {
    width: 16px;
    height: 16px;
    border: 1px solid var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.cyber-checkbox-label input:checked + .checkmark {
    background: var(--red);
    box-shadow: var(--glow-red);
}
.cyber-checkbox-label input:checked + .checkmark::after {
    content: "✓";
    color: var(--bg);
    font-size: 0.7rem;
    font-weight: bold;
}

/* ── Swarm tasks ── */
.swarm-tasks {
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    padding: 8px;
    font-size: 0.72rem;
}
.swarm-task {
    margin-bottom: 8px;
    padding: 8px;
    border-left: 3px solid var(--text-dim);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.swarm-task::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, transparent, rgba(255,204,0,0.1), transparent);
    transition: width 0.5s;
}
.swarm-task.running::after {
    width: 100%;
    animation: taskSweep 1.5s linear infinite;
}
@keyframes taskSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.swarm-task.queued { border-left-color: var(--text-dim); }
.swarm-task.running { border-left-color: var(--gold); animation: pulse 1s infinite; }
.swarm-task.completed { border-left-color: var(--cyan); }
.swarm-task.failed { border-left-color: var(--red); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ── Chat area ── */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(8, 4, 8, 0.45);
    position: relative;
}

.chat-output {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: rgba(10, 5, 10, 0.55);
}
.pentagram-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50vh;
    color: rgba(168, 5, 5, 0.05);
    pointer-events: none;
    z-index: 0;
    text-shadow: 0 0 80px rgba(168, 5, 5, 0.15);
}

.message {
    max-width: 85%;
    padding: 14px 18px;
    border-radius: 2px;
    font-size: 0.9rem;
    line-height: 1.5;
    animation: msgIn 0.25s ease;
    position: relative;
}
.message.glitching {
    animation: msgGlitch 0.3s ease;
}
@keyframes msgGlitch {
    0% { transform: translate(0); filter: hue-rotate(0deg); }
    20% { transform: translate(-3px, 2px); filter: hue-rotate(90deg); }
    40% { transform: translate(3px, -2px); filter: hue-rotate(-90deg); }
    60% { transform: translate(-2px, 1px); filter: hue-rotate(45deg); }
    80% { transform: translate(2px, -1px); filter: hue-rotate(-45deg); }
    100% { transform: translate(0); filter: hue-rotate(0deg); }
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.user-message {
    align-self: flex-end;
    background: rgba(255, 208, 74, 0.18);
    border: 1px solid var(--candle);
    color: #fff6d8;
    box-shadow: var(--glow-cyan);
}
.user-message::after {
    content: '🕯️ YOU';
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: 0.6rem;
    color: var(--candle);
    background: var(--bg);
    padding: 0 6px;
    letter-spacing: 1px;
}

.ai-message {
    align-self: flex-start;
    background: rgba(168, 5, 5, 0.22);
    border: 1px solid var(--red-bright);
    color: var(--text);
    box-shadow: var(--glow-red);
}
.ai-message::after {
    content: '🩸 LUCIFERXVII';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 0.6rem;
    color: var(--red-bright);
    background: var(--bg);
    padding: 0 6px;
    letter-spacing: 1px;
}

.system-message {
    align-self: center;
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.4);
    color: var(--gold);
    font-size: 0.8rem;
    max-width: 90%;
    box-shadow: var(--glow-gold);
}
.error-message {
    align-self: flex-start;
    background: rgba(196, 30, 58, 0.1);
    border: 1px solid #a41628;
    color: #e85d75;
    box-shadow: 0 0 10px rgba(138, 3, 3, 0.35);
}
.error-message::before {
    content: '⚠️ ';
}
.streaming-message {
    align-self: flex-start;
    background: rgba(255, 191, 0, 0.06);
    border: 1px solid rgba(255, 191, 0, 0.35);
    color: var(--candle);
}

.message strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.user-message strong { color: var(--cyan); }
.ai-message strong { color: var(--red); }
.system-message strong { color: var(--gold); }

.message pre {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border);
    padding: 12px;
    overflow-x: auto;
    margin: 10px 0;
    font-size: 0.8rem;
    border-radius: 2px;
    position: relative;
}
.message pre::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--purple));
}
.message code {
    background: rgba(138, 3, 3, 0.14);
    color: var(--candle);
    padding: 2px 5px;
    font-size: 0.85em;
}
.message pre code { background: transparent; padding: 0; }

.message table {
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 0.8rem;
    width: 100%;
}
.message th, .message td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
}
.message th {
    background: rgba(138, 3, 3, 0.18);
    color: var(--gold);
}
.message tr:nth-child(even) { background: rgba(212, 197, 176, 0.03); }

.cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background: var(--gold);
    animation: blink 0.8s step-end infinite;
    vertical-align: text-bottom;
    margin-left: 2px;
}

/* ── Typing indicator ── */
.typing-indicator {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 20px 10px;
    background: rgba(255, 191, 0, 0.06);
    border: 1px solid rgba(255, 191, 0, 0.3);
    border-radius: 2px;
    color: var(--candle);
    font-size: 0.75rem;
    letter-spacing: 1px;
    animation: msgIn 0.2s ease;
}
.typing-indicator.hidden { display: none; }
.typing-dot {
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
    box-shadow: var(--glow-gold);
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ── Input bar ── */
.input-bar {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: rgba(18, 10, 16, 0.92);
    border-top: 1px solid var(--border);
    gap: 10px;
    position: relative;
}
.input-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), var(--gold), transparent);
}
.prompt-symbol {
    color: var(--gold);
    font-weight: bold;
    text-shadow: var(--glow-gold);
    white-space: nowrap;
    font-size: 1.1rem;
}
.input-bar .cyber-input {
    flex: 1;
}

/* ── Command palette ── */
.command-palette {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: min(90vw, 600px);
    background: rgba(5, 5, 5, 0.97);
    border: 1px solid var(--border);
    box-shadow: var(--glow-red);
    z-index: 200;
    padding: 16px;
    animation: paletteIn 0.15s ease;
}
.command-palette.hidden { display: none; }
@keyframes paletteIn {
    from { opacity: 0; transform: translateX(-50%) scale(0.95); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}
.command-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.command-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    outline: none;
    cursor: none;
}
.command-palette-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.palette-item {
    padding: 8px 12px;
    cursor: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.15s;
    border-left: 2px solid transparent;
}
.palette-item:hover, .palette-item.selected {
    background: rgba(138, 3, 3, 0.14);
    border-left-color: var(--red);
}
.palette-item .palette-cmd {
    color: var(--candle);
    font-weight: bold;
}
.palette-item .palette-desc {
    color: var(--text-dim);
    font-size: 0.75rem;
}

/* ── Toasts ── */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast {
    padding: 12px 18px;
    border: 1px solid var(--border);
    background: rgba(8, 8, 8, 0.95);
    color: var(--text);
    font-size: 0.8rem;
    box-shadow: var(--glow-red);
    animation: toastIn 0.3s ease;
    pointer-events: auto;
    max-width: 320px;
    position: relative;
    overflow: hidden;
}
.toast::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 3px; height: 100%;
    background: var(--red);
}
.toast.success { border-color: var(--candle); color: var(--candle); box-shadow: var(--glow-cyan); }
.toast.success::before { background: var(--candle); }
.toast.error { border-color: #a41628; color: #e85d75; }
.toast.error::before { background: #a41628; }
.toast.warn { border-color: var(--gold); color: var(--gold); box-shadow: var(--glow-gold); }
.toast.warn::before { background: var(--gold); }
@keyframes toastIn {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ── Footer ── */
.terminal-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background: rgba(12, 6, 12, 0.85);
    border-top: 1px solid var(--border);
    font-size: 0.68rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.footer-left, .footer-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-sep { color: var(--red); }
.conn-status { font-weight: bold; }
.conn-status.good { color: var(--candle); text-shadow: var(--glow-cyan); }
.conn-status.bad { color: var(--red); text-shadow: var(--glow-red); }
.possession-meter {
    color: var(--red);
    animation: meterPulse 2s infinite;
}
.possession-meter.danger {
    color: var(--gold);
    animation: meterPulse 0.5s infinite;
}
@keyframes meterPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Auth overlay ── */
.auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 2, 5, 0.97);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.auth-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    display: none !important;
}
.auth-frame {
    width: min(90vw, 420px);
    border: 1px solid var(--border);
    background: rgba(8, 8, 8, 0.98);
    padding: 32px;
    box-shadow: var(--glow-red);
    text-align: center;
}
.auth-title {
    font-family: var(--font-gothic);
    font-size: 2rem;
    color: var(--red-bright);
    text-shadow: var(--glow-red);
    margin-bottom: 8px;
}
.auth-subtitle {
    font-size: 0.8rem;
    color: var(--text-dim);
    letter-spacing: 4px;
    margin-bottom: 24px;
}
.auth-frame .cyber-input {
    margin-bottom: 16px;
    text-align: center;
}
.auth-error {
    color: var(--red-bright);
    font-size: 0.8rem;
    margin-top: 12px;
    min-height: 1.2em;
}

/* ── System prompt textarea ── */
.cyber-textarea {
    width: 100%;
    min-height: 80px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    font-family: var(--font);
    font-size: 0.75rem;
    line-height: 1.4;
    resize: vertical;
    transition: all 0.3s ease;
}
.cyber-textarea:focus {
    outline: none;
    border-color: var(--red-bright);
    box-shadow: 0 0 15px rgba(224, 42, 68, 0.45), inset 0 0 10px rgba(224, 42, 68, 0.08);
}
.cyber-button.small {
    padding: 6px 10px;
    font-size: 0.7rem;
}

/* ── File tree ── */
.file-tree {
    max-height: 220px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    padding: 8px;
    font-size: 0.75rem;
}
.file-entry {
    padding: 4px 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-entry:hover {
    background: rgba(224, 42, 68, 0.12);
    color: var(--text);
    padding-left: 10px;
}
.file-entry.dir { color: var(--gold); }
.file-entry.dir:hover { color: var(--gold-bright); }
.file-entry.error { color: var(--red-bright); }

/* ── Message timestamps ── */
.message {
    position: relative;
}
.msg-time {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.65rem;
    color: var(--text-dim);
    opacity: 0.6;
    vertical-align: middle;
}
.message:hover .msg-time {
    opacity: 1;
    color: var(--red-bright);
}
.message[data-time]::after {
    content: attr(data-time);
    position: absolute;
    bottom: -14px;
    right: 6px;
    font-size: 0.6rem;
    color: var(--text-dim);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.message:hover[data-time]::after {
    opacity: 0.7;
}

/* ── Candle & smoke overlays ── */
.smoke-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 90%, rgba(60, 60, 60, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 85%, rgba(80, 80, 80, 0.2) 0%, transparent 35%);
    filter: blur(30px);
    animation: smokeRise 12s ease-in-out infinite alternate;
}
@keyframes smokeRise {
    0% { opacity: 0.4; transform: translateY(0) scale(1); }
    100% { opacity: 0.7; transform: translateY(-20px) scale(1.05); }
}
.candle {
    position: absolute;
    bottom: 12px;
    width: 8px;
    height: 60px;
    background: linear-gradient(90deg, #1a0f0f, #2a1a1a, #1a0f0f);
    border-radius: 2px;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 30px rgba(255, 100, 30, 0.15);
}
.candle::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 10px;
    background: #e0e0e0;
    border-radius: 1px;
}
.candle::after {
    content: '';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 18px;
    background: radial-gradient(ellipse at center, rgba(255, 160, 40, 0.95) 0%, rgba(255, 60, 20, 0.4) 50%, transparent 75%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: candleFlicker 0.12s infinite alternate, candleFloat 2s ease-in-out infinite;
    filter: blur(1px);
}
.candle-left { left: 18px; }
.candle-right { right: 18px; }
@keyframes candleFlicker {
    0% { transform: translateX(-50%) scale(1) rotate(-2deg); opacity: 0.9; }
    100% { transform: translateX(-50%) scale(1.1) rotate(2deg); opacity: 1; }
}
@keyframes candleFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -3px; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .sidebar { width: 260px; min-width: 240px; }
    .logo { font-size: 2rem; letter-spacing: 4px; }
    .header-meta { gap: 8px; }
    .custom-cursor, .cursor-trail { display: none !important; }
    body, body.custom-cursor-active, body.custom-cursor-active * { cursor: auto !important; }
}
@media (max-width: 700px) {
    .chat-container { flex-direction: column; }
    .sidebar {
        width: 100%;
        max-height: 32vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
        min-width: auto;
    }
    .message { max-width: 95%; }
    .terminal-footer { flex-direction: column; gap: 6px; }
}

/* ── Ritual mode ── */
.ritual-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 1s ease;
}
.ritual-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
#ritual-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ritual-content {
    position: relative;
    z-index: 2;
    text-align: center;
    animation: ritualPulse 2s ease-in-out infinite;
}
.ritual-sigil {
    font-size: 10rem;
    color: var(--red);
    text-shadow: var(--glow-red);
    animation: ritualSpin 10s linear infinite;
    line-height: 1;
}
.ritual-title {
    font-size: 2.5rem;
    color: var(--gold);
    letter-spacing: 8px;
    text-shadow: var(--glow-gold);
    margin-top: 20px;
}
.ritual-subtitle {
    font-size: 1.2rem;
    color: var(--red);
    letter-spacing: 4px;
    margin-top: 10px;
    text-shadow: var(--glow-red);
}
.ritual-text {
    font-size: 0.9rem;
    color: var(--candle);
    margin-top: 30px;
    max-width: 600px;
    line-height: 1.6;
    text-shadow: 0 0 10px rgba(255,191,0,0.35);
}
@keyframes ritualPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.9; }
}
@keyframes ritualSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Gothic enhancements ── */
.candle-flicker {
    animation: candleFlicker 2.5s ease-in-out infinite alternate;
}
@keyframes candleFlicker {
    0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(255, 191, 0, 0.5); }
    25% { opacity: 0.92; text-shadow: 0 0 12px rgba(255, 191, 0, 0.7); }
    50% { opacity: 0.85; text-shadow: 0 0 6px rgba(255, 191, 0, 0.4); }
    75% { opacity: 0.95; text-shadow: 0 0 14px rgba(255, 191, 0, 0.8); }
}

.gothic-border {
    position: relative;
    border: 1px solid var(--border);
}
.gothic-border::before,
.gothic-border::after {
    content: '⛧';
    position: absolute;
    font-size: 0.7rem;
    color: var(--red-dim);
}
.gothic-border::before { top: 4px; left: 4px; }
.gothic-border::after { bottom: 4px; right: 4px; transform: rotate(180deg); }

.blood-drip {
    position: relative;
}
.blood-drip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, var(--red-bright), transparent);
    animation: bloodDrip 4s ease-in-out infinite;
}
@keyframes bloodDrip {
    0%, 80%, 100% { height: 0; opacity: 0; }
    40% { height: 20px; opacity: 0.8; }
    60% { height: 35px; opacity: 0.5; }
}

.stained-glass {
    position: relative;
    overflow: hidden;
}
.stained-glass::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(138, 3, 3, 0.05) 45deg,
        transparent 90deg,
        rgba(75, 0, 130, 0.05) 135deg,
        transparent 180deg,
        rgba(184, 134, 11, 0.04) 225deg,
        transparent 270deg,
        rgba(138, 3, 3, 0.05) 315deg,
        transparent 360deg
    );
    animation: stainedGlassRotate 20s linear infinite;
    pointer-events: none;
}
@keyframes stainedGlassRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cathedral-arch {
    border-radius: 120px 120px 0 0 / 40px 40px 0 0;
}

/* ── INSANE GOTHIC OVERDRIVE ── */

/* ── INSANE GOTHIC OVERDRIVE ── */
.gothic-font {
    font-family: 'UnifrakturMaguntia', 'Cinzel', 'Courier New', serif;
    font-weight: 400;
    letter-spacing: 2px;
}

.blood-moon {
    position: fixed;
    top: -20vh;
    right: -10vw;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #e02a44 0%, #a80505 25%, #5c0808 45%, transparent 70%);
    opacity: 0.22;
    z-index: -4;
    pointer-events: none;
    filter: blur(2px);
    animation: bloodMoonPulse 8s ease-in-out infinite;
}
@keyframes bloodMoonPulse {
    0%, 100% { opacity: 0.18; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.05); }
}

.occult-sigil {
    position: fixed;
    bottom: -15vh;
    left: -10vw;
    width: 50vw;
    height: 50vw;
    font-size: 45vw;
    color: rgba(90, 16, 144, 0.07);
    text-shadow: 0 0 100px rgba(168, 5, 5, 0.18);
    z-index: -4;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: occultSpin 60s linear infinite;
    user-select: none;
}
@keyframes occultSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cursed-text {
    animation: cursedGlitch 0.4s infinite;
    text-shadow:
        2px 0 rgba(138, 3, 3, 0.7),
        -2px 0 rgba(75, 0, 130, 0.7),
        0 0 10px rgba(196, 30, 58, 0.5);
}
@keyframes cursedGlitch {
    0% { transform: translate(0); filter: hue-rotate(0deg); }
    20% { transform: translate(-2px, 1px); filter: hue-rotate(15deg); }
    40% { transform: translate(2px, -1px); filter: hue-rotate(-15deg); }
    60% { transform: translate(-1px, 2px); filter: hue-rotate(10deg); }
    80% { transform: translate(1px, -2px); filter: hue-rotate(-10deg); }
    100% { transform: translate(0); filter: hue-rotate(0deg); }
}

.dripping-border {
    position: relative;
    border: 1px solid var(--red-dim);
}
.dripping-border::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red-bright), var(--gold), var(--red-bright), transparent);
}
.dripping-border::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, var(--red-bright), transparent);
    animation: borderDrip 5s ease-in-out infinite;
}
@keyframes borderDrip {
    0%, 70%, 100% { height: 0; opacity: 0; }
    30% { height: 30px; opacity: 0.9; }
    50% { height: 60px; opacity: 0.4; }
}

/* Cathedral window sidebar panels */
.sidebar .panel {
    position: relative;
    border: 1px solid var(--border);
    background: rgba(5, 4, 5, 0.75);
    clip-path: polygon(
        0 8px,
        8px 0,
        calc(100% - 8px) 0,
        100% 8px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px)
    );
}
.sidebar .panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(135deg, rgba(138,3,3,0.08) 0%, transparent 50%),
        linear-gradient(225deg, rgba(75,0,130,0.06) 0%, transparent 50%);
    pointer-events: none;
}
.sidebar .panel::after {
    content: '⛧';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.65rem;
    color: var(--red-dim);
    opacity: 0.5;
    border: none;
    width: auto;
    height: auto;
}

/* Make AI messages more demonic */
.ai-message {
    background: rgba(138, 3, 3, 0.1);
    border: 1px solid var(--red-dim);
    color: var(--parchment);
    box-shadow: var(--glow-red);
    position: relative;
    overflow: hidden;
}
.ai-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--red-bright), var(--gold), transparent);
    opacity: 0.9;
    animation: aiBloodDrip 4s ease-in-out infinite;
}
@keyframes aiBloodDrip {
    0%, 80%, 100% { transform: translateX(-100%); opacity: 0; }
    40% { transform: translateX(0); opacity: 0.8; }
    60% { transform: translateX(100%); opacity: 0; }
}
.ai-message .message-content {
    position: relative;
    z-index: 1;
}

/* Intense header */
.terminal-header {
    background:
        linear-gradient(180deg, rgba(138, 3, 3, 0.15) 0%, rgba(75, 0, 130, 0.08) 40%, transparent 100%);
}
.terminal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red-bright), var(--gold), var(--red-bright), transparent);
    opacity: 0.8;
}
.terminal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red-dim), transparent);
}

.logo {
    font-family: 'UnifrakturMaguntia', 'Cinzel', serif;
    letter-spacing: 4px;
    text-shadow:
        0 0 10px rgba(138, 3, 3, 0.8),
        0 0 30px rgba(138, 3, 3, 0.5),
        0 0 60px rgba(75, 0, 130, 0.3);
}
.logo-red {
    color: var(--red-bright);
    animation: logoBloodPulse 3s ease-in-out infinite;
}
.logo-cyan {
    color: var(--candle);
    animation: logoGoldPulse 3s ease-in-out infinite 0.5s;
}
@keyframes logoBloodPulse {
    0%, 100% { text-shadow: 0 0 10px rgba(138,3,3,0.6), 0 0 20px rgba(138,3,3,0.3); }
    50% { text-shadow: 0 0 25px rgba(196,30,58,0.9), 0 0 50px rgba(196,30,58,0.5), 0 0 80px rgba(75,0,130,0.3); }
}
@keyframes logoGoldPulse {
    0%, 100% { text-shadow: 0 0 10px rgba(212,175,55,0.4), 0 0 20px rgba(212,175,55,0.2); }
    50% { text-shadow: 0 0 20px rgba(255,191,0,0.7), 0 0 40px rgba(255,191,0,0.4); }
}

/* Possession overlay more intense */
.possession-overlay.active {
    opacity: 1;
    animation: possessionPulse 1s ease-in-out infinite;
    background: radial-gradient(circle at center, transparent 20%, rgba(75, 0, 130, 0.45) 50%, rgba(138, 3, 3, 0.6) 100%);
}

/* Make the typing indicator more candle-like */
.typing-dot {
    background: var(--candle);
    box-shadow: 0 0 8px var(--candle), 0 0 16px rgba(255, 191, 0, 0.5);
    animation: typingBounce 1.4s infinite ease-in-out both, candleFlicker 2s infinite alternate;
}

/* ── EVEN MORE CRAZY ── */
#embers-canvas {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}
#runes-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.25;
}

.fog-overlay {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(168, 5, 5, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 0%, rgba(90, 16, 144, 0.12) 0%, transparent 40%);
    animation: fogDrift 20s ease-in-out infinite alternate;
}
@keyframes fogDrift {
    0% { transform: translateX(-2%) scale(1.02); opacity: 0.9; }
    100% { transform: translateX(2%) scale(1); opacity: 1; }
}

.pentagram-overlay {
    position: fixed;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L63 40 L98 40 L70 62 L80 97 L50 75 L20 97 L30 62 L2 40 L37 40 Z' fill='none' stroke='%23a80505' stroke-width='0.6' opacity='0.12'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.8;
    animation: pentagramFloat 30s linear infinite;
}
@keyframes pentagramFloat {
    0% { background-position: 0 0; }
    100% { background-position: 180px 180px; }
}

.demon-eye {
    position: fixed;
    top: 15%;
    right: 5%;
    width: 80px;
    height: 48px;
    z-index: 45;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #d4c5b0 20%, #8a0303 60%, #030303 100%);
    box-shadow: 0 0 20px rgba(138, 3, 3, 0.5);
    animation: eyeBlink 4s infinite;
}
.demon-eye.active {
    opacity: 0.85;
}
.eye-sclera {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #e8e0d0 30%, #8a0303 80%);
}
.eye-iris {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffbf00 0%, #b8860b 40%, #4b0082 100%);
}
.eye-pupil {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #030303;
    box-shadow: 0 0 8px rgba(0,0,0,0.8);
}
@keyframes eyeBlink {
    0%, 96%, 100% { transform: scaleY(1); }
    98% { transform: scaleY(0.1); }
}

.latin-whisper {
    position: fixed;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 44;
    pointer-events: none;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: rgba(138, 3, 3, 0);
    text-shadow: 0 0 10px rgba(138, 3, 3, 0);
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: all 0.5s ease;
}
.latin-whisper.active {
    animation: latinFade 3s ease-in-out forwards;
}
@keyframes latinFade {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px); color: rgba(138, 3, 3, 0); text-shadow: 0 0 10px rgba(138, 3, 3, 0); }
    20% { opacity: 1; transform: translateX(-50%) translateY(0); color: rgba(196, 30, 58, 0.9); text-shadow: 0 0 20px rgba(196, 30, 58, 0.6); }
    80% { opacity: 1; color: rgba(196, 30, 58, 0.7); text-shadow: 0 0 30px rgba(196, 30, 58, 0.4); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-20px); color: rgba(138, 3, 3, 0); text-shadow: 0 0 10px rgba(138, 3, 3, 0); }
}

/* Walls bleeding */
.terminal-container {
    position: relative;
}
.terminal-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 98%, rgba(138, 3, 3, 0.15) 100%),
        linear-gradient(0deg, transparent 98%, rgba(138, 3, 3, 0.15) 100%);
    animation: wallBleed 8s ease-in-out infinite;
}
@keyframes wallBleed {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* Demonic whisper on AI text */
.cursed-text {
    animation: cursedGlitch 0.35s infinite;
    text-shadow:
        2px 0 rgba(138, 3, 3, 0.7),
        -2px 0 rgba(75, 0, 130, 0.7),
        0 0 12px rgba(196, 30, 58, 0.6);
    position: relative;
}
.cursed-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: rgba(255, 191, 0, 0.3);
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    transform: translate(1px, 1px);
    animation: cursedShift 0.5s infinite alternate;
}
@keyframes cursedShift {
    0% { transform: translate(1px, 1px); }
    100% { transform: translate(-1px, -1px); }
}

/* Blood sacrifice loading bar */
.sacrifice-bar {
    width: 100%;
    height: 3px;
    background: rgba(138, 3, 3, 0.2);
    position: relative;
    overflow: hidden;
}
.sacrifice-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, transparent, var(--red-bright), var(--gold), transparent);
    animation: sacrificeFlow 1.5s linear infinite;
}
@keyframes sacrificeFlow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Inverted cross cursor variant */
.inverted-cursor::before {
    content: '†';
    transform: translate(-50%, -50%) rotate(180deg);
    color: var(--red-bright);
}

/* ── CRAZY UPGRADE ── */
.cathedral-rays {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 60vh;
    z-index: -5;
    pointer-events: none;
    background: conic-gradient(
        from 180deg at 50% 0%,
        transparent 0deg,
        rgba(255, 191, 0, 0.03) 8deg,
        transparent 16deg,
        rgba(138, 3, 3, 0.04) 24deg,
        transparent 32deg,
        rgba(255, 191, 0, 0.02) 40deg,
        transparent 48deg,
        rgba(75, 0, 130, 0.03) 56deg,
        transparent 64deg,
        rgba(138, 3, 3, 0.04) 72deg,
        transparent 80deg,
        rgba(255, 191, 0, 0.03) 88deg,
        transparent 96deg,
        rgba(75, 0, 130, 0.02) 104deg,
        transparent 112deg,
        rgba(138, 3, 3, 0.04) 120deg,
        transparent 128deg,
        rgba(255, 191, 0, 0.02) 136deg,
        transparent 144deg,
        rgba(75, 0, 130, 0.03) 152deg,
        transparent 160deg,
        rgba(138, 3, 3, 0.04) 168deg,
        transparent 176deg,
        rgba(255, 191, 0, 0.03) 184deg,
        transparent 192deg,
        rgba(75, 0, 130, 0.02) 200deg,
        transparent 208deg,
        rgba(138, 3, 3, 0.04) 216deg,
        transparent 224deg,
        rgba(255, 191, 0, 0.02) 232deg,
        transparent 240deg,
        rgba(75, 0, 130, 0.03) 248deg,
        transparent 256deg,
        rgba(138, 3, 3, 0.04) 264deg,
        transparent 272deg,
        rgba(255, 191, 0, 0.02) 280deg,
        transparent 288deg,
        rgba(75, 0, 130, 0.03) 296deg,
        transparent 304deg,
        rgba(138, 3, 3, 0.04) 312deg,
        transparent 320deg,
        rgba(255, 191, 0, 0.02) 328deg,
        transparent 336deg,
        rgba(75, 0, 130, 0.03) 344deg,
        transparent 352deg,
        rgba(138, 3, 3, 0.04) 360deg
    );
    animation: rayPulse 10s ease-in-out infinite;
}
@keyframes rayPulse {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scaleY(1); }
    50% { opacity: 1; transform: translateX(-50%) scaleY(1.05); }
}

.screen-crack {
    position: fixed;
    inset: 0;
    z-index: 9995;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 L55 40 L45 55 L60 70 L50 100 M30 20 L45 35 M70 15 L55 40 M80 50 L60 70 M20 60 L45 55' stroke='%23ffffff' stroke-width='0.3' fill='none' opacity='0.4'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    mix-blend-mode: overlay;
}
.screen-crack.active {
    opacity: 0.7;
    animation: crackFlicker 0.2s ease-in-out 3;
}
@keyframes crackFlicker {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

#summon-canvas {
    position: fixed;
    inset: 0;
    z-index: 9994;
    pointer-events: none;
}

.demon-title {
    position: fixed;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 43;
    pointer-events: none;
    font-family: 'UnifrakturMaguntia', serif;
    font-size: 1rem;
    color: rgba(196, 30, 58, 0);
    text-shadow: 0 0 15px rgba(196, 30, 58, 0);
    letter-spacing: 3px;
    opacity: 0;
    transition: all 0.5s ease;
}
.demon-title.active {
    opacity: 1;
    color: rgba(196, 30, 58, 0.9);
    text-shadow: 0 0 20px rgba(196, 30, 58, 0.6), 0 0 40px rgba(138, 3, 3, 0.4);
    animation: titleFlicker 2s ease-in-out infinite;
}
@keyframes titleFlicker {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.demonic-quote {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9996;
    pointer-events: none;
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    text-align: center;
    color: rgba(255, 191, 0, 0);
    text-shadow: 0 0 20px rgba(255, 191, 0, 0);
    letter-spacing: 4px;
    max-width: 80vw;
    opacity: 0;
}
.demonic-quote.active {
    animation: quoteSummon 2.5s ease-in-out forwards;
}
@keyframes quoteSummon {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); color: rgba(255, 191, 0, 0); text-shadow: 0 0 20px rgba(255, 191, 0, 0); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); color: rgba(255, 191, 0, 0.95); text-shadow: 0 0 40px rgba(255, 191, 0, 0.7), 0 0 80px rgba(138, 3, 3, 0.5); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); color: rgba(255, 191, 0, 0.8); text-shadow: 0 0 30px rgba(255, 191, 0, 0.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); color: rgba(255, 191, 0, 0); text-shadow: 0 0 20px rgba(255, 191, 0, 0); }
}

/* Terminal alive breathing */
.terminal-container {
    animation: borderPulse 4s ease-in-out infinite, aliveBreath 8s ease-in-out infinite;
}
@keyframes aliveBreath {
    0%, 100% { transform: perspective(1000px) rotateX(0deg) scale(1); }
    50% { transform: perspective(1000px) rotateX(0.3deg) scale(1.002); }
}

/* Skull cursor variant */
.skull-cursor::before {
    content: '☠';
    font-size: 22px;
    color: var(--red-bright);
    animation: cursorSpin 4s linear infinite;
}

/* Blood splatter on input focus */
.input-bar:focus-within::after {
    content: '';
    position: absolute;
    top: -20px;
    right: 10%;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(138, 3, 3, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    animation: splatter 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes splatter {
    0% { opacity: 0; transform: scale(0); }
    50% { opacity: 0.8; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(2); }
}

/* Possession corruption levels for messages */
.message.corruption-1 { filter: hue-rotate(10deg) contrast(1.1); }
.message.corruption-2 { filter: hue-rotate(25deg) contrast(1.2) saturate(1.3); }
.message.corruption-3 { filter: hue-rotate(45deg) contrast(1.4) saturate(1.6) blur(0.3px); animation: corruptionShake 0.3s infinite; }
@keyframes corruptionShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}



/* ── AGENT MODE UI ── */
.agent-mode-label {
    color: var(--red-bright) !important;
    text-shadow: 0 0 6px rgba(196, 30, 58, 0.4);
    font-weight: bold;
}
.agent-mode-label .checkmark {
    border-color: var(--red-bright);
    box-shadow: 0 0 8px rgba(196, 30, 58, 0.3);
}
.agent-mode-label input:checked + .checkmark {
    background: var(--red-bright);
    box-shadow: var(--glow-red);
}

.agent-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
    animation: agentToolsIn 0.3s ease;
}
.agent-tools.hidden { display: none; }
@keyframes agentToolsIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.agent-tool-tag {
    font-size: 0.62rem;
    padding: 2px 6px;
    border: 1px solid var(--red-dim);
    color: var(--text-dim);
    background: rgba(138, 3, 3, 0.12);
    letter-spacing: 0.5px;
}
.agent-tool-tag:hover {
    border-color: var(--red-bright);
    color: var(--candle);
    box-shadow: 0 0 6px rgba(196, 30, 58, 0.3);
}

/* Agent event message styles */
.think-message {
    align-self: flex-start;
    background: rgba(75, 0, 130, 0.18);
    border: 1px solid rgba(138, 43, 226, 0.45);
    color: #d8b4fe;
    box-shadow: 0 0 12px rgba(138, 43, 226, 0.25);
    font-size: 0.82rem;
    max-width: 90%;
}
.think-message::before {
    content: '🧠';
    margin-right: 6px;
}
.think-message strong { color: #d8b4fe; }

.tool-message {
    align-self: flex-start;
    background: rgba(184, 134, 11, 0.12);
    border: 1px solid rgba(255, 191, 0, 0.45);
    color: var(--candle);
    box-shadow: 0 0 12px rgba(255, 191, 0, 0.2);
    font-size: 0.82rem;
    font-family: 'Courier New', monospace;
    max-width: 90%;
}
.tool-message::before {
    content: '⚒️';
    margin-right: 6px;
}
.tool-message strong { color: var(--candle); }

.tool-result-message {
    align-self: flex-start;
    background: rgba(0, 100, 80, 0.14);
    border: 1px solid rgba(0, 255, 170, 0.35);
    color: #7fffd4;
    box-shadow: 0 0 12px rgba(0, 255, 170, 0.15);
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
    max-width: 90%;
}
.tool-result-message::before {
    content: '📊';
    margin-right: 6px;
}
.tool-result-message strong { color: #7fffd4; }

/* ── BRIGHTNESS / READABILITY FIXES ── */
:root {
    --bg: #0a070a;
    --bg-panel: #1a1018;
    --bg-input: #140d14;
    --red: #c41e3a;
    --red-bright: #ff3355;
    --red-dim: #7a0f1a;
    --text: #f5e6d3;
    --text-dim: #b8a89a;
}

body::before {
    background:
        radial-gradient(circle at 20% 30%, rgba(90, 16, 144, 0.32) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(168, 5, 5, 0.26) 0%, transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(212, 160, 23, 0.16) 0%, transparent 50%),
        #0a070a;
}

#matrix-canvas { opacity: 0.28; }
#blood-rain-canvas { opacity: 0.7; }
#hellfire-canvas { opacity: 0.55; }
#runes-canvas { opacity: 0.35; }
.fog-overlay { opacity: 1; }
.pentagram-overlay { opacity: 1; }

.terminal-container {
    background: rgba(14, 8, 14, 0.92);
}

.chat-output {
    background: rgba(0, 0, 0, 0.22);
}

.ai-message {
    background: rgba(168, 5, 5, 0.16);
    color: var(--text);
}
.user-message {
    background: rgba(255, 208, 74, 0.16);
    color: var(--candle);
}

.boot-frame {
    background: rgba(10, 6, 10, 0.98);
    border: 1px solid var(--red-bright);
}
.boot-text {
    color: #ffd04a;
    text-shadow: 0 0 8px rgba(255, 191, 0, 0.5);
}

/* Ensure boot text is visible even if animations fail */
.boot-overlay {
    background: #0a070a;
}

/* Force terminal visible above overlays */
.terminal-container {
    z-index: 10;
}


/* ── iOS / MOBILE POLISH ── */

/* Prevent iOS zoom on input focus */
.cyber-input, .cyber-select, .command-palette-input {
    font-size: 16px;
}

/* Disable callouts / text selection UI on mobile where it conflicts */
@media (pointer: coarse) {
    body {
        -webkit-touch-callout: none;
        -webkit-user-select: text;
        user-select: text;
    }
    .custom-cursor, .cursor-trail { display: none !important; }
    body, body.custom-cursor-active, body.custom-cursor-active * { cursor: auto !important; }
}

/* Very small phones */
@media (max-width: 400px) {
    .logo { font-size: 1.6rem; letter-spacing: 2px; }
    .header-meta { gap: 6px; }
    .meta-pill { font-size: 0.6rem; padding: 3px 8px; }
    .sidebar { max-height: 28vh; padding: 10px; }
    .chat-output { padding: 12px; }
    .message { max-width: 95%; padding: 10px 12px; font-size: 0.85rem; }
    .input-bar { padding: 8px 12px; }
    .prompt-symbol { font-size: 0.9rem; }
    .cyber-button { padding: 8px 10px; font-size: 0.7rem; }
}

/* iPhone landscape / short screens */
@media (max-height: 600px) {
    .terminal-header { padding: 8px 12px; }
    .sidebar { max-height: 22vh; }
    .logo { font-size: 1.8rem; }
    .subtitle { display: none; }
}

/* Safe area insets for iPhone notch / home indicator */
@supports (padding: max(0px)) {
    .terminal-container {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    .terminal-footer {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

/* iOS standalone PWA tweaks */
@media all and (display-mode: standalone) {
    body {
        /* prevent overscroll bounce */
        overscroll-behavior: none;
    }
    .terminal-container {
        border: none;
        max-width: 100%;
    }
}


/* ── SATANIC DARKNESS OVERRIDE ── */
/* Tones down bright colors and makes everything more gothic/hellish. */

:root {
    --bg: #040303;
    --bg-panel: #0c080c;
    --bg-input: #080508;
    --red: #7a0a0a;
    --red-bright: #b51515;
    --red-dim: #3a0505;
    --gold: #6b5010;
    --gold-dim: #3d2e08;
    --cyan: #5a4a20;
    --cyan-dim: #352b10;
    --purple: #2a0638;
    --purple-dim: #15021c;
    --candle: #8a7030;
    --candle-dim: #4a3c18;
    --parchment: #9a8a78;
    --parchment-dim: #5a5048;
    --stone: #4a4040;
    --stone-dim: #2a2020;
    --text: #c4b4a0;
    --text-dim: #6a5e54;
    --border: rgba(90, 10, 10, 0.55);
    --glow-red: 0 0 8px rgba(90, 10, 10, 0.7), 0 0 20px rgba(90, 10, 10, 0.35);
    --glow-cyan: 0 0 6px rgba(90, 70, 30, 0.45), 0 0 15px rgba(90, 70, 30, 0.2);
    --glow-gold: 0 0 6px rgba(80, 60, 20, 0.45), 0 0 15px rgba(80, 60, 20, 0.2);
    --glow-purple: 0 0 6px rgba(60, 10, 80, 0.5), 0 0 15px rgba(60, 10, 80, 0.2);
}

body {
    background: var(--bg);
}

body::before {
    background:
        radial-gradient(circle at 20% 30%, rgba(60, 10, 80, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(90, 10, 10, 0.1) 0%, transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(80, 60, 20, 0.05) 0%, transparent 50%),
        #040303;
}

body::after {
    background-image:
        linear-gradient(90deg, rgba(90, 10, 10, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(60, 10, 80, 0.03) 1px, transparent 1px);
}

#matrix-canvas { opacity: 0.12; }
#blood-rain-canvas { opacity: 0.45; }
#hellfire-canvas { opacity: 0.3; }
#webgl-canvas { opacity: 0.7; }
#runes-canvas { opacity: 0.2; }
#embers-canvas { opacity: 0.5; }
.fog-overlay { opacity: 0.75; }
.pentagram-overlay { opacity: 0.4; }
.blood-moon { opacity: 0.12; }
.occult-sigil { color: rgba(60, 10, 80, 0.05); }

.scanlines { opacity: 0.25; }
.crt-flicker { opacity: 0.03; background: rgba(90, 10, 10, 0.03); }
.chromatic-aberration { opacity: 0.5; }

.terminal-container {
    background: rgba(8, 5, 8, 0.94);
    box-shadow:
        0 0 30px rgba(90, 10, 10, 0.22),
        inset 0 0 60px rgba(60, 10, 80, 0.08);
}

.terminal-header {
    background: linear-gradient(180deg, rgba(90, 10, 10, 0.08) 0%, rgba(60, 10, 80, 0.04) 50%, transparent 100%);
}

.logo-red { color: #a01010; }
.logo-cyan { color: #7a6030; }
.version { color: #6b5010; }
.subtitle { color: var(--text-dim); }

.panel {
    background: rgba(0, 0, 0, 0.55);
    border-color: var(--border);
}
.panel-title { color: #6b5010; text-shadow: none; }

.cyber-button {
    border-color: #5c0808;
    color: #a01010;
    box-shadow: 0 0 5px rgba(90, 10, 10, 0.25);
}
.cyber-button:hover {
    background: rgba(90, 10, 10, 0.12);
    box-shadow: var(--glow-red);
}
.cyber-button.secondary { border-color: #4a3c18; color: #8a7030; }
.cyber-button.accent { border-color: #6b5010; color: #8a7030; }
.cyber-button.send { border-color: #4a3c18; color: #8a7030; }

.cyber-input, .cyber-select {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text);
}
.cyber-input:focus, .cyber-select:focus {
    border-color: #5c0808;
    box-shadow: 0 0 10px rgba(90, 10, 10, 0.4), inset 0 0 8px rgba(90, 10, 10, 0.08);
}

.user-message {
    background: rgba(80, 60, 20, 0.1);
    border-color: #4a3c18;
    color: #b0a070;
    box-shadow: 0 0 8px rgba(80, 60, 20, 0.15);
}
.user-message::after { color: #8a7030; background: var(--bg); }

.ai-message {
    background: rgba(90, 10, 10, 0.1);
    border-color: #3a0505;
    color: var(--text);
    box-shadow: 0 0 8px rgba(90, 10, 10, 0.15);
}
.ai-message::after { color: #a01010; background: var(--bg); }

.system-message {
    background: rgba(80, 60, 20, 0.06);
    border-color: rgba(80, 60, 20, 0.3);
    color: #8a7030;
    box-shadow: 0 0 8px rgba(80, 60, 20, 0.1);
}

.think-message {
    background: rgba(60, 10, 80, 0.12);
    border-color: rgba(80, 30, 100, 0.4);
    color: #9a7aa8;
    box-shadow: 0 0 8px rgba(60, 10, 80, 0.15);
}
.tool-message {
    background: rgba(80, 60, 20, 0.08);
    border-color: rgba(80, 60, 20, 0.35);
    color: #8a7030;
    box-shadow: 0 0 8px rgba(80, 60, 20, 0.1);
}
.tool-result-message {
    background: rgba(20, 60, 40, 0.1);
    border-color: rgba(40, 90, 60, 0.3);
    color: #6a9a80;
    box-shadow: 0 0 8px rgba(40, 90, 60, 0.1);
}

.terminal-footer { color: var(--text-dim); }
.conn-status.good { color: #8a7030; }
.possession-meter { color: #a01010; }

.agent-mode-label { color: #a01010 !important; }
.agent-mode-label .checkmark { border-color: #5c0808; }
.agent-tool-tag {
    border-color: #3a0505;
    color: var(--text-dim);
    background: rgba(90, 10, 10, 0.08);
}

/* Less intense boot */
.boot-frame { box-shadow: 0 0 20px rgba(90, 10, 10, 0.5); }
.boot-title { color: #a01010; }
.boot-text { color: #6b5010; text-shadow: 0 0 4px rgba(80, 60, 20, 0.3); }

/* Darker typing indicator */
.typing-indicator {
    background: rgba(80, 60, 20, 0.05);
    border-color: rgba(80, 60, 20, 0.2);
    color: #6b5010;
}
.typing-dot { background: #6b5010; }

/* Less chromatic aberration */
.chromatic-aberration {
    background:
        linear-gradient(90deg, rgba(90,10,10,0.02) 0%, transparent 33%, transparent 66%, rgba(40,10,60,0.02) 100%);
}

/* Darker cathedral rays */
.cathedral-rays { opacity: 0.6; }

/* Less aggressive CRT flicker */
@keyframes flicker {
    0%, 100% { opacity: 0.02; }
    50% { opacity: 0.05; }
}

/* Make AI message top line darker */
.ai-message::before {
    background: linear-gradient(90deg, transparent, #5c0808, #3a0505, transparent);
    opacity: 0.6;
}

/* Darken command palette */
.command-palette {
    background: rgba(4, 3, 4, 0.98);
    box-shadow: 0 0 20px rgba(90, 10, 10, 0.4);
}

/* Darken toasts */
.toast {
    background: rgba(6, 4, 6, 0.98);
    box-shadow: var(--glow-red);
}
.toast.success { border-color: #4a3c18; color: #8a7030; box-shadow: 0 0 10px rgba(80, 60, 20, 0.25); }

/* Darker ritual overlay */
.ritual-overlay { background: rgba(0, 0, 0, 0.96); }
.ritual-sigil { color: #7a0a0a; }
.ritual-title { color: #6b5010; }
.ritual-subtitle { color: #7a0a0a; }

/* Darker demon eye */
.demon-eye {
    background: radial-gradient(circle at 30% 30%, #b0a090 0%, #5a4030 20%, #3a0505 60%, #020202 100%);
}

/* Darker input focus blood splatter */
.input-bar:focus-within::after {
    background: radial-gradient(circle, rgba(90, 10, 10, 0.4) 0%, transparent 70%);
}

/* Less bright possession */
.possession-overlay.active {
    background: radial-gradient(circle at center, transparent 20%, rgba(40, 10, 60, 0.35) 50%, rgba(90, 10, 10, 0.5) 100%);
}

/* Darker screen crack */
.screen-crack.active { opacity: 0.5; }

/* Reduce glow on meta pills */
.meta-pill:hover { box-shadow: 0 0 8px rgba(90, 10, 10, 0.4); }

/* Darker blood drops */
.blood-drop { stroke: rgba(90, 10, 10, 0.4); }


/* ── VOICE / DROP / MONITOR STYLES ── */

.cyber-button.mic {
    border-color: #3a0505;
    color: #7a5050;
    padding: 10px 12px;
}
.cyber-button.mic:hover {
    border-color: #5c0808;
    color: #a01010;
    box-shadow: 0 0 8px rgba(90, 10, 10, 0.3);
}
.cyber-button.mic.listening {
    border-color: #a01010;
    color: #ff2222;
    animation: micPulse 1s infinite;
    box-shadow: 0 0 12px rgba(160, 16, 16, 0.4);
}
@keyframes micPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

.tts-label { color: #6b5010 !important; }
.tts-label .checkmark { border-color: #4a3c18; }
.tts-label input:checked + .checkmark { background: #6b5010; box-shadow: 0 0 8px rgba(80, 60, 20, 0.3); }

.drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(4, 3, 4, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.drop-overlay.hidden { opacity: 0; pointer-events: none; }
.drop-content {
    text-align: center;
    border: 2px dashed #5c0808;
    padding: 60px 80px;
    background: rgba(90, 10, 10, 0.08);
    box-shadow: 0 0 40px rgba(90, 10, 10, 0.25);
}
.drop-sigil {
    font-size: 5rem;
    color: #5c0808;
    text-shadow: 0 0 30px rgba(90, 10, 10, 0.4);
    animation: occultSpin 10s linear infinite;
}
.drop-title {
    font-size: 1.8rem;
    color: #a01010;
    letter-spacing: 6px;
    margin-top: 20px;
    text-shadow: 0 0 10px rgba(90, 10, 10, 0.4);
}
.drop-subtitle {
    font-size: 0.9rem;
    color: #6b5010;
    margin-top: 10px;
    letter-spacing: 2px;
}

#system-stats {
    color: #4a6a4a;
    font-family: 'Courier New', monospace;
}

/* ── IMAGE ATTACHMENTS ── */
.image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(8, 4, 8, 0.6);
    border-top: 1px solid var(--border);
    min-height: 0;
}
.image-preview:empty { display: none; }
.preview-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.4);
    overflow: hidden;
}
.preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.remove-image {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: rgba(90, 10, 10, 0.85);
    border: 1px solid var(--red-bright);
    color: var(--text);
    font-size: 12px;
    line-height: 14px;
    cursor: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.remove-image:hover { background: var(--red-bright); }

.chat-image {
    max-width: min(100%, 420px);
    max-height: 320px;
    border: 1px solid var(--border);
    box-shadow: 0 0 12px rgba(90, 10, 10, 0.25);
    margin: 8px 0;
    display: block;
}
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.image-gallery .chat-image {
    margin: 0;
    max-height: 180px;
    width: auto;
}

/* ── COLLAPSIBLE THINK / TOOL MESSAGES ── */
.collapsible {
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
}
.collapsible > summary {
    cursor: none;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    padding: 2px 0;
    list-style: none;
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary::before {
    content: '▸ ';
    color: var(--red-bright);
}
.collapsible[open] > summary::before { content: '▾ '; }
.collapsible > .message-content {
    padding-top: 6px;
}

/* ── SESSION HISTORY SIDEBAR ── */
.session-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}
.session-empty {
    font-size: 0.75rem;
    color: var(--text-dim);
    padding: 6px;
    text-align: center;
}
.session-item {
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.35);
    cursor: none;
    transition: all 0.2s;
}
.session-item:hover, .session-item.active {
    border-color: var(--red-bright);
    background: rgba(90, 10, 10, 0.15);
    box-shadow: 0 0 8px rgba(90, 10, 10, 0.25);
}
.session-name {
    font-size: 0.78rem;
    color: var(--candle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.session-meta {
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ── PLANNER TOGGLE ── */
.planner-label {
    color: #8a7030 !important;
    margin-top: 4px;
}
.planner-label .checkmark { border-color: #6b5010; }
.planner-label input:checked + .checkmark {
    background: #6b5010;
    box-shadow: 0 0 8px rgba(80, 60, 20, 0.3);
}

/* ── INPUT LABELS ── */
.input-label {
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ── THEME SYSTEM ── */
[data-theme="blood"] {
    --bg: #0f0202;
    --bg-panel: #1f0808;
    --bg-input: #180505;
    --red: #b51515;
    --red-bright: #ff3333;
    --red-dim: #5c0808;
    --gold: #b8860b;
    --gold-dim: #6b5010;
    --cyan: #e8c050;
    --cyan-dim: #a08030;
    --purple: #5a1090;
    --parchment: #f5d5d5;
    --text: #f5d5d5;
    --text-dim: #b08080;
    --border: rgba(181, 21, 21, 0.65);
    --glow-red: 0 0 12px rgba(181, 21, 21, 0.9), 0 0 35px rgba(181, 21, 21, 0.55);
}

[data-theme="gold"] {
    --bg: #0f0a02;
    --bg-panel: #1a1305;
    --bg-input: #140e04;
    --red: #8a6a0a;
    --red-bright: #d4a017;
    --red-dim: #4a3c08;
    --gold: #ffd700;
    --gold-dim: #b8860b;
    --cyan: #ffcc66;
    --parchment: #fff8e1;
    --text: #fff8e1;
    --text-dim: #c4a86b;
    --border: rgba(212, 160, 23, 0.65);
    --glow-red: 0 0 12px rgba(212, 160, 23, 0.7), 0 0 35px rgba(212, 160, 23, 0.4);
}

[data-theme="cyber"] {
    --bg: #02080f;
    --bg-panel: #051018;
    --bg-input: #040c14;
    --red: #00f0ff;
    --red-bright: #00ffff;
    --red-dim: #007a80;
    --gold: #ff00ff;
    --gold-dim: #800080;
    --cyan: #00ffaa;
    --parchment: #e0f7ff;
    --text: #e0f7ff;
    --text-dim: #80c0d0;
    --border: rgba(0, 240, 255, 0.6);
    --glow-red: 0 0 12px rgba(0, 240, 255, 0.8), 0 0 35px rgba(255, 0, 255, 0.4);
}

[data-theme="void"] {
    --bg: #000000;
    --bg-panel: #080808;
    --bg-input: #050505;
    --red: #444444;
    --red-bright: #888888;
    --red-dim: #222222;
    --gold: #555555;
    --gold-dim: #333333;
    --cyan: #666666;
    --parchment: #cccccc;
    --text: #bbbbbb;
    --text-dim: #666666;
    --border: rgba(80, 80, 80, 0.5);
    --glow-red: 0 0 10px rgba(100, 100, 100, 0.4);
}

/* ── 3D PARALLAX HEADER ── */
.terminal-header {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.logo {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

/* ── BLOOD VEIN BORDERS ── */
.blood-vein {
    position: fixed;
    inset: 0;
    z-index: 46;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 20%, rgba(168, 5, 5, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 90% 80%, rgba(168, 5, 5, 0.08) 0%, transparent 25%);
    animation: veinPulse 6s ease-in-out infinite;
}
@keyframes veinPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* ── COPY CODE BUTTONS ── */
.code-block-wrapper {
    position: relative;
    margin: 10px 0;
}
.copy-code-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,0.6);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.65rem;
    padding: 3px 8px;
    cursor: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.2s;
}
.code-block-wrapper:hover .copy-code-btn { opacity: 1; }
.copy-code-btn:hover { color: var(--candle); border-color: var(--candle); }

/* ── MEMORY / UPLOADS PANELS ── */
.memory-list, .uploads-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
}
.memory-entry, .upload-entry {
    padding: 6px 8px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.35);
    font-size: 0.72rem;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.memory-entry:hover, .upload-entry:hover {
    border-color: var(--red-bright);
    color: var(--text);
}

/* ── AUTOPILOT BADGE ── */
.autopilot-badge {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 300;
    padding: 8px 14px;
    border: 1px solid var(--red-bright);
    background: rgba(0,0,0,0.85);
    color: var(--red-bright);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: var(--glow-red);
    animation: autopilotPulse 1s infinite;
    display: none;
}
.autopilot-badge.active { display: block; }
@keyframes autopilotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ── AGENT STEP COUNTER ── */
.agent-step-counter {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-align: center;
    padding: 4px;
    border-top: 1px solid var(--border);
    background: rgba(0,0,0,0.3);
}

/* ── EXPORT BUTTON ── */
.export-btn {
    margin-top: 6px;
    width: 100%;
}

/* ── TOOL RESULT CARDS ── */
.tool-result-card {
    border-left: 3px solid var(--gold);
    background: rgba(0,0,0,0.25);
    padding: 8px 10px;
    margin: 6px 0;
    font-size: 0.78rem;
}
.tool-result-card .tool-name {
    color: var(--candle);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.tool-result-card .tool-status {
    font-size: 0.65rem;
    color: var(--text-dim);
}

/* ── SCREEN SHAKE ON ERRORS ── */
.terminal-container.shake-error {
    animation: shakeError 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shakeError {
    10%, 90% { transform: translate3d(-3px, 0, 0); }
    20%, 80% { transform: translate3d(5px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
    40%, 60% { transform: translate3d(8px, 0, 0); }
}


/* ── INSANE UI UPGRADES ── */

/* Occult corner sigils */
.terminal-container::before {
    content: '';
}
.terminal-container {
    position: relative;
}
.terminal-container .corner-sigil {
    position: absolute;
    width: 60px;
    height: 60px;
    z-index: 5;
    pointer-events: none;
    color: rgba(168, 5, 5, 0.45);
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 15px rgba(168, 5, 5, 0.3);
    animation: cornerPulse 4s ease-in-out infinite;
}
.terminal-container .corner-sigil.top-left { top: 8px; left: 8px; animation-delay: 0s; }
.terminal-container .corner-sigil.top-right { top: 8px; right: 8px; animation-delay: 1s; }
.terminal-container .corner-sigil.bottom-left { bottom: 8px; left: 8px; animation-delay: 2s; }
.terminal-container .corner-sigil.bottom-right { bottom: 8px; right: 8px; animation-delay: 3s; }
@keyframes cornerPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.15); text-shadow: 0 0 25px rgba(168, 5, 5, 0.7); }
}

/* More intense header glitch */
.logo {
    animation: logoTwitch 7s step-end infinite;
}
@keyframes logoTwitch {
    0%, 90%, 100% { filter: none; transform: translate(0); }
    91% { filter: drop-shadow(2px 0 #6a18a8) drop-shadow(-2px 0 #c41414); transform: translate(1px, -1px); }
    92% { filter: drop-shadow(-2px 0 #6a18a8) drop-shadow(2px 0 #c41414); transform: translate(-1px, 1px); }
    93% { filter: none; transform: translate(0); }
    96% { filter: brightness(1.3) saturate(1.3); transform: scale(1.01); }
    97% { filter: none; transform: scale(1); }
}

.ai-message, .user-message {
    position: relative;
    overflow: visible;
}

/* Glowing message borders */
.ai-message {
    box-shadow:
        0 0 15px rgba(196, 20, 20, 0.25),
        inset 0 0 20px rgba(196, 20, 20, 0.05),
        0 0 0 1px rgba(196, 20, 20, 0.4);
}
.user-message {
    box-shadow:
        0 0 15px rgba(212, 160, 23, 0.25),
        inset 0 0 20px rgba(212, 160, 23, 0.05),
        0 0 0 1px rgba(212, 160, 23, 0.4);
}

/* Hellfire under input bar */
.input-bar {
    position: relative;
}
.input-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 4px;
    transform: translateY(100%);
    background: radial-gradient(ellipse at center, rgba(196,20,20,0.35) 0%, transparent 75%);
    pointer-events: none;
    animation: inputHellfire 3s ease-in-out infinite alternate;
}
@keyframes inputHellfire {
    0% { opacity: 0.4; transform: translateY(100%) scaleY(0.8); }
    100% { opacity: 0.85; transform: translateY(100%) scaleY(1.4); }
}

/* Occult floating symbols on edges */
.edge-symbol {
    position: fixed;
    font-size: 1.4rem;
    color: rgba(168, 5, 5, 0.25);
    pointer-events: none;
    z-index: 45;
    text-shadow: 0 0 10px rgba(168, 5, 5, 0.3);
    animation: edgeFloat 12s ease-in-out infinite;
}
@keyframes edgeFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
    50% { transform: translateY(-30px) rotate(15deg); opacity: 0.5; }
}

/* Status bar possession glow */
.terminal-footer {
    position: relative;
}
.terminal-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), var(--gold), var(--red), transparent);
    opacity: 0.8;
    animation: footerLine 4s linear infinite;
}
@keyframes footerLine {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

/* Satanic scrollbar */
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--red), #3a0505, var(--red));
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}

/* Insane send button pulse */
#send-button {
    position: relative;
    overflow: visible;
}
#send-button::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 2px;
    border: 1px solid transparent;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--red)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    animation: sendPulse 2s ease-in-out infinite;
}
@keyframes sendPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* Occult header subtitle with runes */
.subtitle::before,
.subtitle::after {
    content: '⛧';
    color: var(--red);
    opacity: 0.6;
    animation: runeFlicker 2s ease-in-out infinite alternate;
}
.subtitle::after {
    animation-delay: 1s;
}
@keyframes runeFlicker {
    0% { opacity: 0.3; text-shadow: none; }
    100% { opacity: 0.9; text-shadow: 0 0 10px var(--red); }
}