/* ─────────────────────────────────────────────────────────────────────────────
   Hidden Potential Chatbot — chatbot.css
   Matches the HealthTest.tsx reference design. Brand colour: #CC1468.
   All selectors are namespaced with "hpc-" to avoid collisions.
───────────────────────────────────────────────────────────────────────────── */

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hpc-hidden {
  display: none !important;
}

/* ── Widget root / positioning ───────────────────────────────────────────── */
#hpc-chatbot-root {
  position: fixed;
  bottom: 1rem;         
  right:  1rem;          
  z-index: 999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}

#hpc-chatbot-root *,
#hpc-chatbot-root *::before,
#hpc-chatbot-root *::after {
  box-sizing: inherit;
}

#hpc-widget {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* ── Open button (minimised bubble) ──────────────────────────────────────── */
.hpc-open-btn {
  width:  56px;
  height: 56px;
  border-radius: 50%;
  background-color: #CC1468;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease;
  padding: 0;
}

.hpc-open-btn:hover {
  opacity: 0.9;
}

/* ── Chat window ─────────────────────────────────────────────────────────── */
.hpc-chat-window {
  width:  384px;        
  height: 500px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #CC1468;
  border-radius: 0.5rem;  
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: width 0.3s ease, height 0.3s ease;
}

.hpc-chat-window.hpc-expanded {
  width:  500px;
  height: 700px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.hpc-header {
  background-color: #CC1468;
  color: #fff;
  padding: 0.75rem;    
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.hpc-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hpc-avatar {
  width:  32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #CC1468;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hpc-header-title {
  font-weight: 500;
  font-size: 14px;
}

.hpc-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hpc-icon-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.hpc-icon-btn:hover {
  color: #f0d0e0;
}

/* ── Messages area ───────────────────────────────────────────────────────── */
.hpc-messages {
  flex: 1;
  padding: 0.75rem;      
  overflow-y: auto;
  background-color: #f9fafb; 
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Message wrappers ────────────────────────────────────────────────────── */
.hpc-msg-wrapper {
  margin-bottom: 0.75rem; 
  display: flex;
}

.hpc-msg-user {
  justify-content: flex-end;
}

.hpc-msg-bot {
  justify-content: flex-start;
}

/* ── Bubbles ─────────────────────────────────────────────────────────────── */
.hpc-bubble {
  display: inline-block;
  border-radius: 0.5rem;  /* rounded-lg */
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  max-width: 85%;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.5;
}

.hpc-bubble-bot {
  background-color: #e5e7eb; /* Tailwind bg-gray-200 */
  color: #333;
}

.hpc-bubble-user {
  background-color: #CC1468;
  color: #fff;
}

/* Safe HTML inside bubbles */
.hpc-bubble p  { margin: 0 0 0.4em; }
.hpc-bubble p:last-child { margin-bottom: 0; }
.hpc-bubble ul,
.hpc-bubble ol { margin: 0.25em 0 0.25em 1.2em; padding: 0; }
.hpc-bubble li { margin-bottom: 0.15em; }

/* ── Loading dots ────────────────────────────────────────────────────────── */
.hpc-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.hpc-dot {
  width:  8px;
  height: 8px;
  border-radius: 50%;
  background-color: #CC1468;
  animation: hpcDotFlashing 1s infinite linear alternate;
}

.hpc-dot:nth-child(1) { animation-delay: 0s; }
.hpc-dot:nth-child(2) { animation-delay: 0.5s; }
.hpc-dot:nth-child(3) { animation-delay: 1s; }

@keyframes hpcDotFlashing {
  0%       { background-color: #CC1468; }
  50%, 100% { background-color: rgba(204, 20, 104, 0.2); }
}

/* ── Input area ──────────────────────────────────────────────────────────── */
.hpc-input-area {
  padding: 0.75rem;       /* p-3 */
  border-top: 1px solid #e5e7eb; /* border-t border-gray-200 */
  background: #fff;
  flex-shrink: 0;
}

.hpc-input-error {
  font-size: 12px;
  color: #ef4444;         /* Tailwind text-red-500 */
  margin: 0 0 0.25rem;
}

.hpc-input-row {
  display: flex;
  gap: 0.5rem;
}

.hpc-input {
  flex: 1;
  border: 1px solid #d1d5db; /* border-gray-300 */
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color: #111;
  background: #fff;
}

.hpc-input:focus {
  border-color: #CC1468;
  box-shadow: 0 0 0 2px rgba(204, 20, 104, 0.2);
}

.hpc-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hpc-input.hpc-input-over {
  border-color: #f87171; /* Tailwind red-400 */
}

.hpc-send-btn {
  padding: 0.5rem 1rem;   /* py-2 px-4 */
  border-radius: 0.5rem;
  background-color: #CC1468;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.hpc-send-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.hpc-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hpc-char-count {
  font-size: 12px;
  text-align: right;
  margin: 0.25rem 0 0;
  color: #9ca3af;         /* Tailwind text-gray-400 */
}

.hpc-char-count.hpc-char-over {
  color: #ef4444;         /* Tailwind text-red-500 */
}

/* ── Scrollbar (Webkit) ──────────────────────────────────────────────────── */
.hpc-messages::-webkit-scrollbar {
  width: 4px;
}

.hpc-messages::-webkit-scrollbar-track {
  background: transparent;
}

.hpc-messages::-webkit-scrollbar-thumb {
  background-color: rgba(204, 20, 104, 0.3);
  border-radius: 4px;
}

/* ── Quick replies (V2 / Instagram flow) ─────────────────────────────────── */
.hpc-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.25rem 0 0.5rem;
  justify-content: flex-start;
}

.hpc-quick-reply-btn {
  background: #fff;
  border: 1.5px solid #CC1468;
  color: #CC1468;
  border-radius: 1.5rem;
  padding: 0.4rem 1rem;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  line-height: 1.4;
}

.hpc-quick-reply-btn:hover {
  background-color: #CC1468;
  color: #fff;
}

.hpc-quick-reply-btn.hpc-quick-reply-yes {
  background-color: #CC1468;
  color: #fff;
}

.hpc-quick-reply-btn.hpc-quick-reply-yes:hover {
  opacity: 0.9;
}

/* ── Landing page mode (instagram-chat page only) ────────────────────────── */
/*
 * On the dedicated chatbot landing page the widget IS the page.
 * Override the default fixed bottom-right float so the chat window
 * sits centred in the viewport instead.
 */
#hpc-chatbot-root.hpc-landing {
  /* Keep position: fixed (inherited) but reset the bottom/right offsets */
  inset: 0;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fdf2f8;
}

#hpc-chatbot-root.hpc-landing #hpc-widget {
  width: 100%;
  max-width: 480px;
  align-items: stretch;
}

#hpc-chatbot-root.hpc-landing .hpc-chat-window,
#hpc-chatbot-root.hpc-landing .hpc-chat-window.hpc-expanded {
  width: 100%;
  /* dvh is supported on all modern mobile browsers and avoids the address-bar gap */
  height: calc(100dvh - 1.5rem);
  max-height: 800px;
  border-radius: 1rem;
  transition: none;
}

/* Hide the minimise bubble — on the landing page the chat is always open */
#hpc-chatbot-root.hpc-landing .hpc-open-btn {
  display: none !important;
}

/* ── Responsive: full-screen on very narrow viewports ────────────────────── */
@media (max-width: 440px) {
  /* Standard floating widget */
  .hpc-chat-window,
  .hpc-chat-window.hpc-expanded {
    width:  calc(100vw - 2rem);
    height: 80vh;
  }

  /* Landing page on narrow screens — tighter padding, rounder corners */
  #hpc-chatbot-root.hpc-landing {
    padding: 0.5rem;
  }

  #hpc-chatbot-root.hpc-landing .hpc-chat-window,
  #hpc-chatbot-root.hpc-landing .hpc-chat-window.hpc-expanded {
    width: 100%;
    height: calc(100dvh - 1rem);
    border-radius: 0.75rem;
  }
}