/* =============================================================================
 * design-system.css — Yatsar design system REFERENCE stylesheet (the SPEC)
 * -----------------------------------------------------------------------------
 * This is the clean-slate spec, not the implementation. Production is
 * app/static/style.css. Diff the two to find drift — that gap is the
 * consolidation backlog.
 *
 * TWO TOKEN GROUPS, kept deliberately separate:
 *   1. Themeable color palette — what a Theme (Master / per-Agent) sets.
 *      A Theme changes COLOR AND NOTHING ELSE. Names are contract.
 *   2. Internal scale tokens — spacing/radius/type/shadow/motion/z-index, for
 *      our consistency only. NOT part of any Theme. NOT user-editable.
 *
 * Component rules below are the IDEAL: they apply the resolved fixes from
 * consolidation-backlog.md (number/date inputs, visible accent focus ring,
 * one .list-row / .badge / bubble, color-mix shadows, reduced-motion). They
 * intentionally diverge from production where production is wrong.
 *
 * Full reference: ../../DESIGN.md · tokens.md · components.md · patterns.md
 * ========================================================================== */

/* ============================== GROUP 1 ====================================
 * THEMEABLE COLOR PALETTE  (light = :root; dark overrides the same names)
 * A Master Theme replaces these for the console; a per-Agent Theme overrides
 * them on the published page. Colors only — never anything below in GROUP 2.
 * ========================================================================== */
:root {
  color-scheme: light;

  /* actions */
  --primary: #6a3fcc;          /* primary buttons, user bubble, active toggle */
  --primary-hover: #5a33b0;
  --on-primary: #ffffff;       /* text/icons on --primary AND on --danger fills */
  --secondary: #5f5973;        /* metadata chrome: badges, tool-chip text */

  /* surfaces */
  --surface: #f4f5f7;          /* page / chat background */
  --surface-raised: #ffffff;   /* panels, cards, bubbles, inputs */
  --surface-hover: #f8f9fb;    /* hover wash on buttons, rows, cards */

  /* content & borders */
  --text: #211c33;
  --text-muted: #5f5973;
  --border: #e5e3ec;
  --border-strong: #d5d2e0;

  /* accent (violet): links, selection, activity */
  --accent: #6a3fcc;
  --accent-surface: #efe9fb;   /* selection wash */
  --accent-text: #5b2bb0;      /* readable accent text on --accent-surface */
  --focus-ring: #484553;       /* NEUTRAL, Theme-aware FOCUS OUTLINE (#401) — not the accent */

  /* status (--success-surface ratified by #421 per Decision 75's rule-of-two;
     soft-green wash re-expressed from prototype #393 --wf-success-soft.
     --warning/--warning-surface added by #498 — a deadline is a THIRD status,
     not Skill gold; --warning-border ratified by #540.) */
  --success: #1f8a4c;
  --success-surface: #e6f3eb;
  --warning: #8a5a00;
  --warning-surface: #fbf1d8;
  --warning-border: #c5b399;
  --danger: #c23934;
  --danger-surface: #fbeae9;
  --danger-border: #f1c7c5;

  /* identity families (#401): Agent green, Skill gold, File blue, Notification
     rose — each base/-surface/-text/-strong (--notification-strong ratified by
     DR25 / Decision 103; one value, AA under white in both modes). */
  --agent: #1f8a4c; --agent-surface: #e6f4ec; --agent-text: #14663a; --agent-strong: #1a7a43;
  --skill: #c68a1a; --skill-surface: #fbf1d8; --skill-text: #8a5a00; --skill-strong: #9a6600;
  --file: #2f74c0; --file-surface: #e8f1fb; --file-text: #245a96; --file-strong: #265988;
  --notification: #b14f7b; --notification-surface: #f8e8ef; --notification-text: #87375c; --notification-strong: #a8476f;

  /* font families (themeable family tokens; not part of the color palette) */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --primary: #8b63e6;        --primary-hover: #9d78ee;  --on-primary: #ffffff;
  --secondary: #bbb8c4;
  /* neutral charcoal (#401/#386) — retires the legacy purple-black family */
  --surface: #17171a;        --surface-raised: #202023; --surface-hover: #2c2c30;
  --text: #f0eff3;           --text-muted: #bbb8c4;
  --border: #39383f;         --border-strong: #54515d;
  --accent: #a47ff0;         --accent-surface: #2e2350; --accent-text: #c9b3f7;
  --focus-ring: #e1dde8;
  --success: #4ade80;        --success-surface: #263b31;
  --warning: #e6b84a;        --warning-surface: #342a10; --warning-border: #766543;
  --danger: #f87171;
  --danger-surface: #3a1a1a; --danger-border: #602c2c;
  --agent: #4ade80; --agent-surface: #123322; --agent-text: #6ee7a0; --agent-strong: #1a7a43;
  --skill: #e6b84a; --skill-surface: #342a10; --skill-text: #f0cf6b; --skill-strong: #9a6600;
  --file: #75b7ff; --file-surface: #142d49; --file-text: #9acaff; --file-strong: #265988;
  --notification: #ee86b1; --notification-surface: #442033; --notification-text: #f4adca; --notification-strong: #a8476f;
}

