/* =====================================================================
   ChatFPL composer + voice mode

   Modelled on the ChatGPT composer: one rounded surface, the text on its
   own line, and a control row underneath — plus (left) to attach, minus the
   model picker. Retuned to the FPL palette rather than ChatGPT's greys.

   Loaded after style.css, so these rules deliberately override the older
   .chatfpl-input-wrapper layout.
   ===================================================================== */

.chat-composer {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 6px;
  width: 100%;
  padding: 12px 12px 10px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.28);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.chat-composer:focus-within {
  border-color: rgba(0, 212, 255, 0.42);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.32), 0 0 0 3px rgba(0, 212, 255, 0.13);
}

/* ─── Text area ──────────────────────────────────────────────────────── */

.chat-composer #chatInput {
  width: 100%;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text-primary, #fff);
  /* 16px keeps iOS Safari from zooming the page when the field takes focus. */
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  padding: 6px 8px 2px;
  min-height: 30px;
  max-height: 200px;
  overflow-y: auto;
}

.chat-composer #chatInput::placeholder {
  color: var(--text-muted, rgba(255, 255, 255, 0.42));
}

/* ─── Control row ────────────────────────────────────────────────────── */

.chat-composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-composer .chat-action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-production-control {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.voice-production-status {
  display: grid;
  gap: 2px;
  color: var(--text-muted, #8a8a8e);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.52rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.voice-production-status strong {
  color: var(--pl-yellow, #ffac2e);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.voice-production-control.is-available .voice-production-status strong {
  color: var(--pl-cyan, #22d3ee);
}

/* Ghost buttons: attach, mic, waveform. */
.chat-composer .chat-upload-btn,
.chat-composer .chat-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: var(--text-secondary, rgba(255, 255, 255, 0.72));
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.chat-composer .chat-upload-btn:hover,
.chat-composer .chat-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
}

.chat-composer .chat-icon-btn:disabled {
  color: var(--text-muted, #8a8a8e);
  background: var(--tac-plane, #111113);
  border-color: var(--border, rgba(255, 255, 255, 0.1));
  cursor: not-allowed;
  opacity: 0.62;
}

.chat-composer .chat-upload-btn:focus-visible,
.chat-composer .chat-icon-btn:focus-visible,
.chat-composer #btnSendChat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.35);
}

/* Mic while dictating. */
.chat-composer .chat-icon-btn.listening {
  color: #061014;
  background: #22d3ee;
  border-color: #22d3ee;
  box-shadow: inset 0 0 0 1px rgba(6, 16, 20, 0.18);
}

/* ─── Send button ────────────────────────────────────────────────────── */
/* Solid accent disc with a dark arrow, matching the reference. It swaps in
   for the waveform once there is something to send. */

.chat-composer #btnSendChat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pl-green, #00ff87);
  color: #0b0f14;
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.16s ease;
}

.chat-composer #btnSendChat:hover { filter: brightness(1.08); transform: translateY(-1px); }
.chat-composer #btnSendChat:active { transform: translateY(0); }

/* The send/waveform swap is behaviour, so it only applies once voice-mode.js
   has marked the composer ready. Without that class the send button stays
   visible — if the script ever fails to load, the composer still works. */
.chat-composer.js-ready #btnSendChat { display: none; }
.chat-composer.js-ready.has-text #btnSendChat { display: inline-flex; }
.chat-composer.js-ready.has-text .voice-production-control { display: none; }

/* Hidden entirely when the browser has no speech support. */
.chat-composer.no-speech #btnVoiceDictate,
.chat-composer.no-speech .voice-production-control { display: none; }

@media (max-width: 420px) {
  .voice-production-status span { display: none; }
}

/* ─── Voice conversation overlay ─────────────────────────────────────── */

body.voice-mode-open { overflow: hidden; }

.vm-overlay {
  --vm-canvas: #0a0a0b;
  --vm-plane: #111113;
  --vm-recessed: #18181b;
  --vm-surface: #26262a;
  --vm-raised: #323238;
  --vm-text: #ffffff;
  --vm-secondary: #c7c7cb;
  --vm-muted: #8a8a8e;
  --vm-line: rgba(255, 255, 255, 0.1);
  --vm-line-strong: rgba(255, 255, 255, 0.17);
  --vm-signal: #22d3ee;
  --vm-teal: #5eead4;
  --vm-amber: #ffac2e;
  --vm-risk: #a52d25;
  --vm-status: var(--vm-signal);
  --vm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: auto;
  background: var(--vm-canvas);
  color: var(--vm-text);
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 180ms var(--vm-ease-out), visibility 0s linear 180ms;
  scrollbar-color: var(--vm-signal) var(--vm-plane);
  scrollbar-width: thin;
}

.vm-overlay.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.vm-overlay::-webkit-scrollbar { width: 9px; height: 9px; }
.vm-overlay::-webkit-scrollbar-track { background: var(--vm-plane); }
.vm-overlay::-webkit-scrollbar-thumb {
  border: 2px solid var(--vm-plane);
  border-radius: 99px;
  background: var(--vm-signal);
}

.vm-overlay::selection { color: #061014; background: var(--vm-signal); }

.vm-overlay[data-state="thinking"] { --vm-status: var(--vm-amber); }
.vm-overlay[data-state="speaking"] { --vm-status: var(--vm-teal); }
.vm-overlay[data-state="error"] { --vm-status: var(--vm-risk); }

.vm-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1280px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding-inline: clamp(18px, 4vw, 52px);
}

.vm-topbar {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--vm-line);
}

.vm-brand {
  display: inline-flex;
  min-width: 0;
  min-height: 48px;
  padding: 2px 8px 2px 2px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--vm-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, transform 120ms var(--vm-ease-out);
}

.vm-brand:active { transform: scale(0.97); }
.vm-brand img { display: block; width: 44px; height: 44px; object-fit: contain; }
.vm-brand span { display: grid; gap: 1px; }
.vm-brand strong {
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.vm-brand small,
.vm-session-meta,
.vm-level-label,
.vm-state,
.vm-interrupt-label,
.vm-transcript-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.vm-brand small {
  color: var(--vm-muted);
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vm-session-meta {
  display: inline-flex;
  min-height: 34px;
  padding: 0 11px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--vm-line);
  border-radius: 4px;
  background: var(--vm-plane);
  color: var(--vm-muted);
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.vm-session-dot,
.vm-state-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--vm-status);
}

.vm-stage {
  display: grid;
  grid-template-columns: minmax(300px, 0.84fr) minmax(420px, 1.16fr);
  gap: clamp(46px, 7vw, 96px);
  align-items: center;
  padding-block: clamp(44px, 7vh, 76px);
}

.vm-signal {
  display: grid;
  justify-items: center;
  gap: 30px;
}

.vm-visual {
  --vm-level: 0;
  position: relative;
  display: grid;
  width: min(290px, 26vw);
  min-width: 240px;
  aspect-ratio: 1;
  place-items: center;
  isolation: isolate;
  border: 1px solid var(--vm-line);
  border-radius: 50%;
  background:
    linear-gradient(var(--vm-line) 1px, transparent 1px) center / 100% 25%,
    linear-gradient(90deg, var(--vm-line) 1px, transparent 1px) center / 25% 100%,
    var(--vm-plane);
  overflow: hidden;
}

.vm-visual::after {
  content: '';
  position: absolute;
  inset: 49% 0 auto;
  height: 1px;
  background: var(--vm-status);
  opacity: calc(0.16 + var(--vm-level) * 0.42);
  transform: scaleX(calc(0.3 + var(--vm-level) * 0.7));
  transition: background-color 180ms ease, opacity 80ms linear, transform 80ms linear;
}

.vm-ring,
.vm-scan,
.vm-orb,
.vm-wave { position: absolute; }

.vm-ring {
  border: 1px solid var(--vm-line-strong);
  border-radius: 50%;
  transition: border-color 180ms ease, opacity 80ms linear, transform 80ms linear;
}

.vm-ring-outer {
  inset: 15%;
  opacity: calc(0.42 + var(--vm-level) * 0.48);
  transform: scale(calc(1 + var(--vm-level) * 0.055));
}

.vm-ring-inner {
  inset: 27%;
  border-color: color-mix(in srgb, var(--vm-status) 42%, transparent);
  opacity: calc(0.55 + var(--vm-level) * 0.45);
  transform: scale(calc(1 + var(--vm-level) * 0.1));
}

.vm-scan {
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 78%, var(--vm-status) 92%, transparent 100%);
  opacity: 0.2;
  -webkit-mask: radial-gradient(circle, transparent 0 67%, #000 68% 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 0 67%, #000 68% 70%, transparent 71%);
  transition: opacity 180ms ease, background-color 180ms ease;
}

.vm-overlay[data-state="thinking"] .vm-scan {
  opacity: 0.92;
  animation: vmSignalScan 920ms linear infinite;
}

@keyframes vmSignalScan { to { transform: rotate(360deg); } }

.vm-orb {
  display: grid;
  width: 36%;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--vm-line-strong);
  border-radius: 50%;
  background: var(--vm-recessed);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  transform: scale(calc(1 + var(--vm-level) * 0.075));
  transition: border-color 180ms ease, transform 80ms linear;
}

.vm-overlay[data-state="listening"] .vm-orb,
.vm-overlay[data-state="speaking"] .vm-orb,
.vm-overlay[data-state="thinking"] .vm-orb { border-color: var(--vm-status); }
.vm-overlay[data-state="error"] .vm-orb { border-color: var(--vm-risk); }
.vm-orb img { display: block; width: 62%; height: 62%; object-fit: contain; }

.vm-wave {
  display: flex;
  right: 17%;
  bottom: 18%;
  left: 17%;
  height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.vm-wave i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 99px;
  background: var(--vm-status);
  opacity: calc(0.28 + var(--vm-level) * 0.72);
  transform: scaleY(calc(0.16 + var(--vm-level) * 0.84));
  transition: background-color 180ms ease, opacity 80ms linear, transform 80ms linear;
}

.vm-wave i:nth-child(2), .vm-wave i:nth-child(8) { transform: scaleY(calc(0.24 + var(--vm-level) * 0.62)); }
.vm-wave i:nth-child(3), .vm-wave i:nth-child(7) { transform: scaleY(calc(0.34 + var(--vm-level) * 0.5)); }
.vm-wave i:nth-child(4), .vm-wave i:nth-child(6) { transform: scaleY(calc(0.2 + var(--vm-level) * 0.74)); }

.vm-level { width: min(290px, 26vw); min-width: 240px; }

.vm-level-label {
  display: flex;
  margin-bottom: 9px;
  justify-content: space-between;
  color: var(--vm-muted);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vm-level-label span:last-child { color: var(--vm-status); }

.vm-level-track {
  height: 5px;
  border: 1px solid var(--vm-line);
  border-radius: 3px;
  background: var(--vm-recessed);
  overflow: hidden;
}

.vm-level-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--vm-status);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 80ms linear, background-color 180ms ease;
}

