@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
/* Compound composition aggregation: the log arm renders StatusDot internally,
 * so `cinder/feed/styles` must include its styling when consumers import the
 * component-specific style sidecar. Likewise the Feed.Boundary leaf — its
 * rules live in its own sidecar for standalone use, and the family sidecar
 * pulls them in. */
@import '/assets/279459f4b8beedc0c50fb81d65c24a5b11bfb48a65a317e3aa81065c14eaf81e/components/status-dot/status-dot.css';
@import '/assets/279459f4b8beedc0c50fb81d65c24a5b11bfb48a65a317e3aa81065c14eaf81e/components/feed-boundary/feed-boundary.css';
@import '/assets/279459f4b8beedc0c50fb81d65c24a5b11bfb48a65a317e3aa81065c14eaf81e/components/feed-event/feed-event.css';

@layer cinder.components {
  /* ========================================
 * FEED
 * ======================================== */

  .cinder-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-4);
  }

  /* ----------------------------------------
   * Log arm — operator-facing append-only stream chrome around the same
   * .cinder-feed list. (Ported from the retired EventStreamViewer.)
   * -------------------------------------- */

  .cinder-feed-log {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-lg);
    background: var(--cinder-surface-raised);
    overflow: hidden;
    font-size: var(--cinder-text-sm);
  }

  .cinder-feed-log .cinder-feed {
    padding: var(--cinder-space-3);
  }

  .cinder-feed-log__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cinder-space-2);
    padding: var(--cinder-space-2) var(--cinder-space-3);
    border-block-end: 1px solid var(--cinder-border-muted);
    background: var(--cinder-surface-inset);
    flex-shrink: 0;
  }

  .cinder-feed-log__toolbar-start,
  .cinder-feed-log__toolbar-end {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-2);
  }

  /* Hosts the viewport plus the overlaid resume control. Overlaying (rather
   * than mounting a toolbar row) means pausing never shifts the content the
   * user just scrolled to. */
  .cinder-feed-log__scroll-region {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-block-size: 0;
  }

  .cinder-feed-log__resume-button {
    position: absolute;
    inset-block-end: var(--cinder-space-2);
    inset-inline-start: 50%;
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-1);
    padding: var(--cinder-space-0-5) var(--cinder-space-2);
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-full);
    background: var(--cinder-surface);
    color: var(--cinder-text);
    font-size: var(--cinder-text-xs);
    font-family: inherit;
    box-shadow: var(--cinder-shadow-md);
    cursor: pointer;
    transition: background-color var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  @media (hover: hover) {
    .cinder-feed-log__resume-button:hover {
      background: var(--cinder-surface-hover);
    }
  }

  /* The root .cinder-feed-log has `overflow: hidden`; an outset ring is
   * clipped. Use Strategy B-inset so the ring stays within the button's own
   * border box. Matches the pattern used by .cinder-drawer__close (drawer.css). */
  .cinder-feed-log__resume-button:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: inset 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
  }

  @media (forced-colors: active) {
    .cinder-feed-log__resume-button:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: calc(var(--cinder-ring-width) * -1);
      box-shadow: none;
    }
  }

  .cinder-feed-log__truncation-notice {
    padding: var(--cinder-space-1) var(--cinder-space-3);
    background: var(--cinder-surface-inset);
    color: var(--cinder-color-warning-fg);
    font-size: var(--cinder-text-xs);
    border-block-end: 1px solid var(--cinder-border-muted);
    flex-shrink: 0;
  }

  .cinder-feed-log__viewport {
    overflow-y: auto;
    flex: 1 1 auto;
    min-block-size: 0;
    /* Default height — consumer overrides with inline style or class. */
    max-block-size: 32rem;
    outline: none;
  }

  /* Inset ring (Strategy B-inset — the root clips overflow), with the
   forced-colors outline twin the retired EventStreamViewer carried:
   Windows High Contrast suppresses box-shadow, and the layer order means
   the base rule's `outline: none` would otherwise leave this keyboard-
   focusable role="log" viewport with no indication at all. */
  .cinder-feed-log__viewport:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: inset 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
  }

  @media (forced-colors: active) {
    .cinder-feed-log__viewport:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: calc(var(--cinder-ring-width) * -1);
      box-shadow: none;
    }
  }

  .cinder-feed-log__loading {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
    padding: var(--cinder-space-3);
  }

  .cinder-feed-log__skeleton {
    block-size: 1.25rem;
    border-radius: var(--cinder-radius-sm);
    background: var(--cinder-surface-inset);
    animation: cinder-feed-log-skeleton-pulse 1.4s ease-in-out infinite;
  }

  .cinder-feed-log__skeleton:nth-child(2) {
    inline-size: 80%;
  }

  .cinder-feed-log__skeleton:nth-child(3) {
    inline-size: 60%;
  }

  @keyframes cinder-feed-log-skeleton-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-feed-log__skeleton {
      animation: none;
    }
  }
}