/**
 * PackVirtual iA — estilos del widget. Temas integrados:
 *   Clásicos del plugin original:  timeless · chatgpt · messages
 *   Nuevos:  aurora · neon · boutique · grok · premium · cyberpunk
 *            glass · midnight · sunset · mint
 *            y la familia oferta (naranja, hot, verde, azul, magenta)
 *
 * Cada tema define su paleta con variables CSS. Si el usuario activa
 * "colores propios", el plugin añade la clase .michat--custom cuyas variables
 * (impresas inline) tienen prioridad sobre la paleta del tema.
 */

/* ============================================================== BASE ====== */

.michat {
  /* paleta por defecto (Timeless) */
  --mc-user: #2768db;
  --mc-user-text: #ffffff;
  --mc-ai: #F1F3F7;
  --mc-ai-text: #20242c;
  --mc-header: #2831dc;
  --mc-header-text: #ffffff;
  --mc-back: #fafafa;
  --mc-border: #c5c5c5;
  --mc-input-bg: #ffffff;
  --mc-input-text: #20242c;
  --mc-input-border: #c5c5c5;
  --mc-link: #2768db;
  --mc-muted: #6b7280;
  --mc-font: 'Trebuchet MS', 'Segoe UI', sans-serif;
  --mc-font-size: 15px;
  --mc-font-family: var(--mc-font);
  --mc-font-header: 16px;
  --mc-font-message: var(--mc-font-size);
  --mc-font-list: 13px;
  --mc-font-input: var(--mc-font-size);
  --mc-font-button: var(--mc-font-size);
  --mc-font-quick: 14px;
  --mc-font-compliance: 11px;
  --mc-radius: 12px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  height: 520px;
  border: 1px solid var(--mc-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--mc-back);
  font-family: var(--mc-font-family, var(--mc-font));
  font-size: var(--mc-font-size);
  line-height: 1.45;
}
.michat *, .michat *::before, .michat *::after { box-sizing: border-box; }

/* ============================================================ CABECERA ==== */

.michat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mc-header);
  color: var(--mc-header-text);
  padding: 10px 14px;
  flex-shrink: 0;
}
.michat-header-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.michat-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.michat-header-info { flex: 1; min-width: 0; }
.michat-header-name { font-weight: 700; display: block; line-height: 1.2; font-size: var(--mc-font-header); }
.michat-header-sub { font-size: 12px; opacity: 0.85; display: block; }
.michat-header-actions { display: flex; gap: 4px; }
.michat-header-actions button {
  border: 0; background: transparent; color: var(--mc-header-text);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px;
  border-radius: 6px; opacity: 0.85;
}
.michat-header-actions button:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }

/* ============================================================ MENSAJES ==== */

.michat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}
.michat-msg { display: flex; gap: 8px; align-items: flex-end; }
.michat-msg--user { flex-direction: row-reverse; }

.michat-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.michat-avatar img { width: 100%; height: 100%; object-fit: cover; }

.michat-col { max-width: 82%; display: flex; flex-direction: column; }
.michat-msg--user .michat-col { align-items: flex-end; }

.michat-name {
  font-size: 11px;
  color: var(--mc-muted);
  margin: 0 6px 3px;
}

.michat-bubble {
  padding: 10px 14px;
  border-radius: var(--mc-radius);
  font-size: var(--mc-font-message);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.michat-msg--user .michat-bubble {
  background: var(--mc-user);
  color: var(--mc-user-text);
  border-bottom-right-radius: 4px;
}
.michat-msg--ai .michat-bubble {
  background: var(--mc-ai);
  color: var(--mc-ai-text);
  border-bottom-left-radius: 4px;
}
.michat-bubble p { margin: 0 0 8px; }
.michat-bubble p:last-child { margin-bottom: 0; }
.michat-bubble ul {
  margin: 6px 0;
  padding-left: 22px;
  font-size: var(--mc-font-list);
  line-height: 1.45;
}
.michat-bubble li { margin: 3px 0; }
/* Blindaje: que el tema de WordPress no pinte el texto de las burbujas
   (algunos temas ponen color global a p/li/strong y lavaban los temas oscuros). */
.michat-bubble p, .michat-bubble li, .michat-bubble strong, .michat-bubble em { color: inherit; }
.michat-bubble a { color: inherit; text-decoration: underline; }
.michat-msg--ai .michat-bubble a { color: var(--mc-link); }

/* botón copiar (en respuestas del bot) */
.michat-copy {
  align-self: flex-start;
  margin: 4px 6px 0;
  border: 0;
  background: transparent;
  color: var(--mc-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.michat-msg:hover .michat-copy { opacity: 1; }
.michat-copy:hover { background: rgba(0, 0, 0, 0.07); }
@media (hover: none) { .michat-copy { opacity: 0.8; } }

/* puntos de "escribiendo..." */
.michat-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.michat-typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mc-muted);
  animation: michat-blink 1.2s infinite ease-in-out;
}
.michat-typing span:nth-child(2) { animation-delay: 0.2s; }
.michat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes michat-blink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* ============================================================= ENTRADA ==== */

.michat-inputrow {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.michat-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--mc-input-border);
  border-radius: 9px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: var(--mc-font-input);
  outline: none;
  background: var(--mc-input-bg);
  color: var(--mc-input-text);
  min-height: 46px;
  max-height: 150px; /* crece con el texto (autoGrow en JS), hasta ~1 párrafo */
  overflow-y: auto;
  line-height: 1.4;
}
.michat-input:focus { border-color: var(--mc-user); }
.michat-send, .michat-clear {
  border: 0;
  border-radius: 9px;
  padding: 0 16px;
  font-family: inherit;
  font-size: var(--mc-font-button);
  font-weight: 600;
  cursor: pointer;
  background: var(--mc-user);
  color: var(--mc-user-text);
  transition: filter 0.15s;
}
.michat-send:hover { filter: brightness(1.12); }
.michat-send:disabled { opacity: 0.55; cursor: wait; }

/* Botón borrar: papelera propia con recuadro, que "abre la tapa" al pasar. */
.michat-clear {
  background: transparent;
  color: var(--mc-muted);
  border: 1.5px solid var(--mc-input-border);
  border-radius: 10px;
  width: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  transition: all 0.18s ease;
}
.michat-clear svg { display: block; }
.michat-trash-lid { transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 12px 5px; }
.michat-clear:hover {
  border-color: #e25563;
  color: #e25563;
  background: rgba(226, 85, 99, 0.08);
  transform: translateY(-1px);
}
.michat-clear:hover .michat-trash-lid { transform: rotate(-14deg) translateY(-1.5px); }
.michat-clear:active { transform: scale(0.93); }

