/* style.css */

/* --- CSS Variables for Earth Tones & General Styling --- */
:root {
    /* Colors */
    --color-background-light: #F9F7F3; /* Very light beige/off-white for main background */
    --color-panel-background: #ECE6D8; /* Slightly darker, warm grey-beige for control panels */
    --color-text-dark: #4A4A4A;      /* Dark grey for general text */
    --color-text-light: #F9F7F3;     /* Light text for contrast on dark backgrounds */
    --color-border-subtle: #D1C7B1;    /* Light brown-grey for subtle borders */

    /* Accent Colors (Earth Tones) */
    --color-accent-primary: #6B8E23;   /* Olive Green - Ideal for 'Activate' button, headings */
    --color-accent-secondary: #d7611f; /* Burnt Orange/Terracotta - Ideal for 'Shutdown' button */
    --color-accent-tertiary: #4F6F52;  /* Slightly darker green/forest green - for hover states, some headers */

    /* Sizing & Spacing */
    --border-radius-base: 10px; /* Standard rounded corners */
    --padding-base: 15px;      /* Standard padding */
    --margin-base: 20px;       /* Standard margin */

    /* Typography */
    --font-monospace: 'Roboto Mono', 'SF Mono', 'Ubuntu Mono', 'Cascadia Code', monospace;
    --font-size-body: 1em; /* Base font size */
}

/* Landing page specific styles */
body.landing-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

/* Style the container box */
.landing-box {
    background-color: var(--color-panel-background);
    padding: 40px;
    border-radius: var(--border-radius-base);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 500px;
    width: 100%;
}

/* Admin link styling */
.admin-link {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-subtle);
}

.admin-link a {
    color: var(--color-text-dark);
    text-decoration: none;
    font-size: 0.9em;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.admin-link a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* --- Global Styles & Resets --- */
html, body, #_dash-app-content {
    margin: 0;
    padding: 0;
    height: 100%; /* Ensure full height for layout */
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--font-monospace);
    font-size: var(--font-size-body);
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Improve text rendering on macOS/iOS */
    -moz-osx-font-smoothing: grayscale; /* Improve text rendering on Firefox macOS */
}

/* Universal Box-Sizing for Easier Layouts */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- Main Layout Container --- */
#glossais-terminal-layout {
    max-width: 100%; /* Allow full width */
    margin: 0;
    padding: 0; /* No padding on main container to avoid affecting height calculations */
    display: flex;
    flex-direction: column; /* Stack sections vertically */
    gap: 0; /* No gap on main container */
    height: 100vh; /* Use full viewport height */
    overflow: hidden; /* Prevent content from exceeding viewport */
}

/* Ensure logo area doesn't shrink */
#logo-area {
    flex-shrink: 0; /* Fixed height - don't shrink */
    padding: var(--padding-base);
    margin: 0;
}


/* --- Logo and Title Area --- */
#logo-area {
    display: flex; /* Enable flexbox for horizontal alignment */
    align-items: center; /* Vertically center items */
    justify-content: center; /* Center the entire block of logo + text horizontally */
    /* padding and margin handled separately above */
    text-align: center; /* Fallback for older browsers, and helps with centering children */
    background: transparent;
    width: 100%;
    box-sizing: border-box;
}

#glossais-logo {
    max-width: 150px; /* Set a maximum width for desktop */
    height: auto; /* Maintain aspect ratio */
    margin-right: 15px; /* Space between logo and text */
}

.logo-placeholder {
    width: 60px;
    height: 60px;
    background: var(--color-accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: 1.5em;
    font-weight: bold;
}

/* Logo and brand container alignment for consistent height */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px; /* Match brand-info-container height */
    height: 80px;
}

.brand-info-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 80px; /* Match logo-container height */
    height: 80px;
    text-align: left; /* Align brand name and tagline to the right of the logo */
}

