/* ─────────────────────────────────────────────────────────────
   Ask Professor Ai — site concierge
   Navy/gold brand furniture, Inter throughout.
   ───────────────────────────────────────────────────────────── */

.dlm-chat {
  --chat-navy: #0e1b39;
  --chat-navy-2: #16244a;
  --chat-gold: #a3721f;
  --chat-gold-hi: #d9a13f;
  --chat-paper: #f7f7f6;
  --chat-ink: #0e1b39;
  --chat-muted: #616b7d;
  --chat-line: rgba(14, 27, 57, 0.12);
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1200;
  font-family: var(--font-body, Inter, system-ui, sans-serif);
}

/* ── Launcher ───────────────────────────────────────────────── */
.dlm-chat__launch {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--chat-navy);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(14, 27, 57, 0.34), 0 3px 8px rgba(14, 27, 57, 0.22);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms ease;
}
.dlm-chat__launch:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(14, 27, 57, 0.4), 0 4px 10px rgba(14, 27, 57, 0.26);
}
.dlm-chat__launch:focus-visible {
  outline: 3px solid var(--chat-gold-hi);
  outline-offset: 3px;
}
.dlm-chat__launch:active { transform: translateY(0); }

.dlm-chat__badge {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  object-position: 50% 22%;
  background: var(--chat-paper);
  border: 2px solid var(--chat-gold);
  flex-shrink: 0;
}
.dlm-chat__launch-text {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* A quiet pulse, once, so the launcher is noticed without nagging. */
.dlm-chat__dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #16a97e;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(22, 169, 126, 0.6);
  animation: dlm-chat-pulse 2.6s ease-out 3;
}
@keyframes dlm-chat-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 169, 126, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(22, 169, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 169, 126, 0); }
}

/* ── Panel ──────────────────────────────────────────────────── */
.dlm-chat__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.875rem);
  /* Enlarged 2026-08-29: 23rem -> 28rem wide, 34rem -> 41rem tall (+22%/+21%).
     The calc() clamps are deliberately unchanged — on a phone min() was
     already picking the viewport side, so this is a desktop change only and
     cannot push the panel off a small screen. */
  width: min(28rem, calc(100vw - 2rem));
  max-height: min(41rem, calc(100vh - 7rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--chat-line);
  box-shadow: 0 28px 70px rgba(14, 27, 57, 0.28), 0 6px 16px rgba(14, 27, 57, 0.14);
  transform-origin: bottom right;
  animation: dlm-chat-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dlm-chat-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dlm-chat__panel[hidden] { display: none; }

/* The figure is a full-body cutout, so the header crops to the upper third
   and lets him stand against the navy rather than floating in a circle. */
.dlm-chat__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.875rem;
  padding: 1rem 3rem 0.875rem 1.125rem;
  background: linear-gradient(160deg, var(--chat-navy) 0%, var(--chat-navy-2) 100%);
  color: #fff;
  min-height: 92px;
}
.dlm-chat__figure {
  /* Grown in step with the panel, same 5:6.2 ratio as the source image so
     nothing stretches. The markup still carries width/height attributes at
     the old size to reserve layout space before CSS lands; these override. */
  width: 90px;
  height: 112px;
  object-fit: cover;
  object-position: 50% 0%;
  margin-bottom: -0.875rem;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.dlm-chat__title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 0.15rem;
  letter-spacing: -0.01em;
}
.dlm-chat__sub {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}
.dlm-chat__close {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}
.dlm-chat__close:hover { background: rgba(255, 255, 255, 0.26); }
.dlm-chat__close:focus-visible { outline: 2px solid var(--chat-gold-hi); outline-offset: 2px; }

