@layer components {
  /* ============================================================
     Chat -- Conversation interface for Brain Dump
     ============================================================ */

  /* Chat layout: the Chats list beside the chat once the main pane has room
     for both (it narrows as side panels open), a back arrow to it otherwise */
  .chat-layout {
    display: flex;
    flex-direction: column;
    block-size: 100%;
  }

  @container main (min-width: 44rem) {
    .chat-layout {
      flex-direction: row;
    }
  }

  .chat {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    overflow: hidden;
    flex: 1;
    min-inline-size: 0;
    min-block-size: 0;
    container-type: size;
    container-name: chat;

    /* Composer sizing variables -- scoped to the chat so the textarea and the
       chrome collapse can share the same visible-height policy. */
    --chat-messages-min-height: 5rem;
    --chat-toolbar-height: calc(44px + var(--block-space-half) + 1px);
    --chat-header-height: 3.5rem;
    --chat-one-line: calc(var(--line-height) * var(--text-normal) + var(--block-space-half) * 2);
    --chat-three-line: calc(var(--line-height) * var(--text-normal) * 3 + var(--block-space-half) * 2);
  }

  /* Header */
  .chat__header {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-half) var(--inline-space);
    border-block-end: var(--border);
    flex-shrink: 0;
  }

  /* When the visible viewport is too short on mobile to keep both a usable
     composer and a usable message list, hide the chat header after the tab bar
     has already been collapsed. Desktop chat never hides its header, so chat
     controls remain reachable on wide but short viewports. */
  @media (max-width: 799px) {
    @container app-layout (max-height: 30rem) {
      .chat__header {
        display: none;
      }

      .chat {
        --chat-header-height: 0px;
      }
    }
  }

  .chat__back {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    color: var(--color-ink-muted);
    text-decoration: none;
  }

  .chat__back:hover {
    color: var(--color-ink);
  }

  @container main (min-width: 44rem) {
    .chat__back {
      display: none;
    }
  }

  .chat__header-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-inline-size: 0;
  }

  .chat__header-actions {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    flex-shrink: 0;
    margin-inline-start: auto;
  }

  .chat__menu {
    position: relative;
  }

  .chat__menu-toggle {
    min-inline-size: var(--touch-target-min);
    min-block-size: var(--touch-target-min);
    list-style: none;
  }

  .chat__menu-toggle::-webkit-details-marker {
    display: none;
  }

  .chat__menu-panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    z-index: var(--z-popover);
    display: flex;
    flex-direction: column;
    min-inline-size: 12rem;
    padding-block: var(--block-space-half);
    background: var(--color-canvas);
    border: var(--border-strong);
    border-radius: var(--radius);
  }

  .chat__menu-item {
    display: flex;
    align-items: center;
    inline-size: 100%;
    min-block-size: var(--touch-target-min);
    padding-inline: var(--inline-space);
    background: none;
    border: 0;
    color: var(--color-ink);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .chat__menu-item:hover {
    background-color: var(--color-surface);
  }

  .chat__menu-item--negative {
    color: var(--color-negative);
  }

  @media (max-width: 799px), (pointer: coarse) {
    .chat__menu-toggle {
      min-inline-size: 44px;
      min-block-size: 44px;
    }

    .chat__menu-item {
      min-block-size: 44px;
    }
  }

  .chat__quiet-toggle {
    --btn-color: var(--color-ink-muted);
    min-inline-size: 44px;
    min-block-size: 44px;
  }

  .chat__quiet-toggle[aria-pressed="true"] {
    --btn-bg: var(--color-accent);
    --btn-color: oklch(var(--lch-canvas));
    --btn-border-color: transparent;
  }

  .chat__title {
    font-family: var(--font-prose);
    font-weight: 500;
    font-size: var(--text-normal);
    line-height: var(--line-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Names the Roleplay characters and opens the AI's character's card. Two
     lines at most, so long names never take the short viewport from the composer. */
  .chat__roleplay-label {
    font-size: var(--text-small);
    color: var(--color-ink-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-block-size: var(--touch-target-min);
    overflow: hidden;
    overflow-wrap: anywhere;
    text-decoration: underline;
    transition: color var(--transition-fast);
  }

  @media (hover: hover) {
    .chat__roleplay-label:is(a):hover {
      color: var(--color-ink);
    }
  }

  /* Messages area */
  .chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--block-space) * 1.25) var(--block-space);
    display: flex;
    flex-direction: column;
    gap: calc(var(--block-space) * 1.25);
    overscroll-behavior: contain;
    min-block-size: var(--chat-messages-min-height); /* keep a usable message region when the chat is short */
  }

  /* Individual message: no bubble. The writer's carry an accent rule at
     their start; the AI's are plain. */
  .chat__message {
    line-height: 1.65;
    word-break: break-word;
  }

  .chat__message--user {
    border-inline-start: 2px solid var(--color-accent);
    padding-inline-start: 0.75rem;
  }

  .chat__message--system {
    align-self: center;
    font-size: var(--text-small);
    color: var(--color-ink-muted);
    font-style: italic;
  }

  /* Consecutive messages from the same author render as one grouped run --
     tighten the gap the flex container otherwise applies uniformly. */
  .chat__message--grouped {
    margin-block-start: calc(var(--block-space-quarter) - var(--block-space) * 1.25);
  }

  .chat__message-content {
    font-family: var(--font-prose);
    font-size: var(--text-normal);
    white-space: pre-wrap;
  }

  .chat__message-content span {
    display: inline;
  }

  /* A reply's formatting and a choice turn's lists (ChatMarkdown). */
  .chat__message-content :is(p, ul, ol, blockquote, h3, h4, h5, h6) {
    margin-block: 0 var(--block-space-half);
  }

  .chat__message-content > :last-child {
    margin-block-end: 0;
  }

  .chat__message-content :is(ul, ol) {
    padding-inline-start: 3ch;
  }

  .chat__message-content strong {
    font-weight: 600;
  }

  /* reset.css strips list markers, which a reply's lists need back. */
  .chat__message-content ul {
    list-style: disc;
  }

  .chat__message-content ol {
    list-style: decimal;
  }

  .chat__message-content :is(h3, h4, h5, h6) {
    font-size: var(--text-normal);
    font-weight: 600;
  }

  .chat__message-content blockquote {
    border-inline-start: 3px solid oklch(var(--lch-ink-lighter));
    color: var(--color-ink-secondary);
    margin-inline: 0;
    padding-inline-start: var(--inline-space-half);
  }

  .chat__message-content hr {
    border: 0;
    border-block-start: var(--border);
    margin-block: var(--block-space-half);
  }

  .chat__message-tag {
    display: block;
    margin-block-end: var(--block-space-quarter);
    font-size: var(--text-xs);
    font-weight: 600;
    opacity: 0.8;
  }

  /* Names the character who wrote a Roleplay reply. */
  .chat__message-speaker {
    color: var(--color-ink-secondary);
    display: block;
    font-family: var(--font-prose);
    font-size: var(--text-small);
    font-weight: 500;
    margin-block-end: var(--block-space-quarter);
  }

  /* Actions a finished reply offers, such as sending it to the Editor. */
  .chat__message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    margin-block-start: var(--block-space-half);
  }

  .chat__message-meta {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-block-start: 0.25rem;
    opacity: 0.7;
  }

  .chat__activity {
    flex-shrink: 0;
    padding: var(--block-space-quarter) var(--inline-space);
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
  }

  .chat__activity[hidden] {
    display: none;
  }

  .chat__held-messages {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .chat__held-messages:empty {
    display: none;
  }

  .chat__held-message {
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--block-space-half) var(--inline-space);
    overflow-wrap: anywhere;
  }

  .chat__held-label {
    font-size: var(--text-small);
    color: var(--color-ink-muted);
  }

  .chat__reply-state {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    margin-block-start: var(--block-space-half);
    font-size: var(--text-small);
  }

  .chat__reply-reason {
    display: block;
    color: var(--color-ink-muted);
    font-size: var(--text-small);
  }

  .chat__held-message .btn,
  .chat__reply-state .btn {
    min-block-size: var(--touch-target-min);
    min-inline-size: var(--touch-target-min);
  }

  /* Jump-to-latest -- sticky button shown when scrolled away from the live edge */
  .chat__jump-to-latest {
    position: sticky;
    inset-block-end: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--color-canvas);
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

  @media (hover: hover) {
    .chat__jump-to-latest:hover {
      background-color: var(--color-surface);
    }
  }

  .chat__jump-to-latest[hidden] {
    display: none;
  }

  /* Error banner */
  .chat__error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    padding: var(--block-space-half) var(--inline-space);
    background-color: oklch(var(--lch-negative) / 0.1);
    color: var(--color-negative);
    font-size: var(--text-small);
    flex-shrink: 0;
  }

  .chat__error[hidden] {
    display: none;
  }

  .chat__error-actions {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    flex-shrink: 0;
  }

  .chat__error-dismiss {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: var(--text-small);
    text-decoration: underline;
    padding: 0;
    transition: color var(--transition-fast);
  }

  @media (hover: hover) {
    .chat__error-dismiss:hover {
      color: var(--color-ink);
    }
  }

  /* Offline banner -- red floating bar above the input area */
  .chat__offline-banner {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    padding: var(--block-space-half) var(--inline-space);
    background-color: oklch(var(--lch-negative) / 0.12);
    color: var(--color-negative);
    font-size: var(--text-small);
    font-weight: 500;
    flex-shrink: 0;
    animation: chat-offline-slide-in 0.2s ease-out;
  }

  .chat__offline-banner[hidden] {
    display: none;
  }

  .chat__offline-banner svg {
    flex-shrink: 0;
    opacity: 0.8;
  }

  @keyframes chat-offline-slide-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Send button wrapper -- positions the tooltip relative to the button */
  .chat__send-wrapper {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: var(--inline-space-quarter);
  }
}