/* Ensure logo scales properly within its container */
.logo-container img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Ensure logo placeholder matches the height */
.logo-container .logo-placeholder {
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.brand-name {
    font-size: 2.5em;
    margin: 0; /* Remove default margin */
    color: var(--color-accent-primary); /* Use primary accent for title */
    font-weight: bold;
}

.tagline {
    font-size: 1.1em;
    color: var(--color-text-dark);
    margin-top: 5px; /* Add some space below the brand name */
    opacity: 0.8; /* Slightly muted description */
}

.tiny-text {
    font-size: xx-small; /* or smaller, e.g., 8px */
}

/* --- Control Sections (Language, Device, Voice) --- */
.control-section {
    display: flex;
    justify-content: center; /* Center items within the section */
    width: 100%; /* Ensure it takes full available width */
}

.flex-row-wrap {
    display: flex; /* Ensure it's a flex container */
    /* flex-wrap: wrap; Allows panels to wrap to the next line on smaller screens */
    gap: var(--padding-base); /* Spacing between flex items (panels) */
    width: 100%; /* Ensure flex container takes full width */
}

.control-panel {
    background-color: var(--color-panel-background);
    padding: var(--padding-base);
    border-radius: var(--border-radius-base);
    flex: 1; /* Allows panels to grow and shrink */
    min-width: 280px; /* Minimum width before forcing a wrap */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
    text-align: center;
}

.panel-header {
    font-size: 1.1em;
    color: var(--color-accent-tertiary); /* Earthy green for headers */
    margin-top: 0;
    margin-bottom: 5px;
    width: 100%;
    padding-left: 2px;
    text-align: left; /* Align to left */
    font-weight: bold;
}

/* --- Dash Dropdown Overrides (dcc.Dropdown) --- */
/* Targeting internal Dash classes for full customization */
.glossais-dropdown .Select-control,
.glossais-dropdown .Select-value,
.glossais-dropdown .Select-input,
.glossais-dropdown .Select-placeholder,
.glossais-dropdown .Select-menu-outer {
    border-radius: var(--border-radius-base) !important; /* Apply rounded corners */
    font-family: var(--font-monospace) !important; /* Apply monospace font */
}

.glossais-dropdown .Select-control {
    background-color: var(--color-background-light) !important;
    border: 1px solid var(--color-border-subtle) !important;
    color: var(--color-text-dark) !important;
    min-height: 45px !important; /* Ensure consistent height */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03); /* Inner shadow for input feel */
    margin-bottom: 10px; /* Add margin below each dropdown to separate from the next header */
}

.glossais-dropdown .Select-value-label,
.glossais-dropdown .Select-placeholder {
    color: var(--color-text-dark) !important;
}

.glossais-dropdown .Select-menu-outer {
    background-color: var(--color-background-light) !important;
    border: 1px solid var(--color-border-subtle) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow for dropdown menu */
    overflow: hidden; /* Ensure rounded corners are respected for overflow */
}

.glossais-dropdown .Select-option {
    background-color: var(--color-background-light) !important;
    color: var(--color-text-dark) !important;
    padding: 10px var(--padding-base) !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    text-align: center;
}

.glossais-dropdown .Select-option.is-focused,
.glossais-dropdown .Select-option:hover {
    background-color: var(--color-accent-tertiary) !important; /* Earthy green on hover */
    color: var(--color-text-light) !important; /* Light text for contrast */
}

.glossais-dropdown .Select-option.is-selected {
    background-color: var(--color-accent-primary) !important; /* Primary accent for selected option */
    color: var(--color-text-light) !important;
}

/* --- Native Select Styling for .glossais-dropdown --- */
.glossais-dropdown {
    width: 100%;
    padding: 10px;
    border-radius: var(--border-radius-base);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-background-light);
    font-family: var(--font-monospace);
    font-size: 1em;
    color: var(--color-text-dark);
    margin-bottom: 10px;
    appearance: none;
    outline: none;
    transition: border-color 0.2s;
    text-align: center;
    text-align-last: center;
}
.glossais-dropdown:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 2px var(--color-accent-primary, #6B8E23);
}

