/*
 * viewmapvideojs-mobile-responsive.css
 *
 * Mobile/tablet responsive layer for the video-editing player page
 * (resources/views/viewmaping/optimized/homevideojs_opt.blade.php).
 *
 * Loaded LAST in <head>, after every other player stylesheet (classic
 * responsive.css / videoplayer-responsive.css / custom-style.css AND the
 * "redesign" chrome — filter-drawer_opt.css / filter-drawerv2_opt.css, which
 * ship with zero @media queries and are fixed-pixel desktop-only). Rules here
 * use !important liberally on purpose: they exist specifically to win against
 * older fixed-width/absolute desktop rules and against a couple of inline
 * <style> blocks that live further down in the same blade file.
 *
 * Supports BOTH orientations: portrait gets a stacked, scrollable layout;
 * landscape keeps the existing immersive video-first layout and just patches
 * the redesign chrome (appbar/navrail/drawer/board/chartwork) that classic
 * responsive.css/videoplayer-responsive.css never covered.
 *
 * Breakpoints used, matching the codebase's existing convention:
 *   - max-width: 991px              -> tablets + phones, both orientations
 *   - max-width: 767px              -> phones, mostly portrait stacking
 *   - max-width: 480px              -> small phones, extra tightening
 *   - max-width: 950px + landscape  -> phone landscape (immersive mode;
 *                                       950 covers the widest phones, e.g.
 *                                       iPhone 14/15 Pro Max at 932px CSS
 *                                       width in landscape, while staying
 *                                       under the smallest tablet at 1024px)
 */

/* ======================================================================
 * 1. TABLET + PHONE BASELINE (<=991px, both orientations)
 * ====================================================================== */
