:root{
    --telegram-full-height: var(--tg-viewport-height);
    --safe-area-inset-top: calc(100vh - var(--tg-viewport-stable-height, 100vh));
    --fullscreen-width: 100vw; /* Default, overridden by JS */
    --fullscreen-height: 100vh;
}

html, body {
    min-height: 100%;
}

body {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 300;
    background-color: #ffffff; /* Light background for the page */
    color: #464646; /* Default text color */
    margin: 0; /* Remove default body margin */
    line-height: 1.6; /* Improve readability */
    display: flex;
    flex-direction: column; /* Stack views vertically */
    min-height: 100vh; /* Ensure body takes at least full viewport height */
}

/* Only center content if auth view is the *only* thing visible */
body:has(#auth-view:not(.hidden):only-child) {
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

body.fullscreen {
    width: var(--fullscreen-width);
    height: var(--fullscreen-height);
    overflow: hidden;
    background: #000000;
    margin: 0;
}

h1, h2, h3 {
    font-family: 'Tenor Sans', sans-serif;
    color: #8c4158; /* Primary theme color */
    margin-top: 0; /* Remove default top margin */
}


/* Add a class to main view containers */
.view-container {
    width: 100%;
    flex-grow: 1; /* Allow main views to take available space */
    display: flex; /* Optional: If view itself needs flex */
    flex-direction: column; /* Optional: If view itself needs flex */
}

/* Keep auth view specific centering */
.auth-container {
    flex-grow: 1; /* Allow auth container to grow */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px; /* Add padding */
    box-sizing: border-box;
}
.auth-content {
    /* Styles for the inner box containing auth elements */
    max-width: 400px;
    width: 100%;
    text-align: center;
    /* background: #fff; Example background */
    /* padding: 2rem; Example padding */
    /* border-radius: 8px; Example radius */
}

/* === General Utility === */
.hidden {
    display: none !important; /* Use !important cautiously, ensures override */
}
.error {
    color: #dc2626; /* Red for errors */
    font-weight: 500;
    margin: 0.5rem 0;
}

/* === Initial Loading Screen Styles === */
.loading-overlay {
    position: fixed; /* Cover the entire viewport */
    inset: 0;
    background-color: rgba(250, 250, 250, 0.95); /* Semi-transparent white background */
    z-index: 100; /* Ensure it's on top of everything */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: #8c4158; /* Use theme color */
    font-family: 'Tenor Sans', sans-serif;
}

/* === Spinner Styles (Using .spinner class) === */
.spinner {
    position: relative; /* Needed for absolute positioning of spans and :after */
    width: 40px;      /* Adjust size as needed */
    height: 40px;     /* Adjust size as needed */
    border-radius: 50%;
    /* Updated Colors: #8c4158, #d3bcc0, #5e4955 */
    background: linear-gradient(#8c4158, #ae7885);
    animation: animate 1.2s linear infinite;
    /* Ensure spinner itself doesn't block flex alignment if p tag is removed */
    flex-shrink: 0;
    margin-top: 25px;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinner span { /* Targets spans inside .spinner */
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Updated Colors: #8c4158, #d3bcc0, #5e4955 */
    background: linear-gradient(#ae7885, #8c4158, #ae7885);
}

.spinner span:nth-child(1) {
    filter: blur(5px);
}

.spinner span:nth-child(2) {
    filter: blur(10px);
}

.spinner span:nth-child(3) {
    filter: blur(15px);
}

.spinner span:nth-child(4) {
    filter: blur(25px);
}

.spinner:after { /* Pseudo-element for the center */
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    /* Use a background related to the overlay or theme */
    /*background: no-repeat url("/public/icon-192.png");*/
    /*background: #d3bcc0; !* Matches overlay background base *!*/
    /* background: #f1f1f1; */ /* Alternative grey */
    border-radius: 50%;
}
/* === End Spinner Styles === */

/* === Modal Styles (Login/OTP) === */
.modal {
    display: flex; /* Use flex for centering */
    position: fixed;
    inset: 0; /* Equivalent to top/left/right/bottom: 0 */
    width: 100%;
    height: 100%;
    background: rgba(70, 70, 70, 0.7); /* Semi-transparent overlay */
    z-index: 50; /* Ensure it's on top */
    justify-content: center;
    align-items: center;
    padding: 1rem; /* Add padding for smaller screens */
}
.modal-content {
    background: #efe7e9; /* Modal background */
    padding: 2rem;
    border-radius: 0.5rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow */
}
.btn-primary {
    display: inline-block; /* Allow padding/margin */
    background-color: #ae7885; /* Button background */
    color: #fff; /* Button text color */
    padding: 0.75rem 1.5rem; /* Increase padding */
    border-radius: 0.25rem;
    font-weight: 500;
    border: none; /* Remove default border */
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    margin-top: 1rem; /* Add space above button */
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #8c4158; /* Darker on hover/focus */
    outline: none;
}
.btn-primary:disabled {
    background-color: #d3bcc0; /* Lighter when disabled */
    cursor: not-allowed;
}
.input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
    width: 100%;
}

input[type="password"] {
    border: 1px solid #d3bcc0;
    outline: none;
    padding: 0.75rem;
    border-radius: 0.25rem;
    width: 100%;
    max-width: 256px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="password"]:focus {
    border-color: #ae7885;
    box-shadow: 0 0 0 3px rgba(174, 120, 133, 0.2);
}

label {
    color: #7d7d7d;
    margin-bottom: 0.25rem;
    font-weight: 500;
    display: block; /* Ensure it takes its own line */
    width: 100%;
    max-width: 256px;
    text-align: left; /* Align label text left */
}
input[type="email"],
input[type="text"] { /* Target specific inputs */
    border: 1px solid #d3bcc0; /* Border */
    outline: none;
    padding: 0.75rem; /* Increase padding */
    border-radius: 0.25rem;
    width: 100%;
    max-width: 256px;
    box-sizing: border-box; /* Include padding in width */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input[type="email"]:focus,
input[type="text"]:focus {
    border-color: #ae7885;
    box-shadow: 0 0 0 3px rgba(174, 120, 133, 0.2); /* Focus ring */
}
/* === OTP Input Boxes Styling === */
.otp-label {
    color: #7d7d7d;
    margin-bottom: 0.75rem; /* Increased space below label */
    font-weight: 500;
    display: block; /* Ensure label is on its own line */
    text-align: center ;
    max-width: none !important;
}

.otp-inputs-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between input boxes */
    margin-bottom: 1.5rem; /* Space below the boxes */
}

.otp-input-digit {
    width: 45px; /* Width of each box */
    height: 55px; /* Height of each box */
    font-size: 1.5rem; /* Larger font for the digit */
    text-align: center;
    border: 1px solid #d3bcc0;
    border-radius: 6px; /* Slightly rounded corners */
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    caret-color: #8c4158; /* Make cursor color match theme */

    /* Prevent browser default appearance (like number spinners) */
    -moz-appearance: textfield;
    appearance: textfield;
}
/* Remove spinners for WebKit browsers */
.otp-input-digit::-webkit-outer-spin-button,
.otp-input-digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-input-digit:focus {
    border-color: #ae7885;
    box-shadow: 0 0 0 3px rgba(174, 120, 133, 0.3); /* Focus ring */
}

/* Optional: Style for filled input */
.otp-input-digit:valid { /* Simple style when input has content */
    /* border-color: #8c4158; */ /* Example: Change border color */
}




/* === Layout Containers === */
.container-n {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}
.video-c__row, .video-player__row, .video-info__row {
    box-sizing: border-box; /* Include padding in width calculation */
    margin: 0 auto;
    width: 100%;
    max-width: 1280px; /* Add a max-width for very large screens */
    padding: 60px 40px; /* Adjusted base padding */
}
.pt-0 {
    padding-top: 0;
}
@media (max-width: 1200px) {
    .video-c__row, .video-player__row, .video-info__row {
        padding: 40px 30px;
    }
}
@media (max-width: 768px) {
    .video-c__row, .video-player__row, .video-info__row {
        padding: 30px 20px;
    }
}
@media (max-width: 500px) {
    .video-c__row, .video-player__row, .video-info__row {
        padding: 20px 15px;
    }
}



/* === Broadcasts List Specific Styles === */
.video-c__head {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px; /* Reduced margin */
    gap: 20px; /* Add gap between title and filters */
    overflow: hidden; /* Prevent filter scrollbar from affecting overall layout */
}
.video-c__head h1 {
    font-weight: 400;
    text-transform: none;
    color: #8c4158;
    margin: 0; /* Remove default margin */
    font-size: 2.5rem; /* Responsive font size */
    line-height: 1.2;
}
@media (max-width: 768px) {
    .video-c__head h1 {
        font-size: 2rem;
    }
    .video-c__head {
        flex-direction: column; /* Stack title and filters */
        align-items: flex-start; /* Align left */
    }
    .category-filters {
        width: 100%; /* Allow filters container to take full width */
    }
}

/* --- Point 3: Category Button Text Color --- */
/* Category Filters Container */
.category-filters {
    display: flex;
    /* REMOVE flex-wrap: wrap; */ /* Remove wrapping behavior */
    gap: 10px;
    overflow-x: auto; /* <<< ADD: Enable horizontal scrolling */
    white-space: nowrap; /* <<< ADD: Prevent buttons themselves from wrapping text */
    padding: 5px 0; /* Add some vertical padding for scrollbar spacing if needed */

    /* Optional: Hide scrollbar visually while keeping functionality */
    /* For Webkit browsers (Chrome, Safari) */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
    scrollbar-width: none; /* For Firefox */
}
.category-filters::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Webkit */
}

/* Category Button */
.category-btn {
    /* display: inline-block; */ /* Flex handles display */
    padding: 8px 16px;
    background-color: #d3bcc0;
    color: #ffffff; /* White text for inactive */
    border-radius: 4px;
    cursor: pointer;
    border: none;
    font-weight: 500;
    transition: background-color 0.2s linear, color 0.2s linear;
    /* white-space: nowrap; */ /* Moved to parent for simplicity */
    flex-shrink: 0; /* <<< ADD: Prevent buttons from shrinking to fit */
}

/* Styles for active and hover remain the same */
.category-btn.active {
    background-color: #8c4158;
    color: #fff;
}
.category-btn:not(.active):hover {
    background-color: #ae7885;
    color: #fff;
}

.broadcasts-list {
    display: grid; /* Use Grid for better control */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive columns */
    gap: 20px; /* Gap between grid items */
}
/* Remove width calculations from broadcast-item */
.broadcast-item {
    /* width: 100%; NO LONGER NEEDED with grid */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* Softer shadow */
    cursor: pointer;
    overflow: hidden; /* Clip content like image */
    transition: box-shadow 0.3s ease;
    display: flex; /* Use flex for vertical layout */
    flex-direction: column; /* Stack image and details */
}
.broadcast-item:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12); /* Enhanced hover shadow */
}

