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

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

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

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

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

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