/* ================================================================== */
/* Tool calls — compact row with lucide icon, summary preview,         */
/* colored status circle, and expanded YAML/terminal/diff body.        */
/* ================================================================== */
.tool-call {
  padding: 0;
  font-size: var(--s2-font-size-75);
  --tool-status-color: var(--s2-gray-500);
}
.tool-call--running {
  --tool-status-color: #e6a23c;
}
.tool-call--success {
  --tool-status-color: var(--s2-positive);
}
.tool-call--error {
  --tool-status-color: var(--s2-negative);
}
.tool-call--other {
  --tool-status-color: var(--s2-accent);
}

.tool-call summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--s2-bg-layer-1);
  color: var(--s2-content-secondary);
  font-weight: 400;
  font-size: var(--s2-font-size-75);
  line-height: 1.4;
  transition: background var(--s2-transition-default);
}
.tool-call summary:hover {
  background: var(--s2-bg-layer-2);
}
.tool-call summary::-webkit-details-marker {
  display: none;
}

.tool-call__header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: 100%;
}
.tool-call__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--s2-content-secondary);
}
.tool-call__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}
.tool-call__name {
  color: var(--s2-content-secondary);
  font-weight: 500;
  font-family: var(--s2-font-family);
  font-size: var(--s2-font-size-75);
  flex-shrink: 0;
}
.tool-call__preview {
  color: var(--s2-content-tertiary);
  font-size: var(--s2-font-size-75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
  font-family: var(--s2-font-mono);
}
.tool-call__status {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tool-status-color);
  flex-shrink: 0;
}
.tool-call__status--running {
  animation: tool-status-pulse 1.2s ease-in-out infinite;
}
@keyframes tool-status-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
/* A later user turn has happened — the dot fades into the background so
 * only currently-relevant work draws the eye. */
.tool-call--stale .tool-call__status {
  opacity: 0.5;
}
.tool-call--stale .tool-call__status--running {
  animation: none;
}

/* ── Working cluster ──────────────────────────────────────────────── */
/* Three or more consecutive tool calls collapse behind a single
 * "Working" header so they don't push assistant content out of view.
 * The header shows one small status dot per inner call so users see
 * the run's progression at a glance without expanding. */
.tool-call-cluster {
  padding: 0;
  font-size: var(--s2-font-size-75);
}
.tool-call-cluster > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--s2-bg-layer-1);
  color: var(--s2-content-secondary);
  font-weight: 500;
  font-size: var(--s2-font-size-75);
  line-height: 1.4;
  transition: background var(--s2-transition-default);
}
.tool-call-cluster > summary:hover {
  background: var(--s2-bg-layer-2);
}
.tool-call-cluster > summary::-webkit-details-marker {
  display: none;
}
/* Per-call status dots in the cluster header. Each dot only carries
 * its own `tool-call--<status>` modifier (no bare `.tool-call`) so the
 * status modifier sets `--tool-status-color` on the dot itself without
 * making the dot look like a real tool-call row to DOM queries. The
 * container anchors the row to the right side of the summary and packs
 * the dots tightly. */
.tool-call-cluster__dots {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 50%;
}
.tool-call-cluster__dot {
  /* Override the `margin-left:auto` baked into `.tool-call__status` so
   * dots pack tightly inside the dots row instead of each one trying
   * to push itself to the far right. */
  margin-left: 0;
}
.tool-call-cluster__body {
  margin-top: 4px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--s2-border-subtle);
  margin-left: 10px;
}
/* Stale dim — same treatment as individual rows so retired clusters
 * fade into the background once a new user turn arrives. */
.tool-call-cluster.tool-call--stale > summary .tool-call__status {
  opacity: 0.5;
}
.tool-call-cluster.tool-call--stale > summary .tool-call__status--running {
  animation: none;
}

/* ── Expanded body ────────────────────────────────────────────────── */
.tool-call__details {
  padding: 8px 12px 12px 30px;
  margin-top: 2px;
}
.tool-call__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* YAML input */
.tool-call__yaml {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--s2-radius-s);
  background: var(--s2-bg-sunken);
  color: var(--s2-content-default);
  font-family: var(--s2-font-mono);
  font-size: var(--s2-font-size-75);
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  max-height: 320px;
}
.tool-call__yaml-key {
  color: var(--slicc-scoop-blue);
  font-weight: 600;
}
.tool-call__yaml-string {
  color: var(--s2-content-default);
}
.tool-call__yaml-scalar {
  color: var(--s2-content-tertiary);
}
.tool-call__yaml-null {
  color: var(--s2-content-tertiary);
  font-style: italic;
}

/* Generic result block (for non-bash tools, after YAML input) */
.tool-call__result {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--s2-radius-s);
  background: var(--s2-bg-sunken);
  color: var(--s2-content-secondary);
  font-family: var(--s2-font-mono);
  font-size: var(--s2-font-size-75);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}
