/* LiveLoop full screen (owner, 2026-09-30). body.liveloop-fs covers the whole
   window: the stage fills it, the header and the portal chrome give way, and
   the prompt box rises only on mouse or touch movement (body.llfs-awake).
   body.llfs-recording strips it to the brand and the top-right corner.
   Driven by liveloop-fullscreen.js. --llfs-z is the zoom the container sits
   under, so 100vw / z lands on the real window edge. */
:root:root:root:root body.liveloop-fs #portal-bar,
:root:root:root:root body.liveloop-fs #portal-side,
:root:root:root:root body.liveloop-fs #portal-dashboard,
:root:root:root:root body.liveloop-fs #portal-dashboard-scrim,
:root:root:root:root body.liveloop-fs #portal-narration,
:root:root:root:root body.liveloop-fs #portal-routing { display: none !important; }
:root:root:root:root body.liveloop-fs.liveloop-fs #liveloop-container {
  /* Pinned to all four window edges (owner, 2026-10-01: "the full screen mode does not cover the tool bar
     area in liveloop. make it full screen"): sizes worked out as 100vw / zoom came out short when the
     window grew into the screen's full screen, leaving the portal's bar and column showing above and
     beside the stage. Edges follow the window whatever its size and whatever the zoom. */
  position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important;
  border-radius: 0 !important; border: 0 !important; z-index: 2147482000 !important; transform: none !important;
}
:root:root:root:root body.liveloop-fs #liveloop-container .liveloop-header { display: none !important; }
:root:root:root:root body.liveloop-fs #liveloop-viewport,
:root:root:root:root body.liveloop-fs #liveloop-code-view,
:root:root:root:root body.liveloop-fs #liveloop-project-files-view { bottom: 0 !important; }

/* The prompt box: the composer alone, hidden until the pointer moves. */
:root:root:root:root body.liveloop-fs #liveloop-chat.live-chat-panel {
  position: fixed !important; display: block !important; left: 50% !important; right: auto !important; top: auto !important;
  bottom: 22px !important; width: min(880px, 92%) !important; height: auto !important; max-height: none !important; min-height: 0 !important;
  padding: 8px !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 18px !important;
  background: rgba(11,11,16,.94) !important; transform: translate(calc(-50% + var(--llfs-dx, 0px)), calc(160% + var(--llfs-dy, 0px))); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease; z-index: 2147482500 !important;
}
:root:root:root:root body.liveloop-fs.llfs-awake #liveloop-chat.live-chat-panel,
:root:root:root:root body.liveloop-fs #liveloop-chat.live-chat-panel:focus-within {
  transform: translate(calc(-50% + var(--llfs-dx, 0px)), var(--llfs-dy, 0px)); opacity: 1; pointer-events: auto;
}
:root:root:root:root body.liveloop-fs #liveloop-chat.live-chat-panel > :not(.live-chat-compose):not(.live-chat-files):not(.llfs-grip) { display: none !important; }
:root:root:root:root body.liveloop-fs.llfs-recording #liveloop-chat.live-chat-panel { display: none !important; }
:root:root:root:root body.liveloop-fs #liveloop-bridge-panel,
:root:root:root:root body.liveloop-fs #liveloop-git-panel { display: none !important; }

/* Edge sensors: the preview is its own document and swallows pointer moves,
   so thin strips at the top and bottom edges wake the controls. */
#llfs-sensor-top, #llfs-sensor-bottom { display: none; position: fixed; left: 0; right: 0; z-index: 2147482200; background: transparent; }
#llfs-sensor-top { top: 0; height: 44px; } #llfs-sensor-bottom { bottom: 0; height: 90px; }
body.liveloop-fs #llfs-sensor-top, body.liveloop-fs #llfs-sensor-bottom { display: block; }
body.liveloop-fs.llfs-awake #llfs-sensor-bottom { display: none; }

/* Progress: working, finished, and the meter with its estimate. */
#llfs-hud { display: none; position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2147483100; min-width: 300px; max-width: 92vw;
  padding: 9px 14px 11px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(11,11,16,.9); color: #e8e8f0;
  font: 600 12px/1.3 Inter, system-ui, sans-serif; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
