/* Centro Hara — chat de atención. Usa los tokens de tokens.css (violeta de marca). */
.hc { display:flex; flex-direction:column; height:100%; min-height:0; background:var(--surface,#fff); font-family:var(--font,system-ui,sans-serif); }
.hc-msgs { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; background:var(--violet-tint,#faf5fe); }
.hc-m { max-width:86%; padding:9px 13px; border-radius:14px; font-size:14.5px; line-height:1.5; word-wrap:break-word; overflow-wrap:anywhere; }
.hc-bot { align-self:flex-start; background:#fff; border:1px solid var(--border,#ece5f3); border-bottom-left-radius:4px; color:var(--text,#251a2d); }
.hc-yo { align-self:flex-end; background:var(--violet,#a83ccc); color:#fff; border-bottom-right-radius:4px; }
.hc-m a { color:inherit; text-decoration:underline; }
.hc-aviso { font-size:11.5px; color:var(--muted,#8b7e96); padding:6px 14px; border-top:1px solid var(--border,#ece5f3); background:#fff; }
.hc-form { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--border,#ece5f3); background:#fff; align-items:flex-end; }
.hc-form textarea { flex:1; resize:none; border:1px solid var(--border,#ece5f3); border-radius:12px; padding:10px 12px; font:inherit; font-size:15px; max-height:120px; outline:none; }
.hc-form textarea:focus { border-color:var(--violet,#a83ccc); box-shadow:0 0 0 3px var(--violet-soft,#f0e1f9); }
.hc-enviar { background:var(--violet,#a83ccc); color:#fff; border:0; border-radius:12px; padding:0 16px; min-height:44px; font:inherit; font-weight:600; font-size:14px; cursor:pointer; }
.hc-enviar:disabled { opacity:.55; cursor:default; }
.hc-prop { align-self:stretch; border:1.5px solid var(--violet,#a83ccc); border-radius:14px; padding:12px 14px; background:#fff; box-shadow:var(--shadow-sm,0 2px 10px rgba(140,43,174,.06)); }
.hc-prop-t { font-size:12px; font-weight:700; color:var(--violet-deep,#8c2bae); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.hc-prop-r { font-size:14.5px; margin-bottom:10px; }
.hc-prop-b { display:flex; gap:8px; flex-wrap:wrap; }
.hc-prop-b button { min-height:44px; padding:0 16px; border-radius:10px; font:inherit; font-weight:600; font-size:14px; cursor:pointer; border:0; }
.hc-si { background:var(--violet,#a83ccc); color:#fff; }
.hc-no { background:var(--violet-soft,#f0e1f9); color:var(--violet-deep,#8c2bae); }
.hc-prop-b button:disabled { opacity:.6; cursor:default; }
.hc-prop-fin { font-size:13.5px; color:var(--muted,#8b7e96); }
.hc-prop-fin.ok { color:#1f7a4a; font-weight:600; }
.hc-pto i { display:inline-block; width:6px; height:6px; margin:0 2px; border-radius:50%; background:var(--muted,#8b7e96); animation:hcp 1.1s infinite ease-in-out; }
.hc-pto i:nth-child(2) { animation-delay:.15s } .hc-pto i:nth-child(3) { animation-delay:.3s }
@keyframes hcp { 0%,80%,100% { opacity:.25 } 40% { opacity:1 } }
@media (prefers-reduced-motion: reduce) { .hc-pto i { animation:none; opacity:.6 } }
/* Saludo escrito letra a letra (chat público en la primera visita) y el botón a la zona de usuario que lo sigue. */
.hc-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hc-caret { display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-2px; background:var(--violet,#a83ccc); animation:hcc .9s steps(1) infinite; }
@keyframes hcc { 50% { opacity:0 } }
.hc-cta { background:none; border:0; padding:0; max-width:100%; animation:hca .35s ease both; }
@keyframes hca { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
.hc-m .hc-boton { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 18px 0 14px; border-radius:999px; background:var(--violet,#a83ccc); color:#fff; font-weight:600; font-size:14px; text-decoration:none; box-shadow:0 4px 14px rgba(140,43,174,.22); }
.hc-m .hc-boton:hover { background:var(--violet-deep,#8c2bae); }
.hc-boton svg { width:20px; height:20px; flex:none; }
@media (prefers-reduced-motion: reduce) { .hc-caret, .hc-cta { animation:none } }