/* ═══════════════════════════════════════════════════════════════════
 * FREN EMBED · estilos del widget flotante (burbuja + panel)
 * Variables tematizables y reglas !important para vencer al Angular bundle.
 * ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Paleta corporativa Demócrata · Fren
   * Brand dark slate-900, acento principal blue-500. Ver doc de marca. */
  --fren-primary:        #3b82f6;          /* blue-500: acento principal · CTAs · links */
  --fren-primary-hover:  #2563eb;          /* blue-600: hover de links / botones */
  --fren-primary-soft:   #60a5fa;          /* blue-400: gradient luminoso / texto destacado */
  --fren-dark:           #0f172a;          /* slate-900: brand dark · h1 · theme-color */
  --fren-dark-2:         #1e3a8a;          /* blue-900: 2º stop del hero gradient */
  --fren-indigo:         #6366f1;          /* indigo-500: gradient en CTAs primarios */
  --fren-text:           #1a1a1a;          /* cuerpo */
  --fren-muted:          #475569;          /* slate-600: subtítulos */
  --fren-muted-soft:     #64748b;          /* slate-500: pies, captions */
  --fren-bg:             #fff;
  --fren-bg-soft:        #f8fafc;          /* slate-50: fondos alternos */
  --fren-bg-softer:      #f1f5f9;          /* slate-100: tags / badges */
  --fren-border:         #e2e8f0;          /* slate-200: bordes sutiles */
  --fren-border-strong:  #cbd5e1;          /* slate-300: bordes tarjetas */
  --fren-shadow:         0 12px 40px rgba(15, 23, 42, 0.22);
}

/* ── Contenedor raíz ─────────────────────────────────────────── */
.fren-widget {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  /* Tipografía corporativa: Switzer (auto-hospedada) con fallback estricto
   * Helvetica Neue → Arial · sans-serif. Mismo stack que el resto del
   * proyecto Demócrata. */
  font-family: Switzer, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

/* ── Burbuja (estado minimizado): solo el isotipo, con pulso + halo ── */
.fren-bubble {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 12px;       /* combina con esquinas del SVG */
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: block;
  position: relative;
  /* Sombra base + halo expansivo en bucle */
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.28),
    0 0 0 0 rgba(59, 130, 246, 0.55);
  animation: fren-bubble-pulse 3s ease-in-out infinite;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fren-bubble:hover {
  animation: none;
  transform: scale(1.08);
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.42),
    0 0 0 8px rgba(59, 130, 246, 0.28);
}
.fren-bubble img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
  pointer-events: none;
  animation: fren-bubble-breathe 3s ease-in-out infinite;
}
.fren-bubble:hover img { animation: none; }

/* ── Punto verde "online" en la esquina superior derecha ─────── */
.fren-bubble-status {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(34, 197, 94, .55);
  pointer-events: none;
  z-index: 2;
}

/* ── Saludo "Hola, ¿cómo te ayudo?" debajo de la burbuja ─────── */
.fren-bubble-greeting {
  font-size: .78rem;
  font-weight: 600;
  color: var(--fren-dark);
  background: rgba(255, 255, 255, .94);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .14);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .01em;
}

/* Al abrir el panel ocultamos también punto verde y saludo */
.fren-widget.fren-open .fren-bubble-status,
.fren-widget.fren-open .fren-bubble-greeting { display: none; }

@keyframes fren-bubble-pulse {
  0%, 100% {
    box-shadow:
      0 8px 18px rgba(15, 23, 42, 0.28),
      0 0 0 0 rgba(59, 130, 246, 0.55);
  }
  70% {
    box-shadow:
      0 8px 18px rgba(15, 23, 42, 0.28),
      0 0 0 18px rgba(59, 130, 246, 0);
  }
}
@keyframes fren-bubble-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Respeta a usuarios que han pedido reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .fren-bubble,
  .fren-bubble img { animation: none !important; }
}

/* ── Panel: sidebar lateral derecho a toda la altura ──────────
 * Por defecto ocupa toda la parte lateral derecha del viewport, como el
 * asistente Vera de El País. Sin border-radius en los lados pegados. */
.fren-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: var(--fren-bg);
  border-radius: 0;
  border-left: 1px solid var(--fren-border);
  box-shadow: -8px 0 30px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

