:root {
   --javo-mini-player-height: 72px;
   --javo-player-max-width: 720px;
}


/* Player identity links remain visually identical to their static content. */
#javo_master_player .javo-player-channel-link,
#javo_master_player .javo-player-channel-link:visited,
#javo_master_player .javo-player-channel-link:hover,
#javo_master_player .javo-player-channel-link:active {
   color: inherit;
   text-decoration: none;
}

#javo_master_player .javo-player-channel-link[href] {
   cursor: pointer;
}

#javo_master_player .javo-player-text-link {
   display: block;
   width: 100%;
   min-width: 0;
}

#javo_master_player .javo-player-cover-link {
   position: relative;
   z-index: 1;
   display: block;
   width: 100%;
   height: 100%;
   border-radius: inherit;
}

#javo_master_player .javo-player-channel-link:focus-visible {
   outline: 2px solid #1e3a8a;
   outline-offset: 3px;
}

#javo_master_player .javo-player-cover-link:focus-visible {
   outline-offset: -3px;
}


/* =========================================================
   JAVO GLOBAL PLAYER — DESKTOP FOUNDATION
   Structural dependencies formerly defined globally
========================================================= */

@media (min-width: 768px) {

/* ---------------------------------------------------------
  ROOT
--------------------------------------------------------- */
#javo_master_player {
   position: fixed;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
   display: block;
   visibility: visible;
   opacity: 1;
   pointer-events: none;
   direction: rtl;
   box-sizing: border-box;
}
#javo_master_player *,
#javo_master_player *::before,
#javo_master_player *::after {
   box-sizing: border-box;
}
/* جلوگیری از قرار گرفتن محتوای سایت زیر مینی پلیر */
body {
   padding-bottom:
       calc(
           var(--javo-mini-player-height) +
           env(safe-area-inset-bottom)
       );
}
/* ---------------------------------------------------------
  MINI PLAYER
--------------------------------------------------------- */


.javo-player-mini {
   position: relative;
   z-index: 3;
   display: grid;
   grid-template-columns: 52px minmax(0, 1fr) 44px 38px;
   align-items: center;
   gap: 10px;
   width: 100%;
   min-height: var(--javo-mini-player-height);
   padding:
       8px
       12px
       calc(8px + env(safe-area-inset-bottom));
       background: rgba(248, 248, 248, 0.72);
   border-top: 1px solid rgba(15, 23, 42, 0.1);
   box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08);
   pointer-events: auto;
}
/* کاور مینی پلیر */
.javo-player-mini-artwork {
   width: 52px;
   height: 52px;
   overflow: hidden;
   flex-shrink: 0;
   border-radius: 10px;
   background: #eef2f7;
}
.javo-player-mini-artwork img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
/* اطلاعات مینی پلیر */
.javo-player-mini-info {
   min-width: 0;
   overflow: hidden;
}
.javo-player-mini-channel,
.javo-player-mini-title {
   margin: 0;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
.javo-player-mini-channel {
   margin-bottom: 3px;
   color: #64748b;
   font-size: 11px;
   font-weight: 500;
}
.javo-player-mini-title {
   color: #0f172a;
   font-size: 13px;
   font-weight: 700;
   line-height: 1.5;
}
/* دکمه‌های مینی پلیر */
.javo-player-mini-play,
.javo-player-expand-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   margin: 0;
   color: #0f172a;
   background: transparent;
   border: 0;
   border-radius: 50%;
   cursor: pointer;
   appearance: none;
}
.javo-player-mini-play {
   width: 44px;
   height: 44px;
   background: #0f172a;
   color: #ffffff;
}
.javo-player-expand-button {
   width: 38px;
   height: 38px;
}
.javo-player-mini-play svg {
   width: 20px;
   height: 20px;
   fill: currentColor;
  
  
}
.javo-player-expand-button svg {
   width: 20px;
   height: 20px;
}
/* ---------------------------------------------------------
  BACKDROP
--------------------------------------------------------- */
.javo-player-backdrop {
   position: fixed;
   inset: 0;
   z-index: 1;
   background: rgba(15, 23, 42, 0.48);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition:
       opacity 180ms ease,
       visibility 180ms ease;
}
/* ---------------------------------------------------------
  EXPANDED PLAYER
--------------------------------------------------------- */
.javo-player-expanded {
   position: fixed;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2;
   width: 100%;
   max-height: calc(100dvh - 20px);
   overflow: hidden;
   background: #ffffff;
   border-radius: 22px 22px 0 0;
   box-shadow: 0 -18px 60px rgba(15, 23, 42, 0.2);
   transform: translateY(105%);
   visibility: hidden;
   pointer-events: none;
   transition:
       transform 240ms ease,
       visibility 240ms ease;
}


/* حالت باز پلیر — بعداً JS این کلاس را روی Root می‌گذارد */


#javo_master_player.is-expanded .javo-player-expanded {
   transform: translateY(0);
   visibility: visible;
   pointer-events: auto;
}


#javo_master_player.is-expanded .javo-player-backdrop {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}


#javo_master_player.is-expanded .javo-player-mini {
   visibility: hidden;
   pointer-events: none;
}


/* ---------------------------------------------------------
  EXPANDED HEADER
--------------------------------------------------------- */


.javo-player-expanded-header {
   display: flex;
   align-items: center;
   justify-content: space-between;


   min-height: 54px;
   padding: 10px 16px;


   border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}


.javo-player-expanded-eyebrow {
   color: #64748b;
   font-size: 12px;
   font-weight: 600;
}


.javo-player-close-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;


   width: 40px;
   height: 40px;
   padding: 0;


   color: #0f172a;
   background: transparent;
   border: 0;
   border-radius: 50%;


   cursor: pointer;
}


.javo-player-close-btn svg {
   width: 22px;
   height: 22px;
}


/* ---------------------------------------------------------
  EXPANDED SCROLL AREA
--------------------------------------------------------- */


.javo-player-expanded-scroll {
   display: flex;
   flex-direction: column;
   gap: 24px;


   max-height: calc(100dvh - 74px);
   padding:
       18px
       18px
       calc(24px + env(safe-area-inset-bottom));


   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
}


.javo-player-expanded-primary,
.javo-player-expanded-secondary {
   display: flex;
   flex-direction: column;
   gap: 20px;
}


/* ---------------------------------------------------------
  ARTWORK
--------------------------------------------------------- */


.javo-player-expanded-artwork {
   position: relative;
   width: min(52vw, 210px);
   aspect-ratio: 1;
   margin-inline: auto;
   overflow: hidden;
   border-radius: 20px;
   background: #eef2f7;
}
.javo-player-expanded-artwork img {
   position: relative;
   z-index: 1;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
	object-position: center;
}
.javo-cover-ring-glow {
   position: absolute;
   inset: 0;
   z-index: 0;
}
/* ---------------------------------------------------------
  EPISODE INFORMATION
--------------------------------------------------------- */


.javo-player-expanded-info {
   min-width: 0;
   text-align: center;
}


.javo-player-channel-name,
.javo-player-episode-title {
   margin: 0;
}


.javo-player-channel-name {
   margin-bottom: 6px;


   color: #64748b;
   font-size: 13px;
   font-weight: 600;
}


.javo-player-episode-title {
   color: #0f172a;
   font-size: 18px;
   font-weight: 800;
   line-height: 1.65;
}


