@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  .cinder-chat-conversation-list {
    display: block;
  }

  /* With a load-more handler the list is the scroll container LoadMore observes,
     so the host bounds its height and the list scrolls inside it. It stays one
     after the last page, when the control itself is gone, so the rows do not
     stop scrolling. The inline padding keeps a row's focus ring from being
     clipped at the scrollport edge. */
  .cinder-chat-conversation-list[data-cinder-conversation-list-scrolls] {
    overflow-y: auto;
    padding-inline: var(--cinder-ring-width);
  }

  .cinder-chat-conversation-list__items {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cinder-chat-conversation-list__item {
    list-style: none;
  }

  .cinder-chat-conversation-list__button {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: var(--cinder-space-0-5) var(--cinder-space-2);
    align-items: start;
    width: 100%;
    min-height: 3.25rem;
    padding: var(--cinder-space-2) var(--cinder-space-3);
    text-align: start;
    color: var(--cinder-text-default);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
  }

  .cinder-chat-conversation-list__button[data-cinder-conversation-interactive] {
    cursor: pointer;
  }

  .cinder-chat-conversation-list__button[data-cinder-conversation-selected] {
    background: var(--cinder-surface-hover);
    border-color: transparent;
  }

  @media (hover: hover) {
    .cinder-chat-conversation-list__button[data-cinder-conversation-interactive]:hover {
      background: var(--cinder-surface-hover);
    }
  }

  .cinder-chat-conversation-list__button[data-cinder-conversation-interactive]:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  @media (forced-colors: active) {
    .cinder-chat-conversation-list__button[data-cinder-conversation-interactive]:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      /* ButtonText is correct here: this is a button/navigation control using
         aria-current="page" (page-nav semantics, not aria-selected list-selection).
         Highlight/HighlightText would be wrong — those are for selected listbox items.
         3px separates the ring from ButtonBorder, which renders in forced-colors
         mode on all button elements regardless of their standard-mode border color. */
      outline-offset: 3px;
      box-shadow: none;
    }
  }

  .cinder-chat-conversation-list__title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: var(--cinder-font-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cinder-chat-conversation-list__preview {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    color: var(--cinder-text-muted);
    font-size: var(--_cinder-chat-text-sm, var(--cinder-text-sm));
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cinder-chat-conversation-list__meta {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cinder-space-1) var(--cinder-space-2);
    min-width: 0;
    color: var(--cinder-text-muted);
    font-size: var(--_cinder-chat-text-xs, var(--cinder-text-xs));
  }

  .cinder-chat-conversation-list__agent {
    min-width: 0;
    overflow: hidden;
    font-weight: var(--cinder-font-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cinder-chat-conversation-list__badge {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    inline-size: max-content;
    max-inline-size: max-content;
    padding-inline: var(--cinder-space-1);
    color: var(--cinder-accent-text);
    background: color-mix(in oklch, var(--cinder-accent-solid), transparent 88%);
    border-radius: var(--cinder-radius-full);
    font-size: var(--_cinder-chat-text-xs, var(--cinder-text-xs));
    font-weight: var(--cinder-font-medium);
  }

  .cinder-chat-conversation-list__empty {
    margin: 0;
    color: var(--cinder-text-muted);
    font-size: var(--_cinder-chat-text-sm, var(--cinder-text-sm));
  }
}