/* ── Modo "pantalla completa" (botón .fren-expand) ──────────
 * Toggle con .fren-expanded en el .fren-widget: el panel pasa a ocupar
 * todo el viewport. */
.fren-widget.fren-expanded .fren-panel {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border-left: none !important;
  box-shadow: none !important;
}
.fren-widget.fren-open .fren-panel { display: flex; flex-direction: column; }
.fren-widget.fren-open .fren-bubble { display: none; }

/* ── Botones de cabecera del panel (expand + close) ─────────── */
.fren-close,
.fren-expand {
  position: absolute;
  top: 10px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  color: var(--fren-muted-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 11;
  transition: color .15s ease, background-color .15s ease;
}
.fren-close { right: 10px; font-size: 20px; }
.fren-expand { right: 44px; }
.fren-close:hover,
.fren-expand:hover {
  color: var(--fren-dark);
  background: var(--fren-bg-softer);
}
/* Toggle de iconos según estado expandido */
.fren-expand .fren-icon-collapse { display: none; }
.fren-widget.fren-expanded .fren-expand .fren-icon-expand { display: none; }
.fren-widget.fren-expanded .fren-expand .fren-icon-collapse { display: inline-block; }

/* ── Cadena flex desde el panel hasta la chat-card.
 * El panel es sidebar a toda la altura, así que los wrappers intermedios
 * necesitan flex: 1 1 auto para llenar todo el espacio vertical. El
 * chat-area crece y scrollea; header + form + footer quedan fijos. ── */
.fren-panel app-root,
.fren-panel app-chat-lite {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
}

/* ─────────────────────────────────────────────────────────────
 * Overrides del bundle de Angular para encajar dentro del panel
 * ───────────────────────────────────────────────────────────── */
.fren-panel .app-shell {
  padding: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.fren-panel .chat-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: .85rem 1.25rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: .5rem !important;
}

/* Hijos directos de chat-card: header y zona inferior NO se encogen.
 * .fren-chat-area crece para llenar el espacio disponible y scrollea. */
.fren-panel .chat-card > .brand-header { flex: 0 0 auto !important; }
.fren-panel .chat-card > .fren-chat-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
}
.fren-panel .chat-card > .hero-card,
.fren-panel .chat-card > .fren-restored-followups,
.fren-panel .chat-card > .chat-footer { flex: 0 0 auto !important; }
/* Form: separador limpio arriba del input */
.fren-panel .prompt-form {
  margin-top: .5rem !important;
  padding-top: .65rem !important;
  border-top: 1px solid var(--fren-border) !important;
  gap: .5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.fren-panel .prompt-form input {
  padding: .65rem .95rem !important;
  font-size: .88rem !important;
  min-width: 0 !important;
  width: auto !important;
  font-family: inherit !important;
  color: var(--fren-text) !important;
  border: 1px solid var(--fren-border) !important;
  border-radius: 999px !important;
  background: var(--fren-bg-soft) !important;
  transition: border-color .15s ease, background-color .15s ease !important;
}
.fren-panel .prompt-form input:focus {
  border-color: var(--fren-primary) !important;
  background: #fff !important;
  outline: none !important;
}
.fren-panel .prompt-form button {
  padding: 0 1rem !important;
  font-size: .88rem !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  background: linear-gradient(135deg, var(--fren-primary) 0%, var(--fren-primary-hover) 100%) !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, .25) !important;
  transition: box-shadow .15s ease, transform .1s ease !important;
}
.fren-panel .prompt-form button:hover {
  box-shadow: 0 4px 14px rgba(59, 130, 246, .35) !important;
  transform: translateY(-1px) !important;
}
.fren-panel .prompt-form button:active { transform: translateY(0) !important; }
/* Burbujas y chat-window: nunca exceden el panel */
.fren-panel .chat-window,
.fren-panel .bubble {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Forzamos box-sizing en TODO el árbol del panel para no contar paddings dobles */
.fren-panel,
.fren-panel * {
  box-sizing: border-box !important;
}
.fren-panel .brand-header {
  margin: 0 !important;
  margin-right: 90px !important;
  gap: .3rem !important;
  padding: 0 0 .6rem 0 !important;
}
.fren-panel .brand-logo { height: 34px !important; }
/* Logo + badge en fila horizontal */
.fren-panel .brand-header {
  flex-direction: column !important;
  align-items: center !important;
}
.fren-panel .fren-brand-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.fren-beta-badge {
  font-size: .52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fren-primary);
  background: rgba(59, 130, 246, .1);
  border: 1px solid rgba(59, 130, 246, .3);
  border-radius: 4px;
  padding: 2px 5px;
  line-height: 1.3;
  align-self: flex-start;
  margin-top: 4px;
}
.fren-panel .brand-tagline {
  font-size: .74rem !important;
  margin: 0 !important;
  color: var(--fren-muted) !important;
  letter-spacing: .02em !important;
  font-weight: 500 !important;
}
.fren-panel .brand-tagline::first-letter { text-transform: uppercase; }
/* La chat-window vive ahora dentro de .fren-chat-area que ya scrollea, así
 * que liberamos su altura interna: las burbujas fluyen con el resto. */