/* ── Messages ───────────────────────────────────────────────── */
.dlm-chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background: var(--chat-paper);
}
.dlm-chat__msg {
  max-width: 88%;
  padding: 0.6875rem 0.9375rem;
  border-radius: 16px;
  font-size: 1.0625rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.dlm-chat__msg--bot {
  align-self: flex-start;
  background: #fff;
  color: var(--chat-ink);
  border: 1px solid var(--chat-line);
  border-bottom-left-radius: 5px;
}
.dlm-chat__msg--me {
  align-self: flex-end;
  background: var(--chat-navy);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.dlm-chat__msg--err {
  align-self: flex-start;
  background: #fdf2f2;
  color: #8a2020;
  border: 1px solid #f0d5d5;
}

/* Three dots while he is thinking. */
.dlm-chat__typing { display: inline-flex; gap: 4px; align-items: center; padding: 0.25rem 0; }
.dlm-chat__typing span {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--chat-muted);
  animation: dlm-chat-bounce 1.25s infinite ease-in-out;
}
.dlm-chat__typing span:nth-child(2) { animation-delay: 0.16s; }
.dlm-chat__typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes dlm-chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* ── Suggestions ────────────────────────────────────────────── */
.dlm-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  padding: 0 1.125rem 0.75rem;
  background: var(--chat-paper);
}
.dlm-chat__chip {
  border: 1px solid var(--chat-line);
  background: #fff;
  color: var(--chat-ink);
  border-radius: 999px;
  padding: 0.4375rem 0.75rem;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}
.dlm-chat__chip:hover { border-color: var(--chat-gold); transform: translateY(-1px); }
.dlm-chat__chip:focus-visible { outline: 2px solid var(--chat-gold); outline-offset: 2px; }

/* ── Composer ───────────────────────────────────────────────── */
.dlm-chat__form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--chat-line);
  background: #fff;
}
.dlm-chat__input {
  flex: 1;
  border: 1px solid var(--chat-line);
  border-radius: 999px;
  padding: 0.625rem 0.9375rem;
  font-size: 1.0625rem;
  font-family: inherit;
  color: var(--chat-ink);
  background: var(--chat-paper);
  transition: border-color 160ms ease, background 160ms ease;
}
.dlm-chat__input::placeholder { color: var(--chat-muted); opacity: 1; }
.dlm-chat__input:focus {
  outline: none;
  border-color: var(--chat-gold);
  background: #fff;
}
.dlm-chat__send {
  border: 0;
  border-radius: 999px;
  padding: 0.625rem 1.125rem;
  background: var(--chat-navy);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.dlm-chat__send:hover:not(:disabled) { background: var(--chat-navy-2); transform: translateY(-1px); }
.dlm-chat__send:focus-visible { outline: 3px solid var(--chat-gold-hi); outline-offset: 2px; }
.dlm-chat__send:disabled { opacity: 0.5; cursor: default; }

.dlm-chat__note {
  margin: 0;
  padding: 0 1.125rem 0.75rem;
  font-size: 0.875rem;
  color: var(--chat-muted);
  background: #fff;
  line-height: 1.5;
}

/* ── Small screens ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .dlm-chat { right: 0.75rem; bottom: 0.75rem; left: 0.75rem; }
  .dlm-chat__panel { width: auto; left: 0; right: 0; max-height: min(30rem, calc(100vh - 6rem)); }
  .dlm-chat__launch { margin-left: auto; }
  .dlm-chat__launch-text { font-size: 0.78125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dlm-chat__panel,
  .dlm-chat__dot,
  .dlm-chat__typing span { animation: none; }
  .dlm-chat__launch,
  .dlm-chat__chip,
  .dlm-chat__send { transition: none; }
  .dlm-chat__launch:hover,
  .dlm-chat__chip:hover,
  .dlm-chat__send:hover:not(:disabled) { transform: none; }
}

.dlm-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;
}


/* ═══════════════════════════════════════════════════════════════
   PROFESSOR Ai — launcher animation, 2026-08-28
   ═══════════════════════════════════════════════════════════════ */

/* ── Collapse / expand ───────────────────────────────────────────
   The body animates via grid-template-rows 1fr -> 0fr rather than
   max-height. A max-height transition has to guess a height: guess
   low and long conversations clip, guess high and the animation
   spends most of its duration doing nothing visible. The grid
   approach animates to the element's real height, whatever it is. */
.dlm-chat__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 280ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 200ms ease;
  min-height: 0;
}
.dlm-chat__body > * {
  min-height: 0;
}


/* Chevron drawn in CSS so there is no icon font or SVG request. */

/* The close button carries the auto margin now that the collapse
   button ahead of it now claims the free space. */
.dlm-chat__close { margin-left: 0; }


