@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --media-cue-backdrop: blur(0px);
        --media-captions-padding: 0%;
        --video-captions-offset: 0px;
        /*--brand-color-50: #f2f0ff;*/
        /*--brand-color-100: #eeebff;*/
        /*--brand-color-200: #d4d0ff;*/
        /*--brand-color-300: #c7c2ff;*/
        /*--brand-color-400: #9f92ff;*/
        /*--brand-color-500: #6152df;*/
        /*--brand-color-600: #5243cb;*/
        /*--brand-color-700: #3f2eb2;*/
        /*--brand-color-800: #312887;*/
        /*--brand-color-900: #231c6b;*/
        /*--brand-color-950: #1a144f;*/
        /*--brand-color-default: #6152df;*/

        --color-brand-50: 242 240 255;
        --color-brand-100: 238 235 255;
        --color-brand-200: 212 208 255;
        --color-brand-300: 199 194 255;
        --color-brand-400: 159 146 255;
        --color-brand-500: 97 82 223;
        --color-brand-600: 82 67 203;
        --color-brand-700: 63 46 178;
        --color-brand-800: 49 40 135;
        --color-brand-900: 35 28 107;
        --color-brand-950: 26 20 79;
        --color-brand-default: 97 82 223;

        /*--gray-color-50: #FAFAFA;*/
        /*--gray-color-100: #F5F5F5;*/
        /*--gray-color-200: #E5E5E5;*/
        /*--gray-color-300: #D4D4D4;*/
        /*--gray-color-400: #A3A3A3;*/
        /*--gray-color-500: #737373;*/
        /*--gray-color-600: #525252;*/
        /*--gray-color-700: #404040;*/
        /*--gray-color-800: #262626;*/
        /*--gray-color-900: #171717;*/
        /*--gray-color-950: #101010;*/
        /*--gray-color-default: #737373;*/

        /*      --color-gray-50: 250 250 250;
        --color-gray-100: 245 245 245;
        --color-gray-200: 229 229 229;
        --color-gray-300: 212 212 212;
        --color-gray-400: 163 163 163;
        --color-gray-500: 115 115 115;
        --color-gray-600: 82 82 82;
        --color-gray-700: 64 64 64;
        --color-gray-800: 38 38 38;
        --color-gray-900: 23 23 23;
        --color-gray-950: 16 16 16;
        --color-gray-default: 115 115 115;*/

        --color-gray-50: 230 230 230;
        --color-gray-100: 225 225 225;
        --color-gray-200: 209 209 209;
        --color-gray-300: 202 202 202;
        --color-gray-400: 143 143 143;
        --color-gray-500: 90 90 90;
        --color-gray-600: 72 72 72;
        --color-gray-700: 54 54 54;
        --color-gray-800: 28 28 28;
        --color-gray-900: 16 16 16;
        --color-gray-950: 11 11 11;
        --color-gray-default: 105 105 105;


        /*--radius: 0.375rem;*/
        --radius: 0.5rem;
        --radius-md: 0.5rem;

        --titlebar-h: theme("height.10");

        --foreground: theme('colors.gray.800');
        --background: white;

        --brand: theme('colors.brand.300');
        --slate: theme('colors.slate.500');
        --gray: theme('colors.gray.500');
        --zinc: theme('colors.zinc.500');
        --neutral: theme('colors.neutral.500');
        --stone: theme('colors.stone.500');
        --red: theme('colors.red.500');
        --orange: theme('colors.orange.500');
        --amber: theme('colors.amber.500');
        --yellow: theme('colors.yellow.500');
        --lime: theme('colors.lime.500');
        --green: theme('colors.green.500');
        --emerald: theme('colors.emerald.500');
        --teal: theme('colors.teal.500');
        --cyan: theme('colors.cyan.500');
        --sky: theme('colors.sky.500');
        --blue: theme('colors.blue.500');
        --indigo: theme('colors.indigo.500');
        --violet: theme('colors.violet.500');
        --purple: theme('colors.purple.500');
        --fuchsia: theme('colors.fuchsia.500');
        --pink: theme('colors.pink.500');
        --rose: theme('colors.rose.500');

        --border: theme('colors.gray.200');
        --ring: theme('colors.brand.500');

        --muted: theme('colors.gray.500');
        --muted-highlight: theme('colors.gray.700');

        --paper: theme('colors.white');
        --subtle: rgba(0, 0, 0, 0.04);
        --subtle-highlight: rgba(0, 0, 0, 0.06);

        --media-card-popup-background: theme('colors.gray.950');
        --hover-from-background-color: theme('colors.gray.900');

        /*--media-accent-color: theme('colors.brand.400');*/
        --media-accent-color: #fff;
        --media-menu-item-hover-background: rgba(255, 255, 255, 0.1);
    }

    .dark,
    [data-mode="dark"] {
        --foreground: theme('colors.gray.200');
        --background: #070707;

        /*--brand: theme('colors.brand.300');*/
        --slate: theme('colors.slate.300');
        --gray: theme('colors.gray.300');
        --zinc: theme('colors.zinc.300');
        --neutral: theme('colors.neutral.300');
        --stone: theme('colors.stone.300');
        --red: theme('colors.red.300');
        --orange: theme('colors.orange.300');
        --amber: theme('colors.amber.300');
        --yellow: theme('colors.yellow.300');
        --lime: theme('colors.lime.300');
        --green: theme('colors.green.300');
        --emerald: theme('colors.emerald.300');
        --teal: theme('colors.teal.300');
        --cyan: theme('colors.cyan.300');
        --sky: theme('colors.sky.300');
        --blue: theme('colors.blue.300');
        --indigo: theme('colors.indigo.300');
        --violet: theme('colors.violet.300');
        --purple: theme('colors.purple.300');
        --fuchsia: theme('colors.fuchsia.300');
        --pink: theme('colors.pink.300');
        --rose: theme('colors.rose.300');

        --border: rgba(255, 255, 255, 0.1);
        --ring: theme('colors.brand.200');

        --muted: rgba(255, 255, 255, 0.4);
        --muted-highlight: rgba(255, 255, 255, 0.6);

        --paper: theme('colors.gray.950');
        --paper-highlighter: theme('colors.gray.950');
        --subtle: rgba(255, 255, 255, 0.06);
        --subtle-highlight: rgba(255, 255, 255, 0.08);

    }
}

