/* ═══════════════════════════════════════════════════════════════════════════════
   DoubleDown AI — WEBSITE CHATBOT, test site

   Duval, 2026-07-29: "a proper website chatbot… without any popups… 4 shortcuts and
   a nice short opening message fitting the style, the header should be a mix between
   green and white."
   Round 2, same day: "a better icon… I don't want the logo displayed in chat… the
   shortcuts should be on top of the typing box and the typing box should not have a
   scrolling bar that is visible."

   NO POPUPS. No proactive bubble, no auto-open, no unread dot, no timed nudge. The
   launcher sits there; the customer opens it or does not.

   NO LOGO INSIDE THE PANEL. Identity is carried by the header gradient and a
   typographic DD badge. Bot messages have no avatar — which also gives every bubble
   ~34px more width to read in.

   Built from the existing design system: the double bezel, the mint hairline, the
   frosted pill, the curtain reveal. Loaded after th.css, inherits every token.
   ═══════════════════════════════════════════════════════════════════════════════ */

.ddb,.ddw,.ddw *{box-sizing:border-box}

/* ══════════════════════════════════════════════════════════════
   LAUNCHER
   ══════════════════════════════════════════════════════════════ */
.ddb{
  position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:90;
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  color:#02241A;
  background:
    radial-gradient(120% 120% at 32% 22%,rgba(255,255,255,.36),transparent 46%),
    linear-gradient(148deg,var(--glow) 0%,var(--mint) 40%,var(--emerald) 100%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:
    0 26px 54px -20px rgba(16,185,129,.7),
    0 6px 18px -8px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .55s var(--e-back),box-shadow .5s var(--e-soft),background .5s;
}
.ddb:hover{transform:translateY(-3px) scale(1.05)}
.ddb:active{transform:scale(.95)}
.ddb:focus-visible{outline:2px solid var(--mint);outline-offset:5px}

/* the AE bloom — the same object that sits behind the white prompt pill */
.ddb::before{
  content:"";position:absolute;inset:-20px;border-radius:50%;z-index:-1;
  background:radial-gradient(58% 58% at 50% 50%,rgba(52,245,173,.6),transparent 72%);
  filter:blur(18px);animation:ddpulse 4.4s ease-in-out infinite;
}
/* a hairline ring that breathes a beat behind the bloom */
.ddb::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(52,245,173,.34);
  animation:ddring 4.4s ease-in-out infinite;
}
@keyframes ddpulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.16)}}
@keyframes ddring{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:0;transform:scale(1.2)}}

.ddb svg{width:34px;height:34px;transition:transform .5s var(--e-back),opacity .3s}
.ddb__x svg{width:23px;height:23px}
/* the rear bubble drifts out on hover — the icon reads as two, not one */
.ddb__b2{transition:transform .55s var(--e-back),opacity .4s}
.ddb:hover .ddb__b2{transform:translate(1.1px,-1.1px);opacity:.62}
/* both glyphs occupy the whole button so the swap is a cross-fade in place */
.ddb__c,.ddb__x{position:absolute;inset:0;display:grid;place-items:center;line-height:0;
  transition:transform .5s var(--e-back),opacity .3s}