/* ── Professor Ai, animated ──────────────────────────────────────
   Three states, each doing a different job:

   idle      a slow breath, so the figure reads as present rather
             than as a pasted-on photograph
   thinking  a faster bob plus a gold halo, while a reply is being
             fetched — it answers "did my message send?" without a
             spinner
   greeting  a single wave-like tilt when the panel first opens

   All are transform/opacity only, so they stay on the compositor
   and never trigger layout. */
.dlm-chat__figure {
  border-radius: 12px;
  transform-origin: 50% 90%;
  animation: dlm-ai-breathe 4.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes dlm-ai-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2.5px) scale(1.015); }
}

/* Opening flourish — runs once, then hands back to the breath. */
.dlm-chat__panel:not([hidden]) .dlm-chat__figure {
  animation: dlm-ai-greet 900ms cubic-bezier(0.16, 1, 0.3, 1) 1,
             dlm-ai-breathe 4.5s ease-in-out 900ms infinite;
}
@keyframes dlm-ai-greet {
  0%   { transform: translateY(6px) scale(0.9) rotate(-4deg); opacity: 0; }
  55%  { transform: translateY(-3px) scale(1.04) rotate(2.5deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}

/* Thinking. The halo is a pseudo-element on a positioned wrapper so it
   can sit behind the figure without affecting its layout. */
.dlm-chat__head { position: relative; }
.dlm-chat.is-thinking .dlm-chat__figure {
  animation: dlm-ai-think 1.1s ease-in-out infinite;
}
@keyframes dlm-ai-think {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-4px) rotate(1.5deg); }
}
.dlm-chat.is-thinking .dlm-chat__figure {
  filter: drop-shadow(0 0 10px rgba(217, 161, 63, 0.55));
}

/* ── The launcher badge: idle, then a wave ───────────────────────
   A constant animation stops being noticed within seconds — the eye
   filters steady motion out. So this is mostly stillness with a short
   wave every nine seconds, which is what actually catches attention.

   The timing is deliberately not a round number. A wave every ten
   seconds on a page with other periodic motion will eventually sync up
   with it and read as mechanical; nine seconds drifts against
   everything else and keeps looking incidental.

   All of it is one keyframe set rather than a JS timer: no interval to
   leak, and it pauses automatically when the tab is backgrounded. */
.dlm-chat__badge {
  transform-origin: 70% 85%;   /* about where a hand would pivot */
  animation: dlm-ai-wave 9s ease-in-out infinite;
}