/* --- Point 2: Broadcast List Thumbnails --- */
.broadcast-item__thumbnail {
    position: relative;
    width: 100%; /* Take full width of the item */
    /* --- CHANGE Aspect Ratio --- */
    /* Option A: 4:3 Aspect Ratio (More square) */
    padding-top: 75%;
    /* Option B: 1:1 Aspect Ratio (Square) */
    /* padding-top: 100%; */
    /* Option C: Original 16:9 */
    /* padding-top: 56.25%; */

    /* --- Common Styles --- */
    /* Remove radius if item has it, or match top corners */
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    background-color: #e2e8f0; /* Placeholder background */
}
.broadcast-item__thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* --- Keep using cover for unified fill --- */
    object-fit: cover;
    /* Alt: Use contain to show whole image with bars */
    /* object-fit: contain; */
    display: block; /* Remove potential bottom space */
}
/* Container for details below image */
.broadcast-item__details {
    padding: 16px; /* Add padding around details */
    flex-grow: 1; /* Allow details area to grow if needed */
    display: flex;
    flex-direction: column;
}
.broadcast-item__title {
    font-size: 1.1rem;
    line-height: 1.4;
    color: #464646;
    margin: 0 0 8px 0; /* Adjusted margin */
    font-weight: 500; /* Make title slightly bolder */
    /* Optional: Limit title lines */
    /* display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; */
}
.broadcast-item__date {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    color: #737072;
    margin-top: auto; /* Push date to the bottom if details grow */
}


