:root{
  --primary: #b66dff;
  --primary-rgb: 182,109,255;
  --primary-dark: #9157cc;
  --primary-tint-9: #f8f1ff;

  --success: #1bcfb4; --success-rgb: 27,207,180; --success-strong:#0ea28c;
  --info: #198ae3; --info-rgb: 25,138,227;

  --bg-page: #f6f2fb;
  --bg-surface: #ffffff;

  --text-primary: #343a40;
  --text-regular: #6c757d;
  --text-secondary: #76838f;

  --border: #ebedf2;
  --border-light: #f0f1f5;

  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-round: 9999px;

  --shadow-sm: 0 2px 6px rgba(31,45,61,0.06);
  --shadow-md: 0 6px 18px rgba(31,45,61,0.08);
  --shadow-lg: 0 16px 36px rgba(31,45,61,0.14);

  --font: 'Lato', -apple-system, 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background-color:var(--bg-page);
  background-image: radial-gradient(rgba(var(--primary-rgb),0.08) 1px, transparent 1px);
  background-size: 18px 18px;
  color:var(--text-regular);
  font-family:var(--font);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ display:block; max-width:100%; }

/* ---------- chat screen ---------- */
.chat-screen{
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
  max-width:560px; margin:0 auto;
  background:var(--bg-page);
  box-shadow:var(--shadow-lg);
  position:relative;
}

.chat-header{
  display:flex; align-items:center; gap:0.8rem;
  padding:0.7rem 1rem;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border-light);
  box-shadow:var(--shadow-sm);
  position:sticky; top:0; z-index:5;
}
.chat-back{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:none;
  color:var(--text-secondary); text-decoration:none; border-radius:50%;
  transition:background 0.15s ease, color 0.15s ease;
}
.chat-back:hover{ background:var(--primary-tint-9); color:var(--primary-dark); }
.chat-back svg{ width:19px; height:19px; }

.chat-header-user{ display:flex; align-items:center; gap:0.7rem; flex:1; min-width:0; }
.chat-avatar{
  width:40px; height:40px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--primary-tint-9);
}
.chat-avatar img{ width:100%; height:100%; object-fit:cover; }
.chat-header-text{ display:flex; flex-direction:column; min-width:0; }
.chat-header-text strong{
  font-size:0.95rem; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-status{ display:flex; align-items:center; gap:0.35em; font-size:0.74rem; color:var(--success-strong); }
.chat-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--success); }

.chat-brand{ height:22px; width:auto; flex:none; opacity:0.9; border-radius:4px; }

.chat-body{
  flex:1; overflow-y:auto;
  padding:1.1rem 1rem;
  display:flex; flex-direction:column; gap:0.55rem;
}

.bubble{
  max-width:78%;
  padding:0.65em 0.95em;
  border-radius:16px;
  font-size:0.94rem;
  line-height:1.4;
  box-shadow:var(--shadow-sm);
  animation:bubbleIn 0.35s ease;
}
.bubble.received{
  align-self:flex-start;
  background:var(--bg-surface);
  color:var(--text-primary);
  border-bottom-left-radius:4px;
}
@keyframes bubbleIn{
  from{ opacity:0; transform:translateY(8px) scale(0.98); }
  to{ opacity:1; transform:none; }
}

.bubble.typing{ display:inline-flex; align-items:center; gap:4px; padding:0.75em 1em; }
.bubble.typing span{
  width:6px; height:6px; border-radius:50%;
  background:var(--text-secondary); opacity:0.5;
  animation:typingBounce 1s infinite ease-in-out;
}
.bubble.typing span:nth-child(2){ animation-delay:0.15s; }
.bubble.typing span:nth-child(3){ animation-delay:0.3s; }
@keyframes typingBounce{
  0%,60%,100%{ transform:translateY(0); opacity:0.5; }
  30%{ transform:translateY(-4px); opacity:1; }
}

/* ---------- quick replies (opciones de contacto flotando) ---------- */
.quick-replies{
  padding:0.9rem 1rem 1.3rem;
  display:flex; flex-direction:column; gap:0.7rem;
  opacity:0; transform:translateY(14px);
  transition:opacity 0.4s ease, transform 0.4s ease;
  pointer-events:none;
}
.quick-replies.is-visible{ opacity:1; transform:none; pointer-events:auto; }

.quick-reply{
  display:flex; align-items:center; gap:0.8rem;
  text-decoration:none;
  padding:0.85rem 1rem;
  border-radius:var(--radius-round);
  background:var(--bg-surface);
  border:1.5px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  opacity:0; transform:translateY(10px);
}
.quick-replies.is-visible .quick-reply{ animation:chipIn 0.4s ease forwards; }
.quick-replies.is-visible .quick-reply:nth-child(1){ animation-delay:0.05s; }
.quick-replies.is-visible .quick-reply:nth-child(2){ animation-delay:0.18s; }
.quick-replies.is-visible .quick-reply:nth-child(3){ animation-delay:0.31s; }
@keyframes chipIn{ to{ opacity:1; transform:none; } }
.quick-reply:active{ transform:translateY(1px); }

.quick-reply .icon{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.quick-reply .icon svg{ width:19px; height:19px; }
.quick-reply .label{ display:flex; flex-direction:column; gap:0.05rem; min-width:0; }
.quick-reply .label strong{ font-size:0.92rem; color:var(--text-primary); }
.quick-reply .label span{
  font-size:0.78rem; color:var(--text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.quick-reply.whatsapp .icon{ background:#1bcfb4; }
.quick-reply.whatsapp:hover{ border-color:#1bcfb4; box-shadow:0 6px 16px -8px rgba(27,207,180,0.6); }
.quick-reply.email .icon{ background:var(--primary); }
.quick-reply.email:hover{ border-color:var(--primary); box-shadow:0 6px 16px -8px rgba(var(--primary-rgb),0.6); }
.quick-reply.linkedin .icon{ background:#198ae3; }
.quick-reply.linkedin:hover{ border-color:#198ae3; box-shadow:0 6px 16px -8px rgba(25,138,227,0.6); }

/* ---------- noscript fallback ---------- */
.chat-noscript{
  max-width:420px; margin:3rem auto; padding:2rem;
  background:var(--bg-surface); border-radius:16px; box-shadow:var(--shadow-md);
  text-align:center;
}
.chat-noscript a{
  display:block; margin-top:0.8rem; font-weight:700; color:var(--primary-dark); text-decoration:none;
}

@media (prefers-reduced-motion: reduce){
  .bubble{ animation:none; }
  .bubble.typing span{ animation:none; }
  .quick-replies{ transition:none; }
  .quick-reply{ animation:none !important; opacity:1; transform:none; }
}