/* The message box: starts one line tall, wraps, and grows with what's typed
   (chat_form_controller.js stops the growing at 40% of the screen, then it
   scrolls). The writer can drag its corner taller, up to 70% of the screen, so
   the Send button and a little of the conversation always stay in view. */
.chat-composer {
  min-height: 2.5rem;
  max-height: 70dvh;
  resize: vertical;
  overflow-y: auto;
  line-height: 1.5;
  font-size: 1rem;
}

/* A sent message reads the way it was written: line breaks stay put, and a
   long unbroken run (a link, a held-down key) wraps inside the bubble instead
   of running out of it. */
.chat-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* "Dana is typing" above the message box (typing_controller.js), with three
   dots that rise in turn. Still dots for anyone who asks for less motion. */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.25rem 0.375rem;
  font-size: 0.75rem;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}

.typing-indicator[hidden] {
  display: none;
}

.typing-dots {
  display: inline-flex;
  gap: 0.1875rem;
}

.typing-dots span {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 9999px;
  background-color: currentColor;
  animation: typing-dot 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-0.1875rem); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation: none; }
}

/* On a page with a message box the feedback button is a little smaller and
   floats up above the box when it would cover Send (feedback_controller.js
   sets its bottom). */
.feedback-widget {
  transition: bottom 150ms ease;
}

body:has(#message_form) .feedback-widget > .btn-circle {
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .feedback-widget { transition: none; }
}