.fren-panel .chat-window-body {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}
/* Texto de las burbujas (TÚ / ASISTENTE en vivo) y nuestro overlay HTML:
 * tipografía corporativa, tamaño reducido en desktop para no quedar tronchu. */
.fren-panel .bubble-text,
.fren-panel .bubble-text p,
.fren-panel .fren-overlay,
.fren-panel .fren-overlay p {
  font-size: .88rem !important;
  line-height: 1.6 !important;
}
.fren-panel .bubble-text { color: var(--fren-text) !important; }
.fren-panel .bubble-role { font-size: .72rem !important; }
.fren-panel .live-indicator { font-size: .74rem !important; }
/* Panel de "Pensando" (thinking-panel del bundle Angular) */
.fren-panel .thinking-panel { padding: .65rem .75rem .5rem !important; }
.fren-panel .thinking-header { font-size: .74rem !important; margin-bottom: .5rem !important; }
.fren-panel .thinking-title { font-size: .74rem !important; }
.fren-panel .thinking-count { font-size: .66rem !important; }
.fren-panel .thinking-step-text { font-size: .84rem !important; }
.fren-panel .thinking-step-index { width: 19px !important; height: 19px !important; font-size: .7rem !important; }
.fren-panel .chat-footer {
  font-size: .62rem !important;
  padding-top: .5rem !important;
  margin-top: .25rem !important;
  gap: .15rem !important;
  border-top: 1px solid var(--fren-border) !important;
  opacity: .75;
}
.fren-panel .footer-warning { font-size: .62rem !important; color: var(--fren-muted-soft) !important; }
.fren-panel .footer-links,
.fren-panel .footer-links a,
.fren-panel .footer-links .link-button {
  font-size: .6rem !important;
  color: var(--fren-primary) !important;
}

/* Ocultar el botón "Expandir" del chat */
.fren-panel .expand-btn,
.fren-panel .chat-window-actions .expand-btn { display: none !important; }

/* ── Legal disclaimer: dentro del panel, no full-screen ──────
 * Angular pinta .legal-overlay como position:fixed inset:0, lo que hace
 * que ocupe toda la pantalla. Lo convertimos a position:absolute contenido
 * dentro del .fren-panel, más pequeño, alineado abajo a la derecha (donde
 * vive la burbuja) y con tipografía reducida. */
.fren-panel .legal-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, .25) !important;
  padding: .5rem !important;
  min-height: auto !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}
.fren-panel .legal-modal {
  max-width: 100% !important;
  width: 100% !important;
  border-radius: 14px !important;
  padding: .85rem 1rem !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .15) !important;
  max-height: none !important;
  font-size: .78rem !important;
}
.fren-panel .legal-title {
  font-size: .88rem !important;
  font-weight: 700 !important;
  margin: 0 0 .4rem !important;
}
.fren-panel .legal-text {
  font-size: .72rem !important;
  line-height: 1.45 !important;
  margin-bottom: .65rem !important;
}
.fren-panel .legal-text a {
  color: var(--fren-primary) !important;
  font-weight: 600 !important;
}
.fren-panel .legal-cta {
  padding: .55rem .9rem !important;
  font-size: .78rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--fren-primary) 0%, var(--fren-primary-hover) 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, .25) !important;
}

