/* =========================================================================
   Live call — Picture-in-Picture popup layout
   Applied via body.pip on the popup window's <body>.

   The popup WINDOW is the panel — there is no decorative chassis (no bezel,
   rounded corners or fake title bar). The body just stacks the moved RTA
   elements and makes the alert feed the scroll region:

     body.pip
       #rta-header        ← caller / run time / clock (flush top, separator)
       .metrics-row       ← latencies + emotion gauge
       #alerts-container  ← the live signal feed (scrolls)
       #rta-dock          ← Ask ROSIE input + hangup (see assistant-chat.css)

   Colour comes from the DEFAULT (light) --rta-* tokens, since the popup is not
   a .live-screen; it flips with the rest of the HUD under [data-theme="dark"].
   ========================================================================= */

body.pip {
  font-family: var(--rta-font-body);
  margin: 0;
  padding: 0;
  background: var(--rta-panel-bg);
  color: var(--rta-fg);
  display: flex;
  flex-direction: column;
  /* base.css body { align-items: center } is cloned into the PiP document and
     would shrink the full-width children to content width. Stretch instead. */
  align-items: stretch;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

/* Header sits flush at the very top and carries the panel's top separator
   (rta-header.css). */
body.pip #rta-header { flex-shrink: 0; }

/* Metrics + hangup are fixed; the alert feed between them scrolls. */
body.pip .metrics-row {
  flex-shrink: 0;
  margin: 0.5rem 0.5rem 0;
  width: auto;
}
/* Compact the per-metric cell so values + gauge use more horizontal space. */
body.pip .metrics-row .metric { padding: 0.6rem 0.2rem; }
body.pip .metrics-row .metric-emotion { padding: 0.6rem 0.35rem; }

body.pip #alerts-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem 0.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--rta-rule-strong) transparent;
}
body.pip #alerts-container::-webkit-scrollbar { width: 6px; }
body.pip #alerts-container::-webkit-scrollbar-thumb {
  background: var(--rta-rule-strong);
  border-radius: 100px;
}
body.pip #alerts-container::-webkit-scrollbar-track { background: transparent; }

/* Bottom dock (Ask ROSIE input + hangup) layout — including its PiP vs in-page
   positioning — lives entirely in components/assistant/assistant-chat.css. */

/* ---- Presence footer — pinned at the very bottom ----------------------- */
.rta-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--rta-rule);
  background: var(--rta-chrome-bg);
}
.rta-footer-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rta-good);
}
.rta-footer-label {
  font: 700 9px/1 var(--rta-font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rta-fg2);
}

/* Locked state — block all pointer events while post-call processes */
body.pip.pip-locked {
  pointer-events: none;
  opacity: 0.7;
  cursor: progress;
}

/* =========================================================================
   In-page two-column live layout (NOT the popup — this is #screen-call).

   transcript (~2/3) on the left · Real-Time Assist alerts (~1/3) on the right,
   with the bottom dock spanning full width below. Collapses to a single column
   under 860px (iPad portrait / phones) and whenever the HUD is popped into the
   PiP window (body.rta-popped).

   The three HUD nodes (#rta-header, .metrics-row, #alerts-container) live in
   .rta-card-body in-page and are MOVED into the popup by rta-pip.js. The same
   feed-scroll technique as body.pip (flex column + min-height:0 + overflow)
   keeps alerts scrolling within the transcript's height.
   ========================================================================= */

/* The live layout is sized by the viewport, never by a fixed card height.

   #screen-call claims the height left by the fixed header (--app-header-h) and
   the bottom chrome it must clear: the fixed app footer (--app-footer-h) plus
   the floating dock (--rta-dock-h, measured at runtime by live-layout.js), both
   reserved as padding-bottom in assistant-chat.css.

   The cards flex to whatever that leaves and never shrink below
   --live-card-min; once the viewport is too short to honour that floor the
   @media (max-height) block below takes over and lets the page scroll instead
   (a scrollbar beats a transcript hidden behind the dock mid-call). */
#screen-call {
  max-width: 1180px;
  min-height: calc(100dvh - var(--app-header-h, 60px));
  --live-card-min: 320px;
}

/* Row 1 = the two cards (stretched, so they bottom-align by geometry rather
   than by a shared magic height) · row 2 = the connection status under the
   transcript column only. The status is a direct grid child (call-flow.html),
   not part of .call-grid-main, precisely so it cannot unbalance row 1. */
.call-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;     /* ~2/3 transcript · ~1/3 RTA */
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.5rem 1.25rem;                /* row · column */
  align-items: stretch;
  /* basis 0, NOT auto: an auto basis makes the grid's hypothetical height its
     CONTENT height (a long transcript / tall alert feed), which would push
     #screen-call past the viewport and re-create the very overflow this layout
     exists to avoid. With basis 0 the grid takes the space that is left, and
     the feeds scroll inside their cards. */
  flex: 1 1 0;
  min-height: 0;
}
.call-grid-main    { grid-area: 1 / 1; }
.call-grid-rta     { grid-area: 1 / 2; }
.call-grid > .status { grid-area: 2 / 1; }

