/* Skills tile. Every rule is scoped to the artifact. Values follow the app:
   composer card (12px radius, hairline that turns accent while focused, 32px
   Send), the slash picker (an 11px count over rows of a 12px name and an 11px
   description), the reference chip (20px, 4px radius, accent wash, coral
   glyph) and the transcript's tool-call lines (muted text, a 16px icon, the
   chevron at 60%; not a card), set a size down to sit with the tile's 13px
   text. The icon on each line is the To Do list's status icon (ChatSummary)
   in place of the tool glyph, so the stages visibly tick off.
   The chip's wash stays at the 12% that ResourceRefChip's own comment
   documents; the Badge primitive now paints 22%, which reads louder than a
   quiet site wants. */

.art-skills {
  position: absolute; inset: 0;
  container-type: size;
  --pad: clamp(12px, 4.8cqw, 18px);
  --gap: 12px;        /* between the conversation and the composer */
  font-family: var(--font);
  color: var(--ink);
  -webkit-user-select: none; user-select: none;
}
.art-skills svg { display: block; flex: none; }

/* ── The conversation: one column pinned above the composer ── */
.art-skills .sk-thread {
  position: absolute; left: var(--pad); right: var(--pad); top: var(--pad);
  bottom: calc(var(--pad) + 66px + var(--gap)); /* above the 66px composer: prose line and controls row */
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  transition: opacity var(--dur-slow) var(--ease);
}
.art-skills.is-clearing .sk-thread { opacity: 0; }

.art-skills .sk-user {
  display: flex; justify-content: flex-end;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.art-skills.show-user .sk-user { opacity: 1; transform: none; }
.art-skills .sk-bubble {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--medium); border-radius: var(--r-container);
  padding: 6px 7px 6px 11px;
  font-size: 13px; line-height: 20px; white-space: nowrap;
}

/* The reference chip, as ResourceRefChip draws it. */
.art-skills .sk-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 6px; border-radius: var(--r-inner);
  background: var(--coral-wash);
  font-size: 12px; line-height: 16px; color: var(--ink); white-space: nowrap;
}
.art-skills .sk-chip-ic { width: 12px; height: 12px; color: var(--coral); }
.art-skills .sk-chip-x { width: 10px; height: 10px; color: var(--muted); margin-left: 2px; }

/* ── The agent's reply: tool-call lines, left, no card ───── */
.art-skills .sk-reply { display: grid; gap: 2px; }
.art-skills .sk-call {
  display: flex; align-items: center; gap: 8px;
  height: 22px; font-size: 13px; line-height: 22px; color: var(--muted);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.art-skills .sk-call:not([data-state="hidden"]) { opacity: 1; transform: none; }

.art-skills .sk-call-ic { position: relative; width: 16px; height: 16px; flex: none; }
.art-skills .sk-call-ic svg { position: absolute; inset: 0; width: 16px; height: 16px; transition: opacity var(--dur-menu) var(--ease); }
.art-skills .sk-i-active { color: var(--coral); opacity: 0; }
.art-skills .sk-i-done { color: var(--muted); opacity: 0; }
.art-skills .sk-tick { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-slow) var(--ease); }
.art-skills .sk-call[data-state="active"] .sk-i-active { opacity: 1; }
.art-skills .sk-call[data-state="done"] .sk-i-done { opacity: 1; }
.art-skills .sk-call[data-state="done"] .sk-tick { stroke-dashoffset: 0; }

/* The two summaries share one cell and hand over in turn. */
.art-skills .sk-call-text { display: grid; min-width: 0; }
.art-skills .sk-run,
.art-skills .sk-done {
  grid-area: 1 / 1;
  display: inline-flex; align-items: center; white-space: nowrap;
  transition: opacity var(--dur-med) var(--ease);
}
.art-skills .sk-done { opacity: 0; }
/* The running summary is almost gone before the settled one arrives, so the
   two are never read on top of each other and the line is never blank. */
.art-skills .sk-call[data-state="done"] .sk-run { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.art-skills .sk-call[data-state="done"] .sk-done { opacity: 1; transition: opacity var(--dur-menu) var(--ease) calc(var(--dur-fast) / 2); }
.art-skills .sk-chev { width: 16px; height: 16px; margin-left: 6px; opacity: 0.6; }

/* The running line breathes 1 → 0.7 → 1, the app's own running indicator
   (br-tool-text-pulse: four periods of the slow unit, on the app's curve). It runs only while
   the tile is on screen. */
.art-skills.is-live .sk-call[data-state="active"] .sk-run .sk-t { animation: skills-breathe calc(var(--dur-slow) * 4) var(--ease) infinite; }
@keyframes skills-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ── The composer ───────────────────────────────────────── */
.art-skills .sk-composer {
  position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad);
  background: var(--paper);
  border: 1px solid var(--line-composer); border-radius: var(--r-container);
  padding: 6px 6px 6px 12px;
  transition: border-color var(--dur-menu) var(--ease);
}
/* The app's focus edge (--border-accent): the card rests on the page ground
   with its hairline (R-32), and the edge turns accent while the command is
   typed. */
