/* ═══════════════════════════════════════════════════════════════════
   PAW AI CHATBOT — The PetChef
   Brand: #2d4a3e (forest) · #3d7a5e (accent) · #a8c5a0 (sage)
         #faf7f2 (cream)  · #1a2e25 (text)   · #7a8e82 (muted)
═══════════════════════════════════════════════════════════════════ */

:root {
  --paw-accent:  #3d7a5e;
  --paw-forest:  #2d4a3e;
  --paw-cream:   #faf7f2;
  --paw-white:   #ffffff;
  --paw-text:    #1a2e25;
  --paw-muted:   #7a8e82;
  --paw-border:  #e4ddd4;
  --paw-radius:  20px;
  --paw-w:       356px;
  --paw-shadow:  0 24px 72px rgba(0,0,0,.18), 0 4px 20px rgba(0,0,0,.09);
  /* Always stay above WordPress admin bar (z=99999) and most theme layers */
  --paw-z:       2000000;
}

/* ── Reset: scope all paw elements ────────────────────────────────── */
.paw-ai-widget,
.paw-ai-widget * {
  box-sizing: border-box;
}

/* ── Widget container (fixed anchor) ──────────────────────────────── */
.paw-ai-widget {
  position:  fixed;
  bottom:    24px;
  right:     24px;
  z-index:   var(--paw-z);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* NOTE: do NOT add contain:layout — it breaks position:fixed on children */
}

/* ── Trigger Button ───────────────────────────────────────────────── */
.paw-ai-trigger {
  position:    relative;
  display:     flex;
  align-items: center;
  gap:         9px;
  background:  var(--paw-accent);
  color:       #fff;
  border:      none;
  border-radius: 999px;
  padding:     13px 20px 13px 14px;
  cursor:      pointer;
  font-size:   .88rem;
  font-weight: 800;
  font-family: inherit;
  letter-spacing: .015em;
  box-shadow:  0 8px 28px rgba(61,122,94,.42), 0 2px 8px rgba(0,0,0,.12);
  transition:  transform .2s ease, box-shadow .2s ease, background .2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Ensure button sits above page content */
  z-index: 1;
}
.paw-ai-trigger:hover {
  background: var(--paw-forest);
  transform:  translateY(-2px);
  box-shadow: 0 14px 40px rgba(61,122,94,.48), 0 4px 14px rgba(0,0,0,.15);
}
.paw-ai-trigger:active { transform: translateY(0); }

.paw-trigger-icon {
  width:        36px;
  height:       36px;
  background:   rgba(255,255,255,.16);
  border-radius: 50%;
  display:      flex;
  align-items:  center;
  justify-content: center;
  flex-shrink:  0;
}
.paw-trigger-icon svg { display: block; }

/* Pulsing notification dot — hidden as soon as user opens chat */
.paw-trigger-dot {
  position:     absolute;
  top:          -3px;
  right:        -3px;
  width:        13px;
  height:       13px;
  background:   #ef4444;
  border:       2.5px solid #fff;
  border-radius: 50%;
  animation:    paw-dot-pulse 2.2s ease infinite;
  pointer-events: none;
}
/* Once .paw-seen is on the trigger, dot is gone for good */
.paw-ai-trigger.paw-seen .paw-trigger-dot {
  display: none;
}
@keyframes paw-dot-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.3); opacity: .7; }
}

/* ── Chat Panel ───────────────────────────────────────────────────── */
.paw-ai-panel {
  /* Desktop: floats above the trigger button */
  position:     absolute;
  bottom:       calc(100% + 14px);
  right:        0;
  width:        var(--paw-w);
  max-height:   540px;
  background:   var(--paw-white);
  border-radius: var(--paw-radius);
  box-shadow:   var(--paw-shadow);
  border:       1px solid rgba(0,0,0,.07);

  /* Flex column layout */
  display:          flex;
  flex-direction:   column;
  overflow:         hidden;

  /* Hidden by default */
  opacity:          0;
  visibility:       hidden;
  transform:        translateY(14px) scale(.97);
  pointer-events:   none;
  transition:       opacity .26s cubic-bezier(.4,0,.2,1),
                    transform .26s cubic-bezier(.4,0,.2,1),
                    visibility 0s linear .26s;
}
.paw-ai-panel.paw-open {
  opacity:        1;
  visibility:     visible;
  transform:      translateY(0) scale(1);
  pointer-events: auto;
  transition:     opacity .26s cubic-bezier(.4,0,.2,1),
                  transform .26s cubic-bezier(.4,0,.2,1),
                  visibility 0s linear 0s;
}