/* ============================== GROUP 2 ====================================
 * INTERNAL SCALE TOKENS — design constants. NOT themeable, NOT user-editable.
 * On :root so they cascade, but no Theme ever sets these.
 * ========================================================================== */
:root {
  /* spacing rhythm */
  --space-1: 2px;  --space-2: 4px;  --space-3: 6px;  --space-4: 8px;
  --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 18px;
  --space-9: 24px; --space-10: 36px;

  /* radius */
  --radius-sm: 6px;
  --radius: 8px;            /* default: buttons, inputs, toggles, sidebar items */
  --radius-md: 10px;        /* cards, popovers */
  --radius-card: 14px;      /* agent card, dialog */
  --radius-pill: 999px;
  --bubble-radius: 14px;
  --bubble-tail: 4px;

  /* type ramp */
  --fs-eyebrow: 11px; --fs-meta: 12px; --fs-body-sm: 13px; --fs-body: 14px;
  --fs-h2: 15px; --fs-title: 16px; --fs-brand: 18px; --fs-h1: 22px;
  /* display: the Workspace Home greeting question — larger than a page h1,
     fluid to the viewport (new-design-base / #388 wf-hero). */
  --fs-display: clamp(25px, 3vw, 36px);
  --fw-normal: 400; --fw-emph: 600; --fw-bold: 700;

  /* elevation — one color method: color-mix on --text (theme-aware). Ordinary
     shell/Card/Row/Panel stay FLAT (#401); --shadow-focal is the single lift for
     the new-chat composer; temporary layers use popover/modal. */
  --shadow-focal: 0 14px 36px color-mix(in srgb, var(--text) 22%, transparent);
  --shadow-popover: 0 6px 24px color-mix(in srgb, var(--text) 18%, transparent);
  --shadow-modal: 0 12px 40px color-mix(in srgb, var(--text) 25%, transparent);
  --scrim: color-mix(in srgb, var(--text) 35%, transparent);

  /* motion */
  --motion-fast: .12s ease;
  --motion-slide: .22s ease;

  /* z-index ladder (--z-tooltip: hover hints float above open temporary
     layers, below the modal) */
  --z-takeover: 5; --z-dropdown: 20; --z-popover: 30; --z-tooltip: 60;
  --z-modal: 100;

  /* state */
  --opacity-disabled: .5;   /* canonical (reconciles the old .45/.55) */
}

