/* MedicalTV responsive shell + reliable default-player affordance. Loaded last on purpose. */
:root {
  --medtv-header-height: 56px;
  --medtv-tabs-height: 46px;
  --medtv-bottom-nav-height: 66px;
  --medtv-safe-bottom: env(safe-area-inset-bottom, 0px);
  --medtv-player-max-height: 75dvh;
  --medtv-focus-ring: #a5b4fc;
}

html, body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0 !important;
}
body {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
}
#livestream-app.main-container {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
#livestream-app *, #livestream-app *::before, #livestream-app *::after { box-sizing: border-box; }
#app-header {
  flex: 0 0 auto !important;
  min-width: 0;
  min-height: var(--medtv-header-height);
  padding: 6px clamp(8px, 1.5vw, 20px) !important;
  gap: clamp(4px, .8vw, 12px);
}
#app-header > * { min-width: 0; }
#app-header h3 { max-width: clamp(105px, 18vw, 240px); }
#main-content.widget-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Keep all six destinations available. One compact horizontal strip replaces the
   old small-screen rule that hid the tab labels but left their shell/arrow space. */
#top-tabs-shell {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: var(--medtv-tabs-height);
  overflow: hidden;
  padding: 0 !important;
}
#top-tabs-scroller {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100%;
  height: auto !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scroll-padding-inline: 8px;
}
#top-tabs-scroller > nav.mobile-nav-tabs,
#top-tabs-scroller > nav.desktop-nav-tabs {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-flow: row nowrap !important;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(2px, .4vw, 7px);
  width: max-content !important;
  min-width: 100%;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 5px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  border: 0 !important;
  scroll-behavior: auto;
}
#top-tabs-scroller .tab-button {
  position: relative;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  justify-content: center;
  min-width: max-content !important;
  min-height: 42px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px clamp(9px, 1vw, 16px) !important;
  font-size: clamp(12px, .82vw, 15px) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  border-radius: 8px 8px 0 0;
}
#top-tabs-scroller .tab-button i { flex: 0 0 auto; margin-right: .4em !important; }
#tabs-scroll-left, #tabs-scroll-right, #all-nav-shortcut {
  display: inline-flex !important;
  flex: 0 0 32px !important;
  align-items: center;
  justify-content: center;
  min-width: 32px !important;
  width: 32px !important;
  min-height: 42px !important;
  padding: 0 !important;
}
#all-nav-shortcut { margin-inline: 2px !important; }
#top-tabs-scroller .tab-button:focus-visible,
#tabs-scroll-left:focus-visible, #tabs-scroll-right:focus-visible,
#all-nav-shortcut:focus-visible {
  outline: 3px solid var(--medtv-focus-ring) !important;
  outline-offset: -3px !important;
  scroll-margin-inline: 8px;
}

/* The bottom bar remains an optional shortcut row; it must not cover app content. */
.mobile-bottom-nav {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100vw;
  padding-bottom: var(--medtv-safe-bottom) !important;
  overscroll-behavior-x: contain;
}
@media (max-width: 900px) {
  .mobile-bottom-nav {
    position: fixed !important;
    inset-inline: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: stretch;
    justify-content: space-around;
    height: calc(var(--medtv-bottom-nav-height) + var(--medtv-safe-bottom));
    min-height: calc(var(--medtv-bottom-nav-height) + var(--medtv-safe-bottom));
    background: rgba(2, 6, 23, .97) !important;
    border-top: 1px solid rgba(148,163,184,.28);
    backdrop-filter: blur(12px);
  }
  #main-content.widget-content {
    padding-bottom: calc(var(--medtv-bottom-nav-height) + var(--medtv-safe-bottom)) !important;
  }
}
.mobile-bottom-nav-item { min-width: 0; }

/* Active panel owns the remaining viewport height and can never force its parents taller. */
#iptv-content.tab-content:not(.hidden),
#extratv-content.tab-content:not(.hidden),
#medical-radio-content.tab-content:not(.hidden),
#general-radio-content.tab-content:not(.hidden),
#upload-m3u-content.tab-content:not(.hidden),
#playlist-maker-content.tab-content:not(.hidden) {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100%;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}
#iptv-content.tab-content:not(.hidden) { flex-direction: row !important; overflow: hidden !important; }
/* Non-IPTV destinations must own their own scroll area too; hidden body scrolling must
   not clip playlist tools, radios, uploads, or Maker content below the first viewport. */
