@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__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;
  }

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

  /* Names the Roleplay characters, and reopens their picker. Two lines at most,
     so long names never take the short viewport from the composer. */
  .chat__mode--roleplay {
    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;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--text-small);
    text-align: start;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Scrolls inside a short viewport, so it never crowds out the composer. */
  .chat__roleplay-picker {
    max-block-size: 30cqh;
    overflow-block: auto;
    padding: var(--block-space-half) var(--inline-space);
    border-block-end: var(--border);
    background-color: var(--color-surface);
  }

  .chat__roleplay-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--inline-space-half);
  }

  .chat__roleplay-field {
    display: flex;
    flex: 1 1 12rem;
    flex-direction: column;
    gap: var(--block-space-quarter);
    min-inline-size: 0;
  }

  .chat__roleplay-field .input {
    min-block-size: 44px;
    text-overflow: ellipsis;
  }

  .chat__roleplay-actions {
    display: flex;
    gap: var(--inline-space-half);
  }

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

  /* Marks where the turns change mode, rather than a badge on every bubble. */
  .chat__mode-divider {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    font-size: var(--text-small);
    color: var(--color-ink-muted);
    overflow-wrap: anywhere;
    text-align: center;
  }

  .chat__mode-divider::before,
  .chat__mode-divider::after {
    content: "";
    flex: 1;
    border-block-start: var(--border);
  }

  .chat__message-content {
    white-space: pre-wrap;
  }

  .chat__message-content span {
    display: inline;
  }

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

  /* Streaming message */
  .chat__message--streaming .chat__message-content:empty + .chat__typing-indicator {
    display: flex;
  }

  .chat__message--streaming .chat__message-content:not(:empty) + .chat__typing-indicator {
    display: none;
  }

  /* Typing indicator */
  .chat__typing-indicator {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0;
  }

  .chat__typing-indicator span {
    display: block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background-color: var(--color-ink-muted);
    animation: chat-typing 1.4s infinite ease-in-out both;
  }

  .chat__typing-indicator span:nth-child(1) { animation-delay: 0s; }
  .chat__typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
  .chat__typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

  @keyframes chat-typing {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
  }

  /* Reconnecting indicator -- shown when SSE connection drops mid-stream */
  .chat__reconnecting {
    font-size: var(--text-small);
    color: var(--color-ink-muted);
    font-style: italic;
    padding-block-start: var(--block-space-half);
    animation: chat-reconnecting-pulse 2s infinite ease-in-out;
  }

  .chat__reconnecting[hidden] {
    display: none;
  }

  @keyframes chat-reconnecting-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }

  /* 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-retry,
  .chat__error-dismiss {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: var(--text-small);
    text-decoration: underline;
    padding: 0;
  }

  .chat__error-retry[hidden] {
    display: none;
  }

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

  /* Send tooltip -- appears above the send button when tapped while offline */
  .chat__send-tooltip {
    position: absolute;
    inset-block-end: calc(100% + 0.5rem);
    inset-inline-end: 0;
    inline-size: max-content;
    max-inline-size: 16rem;
    padding: var(--block-space-half) var(--inline-space);
    background-color: var(--color-ink);
    color: var(--color-canvas);
    font-size: var(--text-small);
    line-height: var(--line-height);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: chat-tooltip-fade-in 0.15s ease-out;
    z-index: 10;
  }

  .chat__send-tooltip[hidden] {
    display: none;
  }

  /* Small arrow pointing down toward the button */
  .chat__send-tooltip::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0.75rem;
    border: 0.35rem solid transparent;
    border-block-start-color: var(--color-ink);
  }

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