/**
 * 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;

  /* v3.0.29: la barra de desplazamiento de la conversación se tiñe con el
     color del tema en vez de quedarse en el gris del sistema. Los 18 temas
     definen --mc-user (su acento) y --mc-back (su fondo), así que una sola
     regla los cubre a todos, claros y oscuros. */
  --mc-scroll-thumb: var(--mc-user, #2768db);
  --mc-scroll-track: var(--mc-back, #fafafa);
  scrollbar-width: thin;
  scrollbar-color: var(--mc-scroll-thumb) var(--mc-scroll-track);
}
/* Con color-mix el acento se mezcla con el fondo del chat: la barra combina
   con el tema sin gritar, y se aviva al pasar el ratón por la conversación.
   Sin soporte, quedan los colores planos de arriba. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .michat-messages {
    --mc-scroll-thumb: color-mix(in srgb, var(--mc-user, #2768db) 78%, var(--mc-back, #fafafa));
    --mc-scroll-track: color-mix(in srgb, var(--mc-user, #2768db) 10%, var(--mc-back, #fafafa));
  }
  .michat-messages:hover {
    --mc-scroll-thumb: var(--mc-user, #2768db);
  }
}
/* Respaldo para WebKit antiguo (Safari anterior a 18.2), donde las dos
   propiedades estándar de arriba no existen. Los navegadores modernos
   ignoran estos pseudo-elementos al haberse declarado scrollbar-width. */
.michat-messages::-webkit-scrollbar { width: 10px; }
.michat-messages::-webkit-scrollbar-track {
  background: var(--mc-scroll-track);
  border-radius: 999px;
}
.michat-messages::-webkit-scrollbar-thumb {
  background: var(--mc-scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.michat-msg { display: flex; gap: 8px; align-items: flex-end; }
/* v3.0.41: VIRTUALIZACIÓN NATIVA DEL HISTORIAL. En conversaciones largas el
   scroll se sentía cada vez más lento (el clásico de los chats web, igual
   que en AI Engine): el navegador seguía maquetando y manteniendo TODOS los
   mensajes aunque el 95 % estuviera fuera de pantalla. Con
   content-visibility el navegador SALTA por completo la maquetación y el
   pintado de los mensajes que no se ven y los materializa justo antes de
   que entren al viewport; contain-intrinsic-size (con la palabra clave
   auto) reserva una altura estimada la primera vez y RECUERDA la altura
   real en cuanto el mensaje se renderiza, así el tirador de la barra no
   baila. Cero JavaScript, cero cambio visual. En navegadores sin soporte
   la propiedad se ignora y todo queda como antes. */
@supports (content-visibility: auto) and (contain-intrinsic-size: auto 88px) {
  .michat-msg {
    content-visibility: auto;
    contain-intrinsic-size: auto 88px;
  }
  /* Durante el gesto de maximizar/restaurar la virtualización se APAGA
     (clase michat--fs-solid, puesta por el JS nada más leer el ancla): así
     el punto de lectura se mide y se corrige sobre el layout real completo
     —idéntico al de la 3.0.33—, sin alturas estimadas moviéndose bajo sus
     pies. El coste de materializarlo todo en ese instante es el que la
     3.0.33 ya pagaba siempre; al asentar, la clase se retira, la
     virtualización vuelve y el ancla se reaplica sobre ella. */
  .michat--fs-solid .michat-msg {
    content-visibility: visible;
  }
  /* v3.0.46: historial COMPLETO elegible por chatbot — sin virtualización:
     maquetación entera y todas las animaciones vivas (el clásico 3.0.33). */
  .michat--history-full .michat-msg {
    content-visibility: visible;
  }
}
/* v3.0.41: los brillos de las fichas (dos bucles infinitos por ficha) solo
   corren cuando la fila está A LA VISTA. Fuera del viewport del panel, un
   IntersectionObserver les pone esta clase y dejan de repintar — invisible
   para el visitante: cuando las fichas se ven, brillan exactamente igual. */
.michat-chips--resting .michat-chipbtn,
.michat-chips--resting .michat-chipbtn::before,
.michat-chips--resting .michat-chipbtn::after {
  animation-play-state: paused !important;
}
.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;
  /* Explícito: wp-admin resetea las listas a list-style none y en la vista
     previa del editor las viñetas desaparecían (v3.0.14). */
  list-style: disc outside;
  font-size: var(--mc-font-list);
  line-height: 1.45;
}
.michat-bubble ul li { list-style: disc outside; }
.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);
}
/* Columna de lectura en pantalla completa: los mensajes no se estiran de
   borde a borde del monitor, viven en una franja centrada.
   v3.0.28 — esa franja mide EXACTAMENTE lo que mide el chat en su tamaño
   normal (el JS calcula el valor y lo escribe en --mc-fs-column al
   maximizar). Con la columna fija de 900 px de 3.0.26 el texto se volvía a
   partir al pulsar ⛶ (medido: de 729 a 870 px de ancho) y esa columna
   sobresalía del marco 70 px por cada lado, así que durante toda la
   animación las líneas estaban cortadas en sus dos extremos y se iban
   destapando: eso era el «poquito» que se movía, y estaba en los bordes.
   Igualando la columna al ancho del chat, el texto no cambia ni un píxel
   entre los dos estados: solo el marco se agranda a su alrededor. */
