/* ================================================================
   CHAT DE ASESORÍA IA — chat.css
   Jonathan Fuxion · Productos Naturales
   ================================================================ */

/* ── Variables extra (complement style.css) ── */
:root {
  --chat-bg      : #ffffff;
  --chat-bg2     : #f4f7f5;
  --chat-border  : rgba(0,0,0,.09);
  --chat-shadow  : 0 24px 60px rgba(0,0,0,.14);
  --chat-radius  : 20px;
  --chat-green   : #25d366;
  --chat-accent  : var(--gold, #c9a84c);
  --chat-user-bg : linear-gradient(135deg,#1a7a4a,#0e5c38);
  --chat-ai-bg   : var(--chat-bg2);
  --chat-text    : #1a1a1a;
  --chat-muted   : #6b7280;
  --chat-typing  : #4ade80;
}
[data-theme="dark"] {
  --chat-bg      : #1e2a23;
  --chat-bg2     : #16201b;
  --chat-border  : rgba(255,255,255,.08);
  --chat-ai-bg   : #243028;
  --chat-text    : #e8f5ee;
  --chat-muted   : #8eab96;
}

/* ── Hero: ocultar textos cuando el chat está abierto ── */
#hero.chat-active .hbadge,
#hero.chat-active .htitle,
#hero.chat-active .hsub {
  display: none !important;;
}
#hero.chat-active .hcon {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  width          : 100%;
  min-height     : 75vh;
  padding-top    : 20px;
  padding-bottom : 30px;
}

/* ── Hero chat container ── */
#hero-chat {
  display       : none;
  flex-direction: column;
  width         : min(1000px, 95vw);
  height        : clamp(550px, 75vh, 800px);
  margin        : 0 auto;
  background    : var(--chat-bg);
  border        : 1px solid var(--chat-border);
  border-radius : var(--chat-radius);
  box-shadow    : var(--chat-shadow);
  overflow      : hidden;
  animation     : chatSlideIn .45s cubic-bezier(.22,1,.36,1) both;
  position      : relative;
  z-index       : 10;
}
#hero-chat.open { display: flex; }

@keyframes chatSlideIn {
  from { opacity:0; transform: translateY(28px) scale(.97); }
  to   { opacity:1; transform: translateY(0)   scale(1);   }
}

/* Header del chat */
.chat-hd {
  display        : flex;
  align-items    : center;
  gap            : 12px;
  padding        : 14px 18px;
  background     : linear-gradient(135deg,#1a7a4a 0%,#0e5c38 100%);
  color          : #fff;
  flex-shrink    : 0;
}
.chat-hd-avatar {
  width          : 38px;
  height         : 38px;
  border-radius  : 50%;
  background     : rgba(255,255,255,.18);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 1.1rem;
  flex-shrink    : 0;
}
.chat-hd-info { flex: 1; }
.chat-hd-name { font-weight:700; font-size:.9rem; line-height:1.2; }
.chat-hd-status {
  font-size : .72rem;
  opacity   : .85;
  display   : flex;
  align-items: center;
  gap       : 5px;
}
.chat-hd-dot {
  width : 7px; height: 7px;
  background: var(--chat-typing);
  border-radius: 50%;
  display: inline-block;
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.5; transform:scale(.7); }
}
.chat-hd-close {
  background: none; border: none; cursor: pointer;
  color: #fff; font-size: 1rem; padding: 4px; opacity: .7;
  transition: opacity .2s;
}
.chat-hd-close:hover { opacity: 1; }

/* Messages area */
.chat-msgs {
  flex         : 1;
  overflow-y   : auto;
  padding      : 20px 24px;
  display      : flex;
  flex-direction: column;
  gap          : 12px;
  background   : var(--chat-bg);
  scroll-behavior: smooth;
}
.chat-msgs::-webkit-scrollbar { width: 4px; }
.chat-msgs::-webkit-scrollbar-track { background: transparent; }
.chat-msgs::-webkit-scrollbar-thumb { background: var(--chat-border); border-radius: 4px; }

/* Bubble base */
.chat-bubble {
  max-width     : 74%;
  padding       : 12px 16px;
  border-radius : 18px;
  font-size     : .9rem;
  line-height   : 1.55;
  word-break    : break-word;
  animation     : bubbleIn .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bubbleIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0);   }
}

/* AI bubble */
.chat-bubble.ai {
  align-self    : flex-start;
  background    : var(--chat-ai-bg);
  border        : 1px solid var(--chat-border);
  color         : var(--chat-text);
  border-bottom-left-radius: 4px;
}

/* User bubble */
.chat-bubble.user {
  align-self    : flex-end;
  background    : var(--chat-user-bg);
  color         : #fff;
  border-bottom-right-radius: 4px;
}

