/* ==========================================================================
   AV IMMIGRATION — CONVERSATIONAL ASSISTANT
   --------------------------------------------------------------------------
   Bottom-centred composer dock. Collapsed it is a single pill with a
   typewriter placeholder; on focus it widens and the suggestion chips rise
   into place. Phones get a small logo launcher instead, which expands to the
   same composer on tap.

   Everything is scoped to #av-chat and every class is avc- prefixed, so this
   file cannot collide with immigration.css. 'Satoshi' is already @font-face'd
   by immigration.css, which loads before this on every page.
   ========================================================================== */

#av-chat {
  /* Palette — mirrors immigration.css :root, restated locally so the widget
     can be re-themed from one place. */
  --avc-ink: #0a0a0a;
  --avc-accent: #f06730;
  --avc-surface: rgba(255, 255, 255, 0.92);
  --avc-surface-solid: #ffffff;
  --avc-muted: #5f5f5f;
  --avc-chip-bg: rgba(41, 41, 41, 0.6);
  --avc-chip-bg-hover: rgba(41, 41, 41, 0.75);
  --avc-idle-bg: #e0e0e0;
  --avc-idle-ink: #858585;

  /* Geometry */
  --avc-w-collapsed: 380px;
  --avc-w-expanded: 600px;
  --avc-radius-pill: 32px;
  --avc-radius-chip: 100px;
  --avc-radius-panel: 32px;
  --avc-panel-h: 540px;
  --avc-gutter: 24px;

  --avc-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --avc-ease-rise: cubic-bezier(0.22, 0.61, 0.36, 1);

  position: fixed;
  left: 50%;
  bottom: var(--avc-gutter);
  z-index: 2147483000;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* The container is only a positioning frame — taps pass straight through it
     to the page, and each interactive piece re-enables its own hit area. */
  pointer-events: none;

  /* Entrance. Held back until chatbot.js adds .is-ready (default 5s after
     load), so it does not compete with the hero — and so the first click lands
     on an idle main thread rather than one still busy with GSAP, Swiper,
     Phosphor and the CTA video. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(14px);
  transition: opacity 0.45s ease,
              transform 0.55s var(--avc-ease-rise),
              visibility 0.55s;
}

#av-chat.is-ready {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Stands down while the mobile nav overlay is open (toggled from chatbot.js).
   Declared after .is-ready so it wins — same specificity, later wins. */
#av-chat.avc-suppressed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ========== DOCK ========== */

.avc-dock {
  width: var(--avc-w-collapsed);
  max-width: calc(100vw - 32px);
  pointer-events: auto;
  transition: width 0.4s var(--avc-ease);
}

#av-chat.is-expanded .avc-dock {
  width: var(--avc-w-expanded);
}

/* ========== CONVERSATION PANEL ========== */

.avc-panel {
  display: flex;
  flex-direction: column;
  position: relative;
  /* Second term keeps it on screen on short viewports: composer (~60px) plus
     the 12px gap, both gutters, and some breathing room above. */
  height: min(var(--avc-panel-h), calc(100vh - 160px));
  margin: 0 0 12px;
  border-radius: var(--avc-radius-panel);
  overflow: hidden;
  /* Near-black glass with a restrained orange bloom at the foot, so it reads as
     AlphaVenture rather than as a generic dark sheet. */
  background:
    radial-gradient(120% 90% at 78% 108%, rgba(240, 103, 48, 0.22) 0%, rgba(240, 103, 48, 0) 62%),
    linear-gradient(180deg, rgba(24, 24, 24, 0.94) 0%, rgba(12, 12, 12, 0.96) 100%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow:
    0 1px 3px 0 rgba(9, 14, 21, 0.2),
    0 12px 34px 0 rgba(0, 0, 0, 0.45);
  /* Transitions on the base rule so the close fades DOWN as well as up. */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.34s var(--avc-ease-rise);
}

.avc-panel[hidden] { display: none; }
.avc-panel.is-shown { opacity: 1; transform: translateY(0); }

/* ---- Header ---- */

.avc-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 18px 18px 14px 20px;
}

.avc-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--avc-surface-solid);
}

.avc-avatar img {
  display: block;
  width: auto;
  height: 22px;
  object-fit: contain;
}

