/* /chat — the chat window. Tokens come from site.css. */

/* --- chat ---------------------------------------------------------------- */

/* Wider than the page's text column: break out of .site-main and center on
 * the viewport. The box starts at half the viewport's height and then grows
 * the page itself — no inner scrolling, so there's only the page's scroll.
 * The composer sticks to the bottom of the viewport while the visitor scrolls
 * back up; chat_controller.js keeps --chat-gap clear below the box as it grows. */
.chat {
  --chat-width: 70vw;
  --chat-gap: var(--space-4);
  width: var(--chat-width);
  margin-inline: calc(50% - var(--chat-width) / 2);
  display: flex;
  flex-direction: column;
  min-height: 50vh;
  min-height: 50dvh;
  scroll-margin-bottom: var(--chat-gap);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.chat__log {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chat__bubble {
  max-width: 80%;
  padding: var(--space-2) var(--space-3);
  border-radius: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat__bubble--bot { align-self: flex-start; background: var(--bubble-bot); border-bottom-left-radius: 4px; }
.chat__bubble--user { align-self: flex-end; background: var(--bubble-user); color: var(--bubble-user-text); border-bottom-right-radius: 4px; }
.chat__bubble--typing::after { content: "…"; animation: chat-typing 1s steps(3) infinite; }
@keyframes chat-typing { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } }

/* An insulted bot (temper_controller.js, Chat::Temper): its reply's look by
   stage (angry: solid red; sulking: dashed orange, so the two differ by more
   than colour), and what happens to the visitor's message (a shake, or the
   shredder: crumpled, then blacked out). Reduced motion: no animation, same
   result. */
.chat__bubble--angry,
.chat__bubble--left { border: 1px solid var(--danger); }
.chat__bubble--sulking { border: 1px dashed var(--sulk); color: var(--sulk); font-style: italic; }
.chat__bubble--winced { animation: chat-wince 0.4s ease-in-out; }
/* The bot left (chat/_left): a hand-off style line, then a quiet pointer to help. */
.chat__left { align-self: stretch; display: grid; gap: var(--space-1); justify-items: center; margin: var(--space-2) 0;
              font-size: 0.8rem; color: var(--muted); text-align: center; list-style: none; }
.chat__left-help { font-size: 0.75rem; }
.chat__bubble--shredded { animation: chat-shred 0.7s ease-in forwards; }
@keyframes chat-wince {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-1deg); }
  75% { transform: translateX(4px) rotate(1deg); }
}
@keyframes chat-shred {
  0% { transform: none; }
  40% { transform: scale(0.92, 0.8) rotate(-3deg); }
  70% { transform: scale(0.96, 0.9) rotate(2deg); filter: blur(1px); }
  100% { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chat__bubble--winced,
  .chat__bubble--shredded { animation: none; }
}

/* Who's talking (Anne on the home page's intro, 🤖 for the bot), and the
   hand-off between them. */
.chat__speaker { align-self: flex-start; margin: var(--space-1) 0 calc(-1 * var(--space-1)); font-size: 0.8rem; color: var(--muted); }
.chat__bubble--anne {
  align-self: flex-start;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-bottom-left-radius: 4px;
}
.chat__handoff { align-self: stretch; display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; font-size: 0.8rem; color: var(--muted); }
.chat__handoff::before,
.chat__handoff::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.chat__log [hidden] { display: none !important; }
/* First visit of a session: hidden until chat_controller.js types it out. */
.intro-pending .chat [data-chat-intro] { display: none; }

/* Admin "Try it": why the reply was chosen. */
.chat__bubble--debug { align-self: flex-start; background: none; padding: 0 var(--space-1); color: var(--muted); font: 0.8rem ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Cards and mini rooms a reply can attach (app/views/chat/cards/, app/mini_rooms/). */
.chat__card,
.chat__room,
.chat__image,
.chat__link { list-style: none; max-width: 85%; align-self: flex-start; }
.chat__img { display: block; max-width: 100%; max-height: 22rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.chat__linkbutton {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}
.chat__room { width: 85%; }
.mini-room { display: block; width: 100%; height: 160px; border: 0; }
.crisis-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-3);
}
.crisis-card > * { margin: 0; }
.crisis-card > * + * { margin-top: var(--space-2); }
.crisis-card__primary {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-contrast) !important;
  font-weight: 600;
  text-decoration: none;
}
.crisis-card__list { padding-left: 1.2em; font-size: 0.95rem; }

.chat__composer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  border-top: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0 0 var(--radius) var(--radius);
}
.chat__composer input { flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .chat { --chat-width: 90vw; }
  .chat__bubble { max-width: 90%; }
  .chat__card,
  .chat__room { max-width: 100%; width: 100%; }
}

/* An image inside a card (app/assets/images/cards, see app/views/chat/cards/README.md). */
.card__image { display: block; max-width: 100%; height: auto; max-height: 16rem; border-radius: var(--radius); margin-block: var(--space-1); }