/* Product card inside bubble */
.chat-prod-card {
  margin-top   : 10px;
  background   : #fff;
  border       : 1px solid var(--chat-border);
  border-radius: 12px;
  overflow     : hidden;
  box-shadow   : 0 4px 14px rgba(0,0,0,.08);
}
[data-theme="dark"] .chat-prod-card { background: #1a2820; }
.chat-prod-img {
  width: 100%; height: 120px;
  object-fit: cover;
  display: block;
}
.chat-prod-img-placeholder {
  width: 100%; height: 100px;
  background: linear-gradient(135deg,#d4edda,#a8d5b5);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.chat-prod-body { padding: 10px 12px; }
.chat-prod-name {
  font-weight: 700; font-size: .85rem;
  color: var(--chat-text); margin-bottom: 4px;
}
.chat-prod-why {
  font-size: .78rem; color: var(--chat-muted);
  line-height: 1.4; margin-bottom: 8px;
}
.chat-prod-price {
  font-weight: 800; font-size: 1rem;
  color: #1a7a4a; margin-bottom: 8px;
}
.chat-prod-actions { display: flex; gap: 6px; }
.chat-prod-btn {
  flex: 1; padding: 7px 10px;
  border-radius: 8px; border: none;
  font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.chat-prod-btn.add {
  background: #1a7a4a; color: #fff;
}
.chat-prod-btn.add:hover { background: #145e38; transform: translateY(-1px); }
.chat-prod-btn.wa {
  background: #25d366; color: #fff;
}
.chat-prod-btn.wa:hover { background: #1da851; transform: translateY(-1px); }

/* Typing indicator */
.chat-typing {
  align-self   : flex-start;
  background   : var(--chat-ai-bg);
  border       : 1px solid var(--chat-border);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding      : 10px 16px;
  display      : flex;
  gap          : 5px;
  align-items  : center;
  animation    : bubbleIn .3s ease both;
}
.chat-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--chat-muted);
  display: inline-block;
  animation: typingDot 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s;  }
@keyframes typingDot {
  0%,80%,100% { transform:scale(.7); opacity:.4; }
  40%         { transform:scale(1.1); opacity:1;  }
}

/* Input area */
.chat-inp-wrap {
  display     : flex;
  align-items : flex-end;
  gap         : 8px;
  padding     : 10px 12px;
  background  : var(--chat-bg);
  border-top  : 1px solid var(--chat-border);
  flex-shrink : 0;
}
.chat-inp {
  flex          : 1;
  border        : 1px solid var(--chat-border);
  border-radius : 12px;
  padding       : 9px 13px;
  font-size     : .85rem;
  font-family   : inherit;
  background    : var(--chat-bg2);
  color         : var(--chat-text);
  resize        : none;
  max-height    : 100px;
  overflow-y    : auto;
  line-height   : 1.45;
  transition    : border-color .2s;
  outline       : none;
}
.chat-inp:focus { border-color: #1a7a4a; }
.chat-inp::placeholder { color: var(--chat-muted); }
.chat-send {
  width         : 40px; height: 40px;
  border-radius : 50%;
  background    : #1a7a4a;
  border        : none;
  color         : #fff;
  font-size     : .95rem;
  cursor        : pointer;
  display       : flex;
  align-items   : center;
  justify-content: center;
  flex-shrink   : 0;
  transition    : background .2s, transform .15s;
}
.chat-send:hover { background: #145e38; transform: scale(1.08); }
.chat-send:disabled { background: #9ca3af; cursor: not-allowed; transform: none; }

/* Quick suggestions */
.chat-sugs {
  display     : flex;
  flex-wrap   : wrap;
  gap         : 6px;
  padding     : 0 12px 10px;
  background  : var(--chat-bg);
}
.chat-sug {
  padding       : 5px 11px;
  border-radius : 20px;
  border        : 1px solid var(--chat-border);
  font-size     : .75rem;
  cursor        : pointer;
  background    : var(--chat-bg2);
  color         : var(--chat-text);
  transition    : all .18s;
}
.chat-sug:hover {
  background    : #1a7a4a;
  color         : #fff;
  border-color  : #1a7a4a;
  transform     : translateY(-1px);
}

/* ── Disclaimer mini ── */
.chat-disclaimer {
  font-size  : .68rem;
  text-align : center;
  color      : var(--chat-muted);
  padding    : 0 12px 8px;
  background : var(--chat-bg);
}

/* ── Multiple product cards grid ── */
.chat-prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

/* Toast notification */
.chat-toast {
  position     : fixed;
  bottom       : 80px;
  left         : 50%;
  transform    : translateX(-50%) translateY(10px);
  background   : #1a7a4a;
  color        : #fff;
  padding      : 9px 20px;
  border-radius: 30px;
  font-size    : .83rem;
  font-weight  : 600;
  opacity      : 0;
  pointer-events: none;
  transition   : all .3s;
  z-index      : 9999;
  white-space  : nowrap;
}
.chat-toast.show {
  opacity   : 1;
  transform : translateX(-50%) translateY(0);
}

/* Responsive */
@media (max-width: 480px) {
  #hero-chat { max-height: 75vh; }
  .chat-prod-grid { grid-template-columns: 1fr; }
}

/* ── Responsive overrides for larger chat panel ── */
@media (max-width: 600px) {
  #hero-chat {
    width : 96vw !important;
    height: 82vh !important;
  }
  .chat-bubble { max-width: 88% !important; }
}