/* =========================================================
   OPENGLOB ROOMS - MASTER THEMING ENGINE
   ========================================================= */

/* --- THEME 1: INDIE COMIC (Punchy, High Contrast, Gritty) --- */
body.theme-comic {
    --bg: #fdf5e6;
    /* Warm paper */
    --surface: #ffffff;
    --surface-hover: #fff3d4;
    --text-main: #111111;
    --accent: #d93025;
    /* Comic Red */
    --accent-hover: #b31412;
    --border: #000000;

    background-image: url('https://www.transparenttextures.com/patterns/cream-paper.png');
}

/* Comic Structural Overrides */
body.theme-comic .left-panel,
body.theme-comic .right-panel,
body.theme-comic .breakout-panel,
body.theme-comic .modal-card,
body.theme-comic .card-create-box {
    border: 3px solid #000000;
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 1);
    border-radius: 12px;
}

body.theme-comic .input-box,
body.theme-comic .chat-card,
body.theme-comic .breakout-zone {
    border: 2px solid #000000;
    border-radius: 8px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
}

body.theme-comic .msg-wrapper.mine .bubble {
    background-color: #ffeb3b;
    /* Comic Yellow */
    color: #000;
    border: 2px solid #000;
    border-radius: 16px 16px 4px 16px;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
}

body.theme-comic .msg-wrapper.theirs .bubble {
    border: 2px solid #000;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
}

body.theme-comic .avatar,
body.theme-comic .bubble-avatar,
body.theme-comic .draggable-pill img {
    border: 2px solid #000;
}


/* --- THEME 2: PASTEL MMO (Based on your Game Screenshot) --- */
body.theme-mmo {
    --bg: #d1c4e9;
    /* Soft pastel purple */
    --surface: #ede7f6;
    --surface-hover: #e0e0e0;
    --text-main: #311b92;
    /* Deep purple text */
    --accent: #ffb74d;
    /* Playful orange */
    --accent-hover: #f57c00;
    --border: #4a4a4a;
    /* Soft black outlines */
}

body.theme-mmo .left-panel,
body.theme-mmo .right-panel {
    border: 3px solid var(--border);
    border-radius: 32px;
    /* Extra bubbly */
}

body.theme-mmo .msg-wrapper.mine .bubble {
    background-color: #ffb74d;
    /* Orange bubbles like the screenshot */
    color: #000;
    border: 2px solid var(--border);
    border-radius: 20px;
    font-weight: 500;
}

body.theme-mmo .msg-wrapper.theirs .bubble {
    background-color: #ffffff;
    border: 2px solid var(--border);
    border-radius: 20px;
}

body.theme-mmo .chat-card,
body.theme-mmo .input-box {
    border: 2px solid var(--border);
    border-radius: 24px;
}

/* Playful bouncy avatars */
body.theme-mmo .avatar,
body.theme-mmo .bubble-avatar {
    border-radius: 40%;
    /* Squircle shape */
    border: 2px solid var(--border);
}

/* --- THEME 3: DEEP SPACE (Highly Detailed & Animated) --- */
body.theme-space {
    --bg: #030509;
    --surface: #0f1524;
    --surface-hover: #161e32;
    --text-main: #f8fafc;
    --text-sub: #94a3b8;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --border: #1e293b;
}