/* === Individual Broadcast View Styles === */

/* Normal state */
.video-player__content {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    aspect-ratio: 9 / 16;
}

/* Fullscreen state */
.video-player__content.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--fullscreen-height);
    /*height: 100%; !* Fallback if JS fails *!*/
    /* Height set dynamically via JS */
    z-index: 1000;
    background: #000 !important; /* Force black background */
    max-width: none !important;
    border-radius: 0;
    margin: 0;
    aspect-ratio: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* MUX Fullscreen TG */
mux-player.fullscreen {
    max-width: none;
    max-height: none; /* Remove all caps unless specified */
    object-fit: contain;
    padding: 0;
    margin: 0; /* Reset any spacing */
    position: relative;
    width: auto; /* Reset base interference */
    height: auto; /* Reset base interference */
    background: #000; /* Keep your background */
}

/* Tall/Narrow (Screen Ratio <= 0.5625) - Fit to width */
@media (max-aspect-ratio: 9/16) {
    mux-player.fullscreen {
        width: 100vw; /* Fit to full width */
        height: calc(100vw * 16 / 9); /* 16:9 aspect ratio */
        max-height: 100vh; /* Cap at screen height */
        margin: calc((100vh - min(calc(100vw * 16 / 9), 100vh)) / 2) auto 0 auto; /* Center vertically */
        --media-query-tall: "active";
    }
}

