/* D'leaps r76 - the chat section on /dleaps-ai/.
   A separate stylesheet, loaded only by that page, for two reasons: the shared
   assets/dleaps-page.css is also the Vastu page's stylesheet and must not move
   under it, and every class here is prefixed .vh- so nothing can collide with
   the compiled Tailwind that loads before it.

   Tokens come from dleaps-page.css (--dlp-*), with fallbacks so this file still
   paints correctly if it ever loads on its own. */

.vh-scope{
  --vh-ease:cubic-bezier(.175,.885,.32,1.275);
  --vh-col:47rem;
  --vh-turq:var(--dlp-turq,#4DD9E8);
  --vh-mag:var(--dlp-mag,#E8407F);
  --vh-ink:var(--dlp-ink-2,#141a24);
  --vh-mut:var(--dlp-mut,#5b6672);
  --vh-line:var(--dlp-line,#e3e7ec);
  --vh-paper:#fff;
  --vh-soft:#f6f8fa;
}

/* A quiet brand wash behind the opening screen. The header is transparent, so
   this is what it sits on. */
.vh-scope{position:relative;isolation:isolate}
.vh-scope::before{
  content:"";position:absolute;inset:0 0 auto;height:min(78vh,720px);z-index:-1;pointer-events:none;
  background:
    radial-gradient(60rem 26rem at 18% -8%, rgba(77,217,232,.20), transparent 62%),
    radial-gradient(48rem 24rem at 86% 2%, rgba(232,64,127,.13), transparent 60%),
    linear-gradient(180deg,#fbfdfe 0%,rgba(251,253,254,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  opacity:1;transition:opacity .5s ease
}
/* Once the thread starts, the canvas goes plain white. The sticky composer has
   to fade the thread out behind it, and a gradient fading to white on top of a
   tinted wash shows as a patch. */
.vh-scope.is-chat::before{opacity:0}
/* The site header is transparent by design, so a thread scrolling underneath it
   would otherwise be readable through the logo. This fades it out instead. */
.vh-scope::after{
  content:"";position:fixed;top:0;left:0;right:0;height:5.2rem;z-index:15;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
  background:linear-gradient(180deg,#fff 42%,rgba(255,255,255,.82) 72%,rgba(255,255,255,0) 100%)
}
.vh-scope.is-chat::after{opacity:1}
@media (max-width:640px){.vh-scope::after{height:4.6rem}}

/* ---------- layout ---------- */
.vh{max-width:var(--vh-col);margin:0 auto;padding:0 1.25rem;display:flex;flex-direction:column}
.vh.is-empty{min-height:calc(100svh - 12rem);justify-content:center;padding-bottom:1rem}
.vh.is-chat{min-height:calc(100svh - 9rem);padding-top:2rem}
@supports not (height:100svh){
  .vh.is-empty{min-height:calc(100vh - 12rem)}
  .vh.is-chat{min-height:calc(100vh - 9rem)}
}

/* ---------- opening screen ---------- */
.vh-open{text-align:center;padding:.5rem 0 1.6rem}
/* The studio mark, not a letter in a box. */
.vh-mark{
  width:60px;height:60px;margin:0 auto .9rem;display:block;
  filter:drop-shadow(0 10px 18px rgba(77,217,232,.34))
}

/* The greeting is written rather than set: real handwriting outlines, drawn
   stroke by stroke and then inked in. The paths carry their own length in
   --l and their start in --d, measured once at build time, so the drawing is
   exact and needs no JavaScript. */
.vh-hand-wrap{margin:0 auto .9rem;line-height:0}
.vh-hand{display:block;width:min(100%,32rem);height:auto;margin:0 auto;overflow:visible}
.vh-hand path{
  stroke-width:1.1;stroke-linejoin:round;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);fill-opacity:0;
  animation:vh-draw .62s cubic-bezier(.45,.05,.35,1) var(--d) forwards,
            vh-ink .34s ease-out calc(var(--d) + .4s) forwards
}
@keyframes vh-draw{to{stroke-dashoffset:0}}
@keyframes vh-ink{to{fill-opacity:1}}
.vh-open h1{font-size:clamp(2rem,5.4vw,3.15rem);line-height:1.05;margin:0 0 .6rem;letter-spacing:-.01em}
.vh-open p{color:var(--vh-mut);max-width:34rem;margin:0 auto;font-size:1.02rem}
.vh.is-chat .vh-open{display:none}

/* ---------- the thread ---------- */
.vh-thread{margin:0}
.vh.is-empty .vh-thread:empty{display:none}
.vh-msg{margin:0 0 1.5rem}
.vh-msg.vh-me{display:flex;justify-content:flex-end}
.vh-me .vh-bubble{
  max-width:min(86%,34rem);padding:.7rem 1.05rem;font-size:1rem;
  background:var(--vh-soft);border:1px solid var(--vh-line);
  border-radius:18px 18px 6px 18px;color:var(--vh-ink)
}
.vh-ai{display:grid;grid-template-columns:34px minmax(0,1fr);gap:.85rem;align-items:start}
.vh-av{
  width:34px;height:34px;border-radius:11px;margin-top:.15rem;
  background:rgba(77,217,232,.1);border:1px solid rgba(77,217,232,.28);
  display:flex;align-items:center;justify-content:center;padding:5px
}
.vh-av img{width:100%;height:100%;object-fit:contain;display:block}
.vh-ai .vh-who{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--vh-mut);margin:.35rem 0 .35rem
}
.vh-ai h4{
  font-family:'Poiret One',Lato,sans-serif;font-weight:400;font-size:1.22rem;
  margin:0 0 .45rem;color:var(--vh-ink)
}
.vh-body{font-size:1.02rem;line-height:1.72;color:var(--vh-ink)}
.vh-body p{margin:0 0 .8rem}
.vh-body p:last-child{margin-bottom:0}
.vh-body ul{margin:0 0 .85rem;padding:0;list-style:none}
.vh-body li{position:relative;padding-left:1.1rem;margin-bottom:.4rem;font-size:.99rem}
.vh-body li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--vh-turq)
}

/* blocks land one after another rather than all at once */
.vh-in{opacity:0;transform:translateY(6px);animation:vh-in .42s var(--vh-ease) forwards}
@keyframes vh-in{to{opacity:1;transform:none}}

/* ---------- links and follow-ups ---------- */
.vh-links,.vh-next{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.95rem}
.vh-links a{
  display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--vh-line);
  border-radius:999px;padding:.48rem .95rem;font-size:.86rem;font-weight:700;color:var(--vh-ink);
  min-height:40px;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease
}
.vh-links a::after{content:"\2192";color:var(--vh-mag);font-weight:400}
.vh-links a:hover{text-decoration:none;border-color:var(--vh-turq);transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(20,26,36,.07)}
.vh-next{margin-top:.75rem}
.vh-next button{
  font-family:inherit;font-size:.85rem;font-weight:600;color:var(--vh-mut);cursor:pointer;
  background:transparent;border:1px dashed var(--vh-line);border-radius:999px;padding:.45rem .9rem;
  min-height:38px;transition:color .16s ease,border-color .16s ease,background .16s ease
}
.vh-next button:hover{color:var(--vh-ink);border-color:var(--vh-mag);border-style:solid;background:#fff}

.vh-foot{display:flex;align-items:center;gap:.7rem;margin-top:.7rem}
.vh-copy{
  font-family:inherit;font-size:.76rem;font-weight:700;letter-spacing:.02em;color:var(--vh-mut);
  background:transparent;border:0;padding:.25rem 0;cursor:pointer
}
.vh-copy:hover{color:var(--vh-ink)}
.vh-src{font-size:.72rem;color:#9aa5b1}

/* ---------- thinking ---------- */
.vh-think{display:inline-flex;gap:5px;align-items:center;height:1.6rem}
.vh-think i{width:6px;height:6px;border-radius:50%;background:var(--vh-mag);opacity:.3;animation:vh-blink 1.2s infinite}
.vh-think i:nth-child(2){animation-delay:.18s}
.vh-think i:nth-child(3){animation-delay:.36s}
@keyframes vh-blink{0%,80%,100%{opacity:.22}40%{opacity:1}}

/* ---------- the composer ---------- */
.vh-dockwrap{
  position:sticky;bottom:0;z-index:20;padding:.7rem 0 1rem;
  display:flex;flex-direction:column;align-items:center
}
.vh.is-chat .vh-dockwrap{
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 32%,#fff 100%)
}

/* Collapsed it is a narrow pill. It springs open on focus, and grows with the
   text. Both are max-width/height transitions, which is what makes it feel
   physical rather than switched. */
.vh-dock{
  width:100%;max-width:27rem;position:relative;border-radius:24px;
  background:#fff;border:1px solid var(--vh-line);
  box-shadow:0 10px 30px rgba(20,26,36,.08);
  height:56px;overflow:hidden;cursor:text;
  transition:max-width .42s var(--vh-ease),height .42s var(--vh-ease),
             border-color .2s ease,box-shadow .28s ease
}
.vh-dock.is-open{
  max-width:var(--vh-col);height:var(--vh-h,112px);overflow:visible;
  border-color:#cfd7df;box-shadow:0 16px 42px rgba(20,26,36,.11)
}
.vh-dock.is-typing{transition:max-width .42s var(--vh-ease),height .16s ease-out,
  border-color .2s ease,box-shadow .28s ease}
.vh-dock.is-open:focus-within{border-color:var(--vh-turq);box-shadow:0 16px 42px rgba(77,217,232,.2)}

/* the collapsed label */
.vh-ghost{
  position:absolute;inset:0;z-index:2;width:100%;text-align:left;cursor:text;
  background:transparent;border:0;font-family:inherit;font-size:1rem;font-weight:500;
  color:#8b97a3;padding:0 3.6rem 0 1.3rem;line-height:56px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  transition:opacity .28s ease,transform .32s var(--vh-ease)
}
.vh-dock.is-open .vh-ghost{opacity:0;transform:translateY(4px) scale(1.02);pointer-events:none}

/* the real field */
.vh-ta{
  position:absolute;top:0;left:0;right:0;z-index:1;width:100%;resize:none;border:0;outline:none;
  background:transparent;font-family:inherit;font-size:1rem;line-height:1.55;color:var(--vh-ink);
  padding:1rem 3.6rem 0 1.3rem;overflow-y:hidden;opacity:0;pointer-events:none;
  transition:opacity .26s ease
}
.vh-dock.is-open .vh-ta{opacity:1;pointer-events:auto}
.vh-ta.is-scroll{overflow-y:auto}
.vh-ta::placeholder{color:#a4aeb9}
.vh-ta::-webkit-scrollbar{width:4px}
.vh-ta::-webkit-scrollbar-thumb{background:rgba(91,102,114,.28);border-radius:4px}

/* the fades that stop text colliding with the edges when it scrolls */
.vh-fade{position:absolute;left:1.3rem;right:3.6rem;height:1.6rem;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .2s ease}
.vh-fade.t{top:0;background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,0))}
.vh-fade.b{top:calc(var(--vh-h,112px) - 3.4rem);background:linear-gradient(0deg,#fff 30%,rgba(255,255,255,0))}

/* the bottom row */
.vh-tools{
  position:absolute;left:1.25rem;right:3.7rem;bottom:.6rem;z-index:3;height:2rem;
  display:flex;align-items:center;gap:.6rem;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .26s ease,transform .3s var(--vh-ease)
}
.vh-dock.is-open .vh-tools{opacity:1;transform:none;pointer-events:auto}
.vh-hint{font-size:.74rem;color:#9aa5b1;white-space:nowrap}
.vh-hint b{font-weight:700;color:#7c8894}
.vh-vhint[hidden]{display:none}

/* the live audio bars, sitting where the tools row is while recording */
.vh-bars{
  position:absolute;right:3.9rem;bottom:.85rem;z-index:4;display:flex;align-items:center;
  gap:3px;height:1.5rem;width:0;opacity:0;overflow:hidden;
  transition:width .34s var(--vh-ease),opacity .26s ease
}
.vh-dock.is-rec .vh-bars{width:4.2rem;opacity:1}
.vh-dock.is-rec .vh-hint{display:none}
.vh-dock.is-rec .vh-vhint{display:inline;color:var(--vh-mag);font-weight:700}
.vh-bars i{width:4px;border-radius:2px;height:4px;background:var(--vh-mag);
  transition:height .08s linear}

/* the one action button, morphing between send, listen and stop */
.vh-act{
  position:absolute;right:.55rem;bottom:.55rem;z-index:5;width:44px;height:44px;border:0;
  border-radius:50%;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--vh-turq),var(--vh-mag));
  box-shadow:0 8px 20px rgba(232,64,127,.26);
  transition:transform .18s var(--vh-ease),box-shadow .2s ease,opacity .2s ease
}
.vh-dock:not(.is-open) .vh-act{bottom:.5rem;right:.5rem}
.vh-act:hover{transform:translateY(-1px) scale(1.03)}
.vh-act:active{transform:scale(.95)}
.vh-act[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.vh-act span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:opacity .26s var(--vh-ease),transform .26s var(--vh-ease)}
.vh-act span[hidden]{display:flex;opacity:0;transform:scale(.55) rotate(38deg);pointer-events:none}
.vh-act svg{display:block}

/* ---------- starters and the note ---------- */
.vh-chips{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1.1rem auto 0;
  max-width:42rem
}
.vh-chips button{
  font-family:inherit;font-size:.87rem;font-weight:600;color:var(--vh-ink);cursor:pointer;
  background:rgba(255,255,255,.78);border:1px solid var(--vh-line);border-radius:999px;
  padding:.55rem 1rem;min-height:42px;backdrop-filter:blur(6px);
  transition:border-color .16s ease,transform .16s ease,box-shadow .18s ease
}
.vh-chips button:hover{border-color:var(--vh-mag);transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(20,26,36,.08)}
.vh.is-chat .vh-chips{display:none}
.vh-note{
  max-width:40rem;margin:.9rem auto 0;text-align:center;font-size:.78rem;line-height:1.55;
  color:#8b97a3
}
.vh-note a{font-weight:700}
.vh-reset{
  display:inline;margin-left:.45rem;font-family:inherit;font-size:.78rem;font-weight:700;
  color:#0e8fa2;background:transparent;border:0;padding:0;cursor:pointer
}
.vh-reset:hover{text-decoration:underline}
.vh-reset:hover{color:var(--vh-mag)}
.vh:not(.is-chat) .vh-reset{display:none}

/* ---------- the handoff card ---------- */
.vh-lead{
  border:1px solid var(--vh-line);border-radius:18px;padding:1.2rem;margin:0 0 1.5rem;
  background:linear-gradient(135deg,rgba(77,217,232,.08),rgba(232,64,127,.06)),#fff
}
.vh-lead h4{font-family:'Poiret One',Lato,sans-serif;font-weight:400;font-size:1.3rem;margin:0 0 .3rem}
.vh-lead p{font-size:.94rem;color:var(--vh-mut);margin:0 0 .9rem}
.vh-lead .vh-row{display:flex;gap:.55rem;flex-wrap:wrap}
.vh-lead input{
  flex:1 1 9.5rem;min-height:46px;padding:.6rem .85rem;border:1px solid var(--vh-line);
  border-radius:12px;font-family:inherit;font-size:.95rem;background:#fff;color:var(--vh-ink)
}
.vh-lead input:focus{outline:none;border-color:var(--vh-turq)}
.vh-lead button{
  min-height:46px;padding:0 1.3rem;border:0;border-radius:12px;cursor:pointer;font-family:inherit;
  font-weight:700;color:#fff;background:linear-gradient(135deg,var(--vh-turq),var(--vh-mag))
}
.vh-lead .vh-say{margin:.7rem 0 0;font-size:.86rem;min-height:1.2em}
.vh-lead .vh-say.ok{color:#0f7a63}
.vh-lead .vh-say.no{color:#b8386a}

/* ---------- the FAQ that sits under the chat ---------- */
.vh-qa{border-top:1px solid var(--vh-line)}
.vh-qa details{border-bottom:1px solid var(--vh-line)}
.vh-qa summary{
  cursor:pointer;list-style:none;display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:1.05rem 0;font-weight:700;font-size:1.03rem;color:var(--vh-ink)
}
.vh-qa summary::-webkit-details-marker{display:none}
.vh-qa summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--vh-mag);font-weight:400}
.vh-qa details[open] summary::after{content:"\2212"}
.vh-qa .vh-a{padding:0 0 1.1rem}
.vh-qa .vh-a p{margin:0 0 .6rem;color:var(--vh-mut);font-size:.97rem}
.vh-qa .vh-ask{
  font-family:inherit;font-size:.8rem;font-weight:700;color:#0e8fa2;background:transparent;
  border:0;padding:0;cursor:pointer
}
.vh-qa .vh-ask:hover{text-decoration:underline}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .vh{padding:0 1rem}
  .vh.is-empty{min-height:calc(100svh - 10rem)}
  .vh-open{padding:.25rem 0 1.2rem}
  .vh-open h1{font-size:1.95rem}
  .vh-hand{width:min(100%,19rem)}
  .vh-mark{width:50px;height:50px;margin-bottom:.7rem}
  .vh-open p{font-size:.97rem}
  .vh-dock{max-width:100%}
  .vh-ai{grid-template-columns:28px minmax(0,1fr);gap:.65rem}
  .vh-av{width:28px;height:28px;border-radius:9px;padding:4px}
  .vh-body{font-size:1rem}
  .vh-hint:not(.vh-vhint){display:none}
  .vh-chips{gap:.45rem}
  .vh-chips button{font-size:.83rem;padding:.5rem .85rem}
}

/* ---------- honours a request for less motion ---------- */
@media (prefers-reduced-motion:reduce){
  .vh-dock,.vh-ghost,.vh-ta,.vh-tools,.vh-bars,.vh-act,.vh-act span,.vh-links a,.vh-chips button{
    transition:none !important
  }
  .vh-in{animation:none;opacity:1;transform:none}
  .vh-hand path{animation:none;stroke-dashoffset:0;fill-opacity:1}
  .vh-think i{animation:none;opacity:.5}
}