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

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

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

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

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

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

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

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

  [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, var(--agent-artifact-title-size-default));
    font-weight: var(--agent-artifact-title-weight, var(--agent-artifact-title-weight-default));
    color: var(--agent-artifact-fg, var(--agent-artifact-fg-default));
  }

  /* [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-chevron] {
    flex-shrink: 0;
    transition: transform var(--agent-artifact-duration, var(--agent-artifact-duration-default));
  }

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

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