/* ---------------------------------------------------------
  TIMELINE
--------------------------------------------------------- */
.javo-timeline-container {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.javo-player-timeline-track,
.javo-waveform-wrapper {
   position: relative;
   width: 100%;
}
.javo-waveform-wrapper {
   height: 24px;
}
.javo-waveform-bg,
.javo-waveform-progress {
   position: absolute;
   top: 50%;
   right: 0;
   height: 4px;
   border-radius: 999px;
   transform: translateY(-50%);
}
.javo-waveform-bg {
   width: 100%;
   background: #7ebaff;
}
.javo-waveform-progress {
   width: 0%;
   background: #0f172a;
}
#javo_seek {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 24px;
   margin: 0;
   opacity: 0;
   cursor: pointer;
}
.javo-player-time-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
}
.javo-player-time-item {
   display: flex;
   flex-direction: column;
   gap: 2px;
}
.javo-player-time-label {
   color: #94a3b8;
   font-size: 9px;
}
.javo-time-digit {
   color: #475569;
   font-size: 11px;
   font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------
  PLAYBACK CONTROLS
--------------------------------------------------------- */
.javo-player-controls-zone {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
   gap: 28px;
}
.javo-control-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   color: #0f172a;
   background: transparent;
   border: 0;
   border-radius: 50%;
   cursor: pointer;
}
.javo-episode-nav-btn {
   flex: 0 0 auto;
   width: 44px;
   height: 44px;
   color:#0f172a;
}
.javo-episode-nav-btn svg {
   display: block;
   width: 21px;
   height: 21px;
   fill: currentColor;
}
.javo-episode-nav-btn:disabled {
   opacity: 0.38;
   cursor: not-allowed;
}
.skip-btn {
   width: 46px;
   height: 46px;
}
.skip-btn svg {
   width: 32px;
   height: 32px;
}
.play-main-btn {
   position: relative;
   width: 68px;
   height: 68px;
   color: #ffffff;
   background: #0f172a;
}
.play-main-btn svg {
   width: 28px;
   height: 28px;
   fill: currentColor;
}
.play-btn-glow {
   position: absolute;
   inset: -5px;
   pointer-events: none;
}
/* ---------------------------------------------------------
  SLEEP TIMER
--------------------------------------------------------- */


.javo-player-sleep-timer,
.javo-player-up-next {
   padding-top: 18px;
   border-top: 1px solid rgba(15, 23, 42, 0.08);
}


.javo-player-section-header h3,
.javo-player-up-next-header h3 {
   margin: 0;


   color: #0f172a;
   font-size: 15px;
   font-weight: 800;
}


.javo-sleep-timer-options {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;


   margin-top: 12px;
}


.javo-sleep-option {
   min-height: 42px;
   padding: 8px 10px;


   color: #334155;
   background: #f1f5f9;
   border: 1px solid transparent;
   border-radius: 10px;


   font: inherit;
   font-size: 12px;


   cursor: pointer;
}


.javo-sleep-option[aria-pressed="true"] {
   color: #0f172a;
   background: #b3e7ff;
   border-color: rgba(15, 23, 42, 0.12);
}


.javo-sleep-timer-status {
   margin: 10px 0 0;


   color: #64748b;
   font-size: 11px;
}


/* ---------------------------------------------------------
  UP NEXT
--------------------------------------------------------- */


.javo-player-up-next-header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 12px;
}


.javo-player-section-eyebrow {
   display: block;
   margin-bottom: 4px;


   color: #94a3b8;
   font-size: 10px;
   display: none;
}


.javo-player-up-next-channel {
   color: #64748b;
   font-size: 11px;
}


.javo-player-up-next-list {
   display: flex;
   flex-direction: column;
   gap: 8px;


   margin-top: 12px;
}


.javo-player-up-next-empty,
.javo-player-up-next-error,
.javo-player-up-next-loading {
   margin: 0;
   padding: 14px;


   color: #64748b;
   background: #f8fafc;
   border-radius: 10px;


   font-size: 12px;
   text-align: center;
}


/* آیتم‌های Playlist که بعداً توسط JS ساخته می‌شوند */


.javo-up-next-item {
   margin: 0;
}


.javo-up-next-item-button {
   display: grid;
   grid-template-columns: 48px minmax(0, 1fr) 32px;
   align-items: center;
   gap: 10px;


   width: 100%;
   padding: 8px;


   color: inherit;
   text-align: right;


   background: #f8fafc;
   border: 0;
   border-radius: 12px;


   cursor: pointer;
}


.javo-up-next-item-artwork {
   width: 48px;
   height: 48px;
   overflow: hidden;


   border-radius: 8px;
   background: #eef2f7;
}


.javo-up-next-item-cover {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}


.javo-up-next-item-content {
   min-width: 0;
}


.javo-up-next-item-title {
   display: block;
   overflow: hidden;


   color: #0f172a;
   font-size: 12px;
   font-weight: 700;


   white-space: nowrap;
   text-overflow: ellipsis;
}


.javo-up-next-item-meta {
   display: flex;
   gap: 8px;


   margin-top: 4px;


   color: #64748b;
   font-size: 10px;
}


.javo-up-next-item-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
}


.javo-up-next-item-action svg {
   width: 18px;
   height: 18px;
   fill: currentColor;
}


/* ---------------------------------------------------------
  FOCUS
--------------------------------------------------------- */


#javo_master_player button:focus-visible,
#javo_master_player input:focus-visible {
   outline: 2px solid #0f172a;
   outline-offset: 3px;
}


}


/* ---------------------------------------------------------
  DESKTOP
--------------------------------------------------------- */


