/* Axon Studio — the agent panel (js/studio/agent.js; docs/studio.md §7, §11.1). Prefix sta-.
   The panel fills the column it is mounted in: a header, a scrolling conversation, and the composer pinned below.
   Hierarchy from type and surface brightness (docs/design/visual-language.md); colour only where it means something:
   a source's licence status, what changed on the canvas, a refusal. */

.sta { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; background: var(--s1); color: var(--ink); }

.sta-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; flex: none; }
.sta-mark { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-ink); flex: none; }
.sta-mark svg { width: 17px; height: 17px; }
.sta-title { font-size: var(--fs-body); font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }

.sta-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }

/* ---- the empty state and suggestion chips ---- */
.sta-empty { display: flex; flex-direction: column; gap: 12px; padding: 18px 2px 4px; }
.sta-empty-lead { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; text-wrap: pretty; }
.sta-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sta-chip { border: 0; text-align: left; max-width: 100%; padding: 8px 12px; border-radius: 14px; background: var(--wash); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.4; transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease); }
.sta-chip:hover { background: var(--wash-2); color: var(--ink); }

/* ---- messages ---- */
.sta-msg { min-width: 0; font-size: var(--fs-small); line-height: 1.55; }
.sta-msg p + p { margin-top: 8px; }
.sta-user { align-self: flex-end; max-width: 88%; }
.sta-bubble { padding: 9px 13px; border-radius: 16px 16px 6px 16px; background: var(--s3); color: var(--ink); overflow-wrap: anywhere; }
.sta-agent { display: flex; flex-direction: column; gap: 10px; }
.sta-new { animation: sta-in var(--t-2) var(--ease) both; }
.sta-reply { color: var(--ink); overflow-wrap: anywhere; }

.sta-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.sta-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--wash); color: var(--ink-3); font-size: 11.5px; font-weight: 550; }
.sta-badge svg { width: 12px; height: 12px; }
.sta-badge-rules { background: var(--warn-wash); color: var(--warn-ink); }

.sta-thinking { flex-direction: row; align-items: center; gap: 8px; color: var(--ink-3); }
.sta-elapsed { color: var(--ink-4); }
.sta-dots { display: inline-flex; gap: 3px; }
.sta-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: sta-dot 1.2s var(--ease) infinite; }
.sta-dots i:nth-child(2) { animation-delay: 0.15s; }
.sta-dots i:nth-child(3) { animation-delay: 0.3s; }

/* ---- cards inside an answer ---- */
.sta-card { border-radius: 14px; background: var(--s2); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sta-card ul, .sta-card ol { display: flex; flex-direction: column; gap: 6px; }
.sta-plan > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.sta-plan > summary::-webkit-details-marker { display: none; }
.sta-plan > summary .eyebrow::after { content: "›"; display: inline-block; margin-left: 6px; transition: transform var(--t-1) var(--ease); }
.sta-plan[open] > summary .eyebrow::after { transform: rotate(90deg); }
.sta-objective { font-weight: 600; color: var(--ink); line-height: 1.4; }
.sta-sect { display: flex; flex-direction: column; gap: 4px; }
.sta-qs { counter-reset: q; }
.sta-qs li { counter-increment: q; display: grid; grid-template-columns: 18px 1fr; color: var(--ink-2); }
.sta-qs li::before { content: counter(q); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.sta-sources li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "why status"; column-gap: 8px; align-items: center; }
.sta-src-name { grid-area: name; font-weight: 600; font-family: var(--mono); font-size: 12px; }
.sta-src-why { grid-area: why; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sta-status { grid-area: status; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.sta-status svg { width: 12px; height: 12px; }
.sta-status-connected { background: var(--ok-wash); color: var(--ok); }
.sta-status-available { background: var(--warn-wash); color: var(--warn-ink); }
.sta-status-requires_license { background: var(--crit-wash); color: var(--crit); }
.sta-note { display: flex; gap: 6px; color: var(--ink-2); }
.sta-note svg, .sta-problems svg, .sta-error svg, .sta-run svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

.sta-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sta-diff { border: 0; height: 26px; max-width: 100%; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 550; display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--wash); color: var(--ink-2); }
button.sta-diff:hover { background: var(--wash-2); color: var(--ink); }
.sta-diff-added { background: var(--accent-wash); color: var(--accent-ink); }
.sta-diff-edited { background: var(--yes-wash); color: var(--yes-ink); }
.sta-diff-removed { color: var(--ink-3); text-decoration: line-through; }
.sta-undo svg { width: 14px; height: 14px; }

.sta-triggers li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.sta-triggers svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.sta-tr-unavailable, .sta-tr-skipped, .sta-tr-refused { opacity: 0.7; }
/* taken away with the turn's undo: still listed, struck through */
.sta-tr-removed { opacity: 0.65; }
.sta-tr-removed .grow { text-decoration: line-through; text-decoration-color: var(--ink-4); }

.sta-numbers li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sta-num-name { border: 0; background: none; padding: 0; color: var(--ink-2); text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.sta-num-name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sta-num-val { font-weight: 650; font-size: var(--fs-body); letter-spacing: -0.01em; }

.sta-run { display: flex; gap: 6px; color: var(--accent-ink); }
.sta-notes p + p { margin-top: 2px; }
.sta-problems { color: var(--crit); display: flex; flex-direction: column; gap: 4px; }
.sta-problems p { display: flex; gap: 6px; }
.sta-problems ul { padding-left: 20px; color: var(--ink-3); }
.sta-error { display: flex; gap: 6px; color: var(--crit); font-size: var(--fs-small); }
.sta-failed { gap: 6px; align-items: flex-start; }

/* ---- the composer ---- */
.sta-foot { flex: none; padding: 10px 12px 12px; border-top: 0.5px solid var(--hair); background: var(--s1); }
.sta-compose { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 18px; background: var(--s2); transition: box-shadow var(--t-1) var(--ease); }
.sta-compose:focus-within { box-shadow: 0 0 0 2px var(--accent-wash), 0 0 0 1px var(--accent-line) inset; }
.sta-input { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; padding: 7px 0; max-height: 160px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink); }
.sta-input::placeholder { color: var(--ink-4); }
.sta-send { flex: none; width: 34px; height: 34px; border: 0; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); transition: transform var(--t-1) var(--ease), opacity var(--t-1) var(--ease); }
.sta-send svg { width: 17px; height: 17px; }
.sta-send:active { transform: scale(0.94); }
.sta-send[disabled] { opacity: 0.4; cursor: default; transform: none; }
.sta-hint { margin: 6px 4px 0; }

.sta :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sta-input:focus-visible { outline: none; }

@keyframes sta-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sta-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  .sta-new, .sta-dots i { animation: none; }
  .sta-dots i { opacity: 0.7; }
  .sta-log { scroll-behavior: auto; }
}