/* Wide (Screen Ratio > 0.5625) - Fit to height */
@media (min-aspect-ratio: 9/16) {
    mux-player.fullscreen {
        height: var(--fullscreen-height) !important; /* Container height from JS */
        width: calc(var(--fullscreen-height) * 9 / 16) !important;
        max-width: var(--fullscreen-width) !important;
        margin: 0 auto !important;
        --media-query-wide: "active";
    }
}


/* Hide all non-player children in fullscreen */
.video-player__content.fullscreen > *:not(mux-player) {
    display: none;
}

/* Keep the button visible in fullscreen */
.video-player__content.fullscreen .fullscreen-btn {
    display: flex;
    right: 20px;
    width: 28px;
    height: 28px;
}




/*.video-player__content video {*/
/*    !* REMOVED position: absolute; top: 0; left: 0; height: 100%; *!*/
/*    display: block; !* Prevents extra space below video *!*/
/*    width: 100%; !* Fill container width *!*/
/*    height: auto; !* <<< CHANGED: Let height adjust based on native aspect ratio *!*/
/*    max-height: 85vh; !* Optional: Prevent extremely tall videos *!*/
/*    !* border-radius: 8px; *! !* Radius applied to container now *!*/
/*}*/

/* Video Info Section Below Player */
.video-info__wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; /* Vertically align items */
    gap: 10px 20px; /* Row and column gap */
    margin-top: 20px; /* Add space above info section */
}
.video-info__left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px; /* Gap between date and comments */
}
.video-info__left-col {
    font-size: 1.3rem; /* Adjusted size */
    line-height: 1; /* Align text */
    font-weight: normal;
    display: flex; /* Use flex for alignment */
    align-items: center;
    padding-left: 14px; /* Space from border */
    position: relative; /* For pseudo-element border */
}
.video-info__left-col::before { /* Use pseudo-element for border */
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 14px; /* Adjust border height */
    width: 1px;
    background-color: #979797;
}
.video-info__left-col:first-child {
    padding-left: 0; /* No padding for first item */
}
.video-info__left-col:first-child::before {
    display: none; /* No border for first item */
}
@media (max-width: 767px) {
    .video-info__left-col {
        font-size: 1.3rem;
        padding-left: 10px;
        gap: 10px;
    }
    .video-info__left-col::before { height: 12px; }
    .video-info__wrap { margin-top: 15px; }
}
.video-info__to-comment {
    color: #8c4158;
    transition: color 0.2s linear;
    cursor: pointer;
    text-decoration: none; /* Remove underline */
}
.video-info__to-comment:hover {
    color: #c18180;
    text-decoration: underline; /* Underline on hover */
}
.video-sort__back-link {
    color: #ae7885;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.3rem;
    text-decoration: underline;
    text-decoration-color: #ae7885;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    background: none;
    border: none;
    padding: 5px 0;
}
.video-sort__back-link:hover {
    color: #8c4158;
    text-decoration-color: #8c4158;
}
.video-info__text { /* Teacher info */
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 15px; /* Reduced space */
    color: #464646;
}
@media (max-width: 767px) {
    .video-info__text {
        margin-top: 10px;
        font-size: 0.9rem;
    }
}

/*Fullscreen Container Styles TG */

.container-n.video-player.fullscreen,
.video-player__row.fullscreen,
.video-player__content.fullscreen {
    width: var(--fullscreen-width);
    height: var(--fullscreen-height);
    margin: 0;
    padding: 0;
    max-width: none;
}

.video-player__content.fullscreen {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Loading Indicator Styles */
#loading {
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #737072;
}

/* Ensure body takes full height for centering auth view initially */

#broadcast-view.fullscreen {
    width: var(--fullscreen-width);
    height: var(--fullscreen-height);
}