@media (min-width: 768px) {


   .javo-player-mini {
       grid-template-columns: 54px minmax(0, 1fr) 44px 38px;
       gap: 12px;
       width: min(calc(100% - 32px), 860px);
       margin-inline: auto;
       margin-bottom: 8px;
       padding: 8px 14px;


       background: rgba(248, 248, 248, 0.849);
      
       border: 1px solid rgba(255, 255, 255, 0.8);
       border-radius: 35px;
       box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
   }


   .javo-player-mini-artwork {
       width: 54px;
       height: 54px;
       border: 1px solid rgba(255, 255, 255, 0.72);
       border-radius: 17px;
       box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
   }


   .javo-player-mini-artwork img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       object-position: center;
   }


   .javo-player-mini-play {
       color: #ffffff;
       background: #1e3a8a;
       transition: background-color 180ms ease;
   }


   .javo-player-mini-play > span {
       display: grid;
       width: 100%;
       height: 100%;
       line-height: 0;
       place-items: center;
   }


   .javo-player-mini-play svg {
       display: block;
       width: 20px;
       height: 20px;
       margin: 0;
       fill: currentColor;
       transform: none;
   }


   .javo-player-expand-button {
       transition: background-color 180ms ease;
   }


   .javo-player-expand-button svg {
       display: block;
   }


   .javo-player-expanded {
       right: 50%;
       bottom: 12px;
       left: auto;


       display: flex;
       flex-direction: column;
       width: min(calc(100% - 40px), 860px);
       height: 80vh;
       height: 80dvh;
       max-height: 80dvh;


       backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px); 
    background: rgba(248, 248, 248, 0.29); 
       
       border: 1px solid rgba(255, 255, 255, 0.8);
       border-radius: 35px;
       box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);


       opacity: 0;
       transform: translate(50%, calc(100% + 24px)) scale(0.985);
       transition:
           transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
           opacity 160ms ease,
           visibility 240ms ease;
   }


   #javo_master_player.is-expanded .javo-player-expanded {
       opacity: 1;
       transform: translate(50%, 0) scale(1);
   }


   #javo_master_player.is-expanded {
       z-index: 100001;
   }


   .javo-player-backdrop {
       background: transparent;
   }


   .javo-player-expanded-header {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
       width: 100%;
       min-height: 60px;
       padding: 10px 20px;
       border-bottom-color: rgba(255, 255, 255, 0.64);
   }


   .javo-player-expanded-heading {
       display: flex;
       flex: 1 1 auto;
       align-items: center;
       min-width: 0;
   }


   .javo-player-expanded-eyebrow {
       display: block;
       color: #334155;
       font-size: 13px;
       font-weight: 700;
       line-height: 1.5;
       white-space: nowrap;
   }


   .javo-player-close-btn {
       flex: 0 0 42px;
       width: 42px;
       height: 42px;
       color: #1e3a8a;
       background: rgba(255, 255, 255, 0.48);
       border: 1px solid rgba(255, 255, 255, 0.72);
       transition:
           color 180ms ease,
           background-color 180ms ease,
           border-color 180ms ease;
   }


   .javo-player-close-btn svg {
       display: block;
       width: 20px;
       height: 20px;
   }


   .javo-player-expanded-scroll {
       flex: 1 1 auto;
       gap: 0;
       min-height: 0;
       max-height: none;
       padding: 20px 32px 28px;
   }


   .javo-player-expanded-primary {
       max-width: 620px;
       width: 100%;
       margin-inline: auto;
       gap: 18px;
   }


   .javo-player-expanded-artwork {
       width: min(52vw, 210px);
       overflow: hidden;
       background: #eef2f7;
       border: 0;
       border-radius: 22px;
       box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
   }


   .javo-player-expanded-artwork img {
       position: absolute;
       inset: 0;
       z-index: 1;
       display: block;
       width: 100%;
       height: 100%;
       max-width: none;
       margin: 0;
       border-radius: inherit;
       object-fit: contain;
       object-position: center;
   }


   .javo-player-expanded-artwork .javo-cover-ring-glow {
       display: none;
   }


   .javo-player-expanded-info {
       width: 100%;
       max-width: 100%;
       margin-inline: auto;
   }


   .javo-player-channel-name {
       margin-bottom: 4px;
       color: #64748b;
       font-size: 12px;
   }


   .javo-player-episode-title {
       display: -webkit-box;
       width: 100%;
       overflow: hidden;
       color: #0f172a;
       font-size: 19px;
       line-height: 1.6;
       white-space: normal;
       overflow-wrap: break-word;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
   }


   .javo-player-center-zone {
       width: 100%;
   }


   .javo-timeline-container {
       gap: 0;
   }


   .javo-player-timeline-inline {
       display: grid;
       grid-template-columns: 48px minmax(0, 1fr) 48px;
       align-items: center;
       gap: 14px;
       width: 100%;
       direction: ltr;
   }


   .javo-waveform-wrapper,
   #javo_seek {
       height: 30px;
   }


   .javo-waveform-bg,
   .javo-waveform-progress {
       top: 50%;
       right: auto;
       left: 0;
       height: 4px;
       border-radius: 999px;
       transform: translateY(-50%);
       -webkit-mask: none;
       mask: none;
       pointer-events: none;
   }


   .javo-waveform-bg {
       background: #b3e7ff;
   }


   .javo-waveform-progress {
       background: #1e3a8a;
   }


   #javo_seek {
       z-index: 2;
       opacity: 1;
       background: transparent;
       border-radius: 999px;
       -webkit-appearance: none;
       appearance: none;
   }


   #javo_seek::-webkit-slider-runnable-track {
       height: 30px;
       background: transparent;
       border: 0;
   }


   #javo_seek::-webkit-slider-thumb {
       width: 12px;
       height: 12px;
       margin-top: 9px;
       background: #1e3a8a;
       border: 2px solid rgba(255, 255, 255, 0.92);
       border-radius: 50%;
       box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
       -webkit-appearance: none;
       appearance: none;
   }


   .javo-player-timeline-track {
       border-radius: 999px;
   }


   .javo-time-digit {
       min-width: 0;
       color: #334155;
       font-size: 12px;
       font-weight: 600;
       line-height: 1;
       text-align: center;
       direction: ltr;
       unicode-bidi: isolate;
   }


   .javo-player-controls-zone {
       gap: 24px;
       min-height: 70px;
       padding-block: 2px;
   }


   .javo-control-btn {
       color: #1e3a8a;
       transition:
           color 180ms ease,
           background-color 180ms ease,
           border-color 180ms ease;
   }


   .javo-episode-nav-btn {
       color: #0f172a;
   }


   .skip-btn {
       width: 48px;
       height: 48px;
       background: transparent;
       border: 0;
   }


   .javo-skip-icon {
       display: grid;
       width: 32px;
       height: 32px;
       line-height: 0;
       place-items: center;
   }


   .skip-btn svg {
       display: block;
   }


   .play-main-btn {
       width: 66px;
       height: 66px;
       color: #b3e7ff;
       background: #1e3a8a;
   }


   #javo_play_icon {
       position: relative;
       z-index: 1;
       display: grid;
       width: 100%;
       height: 100%;
       line-height: 0;
       place-items: center;
   }


   .play-main-btn svg {
       display: block;
       width: 27px;
       height: 27px;
       margin: 0;
       fill: currentColor;
       transform: none;
   }


   .play-main-btn[aria-pressed="false"] svg {
       transform: translateX(-1px);
   }


   .play-btn-glow {
       display: none;
   }


   .javo-player-expanded-secondary {
       width: 100%;
       gap: 16px;
       margin-top: 4px;
   }


   .javo-player-sleep-timer,
   .javo-player-up-next {
       padding: 18px;
       background: rgba(255, 255, 255, 0.38);
       border: 1px solid rgba(255, 255, 255, 0.64);
       border-radius: 20px;
   }


   .javo-player-section-header h3,
   .javo-player-up-next-header h3 {
       font-size: 14px;
   }


   .javo-sleep-timer-options {
       grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: 8px;
   }


   .javo-sleep-option {
       min-height: 44px;
       color: #334155;
       background: rgba(255, 255, 255, 0.56);
       border-color: rgba(255, 255, 255, 0.72);
       border-radius: 12px;
       transition:
           color 180ms ease,
           background-color 180ms ease,
           border-color 180ms ease;
   }


   .javo-sleep-option[aria-pressed="true"] {
       color: #ffffff;
       background: #1e3a8a;
       border-color: #1e3a8a;
   }


   .javo-up-next-item-button,
   .javo-player-up-next-empty,
   .javo-player-up-next-error,
   .javo-player-up-next-loading {
       background: rgba(255, 255, 255, 0.48);
       border: 1px solid rgba(255, 255, 255, 0.64);
   }


   .javo-up-next-item-button {
       min-height: 66px;
       border-radius: 14px;
       transition:
           background-color 180ms ease,
           border-color 180ms ease;
   }


   .javo-up-next-item-action {
       color: #b3e7ff;
   }
}


@media (min-width: 768px) and (hover: hover) and (pointer: fine) {


   .javo-player-mini-play:hover {
       background: #294ba6;
   }


   .javo-player-expand-button:hover {
       background: rgba(255, 255, 255, 0.56);
   }


   .javo-player-close-btn:hover {
       color: #ffffff;
       background: #1e3a8a;
       border-color: #1e3a8a;
   }


   .skip-btn:hover {
       color: #294ba6;
       background: transparent;
       border-color: transparent;
   }


   .javo-episode-nav-btn:not(:disabled):hover {
       color: #0f172a;
       background: rgba(179, 231, 255, 0.2);
   }


   .play-main-btn:hover {
       background: #1e3a8a;
   }


   .javo-sleep-option:not([aria-pressed="true"]):hover,
   .javo-up-next-item-button:hover {
       background: rgba(255, 255, 255, 0.76);
       border-color: rgba(255, 255, 255, 0.9);
   }
}


@media (min-width: 768px) and (prefers-reduced-motion: reduce) {


   .javo-player-expanded {
       transition-duration: 1ms;
   }
}
/* =========================================================
   JAVO GLOBAL PLAYER — MOBILE DESIGN
   Mobile only: 0px to 767px
   Desktop CSS remains completely untouched
========================================================= */