.michat--fullscreen .michat-messages {
  width: min(var(--mc-fs-column, 900px), 100%);
  align-self: center;
  /* v3.0.29 — los 7,5 px hacia la derecha. Al maximizar se oculta la barra
     de desplazamiento de la página (15 px) y el chat pasa a centrarse en la
     ventana entera en vez de en el área que se veía antes, así que la
     columna se corría media barra a la derecha (medido: de 846 a 853,5).
     Este hueco a la derecha del panel centrado lo desplaza justo esa mitad
     en sentido contrario y lo deja clavado donde estaba. */
  margin-right: var(--mc-fs-gutter, 0px);
}
/* El hueco viaja con la MISMA curva y duración que el marco, así la
   compensación es exacta en cada frame y no solo al terminar. */
.michat--fs-animating .michat-messages {
  transition: margin-right .55s cubic-bezier(.32, .72, 0, 1);
}
.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;
  /* v3.0.33 — AQUÍ ESTABA EL PARPADEO DEL TEXTO. Antes había un
     «will-change: left, top, width, height, border-radius». Esas cinco
     propiedades son de maquetación: el navegador NO puede acelerarlas, así
     que la pista no aportaba nada… pero sí tenía un efecto secundario —
     obligaba a meter el chat en una capa aparte al empezar la animación y a
     sacarlo de ella al terminar, y en esos dos instantes cambia el modo de
     suavizado del texto. De ahí el temblorcito: duraba unos milisegundos,
     ocurría al empezar y al terminar, y solo se apreciaba en los paneles de
     texto (la cabecera y los botones son fondos lisos, ahí no se nota).
     Investigado en el sitio real pausando la transición y avanzándola
     fotograma a fotograma: el panel no se mueve —posición vertical
     57,578 px EXACTA en los diez fotogramas y horizontal estable dentro de
     1/64 de píxel—, lo que cambia 33 veces es el TAMAÑO de su caja, y cada
     cambio obliga a redibujar el texto. Sin la promoción a capa, ese
     redibujado usa siempre el mismo modo y deja de notarse. */
}
.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);
  /* Superficie de la ficha: en temas claros es el fondo del chat; los temas
     oscuros definen --mc-chip-surface (superficie elevada) para que las
     fichas no parezcan botones negros apagados (v3.0.15). */
  background: var(--mc-chip-surface, 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;
  /* El relleno no debe pintar bajo el borde transparente: en temas claros se
     veía un aro blanco entre el chip y el anillo animado (bug v3.0.11). */
  background-clip: padding-box;
}
.michat--chips-glow .michat-chipbtn::before {
  content: '';
  position: absolute;
  /* Sobre el ÁREA DEL BORDE (inset negativo = grosor del borde): antes se
     dibujaba dentro del padding-box y dejaba ver ese aro claro por fuera. */
  inset: -2px;
  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-chip-surface, var(--mc-back));
  background-clip: padding-box;
  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));
}
/* Al pasar el cursor SOLO se intensifica el anillo: cambiar la duración de
   la animación la reiniciaba y desincronizaba las fichas (v3.0.14). */
.michat--chips-glow .michat-chipbtn:hover::before {
  opacity: 1;
}
.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%; }
}

/* ── Estilo "🌈 Barrido clásico" (quick_style=sweep, PREDETERMINADO) ──
   Recuperado de v2.8.6: anillo degradado fluyendo de izquierda a derecha
   más un destello que cruza el chip con su color de acento. El destello
   anima background-position (no transform), así no necesita overflow:hidden
   y la onda al elegir (chipburst) no se recorta. */
