/*
  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;
  }
}

/* EIGEN STATUS IN ÉÉN KLIK — MOBIEL (1.10.46)
   De status op je eigen rij is een knop. Op een telefoon moet die groot genoeg
   zijn om met de duim te raken, zonder de rij hoger te maken dan nodig. */
@media (max-width: 767px){
  .presence-badge.presence-toggle{
    display:inline-flex !important;
    align-items:center;
    gap:4px;
    min-height:26px;
    padding:3px 8px !important;
    margin-left:4px !important;
    font-size:11px !important;
    -webkit-tap-highlight-color:transparent;
  }
  /* Geen eigen achtergrond: de badge erft het thema (licht én donker). */
  .presence-badge.presence-toggle:active{opacity:.75}
}