/*
  EPICSOLO MOBILE STRUCTURE ONLY
  Scope: max-width: 767px.
  Desktop layout is deliberately untouched.
*/

@media screen and (max-width: 767px) {
  html, body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

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

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

  /* 1.10.9 FULLSCREEN-UITZONDERING: de server-reset/testscher-video's moeten
     de héle viewport vullen (100dvw/100dvh + object-fit:cover) — de algemene
     max-width:100% clamp hierboven knijpte die video's 17px kleiner dan de
     viewport (403 i.p.v. 420px) en liet zwarte balken zien. */
  .server-reset-video,
  #epicTestschermVideo,
  #epicAdminVideo {
    max-width: none !important;
    max-height: none !important;
    width: 100vw !important;
    height: 100vh !important;
    width: 100dvw !important;
    height: 100dvh !important;
    object-fit: cover !important;
  }

  /* 1.10.9 LOBBY MOBILE FOOTER-BOVEN: in de lobby staat de gezamenlijke-
     webcams-footer (visitors-panel) direct boven de chat, zodat de chat
     onderaan blijft en de footer受欢迎 informatie boven de vouw valt. */
  .room-page.layout-lobby .visitors-panel{
    order:-2;
    margin-bottom:10px;
  }
  .room-page.layout-lobby .chat-panel{
    order:2;
    width:100% !important;
    max-width:100% !important;
  }
  /* 1.10.9 LOBBY ZONDER EIGEN CAM (mobiel): de lege 320px-tegel en de
     kamerstarter-knoppenry vervallen — chat krijgt de volle breedte. */
  .room-page .starter-panel.lobby-mobile-nocam .starter-video-wrap,
  .room-page .starter-panel.lobby-mobile-nocam .controls,
  .room-page .starter-panel.lobby-mobile-nocam .panel-title{
    display:none !important;
  }
  .room-page .starter-panel.lobby-mobile-nocam{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    margin:0 !important;
  }

  button, input, select, textarea {
    max-width: 100%;
    min-width: 0;
  }

  /* ---------- MOBILE SITE HEADER / HOMEPAGE ---------- */
  .top {
    width: 100%;
    min-height: 60px;
    height: auto;
    padding: 10px 12px;
    gap: 9px;
    flex-wrap: wrap;
  }

  .top > .brand,
  .top > a.brand {
    min-width: 0;
    font-size: clamp(22px, 8vw, 30px);
    line-height: 1;
  }

  .top nav,
  .room-nav {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .top nav > *,
  .room-nav > * {
    flex: 1 1 0;
    min-width: 0;
  }

  .top nav button,
  .top nav a,
  .room-nav button,
  .room-nav a {
    min-height: 42px;
    text-align: center;
  }

  .top nav .account-topbar {
    flex: 1 1 100%;
  }

  .top nav .account-topbar button {
    width: 100%;
  }

  .container,
  .page-shell,
  .message-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .container {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .hero {
    width: 100%;
    min-width: 0;
    gap: 18px;
    padding: 12px 0 30px;
    align-items: stretch;
  }

  .hero h1 {
    font-size: clamp(36px, 12vw, 58px);
  }

  .hero p {
    font-size: 16px;
  }

  .hero-card,
  .hero-promos,
  .hero-promos > *,
  .page-card,
  .panel,
  .stat {
    min-width: 0;
    max-width: 100%;
  }

  .hero-card {
    width: 100%;
  }

  .grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .room-card {
    width: 100%;
    min-width: 0;
  }

  .room-meta {
    padding: 11px;
  }

  .modal-box {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 18px;
  }

  /* ---------- ROOM: PORTRAIT = ONE CLEAN COLUMN ---------- */
  /* Volgorde onder de kamerstarter: 1) kamerstarter-cam, 2) eigen gast-cam
     (via #selfVideoWrap binnen starter-media-row), daarna chat/gastenlijst;
     de gedeelde bezoekersraster (2x2) volgt na de chat. */
  .room-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow-x: hidden !important;
  }

  .room-page > .room-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "media"
      "side" !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    /* 1.9.95 FIX: align-items:start liet de starter-panel shrink-to-zero
       uitvoeren (2px breed) als de stage-content leeg/0px was. De absoluut
       gepositioneerde overlay-content (⚙Instellingen, audio-balk, watermark)
       van de starter-tegel zweefde daardoor BUITEN de container en kwam
       over de gezamenlijke-webcams-footer heen. stretch houdt de kolom op
       volledige breedte; min-width:0 voorkomt overflow. */
    align-items: stretch !important;
    overflow: visible !important;
  }

  .room-page > .room-main-grid > .starter-panel {
    grid-area: media !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .room-page > .room-main-grid > .chat-panel {
    grid-area: side !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  /* Webcam containers: vertical stack, fluid width, no 640/320 desktop geometry. */
  .room-page #mainWebcamGrid,
  .room-page .starter-media-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    zoom: 1 !important;
  }

  .room-page #mainWebcamGrid > *,
  .room-page .starter-media-row > * {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .room-page #mainWebcamGrid video,
  .room-page .starter-media-row video,
  .room-page .starter-video,
  .room-page .self-video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

  /* Give each live camera useful mobile height without imposing a fixed
     desktop image size or a fixed 4:3/16:9 display ratio. */
  .room-page #mainWebcamGrid > .starter-video-wrap,
  .room-page #mainWebcamGrid > #selfVideoWrap,
  .room-page .starter-media-row > .starter-video-wrap,
  .room-page .starter-media-row > #selfVideoWrap {
    height: clamp(220px, 68vw, 520px) !important;
  }

  .room-page #mainWebcamGrid > .starter-video-wrap > video,
  .room-page #mainWebcamGrid > #selfVideoWrap > video,
  .room-page .starter-media-row > .starter-video-wrap > video,
  .room-page .starter-media-row > #selfVideoWrap > video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Controls belong to the camera column and cannot widen the page. */
  .room-page .starter-panel > .controls,
  .room-page .room-role-controls,
  .room-page .controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    padding: 8px 0 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .room-page .controls > *,
  .room-page .room-role-controls > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .room-page .starter-actions,
  .room-page .media-control-bar {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* Portrait: chat full width, users full width underneath. */
  .room-page .chat-panel > .chat,
  .room-page .chat-panel > .participants {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .room-page .chat-panel > .chat {
    order: 1 !important;
    height: clamp(280px, 55vh, 520px) !important;
    min-height: 280px !important;
    max-height: none !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  .room-page .chat-panel > .participants {
    order: 2 !important;
    height: auto !important;
    min-height: 170px !important;
    max-height: 42vh !important;
    padding: 10px !important;
    overflow: auto !important;
  }

  .room-page #messages,
  .room-page #participantsList,
  .room-page .chat-form,
  .room-page .chat-input-row,
  .room-page #chatInput {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .room-page #messages,
  .room-page #participantsList {
    overflow: auto !important;
  }

  .room-page .chat-input-row {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    gap: 4px !important;
  }

  .room-page .chat-input-row > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .room-page .chat-panel > .staff-own-context-menu,
  .room-page .chat-panel > .staff-context-menu,
  .room-page .chat-panel > .modal {
    position: fixed !important;
  }

  /* Shared webcams: two fluid cameras per row (2x2 raster onder de chat). */
  .room-page > .visitors-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 10px 0 0 !important;
    clear: both !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    order: 3 !important;
  }

  /* Lobby op mobiel: de hoofdcam is de actieve bezoeker (gast), niet de
     vaste lobby-starter stage. De starter-panel blijft bovenaan als klein
     lobby-frame; de gastwebcams (solo-cam kaarten) volgen eronder in 2 kolommen. */
  .room-page.layout-lobby > .room-main-grid {
    grid-template-areas:
      "media"
      "side" !important;
  }
  /* 1.9.95 FIX: ook de lobby-variant mag de starter-panel nooit laten
     ineenklappen (2px) — overlay-controls vielen anders over de footer. */
  .room-page.layout-lobby > .room-main-grid > .starter-panel,
  .room-page.layout-lobby-guest > .room-main-grid > .starter-panel {
    width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }
  .room-page.layout-lobby .starter-media-row,
  .room-page.layout-lobby #mainWebcamGrid {
    width: 100% !important;
    min-width: 0 !important;
  }
  .room-page.layout-lobby .starter-video-wrap {
    width: min(320px, 100%) !important;
    margin-inline: auto !important;
  }

  .room-page > .visitors-panel .visitor-grid,
  .room-page > .visitors-panel #visitorGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .room-page > .visitors-panel .visitor-tile,
  .room-page > .visitors-panel .video-tile,
  .room-page > .visitors-panel .visitor-video-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
  }

  .room-page > .visitors-panel video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  /* Landscape: webcams left, chat + users right. */
  @media screen and (orientation: landscape) {
    .room-page > .room-main-grid {
      grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.9fr) !important;
      grid-template-rows: auto !important;
      grid-template-areas: "media side" !important;
      gap: 10px !important;
    }

    .room-page .chat-panel {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
    }

    .room-page .chat-panel > .chat {
      height: min(60vh, 440px) !important;
      min-height: 220px !important;
    }

    .room-page .chat-panel > .participants {
      min-height: 150px !important;
      max-height: 34vh !important;
    }

    .room-page #mainWebcamGrid > .starter-video-wrap,
    .room-page #mainWebcamGrid > #selfVideoWrap,
    .room-page .starter-media-row > .starter-video-wrap,
    .room-page .starter-media-row > #selfVideoWrap {
      height: clamp(180px, 48vw, 430px) !important;
    }

    .room-page > .visitors-panel .visitor-grid,
    .room-page > .visitors-panel #visitorGrid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  /* Very narrow portrait screens: keep everything in one column. */
  @media screen and (max-width: 430px) and (orientation: portrait) {
    .room-page {
      padding: 4px !important;
    }

    .room-page > .room-main-grid {
      gap: 8px !important;
    }

    .room-page #mainWebcamGrid > .starter-video-wrap,
    .room-page #mainWebcamGrid > #selfVideoWrap,
    .room-page .starter-media-row > .starter-video-wrap,
    .room-page .starter-media-row > #selfVideoWrap {
      height: clamp(200px, 72vw, 400px) !important;
    }

    .room-page .chat-panel > .chat {
      height: clamp(260px, 58vh, 460px) !important;
    }

    .room-page .chat-panel > .participants {
      min-height: 150px !important;
    }

    .room-page .chat-input-row {
      grid-template-columns: auto minmax(0, 1fr) auto !important;
    }

    .room-page #gifButton {
      display: none !important;
    }

    .room-page > .visitors-panel .visitor-grid,
    .room-page > .visitors-panel #visitorGrid {
      gap: 4px !important;
    }
  }

  /* ---------- ADMIN MOBILE STRUCTURE ---------- */
  body.admin-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.admin-page .admin-shell,
  body.admin-page main.admin-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  body.admin-page .admin-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  body.admin-page .admin-header-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  body.admin-page .admin-nav,
  body.admin-page .admin-nav-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.admin-page .admin-nav-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 7px !important;
  }

  body.admin-page .admin-nav button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.admin-page .admin-tab,
  body.admin-page .admin-card,
  body.admin-page .stats,
  body.admin-page .admin-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.admin-page .stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.admin-page .admin-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  /* Compact admin webcam overview on mobile: four camera cards per row.
     Desktop grid sizing remains untouched. */
  body.admin-page .admin-cam-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.admin-page .admin-cam-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.admin-page .admin-cam-card .admin-cam-media {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
  }

  body.admin-page .admin-cam-card .admin-cam-body {
    padding: 3px !important;
  }

  body.admin-page .admin-cam-card .admin-cam-summary {
    gap: 2px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  body.admin-page .admin-cam-card .admin-cam-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
  }

  body.admin-page .admin-cam-card .admin-cam-type,
  body.admin-page .admin-cam-card .admin-cam-compact {
    display: none !important;
  }

  body.admin-page table {
    max-width: 100% !important;
  }

  body.admin-page .admin-table,
  body.admin-page .admin-card .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  @media screen and (max-width: 430px) {
    body.admin-page .admin-shell {
      padding: 5px !important;
    }
  }

  /* Footer always becomes a normal full-width block below mobile content. */
  .site-footer,
  footer.site-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    clear: both !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
  }

  .site-footer > div,
  .site-footer nav {
    max-width: 100%;
  }

  .site-footer .footer-disclaimer {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}