/* =============================================================================
 * BASE ELEMENTS
 * ========================================================================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--text);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.5;
}

button {
  font: inherit; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-raised); color: var(--text);
  padding: var(--space-3) var(--space-6);
}
button:hover { border-color: var(--border-strong); background: var(--surface-hover); }
button.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button.danger { color: var(--danger); }
button:disabled { opacity: var(--opacity-disabled); cursor: default; }
/* Keyboard focus is a VISIBLE, NEUTRAL, Theme-aware ring (#401) — never the
 * violet accent brand colour. */
button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* FIX (backlog H3): include number/date/email/search so forms stop
 * re-declaring and #budget-cap stops rendering with raw UA chrome. */
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=search], select, textarea {
  font: inherit; color: var(--text); background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-3) var(--space-5);
}
/* Text-input focus is RESTRAINED (#401): a neutral border + caret, not a full
 * ring — applies to every text-entry surface (editor textarea, chat input). */
input:focus, select:focus, textarea:focus, [contenteditable="true"]:focus {
  outline: none; border-color: var(--focus-ring); caret-color: var(--text);
}
/* Disabled controls match the disabled button (one canonical dim). */
input:disabled, select:disabled, textarea:disabled {
  opacity: var(--opacity-disabled); cursor: default;
}
/* textarea is the one control that grows; default to a usable height + a
 * vertical-only resize grip (production scoped this to .yc-form-field — the
 * spec makes it the base behavior). */
textarea { resize: vertical; min-height: 72px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Eyebrow / section micro-label (backlog L1: was repeated verbatim 5×). */
.eyebrow {
  font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted);
}

/* =============================================================================
 * FORM FIELDS — the stacked label-over-control primitive.
 * The control CHROME (input/select/textarea) is in BASE ELEMENTS; this is the
 * LAYOUT vocabulary that wraps a control with a title, help/error text, and
 * grouping. Promoted from the Connector Builder candidate vocabulary
 * (.field/.field-label/.cred-grid/.config-section, flagged "promote via
 * /design-review" in the #151/#165 mockups) — the prescribed consolidation
 * target for .yc-form-field, .connector-field, .settings-field, .access-levels.
 * ========================================================================== */

/* Stacked field: a title (.field-label) above a full-width control, with an
 * optional .field-hint or .field-error below. Use a <label> as the wrapper so
 * the title is the control's clickable label. */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > input, .field > select, .field > textarea { width: 100%; }
.field-label { font-size: var(--fs-meta); font-weight: var(--fw-emph); color: var(--text-muted); }
.field-req   { color: var(--danger); margin-left: var(--space-1); }   /* required marker */
.field-hint  { font-size: var(--fs-meta); color: var(--text-muted); } /* help line under a control */
.field-error { font-size: var(--fs-meta); color: var(--danger); }     /* validation message */
/* Invalid state: recolor the control's border + focus ring danger (mirrors the
 * editor's inset .invalid ring). Add .invalid to the .field or the control. */
.field.invalid > input, .field.invalid > select, .field.invalid > textarea,
input.invalid, select.invalid, textarea.invalid {
  border-color: var(--danger);
}
.field.invalid > :focus, input.invalid:focus, select.invalid:focus, textarea.invalid:focus {
  outline-color: var(--danger);
}

/* Two-up field grid — short fields side by side, collapsing to one column when
 * narrow. */
.cred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-6); }

/* A run of fields under a heading. */
.config-section { display: flex; flex-direction: column; gap: var(--space-5); }
.config-section > h2 { font-size: var(--fs-h2); margin: 0; }

/* Checkbox / radio row — a native control + its label on one line. One opt-in
 * (checkbox), or grouped in a <fieldset class="choice-set"> for a single-choice
 * set (radio). The native input owns the focus ring + accent. An optional .desc
 * adds a muted second line. */
