@scope (agent-feedback-bar-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --agent-feedback-bar-gap:      var(--a-space-1);
    --agent-feedback-bar-padding:  var(--a-space-2);

    /* ── Typography ── */
    --agent-feedback-bar-font:     var(--a-ui-sm);

    /* ── Colors ── */
    --agent-feedback-bar-fg:       var(--a-fg-muted);
  }

  :scope {
    display: flex;
    align-items: center;
    gap: var(--agent-feedback-bar-gap);
    padding-block: var(--agent-feedback-bar-padding);
    font-size: var(--agent-feedback-bar-font);
    color: var(--agent-feedback-bar-fg);
  }

  [data-feedback-status] {
    margin-inline-start: auto;
    color: var(--agent-feedback-bar-fg);
    font-size: var(--agent-feedback-bar-font);
  }

  :scope[disabled] {
    opacity: 0.6;
    pointer-events: none;
  }
}
