/*
 * Shared chat UI styles.
 *
 * Used by:
 *   - /chat.html           (per-form conversational assistant)
 *   - /services.html       (concierge / front-door)
 *
 * Contains ONLY the pieces that genuinely overlap between the two pages:
 * the grid override that makes the chat feed fill the viewport, the
 * flexbox skeleton for the messages column, and the typing indicator
 * animation. Page chrome (top bar, yellow header, alpha banner, footer)
 * and page-specific bubble markup stay in the individual HTML files.
 */

/* Override the default body grid so the chat feed can grow to fill
   available vertical space between the alpha banner and the footer. */
body {
  grid-template-rows: auto auto auto 1fr auto;
}

main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.chat-input-area {
  flex-shrink: 0;
}

/* Typing indicator — three dots that bounce in sequence. */
.typing-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #595959;
  animation: typingBounce 1.4s infinite ease-in-out both;
}
.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 typingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}