html {
    background-color: var(--background);
    color: var(--foreground);
}

html * {
    border-color: var(--border);
}

/*h1, h2, h3, h4, h5, h6 {*/
/*    @apply text-gray-800 dark:text-gray-100*/
/*}*/

h1 {
    @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl
}

h2 {
    @apply scroll-m-20 text-3xl font-bold tracking-tight first:mt-0
}

h3 {
    @apply scroll-m-20 text-2xl font-semibold tracking-tight
}

h4 {
    @apply scroll-m-20 text-xl font-semibold tracking-tight
}

h5 {
    @apply scroll-m-20 text-lg font-semibold tracking-tight
}

h6 {
    @apply scroll-m-20 text-base font-semibold tracking-tight
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--background);
}

/* Handle */
::-webkit-scrollbar-thumb {
    @apply bg-gray-700 rounded-full
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-600
}

.code {
    @apply bg-gray-800 rounded-[--radius-md] px-2 py-1 text-sm font-mono border
}

.JASSUB {
    position: absolute !important;
    width: 100%;
    z-index: 10;
}

.force-hidden {
    display: none !important;
}

/*body[data-scroll-locked] {*/
/*    --removed-body-scroll-bar-size: 0 !important;*/
/*    margin-right: 0 !important;*/
/*    overflow-y: auto !important;*/
/*}*/

@media screen and (min-width: 1024px) {
    body[data-scroll-locked] .scroll-locked-offset {
        padding-right: 10px;
    }
}

body[data-scroll-locked] .media-page-header-scroll-locked {
    /*right: 10px;*/
}


/**/

pre {
    overflow-x: auto;
}

/*div[data-media-player][data-controls]:not([data-hocus]) .vds-controls {*/
/*    @apply lg:opacity-0*/
/*}*/

.discrete-controls[data-media-player][data-playing][data-controls]:not(:has(.vds-controls-group:hover)) .vds-controls {
    @apply lg:opacity-0
}

.discrete-controls[data-media-player][data-buffering][data-controls]:not(:has(.vds-controls-group:hover)) .vds-controls {
    @apply lg:opacity-0
}


.discrete-controls[data-media-player][data-playing][data-seeking][data-controls]:not(:has(.vds-controls-group:hover)) {
    @apply cursor-none
}

