/* Homepage V2 hero (templates/new-homepage.php). Generated by reve-chat-website/scripts/build-theme-css.py. All variables are scoped to .v2. */

/* ===== Design tokens ===== */
/* =============================================================
   REVE Chat — Design Tokens
   Single source of truth for typography + color.
   Every section that follows should consume these variables
   instead of hardcoding values.
   ============================================================= */

.v2 {
  /* ---------------------------------------------------------
     Font families
     - Headings / display  → Parkinsans (Medium 500)
     - Body / UI           → DM Sans
     --------------------------------------------------------- */
  --font-heading: 'Parkinsans', 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------------------------------------------------------
     Type scale — DESKTOP (mobile overrides below).
     Each token pairs a size with its line-height.
     Letter-spacing is kept subtly tight on large display type
     so Parkinsans Medium never reads as heavy.
     --------------------------------------------------------- */
  --fs-header-title: 64px;
  --lh-header-title: 1.2;
  --ls-header-title: -0.64px; /* Figma hero title tracking */

  --fs-h1: 48px;
  --lh-h1: 1.25;
  --ls-h1: -0.6px;

  --fs-h2: 36px;
  --lh-h2: 1.34;
  --ls-h2: -0.4px;

  --fs-h3: 28px;
  --lh-h3: 1.34;
  --ls-h3: -0.3px;

  --fs-h4: 22px;
  --lh-h4: 1.45;
  --ls-h4: -0.2px;

  --fs-h5: 18px;
  --lh-h5: 1.45;
  --ls-h5: -0.1px;

  --fs-body-lg: 18px;
  --lh-body-lg: 1.4;

  --fs-body: 16px;
  --lh-body: 1.5;

  --fs-body-sm: 14px;
  --lh-body-sm: 1.4;

  --fs-meta: 12px;
  --lh-meta: 1.4;

  /* ---------------------------------------------------------
     Color — Light surfaces (default page direction)
     Sourced from the Figma design system variables.
     --------------------------------------------------------- */
  --color-text-primary: #253748;   /* headings / primary copy   */
  --color-text-secondary: #4d657c; /* supporting paragraph copy */
  --color-text-muted: #6f8294;     /* meta / captions / hints   */

  --color-bg: #ffffff;             /* main page background      */
  --color-surface: #f5f7f8;        /* secondary / card surface  */
  --color-surface-2: #eff2f4;      /* deeper surface tint       */

  --color-border: #e6eaed;         /* borders / dividers        */
  --color-border-strong: #d3d8dd;  /* stronger divider          */

  /* Brand / accent */
  --color-brand: #5654d4;          /* primary brand purple      */
  --color-brand-strong: #4845c4;   /* hover / pressed           */
  --color-brand-soft: #6c69f9;     /* lighter violet accent     */
  --color-brand-tint: #ecebfb;     /* faint brand wash          */

  /* Call-to-action */
  --cta-bg: #5654d4;
  --cta-bg-hover: #4845c4;
  --cta-text: #ffffff;

  /* ---------------------------------------------------------
     Color — Dark hero surface
     The hero sits on a deep violet gradient with a radial glow.
     --------------------------------------------------------- */
  --hero-bg-top: #1b1033;
  --hero-bg-bottom: #0e0a1f;
  --hero-ink: #ffffff;              /* hero headline             */
  --hero-ink-soft: #c9c2e6;         /* hero supporting copy      */
  --hero-ink-muted: #9b93c4;        /* hero meta / trust line    */
  --hero-border: rgba(255, 255, 255, 0.12);
  --hero-surface: rgba(255, 255, 255, 0.06);

  /* ---------------------------------------------------------
     Decorative glow colors (hero backdrop + ambient shapes)
     Used as radial gradients — soft, never solid.
     --------------------------------------------------------- */
  --glow-violet: rgba(124, 92, 246, 0.55);
  --glow-purple: rgba(86, 84, 212, 0.5);
  --glow-indigo: rgba(63, 42, 128, 0.6);
  --glow-magenta: rgba(168, 85, 221, 0.35);

  /* ---------------------------------------------------------
     Radii, shadows, layout rhythm
     --------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 3px rgba(40, 46, 61, 0.12);
  --shadow-sm: 0 6px 20px rgba(40, 46, 61, 0.08);
  --shadow-md: 0 14px 40px rgba(40, 46, 61, 0.12);
  --shadow-float: 0 10px 30px rgba(28, 20, 58, 0.14);

  --container-max: 1200px;
  --gutter: clamp(20px, 5vw, 48px);

  --header-gap: 6px; /* floating sticky header distance from top */
  --header-h: 52px;  /* header row height (Figma); hero extends up under it */
}

/* =============================================================
   Type scale — MOBILE overrides (≤ 640px)
   Uses the supplied mobile scale; headings shrink, body holds.
   ============================================================= */
@media (max-width: 640px) {
  :root {
    --fs-header-title: 36px;
    --ls-header-title: -0.5px;

    --fs-h1: 30px;
    --ls-h1: -0.4px;

    --fs-h2: 26px;
    --ls-h2: -0.3px;

    --fs-h3: 22px;
    --ls-h3: -0.2px;

    --fs-h4: 18px;
    --fs-h5: 16px;

    --fs-body-lg: 16px;
    --lh-body-lg: 1.5;
  }
}


/* ===== Base rules (what the React site gets from global.css), zero specificity so components still win ===== */

:where(.v2, .v2 *, .v2 *::before, .v2 *::after) { box-sizing: border-box; }
:where(.v2) { font-family: var(--font-body); color: var(--color-text-primary); -webkit-text-size-adjust: 100%; }
:where(.v2) a { color: inherit; text-decoration: none; }
:where(.v2 img, .v2 svg, .v2 video) { display: block; max-width: 100%; }
:where(.v2) button { font-family: inherit; cursor: pointer; }
:where(.v2 h1, .v2 h2, .v2 h3, .v2 h4, .v2 h5, .v2 h6, .v2 p) { margin: 0; }


/* ===== Homepage V2 variables ===== */
/* =============================================================
   Homepage V2 — light theme. EVERY rule here is scoped to `.v2`
   (or a v2- class), and this file is only loaded on /v2, so
   Homepage V1 is never affected.
   Tokens: design-system colours (ink #253748, muted #4d657c,
   subtle #6f8294, line #e6eaed / #d3d8dd, surface #f5f7f8,
   tint #f2e9ff, deep #2d194f, accent #9c49ff, blue #004fff).
   ============================================================= */
.v2 {
  --v2-ink: #253748;
  --v2-muted: #4d657c;
  --v2-subtle: #6f8294;
  --v2-line: #e6eaed;
  --v2-line-2: #d3d8dd;
  --v2-surface: #f5f7f8;
  --v2-surface-2: #eff2f4;
  --v2-tint: #f2e9ff;
  --v2-deep: #2d194f;
  --v2-accent: #9c49ff;
  --v2-blue: #004fff;
  /* light creamy neutrals (cf. vapi.ai: #f2f0ed / #fcfdf3) */
  --v2-cream: #fbf9f5;
  --v2-cream-2: #f6f3ee;
  --v2-cream-line: #ebe7de;
  --v2-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-family: var(--v2-font);
}
.v2-page {
  position: relative;
  padding-top: 4px;
  background: #ffffff;
  color: var(--v2-ink);
}
.v2 .scroll-sentinel {
  display: block;
  width: 100%;
  height: 0;
  pointer-events: none;
}

/* The shared demo panels bring their own tokens through `.cd`; neutralise
   that class's section padding/background where it is only a token scope. */
.v2.cd.v2-cd,
.v2-cd.cd {
  padding: 0;
  background: transparent;
}


/* ===== Shopping assistant widget ===== */
/* =============================================================
   "Experience REVE Chat" — customer widget + REVE Chat Inbox.
   Source: approved Figma, Website redesign, node 2981-24027
   (1513 x 935 frame; widget 420 x 640, inbox 931 x 640, gap 20).

   All selectors are prefixed `cd-` / `cd__` so nothing leaks into the
   rest of the site.
   ============================================================= */
.cd {
  --cd-frame: rgba(147, 94, 239, 0.6);

  position: relative;
  z-index: 1;
  background: #f3f4f6;
  padding-block: 80px;
  padding-inline: var(--gutter);
}
.cd__inner {
  width: 100%;
  max-width: 1372px;
  margin-inline: auto;
}

/* ---------------- Heading ---------------- */
.cd__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 23px;
  text-align: center;
}
.cd__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 36px;
  line-height: 1.34;
  letter-spacing: 0;
  color: #111927;
}
.cd__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: #4d5761;
}

/* ---------------- Stage: widget (420) + inbox (fills) ---------------- */
.cd__stage {
  display: flex;
  align-items: stretch;
  gap: 20px;
}
.cd__col {
  min-width: 0;
  height: 640px;
}
.cd__col--customer {
  flex: 0 0 420px;
  transition: flex-basis 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Expanded widget: wider, same height. The inbox keeps at least 480px. */
.cd__stage[data-expanded='true'] .cd__col--customer {
  flex-basis: clamp(420px, calc(100% - 500px), 640px);
}
.cd__col--business {
  flex: 1 1 0;
}

/* ---------------- Perspective switcher (below desktop) ---------------- */
.cd-switch {
  display: none;
  gap: 4px;
  width: fit-content;
  margin: 0 auto 16px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #e6e8ed;
  border-radius: 12px;
}
.cd-switch__btn {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: #4d5761;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cd-switch__btn.is-active {
  background: #22133b;
  color: #ffffff;
}
.cd-switch__btn:focus-visible {
  outline: 2px solid #004fff;
  outline-offset: 2px;
}

/* Shared Inter UI for both panels */
.cd-widget,
.cd-inbox {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
.cd-widget h3,
.cd-inbox h3,
.cd-widget h4,
.cd-inbox h4,
.cd-widget p,
.cd-inbox p {
  margin: 0;
  font-family: inherit;
  letter-spacing: 0;
}
.cd-widget button,
.cd-inbox button {
  font-family: inherit;
  cursor: pointer;
}
.cd-widget img,
.cd-inbox img {
  display: block;
  max-width: none;
}

/* =============================================================
   Customer widget — "Small View" 420 x 640
   ============================================================= */
.cd-widget {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #eff2f4;
  border: 1.25px solid var(--cd-frame);
  border-radius: 16px;
  overflow: hidden;
}

.cd-widget__header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 16px;
  background-image: linear-gradient(
    144.02deg,
    rgb(21, 12, 35) 1.37%,
    rgb(45, 25, 79) 60.93%,
    rgb(77, 43, 135) 100%
  );
}
.cd-widget__back {
  flex: none;
  width: 6.25px;
  height: 11.25px;
  margin-inline: -0.625px;
}
.cd-widget__identity {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cd-widget__avatar {
  display: flex;
  flex: none;
  align-items: center;
  padding: 6.545px;
  border: 0.818px solid rgba(255, 255, 255, 0.3);
  border-radius: 24.545px;
  background-image: linear-gradient(
    110deg,
    rgb(150, 120, 239) 15.3%,
    rgb(156, 73, 255) 49.97%,
    rgb(174, 98, 255) 82.77%
  );
}
.cd-widget__avatar-icon {
  display: block;
  width: 22.909px;
  height: 22.909px;
  background: #ffffff;
  -webkit-mask: url('../../images/home-v2-hero/commerce/fig/widget/ai-agent.svg') center / 22.909px 22.909px no-repeat;
  mask: url('../../images/home-v2-hero/commerce/fig/widget/ai-agent.svg') center / 22.909px 22.909px no-repeat;
}
.cd-widget__name {
  flex: 1 0 0;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}
.cd-widget__tools {
  display: flex;
  flex: none;
  gap: 8px;
}
.cd-widget__tool {
  display: flex;
  box-sizing: border-box;
  padding: 8px;
  background: rgba(29, 35, 42, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.cd-widget__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px 14px;
  background: #ffffff;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cd-widget__composer {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px 12px;
  background: #ffffff;
  border: 1px solid #eff2f4;
}
.cd-widget__circle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #d3d8dd;
  border-radius: 82px;
  background: #fbfcfc;
}
.cd-widget__field {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 36px;
  padding: 6px 8px 6px 14px;
  border: 1px solid #d3d8dd;
  border-radius: 82px;
  background: #fbfcfc;
}
.cd-widget__input {
  flex: 1 0 0;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  color: #253748;
}
.cd-widget__input::placeholder {
  color: #4d657c;
  opacity: 1;
}
.cd-widget__field img {
  flex: none;
  width: 22px;
  height: 22px;
}
.cd-widget__circle img {
  width: 20px;
  height: 20px;
}
.cd-widget__circle:focus-visible {
  outline: 2px solid #004fff;
  outline-offset: 2px;
}
/* Active composer: only the border colour changes (Blue 90), no outline. */
.cd-widget__field {
  transition: border-color 0.15s ease;
}
.cd-widget__field:focus-within {
  border-color: #004fff;
}

/* =============================================================
   REVE Chat Inbox — "Inbox-open" 931 x 640
   ============================================================= */
.cd-inbox {
  display: flex;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 6px;
  background: #ffffff;
  border: 1.25px solid var(--cd-frame);
  border-radius: 16px;
  overflow: hidden;
}

/* ---- Navigation rail (48) ---- */
.cd-nav {
  display: flex;
  flex: 0 0 48px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  background-image: linear-gradient(
    102.8deg,
    rgb(21, 12, 35) 16.06%,
    rgb(45, 25, 79) 59.15%,
    rgb(77, 43, 135) 87.41%
  );
  overflow: hidden;
}
.cd-nav__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
}
.cd-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  opacity: 0.9;
}
.cd-nav__item--active {
  opacity: 1;
  background-image: linear-gradient(202.25deg, rgb(126, 77, 204) 6.85%, rgb(148, 94, 239) 82.8%);
}

