/* ==========================================================
   GAYZZEE MOBILE APP V2
   12 AUGUSTUS 2026
   Alleen mobiel. Desktop blijft onaangeroerd.
========================================================== */

.gz-mobile-primary-nav,
.gz-mobile-pagebar,
.gz-mobile-control-backdrop,
.gz-mobile-control-sheet-header,
.gz-mobile-cam-grid {
  display: none;
}

@media (max-width: 979px) {
  :root {
    --gz-mobile-app-header: 58px;
    --gz-mobile-primary-nav-height: 48px;
    --gz-mobile-pagebar-height: 50px;
    --gz-mobile-bottom-nav-height: 64px;
    --gz-mobile-safe-bottom: calc(
      var(--gz-mobile-bottom-nav-height) + env(safe-area-inset-bottom)
    );
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0 !important;
    overscroll-behavior: none;
  }

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

  /* ------------------------------------------------------
     SHARED MOBILE SHELL
  ------------------------------------------------------ */

  .app-shell,
  .messages-app-shell {
    width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding-bottom: var(--gz-mobile-safe-bottom) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .app-shell {
    display: grid !important;
    grid-template-rows:
      var(--gz-mobile-app-header)
      var(--gz-mobile-primary-nav-height)
      minmax(0, 1fr) !important;
  }

  body.gz-mobile-media-page .app-shell {
    grid-template-rows:
      var(--gz-mobile-app-header)
      var(--gz-mobile-primary-nav-height)
      var(--gz-mobile-pagebar-height)
      minmax(0, 1fr) !important;
  }

  .messages-app-shell {
    display: grid !important;
    grid-template-rows:
      var(--gz-mobile-app-header)
      var(--gz-mobile-primary-nav-height)
      minmax(0, 1fr) !important;
  }

  /* Sterker dan body.gayzzee-no-statusbar-layout .app-shell uit final-pass. */
  body.gayzzee-no-statusbar-layout .app-shell {
    grid-template-rows:
      var(--gz-mobile-app-header)
      var(--gz-mobile-primary-nav-height)
      minmax(0, 1fr) !important;
    padding-bottom: var(--gz-mobile-safe-bottom) !important;
  }

  body.gayzzee-no-statusbar-layout.gz-mobile-media-page .app-shell {
    grid-template-rows:
      var(--gz-mobile-app-header)
      var(--gz-mobile-primary-nav-height)
      var(--gz-mobile-pagebar-height)
      minmax(0, 1fr) !important;
  }

  .workspace,
  .messages-workspace {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* ------------------------------------------------------
     HEADER: eenvoudig, alle belangrijke mobiele functies
     blijven bereikbaar.
  ------------------------------------------------------ */

  .app-header {
    min-height: var(--gz-mobile-app-header) !important;
    height: var(--gz-mobile-app-header) !important;
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
  }

  .app-header .main-navigation,
  .app-header .header-statistic,
  .app-header .header-inbox-button,
  .app-header .header-user,
  .gayzzee-mobile-menu-button,
  .gayzzee-mobile-menu,
  .gayzzee-mobile-menu-backdrop {
    display: none !important;
  }

  .app-header .header-status {
    grid-column: 2 / 4 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  .app-header #headerSettingsButton {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 58px !important;
    border-left: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 0 !important;
  }

  .app-header .header-moderator {
    display: inline-flex !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 58px !important;
    justify-content: center !important;
    padding: 0 6px !important;
  }

  .app-header .header-moderator-copy,
  .app-header .header-moderator-message {
    display: none !important;
  }

  .app-header .header-gaybelgium-return:not([hidden]) {
    left: 58px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 58px !important;
    padding-inline: 5px !important;
  }

  /* ------------------------------------------------------
     4 DIRECTE MEDIAKNOPPEN
  ------------------------------------------------------ */

  .gz-mobile-primary-nav {
    position: relative;
    z-index: 120;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    height: var(--gz-mobile-primary-nav-height);
    min-height: 0;
    border-top: 1px solid rgba(255, 255, 255, .045);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background:
      linear-gradient(
        180deg,
        rgba(16, 10, 25, .985),
        rgba(8, 5, 14, .995)
      );
    box-shadow: 0 8px 22px rgba(0, 0, 0, .20);
  }

  .gz-mobile-primary-nav-item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 4px;
    color: rgba(255, 255, 255, .66);
    border-right: 1px solid rgba(255, 255, 255, .045);
    background: transparent;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .gz-mobile-primary-nav-item:last-child {
    border-right: 0;
  }

  .gz-mobile-primary-nav-item > span {
    font-size: 15px;
    line-height: 1;
  }

  .gz-mobile-primary-nav-item > strong {
    overflow: hidden;
    font-size: 9px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gz-mobile-primary-nav-item.is-active {
    color: #ffffff;
    background:
      linear-gradient(
        180deg,
        rgba(143, 72, 255, .22),
        rgba(244, 58, 185, .09)
      );
  }

  .gz-mobile-primary-nav-item.is-active::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: 0;
    left: 18%;
    height: 2px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, #9655ff, #ff4fc7);
    box-shadow: 0 0 12px rgba(218, 71, 255, .55);
  }

  /* ------------------------------------------------------
     PAGINABALK + BEDIENING
  ------------------------------------------------------ */

  .gz-mobile-pagebar {
    position: relative;
    z-index: 115;
    display: flex;
    min-width: 0;
    min-height: var(--gz-mobile-pagebar-height);
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 8px 5px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(9, 6, 15, .975);
  }

  .gz-mobile-pagebar > div {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .gz-mobile-pagebar > div > strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gz-mobile-pagebar > div > small {
    overflow: hidden;
    color: rgba(255, 255, 255, .50);
    font-size: 8px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gz-mobile-pagebar-controls {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 108px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid rgba(210, 94, 255, .34);
    border-radius: 12px;
    color: #ffffff;
    background:
      linear-gradient(
        135deg,
        rgba(120, 52, 213, .25),
        rgba(235, 54, 184, .13)
      );
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
  }

  .gz-mobile-pagebar-controls > span {
    font-size: 16px;
  }

  .gz-mobile-pagebar-controls > strong {
    font-size: 9px;
    font-weight: 950;
  }

  /* ------------------------------------------------------
     DESKTOP ZIJBALK -> MOBIELE BOTTOM SHEET
  ------------------------------------------------------ */

  .gz-mobile-control-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: var(--gz-mobile-safe-bottom);
    left: 0;
    z-index: 2147482150;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .70);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
  }

  body.gz-mobile-controls-open .gz-mobile-control-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .gz-mobile-control-sheet-header {
    position: sticky;
    top: 0;
    z-index: 8;
    display: none;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    background: rgba(12, 8, 20, .995);
    backdrop-filter: blur(16px);
  }

  .gz-mobile-control-sheet-header > div {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .gz-mobile-control-sheet-header strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gz-mobile-control-sheet-header small {
    overflow: hidden;
    color: rgba(255, 255, 255, .54);
    font-size: 8px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gz-mobile-control-sheet-close {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 12px;
    color: #ffffff;
    background: rgba(255, 255, 255, .055);
    font: 900 24px/1 system-ui, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
  }

  body.gz-mobile-controls-open .control-sidebar,
  body.gz-mobile-controls-open .cinema-sidebar,
  body.gz-mobile-controls-open .library-sidebar,
  body.gz-mobile-controls-open .studio-sidebar {
    position: fixed !important;
    top: clamp(86px, 16dvh, 142px) !important;
    right: 8px !important;
    bottom: var(--gz-mobile-safe-bottom) !important;
    left: 8px !important;
    z-index: 2147482250 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 0 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 1px solid rgba(210, 110, 255, .24) !important;
    border-bottom: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    background: rgba(10, 7, 17, .995) !important;
    box-shadow: 0 -22px 65px rgba(0, 0, 0, .58) !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body.gz-mobile-controls-open .control-sidebar > .gz-mobile-control-sheet-header,
  body.gz-mobile-controls-open .cinema-sidebar > .gz-mobile-control-sheet-header,
  body.gz-mobile-controls-open .library-sidebar > .gz-mobile-control-sheet-header,
  body.gz-mobile-controls-open .studio-sidebar > .gz-mobile-control-sheet-header {
    display: flex !important;
  }

  body.gz-mobile-controls-open .gz-mobile-tools-header {
    display: none !important;
  }

  /* ------------------------------------------------------
     BOTTOM NAV: groter en leesbaarder
  ------------------------------------------------------ */

  .gz-mobile-bottom-nav {
    z-index: 2147481800 !important;
  }

  .gz-mobile-bottom-nav-item {
    min-height: 58px !important;
    gap: 2px !important;
  }

  .gz-mobile-bottom-nav-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 19px !important;
  }

  .gz-mobile-bottom-nav-item strong {
    font-size: 9px !important;
    font-weight: 900 !important;
  }

  /* ------------------------------------------------------
     GLOBAL CHAT OVER MEDIA: groot, simpel, composer zichtbaar
  ------------------------------------------------------ */

  body.gz-mobile-chat-open .chat-panel {
    top: clamp(118px, 22dvh, 190px) !important;
    right: 6px !important;
    bottom: calc(var(--gz-mobile-safe-bottom) + 6px) !important;
    left: 6px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  body.gz-mobile-chat-open .chat-panel .chat-composer,
  body.gz-mobile-chat-open .chat-panel .gayzzee-global-chat-composer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
  }

  body.gz-mobile-chat-open .chat-panel .messages,
  body.gz-mobile-chat-open .chat-panel .global-chat-message-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ------------------------------------------------------
     PROFIEL SHEET: nooit buiten viewport
  ------------------------------------------------------ */

  body.mobile-profile-open #profilePanel {
    top: clamp(72px, 10dvh, 110px) !important;
    right: 6px !important;
    bottom: var(--gz-mobile-safe-bottom) !important;
    left: 6px !important;
    max-height: none !important;
  }

  body.mobile-profile-open #profilePanel .profile-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ------------------------------------------------------
     CAMROOM: 4 vierkante cams boven, grote vierkante focus,
     4 vierkante cams onder. Echte desktop-renderer nodes.
  ------------------------------------------------------ */

  body.gz-mobile-media-page .cam-stage,
  body.gz-mobile-media-page .cinema-stage,
  body.gz-mobile-media-page .livestream-stage {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
  }

  body.gz-mobile-media-page .cam-stage {
    grid-template-rows: 40px minmax(0, 1fr) !important;
    padding: 0 6px 6px !important;
  }

  body.gz-mobile-media-page .cam-stage .stage-heading {
    min-height: 40px !important;
    height: 40px !important;
  }

  body.gz-mobile-media-page #camArena {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 68px minmax(0, 1fr) 68px !important;
    gap: 5px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  #camArena .orbit,
  #camArena .arena-glow,
  #mobileSatelliteCams,
  .gz-mobile-cam-grid {
    display: none !important;
  }

  /* De bestaande Camroom-renderer blijft eigenaar van #satelliteCams.
     Op mobiel worden zijn echte nodes vaste grid-items: 4 boven, 4 onder. */
  #camArena #satelliteCams {
    display: contents !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    animation: none !important;
  }

  #camArena #satelliteCams > .satellite-cam {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 2px solid rgba(190, 101, 255, .54) !important;
    border-radius: 14px !important;
    background: #09050f !important;
    box-shadow: 0 0 16px rgba(138, 63, 242, .18) !important;
    animation: none !important;
    transform: none !important;
    translate: none !important;
    filter: none !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  #camArena #satelliteCams > .satellite-cam:nth-child(-n + 4) { grid-row: 1 !important; }
  #camArena #satelliteCams > .satellite-cam:nth-child(n + 5):nth-child(-n + 8) { grid-row: 3 !important; }
  #camArena #satelliteCams > .satellite-cam:nth-child(1),
  #camArena #satelliteCams > .satellite-cam:nth-child(5) { grid-column: 1 !important; }
  #camArena #satelliteCams > .satellite-cam:nth-child(2),
  #camArena #satelliteCams > .satellite-cam:nth-child(6) { grid-column: 2 !important; }
  #camArena #satelliteCams > .satellite-cam:nth-child(3),
  #camArena #satelliteCams > .satellite-cam:nth-child(7) { grid-column: 3 !important; }
  #camArena #satelliteCams > .satellite-cam:nth-child(4),
  #camArena #satelliteCams > .satellite-cam:nth-child(8) { grid-column: 4 !important; }
  #camArena #satelliteCams > .satellite-cam:nth-child(n + 9) { display: none !important; }

  #camArena #satelliteCams > .satellite-cam.is-focus {
    border-color: #ff5ecb !important;
    box-shadow: 0 0 0 2px rgba(255, 94, 203, .10), 0 0 20px rgba(255, 94, 203, .34) !important;
  }

  #camArena #satelliteCams .satellite-visual,
  #camArena #satelliteCams .satellite-video,
  #camArena #satelliteCams .satellite-initial {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
  }

  #camArena #satelliteCams .satellite-video { object-fit: cover !important; }

  #camArena #satelliteCams .satellite-label {
    right: 3px !important;
    bottom: 3px !important;
    left: 3px !important;
    max-width: none !important;
    padding: 2px 3px !important;
    overflow: hidden !important;
    font-size: 7px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #camArena #satelliteCams .satellite-mic-state {
    top: 3px !important;
    right: 3px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 8px !important;
  }

  #focusCam {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 25 !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    width: min(76vw, 330px) !important;
    height: auto !important;
    max-width: 330px !important;
    max-height: none !important;
    aspect-ratio: 1 !important;
    border-radius: 20px !important;
    transform: none !important;
  }

  #focusCam .focus-cam-visual,
  #focusCam #focusVideo {
    border-radius: 20px !important;
  }

  #focusCam #focusVideo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #focusCam .focus-cam-topline {
    top: 8px !important;
    right: 8px !important;
    left: 8px !important;
  }

  #focusCam .focus-cam-info {
    right: 7px !important;
    bottom: 7px !important;
    left: 7px !important;
    width: auto !important;
    max-width: none !important;
    padding: 7px 8px !important;
  }

  /* ------------------------------------------------------
     CINEMA 24/7 + ON DEMAND + LIVESTREAM
     dezelfde 4 / player / 4 taal als Camroom.
  ------------------------------------------------------ */

  .cinema247-live-arena,
  .cinema-live-arena,
  .stream-arena {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 6px !important;
    gap: 5px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .cinema247-live-arena,
  .cinema-live-arena {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 64px minmax(0, 1fr) 64px !important;
  }

  .stream-arena {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 64px minmax(0, 1fr) 64px auto !important;
  }

  .cinema247-live-row,
  .cinema-live-row,
  .livestream-live-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 5px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .cinema247-live-row-top,
  .cinema-live-row-top,
  .livestream-live-row-top {
    grid-row: 1 !important;
  }

  .cinema247-live-row-bottom,
  .cinema-live-row-bottom,
  .livestream-live-row-bottom {
    grid-row: 3 !important;
  }

  .cinema247-live-slot,
  .cinema-live-slot,
  .livestream-live-slot {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .cinema247-live-cam,
  .cinema-live-cam,
  .livestream-live-cam {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: inherit !important;
    overflow: hidden !important;
  }

  .cinema247-live-player-wrap,
  .cinema-live-player-wrap,
  .main-stream {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  .cinema247-live-player-wrap,
  .cinema-live-player-wrap {
    grid-row: 2 !important;
  }

  .main-stream {
    grid-row: 2 !important;
  }

  .cinema-screen,
  .ondemand-screen,
  .main-stream {
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .player-controls .volume-control,
  .stream-controls-inline label,
  .volume-control {
    display: flex !important;
    min-width: 68px !important;
  }

  .player-controls input[type="range"],
  .stream-controls-inline input[type="range"] {
    max-width: 86px !important;
  }

  /* ------------------------------------------------------
     PiP: vrij versleepbaar, nooit buiten viewport,
     gesloten betekent echt geen pointer-events.
  ------------------------------------------------------ */

  #cinema247CamPip,
  #cinemaCamPip,
  .livestream-cam-pip {
    position: fixed !important;
    z-index: 2147482050 !important;
    width: min(270px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - var(--gz-mobile-safe-bottom) - 16px) !important;
    overflow: hidden !important;
  }

  #cinema247CamPip[hidden],
  #cinemaCamPip[hidden],
  .livestream-cam-pip[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #cinema247CamPip:not([hidden]),
  #cinemaCamPip:not([hidden]),
  .livestream-cam-pip:not([hidden]) {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .cinema247-live-pip-top,
  .cinema-live-pip-top,
  .livestream-pip-top {
    min-height: 40px !important;
    cursor: grab !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .cinema247-live-pip-video,
  .cinema-live-pip-video,
  .livestream-pip-media,
  .cinema247-live-pip-controls,
  .cinema-live-pip-controls,
  .livestream-pip-controls {
    touch-action: manipulation !important;
  }

  /* ------------------------------------------------------
     TWINK: launcher vrij versleepbaar; panel blijft altijd
     volledig bruikbaar, ongeacht waar launcher staat.
  ------------------------------------------------------ */

  .gz-twink-launcher {
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  .gz-twink.gz-mobile-free-position,
  .gz-twink.gz-twink-mobile-positioned {
    right: auto !important;
    bottom: auto !important;
  }

  .gz-twink-panel {
    position: fixed !important;
    top: auto !important;
    right: 6px !important;
    bottom: calc(var(--gz-mobile-safe-bottom) + 6px) !important;
    left: 6px !important;
    width: auto !important;
    max-width: none !important;
    height: min(72dvh, 620px) !important;
    max-height: calc(100dvh - var(--gz-mobile-safe-bottom) - 18px) !important;
    overflow: hidden !important;
  }

  .gz-twink-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ------------------------------------------------------
     SETTINGS / MODALS / FORMS
  ------------------------------------------------------ */

  .settings-panel,
  dialog,
  .modal {
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - var(--gz-mobile-safe-bottom) - 12px) !important;
  }

  button,
  a,
  input,
  textarea,
  select {
    -webkit-tap-highlight-color: transparent;
  }

  button,
  a[role="button"],
  .quick-action,
  .info-link {
    touch-action: manipulation;
  }

  /* ------------------------------------------------------
     TOASTS niet achter bottomnav
  ------------------------------------------------------ */

  .toast-region,
  .gayzzee-final-toast-region {
    bottom: calc(var(--gz-mobile-safe-bottom) + 8px) !important;
  }
}

@media (max-width: 420px) {
  .gz-mobile-primary-nav-item {
    gap: 3px;
  }

  .gz-mobile-primary-nav-item > span {
    font-size: 14px;
  }

  .gz-mobile-primary-nav-item > strong {
    font-size: 8px;
  }

  .gz-mobile-pagebar-controls {
    min-width: 98px;
    padding-inline: 9px;
  }

  body.gz-mobile-media-page #camArena,
  .cinema247-live-arena,
  .cinema-live-arena,
  .stream-arena {
    grid-template-rows: 58px minmax(0, 1fr) 58px !important;
  }

  .stream-arena {
    grid-template-rows: 58px minmax(0, 1fr) 58px auto !important;
  }

  #camArena #satelliteCams > .satellite-cam {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  #focusCam {
    width: min(74vw, 292px) !important;
  }
}

@media (max-width: 360px) {
  .gz-mobile-pagebar > div > small {
    display: none;
  }

  .gz-mobile-pagebar-controls {
    min-width: 92px;
  }

  .gz-mobile-bottom-nav-item strong {
    font-size: 8px !important;
  }

  #focusCam {
    width: min(72vw, 260px) !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 979px) {
  :root {
    --gz-mobile-primary-nav-height: 42px;
    --gz-mobile-pagebar-height: 44px;
    --gz-mobile-bottom-nav-height: 56px;
  }

  .gz-mobile-primary-nav-item {
    min-height: 38px;
  }

  .gz-mobile-pagebar {
    min-height: 44px;
  }

  .gz-mobile-pagebar > div > small {
    display: none;
  }

  body.gz-mobile-media-page #camArena,
  .cinema247-live-arena,
  .cinema-live-arena {
    grid-template-rows: 46px minmax(0, 1fr) 46px !important;
  }

  .stream-arena {
    grid-template-rows: 46px minmax(0, 1fr) 46px auto !important;
  }

  #camArena #satelliteCams > .satellite-cam {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  #focusCam {
    width: min(38vw, 220px) !important;
  }

  .gz-twink-panel {
    top: 6px !important;
    bottom: calc(var(--gz-mobile-safe-bottom) + 6px) !important;
    height: auto !important;
    max-height: none !important;
  }

  body.gz-mobile-controls-open .control-sidebar,
  body.gz-mobile-controls-open .cinema-sidebar,
  body.gz-mobile-controls-open .library-sidebar,
  body.gz-mobile-controls-open .studio-sidebar {
    top: 8px !important;
  }
}