@keyframes dlm-ai-wave {
  /* 0-72%: alive but still — a slow breath, nothing more. */
  0%, 60%   { transform: translateY(0) rotate(0deg) scale(1); }
  66%       { transform: translateY(-1.5px) rotate(0deg) scale(1.01); }

  /* 72-92%: the wave. Lean in, three diminishing swings, settle. */
  72%       { transform: translateY(-3px) rotate(-14deg) scale(1.06); }
  77%       { transform: translateY(-3px) rotate(12deg)  scale(1.06); }
  82%       { transform: translateY(-3px) rotate(-9deg)  scale(1.05); }
  87%       { transform: translateY(-2px) rotate(6deg)   scale(1.03); }
  92%       { transform: translateY(-1px) rotate(-2deg)  scale(1.01); }
  100%      { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Once the panel is open he has the visitor's attention, so he stops
   waving for it and just breathes. Waving at someone already looking at
   you is the animated equivalent of shouting in a quiet room. */
.dlm-chat__panel:not([hidden]) ~ .dlm-chat__launch .dlm-chat__badge,
.dlm-chat.is-open .dlm-chat__badge {
  animation: dlm-ai-breathe 4.5s ease-in-out infinite;
}

/* Hovering the launcher brings the wave forward rather than waiting for
   the next cycle — the visitor has signalled interest. */
.dlm-chat__launch:hover .dlm-chat__badge {
  animation: dlm-ai-wave-now 1.1s ease-in-out 1;
}
@keyframes dlm-ai-wave-now {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  22%  { transform: translateY(-3px) rotate(-14deg) scale(1.06); }
  45%  { transform: translateY(-3px) rotate(12deg)  scale(1.06); }
  68%  { transform: translateY(-2px) rotate(-8deg)  scale(1.04); }
  85%  { transform: translateY(-1px) rotate(4deg)   scale(1.02); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* ── Motion is decoration here, never information ────────────────
   Every state above is also conveyed by text or layout, so switching
   all of it off costs the visitor nothing. */
@media (prefers-reduced-motion: reduce) {
  .dlm-chat__figure,
  .dlm-chat__badge,
  .dlm-chat__panel:not([hidden]) .dlm-chat__figure,
  .dlm-chat__launch:hover .dlm-chat__badge,
  .dlm-chat.is-open .dlm-chat__badge,
  .dlm-chat.is-thinking .dlm-chat__figure {
    animation: none;
    filter: none;
    transform: none;
  }
  .dlm-chat__body { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════
   VIDEO BADGE + LARGER LAUNCHER — 2026-08-29
   ═══════════════════════════════════════════════════════════════ */

/* ── The CSS wave is retired ─────────────────────────────────────
   The badge is now a clip of Professor Ai actually waving, so
   rotating the element as well would wave a waving man. The video
   carries the motion; the element stays still. */
.dlm-chat__badge {
  animation: none;
  transform: none;
  transform-origin: center;
}
.dlm-chat__launch:hover .dlm-chat__badge,
.dlm-chat.is-open .dlm-chat__badge {
  animation: none;
}

/* ── Launcher, 45% larger ────────────────────────────────────────
   Every dimension scaled by 1.45, not just the avatar: growing the
   badge alone inside the old pill would have left it crowding the
   text and touching the edges.

     badge    44px    -> 64px
     padding  .5/1.25 -> .72/1.8rem
     text     .8125   -> 1.18rem
     gap      .7rem   -> 1rem                                    */
.dlm-chat__badge {
  width: 64px;
  height: 64px;
  border-width: 3px;          /* 2px on a 64px circle looks thin */
  /* The source is cropped square to head-and-hand, so the framing is
     already right — no object-position nudge needed as there was for
     the old portrait still. */
  object-position: 50% 50%;
}
.dlm-chat__launch {
  gap: 1rem;
  padding: 0.72rem 1.8rem 0.72rem 0.72rem;
}
.dlm-chat__launch-text {
  font-size: 1.18rem;
  letter-spacing: 0.02em;     /* wide tracking suits small text, not this */
}

/* The status dot scales with it, or it reads as a speck. */
.dlm-chat__dot {
  width: 13px;
  height: 13px;
}

/* ── Attention, without the element moving ───────────────────────
   A ring that pulses outward from the badge every nine seconds. It
   draws the eye the way the CSS wave used to, but leaves the video
   to do the human motion — two competing animations on one element
   read as a glitch, not as personality. */
.dlm-chat__launch::before {
  content: '';
  position: absolute;
  left: 0.72rem;
  top: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  border-radius: 999px;
  border: 2px solid var(--chat-gold);
  opacity: 0;
  pointer-events: none;
  animation: dlm-badge-ring 9s ease-out infinite;
}
.dlm-chat__launch { position: relative; }

@keyframes dlm-badge-ring {
  /* Still for most of the cycle. Constant motion stops being seen. */
  0%, 72%   { transform: scale(1);    opacity: 0; }
  78%       { transform: scale(1);    opacity: 0.85; }
  100%      { transform: scale(1.55); opacity: 0; }
}

/* Once the panel is open he has their attention; the ring stops. */
.dlm-chat.is-open .dlm-chat__launch::before { animation: none; opacity: 0; }

@media (max-width: 560px) {
  /* On a phone the full pill would span most of the screen. Collapse to
     just the avatar — the video still says what it is. */
  .dlm-chat__launch-text { display: none; }
  .dlm-chat__launch { padding: 0.5rem; gap: 0; }
  .dlm-chat__launch::before { left: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dlm-chat__launch::before { animation: none; opacity: 0; }
  /* The badge video is muted+loop+no-controls, which main.js treats as
     decorative; browsers honouring reduced-motion may also pause it. Either
     way the poster frame shows him mid-wave, so nothing is lost. */
}


/* ── Panel figure: same waving clip as the launcher ──────────────
   Square, because the source is cropped square around head and hand.
   The old 90x112 portrait box would crop the raised hand straight
   back out, which is the one thing the clip is for. */
.dlm-chat__figure {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  object-fit: cover;
  object-position: 50% 50%;
  /* The breathing/greeting keyframes are retired here for the same
     reason as on the badge: the video already moves. */
  animation: none;
  transform: none;
  filter: none;
}
.dlm-chat__panel:not([hidden]) .dlm-chat__figure,
.dlm-chat.is-thinking .dlm-chat__figure {
  animation: none;
}
/* Thinking state keeps the gold halo — that is information (a reply is
   coming), not decoration, and it does not fight the video's motion. */
.dlm-chat.is-thinking .dlm-chat__figure {
  filter: drop-shadow(0 0 12px rgba(217, 161, 63, 0.6));
}


/* ── Mobile: fewer controls, no ambient motion ───────────────────
   Reported 2026-08-29: on a phone the panel opened but was awkward
   to operate — an extra dropdown arrow and movement that read as
   confusing rather than alive.

   Three causes, all fixed here:

   1. COLLAPSE IS POINTLESS ON A PHONE. On desktop it docks the panel
      as a slim bar so the page stays visible behind it. On a phone
      the panel is effectively the whole screen, so collapsing shows
      a bar floating over nothing — and it sits right next to Close,
      giving two buttons that look like they do the same thing.
      Hidden, leaving ONE unambiguous control.

   2. THE ATTENTION RING kept pulsing behind the launcher while the
      panel was open, under the thumb. Off.

   3. THE VIDEO AVATAR animating in the header of a small panel is
      motion competing with the words. The poster frame carries the
      same impression at no cost. */
@media (max-width: 640px) {

  /*
   * Full-screen sheet, rewritten 2026-08-29 because the mobile experience
   * was genuinely confusing.
   *
   * It used to be a floating sheet at max-height 82vh docked to the bottom.
   * Three things went wrong with that, all at once:
   *
   *   1. vh on a phone is the viewport with browser chrome HIDDEN, so 82vh
   *      could exceed the visible area, and it never shrank when the
   *      keyboard appeared — pushing the input underneath it.
   *   2. The launcher stayed pinned bottom-right, floating ON TOP of the
   *      sheet it had just opened.
   *   3. Scrolling to the end of the conversation chained through to the
   *      page behind, so the site slid around under the chat.
   *
   * Full-screen removes all three by construction rather than by patching:
   * nothing behind to tap, nothing to overlap, no height to get wrong.
   *
   * inset:0 with NO height is deliberate — for a fixed element that already
   * means "fill the viewport", so it stays correct even if the JS never
   * runs. JS then narrows the height to visualViewport when the keyboard is
   * up; that is an enhancement, not a dependency.
   */
  .dlm-chat__panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    /* A full-width sheet scaling out of the bottom-right corner looks
       broken. It rises instead. */
    transform-origin: center bottom;
    animation: dlm-chat-up 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Stops the conversation's scroll from chaining into the page behind. */
  .dlm-chat__log { overscroll-behavior: contain; }

  .dlm-chat__launch { position: fixed; right: 1rem; bottom: 1rem; }
  .dlm-chat__launch::before { animation: none; opacity: 0; }

  /* The launcher has done its job once the sheet is open, and full-screen
     means it would otherwise sit on top of the conversation. */
  .dlm-chat.is-open .dlm-chat__launch { display: none; }

  /* Close gets a real touch target. 30px is fine for a mouse and
     mean for a thumb. */
  .dlm-chat__close { width: 44px; height: 44px; font-size: 1.125rem; }

  /* Input at >=16px so iOS does not zoom the page when it is focused —
     the single most common reason a mobile chat feels like it is fighting
     you. The base is 17px, so this simply matches rather than shrinking. */
  .dlm-chat__input { font-size: 1.0625rem; }

  /* Still avatar in the panel header; the launcher keeps its video. */
  .dlm-chat__panel .dlm-chat__figure {
    width: 56px; height: 56px;
  }
}

/* Page cannot scroll under an open full-screen sheet. Set by JS on open. */
.dlm-chat-locked, .dlm-chat-locked body {
  overflow: hidden;
  overscroll-behavior: none;
}

@keyframes dlm-chat-up {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dlm-chat__panel { animation: none; }
}

@media (max-width: 640px) and (hover: none) {
  /* Touch devices have no hover, so the hover-wave never fires; make
     sure it cannot be left mid-animation by a tap. */
  .dlm-chat__launch:hover .dlm-chat__badge { animation: none; }
}