/* ==========================================================================
   DHARMIKAM — CHATBOT WIDGET
   A self-contained floating assistant. Everything here is namespaced under
   .chatbot / .chatbot__* so it cannot touch any existing page styles.
   Loads after the site CSS; uses the same tokens declared in base.css.
   ========================================================================== */

/* ==========================================================================
   1. ROOT / LAYERING
   Sits above the back-to-top (1030) and the sticky header (1040), below the
   skip link (2000). The root itself is click-through; only its children take
   pointer events, so it never blocks the page beneath it.
   ========================================================================== */
.chatbot{
  position:fixed;
  right:clamp(14px,2.5vw,28px);
  bottom:clamp(14px,2.5vw,28px);
  z-index:1050;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;
  font-family:var(--font-body);
  pointer-events:none;
}
.chatbot > *{pointer-events:auto}

/* Lift the back-to-top button clear of the launcher so the two never overlap.
   Gated on the class the widget's script adds to <html>, so the button keeps
   its original position if the widget is absent or its JS never runs. */
.has-chat-widget .to-top{
  bottom:calc(clamp(14px,2.5vw,28px) + 68px);
}

/* ==========================================================================
   2. LAUNCHER
   ========================================================================== */
.chatbot__launcher{
  position:relative;
  order:2;                      /* always the lowest item in the stack */
  width:62px;height:62px;flex:none;
  display:grid;place-items:center;
  padding:0;border:0;border-radius:50%;
  background:linear-gradient(145deg,var(--forest) 0%,var(--deep) 62%);
  color:var(--gold-soft);
  box-shadow:var(--sh-md),0 0 0 1px rgba(226,200,138,.22) inset;
  cursor:pointer;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),
             background-color .35s var(--ease),color .35s var(--ease);
}
.chatbot__launcher-icon{
  width:29px;height:29px;
  transition:transform .5s var(--ease-out),opacity .3s var(--ease);
}
/* The close glyph is stacked on the bubble and cross-fades when the panel opens */
.chatbot__launcher-icon--close{
  position:absolute;inset:0;margin:auto;   /* centred over the bubble */
  opacity:0;transform:rotate(-45deg) scale(.6);
}

.chatbot__launcher:hover,
.chatbot__launcher:focus-visible{
  transform:translateY(-3px) scale(1.04);
  color:var(--gold);
  box-shadow:var(--sh-lg),0 0 0 1px rgba(226,200,138,.42) inset;
}
.chatbot__launcher:active{transform:translateY(-1px) scale(1)}

/* Soft gold halo that breathes outward — the same restrained motion language
   as the rings and particles used elsewhere on the page. */
.chatbot__launcher::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(192,153,63,.5);
  animation:chatbot-halo 3.4s var(--ease-out) infinite;
  pointer-events:none;
}
.chatbot__launcher:hover::after{animation-play-state:paused}

@keyframes chatbot-halo{
  0%  {opacity:.55;transform:scale(1)}
  70% {opacity:0;transform:scale(1.42)}
  100%{opacity:0;transform:scale(1.42)}
}

/* Open state — the bubble swaps for the close glyph */
.chatbot.is-open .chatbot__launcher{background:linear-gradient(145deg,var(--herb) 0%,var(--forest) 70%)}
.chatbot.is-open .chatbot__launcher::after{animation:none;opacity:0}
.chatbot.is-open .chatbot__launcher-icon--chat{opacity:0;transform:rotate(45deg) scale(.6)}
.chatbot.is-open .chatbot__launcher-icon--close{opacity:1;transform:none}

/* Unread dot on the launcher before the panel has ever been opened */
.chatbot__badge{
  position:absolute;top:2px;right:2px;
  width:13px;height:13px;border-radius:50%;
  background:var(--gold);
  border:2px solid var(--deep);
  transition:opacity .3s var(--ease),transform .3s var(--ease-out);
}
.chatbot.is-open .chatbot__badge,
.chatbot.is-seen .chatbot__badge{opacity:0;transform:scale(.4)}

/* ==========================================================================
   3. PANEL
   ========================================================================== */