@media screen and (max-width: 991px) {

  /* ---- Redesign top app bar (.rd-appbar) ---- */
  .rd-appbar {
    height: auto !important;
    min-height: 48px !important;
    flex-wrap: wrap !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    row-gap: 4px !important;
  }
  .rd-appbar .rd-gtitle { display: none !important; }
  .rd-appbar .rd-score { display: none !important; }
  .rd-appbar .rd-ab-acts {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    margin-right: 46px !important; /* clear the fixed exit icon */
    scrollbar-width: none !important;
  }
  .rd-appbar .rd-ab-acts::-webkit-scrollbar { display: none !important; }
  .rd-appbar .rd-ab-btn {
    padding: 6px 8px !important;
    font-size: 10px !important;
    flex: none !important;
  }
  body.rd-has-appbar #main { padding-top: 84px !important; }
  body.rd-has-navrail .exit-icon-block {
    top: 6px !important;
    right: 8px !important;
  }

  /* ---- Redesign left nav rail -> bottom tab bar ---- */
  .rd-navrail {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 56px !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 4px !important;
    border-right: 0 !important;
    border-top: 1px solid #252a35 !important;
    z-index: 99998 !important;
  }
  .rd-navrail .rd-nav-item {
    flex: 0 0 auto !important;
    padding: 4px 10px !important;
  }

  /* Every fixed-pixel "clear the left nav rail" offset the redesign chrome
     hard-codes (64px / 160px) needs to become a bottom clearance instead. */
  body.rd-has-navrail .rd-boardwrap,
  .rd-board-head.rd-bh-lite,
  .rd-empty-frame,
  .rd-idcards,
  body.rd-nonfb.rd-has-navrail #statFrame,
  body.rd-has-navrail .rd-fsum,
  body.rd-has-navrail #odkFrame,
  body.rd-has-navrail #chartFrame,
  body.rd-has-navrail #allFrame,
  body.rd-has-navrail #scriptFrame,
  body.rd-has-navrail #teamFrame,
  body.rd-has-navrail #playerFrame,
  body.rd-has-navrail #assignedFrame,
  body.rd-has-navrail.rd-lanes #statFrame,
  body.rd-has-navrail.rd-lanes #teamFrame,
  body.rd-has-navrail.rd-lanes #playerFrame,
  body.rd-has-navrail.rd-lanes #assignedFrame,
  body.rd-has-navrail.rd-lanes #odkFrame,
  body.rd-has-navrail.rd-lanes #chartFrame,
  body.rd-has-navrail.rd-lanes #allFrame,
  body.rd-has-navrail.rd-lanes #scriptFrame,
  .rd-lanes-labels.rd-lanes-abs,
  .multi-game-selected-parent {
    padding-left: 0 !important;
    left: 0 !important;
    padding-bottom: 60px !important;
  }
  .rd-snip-footer {
    left: 8px !important;
    right: 8px !important;
    bottom: 62px !important;
    max-width: calc(100vw - 16px) !important;
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
  #football-stat-entry-popup { left: 12px !important; }
  .snipback-success-alert { left: 12px !important; }

  /* ---- Filter drawer (.rd-fdrawer) ---- */
  .rd-fdrawer.rd-open {
    width: 92vw !important;
    max-width: 420px !important;
  }

  /* ---- Advanced filter modal (#rdFilter2) — stack the 4/3/2-column grids ---- */
  #rdFilter2 .mw,
  #rdFilter2 .mw.cd {
    width: 96vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  #rdFilter2 .mwcols,
  #rdFilter2 .mwband,
  #rdFilter2 .two,
  #rdFilter2 .aligngrid {
    grid-template-columns: 1fr !important;
  }
  #legendWrapper .legend-panel {
    right: 12px !important;
    bottom: calc(60px + 12px) !important;
  }

  /* ---- Board / play cards — enable horizontal swipe instead of clipping ---- */
  .rd-board-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .rd-lanes-labels {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
  }
  body.cw-active:not(.cw-detached) .rd-boardwrap,
  body.cw-active:not(.cw-detached) .entire-video-shot-section,
  body.cw-active:not(.cw-detached) .rd-board-head {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* ---- Charting workstation panel — full-screen sheet instead of a docked 404px rail ---- */
  .rd-chartwork {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* ---- Misc uncapped popups get a viewport-relative ceiling ---- */
  .rd-icbar,
  .rd-iccfg,
  .keyboard-shortcuts-info {
    max-width: calc(100vw - 24px) !important;
  }
  #odk-snip-entry-popup {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  #stat-snipcollection-update,
  #mapUsersModal .modal-content {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  /* ---- Compare Angles / dual view — stack the two video panes ---- */
  .rd-dual-stage { flex-direction: column !important; }
  .rd-dual-head { padding-right: 56px !important; }

  /* ---- Header ---- */
  .snipback-header .container-fluid {
    grid-template-columns: auto 1fr auto !important;
    gap: 6px !important;
  }
  .snipback-header .logo { max-width: 90px !important; }

  /* ---- Legacy tag-filter popup (.customize-snipreel) ---- */
  .customize-snipreel {
    width: 92vw !important;
    max-width: 340px !important;
    right: 4vw !important;
    left: auto !important;
    height: auto !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    bottom: 70px !important;
  }
  #choosesnips.customize-snipreel {
    width: 80vw !important;
    max-width: 260px !important;
  }

  /* ---- Compare-sessions modal (#dual_view) — the 825px fixed iframe height ---- */
  #dual_view .modal-body,
  #dual_view_iframe {
    height: 70vh !important;
    max-height: 70vh !important;
  }

  /* ---- Draggable comment box ---- */
  #draggable-comment-box {
    width: 92vw !important;
    max-width: 360px !important;
  }
  #draggable-comment-box textarea { width: 100% !important; }
}

/* ======================================================================
 * 2. PHONE PORTRAIT (<=767px) — stacked layout, controls made reachable
 * ====================================================================== */
