/* ============================================================
   MEDIVEXA LABS — Chatbot widget (home page only)
   Mock-data build. Swap MOCK_KB in chatbot.js for a real grounded
   API call at a later stage — markup/CSS below stay unchanged.
   ============================================================ */

/* ---- Launcher (right-edge, vertically centred tab) ---- */
.mvx-chat-fab{
  position:fixed;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px 11px 18px;
  border-radius:0 14px 14px 0;
  background:var(--grad-btn);
  box-shadow:var(--sh-btn);
  color:#fff;
  z-index:920;
  transition:padding .3s var(--ease), box-shadow .3s var(--ease);
}
.mvx-chat-fab:hover{padding-left:16px;box-shadow:var(--sh)}
.mvx-chat-fab svg{width:22px;height:22px;flex-shrink:0}
.mvx-chat-fab .mvx-fab-close{display:none}
.mvx-chat-fab.open .mvx-fab-chat{display:none}
.mvx-chat-fab.open .mvx-fab-close{display:block}
.mvx-chat-fab .mvx-fab-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--fd);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
}
.mvx-chat-fab.open .mvx-fab-label{display:none}
.mvx-chat-fab .mvx-dot{
  position:absolute;top:8px;left:8px;
  width:10px;height:10px;border-radius:999px;
  background:var(--orchid);border:2px solid #fff;
}
.mvx-chat-fab.open .mvx-dot{display:none}

@media (max-width:640px){
  .mvx-chat-fab{
    top:auto;bottom:88px;left:0;
    transform:none;
    flex-direction:row;
    padding:12px;
    border-radius:0 999px 999px 0;
  }
  .mvx-chat-fab .mvx-fab-label{display:none}
  .mvx-chat-fab svg{width:20px;height:20px}
}

/* ---- Panel ---- */
.mvx-chat-panel{
  position:fixed;
  left:92px;
  top:50%;
  width:376px;
  max-width:calc(100vw - 32px);
  height:min(560px, 78vh);
  background:#fff;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--sh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:919;
  opacity:0;
  transform:translateY(-50%) scale(.97);
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.mvx-chat-panel.open{
  opacity:1;
  transform:translateY(-50%) scale(1);
  pointer-events:auto;
}
@media (max-width:640px){
  .mvx-chat-panel{
    left:16px;right:16px;top:auto;bottom:148px;width:auto;
    height:min(66vh,520px);
    transform:translateY(8px) scale(.97);
  }
  .mvx-chat-panel.open{transform:translateY(0) scale(1)}
}

/* head */
.mvx-chat-head{
  background:var(--panel);
  color:#fff;
  padding:16px 18px;
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.mvx-chat-head .mvx-avatar{
  width:38px;height:38px;border-radius:999px;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.mvx-chat-head .mvx-avatar svg{width:19px;height:19px;color:#fff}
.mvx-chat-head h4{font-family:var(--fd);font-size:.95rem;font-weight:600;line-height:1.2}
.mvx-chat-head span{
  font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-1);display:flex;align-items:center;gap:5px;margin-top:3px;
}
.mvx-chat-head .mvx-pulse{
  width:6px;height:6px;border-radius:999px;background:var(--green);
  box-shadow:0 0 0 0 rgba(37,211,102,.6);
  animation:mvxPulse 2s infinite;
}
@keyframes mvxPulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 0 0 7px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* body */
.mvx-chat-body{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--tint);
}
.mvx-chat-body::-webkit-scrollbar{width:5px}
.mvx-chat-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}

.mvx-msg{
  max-width:84%;
  font-size:.84rem;line-height:1.55;
  padding:10px 13px;
  border-radius:var(--r-sm);
  animation:mvxIn .25s var(--ease);
}
@keyframes mvxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.mvx-msg.bot{
  align-self:flex-start;
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
  border-bottom-left-radius:4px;
}
.mvx-msg.user{
  align-self:flex-end;
  background:var(--grad-btn);
  color:#fff;
  border-bottom-right-radius:4px;
}
.mvx-msg.bot b{color:var(--indigo)}

.mvx-typing{
  align-self:flex-start;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);border-bottom-left-radius:4px;
  padding:12px 14px;
  display:flex;gap:4px;
}
.mvx-typing span{
  width:6px;height:6px;border-radius:999px;background:var(--ink3);
  animation:mvxTyping 1.1s infinite ease-in-out;
}
.mvx-typing span:nth-child(2){animation-delay:.15s}
.mvx-typing span:nth-child(3){animation-delay:.3s}
@keyframes mvxTyping{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* quick replies */
.mvx-quick{
  display:flex;flex-wrap:wrap;gap:7px;
  padding:2px 2px 4px;
}
.mvx-chip{
  font-family:var(--fb);font-size:.76rem;font-weight:500;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--indigo);
  transition:.2s var(--ease);
}
.mvx-chip:hover{background:var(--tint2);border-color:var(--indigo);transform:translateY(-1px)}

/* disclaimer strip inside panel */
.mvx-chat-note{
  font-family:var(--fm);
  font-size:.58rem;letter-spacing:.06em;
  color:var(--ink3);
  text-align:center;
  padding:6px 12px;
  background:#fff;
  border-top:1px solid var(--line);
}

/* input row */
.mvx-chat-input{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  background:#fff;
  border-top:1px solid var(--line);
  flex-shrink:0;
}
.mvx-chat-input input{
  flex:1;
  border:1px solid var(--line);
  background:var(--tint);
  border-radius:999px;
  padding:10px 15px;
  font-family:var(--fb);font-size:.84rem;
  color:var(--ink);
}
.mvx-chat-input input:focus{outline:2px solid var(--indigo);outline-offset:1px}
.mvx-chat-input button{
  width:38px;height:38px;flex-shrink:0;
  border-radius:999px;
  background:var(--grad-btn);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ease);
}
.mvx-chat-input button:hover{transform:scale(1.07)}
.mvx-chat-input button:disabled{opacity:.5;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .mvx-chat-fab,.mvx-chat-panel,.mvx-msg,.mvx-chip,.mvx-chat-input button{transition:none;animation:none}
}