.chatbot__panel{
  order:1;
  width:min(370px,calc(100vw - 2 * clamp(14px,2.5vw,28px)));
  max-height:min(560px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-lg);
  transform-origin:100% 100%;
  opacity:0;visibility:hidden;
  transform:translateY(18px) scale(.94);
  transition:opacity .4s var(--ease),transform .5s var(--ease-out),visibility .4s;
}
.chatbot.is-open .chatbot__panel{
  opacity:1;visibility:visible;transform:none;
}

/* --- Header --- */
.chatbot__header{
  position:relative;flex:none;
  display:flex;align-items:center;gap:.85rem;
  padding:1.05rem 1.15rem;
  background:linear-gradient(135deg,var(--forest) 0%,var(--deep) 78%);
  color:var(--cream);
  overflow:hidden;
}
/* Faint gold sweep, echoing the section headers */
.chatbot__header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 88% -30%,rgba(192,153,63,.28),transparent 62%);
}
.chatbot__avatar{
  position:relative;z-index:1;
  width:42px;height:42px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(226,200,138,.14);
  border:1px solid rgba(226,200,138,.34);
  color:var(--gold-soft);
}
.chatbot__avatar svg{width:22px;height:22px}

.chatbot__id{position:relative;z-index:1;min-width:0;flex:1 1 auto}
.chatbot__title{
  font-family:var(--font-display);
  font-size:1.02rem;line-height:1.2;font-weight:500;
  color:var(--cream);margin:0;
  letter-spacing:-.01em;
}
.chatbot__status{
  display:flex;align-items:center;gap:.4rem;
  font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(236,244,239,.66);margin:.18rem 0 0;
}
.chatbot__status::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--sage);
  box-shadow:0 0 0 3px rgba(116,169,141,.22);
}

.chatbot__close{
  position:relative;z-index:1;flex:none;
  width:34px;height:34px;padding:0;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);border-radius:50%;
  background:transparent;color:rgba(236,244,239,.78);
  font-size:1rem;line-height:1;cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .4s var(--ease-out);
}
.chatbot__close:hover,
.chatbot__close:focus-visible{
  background:var(--gold);border-color:var(--gold);color:#231705;
  transform:rotate(90deg);
}

/* --- Message log --- */
.chatbot__log{
  flex:1 1 auto;min-height:150px;
  overflow-y:auto;overscroll-behavior:contain;
  padding:1.15rem;
  display:flex;flex-direction:column;gap:.7rem;
  background:
    radial-gradient(110% 70% at 0% 0%,rgba(220,233,225,.55),transparent 60%),
    var(--cream);
  scrollbar-width:thin;
  scrollbar-color:rgba(15,46,30,.2) transparent;
}
.chatbot__log::-webkit-scrollbar{width:6px}
.chatbot__log::-webkit-scrollbar-thumb{background:rgba(15,46,30,.18);border-radius:var(--r-pill)}

.chatbot__msg{
  max-width:84%;
  padding:.72rem .95rem;
  font-size:.9rem;line-height:1.6;
  border-radius:var(--r-sm);
  animation:chatbot-rise .45s var(--ease-out) both;
}
.chatbot__msg p{margin:0}
.chatbot__msg p + p{margin-top:.5rem}

.chatbot__msg--bot{
  align-self:flex-start;
  background:#fff;color:var(--body);
  border:1px solid var(--line);
  border-bottom-left-radius:6px;
  box-shadow:var(--sh-xs);
}
.chatbot__msg--user{
  align-self:flex-end;
  background:var(--deep);color:var(--cream);
  border-bottom-right-radius:6px;
  box-shadow:var(--sh-sm);
}

@keyframes chatbot-rise{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:none}
}

/* Typing indicator */
.chatbot__typing{
  align-self:flex-start;
  display:flex;align-items:center;gap:5px;
  padding:.8rem .95rem;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);border-bottom-left-radius:6px;
  box-shadow:var(--sh-xs);
  animation:chatbot-rise .35s var(--ease-out) both;
}
.chatbot__typing span{
  width:6px;height:6px;border-radius:50%;background:var(--sage);
  animation:chatbot-blink 1.25s var(--ease) infinite;
}
.chatbot__typing span:nth-child(2){animation-delay:.18s}
.chatbot__typing span:nth-child(3){animation-delay:.36s}

