/* ============================================================================
   STYLE.CSS - TWD SURVIVAL TERMINAL THEME (RESPONSIVE)
   ============================================================================ */

/* --- TWD Font & Gritty Textures --- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto+Condensed:wght@400;700&display=swap');

/* --- Thematic Color Palette --- */
:root {
    --bg-color: #1a1a1a;
    --pane-bg: #212322;
    --border-color: #4d4033; /* Rusty brown */
    --text-color: #d1d1d1;
    --accent-color: #b30000; /* Blood red */
    --user-color: #7d8c72; /* Muted military green */
    --user-identity-color: #4b92a3; /* Muted Cyan/Blue for User ID */
    --team-a-color: #7a8264; /* Faded olive */
    --team-b-color: #b56f4d; /* Dusty orange/brown */
    --overseer-color: #c2a136; /* Sickly, authoritarian yellow */
    --system-color: #888;
    --error-color: #b30000;
    --modal-bg: rgba(0, 0, 0, 0.85);
    --modal-content-bg: #1f1f1f;

    /* --- FONT SIZE CONTROLS --- */
    --font-size-names: 1.0em;
    --font-size-dialogue: 0.8em;
    --font-size-narration: 0.9em;
    --font-size-monologue: 0.65em;
    --font-size-chat-title: 1.1em;
    --font-size-system-message: 0.7em;
}

/* --- Base Body and Scanlines --- */
body {
    font-family: 'Roboto Condensed', sans-serif;
    background-color: var(--bg-color);
    /* Subtle noise/grain texture for CRT feel */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+CjxyZWN0IHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgZmlsbD0iIzFhMWExYSI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjMjIyIj48L3JlY3Q+Cjwvc3ZnPg==');
    color: var(--text-color);
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide scrollbars, let chat windows handle their own overflow */
    text-shadow: 0 0 2px rgba(200, 200, 200, 0.1); /* Subtle glow for text */
}
.scanlines {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* Allows clicks to pass through */
    /* Creates thin horizontal lines */
    background: linear-gradient(to bottom, rgba(20,20,20,0) 50%, rgba(0,0,0,0.25) 50%);
    background-size: 100% 4px; /* Adjust line thickness and spacing */
    z-index: 1001; /* Above all other content */
    opacity: 0.4; /* Make them semi-transparent */
}

/* --- Header --- */
header {
    padding: 10px 20px;
    background-color: var(--pane-bg);
    border-bottom: 3px solid var(--border-color);
    display: flex;
    align-items: center; /* Vertically center items */
    flex-shrink: 0; /* Prevent header from shrinking */
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* The .title-bar contains the h1 and is the left section */
.title-bar {
    /* No flex-grow here. It will take its natural content width. */
}
.title-bar h1 {
    margin: 0; /* Remove default margin from h1 */
    font-weight: 500;
    color: var(--accent-color); /* This should make the main title red */
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5); /* Glowing red effect */
    font-size: 1.8em;
}

/* The user-identity-controls is the center section */
.user-identity-controls {
    /* These auto margins absorb all available space on both sides,
       effectively centering this block within the remaining space. */
    margin-left: auto;
    margin-right: auto;

    display: flex; /* Keep its internal elements (name, dropdown, button) aligned */
    align-items: center;
    gap: 15px; /* Spacing between its internal elements */
}

/* Specific styling for the user name display */
.user-identity-controls .header-user-name {
    font-weight: 700;
    color: var(--user-identity-color); /* This should make "OPERATOR: User Name" blue/cyan */
    text-shadow: 0 0 5px var(--user-identity-color); /* Glowing blue effect */
}

/* Specific styling for the character switcher dropdown */
.user-identity-controls #character-switcher {
    padding: 6px;
    border: 1px solid #000;
    background-color: var(--bg-color); /* Dark background */
    color: var(--text-color); /* Light text */
    border-radius: 0; /* Sharp corners for terminal look */
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* To override some native select styling for custom arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292%22%20height%3D%22292%22%3E%3Cpath%20fill%3D%22%23d1d1d1%22%20d%3D%22M287%2C197.3L146%2C56.2L5%2C197.3H287z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px top 50%;
    background-size: 8px auto;
    padding-right: 25px; /* Make space for the arrow */
}


