@scope (agent-artifact-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --agent-artifact-radius:            var(--a-radius);
    --agent-artifact-padding:           var(--a-space-3);
    --agent-artifact-header-padding-y:  var(--a-space-2);
    --agent-artifact-header-padding-x:  var(--a-space-3);
    --agent-artifact-gap:               var(--a-space-2);

    /* ── Colors ── */
    --agent-artifact-bg:                var(--a-bg-subtle);
    --agent-artifact-fg:                var(--a-fg);
    --agent-artifact-fg-muted:          var(--a-fg-muted);
    --agent-artifact-border:            var(--a-border-subtle);
    --agent-artifact-header-bg:         var(--a-bg);
    --agent-artifact-header-bg-hover:   var(--a-bg-hover);

    /* ── Typography ── */
    --agent-artifact-title-size:        var(--a-ui-md);
    --agent-artifact-title-weight:      var(--a-weight-medium);

    /* ── Motion ── */
    --agent-artifact-duration:          var(--a-duration-fast);
  }

  :scope {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--agent-artifact-border);
    border-radius: var(--agent-artifact-radius);
    background: var(--agent-artifact-bg);
    overflow: hidden;
    min-width: 0;
  }

  :scope[tone="accent"]  { --agent-artifact-border: var(--a-accent-bg); }
  :scope[tone="warning"] { --agent-artifact-border: var(--a-warning-bg); }
  :scope[tone="danger"]  { --agent-artifact-border: var(--a-danger-bg); }

  [data-artifact-header] {
    display: flex;
    align-items: center;
    gap: var(--agent-artifact-gap);
    padding: var(--agent-artifact-header-padding-y) var(--agent-artifact-header-padding-x);
    background: var(--agent-artifact-header-bg);
    border-block-end: 1px solid var(--agent-artifact-border);
    cursor: pointer;
    user-select: none;
    min-width: 0;
    transition: background var(--agent-artifact-duration);
  }

  [data-artifact-header]:hover {
    background: var(--agent-artifact-header-bg-hover);
  }

  [data-artifact-header]:focus-visible {
    outline: none;
    box-shadow: var(--a-focus-ring) inset;
  }

  [data-artifact-icon] {
    flex-shrink: 0;
  }

  [data-artifact-title] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--agent-artifact-title-size);
    font-weight: var(--agent-artifact-title-weight);
    color: var(--agent-artifact-fg);
  }

  /* [data-artifact-kind] is a <badge-ui size="sm"> — it brings its own pill
     chrome (bg, radius, size, weight). We only tweak tracking so the
     uppercase kind reads as a tag, not a label. */
  [data-artifact-kind] {
    flex-shrink: 0;
    letter-spacing: 0.04em;
  }

  [data-artifact-actions] {
    display: inline-flex;
    align-items: center;
    gap: var(--a-space-1);
    flex-shrink: 0;
  }

  [data-artifact-caret] {
    flex-shrink: 0;
    transition: transform var(--agent-artifact-duration);
  }

  [data-artifact-body] {
    padding: var(--agent-artifact-padding);
    min-width: 0;
  }

  :scope[collapsed] [data-artifact-header] {
    border-block-end: none;
  }
}
