/* Calls on phones (the mobile wave, docs/plans/mobile.md, lane V): the phone call pane with its
   bottom control bar, CSS pseudo-fullscreen and the "Tap to enable audio" chip. Phone-only rules go
   under html[data-layout="phone"]; loaded after client/mobile.css (client/index.html). */

/* "Tap to enable audio" (client/js/audioUnlock.js): shown in any layout while the browser holds
   a call's sound back until a tap, just below the channel header. Above the call, popouts and the
   incoming call card. */
.audio-unlock { position: fixed; top: calc(60px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px 8px 12px; border: 0; border-radius: 20px; background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); cursor: pointer; }
.audio-unlock:hover { filter: brightness(1.1); }
.audio-unlock:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Pseudo-fullscreen (app.js setPseudoFullscreen): where the Fullscreen API is missing (iPhone
   Safari), a tile covers the window. Its button turns into Exit Full Screen and the call bar floats
   over the bottom, so the call's controls stay in reach. */
.call-stage > .tile.pseudo-fullscreen, .call-strip > .tile.pseudo-fullscreen { position: fixed; inset: 0; z-index: 50; width: auto; height: auto; min-width: 0; margin: 0; border-radius: 0; background: #000; cursor: default; }
.tile.pseudo-fullscreen video { object-fit: contain; }
.tile.pseudo-fullscreen .fullscreen-btn { display: block; top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); bottom: auto; padding: 8px; border-radius: 50%; }
.tile.pseudo-fullscreen .label { top: calc(12px + env(safe-area-inset-top)); bottom: auto; left: calc(8px + env(safe-area-inset-left)); }
.call-view:has(.tile.pseudo-fullscreen) > .call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; padding-bottom: calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); }

/* On touch screens the tile fullscreen button, the strip toggle and the PiP hide button stay
   shown: client/mobile.css (the (hover: none) audit) owns those rules. */

/* ---- the phone call pane: the call fills the pane, the controls sit at the bottom */
html[data-layout="phone"] .call-stage { padding: 8px 8px 4px; }
html[data-layout="phone"] .call-stage.grid, html[data-layout="phone"] .call-grid.no-strip .call-stage, html[data-layout="phone"] .call-grid.strip-hidden .call-stage { padding-bottom: 8px; }
html[data-layout="phone"] .call-strip { padding: 4px 8px 6px; }
html[data-layout="phone"] .call-strip > .tile { height: 84px; width: calc(84px * 16 / 9); min-width: 96px; }
html[data-layout="phone"] .call-join { padding: 32px 16px; }
.call-bar.phone { justify-content: space-evenly; gap: 6px; padding: 10px max(8px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.call-bar.phone button { flex: none; width: min(52px, 12.5vw); height: min(52px, 12.5vw); }
.call-bar.phone .call-popout-button { margin-left: 0; }

/* The voice channel's chat on a phone: a sheet under the call instead of a column beside it. */
html[data-layout="phone"] .chat.with-voice-chat { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(200px, 42%) minmax(0, 1fr) auto; grid-template-areas: 'header' 'call' 'messages' 'composer'; }
html[data-layout="phone"] .chat.with-voice-chat > .messages { border-left: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.35); position: relative; z-index: 1; padding-top: 6px; }
html[data-layout="phone"] .chat.with-voice-chat > .composer-wrap { border-left: 0; }
html[data-layout="phone"] .chat.with-voice-chat .call-bar.phone { padding-bottom: 16px; }