body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* Center the myriad-container if body is larger */
    align-items: center;
    font-family: 'Inter', sans-serif, Arial, sans-serif;
    background-color: #272727; /* Updated background color */
    color: #fff;
    overflow: hidden; /* Prevent scrollbars */
    font-size: 12px; /* Base font size for em units if used, or for fallback */
}

.myriad-container {
    display: flex;
    flex-direction: row; /* Arrange items horizontally */
    align-items: center; /* Vertically center items in the row */
    justify-content: space-between; /* CHANGED BACK: To push timestamp to the right */
    padding: 5px 15px; /* Increased padding for L/R margins */
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.main-content-area { /* NEW: Wrapper for left and center content */
    display: flex;
    flex-grow: 1; /* Takes up available space, pushing timestamp to the right */
    align-items: center;
    justify-content: space-between; /* Distributes logo (left), booking (center), indicators (right) */
    gap: 10px; /* Add some gap between the items in this area */
    margin-right: 15px; /* Added margin to create space before the timestamp */
}

.logo-and-studio-name {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between logo and studio name */
}

#myriad-logo {
    height: 28px; 
    width: auto;
    display: block; 
    flex-shrink: 0; 
    /* margin-right: 15px; */ /* Removed, gap is handled by parent */
}

#studio-name {
    font-size: 18px;  
    font-weight: 700; /* Bolder */
    color: #e0e0e0;
    margin: 0;
    /* margin-right: 10px; */ /* Removed, spacing handled by parent flex */
    white-space: nowrap; /* Prevent name from wrapping */
}

.indicators-container {
    display: flex;
    flex-direction: row; 
    align-items: center;
    gap: 6px; 
    /* flex-grow: 1; */ /* Removed to allow centering */
    justify-content: center; /* Added for centering, but myriad-container handles overall distribution */
}

.indicator-item {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: center; /* Center label and light within button */
    background-color: #2c2c2c; /* Slightly lighter inactive button */
    border: 1px solid #404040;
    border-radius: 4px; /* Slightly larger radius */
    padding: 4px 12px; /* Increased padding */
    width: 92px; /* Fixed width to prevent resize on bold */
    height: 26px; /* Increased height */
    box-sizing: border-box;
    gap: 6px; /* Increased gap */
}

.indicator-item .indicator-label {
    font-size: 12px; 
    color: #aaa; 
    margin: 0;
    line-height: 1; 
    white-space: nowrap;
    font-weight: normal; /* Ensure it's normal weight when off */
    width: 52px; /* Fixed width for the label */
    text-align: center; /* Center text within the fixed width */
}

.indicator-item .indicator-light {
    width: 10px;  
    height: 10px; 
    border-radius: 50%;
    background-color: #555; 
    border: none; /* Remove border from light itself, button has border */
    /* Pulsing animation for active lights */
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    flex-shrink: 0; /* Prevent light from shrinking */
}

/* Indicator ON states - Button and Light */
.indicator-item.mic-live.on {
    background-color: #5c1a1a; 
    border-color: #e74c3c;
}
.indicator-item.mic-live.on .indicator-label {
    color: #f5c6cb;
    font-weight: bold; /* Bold when on */
}
.indicator-item.mic-live.on .indicator-light {
    background-color: #e74c3c; 
    animation-name: pulse-red;
}

.indicator-item.on-air.on {
    background-color: #1a5c3a; 
    border-color: #2ecc71;
}
.indicator-item.on-air.on .indicator-label {
    color: #c8f7c5;
    font-weight: bold; /* Bold when on */
}
.indicator-item.on-air.on .indicator-light {
    background-color: #2ecc71; 
    animation-name: pulse-green;
}

.indicator-item.silence-detector.on {
    background-color: #6b4f1a; 
    border-color: #f39c12;
}
.indicator-item.silence-detector.on .indicator-label {
    color: #fde3a7;
    font-weight: bold; /* Bold when on */
}
.indicator-item.silence-detector.on .indicator-light {
    background-color: #f39c12; 
    animation-name: pulse-orange;
}

.last-updated-timestamp {
    font-size: 11px; /* Slightly reduced font size */
    color: #888; /* Slightly dimmer */
    margin-left: 0; /* Remove margin-left if it was there, as parent aligns right */
    text-align: right; /* Explicitly align text to right */
    white-space: nowrap;
}

/* Pulsing Animations */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 3px 5px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { box-shadow: 0 0 3px 5px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7); }
    70% { box-shadow: 0 0 3px 5px rgba(243, 156, 18, 0); }
    100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
}

/* Silence Warning Overlay */
#silence-warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.85); /* Semi-transparent red */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: flash-overlay 1s infinite;
    display: none; /* Hidden by default */
}

#silence-warning-text {
    font-size: 22px; /* Increased font size */
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    border: 2px solid white;
    background-color: #c0392b; /* Solid darker red */
}

@keyframes flash-overlay {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Remove media query for vw adjustments, as we are using fixed px sizes for compactness */
/* @media (max-width: 300px) { ... } */

/* NEW Styles for Myriad Studio Bookings - designed for minimal impact */
.main-status-elements {
    display: flex;
    flex-direction: row;
    align-items: center; /* Vertically align booking info and indicators */
    gap: 10px; /* Space between booking info and indicators container */
    /* This container will be positioned by .myriad-container's justify-content: space-between */
}

.studio-booking-info {
    /* New styles for a more central, less boxy appearance */
    display: flex;
    flex-direction: row; /* Align icon and text horizontally */
    align-items: center; /* Vertically center icon and text */
    justify-content: center;
    text-align: center; 
    padding: 0 5px; /* Reduced padding as it's more compact */
    /* flex-grow: 1; */ /* REMOVED: Allow it to take available space in the center */
    min-width: 250px; /* Increased min-width for longer titles */
    font-size: 13px; /* Base font size for this block */
    line-height: 1.3;
    /* gap: 5px; */ /* Space between icon and text - REMOVED as icon is gone */
}

/* .studio-booking-info .booking-icon {
    font-size: 16px; 
} REMOVED */

.studio-booking-info .booking-text {
    color: #e0e0e0; /* Light text color */
    white-space: nowrap;
}

/* Status-specific styling */
.studio-booking-info.status-booked .booking-text { /* Applied directly to text */
    color: #e74c3c; /* Red for booked */
}

.studio-booking-info.status-available .booking-text { /* Applied directly to text */
    color: #2ecc71; /* Green for available */
}

/* .studio-booking-info.status-upcoming .booking-icon, 
.studio-booking-info.status-upcoming .booking-text {
    color: #f39c12; 
} REMOVED */

/* End of NEW Styles */