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

  /* Input area */
  .chat__input-area {
    padding: var(--block-space-half) var(--inline-space);
    border-block-start: var(--border);
    background-color: var(--color-canvas);
    /* Allow the composer to shrink when dynamic siblings (error banner, offline
       banner, summary panel) appear, so the message region keeps its minimum
       usable height instead of being absorbed by the composer. */
    flex-shrink: 1;
    min-block-size: 0;
  }

  .chat__composer {
    display: flex;
    flex-direction: column;
    border: var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--color-canvas);
    box-sizing: border-box;
  }

  .chat__composer:focus-within {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--focus-ring-offset));
  }

  .chat__form {
    display: flex;
    flex-direction: column;
    position: relative;
    inline-size: 100%;
  }

  .chat__input {
    resize: none;
    border: none;
    border-radius: 0;
    padding: var(--block-space-half) var(--inline-space);
    font-family: var(--font-sans);
    font-size: var(--text-normal);
    line-height: var(--line-height);
    min-block-size: 0;

    /* The composer cap is the larger of a three-line box or half the visible
       viewport, but it is clamped to the space the chat can actually spare
       after the header, the reserved message-region minimum, the toolbar, and
       the vertical padding of the input area itself. The local chat-based
       clamp is the binding constraint when the shell has extra chrome (view
       switcher, import banner, etc.) above the chat. */
    --chat-half-vv: calc(var(--chat-vv-height, 100dvh) / 2);
    --chat-input-area-padding: calc(var(--block-space-half) * 2);
    --chat-vp-available: calc(var(--chat-vv-height, 100dvh) - var(--nav-height) - var(--chat-messages-min-height) - var(--chat-toolbar-height) - var(--chat-input-area-padding));
    --chat-local-available: calc(100cqh - var(--chat-header-height) - var(--chat-messages-min-height) - var(--chat-toolbar-height) - var(--chat-input-area-padding));
    --chat-available: min(var(--chat-vp-available), var(--chat-local-available));
    max-block-size: max(
      var(--chat-one-line),
      min(
        var(--chat-available),
        max(var(--chat-three-line), var(--chat-half-vv))
      )
    );
    overflow-block: auto;
    background-color: transparent;
    color: var(--color-ink);
    inline-size: 100%;
  }

  @media (min-width: 800px) {
    .chat__input {
      max-block-size: 8rem;
    }
  }

  .chat__input:focus {
    outline: none;
  }

  .chat__encrypted-hint {
    position: absolute;
    inset-block-start: var(--block-space-half);
    inset-inline-start: var(--inline-space);
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-quarter);
    color: var(--color-ink-muted);
    font-size: var(--text-normal);
    line-height: var(--line-height);
    pointer-events: none;
    transition: opacity var(--transition-fast);
  }

  .chat__input:not(:placeholder-shown) ~ .chat__encrypted-hint {
    opacity: 0;
  }

  .chat__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--block-space-quarter) var(--inline-space-half);
    border-block-start: var(--border);
    gap: var(--inline-space-half);
    min-block-size: var(--chat-toolbar-height);
  }

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

  .chat__dismiss-keyboard {
    display: none;
    color: var(--color-ink-muted);
  }

  @media (pointer: coarse) {
    .chat__dismiss-keyboard {
      display: inline-flex;
    }
  }

  .chat__send {
    /* .btn--icon makes the background transparent, but the send button is a
       primary action and must remain visible as a solid blue button. */
    --btn-bg: var(--color-link);
    --btn-color: oklch(var(--lch-canvas));
    --btn-border-color: transparent;
    flex-shrink: 0;
  }

  .chat__send:hover {
    --btn-bg: var(--color-link-hover);
  }

  .chat__send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Offline: button is enabled (clickable for tooltip) but looks disabled */
  .chat__send--offline {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Busy: a turn is streaming, but the button stays enabled -- a tap enqueues
     the next send rather than being blocked. */
  .chat__send--busy {
    opacity: 0.7;
  }

  /* Conversation list */
  .chat-list {
    padding: var(--block-space) var(--inline-space);
    max-inline-size: var(--editor-max-width);
    margin-inline: auto;
  }

  .chat-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--block-space);
  }

  .chat-list__title {
    font-size: var(--text-large);
    font-weight: 600;
  }

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

  .chat-list__item {
    display: flex;
    flex-direction: column;
    padding: var(--block-space) var(--inline-space);
    border: var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-ink);
    transition: border-color var(--transition-fast);
  }

  .chat-list__item:hover {
    border-color: var(--color-link);
  }

  .chat-list__item-title {
    font-weight: 600;
  }

  .chat-list__item-meta {
    font-size: var(--text-small);
    color: var(--color-ink-muted);
    margin-block-start: 0.25rem;
  }

  .chat-list__item-preview {
    font-size: var(--text-small);
    color: var(--color-ink-secondary);
    margin-block-start: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* New conversation form */
  .chat-new {
    padding: var(--block-space) var(--inline-space);
    max-inline-size: var(--editor-max-width);
    margin-inline: auto;
  }

  .chat-new__title {
    font-size: var(--text-large);
    font-weight: 600;
    margin-block-end: var(--block-space-half);
  }

  .chat-new__description {
    color: var(--color-ink-secondary);
    margin-block-end: var(--block-space);
  }

  .chat-new__form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .chat-new__purposes {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .chat-new__purpose-option {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 var(--inline-space-half);
    padding: var(--block-space-half) var(--inline-space);
    border: var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition-fast);
  }

  .chat-new__purpose-option:has(input:checked) {
    border-color: var(--color-link);
    background-color: oklch(var(--lch-link) / 0.05);
  }

  .chat-new__purpose-option input[type="radio"] {
    grid-row: 1 / -1;
    align-self: center;
  }

  .chat-new__purpose-label {
    font-weight: 600;
  }

  .chat-new__purpose-description {
    grid-column: 2;
    font-size: var(--text-small);
    color: var(--color-ink-secondary);
  }

  .chat-new__actions {
    display: flex;
    gap: var(--inline-space);
  }

  /* ============================================================
     Chat Sidebar -- Desktop conversation list within chat view
     ============================================================ */

  .chat-sidebar {
    --sidebar-width: 16rem;

    inline-size: var(--sidebar-width);
    flex-shrink: 0;
    border-inline-end: var(--border);
    display: flex;
    flex-direction: column;
    max-block-size: calc(100dvh - var(--nav-height));
    overflow: hidden;
  }

  .chat-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--block-space-half) var(--inline-space);
    border-block-end: var(--border);
    flex-shrink: 0;
  }

  .chat-sidebar__title {
    font-weight: 600;
    font-size: var(--text-normal);
  }

  .chat-sidebar__list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .chat-sidebar__item {
    display: flex;
    flex-direction: column;
    padding: var(--block-space-half) var(--inline-space);
    text-decoration: none;
    color: var(--color-ink);
    border-block-end: var(--border);
    --sidebar-active-border: 3px;
    border-inline-start: var(--sidebar-active-border) solid transparent;
    transition: background-color var(--transition-fast);
  }

  .chat-sidebar__item:hover {
    background-color: var(--color-surface);
  }

  .chat-sidebar__item--active {
    background-color: oklch(var(--lch-link) / 0.08);
    border-inline-start: var(--sidebar-active-border) solid var(--color-link);
  }

  .chat-sidebar__item-title {
    font-weight: 600;
    font-size: var(--text-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-sidebar__item-meta {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-block-start: var(--block-space-eighth);
  }
}