/* Skim Chips — in-chat status chips for AI + human conversation surfaces.
   Five chip classes, line-lead anchors, a skim-mode fold. Zero deps, CSP-safe.
   Theme via CSS custom props on .sk-root; flip [data-skim-theme="dark"] for dark.
   ENOK Foundry · https://enok.com */

.sk-root{
  /* Light — Santorini white / earth adobe (low glow, earthy, no gradients) */
  --sk-bg:#FBF8F1; --sk-panel:#FFFFFF; --sk-line:#E5DECF;
  --sk-ink:#2A2622; --sk-ink2:#7A7266;
  --sk-accent:#46708C; --sk-accent-bg:#E9EEF2;
  --sk-run:#3E6B4A;  --sk-run-bg:#E8EFE5;   /* positive / done */
  --sk-wait:#8A6A2A; --sk-wait-bg:#F3EBD8;  /* queued / waiting */
  --sk-err:#A24B37;  --sk-err-bg:#F4E3DC;   /* error / needs-approval */
  --sk-r-chip:5px; --sk-r-msg:14px;
  --sk-mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--sk-ink); line-height:1.5;
}
.sk-root[data-skim-theme="dark"]{
  --sk-bg:#191713; --sk-panel:#221F1A; --sk-line:#3A352C;
  --sk-ink:#F2EDE2; --sk-ink2:#A79D8C;
  --sk-accent:#7FA6C2; --sk-accent-bg:#25303A;
  --sk-run:#8FB98A;  --sk-run-bg:#232C22;
  --sk-wait:#CBA55E; --sk-wait-bg:#2E2818;
  --sk-err:#D08A6E;  --sk-err-bg:#2E211B;
}

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

/* ── Lines ────────────────────────────────────────────────────────────── */
.sk-line{font-size:14.5px;margin:7px 0;transition:opacity .15s;}
.sk-line:first-child{margin-top:0;}
.sk-line:last-child{margin-bottom:0;}
.sk-lead{display:flex;gap:9px;align-items:baseline;}
.sk-lead>.sk-chip{flex:none;position:relative;top:-1px;}
.sk-ctx{min-width:0;}
.sk-sig{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap;}

/* ── Chip base ────────────────────────────────────────────────────────── */
.sk-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  font-weight:700;letter-spacing:.02em;padding:2.5px 9px;vertical-align:middle;
  white-space:nowrap;line-height:1.4;border-radius:var(--sk-r-chip);}
.sk-chip .sk-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}

/* 1 · status — pill, semantic color, optional live dot. Bound to an object. */
.sk-status{border-radius:999px;}
.sk-status[data-state="run"]  {color:var(--sk-run); background:var(--sk-run-bg);}
.sk-status[data-state="done"] {color:var(--sk-run); background:var(--sk-run-bg);}
.sk-status[data-state="queued"]{color:var(--sk-wait);background:var(--sk-wait-bg);}
.sk-status[data-state="error"]{color:var(--sk-err); background:var(--sk-err-bg);}
.sk-status[data-state="private"],
.sk-status[data-state="paused"]{color:var(--sk-ink2);background:var(--sk-bg);
  border:1px solid var(--sk-line);}
.sk-status[data-state="run"] .sk-dot,
.sk-status[data-state="queued"] .sk-dot{animation:sk-pulse 1.4s infinite;}

/* 2 · reference — squared, typed glyph, tappable object handle */
.sk-ref{border-radius:var(--sk-r-chip);color:var(--sk-accent);background:var(--sk-accent-bg);
  cursor:pointer;max-width:26ch;overflow:hidden;text-overflow:ellipsis;}
.sk-ref:hover{text-decoration:underline;}
a.sk-ref{text-decoration:none;}
a.sk-ref:hover{text-decoration:underline;}

/* 3 · consent — dashed outline, never a fill; asks for a hand */
.sk-consent{border-radius:999px;color:var(--sk-err);background:transparent;
  border:1.5px dashed var(--sk-err);}

/* 4 · metric — mono, quiet, exact */
.sk-metric{border-radius:var(--sk-r-chip);font-family:var(--sk-mono);font-weight:600;
  color:var(--sk-ink);background:var(--sk-bg);border:1px solid var(--sk-line);}

/* 5 · provenance — the quietest chip; role · model · surface */
.sk-prov{border-radius:var(--sk-r-chip);color:var(--sk-ink2);background:var(--sk-bg);
  border:1px solid var(--sk-line);font-weight:600;}

/* ── Skim mode — fold prose, keep chip lines ─────────────────────────── */
.sk-root[data-skim] .sk-plain{display:none;}
.sk-root[data-skim] .sk-line.sk-chipless{display:none;}
.sk-root[data-skim] .sk-msg{padding-top:12px;padding-bottom:12px;}
.sk-root[data-skim] .sk-ctx{color:var(--sk-ink2);}

/* ── Full / Skim toggle (optional host control) ──────────────────────── */
.sk-toggle{display:inline-flex;border:1px solid var(--sk-line);border-radius:999px;
  overflow:hidden;background:var(--sk-panel);}
.sk-toggle button{border:0;background:transparent;font:inherit;font-size:12.5px;
  font-weight:600;padding:7px 16px;cursor:pointer;color:var(--sk-ink2);}
.sk-toggle button[aria-pressed="true"]{background:var(--sk-ink);color:var(--sk-bg);}

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

@media (prefers-reduced-motion: reduce){
  .sk-line,.sk-status .sk-dot{transition:none;animation:none;}
}