/* ═══════════════════════════════════════════════════════════════
   FEED-UI — Shared top-layer feed channel.
   Per docs/specs/feed-channel.md (SPEC-FEED-CHANNEL-001).
   ═══════════════════════════════════════════════════════════════ */

/* Safari 17.x bug — same as toast: `:scope[data-open]` flavor B
   doesn't reliably restyle on attribute toggling inside @scope.
   Selectors moved out as plain feed-item-ui[data-…] rules. */
feed-item-ui[data-open] {
  transition: transform var(--feed-item-duration) var(--feed-item-easing),
              opacity   var(--feed-item-duration) var(--feed-item-easing);
  transform: translateY(0);
  opacity: 1;
}
feed-item-ui[data-closing] {
  transition: transform var(--feed-item-duration) var(--feed-item-easing),
              opacity   var(--feed-item-duration) var(--feed-item-easing);
  opacity: 0;
}

/* Container — per-position lane, mounted into document.body via
   Popover API for top-layer placement. */
@scope (feed-ui) {
  :where(:scope) {
    --feed-gap:        var(--a-space-2);
    --feed-padding:    var(--a-space-3);
    --feed-max-width:  22rem;
    --feed-offset:     var(--a-space-4);
  }

  :scope {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--feed-gap);
    padding: 0;
    background: transparent;
    border: 0;
    pointer-events: none; /* Items re-enable pointer-events. */
    width: max-content;
    max-width: var(--feed-max-width);
    /* Items size to their own content (see feed-item-ui width: max-content);
       align them to the lane's anchored edge so short items hug the side
       rather than left-aligning inside a wider container. */
    align-items: flex-end;
  }
  /* Reset native popover defaults. UA stylesheet sets `margin: auto;
     inset: 0; border: solid; padding: 0.25em` which would center the
     lane and paint a chrome border — both fight the fixed-corner
     anchoring below. */
  :scope[popover] {
    margin: 0;
    inset: auto;
    border: 0;
    padding: 0;
    background: none;
    color: inherit;
  }

  /* Position variants. Default = bottom-right. */
  :scope,
  :scope[position="bottom-right"] {
    bottom: var(--feed-offset); right: var(--feed-offset);
  }
  :scope[position="bottom-left"] {
    bottom: var(--feed-offset); left: var(--feed-offset); right: auto;
    align-items: flex-start;
  }
  :scope[position="bottom-center"] {
    bottom: var(--feed-offset);
    left: 50%; right: auto;
    transform: translateX(-50%);
    align-items: center;
  }
  :scope[position="top-right"] {
    top: var(--feed-offset); right: var(--feed-offset); bottom: auto;
    flex-direction: column-reverse;
  }
  :scope[position="top-left"] {
    top: var(--feed-offset); left: var(--feed-offset); right: auto; bottom: auto;
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  :scope[position="top-center"] {
    top: var(--feed-offset); bottom: auto;
    left: 50%; right: auto;
    transform: translateX(-50%);
    flex-direction: column-reverse;
    align-items: center;
  }
  :scope[position="inline"] {
    position: relative;
    inset: auto;
    z-index: 1;
  }
}

/* Item — atomic feed entry. */
@scope (feed-item-ui) {
  :where(:scope) {
    --feed-item-bg:       var(--a-bg);
    --feed-item-fg:       var(--a-fg);
    --feed-item-border:   var(--a-border-subtle);
    --feed-item-radius:   var(--a-radius-md);
    --feed-item-px:       var(--a-space-3);
    --feed-item-py:       var(--a-space-2-5);
    --feed-item-shadow:   var(--a-shadow-md);
    --feed-item-icon-size: var(--a-icon-size);
    --feed-item-duration: var(--a-duration);
    --feed-item-easing:   var(--a-easing-out);
    --feed-item-gap:      var(--a-space-3);
    --feed-item-max-width: 22rem;  /* §230-bundle (v0.5.9): component-local. Was orphaned --a-feed-max-width — hoisted per RESPONSE-21 guidance. */
  }
  /* fg = the scheme-aware --a-{variant}-text, which flips light↔dark via
     light-dark() to track the --a-{variant}-muted bg (also scheme-aware).
     NOT --a-{variant}-fg (= --a-{variant}-text-strong, locked for solid
     --variant-strong fills) — pairing a locked fg with a flipping bg goes
     low-contrast in one scheme. Mirrors alert.css + toast.css wiring. */
  :scope[variant="info"]    { --feed-item-fg: var(--a-info-text);    --feed-item-bg: var(--a-info-muted); }
  :scope[variant="success"] { --feed-item-fg: var(--a-success-text); --feed-item-bg: var(--a-success-muted); }
  :scope[variant="warning"] { --feed-item-fg: var(--a-warning-text); --feed-item-bg: var(--a-warning-muted); }
  :scope[variant="danger"]  { --feed-item-fg: var(--a-danger-text);  --feed-item-bg: var(--a-danger-muted); }

  :scope {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--feed-item-gap);
    /* Size to own content (a one-line "OK" stays narrow), capped at
       max-width (long messages wrap at the bound). The lane container's
       align-items (per [position]) re-aligns short items to the anchored
       edge so they hug the corner instead of left-aligning under a
       wider sibling. */
    width: max-content;
    max-width: var(--feed-item-max-width);
    padding: var(--feed-item-py) var(--feed-item-px);
    background: var(--feed-item-bg);
    color: var(--feed-item-fg);
    border: 1px solid var(--feed-item-border);
    border-radius: var(--feed-item-radius);
    box-shadow: var(--feed-item-shadow);
    opacity: 0;
    transform: translateY(0.5rem);
    pointer-events: auto;
  }
  :scope [slot="body"] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  :scope [slot="body"] strong {
    font-weight: var(--a-weight-semibold);
  }
  :scope > [data-feed-close] {
    flex-shrink: 0;
  }
}

/* Phase 2 max-queue: items above [max] are appended with [data-queued]
   and stay invisible until a visible sibling dismisses (at which point
   `releaseContainerIfEmpty` strips the attribute). Display:none keeps
   them out of the layout AND screen-reader-invisible — items not yet
   shown shouldn't be announced. */
feed-item-ui[data-queued] {
  display: none;
}

/* Reduced-motion: skip slide-in/out, keep opacity. */
@media (prefers-reduced-motion: reduce) {
  feed-item-ui[data-open],
  feed-item-ui[data-closing] {
    transition: opacity var(--feed-item-duration) var(--feed-item-easing);
    transform: none !important;
  }
}