.choice-row { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--fs-body-sm); cursor: pointer; }
.choice-row input { accent-color: var(--accent); margin: var(--space-1) 0 0; flex: none; }
.choice-row .desc { display: block; color: var(--text-muted); font-size: var(--fs-eyebrow); margin-top: var(--space-1); }
.choice-set { margin: 0; display: flex; flex-direction: column; gap: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6) var(--space-7); }
.choice-set legend { padding: 0 var(--space-3); font-size: var(--fs-meta); font-weight: var(--fw-emph); color: var(--text-muted); }

/* =============================================================================
 * REUSABLE PRIMITIVES
 * ========================================================================== */

/* Screen-reader-only text (#270) — the standard clip pattern. For labels that
 * must be announced by AT but not painted: icon-button names, select labels
 * whose visual affordance is the control itself. Not display:none (that hides
 * from AT too). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Badge / status pill — one base + semantic modifiers (backlog L8).
 * --warn is the WARNING family, never accent: accent means active/selected
 * everywhere else in this system, so an accent-painted "warn" pill reads as a
 * selected state and cannot carry caution (#139).
 *
 * A PILL DOES NOT WRAP (2026-08-11 design review). `--radius-pill` assumes one
 * line: a label that breaks rounds both ends of both lines and reads as two
 * badges rather than one. That is the primitive's anatomy, not a surface
 * preference, so it belongs on the base. The Hub's Unclaimed queue hit it first
 * on `Awaiting registration` in a narrow heartbeat cell and scoped the fix to
 * that one cell; the same label sits in a `td` on the Organization detail screen
 * with no such rule, and on the Platform — where every `.badge` is a short
 * topbar page label in a wide flex bar — the declaration is a no-op. */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--mono); font-size: var(--fs-eyebrow);
  padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--secondary); border: 1px solid var(--border);
  white-space: nowrap;
}
.badge--ok     { color: var(--success); }
.badge--warn   { color: var(--warning); background: var(--warning-surface); border-color: var(--warning-border); }
.badge--danger { color: var(--danger);  background: var(--danger-surface);  border-color: var(--danger-border); }
.badge--muted  { color: var(--text-muted); }

/* Page wrapper + headings. */
.admin-wrap { max-width: 760px; margin: var(--space-10) auto; padding: 0 var(--space-8); }
.admin-wrap h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-2); }
.admin-wrap .sub { color: var(--text-muted); margin: 0 0 var(--space-9); }

/* Create row: input + button. */
.new-row { display: flex; gap: var(--space-4); margin-bottom: var(--space-9); }
.new-row input { flex: 1; }

/* List/content card (agents, skills). */
.card {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-7) var(--space-8);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface-raised); margin-bottom: var(--space-5);
}
.card .grow { flex: 1; min-width: 0; }
.card .name { font-size: var(--fs-h2); font-weight: var(--fw-emph); }
.card .meta { color: var(--text-muted); font-size: var(--fs-body-sm); }
.card .warn { color: var(--warning); }   /* same rule as .badge--warn (#139) */

/* Metric tiles + panel + table (the dash- "metrics" vocabulary). */
.cards { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.metric {
  flex: 1; min-width: 140px; padding: var(--space-7) var(--space-8);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised);
}
.metric .value { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
.metric .label { color: var(--text-muted); font-size: var(--fs-body-sm); }

.panel { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); overflow: hidden; }
.panel-head { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-6) var(--space-8); border-bottom: 1px solid var(--border); }
.panel-head .title { font-weight: var(--fw-emph); }
.panel-head .hint { color: var(--text-muted); font-size: var(--fs-eyebrow); }
.panel-pad { padding: var(--space-8); }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.table th {
  text-align: left; font-weight: var(--fw-emph);
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border);
}
.table td { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Selectable list row — ONE primitive (backlog H1: was 6 copies). */
.list-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text);
}
.list-row:hover { background: var(--surface-hover); }
.list-row.sel { background: var(--accent-surface); color: var(--accent-text); }
.list-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -1px; }
.list-row .ico { width: 18px; text-align: center; flex: none; }