/* Working area: the conversation + the visitor-info rail share ONE outer
   off-white 100 border with rounded corners (Figma "Frame 2147224081"). */
.cd-inbox__main {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #e6eaed;
  border-radius: 8px;
  overflow: hidden;
}

/* ---- Right rail (44) ---- */
.cd-rail {
  display: flex;
  flex: 0 0 40px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
  background: #ffffff;
  border-left: 1px solid #e6e8ed;
}
.cd-rail__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 12px 6px 0;
}
.cd-rail__stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.cd-rail__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.cd-rail__ico--sm {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.cd-rail__divider {
  align-self: center;
  width: 12px;
  height: 1px;
  margin: 4px 0;
}
.cd-rail__woo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #873eff;
  overflow: hidden;
}
.cd-rail__woo img {
  width: 12.772px;
  height: 3.496px;
}
.cd-rail__sf {
  width: 16px;
  height: 16px;
  object-fit: cover;
}

/* ---- Conversation panel ---- */
.cd-chat {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  background: #fbfbfb;
  overflow: hidden;
}
/* Chat background: the supplied 824 x 628 wallpaper, filling the panel. */
.cd-chat__wall {
  position: absolute;
  inset: 0;
  background: #fbfbfb url('../../images/home-v2-hero/commerce/fig/inbox/chat-bg.webp') center / cover no-repeat;
  pointer-events: none;
}
.cd-chat__header {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 10px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e6e8ed;
}
.cd-chat__avatar {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
}
.cd-chat__avatar > img {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  object-fit: cover;
}
.cd-chat__channel {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  padding: 2px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cd-chat__title {
  flex: 1 0 0;
  min-width: 0;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: #253748;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-chat__title span {
  font-weight: 400;
  color: #6f8294;
}
.cd-chat__btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 0;
  background: transparent;
}
.cd-chat__btn--ghost {
  border-radius: 6px;
}
.cd-chat__btn--outline {
  height: 28px;
  border: 1px solid #e6e8ed;
  border-radius: 8px;
  background: #ffffff;
}
.cd-chat__btn--filled {
  height: 28px;
  border-radius: 8px;
  background: #e6eaed;
}
.cd-chat__btn:focus-visible {
  outline: 2px solid #004fff;
  outline-offset: 2px;
}
.cd-chat__log {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* "Sales AI Agent engaged" confirmation card */
.cd-engaged {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  margin: 0 13px 10px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e6eaed;
  border-radius: 10px;
}
.cd-engaged__text {
  flex: 1 0 0;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  color: #4d657c;
}
.cd-engaged__actions {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.cd-ibtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 12px;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
}
.cd-ibtn--secondary {
  background: #eff2f4;
  color: #4d657c;
}
.cd-ibtn--primary {
  background: #004fff;
  color: #ffffff;
}
.cd-ibtn:focus-visible {
  outline: 2px solid #004fff;
  outline-offset: 2px;
}
.cd-ibtn--primary:focus-visible {
  outline-color: #22133b;
}

/* =============================================================
   Responsive
   ============================================================= */
/* The popup's actions drop under its text before anything overflows. */
@media (max-width: 1240px) {
  .cd-engaged {
    flex-wrap: wrap;
  }
  .cd-engaged__actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

/* Below this the two interfaces cannot sit side by side: show one at a
   time, with a switch. Both stay mounted so the conversation is kept. */
@media (max-width: 1079px) {
  .cd-switch {
    display: flex;
  }
  .cd__stage {
    justify-content: center;
  }
  .cd__col--customer {
    flex: 0 1 420px;
    transition: none;
  }
  /* One panel at a time: expanding lets the widget use the full row. */
  .cd__stage[data-expanded='true'] .cd__col--customer {
    flex: 1 1 100%;
    max-width: 720px;
  }
  .cd__col--business {
    flex: 1 1 0;
  }
  .cd__stage[data-view='customer'] .cd__col--business,
  .cd__stage[data-view='business'] .cd__col--customer {
    display: none;
  }
  .cd__stage[data-view='business'] .cd__col--business {
    flex: 1 1 100%;
  }
  .cd__col {
    height: clamp(520px, 78dvh, 640px);
  }
}

@media (max-width: 760px) {
  .cd {
    padding-block: 64px;
  }
  .cd__title {
    font-size: 28px;
  }
  /* The inbox keeps its conversation panel; chrome that no longer fits
     is hidden. */
  .cd-nav,
  .cd-rail {
    display: none;
  }
  .cd-inbox {
    padding: 0;
    gap: 0;
  }
  .cd-inbox__main {
    border: 0;
    border-radius: 0;
  }
  .cd-engaged {
    margin: 0 10px 10px;
    padding: 12px;
  }
  .cd-chat__header {
    padding-inline: 12px;
  }
}

@media (max-width: 480px) {
  .cd__col--customer {
    flex-basis: 100%;
  }
}

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

/* Header "expand" button: a real button that looks like the other tools. */
button.cd-widget__tool--btn {
  margin: 0;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
button.cd-widget__tool--btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
button.cd-widget__tool--btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
/* On phones the widget already fills the width: nothing to expand. */
@media (max-width: 560px) {
  button.cd-widget__tool--btn {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd__col--customer {
    transition: none;
  }
}


/* ===== Shopping assistant cards ===== */
/* =============================================================
   Interactive conversation styles (customer widget + inbox log).
   Compact scale: 13px messages, 12px controls, 11px metadata,
   6–12px spacing. Colours come from the existing widget / inbox
   tokens in CommerceDemo.css.
   ============================================================= */
.cd {
  --cd-ink: #253748;
  --cd-ink-2: #414651;
  --cd-muted: #4d657c;
  --cd-subtle: #6f8294;
  --cd-line: #e6eaed;
  --cd-line-2: #d3d8dd;
  --cd-surface: #eff2f4;
  --cd-tint: #f2e9ff;
  --cd-deep: #2d194f;
  --cd-accent: #9c49ff;
  --cd-focus: #004fff;
}

.cd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------- auto-hiding scrollbar
   Thin, no track. The thumb is transparent at rest and only appears while
   scrolling (class toggled by useAutoHideScrollbar). Chromium/Safari use
   a 5px indicator (Gray 20) with a 2px gap; Firefox falls back to the standard
   properties (its "thin" is the narrowest it offers). */
.cd-scroll::-webkit-scrollbar {
  width: 7px; /* 5px indicator + 2px gap on the right */
  height: 7px;
  background: transparent;
}
.cd-scroll::-webkit-scrollbar-track,
.cd-scroll::-webkit-scrollbar-corner {
  background: transparent;
}
.cd-scroll::-webkit-scrollbar-thumb {
  border-right: 2px solid transparent; /* the 2px gap */
  border-radius: 999px;
  background-color: transparent;
  background-clip: padding-box;
  transition: background-color 0.25s ease;
}
.cd-scroll.is-scrolling::-webkit-scrollbar-thumb {
  background-color: #d3d8dd; /* Gray 20 */
}
@supports not selector(::-webkit-scrollbar) {
  .cd-scroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .cd-scroll.is-scrolling {
    scrollbar-color: #d3d8dd transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-scroll::-webkit-scrollbar-thumb {
    transition: none;
  }
}

/* ---------------------------------------------------------- messages */
.cd-widget__body {
  gap: 10px;
  padding: 14px;
  scroll-behavior: auto;
}
.cd-msg {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
  animation: cd-msg-in 0.18s ease both;
}
.cd-msg--wide {
  width: 100%;
}
.cd-msg--user {
  align-items: flex-end;
}
.cd-msg--bare {
  gap: 0;
}
.cd-msg__bubble {
  max-width: 84%;
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.cd-msg--assistant .cd-msg__bubble {
  align-self: flex-start;
  background: var(--cd-surface);
  color: var(--cd-ink);
  border-radius: 4px 14px 14px 14px;
}
.cd-msg--user .cd-msg__bubble {
  background: var(--cd-deep);
  color: #ffffff;
  border-radius: 14px 4px 14px 14px;
}
@keyframes cd-msg-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------- chips */
.cd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cd-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px; /* 28px tall (was 32px) */
  border: 1px solid var(--cd-line);
  border-radius: 999px;
  background: #fbfcfc;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--cd-muted);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cd-chip-btn:hover {
  background: var(--cd-tint);
  border-color: rgba(147, 94, 239, 0.45);
  color: var(--cd-deep);
}
.cd-chip-btn:active {
  background: #e6d6ff;
}
.cd-chip-btn.is-on {
  background: var(--cd-tint);
  border-color: rgba(147, 94, 239, 0.7);
  color: var(--cd-deep);
  font-weight: 600;
}
.cd-chip-btn:focus-visible,
.cd-btn:focus-visible,
.cd-link:focus-visible,
.cd-type:focus-visible,
.cd-carousel__nav:focus-visible,
.cd-carousel__track:focus-visible,
.cd-pcard__cmp:focus-visible,
.cd-stepper button:focus-visible {
  outline: 2px solid var(--cd-focus);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .cd-chip-btn {
    min-height: 32px; /* was 36px */
    padding-inline: 12px;
  }
  /* The button stays 24px tall; an invisible halo keeps the tap target
     comfortable on touch screens. */
  .cd-btn {
    position: relative;
  }
  .cd-btn::after {
    content: '';
    position: absolute;
    inset: -5px 0;
  }
  .cd-widget__input {
    font-size: 16px; /* stops iOS zooming into the field */
  }
}

/* ----------------------------------------------------------- buttons */
.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  height: 24px; /* compact; text is centred by the flex alignment */
  padding: 0 12px;
  border: 1px solid var(--cd-line-2);
  border-radius: 8px;
  background: #ffffff;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  color: var(--cd-ink);
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cd-btn:hover:not(:disabled) {
  background: var(--cd-surface);
}

/* Primary button — REVE "New Design System" Button, default variant, size
   default: 32px, radius 8, padding 0 10, Inter Medium 13/20, blue/90 fill,
   blue/100 hover, 2px white gap + 2px blue ring on focus, 50% when disabled. */
.cd-btn--primary {
  height: 32px;
  gap: 6px;
  padding: 0 10px;
  border-color: #004fff;
  border-radius: 8px;
  background: #004fff; /* blue/90 */
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.cd-btn--primary:hover:not(:disabled) {
  background: #0047e5; /* blue/100 */
  border-color: #0047e5;
}
.cd-btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #004fff;
}
.cd-btn--primary:disabled {
  opacity: 0.5;
}
.cd-btn--ghost.is-on {
  background: var(--cd-tint);
  border-color: rgba(147, 94, 239, 0.6);
  color: var(--cd-deep);
}
.cd-btn--block {
  width: 100%;
}
.cd-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cd-btn--primary:disabled {
  opacity: 0.5;
}
.cd-link {
  padding: 2px 0;
  border: 0;
  background: none;
  font-size: 12px;
  line-height: 18px;
  color: var(--cd-focus);
  text-align: left;
}
.cd-link:hover {
  text-decoration: underline;
}
.cd-link--strong {
  font-weight: 600;
}

.cd-card {
  width: 100%;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--cd-line);
  border-radius: 12px;
}
.cd-note {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-superseded {
  margin: 0;
  align-self: center;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}

/* ---------------------------------------------------------- activity */
.cd-activity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 18px;
  color: var(--cd-muted);
}
.cd-activity__step {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cd-activity--done {
  display: flex;
  flex-direction: row; /* the base .cd-activity stacks; this line is icon + text */
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  color: var(--cd-subtle);
}
.cd-check {
  flex: none;
  color: #1f9d55;
}
.cd-spinner {
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--cd-line-2);
  border-top-color: var(--cd-accent);
  border-radius: 50%;
  animation: cd-spin 0.7s linear infinite;
}
.cd-spinner--sm {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}
@keyframes cd-spin {
  to {
    transform: rotate(360deg);
  }
}

/* -------------------------------------------------------------- tags */
.cd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-tags li {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cd-surface);
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-muted);
}

/* ------------------------------------------------- visual type cards */
.cd-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.cd-type {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--cd-line);
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cd-type:hover {
  border-color: rgba(147, 94, 239, 0.6);
  background: #fbf8ff;
}
.cd-type__img {
  width: 100%;
  height: auto;
  margin-bottom: 4px;
  border-radius: 8px;
}
.cd-type__name {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--cd-ink);
}
.cd-type__line {
  font-size: 11px;
  line-height: 15px;
  color: var(--cd-muted);
}
.cd-type__line--muted {
  color: var(--cd-subtle);
}
.cd-multi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* ----------------------------------------------------------- summary */
.cd-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-summary__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-summary__rows li {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
}
.cd-summary__k {
  color: var(--cd-subtle);
}
.cd-summary__v {
  color: var(--cd-ink);
  font-weight: 500;
}