/* ── CTA "Vuelve mañana o prueba la demo gratuita" ───────────
 * Anchor estilizado como botón CTA prominente. Gradiente azul vibrante
 * del primario (--fren-primary #3b82f6) al oscuro (--fren-dark #0f172a)
 * para mantener la paleta corporativa y a la vez tener más "peso" que
 * el botón Enviar plano de al lado. El bloque entero es clicable y abre
 * fren-vinces.web.app en pestaña nueva. Hover aclara el gradiente,
 * refuerza la sombra y desliza la flecha hacia la derecha. */
.fren-limit-msg {
  display: block;
  margin: 1.1rem .25rem .9rem;
  padding: 1.15rem 1.3rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff !important;
  background: linear-gradient(135deg, var(--fren-indigo) 0%, var(--fren-primary-hover) 100%);
  border: none;
  border-radius: 16px;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.38);
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  letter-spacing: .01em;
  line-height: 1.5;
}
.fren-limit-msg::after {
  content: ' →';
  font-weight: 800;
  display: inline;
}
.fren-limit-msg:hover {
  background: linear-gradient(135deg, var(--fren-primary) 0%, var(--fren-indigo) 100%);
  box-shadow: 0 10px 26px rgba(99, 102, 241, 0.45);
  transform: translateY(-1px);
  color: #fff !important;
  text-decoration: none !important;
}
.fren-limit-msg:hover::after { transform: translateX(4px); }
.fren-limit-msg:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.32);
}
.fren-limit-msg:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.45);
  outline-offset: 2px;
}

/* ── Zona de chat (wrapper scroll) ────────────────────────────
 * Contenedor limpio sin caja gris pesada. Fondo transparente para que
 * las burbujas respiren sobre el blanco del panel. Separado del header
 * y del footer con bordes sutiles slate-200 para crear zonas claras. */
.fren-panel .fren-chat-area {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: .75rem .25rem;
  border-top: 1px solid var(--fren-border);
}
.fren-panel .fren-chat-area > .fren-history,
.fren-panel .fren-chat-area > .chat-window {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .65rem !important;
  overflow: visible !important;
  max-height: none !important;
}
.fren-panel .fren-chat-area > .fren-history + .chat-window {
  margin-top: .65rem !important;
}
.fren-panel .fren-chat-area .chat-window-header { display: none !important; }
.fren-panel .fren-chat-area:empty {
  border-top: none;
}

/* ── Bienvenida (espacio vacío aprovechado) ──────────────────
 * Se muestra centrado verticalmente en la chat-area cuando no hay
 * historial ni chat en curso. El JS lo inyecta/elimina en renderWelcome()
 * / removeWelcome(). */
.fren-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .75rem;
  padding: 2rem 1.5rem;
  color: var(--fren-muted);
}
.fren-welcome-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: transparent;            /* sin cuadro azul oscuro detrás del isotipo */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.fren-welcome-icon img { width: 52px; height: 52px; border-radius: 12px; }
.fren-welcome-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fren-dark);
}
.fren-welcome-text {
  margin: 0;
  font-size: .76rem;
  line-height: 1.5;
  max-width: none;
  white-space: nowrap;               /* la frase en un solo renglón */
  color: var(--fren-muted);
}