.avc-panel-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--avc-surface-solid);
  font-size: var(--alpha-body-xs, 16px);
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avc-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.avc-panel-close svg { display: block; }
@media (hover: hover) {
  .avc-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--avc-surface-solid);
  }
}
.avc-panel-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--avc-accent);
}

/* ---- Messages ---- */

.avc-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 20px 20px;
}

.avc-msg {
  /* Each message rises in once; the animation is on the element, not a class,
     so appending is all the JS has to do. */
  animation: avc-msg-in 0.32s var(--avc-ease-rise) both;
}

.avc-msg + .avc-msg { margin-top: 16px; }

@keyframes avc-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bot: plain text, no bubble. */
.avc-msg--bot {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--alpha-body-xs, 16px);
  font-weight: 400;
  line-height: 1.6;
}

.avc-msg--bot p { margin: 0; white-space: pre-line; }
.avc-msg--bot p + p { margin-top: 12px; }

/* Restored from a previous page — appear in place, no entrance animation. */
.avc-msg--restored { animation: none; }

.avc-msg--bot a {
  color: var(--avc-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .avc-msg--bot a:hover { color: var(--avc-surface-solid); }
}

/* User: right-aligned bubble. */
.avc-msg--user {
  display: flex;
  justify-content: flex-end;
}

.avc-msg--user span {
  max-width: 82%;
  padding: 12px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--avc-surface-solid);
  font-size: var(--alpha-body-xs, 16px);
  font-weight: 400;
  line-height: 1.5;
}

/* ---- Quick replies (assistant-suggested answers) ---- */

.avc-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 20px 16px;
}

.avc-quick[hidden] { display: none; }

.avc-quick-btn {
  padding: 10px 20px;
  border: 0;
  border-radius: var(--avc-radius-chip);
  background: var(--avc-surface-solid);
  color: var(--avc-ink);
  font-family: inherit;
  font-size: var(--alpha-body-xs, 16px);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  animation: avc-msg-in 0.32s var(--avc-ease-rise) both;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

@media (hover: hover) {
  .avc-quick-btn:hover { background: var(--avc-accent); color: var(--avc-surface-solid); }
}
.avc-quick-btn:active { transform: scale(0.97); }
.avc-quick-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--avc-accent);
}

/* ---- Typing indicator ---- */

.avc-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
}

.avc-typing i {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.5);
  animation: avc-typing 1.2s ease-in-out infinite;
}

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

@keyframes avc-typing {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* ---- Scroll to latest ---- */

.avc-scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--avc-surface-solid);
  color: var(--avc-ink);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s ease, transform 0.24s var(--avc-ease-rise), visibility 0.24s;
}

.avc-scroll-btn svg { display: block; }

.avc-scroll-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ========== SUGGESTION CHIPS ========== */

.avc-suggestions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 12px 12px;
  /* Pinned to the EXPANDED width, not the dock's animating width. Otherwise
     every frame of the 380->600px transition re-wraps the chip text, relaying
     out and re-rastering three blurred layers 60 times a second — which is
     what made the first expand stutter regardless of what was behind it. Held
     constant, the chips only ever animate opacity and transform, both of which
     the compositor handles without touching layout. */
  width: calc(var(--avc-w-expanded) - 24px);
  max-width: calc(100vw - 56px);
  /* Chips are narrower than the row; the gap beside them stays click-through. */
  pointer-events: none;
}

.avc-suggestions[hidden] {
  display: none;
}

