/* ROOMS_MOBILE_SHELL_V109
   Canonical phone layout contract for Rooms.

   Rules:
   1. Live/canvas content is always the background interaction surface.
   2. Persistent navigation owns protected space; nothing interactive may sit under it.
   3. Floating A/V and menus dock outside protected navigation/tray zones.
   4. Full-screen presentation owns its own protected action tray.
   5. Application dialogs and nested dialogs always render above canvas, A/V, nav,
      and presentation controls.
   6. Touch targets stay usable while visual chrome remains compact.
   7. Coarse-pointer phones keep this same shell in portrait and landscape; viewport
      width alone must never turn a rotated phone into a desktop workspace.
*/

:root {
  --rooms-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rooms-mobile-nav-visual: 50px;
  --rooms-mobile-nav-total: calc(var(--rooms-mobile-nav-visual) + var(--rooms-mobile-safe-bottom));
  --rooms-mobile-gap: 8px;
  --rooms-mobile-protected-bottom: var(--rooms-mobile-nav-total);
  --rooms-mobile-float-bottom: calc(var(--rooms-mobile-protected-bottom) + var(--rooms-mobile-gap));
  --rooms-mobile-presentation-tray-reserve: 154px;

  --rooms-z-canvas: 1;
  --rooms-z-nav: 2000;
  --rooms-z-float: 3000;
  --rooms-z-presentation: 4000;
  --rooms-z-popover: 6000;
  --rooms-z-modal: 7000;
  --rooms-z-modal-nested: 7100;
}

/* Application-level surfaces always win the stacking contest. */
.modal-backdrop { z-index: var(--rooms-z-modal) !important; }
.modal-overlay { z-index: var(--rooms-z-modal-nested) !important; }