@media screen and (max-width: 767px) and (orientation: portrait) {

  /* The video takes the top of the screen; everything else flows below it
     instead of overlapping it as absolutely-positioned overlays. */
  .main-video-section-p1 #section-video-content-p1,
  .main-video-section-p1 #tool-bar-section-p1,
  .main-video-section-p1 #shots-section-p1 {
    position: relative !important;
    height: auto !important;
    bottom: auto !important;
  }

  /* Undo the old "hide everything except the video in portrait" rules from
     responsive.css (@media max-width:890px and orientation:portrait). */
  #shots-section-p1,
  #shots-section-p1 .container-fluid,
  .main-video-section-p1 #tool-bar-section-p1,
  .web-fullscreen-disabled #shots-section-p1 {
    display: block !important;
  }

  #my-player { height: 56.25vw !important; } /* 16:9 to keep the video from over-growing */

  /* Transport toolbar: one horizontally-scrollable row instead of 15+ icons
     fighting for a single fixed-width line. */
  #tool-bar-section-p1 .player-right-icons {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 6px !important;
  }
  #tool-bar-section-p1 .snip-inner-content {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }

  /* Snip tabs: scrollable pill row instead of clipped/wrapped text tabs. */
  .snipstabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    white-space: nowrap !important;
  }
  .snipstabs li { flex: 0 0 auto !important; }
  .tab-snips-content {
    max-height: 46vh !important;
    overflow-y: auto !important;
  }
  .shots-flex {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .seekbar-section {
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    padding: 6px 10px !important;
  }

  /* Header: hide the game search on very tight widths, keep it usable, and
     make sure the login/avatar controls never sit under the exit icon. */
  .snipback-header .container-fluid {
    grid-template-columns: auto 1fr auto !important;
  }
  .snipback-header .adplayer-game-search { min-width: 0 !important; }
  .snipback-header form.me-3 { flex: 1 1 auto !important; min-width: 0 !important; }
  .snipback-header .dropdown.position-absolute,
  .header-user-login.position-absolute {
    position: relative !important;
    right: auto !important;
  }

  /* Redesign appbar/navrail: shrink further so the wrapped row + bottom
     bar don't eat too much of a short phone-portrait viewport. */
  .rd-appbar .rd-logo { font-size: 13px !important; }
  .rd-nav-item { padding: 3px 8px !important; }
  .rd-nav-item i { font-size: 16px !important; }
}

/* ======================================================================
 * 3. SMALL PHONES (<=480px) — extra tightening
 * ====================================================================== */
@media screen and (max-width: 480px) {
  .rd-fdrawer.rd-open { width: 100vw !important; max-width: 100vw !important; }
  #rdFilter2 .mw, #rdFilter2 .mw.cd { width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; }
  .customize-snipreel { max-width: 94vw !important; right: 3vw !important; }
  #choosesnips.customize-snipreel { max-width: 88vw !important; }
  .rd-appbar .rd-ab-btn span { display: none !important; } /* icon-only actions when there's no room for labels */
  .snipback-header .logo { max-width: 74px !important; }
}

/* ======================================================================
 * 4. PHONE LANDSCAPE (<=950px) — keep the immersive video-first layout,
 *    just patch the redesign chrome that classic videoplayer-responsive.css
 *    never had to deal with (it predates the rd-* redesign).
 * ====================================================================== */
@media screen and (max-width: 950px) and (orientation: landscape) {
  .rd-appbar {
    min-height: 38px !important;
    padding: 3px 8px !important;
  }
  body.rd-has-appbar #main { padding-top: 40px !important; }
  .rd-navrail {
    height: 42px !important;
  }
  .rd-nav-item {
    flex-direction: row !important;
    gap: 4px !important;
    padding: 3px 8px !important;
  }
  .rd-nav-item .rd-nav-label,
  .rd-nav-item span:not([class*="bx"]) {
    font-size: 8px !important;
  }
  body.rd-has-navrail .rd-boardwrap,
  .rd-board-head.rd-bh-lite,
  .rd-empty-frame,
  .rd-idcards,
  body.rd-nonfb.rd-has-navrail #statFrame,
  body.rd-has-navrail .rd-fsum {
    padding-bottom: 44px !important;
  }
  .rd-snip-footer { bottom: 46px !important; }
  .tab-snips-content { max-height: 30vh !important; overflow-y: auto !important; }
}

/* ======================================================================
 * 5. PHONE LANDSCAPE — "CINEMA MODE"
 *    Full-width video, a minimal 3-button transport (back / forward /
 *    fullscreen), and a trimmed app bar (title, meta, action buttons,
 *    avatar only). Everything else persistent on the page is hidden so
 *    landscape reads as video-first. Comes after section 4 on purpose so
 *    it wins on anything that overlaps.
 * ====================================================================== */