/* The #status-bar is the right section */
#status-bar {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--overseer-color); /* Yellowish status light */
}


/* --- Main Layout & Panes --- */
main {
    flex-grow: 1; /* Occupy remaining vertical space */
    display: grid;
    grid-template-columns: 1fr 1.75fr 1fr; /* Three columns, middle wider */
    grid-template-rows: 1fr; /* Single row */
    gap: 10px; /* Space between panes */
    padding: 10px;
    height: calc(100vh - 65px); /* Full height minus header height */
}
.pane {
    background-color: var(--pane-bg);
    border-radius: 0; /* Sharp corners */
    display: flex;
    flex-direction: column; /* Stack chat window and input vertically */
    overflow: hidden; /* Hide anything outside the pane */
    border: 2px solid var(--border-color);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5); /* Inner shadow for depth */
}
#judge-pane {
    grid-column: 1 / -1; /* Spans all columns (hidden by default) */
    display: none;
}
#team-a-pane { grid-column: 1 / 2; } /* First column */
#public-pane { grid-column: 2 / 3; } /* Second column */
#team-b-pane { grid-column: 3 / 4; } /* Third column */

.pane-title {
    padding: 12px;
    font-weight: 500;
    border-bottom: 2px solid var(--border-color);
    background-color: #111; /* Darker background for title bar */
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-color);
    font-size: var(--font-size-chat-title);
}
/* Specific border colors for each pane title */
#team-a-pane .pane-title { border-bottom-color: var(--team-a-color); }
#team-b-pane .pane-title { border-bottom-color: var(--team-b-color); }
#public-pane .pane-title { border-bottom-color: var(--accent-color); }

/* --- Chat Window & AI Management --- */
.chat-window {
    flex-grow: 1; /* Occupy remaining space within pane */
    padding: 0;
    overflow-y: auto; /* Enable vertical scrolling */
    display: flex;
    flex-direction: column; /* Stack controls and messages */
    position: relative;
}
.chat-window-messages {
    flex-grow: 1; /* Messages area takes remaining space */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between messages */
    padding: 10px;
}
.ai-management-controls {
    position: sticky; top: 0; /* Sticks to top of chat window on scroll */
    background-color: rgba(33, 35, 34, 0.95); /* Semi-transparent background */
    padding: 8px 10px;
    border-bottom: 2px solid var(--border-color);
    z-index: 10; /* Ensure it stays on top */
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0; /* Prevent it from shrinking */
    flex-wrap: wrap; /* Allow controls to wrap if space is tight */
}
.ai-selection-dropdown {
    flex-grow: 1; /* Occupy available space */
    padding: 6px;
    border: 1px solid #000;
    background-color: var(--bg-color);
    color: var(--text-color);
    border-radius: 0;
    font-family: 'Roboto Condensed', sans-serif;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5); /* Inner shadow */
    max-width: 150px; /* Limit width */
}
.ai-control-button {
    border: 1px solid #000;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
    padding: 6px 10px;
    transition: all 0.2s;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    background-color: var(--accent-color); /* Red button */
}
.ai-control-button:hover {
    background-color: #d60000;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

/* --- New Toggle Switch Styles --- */
.toggle-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px; /* Space from the main agent controls */
}

/* Hide the Turn/Discuss toggle globally */
#mode-toggle-group {
    display: none;
}

.toggle-switch {
    display: flex;
    background-color: var(--bg-color);
    border: 1px solid #000;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    padding: 2px;
}

.toggle-switch input[type="radio"] {
    display: none; /* Hide the actual radio button */
}