/* ---------------------------------------------------------- products */
.cd-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
.cd-img--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--cd-surface);
  font-weight: 700;
  color: var(--cd-muted);
}
.cd-price {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--cd-ink);
}
.cd-stock {
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.cd-stock--in_stock {
  background: #e8f7ee;
  color: #1a7f45;
}
.cd-stock--low_stock {
  background: #fff4e0;
  color: #a4570c;
}
.cd-stock--out_of_stock {
  background: #fdecec;
  color: #b42318;
}

.cd-carousel {
  position: relative;
  width: 100%;
}
.cd-carousel__track {
  display: flex;
  gap: 8px;
  margin-right: -14px;
  padding: 0 14px 2px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cd-carousel__track::-webkit-scrollbar {
  display: none;
}
.cd-carousel__nav {
  position: absolute;
  top: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--cd-line-2);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(37, 55, 72, 0.18);
  color: var(--cd-ink);
}
.cd-carousel__nav--prev {
  left: -6px;
}
.cd-carousel__nav--next {
  right: 0;
}
.cd-carousel__foot {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}

.cd-pcard {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 158px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--cd-line);
  border-radius: 12px;
  scroll-snap-align: start;
  transition: border-color 0.15s ease;
}
.cd-pcard:hover {
  border-color: rgba(147, 94, 239, 0.55);
}
.cd-pcard__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.cd-pcard__open:focus-visible {
  outline: 2px solid var(--cd-focus);
  outline-offset: 1px;
}
.cd-pcard__img {
  aspect-ratio: 1 / 1; /* square product image */
  height: auto;
  border-radius: 0;
}
.cd-pcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
}
.cd-pcard__name {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--cd-ink);
}
.cd-pcard__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
}
.cd-pcard__line {
  flex: 1;
  margin: 0;
  font-size: 11px;
  line-height: 15px;
  color: var(--cd-muted);
}


.cd-pcard__media {
  position: relative;
}
.cd-pcard__cmp {
  color: #4d657c; /* the Compare.svg colour */
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--cd-line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}
.cd-pcard__cmp::before {
  content: '';
  position: absolute;
  inset: -8px; /* larger touch target than the 24px circle */
}
.cd-pcard__cmp:hover {
  background: var(--cd-tint);
}
.cd-pcard__cmp.is-on {
  background: var(--cd-deep);
  border-color: var(--cd-deep);
  color: #ffffff;
}
.cd-pcard__cmp:focus-visible {
  outline: 2px solid var(--cd-focus);
  outline-offset: 2px;
}

/* ----------------------------------------------------------- details */
.cd-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-details__top {
  display: flex;
  gap: 10px;
}
.cd-details__img {
  flex: none;
  width: 72px;
  height: 72px;
}
.cd-details__why {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--cd-muted);
}
.cd-details__meta {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-specs {
  margin: 0;
}
.cd-specs div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-top: 1px solid var(--cd-line);
  font-size: 12px;
  line-height: 16px;
}
.cd-specs dt {
  flex: none;
  color: var(--cd-subtle);
}
.cd-specs dd {
  margin: 0;
  text-align: right;
  color: var(--cd-ink);
}

/* ----------------------------------------------------------- compare */
.cd-compare {
  position: relative;
  padding: 4px 0 6px;
  --cmp-gap: 6px;
}
/* The table scrolls sideways inside the card; the label column stays put
   and is an opaque white block, so product cells slide cleanly under it. */
.cd-compare__scroll {
  overflow-x: auto;
  padding: 0 0 2px;
  overscroll-behavior-x: contain;
  /* Columns snap next to the label block, so a half-cut column never stays
     beside the labels when scrolling stops. */
  scroll-snap-type: x mandatory;
  scroll-padding-left: calc(78px + var(--cmp-gap));
}
.cd-compare__scroll:focus-visible {
  outline: 2px solid var(--cd-focus);
  outline-offset: -2px;
  border-radius: 10px;
}
.cd-compare__table {
  /* label + N fixed-width columns (--col is set from the card width in JS) */
  box-sizing: border-box;
  width: calc(78px + var(--cols, 2) * (var(--col, 100px) + var(--cmp-gap)) + 8px);
  padding-right: 8px;
}
.cd-compare__row {
  display: grid;
  grid-template-columns: 78px repeat(var(--cols, 2), var(--col, 100px));
  column-gap: var(--cmp-gap);
  border-top: 1px solid var(--cd-line);
  font-size: 11px;
  line-height: 15px;
  color: var(--cd-ink);
}
/* Vertical padding lives in the cells so the white label block has no gaps
   between rows for product text to show through. */
.cd-compare__row > * {
  padding-block: 4px;
}
.cd-compare__row > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  padding-left: 8px;
  background: #ffffff;
  /* extend the white over the column gap */
  box-shadow: var(--cmp-gap) 0 0 #ffffff;
}
/* soft fade, so content slides under the labels instead of being cut hard */
.cd-compare__row > :first-child::after {
  display: none; /* only while the table is scrolled; never over the first column at rest */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + var(--cmp-gap));
  width: 16px;
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
  pointer-events: none;
}
.cd-compare.is-scrolled .cd-compare__row > :first-child::after {
  display: block;
}
.cd-compare__row > :not(:first-child) {
  scroll-snap-align: start;
}
.cd-compare__row--head {
  align-items: end;
  border-top: 0;
}
/* The header row bottom-aligns product names; its empty label cell must still
   span the full height so the white block hides images/titles scrolling under it. */
.cd-compare__row--head > :first-child {
  align-self: stretch;
}
.cd-compare__prod {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
.cd-compare__img {
  width: 56px;
  height: 56px;
}
.cd-compare__k {
  color: var(--cd-subtle);
}
.cd-compare__row span {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* soft edge when more columns are hidden on the right */
.cd-compare.has-more::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 24px;
  width: 14px;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
}
.cd-compare__hint {
  margin: 4px 0 0;
  padding: 0 10px;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-compare__row span.is-best {
  position: relative;
  z-index: 0;
  margin: 2px -4px;
  padding: 2px 4px;
  border-radius: 6px;
  background: var(--cd-tint);
  font-weight: 600;
  color: var(--cd-deep);
}

/* ------------------------------------------------------------- cart */
.cd-addcart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}
.cd-addcart__top {
  display: flex;
  gap: 12px;
}
.cd-addcart__img {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 10px;
}
.cd-addcart__img {
  animation: cd-img-swap 0.28s ease-out both;
}
@keyframes cd-img-swap {
  from {
    opacity: 0.2;
    transform: scale(0.94);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-addcart__img {
    animation: none;
  }
}
.cd-addcart__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.cd-addcart__brand {
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cd-subtle);
}
.cd-addcart__name {
  margin: 1px 0 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--cd-ink);
}
.cd-addcart__facts {
  margin-top: 2px;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-muted);
}
.cd-addcart__priceRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.cd-addcart__price {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cd-ink);
}
.cd-addcart__opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
}
.cd-opt__label {
  flex: none;
  width: 56px;
  font-size: 12px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-opt__value {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--cd-ink);
}
.cd-swatches {
  display: flex;
  gap: 8px;
  padding: 4px;
}
.cd-swatch {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 50%;
  background: var(--sw);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cd-swatch:hover {
  transform: scale(1.08);
}
.cd-swatch.is-on {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #004fff;
}
.cd-swatch:focus-visible {
  outline: 2px solid #004fff;
  outline-offset: 4px;
}
.cd-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.cd-field__label {
  min-width: 56px;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cd-line-2);
  border-radius: 999px;
  overflow: hidden;
}
.cd-stepper button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: #ffffff;
  font-size: 15px;
  line-height: 1;
  color: var(--cd-ink);
}
.cd-stepper button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cd-stepper output {
  min-width: 26px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--cd-ink);
}
.cd-addcart__total {
  margin-left: auto;
}
.cd-cartsum {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px;
}
.cd-cartsum p,
.cd-cartsum h4 {
  margin: 0;
}
.cd-cartsum__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cd-cartsum__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--cd-ink);
}
.cd-cartsum__count {
  font-size: 12px;
  line-height: 16px;
  color: var(--cd-subtle);
}
/* Momentary add-to-cart confirmation: collapses away after a moment. */
.cd-cartsum__toast {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}
.cd-cartsum__toast.is-on {
  grid-template-rows: 1fr;
  opacity: 1;
}
.cd-cartsum__toast p {
  min-height: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 16px;
  color: #1a7f45;
}
.cd-cartsum__items {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-cartsum__items li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.cd-cartsum__items li + li {
  border-top: 1px dotted var(--cd-line-2);
}
.cd-cartsum__img {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 8px;
}
.cd-cartsum__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cd-cartsum__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--cd-ink);
}
.cd-cartsum__meta {
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-cartsum__price {
  flex: none;
  align-self: flex-start;
  padding-top: 1px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--cd-ink);
}
.cd-cartsum__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--cd-line);
  font-size: 12px;
  line-height: 18px;
  color: var(--cd-muted);
}
.cd-cartsum__sum strong {
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--cd-ink);
}
@media (prefers-reduced-motion: reduce) {
  .cd-cartsum__toast {
    transition: none;
  }
}

/* Row bits still used by the checkout review + order confirmation cards. */
.cd-cartadded__ok {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: #1a7f45;
}
.cd-cart__img {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 6px;
}
.cd-cart__name {
  flex: 1;
  color: var(--cd-ink);
}
.cd-cart__name small {
  display: block;
  font-size: 11px;
  color: var(--cd-subtle);
}

/* ---------------------------------------------------------- composer */
.cd-widget__circle--send,
.v2-hero .cd-widget__circle--send {
  background: #efe3fd;
  border-color: #efe3fd;
  color: #7c3aed;
}
.cd-widget__circle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ------------------------------------------------------------ checkout */
.cd-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-form__step {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cd-subtle);
}
.cd-form__row {
  display: flex;
  gap: 8px;
}
.cd-fld {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cd-fld__label {
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-muted);
}
.cd-fld__input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--cd-line-2);
  border-radius: 8px;
  background: #ffffff;
  font: inherit;
  font-size: 13px;
  color: var(--cd-ink);
}
.cd-fld__input::placeholder {
  color: #9aa9b8;
}
.cd-fld__input:focus {
  outline: 2px solid var(--cd-focus);
  outline-offset: 0;
  border-color: transparent;
  background: #ffffff;
}
.cd-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}
.cd-form__hint {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--cd-muted);
}
.cd-form__demo {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  color: #a4570c;
}
.cd-radios {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}
.cd-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--cd-line-2);
  border-radius: 10px;
  background: #fbfcfc;
  cursor: pointer;
}
.cd-radio.is-on {
  border-color: rgba(147, 94, 239, 0.7);
  background: #fbf8ff;
}
.cd-radio input {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--cd-deep);
}
.cd-radio:has(input:focus-visible) {
  outline: 2px solid var(--cd-focus);
  outline-offset: 1px;
}
.cd-radio__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--cd-ink);
}
.cd-radio__main small {
  font-size: 11px;
  color: var(--cd-subtle);
}
.cd-radio__fee {
  flex: none;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  color: var(--cd-ink);
  text-align: right;
}
.cd-seg {
  display: flex;
  padding: 2px;
  gap: 2px;
  border-radius: 10px;
  background: var(--cd-surface);
}
.cd-seg__btn {
  flex: 1;
  padding: 6px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--cd-muted);
}
.cd-seg__btn.is-on {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(37, 55, 72, 0.14);
  font-weight: 600;
  color: var(--cd-deep);
}
.cd-seg__btn:focus-visible {
  outline: 2px solid var(--cd-focus);
  outline-offset: 1px;
}
@media (pointer: coarse) {
  .cd-fld__input {
    height: 40px;
    font-size: 16px;
  }
}

