/* ── FastStats · ai.css ── The AI assistant panel ──
 * Loaded alongside style.css / embed.css. Everything here is namespaced under
 * .fs-ai-* (plus one body class), so it adds to the workbench without touching
 * any existing rule. All colours come from the app's own tokens, so the panel
 * follows the light / dark toggle for free.
 */

/* ── Header entry point ── */
.fs-ai-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: calc(0.3rem + 1px) calc(0.6rem + 1px);
  border: 0;
  border-radius: 8px;
  background: var(--bg-glass);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.fs-ai-toggle:hover {
  color: var(--text-accent);
  border-color: var(--border-accent);
  background: var(--bg-glass-hover);
}
.fs-ai-toggle[aria-expanded='true'] {
  color: var(--text-accent);
  border-color: var(--border-accent);
}
.fs-ai-toggle-pro {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: #fff;
}

/* Narrow phones: the header has already collapsed to icons, and this badge is
   the one label left that still costs ~45px — enough on a 320px screen to push
   the last header icon off the right edge and give the page a horizontal
   scrollbar. The free-plan chip beside it still links to /pricing, so the
   upsell survives the collapse. */
@media (max-width: 480px) {
  .fs-ai-toggle {
    gap: 0;
    padding: calc(0.45rem + 1px);
  }
  .fs-ai-toggle-pro {
    display: none;
  }
}

/* ── Floating launcher ── */
.fs-ai-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-primary), #7c3aed);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.fs-ai-fab:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(79, 70, 229, 0.45); }
.fs-ai-fab:active { transform: translateY(0); }
.fs-ai-fab .fs-icon { width: 1.05em; height: 1.05em; }

/* ── The panel ── */
.fs-ai-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 950;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--bg-base);
  border-left: 1px solid var(--border-medium);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
/* The drop shadow belongs to the *open* panel only. Left on the base rule it
   was still painted while the panel sat parked off-screen, and because the
   shadow is cast leftwards (-18px) it stayed visible as a dark band down the
   right edge of the page after the assistant was closed. */
body.fs-ai-open .fs-ai-panel {
  transform: translateX(0);
  box-shadow: -18px 0 48px rgba(2, 6, 23, 0.35);
}

/* Wide screens dock the panel: the workbench keeps its own scroll and simply
   gives up the space, which is why this is padding on the shell rather than an
   overlay. Narrow screens get an overlay instead (see the media query below). */
@media (min-width: 1180px) {
  body.fs-ai-open .app-shell { padding-right: min(420px, 100vw); }
  body.fs-ai-open .fs-ai-panel { box-shadow: none; }
}

.fs-ai-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-glass);
}
.fs-ai-head-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent-primary), #7c3aed);
  color: #fff;
}
.fs-ai-head-icon .fs-icon { width: 1em; height: 1em; }
.fs-ai-head-text { flex: 1; min-width: 0; }
.fs-ai-head-text h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text-primary);
}
.fs-ai-head-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-ai-head-tools { display: flex; gap: 0.15rem; }

.fs-ai-icon-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.fs-ai-icon-btn:hover:not(:disabled) {
  color: var(--text-accent);
  background: var(--bg-glass-hover);
  border-color: var(--border-subtle);
}
.fs-ai-icon-btn:disabled { opacity: 0.32; cursor: default; }
.fs-ai-icon-btn .fs-icon { width: 0.95em; height: 0.95em; }

/* ── Current-analysis strip ── */
.fs-ai-strip {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 0.78rem;
}
.fs-ai-strip > summary {
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 600;
  list-style: none;
}
.fs-ai-strip > summary::-webkit-details-marker { display: none; }
.fs-ai-strip > summary::before { content: '▸ '; color: var(--text-muted); }
.fs-ai-strip[open] > summary::before { content: '▾ '; }
.fs-ai-strip-body { padding: 0 0.9rem 0.75rem; }
.fs-ai-strip-meta { margin: 0 0 0.4rem; color: var(--text-muted); }
.fs-ai-recipe {
  margin: 0;
  padding: 0.55rem 0.7rem;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ── Thread ── */
.fs-ai-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  scrollbar-width: thin;
}

.fs-ai-empty { text-align: center; padding: 1.5rem 0.5rem; }
.fs-ai-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 0.7rem;
  border-radius: 14px;
  background: var(--bg-elevated);
  color: var(--text-accent);
}
.fs-ai-empty-icon .fs-icon { width: 1.3em; height: 1.3em; }
.fs-ai-empty-title { margin: 0 0 0.25rem; font-weight: 650; color: var(--text-primary); }
.fs-ai-empty-sub { margin: 0 0 1rem; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.fs-ai-chips { display: flex; flex-direction: column; gap: 0.35rem; }
.fs-ai-chip {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-glass);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.fs-ai-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-accent);
  background: var(--bg-glass-hover);
}

