.live-dialog { width:min(640px,calc(100vw - 24px)); max-height:92dvh; }
.live-dialog .dialog-body { display:grid; gap:12px; }
.live-dialog .field { display:grid; gap:6px; }
.live-dialog input { width:100%; box-sizing:border-box; padding:12px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--paper); }
.live-stage { display:grid; place-items:center; min-height:180px; background:#111; border-radius:12px; overflow:hidden; }
.live-stage video { display:block; width:100%; max-height:55dvh; object-fit:contain; }
.live-stage audio { display:none; }
.live-controls { display:flex; flex-wrap:wrap; gap:8px; }
.live-controls button { min-height:44px; }
.live-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px; margin:10px 0; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.live-card strong { color:#b42318; }
.live-card[data-state="ended"] strong { color:inherit; }
.live-compose-button { min-height:44px; }

.live-card[data-state="ended"] { flex-wrap:wrap; }
.live-card video { flex-basis:100%; }

.live-dialog .live-control-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 48px; width:48px; height:48px; min-width:48px; padding:0; border-radius:50%; }
.live-dialog .live-control-icon svg { width:24px; height:24px; pointer-events:none; }
.live-dialog .live-control-icon[hidden] { display:none; }
.live-dialog .live-control-icon.is-muted { color:#b42318; background:#fee4e2; border-color:#fda29b; }
.live-dialog .live-control-icon:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }

/* Camera canvas with controls over the preview, including mobile safe areas. */
.live-dialog.live-camera-dialog { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; background:#111; color:#fff; }
.live-camera-dialog .dialog-head { position:absolute; inset:0 0 auto; z-index:3; min-height:72px; padding:calc(12px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 28px max(18px,env(safe-area-inset-left)); border:0; background:linear-gradient(#000b,transparent); color:#fff; pointer-events:none; }
.live-camera-dialog .dialog-head button { pointer-events:auto; }
.live-camera-dialog .dialog-body { position:absolute; inset:0; display:block; height:100%; max-height:none; padding:0; overflow:hidden; }
.live-camera-dialog .live-stage { position:absolute; inset:0; min-height:0; border-radius:0; }
.live-camera-dialog .live-stage video { width:100%; height:100%; max-height:none; object-fit:cover; }
.live-camera-overlay { position:absolute; inset:auto 0 0; z-index:2; display:grid; gap:12px; max-height:calc(100% - 100px - env(safe-area-inset-top)); overflow:auto; padding:40px max(20px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); background:linear-gradient(transparent,#000b 28%,#000d); }
.live-camera-overlay > * { width:min(100%,480px); margin:0 auto; box-sizing:border-box; }
.live-camera-dialog .form-note { color:#fff; text-shadow:0 1px 3px #000; }
.live-camera-dialog .field { font-size:13px; font-weight:600; }
.live-camera-dialog input { font-size:16px; color:#fff; background:#1119; border-color:#ffffff80; }
.live-camera-dialog input::placeholder { color:#ddd; }
.live-camera-dialog .live-controls { justify-content:center; align-items:center; gap:20px; padding:4px 0; }
.live-camera-dialog .live-control-icon { color:#fff; background:#1119; border:1px solid #ffffffa0; backdrop-filter:blur(8px); }
.live-camera-dialog .live-control-icon.is-muted { color:#fff; background:#b42318; }
.live-camera-dialog .live-control-icon:focus-visible { outline-color:#fff; }
.live-camera-dialog .live-controls .live-control-icon:not(.secondary) { width:64px; height:64px; flex-basis:64px; background:#d92d20; border:3px solid #fff; }
.live-camera-dialog .live-control-icon:disabled { opacity:.5; }
.live-camera-dialog .live-recording-note { font-size:12px; line-height:1.4; text-align:center; }
.live-camera-dialog.is-live .field,.live-camera-dialog.is-live .live-recording-note { display:none; }
@media (orientation:landscape) and (max-height:540px) {
  .live-camera-dialog .dialog-head { min-height:56px; padding-top:max(8px,env(safe-area-inset-top)); padding-bottom:12px; }
  .live-camera-overlay { padding-top:16px; padding-bottom:max(10px,env(safe-area-inset-bottom)); gap:6px; max-height:calc(100% - 72px); }
  .live-camera-dialog .live-recording-note { font-size:11px; }
  .live-camera-dialog .live-controls .live-control-icon:not(.secondary) { width:52px; height:52px; flex-basis:52px; }
}

/* Span the post grid: otherwise the player widens the avatar column. */
.post .live-card { grid-column:1 / -1; min-width:0; max-width:100%; box-sizing:border-box; }
.live-card { display:flex; flex-direction:column; align-items:stretch; padding:12px; gap:10px; }
.live-card > strong { font-size:.85rem; }
.live-card > button { align-self:flex-start; }
.live-inline-player { position:relative; min-width:0; width:100%; background:#111; border-radius:12px; overflow:hidden; }
.live-inline-player video,.live-card .live-replay-video { display:block; width:100%; height:auto; max-height:70dvh; object-fit:contain; border-radius:12px; background:#111; flex-basis:auto; }
.live-inline-player video:not([src]) { min-height:180px; }
.live-player-status { padding:12px; margin:0; color:#fff; }
.live-player-status[hidden] { display:none; }
.live-card .live-replay-video { width:auto; max-width:100%; align-self:center; }
.live-inline-player { width:fit-content; max-width:100%; align-self:center; }
.live-inline-player video { width:auto; max-width:100%; margin-inline:auto; }