/* ========================================================================= Live call — Picture-in-Picture popup layout Applied via body.pip on the popup window's . 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) #btn-hangup ← full-width end-call 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; } body.pip #btn-hangup { position: static; flex-shrink: 0; width: auto; height: 44px; margin: 0.5rem; border-radius: var(--rta-radius-sm); } /* Cancel the round-button hover scale: full-width here, so growth just pushes it into the panel edges. Keep the colour shift for feedback. */ body.pip #btn-hangup:hover:not(:disabled) { transform: none; background: var(--red-dark, var(--red)); } body.pip #btn-hangup svg { width: 20px; height: 20px; } /* ---- 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; } /* Browser-block notice (non-Chromium), top of #screen-setup */ .browser-block-notice { margin-bottom: 1rem; } /* Reopen-popup button (shown on #screen-call when popup is closed) */ .reopen-pip-btn { align-self: flex-end; padding: 0.4rem 0.9rem; font-family: var(--rta-font-body); font-size: 0.78rem; font-weight: 600; background: color-mix(in srgb, var(--rta-accent) 12%, transparent); color: var(--rta-accent); 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); } .reopen-pip-btn:hover { background: var(--rta-accent); color: #fff; }