#broadcast-view > *:not(.video-player).fullscreen {
    display: none;
}

/* Make sure views take up space */
#broadcasts-list-view, #broadcast-view {
    width: 100%;
    flex-grow: 1; /* Allow these views to take remaining space */
}

/* Auth Tabs Container */
.auth-tabs {
    display: flex;
    justify-content: center;
    gap: 24px; /* Wider gap per Material Design spacing */
    margin-bottom: 1.5rem; /* Keep space below tabs */
    border-bottom: 1px solid #d3bcc0; /* Subtle bottom border for tab row */
    padding-bottom: 0; /* Remove padding to align with underline */
}

/* Tab Button */
.tab-btn {
    padding: 10px 16px; /* Vertical padding for tap area, horizontal for spacing */
    background-color: transparent; /* No background for inactive */
    color: #7d7d7d; /* Inactive text color (matches your labels) */
    border: none;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 500;
    font-size: 1rem; /* Consistent with Material Design */
    text-transform: uppercase; /* Material tabs often use uppercase */
    letter-spacing: 0.5px; /* Slight spacing for readability */
    cursor: pointer;
    position: relative; /* For the active indicator */
    transition: color 0.2s ease; /* Smooth color transition */
}

/* Active Tab */
.tab-btn.active {
    color: #8c4158; /* Active text color matches your theme */
}

/* Active Indicator (underline) */
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Align with container border */
    left: 0;
    width: 100%;
    height: 2px; /* Material Design uses a 2px indicator */
    background-color: #8c4158; /* Match active text color */
}

/* Hover State */
.tab-btn:hover:not(.active) {
    color: #ae7885; /* Hover color between inactive and active */
}

/* Focus State */
.tab-btn:focus {
    outline: none;
    color: #ae7885; /* Match hover for consistency */
}

/* Disabled State (optional, if needed later) */
.tab-btn:disabled {
    color: #d3bcc0;
    cursor: not-allowed;
}

/* Auth Forms */
.auth-forms {
    width: 100%;
}

.auth-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-form.hidden {
    display: none; /* Hide inactive form */
}

/* Mux Player styling */
mux-player {
    aspect-ratio: 9/16;
    width: 100%; /* Use 100% or fixed width like 500px */
    max-width: 480px;
    display: block;
    position: relative; /* Ensure positioning context */

    /* It might still be useful to set global non-background colors here */
    /* These often apply to elements outside the main control bar (menus, tooltips) */
}

/* --- Style the Control Bar area via ::part(bottom) --- */
/* This targets the container usually holding the main controls */
mux-player::part(bottom) {
    /* Control Bar Background */
    --media-control-background: #8c4158;

    /* Text and Icons specific to the control bar */
    --media-text-color: #ffffff;
    --media-button-icon-color: #ffffff;
    --media-time-display-color: #ffffff;

    /* Hover Effects for buttons within the control bar */
    --media-control-hover-background: #ae7885;

    /* Sliders (Progress Bar, Volume) within the control bar */
    --media-range-track-background: #efe7e9; /* The 'empty' part */
    --media-range-bar-color: #ae7885;       /* The 'filled' part */
}

/* --- Optional: Style the Center area via ::part(center) --- */
/* This targets the area with the initial big play button, etc. */
mux-player::part(center) {
    /* You might want different styling here, e.g., for the big play button */
    /* If you want it the same as the bottom bar, repeat variables: */
    --media-control-background: #8c4158; /* Example: slightly transparent */
    --media-control-hover-background: #ae7885;
    --media-button-icon-color: #ffffff; /* Ensure icon is white */

    /* --- ADD LOADING INDICATOR COLOR HERE --- */
    --media-loading-indicator-color: #ffffff;

    /* --- ADD FOCUS RING COLOR HERE (for big play button) --- */
    --media-focus-ring-color: #ffffff;

}


mux-player::part(img) {
    display: block; /* Necessary for object-fit to work predictably */
    width: 100%;    /* Make image fill the container width */
    height: 100%;   /* Make image fill the container height */
    object-fit: cover; /* KEY PROPERTY: Scale while preserving ratio, crop to fill */
    object-position: center center; /* Optional: Control where cropping occurs (e.g., 'top center') */
}

mux-player::part(range volume) {
    /* Set the volume slider's colors explicitly */
    --media-range-track-background: #efe7e9; /* The 'empty' part */
    --media-range-bar-color: #d3bcc0;       /* The 'filled' part (your indicator) */
    --media-range-thumb-background: #ffffff; /* Explicitly set thumb */
}

