/* ===============================
   HypnoBuddy Gold Standard UI
   (applied locally to this plugin)
================================ */
.hbgs-wrap{
  max-width: 900px;
  margin: 30px auto;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.hbgs-card{
  background: linear-gradient(135deg, #1565c0, #8e24aa);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  overflow: hidden;
}

.hbgs-header{
  background: #299ED2;
  text-align: center;
  padding: 22px 28px;
}
.hbgs-header h2{
  color: #fff;
  font-size: 2rem;
  letter-spacing: 0.02em;
  margin: 0 0 6px 0;
}
.hbgs-header p{
  color:#fff;
  font-size: 0.95rem;
  opacity: 0.9;
  margin: 0;
}

.hbgs-body{
  background: linear-gradient(180deg, #fff, #ffeaf7);
  padding: 24px 28px 26px;
}

.hbgs-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #cfd2dc;
  background: #fafbff;
  font-size: 0.95rem;
  box-sizing: border-box;
  resize: vertical;
}

.hbgs-btn{
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.06s ease;
}
.hbgs-btn:active{ transform: translateY(1px); }

.hbgs-btn-primary{
  border-radius: 999px;
  padding: 11px 22px;
  background: #299ED2;
  color: #fff;
  font-size: 1rem;
}
.hbgs-btn-primary:hover{ background: #1F86B3; }

.hbgs-btn-secondary{
  border-radius: 999px;
  padding: 8px 16px;
  background: #299ED2;
  color: #fff;
  font-size: 0.9rem;
  margin-right: 8px;
  margin-bottom: 8px;
}
.hbgs-btn-secondary:hover{ background: #1F86B3; }
.hbgs-btn:disabled{ opacity: 0.6; cursor: not-allowed; }

/* ===============================
   Chat UI
================================ */
.hb-buddy-chat-window{
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.75);
  border-radius: 12px;
  padding: 14px;
  height: 360px;
  overflow-y: auto;
  margin-bottom: 14px;
}

.hb-buddy-msg{
  display: flex;
  margin: 10px 0;
}
.hb-buddy-assistant{ justify-content: flex-start; }
.hb-buddy-user{ justify-content: flex-end; }

.hb-buddy-bubble{
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 14px;
  line-height: 1.35;
  font-size: 0.98rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.hb-buddy-assistant .hb-buddy-bubble{
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.08);
}

.hb-buddy-user .hb-buddy-bubble{
  background: rgba(41,158,210,0.14);
  border: 1px solid rgba(41,158,210,0.35);
}

.hb-buddy-quick{
  margin-bottom: 14px;
}

.hb-buddy-inputrow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}

.hb-buddy-status{
  margin-top: 10px;
  font-size: 0.92rem;
  color: #2f3a4a;
  min-height: 20px;
}
.hb-buddy-status.is-error{
  color: #b00020;
}

.hb-buddy-loginlink{
  color: #1F86B3;
  text-decoration: underline;
  font-weight: 600;
}

.hb-buddy-footer-note{
  margin-top: 14px;
  font-size: 0.85rem;
  color: rgba(0,0,0,0.62);
}

/* Mobile tweaks */
@media (max-width: 600px){
  .hbgs-header{ padding: 18px 16px; }
  .hbgs-body{ padding: 20px 16px; }
  .hb-buddy-inputrow{ grid-template-columns: 1fr; }
  .hb-buddy-bubble{ max-width: 92%; }
}


/* Buddy avatar */
.hb-buddy-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-top: 2px;
  flex: 0 0 34px;
  background: rgba(41,158,210,0.20);
  border: 1px solid rgba(41,158,210,0.40);
  color: rgba(0,0,0,0.75);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Typing indicator */
.hb-buddy-typing{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 14px;
}
.hb-buddy-typing span{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(41,158,210,0.70);
  display: inline-block;
  animation: hbBuddyPulse 1.05s infinite ease-in-out;
}
.hb-buddy-typing span:nth-child(2){ animation-delay: 0.15s; }
.hb-buddy-typing span:nth-child(3){ animation-delay: 0.30s; }

@keyframes hbBuddyPulse{
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-3px); opacity: 1; }
}

/* Buddy avatar image */
.hb-buddy-avatar img{
  width:42px;
  height:42px;
  border-radius:50%;
  display:block;
  box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

/* Watermark background (subtle) */
.hb-buddy-chat-window{
  position:relative;
  overflow:hidden;
}
.hb-buddy-chat-window::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('hypnobuddy-avatar.png') center 30% / 320px no-repeat;
  opacity:0.06;
  pointer-events:none;
  z-index:0;
}
.hb-buddy-chat-window > *{
  position:relative;
  z-index:1;
}

/* Quick pills: clean single row, scroll */
.hb-buddy-quick{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:10px 2px 6px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hb-buddy-quick::-webkit-scrollbar{ display:none; }
.hb-buddy-quick .hb-pill{
  flex:0 0 auto;
  white-space:nowrap;
}

/* === PRECISION PATCH: Quick pills should look like compact 'chips' === */
.hb-buddy-quick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 10px;
  padding:0;
}

.hb-buddy-quick .hb-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto !important;
  max-width:100%;
  flex:0 0 auto !important;
  padding:8px 14px;
  border-radius:999px;
  font-size:0.88rem;
  line-height:1.1;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,0,0,0.12);
}

/* Keep emoji/icon tight */
.hb-buddy-quick .hb-pill .emoji,
.hb-buddy-quick .hb-pill i{
  margin-right:6px;
}

/* Members-only gate message */
.hb-buddy-gate{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(41,158,210,0.35);
  color: #1f2a37;
  font-size: 0.95rem;
}
.hb-buddy-gate a{
  color:#299ED2;
  font-weight:600;
  text-decoration: underline;
}

/* When locked, prevent interaction with quick pills */
.hb-buddy-locked .hb-buddy-quick{
  opacity: 0.65;
  pointer-events: none;
}
.hb-buddy-locked .hb-buddy-inputrow{
  opacity: 0.85;
}

/* Center single quick pill */
.hb-buddy-quick{
  display:flex;
  justify-content:center;
}

/* Reset button spacing */
.hb-buddy-inputrow .hb-buddy-reset{
  margin-left: 10px;
}
@media (max-width: 520px){
  .hb-buddy-inputrow .hb-buddy-reset{
    margin-left: 8px;
  }
}