/* =============================================================================
   COMPONENT: CHAT — "De Brouwmeester"
   Floating chat widget met glassmorphism paneel en brouwketel-trigger.

   Conventies: BEM, rem units, hover alleen binnen @media (hover: hover).
   Alle tokens (kleur/font/spacing) komen uit :root in main.css.
   ============================================================================= */

.chat {
  position: fixed;
  inset: auto var(--space-5, 2rem) var(--space-5, 2rem) auto;
  z-index: 9000;
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  color: var(--color-text, #f4efe3);
}

/* ---------- Sharing the corner with Sidekick -------------------------------
   Sidekick is editor tooling and claims the exact same corner: a 5.2rem FAB at
   right/bottom 2.4rem, with its analysis strip directly to the left of it at
   8.8rem. When that FAB is on the page the chat steps one slot to the left and
   pushes the analysis strip along. Rail from the right edge, 1.2rem of air
   between each pair:

     Sidekick FAB      2.4rem →  7.6rem
     chat bubble       8.8rem → 14.6rem
     analysis strip   15.8rem → …

   Values are hard rem literals rather than spacing tokens on purpose: Sidekick
   positions itself in bare px (24 and 52) and ignores the host site's scale, so
   binding these to --space-* would tilt the row on any site that sizes its
   tokens differently.

   The trigger drops its label here, exactly as it does on mobile. A pill has no
   fixed width, and without one there is no way to tell the analysis strip where
   to stand — the icon-only bubble makes the row deterministic. Visitors never
   see this: Sidekick only renders for signed-in editors.

   `:has()` is the only workable hook — the FAB appears after the fetch to
   /sb-sidekick/init, so there is nothing to branch on server-side. The selector
   is live, so the chat shifts the moment the button lands in the DOM.
   -------------------------------------------------------------------------- */

body:has(.sidekick-frontend__trigger) {
  --chat-rail-chat:     8.8rem;
  --chat-rail-analysis: calc(var(--chat-rail-chat) + 5.8rem + 1.2rem);
}

body:has(.sidekick-frontend__trigger) .chat {
  right: var(--chat-rail-chat);
  /* Aligning the bottoms would leave the two circles visibly off: the chat
     bubble is 5.8rem, the FAB 5.2rem. Half the difference puts them on one
     centre line. */
  bottom: calc(2.4rem - 0.3rem);
}

body:has(.sidekick-frontend__trigger) .chat__trigger {
  width: 5.8rem;
  height: 5.8rem;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-full, 999rem);
}

body:has(.sidekick-frontend__trigger) .chat__trigger-label {
  display: none;
}

/* Sidekick's own analysis strip sits at 8.8rem by default — precisely where the
   chat now lands. One slot further left; it already holds the same centre line. */
body:has(.sidekick-frontend__trigger) .sidekick-analysis {
  right: var(--chat-rail-analysis);
}

/* Visually-hidden utility scoped to the chat component — used for labels that
   must exist for screen readers but shouldn't take up layout space. */
.chat__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Trigger (collapsed state) ------------------------------------- */