/* Space Layout Overrides (Kept Opaque for Readability) */
body.theme-space .left-panel,
body.theme-space .breakout-panel,
body.theme-space .modal-card,
body.theme-space .card-create-box {
    background-color: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

body.theme-space .msg-wrapper.mine .bubble {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

body.theme-space .msg-wrapper.theirs .bubble {
    background-color: #1e293b;
    color: #f8fafc;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

body.theme-space .input-box {
    background-color: var(--surface);
    border-color: var(--border);
}

body.theme-space #chatInput,
body.theme-space .setting-title,
body.theme-space .user-name {
    color: var(--text-main);
}

/* --- 1. THE DEEP VOID (Parallax Stars & Planets) --- */
body.theme-space .right-panel {
    position: relative;
    background-color: #020306;
    /* We layer the planets and 3 tiers of stars using multiple backgrounds */
    background-image:
        /* Rotating Earth (Self-Animating SVG) */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><clipPath id="earthClip"><circle cx="100" cy="100" r="90"/></clipPath><linearGradient id="earthShadow" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="30%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.8)"/></linearGradient></defs><circle cx="100" cy="100" r="90" fill="%230ea5e9"/><g clip-path="url(%23earthClip)"><g><animateTransform attributeName="transform" type="translate" values="0,0; -200,0" dur="25s" repeatCount="indefinite"/><path d="M 20 60 Q 50 20 80 60 T 140 80 Q 140 120 100 140 Q 60 160 20 100 Z" fill="%2322c55e"/><path d="M 220 60 Q 250 20 280 60 T 340 80 Q 340 120 300 140 Q 260 160 220 100 Z" fill="%2322c55e"/></g></g><circle cx="100" cy="100" r="90" fill="url(%23earthShadow)"/><circle cx="100" cy="100" r="90" fill="none" stroke="%2338bdf8" stroke-width="4" opacity="0.4"/></svg>'),

        /* Bobbing Saturn (Self-Animating SVG) */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g><animateTransform attributeName="transform" type="translate" values="0,0; 0,10; 0,0" dur="8s" repeatCount="indefinite"/><ellipse cx="100" cy="100" rx="90" ry="25" fill="none" stroke="%23fcd34d" stroke-width="12" opacity="0.8" transform="rotate(-15 100 100)"/><circle cx="100" cy="100" r="45" fill="%23f59e0b"/><path d="M 100 55 A 45 45 0 0 1 145 100 L 55 100 A 45 45 0 0 1 100 55 Z" fill="%23d97706"/><ellipse cx="100" cy="100" rx="90" ry="25" fill="none" stroke="%23fef3c7" stroke-width="4" opacity="0.9" transform="rotate(-15 100 100)"/></g></svg>'),

        /* Distant Red Dwarf / Mars */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="%23991b1b"/><circle cx="40" cy="40" r="8" fill="%237f1d1d"/><circle cx="65" cy="55" r="5" fill="%237f1d1d"/></svg>'),

        /* Star Layers for Parallax Effect */
        radial-gradient(1.5px 1.5px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 80px 70px, #cbd5e1, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 150px 180px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(2.5px 2.5px at 250px 90px, #93c5fd, rgba(0, 0, 0, 0));

    background-size:
        300px 300px,
        200px 200px,
        80px 80px,
        250px 250px,
        350px 350px,
        450px 450px,
        600px 600px;
    background-position:
        -50px calc(100% + 50px),
        /* Earth Bottom Left */
        calc(100% - 40px) 10%,
        /* Saturn Top Right */
        15% 20%,
        /* Mars Top Left */
        0 0, 0 0, 0 0, 0 0;
    /* Stars */
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat;
    overflow: hidden;
    z-index: 1;
    animation: space-parallax 120s linear infinite;
}

/* Animate the Star Background Position to create depth */
@keyframes space-parallax {
    0% {
        background-position: -50px calc(100% + 50px), calc(100% - 40px) 10%, 15% 20%, 0 0, 0 0, 0 0, 0 0;
    }

    100% {
        background-position: -50px calc(100% + 50px), calc(100% - 40px) 10%, 15% 20%, -250px 250px, -350px 350px, -450px 450px, -600px 600px;
    }
}

/* Ensure chat UI stays layered above the space elements */
body.theme-space .chat-container,
body.theme-space .input-region {
    position: relative;
    z-index: 10;
}

/* --- 2. THE HERO ELEMENTS (Rocket & Satellite) --- */

/* Highly Detailed Flying Rocket */
body.theme-space .right-panel::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    /* Embedded SVG: Contains flickering fire and detailed gradients */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><linearGradient id="rocketBody" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="%23f1f5f9"/><stop offset="100%" stop-color="%23cbd5e1"/></linearGradient></defs><g transform="rotate(45 100 100)"><g><animate attributeName="opacity" values="0.6; 1; 0.6" dur="0.1s" repeatCount="indefinite"/><path d="M 100 160 L 85 190 L 100 200 L 115 190 Z" fill="%23f59e0b"/><path d="M 100 160 L 92 180 L 100 190 L 108 180 Z" fill="%23fef08a"/></g><path d="M 70 160 L 70 120 L 60 160 Z" fill="%23ef4444"/><path d="M 130 160 L 130 120 L 140 160 Z" fill="%23ef4444"/><path d="M 100 20 Q 130 60 130 150 L 70 150 Q 70 60 100 20 Z" fill="url(%23rocketBody)"/><path d="M 100 20 L 115 50 L 85 50 Z" fill="%23ef4444"/><circle cx="100" cy="80" r="16" fill="%230ea5e9" stroke="%23475569" stroke-width="4"/><circle cx="100" cy="115" r="12" fill="%230ea5e9" stroke="%23475569" stroke-width="4"/></g></svg>') no-repeat center / contain;
    animation: space-fly 20s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4));
}

/* Orbiting Satellite */
body.theme-space .right-panel::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    /* Embedded SVG: Contains blinking LED and grid lines */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g transform="rotate(-15 100 100)"><rect x="20" y="75" width="60" height="50" fill="%231e3a8a" stroke="%2360a5fa" stroke-width="2"/><line x1="40" y1="75" x2="40" y2="125" stroke="%2360a5fa" stroke-width="1"/><line x1="60" y1="75" x2="60" y2="125" stroke="%2360a5fa" stroke-width="1"/><rect x="120" y="75" width="60" height="50" fill="%231e3a8a" stroke="%2360a5fa" stroke-width="2"/><line x1="140" y1="75" x2="140" y2="125" stroke="%2360a5fa" stroke-width="1"/><line x1="160" y1="75" x2="160" y2="125" stroke="%2360a5fa" stroke-width="1"/><rect x="85" y="60" width="30" height="80" rx="10" fill="%2394a3b8" stroke="%23475569" stroke-width="3"/><circle cx="100" cy="75" r="6" fill="%23334155"/><line x1="100" y1="60" x2="100" y2="30" stroke="%23cbd5e1" stroke-width="3"/><circle cx="100" cy="25" r="4" fill="%23ef4444"><animate attributeName="opacity" values="1; 0; 1" dur="1.5s" repeatCount="indefinite"/></circle></g></svg>') no-repeat center / contain;
    animation: space-orbit 45s linear infinite;
    z-index: 3;
    opacity: 0.85;
}

/* CSS Keyframes for screen traversal */
@keyframes space-fly {
    0% {
        transform: translate(-150px, 120vh) scale(0.8);
    }

    10% {
        transform: translate(-50px, 90vh) scale(0.9);
    }

    80% {
        transform: translate(100vw, -150px) scale(1.1);
    }

    100% {
        transform: translate(120vw, -250px) scale(1.1);
    }
}

@keyframes space-orbit {
    0% {
        transform: translate(-200px, 15vh) rotate(0deg);
    }

    50% {
        transform: translate(50vw, 10vh) rotate(5deg);
    }

    100% {
        transform: translate(calc(100vw + 200px), 25vh) rotate(-5deg);
    }
}