/* portal-jarvis.css — the JARVIS Phase-1 conversational rail (docs/plans/2026-07-11-jarvis-rail-plan.md).
 *
 * A right-edge drawer OVER the browse workspace (position:fixed — it never disturbs the 3-pane
 * grid). Reuses the portal-browse palette tokens verbatim so light/dark theme cleanly (the .dark
 * overrides live in portal-browse.css :root/html.dark). REM-ONLY (1rem=16px reference scale;
 * .0625rem=1px borders; 2.75rem=44px touch floor) — ZERO real px anywhere (the lint gate).
 * External stylesheet only (style-src 'self').
 */

/* ── the drawer ── */
.jv-rail {
  position: fixed; z-index: 60;
  right: .75rem; bottom: .75rem; top: calc(var(--pt-header-height, 3.75rem) + 3.75rem);
  width: 23rem; max-width: 92vw;
  display: flex; flex-direction: column;
  background: var(--pt-surface, #fff);
  border: .0625rem solid var(--pt-line-2, #cbd5e1);
  border-radius: var(--pt-radius-lg, .75rem);
  box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .28);
}
.jv-rail.collapsed { display: none; }

/* ── header: orb + title + hotkey hint + close ── */
.jv-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .75rem;
  border-bottom: .0625rem solid var(--pt-line, #e3e8ef);
}
.jv-orb {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--pt-ai, #8b5cf6), var(--pt-accent, #2563eb));
  box-shadow: 0 0 .6rem var(--pt-ai, #8b5cf6);
  animation: jv-pulse 2.4s ease-in-out infinite;
}
@keyframes jv-pulse {
  0%, 100% { box-shadow: 0 0 .35rem var(--pt-ai, #8b5cf6); }
  50% { box-shadow: 0 0 .85rem var(--pt-ai, #8b5cf6); }
}
@media (prefers-reduced-motion: reduce) { .jv-orb { animation: none; } }
.jv-title { font-weight: 700; font-size: .95rem; letter-spacing: .06em; }
.jv-hint {
  margin-left: auto; margin-right: .25rem;
  font-size: .68rem; color: var(--pt-faint, #94a3b8);
  border: .0625rem solid var(--pt-line, #e3e8ef); border-radius: var(--pt-radius-sm, .375rem);
  padding: .1rem .4rem;
}

/* ── the BYOK key panel (Phase 1b) — collapsed by default; .open reveals ── */
.jv-panel { display: none; flex-direction: column; gap: .5rem; padding: .6rem .75rem;
  border-bottom: .0625rem solid var(--pt-line, #e3e8ef); background: var(--pt-surface-2, #f8fafc); }
.jv-panel.open { display: flex; }
.jv-panel-h { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .78rem; }
.jv-panel-h i { color: var(--pt-ai, #8b5cf6); }
.jv-panel-msg { margin-left: auto; font-weight: 600; font-size: .7rem; color: var(--pt-warn, #b45309); }
.jv-panel-row { display: flex; gap: .5rem; }
.jv-select { flex: 0 0 38%; min-width: 0; height: 2.25rem; padding: 0 .5rem; font-size: .78rem;
  border: .0625rem solid var(--pt-line-2, #cbd5e1); border-radius: var(--pt-radius-sm, .375rem);
  background: var(--pt-surface, #fff); color: var(--pt-text, #0f172a); }
.jv-key-input { flex: 1; min-width: 0; height: 2.25rem; padding: 0 .6rem; font-size: .78rem;
  border: .0625rem solid var(--pt-line-2, #cbd5e1); border-radius: var(--pt-radius-sm, .375rem);
  background: var(--pt-surface, #fff); color: var(--pt-text, #0f172a); }
.jv-panel-row .br-btn { height: 2.25rem; padding: 0 .7rem; font-size: .75rem; }
.jv-panel-status { font-size: .72rem; }
.jv-key-status { display: inline-flex; align-items: center; gap: .3rem; color: var(--pt-faint, #94a3b8); }
.jv-key-status.ok { color: var(--pt-good, #15803d); }
.jv-panel-note { font-size: .68rem; line-height: 1.4; color: var(--pt-faint, #94a3b8); }

/* ── the transcript log ── */
.jv-log { flex: 1; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.jv-msg {
  max-width: 88%; padding: .5rem .7rem; border-radius: var(--pt-radius-md, .5rem);
  font-size: .84rem; line-height: 1.45; overflow-wrap: break-word;
}
.jv-msg.user { align-self: flex-end; background: var(--pt-accent-bg, #e0edff); color: var(--pt-text, #0f172a);
  border: .0625rem solid var(--pt-accent-line, #bfdbfe); }
.jv-msg.bot { align-self: flex-start; background: var(--pt-surface-2, #f8fafc); color: var(--pt-text, #0f172a);
  border: .0625rem solid var(--pt-line, #e3e8ef); }
.jv-msg.pending { color: var(--pt-muted, #64748b); display: inline-flex; align-items: center; gap: .4rem; }

/* action-echo chips + result-count notes */
.jv-chips { display: flex; flex-wrap: wrap; gap: .3rem; align-self: flex-start; max-width: 92%; }
.jv-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600;
  padding: .15rem .5rem; border-radius: 999rem;
  background: var(--pt-ai-bg, #f3e8ff); color: var(--pt-ai, #8b5cf6);
  border: .0625rem solid var(--pt-ai-line, rgba(139, 92, 246, .27));
}
.jv-chip.drop { background: var(--pt-bad-bg, #fee2e2); color: var(--pt-bad, #b91c1c); border-color: transparent; }
.jv-note { align-self: center; font-size: .7rem; color: var(--pt-faint, #94a3b8); }

/* ── the input bar ── */
.jv-inputbar {
  display: flex; gap: .5rem; padding: .6rem .75rem;
  border-top: .0625rem solid var(--pt-line, #e3e8ef);
}
.jv-inputbar input {
  flex: 1; min-width: 0; height: var(--pt-touch-min, 2.75rem);
  padding: 0 .75rem; font-size: .85rem;
  border: .0625rem solid var(--pt-line-2, #cbd5e1); border-radius: var(--pt-radius-md, .5rem);
  background: var(--pt-surface-2, #f8fafc); color: var(--pt-text, #0f172a);
}
.jv-inputbar input:focus { outline: .125rem solid var(--pt-ai, #8b5cf6); outline-offset: 0; border-color: transparent; }

/* the toolbar orb launcher button keeps .br-icon-btn sizing; tint it JARVIS-purple */
.jv-orb-btn i { color: var(--pt-ai, #8b5cf6); }

/* ── voice (jarvis-voice plan §5): push-to-talk mic, speaker toggle, listening state ──
   #jvMic / #jvSpeak ship [hidden] and portal-voice.js reveals them only in a capable browser.
   .br-btn / .br-icon-btn set display:inline-flex, which would beat the UA [hidden] rule — so
   the hide is restated at higher specificity. */
.jv-mic[hidden], .jv-speak[hidden] { display: none; }
.jv-mic {
  flex: 0 0 auto; justify-content: center; padding: 0;
  width: var(--pt-touch-min, 2.75rem); min-width: var(--pt-touch-min, 2.75rem);
  height: var(--pt-touch-min, 2.75rem);
  color: var(--pt-ai, #8b5cf6); font-size: .95rem;
}
.jv-mic:hover { border-color: var(--pt-ai-line, rgba(139, 92, 246, .27)); }
/* listening: purple fill + a static ring (the motion-free cue), plus the orb pulse */
.jv-mic[aria-pressed="true"] {
  background: var(--pt-ai-bg, #f3e8ff); border-color: var(--pt-ai, #8b5cf6); color: var(--pt-ai, #8b5cf6);
  box-shadow: 0 0 0 .1875rem var(--pt-ai-line, rgba(139, 92, 246, .27));
  animation: jv-pulse 1.2s ease-in-out infinite;
}
.jv-speak[aria-pressed="true"] { color: var(--pt-ai, #8b5cf6); }
.jv-speak[aria-pressed="false"] { color: var(--pt-faint, #94a3b8); }
.jv-mic:focus-visible, .jv-speak:focus-visible {
  outline: .125rem solid var(--pt-ai, #8b5cf6); outline-offset: .125rem;
}
.jv-rail.listening .jv-orb { animation-duration: .9s; }
/* the aria-live status line ("Listening…" / "Thinking…"): always in the accessibility tree,
   zero-height when empty so a first announcement is never lost to display:none */
.jv-vstatus {
  flex: 0 0 auto; padding: 0 .75rem;
  font-size: .72rem; font-weight: 600; color: var(--pt-ai, #8b5cf6);
}
.jv-vstatus:not(:empty) { padding: .35rem .75rem 0; }
@media (prefers-reduced-motion: reduce) {
  .jv-mic[aria-pressed="true"], .jv-rail.listening .jv-orb { animation: none; }
}

/* narrow viewports: the drawer becomes a full-width bottom sheet. The input bar (with the mic)
   is pinned to the sheet's bottom edge and never shrinks, so push-to-talk stays one thumb away
   at a 22.5rem phone width; the Ctrl+K hint is desktop-only chrome. */
@media (max-width: 40rem) {
  .jv-rail { left: .5rem; right: .5rem; width: auto; max-width: none; top: auto; height: 70vh; }
  .jv-hint { display: none; }
  .jv-title { margin-right: auto; }    /* takes over the hidden hint's push-right */
  .jv-log { min-height: 0; }
  .jv-inputbar { flex: 0 0 auto; padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
}