@media (max-width: 767px) {

   /* ---------------------------------------------------------
      MOBILE VARIABLES
   --------------------------------------------------------- */

   :root {
      --javo-mini-player-height: 70px;

      --javo-mobile-primary: #1e3a8a;
      --javo-mobile-primary-light: #294ba6;
      --javo-mobile-accent: #b3e7ff;

      --javo-mobile-text: #0f172a;
      --javo-mobile-muted: #64748b;
      --javo-mobile-subtle: #94a3b8;

      --javo-mobile-surface: #ffffff;
      --javo-mobile-surface-soft: #f8fafc;
      --javo-mobile-border: rgba(15, 23, 42, 0.08);
   }


   /* ---------------------------------------------------------
      ROOT
   --------------------------------------------------------- */

   #javo_master_player {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;

      display: block;
      width: 100%;

      visibility: visible;
      opacity: 1;

      direction: rtl;
      pointer-events: none;

      box-sizing: border-box;

      -webkit-tap-highlight-color: transparent;
   }


   #javo_master_player *,
   #javo_master_player *::before,
   #javo_master_player *::after {
      box-sizing: border-box;
   }


   #javo_master_player.is-expanded {
      z-index: 100001;
   }


   body {
      padding-bottom:
         calc(
            var(--javo-mini-player-height) +
            env(safe-area-inset-bottom)
         );
   }


   /* ---------------------------------------------------------
      MINI PLAYER
   --------------------------------------------------------- */

   .javo-player-mini {
      position: relative;
      z-index: 3;

      display: grid;
      grid-template-columns:
         50px
         minmax(0, 1fr)
         44px
         40px;
      align-items: center;
      gap: 8px;

      width: 100%;
      min-width: 0;
      min-height:
         calc(
            var(--javo-mini-player-height) +
            env(safe-area-inset-bottom)
         );

      padding-top: 8px;
      padding-right: max(10px, env(safe-area-inset-right));
      padding-bottom:
         calc(
            8px +
            env(safe-area-inset-bottom)
         );
      padding-left: max(10px, env(safe-area-inset-left));

      background: rgba(255, 255, 255, 0.97);

      

      border-top: 1px solid var(--javo-mobile-border);
      border-radius: 18px 18px 0 0;

      box-shadow:
         0 -10px 30px rgba(15, 23, 42, 0.09),
         0 -2px 8px rgba(15, 23, 42, 0.04);

      pointer-events: auto;

      transition:
         opacity 180ms ease,
         visibility 180ms ease,
         transform 220ms ease;
   }


   /* ---------------------------------------------------------
      MINI PLAYER ARTWORK
   --------------------------------------------------------- */

   .javo-player-mini-artwork {
      position: relative;

      width: 50px;
      height: 50px;
      min-width: 50px;

      overflow: hidden;

      background: #eef2f7;

      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: 13px;

      box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1);
   }


   .javo-player-mini-artwork img {
      display: block;

      width: 100%;
      height: 100%;
      max-width: none;

      margin: 0;

      object-fit: contain;
      object-position: center;
   }


   /* ---------------------------------------------------------
      MINI PLAYER INFORMATION
   --------------------------------------------------------- */

   .javo-player-mini-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1px;

      width: 100%;
      min-width: 0;

      overflow: hidden;

      text-align: right;
   }


   .javo-player-mini-channel,
   .javo-player-mini-title {
      display: block;

      width: 100%;
      min-width: 0;
      margin: 0;

      overflow: hidden;

      white-space: nowrap;
      text-overflow: ellipsis;
   }


   .javo-player-mini-channel {
      color: var(--javo-mobile-muted);

      font-size: 10px;
      font-weight: 600;
      line-height: 1.45;
   }


   .javo-player-mini-title {
      color: var(--javo-mobile-text);

      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.55;
   }


   /* ---------------------------------------------------------
      MINI PLAYER BUTTONS
   --------------------------------------------------------- */

   .javo-player-mini-play,
   .javo-player-expand-button {
      display: inline-grid;
      align-items: center;
      justify-content: center;

      flex-shrink: 0;

      padding: 0;
      margin: 0;

      border: 0;
      border-radius: 50%;

      cursor: pointer;

      appearance: none;
      -webkit-appearance: none;

      touch-action: manipulation;

      transition:
         color 150ms ease,
         background-color 150ms ease,
         transform 100ms ease;
   }


   .javo-player-mini-play {
      width: 44px;
      height: 44px;

      color: #ffffff;
      background: var(--javo-mobile-primary);

      box-shadow: 0 4px 12px rgba(30, 58, 138, 0.22);
   }


   .javo-player-mini-play > span,
   #javo_mini_play_icon {
      display: grid;
      align-items: center;
      justify-content: center;

      width: 100%;
      height: 100%;

      line-height: 0;
   }


   .javo-player-mini-play svg {
      display: block;

      width: 20px;
      height: 20px;
      margin: 0;

      fill: currentColor;
   }


   .javo-player-mini-play[aria-pressed="false"] svg {
      transform: translateX(-1px);
   }


   .javo-player-expand-button {
      width: 40px;
      height: 40px;

      color: var(--javo-mobile-primary);
      background: rgba(179, 231, 255, 0.34);
   }


   .javo-player-expand-button svg {
      display: block;

      width: 20px;
      height: 20px;
      margin: 0;
   }


   .javo-player-mini-play:active,
   .javo-player-expand-button:active {
      transform: scale(0.94);
   }


   /* ---------------------------------------------------------
      MINI PLAYING INDICATOR
   --------------------------------------------------------- */

   .javo-mini-playing-indicator {
      position: absolute;
      right: 4px;
      bottom: 4px;
      z-index: 2;

      display: inline-flex;
      align-items: flex-end;
      justify-content: center;
      gap: 2px;

      width: 24px;
      height: 20px;
      padding: 4px;

      color: #ffffff;
      background: rgba(15, 23, 42, 0.74);

      border-radius: 7px;

      opacity: 0;
      visibility: hidden;

      pointer-events: none;
      display: none;
      transition:
         opacity 150ms ease,
         visibility 150ms ease;
   }


   #javo_master_player.is-playing
   .javo-mini-playing-indicator {
      opacity: 1;
      visibility: visible;
   }


   .javo-mini-playing-bar {
      width: 2px;
      height: 10px;

      background: currentColor;
      border-radius: 999px;

      transform-origin: bottom;

      animation:
         javo-mobile-playing-bar
         760ms
         ease-in-out
         infinite;
   }


   .javo-mini-playing-bar:nth-child(2) {
      animation-delay: -180ms;
      animation-duration: 880ms;
   }


   .javo-mini-playing-bar:nth-child(3) {
      animation-delay: -320ms;
      animation-duration: 680ms;
   }


   .javo-mini-playing-bar:nth-child(4) {
      animation-delay: -90ms;
      animation-duration: 940ms;
   }


   @keyframes javo-mobile-playing-bar {

      0%,
      100% {
         transform: scaleY(0.35);
      }

      45% {
         transform: scaleY(1);
      }

      72% {
         transform: scaleY(0.58);
      }
   }


   /* ---------------------------------------------------------
      BACKDROP
   --------------------------------------------------------- */

   .javo-player-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1;

      background: rgba(15, 23, 42, 0.48);

      opacity: 0;
      visibility: hidden;

      pointer-events: none;

      transition:
         opacity 200ms ease,
         visibility 200ms ease;
   }


   #javo_master_player.is-expanded
   .javo-player-backdrop {
      opacity: 1;
      visibility: visible;

      pointer-events: auto;
   }


   /* ---------------------------------------------------------
      EXPANDED PLAYER
   --------------------------------------------------------- */

   .javo-player-expanded {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;

      display: flex;
      flex-direction: column;

      width: 100%;
      height: calc(100vh - 8px);
      height: calc(100dvh - 8px);
      max-height: calc(100vh - 8px);
      max-height: calc(100dvh - 8px);

      overflow: hidden;

      background: var(--javo-mobile-surface);

      border: 1px solid rgba(15, 23, 42, 0.06);
      border-bottom: 0;
      border-radius: 24px 24px 0 0;

      box-shadow:
         0 -24px 70px rgba(15, 23, 42, 0.2),
         0 -4px 14px rgba(15, 23, 42, 0.08);

      opacity: 0;
      visibility: hidden;

      transform: translateY(calc(100% + 16px));

      pointer-events: none;

      transition:
         transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
         opacity 180ms ease,
         visibility 260ms ease;
   }


   #javo_master_player.is-expanded
   .javo-player-expanded {
      opacity: 1;
      visibility: visible;

      transform: translateY(0);

      pointer-events: auto;
   }


   #javo_master_player.is-expanded
   .javo-player-mini {
      opacity: 0;
      visibility: hidden;

      transform: translateY(100%);

      pointer-events: none;
   }


   /* ---------------------------------------------------------
      EXPANDED HEADER
   --------------------------------------------------------- */

   .javo-player-expanded-header {
      position: relative;
      z-index: 4;

      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: space-between;
      gap: 12px;

      width: 100%;
      min-height: 58px;

      padding-top: max(8px, env(safe-area-inset-top));
      padding-right: max(14px, env(safe-area-inset-right));
      padding-bottom: 8px;
      padding-left: max(14px, env(safe-area-inset-left));

      background: rgba(255, 255, 255, 0.96);

   

      border-bottom: 1px solid var(--javo-mobile-border);
   }


   .javo-player-expanded-heading {
      display: flex;
      flex: 1 1 auto;
      align-items: center;

      min-width: 0;
   }


   .javo-player-expanded-eyebrow {
      display: block;

      min-width: 0;
      overflow: hidden;

      color: var(--javo-mobile-muted);

      font-size: 11px;
      font-weight: 700;
      line-height: 1.5;

      white-space: nowrap;
      text-overflow: ellipsis;
   }


   .javo-player-close-btn {
      display: inline-grid;
      flex: 0 0 44px;
      align-items: center;
      justify-content: center;

      width: 44px;
      height: 44px;
      padding: 0;

      color: var(--javo-mobile-primary);
      background: rgba(179, 231, 255, 0.32);

      border: 0;
      border-radius: 50%;

      cursor: pointer;

      appearance: none;
      -webkit-appearance: none;

      touch-action: manipulation;

      transition:
         background-color 150ms ease,
         transform 100ms ease;
   }


   .javo-player-close-btn svg {
      display: block;

      width: 21px;
      height: 21px;
      margin: 0;
   }


   .javo-player-close-btn:active {
      background: rgba(179, 231, 255, 0.58);
      transform: scale(0.94);
   }


   /* ---------------------------------------------------------
      EXPANDED SCROLL AREA
   --------------------------------------------------------- */

   .javo-player-expanded-scroll {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      gap: 20px;

      min-width: 0;
      min-height: 0;
      max-height: none;

      padding-top: 16px;
      padding-right: max(16px, env(safe-area-inset-right));
      padding-bottom:
         calc(
            28px +
            env(safe-area-inset-bottom)
         );
      padding-left: max(16px, env(safe-area-inset-left));

      overflow-x: hidden;
      overflow-y: auto;

      overscroll-behavior: contain;

      -webkit-overflow-scrolling: touch;

      scrollbar-width: none;
   }


   .javo-player-expanded-scroll::-webkit-scrollbar {
      display: none;
   }


   .javo-player-expanded-primary,
   .javo-player-expanded-secondary {
      display: flex;
      flex-direction: column;

      width: 100%;
      min-width: 0;
   }


   .javo-player-expanded-primary {
      gap: 15px;
   }


   .javo-player-expanded-secondary {
      gap: 14px;
   }


   /* ---------------------------------------------------------
      ARTWORK
   --------------------------------------------------------- */

   .javo-player-expanded-artwork {
      position: relative;

      width: clamp(176px, 52vw, 225px);
      aspect-ratio: 1;
      margin-inline: auto;

      overflow: hidden;

      background: #eef2f7;

      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: 20px;

      box-shadow:
         0 14px 34px rgba(15, 23, 42, 0.14),
         0 3px 8px rgba(15, 23, 42, 0.06);
   }


   .javo-player-expanded-artwork img {
      position: absolute;
      inset: 0;
      z-index: 1;

      display: block;

      width: 100%;
      height: 100%;
      max-width: none;

      margin: 0;

      border-radius: inherit;

      object-fit: contain;
      object-position: center;
   }


   .javo-player-expanded-artwork
   .javo-cover-ring-glow {
      display: none;
   }


   /* ---------------------------------------------------------
      EPISODE INFORMATION
   --------------------------------------------------------- */

   .javo-player-expanded-info {
      width: 100%;
      min-width: 0;
      margin-inline: auto;

      text-align: center;
   }


   .javo-player-channel-name,
   .javo-player-episode-title {
      margin: 0;
   }


   .javo-player-channel-name {
      display: block;

      width: 100%;
      margin-bottom: 3px;
      overflow: hidden;

      color: var(--javo-mobile-muted);

      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.55;

      white-space: nowrap;
      text-overflow: ellipsis;
   }


   .javo-player-episode-title {
      display: -webkit-box;

      width: 100%;
      overflow: hidden;

      color: var(--javo-mobile-text);

      font-size: clamp(16px, 4.5vw, 18px);
      font-weight: 800;
      line-height: 1.65;

      white-space: normal;
      overflow-wrap: break-word;

      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
   }


   /* ---------------------------------------------------------
      TIMELINE
   --------------------------------------------------------- */

   .javo-player-center-zone,
   .javo-timeline-container {
      width: 100%;
      min-width: 0;
   }


   .javo-timeline-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
   }


   .javo-player-timeline-inline {
      display: grid;
      grid-template-columns:
         42px
         minmax(0, 1fr)
         42px;
      align-items: center;
      gap: 8px;

      width: 100%;
      min-width: 0;

      direction: ltr;
   }


   .javo-player-timeline-track,
   .javo-waveform-wrapper {
      position: relative;

      width: 100%;
      min-width: 0;
   }


   .javo-player-timeline-track {
      border-radius: 999px;
   }


   .javo-waveform-wrapper {
      height: 32px;
   }


   .javo-waveform-bg,
   .javo-waveform-progress {
      position: absolute;
      top: 50%;
      right: auto;
      left: 0;

      height: 4px;

      border-radius: 999px;

      transform: translateY(-50%);

      pointer-events: none;
   }


   .javo-waveform-bg {
      width: 100%;

      background: rgba(126, 186, 255, 0.45);
   }


   .javo-waveform-progress {
      width: 0%;

      background: var(--javo-mobile-primary);
   }


   #javo_seek {
      position: absolute;
      inset: 0;
      z-index: 3;

      width: 100%;
      height: 32px;
      margin: 0;
      padding: 0;

      opacity: 1;

      background: transparent;

      border: 0;
      border-radius: 999px;

      cursor: pointer;

      appearance: none;
      -webkit-appearance: none;

      touch-action: pan-y;
   }


   #javo_seek::-webkit-slider-runnable-track {
      width: 100%;
      height: 32px;

      background: transparent;

      border: 0;
   }


   #javo_seek::-webkit-slider-thumb {
      width: 14px;
      height: 14px;
      margin-top: 9px;

      background: var(--javo-mobile-primary);

      border: 2px solid rgba(255, 255, 255, 0.96);
      border-radius: 50%;

      box-shadow: 0 1px 5px rgba(15, 23, 42, 0.24);

      appearance: none;
      -webkit-appearance: none;
   }


   #javo_seek::-moz-range-track {
      width: 100%;
      height: 4px;

      background: transparent;

      border: 0;
      border-radius: 999px;
   }


   #javo_seek::-moz-range-thumb {
      width: 12px;
      height: 12px;

      background: var(--javo-mobile-primary);

      border: 2px solid rgba(255, 255, 255, 0.96);
      border-radius: 50%;

      box-shadow: 0 1px 5px rgba(15, 23, 42, 0.24);
   }


   .javo-player-time-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;

      width: 100%;
   }


   .javo-player-time-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
   }


   .javo-player-time-label {
      color: var(--javo-mobile-subtle);

      font-size: 8.5px;
      font-weight: 500;
   }


   .javo-time-digit {
      min-width: 0;

      color: #334155;

      font-size: 10.5px;
      font-weight: 600;
      line-height: 1;

      text-align: center;
      white-space: nowrap;

      direction: ltr;
      unicode-bidi: isolate;

      font-variant-numeric: tabular-nums;
   }


   /* ---------------------------------------------------------
      PLAYBACK CONTROLS
   --------------------------------------------------------- */

   .javo-player-controls-zone {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: clamp(10px, 3.8vw, 18px);

      width: 100%;
      min-height: 72px;

      padding-block: 2px;
   }


   .javo-control-btn {
      display: inline-grid;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;

      padding: 0;
      margin: 0;

      color: var(--javo-mobile-primary);
      background: transparent;

      border: 0;
      border-radius: 50%;

      cursor: pointer;

      appearance: none;
      -webkit-appearance: none;

      touch-action: manipulation;

      transition:
         color 150ms ease,
         background-color 150ms ease,
         transform 100ms ease;
   }
   .javo-episode-nav-btn {
      width: 44px;
      height: 44px;
      color: #0f172a;
   }
   .javo-episode-nav-btn svg {
      display: block;
      width: 21px;
      height: 21px;
      margin: 0;
      fill: currentColor;
   }
   .skip-btn {
      width: 50px;
      height: 50px;  
   }
   .javo-skip-icon {
      display: grid;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      line-height: 0;
   }
   .skip-btn svg {
      display: block;
      width: 34px;
      height: 34px;
      margin: 0;
   }
   .play-main-btn {
      position: relative;
      width: 68px;
      height: 68px;
      color: var(--javo-mobile-accent);
      background: var(--javo-mobile-primary);
      box-shadow: 0 7px 20px rgba(30, 58, 138, 0.24);
   }
   #javo_play_icon {
      position: relative;
      z-index: 1;

      display: grid;
      align-items: center;
      justify-content: center;

      width: 100%;
      height: 100%;

      line-height: 0;
   }


   .play-main-btn svg {
      display: block;

      width: 28px;
      height: 28px;
      margin: 0;

      fill: currentColor;
   }


   .play-main-btn[aria-pressed="false"] svg {
      transform: translateX(-1px);
   }


   .play-btn-glow {
      display: none;
   }


   .javo-control-btn:active {
      transform: scale(0.94);
   }


   /* ---------------------------------------------------------
      SLEEP TIMER AND UP NEXT CARDS
   --------------------------------------------------------- */

   .javo-player-sleep-timer,
   .javo-player-up-next {
      width: 100%;
      min-width: 0;

      padding: 15px;

      background: var(--javo-mobile-surface-soft);

      border: 1px solid var(--javo-mobile-border);
      border-radius: 18px;
   }


   .javo-player-section-header,
   .javo-player-up-next-header {
      width: 100%;
      min-width: 0;
   }


   .javo-player-section-header h3,
   .javo-player-up-next-header h3 {
      margin: 0;

      color: var(--javo-mobile-text);

      font-size: 14px;
      font-weight: 800;
      line-height: 1.55;
   }


   /* ---------------------------------------------------------
      SLEEP TIMER
   --------------------------------------------------------- */

   .javo-sleep-timer-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;

      width: 100%;
      margin-top: 11px;
   }


   .javo-sleep-option {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-width: 0;
      min-height: 44px;
      padding: 8px 10px;

      color: #334155;
      background: #ffffff;

      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;

      font: inherit;
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.4;

      cursor: pointer;

      appearance: none;
      -webkit-appearance: none;

      touch-action: manipulation;

      transition:
         color 150ms ease,
         background-color 150ms ease,
         border-color 150ms ease,
         transform 100ms ease;
   }


   .javo-sleep-option[aria-pressed="true"] {
      color: #ffffff;
      background: var(--javo-mobile-primary);

      border-color: var(--javo-mobile-primary);
   }


   .javo-sleep-option:active {
      transform: scale(0.97);
   }


   .javo-sleep-timer-status {
      margin: 9px 0 0;

      color: var(--javo-mobile-muted);

      font-size: 10.5px;
      font-weight: 500;
      line-height: 1.6;
   }


   /* ---------------------------------------------------------
      UP NEXT HEADER
   --------------------------------------------------------- */

   .javo-player-up-next-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 6px 12px;
   }


   .javo-player-section-eyebrow {
      display: block;

      margin-bottom: 3px;

      color: var(--javo-mobile-subtle);

      font-size: 9.5px;
      font-weight: 600;
      line-height: 1.4;
   }


   .javo-player-up-next-channel {
      display: block;

      max-width: 100%;
      overflow: hidden;

      color: var(--javo-mobile-muted);

      font-size: 10.5px;
      font-weight: 600;
      line-height: 1.5;

      white-space: nowrap;
      text-overflow: ellipsis;
   }


   /* ---------------------------------------------------------
      UP NEXT STATES
   --------------------------------------------------------- */

   .javo-player-up-next-empty,
   .javo-player-up-next-error,
   .javo-player-up-next-loading {
      margin: 11px 0 0;
      padding: 13px;

      color: var(--javo-mobile-muted);
      background: #ffffff;

      border: 1px solid rgba(15, 23, 42, 0.07);
      border-radius: 12px;

      font-size: 11px;
      font-weight: 500;
      line-height: 1.65;

      text-align: center;
   }


   .javo-player-up-next-empty {
      border-style: dashed;
   }


   .javo-player-up-next-error {
      color: #b42318;
      background: #fff8f7;

      border-color: rgba(180, 35, 24, 0.14);
   }


   /* ---------------------------------------------------------
      UP NEXT LIST
   --------------------------------------------------------- */

   .javo-player-up-next-list {
      display: flex;
      flex-direction: column;
      gap: 8px;

      width: 100%;
      min-width: 0;
      margin-top: 11px;
   }


   .javo-up-next-item {
      width: 100%;
      min-width: 0;
      margin: 0;
   }


   .javo-up-next-item-button {
      display: grid;
      grid-template-columns:
         50px
         minmax(0, 1fr)
         34px;
      align-items: center;
      gap: 9px;

      width: 100%;
      min-width: 0;
      min-height: 66px;
      padding: 8px;

      color: inherit;
      background: #ffffff;

      border: 1px solid rgba(15, 23, 42, 0.07);
      border-radius: 14px;

      text-align: right;

      cursor: pointer;

      appearance: none;
      -webkit-appearance: none;

      touch-action: manipulation;

      transition:
         background-color 150ms ease,
         border-color 150ms ease,
         transform 100ms ease;
   }


   .javo-up-next-item-button:active {
      background: rgba(179, 231, 255, 0.22);

      border-color: rgba(30, 58, 138, 0.12);

      transform: scale(0.99);
   }


   .javo-up-next-item-artwork {
      width: 50px;
      height: 50px;
      min-width: 50px;

      overflow: hidden;

      background: #eef2f7;

      border-radius: 10px;
   }


   .javo-up-next-item-cover {
      display: block;

      width: 100%;
      height: 100%;
      max-width: none;

      margin: 0;

      object-fit: cover;
      object-position: center;
   }


   .javo-up-next-item-content {
      display: flex;
      flex-direction: column;
      justify-content: center;

      min-width: 0;
      overflow: hidden;
   }


   .javo-up-next-item-title {
      display: -webkit-box;

      width: 100%;
      overflow: hidden;

      color: var(--javo-mobile-text);

      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.55;

      white-space: normal;
      overflow-wrap: break-word;

      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
   }


   .javo-up-next-item-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px 8px;

      min-width: 0;
      margin-top: 3px;

      color: var(--javo-mobile-muted);

      font-size: 9.5px;
      font-weight: 500;
      line-height: 1.45;
   }


   .javo-up-next-item-duration {
      direction: ltr;
      unicode-bidi: isolate;

      font-variant-numeric: tabular-nums;
   }


   .javo-up-next-item-action {
      display: inline-grid;
      align-items: center;
      justify-content: center;

      width: 34px;
      height: 34px;
      color: #1e3a8a;
      background: #b3e7ff;
      border-radius: 50%;
   }


   .javo-up-next-item-action svg {
      display: block;

      width: 17px;
      height: 17px;
      margin: 0;
color: #1e3a8a;
      background: #b3e7ff;
      fill: currentColor;
   }


   /* ---------------------------------------------------------
      FOCUS AND DISABLED
   --------------------------------------------------------- */

   #javo_master_player button:focus-visible,
   #javo_master_player input:focus-visible {
      outline: 2px solid var(--javo-mobile-primary);
      outline-offset: 3px;
   }


   #javo_master_player button:disabled,
   #javo_master_player input:disabled {
      opacity: 0.45;
      cursor: not-allowed;
   }
}


