/* Chat público · Dukal Autos. Mobile-first; se ve igual a pantalla completa o en un iframe de ~400x640. */
:root { --chat-fondo: #e9eef4; --burbuja-bot: #ffffff; --burbuja-bot-tx: #111a26; --burbuja-yo: #d4e9fd; --burbuja-yo-tx: #0b1d33; --cab: #0e1620; }
@media (prefers-color-scheme: dark) {
  :root { --chat-fondo: #0a1118; --burbuja-bot: #1a2431; --burbuja-bot-tx: #e9eef4; --burbuja-yo: #0b4f94; --burbuja-yo-tx: #ffffff; --cab: #070c12; }
}

html, body { height: 100%; }
body.pagina-chat { background: var(--chat-fondo); overflow: hidden; }

.chat { display: flex; flex-direction: column; height: 100dvh; width: 100%; max-width: 560px; margin: 0 auto; background: var(--chat-fondo); position: relative; }
@media (min-width: 640px) and (min-height: 720px) {
  body.pagina-chat { background: linear-gradient(160deg, #0e1620, #14304f 70%, #0e1620); }
  .chat { height: min(780px, calc(100dvh - 48px)); margin-top: 24px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-3); }
}

/* Cabecera */
.chat-cab { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--cab); color: #fff; border-bottom: 2px solid var(--acento); flex: none; padding-top: max(var(--sp-3), env(safe-area-inset-top)); }
.chat-logo { border-radius: 10px; flex: none; object-fit: contain; }
.chat-titulo h1 { font-size: var(--t-lg); font-weight: 700; letter-spacing: 0; }
.chat-titulo p { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: #b9c4d3; }
.punto-en-linea { width: 8px; height: 8px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 0 3px rgba(52, 210, 123, .2); }

/* Mensajes */
.chat-mensajes { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .chat-mensajes { scroll-behavior: auto; } }
.msg { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(15, 23, 42, .08); animation: aparece .18s ease-out; }
.msg.bot { align-self: flex-start; background: var(--burbuja-bot); color: var(--burbuja-bot-tx); border-bottom-left-radius: 4px; }
.msg.yo { align-self: flex-end; background: var(--burbuja-yo); color: var(--burbuja-yo-tx); border-bottom-right-radius: 4px; }
.msg.bot + .msg.yo, .msg.yo + .msg.bot { margin-top: 8px; }
.msg a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.msg.bot a { color: var(--enlace); }
.msg strong { font-weight: 700; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }

.aviso-chat { align-self: center; max-width: 92%; text-align: center; background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-bd); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--t-sm); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.aviso-chat button { background: none; border: 0; padding: 6px 4px; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; min-height: 32px; }

/* Escribiendo… : tres puntos que rebotan */
.msg.escribiendo { display: flex; gap: 5px; padding: 14px 16px; align-items: center; }
.msg.escribiendo span { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); animation: rebota 1.1s infinite ease-in-out; }
.msg.escribiendo span:nth-child(2) { animation-delay: .16s; }
.msg.escribiendo span:nth-child(3) { animation-delay: .32s; }
@keyframes rebota { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-6px); opacity: 1; } }
@keyframes late { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .msg.escribiendo span { animation-name: late; animation-duration: 1.2s; }
}

/* Pie */
.chat-pie { flex: none; background: var(--sup); border-top: 1px solid var(--borde); padding: var(--sp-2) var(--sp-3) max(var(--sp-2), env(safe-area-inset-bottom)); }
.rapidas { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-1) 0 var(--sp-2); }
.rapida { min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--r-pill); border: 1.5px solid var(--marca); background: var(--sup); color: var(--marca-texto); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; transition: background-color .15s; }
.rapida:hover { background: var(--marca-suave); }
.rapida:active { background: var(--marca); color: #fff; }

.compositor { display: flex; gap: var(--sp-2); align-items: center; }
.compositor input { flex: 1; min-width: 0; min-height: 46px; padding: 0 var(--sp-4); font: inherit; font-size: 16px; color: var(--texto); background: var(--sup-2); border: 1px solid var(--borde-fuerte); border-radius: var(--r-pill); }
.compositor input:focus-visible { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 35%, transparent); }
.compositor input:disabled { opacity: .6; }
.compositor input::placeholder { color: var(--texto-3); opacity: 1; }
.enviar { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--marca); color: #fff; cursor: pointer; transition: background-color .15s; }
.enviar:hover:not(:disabled) { background: var(--marca-hover); }
.enviar:disabled { opacity: .45; cursor: not-allowed; }

.chat-nota { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 32px; margin-top: 2px; }
.enlace-wsp { background: none; border: 0; padding: 6px 2px; font: inherit; font-size: var(--t-sm); color: var(--marca-texto); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.enlace-wsp:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }
.contador { font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.contador.limite { color: var(--error-tx); font-weight: 700; }
.privacidad { font-size: var(--t-xs); color: var(--texto-3); text-align: center; padding-bottom: 2px; }

.cierre { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2) var(--sp-2); }
.cierre-titulo { font-weight: 700; font-size: var(--t-md); }
.cierre-texto { color: var(--texto-2); font-size: var(--t-sm); max-width: 34ch; margin-bottom: var(--sp-2); }

@media (max-height: 520px) { .privacidad { display: none; } }