#extratv-content.tab-content:not(.hidden),
#medical-radio-content.tab-content:not(.hidden),
#general-radio-content.tab-content:not(.hidden),
#upload-m3u-content.tab-content:not(.hidden),
#playlist-maker-content.tab-content:not(.hidden) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
#iptv-content .channel-list {
  display: flex !important;
  flex: 0 0 clamp(230px, 23vw, 350px) !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: clamp(230px, 23vw, 350px) !important;
  max-width: 36vw;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
  border-right: 1px solid rgba(148,163,184,.2);
  border-bottom: 0 !important;
}
#mobile-channel-search { flex: 0 0 auto; }
#channel-list-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
#iptv-content .iptv-main-content {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
#iptv-content .iptv-main-content > .p-4 {
  flex: 0 0 auto !important;
  min-width: 0;
  min-height: 0 !important;
  overflow: visible !important;
  padding: clamp(8px, 1vw, 16px) !important;
}
#iptv-player-meta { margin-top: clamp(8px, 1vw, 16px) !important; }
#iptv-primary-actions { margin-top: clamp(8px, 1vw, 16px) !important; }
#iptv-primary-actions .iptv-ai-insights-trigger { min-height: 40px; }

/* A real, consistently sized player surface prevents the empty <video> from
   collapsing to zero height in TV browsers and nested flex layouts. */
#iptv-content .video-container.mobile-video-container {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: min(100%, 133.333dvh) !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  padding: 0 !important;
  margin-inline: auto;
  background: #000 !important;
  overflow: hidden !important;
  isolation: isolate;
  border-radius: clamp(4px, .5vw, 10px);
}
#livestream-player.mobile-video-player,
#iptv-content .video-container > #livestream-player {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #000 !important;
  z-index: 1;
}
@supports not (aspect-ratio: 16 / 9) {
  #iptv-content .video-container.mobile-video-container {
    height: 0 !important;
    padding-top: 56.25% !important;
  }
}

/* Default player message is a visible action state, not an invented stream image. */
#iptv-content .medtv-startup-overlay[hidden] { display: none !important; }
#iptv-content .medtv-startup-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vw, 28px);
  color: #f8fafc;
  text-align: center;
  background: linear-gradient(135deg, rgba(2,6,23,.92), rgba(15,23,42,.72));
}
#iptv-content .medtv-startup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  width: min(100%, 620px);
}
#iptv-content .medtv-startup-title {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 26px);
  font-weight: 750;
  line-height: 1.2;
}
#iptv-content .medtv-startup-status {
  margin: 0;
  max-width: 50ch;
  color: #cbd5e1;
  font-size: clamp(12px, .82vw, 17px);
  line-height: 1.4;
}
#iptv-content .medtv-startup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 20px;
  border: 2px solid rgba(224,231,255,.5);
  border-radius: 12px;
  color: white;
  background: #4f46e5;
  font-size: clamp(14px, .9vw, 18px);
  font-weight: 700;
  cursor: pointer;
}
#iptv-content .medtv-startup-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
#iptv-content .medtv-startup-button:disabled { opacity: .72; cursor: wait; }
#iptv-content .medtv-startup-footnote { color: #94a3b8; font-size: 11px; }

