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

  /* Chat layout: sidebar + chat area on desktop */
  .chat-layout {
    display: flex;
    flex-direction: column;
    block-size: 100%;
  }

  @media (min-width: 800px) {
    .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 {
    display: inline-flex;
    color: var(--color-ink-secondary);
    text-decoration: none;
  }

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

  .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);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
  }

  .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: oklch(var(--lch-ink-lighter));
  }

  .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 {
    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-weight: 600;
    font-size: var(--text-normal);
    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;
  }

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

  /* Individual message */
  .chat__message {
    max-inline-size: 85%;
    padding: var(--block-space-half) var(--inline-space);
    border-radius: var(--radius-lg);
    line-height: var(--line-height);
    word-break: break-word;
  }

  .chat__message--user {
    align-self: flex-end;
    background-color: var(--color-link);
    color: oklch(var(--lch-canvas));
  }

  .chat__message--assistant {
    align-self: flex-start;
    background-color: var(--color-surface);
    border: var(--border);
  }

  .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));
  }

  .chat__message-content {
    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: 1.25em;
  }

  /* 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: 700;
  }

  .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 {
    display: block;
    font-size: var(--text-small);
    font-weight: 600;
    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);
  }

  .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-lg);
    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);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
  }

  .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;
  }

  /* 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);
  }
}