.call-grid-main,
.call-grid-rta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  min-height: 0;                      /* let the cards drive the scroll region */
}

/* Transcript card flex-fills its column; the log panel fills the space below
   the title and scrolls. Basis 0 for the same reason as .call-grid above. */
.call-grid-main > .card-padded {
  flex: 1 1 0;
  min-height: var(--live-card-min);
  display: flex;
  flex-direction: column;
}
/* Override call-log.css's max-height:450 so the panel fully fills the fixed
   card height (no slack), keeping the two cards flush at the bottom. */
.call-grid-main .call-log-panel { flex: 1 1 auto; min-height: 0; max-height: none; }

/* ---- Real-Time Assist card -------------------------------------------- */
.rta-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;                         /* fills the shared row → bottom-aligned */
  min-height: var(--live-card-min);
  background: var(--rta-panel-bg);
  border: 1px solid var(--rta-rule);
  border-radius: 14px;
  overflow: hidden;
}

/* Column header — main-window-only chrome (never moved to the popup). */
.rta-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 12px;
  background: var(--rta-chrome-bg);
  border-bottom: 1px solid var(--rta-rule);
  flex-shrink: 0;
}
/* Presence dot + "ROSIE · ACTIVE" label — mirrors the popup's .rta-footer. */
.rta-card-head-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rta-good);
  flex-shrink: 0;
}
.rta-card-head-label {
  font: 700 11px/1 var(--rta-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rta-fg2);
}

/* Pop-out pill (Chrome only — shown/hidden by rta-pip.js). */
.rta-popout-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font: 600 11px/1 var(--rta-font-body);
  color: var(--rta-accent);
  background: color-mix(in srgb, var(--rta-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rta-accent) 30%, transparent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease),
              color     var(--dur-micro) var(--ease);
}
.rta-popout-pill:hover { background: var(--rta-accent); color: #fff; }
.rta-popout-pill svg { width: 13px; height: 13px; }
.rta-popout-pill[hidden] { display: none; }

/* Body — the scroll context. Fills the card below the head; the alert feed
   scrolls within so the card never grows the page. The three children mirror
   the body.pip layout: header + metrics fixed, alerts flex-fill + scroll. */
.rta-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.rta-card-body > #rta-header { flex-shrink: 0; }
.rta-card-body > .metrics-row {
  flex-shrink: 0;
  margin: 0.5rem 0.5rem 0;
  width: auto;
  /* Neutralise the .card chrome so it doesn't read as a card-in-card when the
     hide-rta-metrics flag is off. */
  box-shadow: none;
}
.rta-card-body > #alerts-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem 0.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--rta-rule-strong) transparent;
}
.rta-card-body > #alerts-container::-webkit-scrollbar { width: 6px; }
.rta-card-body > #alerts-container::-webkit-scrollbar-thumb {
  background: var(--rta-rule-strong);
  border-radius: 100px;
}
.rta-card-body > #alerts-container::-webkit-scrollbar-track { background: transparent; }

/* ---- Popped out: HUD + dock are in the PiP window --------------------- */
/* Collapse to a single full-width transcript; hide the now-empty RTA column.
   Closing the popup window restores the HUD + two-column layout. */
body.rta-popped .call-grid { grid-template-columns: 1fr; }
body.rta-popped .call-grid-rta { display: none; }

/* ---- Short viewport: scroll the page instead of crushing the cards -----
   Below this height (a zoomed-in window, or a landscape phone) the space left
   after the page title + dock reservation is less than --live-card-min. Filling
   the viewport would push the cards under the fixed dock, so the layout reverts
   to content height at the floor size and the PAGE scrolls — a scrollbar beats
   a transcript hidden behind the dock mid-call. */
@media (max-height: 700px) {
  #screen-call { min-height: 0; }
  .call-grid { flex: 0 0 auto; }
  .call-grid-main > .card-padded,
  .rta-card { flex: 0 0 auto; height: var(--live-card-min); }
}

/* ---- Responsive: iPad portrait / phones stack to one column -----------
   Stacked, the two cards cannot share one viewport-height row, so the screen
   reverts to content height and each card takes a viewport fraction — the page
   scrolls between them. dvh (not vh) so the mobile URL bar collapsing doesn't
   leave the last card under the fixed dock. */
@media (max-width: 860px) {
  #screen-call { min-height: 0; }
  .call-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 1.25rem;
    /* Content height, so the stacked cards extend the page and it scrolls —
       with basis 0 the grid would contribute nothing and the second card would
       simply fall off the bottom of a non-scrolling page. */
    flex: 0 0 auto;
  }
  .call-grid-main,
  .call-grid-rta,
  .call-grid > .status { grid-area: auto; grid-column: 1; }
  .call-grid-main > .card-padded,
  .rta-card { flex: 0 0 auto; height: 60dvh; }
}