@media screen and (max-width: 950px) and (orientation: landscape) {

  /* ---- Hide the page chrome that isn't part of the minimal set ---- */
  .snipback-header,
  .rd-navrail,
  #shots-section-p1,
  .seekbar-section,
  .more-buttons-wrapper,
  .video-right-section,
  .rd-snip-footer,
  .rd-campanel,
  .rd-fsum,
  .football-stat-snip-info-container,
  #legendBtnWrapper,
  .exit-icon-block {
    display: none !important;
  }

  /* ---- Video: full width AND full height, no side column reserved for it.
     Every ancestor needs an explicit height for #my-player's height:100% to
     resolve against — percentage heights don't work otherwise — and video.js
     tends to set an inline pixel height on the tech element from its last
     desktop-layout measurement, so that needs an !important override too. ---- */
  html, body { height: 100% !important; }
  #main, .main-video-section-p1 {
    height: 100vh !important;
    height: 100dvh !important; /* dvh excludes the mobile browser chrome vh doesn't account for; ignored where unsupported */
  }
  #section-video-content-p1,
  #section-video-content-p1 .container-fluid,
  #section-video-content-p1 .row.content,
  #section-video-content-p1 .video-parent-container,
  .snip-inner-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    height: calc(100vh - 60px) !important;
    height: calc(100dvh - 60px) !important;
    max-height: calc(100vh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #my-player,
  .video-js,
  .video-js .vjs-tech {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  /* ---- Toolbar: only backward / forward / fullscreen survive ---- */
  #tool-bar-section-p1 .player-left-icons,
  #tool-bar-section-p1 .player-middle-icons {
    display: none !important;
  }
  #tool-bar-section-p1 .player-right-icons {
    display: flex !important; /* overrides the default d-none on this wrapper */
  }
  #tool-bar-section-p1 .player-right-icons > * {
    display: none !important;
  }
  #tool-bar-section-p1 .player-right-icons #backward-bottom,
  #tool-bar-section-p1 .player-right-icons #forward-bottom,
  #tool-bar-section-p1 .player-right-icons .fullscreen {
    display: inline-flex !important;
  }

  /* ---- App bar: title/meta, action buttons (.rd-ab-btn), avatar only ---- */
  .rd-appbar .rd-logo,
  .rd-appbar .rd-score {
    display: none !important;
  }
  .rd-appbar .rd-gtitle,
  .rd-appbar .rd-gmeta {
    display: block !important;
    max-width: 34vw !important;
  }
  body.rd-has-appbar #main {
    padding-top: 40px !important; /* the app bar is now the only persistent bar */
  }
  body.rd-has-navrail .rd-campanel,.rd-stage-stack,.rd-ab-export,.rd-ab-btn.rd-ab-stats,.rd-ab-btn.rd-ab-whiteboard,.rd-ab-btn.pri,.rd-ab-btn.sb-help-btn
  {
    display:none !important;
  }
  body.rd-has-navrail .main-video-section-p1 .snip-inner-content
  {
    max-height :unset !important;
  }
  .rd-stage-stack
  {
    display:none !important;
  }
}

/* ======================================================================
 * 6. PHONE PORTRAIT — MINIMAL MODE
 *    Show only the video, the header (app bar / classic header), and the
 *    footer (the transport toolbar + seekbar). Everything else — the
 *    tabs/snip board, nav rail, camera panel, contextual snip-action bar,
 *    legend, etc. — is hidden. Comes after section 2 on purpose so it
 *    wins over the "un-hide the tabs in portrait" rules written there.
 * ====================================================================== */
@media screen and (max-width: 767px) and (orientation: portrait) {

  #shots-section-p1,
  #shots-section-p1 .container-fluid,
  .rd-navrail,
  .rd-snip-footer,
  .video-right-section,
  .rd-campanel,
  .rd-fsum,
  .football-stat-snip-info-container,
  #legendBtnWrapper,
  .more-buttons-wrapper {
    display: none !important;
  }

  /* Footer = the toolbar + seekbar; keep them visible and in normal
     document flow (not absolutely overlaid) so they sit right below the
     video instead of floating on top of it. */
  #tool-bar-section-p1,
  .seekbar-section {
    display: block !important;
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
  }
  body.rd-has-navrail .rd-campanel,.rd-stage-stack,.rd-ab-export,.rd-ab-btn.rd-ab-stats,.rd-ab-btn.rd-ab-whiteboard,.rd-ab-btn.pri,.rd-ab-btn.sb-help-btn
  {
    display:none !important;
  }
  .rd-stage-stack
  {
    display:none !important;
  }
}