@keyframes chatbot-blink{
  0%,60%,100%{opacity:.28;transform:translateY(0)}
  30%        {opacity:1;transform:translateY(-3px)}
}

/* --- Quick replies --- */
.chatbot__chips{
  display:flex;flex-wrap:wrap;gap:.45rem;
  margin-top:.15rem;
}
.chatbot__chip{
  padding:.42rem .85rem;
  font-family:var(--font-body);
  font-size:.75rem;font-weight:500;line-height:1.3;
  color:var(--herb);background:rgba(116,169,141,.1);
  border:1px solid rgba(45,106,79,.22);border-radius:var(--r-pill);
  cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .4s var(--ease-out);
}
.chatbot__chip:hover,
.chatbot__chip:focus-visible{
  background:var(--deep);border-color:var(--deep);color:var(--cream);
  transform:translateY(-2px);
}

/* --- Composer --- */
.chatbot__form{
  flex:none;
  display:flex;align-items:center;gap:.55rem;
  padding:.8rem .9rem;
  background:var(--sand);
  border-top:1px solid var(--line);
}
.chatbot__input{
  flex:1 1 auto;min-width:0;
  padding:.72rem 1.05rem;
  font-family:var(--font-body);
  font-size:.88rem;line-height:1.4;
  color:var(--ink);background:#fff;
  border:1px solid rgba(15,46,30,.12);border-radius:var(--r-pill);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.chatbot__input::placeholder{color:var(--muted)}
.chatbot__input:focus{
  outline:0;
  border-color:rgba(45,106,79,.45);
  box-shadow:0 0 0 3px rgba(116,169,141,.18);
}
.chatbot__send{
  width:44px;height:44px;flex:none;padding:0;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:var(--deep);color:var(--gold-soft);
  font-size:1rem;cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(15,46,30,.8);
  transition:transform .4s var(--ease-out),background-color .35s var(--ease),
             color .35s var(--ease),box-shadow .4s var(--ease-out);
}
.chatbot__send:hover,
.chatbot__send:focus-visible{
  background:var(--herb);color:var(--cream);
  transform:translateY(-2px) scale(1.05);
}
.chatbot__send:active{transform:translateY(0) scale(1)}
.chatbot__send i{transition:transform .4s var(--ease-out)}
.chatbot__send:hover i{transform:translateX(2px)}

.chatbot__note{
  flex:none;margin:0;
  padding:0 1.15rem .75rem;
  background:var(--sand);
  font-size:.68rem;letter-spacing:.06em;
  color:var(--muted);text-align:center;
}

/* Screen-reader-only helper, scoped to the widget */
.chatbot__sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */
@media (max-width:575.98px){
  .chatbot{
    right:14px;bottom:14px;left:14px;
    align-items:flex-end;
  }
  .chatbot__panel{
    width:100%;
    max-height:min(74vh,calc(100vh - 110px));
  }
  .chatbot__launcher{width:56px;height:56px}
  .chatbot__launcher-icon{width:26px;height:26px}
  .chatbot__msg{max-width:88%}
  .has-chat-widget .to-top{bottom:78px}
}

/* Short viewports (landscape phones) — keep the panel inside the screen */
@media (max-height:520px){
  .chatbot__panel{max-height:calc(100vh - 96px)}
  .chatbot__log{min-height:90px}
}

/* ==========================================================================
   5. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .chatbot__launcher::after{animation:none;opacity:.35}
  .chatbot__typing span{animation:none;opacity:.6}
  .chatbot__msg,.chatbot__typing{animation:none}
  .chatbot__panel{transition:opacity .001ms,visibility .001ms}
}

/* ==========================================================================
   6. PRINT
   ========================================================================== */
@media print{
  .chatbot{display:none!important}
}