/*
  EPICSOLO — MOBILE CAM-FIRST STRUCTURE
  Mobile only. Desktop layout remains untouched.
*/
@media screen and (max-width: 767px) {
  html, body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

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

  /* =========================================================
     ROOM MOBILE ORDER
     1. Kamerstarter + gast/bezoeker/beta webcams: 50/50
     2. Compact, duidelijke controls
     3. Inklapbare gebruikerslijst
     4. Live chat
     5. Footer
     ========================================================= */

  .room-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5px !important;
    overflow-x: hidden !important;
  }

  .room-page > .room-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "media"
      "side" !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .room-page > .room-main-grid > .starter-panel {
    grid-area: media !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Main camera + visitor/guest/beta camera are equal-width mobile tiles. */
  .room-page #mainWebcamGrid,
  .room-page .starter-media-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .room-page #mainWebcamGrid > *,
  .room-page .starter-media-row > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .room-page #mainWebcamGrid video,
  .room-page .starter-media-row video,
  .room-page .starter-video,
  .room-page .self-video,
  .room-page #starterVideo,
  .room-page #selfVideo {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  /* If the structure exposes only one main camera, it remains full width.
     A second camera naturally becomes the 50/50 companion tile. */
  .room-page #mainWebcamGrid > :only-child,
  .room-page .starter-media-row > :only-child {
    grid-column: 1 / -1 !important;
  }

  /* Shared webcams below the main camera area also use 50/50 tiles. */
  .room-page > .visitors-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    clear: both !important;
    overflow: hidden !important;
  }

  .room-page > .visitors-panel .visitor-grid,
  .room-page > .visitors-panel #visitorGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  .room-page > .visitors-panel .visitor-tile,
  .room-page > .visitors-panel .visitor-video-frame,
  .room-page > .visitors-panel .video-tile,
  .room-page > .visitors-panel video {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  /* Controls: compact icons + short labels, below webcams. */
  .room-page .starter-panel > .controls,
  .room-page .room-role-controls,
  .room-page .controls {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 4px !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
  }

  .room-page .controls > *,
  .room-page .room-role-controls > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 44px !important;
    padding: 4px !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  /* Keep icon glyphs/images visible while suppressing long desktop labels. */
  .room-page .controls > *::first-letter,
  .room-page .room-role-controls > *::first-letter {
    font-size: 18px !important;
  }

  .room-page .controls > img,
  .room-page .controls > svg,
  .room-page .controls > i,
  .room-page .room-role-controls > img,
  .room-page .room-role-controls > svg,
  .room-page .room-role-controls > i {
    font-size: 18px !important;
  }

  /* The side container becomes a normal vertical mobile flow. */
  .room-page > .room-main-grid > .chat-panel {
    grid-area: side !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* User list first, compact and collapsible. */
  .room-page .chat-panel > .participants {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 260px !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: auto !important;
  }

  /* Remove the "who is looking at me" control in all mobile room layouts. */
  .room-page .chat-panel .who-looking,
  .room-page .chat-panel [id*="whoLooking"],
  .room-page .chat-panel [id*="who-looking"],
  .room-page .chat-panel [class*="who-looking"],
  .room-page .chat-panel [class*="looking-at-me"] {
    display: none !important;
  }

  /* Compact guest/user entries. */
  .room-page .participants .participant,
  .room-page #participantsList > *,
  .room-page .participants-list > * {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 !important;
  }

  .room-page .participants .participant-info,
  .room-page .participants .user-info {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  /* Live chat comes directly below the collapsible user list. */
  .room-page .chat-panel > .chat {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: clamp(300px, 52vh, 520px) !important;
    min-height: 300px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .room-page #messages,
  .room-page .chat-form,
  .room-page .chat-input-row,
  .room-page #chatInput {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .room-page #messages {
    overflow: auto !important;
  }

  .room-page .chat-input-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 4px !important;
  }

  /* Footer below all mobile room content. */
  .room-page + .site-footer,
  .site-footer,
  footer.site-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    clear: both !important;
    margin-top: 8px !important;
  }

  /* Portrait: same requested order, compact sizing. */
  @media screen and (orientation: portrait) {
    .room-page #mainWebcamGrid,
    .room-page .starter-media-row {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .room-page .chat-panel > .participants {
      max-height: 230px !important;
    }

    .room-page .chat-panel > .chat {
      height: clamp(300px, 50vh, 500px) !important;
    }
  }

  /* Landscape: two 50/50 webcams across the available width,
     followed by controls, users, chat, footer. */
  @media screen and (orientation: landscape) {
    .room-page #mainWebcamGrid,
    .room-page .starter-media-row {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .room-page #mainWebcamGrid video,
    .room-page .starter-media-row video {
      aspect-ratio: 4 / 3 !important;
    }

    .room-page .chat-panel > .participants {
      max-height: 220px !important;
    }

    .room-page .chat-panel > .chat {
      height: 48vh !important;
      min-height: 250px !important;
    }
  }

  @media screen and (max-width: 430px) {
    .room-page {
      padding: 4px !important;
    }

    .room-page #mainWebcamGrid,
    .room-page .starter-media-row {
      gap: 4px !important;
    }

    .room-page .controls {
      gap: 3px !important;
    }

    .room-page .controls > *,
    .room-page .room-role-controls > * {
      min-height: 38px !important;
      height: 40px !important;
    }

    .room-page .chat-panel > .participants {
      max-height: 210px !important;
      padding: 6px !important;
    }

    .room-page .chat-panel > .chat {
      min-height: 270px !important;
    }
  }

  /* Admin mobile: only the kamerstarter webcam is shown in the mobile
     admin camera area; desktop admin remains untouched. */
  body.admin-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.admin-page .admin-shell,
  body.admin-page main.admin-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
  }

  body.admin-page .admin-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.admin-page .admin-camera,
  body.admin-page .starter-video-wrap,
  body.admin-page #starterVideoWrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.admin-page .admin-camera video,
  body.admin-page .starter-video-wrap video,
  body.admin-page #starterVideo {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }
}


/*
  MOBILE FINAL COMPACT ROOM DETAILS
  Mobile only. Desktop layout remains untouched.
*/
@media screen and (max-width: 767px) {

  /* Kamerstarter + eerste gast/bezoeker/beta webcam = exact 50/50. */
  .room-page #mainWebcamGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .room-page #mainWebcamGrid > .starter-video-wrap,
  .room-page #mainWebcamGrid > .visitor-tile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .room-page #mainWebcamGrid video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  /* Alle overige webcams onderaan: altijd 50/50 in portrait én landscape. */
  .room-page #visitorGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .room-page #visitorGrid > .visitor-tile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .room-page #visitorGrid .visitor-video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  /* Compact, duidelijke webcamknoppen met iconen. */
  .room-page .controls {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 5px 0 0 !important;
  }

  .room-page .controls > button {
    min-width: 0 !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 3px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .room-page .controls > button:nth-child(1)::before { content: "🎥"; }
  .room-page .controls > button:nth-child(2)::before { content: "⏹️"; }
  .room-page .controls > button:nth-child(3)::before { content: "🔒"; }
  .room-page .controls > button:nth-child(4)::before { content: "🎙️"; }
  .room-page .controls > button:nth-child(5)::before { content: "⚙️"; }

  .room-page .controls > button::before {
    display: inline-block !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* Guest list: compact and toggle inside its own header. */
  .room-page .participants.mobile-guest-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 7px !important;
  }

  .room-page .participants.mobile-guest-panel .participants-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .room-page .participants.mobile-guest-panel .participants-head h3 {
    margin: 0 !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.05 !important;
  }

  .room-page .mobile-guests-toggle {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 58px !important;
    height: 38px !important;
    padding: 4px 10px !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .room-page .mobile-watchers-hidden {
    display: none !important;
  }

  /* The whole guest list can collapse; individual rows remain expandable. */
  .room-page .participants.mobile-guest-collapsed #participantsList {
    display: none !important;
  }

  .room-page .participants #participantsList {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .room-page .participants .participant-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .room-page .participants .participant-row > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  /* Compact: show green status dot beside the name, without the word "online". */
  .room-page .participants .participant-row:not(.participant-admin):not(.participant-moderator) > div:first-child::before {
    content: "🟢" !important;
    display: inline-block !important;
    margin-right: 4px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
  }

  .room-page .participants .presence-badge {
    display: none !important;
  }

  /* Secondary user info is hidden until the row is opened. */
  .room-page .participants .participant-row .participant-webcam-status,
  .room-page .participants .participant-row .guest-account-badge,
  .room-page .participants .participant-row .owner-badge,
  .room-page .participants .participant-row .beta-tester-badge {
    display: none !important;
  }

  .room-page .participants .participant-row.mobile-user-expanded .participant-webcam-status,
  .room-page .participants .participant-row.mobile-user-expanded .guest-account-badge,
  .room-page .participants .participant-row.mobile-user-expanded .owner-badge,
  .room-page .participants .participant-row.mobile-user-expanded .beta-tester-badge {
    display: inline-flex !important;
  }

  .room-page .participants .participant-row.mobile-user-expanded {
    padding-bottom: 7px !important;
  }

  /* Do not let the desktop watcher UI leak into mobile. */
  .room-page .participants .watchers-button,
  .room-page .participants #watchersButton {
    display: none !important;
  }

  /* Mobile flow: controls -> guests -> live chat -> footer. */
  .room-page .chat-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
  }

  .room-page .chat-panel > .participants {
    order: 1 !important;
  }

  .room-page .chat-panel > .chat {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .room-page .visitors-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
  }

  .room-page .site-footer,
  .room-page footer.site-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
    clear: both !important;
  }

  @media screen and (orientation: landscape) {
    .room-page #mainWebcamGrid,
    .room-page #visitorGrid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
}


