/* ── Kip CI-1: rich chat cards + intent-aware chips + typing status ──────────
 * Styles the structured cards ChatCards.js renders inside the chat. Self-contained
 * (local custom properties), additive — no existing chat rule is overridden.
 * Honours prefers-reduced-motion + a basic dark variant. */

:root {
  --mc-card-radius: 14px;
  --mc-card-shadow: 0 6px 22px rgba(16, 24, 40, 0.12);
  --mc-card-bg: #ffffff;
  --mc-card-fg: #1f2733;
  --mc-card-muted: #667085;
  --mc-card-line: #eceff4;
  /* Intent accent palette — every answer type is visually distinct. */
  --mc-intent-definition: #3b82f6;
  --mc-intent-synonym:    #14b8a6;
  --mc-intent-antonym:    #f97316;
  --mc-intent-example:    #8b5cf6;
  --mc-intent-quiz:       #f59e0b;
  --mc-intent-pronunciation: #06b6d4;
  --mc-intent-add:        #22c55e;
  --mc-intent-clarify:    #6366f1;
  --mc-intent-plan:       #7c3aed;
  --mc-intent-receipt:    #16a34a;
  --mc-intent-etymology:  #a16207;
  --mc-intent-default:    #64748b;
}

/* ── Card container ───────────────────────────────────────────────────────── */
.mc-card {
  background: var(--mc-card-bg);
  color: var(--mc-card-fg);
  border: 1px solid var(--mc-card-line);
  border-left: 4px solid var(--mc-intent-default);
  border-radius: var(--mc-card-radius);
  box-shadow: var(--mc-card-shadow);
  padding: 12px 14px;
  margin: 2px 0;
  font-size: 0.92rem;
  line-height: 1.5;
  animation: mc-card-in 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
@keyframes mc-card-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Accent the left border + key bits by intent. */
.mc-card[data-mc-intent="definition"]    { border-left-color: var(--mc-intent-definition); }
.mc-card[data-mc-intent="synonym"]       { border-left-color: var(--mc-intent-synonym); }
.mc-card[data-mc-intent="antonym"]       { border-left-color: var(--mc-intent-antonym); }
.mc-card[data-mc-intent="example"]       { border-left-color: var(--mc-intent-example); }
.mc-card[data-mc-intent="etymology"]     { border-left-color: var(--mc-intent-etymology); }
.mc-card[data-mc-intent="pronunciation"] { border-left-color: var(--mc-intent-pronunciation); }
.mc-card[data-mc-intent="quiz"]          { border-left-color: var(--mc-intent-quiz); }
.mc-card[data-mc-intent="clarify"]       { border-left-color: var(--mc-intent-clarify); }
.mc-card[data-mc-intent="plan"]          { border-left-color: var(--mc-intent-plan); }
.mc-card[data-mc-intent="receipt"]       { border-left-color: var(--mc-intent-receipt); }

/* ── Definition card ──────────────────────────────────────────────────────── */
.mc-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.mc-card-word { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.mc-card-ipa  { color: var(--mc-card-muted); font-size: 0.85rem; }
.mc-card-pos  {
  margin-left: auto; font-size: 0.7rem; font-weight: 600; text-transform: lowercase;
  color: var(--mc-intent-definition); background: color-mix(in srgb, var(--mc-intent-definition) 12%, transparent);
  padding: 2px 9px; border-radius: 999px;
}
.mc-card-img  { display: block; max-width: 140px; max-height: 110px; border-radius: 10px; margin: 6px 0; }
.mc-card-def  { color: var(--mc-card-fg); }
.mc-card-meta { color: var(--mc-card-muted); font-size: 0.84rem; margin-top: 4px; }
.mc-card-q     { font-weight: 600; margin-bottom: 8px; }
.mc-card-title { font-weight: 700; margin-bottom: 6px; }

/* ── Options card (CI-5 "how should I export these?") ─────────────────────── */
.mc-opt-groups { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mc-opt-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mc-opt-label {
  font: 600 0.72rem/1 inherit; letter-spacing: 0.02em; text-transform: uppercase;
  opacity: 0.62; min-width: 64px; flex: 0 0 auto;
}
.mc-opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-card-options .mc-card-actions { margin-top: 12px; }

/* ── Action chips (the actionable part) ───────────────────────────────────── */
.mc-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mc-card-chip {
  font: 600 0.8rem/1 inherit;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  color: var(--mc-intent-default);
  background: color-mix(in srgb, var(--mc-intent-default) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--mc-intent-default) 30%, transparent);
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mc-card-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(16,24,40,0.14);
  background: color-mix(in srgb, var(--mc-intent-default) 18%, #fff); }
.mc-card-chip:active { transform: translateY(0); }
.mc-card-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--mc-intent-default) 45%, transparent); outline-offset: 2px; }
/* Color each chip by its declared intent. */
.mc-card-chip[data-mc-intent="pronunciation"] { --mc-intent-default: var(--mc-intent-pronunciation); color: var(--mc-intent-pronunciation); }
.mc-card-chip[data-mc-intent="add"]    { --mc-intent-default: var(--mc-intent-add);    color: var(--mc-intent-add); }
.mc-card-chip[data-mc-intent="quiz"]   { --mc-intent-default: var(--mc-intent-quiz);   color: var(--mc-intent-quiz); }
.mc-card-chip[data-mc-intent="synonym"]{ --mc-intent-default: var(--mc-intent-synonym);color: var(--mc-intent-synonym); }

/* ── Wordlist card (synonym / antonym) — tappable term pills ───────────────── */
.mc-term-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mc-term {
  font: 600 0.84rem/1 inherit;
  padding: 6px 11px; border-radius: 8px; cursor: pointer;
  color: var(--mc-card-fg);
  background: color-mix(in srgb, var(--mc-intent-default) 8%, #fff);
  border: 1px solid var(--mc-card-line);
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.mc-card-wordlist[data-mc-intent="synonym"] .mc-term:hover { border-color: var(--mc-intent-synonym); background: color-mix(in srgb, var(--mc-intent-synonym) 12%, #fff); transform: translateY(-1px); }
.mc-card-wordlist[data-mc-intent="antonym"] .mc-term:hover { border-color: var(--mc-intent-antonym); background: color-mix(in srgb, var(--mc-intent-antonym) 12%, #fff); transform: translateY(-1px); }
.mc-term:active { transform: translateY(0); }
.mc-term:focus-visible { outline: 3px solid color-mix(in srgb, var(--mc-intent-default) 45%, transparent); outline-offset: 2px; }

/* ── Example card — leveled sentence list ──────────────────────────────────── */
.mc-example-list { list-style: none; margin: 4px 0 0; padding: 0; }
.mc-example-row  { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--mc-card-line); }
.mc-example-row:last-child { border-bottom: 0; }
.mc-example-text  { font-style: italic; }
.mc-example-level { margin-left: auto; flex: none; font-size: 0.68rem; font-weight: 600; text-transform: lowercase;
  color: var(--mc-intent-example); background: color-mix(in srgb, var(--mc-intent-example) 12%, transparent);
  padding: 2px 8px; border-radius: 999px; }

/* ── Pronunciation card — big IPA ──────────────────────────────────────────── */
.mc-card-ipa-big {
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--mc-intent-pronunciation); margin: 4px 0 2px;
}

/* ── Quiz card ─────────────────────────────────────────────────────────────── */
.mc-card-quiz .mc-card-def { font-size: 1rem; font-weight: 600; }
.mc-quiz-prompt { margin-top: 8px; }

/* ── CI-2 · learner-aware recall note (definition card) ────────────────────── */
.mc-card-recall {
  margin-top: 8px; padding: 6px 10px; border-radius: 8px;
  font-size: 0.8rem; line-height: 1.4;
  color: var(--mc-card-fg);
  background: color-mix(in srgb, var(--mc-intent-default) 9%, transparent);
  border-left: 3px solid var(--mc-intent-default);
}
.mc-card-recall[data-tone="struggle"] { --mc-intent-default: var(--mc-intent-antonym); }   /* warm: revisit */
.mc-card-recall[data-tone="mastered"] { --mc-intent-default: var(--mc-intent-receipt); }   /* green: nailed it */
.mc-card-recall[data-tone="recent"]   { --mc-intent-default: var(--mc-intent-definition); }/* blue: seen lately */

/* Chip color for the remaining intents (definition already covered above). */
.mc-card-chip[data-mc-intent="antonym"]    { --mc-intent-default: var(--mc-intent-antonym);    color: var(--mc-intent-antonym); }
.mc-card-chip[data-mc-intent="example"]    { --mc-intent-default: var(--mc-intent-example);    color: var(--mc-intent-example); }
.mc-card-chip[data-mc-intent="etymology"]  { --mc-intent-default: var(--mc-intent-etymology);  color: var(--mc-intent-etymology); }
.mc-card-chip[data-mc-intent="definition"] { --mc-intent-default: var(--mc-intent-definition); color: var(--mc-intent-definition); }
.mc-card-chip[data-mc-intent="challenge"]  { --mc-intent-default: var(--mc-intent-quiz);       color: var(--mc-intent-quiz); }
.mc-card-chip[data-mc-intent="plan"]       { --mc-intent-default: var(--mc-intent-plan);       color: #fff; background: var(--mc-intent-plan); border-color: var(--mc-intent-plan); }
.mc-card-chip[data-mc-intent="plan"]:hover { background: color-mix(in srgb, var(--mc-intent-plan) 85%, #000); }
.mc-card-chip[data-mc-intent="add"]        { --mc-intent-default: var(--mc-intent-add);        color: var(--mc-intent-add); }

/* ── Plan + receipt cards (CI-3) ──────────────────────────────────────────── */
.mc-plan-list { list-style: none; margin: 0; padding: 0; }
.mc-plan-step { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.mc-plan-n { flex: none; width: 20px; height: 20px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  display: grid; place-items: center; color: #fff; background: var(--mc-intent-plan); }
.mc-plan-label { flex: 1; }
/* CI-3.5 — per-step ✕ drop button + removed state (reversible). */
.mc-plan-drop { flex: none; border: 0; background: transparent; cursor: pointer; color: var(--mc-card-muted);
  font-size: 0.85rem; line-height: 1; padding: 3px 5px; border-radius: 6px; opacity: 0.55;
  transition: opacity .12s ease, background .12s ease, color .12s ease; }
.mc-plan-drop:hover { opacity: 1; color: #dc2626; background: color-mix(in srgb, #dc2626 12%, transparent); }
.mc-plan-drop:disabled { opacity: 0.25; cursor: default; }
.mc-plan-step.is-removed { opacity: 0.45; }
.mc-plan-step.is-removed .mc-plan-label { text-decoration: line-through; }
.mc-plan-step.is-removed .mc-plan-n { background: var(--mc-card-muted); }
.mc-receipt-list { list-style: none; margin: 0; padding: 0; }
.mc-receipt-step { padding: 3px 0; }
.mc-receipt-step.is-ok  { color: var(--mc-intent-receipt); }
.mc-receipt-step.is-fail { color: #dc2626; }
/* CI-5 — live "⏳ working on it…" row + spinner (the card updates in place as steps run). */
.mc-receipt-step.is-active { color: var(--mc-card-muted); display: flex; align-items: center; gap: 7px; }
.mc-receipt-spin {
  flex: none; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--mc-intent-receipt) 35%, transparent);
  border-top-color: var(--mc-intent-receipt);
  animation: mc-spin 0.7s linear infinite;
}
.mc-card-receipt.is-live { border-left-color: var(--mc-intent-receipt); }
@keyframes mc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mc-receipt-spin { animation: none; } }

/* CI-5 · Silent Actions mode — the card creator does its work OFFSCREEN (not
 * display:none, so canvas layout/measurement still works) while Kip narrates in
 * chat. Covers the batch quiz-card modal + the puzzle creators. */
body.kip-silent-actions #batch-test-card-modal,
body.kip-silent-actions #crossword-creator-modal,
body.kip-silent-actions #wordsearch-creator-modal {
  position: fixed !important; left: -99999px !important; top: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* ── Typing status line (beside the dots) ─────────────────────────────────────
 * NB: `.mc-typing span` in mascot-chat.css styles EVERY span as an 8px dot, so we
 * must out-specify it (.mc-typing .mc-typing-status) AND reset the dot props. */
.mc-typing .mc-typing-status {
  width: auto; height: auto; border-radius: 0; background: none;
  opacity: 1; animation: none;
  font-size: 0.74rem; color: var(--mc-card-muted); margin-left: 6px; white-space: nowrap;
}

/* ── Dark variant ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --mc-card-bg: #1f2530; --mc-card-fg: #e6e9ef; --mc-card-muted: #9aa4b2; --mc-card-line: #2c3442;
    --mc-card-shadow: 0 6px 22px rgba(0,0,0,0.4);
  }
}
body.theme-dark .mc-card { background: #1f2530; color: #e6e9ef; border-color: #2c3442; }
@media (prefers-color-scheme: dark) {
  .mc-term { background: color-mix(in srgb, var(--mc-intent-default) 14%, #1f2530); color: var(--mc-card-fg); }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mc-card { animation: none; }
  .mc-card-chip { transition: none; }
}