/* GayZZee site-wide final pass — 11 augustus 2026 */

html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

body.gayzzee-no-statusbar-layout {
  --footer-height: 0px !important;
}

body.gayzzee-no-statusbar-layout .app-shell {
  --footer-height: 0px !important;
  grid-template-rows:
    var(--header-height)
    minmax(0, 1fr) !important;
  padding-bottom: 0 !important;
}

.status-bar {
  display: none !important;
}

.global-chat-room,
.chat-panel,
.chat-messages,
.global-chat-message-list {
  min-height: 0;
}

.chat-message-name {
  color: #52ff87 !important;
  font-weight: 800 !important;
}

.chat-message-content,
.chat-message-content p {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.chat-message-header time,
.chat-message-time {
  color: #ffffff !important;
  font-size: .72em !important;
  font-weight: 700 !important;
  opacity: .86 !important;
}

.chat-system-message.is-presence {
  border-color: rgba(50, 255, 128, .55) !important;
  background:
    linear-gradient(
      135deg,
      rgba(14, 88, 45, .82),
      rgba(6, 35, 20, .92)
    ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(68, 255, 137, .08),
    0 0 18px rgba(35, 255, 119, .15) !important;
}

.chat-system-message.is-presence strong,
.chat-system-message.is-presence p {
  color: #bfffd3 !important;
}

.chat-system-message.is-cam {
  border-color: rgba(255, 64, 74, .62) !important;
  background:
    linear-gradient(
      135deg,
      rgba(96, 16, 23, .88),
      rgba(40, 7, 11, .94)
    ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 80, 90, .08),
    0 0 20px rgba(255, 32, 45, .18) !important;
}

.chat-system-message.is-cam strong,
.chat-system-message.is-cam p {
  color: #ffd0d3 !important;
}

.gayzzee-chat-cam-button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: #ffffff;
  background: rgba(255, 255, 255, .055);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.gayzzee-chat-cam-button:hover {
  background: rgba(255, 255, 255, .09);
}

.gayzzee-chat-cam-button.is-live {
  border-color: rgba(255, 48, 64, .78);
  color: #ffffff;
  background: rgba(126, 13, 24, .82);
  box-shadow:
    0 0 0 1px rgba(255, 57, 71, .10),
    0 0 20px rgba(255, 31, 47, .34);
}

.gayzzee-chat-cam-button:disabled {
  opacity: .58;
  cursor: wait;
}

.chat-member-live-camera,
.member-live-camera,
#profilePanelLive {
  color: #ff5360 !important;
  text-shadow:
    0 0 5px rgba(255, 50, 65, .94),
    0 0 12px rgba(255, 30, 45, .66);
}

.chat-member-live-camera {
  flex: 0 0 auto;
  margin-left: 6px;
  font-size: 15px;
  line-height: 1;
}

.member-live-camera {
  min-width: 30px;
  display: inline-grid;
  place-items: center;
  border-color: rgba(255, 61, 76, .55) !important;
  background: rgba(95, 12, 21, .72) !important;
}

#profilePanelLive {
  border-color: rgba(255, 61, 76, .58) !important;
  background: rgba(88, 10, 18, .78) !important;
}

#liveFilterButton {
  width: auto !important;
  min-width: 44px;
  padding-inline: 9px;
  white-space: nowrap;
}

.gayzzee-final-toast-region {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147482500;
  display: grid;
  gap: 8px;
  max-width: min(360px, calc(100vw - 24px));
}

.gayzzee-final-toast,
.toast-region .gayzzee-final-toast {
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: #ffffff;
  background: rgba(12, 13, 17, .96);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .38);
  font-size: 13px;
  font-weight: 700;
}

.gayzzee-mobile-menu-button,
.gayzzee-mobile-menu,
.gayzzee-mobile-menu-backdrop {
  display: none;
}

@media (max-width: 979px) {
  .app-header {
    grid-template-columns:
      58px
      minmax(0, 1fr)
      120px !important;
  }

  .header-status {
    grid-column: 3 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
  }

  .gayzzee-mobile-menu-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid !important;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;
    color: #ffffff;
    background: rgba(255, 255, 255, .055);
    font: inherit;
    font-size: 22px;
    line-height: 1;
  }

  .gayzzee-mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147481000;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(3px);
  }

  .gayzzee-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2147481100;
    width: min(320px, 86vw);
    padding:
      calc(18px + env(safe-area-inset-top))
      14px
      calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 1px solid rgba(255, 255, 255, .10);
    background:
      linear-gradient(
        165deg,
        rgba(17, 18, 24, .99),
        rgba(7, 8, 12, .995)
      );
    box-shadow: -20px 0 50px rgba(0, 0, 0, .42);
  }

  body.gayzzee-mobile-menu-open {
    overflow: hidden;
  }

  body.gayzzee-mobile-menu-open .gayzzee-mobile-menu,
  body.gayzzee-mobile-menu-open .gayzzee-mobile-menu-backdrop {
    display: block;
  }

  .gayzzee-mobile-menu-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 4px 3px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .gayzzee-mobile-menu-heading strong {
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
  }

  .gayzzee-mobile-menu-heading span {
    color: rgba(255, 255, 255, .52);
    font-size: 11px;
  }

  .gayzzee-mobile-view-tabs,
  .gayzzee-mobile-navigation {
    display: grid;
    gap: 8px;
  }

  .gayzzee-mobile-view-tabs {
    margin-bottom: 14px;
  }

  .gayzzee-mobile-view-tabs button,
  .gayzzee-mobile-navigation a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 11px;
    color: #ffffff;
    background: rgba(255, 255, 255, .04);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    text-align: left;
  }

  .global-chat-composer input,
  .global-chat-composer textarea,
  .chat-composer input,
  .chat-composer textarea,
  .messages-composer input,
  .messages-composer textarea {
    min-height: 44px;
  }

  dialog,
  .modal,
  .profile-panel,
  .settings-panel {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
}