/*
  MOBILE CAMERA GRID POLISH ONLY
  Desktop remains untouched.
*/
@media screen and (max-width: 767px) {

  /* Both top cameras occupy exactly half of the available mobile width,
     with no overflow, overlap or accidental fixed 640x480 sizing. */
  .room-page #mainWebcamGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  .room-page #mainWebcamGrid > * {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .room-page #mainWebcamGrid > .starter-video-wrap,
  .room-page #mainWebcamGrid > .visitor-tile {
    box-sizing: border-box !important;
    justify-self: stretch !important;
    align-self: start !important;
  }

  .room-page #mainWebcamGrid video,
  .room-page #mainWebcamGrid .visitor-video,
  .room-page #mainWebcamGrid .starter-video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    margin: 0 !important;
  }

  /* Keep the two tiles flush and equal in landscape as well. */
  @media screen and (orientation: landscape) {
    .room-page #mainWebcamGrid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      gap: 6px !important;
    }
  }

  /* The compact control row stays directly below the camera grid,
     with five equal-width buttons and no wrapping. */
  .room-page .starter-panel .controls,
  .room-page .room-role-controls,
  .room-page .controls {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .room-page .starter-panel .controls > button,
  .room-page .room-role-controls > button,
  .room-page .controls > button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 2px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .room-page .starter-panel .controls > button::before,
  .room-page .room-role-controls > button::before,
  .room-page .controls > button::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* Prevent an individual tile from forcing the row wider. */
  .room-page #mainWebcamGrid img,
  .room-page #mainWebcamGrid canvas,
  .room-page #mainWebcamGrid iframe {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Footer/shared webcams: strict two-column grid in both orientations. */
  .room-page #visitorGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .room-page #visitorGrid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .room-page #visitorGrid video,
  .room-page #visitorGrid .visitor-video {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }
}