@media (max-width: 819px) {
  /* ------------------------------------------------------------------
     1. Compact, protected bottom navigation
     ------------------------------------------------------------------ */
  .mobile-bottom-nav,
  .mobile-bottom-nav-unified {
    z-index: var(--rooms-z-nav) !important;
    height: var(--rooms-mobile-nav-total) !important;
    min-height: var(--rooms-mobile-nav-total) !important;
    padding: 2px 10px var(--rooms-mobile-safe-bottom) !important;
    gap: 4px !important;
  }
  .mobile-bottom-nav button,
  .mobile-bottom-nav-unified button {
    min-height: 44px !important;
    height: 44px !important;
    gap: 1px !important;
    border-radius: 10px !important;
    padding: 1px 8px !important;
  }
  .mobile-bottom-nav button > span,
  .mobile-bottom-nav-unified button > span {
    font-size: 17px !important;
    line-height: 1 !important;
  }
  .mobile-bottom-nav button small,
  .mobile-bottom-nav-unified button small {
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
  }

  /* The Room viewport reserves the same protected zone the nav occupies. */
  .mobile-room-stage,
  .mobile-room-stage-v102,
  .mobile-room-stage-v103 {
    padding-bottom: calc(var(--rooms-mobile-nav-visual) + 4px + var(--rooms-mobile-safe-bottom)) !important;
  }

  /* ------------------------------------------------------------------
     2. Floating controls share one bottom anchor
     ------------------------------------------------------------------ */
  .video-call-dock,
  .mobile-room-stage > .mobile-pane.active > .audio-dock,
  .mobile-room-stage-v102 .audio-dock {
    z-index: var(--rooms-z-float) !important;
    bottom: var(--rooms-mobile-float-bottom) !important;
  }

  .session-control-menu,
  .call-menu-popover {
    z-index: var(--rooms-z-popover) !important;
    bottom: var(--rooms-mobile-float-bottom) !important;
  }

  /* Minimized A/V is a compact, reachable dock above the nav rather than a
     large banner that can slip under the bottom chrome. */
  .video-call-dock.minimized {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    padding: 5px 7px !important;
    border-radius: 13px !important;
  }
  .video-call-dock.minimized .video-call-heading {
    min-height: 44px !important;
    padding: 0 !important;
    gap: 6px !important;
  }
  .video-call-dock.minimized .video-call-heading > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .video-call-dock.minimized .video-call-heading strong {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .video-call-dock.minimized .video-call-heading small {
    display: none !important;
  }
  .video-call-dock.minimized .video-heading-actions {
    flex: 0 0 auto !important;
  }
  .video-call-dock.minimized .video-reset-layout,
  .video-call-dock.minimized .video-minimize {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }

  /* Expanded A/V must also remain reachable rather than growing underneath
     persistent navigation. */
  .video-call-dock:not(.minimized) {
    max-height: calc(100dvh - var(--rooms-mobile-protected-bottom) - 24px) !important;
    overflow: auto !important;
  }

  /* Focus followers replace the normal bottom nav with their own compact dock;
     reserve that dock so A/V and popovers still stay above it. */
  .focus-follower {
    --rooms-mobile-protected-bottom: calc(54px + var(--rooms-mobile-safe-bottom));
  }
  .focus-follower-dock {
    z-index: var(--rooms-z-nav) !important;
    bottom: calc(6px + var(--rooms-mobile-safe-bottom)) !important;
    min-height: 46px !important;
  }
  .focus-follower-dock button { min-height: 44px !important; }

  /* ------------------------------------------------------------------
     3. Full-screen presentation gets its own protected bottom tray
     ------------------------------------------------------------------ */
  .presentation-active {
    --rooms-mobile-protected-bottom: calc(var(--rooms-mobile-presentation-tray-reserve) + var(--rooms-mobile-safe-bottom));
    --rooms-mobile-float-bottom: calc(var(--rooms-mobile-protected-bottom) + var(--rooms-mobile-gap));
  }

  .presentation-overlay {
    z-index: var(--rooms-z-presentation) !important;
    left: 6px !important;
    right: 6px !important;
    bottom: max(6px, var(--rooms-mobile-safe-bottom)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 5px !important;
    min-height: 0 !important;
    padding: 5px 6px !important;
    border-radius: 12px !important;
  }
  .presentation-overlay-left { display: none !important; }

  .presentation-overlay-actions {
    grid-row: 1 !important;
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    align-items: stretch !important;
    justify-self: stretch !important;
  }
  .presentation-overlay-actions > *,
  .presentation-overlay-actions > button {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  .presentation-overlay-actions > button {
    min-height: 44px !important;
    padding: 0 5px !important;
    white-space: normal !important;
    line-height: 1.08 !important;
    text-align: center !important;
    font-size: 11px !important;
  }
  .presentation-overlay-actions .session-media-control,
  .presentation-overlay-actions .call-menu-trigger {
    width: 100% !important;
    min-width: 0 !important;
  }
  .presentation-overlay-actions .call-menu-trigger {
    min-height: 44px !important;
    justify-content: center !important;
  }

  .presentation-page-controls {
    grid-row: 2 !important;
    grid-column: 1 !important;
    justify-self: center !important;
    margin-top: 0 !important;
  }
  .presentation-page-controls button {
    min-height: 44px !important;
  }

  /* In presentation mode the A/V dock belongs above the presentation tray,
     never inside it. This is the key protected-zone guarantee. */
  .presentation-active .video-call-dock {
    bottom: var(--rooms-mobile-float-bottom) !important;
  }

  /* Call and Session menus opened from presentation also clear the tray. */
  .presentation-active .call-menu-popover,
  .presentation-active .session-control-menu,
  .presentation-overlay .call-menu-popover {
    bottom: var(--rooms-mobile-float-bottom) !important;
    top: auto !important;
  }

  /* ------------------------------------------------------------------
     4. Popups are viewport-bounded application surfaces
     ------------------------------------------------------------------ */
  .presentation-active .modal-backdrop {
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      8px
      max(10px, var(--rooms-mobile-safe-bottom)) !important;
    place-items: center !important;
  }
  .presentation-active .tools-modal,
  .presentation-active .rooms-modal {
    width: min(680px, calc(100vw - 16px)) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top, 0px)) - max(20px, var(--rooms-mobile-safe-bottom))) !important;
    overflow: auto !important;
  }
  .presentation-active .modal-overlay {
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      8px
      max(10px, var(--rooms-mobile-safe-bottom)) !important;
    place-items: center !important;
  }
  .presentation-active .dialog-card {
    width: min(560px, calc(100vw - 16px)) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top, 0px)) - max(20px, var(--rooms-mobile-safe-bottom))) !important;
    overflow: auto !important;
  }

  /* Toasts and transient prompts should not be hidden by bottom chrome. */
  .action-feedback-toast,
  .return-live-prompt,
  .focus-status-chip {
    z-index: var(--rooms-z-popover) !important;
  }
}