/* =========================================================
   SMALL MOBILE
   360px and smaller
========================================================= */

@media (max-width: 359px) {

   :root {
      --javo-mini-player-height: 66px;
   }


   .javo-player-mini {
      grid-template-columns:
         46px
         minmax(0, 1fr)
         42px
         36px;
      gap: 6px;

      padding-right: max(8px, env(safe-area-inset-right));
      padding-left: max(8px, env(safe-area-inset-left));
   }


   .javo-player-mini-artwork {
      width: 46px;
      height: 46px;
      min-width: 46px;

      border-radius: 11px;
   }


   .javo-player-mini-channel {
      font-size: 9px;
   }


   .javo-player-mini-title {
      font-size: 11.5px;
   }


   .javo-player-mini-play {
      width: 42px;
      height: 42px;
   }


   .javo-player-expand-button {
      width: 36px;
      height: 36px;
   }


   .javo-player-expanded-header {
      min-height: 54px;

      padding-right: max(10px, env(safe-area-inset-right));
      padding-left: max(10px, env(safe-area-inset-left));
   }


   .javo-player-close-btn {
      flex-basis: 40px;

      width: 40px;
      height: 40px;
   }


   .javo-player-expanded-scroll {
      gap: 16px;

      padding-right: max(12px, env(safe-area-inset-right));
      padding-left: max(12px, env(safe-area-inset-left));
   }


   .javo-player-expanded-primary {
      gap: 12px;
   }


   .javo-player-expanded-artwork {
      width: clamp(158px, 50vw, 185px);

      border-radius: 17px;
   }


   .javo-player-channel-name {
      font-size: 10.5px;
   }


   .javo-player-episode-title {
      font-size: 15px;
      line-height: 1.6;
   }


   .javo-player-timeline-inline {
      grid-template-columns:
         38px
         minmax(0, 1fr)
         38px;
      gap: 5px;
   }


   .javo-time-digit {
      font-size: 9.5px;
   }


   .javo-player-controls-zone {
      gap: 10px;
      min-height: 66px;
   }


   .skip-btn {
      width: 46px;
      height: 46px;
   }


   .skip-btn svg,
   .javo-skip-icon {
      width: 31px;
      height: 31px;
   }


   .play-main-btn {
      width: 62px;
      height: 62px;
   }


   .play-main-btn svg {
      width: 25px;
      height: 25px;
   }


   .javo-player-sleep-timer,
   .javo-player-up-next {
      padding: 13px;

      border-radius: 16px;
   }


   .javo-up-next-item-button {
      grid-template-columns:
         46px
         minmax(0, 1fr)
         32px;
      gap: 7px;
   }


   .javo-up-next-item-artwork {
      width: 46px;
      height: 46px;
      min-width: 46px;
   }


   .javo-up-next-item-action {
      width: 32px;
      height: 32px;
   }
}


