@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__purpose {
    font-size: var(--text-small);
    color: var(--color-ink-muted);
  }

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

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