/* InChat Callouts — dialogue blocks for AI + human conversation surfaces.
   Six acts (note · decision · consent · plan · result · blocked), one
   resolution law: an answered callout does not disappear, it stamps in place.
   Zero deps, CSP-safe. Theme via custom props on .ic-root;
   flip [data-ic-theme="dark"] for Studio dark.
   ENOK Foundry · https://enok.com */

.ic-root{
  /* Light — Santorini white / earth adobe (low glow, earthy, no gradients) */
  --ic-bg:#FBF8F1; --ic-panel:#FFFFFF; --ic-line:#E5DECF; --ic-line2:#D8CFBB;
  --ic-ink:#2A2622; --ic-ink2:#7A7266;
  --ic-accent:#46708C; --ic-accent-bg:#E9EEF2;
  --ic-run:#3E6B4A;  --ic-run-bg:#E8EFE5;   /* landed / positive */
  --ic-wait:#8A6A2A; --ic-wait-bg:#F3EBD8;  /* in flight / waiting */
  --ic-err:#A24B37;  --ic-err-bg:#F4E3DC;   /* blocked / needs a hand */
  --ic-r-block:12px; --ic-r-ctl:8px; --ic-r-chip:5px;
  --ic-rail:3px;
  --ic-shadow:0 1px 2px rgba(42,38,34,.05);
  --ic-mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ic-ink); line-height:1.55;
}
.ic-root[data-ic-theme="dark"]{
  --ic-bg:#191713; --ic-panel:#221F1A; --ic-line:#3A352C; --ic-line2:#4A4438;
  --ic-ink:#F2EDE2; --ic-ink2:#A79D8C;
  --ic-accent:#7FA6C2; --ic-accent-bg:#25303A;
  --ic-run:#8FB98A;  --ic-run-bg:#232C22;
  --ic-wait:#CBA55E; --ic-wait-bg:#2E2818;
  --ic-err:#D08A6E;  --ic-err-bg:#2E211B;
  --ic-shadow:0 1px 2px rgba(0,0,0,.28);
}

/* ── Message chrome (optional host wrapper; matches Skim Chips) ────────── */
.ic-msg{background:var(--ic-panel);border:1px solid var(--ic-line);
  border-radius:14px;padding:16px 18px;margin:0 0 16px;}
.ic-who{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.ic-who .ic-name{font-size:13px;font-weight:700;}
.ic-who .ic-t{font-size:11.5px;color:var(--ic-ink2);}
.ic-say{font-size:14.5px;margin:8px 0;}

/* ── The callout block ────────────────────────────────────────────────── */
.ic-callout{
  display:block;background:var(--ic-panel);
  border:1px solid var(--ic-line);border-left:var(--ic-rail) solid var(--ic-line2);
  border-radius:var(--ic-r-block);padding:13px 16px;margin:12px 0;
  box-shadow:var(--ic-shadow);
}
.ic-callout:first-child{margin-top:0;}
.ic-callout:last-child{margin-bottom:0;}

/* The rail carries the act. Colour never carries meaning alone — the act
   label is always spelled out next to it. */
.ic-callout[data-kind="note"]    {border-left-color:var(--ic-line2);}
.ic-callout[data-kind="ask"]     {border-left-color:var(--ic-accent);}
.ic-callout[data-kind="plan"]    {border-left-color:var(--ic-accent);}
.ic-callout[data-kind="result"]  {border-left-color:var(--ic-run);}
.ic-callout[data-kind="blocked"] {border-left-color:var(--ic-err);}

/* Consent is dashed and never filled — it asks for a hand, it does not
   pretend to be a surface (same law as Skim Chips' consent chip). */
.ic-callout[data-kind="consent"]{
  background:transparent;border:1.5px dashed var(--ic-err);
  border-left:1.5px dashed var(--ic-err);box-shadow:none;
}

/* ── Head ─────────────────────────────────────────────────────────────── */
.ic-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.ic-act{font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ic-ink2);flex:none;}
.ic-callout[data-kind="ask"] .ic-act,
.ic-callout[data-kind="plan"] .ic-act    {color:var(--ic-accent);}
.ic-callout[data-kind="result"] .ic-act  {color:var(--ic-run);}
.ic-callout[data-kind="blocked"] .ic-act,
.ic-callout[data-kind="consent"] .ic-act {color:var(--ic-err);}
.ic-title{font-size:14px;font-weight:700;margin:0;min-width:0;}
.ic-meta{margin-left:auto;font-size:11.5px;color:var(--ic-ink2);
  font-family:var(--ic-mono);flex:none;}

/* ── Body ─────────────────────────────────────────────────────────────── */
.ic-body{font-size:14px;margin:7px 0 0;}
.ic-body:empty{display:none;}

/* Receipt rows — what actually landed, exact */
.ic-rows{margin:11px 0 0;border-top:1px solid var(--ic-line);}
.ic-row{display:flex;gap:12px;align-items:baseline;
  padding:6px 0;border-bottom:1px solid var(--ic-line);font-size:13px;}
.ic-row:last-child{border-bottom:0;padding-bottom:0;}
.ic-k{flex:none;min-width:9.5em;color:var(--ic-ink2);font-size:12px;}
.ic-v{min-width:0;font-family:var(--ic-mono);font-size:12.5px;
  overflow-wrap:anywhere;}

