@layer components {

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