/* =========================================================
   MEDIUM MOBILE
   360px to 430px
========================================================= */

@media (min-width: 360px) and (max-width: 430px) {

   .javo-player-expanded-artwork {
      width: clamp(180px, 52vw, 215px);
   }


   .javo-player-expanded-scroll {
      padding-right: max(14px, env(safe-area-inset-right));
      padding-left: max(14px, env(safe-area-inset-left));
   }
}


/* =========================================================
   LARGE MOBILE
   431px to 767px
========================================================= */

@media (min-width: 431px) and (max-width: 767px) {

   .javo-player-mini {
      grid-template-columns:
         54px
         minmax(0, 1fr)
         46px
         42px;
      gap: 10px;

      padding-right: max(14px, env(safe-area-inset-right));
      padding-left: max(14px, env(safe-area-inset-left));
   }


   .javo-player-mini-artwork {
      width: 54px;
      height: 54px;
      min-width: 54px;

      border-radius: 14px;
   }


   .javo-player-mini-title {
      font-size: 13px;
   }


   .javo-player-mini-channel {
      font-size: 10.5px;
   }


   .javo-player-mini-play {
      width: 46px;
      height: 46px;
   }


   .javo-player-expand-button {
      width: 42px;
      height: 42px;
   }


   .javo-player-expanded-scroll {
      width: 100%;
      max-width: 560px;
      margin-inline: auto;

      padding-right: max(20px, env(safe-area-inset-right));
      padding-left: max(20px, env(safe-area-inset-left));
   }


   .javo-player-expanded-artwork {
      width: clamp(205px, 47vw, 235px);
   }


   .javo-player-controls-zone {
      gap: 20px;
   }


   .javo-player-sleep-timer,
   .javo-player-up-next {
      padding: 17px;
   }
}