.vm-conversation {
  display: grid;
  align-content: center;
  padding-left: clamp(30px, 5vw, 74px);
  border-left: 1px solid var(--vm-line);
}

.vm-state-row {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 9px;
}

.vm-state {
  color: var(--vm-status);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vm-interrupt-label {
  margin-left: auto;
  color: var(--vm-muted);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vm-conversation h1 {
  max-width: 640px;
  margin: 20px 0 0;
  color: var(--vm-text);
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.vm-intro {
  max-width: 54ch;
  margin: 20px 0 0;
  color: var(--vm-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

.vm-transcript-panel {
  min-height: 152px;
  margin-top: 34px;
  padding: 18px 20px 20px;
  border: 1px solid var(--vm-line);
  border-radius: 6px;
  background: var(--vm-plane);
}

.vm-transcript-label {
  color: var(--vm-muted);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.vm-transcript {
  max-width: 65ch;
  min-height: 74px;
  margin-top: 14px;
  color: var(--vm-text);
  font-size: clamp(1rem, 1.65vw, 1.2rem);
  font-weight: 470;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.vm-transcript:empty::before {
  content: 'Your conversation will appear here.';
  color: var(--vm-muted);
}

.vm-hint {
  min-height: 24px;
  margin-top: 16px;
  color: var(--vm-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.vm-overlay[data-state="error"] .vm-hint { color: var(--vm-secondary); }

.vm-footer {
  display: flex;
  min-height: 88px;
  padding-block: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--vm-line);
}

.vm-session-note {
  display: flex;
  max-width: 52ch;
  align-items: center;
  gap: 10px;
  color: var(--vm-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.vm-session-note svg { flex: 0 0 auto; color: var(--vm-status); }
.vm-actions { display: flex; align-items: center; gap: 10px; }

.vm-btn {
  display: inline-flex;
  min-height: 46px;
  padding: 0 17px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--vm-line-strong);
  border-radius: 4px;
  background: var(--vm-plane);
  color: var(--vm-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 120ms var(--vm-ease-out);
}

.vm-btn[hidden] { display: none; }

.vm-btn.primary {
  border-color: var(--vm-signal);
  background: var(--vm-signal);
  color: #061014;
}

.vm-btn:active { transform: scale(0.97); }

.vm-brand:focus-visible,
.vm-btn:focus-visible {
  outline: 2px solid var(--vm-signal);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .vm-brand:hover { background: var(--vm-plane); }
  .vm-btn.secondary:hover { border-color: var(--vm-signal); color: var(--vm-signal); }
  .vm-btn.primary:hover { background: var(--vm-teal); border-color: var(--vm-teal); }
}

:root.light-mode .vm-overlay {
  --vm-canvas: #f7f7f5;
  --vm-plane: #efefec;
  --vm-recessed: #e8e8e5;
  --vm-surface: #ffffff;
  --vm-raised: #deded9;
  --vm-text: #101012;
  --vm-secondary: #45454a;
  --vm-muted: #69696f;
  --vm-line: rgba(16, 16, 18, 0.11);
  --vm-line-strong: rgba(16, 16, 18, 0.2);
  --vm-signal: #087f91;
  --vm-teal: #0f766e;
  --vm-risk: #8f2721;
}

:root.light-mode .vm-orb { box-shadow: 0 18px 42px rgba(31, 41, 55, 0.14); }
:root.light-mode .vm-btn.primary { color: #ffffff; }

@media (max-width: 820px) {
  .vm-shell { padding-inline: 20px; }
  .vm-stage {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 32px;
  }
  .vm-signal { gap: 18px; }
  .vm-visual { width: 210px; min-width: 0; }
  .vm-level { width: 210px; min-width: 0; }
  .vm-conversation {
    width: min(620px, 100%);
    margin: 0 auto;
    padding: 0;
    border-left: 0;
    text-align: center;
  }
  .vm-state-row { justify-content: center; }
  .vm-interrupt-label { margin-left: 0; }
  .vm-conversation h1,
  .vm-intro { margin-inline: auto; }
  .vm-transcript-panel { text-align: left; }
  .vm-hint { text-align: center; }
}

@media (max-width: 640px) {
  .chat-composer { border-radius: 22px; padding: 10px 10px 9px; }
  .chat-composer .chat-upload-btn,
  .chat-composer .chat-icon-btn,
  .chat-composer #btnSendChat { width: 40px; height: 40px; }

  .vm-shell {
    grid-template-rows: auto 1fr auto;
    padding-inline: 16px;
  }
  .vm-topbar { min-height: 64px; }
  .vm-brand { gap: 9px; }
  .vm-brand img { width: 40px; height: 40px; }
  .vm-brand small { display: none; }
  .vm-session-meta { min-height: 32px; padding-inline: 9px; }
  .vm-stage { gap: 22px; padding-block: 22px 18px; align-content: center; }
  .vm-visual { width: min(176px, 47vw); }
  .vm-wave { bottom: 16%; height: 22px; gap: 4px; }
  .vm-level { width: min(220px, 62vw); }
  .vm-signal { gap: 14px; }
  .vm-state-row { min-height: 24px; }
  .vm-interrupt-label { display: none; }
  .vm-conversation h1 { margin-top: 13px; font-size: clamp(2rem, 10vw, 2.75rem); }
  .vm-intro { margin-top: 12px; font-size: 0.9rem; line-height: 1.52; }
  .vm-transcript-panel { min-height: 112px; margin-top: 20px; padding: 14px 15px 16px; }
  .vm-transcript { min-height: 52px; margin-top: 10px; font-size: 0.94rem; line-height: 1.5; }
  .vm-hint { margin-top: 12px; font-size: 0.72rem; }
  .vm-footer { min-height: 112px; padding-block: 13px max(13px, env(safe-area-inset-bottom)); flex-direction: column-reverse; gap: 10px; }
  .vm-actions { width: 100%; }
  .vm-btn { flex: 1 1 0; min-height: 46px; padding-inline: 12px; }
  .vm-session-note { font-size: 0.66rem; text-align: center; }
}

@media (max-width: 380px), (max-height: 720px) {
  .vm-stage { gap: 16px; padding-block: 16px 12px; }
  .vm-visual { width: 148px; }
  .vm-level { width: 190px; }
  .vm-conversation h1 { font-size: 1.9rem; }
  .vm-intro { display: none; }
  .vm-transcript-panel { min-height: 96px; margin-top: 14px; }
  .vm-footer { min-height: 102px; }
}

@media (prefers-reduced-motion: reduce) {
  .vm-overlay,
  .vm-scan,
  .vm-orb,
  .vm-ring,
  .vm-wave i,
  .chat-composer .chat-icon-btn.listening { animation: none !important; }
  .vm-overlay { transition: opacity 160ms ease !important; }
  .chat-composer #btnSendChat:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .vm-overlay { --vm-line: currentColor; --vm-line-strong: currentColor; }
  .vm-transcript-panel, .vm-btn, .vm-session-meta { border-width: 2px; }
}

/* ─── Answers read as prose, not as chat bubbles ─────────────────────────
   Every message shared one bubble style: background, border, 18px radius and
   an 85% width cap. That reads as a messaging app. An assistant's answer is a
   piece of writing — it should sit on the page like one, the way ChatGPT and
   Claude present theirs.

   Only the assistant side is unboxed. The user's own turns keep their bubble,
   which is what makes the two sides scannable at a glance. Messages that set
   an inline background — errors and the upgrade prompt — keep their box too,
   because an inline style outranks this. */

.chat-msg.ai .msg-content {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.7;
}

/* Prose spacing: paragraphs need air once the padding that was separating
   them is gone. */
.chat-msg.ai .msg-content > p,
.chat-msg.ai .chat-msg-text > p {
  margin: 0 0 0.9em;
}

.chat-msg.ai .msg-content > p:last-child,
.chat-msg.ai .chat-msg-text > p:last-child {
  margin-bottom: 0;
}

.chat-msg.ai .msg-content ul,
.chat-msg.ai .msg-content ol {
  margin: 0.6em 0 0.9em;
  padding-left: 1.35em;
}

.chat-msg.ai .msg-content li { margin-bottom: 0.35em; }

.chat-msg.ai .msg-content h1,
.chat-msg.ai .msg-content h2,
.chat-msg.ai .msg-content h3 {
  margin: 1.2em 0 0.5em;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.chat-msg.ai .msg-content h1:first-child,
.chat-msg.ai .msg-content h2:first-child,
.chat-msg.ai .msg-content h3:first-child { margin-top: 0; }

/* Code and tables still need a surface to sit on — those are objects in the
   prose, not the prose itself. */
.chat-msg.ai .msg-content pre,
.chat-msg.ai .msg-content table {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0.8em 0;
}

.chat-msg.ai .msg-avatar { opacity: 0.85; }

:root.light-mode .chat-msg.ai .msg-content {
  background: none;
  border: 0;
  color: var(--text-primary);
}

/* ─── Mode switch + deep research ────────────────────────────────────── */

.sc-modebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px 8px;
  flex-wrap: wrap;
}

.sc-mode-switch {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.sc-mode-btn {
  border: 0;
  background: none;
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.sc-mode-btn.active {
  background: var(--pl-green, #00ff87);
  color: #0b0f14;
}

.sc-mode-btn:active { transform: scale(0.97); }

.sc-deep {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  user-select: none;
}

.sc-deep input { margin: 0; width: 13px; height: 13px; cursor: pointer; }

/* FPL Image Gen 2.0 entry points. They sit to the right of the mode controls
   and read as secondary actions rather than competing with the mode switch. */
.sc-imagegen {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.sc-img-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary, rgba(255, 255, 255, 0.75));
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.sc-img-btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .sc-img-btn:hover {
    background: rgba(0, 212, 255, 0.14);
    color: var(--pl-cyan, #00d4ff);
  }
}

:root.light-mode .sc-img-btn {
  border-color: rgba(24, 24, 27, 0.16);
  background: rgba(24, 24, 27, 0.04);
  color: rgba(24, 24, 27, 0.7);
}

@media (max-width: 640px) {
  .sc-imagegen { margin-left: 0; }
}

/* Progress line while a multi-step investigation runs. Deep research takes
   several model calls, so silence for that long reads as a hang — this names
   the step actually in flight. */
.sc-step {
  font-size: 0.8rem;
  color: var(--pl-cyan, #00d4ff);
  margin-top: 4px;
}

.sc-step::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: scPulse 1s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes scPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* ─── Artifacts ──────────────────────────────────────────────────────── */

.sc-artifact {
  width: 100%;
  min-width: 0;
  margin-top: 14px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 8px;
  overflow: hidden;
  background: #111114;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.sc-artifact-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background:
    var(--brand-wash, linear-gradient(90deg, rgb(194 21 0 / 0.1), rgb(255 197 0 / 0.07))),
    #18181b;
}

.sc-artifact-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 750;
  color: var(--text-primary, #fff);
}

.sc-artifact-tag {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tac-cyan, #22d3ee);
}

.sc-artifact-frame {
  display: block;
  width: 100%;
  height: 180px;
  min-height: 120px;
  max-height: 900px;
  border: 0;
  background: #111114;
  opacity: 0;
  transition: height 180ms ease, opacity 140ms ease;
}

.sc-artifact.is-ready .sc-artifact-frame {
  opacity: 1;
}

@media (max-width: 640px) {
  .sc-artifact {
    margin-top: 12px;
    border-radius: 7px;
  }

  .sc-artifact-bar {
    padding-inline: 10px;
  }

  .sc-artifact-title {
    font-size: 0.76rem;
  }

  .sc-artifact-tag {
    font-size: 0.56rem;
  }
}

:root.light-mode .sc-artifact {
  background: #ffffff;
  border-color: rgba(8, 145, 178, 0.25);
  box-shadow: 0 14px 32px rgba(24, 24, 27, 0.08);
}

:root.light-mode .sc-artifact-bar {
  border-bottom-color: rgba(24, 24, 27, 0.1);
  background:
    var(--brand-wash, linear-gradient(90deg, rgb(194 21 0 / 0.07), rgb(255 197 0 / 0.1))),
    #fafafa;
}

:root.light-mode .sc-artifact-frame {
  background: #ffffff;
}

:root.light-mode .sc-mode-btn.active { color: #06251a; }

@media (prefers-reduced-motion: reduce) {
  .sc-step::after { animation: none; opacity: 0.7; }
  .sc-artifact-frame { transition: none; }
}

/* ─── Chat history: delete controls ──────────────────────────────────── */

.chatfpl-history .chat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.chat-item-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-del {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted, rgba(255, 255, 255, 0.45));
  cursor: pointer;
  /* Revealed on hover so the list stays calm, but always present for
     keyboard and touch users. */
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.chat-item:hover .chat-item-del,
.chat-item-del:focus-visible { opacity: 1; }

.chat-item-del:hover {
  color: var(--pl-red, #ff4d4d);
  background: rgba(255, 77, 77, 0.14);
}

.chatfpl-clear-btn {
  width: 100%;
  min-height: 34px;
  margin: 6px 0 2px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.chatfpl-clear-btn:hover {
  color: var(--pl-red, #ff4d4d);
  border-color: rgba(255, 77, 77, 0.32);
}

/* ─── Sidebar drawer (mobile) ────────────────────────────────────────── */

/* Desktop keeps the sidebar in the flow; the toggle and backdrop are for
   narrow screens only. */
.chatfpl-sidebar-toggle,
.chatfpl-sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .chatfpl-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 10px;
    left: 10px;
    z-index: 32;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(12, 16, 24, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
  }

  .chatfpl-layout {
    position: relative;
    overflow: hidden;
  }

  .chatfpl-main {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    margin-left: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Off-canvas until opened. transform beats animating `left`: it stays on
     the compositor, so the drawer does not jank on a phone. */
  .chatfpl-sidebar {
    /* Stated here rather than inherited: the drawer must not depend on a rule
       in another stylesheet, which is exactly how it got hidden before. */
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 34;
    width: min(82vw, 300px);
    transform: translate3d(calc(-100% - 8px), 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition: none;
    box-shadow: none;
    will-change: transform;
  }

  .chatfpl-layout.sidebar-open .chatfpl-sidebar {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 18px 0 46px rgba(0, 0, 0, 0.5);
  }

  .chatfpl-sidebar-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 33;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease;
  }

  .chatfpl-sidebar-backdrop[hidden] {
    display: none;
  }

  .chatfpl-layout.sidebar-open .chatfpl-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* The toggle sits over the message area, so keep the first row clear. */
  .chatfpl-messages { padding-top: 58px; }

  /* Bigger tap targets, and the delete control is always visible on touch
     since there is no hover. */
  .chat-item { min-height: 44px; }
  .chat-item-del { opacity: 1; width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .chatfpl-sidebar, .chatfpl-sidebar-backdrop { transition: none; }
}