/* ------------------------------------------------------ review / order */
.cd-review,
.cd-order {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-review p,
.cd-order p {
  margin: 0;
}
.cd-review__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-review__items li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
}
.cd-review__rows,
.cd-totals {
  margin: 0;
}
.cd-review__rows > div {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--cd-line);
  font-size: 12px;
  line-height: 16px;
}
.cd-review__rows--plain > div {
  grid-template-columns: 110px 1fr;
}
.cd-review__rows dt {
  color: var(--cd-subtle);
}
.cd-review__rows dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--cd-ink);
}
.cd-review__rows dd small {
  display: block;
  font-size: 11px;
  color: var(--cd-subtle);
}
.cd-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--cd-muted);
}
.cd-totals dd {
  margin: 0;
}
.cd-totals__total {
  margin-top: 2px;
  padding-top: 6px !important;
  border-top: 1px solid var(--cd-line);
  font-size: 13px !important;
  font-weight: 700;
  color: var(--cd-ink) !important;
}

.cd-orderlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 6px;
  list-style: none;
}
.cd-orderlist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font: inherit;
}
button.cd-orderlist__row {
  cursor: pointer;
}
button.cd-orderlist__row:hover {
  background: var(--cd-surface);
}
button.cd-orderlist__row:focus-visible {
  outline: 2px solid var(--cd-focus);
  outline-offset: 1px;
}
.cd-orderlist__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--cd-ink);
}
.cd-orderlist__main small {
  font-size: 11px;
  color: var(--cd-subtle);
}

/* ------------------------------------------------------------ tracking */
.cd-track {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}
.cd-track p {
  margin: 0;
}
.cd-track__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cd-track__id {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--cd-ink);
}
.cd-track__badge {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--cd-tint);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  color: var(--cd-deep);
}
.cd-track__badge.is-done {
  background: #e8f7ee;
  color: #1a7f45;
}
.cd-track__badge.is-cancelled {
  background: #fdecec;
  color: #b42318;
}
.cd-track__meta {
  margin-top: -4px !important; /* sits right under the order id */
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-muted);
}
/* ---- delivery route: progress bar with a van on it ---- */
.cd-route {
  position: relative;
  padding-top: 26px;
  margin: 0;
}
.cd-route__van {
  position: absolute;
  top: 0;
  /* centre follows the step, but the 52px van always stays inside the bar */
  left: clamp(26px, calc(var(--p, 0) * 100%), calc(100% - 26px));
  width: 52px;
  height: 30px;
  transform: translateX(-50%);
  transition: left 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 1px 1px rgba(37, 55, 72, 0.2));
  z-index: 1;
}
.cd-van {
  display: block;
}
.cd-route__bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--cd-line);
  overflow: hidden;
}
.cd-route__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(26px, calc(var(--p, 0) * 100%), calc(100% - 26px)); /* ends under the van */
  border-radius: inherit;
  background: linear-gradient(90deg, #7e4dcc, #9c49ff);
  transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cd-route.is-delivered .cd-route__fill {
  background: #1f9d55;
}
.cd-route.is-cancelled .cd-route__fill {
  background: #d9a09a;
}
.cd-route.is-cancelled .cd-route__van {
  opacity: 0.55;
  filter: grayscale(1);
}
.cd-route__labels {
  display: grid;
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 11px;
  line-height: 14px;
  color: var(--cd-subtle);
}
.cd-route__labels li {
  min-width: 0;
  padding: 0 2px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.cd-route__labels li.is-done {
  color: var(--cd-muted);
}
.cd-route__labels li.is-current {
  font-weight: 600;
  color: var(--cd-ink);
}
/* The van "drives" only while the order is in transit. */
.cd-route.is-live .cd-van__wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: cd-wheel 0.7s linear infinite;
}
.cd-route.is-live .cd-van {
  animation: cd-van-bob 0.9s ease-in-out infinite;
}
@keyframes cd-wheel {
  to {
    transform: rotate(360deg);
  }
}
@keyframes cd-van-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.7px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-route__van,
  .cd-route__fill {
    transition: none;
  }
  .cd-route.is-live .cd-van__wheel,
  .cd-route.is-live .cd-van {
    animation: none;
  }
}

.cd-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-timeline__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 16px;
  width: 2px;
  height: calc(100% - 2px);
  background: var(--cd-line-2);
}
.cd-timeline__item.is-done:not(:last-child)::before {
  background: #1f9d55;
}
.cd-timeline__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 2px solid var(--cd-line-2);
  border-radius: 50%;
  background: #ffffff;
  z-index: 1;
}
.cd-timeline__item.is-done .cd-timeline__dot {
  border-color: #1f9d55;
  background: #1f9d55;
  color: #ffffff;
}
.cd-timeline__item.is-done .cd-check {
  color: #ffffff;
  width: 10px;
  height: 10px;
}
.cd-timeline__item.is-current .cd-timeline__dot {
  border-color: var(--cd-accent);
  background: var(--cd-tint);
  animation: cd-pulse 1.6s ease-in-out infinite;
}
.cd-timeline__item.is-current,
.cd-timeline__item.is-done {
  color: var(--cd-ink);
}
.cd-timeline__label {
  font-weight: 500;
  line-height: 16px;
}
.cd-timeline__item.is-current .cd-timeline__label {
  font-weight: 600;
}
.cd-timeline__item.is-todo .cd-timeline__label {
  font-weight: 500;
}
.cd-timeline__item.is-stopped .cd-timeline__dot {
  border-color: #b42318;
  background: #fdecec;
}
.cd-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cd-timeline__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.cd-timeline__details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  line-height: 14px;
  color: var(--cd-muted);
}
.cd-timeline__details li {
  position: relative;
  padding-left: 8px;
  overflow-wrap: anywhere;
}
.cd-timeline__details li::before {
  content: '-';
  position: absolute;
  left: 0;
}
.cd-agent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--cd-line);
  border-radius: 8px;
  background: #ffffff;
}
.cd-agent__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cd-tint);
  color: var(--cd-deep);
  font-size: 12px;
  font-weight: 600;
}
.cd-agent__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.cd-agent__name {
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  color: var(--cd-ink);
}
.cd-agent__meta {
  font-size: 11px;
  line-height: 15px;
  color: var(--cd-subtle);
}
/* Call = the standard secondary (outline) button, compact. */
.cd-agent__call {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  font-weight: 500;
  text-decoration: none;
}
.cd-timeline__time {
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
  font-variant-numeric: tabular-nums;
}
@keyframes cd-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(156, 73, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(156, 73, 255, 0);
  }
}
.cd-track__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cd-orderupdate {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-orderupdate strong {
  font-weight: 600;
  color: var(--cd-ink);
}
.cd-orderupdate__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cd-accent);
}
.cd-orderupdate.is-done .cd-orderupdate__dot {
  background: #1f9d55;
}
.cd-ib__activity--order {
  width: min(78%, 360px);
}

/* ============================================================
   Business inbox — conversation log (read-only projection)
   ============================================================ */
.cd-chat__log {
  padding: 12px 20px 14px;
  scroll-behavior: auto;
}
.cd-chat__log:focus-visible {
  outline: 2px solid var(--cd-focus);
  outline-offset: -2px;
}
.cd-ib__day {
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
}
.cd-ib__day span {
  padding: 2px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e6e8ed;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-ib__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-ib {
  display: flex;
  gap: 8px;
  animation: cd-msg-in 0.18s ease both;
}
.cd-ib--ai {
  justify-content: flex-end;
}
.cd-ib--system {
  justify-content: center;
}
.cd-ib__avatar {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  object-fit: cover;
}
.cd-ib__ai {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background-image: linear-gradient(110deg, rgb(150, 120, 239) 15%, rgb(156, 73, 255) 50%, rgb(174, 98, 255) 83%);
  position: relative;
}
.cd-ib__ai::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: #ffffff;
  -webkit-mask: url('../../images/home-v2-hero/commerce/fig/widget/ai-agent.svg') center / contain no-repeat;
  mask: url('../../images/home-v2-hero/commerce/fig/widget/ai-agent.svg') center / contain no-repeat;
}
.cd-ib__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: min(78%, 520px);
}
.cd-ib--ai .cd-ib__col {
  align-items: flex-end;
}
.cd-ib__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-ib__meta strong {
  font-weight: 600;
  color: var(--cd-ink-2);
}
.cd-ib__tag {
  padding: 0 5px;
  border-radius: 4px;
  background: var(--cd-tint);
  font-size: 10px;
  font-weight: 600;
  color: var(--cd-deep);
}
/* Same bubble shape as the widget: 14px radius with a 4px tail corner and
   10px 12px padding. Customer = white; AI agent = Blue 20 (#F2F7FF) with a
   hard 1px / 1px shadow one step darker (Blue 30, #E1EDFF). */
.cd-ib__bubble {
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e6e8ed;
  border-radius: 4px 14px 14px 14px;
  font-size: 13px;
  line-height: 20px;
  color: var(--cd-ink);
}
.cd-ib--ai .cd-ib__bubble {
  background: #f2f7ff; /* Blue 20 */
  border-color: transparent;
  border-radius: 14px 4px 14px 14px;
  box-shadow: 1px 1px 0 #e1edff; /* Blue 30 */
}
.cd-ib__bubble p {
  margin: 0;
}
.cd-ib__title {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: var(--cd-ink-2);
}
.cd-ib__text + .cd-ib__lines,
.cd-ib__title + .cd-ib__lines {
  margin-top: 2px;
}
.cd-ib__lines {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 18px;
  color: var(--cd-muted);
}
.cd-ib__offered {
  margin-top: 4px !important;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-ib__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-ib__tags li {
  padding: 1px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e6e8ed;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-muted);
}
.cd-ib__activity {
  width: min(78%, 420px);
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e6e8ed;
  border-radius: 10px;
}
.cd-ib__activity .cd-ib__title {
  display: flex;
  justify-content: space-between;
  margin: 0 0 2px;
  font-size: 11px;
  color: var(--cd-subtle);
}
.cd-ib__activity .cd-ib__title time {
  font-weight: 400;
}
.cd-ib__activity ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-ib__activity li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--cd-muted);
}
.cd-ib__activity li svg {
  flex: none;
  color: #1f9d55;
}

/* ============================================================
   Small screens
   ============================================================ */
@media (max-width: 480px) {
  .cd-ib__col {
    max-width: 88%;
  }
  .cd-chat__log {
    padding-inline: 12px;
  }
  .cd-pcard {
    width: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cd-msg,
  .cd-ib {
    animation: none;
  }
  .cd-timeline__item.is-current .cd-timeline__dot {
    animation: none;
  }
  .cd-spinner {
    animation: none;
    border-top-color: var(--cd-line-2);
    background: radial-gradient(circle, var(--cd-accent) 0 2px, transparent 3px);
  }
  .cd-chip-btn,
  .cd-btn,
  .cd-type {
    transition: none;
  }
}

/* A wider widget shows slightly bigger product cards. */
.cd__stage[data-expanded='true'] .cd-pcard {
  width: 176px;
}

/* =============================================================
   Motion — AI typing + staggered entrances
   ============================================================= */
.cd-msg--user {
  animation: cd-user-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cd-user-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}
.cd-msg__bubble--typed,
.cd-typing {
  animation: cd-bubble-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: left top;
}
@keyframes cd-bubble-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
}
/* "Thinking" dots */
.cd-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  box-sizing: border-box;
}
.cd-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cd-subtle);
  animation: cd-dot 1.1s ease-in-out infinite;
}
.cd-typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.cd-typing span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes cd-dot {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
/* Words appear with a soft fade; the layout is already final. */
.cd-word {
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
.cd-word.is-in {
  opacity: 1;
}

/* Cards, tables and other content rise in; chips and cards stagger one by one. */
.cd-msg--assistant > :not(.cd-msg__bubble):not(.cd-chips) {
  animation: cd-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cd-chips > .cd-chip-btn {
  animation: cd-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--n, 0) * 70ms);
}
.cd-chips > :nth-child(1) { --n: 0; }
.cd-chips > :nth-child(2) { --n: 1; }
.cd-chips > :nth-child(3) { --n: 2; }
.cd-chips > :nth-child(4) { --n: 3; }
.cd-chips > :nth-child(5) { --n: 4; }
.cd-chips > :nth-child(6) { --n: 5; }
.cd-chips > :nth-child(n + 7) { --n: 6; }
.cd-pcard {
  animation: cd-rise 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--n, 0) * 90ms);
}
.cd-pcard:nth-child(1) { --n: 0; }
.cd-pcard:nth-child(2) { --n: 1; }
.cd-pcard:nth-child(3) { --n: 2; }
.cd-pcard:nth-child(4) { --n: 3; }
.cd-pcard:nth-child(n + 5) { --n: 4; }
@keyframes cd-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-msg--user,
  .cd-msg__bubble--typed,
  .cd-typing,
  .cd-msg--assistant > :not(.cd-msg__bubble):not(.cd-chips),
  .cd-chips > .cd-chip-btn,
  .cd-pcard {
    animation: none;
  }
  .cd-word {
    transition: none;
  }
}