/* =========================================================
   SHORT MOBILE HEIGHT
========================================================= */

@media (max-width: 767px) and (max-height: 700px) {

   .javo-player-expanded {
      height: 100vh;
      height: 100dvh;
      max-height: 100vh;
      max-height: 100dvh;
   }


   .javo-player-expanded-header {
      min-height: 50px;

      padding-top: max(6px, env(safe-area-inset-top));
      padding-bottom: 5px;
   }


   .javo-player-expanded-scroll {
      gap: 14px;

      padding-top: 10px;
      padding-bottom:
         calc(
            20px +
            env(safe-area-inset-bottom)
         );
   }


   .javo-player-expanded-primary {
      gap: 10px;
   }


   .javo-player-expanded-artwork {
      width: clamp(145px, 41vw, 178px);

      border-radius: 16px;
   }


   .javo-player-channel-name {
      margin-bottom: 2px;

      font-size: 10px;
   }


   .javo-player-episode-title {
      font-size: 14.5px;
      line-height: 1.5;
   }


   .javo-waveform-wrapper,
   #javo_seek {
      height: 28px;
   }


   #javo_seek::-webkit-slider-runnable-track {
      height: 28px;
   }


   #javo_seek::-webkit-slider-thumb {
      margin-top: 7px;
   }


   .javo-player-controls-zone {
      min-height: 60px;

      padding-block: 0;
   }


   .skip-btn {
      width: 44px;
      height: 44px;
   }


   .play-main-btn {
      width: 58px;
      height: 58px;
   }
}


/* =========================================================
   MOBILE LANDSCAPE
========================================================= */

@media (max-width: 767px) and (orientation: landscape) {

   .javo-player-expanded {
      height: 100vh;
      height: 100dvh;
      max-height: 100vh;
      max-height: 100dvh;

      border-radius: 18px 18px 0 0;
   }


   .javo-player-expanded-header {
      min-height: 48px;

      padding-top: max(5px, env(safe-area-inset-top));
      padding-right: max(12px, env(safe-area-inset-right));
      padding-bottom: 5px;
      padding-left: max(12px, env(safe-area-inset-left));
   }


   .javo-player-close-btn {
      flex-basis: 38px;

      width: 38px;
      height: 38px;
   }


   .javo-player-expanded-scroll {
      gap: 11px;

      padding-top: 8px;
      padding-right: max(18px, env(safe-area-inset-right));
      padding-bottom:
         calc(
            16px +
            env(safe-area-inset-bottom)
         );
      padding-left: max(18px, env(safe-area-inset-left));
   }


   .javo-player-expanded-primary {
      gap: 8px;
   }


   .javo-player-expanded-artwork {
      width: clamp(120px, 23vw, 155px);

      border-radius: 14px;
   }


   .javo-player-channel-name {
      margin-bottom: 1px;

      font-size: 9.5px;
   }


   .javo-player-episode-title {
      font-size: 14px;
      line-height: 1.45;

      -webkit-line-clamp: 1;
   }


   .javo-player-timeline-inline {
      max-width: 520px;
      margin-inline: auto;
   }


   .javo-player-controls-zone {
      gap: 16px;
      min-height: 54px;
   }


   .skip-btn {
      width: 42px;
      height: 42px;
   }


   .skip-btn svg,
   .javo-skip-icon {
      width: 29px;
      height: 29px;
   }


   .play-main-btn {
      width: 54px;
      height: 54px;
   }


   .play-main-btn svg {
      width: 23px;
      height: 23px;
   }
}