.glossais-dropdown option {
    text-align: center;
    direction: ltr;
}

/* For Firefox */
@-moz-document url-prefix() {
    .glossais-dropdown, .glossais-dropdown option {
        text-align: center !important;
    }
}

/* For Chrome/Safari/Edge: force center alignment in dropdown */
select.glossais-dropdown:focus > option, select.glossais-dropdown option {
    text-align: center;
}

/* --- Buttons --- */
.glossais-button {
    font-family: var(--font-monospace);
    font-size: 1.35em;
    padding: 18px 38px;
    border-radius: var(--border-radius-base);
    border: none;
    cursor: pointer;
    margin: 0 10px 10px 0;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    /* Disable text selection on buttons for a better touch experience */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button-start {
    background: var(--color-accent-primary);
    color: var(--color-text-light);
}
.button-start:hover, .button-start:focus {
    background: var(--color-accent-tertiary);
    color: var(--color-text-light);
}
.button-stop {
    background: var(--color-accent-secondary);
    color: var(--color-text-light);
}
.button-stop:hover, .button-stop:focus {
    background: #7a2e1a;
    color: var(--color-text-light);
}
.button-split {
    background: #bfa14a;
    color: var(--color-text-light);
}
.button-split:hover, .button-split:focus {
    background: #a38c2a;
    color: var(--color-text-light);
}

/* Disabled button states */
.glossais-button:disabled {
    background: var(--color-border-subtle) !important;
    color: #888 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.glossais-button:disabled:hover,
.glossais-button:disabled:focus {
    background: var(--color-border-subtle) !important;
    color: #888 !important;
    box-shadow: none !important;
}

/* Arrangement for action buttons */
.action-button-row {
    display: flex; /* Added display flex to ensure button arrangement */
    justify-content: center;
    gap: 10px;
}

/* --- Recording State and Console Output --- */
#recording-state,
#system-log-console,
#split-button-wrapper { /* Apply similar panel styling to these elements */
    background-color: var(--color-panel-background);
    padding: var(--padding-base);
    border-radius: var(--border-radius-base);
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.status-message {
    font-size: 1.2em;
    color: var(--color-accent-tertiary); /* Earthy green for status messages */
    margin: 0;
    font-weight: bold;
}

/* Ensure Split Button is Centered */
#split-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Additional Button Styles from style2.css --- */
button {
    padding: 15px 30px;
    font-size: 18px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
}
button:hover {
    background: #0056b3;
}
button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* --- Status Classes from style2.css (merged, no conflict with .status-message) --- */
.status {
    margin: 20px 0;
    padding: 10px;
    border-radius: 5px;
}
.connected {
    background: #d4edda;
    color: #155724;
}
.disconnected {
    background: #f8d7da;
    color: #721c24;
}
.info {
    background: #d1ecf1;
    color: #0c5460;
}


/* --- Media Queries for Responsiveness --- */
@media (max-width: 600px) {
    #glossais-terminal-layout {
        padding: var(--padding-base) 10px; /* Reduce horizontal padding on smaller screens */
        margin: 10px auto; /* Reduce top/bottom margin */
    }

    #logo-area {
        /* Keep flex-direction: row to keep logo and text side-by-side */
        justify-content: center; /* Center the combined logo and text */
        /* Align items should already be center, but explicitly define for clarity */
        align-items: center;
    }

    #glossais-logo {
        max-width: 80px; /* Even smaller max-width for very small screens */
        margin-right: 10px; /* Slightly reduce space between logo and text */
    }

    .brand-name {
        font-size: 1.8em; /* Slightly reduce font size for smaller screens */
    }

    .tagline {
        font-size: 0.9em; /* Slightly reduce font size for smaller screens */
        margin-top: 2px; /* Adjust margin for mobile if needed */
    }

    .flex-row-wrap {
        flex-direction: column; /* Stack panels vertically on smaller screens */
        gap: 10px; /* Smaller gap when stacked */
    }

    .control-panel {
        min-width: unset; /* Remove min-width to allow full stacking */
        width: 100%; /* Take full width when stacked */
    }

    .button-large, .button-small {
        height: 76px;
        font-size: 1em;
    }
}