.michat-compliance {
  font-size: var(--mc-font-compliance);
  color: var(--mc-muted);
  text-align: center;
  padding: 5px 12px 8px;
  background: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

/* ===================================================== TEMA: CHATGPT ====== */

.michat--chatgpt {
  --mc-user: #19c37d;
  --mc-user-text: #062b1d;
  --mc-ai: #444654;
  --mc-ai-text: #ececf1;
  --mc-header: #202123;
  --mc-header-text: #ececf1;
  --mc-back: #343541;
  --mc-border: #20212a;
  --mc-input-bg: #40414f;
  --mc-input-text: #ececf1;
  --mc-input-border: #565869;
  --mc-link: #8ab4ff;
  --mc-muted: #c5c5d2;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 10px;
}
.michat--chatgpt .michat-inputrow,
.michat--chatgpt .michat-compliance { background: rgba(64, 65, 79, 0.6); border-top-color: #2a2b36; }
.michat--chatgpt .michat-avatar { background: rgba(255, 255, 255, 0.1); }
.michat--chatgpt .michat-copy:hover { background: rgba(255, 255, 255, 0.1); }

/* ==================================================== TEMA: MESSAGES ====== */

.michat--messages {
  --mc-user: #0a84ff;
  --mc-user-text: #ffffff;
  --mc-ai: #e9e9eb;
  --mc-ai-text: #111;
  --mc-header: #f2f2f7;
  --mc-header-text: #111;
  --mc-back: #ffffff;
  --mc-border: #e3e3e8;
  --mc-input-bg: #ffffff;
  --mc-input-text: #111;
  --mc-input-border: #d8d8dc;
  --mc-link: #0a84ff;
  --mc-muted: #8e8e93;
  --mc-font: -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mc-radius: 18px;
}
.michat--messages .michat-header { border-bottom: 1px solid #e3e3e8; }
.michat--messages .michat-header-avatar { background: #d8d8de; }
.michat--messages .michat-input { border-radius: 20px; }
.michat--messages .michat-send { border-radius: 20px; }

/* ====================================================== TEMA: AURORA ====== */

.michat--aurora {
  --mc-user: rgba(17, 12, 51, 0.55);
  --mc-user-text: #ffffff;
  --mc-ai: rgba(255, 255, 255, 0.88);
  --mc-ai-text: #221a4e;
  --mc-header: rgba(255, 255, 255, 0.14);
  --mc-header-text: #ffffff;
  --mc-back: #4326c4;
  --mc-border: rgba(255, 255, 255, 0.35);
  --mc-input-bg: rgba(255, 255, 255, 0.92);
  --mc-input-text: #221a4e;
  --mc-input-border: transparent;
  --mc-link: #4326c4;
  --mc-muted: rgba(255, 255, 255, 0.85);
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 14px;
}
.michat--aurora {
  background: linear-gradient(135deg, #5b2be0 0%, #2b6be0 55%, #18c8e8 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 36px rgba(67, 38, 196, 0.35);
}
.michat--aurora .michat-header {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.michat--aurora .michat-msg--user .michat-bubble {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.michat--aurora .michat-msg--ai .michat-bubble {
  box-shadow: 0 4px 14px rgba(20, 10, 60, 0.18);
}
.michat--aurora .michat-inputrow,
.michat--aurora .michat-compliance {
  background: rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.michat--aurora .michat-name { color: rgba(255, 255, 255, 0.9); }
.michat--aurora .michat-avatar { background: rgba(255, 255, 255, 0.25); }
.michat--aurora .michat-send { background: #18c8e8; color: #06303a; }
.michat--aurora .michat-clear { color: rgba(255, 255, 255, 0.9); }
.michat--aurora .michat-copy { color: rgba(255, 255, 255, 0.85); }
.michat--aurora .michat-typing span { background: rgba(67, 38, 196, 0.7); }

/* ======================================================== TEMA: NEÓN ====== */

.michat--neon {
  --mc-user: #22d3ee;
  --mc-user-text: #04222b;
  --mc-ai: #161f33;
  --mc-ai-text: #d7e4ff;
  --mc-header: #0e1526;
  --mc-header-text: #7df9ff;
  --mc-back: #0b1020;
  --mc-border: #1d2b4a;
  --mc-input-bg: #11182e;
  --mc-input-text: #d7e4ff;
  --mc-input-border: #28406e;
  --mc-link: #7df9ff;
  --mc-muted: #6f81a6;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 12px;
}
.michat--neon { box-shadow: 0 0 0 1px #1d2b4a, 0 10px 40px rgba(34, 211, 238, 0.15); }
.michat--neon .michat-header {
  border-bottom: 1px solid #1d2b4a;
  text-shadow: 0 0 10px rgba(125, 249, 255, 0.6);
}
.michat--neon .michat-msg--user .michat-bubble {
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
}
.michat--neon .michat-msg--ai .michat-bubble {
  border: 1px solid #28406e;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.18);
}
.michat--neon .michat-inputrow,
.michat--neon .michat-compliance { background: #0e1526; border-top-color: #1d2b4a; }
.michat--neon .michat-input:focus { box-shadow: 0 0 8px rgba(34, 211, 238, 0.5); }
.michat--neon .michat-send { box-shadow: 0 0 10px rgba(34, 211, 238, 0.5); }
.michat--neon .michat-avatar { background: #11182e; }
.michat--neon .michat-copy:hover { background: rgba(255, 255, 255, 0.08); }

/* ==================================================== TEMA: BOUTIQUE ====== */

.michat--boutique {
  --mc-user: #b08d3e;
  --mc-user-text: #fffdf7;
  --mc-ai: #f0e9dc;
  --mc-ai-text: #33291c;
  --mc-header: #2e2620;
  --mc-header-text: #f4e8cf;
  --mc-back: #faf6ef;
  --mc-border: #d9cdb8;
  --mc-input-bg: #ffffff;
  --mc-input-text: #33291c;
  --mc-input-border: #d9cdb8;
  --mc-link: #8a6a22;
  --mc-muted: #8c7e66;
  --mc-font: Georgia, 'Times New Roman', serif;
  --mc-radius: 4px;
}
.michat--boutique { border: 1px solid #d9cdb8; }
.michat--boutique .michat-header {
  border-bottom: 2px solid #b08d3e;
  letter-spacing: 0.4px;
}
.michat--boutique .michat-header-name { font-variant: small-caps; font-size: 1.05em; }
.michat--boutique .michat-msg--user .michat-bubble {
  background: linear-gradient(160deg, #c4a050, #a37f31);
}
.michat--boutique .michat-msg--ai .michat-bubble { border: 1px solid #e2d7c3; }
.michat--boutique .michat-inputrow,
.michat--boutique .michat-compliance { background: #f4eee3; border-top-color: #e2d7c3; }
.michat--boutique .michat-avatar { background: #ece2cf; }

/* ======================================================== TEMA: GROK ====== */
/* Inspirado en Grok / X: negro puro, minimalista, pill input, acento blanco. */

.michat--grok {
  --mc-user: #ffffff;
  --mc-user-text: #0a0a0a;
  --mc-ai: #16181c;
  --mc-ai-text: #e7e9ea;
  --mc-header: #000000;
  --mc-header-text: #e7e9ea;
  --mc-back: #0a0a0a;
  --mc-border: #2f3336;
  --mc-input-bg: #000000;
  --mc-input-text: #e7e9ea;
  --mc-input-border: #2f3336;
  --mc-link: #1d9bf0;
  --mc-muted: #71767b;
  --mc-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mc-radius: 18px;
}
.michat--grok .michat-header { border-bottom: 1px solid #2f3336; }
.michat--grok .michat-header-avatar { background: #16181c; border: 1px solid #2f3336; }
.michat--grok .michat-msg--ai .michat-bubble { border: 1px solid #2f3336; }
.michat--grok .michat-inputrow,
.michat--grok .michat-compliance { background: #000; border-top-color: #2f3336; }
.michat--grok .michat-input { border-radius: 999px; padding-left: 18px; }
.michat--grok .michat-input:focus { border-color: #e7e9ea; box-shadow: 0 0 0 1px #e7e9ea; }
.michat--grok .michat-send { border-radius: 999px; background: #fff; color: #0a0a0a; }
.michat--grok .michat-clear { color: #71767b; }
.michat--grok .michat-avatar { background: #16181c; border: 1px solid #2f3336; }
.michat--grok .michat-copy:hover { background: rgba(255, 255, 255, 0.1); }

/* ====================================================== TEMA: OFERTA ====== */
/* Para VENDER: urgencia naranja, botón de compra verde, cálido y enérgico. */

.michat--oferta {
  --mc-user: #ff5722;
  --mc-user-text: #ffffff;
  --mc-ai: #ffffff;
  --mc-ai-text: #3a2a22;
  --mc-header: #ff4e2b;
  --mc-header-text: #ffffff;
  --mc-back: #fff8f2;
  --mc-border: #ffd9c2;
  --mc-input-bg: #ffffff;
  --mc-input-text: #3a2a22;
  --mc-input-border: #ffc4a3;
  --mc-link: #e64a19;
  --mc-muted: #b08368;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 14px;
}
.michat--oferta .michat-header { background: linear-gradient(110deg, #ff4e2b, #ff9606); }
.michat--oferta .michat-msg--ai .michat-bubble { border: 1px solid #ffe3d1; box-shadow: 0 2px 8px rgba(255, 87, 34, 0.07); }
.michat--oferta .michat-send {
  background: linear-gradient(120deg, #16a34a, #0d9444);
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
  animation: michatBuyPulse 2.4s ease-in-out infinite;
}
@keyframes michatBuyPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35); }
  50% { box-shadow: 0 4px 22px rgba(22, 163, 74, 0.6); }
}
.michat--oferta .michat-inputrow, .michat--oferta .michat-compliance { background: #fff1e6; border-top-color: #ffe3d1; }
.michat--oferta .michat-avatar { background: #ffe3d1; }

/* ============================================= TEMA: OFERTA FUEGO ========= */
/* Lanzamientos urgentes: rojo→naranja intenso, fondo cálido con profundidad
   y botón de compra verde pulsante (rediseño v3.0.7). */

.michat--oferta_hot {
  --mc-user: #e11d48;
  --mc-user-text: #ffffff;
  --mc-ai: #ffffff;
  --mc-ai-text: #431418;
  --mc-header: #dc2626;
  --mc-header-text: #ffffff;
  --mc-back: #fff5f3;
  --mc-border: #ffd3cb;
  --mc-input-bg: #ffffff;
  --mc-input-text: #431418;
  --mc-input-border: #fca5a5;
  --mc-link: #dc2626;
  --mc-muted: #b07b76;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 16px;
}
.michat--oferta_hot {
  background: linear-gradient(180deg, #fff1ee 0%, #fff8f4 45%, #ffe9e2 100%);
  box-shadow: 0 14px 34px rgba(220, 38, 38, 0.14);
}
.michat--oferta_hot .michat-header {
  background: linear-gradient(115deg, #b91c1c 0%, #ef4444 45%, #f97316 100%);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.30);
}
.michat--oferta_hot .michat-header-avatar { background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.5); }
.michat--oferta_hot .michat-msg--user .michat-bubble {
  background: linear-gradient(135deg, #f43f5e, #dc2626);
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.32);
}
.michat--oferta_hot .michat-msg--ai .michat-bubble { border: 1px solid #ffe0da; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.08); }
.michat--oferta_hot .michat-inputrow,
.michat--oferta_hot .michat-compliance { background: rgba(255, 255, 255, 0.75); border-top-color: #ffe0da; }
.michat--oferta_hot .michat-input:focus { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16); }
.michat--oferta_hot .michat-send {
  background: linear-gradient(120deg, #16a34a, #0d9444);
  box-shadow: 0 5px 16px rgba(22, 163, 74, 0.40);
  animation: michatBuyPulse 2.4s ease-in-out infinite;
}
.michat--oferta_hot .michat-avatar { background: #ffe0da; }
.michat--oferta_hot .michat-typing span { background: #ef4444; }

/* ============================================= TEMA: OFERTA VERDE ========= */
/* Confianza y compra directa: esmeralda→lima, fondo menta suave y CTA
   ámbar que contrasta y empuja al clic (rediseño v3.0.7). */

.michat--oferta_verde {
  --mc-user: #059669;
  --mc-user-text: #ffffff;
  --mc-ai: #ffffff;
  --mc-ai-text: #113a2b;
  --mc-header: #047857;
  --mc-header-text: #ffffff;
  --mc-back: #f0fdf6;
  --mc-border: #bbe9d3;
  --mc-input-bg: #ffffff;
  --mc-input-text: #113a2b;
  --mc-input-border: #6ee7b7;
  --mc-link: #047857;
  --mc-muted: #5f8674;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 16px;
}
.michat--oferta_verde {
  background: linear-gradient(180deg, #ecfdf3 0%, #f4fef8 50%, #e3f9ec 100%);
  box-shadow: 0 14px 34px rgba(5, 150, 105, 0.13);
}
.michat--oferta_verde .michat-header {
  background: linear-gradient(115deg, #065f46 0%, #059669 50%, #34d399 110%);
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28);
}
.michat--oferta_verde .michat-header-avatar { background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.5); }
.michat--oferta_verde .michat-msg--user .michat-bubble {
  background: linear-gradient(135deg, #10b981, #047857);
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.28);
}
.michat--oferta_verde .michat-msg--ai .michat-bubble { border: 1px solid #d3f4e2; box-shadow: 0 4px 12px rgba(5, 150, 105, 0.07); }
.michat--oferta_verde .michat-inputrow,
.michat--oferta_verde .michat-compliance { background: rgba(255, 255, 255, 0.75); border-top-color: #d3f4e2; }
.michat--oferta_verde .michat-input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16); }
.michat--oferta_verde .michat-send {
  background: linear-gradient(120deg, #f59e0b, #ea580c);
  box-shadow: 0 5px 16px rgba(234, 88, 12, 0.38);
  animation: michatBuyPulseAmbar 2.4s ease-in-out infinite;
}
.michat--oferta_verde .michat-avatar { background: #d3f4e2; }
.michat--oferta_verde .michat-typing span { background: #10b981; }
@keyframes michatBuyPulseAmbar {
  0%, 100% { box-shadow: 0 5px 16px rgba(234, 88, 12, 0.38); }
  50% { box-shadow: 0 5px 24px rgba(234, 88, 12, 0.62); }
}

/* ============================================== TEMA: OFERTA AZUL ========= */
/* Promo limpia y tecnológica: azul→cian con fondo helado y CTA verde
   de compra pulsante (rediseño v3.0.7). */

.michat--oferta_azul {
  --mc-user: #2563eb;
  --mc-user-text: #ffffff;
  --mc-ai: #ffffff;
  --mc-ai-text: #122148;
  --mc-header: #1d4ed8;
  --mc-header-text: #ffffff;
  --mc-back: #f0f7ff;
  --mc-border: #c3dcfc;
  --mc-input-bg: #ffffff;
  --mc-input-text: #122148;
  --mc-input-border: #93c5fd;
  --mc-link: #1d4ed8;
  --mc-muted: #64779e;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 16px;
}
.michat--oferta_azul {
  background: linear-gradient(180deg, #edf5ff 0%, #f6faff 50%, #e4f1ff 100%);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.13);
}
.michat--oferta_azul .michat-header {
  background: linear-gradient(115deg, #1e40af 0%, #2563eb 50%, #06b6d4 115%);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}
.michat--oferta_azul .michat-header-avatar { background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.5); }
.michat--oferta_azul .michat-msg--user .michat-bubble {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.30);
}
.michat--oferta_azul .michat-msg--ai .michat-bubble { border: 1px solid #d6e8ff; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.07); }
.michat--oferta_azul .michat-inputrow,
.michat--oferta_azul .michat-compliance { background: rgba(255, 255, 255, 0.75); border-top-color: #d6e8ff; }
.michat--oferta_azul .michat-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16); }
.michat--oferta_azul .michat-send {
  background: linear-gradient(120deg, #16a34a, #0d9444);
  box-shadow: 0 5px 16px rgba(22, 163, 74, 0.40);
  animation: michatBuyPulse 2.4s ease-in-out infinite;
}
.michat--oferta_azul .michat-avatar { background: #d6e8ff; }
.michat--oferta_azul .michat-typing span { background: #3b82f6; }

/* =========================================== TEMA: OFERTA MAGENTA ========= */
/* Promo vibrante para banners: magenta→rosa→naranja, fondo rosado suave y
   CTA verde de compra pulsante (rediseño v3.0.7). */

.michat--oferta_magenta {
  --mc-user: #c026d3;
  --mc-user-text: #ffffff;
  --mc-ai: #ffffff;
  --mc-ai-text: #45123a;
  --mc-header: #be185d;
  --mc-header-text: #ffffff;
  --mc-back: #fff3fa;
  --mc-border: #fbcbe6;
  --mc-input-bg: #ffffff;
  --mc-input-text: #45123a;
  --mc-input-border: #f0abd8;
  --mc-link: #be185d;
  --mc-muted: #a06a8c;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 16px;
}
.michat--oferta_magenta {
  background: linear-gradient(180deg, #ffeef8 0%, #fff7fc 50%, #ffe9f4 100%);
  box-shadow: 0 14px 34px rgba(192, 38, 211, 0.13);
}
.michat--oferta_magenta .michat-header {
  background: linear-gradient(115deg, #a21caf 0%, #db2777 55%, #f97316 120%);
  box-shadow: 0 4px 14px rgba(190, 24, 93, 0.30);
}
.michat--oferta_magenta .michat-header-avatar { background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.5); }
.michat--oferta_magenta .michat-msg--user .michat-bubble {
  background: linear-gradient(135deg, #d946ef, #be185d);
  box-shadow: 0 6px 16px rgba(192, 38, 211, 0.30);
}
.michat--oferta_magenta .michat-msg--ai .michat-bubble { border: 1px solid #fbdcee; box-shadow: 0 4px 12px rgba(190, 24, 93, 0.07); }
.michat--oferta_magenta .michat-inputrow,
.michat--oferta_magenta .michat-compliance { background: rgba(255, 255, 255, 0.75); border-top-color: #fbdcee; }
.michat--oferta_magenta .michat-input:focus { border-color: #d946ef; box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.16); }
.michat--oferta_magenta .michat-send {
  background: linear-gradient(120deg, #16a34a, #0d9444);
  box-shadow: 0 5px 16px rgba(22, 163, 74, 0.40);
  animation: michatBuyPulse 2.4s ease-in-out infinite;
}
.michat--oferta_magenta .michat-avatar { background: #fbdcee; }
.michat--oferta_magenta .michat-typing span { background: #d946ef; }

/* ===================================================== TEMA: PREMIUM ====== */
/* Lujo oscuro con oro: para vender caro con elegancia. */

.michat--premium {
  --mc-user: #d4af37;
  --mc-user-text: #241a02;
  --mc-ai: #1c2030;
  --mc-ai-text: #e8e6df;
  --mc-header: #0b0d13;
  --mc-header-text: #efe3c0;
  --mc-back: #11131a;
  --mc-border: #2a2f42;
  --mc-input-bg: #0e1016;
  --mc-input-text: #e8e6df;
  --mc-input-border: #3d4256;
  --mc-link: #e6c66e;
  --mc-muted: #8f94a8;
  --mc-font: Georgia, 'Times New Roman', serif;
  --mc-radius: 14px;
}
.michat--premium .michat-header { border-bottom: 2px solid #d4af37; }
.michat--premium .michat-header-name { font-variant: small-caps; letter-spacing: 0.6px; }
.michat--premium .michat-msg--user .michat-bubble {
  background: linear-gradient(135deg, #e9c75a, #b8860b);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.28);
}
.michat--premium .michat-msg--ai .michat-bubble { border: 1px solid #2e3346; }
.michat--premium .michat-send {
  background: linear-gradient(135deg, #e9c75a, #b8860b);
  color: #241a02;
}
.michat--premium .michat-inputrow, .michat--premium .michat-compliance { background: #0b0d13; border-top-color: #2a2f42; }
.michat--premium .michat-avatar { background: #1c2030; border: 1px solid #d4af37; }
.michat--premium .michat-input:focus { border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18); }

/* =================================================== TEMA: CYBERPUNK ====== */
/* Neón magenta + cian sobre violeta profundo, esquinas angulares y brillos. */

.michat--cyberpunk {
  --mc-user: #ff2a6d;
  --mc-user-text: #ffffff;
  --mc-ai: #150c2e;
  --mc-ai-text: #d1f7ff;
  --mc-header: #1a0533;
  --mc-header-text: #05d9e8;
  --mc-back: #0d0221;
  --mc-border: #2c1a4d;
  --mc-input-bg: #120731;
  --mc-input-text: #d1f7ff;
  --mc-input-border: #05d9e8;
  --mc-link: #fcee0a;
  --mc-muted: #7a6f9b;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 6px;
}
.michat--cyberpunk { box-shadow: 0 0 0 1px #2c1a4d, 0 12px 44px rgba(255, 42, 109, 0.18); }
.michat--cyberpunk .michat-header {
  border-bottom: 1px solid #ff2a6d;
  text-shadow: 0 0 12px rgba(5, 217, 232, 0.8);
}
.michat--cyberpunk .michat-msg--user .michat-bubble {
  box-shadow: 0 0 14px rgba(255, 42, 109, 0.5);
  border: 1px solid #ff5e94;
}
.michat--cyberpunk .michat-msg--ai .michat-bubble {
  border: 1px solid #05d9e8;
  box-shadow: 0 0 10px rgba(5, 217, 232, 0.22);
}
.michat--cyberpunk .michat-send {
  background: #05d9e8;
  color: #06141c;
  box-shadow: 0 0 12px rgba(5, 217, 232, 0.55);
}
.michat--cyberpunk .michat-inputrow, .michat--cyberpunk .michat-compliance { background: #0a031c; border-top-color: #2c1a4d; }
.michat--cyberpunk .michat-input:focus { box-shadow: 0 0 10px rgba(5, 217, 232, 0.6); }
.michat--cyberpunk .michat-avatar { background: #1a0533; border: 1px solid #ff2a6d; }
.michat--cyberpunk .michat-typing span { background: #05d9e8; }

/* ======================================================= TEMA: GLASS ====== */
/* Glassmorphism claro: auroras suaves de fondo, paneles translúcidos con
   blur y acento índigo. Estilo iOS / Windows 11. */

.michat--glass {
  --mc-user: #4f46e5;
  --mc-user-text: #ffffff;
  --mc-ai: rgba(255, 255, 255, 0.74);
  --mc-ai-text: #1e2338;
  --mc-header: rgba(255, 255, 255, 0.55);
  --mc-header-text: #1e2338;
  --mc-back: #eef1fb;
  --mc-border: rgba(255, 255, 255, 0.7);
  --mc-input-bg: rgba(255, 255, 255, 0.82);
  --mc-input-text: #1e2338;
  --mc-input-border: rgba(120, 130, 200, 0.35);
  --mc-link: #4f46e5;
  --mc-muted: #6a7290;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 16px;
}
.michat--glass {
  background:
    radial-gradient(1100px 500px at -10% -20%, rgba(99, 102, 241, 0.22), transparent 60%),
    radial-gradient(900px 480px at 110% 0%, rgba(56, 189, 248, 0.20), transparent 55%),
    radial-gradient(800px 520px at 50% 120%, rgba(236, 72, 153, 0.12), transparent 60%),
    #eef1fb;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 44px rgba(30, 35, 56, 0.16);
}
.michat--glass .michat-header {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
}
.michat--glass .michat-header-avatar { background: rgba(255, 255, 255, 0.65); }
.michat--glass .michat-msg--ai .michat-bubble {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 18px rgba(30, 35, 56, 0.08);
}
.michat--glass .michat-msg--user .michat-bubble {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32);
}
.michat--glass .michat-inputrow,
.michat--glass .michat-compliance {
  background: rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.michat--glass .michat-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); }
.michat--glass .michat-send { background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 5px 16px rgba(79, 70, 229, 0.30); }
.michat--glass .michat-avatar { background: rgba(255, 255, 255, 0.72); }
.michat--glass .michat-typing span { background: #6366f1; }

/* ==================================================== TEMA: MIDNIGHT ====== */
/* Oscuro minimalista tipo SaaS premium (Linear/Vercel): azul noche profundo,
   acento azul eléctrico suave, bordes finos y cero neones estridentes. */

.michat--midnight {
  --mc-user: #5b7cfa;
  --mc-user-text: #ffffff;
  --mc-ai: #171c2b;
  --mc-ai-text: #dfe4f2;
  --mc-header: #0d1017;
  --mc-header-text: #eef1f8;
  --mc-back: #0f131e;
  --mc-border: #232a3d;
  --mc-input-bg: #141927;
  --mc-input-text: #dfe4f2;
  --mc-input-border: #2c3550;
  --mc-link: #8ca8ff;
  --mc-muted: #78829e;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 12px;
}
.michat--midnight { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.michat--midnight .michat-header { border-bottom: 1px solid #232a3d; }
.michat--midnight .michat-header-avatar { background: #171c2b; border: 1px solid #2c3550; }
.michat--midnight .michat-msg--ai .michat-bubble { border: 1px solid #232a3d; }
.michat--midnight .michat-msg--user .michat-bubble {
  background: linear-gradient(135deg, #6d8bff, #4f6ef7);
  box-shadow: 0 4px 16px rgba(91, 124, 250, 0.28);
}
.michat--midnight .michat-inputrow,
.michat--midnight .michat-compliance { background: #0d1017; border-top-color: #232a3d; }
.michat--midnight .michat-input:focus { border-color: #5b7cfa; box-shadow: 0 0 0 3px rgba(91, 124, 250, 0.20); }
.michat--midnight .michat-send { background: linear-gradient(135deg, #6d8bff, #4f6ef7); }
.michat--midnight .michat-avatar { background: #171c2b; border: 1px solid #232a3d; }
.michat--midnight .michat-copy:hover { background: rgba(255, 255, 255, 0.08); }
.michat--midnight .michat-typing span { background: #5b7cfa; }

/* ====================================================== TEMA: SUNSET ====== */
/* Atardecer vibrante: cabecera degradada naranja → rosa → magenta sobre un
   fondo cálido. Para marcas creativas y llamativas. */

.michat--sunset {
  --mc-user: #f43f5e;
  --mc-user-text: #ffffff;
  --mc-ai: #ffffff;
  --mc-ai-text: #43273b;
  --mc-header: #ff6b35;
  --mc-header-text: #ffffff;
  --mc-back: #fff6f1;
  --mc-border: #ffd9c9;
  --mc-input-bg: #ffffff;
  --mc-input-text: #43273b;
  --mc-input-border: #fdba9f;
  --mc-link: #e11d48;
  --mc-muted: #a97b86;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 16px;
}
.michat--sunset .michat-header { background: linear-gradient(115deg, #ff6b35 0%, #f43f5e 55%, #c026d3 115%); }
.michat--sunset .michat-msg--user .michat-bubble {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  box-shadow: 0 5px 16px rgba(244, 63, 94, 0.30);
}
.michat--sunset .michat-msg--ai .michat-bubble { border: 1px solid #ffe4d6; box-shadow: 0 3px 10px rgba(244, 63, 94, 0.07); }
.michat--sunset .michat-inputrow,
.michat--sunset .michat-compliance { background: #fff0e8; border-top-color: #ffe4d6; }
.michat--sunset .michat-input:focus { border-color: #f43f5e; box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.16); }
.michat--sunset .michat-send { background: linear-gradient(120deg, #f43f5e, #c026d3); box-shadow: 0 4px 16px rgba(192, 38, 211, 0.30); }
.michat--sunset .michat-avatar { background: #ffe4d6; }
.michat--sunset .michat-typing span { background: #f43f5e; }

/* ======================================================== TEMA: MINT ====== */
/* Menta fresca: verdes suaves, limpio y aireado. Transmite confianza
   (ideal para salud, eco o fintech amable). */

.michat--mint {
  --mc-user: #0d9488;
  --mc-user-text: #ffffff;
  --mc-ai: #ffffff;
  --mc-ai-text: #143d38;
  --mc-header: #0f766e;
  --mc-header-text: #ecfffb;
  --mc-back: #effaf6;
  --mc-border: #c4ece2;
  --mc-input-bg: #ffffff;
  --mc-input-text: #143d38;
  --mc-input-border: #99e0d2;
  --mc-link: #0f766e;
  --mc-muted: #5f8c83;
  --mc-font: 'Segoe UI', system-ui, sans-serif;
  --mc-radius: 14px;
}
.michat--mint .michat-header { background: linear-gradient(110deg, #0f766e, #10b981); }
.michat--mint .michat-msg--user .michat-bubble {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25);
}
.michat--mint .michat-msg--ai .michat-bubble { border: 1px solid #d6f3ea; box-shadow: 0 3px 10px rgba(13, 148, 136, 0.06); }
.michat--mint .michat-inputrow,
.michat--mint .michat-compliance { background: #e6f7f0; border-top-color: #d6f3ea; }
.michat--mint .michat-input:focus { border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16); }
.michat--mint .michat-send { background: linear-gradient(120deg, #10b981, #0d9488); }
.michat--mint .michat-avatar { background: #d6f3ea; }
.michat--mint .michat-typing span { background: #0d9488; }

/* ============================================== ANCHO COMPLETO (fluido) === */
/* Para Elementor: el chat abarca de borde a borde de su contenedor. */
.michat--fluid { max-width: none; }

/* ================================================== PANTALLA COMPLETA ===== */
/* La geometría (left/top/width/height) la pone el JS en línea, midiendo el
   viewport real y compensando ancestros con transform (pinFullscreenRect).
   Por eso aquí NO se fuerza 100vw/100dvh: en PC 100vw incluye la barra de
   scroll y hacía que el chat sobresaliera por el costado derecho. */

.michat--fullscreen {
  position: fixed !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 999999;
  overflow: hidden;
  /* Penumbra sobre la página mientras el chat está maximizado; entra y sale
     fundida con la transición de box-shadow (sin capas extra ni z-index). */
  box-shadow: 0 0 0 100vmax rgba(8, 10, 22, 0.42);
}
.michat--fs-animating {
  transition:
    left .55s cubic-bezier(.32, .72, 0, 1),
    top .55s cubic-bezier(.32, .72, 0, 1),
    width .55s cubic-bezier(.32, .72, 0, 1),
    height .55s cubic-bezier(.32, .72, 0, 1),
    border-radius .55s cubic-bezier(.32, .72, 0, 1),
    box-shadow .55s ease;
  will-change: left, top, width, height, border-radius;
}
.michat-fs-placeholder {
  flex: 0 0 auto;
  pointer-events: none;
  visibility: hidden;
}

/* ============================================ BURBUJA FLOTANTE (POPUP) ==== */

.michat-popup { position: fixed; right: 22px; bottom: 22px; z-index: 99990; }
.michat-popup--left { right: auto; left: 22px; }

.michat-bubblebtn {
  width: 58px; height: 58px;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.95) 0 12%, rgba(255, 255, 255, 0.22) 13% 28%, transparent 29%),
    linear-gradient(135deg, var(--mc-header, #2831dc) 0%, var(--mc-user, #2768db) 58%, #06b6d4 100%);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.28),
    0 0 0 7px rgba(39, 104, 219, 0.12),
    inset 0 -7px 13px rgba(0, 0, 0, 0.16);
  transition: filter 0.18s, box-shadow 0.18s;
}
.michat-bubblebtn:hover {
  filter: brightness(1.08) saturate(1.1);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.34),
    0 0 0 9px rgba(39, 104, 219, 0.16),
    inset 0 -7px 13px rgba(0, 0, 0, 0.16);
}

.michat--window {
  display: none;
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 390px;
  max-width: calc(100vw - 30px);
  height: 560px;
  max-height: calc(100vh - 60px);
  z-index: 99991;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
}
.michat--window.michat--open { display: flex; }
.michat-popup--left .michat--window { right: auto; left: 22px; }

.michat-close { font-size: 20px !important; }

/* =============================================================== MÓVIL ==== */

@media (max-width: 480px) {
  .michat {
    height: 86vh;
    height: min(86dvh, 760px);
    min-height: 590px;
    border-radius: 10px;
  }
  .michat--window {
    right: 8px; bottom: 8px;
    width: calc(100vw - 16px);
    height: 88vh;
    height: min(88dvh, 780px);
  }
  .michat-popup--left .michat--window { left: 8px; }
  .michat-header { padding: 8px 11px; }
  .michat-messages {
    padding: 10px 8px 8px;
    gap: 8px;
  }
  .michat-msg { gap: 5px; }
  .michat-avatar {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
  .michat-col { max-width: calc(100% - 29px); }
  .michat-bubble { padding: 9px 11px; }
  .michat-inputrow { padding: 8px; gap: 7px; }
  /* Caja de escritura más cómoda en el móvil (los 16px evitan además el
     zoom automático de iOS al tocar el campo). */
  .michat-input {
    min-height: 50px;
    font-size: max(16px, var(--mc-font-input));
  }
  .michat-send { padding: 0 14px; }
}

/* ====================================================== ✨ ANIMACIONES ===== */

/* Entrada de cada mensaje: aparece subiendo con un toque de rebote. */
.michat-msg {
  animation: michatMsgIn 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
@keyframes michatMsgIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animación del streaming — estilo ChatGPT: cursor de bloque parpadeante. */
.michat-bubble--streaming.michat-anim-caret::after {
  content: '▍';
  display: inline-block;
  margin-left: 2px;
  animation: michatCaret 0.9s steps(1) infinite;
  opacity: 0.8;
}
@keyframes michatCaret {
  0%, 55% { opacity: 0.8; }
  56%, 100% { opacity: 0; }
}

/* Animación del streaming — estilo Grok: orbe que late con brillo. */
.michat-bubble--streaming.michat-anim-pulse::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 5px;
  vertical-align: -1px;
  border-radius: 50%;
  background: currentColor;
  animation: michatOrb 1.05s ease-in-out infinite;
}
@keyframes michatOrb {
  0%, 100% { opacity: 0.25; transform: scale(0.75); box-shadow: 0 0 0 0 currentColor; }
  50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 12px 1px currentColor; }
}

/* =================================== MODO COMPACTO (popup/preview/móvil) == */
/* Cuando el chat es estrecho, la caja ocupa todo el ancho y los botones
   pasan abajo, como AI Engine. La clase la pone un ResizeObserver en JS. */
.michat--compact .michat-inputrow { flex-wrap: wrap; }
.michat--compact .michat-input { flex: 1 1 100%; }
.michat--compact .michat-send { flex: 1; order: 2; padding: 11px 16px; }
.michat--compact .michat-clear { order: 3; padding: 0 14px; }
.michat--compact .michat-leadbox { margin-left: 4px; margin-right: 4px; }

/* ⚡ Respuestas rápidas — rediseño v3.0.6: UN solo borde de acento por chip
   (antes se superponían un borde cónico y un anillo animado y se veía doble).
   Los pares de colores por posición los pone el JS en --mc-chip-accent y
   --mc-chip-accent-2; al pasar el ratón el chip se rellena con su degradado. */
.michat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
  padding: 2px 4px 8px 32px;
}
.michat .michat-chipbtn {
  --mc-chip-accent: var(--mc-user);
  position: relative;
  border: 2px solid var(--mc-chip-accent);
  background: var(--mc-back);
  color: var(--mc-chip-accent);
  border-radius: 999px;
  padding: 8px 15px;
  font: inherit;
  font-size: var(--mc-font-quick);
  font-weight: 600;
  line-height: 1.18;
  max-width: 100%;
  min-height: 38px;
  white-space: normal;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  animation: michatChipIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s, border-color 0.15s, filter 0.15s;
}
.michat .michat-chipbtn:hover {
  background: linear-gradient(120deg, var(--mc-chip-accent), var(--mc-chip-accent-2, var(--mc-link)));
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.michat .michat-chipbtn:active { transform: scale(0.96); }
.michat .michat-chipbtn.is-selected {
  background: var(--mc-chip-accent);
  border-color: var(--mc-chip-accent);
  color: #fff;
  animation: michatChipSelect 0.38s ease both;
}
.michat-chips--sending .michat-chipbtn:not(.is-selected) { opacity: 0.45; transform: scale(0.96); }
/* Onda al elegir un chip (ya no se recorta: el chip no usa overflow hidden). */
.michat-chipburst {
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  border: 2px solid var(--mc-chip-accent);
  pointer-events: none;
  animation: michatChipBurst 0.48s ease-out forwards;
}
@keyframes michatChipIn {
  from { opacity: 0; transform: translateY(10px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes michatChipSelect {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.08); }
  100% { transform: scale(1.02); }
}
@keyframes michatChipBurst {
  from { opacity: 0.75; transform: scale(0.92); }
  to { opacity: 0; transform: scale(1.24); }
}

/* ── Estilo "✨ Resplandor animado" (opcional, ajuste quick_style=glow) ──
   Un ÚNICO anillo degradado en movimiento continuo reemplaza al borde plano
   (el borde base queda transparente: nunca se ven dos bordes a la vez).
   Al pasar el ratón el anillo se enciende: brilla más y acelera. */
.michat--chips-glow .michat-chipbtn {
  border-color: transparent;
}
.michat--chips-glow .michat-chipbtn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px; /* mismo grosor que el borde base */
  background: linear-gradient(
    90deg,
    var(--mc-chip-accent) 0%,
    var(--mc-chip-accent-2, var(--mc-link)) 25%,
    var(--mc-chip-accent) 50%,
    var(--mc-chip-accent-2, var(--mc-link)) 75%,
    var(--mc-chip-accent) 100%
  );
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.9;
  pointer-events: none;
  animation: michatChipBorderFlow 6.4s linear infinite;
}
.michat--chips-glow .michat-chipbtn:hover {
  /* En glow el chip NO se rellena: el borde se "enciende" (como el clásico). */
  background: var(--mc-back);
  border-color: transparent;
  color: var(--mc-chip-accent);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  filter: drop-shadow(0 0 7px var(--mc-chip-accent));
}
.michat--chips-glow .michat-chipbtn:hover::before {
  opacity: 1;
  animation-duration: 2.2s;
}
.michat--chips-glow .michat-chipbtn.is-selected {
  background: var(--mc-chip-accent);
  color: #fff;
  filter: none;
}
@keyframes michatChipBorderFlow {
  from { background-position: 0% 50%; }
  to { background-position: -200% 50%; }
}

/* WhatsApp + captura de leads */
.michat-leadbox {
  margin: 8px 38px 10px;
  padding: 12px;
  border: 1px solid rgba(39, 104, 219, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
}
.michat-leadbox strong {
  display: block;
  color: #1d2330;
  margin: 8px 0 4px;
}
.michat-leadbox p {
  margin: 0 0 8px;
  color: #5b6270;
  font-size: 0.9em;
}
.michat-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 5px 14px rgba(22, 163, 74, 0.25);
}
.michat-leadform {
  display: grid;
  gap: 7px;
}
.michat-leadform input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d5d9e4;
  border-radius: 9px;
  padding: 7px 10px;
  font: inherit;
  background: #fff;
}
.michat-leadform button {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  background: var(--mc-user);
  color: var(--mc-user-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.michat-leadform.is-sent input,
.michat-leadform.is-sent button { display: none; }
.michat-leadstatus {
  font-size: 0.86em;
  color: #32613f;
  min-height: 18px;
}

/* Botón enviar: micro-interacciones. */
.michat-send { transition: filter 0.15s, transform 0.12s, box-shadow 0.15s; }
.michat-send:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18); }
.michat-send:active { transform: scale(0.95); }

/* Burbuja flotante: flota suavemente y emite un anillo de pulso. */
.michat-bubblebtn {
  animation: michatFloat 3.2s ease-in-out infinite;
  position: relative;
}
.michat-bubblebtn::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.28), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 5px rgba(255, 255, 255, 0.42);
  pointer-events: none;
}
.michat-bubblebtn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--mc-header, #2831dc);
  opacity: 0;
  animation: michatRing 2.6s ease-out infinite;
}
.michat-bubblebtn img {
  position: relative;
  z-index: 1;
}
@keyframes michatFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes michatRing {
  0% { transform: scale(0.9); opacity: 0.55; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}

/* Ventana del popup: se abre creciendo desde la esquina. */
.michat--window.michat--open {
  animation: michatWindowIn 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) both;
  transform-origin: bottom right;
}
.michat-popup--left .michat--window.michat--open { transform-origin: bottom left; }
@keyframes michatWindowIn {
  from { opacity: 0; transform: translateY(16px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Avatar de cabecera: saluda con un latido suave al cargar. */
.michat-header-avatar { animation: michatAvatarHello 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.2s; }
@keyframes michatAvatarHello {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.michat-leadbox {
  margin-left: 26px;
  margin-right: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.michat--compact .michat-leadbox {
  margin-left: 4px;
  margin-right: 4px;
}
.michat-wa {
  position: relative;
  overflow: hidden;
  width: min(100%, 430px);
  margin: 2px auto 4px;
  padding: 0 20px;
  background: linear-gradient(135deg, #16a34a, #22c55e, #0f9f46);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.32);
  transform-origin: center;
  animation: michatWaPulse 2.2s ease-in-out infinite;
}
.michat-wa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 36%, rgba(255,255,255,0.48) 47%, transparent 60% 100%);
  transform: translateX(-130%);
  animation: michatWaShine 2.6s ease-in-out infinite;
}
.michat-wa:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.44);
}

@media (max-width: 480px) {
  .michat-chips {
    padding: 0 0 6px;
    gap: 7px;
  }
  .michat-chipbtn {
    flex: 1 1 calc(50% - 7px);
    min-width: 132px;
    padding: 8px 10px;
  }
  .michat-leadbox {
    margin: 6px 4px 8px;
    padding: 10px;
  }
  .michat-wa {
    min-height: 42px;
    padding: 0 14px;
  }
}

@supports (height: 100svh) {
  @media (max-width: 480px) {
    .michat { height: min(86svh, 760px); }
    .michat--window { height: min(88svh, 780px); }
  }
}

@keyframes michatWaPulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 18px rgba(22, 163, 74, 0.32); }
  50% { transform: translateY(-1px) scale(1.025); box-shadow: 0 12px 28px rgba(22, 163, 74, 0.55); }
}
@keyframes michatWaShine {
  0%, 50% { transform: translateX(-130%); opacity: 0; }
  62% { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

.michat-clear:disabled {
  opacity: 0.42;
  cursor: wait;
  pointer-events: none;
  transform: none;
}

@media (min-width: 481px) {
  .michat-chips {
    align-self: center;
    max-width: 650px;
    padding-left: 0;
    padding-right: 0;
    gap: 7px 10px;
  }
  .michat-chipbtn { flex: 0 1 auto; }
}

.michat-chips--after-response {
  animation: michatQuickReplyGroup 0.85s ease both;
}
.michat-chips--after-response .michat-chipbtn {
  animation-name: michatChipReplyIn;
  animation-duration: 0.82s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes michatQuickReplyGroup {
  from { opacity: 0; transform: translateY(14px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes michatChipReplyIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.92); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
  .michat-chips {
    justify-content: center;
    align-self: stretch;
    max-width: none;
    padding: 0 4px 6px;
    gap: 8px;
  }
  .michat-chipbtn {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 15px;
    min-height: 38px;
  }
}

/* accesibilidad: respetar "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
  .michat-typing span { animation: none; opacity: 0.7; }
  .michat-msg, .michat-chipbtn,
  .michat-chipburst, .michat-wa, .michat-wa::after, .michat-bubblebtn, .michat-bubblebtn::after,
  .michat--window.michat--open, .michat-chips--after-response,
  .michat-header-avatar { animation: none !important; opacity: 1; }
  .michat-bubble--streaming::after { animation: none; }
  .michat--chips-glow .michat-chipbtn::before { animation: none !important; }
  .michat--fs-animating { transition: none !important; }
}