.avc-chip {
  max-width: 100%;
  margin: 0;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--avc-radius-chip);
  /* Blurred, but at 20px rather than the reference's 100px. Backdrop blur cost
     scales with radius, and 20px is the ceiling immigration.css itself uses on
     the scrolled header — visually near-identical at this size, ~5x cheaper to
     raster. What actually made this janky was the geometry, fixed below. */
  background: var(--avc-chip-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 2px rgba(9, 14, 21, 0.2);
  color: var(--avc-surface-solid);
  font-family: inherit;
  font-size: var(--alpha-body-xs, 16px);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  /* Free while the chips are display:none, and promotes them for the rise
     animation at exactly the moment they are revealed. */
  will-change: opacity, transform;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* The animation is attached by .is-visible, so toggling the class replays the
   stagger every time the composer expands. Delays run bottom-first. */
.avc-suggestions.is-visible .avc-chip {
  animation: avc-chip-in 0.4s var(--avc-ease-rise) both;
}
.avc-suggestions.is-visible .avc-chip:nth-last-child(1) { animation-delay: 0.2s; }
.avc-suggestions.is-visible .avc-chip:nth-last-child(2) { animation-delay: 0.3s; }
.avc-suggestions.is-visible .avc-chip:nth-last-child(3) { animation-delay: 0.4s; }
.avc-suggestions.is-visible .avc-chip:nth-last-child(4) { animation-delay: 0.5s; }

@keyframes avc-chip-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) {
  .avc-chip:hover {
    background: var(--avc-chip-bg-hover);
    box-shadow: 0 1px 2px rgba(9, 14, 21, 0.2), inset 0 0 0 1px rgba(240, 103, 48, 0.55);
  }
}
.avc-chip:active { transform: scale(0.98); }
.avc-chip:focus-visible {
  opacity: 1;
  outline: none;
  box-shadow: 0 0 0 2px var(--avc-surface-solid), 0 0 0 4px var(--avc-accent);
}

/* ========== COMPOSER PILL ========== */

.avc-pill {
  position: relative;
  border-radius: var(--avc-radius-pill);
  background: var(--avc-surface);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 -1px 0 0 rgba(0, 0, 0, 0.05),
    0 1px 3px 0 rgba(9, 14, 21, 0.2),
    0 6px 14px 0 rgba(0, 0, 0, 0.24);
  overflow-y: hidden;
  transition: background 0.5s ease-out, box-shadow 0.3s ease-out;
}

@media (hover: hover) {
  .avc-pill:hover {
    background: var(--avc-surface-solid);
    box-shadow:
      0 -1px 0 0 rgba(0, 0, 0, 0.06),
      0 2px 6px 0 rgba(9, 14, 21, 0.22),
      0 8px 18px 0 rgba(0, 0, 0, 0.28);
  }
}

/* Orange focus ring, keyboard only — .is-kb-focus is set from chatbot.js
   because Chrome matches :focus-visible on a mouse-clicked textarea. */
.avc-pill.is-kb-focus {
  box-shadow:
    0 -1px 0 0 rgba(0, 0, 0, 0.05),
    0 1px 3px 0 rgba(9, 14, 21, 0.2),
    0 6px 14px 0 rgba(0, 0, 0, 0.24),
    0 0 0 2px rgba(240, 103, 48, 0.5),
    0 0 0 7px rgba(240, 103, 48, 0.18);
}

.avc-pill-row {
  display: flex;
  align-items: flex-end;
  min-height: 60px;
}

/* ---- Input + typewriter overlay ---- */

.avc-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px 8px 18px 24px;
}

.avc-input {
  display: block;
  width: 100%;
  height: 24px;
  max-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  overflow-y: auto;
  background: transparent;
  font-family: inherit;
  font-size: var(--alpha-body-xs, 16px);
  font-weight: 400;
  line-height: 24px;
  color: var(--avc-ink);
  caret-color: var(--avc-accent);
}

#av-chat.is-expanded .avc-input { max-height: 96px; }

.avc-input::placeholder { color: var(--avc-muted); opacity: 1; }
.avc-input::selection { background: rgba(240, 103, 48, 0.25); }

/* Sits exactly on the input's text origin (the .avc-field padding box). */
.avc-ghost {
  position: absolute;
  top: 18px;
  left: 24px;
  right: 8px;
  overflow: hidden;
  pointer-events: none;
  color: var(--avc-muted);
  font-size: var(--alpha-body-xs, 16px);
  line-height: 24px;
  white-space: nowrap;
  /* Own compositor layer. The typewriter rewrites this text every 50ms, and
     without its own layer each rewrite dirties the pill it sits inside —
     forcing that backdrop blur to re-raster 20 times a second, permanently. */
  transform: translateZ(0);
}

#av-chat.is-expanded .avc-ghost { display: none; }

/* ---- Send ---- */

.avc-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 8px 8px 8px 0;
}

.avc-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--avc-accent);
  color: var(--avc-surface-solid);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