@media (max-width: 340px) {
  /* Very narrow phones need a taller presentation reserve because the action
     grid becomes two columns. */
  :root { --rooms-mobile-presentation-tray-reserve: 196px; }
  .presentation-overlay-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------
   5. Phone landscape: same shell, different geometry
   --------------------------------------------------------------------
   A rotated touch phone can be wider than the 819px portrait breakpoint. We
   identify it by coarse input + short landscape viewport and keep the mobile
   Room UI, while moving persistent navigation to a compact left rail so scarce
   vertical space stays available to Live, Workspace, video and presentation.
*/
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  :root {
    --rooms-mobile-landscape-rail: 54px;
    --rooms-mobile-landscape-left-gap: 8px;
    --rooms-mobile-protected-bottom: var(--rooms-mobile-safe-bottom);
    --rooms-mobile-float-bottom: calc(var(--rooms-mobile-safe-bottom) + 8px);
    --rooms-mobile-presentation-tray-reserve: 104px;
  }

  /* Normal Room navigation becomes a compact side rail with full-size touch
     targets. It no longer consumes a horizontal strip of a short viewport. */
  html body #root .room-app-v10.mobile-room .mobile-bottom-nav,
  html body #root .room-app-v10.mobile-room .mobile-bottom-nav-unified {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    inset: auto !important;
    left: max(5px, env(safe-area-inset-left, 0px)) !important;
    bottom: max(5px, var(--rooms-mobile-safe-bottom)) !important;
    width: var(--rooms-mobile-landscape-rail) !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 44px !important;
    gap: 3px !important;
    padding: 4px !important;
    margin: 0 !important;
    border: 1px solid rgba(16, 88, 73, .2) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 10px 28px rgba(18,58,48,.16) !important;
    transform: none !important;
    z-index: var(--rooms-z-nav) !important;
  }
  html body #root .room-app-v10.mobile-room .mobile-bottom-nav > button,
  html body #root .room-app-v10.mobile-room .mobile-bottom-nav-unified > button {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 2px !important;
    gap: 1px !important;
    border-radius: 9px !important;
  }
  html body #root .room-app-v10.mobile-room .mobile-bottom-nav > button > span,
  html body #root .room-app-v10.mobile-room .mobile-bottom-nav-unified > button > span {
    font-size: 15px !important;
  }
  html body #root .room-app-v10.mobile-room .mobile-bottom-nav > button > small,
  html body #root .room-app-v10.mobile-room .mobile-bottom-nav-unified > button > small {
    font-size: 7.5px !important;
    line-height: 1 !important;
    white-space: normal !important;
  }

  /* The content area itself reserves the rail, so even an interactive canvas
     never lives underneath persistent navigation. */
  html body #root .room-app-v10.mobile-room .mobile-room-stage,
  html body #root .room-app-v10.mobile-room .mobile-room-stage-v102,
  html body #root .room-app-v10.mobile-room .mobile-room-stage-v103 {
    padding-left: calc(var(--rooms-mobile-landscape-rail) + var(--rooms-mobile-landscape-left-gap) + env(safe-area-inset-left, 0px)) !important;
    padding-bottom: max(4px, var(--rooms-mobile-safe-bottom)) !important;
  }
  html body #root .room-app-v10.mobile-room .mobile-room-stage-v103 .mobile-pane.active {
    padding-bottom: max(4px, var(--rooms-mobile-safe-bottom)) !important;
  }

  /* Keep only the canonical Live / Workspace switch in landscape. */
  html body #root .room-app-v10.mobile-room .workspace-top-button {
    display: none !important;
  }

  /* Workspace panes remain single-scroll surfaces. Chat reserves its header,
     tabs and composer while only message history scrolls. */
  html body #root .room-app-v10.mobile-room .mobile-room-stage-v103 .mobile-pane.panel-pane {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }
  html body #root .room-app-v10.mobile-room .mobile-room-stage-v103 .mobile-pane.chat-pane {
    overflow: hidden !important;
  }
  html body #root .room-app-v10.mobile-room .mobile-room-stage-v103 .chat-pane.active .room-chat-panel-v103 {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html body #root .room-app-v10.mobile-room .mobile-room-stage-v103 .chat-pane.active .chat-message-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }
  html body #root .room-app-v10.mobile-room .mobile-room-stage-v103 .resource-pane > .resources-panel {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  /* A/V stays a mobile dock after rotation. Desktop drag/resize is disabled in
     the component, and CSS guarantees it cannot collide with the left rail. */
  .video-call-dock {
    z-index: var(--rooms-z-float) !important;
    top: auto !important;
    left: calc(var(--rooms-mobile-landscape-rail) + var(--rooms-mobile-landscape-left-gap) + env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: var(--rooms-mobile-float-bottom) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    border-radius: 13px !important;
    transform: translateZ(0) !important;
  }
  .video-call-dock.minimized {
    left: auto !important;
    width: min(360px, calc(100vw - var(--rooms-mobile-landscape-rail) - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))) !important;
    padding: 4px 6px !important;
  }
  .video-call-dock.minimized .video-call-heading {
    min-height: 44px !important;
    padding: 0 !important;
  }
  .video-call-dock.minimized .video-call-heading small { display: none !important; }
  .video-call-dock.minimized .video-reset-layout,
  .video-call-dock.minimized .video-minimize {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  .video-call-dock:not(.minimized) {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--rooms-mobile-safe-bottom) - 16px) !important;
    overflow: auto !important;
  }
  .video-resize-handle { display: none !important; }

  /* Bottom-origin menus become viewport-bounded sheets that also clear the
     navigation rail. Resource menus are promoted here too even if their older
     component-level breakpoint classified a wide landscape viewport as desktop. */
  .call-menu-popover,
  .session-control-menu,
  .resource-more-menu-v103 {
    position: fixed !important;
    z-index: var(--rooms-z-popover) !important;
    top: auto !important;
    left: calc(var(--rooms-mobile-landscape-rail) + var(--rooms-mobile-landscape-left-gap) + env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: var(--rooms-mobile-float-bottom) !important;
    width: auto !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - var(--rooms-mobile-safe-bottom)) !important;
    overflow: auto !important;
  }
  .notification-popover {
    position: fixed !important;
    z-index: var(--rooms-z-popover) !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    left: calc(var(--rooms-mobile-landscape-rail) + var(--rooms-mobile-landscape-left-gap) + env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    width: auto !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - var(--rooms-mobile-safe-bottom)) !important;
    overflow: auto !important;
  }

  /* Focus followers replace persistent navigation with a protected bottom dock. */
  .focus-follower {
    --rooms-mobile-protected-bottom: calc(52px + var(--rooms-mobile-safe-bottom));
    --rooms-mobile-float-bottom: calc(var(--rooms-mobile-protected-bottom) + 8px);
  }
  .focus-follower .mobile-room-stage-v103 {
    padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
    padding-bottom: calc(52px + var(--rooms-mobile-safe-bottom)) !important;
  }
  .focus-follower-dock {
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(5px, var(--rooms-mobile-safe-bottom)) !important;
    min-height: 44px !important;
    z-index: var(--rooms-z-nav) !important;
  }
  .focus-follower-dock button { min-height: 44px !important; }

  /* Full-screen presentation uses a shallow landscape tray. Controls spread
     horizontally instead of consuming multiple vertical rows. */
  .presentation-active {
    --rooms-mobile-protected-bottom: calc(var(--rooms-mobile-presentation-tray-reserve) + var(--rooms-mobile-safe-bottom));
    --rooms-mobile-float-bottom: calc(var(--rooms-mobile-protected-bottom) + 8px);
  }
  .presentation-overlay {
    z-index: var(--rooms-z-presentation) !important;
    left: max(6px, env(safe-area-inset-left, 0px)) !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(5px, var(--rooms-mobile-safe-bottom)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 4px !important;
    min-height: 0 !important;
    padding: 4px 5px !important;
    border-radius: 11px !important;
  }
  .presentation-overlay-left { display: none !important; }
  .presentation-overlay-actions {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .presentation-overlay-actions > *,
  .presentation-overlay-actions > button,
  .presentation-overlay-actions .session-media-control,
  .presentation-overlay-actions .call-menu-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .presentation-overlay-actions > button {
    min-height: 44px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }
  .presentation-overlay-actions .call-menu-trigger {
    min-height: 44px !important;
    justify-content: center !important;
  }
  .presentation-page-controls {
    grid-row: 2 !important;
    grid-column: 1 !important;
    justify-self: center !important;
    margin: 0 !important;
  }
  .presentation-page-controls button { min-height: 40px !important; }

  /* During presentation the media dock and all menus clear the entire tray. */
  .presentation-active .video-call-dock {
    left: auto !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: var(--rooms-mobile-float-bottom) !important;
    width: min(360px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))) !important;
    max-height: calc(100dvh - var(--rooms-mobile-protected-bottom) - 16px) !important;
  }
  .presentation-active .video-call-dock:not(.minimized) {
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
  }
  .presentation-active .call-menu-popover,
  .presentation-active .session-control-menu,
  .presentation-overlay .call-menu-popover,
  .presentation-active .resource-more-menu-v103 {
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: var(--rooms-mobile-float-bottom) !important;
    top: auto !important;
  }

  /* Dialogs remain top-layer viewport surfaces on short landscape screens. */
  .modal-backdrop,
  .presentation-active .modal-backdrop {
    padding:
      max(6px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(6px, var(--rooms-mobile-safe-bottom))
      max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    place-items: center !important;
  }
  .rooms-modal,
  .tools-modal,
  .presentation-active .rooms-modal,
  .presentation-active .tools-modal,
  .dialog-card {
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, var(--rooms-mobile-safe-bottom))) !important;
    overflow: auto !important;
  }

  .action-feedback-toast,
  .return-live-prompt,
  .focus-status-chip {
    z-index: var(--rooms-z-popover) !important;
  }
}