/* =============================================================
   Visual search — image upload card + image messages
   ============================================================= */
.cd-msg__image {
  display: block;
  width: 132px;
  max-width: 60%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px 4px 14px 14px;
  border: 1px solid var(--cd-line);
}
.cd-ib__img {
  display: block;
  width: 96px;
  height: 96px;
  margin-bottom: 6px;
  object-fit: cover;
  border-radius: 8px;
}
.cd-imgup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.cd-imgup__input {
  display: none;
}
.cd-imgup__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border: 1px dashed var(--cd-line-2);
  border-radius: 10px;
  color: var(--cd-subtle);
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cd-imgup__drop.is-over {
  border-color: #004fff;
  background: #f2f7ff; /* Blue 20 */
}
.cd-imgup__hint {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--cd-muted);
}
.cd-imgup__drop.is-busy {
  min-height: 72px;
  justify-content: center;
}
.cd-imgup__busy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cd-imgup__spin {
  width: 14px;
  height: 14px;
  border: 2px solid var(--cd-line-2);
  border-top-color: #004fff;
  border-radius: 50%;
  animation: cd-imgspin 0.7s linear infinite;
}
@keyframes cd-imgspin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-imgup__spin {
    animation-duration: 2s;
  }
}
.cd-imgup__fine {
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  color: var(--cd-subtle);
}
.cd-imgup__preview {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cd-imgup__preview img {
  flex: none;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--cd-line);
}
.cd-imgup__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.cd-imgup__error {
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: #fdecec;
  font-size: 11px;
  line-height: 16px;
  color: #b42318;
}
.cd-imgup__samples {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cd-imgup__label {
  font-size: 11px;
  line-height: 14px;
  color: var(--cd-subtle);
}
.cd-imgup__samples ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-imgup__sample {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  line-height: 14px;
  color: var(--cd-muted);
}
.cd-imgup__sample img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--cd-line);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cd-imgup__sample:hover img {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px #004fff;
}
.cd-imgup__sample:focus-visible {
  outline: 2px solid #004fff;
  outline-offset: 3px;
  border-radius: 8px;
}

/* =============================================================
   Sample image picker (sheet over the widget)
   ============================================================= */
.cd-widget {
  position: relative;
}
.cd-imgup__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cd-picker {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  font-family: inherit;
}
.cd-picker__scrim {
  position: absolute;
  inset: 0;
  background: rgba(17, 25, 39, 0.55);
  animation: cd-scrim-in 0.2s ease-out both;
}
.cd-picker__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  height: min(560px, 100%);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(17, 25, 39, 0.28);
  overflow: hidden;
  animation: cd-dialog-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cd-scrim-in {
  from {
    opacity: 0;
  }
}
@keyframes cd-dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
.cd-picker__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--cd-line);
}
.cd-picker__head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--cd-ink);
}
.cd-picker__head p {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--cd-muted);
}
.cd-picker__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cd-surface);
  color: var(--cd-muted);
  cursor: pointer;
}
.cd-picker__close:hover {
  background: var(--cd-line);
}
.cd-picker__close:focus-visible,
.cd-picker__item:focus-visible,
.cd-picker__filter:focus-visible {
  outline: 2px solid #004fff;
  outline-offset: 2px;
}
.cd-picker__filters {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  overflow-x: auto;
  background: #f8fafb;
  border-bottom: 1px solid var(--cd-line);
}
.cd-picker__filter {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--cd-line-2);
  border-radius: 999px;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
  color: var(--cd-muted);
  cursor: pointer;
}
.cd-picker__filter span {
  color: var(--cd-subtle);
}
.cd-picker__filter:hover {
  background: var(--cd-surface);
}
.cd-picker__filter.is-on {
  border-color: #004fff;
  background: #f2f7ff; /* Blue 20 */
  color: #004fff;
}
.cd-picker__filter.is-on span {
  color: inherit;
}
.cd-picker__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px;
  overflow-y: auto;
}
.cd-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px 12px;
  margin: 0;
  padding: 3px;
  list-style: none;
}
.cd-picker__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cd-picker__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 4px;
  overflow: hidden;
  border: 1px solid var(--cd-line);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cd-picker__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cd-picker__item:hover .cd-picker__thumb,
.cd-picker__item:focus-visible .cd-picker__thumb {
  border-color: #004fff;
  box-shadow: 0 0 0 1px #004fff;
}
.cd-picker__name {
  display: block;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--cd-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-picker__kind {
  display: block;
  font-size: 11px;
  line-height: 14px;
  color: var(--cd-subtle);
}
.cd-picker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-top: 1px solid var(--cd-line);
  font-size: 12px;
  color: var(--cd-subtle);
}
.cd-picker__foot .cd-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
}
@media (max-width: 480px) {
  .cd-picker {
    padding: 12px;
  }
  .cd-picker__grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
  .cd-picker__foot span {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-picker__scrim,
  .cd-picker__dialog {
    animation: none;
  }
}

/* ------------------------------------------- payment step: radio cards */
.cd-pays {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.cd-pay {
  border: 1px solid var(--cd-line-2);
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cd-pay.is-on {
  border-color: rgba(147, 94, 239, 0.8);
  box-shadow: 0 0 0 3px rgba(147, 94, 239, 0.12);
}
.cd-pay__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
}
.cd-pay__head input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cd-deep);
}
.cd-pay__head:focus-within {
  outline: none;
}
/* focus ring for keyboard users only: a mouse click leaves no lingering box */
.cd-pay:has(.cd-pay__head input:focus-visible) {
  outline: 2px solid var(--cd-focus);
  outline-offset: 1px;
}
.cd-pay__head input:focus,
.cd-pay__head input:focus-visible {
  outline: none;
}
.cd-pay__title {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--cd-ink);
}
.cd-pay__sub {
  margin-left: auto;
  font-size: 11px;
  line-height: 16px;
  color: var(--cd-subtle);
}
.cd-pay__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 12px 12px 38px;
  animation: cd-msg-in 0.18s ease both;
}

/* ------------------------------------------------ cancel-order reason */
.cd-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cd-fld__area {
  height: auto;
  min-height: 72px;
  padding: 8px 10px;
  resize: none;
  line-height: 18px;
}
.cd-form .cd-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   Wide (expanded hero) widget: content stays on the assistant side,
   like any other message, and nothing needs to scroll sideways.
   ------------------------------------------------------------------ */
.cd-widget--wide .cd-msg--assistant {
  max-width: 760px;
}
.cd-widget--wide .cd-carousel__track {
  flex-wrap: wrap;
  margin-right: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
.cd-widget--wide .cd-carousel__nav {
  display: none;
}
.cd-widget--wide .cd-pcard {
  width: 176px;
}

/* ------------------------------------------------ post-call summary (V2) */
.cd-callsum {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #fbfcfc;
  border: 1px solid var(--cd-line);
  border-radius: 12px;
}
.cd-callsum p {
  margin: 0;
}
.cd-callsum__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--cd-ink);
}
.cd-callsum__title svg {
  color: var(--cd-subtle);
}
.cd-callsum__list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 17px;
  color: var(--cd-muted);
}
.cd-callsum__list li::marker {
  color: var(--cd-subtle);
}
.cd-callsum__empty {
  font-size: 12px;
  line-height: 17px;
  color: var(--cd-muted);
}


/* ===== Homepage V2 hero ===== */
/* ---- hero ---- */
.v2-hero {
  position: relative;
  min-height: 820px; /* Figma: 864px header frame, minus the 44px banner */
  padding: 120px 70px 60px; /* widget top is 120px under the banner (y 164); 60px below it */
  background: #ffffff url('../../images/home-v2-hero/v2/header-bg.svg') 0 -44px / 100% 864px no-repeat;
  font-family: var(--v2-font);
  color: #111927;
}
.v2-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 666px) minmax(0, 666px);
  justify-content: space-between;
  column-gap: 40px;
  max-width: 1372px;
  margin-inline: auto;
}
.v2-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  margin-top: 100px; /* text group starts at y 264 in the 1512 frame (220 under the banner) */
  width: 100%;
  max-width: 666px;
  align-self: start;
}
.v2-hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.v2-hero__title {
  margin: 0;
  min-height: 124px; /* Figma fixes the headline box at 124px */
  font-family: var(--font-heading); /* Parkinsans Medium */
  font-size: 48px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  color: #111927;
}
.v2-hero__sub {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #384250;
}
.v2-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.v2-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 48px;
  padding: 0 20px;
  overflow: hidden;
  border-radius: 12px;
  font-family: var(--font-heading); /* Parkinsans Medium */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  transition: filter 0.15s ease, background-color 0.15s ease;
}
.v2-cta span {
  position: relative;
}
.v2-cta--primary {
  color: #ffffff;
  background-image: linear-gradient(94.222deg, #412375 0.567%, #5d369e 47.659%, #412375 99.333%);
}
.v2-cta--primary:hover {
  filter: brightness(1.12);
}
.v2-cta--outline {
  border: 1px solid #563194;
  color: #563194;
}
.v2-cta--outline:hover {
  background: rgba(86, 49, 148, 0.06);
  color: #563194;
}

/* stage: frosted frame + blurred glow + widget (offsets from the 666 x 560 frame) */
.v2-hero__stage {
  position: relative;
  width: 100%;
  max-width: 666px;
  height: 640px; /* the widget; the frame sits 40px lower, as in Figma */
  justify-self: end;
}
.v2-hero__frost {
  position: absolute;
  inset: 40px 0 auto 0;
  height: 560px;
  border-radius: 40px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-image: linear-gradient(194.597deg, rgba(255, 255, 255, 0) 17.658%, rgba(241, 241, 241, 0) 95.458%);
}
.v2-hero__glow {
  position: absolute;
  top: 57px;
  left: 20px;
  right: 20px;
  height: 526px;
  border-radius: 30px;
  overflow: hidden;
  filter: blur(24px);
  pointer-events: none;
}
.v2-hero__glow img {
  position: absolute;
  top: -72.71%;
  left: 0;
  width: 100%;
  height: 180.63%;
  max-width: none;
}
.v2-hero__widget.cd.v2-cd {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(420px, 100%);
  height: 640px;
  transform: translateX(-50%);
}
.v2-preview__parked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  border: 1px dashed var(--v2-line-2);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 4px 0 #8656d6;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v2-muted);
}
.v2-preview__parked p {
  margin: 0;
}