/* ── Preguntas sugeridas bajo la bienvenida ──────────────────── */
.fren-welcome-suggestions {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: 100%;
  max-width: 320px;
  margin-top: .45rem;
}
.fren-welcome-chip {
  display: block;
  width: 100%;
  text-align: left;
  padding: .55rem .7rem;
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fren-dark);
  background: var(--fren-bg-soft);
  border: 1px solid var(--fren-border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.fren-welcome-chip:hover {
  border-color: var(--fren-primary);
  background: #fff;
  transform: translateY(-1px);
}
.fren-welcome-chip:active { transform: translateY(0); }

/* ── Burbujas de historial (estilo chat moderno) ────────────
 * Usuario: azul con texto blanco, alineado a la derecha.
 * Asistente: blanco sobre el fondo del panel, con sombra fina. */
.fren-history-item { display: flex; flex-direction: column; gap: .5rem; }
.fren-history-user,
.fren-history-assistant {
  padding: .75rem .9rem;
  border-radius: 14px;
  flex-shrink: 0;
  max-width: 92%;
}
.fren-history-user {
  background: linear-gradient(135deg, var(--fren-primary) 0%, var(--fren-primary-hover) 100%);
  border: none;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.fren-history-user .fren-history-role {
  color: rgba(255, 255, 255, .7);
}
.fren-history-user .fren-history-text {
  color: #fff;
}
.fren-history-assistant {
  background: #fff;
  border: 1px solid var(--fren-border);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.fren-history-role {
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fren-muted-soft);
  margin-bottom: .25rem;
}
.fren-history-text { line-height: 1.6; color: var(--fren-text); font-size: .88rem; }

/* ── Override burbujas EN VIVO de Angular ────────────────────
 * Mismo estilo chat moderno: usuario = azul/gradiente a la derecha,
 * asistente = blanco con sombra a la izquierda. Las clases vienen del
 * bundle Angular: .bubble-user y .bubble-assistant. */
.fren-panel .bubble {
  border-radius: 14px !important;
  padding: .75rem .9rem !important;
  max-width: 92% !important;
  border: none !important;
}
.fren-panel .bubble-user {
  background: linear-gradient(135deg, var(--fren-primary) 0%, var(--fren-primary-hover) 100%) !important;
  border: none !important;
  align-self: flex-end !important;
  border-bottom-right-radius: 4px !important;
}
.fren-panel .bubble-user .bubble-role {
  color: rgba(255, 255, 255, .7) !important;
}
.fren-panel .bubble-user .bubble-text,
.fren-panel .bubble-user .bubble-text p {
  color: #fff !important;
}
.fren-panel .bubble-assistant {
  background: #fff !important;
  border: 1px solid var(--fren-border) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06) !important;
  align-self: flex-start !important;
  border-bottom-left-radius: 4px !important;
}
.fren-panel .messages-list {
  display: flex !important;
  flex-direction: column !important;
  gap: .65rem !important;
}

/* ── Respuesta en vivo de Fren ────────────────────────────────
 * No mostramos el rótulo "Asistente" ni el "en curso…". Mientras
 * Fren responde, en su lugar aparece la flecha del isotipo de Fren
 * moviéndose de lado a lado como indicador "escribiendo". */
.fren-panel .bubble-assistant .bubble-role { display: none !important; }
.fren-panel .bubble-assistant .bubble-text.streaming .placeholder { display: none !important; }
.fren-panel .bubble-assistant .bubble-text.streaming::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 0 .5rem;
  border-radius: 7px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 1080'><path d='M1008.86 0C1048.15 0 1080 31.8495 1080 71.1379V1008.86C1080 1048.15 1048.15 1080 1008.86 1080H71.1379C31.8495 1080 0 1048.15 0 1008.86V71.1379C0 31.8495 31.8495 0 71.1379 0H1008.86Z' fill='%232069E7'/><path d='M540 251.313C508.271 251.315 493.463 272.445 487.702 285.372C409.454 460.991 354.487 567.417 252.352 741.203C224.843 784.741 258.597 831.176 300.47 828.578C363.829 825.418 434.433 787.488 500.711 751.882C514.012 744.736 527.141 737.687 540 731.028C552.865 737.69 566.004 744.744 579.311 751.893C645.582 787.496 716.176 825.419 779.53 828.578C821.403 831.176 855.156 784.741 827.648 741.203C725.513 567.417 670.546 460.991 592.298 285.372C586.537 272.444 571.732 251.313 540 251.313Z' fill='%23ffffff'/></svg>") center/contain no-repeat;
  transform-origin: 50% 50%;            /* pivote en el centro del isotipo */
  animation: fren-arrow-swing 2.4s ease-in-out infinite;
}
@keyframes fren-arrow-swing {
  0%   { transform: rotate(-35deg); }
  50%  { transform: rotate(35deg); }
  100% { transform: rotate(-35deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fren-panel .bubble-assistant .bubble-text.streaming::before { animation: none; }
}

/* ── Botones de rating (thumbs up / down) ──────────────────────
 * Debajo de cada respuesta del asistente. Discretos por defecto,
 * resaltan al hover. El seleccionado queda coloreado y ambos se
 * desactivan tras votar. */
.fren-rating {
  display: flex;
  gap: .35rem;
  padding: .15rem 0 0 .1rem;
  align-self: flex-start;
}
.fren-rating-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--fren-muted-soft);
  cursor: pointer;
  padding: 0;
  transition: color .15s ease, background-color .15s ease, transform .1s ease;
  opacity: .55;
}
.fren-rating-btn:hover {
  opacity: 1;
  background: var(--fren-bg-softer);
}
.fren-rating-btn:active { transform: scale(.9); }
.fren-rating-btn:disabled {
  cursor: default;
  opacity: .3;
  background: transparent;
  transform: none;
}
.fren-rating-btn.fren-rating-active {
  opacity: 1 !important;
  color: #fff !important;
}
.fren-rating-up.fren-rating-active {
  background: #22c55e !important;
}
.fren-rating-down.fren-rating-active {
  background: #ef4444 !important;
}
.fren-rating-btn svg { pointer-events: none; }