/* --- Shared Terminal Grid Layout (interpreter + broadcaster) --- */
/* Both pages use this grid; let the layout run full width on wide screens. */
#glossais-terminal-layout:has(#terminal-main-grid) {
    max-width: 100%;
}

#terminal-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Interpreter: three equal columns */
    gap: 20px;
    width: 100%;
    height: 100%; /* Fill parent container that already has flex layout */
    flex: 1; /* Take up remaining space in flex parent */
    padding: var(--padding-base); /* Apply padding inside the grid */
    box-sizing: border-box; /* Include padding in height calculation */
    overflow: hidden; /* Prevent grid from overflowing */
}

/* Broadcaster: status (1/3) + translation (2/3) */
.broadcaster-page #terminal-main-grid {
    grid-template-columns: 1fr 2fr;
}

/* Columns place themselves by source order (status, [speaker,] translation),
   so the same rules cover the 3-column interpreter and 2-column broadcaster. */
#status-actions-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Status box on top, action bar docked at bottom */
}

#speaker-transcription-column,
#translated-text-column {
    min-width: 0; /* Allows flex items to shrink below their content size */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Critical: allows flex children to constrain below content size */
    height: 100%; /* Fill the grid cell completely */
}

/* Adjust system status to not have auto margins in grid layout */
#terminal-main-grid #system-status {
    margin: 0;
    max-width: none;
    width: 100%;
    flex-shrink: 0; /* Don't shrink status box */
}

/* Let the status grid fill the full width of the status column */
#terminal-main-grid .status-grid {
    max-width: none;
    width: 100%;
    margin: 0 0 20px 0;
}

/* Action bar on wide screens: docked at the bottom of the status column */
#terminal-main-grid #action-bar {
    position: static;
    margin: 10px 0 0 0;
    max-width: none;
    width: 100%;
    border-radius: var(--border-radius-base);
    min-height: auto;
    flex-shrink: 0; /* Don't shrink action bar */
}

/* Transcription boxes styling */
#system-log-console,
#translated-log-console {
    background-color: var(--color-panel-background);
    padding: var(--padding-base);
    border-radius: var(--border-radius-base);
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill parent height */
    min-height: 0; /* Critical: allows flex children to constrain below content size */
    overflow: hidden; /* Prevent content from expanding container */
}

/* --- Status rows (both pages): label column sized to content and
   left-aligned, icon column sized to content, value column takes up
   the rest of the row (as wide as possible) and stays right-aligned.
   Replaces the fragile width:40% + word-break:break-all that let the
   narrow status column's cells overflow into each other. --- */
#terminal-main-grid .status-row {
    grid-template-columns: auto 1fr auto;
    column-gap: 12px;
}

#terminal-main-grid .status-label {
    width: auto;
    min-width: 0;
    white-space: normal; /* wrap to a second line only when space is cramped */
    overflow-wrap: break-word;
    line-height: 1.2;
    text-align: left;
}

#terminal-main-grid .status-value {
    min-width: 0;
    text-align: right;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Header styling for transcription boxes */
.transcription-header,
.language-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    min-height: 52px; /* Match dropdown height (40px content + 12px padding) */
    flex-shrink: 0; /* Don't shrink headers */
}

.transcription-header .panel-header,
.language-selector-header .panel-header {
    margin: 0;
    flex: 1;
    text-align: left; /* Align text to left */
}

.language-selector-header select {
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 250px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border-subtle);
    background-color: #fff;
    font-family: var(--font-monospace);
    font-size: 0.9em;
    cursor: pointer;
}

