/* ==================================================================
   Shilpi — the question desk
   Site palette, site type. It should look like part of the building,
   not like a widget somebody bolted on.

   The landing pages and the registration page carry two different sets
   of custom properties (--alabaster… and --al…). Rather than depend on
   either, Shilpi reads both and falls back to a literal, so it looks
   identical on every page and would still look right on a page that
   defines neither.
   ================================================================== */

.sh-launch,.sh-panel{
  --sh-paper: var(--paper,     #FBF9F4);
  --sh-al:    var(--alabaster, var(--al,  #F5F2EB));
  --sh-stone: var(--stone-2,   #EDE8DE);
  --sh-ink:   var(--charcoal,  var(--ch,  #2B2D2F));
  --sh-mut:   var(--muted,     var(--mut, #55585B));
  --sh-ln:    var(--line,      var(--ln,  #DAD4C8));
  --sh-ln2:   var(--line-2,    var(--ln2, #C7C0B2));
  --sh-sage:  var(--sage,      var(--sg,  #8FA89B));
  --sh-sgt:   var(--sage-tint, var(--sgt, #E4EAE5));
  --sh-sgd:   var(--sage-deep, var(--sgd, #56705F));
  --sh-terra: var(--terra,     var(--tc,  #C07A60));
  --sh-tci:   var(--terra-ink, var(--tci, #9E5A42));
  --sh-tch:   var(--terra-hover, var(--tch, #AD6A51));
  --sh-bone:  var(--bone,      #F1EBE0);
  --sh-bone2: var(--bone-2,    #B7B0A4);
  --sh-sand:  var(--sand,      #CDB894);
  --sh-sans:  var(--sans, 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif);
  --sh-serif: var(--serif, 'Instrument Serif', Georgia, serif);
  --sh-ease:  var(--ease, cubic-bezier(.22,1,.36,1));
}

.sh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ----------------------------------------------------------- launcher -- */
.sh-launch{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:flex;align-items:center;gap:10px;
  padding:11px 19px 11px 14px;border:0;border-radius:999px;cursor:pointer;
  background:var(--sh-ink);color:var(--sh-bone);
  font:500 13.5px/1 var(--sh-sans);letter-spacing:.01em;
  box-shadow:0 6px 26px rgba(26,22,18,.26);
  transition:transform .4s var(--sh-ease),background .3s var(--sh-ease),box-shadow .3s var(--sh-ease);
}
.sh-launch:hover{background:#1C1E20;transform:translateY(-2px);box-shadow:0 10px 32px rgba(26,22,18,.32)}
.sh-launch:focus-visible{outline:2px solid var(--sh-terra);outline-offset:3px}
.sh-launch-mark{display:grid;place-items:center;color:var(--sh-sand);line-height:0}
.sh-launch-mark svg{width:26px;height:26px;display:block}

/* ---------------------------------------------------------------- the mark --
   The carver taps: on the launcher when you hover it, and in the panel header
   for as long as Shilpi is actually looking something up. It stops the moment
   the answer lands, which makes it a status light rather than decoration. */
.sh-hammer{transform-box:view-box;transform-origin:24px 19px}
.sh-launch:hover .sh-hammer,
.sh-panel.is-thinking .sh-mark .sh-hammer{animation:sh-tap 1.05s var(--sh-ease) infinite}
@keyframes sh-tap{
  0%,100%{transform:rotate(0deg)}
  34%{transform:rotate(-30deg)}
  50%{transform:rotate(7deg)}
  63%{transform:rotate(-5deg)}
  76%{transform:rotate(0deg)}
}

.sh-mark{
  flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.07);color:var(--sh-sand);margin-top:1px;
}
.sh-mark svg{width:25px;height:25px;display:block}
.sh-launch.is-open{opacity:0;pointer-events:none;transform:scale(.9)}

/* unread nudge — one dot, once, never a number */
.sh-launch:after{
  content:'';position:absolute;top:9px;right:13px;width:7px;height:7px;border-radius:50%;
  background:var(--sh-terra);opacity:0;transform:scale(.4);transition:opacity .4s,transform .4s var(--sh-ease);
}
.sh-launch.is-nudge:after{opacity:1;transform:scale(1)}

/* -------------------------------------------------------------- panel -- */
.sh-panel{
  position:fixed;right:22px;bottom:22px;z-index:61;
  width:min(386px,calc(100vw - 32px));
  max-height:min(640px,calc(100vh - 44px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--sh-paper);border:1px solid var(--sh-ln);border-radius:16px;
  box-shadow:0 20px 60px rgba(26,22,18,.22);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .34s var(--sh-ease),transform .34s var(--sh-ease);
}
.sh-panel[hidden]{display:none}
.sh-panel.is-in{opacity:1;transform:none}

.sh-head{
  display:flex;align-items:flex-start;gap:12px;
  padding:17px 16px 14px 18px;background:var(--sh-ink);color:var(--sh-bone);flex:0 0 auto;
}
.sh-head > div{flex:1 1 auto;min-width:0}
.sh-head h2{margin:0;font:400 21px/1.1 var(--sh-serif);letter-spacing:.005em}
.sh-head p{margin:4px 0 0;font:400 11.5px/1.45 var(--sh-sans);color:var(--sh-bone2);max-width:30ch}
.sh-close{
  background:none;border:0;color:var(--sh-bone2);font-size:25px;line-height:1;cursor:pointer;
  padding:0 2px;margin:-2px -2px 0 0;transition:color .25s;
}
.sh-close:hover{color:var(--sh-bone)}
.sh-close:focus-visible{outline:2px solid var(--sh-sand);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------- log -- */
.sh-log{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 18px 6px;display:flex;flex-direction:column;gap:13px;
  scrollbar-width:thin;scrollbar-color:var(--sh-ln2) transparent;
}
.sh-log::-webkit-scrollbar{width:7px}
.sh-log::-webkit-scrollbar-thumb{background:var(--sh-ln2);border-radius:9px}

.sh-msg{max-width:88%;font:400 14px/1.6 var(--sh-sans);animation:sh-rise .38s var(--sh-ease) both}
@keyframes sh-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .sh-msg,.sh-hand{animation:none}
  .sh-panel{transition:none}
  .sh-launch:hover .sh-hammer,
  .sh-panel.is-thinking .sh-mark .sh-hammer{animation:none}
}

.sh-msg.them{
  align-self:flex-start;background:var(--sh-stone);color:var(--sh-ink);
  padding:12px 15px;border-radius:14px 14px 14px 4px;
}
.sh-msg.me{
  align-self:flex-end;background:var(--sh-sgd);color:#fff;
  padding:11px 15px;border-radius:14px 14px 4px 14px;
}
.sh-msg p{margin:0 0 9px}
.sh-msg p:last-child{margin:0}
.sh-msg a{color:var(--sh-tci);text-decoration:underline;text-underline-offset:2px}
.sh-msg.me a{color:#fff}
.sh-msg b{font-weight:600}
.sh-was{text-decoration:line-through;color:var(--sh-mut);font-size:12.5px;margin-left:3px}
.sh-note{color:var(--sh-mut);font-size:12.5px}

/* typing — three dots, the chapter's green */
.sh-dots{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:var(--sh-stone);
  border-radius:14px 14px 14px 4px}
.sh-dots i{width:6px;height:6px;border-radius:50%;background:var(--sh-sgd);opacity:.4;
  animation:sh-blink 1.25s infinite}
.sh-dots i:nth-child(2){animation-delay:.18s}
.sh-dots i:nth-child(3){animation-delay:.36s}
@keyframes sh-blink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ------------------------------------------------------- chips and cta -- */
.sh-chips{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:100%}
.sh-chip{
  background:var(--sh-paper);border:1px solid var(--sh-ln);color:var(--sh-ink);
  padding:7px 13px;border-radius:999px;cursor:pointer;text-align:left;
  font:400 12.5px/1.4 var(--sh-sans);transition:border-color .25s,background .25s,color .25s;
}
.sh-chip:hover{border-color:var(--sh-sage);background:var(--sh-sgt)}
.sh-chip:focus-visible{outline:2px solid var(--sh-sage);outline-offset:2px}

.sh-cta{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  background:var(--sh-terra);color:#fff;text-decoration:none;
  padding:9px 16px;border-radius:999px;font:500 12.5px/1.3 var(--sh-sans);
  transition:background .25s;
}
.sh-cta:hover{background:var(--sh-tch);color:#fff}
.sh-cta:focus-visible{outline:2px solid var(--sh-ink);outline-offset:2px}

/* ------------------------------------------------------- handoff form -- */
.sh-hand{
  align-self:stretch;background:var(--sh-al);border:1px solid var(--sh-ln);
  border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px;
  animation:sh-rise .38s var(--sh-ease) both;
}
.sh-hand p{margin:0;font:500 12.5px/1.5 var(--sh-sans);color:var(--sh-ink)}
.sh-hand input{
  width:100%;padding:9px 11px;border:1px solid var(--sh-ln);border-radius:8px;
  background:#fff;font:400 13.5px/1.4 var(--sh-sans);color:var(--sh-ink);
}
.sh-hand input:focus{outline:2px solid var(--sh-sage);outline-offset:-1px;border-color:var(--sh-sage)}
.sh-hand .sh-row{display:flex;gap:8px}
.sh-hand .sh-row input{min-width:0}
.sh-hand button{
  align-self:flex-start;background:var(--sh-ink);color:var(--sh-bone);border:0;
  padding:9px 17px;border-radius:999px;cursor:pointer;font:500 12.5px/1.3 var(--sh-sans);
}
.sh-hand button:hover{background:#1C1E20}
.sh-hand button:disabled{opacity:.5;cursor:default}
.sh-hand .sh-err{margin:0;color:var(--sh-tci);font-size:12px;font-weight:400}
.sh-hand .sh-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ----------------------------------------------------------- ask form -- */
.sh-ask{
  flex:0 0 auto;display:flex;gap:9px;align-items:center;
  padding:12px 14px;border-top:1px solid var(--sh-ln);background:var(--sh-paper);
}
.sh-ask input{
  flex:1;min-width:0;padding:11px 14px;border:1px solid var(--sh-ln);border-radius:999px;
  background:#fff;font:400 14px/1.3 var(--sh-sans);color:var(--sh-ink);
}
.sh-ask input:focus{outline:2px solid var(--sh-sage);outline-offset:-1px;border-color:var(--sh-sage)}
.sh-ask button{
  flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:var(--sh-terra);color:#fff;display:grid;place-items:center;transition:background .25s;
}
.sh-ask button:hover{background:var(--sh-tch)}
.sh-ask button:focus-visible{outline:2px solid var(--sh-ink);outline-offset:2px}
.sh-ask button:disabled{opacity:.45;cursor:default}

.sh-foot{
  margin:0;padding:0 16px 12px;flex:0 0 auto;
  font:400 10.5px/1.5 var(--sh-sans);color:var(--sh-mut);text-align:center;
}

/* -------------------------------------------------------------- phone -- */
@media(max-width:560px){
  .sh-launch{right:14px;bottom:14px;padding:10px 16px 10px 12px;font-size:13px}
  .sh-panel{
    right:0;left:0;bottom:0;width:100%;max-height:86vh;
    border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;
  }
  .sh-msg{max-width:92%}
}
@media(max-width:380px){
  .sh-launch-text{display:none}
  .sh-launch{padding:12px;gap:0}
}