.art-skills.is-edge .sk-composer { border-color: var(--coral); }

/* The reference rail: above the prose, inside the card. The chip is never
   seen while the rail is part open: on add the rail opens first and the chip
   fades in after it; on send the chip fades out first and the rail closes
   after it. */
.art-skills .sk-refs {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), grid-template-rows var(--dur-med) var(--ease) var(--dur-fast);
}
.art-skills.has-ref .sk-refs {
  grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows var(--dur-med) var(--ease), opacity var(--dur-menu) var(--ease) var(--dur-med);
}
.art-skills .sk-refs-in { min-height: 0; overflow: hidden; }
.art-skills .sk-refs .sk-chip { margin: 2px 0 5px -5px; }

.art-skills .sk-line { display: flex; align-items: center; gap: 8px; }
.art-skills .sk-input { position: relative; flex: 1; min-width: 0; height: 20px; font-size: 13px; line-height: 20px; white-space: nowrap; overflow: hidden; }
/* The placeholder starts just after the caret, as a native field's does. */
.art-skills .sk-ph { position: absolute; left: 3px; top: 0; color: var(--muted); }
.art-skills.has-text .sk-ph { visibility: hidden; }
.art-skills .sk-typed { color: var(--ink); }
.art-skills .sk-caret { display: inline-block; width: 1px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--ink); opacity: 0; }
.art-skills.is-focus .sk-caret { opacity: 1; }

/* The controls row: [+] [Tools N]  ·  [model] (Send). The + glyph hangs back
   onto the card's text edge, as in the app. */
.art-skills .sk-bar { display: flex; align-items: center; gap: 2px; height: 32px; margin-left: -6px; min-width: 0; }
.art-skills .sk-plus { display: grid; place-items: center; flex: none; width: 28px; height: 28px; color: var(--muted); }
.art-skills .sk-bar-ic { width: 16px; height: 16px; }
.art-skills .sk-tools, .art-skills .sk-model {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  height: 28px; padding: 0 7px; border-radius: var(--r-element);
  font-size: 12px; line-height: 16px; white-space: nowrap; color: var(--muted);
}
.art-skills .sk-model { margin-left: auto; min-width: 0; }
.art-skills .sk-dd { width: 12px; height: 12px; opacity: 0.6; }

.art-skills .sk-send {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--r-element);
  background: var(--fill); color: var(--faint);
  transition: background var(--dur-menu) var(--ease), color var(--dur-menu) var(--ease), transform var(--dur-fast) var(--ease);
}
.art-skills .sk-send-ic { width: 16px; height: 16px; }
.art-skills.has-text .sk-send,
.art-skills.has-ref .sk-send { background: var(--coral); color: var(--paper); }
.art-skills.is-press .sk-send { transform: scale(0.98); }

/* The slash picker: a popover above the composer. */
.art-skills .sk-picker {
  position: absolute; left: -1px; right: -1px; bottom: calc(100% + 8px);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-container);
  box-shadow: var(--shadow-popover);
  padding: 6px;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-menu) var(--ease), transform var(--dur-med) var(--ease);
}
.art-skills.show-picker .sk-picker { opacity: 1; transform: none; }
/* The count shares the rows' left edge. */
.art-skills .sk-found { font-size: 12px; line-height: 12px; color: var(--muted); margin: 0 0 4px; padding: 0 4px 0 9px; white-space: nowrap; }
.art-skills .sk-list { position: relative; }
.art-skills .sk-row {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 7px;
  padding: 4px 7px 4px 9px;
}
.art-skills .sk-row-ic { width: 16px; height: 16px; color: var(--muted); }
.art-skills .sk-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.art-skills .sk-row-name { font-size: 12px; line-height: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.art-skills .sk-row-desc { font-size: 12px; line-height: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; }
/* The selected row, as the app marks it: the solid strong fill, no ring,
   moving as the arrow keys would. */
.art-skills .sk-sel {
  position: absolute; left: 0; right: 0; top: 0; height: 37px;
  border-radius: var(--r-inner);
  background: var(--fill-strong);
  transition: transform var(--dur-menu) var(--ease);
}

/* Narrow tiles (the 289 wide tile at 1024): the lines keep their whole
   summary and drop the chevron. */
@container (max-width: 299px) {
  .art-skills .sk-chev { display: none; }
}

/* Short tiles (the 289 by 216 tile at 1024): the picker drops its count line
   so it clears the frame's top, and the conversation sits a little closer to
   the composer. */
@container (max-height: 225px) {
  .art-skills .sk-thread { --gap: 10px; }
  .art-skills .sk-found { display: none; }
}

/* Resets between loops happen with no transition at all. Kept last. */
[data-art="skills"] .art-skills.sk-instant,
[data-art="skills"] .art-skills.sk-instant * { transition: none; }