@layer components {
  /* Chat page layout - make chat fill available space */
  body:has(.chat) {
    height: 100dvh;
  }

  body:has(.chat) main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body:has(.chat) main > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    max-width: 100%;
  }

  @media (min-width: 768px) {
    body:has(.chat) main > .container {
      padding: 0 12px;
      max-width: var(--main-width);
    }
  }

  /* Hide footer entirely on mobile chat */
  @media (max-width: 767.98px) {
    body:has(.chat) footer { display: none !important; }
    body:has(.chat) main > .container { margin-block-start: 0 !important; }
  }

  /* Minimal footer on desktop chat */
  body:has(.chat) footer {
    padding: 4px 0 !important;
    background: var(--color-canvas) !important;
    border-top: var(--border);
  }

  body:has(.chat) footer .order-2 { display: none; }

  body:has(.chat) footer a {
    color: var(--color-ink-medium) !important;
    font-size: var(--text-xx-small) !important;
  }

  /* .chat (main chat container) */
  .chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .chat__messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--block-space);
    background-color: var(--color-ink-lightest);
  }

  .chat__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-ink-medium);
    padding: var(--block-space-double);
  }

  .chat__composer {
    padding: 6px 8px;
    background-color: var(--color-canvas);
    border-top: var(--border);
  }

  @media (min-width: 768px) {
    .chat__composer {
      padding: var(--block-space-half);
    }
  }

  .chat__composer-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Composer input wrapper */
  .chat__composer-input {
    flex: 1;
    min-width: 0;
    position: relative;
    border: 1px solid var(--color-ink-lighter);
    border-radius: 20px;
    background-color: var(--color-ink-lightest);
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .chat__composer-input:has(.chat__shared-toggle) .chat__composer-textarea {
    padding-inline-end: 40px;
  }

  .chat__composer-input:focus-within {
    background-color: var(--color-canvas);
    border-color: var(--color-link);
  }

  .chat__composer-textarea {
    resize: none;
    min-height: 36px;
    border: none;
    background: transparent;
    padding: 7px 14px;
    flex: 1;
    min-width: 0;
    width: 100%;
    font-size: var(--text-normal);
    scrollbar-width: none;
  }

  .chat__composer-textarea:focus {
    background: transparent;
    box-shadow: none;
    outline: none;
    border: none;
  }

  .chat__composer-textarea::-webkit-scrollbar {
    display: none;
  }

  /* Shared toggle — inside the composer input container */
  .chat__shared-toggle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 6px;
    transform: translateY(-50%);
  }

  .chat__shared-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--color-ink-medium);
    cursor: pointer;
    font-size: 14px;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  .chat__shared-toggle-btn:hover {
    background-color: oklch(var(--lch-black) / 5%);
    color: var(--color-ink);
  }

  .chat__shared-toggle-btn.active {
    color: var(--color-link);
  }

  /* Attach button (+) */
  .chat__attach-toggle {
    padding: 0.375rem 0.35rem;
  }

  .chat__composer-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Mindhub notice */
  .chat__mindhub-notice {
    font-size: var(--text-small);
    text-align: center;
    padding: 0.25rem;
    margin-block-start: var(--block-space-half);
    background: oklch(var(--lch-yellow-lightest));
    border: 1px solid oklch(var(--lch-yellow-lighter));
    border-radius: var(--radius);
    color: oklch(var(--lch-yellow-darkest));
  }

  /* Recording status */
  .recording-status {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    margin-block-start: var(--block-space-half);
    padding: var(--block-space-half);
    border: var(--border);
    border-radius: var(--radius);
    background: var(--color-ink-lightest);
  }

  /* Quota alerts */
  .quota-alert {
    display: flex;
    align-items: center;
    gap: var(--block-space-half);
    margin-block-end: var(--block-space-half);
    padding: 0.75rem var(--block-space);
    border-radius: var(--radius);
  }

  .quota-alert--warning {
    background-color: oklch(var(--lch-yellow-lightest));
    border: 1px solid oklch(var(--lch-yellow-lighter));
    color: oklch(var(--lch-yellow-darkest));
  }

  .quota-alert--info {
    background-color: oklch(var(--lch-blue-lightest));
    border: 1px solid oklch(var(--lch-blue-lighter));
    color: oklch(var(--lch-blue-darkest));
  }

  .quota-alert__content {
    flex-grow: 1;
  }

  /* .message (individual message block) */
  .message {
    padding: 0 8px;
    margin-block-end: var(--block-space-half);
  }

  @media (min-width: 768px) {
    .message {
      padding: 0 20px;
      margin-block-end: 0.75rem;
    }
  }

  .message__body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }

  .message--user .message__body {
    justify-content: flex-end;
  }

  .message--ai .message__body,
  .message--member .message__body {
    justify-content: flex-start;
  }

  /* Message bubble */
  .message__bubble {
    padding: 6px 10px 8px;
    position: relative;
    display: inline-block;
    max-width: 85%;
    word-wrap: break-word;
    border-radius: 12px;
  }

  @media (min-width: 768px) {
    .message__bubble {
      max-width: 65%;
    }
  }

  .message--user .message__bubble {
    background-color: oklch(var(--lch-blue-lightest));
    color: var(--color-ink);
    box-shadow: var(--shadow);
    border-radius: 12px 12px 4px 12px;
  }

  .message--ai .message__bubble {
    background-color: var(--color-canvas);
    color: var(--color-ink);
    box-shadow: var(--shadow);
    border-radius: 12px 12px 12px 4px;
  }

  .message--member .message__bubble {
    background-color: oklch(var(--lch-green-lightest));
    color: var(--color-ink);
    box-shadow: var(--shadow);
    border-radius: 12px 12px 12px 4px;
  }

  /* Highlighted message */
  .message--highlighted .message__bubble {
    animation: message-highlight 2s ease-out;
  }

  @keyframes message-highlight {
    0%, 30% { background-color: oklch(var(--lch-yellow-lighter)); }
    100% { background-color: inherit; }
  }

  /* Message content */
  .message__content {
    line-height: 1.4;
    font-size: var(--text-normal);
    display: inline;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .message__content p {
    margin-block-end: 0;
    display: inline;
    word-break: break-word;
  }

  /* Message author name (for hubs) */
  .message__author {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-ink-dark);
    margin-block-end: 0.25rem;
  }

  /* Message time */
  .message__meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    margin-inline-start: 4px;
    vertical-align: bottom;
  }

  .message__time {
    display: inline;
    color: var(--color-ink-medium);
    font-size: var(--text-xx-small);
    white-space: nowrap;
    line-height: 1;
  }

  /* Message files */
  .message__files {
    margin-block-start: var(--block-space-half);
    overflow: hidden;
  }

  .message__files .image-item,
  .message__files .audio-item,
  .message__files .document-item {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-block-end: 0.25rem !important;
  }

  .message__files .image-item:last-child,
  .message__files .audio-item:last-child,
  .message__files .document-item:last-child {
    margin-block-end: 0 !important;
  }

  .message__files .image-item + .image-item,
  .message__files .audio-item + .audio-item,
  .message__files .document-item + .document-item {
    border-top: 1px solid oklch(var(--lch-black) / 6%) !important;
    padding-block-start: 0.25rem;
  }

  .message__files .document-item,
  .message__files .document-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .message__files .document-name a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .message__files audio {
    height: 36px;
  }

  .message__files .image-thumbnail img {
    border-radius: 6px !important;
  }

  /* Message delete button (staff only) */
  .message__delete-button {
    font-size: var(--text-xx-small);
    line-height: 1;
    margin-block-start: 2px;
    background: none;
    border: none;
    color: var(--color-ink-dark);
    padding: 0.25rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .message:hover .message__delete-button {
    opacity: 1;
  }

  /* Message reactions */
  .message__reactions {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 32px;
    margin: 0 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  .message:hover .message__reactions {
    opacity: 1;
    pointer-events: auto;
  }

  .message__reactions-toggle {
    font-size: var(--text-normal);
    text-decoration: none;
    background: none;
    border: none;
    color: var(--color-ink-dark);
    padding: 0.25rem;
    cursor: pointer;
  }

  .message__reactions-popover {
    display: flex;
    gap: 0.25rem;
    font-size: var(--text-medium);
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 100%;
    transform: translateY(-50%);
    background: var(--color-canvas);
    border-radius: 20px;
    padding: 4px 8px;
    margin-inline-start: 8px;
    box-shadow: var(--shadow);
    z-index: var(--z-dropdown);
  }

  .message__reactions-button {
    line-height: 1;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
  }

  /* Message debug icon (staff only) */
  .message__debug-icon {
    align-self: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s;
  }

  .message:hover .message__debug-icon {
    opacity: 0.4;
  }

  .message__debug-icon:hover {
    opacity: 0.8;
  }

  /* Read receipts */
  .message__receipt {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 3px;
    vertical-align: bottom;
  }

  .message__receipt svg {
    width: 12px;
    height: 9px;
    display: block;
  }

  .read-receipt-pending {
    color: var(--color-ink-light);
    opacity: 0.7;
  }

  .read-receipt-sent,
  .read-receipt-delivered {
    color: var(--color-ink-light);
  }

  .read-receipt-read {
    color: var(--color-link);
  }

  .message--user .read-receipt-pending,
  .message--user .read-receipt-sent,
  .message--user .read-receipt-delivered {
    color: var(--color-ink-medium);
  }

  .message--user .read-receipt-read {
    color: var(--color-link);
  }

  .message__receipt span {
    transition: color 0.3s ease;
  }

  /* Message author badges */
  .message-author-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xx-small);
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-small);
  }

  .message-author-badge.me,
  .message-author-badge.member,
  .message-author-badge.assistant {
    color: var(--color-ink-medium);
    background-color: oklch(var(--lch-ink-medium) / 8%);
  }

  .parent-message__header .message-author-badge {
    font-size: 10px;
    padding: 1px 4px;
  }

  /* Day separators */
  .day-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 8px;
    font-size: var(--text-xx-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-ink-medium);
  }

  @media (min-width: 768px) {
    .day-separator {
      margin: 16px 20px;
    }
  }

  .day-separator::before,
  .day-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-ink-lighter);
    opacity: 0.5;
  }

  /* Typing indicator */
  #typing-indicator {
    padding: 0 8px;
  }

  @media (min-width: 768px) {
    #typing-indicator {
      padding: 0 20px;
    }
  }

  .typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background-color: var(--color-canvas);
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin: 4px 0;
  }

  .typing-dot {
    width: 7px;
    height: 7px;
    background-color: var(--color-ink-medium);
    border-radius: 50%;
    animation: typing-bounce 1.4s ease-in-out infinite;
  }

  .typing-dot:nth-child(1) { animation-delay: 0s; }
  .typing-dot:nth-child(2) { animation-delay: 0.2s; }
  .typing-dot:nth-child(3) { animation-delay: 0.4s; }
}

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}