/* ---- hero widget shell: Figma 3028:10985 (420 x 640). Content keeps its own look. ---- */
.v2-hero .cd-widget {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 20px;
  box-shadow: 0 4px 0 #8656d6;
}
.v2-hero .cd-widget__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  gap: 14px;
  padding: 12px 16px 8px;
  background-image: linear-gradient(180deg, #f5f7f8, rgba(245, 247, 248, 0));
}
/* Figma: 12px backdrop blur under the header, feathered so it has no hard edge */
.v2-hero .cd-widget__header::before,
.v2-hero .cd-widget__composer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.v2-hero .cd-widget__header::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}
.v2-hero .cd-widget__composer::before {
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 55%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0, #000 55%, transparent 100%);
}
.v2-hero .cd-widget__back {
  display: none;
}
.v2-hero .cd-widget__identity {
  gap: 7px;
}
.v2-hero .cd-widget__avatar {
  padding: 0;
  border: 0;
  background: none;
}
.v2-hero .cd-widget__avatar-icon {
  background: linear-gradient(110deg, #9678ef 15.299%, #9c49ff 49.973%, #ae62ff 82.771%);
}
.v2-hero .cd-widget__name {
  flex: none;
  margin-left: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: #253748;
}
.v2-hero .cd-widget__badge {
  flex: none;
  margin-left: -3px;
  padding: 4px;
  border-radius: 4px;
  background: #f0ecff;
  color: #6c69f9;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
}
.v2-hero .cd-widget__identity::after {
  content: '';
  flex: 1;
}
.v2-hero .cd-widget__tools {
  gap: 6px;
}
.v2-hero .cd-widget__tool {
  background: #f5f7f8;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 38px;
}
.v2-hero .cd-widget__tool:last-child {
  background: #ebeef1;
  border-color: rgba(255, 255, 255, 0.12);
}
.v2-hero .cd-widget__body {
  padding: 72px 16px 92px;
  gap: 16px;
  background: #ffffff;
  scroll-padding-top: 72px;
  /* Messages fade out before the header and composer: nothing shows behind the agent name,
     header controls or the input. The mask is on the scroll viewport, so it stays put while
     the content scrolls; the fade zones match the header (52px) and composer (68px) heights. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 44px,
    rgba(0, 0, 0, 0.35) 58px,
    #000 74px,
    #000 calc(100% - 94px),
    rgba(0, 0, 0, 0.35) calc(100% - 76px),
    transparent calc(100% - 58px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 44px,
    rgba(0, 0, 0, 0.35) 58px,
    #000 74px,
    #000 calc(100% - 94px),
    rgba(0, 0, 0, 0.35) calc(100% - 76px),
    transparent calc(100% - 58px),
    transparent 100%
  );
}
.v2-hero .cd-widget__composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  gap: 10px;
  padding: 12px 16px 16px;
  border: 0;
  background: linear-gradient(180deg, rgba(245, 247, 248, 0), #f5f7f8);
}
.v2-hero .cd-widget__field {
  height: 40px;
  padding: 10px 10px 10px 16px;
  border-color: #b2bbc5;
  background: #ffffff;
}
.v2-hero .cd-widget__input {
  font-size: 14px;
  line-height: 22px;
}
.v2-hero .cd-widget__circle {
  width: 40px;
  height: 40px;
  border-color: #b2bbc5;
  background: #ffffff;
}
.v2-hero .cd-widget__circle img {
  width: 24px;
  height: 24px;
}
.v2-hero .cd-widget__field:focus-within {
  border-color: #004fff;
}

/* ---- responsive ---- */
@media (max-width: 1300px) {
  .v2-hero {
    padding-inline: 40px;
  }
  .v2-hero__title {
    font-size: 42px;
  }
}
@media (max-width: 1080px) {
  .v2-hero {
    min-height: 0;
    padding: 96px 24px 64px;
  }
  .v2-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 56px;
  }
  .v2-hero__copy {
    margin-top: 32px;
    max-width: 720px;
  }
  .v2-hero__stage {
    justify-self: center;
  }
}
@media (max-width: 980px) {
  .v2b {
    padding-inline: 48px;
  }
  .v2h__bar {
    padding-inline: 24px;
  }
  .v2h__nav,
  .v2h__link--act {
    display: none;
  }
  .v2h__toggle {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    border: 1px solid #d2d6db;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
  }
  .v2h__toggle span,
  .v2h__toggle span::before {
    position: absolute;
    left: 10px;
    width: 14px;
    height: 1.5px;
    border-radius: 1px;
    background: #111927;
    content: '';
    transition: transform 0.2s ease;
  }
  .v2h__toggle span {
    top: 14px;
  }
  .v2h__toggle span::before {
    top: 6px;
    left: 0;
  }
  .v2h__toggle span.is-open {
    transform: translateY(3px) rotate(45deg);
  }
  .v2h__toggle span.is-open::before {
    transform: translateY(-6px) rotate(-90deg);
    top: 6px;
  }
  .v2h__actions {
    gap: 12px;
  }
  .v2h__panel {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 4px;
    padding: 12px 24px 20px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #e5e7eb;
  }
  .v2h__panel.is-open {
    display: flex;
  }
  .v2h__panel a:not(.v2h__cta) {
    padding: 10px 0;
    color: #384250;
    font-size: 15px;
  }
  .v2h__panel .v2h__cta {
    margin-top: 8px;
  }
}
@media (max-width: 640px) {
  .v2b {
    height: auto;
    min-height: 48px;
    padding: 8px 44px 8px 12px;
    white-space: normal;
    text-align: left;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .v2b__group {
    flex-wrap: wrap;
    gap: 8px;
  }
  .v2-hero {
    padding: 88px 16px 56px;
  }
  .v2-hero__title {
    font-size: 34px;
  }
  .v2-hero__sub {
    font-size: 16px;
  }
  .v2-hero__stage {
    height: 640px;
  }
  .v2-hero__frost,
  .v2-hero__glow {
    left: 0;
    right: 0;
  }
  .v2-hero__widget.cd.v2-cd {
    top: 0;
    height: 620px;
  }
  .v2h__cta {
    padding-inline: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2b__cta,
  .v2-cta,
  .v2h__link {
    transition: none;
  }
}

/* ---- hero entrance (left column only): fade + 16px rise, staggered, plays once ---- */
@keyframes v2-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.v2-hero__title,
.v2-hero__sub,
.v2-hero__cta {
  animation: v2-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.v2-hero__sub {
  animation-delay: 140ms;
}
.v2-hero__cta {
  animation-delay: 280ms;
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero__title,
  .v2-hero__sub,
  .v2-hero__cta {
    animation: none;
  }
}

/* ---- expanded hero: Figma "Home-dark header v2.0.1 expanded" (3045:6241) ---- */
.v2-hero__copy[aria-hidden='true'] {
  display: none; /* narrow layouts swap instantly; desktop fades it (below) */
}
.v2-hero[data-expanded='true'] .v2-hero__stage {
  grid-column: 1 / -1;
  max-width: 1372px;
  height: 640px;
  justify-self: center;
}
/* frame 1348 x 656 at 8px above the widget, glow inset 20px (Figma 3045:6247) */
.v2-hero[data-expanded='true'] .v2-hero__frost {
  top: -8px;
  left: 13px;
  right: 11px;
  height: 656px;
  background-image: linear-gradient(188.571deg, rgba(255, 255, 255, 0) 17.658%, rgba(241, 241, 241, 0) 95.458%);
}
.v2-hero[data-expanded='true'] .v2-hero__glow {
  top: 12px;
  left: 33px;
  right: 31px;
  height: 616px;
}
.v2-hero[data-expanded='true'] .v2-hero__glow img {
  top: -82.71%;
  left: -13.99%;
  width: 113.99%;
  height: 202.97%;
}
.v2-hero[data-expanded='true'] .v2-hero__widget.cd.v2-cd {
  width: min(911px, 100%);
}
/* narrow layouts: soft fade/scale after the first toggle */
@keyframes v2-stage-in {
  from {
    opacity: 0.55;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes v2-widget-in {
  from {
    opacity: 0.6;
    transform: translateX(-50%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
.v2-hero[data-motion='on'] .v2-hero__frost,
.v2-hero[data-motion='on'] .v2-hero__glow {
  animation: v2-stage-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.v2-hero[data-motion='on'] .v2-hero__widget.cd.v2-cd {
  animation: v2-widget-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (max-width: 640px) {
  .v2-hero[data-expanded='true'] .v2-hero__stage {
    height: 640px;
  }
}

/* desktop: the widget, frame and glow really grow and slide to the centre.
   Everything is absolutely placed in the hero grid box so each property can transition. */
@media (min-width: 1081px) {
  .v2-hero {
    --sw: min(666px, calc(50% - 20px)); /* default stage width = right column */
    --ease: cubic-bezier(0.65, 0, 0.35, 1);
    --dur: 640ms;
  }
  .v2-hero__inner {
    position: relative;
    display: block;
    min-height: 640px;
  }
  .v2-hero__copy,
  .v2-hero__copy[aria-hidden='true'] {
    display: flex;
    position: relative;
    top: 100px; /* offset instead of margin: a margin would collapse through the grid box */
    margin-top: 0;
    width: var(--sw);
    transition: opacity 280ms ease, visibility 0s linear 0s;
  }
  .v2-hero__copy[aria-hidden='true'] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
  }
  .v2-hero .v2-hero__stage,
  .v2-hero[data-expanded='true'] .v2-hero__stage {
    position: absolute;
    inset: 0 0 auto 0;
    grid-column: auto;
    width: auto;
    max-width: none;
    height: 640px;
    justify-self: auto;
    pointer-events: none;
  }
  .v2-hero__frost,
  .v2-hero[data-expanded='true'] .v2-hero__frost {
    top: 40px;
    right: 0;
    left: auto;
    width: var(--sw);
    height: 560px;
    animation: none !important;
    transition: top var(--dur) var(--ease), right var(--dur) var(--ease), width var(--dur) var(--ease),
      height var(--dur) var(--ease);
  }
  .v2-hero__glow,
  .v2-hero[data-expanded='true'] .v2-hero__glow {
    top: 57px;
    right: 20px;
    left: auto;
    width: calc(var(--sw) - 40px);
    height: 526px;
    animation: none !important;
    transition: top var(--dur) var(--ease), right var(--dur) var(--ease), width var(--dur) var(--ease),
      height var(--dur) var(--ease);
  }
  .v2-hero__glow img,
  .v2-hero[data-expanded='true'] .v2-hero__glow img {
    transition: top var(--dur) var(--ease), left var(--dur) var(--ease), width var(--dur) var(--ease),
      height var(--dur) var(--ease);
  }
  .v2-hero__widget.cd.v2-cd,
  .v2-hero[data-expanded='true'] .v2-hero__widget.cd.v2-cd {
    top: 0;
    left: calc(100% - var(--sw) / 2);
    width: min(420px, var(--sw));
    animation: none !important;
    pointer-events: auto;
    transition: left var(--dur) var(--ease), width var(--dur) var(--ease);
  }
  .v2-hero[data-expanded='true'] .v2-hero__frost {
    top: -8px;
    right: 11px;
    width: calc(100% - 24px);
    height: 656px;
  }
  .v2-hero[data-expanded='true'] .v2-hero__glow {
    top: 12px;
    right: 31px;
    width: calc(100% - 64px);
    height: 616px;
  }
  .v2-hero[data-expanded='true'] .v2-hero__widget.cd.v2-cd {
    left: 50%;
    width: min(911px, 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero,
  .v2-hero__inner,
  .v2-hero__copy,
  .v2-hero__frost,
  .v2-hero__glow,
  .v2-hero__glow img,
  .v2-hero__widget.cd.v2-cd {
    transition: none !important;
  }
  .v2-hero[data-motion='on'] .v2-hero__frost,
  .v2-hero[data-motion='on'] .v2-hero__glow,
  .v2-hero[data-motion='on'] .v2-hero__widget.cd.v2-cd {
    animation: none;
  }
}
/* the entrance plays once on load; re-showing the copy after a collapse stays still */
.v2-hero[data-motion='on'] .v2-hero__title,
.v2-hero[data-motion='on'] .v2-hero__sub,
.v2-hero[data-motion='on'] .v2-hero__cta {
  animation: none;
}

/* Figma widget frame: 1px OUTSIDE stroke, a vertical gradient from transparent (top) to #8656d6 (bottom),
   on top of the 4px #8656d6 drop shadow. Drawn as a masked ring just outside the 420 x 640 frame. */
.v2-hero__widget.cd.v2-cd::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 5;
  padding: 1px;
  border-radius: 21px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #8656d6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}


/* ===== AI voice call ===== */
/* AI voice-call overlay (Homepage V2). Light theme, Inter, REVE tokens. */
.v2call {
  --c-ink: #253748;
  --c-muted: #4d657c;
  --c-subtle: #6f8294;
  --c-line: #e6eaed;
  --c-deep: #2d194f;
  --c-accent: #9c49ff;
  --c-tint: #f2e9ff;
  position: fixed;
  inset: 0;
  z-index: 2147482500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}
.v2call *,
.v2call *::before,
.v2call *::after {
  box-sizing: border-box;
}
.v2call button {
  font-family: inherit;
  cursor: pointer;
}
.v2call__scrim {
  position: absolute;
  inset: 0;
  background: rgba(17, 25, 39, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: v2c-fade 0.28s ease-out both;
}
.v2call__dialog {
  position: relative;
  width: min(1040px, 100%);
  max-height: min(680px, 100%);
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(37, 25, 79, 0.28), 0 4px 0 #8656d6;
  outline: none;
  animation: v2c-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes v2c-fade {
  from {
    opacity: 0;
  }
}
@keyframes v2c-pop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.965);
  }
}
.v2call__x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: flex;
  padding: 8px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--c-muted);
}
.v2call__x:hover {
  background: #f5f7f8;
}
.v2call button:focus-visible,
.v2call input:focus-visible {
  outline: 2px solid #004fff;
  outline-offset: 2px;
}

.v2call__grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  height: min(680px, calc(100vh - 48px));
  animation: v2c-fade 0.3s ease-out both;
}

/* ---------------- stage (left) ---------------- */
.v2call__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 24px 22px;
  background: radial-gradient(120% 80% at 50% 0%, #f1e8ff 0%, #faf7ff 55%, #ffffff 100%);
  border-right: 1px solid var(--c-line);
  text-align: center;
}
.v2call__demo {
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(156, 73, 255, 0.1);
  color: #5a2fa0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.v2call__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  margin: 26px 0 16px;
}
.v2call__face {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: linear-gradient(135deg, #9678ef, #9c49ff 52%, #ae62ff);
  box-shadow: 0 10px 30px rgba(156, 73, 255, 0.35);
}
.v2call__face-icon {
  width: 46px;
  height: 46px;
  background: #ffffff;
  -webkit-mask: url('../../images/home-v2-hero/commerce/fig/widget/ai-agent.svg') center / contain no-repeat;
  mask: url('../../images/home-v2-hero/commerce/fig/widget/ai-agent.svg') center / contain no-repeat;
}
.v2call__ripple {
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(156, 73, 255, 0.45);
  border-radius: 50%;
  opacity: 0;
}
.v2call__avatar.is-ring .v2call__ripple {
  animation: v2c-ring 2s ease-out infinite;
}
.v2call__avatar.is-live[data-state='speaking'] .v2call__ripple {
  animation: v2c-ring 1.6s ease-out infinite;
}
.v2call__avatar.is-live[data-state='listening'] .v2call__ripple {
  border-color: rgba(31, 157, 85, 0.5);
  animation: v2c-ring 2.4s ease-out infinite;
}
.v2call__avatar.is-live[data-state='thinking'] .v2call__ripple {
  animation: none;
}
.v2call__ripple--2 {
  animation-delay: 0.6s !important;
}
.v2call__ripple--3 {
  animation-delay: 1.2s !important;
}
@keyframes v2c-ring {
  0% {
    opacity: 0.8;
    transform: scale(0.82);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}
.v2call__avatar.is-ring .v2call__face {
  animation: v2c-ringshake 2s ease-in-out infinite;
}
@keyframes v2c-ringshake {
  0%,
  60%,
  100% {
    transform: none;
  }
  66% {
    transform: rotate(-4deg);
  }
  72% {
    transform: rotate(4deg);
  }
  78% {
    transform: rotate(-3deg);
  }
  84% {
    transform: rotate(3deg);
  }
}
.v2call__name {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--c-ink);
}
.v2call__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--c-muted);
  animation: v2c-rise 0.35s ease both;
}
.v2call__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
}
.is-connected .v2call__dot,
.is-speaking .v2call__dot {
  background: #1f9d55;
}
.is-listening .v2call__dot {
  background: #1f9d55;
  animation: v2c-blink 1.2s ease-in-out infinite;
}
.is-thinking .v2call__dot {
  background: var(--c-accent);
  animation: v2c-blink 0.9s ease-in-out infinite;
}
@keyframes v2c-blink {
  50% {
    opacity: 0.3;
  }
}
@keyframes v2c-rise {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}
.v2call__timer {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--c-subtle);
}

/* waveform */
.v2call__wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 56px;
  margin: 14px 0 6px;
}
.v2call__wave i {
  width: 4px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ae62ff, #9678ef);
  opacity: 0.35;
  transition: height 0.3s ease, opacity 0.3s ease;
}
.v2call__wave.is-speaking i {
  opacity: 0.95;
  animation: v2c-bar 0.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.09s);
}
.v2call__wave.is-ringing i,
.v2call__wave.is-connected i {
  animation: v2c-idle 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.12s);
}
.v2call__wave.is-listening i {
  background: #1f9d55;
  opacity: 0.7;
  animation: v2c-idle 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.1s);
}
.v2call__wave.is-thinking i {
  opacity: 0.5;
  animation: v2c-idle 1s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.05s);
}
@keyframes v2c-bar {
  0%,
  100% {
    height: 8px;
  }
  50% {
    height: var(--h);
  }
}
@keyframes v2c-idle {
  0%,
  100% {
    height: 5px;
  }
  50% {
    height: var(--l);
  }
}