@media (max-width: 520px) {
  .sta-head { padding: 12px 14px 10px; }
  .sta-log { padding: 4px 14px 14px; }
  .sta-user { max-width: 94%; }
  .sta-hint { display: none; }
  .sta-input { font-size: 16px; } /* no zoom on focus in mobile Safari */
}

/* the answer after a run: the headline large, its range, then what did not run and why */
.sta-result { gap: 10px; }
.sta-badge-result { color: var(--ok); }
.sta-headline { display: flex; flex-direction: column; gap: 2px; }
.sta-hl-v { font-size: 34px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ink); }
.sta-hl-l { font-size: 13px; color: var(--ink-2); }
.sta-fails li { display: block; font-size: 13px; line-height: 1.45; }
.sta-fails .sta-num-name, .sta-fails b { font-weight: 600; color: var(--ink); }
.sta-fail-why { color: var(--ink-2); }
.sta-fails .st-errcode { margin-left: 6px; }
.sta-running { align-items: center; color: var(--ink-2); }
.sta-running .sta-dots { transform: scale(0.8); }
.sta-local { color: var(--ink-3); }
.sta-result-status { color: var(--ink-2); }
.sta-hl-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.sta-hl-l .sta-num-name { font-size: 13px; color: var(--ink-2); }
.sta-hl-m { color: var(--ink-3); }
.sta-flag { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--warn-wash, var(--wash)); color: var(--warn-ink, var(--ink-2)); }
.sta-fail-fix { display: block; margin-top: 2px; color: var(--ink-2); }
.sta-fail-fix b { font-weight: 600; color: var(--ink-2); }
.sta-unmet li, .sta-next li { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.sta-next ul, .sta-unmet ul { display: flex; flex-direction: column; gap: 6px; }
.sta-next .sta-chip { padding: 6px 10px; }
.sta-numbers li.is-outdated .sta-num-val, .sta-numbers li.is-stale .sta-num-val { color: var(--ink-3); }
.sta-numbers li.is-outdated .sta-num-val::after { content: " ↻"; color: var(--warn-ink, var(--ink-3)); }

/* QA round 5: the alert an undone change made — removed with it, or offered for removal */
.sta-tr-undo { color: var(--ink-2); }
.sta-tr-undo svg { width: 13px; height: 13px; vertical-align: -2px; }
.sta-tr-offer { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; box-shadow: inset 0 0.5px 0 var(--hair); }
.sta-tr-offer p { color: var(--ink); }