/* Empty state — one class for every "nothing here yet" (backlog L7). */
.empty-note { color: var(--text-muted); text-align: center; padding: var(--space-10) 0; }
.empty-note.compact { padding: var(--space-9) 0; }

/* Icon slot — owned inline SVG (icons.js → <svg aria-hidden="true">). One
 * size scale; decorative icons are aria-hidden, meaningful ones get a label. */
.ico-svg { display: inline-block; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; }
.ico-svg.sm { width: 14px; height: 14px; }
.ico-svg.md { width: 18px; height: 18px; }

/* =============================================================================
 * FEEDBACK
 * ========================================================================== */
.notice { color: var(--text-muted); font-style: italic; }
.soft-notice { /* graceful refusal — NEVER red */
  padding: var(--space-5) var(--space-6); border-radius: var(--radius-md);
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-muted);
}
.error {
  padding: var(--space-5) var(--space-6); border-radius: var(--radius-md);
  background: var(--danger-surface); border: 1px solid var(--danger-border); color: var(--danger);
}

/* Owned confirmation dialog. */
.dialog-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; background: var(--scrim);
}
.dialog-overlay[hidden] { display: none; }
.dialog {
  max-width: 420px; width: calc(100% - var(--space-9));
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  padding: var(--space-9); box-shadow: var(--shadow-modal);
}
.dialog-title { font-size: var(--fs-title); margin: 0 0 var(--space-4); }
.dialog-message { color: var(--text-muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-8); }
/* FIX (backlog H4): was color:#fff. */
.dialog-actions button.danger { background: var(--danger); color: var(--on-primary); border-color: var(--danger); }
.dialog-actions button.danger:hover { filter: brightness(.92); }
body.dialog-open { overflow: hidden; }

/* =============================================================================
 * CHAT PRIMITIVES (the published surface; also studio + skill panes)
 * The widget OWNS these — render via YatsarChat, do not re-mock
 * (backlog H2: compare mode + theme preview must reuse, not reimplement).
 * ========================================================================== */
.yc-msg { max-width: 92%; margin-bottom: var(--space-5); }
.yc-msg.user { margin-left: auto; }
.yc-msg.user .yc-bubble {
  background: var(--primary); color: var(--on-primary); padding: var(--space-4) var(--space-6);
  border-radius: var(--bubble-radius) var(--bubble-radius) var(--bubble-tail) var(--bubble-radius);
}
.yc-md {
  background: var(--surface-raised); border: 1px solid var(--border); padding: var(--space-4) var(--space-6);
  border-radius: var(--bubble-tail) var(--bubble-radius) var(--bubble-radius) var(--bubble-radius);
}
.yc-md pre, .yc-md code { font-family: var(--mono); background: var(--surface); border-radius: var(--radius-sm); }
.yc-md th, .yc-md td { border: 1px solid var(--border); padding: var(--space-2) var(--space-4); }

/* Tool-activity chip — scoped under .yc-messages so it can't collide with the
 * inline /skill chips inside the input. */
.yc-messages .yc-chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--mono); font-size: var(--fs-meta);
  padding: var(--space-1) var(--space-5); border: 1px dashed var(--border);
  border-radius: var(--radius-pill); color: var(--secondary);
}
.yc-messages .yc-chip.run .st { color: var(--accent); animation: ycpulse 1s infinite; }
.yc-messages .yc-chip.ok .st  { color: var(--success); }
.yc-messages .yc-chip.err .st { color: var(--danger); }

/* The one shared running treatment (backlog L2) — first production wearer:
 * the Thinking indicator's mark slot (#290). */
.is-running { color: var(--accent); animation: ycpulse 1s infinite; }
@keyframes ycpulse { 50% { opacity: .35; } }