.halo:after {
    opacity: .1;
    background-image: radial-gradient(at 27% 37%, #fd3a67 0, transparent 50%), radial-gradient(at 97% 21%, #9772fe 0, transparent 70%), radial-gradient(at 52% 99%, #fd3a4e 0, transparent 50%), radial-gradient(at 10% 29%, #fc5ab0 0, transparent 50%), radial-gradient(at 97% 96%, #e4c795 0, transparent 50%), radial-gradient(at 33% 50%, #8ca8e8 0, transparent 50%), radial-gradient(at 79% 53%, #eea5ba 0, transparent 50%);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    filter: blur(100px) saturate(150%);
    z-index: -1;
    top: 50px;
    left: 0;
    transform: translateZ(0);
}

.halo-2:after {
    opacity: .1;
    background-image: radial-gradient(at 27% 37%, #fd3a67 0, transparent 30%), radial-gradient(at 97% 21%, #9772fe 0, transparent 70%), radial-gradient(at 52% 99%, #fd3a4e 0, transparent 20%), radial-gradient(at 10% 29%, #fc5ab0 0, transparent 20%), radial-gradient(at 97% 96%, #e4c795 0, transparent 20%), radial-gradient(at 33% 50%, #8ca8e8 0, transparent 50%), radial-gradient(at 79% 53%, #eea5ba 0, transparent 20%);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    filter: blur(100px) saturate(150%);
    z-index: -1;
    top: 50px;
    left: 0;
    transform: translateZ(0);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Mini player controls */
[data-native-player-container][data-mini-player="true"] .vds-controls-group > *:not(.vds-play-button) {
    display: none !important;
}

[data-native-player-container][data-mini-player="true"] .vds-controls-group > .vds-play-button {
    transform: translateY(-5px) !important;
}

[data-native-player-container][data-mini-player="true"] .vds-controls {
    opacity: 1 !important;
    visibility: visible !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
}

[data-native-player-container][data-mini-player="true"] .vds-controls-group {
    position: static !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    padding: 0 !important;
}

/*
Player
 */
media-controller {
    --base: 1rem;
    font-size: calc(0.95 * var(--base));
    font-family: Inter, Inter Fallback, Roboto, Arial, sans-serif;
    --media-font-family: Inter, Inter Fallback, Roboto, helvetica neue, segoe ui, arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    --media-secondary-color: transparent;
    --media-menu-background: rgba(21, 21, 21, 0.9);
    --media-control-hover-background: var(--media-secondary-color);
    --media-range-track-height: 3px;
    --media-range-thumb-height: 13px;
    --media-range-thumb-width: 13px;
    --media-range-thumb-border-radius: 13px;
    --media-preview-thumbnail-border: 2px solid #fff;
    --media-preview-thumbnail-border-radius: 2px;
    --media-tooltip-display: none;
    /*--media-font-family: inherit;*/
}

/* The biggest size controller is tied to going fullscreen
      instead of a player width */
media-controller[mediaisfullscreen] {
    font-size: 17px;
    --media-range-thumb-height: 20px;
    --media-range-thumb-width: 20px;
    --media-range-thumb-border-radius: 10px;
    --media-range-track-height: 4px;
}

.native-player-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    padding: 0 2px;
    height: 100%;
    opacity: 0.9;
    transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
    flex-shrink: 0;
}

[data-native-player-container][data-mini-player="true"] .native-player-button {
    width: 24px;
    margin: 0 2px;
}

[breakpointmd] .native-player-button {
    width: 48px;
}

[mediaisfullscreen] .native-player-button {
    width: 54px;
}

.native-player-button svg {
    /* height: 100%;
    width: 100%; */
    @apply !size-7;
    /*fill: var(--media-primary-color, #fff);*/
    fill-rule: evenodd;
}

[data-native-player-container][data-mini-player="true"] .native-player-button svg {
    @apply !size-5;
}

.svg-shadow {
    stroke: #000;
    stroke-opacity: 0.15;
    stroke-width: 2px;
    fill: none;
}

.native-player-gradient-bottom {
    padding-top: 37px;
    position: absolute;
    width: 100%;
    height: 170px;
    bottom: 0;
    pointer-events: none;
    background-position: bottom;
    background-repeat: repeat-x;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACqCAYAAABsziWkAAAAAXNSR0IArs4c6QAAAQVJREFUOE9lyNdHBQAAhfHb3nvvuu2997jNe29TJJEkkkgSSSSJJJJEEkkiifRH5jsP56Xz8PM5gcC/xfDEmjhKxEOCSaREEiSbFEqkQppJpzJMJiWyINvkUCIX8kw+JQqg0BRRxaaEEqVQZsopUQGVpooS1VBjglStqaNEPTSYRko0QbNpoUQrtJl2qsN0UqILuk0PJXqhz/RTYgAGzRA1bEYoMQpjZpwSExAyk5SYgmkzQ82aOUqEIWKilJiHBbNIiSVYhhVYhTVYhw3YhC3Yhh3YhT3YhwM4hCM4hhM4hTM4hwu4hCu4hhu4hTu4hwd4hCd4hhd4hTd4hw/4hC/4hh/4/QM2/id28uIEJAAAAABJRU5ErkJggg==');
}

media-settings-menu, media-audio-track-menu, media-captions-menu {
    position: absolute;
    border-radius: 8px;
    border: 1px solid var(--border);
    /* right: 12px; */
    bottom: 61px;
    z-index: 70;
    transform: translateX(-15px);
    padding-block: calc(0.15 * var(--base));
    will-change: width, height, opacity;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    user-select: none;
    --media-settings-menu-min-width: 220px;
    max-width: 300px;

    display: flex !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
    visibility 0s linear 0.2s !important;

    /* background-color: rgba(0, 0, 0, 0.9); */
}

media-settings-menu {
    /* flex-direction: column; */
    /* overflow-y: auto !important; */
    /* flex-wrap: wrap; */
}

media-audio-track-menu, media-captions-menu {
    max-height: 300px;
}

media-settings-menu:not([hidden]), media-audio-track-menu:not([hidden]), media-captions-menu:not([hidden]) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
    visibility 0s linear 0s !important;
}

[mediaisfullscreen] media-settings-menu, [mediaisfullscreen] media-audio-track-menu, [mediaisfullscreen] media-captions-menu {
    --media-settings-menu-min-width: 320px;
    right: 24px;
    bottom: 70px;
}

media-chrome-menu-item {
    border-radius: 6px !important;
}

media-settings-menu-item {
    height: 40px;
    font-size: 13px;
    font-weight: 500;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 6px;
}

[mediaisfullscreen] media-settings-menu-item {
    font-size: 20px;
    height: 50px;
}

media-settings-menu-item,
[role='menu']::part(menu-item) {
    flex-shrink: 0;
    --media-icon-color: var(--_primary-color);
    margin-inline: calc(0.45 * var(--base));
    height: calc(2 * var(--base));
    font-size: calc(0.95 * var(--base));
    /* font-weight: 400; */
    padding: 0;
    padding-left: calc(0.4 * var(--base));
    padding-right: calc(0.1 * var(--base));
    border-radius: 6px;
    text-shadow: none;

}

/* media-settings-menu-item[submenusize='0'] {
    display: none;
} */

/* Also hide if only `Auto` is added. */
/* .quality-settings[submenusize='1'] {
    display: none;
} */

.audio-settings[submenusize='1'] {
    display: none;
}

media-time-range {
    position: absolute;
    bottom: 36px;
    width: 100%;
    height: 5px;
    --media-range-track-background: rgba(255, 255, 255, 0.2);
    --media-range-track-pointer-background: rgba(255, 255, 255, 0.5);
    --media-time-range-buffered-color: rgba(255, 255, 255, 0.4);
    --media-range-bar-color: var(--media-accent-color, rgb(229, 9, 20));
    --media-range-thumb-border-radius: 13px;
    --media-range-thumb-background: var(--media-accent-color, #f00);
    --media-range-thumb-transition: transform 0.1s linear;
    --media-range-thumb-transform: scale(0) translate(0%, 0%);
    --media-chapters-cue-color: rgba(255, 255, 255, 0.8);
    --media-chapters-cue-hover-color: rgba(255, 255, 255, 1);
    --media-chapters-cue-width: 2px;
    --media-chapters-cue-height: 100%;
    --media-range-segments-gap: 3px;
}

.preview-rail > * {
    --_box-width: 100px !important;
}

media-time-range:hover {
    --media-range-track-height: 5px;
    --media-range-thumb-transform: scale(1) translate(0%, 0%);
    --media-chapters-cue-color: rgba(255, 255, 255, 1);
    --media-chapters-cue-width: 3px;
}

/* Chapter cues styling as backup for :part() support */
media-time-range .chapters-cue,
media-time-range [data-chapters-cue] {
    position: absolute;
    background-color: var(--media-chapters-cue-color);
    width: var(--media-chapters-cue-width);
    height: var(--media-chapters-cue-height);
    border-radius: 1px;
    transition: all 0.2s ease-in-out;
    opacity: 0.7;
    pointer-events: none;
}

media-time-range:hover .chapters-cue,
media-time-range:hover [data-chapters-cue] {
    background-color: var(--media-chapters-cue-hover-color);
    width: var(--media-chapters-cue-width);
    opacity: 1;
}

/* Native Player Loading Indicator */
.native-player-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    --media-loading-indicator-opacity: 0;
    --media-loading-indicator-transition-delay: 300ms;
    transition: opacity 0.2s ease-in-out var(--media-loading-indicator-transition-delay);
    pointer-events: none;
}

.native-player-loading-indicator[medialoading]:not([mediapaused]) {
    --media-loading-indicator-opacity: 1;
}

.native-player-loading-indicator svg {
    @apply size-12;
    fill: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

[data-native-player-container][data-mini-player="true"] .native-player-loading-indicator svg {
    @apply size-8;
}

[breakpointmd] media-time-range {
    bottom: 47px;
}

[mediaisfullscreen] media-time-range {
    bottom: 52.5px;
    height: 8px;
    --media-chapters-cue-width: 3px;
}

[mediaisfullscreen] media-time-range:hover {
    --media-range-track-height: 8px;
    --media-chapters-cue-width: 4px;
}

[mediaisfullscreen] media-time-range .chapters-cue,
[mediaisfullscreen] media-time-range [slot="chapters-cue"] {
    width: 3px;
}

[mediaisfullscreen] media-time-range:hover .chapters-cue,
[mediaisfullscreen] media-time-range:hover [slot="chapters-cue"] {
    width: 4px;
    transform: scaleY(2);
}

media-preview-chapter-display {
    padding-block: 0;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    font-weight: 500;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

[mediaisfullscreen] media-preview-chapter-display {
    font-size: 16px;
    padding: 6px 12px;
    max-width: 300px;
}

media-preview-thumbnail {
    margin-bottom: 5px;
}

media-preview-time-display {
    padding-top: 0;
}

media-control-bar {
    position: absolute;
    height: 36px;
    line-height: 36px;
    bottom: 0;
    left: 12px;
    right: 12px;
}

[breakpointmd] media-control-bar {
    height: 48px;
    line-height: 48px;
}

[mediaisfullscreen] media-control-bar {
    height: 54px;
    line-height: 54px;
}

media-play-button {
    --media-button-icon-width: 30px;
    padding: 6px 10px;
}

media-play-button :is(#play-p1, #play-p2, #pause-p1, #pause-p2) {
    transition: clip-path 0.15s ease-in-out;
}

/* Slow down the play icon part hiding slightly
      to achieve the morphing look a little better */
media-play-button:not([mediapaused]) #play-p2,
media-play-button:not([mediapaused]) #play-p2 {
    transition: clip-path 0.35s ease-in;
}

/* Show icon */
media-play-button :is(#pause-p1, #pause-p2),
media-play-button[mediapaused] :is(#play-p1, #play-p2) {
    clip-path: inset(0);
}

/* Hide icon wth clip path mask */
media-play-button #play-p1 {
    clip-path: inset(0 100% 0 0);
}

media-play-button #play-p2 {
    clip-path: inset(0 20% 0 100%);
}

media-play-button[mediapaused] #pause-p1 {
    clip-path: inset(50% 0 50% 0);
}