.avc-send svg { display: block; }
@media (hover: hover) {
  .avc-send:hover:not(:disabled) { background: var(--avc-ink); }
}
.avc-send:active:not(:disabled) { transform: scale(0.96); }
.avc-send:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--avc-surface-solid), 0 0 0 4px var(--avc-accent);
}
.avc-send:disabled {
  cursor: default;
  background: var(--avc-idle-bg);
  color: var(--avc-idle-ink);
}

/* ==========================================================================
   SCROLLBARS
   --------------------------------------------------------------------------
   Two of them: the input, once it grows past four lines, and the transcript.
   Both slim, both track-less, neither with stepper buttons.

   Firefox (and Chrome 121+) take the standard scrollbar-width / scrollbar-color
   properties; WebKit and Blink take the pseudo-elements, which win where both
   apply. The thumb gets a transparent border with background-clip: padding-box,
   so the visible bar is thinner than its hit area — easier to grab than it
   looks. Buttons are explicitly zeroed rather than left to the browser, since
   Windows is the platform that still draws them.
   ========================================================================== */

.avc-input,
.avc-messages {
  scrollbar-width: thin;
}

/* Dark thumb on the white pill, light thumb on the near-black panel. */
.avc-input    { scrollbar-color: rgba(10, 10, 10, 0.25) transparent; }
.avc-messages { scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }

.avc-input::-webkit-scrollbar    { width: 8px; }
.avc-messages::-webkit-scrollbar { width: 10px; }

.avc-input::-webkit-scrollbar-track,
.avc-messages::-webkit-scrollbar-track {
  background: transparent;
  /* No inset shadow or margin: a track that reads as a groove looks wrong on
     both the glass pill and the panel. */
}

.avc-input::-webkit-scrollbar-thumb,
.avc-messages::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background-clip: padding-box;
}

.avc-input::-webkit-scrollbar-thumb {
  border: 2px solid transparent;  /* 8px track - 4px of border = 4px visible */
  background-color: rgba(10, 10, 10, 0.25);
}

.avc-messages::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-color: rgba(255, 255, 255, 0.25);
}

@media (hover: hover) {
  .avc-input::-webkit-scrollbar-thumb:hover    { background-color: rgba(10, 10, 10, 0.42); }
  .avc-messages::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); }
}

/* The stepper arrows at each end, and the square where two bars would meet. */
.avc-input::-webkit-scrollbar-button,
.avc-messages::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.avc-input::-webkit-scrollbar-corner,
.avc-messages::-webkit-scrollbar-corner {
  background: transparent;
}

/* ==========================================================================
   "ASK US ANYTHING" FLAG
   --------------------------------------------------------------------------
   Geometry, colours, shadow and the arrow are the reference's values. One
   structural change: the reference is a fixed host-page element with hardcoded
   offsets (margin-left 180px, then 301px once the composer widens) because its
   composer lives in an iframe. Ours sits inside the widget at left:100%, i.e.
   the container's right edge, so it follows the dock's 380->600px transition
   on its own. That reproduces the reference's "pushed" state with no JS.
   ========================================================================== */

.avc-flag {
  position: absolute;
  left: 100%;
  bottom: 10px;              /* centres its ~34px height on the 60px pill */
  margin-left: 38px;         /* room for the arrow between pill and flag */
  padding: 10px;
  background: #fff;
  color: #000;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.5px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 0 9px 3px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  transition: all 0.35s;
}

.avc-flag strong {
  font-weight: var(--font-weight-bold, 700);
}

/* The arrow pointing back at the composer. The site's own arrow mark, mirrored
   so it points left at the input the way the reference's glyph does, and in the
   accent orange so it reads over light and dark sections alike. */
.avc-flag-arrow {
  display: block;
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 6px;
  transform: translateY(-50%) scaleX(-1);
  color: var(--avc-accent);
}

/* "Ask us anything" stops being true once a conversation is running. */
#av-chat.is-open .avc-flag {
  opacity: 0;
  visibility: hidden;
}

/* ========== LAUNCHER (phones) ========== */

.avc-launcher {
  display: none;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--avc-radius-chip);
  background: var(--avc-surface-solid);
  cursor: pointer;
  pointer-events: auto;
  box-shadow:
    0 1px 3px 0 rgba(9, 14, 21, 0.2),
    0 6px 14px 0 rgba(0, 0, 0, 0.24);
  transition: transform 0.2s var(--avc-ease-rise), opacity 0.2s ease;
}