/* Narrow layout (<=1024px) - both pages stack into one centered column */
@media (max-width: 1024px) {
    #glossais-terminal-layout {
        height: auto;
        min-height: auto;
        max-width: 600px; /* Non-grid pages (e.g. qrcodes) */
    }

    /* Interpreter + broadcaster: centered 768px stack, with room at the bottom
       for the floating action bar. */
    #glossais-terminal-layout:has(#terminal-main-grid) {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 150px;
    }

    /* Collapse the grid to a single stacked column. Both selectors are listed
       so the narrow rule outranks each page's wider column template. */
    #terminal-main-grid,
    .broadcaster-page #terminal-main-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        height: auto;
        gap: 15px;
    }

    /* Status column no longer needs to push the bar down (the bar floats). */
    #status-actions-column {
        justify-content: flex-start;
        gap: 10px;
        overflow-y: auto;
        max-height: 30vh;
    }

    #speaker-transcription-column,
    #translated-text-column {
        max-height: none;
        min-height: 35vh;
    }

    .string-list-container {
        height: auto;
        max-height: 30em;
        min-height: 22em;
    }

    /* Shared mobile type/spacing tweaks (previously interpreter-only) */
    .status-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .status-row {
        padding: 0.6rem;
        font-size: 0.85rem;
    }

    .panel-header {
        font-size: 1.1rem;
    }

    .glossais-dropdown {
        font-size: 0.9rem !important;
    }

    #logo-area {
        padding: 1rem 0.5rem;
    }

    .brand-name {
        font-size: 1.5rem;
    }

    .tagline {
        font-size: 0.8rem;
    }

    #action-bar {
        gap: 0.5rem;
    }

    .action-bar-row {
        gap: 0.5rem;
    }

    .glossais-button {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    /* Floating action bar, pinned to the bottom of the viewport */
    #terminal-main-grid #action-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
        min-height: 128px;
    }

    /* Adjust language selector for mobile */
    .language-selector-header {
        flex-direction: column;
        align-items: stretch;
    }

    .language-selector-header select {
        max-width: 100%;
        width: 100%;
    }
}

/* Small screens (<768px): drop the side gutter so the stacked grid/boxes use
   the full viewport width. Larger screens keep their gutter (and the 768px
   centered cap in the 768-1024px band). The boxes' own inner padding stays,
   so text is never jammed against the edge. */
@media (max-width: 767.98px) {
    #glossais-terminal-layout:has(#terminal-main-grid) {
        padding-left: 0;
        padding-right: 0;
    }

    #terminal-main-grid {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Shared small-phone tweaks (both pages) */
@media (max-width: 480px) {
    .status-row {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .glossais-button {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }

    .console-output-text {
        font-size: 0.9rem;
        line-height: 1.4;
    }
}

/* --- String list styling for left alignment and white background --- */
.string-list-container {
    flex: 1; /* Fill remaining space in parent */
    overflow-y: auto; /* Scrollable for content overflow */
    overflow-x: hidden; /* No horizontal scroll */
    background: #fff;
    border-radius: 8px;
    padding: 10px 0 10px 0;
    margin-bottom: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    min-height: 0; /* Critical: allow flex to shrink below content size */
}

#string-list,
#translated-list {
    padding-left: 1.5em;
    margin: 0;
    list-style: disc;
}
#string-list li,
#translated-list li {
    text-align: left;
    background: none;
    color: var(--color-text-dark);
    padding: 3px 0 3px 0;
    border-radius: 0;
    margin-bottom: 1px;
    box-shadow: none;
    font-family: var(--font-monospace);
    font-size: 1em;
    list-style-type: disc;
    min-height: 2em;
    line-height: 1.6;
}

/* Centering the button rows inside .switch-button-row */
.switch-button-row.flex-row-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