.tool-call__result--error {
  color: var(--s2-negative);
  background: color-mix(in oklch, var(--s2-negative) 10%, var(--s2-bg-sunken));
}

/* ── Bash terminal body ───────────────────────────────────────────── */
.tool-call__terminal {
  border-radius: var(--s2-radius-s);
  background: #0d0d0f;
  color: #e6e6e6;
  font-family: var(--s2-font-mono);
  font-size: var(--s2-font-size-75);
  line-height: 1.55;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.tool-call__terminal-prompt {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
  color: #f5f5f5;
  word-break: break-word;
}
.tool-call__terminal-sigil {
  color: #50d79a;
  font-weight: 600;
  flex-shrink: 0;
}
.tool-call__terminal-cmd {
  white-space: pre-wrap;
  word-break: break-word;
}
.tool-call__terminal-output {
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  color: #c8c8c8;
  font-family: var(--s2-font-mono);
  font-size: var(--s2-font-size-75);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
}
.tool-call__terminal-output--error {
  color: #f38ba8;
}
.tool-call__terminal-pending {
  margin-top: 8px;
  color: #808080;
  letter-spacing: 2px;
}

/* ── edit_file diff body ──────────────────────────────────────────── */
.tool-call__diff-path {
  font-family: var(--s2-font-mono);
  font-size: var(--s2-font-size-75);
  color: var(--s2-content-secondary);
  padding: 4px 0;
}
.tool-call__diff {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: var(--s2-font-mono);
  font-size: var(--s2-font-size-75);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}
.tool-call__diff-del,
.tool-call__diff-add {
  display: block;
  padding: 1px 6px;
  border-radius: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}
.tool-call__diff-del {
  background: color-mix(in oklch, var(--s2-negative) 15%, transparent);
  color: var(--s2-negative);
}
.tool-call__diff-add {
  background: color-mix(in oklch, var(--s2-positive) 18%, transparent);
  color: var(--s2-positive);
}

/* Screenshot thumb */
.tool-call__screenshot {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--s2-radius-default);
  margin-top: var(--s2-spacing-50);
  cursor: pointer;
  border: 1px solid var(--s2-border-subtle);
  transition: border-color var(--s2-transition-default);
}
.tool-call__screenshot:hover {
  border-color: var(--slicc-cone);
}

.tool-call__ui {
  margin-top: 8px;
}

/* ================================================================== */
/* Licks (webhook/cron/sprinkle/fswatch/navigate/session-reload/upgrade) */
/* Render as an incoming bubble: right-aligned like user messages,    */
/* max-width mirrored, icon anchored to the right.                    */
/* ================================================================== */
.lick {
  padding: 0;
  align-self: flex-end;
  width: 100%;
  max-width: 560px;
  font-size: var(--s2-font-size-75);
}
.lick summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
  border-radius: 10px;
  background: var(--s2-bg-layer-1);
  color: var(--s2-content-secondary);
  border: 1px solid var(--s2-border-subtle);
  transition: background var(--s2-transition-default);
}
.lick summary:hover {
  background: var(--s2-bg-layer-2);
}
.lick summary::-webkit-details-marker {
  display: none;
}
.lick__header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: 100%;
  justify-content: flex-start;
}
.lick__type {
  color: var(--s2-content-secondary);
  font-weight: 500;
  font-size: var(--s2-font-size-75);
  flex-shrink: 0;
}
.lick__preview {
  color: var(--s2-content-tertiary);
  font-size: var(--s2-font-size-75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
  font-family: var(--s2-font-mono);
}
.lick__icon {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--s2-content-secondary);
  order: 99;
}
.lick__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}
.lick__details {
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: var(--s2-radius-s);
  background: var(--s2-bg-sunken);
  color: var(--s2-content-secondary);
  font-size: var(--s2-font-size-75);
  line-height: 1.55;
  word-break: break-word;
}
.lick__details > *:first-child {
  margin-top: 0;
}
.lick__details > *:last-child {
  margin-bottom: 0;
}
/* Markdown prose — the reset in base.css strips list padding, which
 * clips bullets against the container edge. Restore enough gutter so
 * `-` bullets sit inside the padded frame. */
.lick__details p,
.lick__details ul,
.lick__details ol {
  margin: 0.5em 0;
}
.lick__details ul,
.lick__details ol {
  padding-left: 1.4em;
}
/* The enclosing .lick__details already carries the container look —
 * letting the code block draw its own frame creates a "box inside a
 * box" feel. Strip its chrome and let the content breathe. */
.lick__details pre {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: var(--s2-font-size-75);
  font-family: var(--s2-font-mono);
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre;
}