.ddb__x{opacity:0;transform:rotate(-90deg) scale(.55)}
.ddb.is-open .ddb__c{opacity:0;transform:rotate(90deg) scale(.55)}
.ddb.is-open .ddb__x{opacity:1;transform:none}
.ddb.is-open{background:var(--ink-3);color:#fff;border-color:var(--line-2);box-shadow:0 20px 44px -22px #000}
.ddb.is-open::before,.ddb.is-open::after{opacity:0}

/* ══════════════════════════════════════════════════════════════
   PANEL — the double bezel
   ══════════════════════════════════════════════════════════════ */
.ddw{
  position:fixed;right:clamp(16px,2.4vw,28px);bottom:calc(clamp(16px,2.4vw,28px) + 76px);
  z-index:91;width:min(392px,calc(100vw - 32px));height:min(636px,74vh);
  display:flex;flex-direction:column;
  padding:6px;border-radius:calc(var(--rad) + 6px);
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  border:1px solid var(--line-2);
  box-shadow:0 70px 130px -50px #000,0 0 0 1px rgba(0,0,0,.45);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  /* closed state — a rise out of the launcher, never a plain fade */
  opacity:0;visibility:hidden;transform:translateY(20px) scale(.965);transform-origin:100% 100%;
  transition:opacity .42s var(--e-soft),transform .5s var(--e-out),visibility 0s .5s;
}
.ddw.is-open{opacity:1;visibility:visible;transform:none;
  transition:opacity .42s var(--e-soft),transform .58s var(--e-out),visibility 0s}
.ddw__core{
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--rad);background:linear-gradient(178deg,#070C0A,#040706 58%);
}

/* ══════════════════════════════════════════════════════════════
   HEADER — green into white
   ══════════════════════════════════════════════════════════════ */
.ddh{
  position:relative;flex:none;display:flex;align-items:center;gap:.8rem;
  /* deliberately tall — Duval, 2026-07-29: "make the header vertically bigger".
     The green-to-white ramp needs vertical room to actually read as a gradient
     rather than a thin stripe. */
  padding:1.6rem .85rem 1.65rem .95rem;color:var(--on-mint);
  background:linear-gradient(112deg,
    var(--mint-lo) 0%, var(--mint) 24%, var(--mint-hi) 48%, #E8F3EE 86%, #F2F7F4 100%);
  box-shadow:0 1px 0 rgba(2,36,25,.16),0 16px 36px -24px rgba(0,0,0,.95);
}
/* a soft sheen across the gradient so it reads as a surface, not a swatch */
.ddh::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 62%);
}
/* the profile picture — the company mark on a dark plate, so the mint D's and the
   white arrow both read against the green→white header gradient behind it */