media-play-button[mediapaused] #pause-p2 {
    clip-path: inset(50% 0 50% 0);
}

/* media-mute-button :is(#icon-muted, #icon-volume) {
    transition: clip-path 0.3s ease-out;
}

media-mute-button #icon-muted {
    clip-path: inset(0 0 100% 0);
}

media-mute-button[mediavolumelevel='off'] #icon-muted {
    clip-path: inset(0);
}

media-mute-button #icon-volume {
    clip-path: inset(0);
}

media-mute-button[mediavolumelevel='off'] #icon-volume {
    clip-path: inset(100% 0 0 0);
}

media-mute-button #volume-high,
media-mute-button[mediavolumelevel='off'] #volume-high {
    opacity: 1;
    transition: opacity 0.3s;
}

media-mute-button[mediavolumelevel='low'] #volume-high,
media-mute-button[mediavolumelevel='medium'] #volume-high {
    opacity: 0.2;
} */

media-volume-range {
    height: 36px;
    --media-range-track-background: rgba(255, 255, 255, 0.2);
}

media-mute-button + media-volume-range {
    width: 0;
    overflow: hidden;
    transition: width 0.2s ease-in-out;
}

/* Expand volume control in all relevant states */
media-mute-button:hover + media-volume-range,
media-mute-button:focus + media-volume-range,
media-mute-button:focus-within + media-volume-range,
media-volume-range:hover,
media-volume-range:focus,
media-volume-range:focus-within {
    width: 70px;
}

