@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #333;
    /* Dark background for contrast */
    font-family: "Press Start 2P", cursive, sans-serif;
    color: white;
    box-sizing: border-box;
    overflow: hidden;
    /* Prevent all scrollbars on body */
}

h1 {
    display: none;
}

.chat-container {
    position: relative;
    /* Make container fill the entire viewport */
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    /* Crucial for containing the SVG and chat content */
    background-color: transparent;
    /* Allows any body background to show through, though the SVG will cover it */
}

.scroll-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Make SVG fill its parent container (chat-container) */
    height: 100%;
    /* Make SVG fill its parent container (chat-container) */
    z-index: 0;
    /* Positions the SVG behind the chat content */
}

/* This div precisely positions and clips the text content */
.chat-text-area {
    position: absolute;
    /* Calculate position and dimensions based on SVG's viewBox and paper area */
    top: calc(44 / 800 * 100%);
    /* 44 units from top out of 800 total height (adjusted for scroll alignment) */
    left: calc(100 / 600 * 100%);
    /* 100 units from left out of 600 total width */
    width: calc(400 / 600 * 100%);
    /* 400 units wide out of 600 total width */
    height: calc(712 / 800 * 100%);
    /* 712 units tall out of 800 total height (adjusted for scroll alignment) */

    overflow-y: auto;
    /* Make this specific area scrollable */
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
    box-sizing: border-box;
    /* Include any padding in the width/height */
    z-index: 1;
    /* Ensure it's above the SVG */
    /* Add responsive internal padding to space the text from the paper's edge */
    padding: clamp(0.5em,
            2vw,
            1.5em);
    /* Responsive padding that scales with container */
    scrollbar-width: thin;
    /* Make scrollbar thinner on Firefox */
    scrollbar-color: #999 transparent;
    /* Custom scrollbar colors */
}

/* Webkit scrollbar styling for better integration */
.chat-text-area::-webkit-scrollbar {
    width: 6px;
}

.chat-text-area::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.chat-text-area::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.chat-text-area::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* This div styles the text elements themselves and ensures no external margins */
.chat-content {
    color: #333;
    /* Dark text for readability on light scroll paper */
    text-shadow: 1px 1px 0 #fff;
    /* A subtle text shadow for pixel font clarity */
    line-height: 1.4;
    /* Make font size responsive, but guarantee a minimum readable size */
    font-size: clamp(12px,
            max(1.8vw, 2vh),
            24px);
    /* Responsive font size that scales with container */
    margin: 0;
    /* Important: remove any default outer margins on this wrapper */
    word-break: break-word;
    /* Ensure long words don't overflow */
    hyphens: auto;
    /* Enable hyphenation for better text wrapping */
}

/* Chat message styling */
.chatMessage {
    margin-bottom: clamp(4px, 1vh, 8px);
    line-height: 1.4;
    word-wrap: break-word;
    /* Ensures long words wrap */
    overflow-wrap: break-word;
    /* Additional word wrapping support */
}

.username {
    font-weight: bold;
    color: #6a0dad;
    /* A distinct purple for Twitch */
    margin-right: clamp(3px, 0.5vw, 5px);
}

.username.youtube {
    color: #d32f2f;
    /* Red color for YouTube usernames */
}

.username.tiktok {
    color: #10908ce4;
}

.systemMessage {
    font-style: italic;
    color: #555;
    margin-bottom: clamp(3px, 0.5vh, 5px);
}

.systemMessage.green {
    color: #2d7d32;
}

.systemMessage.blue {
    color: #1976d2;
}

.systemMessage.red {
    color: #d32f2f;
}

/* Basic pixel art colors for the scroll, using CSS variables for easy modification */
.scroll-svg {
    --scroll-paper-light: #f0e6bd;
    /* Light parchment color for the main paper */
    --scroll-paper-dark: #d2c498;
    /* Darker parchment/shadow for paper depth */
    --scroll-edge: #b4a271;
    /* Darker base color for rolls and edges */
    --scroll-outline: #7a694b;
    /* Dark brown outline for pixel effect */
    --shadow-dark: #5c4d39;
    /* Deepest shadow/depth color */
}

/* Media queries for better mobile responsiveness */
@media (max-width: 768px) {
    .chat-text-area {
        padding: clamp(0.3em, 1.5vw, 1em);
    }

    .chat-content {
        font-size: clamp(10px, max(2.2vw, 2.5vh), 20px);
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .chat-text-area {
        padding: clamp(0.2em, 1vw, 0.8em);
    }

    .chat-content {
        font-size: clamp(8px, max(2.4vw, 2.8vh), 18px);
        line-height: 1.2;
    }

    .chatMessage {
        margin-bottom: clamp(2px, 0.8vh, 6px);
    }

    .username {
        margin-right: clamp(2px, 0.3vw, 4px);
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .chat-content {
        font-size: clamp(10px, max(2vw, 2.5vh), 16px);
    }
}

/* Transparent Route Overrides */
body.transparent-mode {
    background-color: transparent !important;
}

body.transparent-mode .scroll-background {
    display: none;
}

body.transparent-mode .chat-text-area {
    /* Remove the absolute positioning specific to the SVG */
    position: relative;
    top: auto;
    left: auto;

    /* Make the chat area fill the screen */
    width: 100vw;
    height: 100vh;
    padding: 20px;

    /* Align text to the bottom */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

body.transparent-mode .chat-content {
    /* Reset text shadow to make it pop against any background */
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
    color: white;
    /* Ensure text is visible if background is dark */
}