.ddh__badge{
  position:relative;z-index:1;flex:none;width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(155deg,#06341F,#02150D);
  color:#fff;
  box-shadow:0 8px 20px -7px rgba(2,36,25,.72),inset 0 1px 0 rgba(255,255,255,.15);
}
.ddh__mk{width:34px;height:auto;aspect-ratio:1000/602;display:block}
.ddh__t{position:relative;z-index:1;min-width:0;flex:1;line-height:1.1}
.ddh__n{display:block;font-family:'Satoshi',ui-sans-serif,sans-serif;font-weight:900;
  font-size:1.1rem;letter-spacing:-.045em}
.ddh__s{display:flex;align-items:center;gap:.38rem;margin-top:.32rem;
  font-size:.775rem;font-weight:500;color:rgba(2,36,25,.62)}
.ddh__d{width:6px;height:6px;border-radius:50%;background:#0A7A57;flex:none;
  box-shadow:0 0 0 0 rgba(10,122,87,.5);animation:ddlive 2.6s ease-out infinite}
@keyframes ddlive{
  0%{box-shadow:0 0 0 0 rgba(10,122,87,.5)}
  70%{box-shadow:0 0 0 7px rgba(10,122,87,0)}
  100%{box-shadow:0 0 0 0 rgba(10,122,87,0)}
}
.ddh__x{position:relative;z-index:1;flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:rgba(2,36,25,.55);
  transition:background .35s,color .35s,transform .45s var(--e-back)}
.ddh__x:hover{background:rgba(2,36,25,.1);color:var(--on-mint);transform:rotate(90deg)}
.ddh__x:focus-visible{outline:2px solid #02241A;outline-offset:2px}
.ddh__x svg{width:15px;height:15px}
/* the thinking hairline — the only chrome that moves while an answer is coming */
.ddh__bar{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;opacity:0;
  transition:opacity .3s;z-index:2}
.ddw.is-busy .ddh__bar{opacity:1}
.ddh__bar i{display:block;width:34%;height:100%;
  background:linear-gradient(90deg,transparent,#02241A,transparent);
  animation:ddscan 1.2s var(--e-io) infinite}
@keyframes ddscan{0%{transform:translateX(-110%)}100%{transform:translateX(400%)}}

/* ══════════════════════════════════════════════════════════════
   MESSAGES
   ══════════════════════════════════════════════════════════════ */
.ddm{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  /* Messages start at the TOP — Duval, 2026-07-29. The opener is the first thing the
     eye should land on after the header, not something floating above the composer. */
  padding:1.15rem .95rem .5rem;display:flex;flex-direction:column;
  justify-content:flex-start;gap:.72rem;
  /* content dissolves under the header instead of hitting a hard edge */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px);
  mask-image:linear-gradient(180deg,transparent 0,#000 16px);
  scrollbar-width:thin;scrollbar-color:rgba(52,245,173,.24) transparent;
}
.ddm>*{flex:none}                       /* bubbles keep their height, never stretch */
.ddm::-webkit-scrollbar{width:4px}
.ddm::-webkit-scrollbar-track{background:transparent}
.ddm::-webkit-scrollbar-thumb{background:rgba(52,245,173,.22);border-radius:99px}
.ddm:hover::-webkit-scrollbar-thumb{background:rgba(52,245,173,.4)}

.ddr{display:flex;max-width:100%}
.ddr--b{justify-content:flex-start}
.ddr--u{justify-content:flex-end}
/* consecutive bubbles from the same side tuck closer together */
.ddr--b + .ddr--b,.ddr--u + .ddr--u{margin-top:-.36rem}

/* a message ARRIVES — the same curtain-up the scenes use, never a fade */
.ddbub{
  position:relative;max-width:86%;padding:.72rem .95rem;
  font-size:.925rem;line-height:1.55;letter-spacing:-.006em;
  animation:ddin .52s var(--e-out) both;
}
@keyframes ddin{
  from{clip-path:inset(0 0 100% 0);transform:translateY(9px)}
  to{clip-path:inset(0 0 0 0);transform:none}
}
.ddr--b .ddbub{
  border-radius:16px 16px 16px 5px;
  background:linear-gradient(168deg,rgba(255,255,255,.062),rgba(255,255,255,.022));
  border:1px solid var(--line-2);color:rgba(255,255,255,.9);
  box-shadow:0 12px 26px -20px #000;
}
/* The customer's own messages carry THE brand green — the same flat var(--mint)
   #4FD8A6 as every primary button on the site, not a paler gradient of it. Duval,
   2026-07-29: "the green that fits the website". */
.ddr--u .ddbub{
  border-radius:16px 16px 5px 16px;
  background:var(--mint);
  color:var(--on-mint);font-weight:500;border:1px solid transparent;
  box-shadow:0 14px 30px -18px rgba(79,216,166,.9);
}
.ddbub strong{color:#fff;font-weight:700}
.ddr--u .ddbub strong{color:var(--on-mint)}
.ddbub a{color:var(--mint);text-decoration:underline;text-underline-offset:2px}
.ddr--u .ddbub a{color:var(--on-mint)}
.ddbub--t{padding:.68rem .9rem}

/* typing */
.ddt{display:inline-flex;gap:5px;align-items:center;height:1.55em}
.ddt i{width:6px;height:6px;border-radius:50%;background:var(--mint);
  animation:ddbounce 1.1s var(--e-io) infinite}
.ddt i:nth-child(2){animation-delay:.14s}
.ddt i:nth-child(3){animation-delay:.28s}
@keyframes ddbounce{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-5px);opacity:1}
}

/* ══════════════════════════════════════════════════════════════
   SHORTCUTS — docked above the composer, and reply chips in-flow
   ══════════════════════════════════════════════════════════════ */
.dddock{
  flex:none;position:relative;display:flex;gap:.34rem;
  padding:.6rem .8rem .55rem;
  /* WRAP, do not scroll. Duval, 2026-07-29: "I need all the shortcuts to fit in."
     A horizontal rail always cut the fourth chip in half at 390px no matter how the
     fade was tuned; wrapping guarantees every one is visible and tappable, and the
     labels are short enough (<12 chars) that one row is the normal case. */
  flex-wrap:wrap;
  /* one hairline for the whole control area — the dock and the composer read as a
     single docked bar, not two stacked strips */
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.026),transparent);
}
.dddock:empty{display:none}
/* collapses away the moment the conversation starts — the contextual pair under each
   answer replaces it */
.dddock{overflow:hidden;max-height:64px;
  transition:max-height .4s var(--e-soft),opacity .3s,padding .4s var(--e-soft),border-color .3s}
.dddock.is-gone{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-top-color:transparent;pointer-events:none}

.ddc{
  display:inline-flex;align-items:center;gap:.36rem;flex:none;white-space:nowrap;
  min-height:34px;padding:.34rem .74rem;border-radius:999px;
  border:1px solid rgba(52,245,173,.26);
  background:linear-gradient(160deg,rgba(52,245,173,.11),rgba(52,245,173,.04));
  color:var(--mint);font-size:.79rem;font-weight:600;letter-spacing:-.012em;
  transition:background .38s var(--e-soft),border-color .38s,color .3s,transform .4s var(--e-back);
}
.ddc:hover{background:var(--mint);border-color:var(--mint);color:var(--on-mint);transform:translateY(-2px)}
.ddc:active{transform:translateY(0) scale(.97)}
.ddc:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.ddc svg{width:11px;height:11px;flex:none;opacity:.7}

