/* =============================================================================
   "Ask ROSIE" private chatbot — bottom split-dock bar + chat sheet.

   A separate feature that shares the dock with the hangup button and (in the
   PiP) the box with the alert feed. Styled with the shared --rta-* tokens
   (components/live-call/rta-theme.css). Open/close is driven by .is-open on
   #rta-dock (never inline styles) so it survives the cross-document PiP move.

   Two layout contexts, gated by body.pip (the moved dock lives in exactly one
   document at a time, and the PiP inlines the same stylesheets):
     • In-page (default): dock LOCKED at the bottom of the screen (fixed);
       the chat opens as a small floating window anchored bottom-right.
     • PiP (body.pip):     dock is a flex item at the bottom of the popup;
       the chat opens as a full-width sheet sliding up over the feed.

   Dock states (context-agnostic):
     • .is-open       chat sheet shown → hangup hidden, input fills the row.
     • .is-confirming hangup confirm → input hidden, "×" + wide "End the call?".
   ============================================================================= */

/* ── Dock container ─────────────────────────────────────────────────────── */
/* In-page default: a compact floating bar centered at the bottom-middle of the
   screen, holding the "Ask ROSIE" chat input + the end-call button. Fixed to
   the viewport, just above the app footer. It is the positioning context for
   the chat sheet, which opens upward (centered) above it. Lives inside
   .call-grid (z-index layer above the footer) so it floats over the footer
   without its own z-index war. --app-footer-h is defined on the call-screen
   body below. */
#rta-dock {
  position: fixed;
  bottom: calc(var(--app-footer-h, 46px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 2rem));
  z-index: 20;
  background: var(--rta-chrome-bg);
  border: 1px solid var(--rta-rule);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20, 30, 45, 0.22);
  font-family: var(--rta-font-body);
}
/* Keep the columns / status clear of the floating dock + fixed footer so
   nothing hides behind them. */
#screen-call { padding-bottom: calc(var(--app-footer-h, 46px) + 6rem); }

/* Layer: lift the whole live layout onto one plane above the fixed footer so
   nothing is clipped at the bottom. The dock used to be the ONLY element above
   the footer (via its own z-index), which meant the transcript, RTA card,
   settings, and status — all left on the default layer — got covered by the
   footer while the chat did not. Hoisting the shared .call-grid (position
   relative + z-index above the footer's) puts every live element, dock
   included, on the same layer, so they clip uniformly (i.e. not at all). */
.call-grid { position: relative; z-index: 20; }

/* Lock the global app footer at the very bottom while a call screen is active
   (other screens keep their normal in-flow footer). The live layout sits above
   it (see .call-grid above). Scoped via :has so it doesn't change
   setup/analysis/report layout. */
body:has(#screen-call.active) { --app-footer-h: 46px; }
body:has(#screen-call.active) .app-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 19;
  height: var(--app-footer-h);
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  /* Keep the base navy footer background so the white ROSIE lockup + copy stay
     visible in both themes (var(--bg) matched the page and hid the light-mode
     copy). --app-nav is theme-fixed navy. */
  background: var(--app-nav);
  box-sizing: border-box;
}

/* PiP: an in-flow flex item pinned at the bottom of the popup (full width). */
body.pip #rta-dock {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  transform: none;
  width: auto;
  max-width: none;
  margin: 0;
  z-index: auto;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
}

/* ── Dock row: input split with the hangup button ───────────────────────── */
.rta-dock-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
}
#assistant-chat.asst-dockbar { flex: 1; min-width: 0; }

.asst-form {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 6px 6px 6px 12px;
  background: var(--rta-panel-bg);
  border: 1px solid var(--rta-rule);
  border-radius: 12px;
}
.asst-form:focus-within { border-color: var(--rta-accent); }
.asst-spark { color: var(--rta-accent); display: flex; flex-shrink: 0; }
.asst-spark svg { width: 16px; height: 16px; }
.asst-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--rta-fg);
  font: 500 14px/1.2 var(--rta-font-body);
}
.asst-input::placeholder { color: var(--rta-fg3); }
.asst-input:disabled { opacity: 0.55; cursor: not-allowed; }
.asst-send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  cursor: pointer;
  border: none;
  background: var(--rta-accent);
  color: #fff;
}
.asst-send svg { width: 18px; height: 18px; }
.asst-send:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Hangup (idle = coral square) + cancel (× ) ─────────────────────────── */
.rta-dock-row #btn-hangup {
  width: 56px;
  height: auto;
  min-height: 52px;
  margin: 0;
  border-radius: 12px;
  flex-shrink: 0;
  color: #fff;
}
.rta-dock-row #btn-hangup:hover:not(:disabled) {
  transform: none;
  background: var(--red-dark, var(--red));
}
.hangup-icon { width: 20px; height: 20px; }
.hangup-confirm-text { display: none; }