media-time-display {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
}

[mediaisfullscreen] media-time-display {
    font-size: 20px;
}

.control-spacer {
    flex-grow: 1;
}

media-captions-button {
    position: relative;
}

/* Disble the captions button when no subtitles are available */
media-captions-button:not([mediasubtitleslist]) svg {
    opacity: 0.3;
}

media-captions-button[mediasubtitleslist]:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 3px;
    border-radius: 3px;
    background-color: var(--media-accent-color, #f00);
    bottom: 19%;
    left: 50%;
    transition: all 0.1s cubic-bezier(0, 0, 0.2, 1), width 0.1s cubic-bezier(0, 0, 0.2, 1);
}

media-captions-button[mediasubtitleslist][aria-checked='true']:after {
    left: 25%;
    width: 50%;
    transition: left 0.25s cubic-bezier(0, 0, 0.2, 1), width 0.25s cubic-bezier(0, 0, 0.2, 1);
}

media-captions-button[mediasubtitleslist][aria-checked='true']:after {
    left: 25%;
    width: 50%;
    transition: left 0.25s cubic-bezier(0, 0, 0.2, 1), width 0.25s cubic-bezier(0, 0, 0.2, 1);
}

media-settings-menu-button svg {
    transition: all 0.1s cubic-bezier(0.4, 0, 1, 1);
    transform: rotateZ(0deg);
}