.chat__trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3, 1.2rem);
  padding: var(--space-3, 1.2rem) var(--space-5, 2rem) var(--space-3, 1.2rem) var(--space-4, 1.6rem);
  border: 1px solid var(--color-amber-border, #e8a832);
  border-radius: var(--radius-full, 999rem);
  background: linear-gradient(135deg, rgba(17, 19, 21, 0.95), rgba(24, 26, 29, 0.95));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-text, #f4efe3);
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,0.25)), 0 0 0 1px rgba(232, 168, 50, 0.05), 0 0 32px rgba(232, 168, 50, 0.15);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.chat__trigger:focus-visible {
  outline: 2px solid var(--color-amber, #e8a832);
  outline-offset: 4px;
}

.chat__trigger-kettle {
  position: relative;
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.chat__trigger-kettle svg {
  width: 100%;
  height: 100%;
  color: var(--color-amber, #e8a832);
  filter: drop-shadow(0 0 6px rgba(232, 168, 50, 0.5));
}

/* Steam above the kettle — three rising wisps */
.chat__trigger-steam {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  pointer-events: none;
}

.chat__trigger-steam span {
  width: 0.4rem;
  height: 0.8rem;
  background: radial-gradient(circle, rgba(240, 190, 90, 0.7), transparent 70%);
  border-radius: var(--radius-full, 999rem);
  opacity: 0;
}

.chat__trigger-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-align: left;
  line-height: 1.2;
}

.chat__trigger-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.7rem;
  font-style: italic;
  color: var(--color-amber-light, #f0c674);
}

.chat__trigger-sub {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider, 0.06em);
  color: var(--color-text-subtle, #8b877d);
}

@media (hover: hover) and (pointer: fine) {
  .chat__trigger:hover {
    transform: translateY(-2px);
    border-color: var(--color-amber, #e8a832);
    box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,0.35)), 0 0 40px rgba(232, 168, 50, 0.3);
  }
}

/* Hide trigger when the panel is open */
.chat--open .chat__trigger {
  opacity: 0;
  transform: scale(0.85) translateY(20px);
  pointer-events: none;
}

/* ---------- Panel (expanded state) ---------------------------------------- */

.chat__panel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 42rem;
  max-width: calc(100vw - var(--space-8, 3.2rem));
  height: 70rem;
  /* dvh = dynamic viewport height — shrinks when mobile URL bar is visible so
     the panel never extends behind the browser chrome. */
  max-height: calc(100dvh - var(--space-8, 3.2rem));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-amber-border, #e8a832);
  border-radius: var(--radius-xl, 1.8rem);
  background: linear-gradient(180deg, rgba(17, 19, 21, 0.88), rgba(11, 13, 15, 0.94));
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,0.35)), 0 0 60px rgba(232, 168, 50, 0.18);
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.85) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
              opacity 0.3s ease;
}

.chat--open .chat__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Header */
.chat__header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 1.2rem);
  padding: var(--space-4, 1.6rem) var(--space-5, 2rem);
  border-bottom: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  background: linear-gradient(180deg, rgba(232, 168, 50, 0.05), transparent);
}

.chat__header-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  color: var(--color-amber, #e8a832);
  flex-shrink: 0;
}

.chat__header-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 4px rgba(232, 168, 50, 0.4));
}

.chat__header-title {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.chat__header-name {
  font-family: var(--font-display, Georgia, serif);
  font-size: 2rem;
  font-style: italic;
  color: var(--color-amber-light, #f0c674);
  line-height: 1;
}

.chat__header-status {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider, 0.06em);
  color: var(--color-text-subtle, #8b877d);
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.8rem);
}

.chat__header-status::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-full, 999rem);
  background: #2ec4bb;
  box-shadow: 0 0 6px rgba(46, 196, 187, 0.8);
}