/*
  EPICSOLO — FINAL MOBILE CAMERA / CHAT POLISH
  MOBILE ONLY. Desktop structure and behavior remain untouched.
*/
@media screen and (max-width: 767px) {

  /* =========================================================
     1) MOBILE CAMERA TILES — true 50/50, no fixed desktop size
     ========================================================= */
  .room-page #mainWebcamGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 6px !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .room-page #mainWebcamGrid > * {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
    align-self: start !important;
    overflow: hidden !important;
  }

  .room-page #mainWebcamGrid > .starter-video-wrap,
  .room-page #mainWebcamGrid > .visitor-tile {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .room-page #mainWebcamGrid video,
  .room-page #mainWebcamGrid .visitor-video,
  .room-page #mainWebcamGrid .starter-video {
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    margin: 0 !important;
  }

  /* Shared/footer webcams remain a strict 50/50 mobile grid. */
  .room-page #visitorGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .room-page #visitorGrid > * {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .room-page #visitorGrid video,
  .room-page #visitorGrid .visitor-video {
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  /* =========================================================
     2) WEBCAM BUTTONS — compact, one clean row, real controls
        Existing JS handlers remain untouched.
     ========================================================= */
  .room-page .room-role-controls,
  .room-page .starter-panel .controls {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)) !important;
    gap: 4px !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  .room-page .room-role-controls > button,
  .room-page .starter-panel .controls > button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: 44px !important;
    min-block-size: 44px !important;
    max-block-size: 44px !important;
    margin: 0 !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  /* Icon is selected by the actual control ID, not DOM position.
     This keeps the real button actions exactly as implemented. */
  .room-page #cam::before             { content: "🎥"; }
  .room-page #webcamToggle::before    { content: "⏹️"; }
  .room-page #visibility::before      { content: "🔒"; }
  .room-page #mic::before             { content: "🎙️"; }
  .room-page #mediaSettings::before   { content: "⚙️"; }
  .room-page #staffVisibility::before { content: "🛡️"; }
  .room-page #openChatLog::before     { content: "📜"; }
  .room-page #report::before          { content: "⚠️"; }
  .room-page #closeRoom::before       { content: "🚪"; }

  .room-page .room-role-controls > button::before,
  .room-page .starter-panel .controls > button::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* =========================================================
     3) LIVE CHAT — emoji + GIF + input + send all visible
     ========================================================= */
  .room-page .chat-input-row {
    display: grid !important;
    grid-template-columns: 46px 46px minmax(0, 1fr) 68px !important;
    gap: 4px !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .room-page .chat-input-row > #emojiButton,
  .room-page .chat-input-row > #gifButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    inline-size: 46px !important;
    min-inline-size: 46px !important;
    max-inline-size: 46px !important;
    block-size: 44px !important;
    min-block-size: 44px !important;
    max-block-size: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  /* Previous <=430px rule hid GIF; this mobile-only rule intentionally
     restores it so the existing GIF handler/picker remains available. */
  .room-page .chat-input-row > #gifButton {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .room-page .chat-input-row > #gifButton::before {
    content: none !important;
  }

  .room-page .chat-input-row > #chatInput {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: 44px !important;
    min-block-size: 44px !important;
    box-sizing: border-box !important;
  }

  .room-page .chat-input-row > button[type="submit"] {
    inline-size: 68px !important;
    min-inline-size: 68px !important;
    max-inline-size: 68px !important;
    block-size: 44px !important;
    min-block-size: 44px !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    box-sizing: border-box !important;
  }

  /* On very narrow portrait screens, shrink the four chat controls
     proportionally instead of allowing horizontal overflow. */
  @media screen and (max-width: 380px) {
    .room-page .chat-input-row {
      grid-template-columns: 40px 40px minmax(0, 1fr) 60px !important;
    }

    .room-page .chat-input-row > #emojiButton,
    .room-page .chat-input-row > #gifButton {
      inline-size: 40px !important;
      min-inline-size: 40px !important;
      max-inline-size: 40px !important;
    }

    .room-page .chat-input-row > button[type="submit"] {
      inline-size: 60px !important;
      min-inline-size: 60px !important;
      max-inline-size: 60px !important;
    }
  }

  /* 1.10.9 TEKSTGROOTTE-BALK: de hele invoerbalk (emoji/GIF/Kleurpalet/
     chatveld/px-dropdown/Stuur) schaalt met de gekozen chat-tekstgrootte
     (--ep-chat-font-size), zodat de knoppen en de px-dropdown niet te klein
     blijven hangen op mobiel terwijl de chattekst wel groot is. */
  .room-page .chat-input-row{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:6px !important;
  }
  .room-page .chat-input-row > #emojiButton,
  .room-page .chat-input-row > #gifButton,
  .room-page .chat-input-row > .chat-color-button{
    width:calc(var(--ep-chat-font-size,16px) + 26px) !important;
    min-width:calc(var(--ep-chat-font-size,16px) + 26px) !important;
    max-width:none !important;
    height:calc(var(--ep-chat-font-size,16px) + 26px) !important;
    min-height:calc(var(--ep-chat-font-size,16px) + 26px) !important;
    max-height:none !important;
    font-size:var(--ep-chat-font-size,16px) !important;
    white-space:nowrap !important;
  }
  .room-page .chat-input-row > .chat-color-button{width:calc(var(--ep-chat-font-size,16px) + 26px) !important}
  .room-page .chat-input-row > #chatInput,
  .room-page .chat-input-row > input{
    flex:1 1 90px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:calc(var(--ep-chat-font-size,16px) + 26px) !important;
    min-height:calc(var(--ep-chat-font-size,16px) + 26px) !important;
    font-size:var(--ep-chat-font-size,16px) !important;
    box-sizing:border-box !important;
  }
  /* 1.10.9 STAFF SPLIT-PANEL mobiel: bijna fullscreen, één tegelijk */
  .room-page ~ #staffSplit,
  #staffSplit{width:97vw !important;max-width:97vw !important;height:88vh !important}
  /* 1.10.9: dropdown weg — alleen nog de Stuur-knop schaalt met de fontsize */
  .room-page .chat-input-row > button[type="submit"]{
    width:auto !important;
    min-width:70px !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    padding:calc(var(--ep-chat-font-size,16px) * .18) 12px !important;
    font-size:var(--ep-chat-font-size,16px) !important;
    white-space:nowrap !important;
  }
}