.toggle-switch label {
    padding: 4px 12px;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    color: var(--text-color);
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.toggle-switch input[type="radio"]:checked + label {
    background-color: var(--accent-color);
    color: white;
    text-shadow: 0 0 4px #000;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}


/* --- Input & Messages --- */
.user-input-area {
    display: flex;
    padding: 8px;
    border-top: 2px solid var(--border-color);
    background-color: #111;
    gap: 8px;
    flex-shrink: 0;
}
.user-input {
    flex-grow: 1;
    border: 1px solid #000;
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 8px;
    border-radius: 0;
    font-family: 'Roboto Condensed', sans-serif;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}
.user-send-button { background-color: var(--accent-color); }
.user-input-area button {
    border: 1px solid #000;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
    padding: 8px 15px;
    transition: all 0.2s;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    background-color: var(--accent-color);
}
.user-input-area button:hover {
    background-color: #d60000;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}


.message-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    max-width: 95%; /* Limit message width */
}
.message-content {
    padding: 8px 12px;
    border-radius: 3px;
    line-height: 1.4;
    word-wrap: break-word; /* Ensure long words wrap */
    font-size: var(--font-size-dialogue);
}
.message-sender-name {
    font-size: var(--font-size-names);
    font-weight: bold;
    margin-bottom: 4px;
    padding: 0 5px;
    text-transform: uppercase;
}
.message-narration {
    font-style: italic;
    font-size: var(--font-size-narration);
}
.message-monologue {
    font-style: italic;
    font-size: var(--font-size-monologue);
    color: #aaa; /* Faded color for internal thoughts */
}

/* Styling for agent messages (left aligned) */
.agent-message .message-content {
    background-color: #2a2c2e; /* Darker background */
}
/* Styling for user messages (right aligned) */
.user-message {
    align-self: flex-end; /* Push to the right */
    text-align: right; /* Align text right for user */
}
.user-message .message-sender-name,
.user-message .message-narration,
.user-message .message-monologue {
    text-align: right; /* Ensure sender name/narration/monologue also right-aligned */
}
.user-message .message-content {
    background-color: var(--user-color); /* User-specific background */
    color: #fff;
    text-align: left; /* Keep the actual message text left-aligned within its bubble */
}
/* Styling for system messages (centered, dashed border) */
.system-message .message-content {
    background-color: transparent;
    color: var(--system-color);
    font-style: italic;
    text-align: center;
    align-self: center; /* Center the message wrapper itself */
    border: 1px dashed var(--system-color);
    padding: 5px 10px;
    font-size: var(--font-size-system-message);
}

.play-audio-button {
    font-size: 0.8em;
    padding: 0 8px;
    cursor: pointer;
    color: var(--text-color);
    transition: color 0.2s, text-shadow 0.2s;
}
.play-audio-button:hover {
    color: #fff;
    text-shadow: 0 0 8px #fff;
}

/* --- Modal --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stays in place */
    z-index: 1000; /* On top of everything */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: var(--modal-bg); /* Dark, semi-transparent background */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}
.modal-content {
    background-color: var(--modal-content-bg);
    padding: 30px;
    border: 3px solid var(--border-color);
    border-radius: 0;
    width: 90%; max-width: 500px;
    text-align: center;
    box-shadow: 0 0 25px rgba(0,0,0,0.7); /* Outer glow */
    display: flex; flex-direction: column;
    gap: 15px; /* Reduced gap slightly for a tighter layout */
    position: relative; /* For the close button */
}
.modal-content h2 {
    font-family: 'Oswald', sans-serif;
    color: var(--accent-color);
    margin: 0;
    font-size: 2em;
    letter-spacing: 2px;
    text-shadow: 0 0 8px var(--accent-color); /* Stronger glow for headings */
}
.modal-content p {
    color: var(--text-color);
    font-size: 1em;
}
/* Unified styling for all dropdowns in modals */
.modal-content select {
    padding: 12px;
    border-radius: 0;
    border: 1px solid #000;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 1.1em;
    letter-spacing: 1px;
    background-color: var(--bg-color);
    color: var(--text-color);
    /* Mimic switcher dropdown style */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292%22%20height%3D%22292%22%3E%3Cpath%20fill%3D%22%23d1d1d1%22%20d%3D%22M287%2C197.3L146%2C56.2L5%2C197.3H287z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px top 50%;
    background-size: 8px auto;
    padding-right: 25px;
}
/* Unified styling for all buttons in modals */
.modal-content button {
    padding: 12px;
    border-radius: 0;
    border: 1px solid #000;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 1.1em;
    letter-spacing: 1px;
    background-color: var(--accent-color);
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}
.modal-content button:hover {
    background-color: #d60000;
    box-shadow: 0 0 10px #d60000;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ============================================================================
   UPDATED STYLES FOR DOCUMENT MANAGER MODAL
   ============================================================================ */
.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.close-button:hover, .close-button:focus {
    color: #fff;
    text-shadow: 0 0 5px #fff;
}
/* Hide Docs and Cache buttons globally */
.header-button {
    display: none;
}
.header-button:hover {
    background-color: #fff;
    color: var(--accent-color);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* NEW FLEXBOX LAYOUT FOR DOC CONTROLS */
.doc-controls {
    display: flex;
    flex-direction: column; /* Stack dropdowns and button groups vertically */
    gap: 15px; /* Space between each row/group of controls */
    margin-bottom: 0; /* REMOVED excess margin-bottom */
    align-items: stretch; /* Stretch items to fill available width */
}

.doc-dropdown {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* No flex-basis, they take full width */
}
.doc-dropdown label {
    font-size: 0.9em;
    margin-bottom: 5px;
    color: var(--system-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Group buttons together for horizontal layout within the column */
.doc-button-group {
    display: flex;
    gap: 10px; /* Space between buttons */
    justify-content: space-between; /* Distribute buttons evenly */
    flex-wrap: wrap; /* Allow buttons to wrap if space is tight */
}

/* Style for all buttons within the doc-controls (including the new ones) */
.doc-controls button {
    flex-grow: 1; /* Allow them to fill available space in their container */
    flex-basis: calc(50% - 5px); /* Approximately half width minus gap */
    min-width: 120px; /* Ensure they don't get too small before wrapping */
    margin-top: 0; /* Override any default margin-top */
}

/* Style for the secondary (detach) button */
.secondary-button {
    background-color: #444; /* Darker, less prominent */
    color: var(--text-color);
    border: 1px solid #666;
}
.secondary-button:hover {
    background-color: #666;
    color: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* Styling for folder options in the dropdown */
#doc-item-select .folder-option {
    font-weight: bold; /* Make folder names stand out */
    color: var(--overseer-color); /* Use a distinct color for folders */
}

#attachments-display {
    margin-top: 15px; /* Reduced margin-top for less whitespace */
    margin-bottom: 0; /* Ensure no extra space at the bottom */
    background: #222;
    padding: 10px;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
    text-align: left;
    white-space: pre-wrap;
    font-family: 'Roboto Condensed', monospace;
    font-size: 0.9em;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
#attachments-display h3 {
    font-size: 1.1em;
    color: var(--overseer-color);
    text-shadow: 0 0 3px var(--overseer-color);
    margin-top: 0; /* Removed top margin */
    margin-bottom: 10px;
    padding-bottom: 5px; /* Add a little padding below for separation */
    border-bottom: 1px dashed var(--system-color); /* Visual separator */
}

/* Styles for the new list format */
#attachments-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#attachments-list > li {
    margin-bottom: 5px; /* Reduced margin */
    font-weight: bold;
    color: var(--user-identity-color);
    font-size: 1em;
}
#attachments-list > li ul {
    list-style: none;
    padding-left: 15px;
    margin-top: 5px;
}
#attachments-list > li ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px; /* Reduced margin */
    background-color: #2b2b2b;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid #333;
    font-size: 0.9em;
}
#attachments-list .document-filename {
    flex-grow: 1;
    color: var(--text-color);
}
#attachments-list .detach-item-button {
    background-color: #555;
    color: #eee;
    border: none;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
    margin-left: 10px;
    transition: background-color 0.2s, color 0.2s;
}
#attachments-list .detach-item-button:hover {
    background-color: var(--error-color);
    color: white;
}