.chat__close {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-border, rgba(255,255,255,0.14));
  border-radius: var(--radius-full, 999rem);
  background: transparent;
  color: var(--color-text-muted, #b7b2a6);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chat__close:focus-visible {
  outline: 2px solid var(--color-amber, #e8a832);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .chat__close:hover {
    background: var(--color-surface-raised, #23272d);
    color: var(--color-text, #f4efe3);
    border-color: var(--color-amber-border, #e8a832);
  }
}

/* Messages scroll area */
.chat__messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: var(--space-5, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1.6rem);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border, rgba(255,255,255,0.14)) transparent;
}

.chat__messages::-webkit-scrollbar {
  width: 0.6rem;
}

.chat__messages::-webkit-scrollbar-thumb {
  background: var(--color-border, rgba(255,255,255,0.14));
  border-radius: var(--radius-full, 999rem);
}

.chat__message {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.8rem);
  max-width: 85%;
  animation: chat-message-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.chat__message--user {
  align-self: flex-end;
  align-items: flex-end;
}

.chat__message--assistant {
  align-self: flex-start;
}

.chat__message--system {
  align-self: center;
  max-width: 100%;
  text-align: center;
}

.chat__bubble {
  padding: var(--space-3, 1.2rem) var(--space-4, 1.6rem);
  border-radius: var(--radius-lg, 1.4rem);
  font-size: var(--font-size-body-md, 1.5rem);
  line-height: var(--line-height-normal, 1.5);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.chat__message--user .chat__bubble {
  background: linear-gradient(135deg, rgba(232, 168, 50, 0.15), rgba(240, 190, 90, 0.08));
  border: 1px solid var(--color-amber-border, #e8a832);
  color: var(--color-text, #f4efe3);
  border-bottom-right-radius: var(--radius-sm, 0.6rem);
}

.chat__message--assistant .chat__bubble {
  background: var(--color-surface-raised, #23272d);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  color: var(--color-text, #f4efe3);
  border-bottom-left-radius: var(--radius-sm, 0.6rem);
}

.chat__message--system .chat__bubble {
  background: transparent;
  color: var(--color-text-subtle, #8b877d);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider, 0.06em);
}

/* Markdown styling inside bubbles */
.chat__bubble p {
  margin: 0;
}

.chat__bubble p + p {
  margin-top: var(--space-2, 0.8rem);
}

.chat__bubble strong {
  color: var(--color-amber-light, #f0c674);
  font-weight: var(--font-weight-semibold, 650);
}

.chat__bubble em {
  font-style: italic;
}

.chat__bubble code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.88em;
  background: var(--color-bg, #16181c);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm, 0.6rem);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  color: var(--color-amber-light, #f0c674);
}

.chat__bubble pre {
  margin: var(--space-2, 0.8rem) 0 0;
  padding: var(--space-3, 1.2rem);
  background: var(--color-bg, #16181c);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 1rem);
  overflow-x: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.3rem;
  line-height: 1.5;
}

.chat__bubble pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text, #f4efe3);
}

.chat__bubble ul,
.chat__bubble ol {
  margin: var(--space-2, 0.8rem) 0 0;
  padding-left: var(--space-5, 2rem);
}

.chat__bubble li + li {
  margin-top: 0.2rem;
}

.chat__bubble a {
  color: var(--color-amber-light, #f0c674);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Typewriter caret on streaming assistant message */
.chat__caret {
  display: inline-block;
  width: 0.2em;
  height: 1em;
  background: var(--color-amber, #e8a832);
  margin-left: 0.15em;
  vertical-align: text-bottom;
  animation: chat-caret-blink 1s steps(2) infinite;
}

/* Thinking indicator — three rising amber dots */
.chat__thinking {
  display: flex;
  gap: 0.4rem;
  padding: var(--space-3, 1.2rem) var(--space-4, 1.6rem);
  background: var(--color-surface-raised, #23272d);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: var(--radius-lg, 1.4rem);
  border-bottom-left-radius: var(--radius-sm, 0.6rem);
  align-self: flex-start;
  animation: chat-message-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.chat__thinking span {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--radius-full, 999rem);
  background: var(--color-amber, #e8a832);
  opacity: 0.3;
}

/* Starter chips — live inside the messages scroll area so they scroll out of
   view naturally as the conversation grows. No extra padding since the parent
   already provides it. */
.chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.8rem);
  margin-bottom: var(--space-2, 0.8rem);
}

.chat__chip {
  padding: var(--space-2, 0.8rem) var(--space-4, 1.6rem);
  border: 1px solid var(--color-border, rgba(255,255,255,0.14));
  border-radius: var(--radius-full, 999rem);
  background: transparent;
  color: var(--color-text-muted, #b7b2a6);
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  text-align: left;
}

.chat__chip:focus-visible {
  outline: 2px solid var(--color-amber, #e8a832);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .chat__chip:hover {
    background: var(--color-amber-dim, #b6801d);
    border-color: var(--color-amber-border, #e8a832);
    color: var(--color-text, #f4efe3);
    transform: translateY(-1px);
  }
}

/* Intro block (appears above starter chips on empty state) */
.chat__intro {
  margin-bottom: var(--space-3, 1.2rem);
  color: var(--color-text-muted, #b7b2a6);
  font-size: var(--font-size-body-md, 1.5rem);
  line-height: var(--line-height-normal, 1.5);
}

.chat__intro strong {
  color: var(--color-amber-light, #f0c674);
  font-weight: var(--font-weight-semibold, 650);
}

.chat__intro-note {
  margin-top: var(--space-2, 0.8rem);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1rem;
  color: var(--color-text-subtle, #8b877d);
  letter-spacing: var(--letter-spacing-wide, 0.02em);
}

/* Input form */
.chat__form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2, 0.8rem);
  padding: var(--space-4, 1.6rem) var(--space-5, 2rem);
  border-top: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  background: rgba(11, 13, 15, 0.4);
}

.chat__input {
  flex-grow: 1;
  min-height: 4rem;
  max-height: 14rem;
  padding: var(--space-3, 1.2rem) var(--space-4, 1.6rem);
  border: 1px solid var(--color-border, rgba(255,255,255,0.14));
  border-radius: var(--radius-md, 1rem);
  background: var(--color-surface, #1b1e22);
  color: var(--color-text, #f4efe3);
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: var(--font-size-body-md, 1.5rem);
  line-height: var(--line-height-normal, 1.5);
  resize: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.chat__input::placeholder {
  color: var(--color-text-subtle, #8b877d);
}

.chat__input:focus {
  outline: none;
  border-color: var(--color-amber, #e8a832);
  background: var(--color-surface-raised, #23272d);
}

.chat__send {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border: 1px solid var(--color-amber-border, #e8a832);
  border-radius: var(--radius-md, 1rem);
  background: var(--color-amber-dim, #b6801d);
  color: var(--color-amber, #e8a832);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.chat__send svg {
  width: 2rem;
  height: 2rem;
}

.chat__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat__send:focus-visible {
  outline: 2px solid var(--color-amber, #e8a832);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .chat__send:hover:not(:disabled) {
    background: var(--color-amber, #e8a832);
    color: var(--color-on-amber, #16181c);
    transform: translateY(-1px);
  }
}

.chat__footer-hint {
  padding: 0 var(--space-5, 2rem) var(--space-3, 1.2rem);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1rem;
  color: var(--color-text-subtle, #8b877d);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide, 0.02em);
}

/* ---------- Lead capture card (in-message) -------------------------------- */

.chat__lead {
  margin-top: var(--space-2, 0.8rem);
  padding: var(--space-4, 1.6rem);
  border: 1px solid var(--color-amber-border, #e8a832);
  border-radius: var(--radius-lg, 1.4rem);
  background: linear-gradient(180deg, rgba(232, 168, 50, 0.08), rgba(46, 196, 187, 0.04));
  animation: chat-message-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.chat__lead-intro {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--color-amber-light, #f0c674);
  line-height: var(--line-height-snug, 1.3);
  margin: 0 0 var(--space-3, 1.2rem);
}

.chat__lead-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.4rem);
  margin-bottom: var(--space-3, 1.2rem);
}

.chat__lead-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider, 0.06em);
  color: var(--color-text-subtle, #8b877d);
}

.chat__lead-input,
.chat__lead-textarea {
  padding: var(--space-2, 0.8rem) var(--space-3, 1.2rem);
  border: 1px solid var(--color-border, rgba(255,255,255,0.14));
  border-radius: var(--radius-sm, 0.6rem);
  background: var(--color-bg, #16181c);
  color: var(--color-text, #f4efe3);
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: var(--font-size-body-md, 1.5rem);
  transition: border-color 0.2s ease;
}

.chat__lead-textarea {
  min-height: 6rem;
  resize: vertical;
}

.chat__lead-input:focus,
.chat__lead-textarea:focus {
  outline: none;
  border-color: var(--color-amber, #e8a832);
}

.chat__lead-submit {
  width: 100%;
  padding: var(--space-3, 1.2rem) var(--space-4, 1.6rem);
  border: none;
  border-radius: var(--radius-md, 1rem);
  background: var(--color-amber, #e8a832);
  color: var(--color-on-amber, #16181c);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.3rem;
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide, 0.02em);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.chat__lead-submit:focus-visible {
  outline: 2px solid var(--color-amber-light, #f0c674);
  outline-offset: 2px;
}

.chat__lead-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .chat__lead-submit:hover:not(:disabled) {
    background: var(--color-amber-light, #f0c674);
    transform: translateY(-1px);
  }
}

.chat__lead-feedback {
  margin-top: var(--space-2, 0.8rem);
  font-size: var(--font-size-body-sm, 1.3rem);
  color: var(--color-teal, #3fae86);
}

.chat__lead-feedback--error {
  color: #e87c32;
}

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 540px) {
  /* Stretch the container edge-to-edge so the panel can use full width, but
     flex-align so the trigger pill stays pinned to the right. */
  .chat {
    inset: auto var(--space-3, 1.2rem) var(--space-3, 1.2rem) var(--space-3, 1.2rem);
    display: flex;
    justify-content: flex-end;
  }

  .chat__panel {
    width: 100%;
    max-width: none;
    /* dvh lets the panel shrink when the mobile URL/tool bar is visible so the
       top of the chat doesn't get hidden behind it. */
    height: calc(100dvh - var(--space-6, 2.4rem));
    max-height: calc(100dvh - var(--space-6, 2.4rem));
  }

  .chat__trigger {
    padding: var(--space-3, 1.2rem);
    border-radius: var(--radius-full, 999rem);
  }

  .chat__trigger-label {
    display: none;
  }

  /* Sidekick's FAB is there on mobile too, but the container must not move: the
     panel leans on its full width. So `.chat` keeps spanning edge to edge and
     only the bubble slides left, by the rail position minus the gutter the
     container already takes. Sidekick skips the analysis strip below 768px, so
     there is nothing to shift there. */
  body:has(.sidekick-frontend__trigger) .chat {
    inset: auto var(--space-3, 1.2rem) calc(2.4rem - 0.3rem) var(--space-3, 1.2rem);
  }

  body:has(.sidekick-frontend__trigger) .chat__trigger {
    margin-right: calc(var(--chat-rail-chat) - var(--space-3, 1.2rem));
  }
}

/* ---------- Animations (reduced-motion safe) ------------------------------ */

@keyframes chat-message-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes chat-caret-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes chat-steam {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.8);
  }
  40% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateY(-1.2rem) scale(1.4);
  }
}

@keyframes chat-thinking-bounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-0.4rem);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .chat__trigger-steam span {
    animation: chat-steam 2.4s ease-in-out infinite;
  }

  .chat__trigger-steam span:nth-child(2) {
    animation-delay: 0.8s;
  }

  .chat__trigger-steam span:nth-child(3) {
    animation-delay: 1.6s;
  }

  .chat__thinking span {
    animation: chat-thinking-bounce 1.2s ease-in-out infinite;
  }

  .chat__thinking span:nth-child(2) {
    animation-delay: 0.2s;
  }

  .chat__thinking span:nth-child(3) {
    animation-delay: 0.4s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat__trigger,
  .chat__panel,
  .chat__message,
  .chat__lead,
  .chat__send,
  .chat__chip,
  .chat__close {
    transition: none;
    animation: none;
  }

  .chat__caret {
    animation: none;
    opacity: 1;
  }
}