/* --- SPECIFICALLY Target the Time Slider Part --- */
/* Confirm part name is 'range time' via DevTools */
mux-player::part(range time) {
    /* Set the time slider's track/bar colors explicitly */
    /* (May inherit from ::part(bottom) but being explicit is safer) */
    --media-range-track-background: #d3bcc0;
    --media-range-bar-color: #ae7885;

    /* --- ADD THE SAME THUMB STYLES HERE --- */
    --media-range-thumb-background: #ffffff;
    --media-range-thumb-height: 14px;
    --media-range-thumb-width: 14px;
    --media-range-thumb-border-radius: 50%;
    --media-range-thumb-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    /* --media-range-thumb-border: 1px solid #8c4158; */ /* Optional border */
}

/* Ensure the poster container itself fills the space */
mux-player::part(poster) {
    display: block; /* Ensure it takes up block space */
    width: 100%;
    height: 100%;
    overflow: hidden; /* Hide any potential overflow from the inner image */
}


/* Fullscreen button */
.fullscreen-btn {
    background: #8c4158;
    color: #efe7e9;
    padding: 6px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    margin: 10px;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    position: absolute;
    top: 10px; /* Fallback to 10px if no safe area */
    right: 10px;
    z-index: 10;
    width: 28px;
    height: 28px;
}

.fullscreen-btn:hover {
    background: #ae7885;
}

/* SVG icon styling */
.fullscreen-icon {
    width: 16px;
    height: 16px;
    display: block;
}

/* Default state: hidden unless explicitly shown in Telegram */
#custom-fullscreen-btn {
    display: none; /* Hidden by default */
}

/* In Telegram, JS removes 'hidden' or sets display: block */
#custom-fullscreen-btn:not(.hidden) {
    display: flex; /* Match .fullscreen-btn */
}

/* Fullscreen state */
#custom-fullscreen-btn.fullscreen {
    position: absolute;
    top: calc(var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top) + 20px);
    right: calc(var(--tg-safe-area-inset-right) + var(--tg-content-safe-area-inset-right) + 20px);
}


/* Hover state (if needed) */
mux-player::part(center play button):hover {
    background-color: var(--media-control-hover-background, #ae7885);
}


/* Target iOS devices at sm breakpoint (470px) */
@media only screen and (max-width: 470px) and (-webkit-min-device-pixel-ratio: 0) {
    /* Target the center-controls slot within the shadow DOM */
    mux-player::part(center) {
        /*display: flex;*/
        /*align-items: center;*/
        /*justify-content: center;*/
        /*height: 150px !important;*/
        /*width: 100% !important;*/
        --media-control-background: transparent !important; /* Example: slightly transparent */
        --media-control-hover-background: transparent !important;
        --media-button-icon-color: #ffffff; /* Ensure icon is white */

    }

    mux-player.fullscreen::part(center) {
        /* Uncomment if you want to center controls */
        /* display: flex; */
        /* align-items: center; */
        /* justify-content: center; */
        /* height: 150px !important; */
        /* width: 100% !important; */

        --media-control-background: transparent !important;
        --media-control-hover-background: transparent !important;
        --media-button-icon-color: #ffffff !important;
    }

    /* Target the media-play-button within the shadow DOM */
    mux-player::part(center play button pre-play) {
        width: 60px!important;
        height: 60px!important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Target SVG or IMG within the media-play-button */
    mux-player::part(center play button pre-play) svg,
    mux-player::part(center play button pre-play) img {
        width: 30px!important;
        height: 30px!important;
        max-width: 30px;
        max-height: 30px;
        min-width: 30px;
        min-height: 30px;
        position: relative;
        display: flex;
    }
}

/* Overlay shimmer for broadcasts */
.overlay-broadcast {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #efe7e9;
    z-index: 999;
    overflow: hidden;
}

.shimmer {
    position: absolute;
    top: 0;
    left: -50%;
    height: 100%;
    width: 200%;
    background: linear-gradient(
            120deg,
            #efe7e9 25%,
            #d3bcc0 50%,
            #efe7e9 75%
    );
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.letter {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 40px;
    fill: #8c4158; /* Letters match background for visibility outside ribbon */
}

.ribbon {
    fill: rgba(250, 250, 250, 0.95);
    animation: moveRibbon 2s infinite linear;
}

@keyframes moveRibbon {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(100%); }
}