/* ── Sugerencias restauradas como CARRUSEL LATERAL clicable ─────
 * Layout: caja delgada con título arriba y un track horizontal scrollable
 * con los pills. Así no roban altura al chat aunque haya 5 sugerencias.
 * ─────────────────────────────────────────────────────────────── */
.fren-restored-followups {
  margin-top: .5rem;
  border: 1px dashed rgba(59, 130, 246, 0.3);
  border-radius: 14px;
  padding: .5rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.fren-restored-followups-title {
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fren-muted);
}
.fren-restored-followups-track {
  display: flex;
  flex-direction: row;
  gap: .4rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.35) transparent;
  -webkit-overflow-scrolling: touch;
}
.fren-restored-followups-track::-webkit-scrollbar { height: 6px; }
.fren-restored-followups-track::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.35);
  border-radius: 3px;
}
.fren-restored-followups-track::-webkit-scrollbar-track { background: transparent; }
.fren-restored-followup {
  flex: 0 0 auto;
  max-width: 260px;
  scroll-snap-align: start;
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 12px;
  padding: .4rem .7rem;
  color: var(--fren-primary);
  background: #fff;
  font-size: .78rem;
  line-height: 1.3;
  font-family: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.fren-restored-followup:hover {
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.12);
  transform: translateY(-1px);
}
.fren-restored-followup:active { transform: translateY(0); box-shadow: none; }
.fren-restored-followup:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Mismo CARRUSEL para las sugerencias EN VIVO de Angular ────
 * Angular renderiza .followups-card > .followups-title + .followups-pills
 * con .followup-pill dentro y por defecto pone flex-wrap: wrap (apilando
 * en filas). Lo forzamos a fila horizontal scrollable para que en vivo se
 * vea exactamente igual que el panel restaurado tras recargar. */
.fren-panel .followups-card {
  margin-top: .5rem !important;
  padding: .5rem .65rem !important;
  border-radius: 14px !important;
  gap: .35rem !important;
}
.fren-panel .followups-title {
  font-size: .62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--fren-muted) !important;
}
.fren-panel .followups-pills {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: .4rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(59, 130, 246, 0.35) transparent !important;
  padding-bottom: 4px !important;
  -webkit-overflow-scrolling: touch !important;
}
.fren-panel .followups-pills::-webkit-scrollbar { height: 6px; }
.fren-panel .followups-pills::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.35);
  border-radius: 3px;
}
.fren-panel .followups-pills::-webkit-scrollbar-track { background: transparent; }
.fren-panel .followup-pill {
  flex: 0 0 auto !important;
  max-width: 260px !important;
  scroll-snap-align: start !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  border-radius: 12px !important;
  padding: .4rem .7rem !important;
  font-size: .78rem !important;
  line-height: 1.3 !important;
  font-family: inherit !important;
  text-align: left !important;
  white-space: normal !important;
  background: #fff !important;
  color: var(--fren-primary) !important;
  cursor: pointer !important;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease !important;
}
.fren-panel .followup-pill:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.12) !important;
  transform: translateY(-1px) !important;
  color: var(--fren-primary) !important;
}
.fren-panel .followup-pill:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  background: #fff !important;
}

/* ── Overlay con HTML formateado durante streaming ───────────── */
.fren-overlay { line-height: 1.6; color: var(--fren-text); font-size: .88rem; }
/* Negrita más marcada: peso real 700 y tono más oscuro que el texto normal,
 * para que destaque con claridad respecto al cuerpo. */