/* controls */
.v2call__controls {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.v2call__ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 66px;
  padding: 11px 0 8px;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--c-ink);
  font-size: 11px;
  font-weight: 500;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.v2call__ctl:hover:not(:disabled) {
  background: #f5f7f8;
}
.v2call__ctl:active:not(:disabled) {
  transform: scale(0.96);
}
.v2call__ctl:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.v2call__ctl.is-on {
  background: var(--c-tint);
  border-color: rgba(156, 73, 255, 0.5);
  color: var(--c-deep);
}
.v2call__ctl--end {
  border-color: #e5484d;
  background: #e5484d;
  color: #ffffff;
}
.v2call__ctl--end:hover:not(:disabled) {
  background: #d23b40;
}
.v2call__voice {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 16px;
  color: var(--c-subtle);
}

/* ---------------- transcript (right) ---------------- */
.v2call__chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 26px 28px 22px;
}
.v2call__caption {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 132px;
  padding: 20px 22px;
  border-radius: 20px;
  background: #f5f7f8;
}
.v2call__hint,
.v2call__cap,
.v2call__think {
  margin: 0;
}
.v2call__hint {
  font-size: 15px;
  line-height: 22px;
  color: var(--c-muted);
  animation: v2c-rise 0.35s ease both;
}
.v2call__cap {
  font-size: 19px;
  line-height: 28px;
  font-weight: 500;
  color: var(--c-ink);
  animation: v2c-rise 0.35s ease both;
}
.v2call__cap span {
  opacity: 0.18;
  transition: opacity 0.25s ease;
}
.v2call__cap span.is-in {
  opacity: 1;
}
.v2call__cap--you {
  color: var(--c-muted);
  font-style: italic;
}
.v2call__think {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  color: var(--c-muted);
}
.v2call__think i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: v2c-blink 0.9s ease-in-out infinite;
}
.v2call__think i:nth-child(2) {
  animation-delay: 0.15s;
}
.v2call__think i:nth-child(3) {
  animation-delay: 0.3s;
}
.v2call__think span {
  margin-left: 6px;
}
.v2call__log {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 14px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.v2call__turn {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  color: var(--c-muted);
  animation: v2c-rise 0.35s ease both;
}
.v2call__turn b {
  display: block;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  color: var(--c-subtle);
}
.v2call__turn--you {
  text-align: right;
}
.v2call__turn--you b {
  color: var(--c-deep);
}
.v2call__reply {
  flex: none;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}
.v2call__mic {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: #1a7f46;
}
.v2call__pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1f9d55;
  animation: v2c-pulse 1.3s ease-out infinite;
}
@keyframes v2c-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.5);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(31, 157, 85, 0);
  }
}
.v2call__note {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 18px;
  color: #a4570c;
}
.v2call__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.v2call__chip {
  padding: 7px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.v2call__chip:hover:not(:disabled) {
  background: var(--c-tint);
  border-color: rgba(156, 73, 255, 0.5);
}
.v2call__chip:disabled {
  opacity: 0.5;
}
.v2call__form {
  display: flex;
  gap: 8px;
}
.v2call__form input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #b2bbc5;
  border-radius: 999px;
  background: #ffffff;
  font: inherit;
  font-size: 14px;
  color: var(--c-ink);
}
.v2call__form button {
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--c-deep);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}
.v2call__form button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------------- summary ---------------- */
.v2call__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: min(680px, calc(100vh - 48px));
  padding: 30px 34px 26px;
  overflow-y: auto;
  animation: v2c-rise 0.4s ease both;
}
.v2call__sum-title {
  margin: 14px 0 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}
.v2call__sum-sub {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--c-muted);
}
.v2call__rows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}
.v2call__rows div {
  padding: 6px 12px;
  border-radius: 999px;
  background: #f5f7f8;
  font-size: 12px;
}
.v2call__rows dt {
  display: inline;
  color: var(--c-subtle);
}
.v2call__rows dt::after {
  content: ': ';
}
.v2call__rows dd {
  display: inline;
  margin: 0;
  font-weight: 600;
  color: var(--c-ink);
}
.v2call__sum-h {
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-subtle);
}
.v2call__recs {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2call__recs li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
}
.v2call__recs li.is-top {
  border-color: rgba(156, 73, 255, 0.55);
  background: #fbf8ff;
}
.v2call__recs img {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: #f5f7f8;
}
.v2call__recs span {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.v2call__recs strong {
  font-size: 14px;
  line-height: 20px;
}
.v2call__recs small {
  font-size: 12px;
  color: var(--c-muted);
}
.v2call__recs em {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-tint);
  color: var(--c-deep);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}
.v2call__sum-empty {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--c-muted);
}
.v2call__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.v2call__btn {
  height: 40px;
  padding: 0 16px;
  border: 1px solid #d3d8dd;
  border-radius: 12px;
  background: #ffffff;
  color: var(--c-ink);
  font-size: 13px;
  font-weight: 600;
}
.v2call__btn:hover {
  background: #f5f7f8;
}
.v2call__btn--primary {
  border-color: var(--c-deep);
  background: var(--c-deep);
  color: #ffffff;
}
.v2call__btn--primary:hover {
  background: #3d2470;
}
.v2call__link {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-muted);
  font-size: 13px;
  text-decoration: underline;
}
.v2call__fine {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 16px;
  color: var(--c-subtle);
}
.v2call__dialog.is-ended {
  width: min(560px, 100%);
}

@media (max-width: 860px) {
  .v2call {
    padding: 0;
    align-items: stretch;
  }
  .v2call__dialog {
    width: 100%;
    max-height: none;
    border-radius: 0;
    border: 0;
  }
  .v2call__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
  }
  .v2call__stage {
    padding: 16px 16px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
  }
  .v2call__avatar {
    width: 88px;
    height: 88px;
    margin: 12px 0 8px;
  }
  .v2call__face {
    width: 72px;
    height: 72px;
  }
  .v2call__face-icon {
    width: 32px;
    height: 32px;
  }
  .v2call__wave {
    height: 32px;
    margin: 6px 0 4px;
  }
  .v2call__voice {
    display: none;
  }
  .v2call__chat {
    padding: 14px 16px 16px;
  }
  .v2call__caption {
    min-height: 96px;
    padding: 14px 16px;
  }
  .v2call__cap {
    font-size: 16px;
    line-height: 24px;
  }
  .v2call__dialog.is-ended {
    width: 100%;
  }
  .v2call__summary {
    max-height: none;
    height: 100dvh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2call__scrim,
  .v2call__dialog,
  .v2call__grid,
  .v2call__status,
  .v2call__hint,
  .v2call__cap,
  .v2call__turn,
  .v2call__summary,
  .v2call__ripple,
  .v2call__face,
  .v2call__wave i,
  .v2call__pulse,
  .v2call__dot,
  .v2call__think i {
    animation: none !important;
  }
  .v2call__wave i {
    height: 10px;
  }
}

/* voice feedback: speech detected, retry, interrupt */
.v2call__dot.is-heard {
  background: #1f9d55;
  animation: v2c-blink 0.5s ease-in-out infinite;
}
.v2call__wave.is-heard i {
  background: #1f9d55;
  opacity: 0.95;
  animation: v2c-bar 0.7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.07s);
}
.v2call__avatar.is-live[data-state='heard'] .v2call__ripple {
  border-color: rgba(31, 157, 85, 0.6);
  animation: v2c-ring 1.2s ease-out infinite;
}
.v2call__mic.is-heard {
  color: #11703a;
}
.v2call__retry {
  padding: 0;
  border: 0;
  background: none;
  color: #004fff;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.v2call__skip {
  align-self: flex-end;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 500;
}
.v2call__skip:hover {
  background: var(--c-tint);
}
.v2call__caption {
  position: relative;
  flex-wrap: wrap;
}
.v2call__note b {
  color: #8a4408;
}
.v2call__cap {
  flex: 1 1 100%;
}

.v2call__wave.is-idle i {
  background: #b2bbc5;
  opacity: 0.6;
  animation: none;
}
.v2call__avatar.is-live[data-state='listening'] .v2call__ripple {
  animation-duration: 2.4s;
}

.v2call__tap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px 16px;
  border: 1px solid rgba(156, 73, 255, 0.5);
  border-radius: 999px;
  background: var(--c-tint);
  color: var(--c-deep);
  font-size: 13px;
  font-weight: 600;
}
.v2call__tap.is-on {
  border-color: rgba(31, 157, 85, 0.6);
  background: #e8f7ee;
  color: #11703a;
}
.v2call__tap:disabled {
  opacity: 0.5;
}