/* The two contextual options under an answer. A link chip carries the ↗ glyph; an
   "ask DD another question" chip does not — that difference is the only signal the
   customer needs about where a tap goes. */
.ddq--reply{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:-.28rem;
  animation:ddin .5s var(--e-out) both;animation-delay:.12s}
.ddq--reply .ddc{white-space:normal;text-align:left}
/* the first of the pair is the action we actually want them to take */
.ddq--reply .ddc:first-child{
  background:var(--mint);border-color:var(--mint);color:var(--on-mint);
  box-shadow:0 12px 26px -18px rgba(79,216,166,.9)}
.ddq--reply .ddc:first-child:hover{background:var(--mint-hi);border-color:var(--mint-hi)}
.ddc--ask{border-style:dashed}

/* ══════════════════════════════════════════════════════════════
   COMPOSER
   ══════════════════════════════════════════════════════════════ */
.ddf{
  flex:none;display:flex;align-items:flex-end;gap:.5rem;
  padding:.15rem .7rem .6rem;
}
/* if the dock ever renders empty, the composer takes the hairline back */
.dddock:empty + .ddf{border-top:1px solid var(--line);padding-top:.6rem}
.ddi__wrap{
  flex:1;min-width:0;position:relative;border-radius:15px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.036);
  transition:border-color .4s var(--e-soft),background .4s,box-shadow .4s;
}
.ddi__wrap:focus-within{
  border-color:rgba(52,245,173,.55);background:rgba(52,245,173,.055);
  box-shadow:0 0 0 3px rgba(52,245,173,.11);
}
.ddi{
  display:block;width:100%;height:44px;max-height:116px;
  padding:.72rem .9rem;resize:none;overflow-y:auto;
  border:0;background:none;border-radius:inherit;
  color:#fff;font-family:inherit;font-size:.92rem;line-height:1.4;
  /* Duval: no visible scrollbar in the typing box. */
  scrollbar-width:none;-ms-overflow-style:none;
}
.ddi::-webkit-scrollbar{display:none;width:0;height:0}
.ddi::placeholder{color:rgba(255,255,255,.3)}
.ddi:focus{outline:none}

.ddsend{
  flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#02241A;
  background:linear-gradient(150deg,var(--glow),var(--emerald));
  box-shadow:0 12px 26px -14px rgba(16,185,129,.9);
  transition:transform .45s var(--e-back),opacity .3s,filter .4s,box-shadow .4s;
}
.ddsend:hover:not([disabled]){transform:translate(2px,-2px) scale(1.07)}
.ddsend:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.ddsend[disabled]{
  opacity:.3;filter:grayscale(.7);transform:none;cursor:default;box-shadow:none;
}
.ddsend svg{width:17px;height:17px}

.ddleg{
  flex:none;margin:0;padding:0 .8rem .62rem;text-align:center;
  font-size:.655rem;letter-spacing:.055em;color:rgba(255,255,255,.24);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — a full sheet, not a floating card
   ══════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .ddw{
    right:0;left:0;bottom:0;top:0;width:100%;height:100dvh;max-height:none;
    padding:0;border:0;border-radius:0;transform:translateY(24px);
    padding-bottom:env(safe-area-inset-bottom);padding-top:env(safe-area-inset-top);
  }
  .ddw__core{border-radius:0}
  .ddh{padding:1.5rem .8rem 1.55rem .9rem}
  .ddbub{max-width:88%;font-size:.95rem}
  .ddi{font-size:16px}    /* under 16px iOS zooms the page in and never zooms back */
  .ddb{width:58px;height:58px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .ddb.is-open{opacity:0;pointer-events:none}   /* the sheet carries its own × */
  .dddock{padding-inline:.85rem}
  .ddleg{font-size:.62rem}
}

@media (prefers-reduced-motion:reduce){
  .ddb::before,.ddb::after,.ddh__d,.ddh__bar i,.ddt i{animation:none}
  .ddb::after{opacity:0}
  .ddbub{animation:none;clip-path:none}
  .ddw{transition:opacity .001ms,visibility 0s}
}