/*
  EPICSOLO — MOBILE GUEST/VISITOR FINAL CAMERA ALIGNMENT
  MOBILE ONLY. Desktop CSS/structure is not changed.
*/
@media screen and (max-width: 767px) {

  /* Guest/visitor two-camera view:
     both camera containers use exactly the same width AND height. */
  .room-page.role-bezoeker #mainWebcamGrid.camera-pair-2x2,
  .room-page.role-beta-tester #mainWebcamGrid.camera-pair-2x2,
  .room-page #mainWebcamGrid.camera-pair-2x2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    align-items: start !important;
  }

  .room-page.role-bezoeker #mainWebcamGrid.camera-pair-2x2 > .starter-video-wrap,
  .room-page.role-bezoeker #mainWebcamGrid.camera-pair-2x2 > #selfVideoWrap,
  .room-page.role-beta-tester #mainWebcamGrid.camera-pair-2x2 > .starter-video-wrap,
  .room-page.role-beta-tester #mainWebcamGrid.camera-pair-2x2 > #selfVideoWrap,
  .room-page #mainWebcamGrid.camera-pair-2x2 > .starter-video-wrap,
  .room-page #mainWebcamGrid.camera-pair-2x2 > #selfVideoWrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-self: start !important;
  }

  .room-page #mainWebcamGrid.camera-pair-2x2 > .starter-video-wrap > video,
  .room-page #mainWebcamGrid.camera-pair-2x2 > #selfVideoWrap > video {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  /* The admin/staff-only controls are hidden again on mobile.
     The previous generic mobile button rule must not resurrect .hidden. */
  .room-page .room-role-controls > button.hidden,
  .room-page .room-role-controls > #staffVisibility,
  .room-page .room-role-controls > #openChatLog,
  .room-page .room-role-controls > #closeRoom {
    display: none !important;
    visibility: hidden !important;
  }

  /* Preserve the application's normal role gating for every other
     webcam control; only its mobile presentation is changed. */
  .room-page .room-role-controls > button[data-role-control] {
    box-sizing: border-box !important;
  }
}