/* ── Header ───────────────────────────────────────────────────────── */
.paw-header {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     14px 16px;
  background:  linear-gradient(135deg, var(--paw-forest) 0%, #4a9470 100%);
  color:       #fff;
}
.paw-header-left {
  display:    flex;
  align-items: center;
  gap:        10px;
  min-width:  0; /* prevent overflow */
}
.paw-header-avatar {
  width:        42px;
  height:       42px;
  border-radius: 50%;
  background:   rgba(255,255,255,.15);
  display:      flex;
  align-items:  center;
  justify-content: center;
  flex-shrink:  0;
  box-shadow:   0 0 0 2px rgba(255,255,255,.2);
}
.paw-header-avatar svg { display: block; }
.paw-header-name {
  font-size:   .94rem;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}
.paw-header-status {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   .7rem;
  color:       rgba(255,255,255,.72);
  margin-top:  2px;
}
.paw-online-dot {
  display:     inline-block;
  width:       7px;
  height:      7px;
  background:  #4ade80;
  border-radius: 50%;
  box-shadow:  0 0 0 2px rgba(74,222,128,.3);
  flex-shrink: 0;
  animation:   paw-blink 2.8s ease infinite;
}
@keyframes paw-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.paw-close-btn {
  background:   rgba(255,255,255,.12);
  border:       none;
  color:        #fff;
  width:        34px;
  height:       34px;
  border-radius: 50%;
  cursor:       pointer;
  display:      flex;
  align-items:  center;
  justify-content: center;
  transition:   background .18s;
  flex-shrink:  0;
  -webkit-tap-highlight-color: transparent;
}
.paw-close-btn:hover  { background: rgba(255,255,255,.26); }
.paw-close-btn svg { display: block; }

/* ── Messages ─────────────────────────────────────────────────────── */
.paw-messages {
  flex:           1;
  overflow-y:     auto;
  overflow-x:     hidden;
  padding:        16px 14px 8px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  min-height:     0; /* critical for flex overflow to work */
  scrollbar-width: thin;
  scrollbar-color: var(--paw-border) transparent;
  -webkit-overflow-scrolling: touch;
}
.paw-messages::-webkit-scrollbar       { width: 4px; }
.paw-messages::-webkit-scrollbar-track { background: transparent; }
.paw-messages::-webkit-scrollbar-thumb { background: var(--paw-border); border-radius: 4px; }

/* Message row */
.paw-msg {
  display:    flex;
  align-items: flex-end;
  gap:        7px;
  max-width:  92%;
  animation:  paw-msg-in .22s ease both;
}
@keyframes paw-msg-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.paw-msg-bot  { align-self: flex-start; }
.paw-msg-user { align-self: flex-end; flex-direction: row-reverse; }

/* Bot avatar */
.paw-msg-avatar {
  width:        28px;
  height:       28px;
  border-radius: 50%;
  background:   linear-gradient(135deg, var(--paw-forest) 0%, var(--paw-accent) 100%);
  display:      flex;
  align-items:  center;
  justify-content: center;
  flex-shrink:  0;
  color:        #fff;
}
.paw-msg-avatar svg { display: block; }

/* Bubbles */
.paw-bubble {
  padding:      9px 14px;
  border-radius: 18px;
  font-size:    .845rem;
  line-height:  1.65;
  color:        var(--paw-text);
  word-break:   break-word;
  overflow-wrap: break-word;
}
.paw-msg-bot  .paw-bubble {
  background:                var(--paw-cream);
  border:                    1px solid var(--paw-border);
  border-bottom-left-radius: 5px;
}
.paw-msg-user .paw-bubble {
  background:                 var(--paw-accent);
  color:                      #fff;
  border-bottom-right-radius: 5px;
}
/* Markdown in bot bubble */
.paw-bubble strong { font-weight: 800; }
.paw-bubble em     { font-style: italic; }
.paw-bubble ul     { padding-left: 16px; margin: 4px 0; }
.paw-bubble li     { margin-bottom: 2px; }
.paw-bubble br     { line-height: 1.8; }
.paw-bubble a      { color: var(--paw-accent); text-decoration: underline; }
.paw-msg-user .paw-bubble a { color: rgba(255,255,255,.88); }

/* Typing indicator */
.paw-typing {
  display:      flex;
  align-items:  center;
  gap:          4px;
  padding:      10px 14px;
  background:   var(--paw-cream);
  border:       1px solid var(--paw-border);
  border-radius: 18px;
  border-bottom-left-radius: 5px;
}
.paw-typing span {
  display:      block;
  width:        7px;
  height:       7px;
  background:   var(--paw-muted);
  border-radius: 50%;
  animation:    paw-bounce .95s ease infinite;
}
.paw-typing span:nth-child(2) { animation-delay: .18s; }
.paw-typing span:nth-child(3) { animation-delay: .34s; }
@keyframes paw-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-7px); }
}

