/* ================================================================
 *  Mira — css/narration.css
 *  Atelier process-narration banner.
 *
 *  Aesthetic: dark-academic / letterpress journal. Sepia-on-cream.
 *  Ink-pace transitions (slow, deliberate; no spinning, no neon).
 *  Status colors are subdued. Errors are deliberate red but not
 *  alarmist — the researcher should see them as a clear signal,
 *  not a cry for help.
 *
 *  References:
 *    edwardtufte/tufte-css — typography sensibility
 *    argyleink/open-props — easing curves
 * ================================================================ */

/* ── Banner: the always-visible single-line status surface ────── */

.atelier-narration-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--cream, #f4ecd8);
  color: var(--brown-dark, #3a2e22);
  border-top: 1px solid var(--border-light, #d8c9a8);
  border-bottom: 1px solid var(--border-light, #d8c9a8);
  /* Slow ink-pace transition. Match an open-props ease-in-out-3
   * roughly: cubic-bezier(0.65, 0, 0.35, 1) at 320ms. */
  transition: background-color 320ms cubic-bezier(0.65, 0, 0.35, 1),
              color 320ms cubic-bezier(0.65, 0, 0.35, 1),
              border-color 320ms cubic-bezier(0.65, 0, 0.35, 1);
}

.atelier-narration-banner.narration-empty {
  display: none;
}

/* Status-color the left border, not the whole bar — that's the
 * Mira pattern from quote cards. Subdued, scholarly, never neon. */
.atelier-narration-banner.narration-info     { border-left: 3px solid #5a6a7a; }
.atelier-narration-banner.narration-progress { border-left: 3px solid #6a7a4a; }
.atelier-narration-banner.narration-ok       { border-left: 3px solid #3a7a3a; }
.atelier-narration-banner.narration-warn     { border-left: 3px solid #b8860b; }
.atelier-narration-banner.narration-error    { border-left: 3px solid #7a1515; background: #f7eee0; }
.atelier-narration-banner.narration-stale    { border-left: 3px solid #7a6a3a; font-style: italic; }

/* Heartbeat dot — slow pulse. Color matches the level border. */
.narration-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.65;
  animation: narration-pulse 2200ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.narration-info     .narration-dot { color: #5a6a7a; }
.narration-progress .narration-dot { color: #6a7a4a; }
.narration-ok       .narration-dot { color: #3a7a3a; animation: none; opacity: 0.85; }
.narration-warn     .narration-dot { color: #b8860b; }
.narration-error    .narration-dot { color: #7a1515; animation: none; opacity: 0.95; }
.narration-stale    .narration-dot { color: #7a6a3a; }

@keyframes narration-pulse {
  0%   { opacity: 0.45; transform: scale(0.85); }
  50%  { opacity: 0.95; transform: scale(1.05); }
  100% { opacity: 0.45; transform: scale(0.85); }
}

/* Plain-English text — primary. Reads like prose, not a log line. */
.narration-text {
  flex: 1;
  font-family: var(--serif, "et-book", Charter, Georgia, serif);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--brown-dark, #3a2e22);
}

.narration-error .narration-text  { color: #5a1010; font-style: normal; }
.narration-stale .narration-text  { color: #6a5a40; }

.narration-time {
  font-size: 0.7rem;
  color: var(--brown, #6a5a40);
  white-space: nowrap;
  opacity: 0.75;
}

.narration-copy-btn,
.narration-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-light, #d8c9a8);
  color: var(--brown-dark, #3a2e22);
  font-size: 0.7rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 220ms cubic-bezier(0.65, 0, 0.35, 1);
}
.narration-copy-btn:hover,
.narration-toggle-btn:hover {
  background: var(--cream-dark, #ece1c7);
}
.narration-error .narration-copy-btn {
  border-color: #a04040;
  color: #5a1010;
}
.narration-error .narration-copy-btn:hover {
  background: #f0d8d0;
}

/* ── Plan-first list (Magentic-UI pattern) ────────────────────
 * Shown above the live banner when a research run begins. Steps
 * light up as they complete. Lets the user see the strategy
 * before execution and track progress against it. */

.atelier-narration-plan {
  list-style: none;
  margin: 0 0 6px;
  padding: 6px 14px;
  background: var(--cream, #f4ecd8);
  border-top: 1px solid var(--border-light, #d8c9a8);
  border-bottom: 1px solid var(--border-light, #d8c9a8);
  font-family: var(--serif, "et-book", Charter, Georgia, serif);
  font-size: 0.84rem;
  line-height: 1.5;
  counter-reset: narration-plan-step;
}

.narration-plan-step {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
  color: var(--brown, #6a5a40);
  /* Slow ink-pace transition as steps light up */
  transition: color 360ms cubic-bezier(0.65, 0, 0.35, 1),
              opacity 360ms cubic-bezier(0.65, 0, 0.35, 1);
}

.narration-plan-step-pending  { opacity: 0.55; }
.narration-plan-step-active   {
  color: var(--brown-dark, #3a2e22);
  font-weight: 500;
  opacity: 1;
}
.narration-plan-step-complete {
  color: #3a5a3a;
  opacity: 0.85;
}
.narration-plan-step-failed   {
  color: #7a1515;
  opacity: 1;
}

.narration-plan-marker {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  width: 14px;
  flex-shrink: 0;
  text-align: center;
  font-weight: 600;
}
.narration-plan-step-pending  .narration-plan-marker { color: var(--border-light, #d8c9a8); }
.narration-plan-step-active   .narration-plan-marker { color: var(--brown-dark, #3a2e22); }
.narration-plan-step-complete .narration-plan-marker { color: #3a7a3a; }
.narration-plan-step-failed   .narration-plan-marker { color: #7a1515; }

.narration-plan-text {
  flex: 1;
}

.narration-plan-note {
  font-size: 0.72rem;
  color: var(--brown, #6a5a40);
  font-style: italic;
  opacity: 0.85;
}

/* ── History drawer: expandable list of recent events ─────────── */

.atelier-narration-drawer {
  display: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--cream, #f4ecd8);
  border-bottom: 1px solid var(--border-light, #d8c9a8);
  padding: 4px 14px 8px;
  font-size: 0.72rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.narration-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px dotted rgba(122, 106, 64, 0.2);
}
.narration-row:last-child {
  border-bottom: none;
}

.narration-row .narration-dot {
  width: 6px;
  height: 6px;
  animation: none;
  opacity: 0.6;
  align-self: center;
}
.narration-row .narration-time {
  font-size: 0.66rem;
  min-width: 60px;
  flex-shrink: 0;
}
.narration-row .narration-text {
  flex: 1;
  font-style: normal;
  font-size: 0.78rem;
  font-family: var(--serif, "et-book", Charter, Georgia, serif);
}
.narration-row-error .narration-text { color: #5a1010; }
.narration-row-warn  .narration-text { color: #6a4a08; }
.narration-row-ok    .narration-text { color: #2a5a2a; }

.narration-row .narration-copy-btn {
  font-size: 0.65rem;
  padding: 1px 6px;
}