media-settings-menu-button[aria-expanded='true'] svg {
    transform: rotateZ(30deg) translateY(-2px) scale(1.1);
}

media-audio-track-menu-button svg, media-captions-menu-button svg {
    transition: all 0.1s cubic-bezier(0.4, 0, 1, 1);
    transform: translateY(0px);
}

media-audio-track-menu-button[aria-expanded='true'] svg, media-captions-menu-button[aria-expanded='true'] svg {
    transform: translateY(-2px) scale(1.1);
}

media-settings-menu-button:hover svg, media-audio-track-menu-button:hover svg, media-captions-menu-button:hover svg, media-pip-button:hover svg {
    opacity: 0.8;
}

media-pip-button svg {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
}

media-pip-button:not([mediaispip]) #pip-icon-2 {
    opacity: 0;
}

media-pip-button[mediaispip] #pip-icon-2 {
    opacity: 1;
}

media-pip-button[mediaispip] #pip-icon {
    opacity: 0;
}

media-pip-button:not([mediaispip]) #pip-icon {
    opacity: 1;
}

media-fullscreen-button svg {
    transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
    transform: scale(1);
}

media-fullscreen-button:hover svg {
    transform: scale(1.2);
}

[mediaisfullscreen] media-fullscreen-button:hover svg {
    transform: scale(0.8);
}

[mediaisfullscreen] .native-player-hide-on-fullscreen {
    display: none;
}

media-settings-menu div[slot="title"] {
    padding: 6px;
    padding-bottom: 4px;
    width: 100% !important;
    display: flex;
    /* font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--foreground); */
}

[mediaisfullscreen] media-settings-menu {
    --media-settings-menu-min-width: 320px;
    right: 24px;
    bottom: 70px;
}

/* Force JASSUB subtitles to always be visible regardless of media-chrome control state */
.discrete-controls .JASSUB,
media-controller .JASSUB,
[data-media-player] .JASSUB {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    /* z-index: 1000 !important; */
}


media-preview-thumbnail {
    /* width: 200px !important;
    height: 100px !important;
    object-fit: cover !important; */
    border-radius: 4px;
}

media-preview-chapter-display {
    display: block !important;
    margin-bottom: 5px;
    padding: 0px !important;
    background: transparent !important;
    border-radius: 4px;
    border: none !important;
    text-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(0px) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Ensure JASSUB remains visible even when controls are hidden */
.discrete-controls[data-media-player][data-playing][data-controls] .JASSUB,
.discrete-controls[data-media-player][data-buffering][data-controls] .JASSUB {
    opacity: 1 !important;
    visibility: visible !important;
}

.native-player-video {
    color-interpolation: sRGB;
    color-interpolation-filters: sRGB;
    transform: translateZ(0);
    will-change: transform;
    color-rendering: optimizeQuality;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: crisp-edges;
}