/* --- Status Boxes (inspired by interpreter app) --- */
.status-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px auto;
    background: #fffef9;
    border-radius: var(--border-radius-base);
    box-shadow: 0 2px 8px rgba(107, 142, 35, 0.08), 0 0 0 2px var(--color-border-subtle);
    padding: 0;
    overflow: hidden;
}
.status-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 8px 8px 8px 14px;
    min-height: 28px;
    border-bottom: 1px solid #e2dbc7;
    background: transparent;
    font-size: 0.98em;
    transition: background 0.15s;
}
.status-row:last-child {
    border-bottom: none;
}
.status-label {
    font-weight: bold;
    color: var(--color-accent-tertiary);
    text-align: left;
    padding: 8px 14px 8px 0;
    font-size: 1.08em;
    letter-spacing: 0.02em;
}
.status-value {
    text-align: right;
    word-break: break-all;
    padding: 8px 0 8px 8px;
    font-size: 1.08em;
}
.status-icon-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 1.5em;
    padding-left: 0.2em;
}
.status-icon {
    display: inline-flex;
    align-items: center;
    font-size: 1.1em;
}
.status-link-icon {
    color: var(--color-accent-primary);
    font-size: 1.1em;
    vertical-align: middle;
}
.status-light {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    background: #bdbdbd;
    box-shadow: 0 0 2px #888;
}
.status-light.green {
    background: #4caf50;
    box-shadow: 0 0 6px #4caf50;
}
.status-light.red {
    background: #d32f2f;
    box-shadow: 0 0 6px #d32f2f;
}
.status-light.orange {
    background: #ff9800;
    box-shadow: 0 0 6px #ff9800;
}


/* --- Session Settings & Status Container Uniformity --- */
#session-settings .control-panel, #system-status {
    background: var(--color-panel-background);
    border-radius: var(--border-radius-base);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: var(--padding-base);
    width: 100%;
    max-width: 400px;
    margin: 0 auto 10px auto;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.status-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    background: #fff9f2;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(107, 142, 35, 0.08), 0 0 0 2px var(--color-border-subtle);
    padding: 10px 0;
    margin: 0 auto;
    overflow: hidden;
}
.status-table tr {
    transition: background 0.2s;
}
.status-table tr:hover {
    background: #f3ecd9;
}
#qr-link {
    font-size: 0.98em;
    color: var(--color-accent-primary);
    margin-left: 8px;
    text-decoration: underline;
    font-weight: 500;
}
#qr-link:hover, #qr-link:focus {
    color: var(--color-accent-tertiary);
}

/* --- Action Bar Button Sizing & Visibility --- */
#action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--color-panel-background);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    padding: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 128px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
}

.action-bar-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}
.button-large, .button-small {
    height: 96px;
}

.button-large {
    flex: 3 1 0%;
    min-width: 0;
    height: 96px;
    font-size: 1.15em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button-small {
    flex: 1 1 0%;
    min-width: 0;
    height: 96px;
    font-size: 1.15em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Session link styling */
#session-link {
    color: var(--color-accent-primary);
    text-decoration: underline;
    font-weight: 600;
    font-size: 1.08em;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}
#session-link:hover, #session-link:focus {
    color: var(--color-accent-tertiary);
    text-decoration: underline;
}
.qr-emoji {
    font-size: 1.1em;
    margin-left: 0.1em;
    vertical-align: middle;
}

.status-row.session-row {
    cursor: pointer;
    transition: background 0.15s;
}
.status-row.session-row:hover, .status-row.session-row:focus {
    background: #f3ecd9;
    outline: none;
}

.status-row.status-session {
    cursor: pointer;
}
.status-row.status-session:hover, .status-row.status-session:focus {
    background: #f3ecd9;
    outline: none;
}

.status-row.status-landing {
    cursor: pointer;
}
.status-row.status-landing:hover, .status-row.status-landing:focus {
    background: #f3ecd9;
    outline: none;
}
.status-row.status-landing.landing-active .status-value {
    color: var(--color-accent-tertiary);
}


/* --- Audio Level Meter Styles --- */
#audio-meter {
    width: 100%;
    height: 12px;
    background-color: var(--color-panel-background);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

#audio-level {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
    transition: width 0.1s ease-in-out;
    border-radius: 6px;
}

