/* ============================================================
   Digital Experts - mobile corrections
   Loaded last, after de-collage.css.

   Kept as its own file rather than edited into de-site.css so the
   mobile behaviour is readable in one place, and so a change here
   never risks the 44KB base stylesheet.

   Three things live here:
     1. the background video, restored below 860px
     2. the home page's live expert window, recropped for a phone
     3. the persistent "Ask us anything" launcher, condensed
   ============================================================ */

/* ============================================================
   1. BACKGROUND VIDEO
   ------------------------------------------------------------
   de-site.css switches the hero/CTA video off entirely below
   860px:

       @media (max-width: 860px) { .de-bg-video { display:none; } }

   It was hidden rather than fixed because the iframe is sized in
   VIEWPORT units:

       width: 177.78vh;  height: 56.25vw;

   That pair is a 16:9 "cover" calculation, and it only holds when
   the video box is the same shape as the viewport. It is not: the
   hero is a band a few hundred pixels tall inside a very tall
   phone screen, so on mobile the maths returns a frame that is
   far too short for its width and the player letterboxes inside
   it - black bars top and bottom over the copy. Hiding it was the
   quick way out.

   The fix is to run the same calculation against the CONTAINER
   rather than the viewport, which is what the sizing wanted all
   along. cqw/cqh are the container-query units, and .de-bg-video
   is declared as a size container below so they have something to
   resolve against.

   The vh/vw pair in de-site.css is left in place so that a
   browser without container query support keeps the old behaviour
   rather than getting a zero-sized frame.
   ============================================================ */

/* The size container for the cover calculation. Declared at every
   width, not just inside the media query: the container has to be
   established wherever the cq units are used, and they are used
   below at all widths so the desktop crop is correct too. */
.de-bg-video { container-type: size; }

@supports (width: 1cqw) {
  .de-bg-video iframe {
    width: 177.78cqh;
    height: 56.25cqw;
    min-width: 100%;
    min-height: 100%;
  }
}

@media (max-width: 860px) {

  /* Undo de-site.css's display:none. Same specificity, later file. */
  .de-bg-video { display: block; }

  /* Restated so the fallback path is complete on its own. */
  .de-bg-video iframe {
    min-width: 100%;
    min-height: 100%;
  }

  /* The video sits further back on a phone. There is less room
     for the copy to find a dark patch to sit on, and the hero
     headline is the thing that has to survive. */
  .de-bg-video::after { background: rgba(0, 0, 0, 0.34); }
}

/* ============================================================
   2. THE LIVE EXPERT WINDOW (home page)
   ------------------------------------------------------------
   The widget on the home page is a fixed 628x284 window onto the
   live product. The page script used to scale that window down to
   fit a phone, which lands around 0.55 and puts the card's body
   copy at roughly 7px - legible in a screenshot, not on a phone.

   Below 672px the script now switches to a narrower window onto
   the same live product instead of shrinking the wide one: the
   app reflows to a stacked layout at that width, so the card is
   shown at its own size rather than a reduction. The crop offsets
   live in the page's own script; this file only carries the shell
   rules.
   ============================================================ */

#de-ask-shell {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

#de-ask-scale { transform-origin: top center; }

/* The link to the full-page conversation. Present at every width:
   on a phone it is the fallback for anyone who would rather not
   use an embedded panel at all, and on desktop it is the way to
   get the expert out of the 628x284 window and onto a whole
   screen. */
.de-ask-tab {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--de-gold-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 212, 132, 0.45);
  padding-bottom: 4px;
  transition: border-color 160ms ease;
}

.de-ask-tab:hover { border-bottom-color: var(--de-gold-light); }

@media (max-width: 860px) {
  #de-ask-modal { padding: 0 !important; }
  #de-ask-modal > div { border-radius: 0 !important; height: 100% !important; width: 100% !important; }
}

/* ============================================================
   3. THE PERSISTENT LAUNCHER, CONDENSED
   ------------------------------------------------------------
   footer.php puts an "Ask us anything" card on every page, fixed
   to the right edge and vertically centred. de-site.css then hides
   it outright below 860px:

       @media (max-width: 860px) { .de-ask-widget-root { display:none; } }

   Reasonable for that card - it is 172px wide, 200-odd tall, and
   pinned to the middle of the screen, which on a phone means a
   slab sitting across the content. But hiding it takes the one
   permanent way into the product off every mobile page, which is
   the wrong trade on the device where most of this traffic lands.

   So it is not restored as-is: it is re-laid-out as the shape a
   phone expects - a small pill in the bottom corner, thumb-height,
   out of the way of the copy. The markup is untouched. What
   changes is the axis (a vertical card becomes a horizontal pill),
   what survives (the faces and the invitation), and what goes (the
   hover tooltip, which has no meaning without a pointer; the
   "Online now" badge, whose text will not fit).

   Liveness is the one thing worth keeping from that badge, so the
   pulsing dot comes back on the avatar cluster instead - the same
   place the product itself puts it, and it costs no width.

   The link already carries target="_blank", so this opens the app
   in a new tab like the other entry points.

   NOTE ON THE ENTRANCE ANIMATION
   The desktop card slides in via de-widget-in, which is declared
   `both` after a 0.8s delay - meaning the element sits at opacity
   0 until the animation actually runs. On desktop that is fine.
   The condensed version deliberately does NOT inherit it: this is
   a persistent launcher, it is the only route into the product on
   a mobile page, and an entrance that has not run yet is an
   invisible button. Same reasoning as the home page collage,
   which was rebuilt so its finished state is the default. A
   launcher does not need a reveal; it needs to be there.
   ============================================================ */

@media (max-width: 860px) {

  .de-ask-widget-root {
    display: flex;
    top: auto;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: none;
    gap: 0;
    align-items: flex-end;
    animation: none;
  }

  /* No pointer, no hover, no tooltip. */
  .de-ask-tip { display: none; }

  /* Vertical card becomes a horizontal pill. */
  .de-ask-widget {
    display: flex;
    align-items: center;
    gap: 11px;
    width: auto;
    max-width: calc(100vw - 28px);
    padding: 9px 18px 9px 11px;
    border-radius: 999px;
  }

  /* Retarget the glow blob at the faces in their new position. */
  .de-ask-widget .de-ask-glow {
    top: -30px;
    left: -20px;
    width: 96px;
    height: 96px;
  }

  /* "Online now" cannot fit on one line next to everything else.
     The dot it carried is re-attached to the avatars below. */
  .de-ask-widget .de-ask-badge { display: none; }

  .de-ask-widget .de-ask-avatars {
    position: relative;
    height: 32px;
    margin: 0;
    flex: none;
  }

  .de-ask-widget .de-ask-avatars img {
    width: 32px;
    height: 32px;
    border-width: 1.5px;
    margin-left: -12px;
  }

  /* The liveness cue, in the product's own idiom: a lit dot on the
     corner of the faces rather than a labelled pill. */
  .de-ask-widget .de-ask-avatars::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgb(80, 200, 140);
    border: 2px solid #0E2F23;
    animation: de-widget-dot 2s ease-in-out infinite;
  }

  .de-ask-widget .de-ask-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.15;
    white-space: nowrap;
  }

  /* The "- Digital Experts -" credit is the first thing to go:
     the pill is already sitting on the brand's own site. */
  .de-ask-widget .de-ask-sub { display: none; }
}

/* de-site.css ships no reduced-motion guard for this widget, so
   the one for the condensed version is written here. */
@media (prefers-reduced-motion: reduce) {
  .de-ask-widget .de-ask-avatars::after,
  .de-ask-widget .de-ask-badge .de-dot-live { animation: none; }
}