body.liveloop-fs #llfs-hud[data-state="working"], body.liveloop-fs #llfs-hud[data-state="finished"] { display: block; }
body.liveloop-fs #llfs-hud.is-shown { opacity: 1; }
body.liveloop-fs.llfs-recording #llfs-hud { display: none !important; }
#llfs-hud .llfs-row { display: flex; align-items: center; gap: 9px; }
#llfs-hud .llfs-dot { width: 9px; height: 9px; border-radius: 50%; background: #a78bfa; flex: 0 0 auto; }
#llfs-hud[data-state="working"] .llfs-dot { animation: llfs-pulse 1.1s ease-in-out infinite; }
#llfs-hud[data-state="finished"] .llfs-dot { background: #34d399; }
#llfs-hud .llfs-label { flex: 1 1 auto; font-weight: 700; letter-spacing: .02em; }
#llfs-hud .llfs-eta, #llfs-hud .llfs-pct { color: #b6b6c8; font-variant-numeric: tabular-nums; }
#llfs-hud .llfs-track { margin-top: 8px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
#llfs-hud .llfs-fill { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #7c3aed, #a78bfa); transition: width .45s ease; }
#llfs-hud[data-state="finished"] .llfs-fill { background: #34d399; }
@keyframes llfs-pulse { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* Corner: brand top-left, talk / status / exit top-right. */
#llfs-brand, #llfs-corner { display: none; position: fixed; top: 14px; z-index: 2147483200; transition: opacity .3s ease; }
#llfs-brand { left: 18px; align-items: baseline; gap: 6px; color: #fff; font: 800 14px/1 ui-monospace, Menlo, monospace; pointer-events: none; }
#llfs-brand small { font: 700 10px/1 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #a0a0b4; }
#llfs-corner { right: 18px; align-items: center; gap: 8px; }
body.liveloop-fs #llfs-brand, body.liveloop-fs #llfs-corner { display: flex; opacity: 0; pointer-events: none; }
body.liveloop-fs.llfs-awake #llfs-brand, body.liveloop-fs.llfs-recording #llfs-brand { opacity: 1; }
body.liveloop-fs.llfs-awake #llfs-corner, body.liveloop-fs.llfs-recording #llfs-corner, body.liveloop-fs.llfs-voice #llfs-corner { opacity: 1; pointer-events: auto; }
#llfs-corner button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(11,11,16,.88); color: #e8e8f0; font-size: 15px; cursor: pointer; }
#llfs-corner button:hover { border-color: #a78bfa; color: #fff; }
#llfs-corner #llfs-talk[aria-pressed="true"] { background: #7c3aed; border-color: #a78bfa; color: #fff; }
#llfs-rec-dot { display: none; width: 14px; height: 14px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: llfs-rec 1s steps(2, start) infinite; }
body.liveloop-fs.llfs-recording #llfs-rec-dot { display: block; }
body.liveloop-fs.llfs-recording:not(.llfs-awake) #llfs-exit { display: none; }
@keyframes llfs-rec { 0% { opacity: 1; } 50% { opacity: .15; } 100% { opacity: 1; } }

/* Recording: nothing but the stage, the brand and the corner. The clock and
   proof keep running; they are only not drawn. */
:root:root:root:root body.liveloop-fs.llfs-recording #liveloop-record-hud { display: none !important; }

/* The composer can be moved: drag the grip above it. */
#liveloop-chat .llfs-grip { display: none; }
body.liveloop-fs #liveloop-chat .llfs-grip { display: block !important; height: 14px; margin: -2px 0 4px; cursor: grab; touch-action: none; position: relative; }
body.liveloop-fs #liveloop-chat .llfs-grip::after { content: ''; position: absolute; left: 50%; top: 5px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: rgba(255,255,255,.28); }
body.liveloop-fs #liveloop-chat .llfs-grip:hover::after { background: rgba(255,255,255,.5); }
body.liveloop-fs #liveloop-chat.llfs-dragging { transition: none !important; }
body.llfs-dragging-body iframe { pointer-events: none; }