:root { --dock-top: max(32px, env(safe-area-inset-top)); --utility-size: 54px; --utility-step: 62px; }
#receiver { grid-template-columns: minmax(0, 1fr); }
#receiver .cast-controls { grid-area: 1 / 1; justify-self: center; width: min(440px, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
#receiver .cast-controls > :is(#liveChat, #tellJoke, #broadcastControl) { grid-area: auto; width: 100%; min-width: 0;
  height: var(--play-height); border-radius: 999px; padding: 0 12px; font: italic 800 18px/1.2 var(--menu-font);
  text-transform: none; white-space: nowrap; pointer-events: auto; }
#receiver #broadcastControl { width: 156px; padding: 0; }
#receiver .cast-controls #chatSwitch { position: absolute; grid-area: auto; bottom: calc(100% + 8px);
  left: 0; width: 44px; height: 44px; }
#broadcastControl .broadcast-action { padding: 12px; gap: 8px; }
#liveChat { background: var(--bar); color: var(--wire); border: 1px solid var(--edge); backdrop-filter: blur(14px); }
#liveChat:hover { background: var(--soft); border-color: var(--wire); }
#receiver > :is(#gear, #volumeToggle, #rssToggle), #liveDock { position: fixed; right: var(--dock-inset);
  width: var(--utility-size); height: var(--utility-size); margin: 0; }
#receiver > #gear { top: var(--dock-top); }
#liveDock { top: calc(var(--dock-top) + var(--utility-step)); z-index: 9; }
#receiver > #volumeToggle { top: calc(var(--dock-top) + 2 * var(--utility-step)); }
#receiver > #rssToggle { top: calc(var(--dock-top) + 3 * var(--utility-step)); }
#liveMic { display: grid; place-items: center; width: 100%; height: 100%; padding: 14px; border: 1px solid var(--edge);
  border-radius: 50%; color: var(--wire); background: var(--bar); backdrop-filter: blur(14px); touch-action: manipulation; }
#liveMic svg { width: 100%; height: 100%; }
#liveMic[aria-pressed=false] .mic-on, #liveMic[aria-pressed=true] .mic-off { display: none; }
#liveMic[aria-pressed=true] { background: var(--wire); color: var(--wire-ink); }
#liveMic:hover { border-color: var(--wire); background: var(--soft); color: var(--wire); }
#liveMic:disabled { cursor: wait; opacity: .55; }
#rssPanel, #volumePanel, #settingsPanel { position: fixed; top: var(--dock-top); bottom: auto;
  right: calc(var(--dock-inset) + var(--utility-size) + 12px);
  max-height: calc(100dvh - var(--dock-top) - var(--dock-inset)); }
#receiver[data-live-chat] .cast-controls { display: none; }
#liveChatControls { position: fixed; left: 50%; bottom: max(var(--dock-inset), calc(var(--keyboard-inset, 0px) + 12px)); transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px)); display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 10px 12px; padding: 12px; border: 1px solid var(--edge);
  border-radius: 20px; background: #0c1712f5; pointer-events: none; }
#liveChatControls > * { pointer-events: auto; }
#liveChatHeading { grid-area: 1 / 1; min-width: 0; display: grid; gap: 3px; padding-left: 4px; color: var(--slate-text); }
#liveChatHeading span:first-child { font: italic 750 18px/1.2 var(--menu-font); text-wrap: balance; }
#liveChatHeading span:last-child { font: 12px/1.4 var(--menu-fallback); color: #c7d5bc; }
#liveEnd { grid-area: 1 / 2; min-height: 44px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 999px;
  color: var(--wire); background: var(--bar); font: italic 750 14px/1.2 var(--menu-font); }
#liveEnd:hover { border-color: var(--wire); background: var(--soft); }
#livePopover { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - var(--dock-inset) - 180px);
  overflow: auto; overscroll-behavior: contain; padding: 12px; background: var(--bar); color: var(--slate-text);
  border: 1px solid var(--edge); border-radius: 15px; backdrop-filter: blur(16px); text-align: center; }