/* WhatsApp CTA */
.paw-wa-cta {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  background:  #25d366;
  color:       #fff !important;
  text-decoration: none !important;
  padding:     8px 16px;
  border-radius: 999px;
  font-size:   .8rem;
  font-weight: 800;
  margin-top:  10px;
  transition:  background .18s;
}
.paw-wa-cta:hover { background: #1dac54; }
.paw-wa-cta svg { display: block; flex-shrink: 0; }

/* ── Quick-action chips ────────────────────────────────────────────── */
.paw-quick-actions {
  flex-shrink: 0;
  padding:     6px 12px 10px;
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
}
.paw-chip {
  background:   var(--paw-cream);
  border:       1.5px solid var(--paw-border);
  color:        var(--paw-text);
  font-size:    .74rem;
  font-weight:  700;
  font-family:  inherit;
  padding:      5px 12px;
  border-radius: 999px;
  cursor:       pointer;
  transition:   background .18s, border-color .18s, color .18s;
  white-space:  nowrap;
  -webkit-tap-highlight-color: transparent;
}
.paw-chip:hover,
.paw-chip:focus {
  background:   rgba(61,122,94,.08);
  border-color: var(--paw-accent);
  color:        var(--paw-accent);
  outline:      none;
}

/* ── Email capture bar ────────────────────────────────────────────── */
.paw-email-bar {
  flex-shrink: 0;
  padding:     10px 14px;
  background:  rgba(61,122,94,.06);
  border-top:  1px solid var(--paw-border);
}
.paw-email-label {
  font-size:  .78rem;
  color:      var(--paw-muted);
  margin:     0 0 7px;
}
.paw-email-row {
  display: flex;
  gap:     8px;
}
.paw-email-input {
  flex:        1;
  padding:     8px 12px;
  border:      1.5px solid var(--paw-border);
  border-radius: 999px;
  font-size:   .82rem;
  font-family: inherit;
  outline:     none;
  background:  #fff;
  color:       var(--paw-text);
  min-width:   0;
  transition:  border-color .18s;
  -webkit-appearance: none;
}
.paw-email-input:focus { border-color: var(--paw-accent); }
.paw-email-btn {
  background:   var(--paw-accent);
  color:        #fff;
  border:       none;
  padding:      8px 16px;
  border-radius: 999px;
  font-size:    .8rem;
  font-weight:  800;
  font-family:  inherit;
  cursor:       pointer;
  transition:   background .18s;
  white-space:  nowrap;
  flex-shrink:  0;
}
.paw-email-btn:hover { background: var(--paw-forest); }

/* ── Input area ───────────────────────────────────────────────────── */
.paw-input-area {
  flex-shrink: 0;
  display:     flex;
  align-items: flex-end;
  gap:         8px;
  padding:     10px 12px;
  border-top:  1px solid var(--paw-border);
  background:  var(--paw-white);
}
.paw-input {
  flex:        1;
  border:      1.5px solid var(--paw-border);
  border-radius: 16px;
  padding:     9px 13px;
  font-size:   .84rem;
  font-family: inherit;
  resize:      none;
  outline:     none;
  line-height: 1.5;
  max-height:  96px;
  overflow-y:  auto;
  background:  var(--paw-cream);
  color:       var(--paw-text);
  min-width:   0;
  transition:  border-color .18s, background .18s;
  -webkit-appearance: none;
  /* Prevent iOS zoom on focus (font-size must be ≥ 16px on iOS) */
  font-size:   16px;
}
.paw-input:focus {
  border-color: var(--paw-accent);
  background:   #fff;
}
.paw-input::placeholder { color: var(--paw-muted); font-size: .84rem; }
.paw-send-btn {
  width:        40px;
  height:       40px;
  border-radius: 50%;
  background:   var(--paw-accent);
  color:        #fff;
  border:       none;
  cursor:       pointer;
  display:      flex;
  align-items:  center;
  justify-content: center;
  flex-shrink:  0;
  transition:   background .18s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.paw-send-btn:hover:not(:disabled) {
  background:  var(--paw-forest);
  transform:   scale(1.07);
}
.paw-send-btn:disabled {
  opacity: .45;
  cursor:  not-allowed;
}
.paw-send-btn svg { display: block; }

/* ── Footer ───────────────────────────────────────────────────────── */
.paw-footer-bar {
  flex-shrink: 0;
  text-align:  center;
  font-size:   .62rem;
  color:       var(--paw-muted);
  padding:     3px 0 8px;
  letter-spacing: .01em;
}

/* ── MOBILE — full-screen panel ────────────────────────────────────── */
@media (max-width: 560px) {
  /* Anchor stays bottom-right */
  .paw-ai-widget {
    bottom: 16px;
    right:  16px;
  }

  /* Panel fills the viewport independently (fixed, not relative to widget) */
  .paw-ai-panel {
    position:     fixed;
    top:          0;
    left:         0;
    right:        0;
    bottom:       0;
    width:        100%;
    max-height:   none;
    border-radius: 0;
    /* Respect device safe areas (notch / home bar on iPhone) */
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    /* Must be above the trigger widget */
    z-index: calc(var(--paw-z) + 10);
  }

  /*
   * Hide the trigger button when the panel is open on mobile.
   * This prevents the button from peeking above the full-screen panel.
   * The widget gets .paw-widget-open added via JS on openChat().
   */
  .paw-ai-widget.paw-widget-open .paw-ai-trigger {
    display: none;
  }

  /* Messages fill available space */
  .paw-messages {
    padding: 14px 12px 6px;
  }

  /* Slightly larger chips on touch */
  .paw-chip {
    font-size: .78rem;
    padding:   6px 14px;
  }

  /* Bigger send button hit area on touch */
  .paw-send-btn {
    width:  44px;
    height: 44px;
  }
}