/* --- Feedback Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: var(--color-background-light);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--border-radius-base);
    padding: 0;
    max-width: 450px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-base);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-panel-background);
}

.modal-header h3 {
    margin: 0;
    color: var(--color-accent-tertiary);
    font-family: var(--font-monospace);
    font-size: 1.2em;
    font-weight: bold;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5em;
    color: var(--color-text-dark);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s;
}

.modal-close:hover {
    background-color: var(--color-border-subtle);
}

.modal-body {
    padding: var(--padding-base);
}

.rating-section, .comment-section {
    margin-bottom: 20px;
}

.rating-section label, .comment-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--color-accent-tertiary);
    font-family: var(--font-monospace);
}

.star-rating {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.star {
    font-size: 2.5em;
    color: #ddd;
    cursor: pointer;
    transition: color 0.15s;
    user-select: none;
}

.star:hover,
.star.active {
    color: #ffc107;
}

.star.hover {
    color: #ffc107;
}

#feedback-comment {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 2px solid var(--color-border-subtle);
    border-radius: 6px;
    background: var(--color-background-light);
    color: var(--color-text-dark);
    font-family: var(--font-monospace);
    font-size: 0.95em;
    resize: vertical;
    box-sizing: border-box;
}

#feedback-comment:focus {
    outline: none;
    border-color: var(--color-accent-primary);
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* .button-secondary {
    background: var(--color-panel-background) !important;
    color: var(--color-text-dark) !important;
    border: 2px solid var(--color-border-subtle) !important;
}

.button-secondary:hover {
    background: var(--color-border-subtle) !important;
} */

/* Feedback status row hover effect */
.status-feedback:hover, .status-feedback:focus {
    background-color: rgba(107, 142, 35, 0.08);
    cursor: pointer;
}

.status-feedback .status-link-icon {
    opacity: 0.7;
    transition: opacity 0.15s;
}

.status-feedback:hover .status-link-icon {
    opacity: 1;
}

/* Dropdown styling within status rows */
.status-value select.glossais-dropdown {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    text-align: right !important;
    text-align-last: right !important;
    cursor: pointer;
}

.status-value:has(select.glossais-dropdown) {
    text-align: right;
}

.status-value select.glossais-dropdown:focus {
    outline: none !important;
    box-shadow: none !important;
}

.status-value select.glossais-dropdown option {
    background: var(--color-panel-background) !important;
    color: var(--color-text-dark) !important;
    padding: 8px !important;
}

/* QR Code Popup Modal */
.qr-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

.qr-modal-overlay.active {
    display: flex;
}

.qr-modal-content {
    background-color: var(--color-panel-background);
    border-radius: var(--border-radius-base);
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 90%;
    max-height: 90%;
    animation: slideIn 0.3s ease-out;
    position: relative;
}

.qr-modal-content h2 {
    color: var(--color-accent-tertiary);
    margin: 0 0 20px 0;
    font-size: 1.3em;
}

.qr-code-link {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
    text-decoration: none;
}

.qr-code-link:hover {
    transform: scale(1.05);
}

.qr-code-link img {
    display: block;
    max-width: 400px;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-base);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.qr-link-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--color-accent-primary);
    color: var(--color-text-light);
    padding: 8px 12px;
    border-radius: var(--border-radius-base);
    font-size: 0.85em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.qr-link-icon {
    font-size: 1.1em;
}

.qr-copy-link-btn {
    margin: 20px auto 0 auto;
    padding: 12px 24px;
    background-color: var(--color-accent-primary);
    color: var(--color-text-light);
    border: none;
    border-radius: var(--border-radius-base);
    font-family: var(--font-monospace);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.qr-copy-link-btn:hover {
    background-color: var(--color-accent-tertiary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.qr-copy-link-btn:active {
    transform: translateY(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mobile responsive for QR modal */
@media (max-width: 768px) {
    .qr-modal-content {
        padding: 20px;
    }
    
    .qr-code-link img {
        max-width: 300px;
    }
    
    .qr-link-indicator {
        font-size: 0.75em;
        padding: 6px 10px;
    }
}