/*
  EPICSOLO — MOBILE FINAL CENTERING / CAMERA HEIGHT
  MOBILE ONLY. Desktop structure and behavior remain untouched.
*/
@media screen and (max-width: 767px) {

  /* Keep both top cameras identical in width/height and centered
     inside the mobile camera area. */
  .room-page #mainWebcamGrid {
    justify-content: center !important;
    align-items: start !important;
  }

  .room-page #mainWebcamGrid > * {
    justify-self: stretch !important;
    align-self: start !important;
  }

  .room-page #mainWebcamGrid video,
  .room-page #mainWebcamGrid .visitor-video,
  .room-page #mainWebcamGrid .starter-video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  /* Center the mobile webcam controls under the two cameras.
     Do not alter their existing click handlers/actions. */
  .room-page .room-role-controls,
  .room-page .starter-panel .controls {
    justify-content: center !important;
    align-items: center !important;
    margin-inline: auto !important;
  }

  .room-page .room-role-controls > button,
  .room-page .starter-panel .controls > button {
    justify-self: center !important;
    align-self: center !important;
  }

  /* Footer/shared camera tiles stay centered and use the same
     50/50 geometry as the mobile camera pair. */
  .room-page #visitorGrid {
    justify-content: center !important;
    align-items: start !important;
  }

  .room-page #visitorGrid > * {
    justify-self: stretch !important;
    align-self: start !important;
  }

  .room-page #visitorGrid video,
  .room-page #visitorGrid .visitor-video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }
}