.fren-panel .fren-overlay strong,
.fren-panel .fren-overlay b,
.fren-panel .bubble-text strong,
.fren-panel .bubble-text b,
.fren-panel .fren-history-text strong,
.fren-panel .fren-history-text b {
  font-weight: 700 !important;
  color: var(--fren-dark) !important;
}
.fren-overlay h1,
.fren-overlay h2,
.fren-overlay h3,
.fren-overlay h4 { color: var(--fren-dark); margin: .85rem 0 .35rem; font-weight: 600; }
.fren-overlay h1 { font-size: 1.1rem; }
.fren-overlay h2 { font-size: 1.02rem; }
.fren-overlay h3 { font-size: .94rem; }
.fren-overlay h4 { font-size: .88rem; }
.fren-overlay p { margin: 0 0 .55rem; }
.fren-overlay ul,
.fren-overlay ol { padding-left: 1.2rem; margin: .25rem 0 .7rem; }
.fren-overlay li { margin-bottom: .2rem; }
.fren-overlay a {
  color: var(--fren-primary);
  text-decoration: underline;
}
.fren-overlay a:hover { color: var(--fren-primary-hover); }

/* ─────────────────────────────────────────────────────────────
 * Responsive (móvil)
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .fren-widget { bottom: .5rem; right: .5rem; gap: .3rem; }
  .fren-bubble { width: 48px; height: 48px; }
  .fren-bubble-status { width: 12px; height: 12px; top: -2px; right: -2px; }
  .fren-bubble-greeting { font-size: .72rem; padding: 3px 8px; }

  /* Panel en móvil: casi todo el ancho disponible, altura adaptativa.
     - Ancho fijo a calc(100vw - 1rem) para que no se corte texto.
     - Altura libre hasta max-height, así con poco contenido es pequeño
       y con respuesta larga crece hasta el máximo.
     - Mantiene border-radius porque ya no es full-screen. */
  .fren-widget.fren-open .fren-panel {
    /* En móvil el sidebar ocupa toda la pantalla */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .fren-panel .chat-card { padding: .6rem .8rem !important; }
  .fren-panel .brand-logo { height: 26px !important; }
  .fren-panel .brand-tagline { font-size: .68rem !important; }
  .fren-panel .brand-header { margin-right: 86px !important; }
  /* Tipografía un punto más fina en móvil */
  .fren-panel .bubble-text,
  .fren-panel .bubble-text p,
  .fren-panel .fren-overlay,
  .fren-panel .fren-overlay p,
  .fren-panel .fren-history-text { font-size: .84rem !important; }
  .fren-panel .fren-overlay h1 { font-size: 1.05rem !important; }
  .fren-panel .fren-overlay h2 { font-size: .96rem !important; }
  .fren-panel .fren-overlay h3 { font-size: .88rem !important; }
  /* Pensando — más fino en móvil */
  .fren-panel .thinking-panel { padding: .5rem .65rem .4rem !important; }
  .fren-panel .thinking-header { font-size: .68rem !important; }
  .fren-panel .thinking-title { font-size: .68rem !important; }
  .fren-panel .thinking-count { font-size: .62rem !important; }
  .fren-panel .thinking-step-text { font-size: .78rem !important; }
  .fren-panel .thinking-step-index { width: 17px !important; height: 17px !important; font-size: .65rem !important; }
  .fren-panel .prompt-form {
    flex-direction: column !important;
    gap: .4rem !important;
  }
  .fren-panel .prompt-form input {
    padding: .65rem .9rem !important;
    font-size: .88rem !important;
  }
  .fren-panel .prompt-form button {
    width: 100% !important;
    padding: .65rem !important;
    font-size: .88rem !important;
  }
  .fren-panel .chat-window-body {
    min-height: 160px !important;
    max-height: none !important;
  }
  .fren-panel .legal-modal { padding: 1rem !important; border-radius: 12px !important; }

  /* En móvil el modo expandido = pantalla casi completa pegada a bordes */
  .fren-widget.fren-expanded .fren-panel {
    top: .5rem !important;
    bottom: .5rem !important;
    left: .5rem !important;
    right: .5rem !important;
    border-radius: 14px !important;
  }
  /* Botones de cabecera ligeramente menores en móvil */
  .fren-close, .fren-expand { width: 26px; height: 26px; }
  .fren-close { font-size: 18px; }
  .fren-expand { right: 40px; }
}