/* ============================================================================
   CACHE MANAGER STYLES
   ============================================================================ */
#cache-list-display {
    margin-top: 15px;
    background: #222;
    padding: 10px;
    border-radius: 5px;
    max-height: 400px;
    overflow-y: auto;
    text-align: left;
    border: 1px solid var(--border-color);
}

#cache-list-display ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#cache-list-display li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: #2b2b2b;
    border: 1px solid #333;
    border-radius: 3px;
    margin-bottom: 5px;
    font-family: 'Roboto Condensed', monospace;
}

.cache-item-info {
    flex-grow: 1;
}

.cache-item-details {
    font-size: 0.8em;
    color: var(--system-color);
    margin-top: 4px;
}


/* ============================================================================
    IMAGE SNAPSHOT STYLES
    ============================================================================ */
.image-message .message-content {
    border-style: solid;
    background-color: #111;
    padding: 10px;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.chat-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
}
/* ================== START: THE FIX ================== */
/* This new rule styles the video element to match the image element. */
.chat-video {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
}
/* =================== END: THE FIX =================== */

/* ================== START: THE FIX ================== */
/* ============================================================================
   MEDIA GALLERY STYLES
   ============================================================================ */
#media-gallery-content {
    width: 90vw;
    max-width: 1200px; /* Allow it to be wider on large screens */
    height: 90vh;
    max-height: 800px;
    display: flex;
    flex-direction: column; /* Stack sections vertically */
}
.gallery-section {
    flex: 1; /* Each section takes up half the vertical space */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide overflow for the grid */
    border-top: 1px solid var(--border-color);
    margin-top: 15px;
}
.gallery-section h3 {
    margin: 10px 0;
    padding: 0;
    color: var(--overseer-color);
    flex-shrink: 0; /* Prevent h3 from shrinking */
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
    overflow-y: auto; /* Enable scrolling within the grid */
    background: #111;
    border-radius: 3px;
}
.gallery-thumbnail {
    width: 100%;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid var(--border-color);
    transition: transform 0.2s, border-color 0.2s;
}
.gallery-thumbnail:hover {
    transform: scale(1.05);
    border-color: var(--accent-color);
}
/* =================== END: THE FIX =================== */
.image-message em {
    font-size: 0.8em;
    color: var(--system-color);
}