@media (max-width: 700px) {
  .gz-twink-launcher {
    touch-action: none;
  }

  .gz-twink.gz-twink-mobile-positioned {
    left: var(--twink-mobile-left) !important;
    top: var(--twink-mobile-top) !important;
    right: auto !important;
    bottom: auto !important;
  }

  .gz-twink-panel {
    display: flex;
    flex-direction: column;
    height: min(76dvh, 620px);
    max-height: calc(100dvh - 24px) !important;
    overflow: hidden !important;
  }

  .gz-twink-panel[hidden] {
    display: none !important;
  }

  .gz-twink-header,
  .gz-twink-composer,
  .gz-twink-footer,
  .gz-twink-typeahead {
    flex: 0 0 auto;
  }

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

  .gayzzee-final-toast-region {
    right: 10px;
    left: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-width: none;
  }

  .chat-tools {
    gap: 6px !important;
  }

  .gayzzee-chat-cam-button {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 11px;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 979px) {
  .gayzzee-mobile-menu {
    width: min(360px, 70vw);
  }

  .gz-twink-panel {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px) !important;
    bottom: 8px !important;
  }
}

/* ==========================================================
   GAYZZEE MOBILE MEDIA FINAL 20260811-v1
   Cinema 24/7 + On Demand + Livestream
========================================================== */
@media (max-width: 900px) {
  /* Mobiel: 4 cams boven + 4 cams onder blijven zichtbaar. */
  .cinema247-live-row-top,
  .cinema-live-row-top,
  .livestream-live-row-top {
    display: grid !important;
    grid-row: 1 !important;
  }

  .cinema247-live-arena,
  .cinema-live-arena {
    grid-template-rows: 72px minmax(0, 1fr) 72px !important;
    gap: 6px !important;
    padding: 7px !important;
  }

  .cinema247-live-player-wrap,
  .cinema-live-player-wrap {
    grid-row: 2 !important;
    width: 100% !important;
    align-self: center !important;
  }

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

  .stream-arena {
    grid-template-rows: 72px minmax(0, 1fr) 72px 42px !important;
    gap: 6px !important;
    padding: 7px !important;
  }

  .main-stream {
    grid-row: 2 !important;
    width: 100% !important;
    justify-self: stretch !important;
    align-self: center !important;
  }

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

  .stream-info-strip {
    grid-row: 4 !important;
  }

  .cinema247-live-row,
  .cinema-live-row,
  .livestream-live-row {
    gap: 6px !important;
  }

  .cinema247-live-slot,
  .cinema-live-slot,
  .livestream-live-slot {
    height: 72px !important;
    min-height: 0 !important;
    border-radius: 10px !important;
  }

  /* Cinema 24/7 is de mobiele referentiehoogte. */
  .cinema247-live-player-wrap #cinemaScreen,
  .cinema-live-player-wrap .ondemand-screen,
  .main-stream {
    height: clamp(350px, 41dvh, 400px) !important;
    min-height: 0 !important;
    max-height: 400px !important;
    aspect-ratio: auto !important;
  }

  /* De echte bestaande volumecontrols blijven op mobiel bereikbaar. */
  .player-controls .volume-control,
  .stream-controls-inline label {
    display: flex !important;
    align-items: center !important;
    width: 88px !important;
    min-width: 70px !important;
  }

  .player-controls .volume-control input,
  .stream-controls-inline label input {
    display: block !important;
    width: 88px !important;
    max-width: 88px !important;
    min-width: 0 !important;
    touch-action: pan-x !important;
  }

  .player-controls {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }

  .player-controls button {
    flex: 0 0 28px !important;
  }

  .stream-controls-inline {
    gap: 5px !important;
  }
}

/* Cinema 24/7 gebruikt desktop-hover voor controls; touch heeft geen hover. */
@media (hover: none), (pointer: coarse) {
  #cinemaScreen .player-bottombar {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

@media (max-width: 479px) {
  .cinema247-live-arena,
  .cinema-live-arena {
    grid-template-rows: 64px minmax(0, 1fr) 64px !important;
  }

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

  .cinema247-live-slot,
  .cinema-live-slot,
  .livestream-live-slot {
    height: 64px !important;
  }

  .cinema247-live-player-wrap #cinemaScreen,
  .cinema-live-player-wrap .ondemand-screen,
  .main-stream {
    height: clamp(260px, 38dvh, 320px) !important;
    max-height: 320px !important;
  }

  .player-controls .volume-control,
  .stream-controls-inline label,
  .player-controls .volume-control input,
  .stream-controls-inline label input {
    width: 72px !important;
    max-width: 72px !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 979px) {
  .cinema247-live-arena,
  .cinema-live-arena {
    grid-template-rows: 52px minmax(0, 1fr) 52px !important;
  }

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

  .cinema247-live-slot,
  .cinema-live-slot,
  .livestream-live-slot {
    height: 52px !important;
  }

  .cinema247-live-player-wrap #cinemaScreen,
  .cinema-live-player-wrap .ondemand-screen,
  .main-stream {
    height: clamp(150px, 48dvh, 210px) !important;
    max-height: 210px !important;
  }
}