/*
  EPICSOLO — FINAL MOBILE CAMERA ALIGNMENT
  MOBILE ONLY. Desktop layout is untouched.
*/
@media screen and (max-width: 767px) {

  .room-page #mainWebcamGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, auto) !important;
    align-items: start !important;
    justify-items: stretch !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
  }

  /* The second mobile camera is a visitor-tile, not #selfVideoWrap. */
  .room-page #mainWebcamGrid > .starter-video-wrap,
  .room-page #mainWebcamGrid > .visitor-tile {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    align-self: start !important;
    justify-self: stretch !important;
  }

  .room-page #mainWebcamGrid > .visitor-tile .visitor-video-frame,
  .room-page #mainWebcamGrid > .visitor-tile video,
  .room-page #mainWebcamGrid > .starter-video-wrap video {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
  }

  /* Do not let the hidden privacy hint consume one of the five
     button-grid columns. */
  .room-page .room-role-controls > #privacyHint {
    display: none !important;
  }

  .room-page .room-role-controls,
  .room-page .starter-panel > .controls {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin: 6px auto 0 !important;
    justify-content: center !important;
    justify-items: stretch !important;
    align-items: center !important;
  }

  .room-page .room-role-controls > button,
  .room-page .starter-panel > .controls > button {
    justify-self: stretch !important;
    align-self: center !important;
  }

  @media screen and (max-width: 430px) {
    .room-page .room-role-controls,
    .room-page .starter-panel > .controls {
      width: 100% !important;
      max-width: 100% !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      gap: 3px !important;
    }
  }

  /* Keep landscape on exactly the same 50/50 geometry. */
  @media screen and (orientation: landscape) {
    .room-page #mainWebcamGrid > .starter-video-wrap,
    .room-page #mainWebcamGrid > .visitor-tile {
      aspect-ratio: 4 / 3 !important;
    }
  }
}