/* Steps — a proposed sequence, each with its own state */
.ic-steps{list-style:none;margin:11px 0 0;padding:0;}
.ic-step{display:flex;gap:9px;align-items:baseline;padding:3.5px 0;font-size:13.5px;}
.ic-mark{flex:none;width:1.1em;text-align:center;font-size:11px;line-height:1.5;
  color:var(--ic-ink2);}
.ic-step[data-state="run"]  .ic-mark{color:var(--ic-wait);animation:ic-pulse 1.4s infinite;}
.ic-step[data-state="done"] .ic-mark{color:var(--ic-run);}
.ic-step[data-state="fail"] .ic-mark{color:var(--ic-err);}
.ic-step[data-state="done"] .ic-what{color:var(--ic-ink2);}
.ic-step[data-state="skip"] .ic-what{color:var(--ic-ink2);text-decoration:line-through;}
.ic-what{min-width:0;}

/* Inline chips — kept deliberately compatible with Skim Chips' grammar */
.ic-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  font-weight:700;letter-spacing:.02em;padding:2px 8px;vertical-align:middle;
  white-space:nowrap;line-height:1.4;border-radius:var(--ic-r-chip);
  color:var(--ic-ink);background:var(--ic-bg);border:1px solid var(--ic-line);}
.ic-chip.ic-num{font-family:var(--ic-mono);font-weight:600;}
.ic-chip.ic-ref{color:var(--ic-accent);background:var(--ic-accent-bg);border-color:transparent;}
a.ic-chip{text-decoration:none;}
a.ic-chip:hover{text-decoration:underline;}

/* ── Disclosure — detail without a wall of text ───────────────────────── */
.ic-more{font:inherit;font-size:12px;font-weight:600;color:var(--ic-ink2);
  background:transparent;border:0;padding:8px 0 0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;}
.ic-more:hover{color:var(--ic-ink);}
.ic-extra{font-size:13px;color:var(--ic-ink2);margin:9px 0 0;
  border-left:2px solid var(--ic-line);padding:2px 0 2px 12px;}

/* ── Options — the answer row ─────────────────────────────────────────── */
.ic-options{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 0;}
.ic-opt{font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:7px 15px;border-radius:var(--ic-r-ctl);
  color:var(--ic-ink);background:var(--ic-bg);border:1px solid var(--ic-line2);}
.ic-opt:hover{background:var(--ic-panel);border-color:var(--ic-ink2);}
.ic-opt:focus-visible{outline:2px solid var(--ic-accent);outline-offset:2px;}
.ic-opt[data-tone="primary"]{color:var(--ic-bg);background:var(--ic-ink);
  border-color:var(--ic-ink);}
.ic-opt[data-tone="primary"]:hover{background:var(--ic-ink2);border-color:var(--ic-ink2);}
.ic-opt[disabled]{opacity:.45;cursor:default;}

/* In a consent callout every option carries EQUAL weight — an asymmetric
   pair manufactures the yes. No primary fill here, ever. */
.ic-callout[data-kind="consent"] .ic-opt,
.ic-callout[data-kind="consent"] .ic-opt[data-tone="primary"]{
  color:var(--ic-ink);background:transparent;border:1px solid var(--ic-err);
}
.ic-callout[data-kind="consent"] .ic-opt:hover{background:var(--ic-err-bg);}

/* ── In flight ────────────────────────────────────────────────────────── */
.ic-wait{display:inline-flex;align-items:center;gap:7px;margin:13px 0 0;
  font-size:12.5px;color:var(--ic-ink2);}
.ic-wait .ic-dot{width:6px;height:6px;border-radius:50%;
  background:var(--ic-wait);animation:ic-pulse 1.4s infinite;}
.ic-callout[data-pending]{border-left-color:var(--ic-wait);}

/* ── Resolution stamp — the answer stays in the transcript ────────────── */
.ic-stamp{display:flex;align-items:baseline;gap:8px;margin:12px 0 0;
  padding-top:10px;border-top:1px solid var(--ic-line);
  font-size:12.5px;color:var(--ic-ink2);}
.ic-stamp .ic-sm{flex:none;font-weight:700;color:var(--ic-run);}
.ic-stamp .ic-sl{font-weight:700;color:var(--ic-ink);}
.ic-stamp .ic-sby{font-family:var(--ic-mono);font-size:11.5px;}
.ic-callout[data-resolved="declined"] .ic-sm,
.ic-callout[data-resolved="dismissed"] .ic-sm{color:var(--ic-err);}

/* A resolved callout goes quiet — it never vanishes. */
.ic-callout[data-resolved]{box-shadow:none;background:var(--ic-bg);}
.ic-callout[data-resolved][data-kind="consent"]{border-style:solid;
  border-color:var(--ic-line);}
.ic-callout[data-resolved] .ic-act{color:var(--ic-ink2);}
.ic-callout[data-resolved] .ic-options,
.ic-callout[data-resolved] .ic-wait{display:none;}

@keyframes ic-pulse{0%,100%{opacity:1}50%{opacity:.35}}

@media (prefers-reduced-motion: reduce){
  .ic-step .ic-mark,.ic-wait .ic-dot{animation:none;}
}

@media (max-width:520px){
  .ic-callout{padding:12px 13px;}
  .ic-meta{margin-left:0;}
  .ic-row{flex-direction:column;gap:2px;}
  .ic-k{min-width:0;}
  .ic-options .ic-opt{flex:1 1 auto;text-align:center;}
}