.michat--chips-sweep .michat-chipbtn {
  border-color: transparent;
  background-clip: padding-box;
}
.michat--chips-sweep .michat-chipbtn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    90deg,
    var(--mc-chip-accent) 0%,
    var(--mc-chip-accent-2, var(--mc-link)) 16.666%,
    var(--mc-chip-accent-3, currentColor) 33.333%,
    var(--mc-chip-accent) 50%,
    var(--mc-chip-accent-2, var(--mc-link)) 66.666%,
    var(--mc-chip-accent-3, currentColor) 83.333%,
    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.95;
  pointer-events: none;
  animation: michatChipBorderFlow 6.4s linear infinite;
}
.michat--chips-sweep .michat-chipbtn::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background-image: linear-gradient(
    105deg,
    transparent 0 30%,
    var(--mc-chip-accent-2, var(--mc-link)) 45%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 62% 100%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position-x: 100%;
  opacity: 0;
  pointer-events: none;
  animation: michatChipGlowSweep 3.2s ease-in-out infinite;
}
.michat--chips-sweep .michat-chipbtn:hover {
  background: var(--mc-chip-surface, var(--mc-back));
  background-clip: padding-box;
  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);
}
/* El hover solo eleva la ficha e intensifica el anillo; las animaciones de
   barrido y borde conservan su ritmo (cambiar la duración las reiniciaba y
   hacía que la ficha bajo el cursor fuera más rápida que las demás). */
.michat--chips-sweep .michat-chipbtn:hover::before {
  opacity: 1;
}
.michat--chips-sweep .michat-chipbtn.is-selected {
  background: var(--mc-chip-accent);
  color: var(--mc-user-text, #fff);
}
.michat--chips-sweep .michat-chipbtn.is-selected::after { animation: none; opacity: 0; }
@keyframes michatChipGlowSweep {
  0%, 42% { background-position-x: 100%; opacity: 0; }
  55% { opacity: 0.55; }
  100% { background-position-x: 0%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .michat--chips-sweep .michat-chipbtn::before,
  .michat--chips-sweep .michat-chipbtn::after,
  .michat--chips-glow .michat-chipbtn::before {
    animation: none;
  }
  .michat--chips-sweep .michat-chipbtn::after { opacity: 0; }
}

/* ── Fichas en temas OSCUROS (v3.0.15, revisados uno a uno) ──
   Sobre el fondo del chat las fichas parecían botones negros apagados.
   Cada tema oscuro define su superficie elevada (un paso más clara que su
   burbuja IA) y una sombra que la separa del fondo; el texto conserva el
   color de acento vivo de cada ficha. */
.michat--chatgpt   { --mc-chip-surface: #4a4d5e; }
.michat--neon      { --mc-chip-surface: #1b2742; }
.michat--grok      { --mc-chip-surface: #1d2026; }
.michat--premium   { --mc-chip-surface: #232838; }
.michat--cyberpunk { --mc-chip-surface: #1c1140; }
.michat--midnight  { --mc-chip-surface: #1d2334; }
.michat--chatgpt .michat-chipbtn,
.michat--neon .michat-chipbtn,
.michat--grok .michat-chipbtn,
.michat--premium .michat-chipbtn,
.michat--cyberpunk .michat-chipbtn,
.michat--midnight .michat-chipbtn {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Grok usa blanco como color de usuario: como acento de ficha es ilegible
   sobre superficie oscura solo en el estado seleccionado (fondo blanco →
   el texto debe oscurecerse). */
.michat--grok .michat-chipbtn.is-selected { color: #0a0a0a; }

/* Aurora pinta un degradado vivo y su --mc-back (violeta, solo el color de
   respaldo del degradado) volvía las fichas oscuras. Superficie clara tipo
   cristal, a juego con sus burbujas (v3.0.16). */
.michat--aurora { --mc-chip-surface: rgba(255, 255, 255, 0.92); }

/* 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,
  .michat--fs-animating .michat-messages { transition: none !important; }
}

/* ==================== v3.0.24: TÍTULOS Y LISTAS DEL MARKDOWN ==============
   Los modelos GPT-5 separan el temario con títulos (### Plantillas…) y a
   veces con listas numeradas. Antes se pintaban como texto plano; ahora se
   renderizan y se integran con el tema del chat. */
.michat .michat-bubble .michat-mdh {
  /* v3.0.25: títulos más discretos — el peso 800 los hacía "gritar" dentro
     de la burbuja aunque el tamaño apenas subía un 6%. Ahora destacan por
     jerarquía, no por volumen. */
  margin: 11px 0 4px;
  color: inherit;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0;
}
.michat .michat-bubble .michat-mdh:first-child { margin-top: 1px; }
.michat .michat-bubble h4.michat-mdh { font-size: 1.03em; }
.michat .michat-bubble h5.michat-mdh { font-size: 1em; opacity: .93; }
.michat .michat-bubble .michat-mdhr {
  height: 0;
  margin: 12px 0;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: .18;
}
.michat .michat-bubble ol {
  margin: 6px 0 6px 2px;
  padding-left: 22px;
  list-style: decimal outside;
}
.michat .michat-bubble ol li { margin: 3px 0; }