.v2call__toggle {
  margin-top: 12px;
  padding: 5px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
}
.v2call__toggle.is-on {
  border-color: rgba(31, 157, 85, 0.5);
  background: #e8f7ee;
  color: #11703a;
}
.v2call__strip {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.v2call__strip li {
  display: block;
  animation: v2c-rise 0.35s ease both;
}
.v2call__pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #ffffff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.v2call__pick:hover {
  border-color: rgba(156, 73, 255, 0.6);
  background: #fbf8ff;
}
.v2call__pick:active {
  transform: scale(0.995);
}
.v2call__pick.is-top {
  border-color: rgba(156, 73, 255, 0.4);
}
.v2call__pick.is-selected {
  border-color: #9c49ff;
  background: #f6efff;
  box-shadow: 0 0 0 2px rgba(156, 73, 255, 0.22);
}
.v2call__pick em {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #9c49ff;
  color: #ffffff;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}
.v2call__pick em.is-soft {
  background: var(--c-tint);
  color: var(--c-deep);
}
.v2call__strip img {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: #f5f7f8;
}
.v2call__strip span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.v2call__strip strong {
  font-size: 13px;
  line-height: 18px;
}
.v2call__strip small {
  font-size: 11px;
  line-height: 14px;
  color: var(--c-muted);
}

/* =====================================================================
   Compact call: lives inside the chat widget (same footprint as the chat)
   ===================================================================== */
.v2cc {
  --c-ink: #253748;
  --c-muted: #4d657c;
  --c-subtle: #6f8294;
  --c-line: #e6eaed;
  --c-deep: #2d194f;
  --c-tint: #f2e9ff;
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  padding: 56px 14px 12px; /* clears the widget header that overlays the top */
  background: #ffffff;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--c-ink);
  animation: v2c-fade 0.3s ease-out both;
}
.v2cc *,
.v2cc *::before,
.v2cc *::after {
  box-sizing: border-box;
}
.v2cc button {
  font-family: inherit;
  cursor: pointer;
}
.v2cc button:focus-visible,
.v2cc input:focus-visible {
  outline: 2px solid #004fff;
  outline-offset: 2px;
}
.v2cc__top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.v2cc__avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
}
.v2cc__face {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: linear-gradient(135deg, #9678ef, #9c49ff 52%, #ae62ff);
  box-shadow: 0 6px 16px rgba(156, 73, 255, 0.3);
}
.v2cc__face-icon {
  width: 22px;
  height: 22px;
  background: #ffffff;
  -webkit-mask: url('../../images/home-v2-hero/commerce/fig/widget/ai-agent.svg') center / contain no-repeat;
  mask: url('../../images/home-v2-hero/commerce/fig/widget/ai-agent.svg') center / contain no-repeat;
}
.v2cc__ripple {
  position: absolute;
  inset: 4px;
  border: 2px solid rgba(156, 73, 255, 0.45);
  border-radius: 50%;
  opacity: 0;
}
.v2cc__avatar.is-ring .v2cc__ripple,
.v2cc__avatar.is-live[data-state='speaking'] .v2cc__ripple {
  animation: v2c-ring 1.8s ease-out infinite;
}
.v2cc__avatar.is-live[data-state='listening'] .v2cc__ripple,
.v2cc__avatar.is-live[data-state='heard'] .v2cc__ripple {
  border-color: rgba(31, 157, 85, 0.5);
  animation: v2c-ring 2.2s ease-out infinite;
}
.v2cc__ripple--2 {
  animation-delay: 0.9s !important;
}
.v2cc__avatar.is-ring .v2cc__face {
  animation: v2c-ringshake 2s ease-in-out infinite;
}
.v2cc__id {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.v2cc__name {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}
.v2cc__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--c-muted);
  animation: v2c-rise 0.3s ease both;
}
.v2cc__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
}
.is-connected .v2cc__dot,
.is-speaking .v2cc__dot,
.is-listening .v2cc__dot {
  background: #1f9d55;
}
.is-thinking .v2cc__dot {
  background: #9c49ff;
  animation: v2c-blink 0.9s ease-in-out infinite;
}
.v2cc__dot.is-heard {
  animation: v2c-blink 0.5s ease-in-out infinite;
}
.v2cc__state {
  white-space: nowrap;
}
.v2cc__sep {
  color: var(--c-subtle);
}
.v2cc__timer {
  min-width: 5ch;
  font-variant-numeric: tabular-nums;
  color: var(--c-subtle);
}
.v2cc__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
}
.v2cc__expand:hover {
  background: var(--c-tint);
  color: var(--c-deep);
}

/* compact waveform */
.v2cc__wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: none;
  width: 88px;
  height: 36px;
}
.v2cc__wave i {
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ae62ff, #9678ef);
  opacity: 0.35;
}
.v2cc__wave.is-speaking i {
  opacity: 0.95;
  animation: v2c-bar 0.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.09s);
}
.v2cc__wave.is-ringing i,
.v2cc__wave.is-connected i {
  animation: v2c-idle 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.12s);
}
.v2cc__wave.is-listening i {
  background: #1f9d55;
  opacity: 0.7;
  animation: v2c-idle 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.1s);
}
.v2cc__wave.is-heard i {
  background: #1f9d55;
  opacity: 0.95;
  animation: v2c-bar 0.7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.07s);
}
.v2cc__wave.is-thinking i {
  opacity: 0.5;
  animation: v2c-idle 1s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.05s);
}
.v2cc__wave.is-idle i {
  background: #b2bbc5;
  opacity: 0.6;
  animation: none;
}

/* captions: latest turns stay readable, older ones fade up under a soft mask */
.v2cc__caps {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  margin-top: 2px;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.3) 18%, #000 52%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.3) 18%, #000 52%);
}
.v2cc__caps::-webkit-scrollbar {
  display: none;
}
.v2cc__capsin {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 100%;
  padding: 36px 0 2px;
}
.v2cc__hint {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--c-muted);
}
.v2cc__line {
  max-width: 88%;
  margin: 0;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 18px;
  overflow-wrap: anywhere;
  animation: v2c-rise 0.3s ease both;
}
.v2cc__line--agent {
  align-self: flex-start;
  border-top-left-radius: 4px;
  background: #f5f7f8;
  color: var(--c-ink);
}
.v2cc__line--you {
  align-self: flex-end;
  border-top-right-radius: 4px;
  background: var(--c-tint);
  color: var(--c-deep);
  text-align: right;
}
.v2cc__line.is-interim {
  font-style: italic;
  opacity: 0.75;
}
.v2cc__line span.is-out {
  opacity: 0.2;
}
.v2cc__line span.is-in {
  opacity: 1;
  transition: opacity 0.2s ease;
}
.v2cc__think {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f5f7f8;
}
.v2cc__think i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9c49ff;
  animation: v2c-blink 0.9s ease-in-out infinite;
}
.v2cc__think i:nth-child(2) {
  animation-delay: 0.15s;
}
.v2cc__think i:nth-child(3) {
  animation-delay: 0.3s;
}

/* product pills + suggestions */
.v2cc__prods,
.v2cc__chips {
  display: flex;
  flex: none;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 1px;
}
.v2cc__prods::-webkit-scrollbar,
.v2cc__chips::-webkit-scrollbar {
  display: none;
}
.v2cc__prod,
.v2cc__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.v2cc__prod {
  padding-left: 5px;
}
.v2cc__prod img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #f5f7f8;
}
.v2cc__prod:hover,
.v2cc__chip:hover {
  background: var(--c-tint);
  border-color: rgba(156, 73, 255, 0.5);
}
.v2cc__prod.is-selected {
  border-color: #9c49ff;
  background: #f6efff;
  box-shadow: 0 0 0 2px rgba(156, 73, 255, 0.2);
  font-weight: 600;
}

/* mic line */
.v2cc__micline {
  flex: none;
  min-height: 20px;
  margin-top: 6px;
}
.v2cc__mic {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 500;
  color: #1a7f46;
}
.v2cc__mic.is-heard {
  color: #11703a;
}
.v2cc__mic--off {
  color: var(--c-muted);
}
.v2cc__mic--warn {
  color: #8a4408;
}
.v2cc__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1f9d55;
  animation: v2c-pulse 1.3s ease-out infinite;
}
.v2cc__retry {
  padding: 0;
  border: 0;
  background: none;
  color: #004fff;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.v2cc__type {
  display: flex;
  flex: none;
  gap: 6px;
  margin-top: 6px;
}
.v2cc__type input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #b2bbc5;
  border-radius: 999px;
  background: #ffffff;
  font: inherit;
  font-size: 13px;
  color: var(--c-ink);
}
.v2cc__type button {
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--c-deep);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
}
.v2cc__type button:disabled {
  opacity: 0.4;
}

/* bottom controls */
.v2cc__controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  flex: none;
  margin-top: 8px;
}
.v2cc__ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--c-ink);
  font-size: 10.5px;
  font-weight: 500;
  transition: background-color 0.15s ease;
}
.v2cc__ctl svg {
  width: 18px;
  height: 18px;
}
.v2cc__ctl:hover:not(:disabled) {
  background: #f5f7f8;
}
.v2cc__ctl:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.v2cc__ctl.is-on {
  border-color: rgba(156, 73, 255, 0.5);
  background: var(--c-tint);
  color: var(--c-deep);
}
.v2cc__ctl--end {
  border-color: #e5484d;
  background: #e5484d;
  color: #ffffff;
}
.v2cc__ctl--end:hover:not(:disabled) {
  background: #d23b40;
}

/* ended (compact summary) */
.v2cc--ended {
  overflow-y: auto;
}
.v2cc__tag {
  align-self: flex-start;
  margin: 8px 0 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(156, 73, 255, 0.1);
  color: #5a2fa0;
  font-size: 11px;
  font-weight: 600;
}
.v2cc__h {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.v2cc__rows {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}
.v2cc__rows span {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f5f7f8;
  font-size: 11.5px;
  color: var(--c-subtle);
}
.v2cc__rows b {
  color: var(--c-ink);
}
.v2cc__rec {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(156, 73, 255, 0.4);
  border-radius: 12px;
  background: #fbf8ff;
}
.v2cc__rec img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: #f5f7f8;
}
.v2cc__rec span {
  display: flex;
  flex-direction: column;
}
.v2cc__rec strong {
  font-size: 13px;
  line-height: 18px;
}
.v2cc__rec small {
  font-size: 11.5px;
  color: var(--c-muted);
}
.v2cc__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.v2cc__btn {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #d3d8dd;
  border-radius: 10px;
  background: #ffffff;
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 600;
}
.v2cc__btn--primary {
  border-color: var(--c-deep);
  background: var(--c-deep);
  color: #ffffff;
}
.v2cc__link {
  align-self: flex-start;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-muted);
  font-size: 12px;
  text-decoration: underline;
}
.v2cc__fine {
  margin: 10px 0 0;
  font-size: 10.5px;
  line-height: 15px;
  color: var(--c-subtle);
}

/* expanded overlay: collapse button + paused mic note (tap-to-speak button removed) */
.v2call__x--collapse {
  right: 58px;
}
.v2call__pulse.is-off {
  background: #b2bbc5;
  animation: none;
}
.v2call__mic--paused {
  color: var(--c-muted);
}
.cd-widget__tool.is-live {
  border-color: #1f9d55;
  background: #e8f7ee;
}
.cd-widget--incall .cd-widget__header {
  /* header stays exactly as it is */
}
@media (prefers-reduced-motion: reduce) {
  .v2cc,
  .v2cc__status,
  .v2cc__line,
  .v2cc__ripple,
  .v2cc__face,
  .v2cc__wave i,
  .v2cc__pulse,
  .v2cc__dot,
  .v2cc__think i {
    animation: none !important;
  }
  .v2cc__wave i {
    height: 8px;
  }
}

/* compact header: every part keeps a fixed slot, so status changes never move anything */
.v2cc__top {
  height: 56px;
}
.v2cc__id {
  flex: 1 1 0;
  min-width: 0;
}
.v2cc__name,
.v2cc__status {
  height: 18px;
  white-space: nowrap;
}
.v2cc__status {
  height: 16px;
  animation: none;
  overflow: hidden;
}
.v2cc__state {
  display: inline-block;
  flex: none;
  width: 98px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2cc__sep,
.v2cc__timer {
  flex: none;
}
.v2cc__timer {
  width: 5ch;
  min-width: 5ch;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.v2cc__dot {
  transition: background-color 0.2s ease;
}
/* returning to the chat after a call */
.v2-hero .cd-widget:not(.cd-widget--incall) .cd-widget__body {
  animation: v2c-fade 0.3s ease-out both;
}

/* compact call: three-dot menu with a confirmed Close */
.v2cm {
  position: relative;
  display: flex;
}
.v2cm__pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 150px;
  padding: 4px;
  border: 1px solid #e6eaed;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(37, 55, 72, 0.16);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  animation: v2c-rise 0.18s ease both;
}
.v2cm__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #253748;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.v2cm__item:hover {
  background: #f5f7f8;
}
.v2cm__confirm {
  width: 210px;
  padding: 8px 8px 6px;
}
.v2cm__confirm p {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: #253748;
}
.v2cm__confirm small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 16px;
  color: #4d657c;
}
.v2cm__acts {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.v2cm__btn {
  flex: 1;
  height: 32px;
  border: 1px solid #d3d8dd;
  border-radius: 8px;
  background: #ffffff;
  color: #253748;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.v2cm__btn--end {
  border-color: #e5484d;
  background: #e5484d;
  color: #ffffff;
}
.v2cm button:focus-visible {
  outline: 2px solid #004fff;
  outline-offset: 2px;
}
/* a touch more air between the agent name and its status line (the widget's `p { margin: 0 }` needs the extra specificity) */
.v2cc .v2cc__status {
  margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .v2cm__pop {
    animation: none;
  }
}