/* ============================================================================
   MOBILE RESPONSIVENESS
   ============================================================================ */
@media (max-width: 768px) {
    :root {
        /* Reduce base font sizes for mobile */
        --font-size-names: 0.8em;
        --font-size-dialogue: 0.8em;
        --font-size-narration: 0.8em;
        --font-size-monologue: 0.6em;
        --font-size-chat-title: 0.5em;
        --font-size-system-message: 0.8em;
    }

    body {
        height: auto;
        overflow-y: auto; /* Allow the whole page to scroll on mobile */
    }

    main {
        display: flex;
        flex-direction: column; /* Stack panes vertically */
        height: auto;
    }

    /* Set explicit heights for panes to manage viewport space */
    #public-pane {
        order: 1; /* Show public chat first */
        height: 70vh; /* Takes up half the screen height */
        min-height: 475px;
    }
    #team-a-pane, #team-b-pane {
        order: 2; /* Other panes come after */
        height: 15vh; /* Each takes up a quarter */
        min-height: 400px;
    }
    #judge-pane  { order: 3; display: none; }

    header {
        flex-wrap: wrap; /* Allow header items to wrap to new lines */
        gap: 3px;
        padding: 5px;
        justify-content: center; /* Center items when they wrap */
    }

    /* Allow title and controls to take full width and wrap their contents */
    .title-bar, .user-identity-controls {
        flex-basis: 100%;
        justify-content: center;
        margin: 0;
        gap: 10px;
        flex-wrap: wrap; /* Allow buttons to wrap under the dropdown */
    }

    /* This rule now uses the more specific selector to correctly target the title */
    .title-bar h1 {
        font-size: 1.2em; /* Further reduce title size */
        text-align: center;
    }

    .user-identity-controls .header-user-name {
        font-size: 0.8em; /* Reduce user name size */
    }

    #status-bar {
        flex-basis: 100%;
        text-align: center;
        font-size: 0.4em; /* Make status text very small */
    }

    /* Modal adjustments for mobile */
    .modal-content {
        width: 90%; /* Use percentage width */
        max-width: none; /* Remove the fixed max-width */
        padding: 15px;
    }
    .modal-content h2 {
        font-size: 1.3em; /* Reduce modal title size */
    }
    .modal-content p {
        font-size: 0.9em;
    }

    /* General button resizing for mobile */
    .header-button,
    .ai-control-button,
    .user-input-area button,
    .modal-content button,
    .toggle-switch label,
    .doc-controls button {
        padding: 4px 6px; /* Reduce padding */
        font-size: 0.8em; /* Reduce font size */
    }

    /* Specific adjustments for smaller dropdowns */
    .ai-selection-dropdown,
    #character-switcher,
    .modal-content select {
        padding: 4px;
        font-size: 0.8em;
    }
}