.avc-launcher img {
  display: block;
  width: auto;
  height: 24px;
  object-fit: contain;
}

.avc-launcher:active { transform: scale(0.96); }
.avc-launcher:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--avc-ink), 0 0 0 4px var(--avc-accent);
}

/* ========== RESPONSIVE ========== */

/* The expanded dock reaches 300px either side of centre, and the arrow plus
   flag need roughly another 165px beyond that, so on a narrower window it
   would hang off the right edge. Desktop only, as in the reference. */
@media (max-width: 1023px) {
  .avc-flag { display: none; }
}

@media (max-width: 640px) {
  #av-chat {
    --avc-gutter: 16px;
    --avc-radius-pill: 28px;
    /* Both states span the viewport, so the dock's width transition is inert
       here and the cross-fade below does the work instead. */
    --avc-w-collapsed: 100%;
    --avc-w-expanded: 100%;
    width: calc(100vw - 32px);
  }

  /* The launcher and the dock share one bottom-centred slot and cross-fade in
     both directions. The transitions live on the BASE rules, not the state
     rules — declaring them on .is-expanded only animates the way in, which is
     what made collapsing snap. */
  .avc-launcher {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform-origin: 50% 100%;
    transition: opacity 0.22s ease, transform 0.3s var(--avc-ease-rise), visibility 0.3s;
  }

  .avc-dock {
    transform-origin: 50% 100%;
    transition: opacity 0.26s ease, transform 0.3s var(--avc-ease-rise), visibility 0.3s;
  }

  /* Collapsed: launcher in, dock eased down and out. */
  #av-chat.is-collapsed .avc-launcher {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
    transition-delay: 0.08s; /* the dock clears out first */
  }
  #av-chat.is-collapsed .avc-dock {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.97);
    pointer-events: none;
  }

  /* Expanded: dock in, launcher shrinks away under it. */
  #av-chat.is-expanded .avc-launcher {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) scale(0.86);
    pointer-events: none;
  }
  #av-chat.is-expanded .avc-dock {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0.06s; /* the launcher fades first */
  }

  .avc-pill-row { min-height: 56px; }
  .avc-field { padding: 16px 8px 16px 20px; }
  .avc-send { width: 40px; height: 40px; }
  .avc-actions { padding: 8px 8px 8px 0; }
  .avc-ghost { top: 16px; left: 20px; }
  .avc-chip { padding: 10px 18px; }

  #av-chat { --avc-radius-panel: 28px; }

  /* Open on a phone runs the full height of the screen, with the gap above the
     panel matching the gap below the composer — both are --avc-gutter (16px).
     The dock becomes the flex column and the panel absorbs whatever the
     composer does not need, so growing the input to four lines shortens the
     panel instead of pushing it off the top. dvh where supported, so the
     browser's own chrome and the on-screen keyboard are accounted for. */
  #av-chat.is-open .avc-dock {
    display: flex;
    flex-direction: column;
    height: calc(100vh - (var(--avc-gutter) * 2));
    height: calc(100dvh - (var(--avc-gutter) * 2));
  }
  #av-chat.is-open .avc-panel {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
  #av-chat.is-open .avc-pill { flex: 0 0 auto; }

  .avc-panel-head { padding: 16px 14px 12px 16px; }
  .avc-messages { padding: 6px 16px 18px; }
  .avc-quick { padding: 0 16px 14px; }
  .avc-msg--user span { max-width: 88%; }
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
  /* Still appears on the same delay, it just arrives without the rise. */
  #av-chat {
    transform: translateX(-50%);
    transition: none;
  }
  .avc-dock { transition: none; }
  .avc-suggestions.is-visible .avc-chip {
    animation: none;
    opacity: 1;
  }
  .avc-launcher,
  .avc-send,
  .avc-chip,
  .avc-panel,
  .avc-panel-close,
  .avc-scroll-btn,
  .avc-flag { transition: none; }

  .avc-msg { animation: none; }
  .avc-quick-btn { animation: none; transition: none; }
  .avc-typing i { animation: none; opacity: 0.55; }
}

/* ========== PRINT ========== */

@media print {
  #av-chat { display: none; }
}