#liveStatus { margin: 0; max-width: 32ch; font: 15px/1.4 var(--menu-fallback); text-wrap: pretty; }
#livePopover button { min-height: 44px; margin-top: 8px; padding: 10px 16px; border: 1px solid var(--edge); border-radius: 999px; color: var(--wire); background: var(--soft); font: 15px/1.3 var(--menu-fallback); }
#liveChallenge { max-width: 100%; text-shadow: none; }
#liveStatus:not([hidden]) + #liveChallenge:not([hidden]) { margin-top: 12px; }
.verification-label { margin: 0 0 8px; color: #e0ead5; font: 12px/1.4 var(--menu-fallback); }
.verification-label { display: flex; align-items: center; justify-content: center; gap: 10px; }
[data-verification-state="loading"] .verification-label::before,
[data-verification-state="checking"] .verification-label::before { content: ''; flex: none; width: 14px; height: 14px; border: 2px dotted currentColor; border-right-color: transparent; border-radius: 50%; animation: verification-spin 1.2s linear infinite; }
[data-verification-state="loading"] .verification-viewport { outline: 1px dashed currentColor; outline-offset: -1px; }
@keyframes verification-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-verification-state] .verification-label::before { animation: none; }
}
#liveChallenge iframe { display: block; margin-inline: auto; border: 0; border-radius: 5px; width: 316px; max-width: 100%; height: 82px; background: transparent; color-scheme: normal; }
#liveChallenge .verification-viewport { width: min(360px, 100%); height: calc(100px * var(--verification-scale, 1)); margin-inline: auto; overflow: hidden; }
#liveChallenge .verification-viewport iframe { margin: 0; width: 360px; max-width: none; height: 100px; transform: scale(var(--verification-scale, 1)); transform-origin: top left; }
.verification-open { min-height: 44px; padding: 10px 18px; border: 1px solid var(--edge); border-radius: 999px;
  color: var(--wire); background: #0c190ff5; font: 600 15px/1.3 var(--menu-fallback); }
#signal #stage { cursor: default; }
#receiver:has(.receiver-panel:not([hidden]), #volumePanel:not([hidden])) { z-index: 11; }
#liveHost { position: absolute; inset: 0; pointer-events: none; }
#picture { --presenter-size: min(100cqh, 98cqw); }
#livePoster, #liveHost > canvas { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: block; width: var(--presenter-size); height: var(--presenter-size); object-fit: contain; object-position: center bottom; pointer-events: none; }
#liveHost :is(video, audio) { position: absolute; width: 1px; height: 1px; opacity: 0; }
#picture:has(#proHost:not([hidden])) #livePoster, #picture[data-cast] #livePoster { visibility: hidden; }
html[data-power=cold] #livePoster, #picture[data-live]:not([data-live-wardrobe=changing]):not(:has(#liveHost[data-video=playing])) #livePoster { visibility: visible; }
#picture[data-live] #proHost, #picture:has(#liveHost[data-video=playing]) #livePoster { visibility: hidden; }
#picture[data-live-wardrobe=changing] #proHost { visibility: visible; }
#picture[data-live-wardrobe=changing] :is(#livePoster, #liveHost) { visibility: hidden; }
#liveLock { max-width: 360px; height: auto; max-height: calc(100dvh - 32px); overflow: auto; border-width: 1px; border-radius: 16px; }
#liveLogin { display: grid; gap: 14px; }
#liveLogin h2 { font-size: 18px; color: var(--text); text-transform: none; }
#liveLogin input { min-width: 0; padding: 12px; border: 1px solid var(--edge); border-radius: 4px; font: inherit; }
#liveLogin > div { display: flex; justify-content: flex-end; gap: 10px; }
@media (orientation: portrait) {
  #picture { --presenter-size: min(100cqh, 180cqw); }
  #picture #hostFrame { width: var(--presenter-size); bottom: 0; }
}
#picture[data-cast] #hostFrame { width: var(--presenter-size); transform: translateX(-50%); }
#liveLock:not([open]) { display: none; }
#liveText { grid-area: 2 / 1 / 3 / -1; display: flex; align-items: flex-end; gap: 6px; width: 100%; margin: 0; min-width: 0; padding: 5px 5px 5px 14px; border: 1px solid var(--edge); border-radius: 28px; background: #07100c; box-sizing: border-box; }
#liveMessage { flex: 1; min-width: 0; height: 44px; resize: none; box-sizing: border-box; padding: 10px 0; border: 0; background: transparent; color: #fff6e8; caret-color: var(--wire); font: 16px/1.4 var(--menu-fallback); }
#liveMessage::placeholder { color: #c7d5bc; opacity: 1; }
#liveSend { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; background: var(--wire); color: var(--wire-ink); }
#liveText:focus-within { border-color: var(--wire); }
#liveMessage:focus-visible { outline: none; }
#liveText :focus-visible { outline-offset: 2px; }

@media (max-width: 600px), (max-height: 600px) and (pointer: coarse) {
  :root { --utility-size: 44px; --utility-step: 50px; --dock-top: max(20px, env(safe-area-inset-top));
    --dock-inset: max(16px, env(safe-area-inset-left), env(safe-area-inset-right), env(safe-area-inset-bottom)); }
  #stationLogo { --logo-width: min(12.1875cqw, 14.0625cqh, 108.75px); }
  .startup-content img { width: 55px; }
  /* Smaller faces keep the full 44px touch targets. */
  #receiver :is(#gear, #liveMic, #volumeToggle, #rssToggle) {
    background: transparent; border: 0; box-shadow: none; backdrop-filter: none; isolation: isolate; }
  #liveMic { position: relative; }
  #receiver :is(#gear, #liveMic, #volumeToggle, #rssToggle)::before {
    content: ''; position: absolute; inset: 5.5px; z-index: -1; border-radius: 50%; box-sizing: border-box;
    background: var(--bar); border: 1px solid var(--edge); backdrop-filter: blur(14px); }
  #receiver #liveMic[aria-pressed=true]::before { background: var(--wire); }
  #receiver :is(#gear, #liveMic, #volumeToggle, #rssToggle):is(:hover, :focus-visible, [aria-expanded=true])::before {
    background: var(--soft); border-color: var(--wire); }
  #receiver :is(#gear, #liveMic, #volumeToggle, #rssToggle):is(:hover, :focus-visible) { color: var(--wire); }
  #gear .gear-glyph, #volumeToggle svg { width: 19.5px; height: 19.5px; }
  #rssToggle .rss-glyph { width: 17.25px; height: 17.25px; }
  #liveMic svg { width: 16.5px; height: 16.5px; }
  #receiver .cast-controls > :is(#liveChat, #tellJoke, #broadcastControl) { font-size: 14px; padding-inline: 8px; }
  #receiver #broadcastControl { width: 108px; padding: 0; }
  #broadcastControl .broadcast-action { padding: 12px 8px; gap: 8px; }
  #liveMic { padding: 10px; }
  #receiver { --panel-clearance: var(--panel-offset); }
  #receiver[data-live-chat] { --panel-clearance: 150px; }
  #rssPanel, #volumePanel, #past-episodes { position: fixed; right: var(--dock-inset); left: var(--dock-inset); top: auto; bottom: calc(var(--dock-inset) + var(--panel-clearance));
    width: auto; max-width: none; max-height: min(60dvh, calc(100dvh - var(--dock-top) - 4 * var(--utility-step) - var(--dock-inset) - var(--panel-clearance) - 12px)); }
  #liveChatHeading span:first-child { font-size: 16px; }
  #liveEnd { font-size: 13px; }
  .receiver-panel, #settingsPanel { font: 16px/1.45 var(--menu-fallback); letter-spacing: normal; text-shadow: none; }
  .receiver-panel h2, #settingsPanel h1 { font: italic 750 24px/1.2 var(--menu-font); letter-spacing: normal; text-shadow: none; }
}
@media (max-width: 359px) {
  #liveChatControls { padding: 10px; gap: 8px; }
  #liveChatHeading span:first-child { font-size: 15px; }
  #livePopover { padding: 10px 1px; max-width: 100vw; }
  #liveStatus { padding-inline: 8px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --dock-top: 12px; --dock-inset: 12px; --utility-size: 44px; --utility-step: 50px; }
  #liveDock { top: var(--dock-top); right: calc(var(--dock-inset) + var(--utility-step)); }
  #receiver > #volumeToggle { top: var(--dock-top); right: calc(var(--dock-inset) + 2 * var(--utility-step)); }
  #receiver > #rssToggle { top: var(--dock-top); right: calc(var(--dock-inset) + 3 * var(--utility-step)); }
  #liveChatControls { max-width: 520px; padding: 8px 12px; gap: 6px; }
  #rssPanel, #volumePanel { top: 64px; bottom: auto; max-height: calc(100dvh - 80px); }
}