/* Tablet and phone: player first, compact channel browser second, without blank tab rows. */
@media (max-width: 900px) {
  :root { --medtv-header-height: 52px; --medtv-tabs-height: 43px; }
  #iptv-content.tab-content:not(.hidden) { flex-direction: column-reverse !important; }
  #iptv-content .channel-list {
    flex: 0 0 clamp(150px, 29dvh, 260px) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(148,163,184,.22);
  }
  #iptv-content .iptv-main-content {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  #iptv-content .video-container.mobile-video-container { width: min(100%, 100vw) !important; }
  #iptv-content .iptv-main-content > .p-4 { padding: clamp(7px, 1.5vw, 12px) !important; }
  #top-tabs-scroller .tab-button { min-height: 40px !important; padding: 7px 10px !important; font-size: 12px !important; }
  #top-tabs-scroller .tab-button i { margin-right: .25em !important; }
  #tabs-scroll-left, #tabs-scroll-right, #all-nav-shortcut { min-width: 27px !important; width: 27px !important; flex-basis: 27px !important; }
  #iptv-content .channel-item, #iptv-content .mobile-touch-target { min-height: 48px !important; }
}
@media (max-width: 520px) {
  :root { --medtv-header-height: 48px; --medtv-tabs-height: 40px; }
  #app-header { gap: 4px !important; padding: 4px 6px !important; }
  #app-header h3 { max-width: 92px; font-size: 13px !important; }
  #app-header .p-3, #app-header .w-11, #app-header button { min-width: 34px; min-height: 34px; padding: 6px !important; }
  #app-header .p-2 { padding: 5px !important; }
  #app-header > .flex { gap: 4px !important; }
  #global-search-toggle-mobile, #mobile-explore-btn { width: 34px !important; height: 34px !important; }
  #top-tabs-scroller .tab-button { min-height: 38px !important; padding: 7px 9px !important; font-size: 11px !important; }
  #top-tabs-scroller .tab-button i { display: none !important; }
  #top-tabs-shell .tabs-scroll-btn { display: none !important; }
  #top-tabs-shell #all-nav-shortcut { flex-basis: 30px !important; width: 30px !important; min-width: 30px !important; }
  #iptv-content .channel-list { flex-basis: clamp(145px, 25dvh, 220px) !important; }
  #iptv-player-meta { gap: 6px !important; }
  #iptv-secondary-actions { gap: 2px !important; }
  :root { --medtv-bottom-nav-height: 54px; }
  .mobile-bottom-nav { min-height: calc(var(--medtv-bottom-nav-height) + var(--medtv-safe-bottom)) !important; }
  .mobile-bottom-nav-item { padding: 4px 2px !important; }
  .mobile-bottom-nav-icon { font-size: 16px !important; }
  .mobile-bottom-nav-label { font-size: 10px !important; line-height: 1.1; }
}
@media (max-width: 360px) {
  #app-header #mobile-explore-btn { display: none !important; }
  #app-header h3 { max-width: 74px; }
  #iptv-content .medtv-startup-footnote { display: none; }
  #top-tabs-scroller .tab-button { padding-inline: 8px !important; }
}

/* Short laptop/TV landscape: keep the player and tabs visible, trim padding instead of clipping. */
@media (max-height: 620px) and (min-width: 521px) {
  :root { --medtv-header-height: 44px; --medtv-tabs-height: 40px; }
  #app-header { padding-block: 3px !important; }
  #top-tabs-scroller .tab-button { min-height: 36px !important; padding-block: 4px !important; }
  #iptv-content .video-container.mobile-video-container { max-width: min(100%, 106.666dvh) !important; }
  #iptv-content .channel-list { flex-basis: clamp(145px, 28vw, 300px) !important; }
  #iptv-content .iptv-main-content > .p-4 { padding: 6px !important; }
  #iptv-primary-actions { margin-top: 6px !important; }
  #iptv-player-meta { margin-top: 6px !important; }
}

/* A TV browser can report a desktop viewport or a user-agent-specific form factor. */
html[data-medtv-device="tv"] #livestream-app.main-container { height: 100vh !important; height: 100dvh !important; }
html[data-medtv-device="tv"] #app-header { min-height: 58px; }
html[data-medtv-device="tv"] #top-tabs-scroller .tab-button { min-height: 50px !important; padding: 10px 18px !important; font-size: clamp(16px, 1vw, 22px) !important; }
html[data-medtv-device="tv"] #iptv-content .channel-item,
html[data-medtv-device="tv"] #iptv-content .channel-item button,
html[data-medtv-device="tv"] #iptv-content .medtv-startup-button { min-height: 54px !important; }
html[data-medtv-device="tv"] #iptv-content .channel-item { padding: 12px 16px !important; }
html[data-medtv-device="tv"] :where(button, a, input, select, [tabindex]):focus-visible { outline: 4px solid var(--medtv-focus-ring) !important; outline-offset: 4px !important; }
html[data-medtv-device="tv"] .mobile-bottom-nav { display: none !important; }

/* Element-level resizing catches split-screen, zoom, browser chrome and TV safe areas. */
#livestream-app { --medtv-container-width: 100vw; --medtv-container-height: 100dvh; }
#livestream-app[data-medtv-layout="compact"] #app-header h3 { max-width: 100px; }
#livestream-app[data-medtv-layout="compact"] #iptv-content .channel-list { flex-basis: clamp(150px, 32vw, 260px) !important; }
@media (prefers-reduced-motion: reduce) {
  #top-tabs-scroller { scroll-behavior: auto !important; }
  #iptv-content .medtv-startup-overlay, #iptv-content .medtv-startup-button { transition: none !important; }
}