/* Dev-only chat page layout. Every colour, radius and type size comes from the
 * tokens in design-system/tokens.css and the components in app.css; only the
 * conversation layout is new here, and it adds no brand value of its own. */

.chat {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6);
}

.chat-head {
  display: grid;
  gap: var(--space-2);
}

.chat-dev-badge {
  justify-self: start;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--accent-50);
}

.chat-log {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 18rem;
  max-height: 60vh;
  overflow-y: auto;
}

.chat-bubble {
  max-width: 46rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  white-space: pre-wrap;
}

.chat-bubble--customer {
  justify-self: end;
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}

.chat-meta {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-micro);
  color: var(--muted);
}

.chat-bubble--customer .chat-meta {
  color: var(--accent-on);
  opacity: 0.75;
}

.chat-composer {
  display: grid;
  gap: var(--space-3);
  justify-items: stretch;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}