/* Cancel ("keep talking") — only while confirming. */
.dock-cancel {
  display: none;
  width: 52px;
  min-height: 52px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--rta-rule);
  background: var(--rta-panel-bg);
  color: var(--rta-fg2);
  cursor: pointer;
}
.dock-cancel:hover { color: var(--rta-fg); border-color: var(--rta-rule-strong); }
.dock-cancel svg { width: 18px; height: 18px; }

/* ── Dock state: chat sheet open → hide hangup, input fills the row ──────── */
#rta-dock.is-open .rta-dock-row #btn-hangup { display: none; }

/* ── Dock state: hangup confirm → hide input, show × + wide "End the call?" ─ */
#rta-dock.is-confirming #assistant-chat { display: none; }
#rta-dock.is-confirming .dock-cancel { display: flex; }
#rta-dock.is-confirming #btn-hangup {
  flex: 1;
  width: auto;
  flex-direction: column;
  gap: 0;
}
#rta-dock.is-confirming .hangup-icon { display: none; }
#rta-dock.is-confirming .hangup-confirm-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  color: #fff;
}
.hangup-confirm-text strong { font: 700 14px/1.25 var(--rta-font-body); }
.hangup-confirm-text small { font: 500 11px/1.25 var(--rta-font-body); opacity: 0.92; }

/* ── Chat sheet ─────────────────────────────────────────────────────────── */
/* Shared chrome + show/hide (context-agnostic). */
.asst-sheet {
  display: flex;
  flex-direction: column;
  background: var(--rta-panel-bg);
  border: 1px solid var(--rta-rule);
  box-shadow: 0 -10px 30px rgba(20, 30, 45, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 240ms;
}
#rta-dock.is-open .asst-sheet { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .asst-sheet, .asst-backdrop { transition: none; }
}

/* In-page default: opens upward as a sheet spanning the full dock width,
   centered above the bottom-center floating dock. Absolute → anchored to the
   dock, just above it. */
.asst-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 8px;
  width: auto;
  max-height: min(60vh, 460px);
  border-radius: 16px;
}

/* PiP: full-width sheet sliding up over the feed, flush to the dock top. */
body.pip .asst-sheet {
  left: 0;
  right: 0;
  margin-bottom: 0;
  width: auto;
  max-height: min(62vh, 460px);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
}

/* Dim backdrop — PiP only (the in-page window leaves the screen interactive). */
.asst-backdrop { display: none; }
body.pip .asst-backdrop {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 120vh;
  background: color-mix(in srgb, var(--rta-fg) 22%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 200ms;
}
body.pip #rta-dock.is-open .asst-backdrop { opacity: 1; visibility: visible; }

/* Drag handle (PiP sheet affordance). */
.asst-handle {
  width: 38px;
  height: 4px;
  margin: 8px auto 2px;
  border-radius: 100px;
  background: var(--rta-rule-strong);
}

.asst-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 10px;
}
.asst-head-title { display: flex; align-items: center; gap: 8px; }
.asst-head-title span:last-child { font: 700 13px/1 var(--rta-font-body); color: var(--rta-fg); }
.asst-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: none;
  color: var(--rta-fg3);
  cursor: pointer;
}
.asst-close:hover { background: var(--rta-surface); color: var(--rta-fg); }
.asst-close svg { width: 16px; height: 16px; }

.asst-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--rta-whisper) 8%, var(--rta-panel-bg));
  border-top: 1px solid color-mix(in srgb, var(--rta-whisper) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--rta-whisper) 18%, transparent);
  color: var(--rta-fg2);
  font: 500 11.5px/1.4 var(--rta-font-body);
}
.asst-lock { color: var(--rta-whisper); display: flex; flex-shrink: 0; }
.asst-lock svg { width: 14px; height: 14px; }

/* ── Message list ───────────────────────────────────────────────────────── */
.asst-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--rta-rule-strong) transparent;
}
.asst-list::-webkit-scrollbar { width: 6px; }
.asst-list::-webkit-scrollbar-thumb { background: var(--rta-rule-strong); border-radius: 100px; }

.asst-msg { display: flex; }
.asst-msg--user { justify-content: flex-end; }
.asst-msg--ai { justify-content: flex-start; }
.asst-bubble {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--rta-fg);
  font: 500 14px/1.5 var(--rta-font-body);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.asst-msg--user .asst-bubble {
  background: var(--rta-surface);
  border: 1px solid var(--rta-rule);
  border-bottom-right-radius: 3px;
}
.asst-msg--ai .asst-bubble {
  background: color-mix(in srgb, var(--rta-whisper) 13%, var(--rta-panel-bg));
  border: 1px solid color-mix(in srgb, var(--rta-whisper) 28%, transparent);
  border-bottom-left-radius: 3px;
}

/* ── Typing indicator ───────────────────────────────────────────────────── */
.asst-dots { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.asst-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rta-fg3); display: inline-block;
  animation: asstType 1.1s ease-in-out infinite;
}
.asst-dots i:nth-child(2) { animation-delay: 0.16s; }
.asst-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes asstType {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .asst-dots i { animation: none; } }