/* =========================================================
   REDUCED MOTION — MOBILE ONLY
========================================================= */

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {

   .javo-player-mini,
   .javo-player-backdrop,
   .javo-player-expanded,
   .javo-player-mini-play,
   .javo-player-expand-button,
   .javo-player-close-btn,
   .javo-control-btn,
   .javo-sleep-option,
   .javo-up-next-item-button {
      transition-duration: 1ms;
   }


   .javo-mini-playing-bar {
      animation: none;

      transform: scaleY(0.65);
   }
}


/* =========================================================
   UNIFIED PERSISTENT PLAYER SURFACES
   The Mini Player follows the Bottom Dock at every breakpoint.
   Expanded Player keeps its existing layout with a quieter dark palette.
========================================================= */

.javo-player-mini {
   width: min(calc(100% - 32px), 480px);
   margin-inline: auto;
   color: rgba(255, 255, 255, 0.94);
   background: rgba(20, 31, 44, 0.97);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 20px;
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}

.javo-player-mini-artwork {
   background: #0f172a;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.javo-player-mini-channel {
   color: rgba(255, 255, 255, 0.58);
}

.javo-player-mini-title {
   color: rgba(255, 255, 255, 0.94);
}

.javo-player-mini-play {
   color: #14202c;
   background: #b3e7ff;
   box-shadow: none;
}

.javo-player-expand-button {
   color: #b3e7ff;
   background: rgba(179, 231, 255, 0.1);
}

#javo_master_player .javo-player-channel-link:focus-visible,
#javo_master_player button:focus-visible,
#javo_master_player input:focus-visible {
   outline-color: #b3e7ff;
}

.javo-player-expanded {
   background: rgba(20, 31, 44, 0.99);
   border-color: rgba(255, 255, 255, 0.08);
   box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
}

.javo-player-expanded-header {
   background: rgba(20, 31, 44, 0.99);
   border-bottom-color: rgba(255, 255, 255, 0.07);
}

.javo-player-expanded-eyebrow,
.javo-player-channel-name,
.javo-player-up-next-channel,
.javo-sleep-timer-status,
.javo-up-next-item-meta,
.javo-player-up-next-empty,
.javo-player-up-next-error,
.javo-player-up-next-loading {
   color: rgba(255, 255, 255, 0.58);
}

.javo-player-section-eyebrow {
   color: rgba(255, 255, 255, 0.42);
   display: none;
}

.javo-player-episode-title,
.javo-player-section-header h3,
.javo-player-up-next-header h3,
.javo-up-next-item-title {
   color: rgba(255, 255, 255, 0.94);
}

.javo-time-digit {
   color: rgba(255, 255, 255, 0.7);
}

.javo-player-close-btn,
.javo-control-btn,
.javo-episode-nav-btn {
   color: #b3e7ff;
}

.javo-player-close-btn,
.javo-player-sleep-timer,
.javo-player-up-next,
.javo-sleep-option,
.javo-up-next-item-button,
.javo-player-up-next-empty,
.javo-player-up-next-error,
.javo-player-up-next-loading {
   background: rgba(255, 255, 255, 0.035);
   border-color: rgba(255, 255, 255, 0.07);
}

.javo-sleep-option {
   color: rgba(255, 255, 255, 0.72);
}

.javo-sleep-option[aria-pressed="true"],
.play-main-btn {
   color: #14202c;
   background: #b3e7ff;
   border-color: #b3e7ff;
}

.javo-waveform-bg {
   background: rgba(179, 231, 255, 0.3);
}

.javo-waveform-progress {
   background: #b3e7ff;
}

#javo_seek::-webkit-slider-thumb {
   background: #b3e7ff;
}

#javo_seek::-moz-range-thumb {
   background: #b3e7ff;
}

@media (min-width: 768px) {
   .javo-player-mini {
      width: min(calc(100% - 32px), 480px);
      margin-bottom: 8px;
   }
}

@media (max-width: 767px) {
   .javo-player-mini {
      width: calc(100% - 20px);
      min-height: var(--javo-mini-player-height);
      padding: 8px 10px;
   }
}

@media (max-width: 380px) {
   .javo-player-mini {
      width: calc(100% - 12px);
      border-radius: 18px;
   }
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
   .javo-player-mini-play:hover,
   .play-main-btn:hover {
      background: #c8efff;
   }

   .javo-player-expand-button:hover,
   .javo-player-close-btn:hover,
   .javo-sleep-option:not([aria-pressed="true"]):hover,
   .javo-up-next-item-button:hover {
      color: #b3e7ff;
      background: rgba(179, 231, 255, 0.1);
      border-color: rgba(179, 231, 255, 0.16);
   }

   .skip-btn:hover,
   .javo-episode-nav-btn:not(:disabled):hover {
      color: #c8efff;
      background: rgba(179, 231, 255, 0.08);
   }
}

/* Position the canonical component without changing its internal styling. */
.javo-player-engagement:not([hidden]) {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
}

/* Expanded playlist: chronological window, native links and playback state. */
.javo-player-expanded .javo-up-next-item-button {
   border: 1px solid rgba(255, 255, 255, 0.07);
}

.javo-player-expanded .javo-up-next-item-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   justify-self: center;
   box-sizing: border-box;
   width: 34px;
   height: 34px;
   min-width: 0;
   min-height: 0;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   flex: 0 0 auto;
   padding: 0;
   border: 0;
   color: #14202c;
   background: #b3e7ff;
   cursor: pointer;
}

.javo-player-expanded .javo-up-next-item-action svg {
   display: block;
   width: 16px;
   height: 16px;
   margin: 0;
   color: inherit;
   background: transparent;
}

@media (max-width: 359px) {
   .javo-player-expanded .javo-up-next-item-action {
      width: 32px;
      height: 32px;
   }
}

.javo-player-expanded .javo-up-next-item-channel,
.javo-player-expanded .javo-player-up-next-channel {
   color: inherit;
   text-decoration: none;
}

.javo-player-expanded .javo-up-next-item-title {
   text-decoration: none;
}

.javo-player-expanded .javo-up-next-item-channel {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.javo-player-expanded a[href]:hover {
   text-decoration: underline;
}

#javo_master_player .javo-player-expanded a[href]:focus-visible {
   outline: 2px solid #b3e7ff;
   outline-offset: 3px;
   border-radius: 3px;
}

.javo-player-expanded .javo-up-next-item.is-current .javo-up-next-item-button {
   background: rgba(179, 231, 255, 0.1);
   border-color: rgba(179, 231, 255, 0.32);
}

.javo-player-expanded .javo-up-next-item.is-current .javo-up-next-item-title {
   color: #b3e7ff;
}

.javo-player-expanded .javo-up-next-item.is-current .javo-up-next-item-action svg {
   display: none;
}

.javo-player-playlist-equalizer {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
   width: 18px;
   height: 18px;
}

.javo-player-playlist-equalizer span {
   width: 3px;
   height: 14px;
   background: currentColor;
   border-radius: 1px;
   transform: scaleY(0.4);
   transform-origin: center;
}

.javo-up-next-item.is-current.is-playing .javo-player-playlist-equalizer span {
   animation: javo-playlist-equalizer 780ms ease-in-out infinite alternate;
}

.javo-player-playlist-equalizer span:nth-child(2) {
   animation-delay: -260ms;
}

.javo-player-playlist-equalizer span:nth-child(3) {
   animation-delay: -520ms;
}

@keyframes javo-playlist-equalizer {
   0% { transform: scaleY(0.35); }
   55% { transform: scaleY(1); }
   100% { transform: scaleY(0.45); }
}

@media (prefers-reduced-motion: reduce) {
   .javo-player-playlist-equalizer span {
      animation: none !important;
   }
}