/* Thinking indicator (#288/#458, Decision 64) — the composite full-turn line
 * in every chat surface: Working-mark · elapsed timer · rotating phrase. The
 * node is one polite role="status" (a .visually-hidden "Working…"); every
 * visual part is aria-hidden — announce once, tick silently. Production
 * ships the mockup-approved literals (7px gap, 15px mark) — see the backlog;
 * this is the token-aligned target. */
.yc-thinking {
  color: var(--text-muted); font-size: var(--fs-meta); padding: 0 var(--space-2);
  display: inline-flex; align-items: center; gap: var(--space-4);
}
.yc-thinking .yc-work { display: inline-flex; font-size: var(--fs-h2); line-height: 0; }
.yc-thinking .yc-sep { opacity: .5; }
/* tabular digits: the counting timer never nudges the phrase */
.yc-thinking .yc-elapsed { font-variant-numeric: tabular-nums; }
/* content cross-fade — deliberately above the .12–.22s UI band (Decision 64);
 * a --motion-fade token is the candidate if a second cross-fade lands */
.yc-thinking .yc-phrase { font-style: italic; transition: opacity .3s ease; }
.yc-thinking .yc-phrase.fade { opacity: 0; }
/* The Working-mark (#290, Decision 65): the owned Yatsar Y, stroke on
 * currentColor, sized 1em to whatever text it sits beside. */
.yc-y { display: block; width: 1em; height: 1em; }

/* Morphing Send/Stop (#469): one native icon button on every YatsarChat
 * surface. Arrow/square transforms and fill→danger color share the same
 * --motion-fast clock. Idle is FILLED (CJ, 2026-07-24): accent fill + white
 * glyph via --primary/--on-primary (dark theme resolves through the tokens);
 * Agent chats only substitute their idle identity fill (--agent-strong). */
button.yc-sendstop {
  --yc-sendstop-fill: var(--primary);
  --yc-sendstop-fill-hover: var(--primary-hover);
  width: 38px; height: 38px; padding: 0;
  display: inline-grid; place-items: center;
  color: var(--on-primary);
  background: var(--yc-sendstop-fill);
  border-color: var(--yc-sendstop-fill);
  border-radius: var(--radius);
  transition: color var(--motion-fast), background var(--motion-fast),
    border-color var(--motion-fast);
}
button.yc-sendstop:hover {
  color: var(--on-primary);
  background: var(--yc-sendstop-fill-hover);
  border-color: var(--yc-sendstop-fill-hover);
}
.yc-sendstop.is-agent,
.yc-sendstop.ws-send-agent {
  --yc-sendstop-fill: var(--agent-strong);
  --yc-sendstop-fill-hover: color-mix(in srgb, var(--agent-strong) 86%, black);
}
button.yc-sendstop.is-stop {
  color: var(--danger);
  background: var(--danger-surface);
  border-color: var(--danger-border);
}
button.yc-sendstop.is-stop:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, var(--surface-raised));
  border-color: var(--danger);
}
/* Component-owned morph geometry, not a general-purpose icon: the arrow and
 * square are pseudo-elements, so static Home and JS-built controls cannot
 * drift and the ordinary icon registry remains the sole SVG vocabulary. */
button.yc-sendstop::before,
button.yc-sendstop::after {
  content: ""; grid-area: 1 / 1;
  display: block; background: currentColor;
  transform-origin: center;
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
button.yc-sendstop::before {
  width: 16px; height: 16px;
  clip-path: polygon(42% 0, 100% 42%, 84% 58%, 59% 36%, 59% 100%,
    41% 100%, 41% 36%, 16% 58%, 0 42%);
}
button.yc-sendstop::after {
  width: 10px; height: 10px; border-radius: 1px;
  opacity: 0; transform: scale(.45) rotate(-45deg);
}
button.yc-sendstop.is-stop::before {
  opacity: 0; transform: scale(.55) rotate(45deg);
}
button.yc-sendstop.is-stop::after {
  opacity: 1; transform: scale(1) rotate(0);
}

/* Respect reduced motion (shipped to production in #67). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}