/*
  MOBILE ONLY — COMPACT 3x3 WEBCAM GRIDS
  Desktop structure remains untouched.
*/
@media screen and (max-width: 767px) {
  /* MOBILE ONLY: authoritative 3-column webcam grids.
     This block is intentionally last so older responsive rules cannot reduce
     the grid to two columns. Desktop rules are not touched. */
  .room-page > .visitors-panel .visitor-grid,
  .room-page > .visitors-panel #visitorGrid,
  .room-page #visitorGrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: start !important;
    justify-items: stretch !important;
  }

  .room-page > .visitors-panel .visitor-tile,
  .room-page > .visitors-panel .visitor-video-frame,
  .room-page > .visitors-panel .video-tile,
  .room-page #visitorGrid > .visitor-tile {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    aspect-ratio: 4 / 3 !important;
    align-self: start !important;
    justify-self: stretch !important;
  }

  .room-page > .visitors-panel video,
  .room-page #visitorGrid .visitor-video {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  /* Admin active webcams: three compact columns, continuing in rows of three. */
  body.admin-page .admin-cam-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: start !important;
  }

  body.admin-page .admin-cam-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.admin-page .admin-cam-card .admin-cam-media {
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* MOBILE PORTRAIT ONLY — three shared webcams per row.
   Active guest/visitor/beta tiles remain eligible for the footer roster;
   this changes presentation only and never changes desktop layout. */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .room-page #visitorGrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 5px !important;
  }

  .room-page #visitorGrid > .visitor-tile {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .room-page #visitorGrid > .visitor-tile video,
  .room-page #visitorGrid > .visitor-tile .visitor-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
  }
}

/* MOBILE LANDSCAPE ONLY — keep the existing two-column presentation. */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .room-page #visitorGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* 1.9.94 MOBIELE FIXES:
   1) ⚙ Instellingen-knop op de starter-cam overlapt de audio-balk (beide
      always-visible op touch). Zet de settings-knop boven de audio-balk.
   2) Privacy-watermark is te breed op smalle tegels — compactere tekst krijgt
      kleinere font/padding via anti-capture.css; hier borgen we max-breedte
      binnen de tegel en een ellipsis op kleinere tegels. */
@media (max-width: 767px) {
  /* 1.9.95: audio-balk smal rechts vrijhouden voor de ⚙-knop: balk krijgt
     right:118px, knop bottom net boven de balk op right:8px — geen overlap
     met de balk, geen watermark-rakking, knop blijft altijd klikbaar. */
  .room-page .starter-video-wrap .starter-audio-controls,
  .room-page .self-video-wrap .starter-audio-controls {
    right: 118px !important;
    bottom: 7px !important;
  }
  .room-page .starter-video-wrap .webcam-hover-settings,
  .room-page .self-video-wrap .webcam-hover-settings {
    /* Direct naast/boven de audio-balk, binnen de tegel, vrij van de
       watermarkregel (bovenin) en de audio-balk (onderin). */
    bottom: 12px !important;
    right: 8px !important;
  }
  .room-page .starter-video-wrap .webcam-hover-settings button,
  .room-page .self-video-wrap .webcam-hover-settings button {
    padding: 6px 9px !important;
    font-size: 11px !important;
  }
  .epic-privacy-watermark {
    max-width: calc(100% - 12px) !important;
    font-size: 8px !important;
    padding: 2px 4px !important;
  }
}