/* ======================================================================
 * 7. PHONE PORTRAIT — FIT TO CONTAINER, NO SCROLL
 *    Section 6 left #tool-bar-section-p1 hidden by a trailing override, so
 *    the footer the coach needs (play/pause, +/-3, speed, loop) was gone in
 *    portrait. This section restores it and pins the whole page to the
 *    container width so nothing scrolls sideways.
 *    Last section in the file on purpose — it must win.
 * ====================================================================== */
@media screen and (max-width: 767px) and (orientation: portrait) {

  /* --- 7a. No horizontal scroll, anywhere ------------------------------- */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  body, #main, #main > *,
  #section-video-content-p1,
  #section-video-content-p1 .container-fluid,
  #section-video-content-p1 .row,
  .video-parent-container,
  .snip-inner-content,
  #tool-bar-section-p1,
  #tool-bar-section-p1 .container-fluid,
  .seekbar-section {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Bootstrap's .row negative margins are what actually push past the
     viewport edge once the gutters are gone. */
  #section-video-content-p1 .row,
  #tool-bar-section-p1 .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #section-video-content-p1 .container-fluid,
  #tool-bar-section-p1 .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- 7b. Player: full container width, height follows 16:9 ----------- */
  /* video.js writes width="640" height="360" as attributes AND inline px on
     .video-js, so both need overriding. aspect-ratio keeps the box stable
     before loadedmetadata fires, which stops the layout jumping on load. */
  .video-parent-container,
  .snip-inner-content {
    width: 100% !important;
    padding: 0 !important;
  }
  /* height:auto + aspect-ratio collapsed the box: custom-style.css:1455 sets
     #my-player to height:calc(100vh - 180px), and killing video.js's fluid
     padding-top left nothing to size against. 56.25vw is 16:9 of the full
     width and is what section 2 of this file already uses successfully. */
  #section-video-content-p1 #my-player,
  #section-video-content-p1 #my-player.video-js {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 56.25vw !important;
    max-height: 56.25vw !important;
  }
  /* The video section and its wrappers must keep real height, or the
     toolbar below them slides up to the top of the page. */
  #section-video-content-p1,
  #section-video-content-p1 .container-fluid,
  #section-video-content-p1 .row,
  #section-video-content-p1 .video-parent-container,
  #section-video-content-p1 .snip-inner-content {
    display: block !important;
    height: auto !important;
    min-height: 56.25vw !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #section-video-content-p1 #my-player video,
  #my-player .vjs-tech {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* --- 7f. Controls below the video, not on top of it ------------------- */
  /* .position-absolute-mobile (on both #tool-bar-section-p1 and
     .seekbar-section in the blade) overlays them on the video frame, which
     is why the transport row was covering the picture. */
  .seekbar-section.position-absolute-mobile,
  #tool-bar-section-p1.position-absolute-mobile {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* --- 7g. No white void under the copyright --------------------------- */
  /* With the tabs/board hidden, #main is shorter than the viewport and the
     page background showed through as a white block. */
  body {
    background: #000 !important;
    min-height: 100dvh !important;
  }
  .copyRight {
    width: 100% !important;
    padding: 10px 0 !important;
  }

  /* --- 7h. Portrait keeps play/pause + clock only ----------------------- */
  /* Everything else in the transport (GAME/SNIP, undo, swap, LOOP, -3, +3,
     speed, keyboard, fullscreen) is hidden. Written as "hide every child of
     the toolbar except the left and middle icon groups" rather than a list
     of class names, so buttons added later stay hidden too. */
  #tool-bar-section-p1 .snip-inner-content > *:not(.player-left-icons):not(.player-middle-icons) {
    display: none !important;
  }
  #tool-bar-section-p1 .snip-inner-content {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 0 10px !important;
  }
  #tool-bar-section-p1 .player-left-icons,
  #tool-bar-section-p1 .player-middle-icons {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
  }
  #tool-bar-section-p1 .player-middle-icons .video-time {
    white-space: nowrap !important;
    margin: 0 !important;
  }

  /* --- 7i. App bar: stop the name/Share/avatar pile-up ------------------ */
  /* rd-ab-acts was overflowing back over .rd-gnames because the name block
     and the actions block were both trying to occupy the same track. */
  .rd-appbar .rd-ab-acts {
    flex-wrap: nowrap !important;
    max-width: 46vw !important;
  }
  .rd-appbar .rd-ab-btn span,
  .rd-appbar .rd-ab-av-txt {
    display: none !important;      /* icon-only actions; no room for labels */
  }
  .rd-appbar .rd-gnames { max-width: 50vw !important; }


  /* --- 7c. Footer restored --------------------------------------------- */
  /* Overrides section 6's trailing hide. The toolbar IS the footer in
     portrait — without it there is no play, seek, speed or loop. */
  #tool-bar-section-p1 {
    display: block !important;
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 6px 8px !important;
  }
  #tool-bar-section-p1 .container-fluid,
  #tool-bar-section-p1 .row,
  #tool-bar-section-p1 .col-section-toolbar,
  #tool-bar-section-p1 .snip-inner-content {
    height: auto !important;
    min-height: 0 !important;
  }
  .seekbar-section {
    display: block !important;
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    padding: 6px 10px !important;
  }

  /* Controls wrap onto as many rows as they need and keep 44px touch
     targets, rather than sitting in one clipped horizontally-scrolling row. */
  #tool-bar-section-p1 .snip-inner-content,
  #tool-bar-section-p1 .player-right-icons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    overflow-x: visible !important;
    width: 100% !important;
    gap: 6px !important;
  }
  #tool-bar-section-p1 .player-right-icons > * {
    flex: 0 0 auto !important;
  }
  #tool-bar-section-p1 .player-right-icons button,
  #tool-bar-section-p1 .player-right-icons .btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* --- 7d. Page flows top-to-bottom: header, video, footer ------------- */
  /* No flex on #main: the page has absolutely-positioned children that
     collapse to zero as flex items, which dropped the video section out of
     the layout and pulled the toolbar to the top. Normal block flow. */
  #main {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
  }
  .btn-player-tools-show-hide {
    display: none !important;   /* nothing left to show/hide in minimal mode */
  }

  /* --- 7e. Redesign app bar (.rd-appbar) in portrait -------------------- */
  /* Section 6 hides logo, score, export, stats, whiteboard, primary and help,
     leaving title + meta + avatar. Two things were still off:
       - the bar is position:fixed at 48px tall, but #main only cleared 40px,
         so the top of the video sat under it;
       - .rd-gtitle was capped at 34vw, sized for a bar full of buttons that
         are no longer there. */
  .rd-appbar {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  body.rd-has-appbar #main,
  body.rd-has-appbar.rd-has-navrail #main {
    padding-top: 48px !important;   /* match the real bar height */
  }

  /* Title takes the room the hidden buttons gave back; min-width:0 is what
     actually lets it ellipsis instead of forcing the bar wider. */
  .rd-appbar .rd-gnames {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .rd-appbar .rd-gtitle,
  .rd-appbar .rd-gmeta {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .rd-appbar .rd-gtitle { font-size: 12.5px !important; }
  .rd-appbar .rd-gmeta  { font-size: 10.5px !important; }

  /* Avatar pinned right, never scrolls out of reach. */
  .rd-appbar .rd-ab-acts {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;   /* undo the 44px navrail reservation */
    overflow: visible !important;
    gap: 6px !important;
  }
  .rd-appbar .rd-ab-avwrap { flex: 0 0 auto !important; }
  .rd-appbar .rd-ab-menu {
    right: 0 !important;
    max-width: calc(100vw - 20px) !important;
  }
  .seekbar-section,.rd-ab-btn,.snipback-header
  {
     display:none !important;
  }
}