.fs-ai-msg {
  border-radius: 12px;
  font-size: 0.83rem;
  line-height: 1.55;
  animation: fs-ai-rise 0.18s ease-out;
}
@keyframes fs-ai-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.fs-ai-msg-user {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, var(--accent-primary), #7c3aed);
  color: #fff;
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fs-ai-msg-ai {
  align-self: stretch;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.fs-ai-summary { margin: 0 0 0.5rem; font-weight: 600; }
.fs-ai-msg-ai .fs-ai-summary:only-child { margin-bottom: 0; }

.fs-ai-note {
  align-self: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.fs-ai-msg-error {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: var(--text-primary);
}
.fs-ai-msg-error p { margin: 0 0 0.4rem; }
.fs-ai-error-icon { color: var(--accent-danger); flex: none; }

/* ── Action cards ── */
.fs-ai-actions { display: flex; flex-direction: column; gap: 0.35rem; }
.fs-ai-action {
  display: flex;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-elevated);
}
.fs-ai-action.is-error {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}
.fs-ai-action-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.16);
  color: var(--text-accent);
}
.fs-ai-action.is-error .fs-ai-action-icon { background: rgba(239, 68, 68, 0.16); color: var(--accent-danger); }
.fs-ai-action-icon .fs-icon { width: 0.75em; height: 0.75em; }
.fs-ai-action-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.fs-ai-action-label { font-weight: 600; font-size: 0.8rem; }
.fs-ai-action-detail,
.fs-ai-action-error {
  font-size: 0.74rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.fs-ai-action-error { color: var(--accent-danger); }
.fs-ai-action-preview > summary {
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--text-accent);
  margin-top: 0.2rem;
}
.fs-ai-preview-body {
  margin-top: 0.35rem;
  padding: 0.45rem 0.6rem;
  border-radius: 7px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  font-size: 0.76rem;
  max-height: 220px;
  overflow: auto;
}

.fs-ai-proposal-warn {
  margin: 0 0 0.5rem;
  font-size: 0.76rem;
  color: var(--accent-warning);
}
.fs-ai-confirm { display: flex; gap: 0.4rem; margin-top: 0.55rem; }

/* ── Prose from the model ── */
.fs-ai-prose { margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-secondary); }
.fs-ai-prose :first-child { margin-top: 0; }
.fs-ai-prose :last-child { margin-bottom: 0; }
.fs-ai-prose p { margin: 0.45em 0; }
.fs-ai-prose h3, .fs-ai-prose h4, .fs-ai-prose h5, .fs-ai-prose h6 {
  margin: 0.7em 0 0.3em;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.fs-ai-prose ul { margin: 0.4em 0; padding-left: 1.15em; }
.fs-ai-prose li { margin: 0.15em 0; }
.fs-ai-prose code {
  font-family: Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.05em 0.3em;
  border-radius: 4px;
  background: var(--bg-elevated);
}

/* ── Thinking indicator ── */
.fs-ai-thinking { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); }
.fs-ai-thinking-label { font-size: 0.78rem; }
.fs-ai-dots { display: inline-flex; gap: 3px; }
.fs-ai-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-accent);
  animation: fs-ai-pulse 1.1s infinite ease-in-out;
}
.fs-ai-dots i:nth-child(2) { animation-delay: 0.15s; }
.fs-ai-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fs-ai-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ── Composer ── */
.fs-ai-composer {
  padding: 0.7rem 0.75rem 0.8rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-glass);
}
.fs-ai-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.4rem 0.4rem 0.4rem 0.6rem;
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  background: var(--bg-base);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fs-ai-composer-row:focus-within {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.fs-ai-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  resize: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.45;
  max-height: 160px;
  outline: none;
}
.fs-ai-input::placeholder { color: var(--text-muted); }
.fs-ai-input:disabled { opacity: 0.6; }
.fs-ai-send {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: none;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent-primary), #7c3aed);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.fs-ai-send:hover:not(:disabled) { transform: translateY(-1px); }
.fs-ai-send:disabled { opacity: 0.45; cursor: default; }
.fs-ai-send .fs-icon { width: 0.85em; height: 0.85em; }
.fs-ai-composer-hint {
  margin: 0.45rem 0 0;
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
}

/* ── Free plan ── */
.fs-ai-locked { padding: 1rem; overflow-y: auto; }
.fs-ai-locked .fs-lock-panel { margin: 0; }

/* ── Narrow screens: overlay instead of docking ── */
@media (max-width: 1179px) {
  .fs-ai-panel { width: min(420px, 100vw); }
  .fs-ai-fab span { display: none; }
  .fs-ai-fab { padding: 0.7rem; }
}
@media (max-width: 520px) {
  .fs-ai-panel { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-ai-panel { transition: none; }
  .fs-ai-msg { animation: none; }
  .fs-ai-dots i { animation: none; opacity: 0.7; }
}