/* Peaceful Mental Health Services chatbot */
#pm-chat *{box-sizing:border-box}
#pm-chat{position:fixed;right:24px;bottom:24px;z-index:99999;
  font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* ---------- Launcher ---------- */
#pm-chat-toggle{position:relative;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#7b3fa8 0%,#5e2b8a 100%);color:#ffffff;font-weight:800;font-size:16px;
  padding:15px 24px;border-radius:999px;
  box-shadow:0 10px 28px rgba(94, 43, 138,.45),0 2px 6px rgba(0,0,0,.15);
  transition:transform .18s ease,box-shadow .18s ease}
#pm-chat-toggle:hover{transform:translateY(-2px) scale(1.03);
  box-shadow:0 14px 34px rgba(94, 43, 138,.55),0 3px 8px rgba(0,0,0,.2)}
#pm-chat-toggle:active{transform:translateY(0) scale(.99)}
.pm-chat-toggle__icon{flex:0 0 auto}
.pm-chat-toggle__label{white-space:nowrap;letter-spacing:.2px}

/* pulsing attention ring behind the launcher */
.pm-chat-toggle__ring{position:absolute;inset:0;border-radius:999px;background:#d9c2f0;
  z-index:-1;opacity:.55;animation:pm-pulse 2.2s ease-out infinite}
@keyframes pm-pulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}

/* unread badge */
.pm-chat-badge{position:absolute;top:-6px;right:-4px;min-width:22px;height:22px;padding:0 6px;
  background:#e8453c;color:#fff;font-size:12px;font-weight:800;border-radius:999px;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25)}
#pm-chat.pm-open .pm-chat-badge,#pm-chat.pm-seen .pm-chat-badge{display:none}
#pm-chat.pm-open .pm-chat-toggle__ring{animation:none;opacity:0}

@media (max-width:480px){
  #pm-chat{right:16px;bottom:16px}
  .pm-chat-toggle__label{display:none}
  #pm-chat-toggle{padding:16px}
}

/* ---------- Panel ---------- */
#pm-chat-panel{position:absolute;right:0;bottom:78px;width:380px;max-width:calc(100vw - 32px);
  height:560px;max-height:calc(100vh - 130px);display:flex;flex-direction:column;
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.28);border:1px solid #f3eafa;
  transform-origin:bottom right;animation:pm-in .26s cubic-bezier(.18,.89,.32,1.28)}
#pm-chat-panel[hidden]{display:none}
@keyframes pm-in{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

#pm-chat-head{display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,#7b3fa8 0%,#5e2b8a 100%);color:#ffffff;padding:16px 18px}
.pm-chat-avatar{flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.9);color:#3b1757;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12)}
.pm-chat-head__text{flex:1;min-width:0}
#pm-chat-head strong{display:block;font-size:17px;line-height:1.2}
#pm-chat-head span{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.85}
.pm-chat-dot{width:8px;height:8px;border-radius:50%;background:#1f7a1f;display:inline-block;
  box-shadow:0 0 0 0 rgba(31,122,31,.6);animation:pm-blink 2s infinite}
@keyframes pm-blink{0%{box-shadow:0 0 0 0 rgba(31,122,31,.55)}70%{box-shadow:0 0 0 6px rgba(31,122,31,0)}100%{box-shadow:0 0 0 0 rgba(31,122,31,0)}}
#pm-chat-close{flex:0 0 auto;background:none;border:0;color:#ffffff;font-size:28px;line-height:1;
  cursor:pointer;padding:0 4px;opacity:.7;transition:opacity .12s}
#pm-chat-close:hover{opacity:1}

/* ---------- Log ---------- */
#pm-chat-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:#f1e6fa}
.pm-msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.5;
  white-space:pre-wrap;animation:pm-msg-in .22s ease both}
@keyframes pm-msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pm-msg.bot{align-self:flex-start;background:#fff;border:1px solid #f3eafa;color:#2a2a2a;
  border-bottom-left-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.pm-msg.user{align-self:flex-end;background:linear-gradient(135deg,#7b3fa8,#5e2b8a);color:#ffffff;
  border-bottom-right-radius:5px}
.pm-msg a{color:#3b1757;font-weight:700;text-decoration:underline}

/* typing indicator */
.pm-typing{align-self:flex-start;background:#fff;border:1px solid #f3eafa;border-radius:16px;
  border-bottom-left-radius:5px;padding:13px 16px;display:flex;gap:5px}
.pm-typing i{width:7px;height:7px;border-radius:50%;background:#c9a8e6;animation:pm-bounce 1.2s infinite}
.pm-typing i:nth-child(2){animation-delay:.18s}.pm-typing i:nth-child(3){animation-delay:.36s}
@keyframes pm-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* ---------- Suggestion chips ---------- */
#pm-chat-suggestions{display:flex;flex-wrap:wrap;gap:7px;padding:12px;border-top:1px solid #eee;
  background:#fff;max-height:148px;overflow-y:auto}
.pm-chip{border:1.5px solid #d9c2f0;background:#ffffff;color:#3b1757;font-size:13px;font-weight:700;
  padding:7px 13px;border-radius:999px;cursor:pointer;transition:background .14s,color .14s,transform .1s}
.pm-chip:hover{background:linear-gradient(135deg,#7b3fa8,#5e2b8a);color:#ffffff;border-color:transparent}
.pm-chip:active{transform:scale(.96)}
.pm-chip--topic{background:linear-gradient(135deg,#f3eafa,#e9dbf6);border-color:#5e2b8a;font-size:13.5px;padding:9px 15px}
.pm-chip--back{border-color:#ece3f3;background:#fff;color:#6e6378;font-weight:600}
.pm-chip--back:hover{background:#f3eafa;color:#3b1757;border-color:#d9c2f0}

/* ---------- Input ---------- */
#pm-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid #eee;background:#fff}
#pm-chat-input{flex:1;border:1.5px solid #ece3f3;border-radius:999px;padding:11px 16px;font-size:14px;outline:none;
  transition:border-color .14s,box-shadow .14s}
#pm-chat-input:focus{border-color:#d9c2f0;box-shadow:0 0 0 3px rgba(176,201,17,.18)}
#pm-chat-form button{flex:0 0 auto;border:0;cursor:pointer;
  background:linear-gradient(135deg,#7b3fa8,#5e2b8a);color:#ffffff;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:transform .12s}
#pm-chat-form button:hover{transform:scale(1.06)}
#pm-chat-form button:active{transform:scale(.95)}

@media (prefers-reduced-motion:reduce){
  .pm-chat-toggle__ring,.pm-chat-dot,.pm-msg,#pm-chat-panel,.pm-typing i{animation:none}
}
/* Bot profile picture is the practice logo */
.pm-chat-avatar{background:#926ac3;overflow:hidden;padding:0}
.pm-chat-avatar img{width:100%;height:100%;object-fit:cover;display:block}