/* Mobile responsive - Fullscreen robusto */
@media (max-width: 768px) {


  [data-sc3d-cb] .sc3d-cb-panel{
    position: fixed;
    inset: 0;
    width: 100vw;

    /* Unidades de viewport modernas y fallbacks */
    height: 100svh;             /* Small Viewport Height (evita saltos) */
    min-height: 100dvh;         /* Dynamic VH en navegadores modernos */
    max-height: 100dvh;
    height: -webkit-fill-available; /* iOS fallback adicional */

    border-radius: 0;
    border: none;
    box-shadow: none;
    opacity: 1;
    background: var(--cb-bg, #fff);

    /* Layout de columnas: header | messages | input */
    display: flex;
    flex-direction: column;

    /* Evita que el contenedor “encoga” por teclado/barras */
    contain: size layout style;
  }

  /* Oculta overlay si lo tuvieras */
  [data-sc3d-cb]::before{
    display: none !important;
  }

  /* Header simple */
  [data-sc3d-cb] .sc3d-cb-header{
    padding: max(env(safe-area-inset-top), 20px) 16px 16px;
    background: var(--cb-elev);
    border-bottom: 1px solid var(--cb-border);
    flex: 0 0 auto;
  }

  /* Área de mensajes: que sea el ÚNICO scroll interno */
  [data-sc3d-cb] .sc3d-cb-messages{
    flex: 1 1 auto;
    min-height: 0; /* importante para que el flex permita overflow */
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* momentum scroll en iOS */
    overscroll-behavior: contain;
    padding: 12px 16px;
    padding-bottom: max(env(safe-area-inset-bottom), 20px);
    touch-action: pan-y; /* permite desplazamiento vertical aquí */
    background: var(--cb-bg);
  }

  /* Input fijo abajo */
  [data-sc3d-cb] .sc3d-cb-input{
    flex: 0 0 auto;
    padding: 12px 16px max(env(safe-area-inset-bottom), 16px);
    background: var(--cb-elev);
    border-top: 1px solid var(--cb-border);
    touch-action: none; /* evita gestos raros sobre inputs */
  }

  /* Tema oscuro (opcional) */
  [data-sc3d-cb].theme-dark .sc3d-cb-panel{
    background: #1a1a1a;
  }
  [data-sc3d-cb].theme-dark .sc3d-cb-header::before{
    background: #a0a0a0;
  }
}

/* Extra: overlay/backdrop sin gestos cuando exista */
@media (max-width: 768px) {
  [data-sc3d-cb] .sc3d-cb-backdrop{
    position: fixed;
    inset: 0;
    touch-action: none;         /* sin gestos */
    overscroll-behavior: none;  /* no hace scroll */
  }
}
/* ============================================================
   SC3D ContextBot · UX 2025
   Diseño limpio, accesible y responsive (pantalla completa en móvil)
   Encapsulado: [data-sc3d-cb]
   ============================================================ */

/* ===== SUGERENCIAS Y NAVEGACIÓN ===== */
[data-sc3d-cb] .sc3d-suggestions {
  margin: 20px 0;
  padding: 15px;
  background: #eaf2f8;
  border-radius: 8px;
  border-left: 4px solid #2980b9;
}

[data-sc3d-cb] .sc3d-suggestions h3 {
  margin: 0 0 10px 0;
  color: #1a5276;
  font-size: 16px;
  font-weight: 600;
}

[data-sc3d-cb] .sc3d-suggestions ul {
  margin: 0;
  padding-left: 20px;
  color: #2c3e50;
  list-style: none;
}

[data-sc3d-cb] .sc3d-suggestions li {
  margin-bottom: 3px;
}

[data-sc3d-cb] .sc3d-suggestion-link {
  color: #3498db !important;
  text-decoration: none !important;
  cursor: pointer !important;
  padding: 5px 8px;
  border-radius: 4px;
  display: inline-block;
  transition: all 0.2s ease;
  font-size: 14px;
  line-height: 1.4;
}

[data-sc3d-cb] .sc3d-suggestion-link:hover {
  background-color: rgba(52, 152, 219, 0.1) !important;
  color: #2980b9 !important;
  text-decoration: none !important;
}

[data-sc3d-cb] .sc3d-suggestion-link:active {
  background-color: rgba(52, 152, 219, 0.2) !important;
  transform: translateY(1px);
}

/* Navegación de búsqueda */
[data-sc3d-cb] .sc3d-navigation-section {
  margin: 20px 0;
  padding: 15px;
  background: #f0f8ff;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

[data-sc3d-cb] .sc3d-navigation-section h3 {
  margin: 0 0 15px 0;
  color: #3498db;
  font-size: 16px;
  font-weight: 600;
}

[data-sc3d-cb] .sc3d-navigation-section h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
  font-weight: 600;
}

[data-sc3d-cb] .sc3d-navigation-section ul {
  margin: 0;
  padding-left: 20px;
  color: #555;
  list-style: disc;
}

[data-sc3d-cb] .sc3d-navigation-section li {
  margin-bottom: 3px;
}

[data-sc3d-cb] .sc3d-navigation-section a {
  color: #3498db !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

[data-sc3d-cb] .sc3d-navigation-section a:hover {
  color: #2980b9 !important;
  text-decoration: underline !important;
}

/* Forzar estilos para evitar pérdida al recargar */
[data-sc3d-cb] .sc3d-cb-message .sc3d-suggestions,
[data-sc3d-cb] .sc3d-cb-message .sc3d-navigation-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Asegurar que los enlaces de sugerencias mantengan su estilo */
[data-sc3d-cb] .sc3d-cb-message .sc3d-suggestion-link {
  color: #3498db !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-block !important;
}

/* Prevenir que otros CSS sobrescriban nuestros estilos */
[data-sc3d-cb] .sc3d-cb-message a.sc3d-suggestion-link {
  color: #3498db !important;
  text-decoration: none !important;
}

[data-sc3d-cb] .sc3d-cb-message a.sc3d-suggestion-link:visited {
  color: #3498db !important;
}

[data-sc3d-cb] .sc3d-cb-message a.sc3d-suggestion-link:hover {
  color: #2980b9 !important;
  background-color: rgba(52, 152, 219, 0.1) !important;
}

/* ===== Design Tokens (edítalos a tu gusto) ===== */
[data-sc3d-cb]{
  --cb-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, sans-serif;

  /* Color system */
  --cb-bg:        #ffffff;
  --cb-surface:   #f9fafb;     /* fondo de mensajes */
  --cb-elev:      #ffffffcc;   /* panel (ligero glass) */

  /* RGB values for animations */
  --sc3d-cb-primary-rgb: 20, 124, 186;
  --sc3d-cb-secondary-rgb: 108, 117, 125;
  --cb-text:      #0f172a;     /* slate-900 */
  --cb-muted:     #64748b;     /* slate-500 */
  --cb-border:    #e5e7eb;     /* slate-200 */

  /* Marca / acento */
  --cb-accent:        #14b8a6;     /* teal-500 */
  --cb-accent-600:    #0ea5a3;
  --cb-accent-700:    #0b8e8a;
  --cb-primary:       var(--cb-accent);     /* Primary color from config */
  --cb-secondary:     #6b7280;             /* Secondary color from config */

  /* Message colors (customizable) */
  --cb-user-bg:       var(--cb-primary, var(--cb-accent));
  --cb-user-text:     #ffffff;
  --cb-bot-bg:        var(--cb-elev);
  --cb-bot-text:      var(--cb-text);
  --cb-input-bg:      var(--cb-elev);
  --cb-input-text:    var(--cb-text);
  --cb-input-border:  var(--cb-border);
  --cb-button-bg:     var(--cb-primary, var(--cb-accent));
  --cb-button-text:   #ffffff;

  /* Decoración */
  --cb-shadow:    0 12px 38px rgba(2,6,23,.14);
  --cb-radius:    18px;
  --cb-radius-sm: 12px;

  /* Z & Motion */
  --cb-z:         2147483000;
  --cb-dur:       .18s;

  /* Error colors */
  --cb-error-bg:    #fef2f2;
  --cb-error-border: #fecaca;
  --cb-error-text:  #dc2626;
  --cb-warning-bg:  #fffbeb;
  --cb-warning-border: #fed7aa;
  --cb-warning-text: #d97706;

  /* Info colors */
  --cb-info-bg:     #eff6ff;
  --cb-info-border: #bfdbfe;
  --cb-info-text:   #1d4ed8;
}

/* ===== THEME VARIANTS ===== */

/* ChatGPT Theme - Clean, modern, professional */
[data-sc3d-cb].theme-ChatGPT{
  --cb-bg:        #ffffff;
  --cb-surface:   #f7f7f8;
  --cb-elev:      #ffffff;
  --cb-text:      #2d3748;
  --cb-muted:     #718096;
  --cb-border:    #e2e8f0;
  --cb-radius:    12px;
  --cb-radius-sm: 8px;
  --cb-shadow:    0 4px 12px rgba(0,0,0,0.15);
}


/* Pulso específico para tema ChatGPT */
@keyframes sc3d-fab-pulse-chatgpt {
  0%, 100% {
    background: var(--cb-primary, var(--cb-accent));
    border-color: rgba(255,255,255,0.2);
    box-shadow:
      0 4px 12px rgba(0,0,0,0.15),
      0 0 0 0 rgba(var(--sc3d-cb-primary-rgb, 20, 124, 186), 0.2);
  }
  50% {
    background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 88%, #fff);
    border-color: rgba(255,255,255,0.4);
    box-shadow:
      0 4px 12px rgba(0,0,0,0.15),
      0 0 0 6px rgba(var(--sc3d-cb-primary-rgb, 20, 124, 186), 0);
  }
}


[data-sc3d-cb].theme-ChatGPT .sc3d-cb-panel{
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

[data-sc3d-cb].theme-ChatGPT .sc3d-cb-header{
  background: linear-gradient(135deg, #f7f7f8 0%, #ffffff 100%);
  border-bottom: 1px solid #e2e8f0;
}

[data-sc3d-cb].theme-ChatGPT .sc3d-cb-message .text{
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

[data-sc3d-cb].theme-ChatGPT .sc3d-cb-actions button{
  border-radius: 8px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.05);
}

[data-sc3d-cb].theme-ChatGPT .sc3d-cb-actions button:hover{
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Modern Theme - Sleek, contemporary design */
[data-sc3d-cb].theme-modern{
  --cb-bg:        #ffffff;
  --cb-surface:   #fafafa;
  --cb-elev:      #ffffff;
  --cb-text:      #1a202c;
  --cb-muted:     #718096;
  --cb-border:    #e2e8f0;
  --cb-radius:    16px;
  --cb-radius-sm: 12px;
  --cb-shadow:    0 8px 25px rgba(0,0,0,0.12);
}


/* Pulso específico para tema modern */
@keyframes sc3d-fab-pulse-modern {
  0%, 100% {
    background: linear-gradient(135deg, var(--cb-primary, var(--cb-accent)) 0%, color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 80%, #000) 100%);
    box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.15),
      0 4px 10px rgba(0, 0, 0, 0.1),
      0 0 0 0 rgba(var(--sc3d-cb-primary-rgb, 20, 124, 186), 0.2);
  }
  50% {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 90%, #fff) 0%,
      color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 85%, #fff) 100%);
    box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.15),
      0 4px 10px rgba(0, 0, 0, 0.1),
      0 0 0 8px rgba(var(--sc3d-cb-primary-rgb, 20, 124, 186), 0);
  }
}


[data-sc3d-cb].theme-modern .sc3d-cb-panel{
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.2);
}

[data-sc3d-cb].theme-modern .sc3d-cb-header{
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  backdrop-filter: blur(10px);
}

[data-sc3d-cb].theme-modern .sc3d-cb-actions button{
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

[data-sc3d-cb].theme-modern .sc3d-cb-actions button:hover{
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: scale(1.1) translateY(-1px);
}

/* Classic Theme - Traditional, reliable design */
[data-sc3d-cb].theme-classic{
  --cb-bg:        #ffffff;
  --cb-surface:   #f8f9fa;
  --cb-elev:      #ffffff;
  --cb-text:      #212529;
  --cb-muted:     #6c757d;
  --cb-border:    #dee2e6;
  --cb-radius:    8px;
  --cb-radius-sm: 4px;
  --cb-shadow:    0 2px 10px rgba(0,0,0,0.1);
}


/* Pulso específico para tema classic */

[data-sc3d-cb].theme-classic .sc3d-cb-panel{
  border-radius: 8px;
  border: 2px solid #dee2e6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

[data-sc3d-cb].theme-classic .sc3d-cb-header{
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

[data-sc3d-cb].theme-classic .sc3d-cb-message .text{
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

[data-sc3d-cb].theme-classic .chip{
  border-radius: 6px;
}

[data-sc3d-cb].theme-classic .sc3d-cb-actions button{
  border-radius: 6px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

[data-sc3d-cb].theme-classic .sc3d-cb-actions button:hover{
  background: #e9ecef;
  border-color: #adb5bd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transform: none;
}

[data-sc3d-cb].theme-classic .sc3d-cb-actions button:active{
  background: #dee2e6;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Minimal Theme - Clean, distraction-free */
[data-sc3d-cb].theme-minimal{
  --cb-bg:        #ffffff;
  --cb-surface:   #ffffff;
  --cb-elev:      #ffffff;
  --cb-text:      #000000;
  --cb-muted:     #666666;
  --cb-border:    #e0e0e0;
  --cb-radius:    4px;
  --cb-radius-sm: 2px;
  --cb-shadow:    none;
}


/* Pulso específico para tema minimal */
@keyframes sc3d-fab-pulse-minimal {
  0%, 100% {
    background: var(--cb-primary, var(--cb-accent));
    border-color: #e0e0e0;
    box-shadow: none;
  }
  50% {
    background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 90%, #fff);
    border-color: #d0d0d0;
    box-shadow: 0 0 0 4px rgba(var(--sc3d-cb-primary-rgb, 20, 124, 186), 0.1);
  }
}


[data-sc3d-cb].theme-minimal .sc3d-cb-panel{
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #e0e0e0;
}

[data-sc3d-cb].theme-minimal .sc3d-cb-header{
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

[data-sc3d-cb].theme-minimal .sc3d-cb-message .text{
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #e0e0e0;
}

[data-sc3d-cb].theme-minimal .chip{
  border-radius: 4px;
  box-shadow: none;
}

[data-sc3d-cb].theme-minimal .sc3d-cb-actions button{
  border-radius: 4px;
  background: transparent;
  border: 1px solid #e0e0e0;
  box-shadow: none;
}

[data-sc3d-cb].theme-minimal .sc3d-cb-actions button:hover{
  background: #f5f5f5;
  border-color: #d0d0d0;
  box-shadow: none;
  transform: none;
}

[data-sc3d-cb].theme-minimal .sc3d-cb-actions button:focus-visible{
  box-shadow: 0 0 0 2px #000000;
}

/* Dark Theme - Elegant dark mode */
[data-sc3d-cb].theme-dark{
  --cb-bg:        #1a1a1a;
  --cb-surface:   #2d2d2d;
  --cb-elev:      #2d2d2d;
  --cb-text:      #ffffff;
  --cb-muted:     #a0a0a0;
  --cb-border:    #404040;
  --cb-radius:    14px;
  --cb-radius-sm: 10px;
  --cb-shadow:    0 8px 32px rgba(0,0,0,0.4);
}


/* Pulso específico para tema dark */
@keyframes sc3d-fab-pulse-dark {
  0%, 100% {
    background: linear-gradient(135deg, var(--cb-primary, var(--cb-accent)) 0%, color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 70%, #000) 100%);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 4px 16px rgba(0, 0, 0, 0.3),
      0 0 0 0 rgba(var(--sc3d-cb-primary-rgb, 20, 124, 186), 0.3);
  }
  50% {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 85%, #fff) 0%,
      color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 75%, #fff) 100%);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 4px 16px rgba(0, 0, 0, 0.3),
      0 0 0 10px rgba(var(--sc3d-cb-primary-rgb, 20, 124, 186), 0);
  }
}


[data-sc3d-cb].theme-dark .sc3d-cb-panel{
  background: rgba(26,26,26,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

[data-sc3d-cb].theme-dark .sc3d-cb-header{
  background: linear-gradient(135deg, rgba(45,45,45,0.8) 0%, rgba(26,26,26,0.9) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

[data-sc3d-cb].theme-dark .sc3d-cb-message .text{
  background: #2d2d2d;
  border: 1px solid #404040;
  color: #ffffff;
  max-width: 100%;
}

[data-sc3d-cb].theme-dark .sc3d-cb-message.user .text{
  background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 20%, #2d2d2d);
  border-color: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 40%, #404040);
}

[data-sc3d-cb].theme-dark .sc3d-cb-input{
  background: #2d2d2d;
  border-top: 1px solid #404040;
}

[data-sc3d-cb].theme-dark .sc3d-cb-input input{
  background: #1a1a1a;
  border-color: #404040;
  color: #ffffff;
}

[data-sc3d-cb].theme-dark .sc3d-cb-input input::placeholder{
  color: #a0a0a0;
}

[data-sc3d-cb].theme-dark .chip{
  background: #2d2d2d;
  border: 1px solid #404040;
  color: #ffffff;
}

[data-sc3d-cb].theme-dark .chip:hover{
  background: #404040;
  border-color: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 50%, #404040);
}

[data-sc3d-cb].theme-dark .sc3d-cb-actions button{
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #ffffff;
  backdrop-filter: blur(10px);
}

[data-sc3d-cb].theme-dark .sc3d-cb-actions button:hover{
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transform: scale(1.05) translateY(-1px);
}

[data-sc3d-cb].theme-dark .sc3d-cb-actions .sc3d-cb-reset{
  color: var(--cb-primary, var(--cb-accent));
}

[data-sc3d-cb].theme-dark .sc3d-cb-actions .sc3d-cb-close{
  color: #ff6b6b;
}

[data-sc3d-cb].theme-dark .sc3d-cb-actions .sc3d-cb-min,
[data-sc3d-cb].theme-dark .sc3d-cb-actions .sc3d-cb-max{
  color: #a0a0a0;
}

[data-sc3d-cb].theme-dark .sc3d-cb-actions .sc3d-cb-min:hover{
  background: rgba(107, 114, 128, 0.2);
  color: #d1d5db;
}

[data-sc3d-cb].theme-dark .sc3d-cb-actions .sc3d-cb-max:hover{
  background: rgba(5, 150, 105, 0.2);
  color: #10b981;
}

[data-sc3d-cb].theme-dark .sc3d-cb-actions .sc3d-cb-reset:hover{
  background: rgba(0, 124, 186, 0.2);
}

[data-sc3d-cb].theme-dark .sc3d-cb-actions .sc3d-cb-close:hover{
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Desktop Off-Canvas Theme Styles */
@media (min-width: 769px) {
  [data-sc3d-cb].theme-ChatGPT .sc3d-cb-panel{
    box-shadow: -8px 0 32px rgba(0,0,0,0.12);
    border-left: 1px solid #e2e8f0;
  }

  [data-sc3d-cb].theme-modern .sc3d-cb-panel{
    box-shadow: -12px 0 40px rgba(0,0,0,0.15);
    border-left: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  [data-sc3d-cb].theme-classic .sc3d-cb-panel{
    box-shadow: -6px 0 24px rgba(0,0,0,0.1);
    border-left: 2px solid #dee2e6;
  }

  [data-sc3d-cb].theme-minimal .sc3d-cb-panel{
    box-shadow: none;
    border-left: 1px solid #e0e0e0;
  }

  [data-sc3d-cb].theme-dark .sc3d-cb-panel{
    box-shadow: -16px 0 48px rgba(0,0,0,0.6);
    border-left: 1px solid rgba(255,255,255,0.1);
    background: rgba(26,26,26,0.98);
  }

  /* Resize handle indicator */
  [data-sc3d-cb] .sc3d-cb-panel::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--cb-primary, var(--cb-accent)), transparent);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  [data-sc3d-cb] .sc3d-cb-panel:hover::before{
    opacity: 0.6;
  }
}

/* ===============================================
 * MODO FULLSCREEN CHATGPT
 * =============================================== */

/* ===============================================
 * MODO FULLSCREEN - INTERFAZ MODERNA REDISEÑADA
 * =============================================== */

/* Variables CSS para el nuevo diseño */
[data-sc3d-cb].is-fullscreen {
  --sidebar-width: 320px;
  --header-height: 64px;
  --input-height: 80px;
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.2);
  --gradient-primary: linear-gradient(135deg, var(--cb-primary, var(--cb-accent)) 0%, color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 80%, #000) 100%);
}

/* Contenedor principal fullscreen */
[data-sc3d-cb].is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 19999999;
  background: var(--cb-bg);
  display: flex;
  flex-direction: row;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  animation: sc3d-fullscreen-enter var(--transition-slow);
}


/* Panel principal en fullscreen */
[data-sc3d-cb].is-fullscreen .sc3d-cb-panel {
  position: static;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  opacity: 1;
  display: flex;
  flex-direction: row;
  background: transparent;
}

/* ===============================================
 * BARRA LATERAL REDISEÑADA
 * =============================================== */

/* Barra lateral principal */
[data-sc3d-cb].is-fullscreen .sc3d-cb-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100vh;
  background: var(--cb-surface);
  border-right: 1px solid var(--cb-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transition-normal), width var(--transition-normal);
  position: relative;
}

/* Sidebar oculta */
[data-sc3d-cb].is-fullscreen .sc3d-cb-sidebar.hidden {
  transform: translateX(-100%);
  width: 0;
  min-width: 0;
}

/* Header de la barra lateral */
[data-sc3d-cb].is-fullscreen .sc3d-cb-sidebar-header {
  padding: var(--spacing-lg) var(--spacing-md);
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-elev);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Brand/Logo */
[data-sc3d-cb].is-fullscreen .sc3d-cb-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-brand-icon {
  width: 32px;
  height: 32px;
  background: var(--gradient-primary);
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-sm);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-brand-icon svg {
  width: 18px;
  height: 18px;
}

/* ===============================================
 * INFORMACIÓN DEL USUARIO EN SIDEBAR
 * =============================================== */

[data-sc3d-cb].is-fullscreen .sc3d-cb-user-info-sidebar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--cb-elev);
  border-radius: var(--border-radius-md);
  margin: var(--spacing-md) 0;
  border: 1px solid var(--cb-border);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-user-info-sidebar .sc3d-cb-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--cb-primary, var(--cb-accent));
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-user-info-sidebar .sc3d-cb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-user-details {
  flex: 1;
  min-width: 0;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-user-name {
  display: block;
  font-weight: 600;
  color: var(--cb-text);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-user-status {
  display: block;
  font-size: 12px;
  color: var(--cb-muted);
  margin-top: 2px;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-brand-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--cb-text);
  letter-spacing: -0.5px;
}

/* Header de la barra lateral */
[data-sc3d-cb].is-fullscreen .sc3d-cb-sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-elev);
}

/* Botón nueva conversación */
/* Botón Nueva Conversación */
[data-sc3d-cb].is-fullscreen .sc3d-cb-new-chat {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--gradient-primary);
  color: var(--cb-button-text, #fff);
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-size: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-new-chat::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left var(--transition-normal);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-new-chat:hover::before {
  left: 100%;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-new-chat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-new-chat:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-new-chat-icon {
  font-size: 16px;
}

/* ===============================================
 * SECCIÓN DE BÚSQUEDA REDISEÑADA
 * =============================================== */

/* Sección de búsqueda */
[data-sc3d-cb].is-fullscreen .sc3d-cb-search-section {
  padding: 0 var(--spacing-md) var(--spacing-md);
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-elev);
}

/* Contenedor de búsqueda */
[data-sc3d-cb].is-fullscreen .sc3d-cb-search-container {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
  overflow: hidden;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-search-container:focus-within {
  border-color: var(--cb-primary, var(--cb-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 15%, transparent);
}

/* Icono de búsqueda */
[data-sc3d-cb].is-fullscreen .sc3d-cb-search-icon {
  position: absolute;
  left: var(--spacing-md);
  color: var(--cb-muted);
  pointer-events: none;
  z-index: 1;
}

/* Campo de búsqueda */
[data-sc3d-cb].is-fullscreen .sc3d-cb-search {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) 44px;
  border: none;
  background: transparent;
  color: var(--cb-text);
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-search::placeholder {
  color: var(--cb-muted);
}

/* Botón limpiar búsqueda */
[data-sc3d-cb].is-fullscreen .sc3d-cb-search-clear {
  position: absolute;
  right: var(--spacing-sm);
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--cb-muted);
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-search-clear:hover {
  background: var(--cb-surface);
  color: var(--cb-text);
}

/* ===============================================
 * SECCIÓN DE CONVERSACIONES REDISEÑADA
 * =============================================== */

/* Sección de conversaciones */
[data-sc3d-cb].is-fullscreen .sc3d-cb-conversations-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header de conversaciones */
[data-sc3d-cb].is-fullscreen .sc3d-cb-conversations-header {
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-surface);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}



[data-sc3d-cb].is-fullscreen .sc3d-cb-conversations-header h3 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--cb-text);
}

/* Estadísticas */
[data-sc3d-cb].is-fullscreen .sc3d-cb-stats {
  font-size: 13px;
  color: var(--cb-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-stats #sc3d-cb-total-conversations {
  font-weight: 600;
  color: var(--cb-primary, var(--cb-accent));
}

/* ===============================================
 * FOOTER DE LA BARRA LATERAL REDISEÑADO
 * =============================================== */

/* Footer de la barra lateral */
[data-sc3d-cb].is-fullscreen .sc3d-cb-sidebar-footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--cb-border);
  background: var(--cb-surface);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Información del footer */
[data-sc3d-cb].is-fullscreen .sc3d-cb-footer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-version-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 11px;
  color: var(--cb-muted);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-status-indicator {
  color: #22c55e;
  font-size: 8px;
  animation: sc3d-pulse 2s infinite;
}

@keyframes sc3d-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Acciones del footer */
[data-sc3d-cb].is-fullscreen .sc3d-cb-footer-actions {
  display: flex;
  justify-content: space-around;
  gap: var(--spacing-sm);
}

/* Botones de acción */
[data-sc3d-cb].is-fullscreen .sc3d-cb-action-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--cb-muted);
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cb-primary, var(--cb-accent));
  opacity: 0;
  transition: opacity var(--transition-fast);
  border-radius: inherit;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-action-btn:hover::before {
  opacity: 0.1;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-action-btn:hover {
  color: var(--cb-primary, var(--cb-accent));
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-action-btn:active {
  transform: translateY(0);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-action-btn svg {
  position: relative;
  z-index: 1;
}

/* Lista de conversaciones rediseñada */
[data-sc3d-cb].is-fullscreen .sc3d-cb-conversations {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--cb-border) transparent;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-conversations::-webkit-scrollbar {
  width: 6px;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-conversations::-webkit-scrollbar-track {
  background: transparent;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-conversations::-webkit-scrollbar-thumb {
  background: var(--cb-border);
  border-radius: 3px;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-conversations::-webkit-scrollbar-thumb:hover {
  background: var(--cb-muted);
}

/* Item de conversación rediseñado */
[data-sc3d-cb].is-fullscreen .sc3d-cb-conversation-item {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  border: 1px solid transparent;
  background: transparent;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-conversation-item:hover {
  background: var(--cb-elev);
  border-color: var(--cb-border);
  transform: translateX(2px);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-conversation-item.active {
  background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 8%, var(--cb-elev));
  border-color: var(--cb-primary, var(--cb-accent));
  box-shadow: var(--shadow-sm);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-conversation-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cb-primary, var(--cb-accent));
  border-radius: 0 2px 2px 0;
}

/* Título de conversación */
[data-sc3d-cb].is-fullscreen .sc3d-cb-conversation-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--cb-text);
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Preview de conversación */
[data-sc3d-cb].is-fullscreen .sc3d-cb-conversation-preview {
  font-size: 13px;
  color: var(--cb-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

/* Fecha de conversación */
[data-sc3d-cb].is-fullscreen .sc3d-cb-conversation-date {
  font-size: 11px;
  color: var(--cb-muted);
  opacity: 0.8;
}

/* Botón eliminar conversación rediseñado */
[data-sc3d-cb].is-fullscreen .sc3d-cb-delete-conversation {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  backdrop-filter: blur(4px);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-conversation-item:hover .sc3d-cb-delete-conversation {
  opacity: 1;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-delete-conversation:hover {
  background: #ef4444;
  color: white;
  transform: scale(1.1);
}

/* ===============================================
 * ÁREA PRINCIPAL REDISEÑADA
 * =============================================== */

/* Área principal de chat */
[data-sc3d-cb].is-fullscreen .sc3d-cb-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--cb-bg);
  overflow: hidden;
  position: relative;
}

/* Header principal en fullscreen */
/* ===============================================
 * HEADER PRINCIPAL MEJORADO
 * =============================================== */

[data-sc3d-cb].is-fullscreen .sc3d-cb-main-header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: var(--shadow-sm);
  min-height: 70px;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-sidebar-toggle {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--cb-text);
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-sidebar-toggle:hover {
  background: var(--cb-elev);
  transform: scale(1.05);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-conversation-info h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cb-text);
  line-height: 1.2;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-conversation-status {
  font-size: 12px;
  color: var(--cb-muted);
  margin-top: 2px;
  display: block;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-conversation-stats {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: 12px;
  color: var(--cb-muted);
  background: var(--cb-elev);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--cb-border);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  justify-content: flex-end;
}

/* Visibilidad reforzada para el bot3n de nueva conversaci00n en fullscreen */
[data-sc3d-cb].is-fullscreen .sc3d-cb-header-actions .sc3d-cb-new-chat{ color: var(--cb-text); }


/* Información del usuario */
[data-sc3d-cb].is-fullscreen .sc3d-cb-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cb-primary, var(--cb-accent));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-user-details h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--cb-text);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-user-details p {
  margin: 0;
  font-size: 12px;
  color: var(--cb-muted);
}

/* Acciones del header principal */
[data-sc3d-cb].is-fullscreen .sc3d-cb-main-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-main-actions button {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--cb-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-main-actions button:hover {
  background: var(--cb-surface);
  color: var(--cb-text);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-exit-fullscreen {
  background: var(--cb-primary, var(--cb-accent)) !important;
  color: white !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-exit-fullscreen:hover {
  background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 90%, #000) !important;
}

/* Contenedor de chat en fullscreen */
[data-sc3d-cb].is-fullscreen .sc3d-cb-chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Área de mensajes en fullscreen CON PADDING BOTTOM PARA INPUT FIJO */
[data-sc3d-cb].is-fullscreen .sc3d-cb-messages {
  flex: 1;
  padding: 24px;
  padding-bottom: 200px; /* Espacio aumentado para el input fijo y mejor visualización */
  overflow-y: auto;
  background: var(--cb-bg);
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
  /* Altura fija para permitir scroll */
  height: 0; /* Permite que flex: 1 funcione correctamente */
  min-height: 300px;
  /* Ocultar scrollbar pero mantener funcionalidad */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Ocultar scrollbar en WebKit (Chrome, Safari, Edge) */
[data-sc3d-cb].is-fullscreen .sc3d-cb-messages::-webkit-scrollbar {
  display: none;
}

/* ===== CRÍTICO: PRESERVAR ESTILOS EN FULLSCREEN ===== */
/* Cuando el chatbot se maximiza, PrestaShop aplica estilos globales que sobrescriben los del módulo.
   Esta sección fuerza la preservación de TODOS los estilos de búsqueda en modo fullscreen. */

/* Contenedor principal de resultados de búsqueda */
[data-sc3d-cb].is-fullscreen .sc3d-cb-messages .sc3d-search-results {
  all: initial !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #1f1f1f !important;
  color: #e8eaed !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* Forzar estilos en todos los elementos hijos */
[data-sc3d-cb].is-fullscreen .sc3d-cb-messages .sc3d-search-results * {
  box-sizing: border-box !important;
}

/* Chips de navegación */
[data-sc3d-cb].is-fullscreen .sc3d-nav-chips {
  display: flex !important;
  gap: 8px !important;
  padding: 12px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  background: transparent !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-nav-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: #2d2d2d !important;
  color: #e8eaed !important;
  border: 1px solid #3c4043 !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-nav-chip:hover {
  background: #3c4043 !important;
  border-color: #5f6368 !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-nav-chip.active {
  background: #8ab4f8 !important;
  color: #1f1f1f !important;
  border-color: #8ab4f8 !important;
}

/* AI Overview */
[data-sc3d-cb].is-fullscreen .sc3d-ai-overview {
  background: #2d2d2d !important;
  border: 1px solid #3c4043 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-ai-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-ai-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #e8eaed !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-ai-content {
  color: #bdc1c6 !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
}

/* Secciones con carousels */
[data-sc3d-cb].is-fullscreen .sc3d-videos-section,
[data-sc3d-cb].is-fullscreen .sc3d-shopping-section,
[data-sc3d-cb].is-fullscreen .sc3d-news-section,
[data-sc3d-cb].is-fullscreen .sc3d-products-carousel,
[data-sc3d-cb].is-fullscreen .sc3d-images-section {
  margin-bottom: 24px !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  color: #e8eaed !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Carousels */
[data-sc3d-cb].is-fullscreen .sc3d-carousel-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-carousel-btn {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #2d2d2d !important;
  border: 1px solid #3c4043 !important;
  color: #e8eaed !important;
  font-size: 20px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-carousel-btn:hover {
  background: #3c4043 !important;
}

/* Resultados orgánicos */
[data-sc3d-cb].is-fullscreen .sc3d-organic-results {
  display: block !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-organic-result {
  padding: 16px 0 !important;
  border-bottom: 1px solid #3c4043 !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-result-title {
  color: #8ab4f8 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 4px !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-result-title:hover {
  text-decoration: underline !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-result-url {
  color: #bdc1c6 !important;
  font-size: 12px !important;
  margin-bottom: 8px !important;
}

[data-sc3d-cb].is-fullscreen .sc3d-result-snippet {
  color: #bdc1c6 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ===== CONTEXTO DE PÁGINA ===== */

/* Header contextual mejorado */
[data-sc3d-cb].is-fullscreen .sc3d-cb-main-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--cb-text);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-main-header .context-icon {
  font-size: 20px;
  display: inline-flex;
  align-items: center;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-main-header .context-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-main-header .context-price {
  font-size: 16px;
  font-weight: 700;
  color: #10B981;
  background: #10B98110;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Badge contextual flotante */
.sc3d-cb-context-badge {
  position: absolute;
  top: 80px;
  right: 24px;
  z-index: 1001;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  animation: slideInFromRight 0.3s ease-out;
  max-width: 280px;
}

.sc3d-cb-context-badge:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.context-badge-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.context-badge-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.context-badge-text {
  flex: 1;
  min-width: 0;
}

.context-badge-type {
  font-size: 11px;
  font-weight: 500;
  color: var(--cb-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.context-badge-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.context-badge-subtitle {
  font-size: 12px;
  color: var(--cb-text-secondary);
  margin-top: 2px;
}

.context-badge-back {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cb-bg-secondary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cb-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.context-badge-back:hover {
  background: var(--cb-primary);
  color: white;
  transform: scale(1.05);
}

.context-badge-back svg {
  width: 16px;
  height: 16px;
}

/* Animación de entrada */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive para móvil */
@media (max-width: 768px) {
  .sc3d-cb-context-badge {
    top: 70px;
    right: 16px;
    max-width: 240px;
  }

  .context-badge-content {
    padding: 10px 12px;
    gap: 10px;
  }

  .context-badge-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .context-badge-name {
    font-size: 13px;
  }

  .context-badge-back {
    width: 28px;
    height: 28px;
  }
}

/* ===============================================
 * ÁREA DE INPUT REDISEÑADA
 * =============================================== */

/* Sección de input FIJA AL BOTTOM */
[data-sc3d-cb].is-fullscreen .sc3d-cb-input-section {
  position: fixed;
  bottom: 0;
  left: 320px; /* Ancho de la sidebar */
  right: 0;
  padding: var(--spacing-md);
  border-top: 1px solid var(--cb-border);
  background: var(--cb-surface);
  backdrop-filter: blur(12px);
  z-index: 10;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Ajustar cuando la sidebar está oculta */
[data-sc3d-cb].is-fullscreen .sc3d-cb-sidebar.hidden ~ .sc3d-cb-main-area .sc3d-cb-input-section {
  left: 0;
}

/* ===============================================
 * BOTÓN FAB NUEVA CONVERSACIÓN
 * =============================================== */

[data-sc3d-cb].is-fullscreen .sc3d-cb-fab-new-chat {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border: none;
  background: var(--gradient-primary);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  font-size: 0; /* Ocultar texto, solo mostrar icono */
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-fab-new-chat:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-fab-new-chat:active {
  transform: scale(0.95);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-fab-new-chat svg {
  width: 24px;
  height: 24px;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  [data-sc3d-cb].is-fullscreen .sc3d-cb-fab-new-chat {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
  }

  [data-sc3d-cb].is-fullscreen .sc3d-cb-fab-new-chat svg {
    width: 20px;
    height: 20px;
  }
}

/* Wrapper del input */
[data-sc3d-cb].is-fullscreen .sc3d-cb-input-wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Contenedor del input */
[data-sc3d-cb].is-fullscreen .sc3d-cb-input-container {
  display: flex;
  align-items: center;
  background: var(--cb-bg);
  border: 2px solid var(--cb-border);
  border-radius: 24px;
  padding: var(--spacing-sm);
  gap: var(--spacing-sm);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-input-container:focus-within {
  border-color: var(--cb-primary, var(--cb-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 15%, transparent);
}

/* Botones del input */
[data-sc3d-cb].is-fullscreen .sc3d-cb-attach-btn,
[data-sc3d-cb].is-fullscreen .sc3d-cb-mic-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--cb-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-attach-btn:hover,
[data-sc3d-cb].is-fullscreen .sc3d-cb-mic-btn:hover {
  background: var(--cb-elev);
  color: var(--cb-text);
  transform: scale(1.1);
}

/* Campo de input */
[data-sc3d-cb].is-fullscreen #sc3d-cb-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--cb-text);
  font-size: 16px;
  outline: none;
  padding: var(--spacing-sm) 0;
  font-family: inherit;
}

[data-sc3d-cb].is-fullscreen #sc3d-cb-input::placeholder {
  color: var(--cb-muted);
}

/* Botón enviar */
[data-sc3d-cb].is-fullscreen .sc3d-cb-send-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--gradient-primary);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-sm);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-send-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-send-btn:active {
  transform: scale(0.95);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Footer del input mejorado */
[data-sc3d-cb].is-fullscreen .sc3d-cb-input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--cb-elev);
  border-radius: var(--border-radius-sm);
  margin-top: var(--spacing-xs);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-input-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-input-hint {
  font-size: 11px;
  color: var(--cb-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-input-hint svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-model-info {
  font-size: 11px;
  color: var(--cb-primary, var(--cb-accent));
  font-weight: 500;
  background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 10%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Indicador de escritura */
[data-sc3d-cb].is-fullscreen .sc3d-cb-typing-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 12px;
  color: var(--cb-muted);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-dots {
  display: flex;
  gap: 2px;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-dots span {
  width: 4px;
  height: 4px;
  background: var(--cb-muted);
  border-radius: 50%;
  animation: sc3d-typing-dots 1.4s infinite ease-in-out;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes sc3d-typing-dots {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* ===============================================
 * ARCHIVOS ADJUNTOS
 * =============================================== */

[data-sc3d-cb].is-fullscreen .sc3d-cb-files-indicator {
  width: 100%;
  margin-bottom: var(--spacing-sm);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-attached-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--cb-elev);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--cb-border);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-file-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--cb-bg);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--cb-border);
  font-size: 12px;
  max-width: 200px;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-file-icon {
  font-size: 14px;
  flex-shrink: 0;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-file-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cb-text);
  font-weight: 500;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-file-size {
  color: var(--cb-muted);
  font-size: 10px;
  flex-shrink: 0;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-remove-file {
  width: 16px;
  height: 16px;
  border: none;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-remove-file:hover {
  background: #dc2626;
  transform: scale(1.1);
}

/* ===============================================
 * MÓVIL - DESACTIVAR MAXIMIZAR
 * =============================================== */

@media (max-width: 768px), (pointer: coarse) {
  [data-sc3d-cb] .sc3d-cb-max {
    display: none !important;
  }

  /* Prevenir fullscreen en móviles */
  [data-sc3d-cb].is-fullscreen {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: auto !important;
  }
}

/* Footer oculto en fullscreen */
[data-sc3d-cb].is-fullscreen .sc3d-cb-footer {
  display: none;
}

/* Sugerencias en fullscreen */
[data-sc3d-cb].is-fullscreen .sc3d-cb-suggestions {
  padding: 16px 24px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* Responsive para móviles en fullscreen */
@media (max-width: 768px) {
  [data-sc3d-cb].is-fullscreen .sc3d-cb-sidebar {
    width: 100%;
    position: absolute;
    left: -100%;
    transition: left 0.3s ease;
    z-index: 10;
  }

  [data-sc3d-cb].is-fullscreen .sc3d-cb-sidebar.open {
    left: 0;
  }

  [data-sc3d-cb].is-fullscreen .sc3d-cb-main-area {
    width: 100%;
  }

  [data-sc3d-cb].is-fullscreen .sc3d-cb-messages {
    padding: 16px;
    padding-bottom: 180px; /* Espacio aumentado para input fijo en móvil y mejor visualización */
  }

  [data-sc3d-cb].is-fullscreen .sc3d-cb-input-section {
    left: 0; /* En móvil ocupa todo el ancho */
    padding: 12px 16px;
  }

  [data-sc3d-cb].is-fullscreen .sc3d-cb-main-header {
    padding: 12px 16px;
  }
}

/* Temas específicos para fullscreen */
[data-sc3d-cb].is-fullscreen.theme-dark {
  background: #1a1a1a;
}

[data-sc3d-cb].is-fullscreen.theme-dark .sc3d-cb-sidebar {
  background: #2d2d2d;
  border-right-color: #404040;
}

[data-sc3d-cb].is-fullscreen.theme-dark .sc3d-cb-main-area {
  background: #1a1a1a;
}

[data-sc3d-cb].is-fullscreen.theme-dark .sc3d-cb-main-header {
  background: #2d2d2d;
  border-bottom-color: #404040;
}

[data-sc3d-cb].is-fullscreen.theme-dark .sc3d-cb-sidebar-header {
  background: #2d2d2d;
  border-bottom-color: #404040;
}

/* Animaciones de entrada/salida */
@keyframes sc3d-fullscreen-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes sc3d-sidebar-slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

[data-sc3d-cb].is-fullscreen {
  animation: sc3d-fullscreen-enter 0.3s ease-out;
}

[data-sc3d-cb].is-fullscreen .sc3d-cb-sidebar {
  animation: sc3d-sidebar-slide-in 0.3s ease-out;
}

/* Toast para modo fullscreen */
[data-sc3d-cb] .sc3d-cb-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--cb-elev);
  color: var(--cb-text);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--cb-border);
  box-shadow: var(--cb-shadow);
  font-size: 14px;
  z-index: 999999999;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  pointer-events: none;
  max-width: 300px;
}

[data-sc3d-cb] .sc3d-cb-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

[data-sc3d-cb] .sc3d-cb-toast[data-level="error"] {
  background: var(--cb-error-bg);
  border-color: var(--cb-error-border);
  color: var(--cb-error-text);
}

[data-sc3d-cb] .sc3d-cb-toast[data-level="warning"] {
  background: var(--cb-warning-bg);
  border-color: var(--cb-warning-border);
  color: var(--cb-warning-text);
}

[data-sc3d-cb] .sc3d-cb-toast[data-level="info"] {
  background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 10%, var(--cb-elev));
  border-color: var(--cb-primary, var(--cb-accent));
  color: var(--cb-text);
}

/* ===============================================
 * PANEL DE CONFIGURACIÓN
 * =============================================== */

/* Overlay de configuración */
[data-sc3d-cb] .sc3d-cb-settings-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(6px);
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: sc3d-overlay-enter 0.2s ease-out;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* Panel de configuración */
[data-sc3d-cb] .sc3d-cb-settings-panel {
  background: var(--cb-elev);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  box-shadow: var(--cb-shadow);
  width: 90%;
  min-width: 500px;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  animation: sc3d-panel-enter 0.3s ease-out;
  position: relative;
  z-index: inherit;
  margin: auto;
}

/* Header del panel */
[data-sc3d-cb] .sc3d-cb-settings-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-sc3d-cb] .sc3d-cb-settings-header h3 {
  margin: 0;
  color: var(--cb-text);
  font-size: 18px;
  font-weight: 600;
}

[data-sc3d-cb] .sc3d-cb-settings-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--cb-muted);
  cursor: pointer;
  border-radius: 6px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

[data-sc3d-cb] .sc3d-cb-settings-close:hover {
  background: var(--cb-surface);
  color: var(--cb-text);
}

/* Contenido del panel */
[data-sc3d-cb] .sc3d-cb-settings-content {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Grupos de configuración */
[data-sc3d-cb] .sc3d-cb-setting-group {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cb-border);
}

[data-sc3d-cb] .sc3d-cb-setting-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

[data-sc3d-cb] .sc3d-cb-setting-group label {
  display: block;
  font-weight: 600;
  color: var(--cb-text);
  margin-bottom: 12px;
  font-size: 14px;
}

/* Controles de configuración */
[data-sc3d-cb] .sc3d-cb-theme-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  background: var(--cb-bg);
  color: var(--cb-text);
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

[data-sc3d-cb] .sc3d-cb-theme-select:focus {
  border-color: var(--cb-primary, var(--cb-accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 20%, transparent);
}

[data-sc3d-cb] .sc3d-cb-typing-speed {
  width: 100%;
  margin-bottom: 8px;
}

[data-sc3d-cb] .sc3d-cb-speed-value {
  display: inline-block;
  background: var(--cb-primary, var(--cb-accent));
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  min-width: 30px;
  text-align: center;
}

[data-sc3d-cb] .sc3d-cb-voice-enabled {
  margin-right: 8px;
  transform: scale(1.2);
}

[data-sc3d-cb] .sc3d-cb-clear-all {
  background: #ef4444;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-sc3d-cb] .sc3d-cb-clear-all:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

/* Footer del panel */
[data-sc3d-cb] .sc3d-cb-settings-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--cb-border);
  background: var(--cb-surface);
  display: flex;
  justify-content: flex-end;
}

[data-sc3d-cb] .sc3d-cb-settings-save {
  background: var(--cb-primary, var(--cb-accent));
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-sc3d-cb] .sc3d-cb-settings-save:hover {
  background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 90%, #000);
  transform: translateY(-1px);
}

/* Animaciones del panel */
@keyframes sc3d-overlay-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sc3d-panel-enter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Media queries para el panel de configuración */
/* Pantallas muy grandes (4K y superiores) */
@media (min-width: 1920px) {
  [data-sc3d-cb] .sc3d-cb-settings-panel {
    width: 40% !important;
    min-width: 600px !important;
    max-width: 900px !important;
    font-size: 16px !important;
  }
}

/* Pantallas grandes (escritorio) */
@media (min-width: 1200px) and (max-width: 1919px) {
  [data-sc3d-cb] .sc3d-cb-settings-panel {
    width: 50% !important;
    min-width: 550px !important;
    max-width: 800px !important;
    font-size: 15px !important;
  }
}

/* Pantallas medianas (tablets y laptops pequeños) */
@media (min-width: 769px) and (max-width: 1199px) {
  [data-sc3d-cb] .sc3d-cb-settings-panel {
    width: 70% !important;
    min-width: 450px !important;
    max-width: 650px !important;
    font-size: 14px !important;
  }
}

/* Pantallas pequeñas (móviles grandes) */
@media (max-width: 768px) {
  [data-sc3d-cb] .sc3d-cb-settings-panel {
    width: 95% !important;
    min-width: 300px !important;
    max-width: 450px !important;
    margin: 20px !important;
    font-size: 14px !important;
  }
}

/* Pantallas muy pequeñas (móviles pequeños) */
@media (max-width: 480px) {
  [data-sc3d-cb] .sc3d-cb-settings-panel {
    width: 100% !important;
    min-width: auto !important;
    max-width: none !important;
    margin: 10px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }
}


/* ===== Reset local seguro ===== */
[data-sc3d-cb], [data-sc3d-cb] *{ box-sizing: border-box; font-family: var(--cb-font); }
[data-sc3d-cb] button{ appearance: none; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
[data-sc3d-cb] .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }


/* Animaciones del botón */
@keyframes sc3d-fab-entrance {
  0% {
    transform: translateY(100px) scale(0.3);
    opacity: 0;
  }
  60% {
    transform: translateY(-8px) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}


/* Animación de respiración muy sutil */
@keyframes sc3d-fab-breathing {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.015);
  }
}

@keyframes sc3d-fab-pulse {
  0%, 100% {
    background: var(--cb-primary, var(--cb-accent));
    box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.15),
      0 4px 10px rgba(0, 0, 0, 0.1),
      0 0 0 0 rgba(var(--sc3d-cb-primary-rgb, 20, 124, 186), 0.2);
  }
  25% {
    background: linear-gradient(135deg,
      var(--cb-primary, var(--cb-accent)) 0%,
      color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 90%, #fff) 100%);
    box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.15),
      0 4px 10px rgba(0, 0, 0, 0.1),
      0 0 0 4px rgba(var(--sc3d-cb-primary-rgb, 20, 124, 186), 0.1);
  }
  50% {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 85%, #fff) 0%,
      var(--cb-primary, var(--cb-accent)) 100%);
    box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.15),
      0 4px 10px rgba(0, 0, 0, 0.1),
      0 0 0 8px rgba(var(--sc3d-cb-primary-rgb, 20, 124, 186), 0);
  }
  75% {
    background: linear-gradient(135deg,
      var(--cb-primary, var(--cb-accent)) 0%,
      color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 90%, #fff) 100%);
    box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.15),
      0 4px 10px rgba(0, 0, 0, 0.1),
      0 0 0 4px rgba(var(--sc3d-cb-primary-rgb, 20, 124, 186), 0.1);
  }
}


@keyframes sc3d-fab-emoji-subtle {
  0%, 100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(-2px) rotate(2deg);
  }
}








/* Disable animations */
[data-sc3d-cb].no-anim .sc3d-cb-panel,
[data-sc3d-cb].no-anim .chip,
[data-sc3d-cb].no-anim .sc3d-cb-input button{ transition: none !important; animation: none !important; }

/* ===== Panel (card + glass sutil) ===== */
[data-sc3d-cb] .sc3d-cb-panel{
  position: fixed; right: 20px; bottom: 88px; z-index: calc(var(--cb-z) + 1);
  --cb-panel-width: min(600px, 92vw);
  width: var(--cb-panel-width); max-height: 76vh; display:none; flex-direction: column;
  background: var(--cb-elev); color: var(--cb-text);
  border: 1px solid var(--cb-border); border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile responsive - Simple fullscreen */
@media (max-width: 768px) {
  [data-sc3d-cb] .sc3d-cb-panel{
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: none;
    opacity: 1;
  }

  /* Mobile: Hide overlay */
  [data-sc3d-cb]::before{
    display: none;
  }

  /* Simple mobile header */
  [data-sc3d-cb] .sc3d-cb-header{
    padding: max(env(safe-area-inset-top), 20px) 16px 16px;
    background: var(--cb-elev);
    border-bottom: 1px solid var(--cb-border);
  }

  /* Mobile messages area */
  [data-sc3d-cb] .sc3d-cb-messages{
    padding-bottom: max(env(safe-area-inset-bottom), 20px);
  }

  /* Mobile input */
  [data-sc3d-cb] .sc3d-cb-input{
    padding: 16px 16px max(env(safe-area-inset-bottom), 16px);
    background: var(--cb-elev);
    border-top: 1px solid var(--cb-border);
  }

  /* Mobile Theme Specific Styles */
  [data-sc3d-cb].theme-dark .sc3d-cb-panel{
    background: #1a1a1a;
  }

  [data-sc3d-cb].theme-dark .sc3d-cb-header::before{
    background: #a0a0a0;
  }


}

/* Desktop Off-Canvas Mode */
@media (min-width: 769px) {
  [data-sc3d-cb] .sc3d-cb-panel{
    right: 0;
    left: auto;
    bottom: 0;
    top: 0;
    width: var(--cb-panel-width, 420px);
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border-right: none;
    border-top: none;
    border-bottom: none;
    box-shadow: -8px 0 32px rgba(0,0,0,0.15);
    transform: translateX(100%);
    opacity: 1;
  }

  /* Panel posicionado a la izquierda */
  [data-sc3d-cb].pos-left .sc3d-cb-panel{
    right: auto !important;
    left: 0 !important;
    box-shadow: 8px 0 32px rgba(0,0,0,0.15) !important;
    transform: translateX(-100%) !important;
    border-left: none !important;
    border-right: 1px solid var(--cb-border) !important;
  }

  [data-sc3d-cb].pos-left.is-open .sc3d-cb-panel{
    transform: translateX(0) !important;
  }
}


  /* Desktop overlay for click-outside-to-close */
  [data-sc3d-cb]::before{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: calc(var(--cb-z) - 1);
  }

  [data-sc3d-cb].is-open::before{
    opacity: 1;
    pointer-events: auto;
  }

  [data-sc3d-cb].is-closing::before{
    opacity: 0;
    pointer-events: none;
  }



[data-sc3d-cb].pos-top .sc3d-cb-panel{
  top: 88px;
  bottom: auto;
}

[data-sc3d-cb].pos-left.pos-top .sc3d-cb-panel{
  left: 20px;
  top: 88px;
  right: auto;
  bottom: auto;
}
[data-sc3d-cb].is-open .sc3d-cb-panel{
  display:flex;
}

/* Mobile simple animation */
@media (max-width: 768px) {
  [data-sc3d-cb].is-open .sc3d-cb-panel{
    opacity: 1;
    visibility: visible;
  }

  [data-sc3d-cb].is-closing .sc3d-cb-panel{
    opacity: 0;
    visibility: hidden;
  }
}

/* Desktop off-canvas animation */
@media (min-width: 769px) {
  [data-sc3d-cb].is-open .sc3d-cb-panel{
    display: flex !important;
    visibility: visible;
    transform: translateX(0);
    opacity: 1;
    animation: cb-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  [data-sc3d-cb].is-closing .sc3d-cb-panel{
    animation: cb-slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
}

/* Header */
[data-sc3d-cb] .sc3d-cb-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cb-accent) 10%, var(--cb-bg)), var(--cb-bg));
  border-bottom: 1px solid var(--cb-border);
  gap: 12px;
  position: relative;
  z-index: 10; /* Asegurar que el header esté siempre accesible, incluso con consentimiento */
}

/* Logo del header */
[data-sc3d-cb] .sc3d-cb-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-sc3d-cb] .sc3d-cb-logo img {
  max-width: 120px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

[data-sc3d-cb] .sc3d-cb-logo img:hover {
  opacity: 0.8;
}
[data-sc3d-cb] .sc3d-cb-title{ font-weight: 700; letter-spacing:.2px; }
[data-sc3d-cb] .sc3d-cb-titlewrap{ display:flex; flex-direction:column; gap:2px; }
[data-sc3d-cb] .sc3d-cb-sub{ font-size:12px; color: var(--cb-muted); }
[data-sc3d-cb] .sc3d-cb-actions{ display:flex; align-items:center; gap:6px; }
[data-sc3d-cb] .sc3d-cb-actions button{
  width:32px; height:32px; border-radius:var(--cb-radius-sm, 8px);
  display:grid; place-items:center; color:var(--cb-text); background: transparent;
  transition: all var(--cb-dur) ease;
  font-size: 14px; font-weight: 500;
}
[data-sc3d-cb] .sc3d-cb-actions button:hover{
  background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 10%, var(--cb-surface));
  transform: scale(1.05);
}
[data-sc3d-cb] .sc3d-cb-actions button:focus-visible{
  outline:0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 40%, transparent);
}
[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-reset{
  color: var(--cb-primary, var(--cb-accent));
}
[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-min{
  color: var(--cb-muted);
}
[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-max{
  color: var(--cb-muted);
}
[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-close{
  color: #ef4444;
}

/* Special hover effects for action buttons */
[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-min:hover{
  background: color-mix(in srgb, #6b7280 15%, var(--cb-surface));
}

[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-max:hover{
  background: color-mix(in srgb, #059669 15%, var(--cb-surface));
}

[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-reset:hover{
  background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 15%, var(--cb-surface));
}

[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-close:hover{
  background: color-mix(in srgb, #ef4444 15%, var(--cb-surface));
}

/* Active states */
[data-sc3d-cb] .sc3d-cb-actions button:active{
  transform: scale(0.95);
}

/* Button icons enhancement */
[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-min::before{
  content: "−";
  font-size: 16px;
  font-weight: bold;
}

[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-max{
  font-size: 12px;
  font-weight: bold;
}

[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-reset{
  font-size: 16px;
  font-weight: bold;
}

[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-close{
  font-size: 18px;
  font-weight: bold;
}

/* Footer */
[data-sc3d-cb] .sc3d-cb-footer{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding: 8px 12px; border-top: 1px solid var(--cb-border); background: var(--cb-elev);
  font-size: 12px; color: var(--cb-muted);
}
[data-sc3d-cb] .sc3d-cb-footer .foot-left{ opacity:.9; }
[data-sc3d-cb] .sc3d-cb-footer .foot-right{ opacity:.9; font-weight:600; }

/* Feedback appear animation */
[data-sc3d-cb] .sc3d-cb-feedback.appear{ animation: cb-fb-in .18s ease both; }
@keyframes cb-fb-in{ from{ opacity:0; transform: translateY(4px) scale(.98);} to{ opacity:1; transform: translateY(0) scale(1);} }

/* Collapsed / Maximized states */
[data-sc3d-cb] .sc3d-cb-panel.is-collapsed #sc3d-cb-sugg,
[data-sc3d-cb] .sc3d-cb-panel.is-collapsed #sc3d-cb-messages,
[data-sc3d-cb] .sc3d-cb-panel.is-collapsed .sc3d-cb-input,
[data-sc3d-cb] .sc3d-cb-panel.is-collapsed .sc3d-cb-footer{ display:none; }
[data-sc3d-cb] .sc3d-cb-panel.is-collapsed{ max-height: none; }
/*
@media (min-width: 1025px){
  [data-sc3d-cb] .sc3d-cb-panel.is-max{ top: 12px; bottom: 12px; max-height: calc(100vh - 24px); }
}
*/
/* Feedback UI */
[data-sc3d-cb] .sc3d-cb-feedback{ display:flex; gap:8px; margin-top:6px; opacity:.9; }
[data-sc3d-cb] .sc3d-cb-feedback .thumb{ width:28px; height:28px; border-radius:999px; background: #f1f5f9; display:grid; place-items:center; }
[data-sc3d-cb] .sc3d-cb-feedback .thumb:hover{ background:#e2e8f0; }
[data-sc3d-cb] .sc3d-cb-feedback.voted .thumb{ opacity:.5; pointer-events:none; }

/* Legacy close button styles - now handled by .sc3d-cb-actions button */

/* Consent UI */
/* Consent Stage overlay (top hero + bottom consent) */
[data-sc3d-cb] .sc3d-cb-consent-stage{
  position:absolute; left:0; right:0; bottom:0; top:56px; /* JS ajusta top exacto */
  z-index: 3; pointer-events:auto; padding: 12px; /* z-index menor que header para no bloquear controles */
}
[data-sc3d-cb] .sc3d-cb-consent-stage .consent-hero{
  --crt-green:#33ff66; --crt-bg:#060d06; --crt-border:#103d1f;
  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
  width: min(92%, 560px);
  min-height: var(--cb-hero-h, 260px);
  max-height: calc(100vh - 200px); /* Evitar que se salga de la pantalla */
  display: grid; grid-template-rows: auto 1fr; align-items: center; justify-items: center; gap:12px;
  padding: 12px; text-align: left;
}
/* Bot orb espectacular */
[data-sc3d-cb] .bot-orb{ position:relative; width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center; background: radial-gradient(circle at 30% 30%, rgba(var(--sc3d-cb-primary-rgb,20,124,186),.25), transparent 60%), #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.15), 0 0 0 var(--orb-glow-size, 6px) color-mix(in srgb, var(--orb-glow-color, var(--cb-accent)) 18%, transparent);
  animation: cb-orb-float 6s ease-in-out infinite;
}
[data-sc3d-cb] .bot-orb::before{ content:''; position:absolute; inset:-6px; border-radius:50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--orb-glow-color, var(--cb-accent)) 60%, transparent), transparent 40%, color-mix(in srgb, var(--orb-glow-color, var(--cb-accent)) 60%, transparent));
  filter: blur(6px); opacity:.6; animation: cb-orb-rotate 8s linear infinite;
}
[data-sc3d-cb] .bot-orb img{ width:72px; height:72px; object-fit:cover; border-radius:50%; filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)) drop-shadow(0 0 calc(var(--orb-glow-size,6px)*1.2) color-mix(in srgb, var(--orb-glow-color, var(--cb-accent)) 40%, transparent)); }
[data-sc3d-cb] .bot-orb .emoji{ font-size:44px; }
@keyframes cb-orb-float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
@keyframes cb-orb-rotate{ from{ transform: rotate(0);} to{ transform: rotate(360deg);} }

/* Spacers to center the hero vertically */
[data-sc3d-cb] .consent-spacer{ flex: 1 1 auto; }

/* Burbuja de texto de héroe (typewriter) */
[data-sc3d-cb] .hero-bubble{
  position: relative; width: 100%;
  min-height: 120px; /* Altura mínima para mantener diseño */
  max-height: 400px; /* Altura máxima para evitar desbordamiento */
  overflow-y: auto; /* Scroll si el contenido es muy largo */
  font: 500 14px/1.4 "Hack","Fira Code","Consolas","Menlo",monospace;
  color: var(--crt-green,#33ff66); background: var(--crt-bg,#060d06);
  border: 2px solid var(--crt-border,#103d1f); border-radius: 8px;
  padding: 14px 16px; text-shadow: 0 0 6px rgba(51,255,102,.35);
  box-shadow: inset 0 0 0 1px rgba(51,255,102,.15), var(--crt-shadow-x, 0px) var(--crt-shadow-y, 8px) var(--crt-shadow-blur, 22px) var(--crt-shadow-spread, 0px) var(--crt-shadow-color, rgba(0,0,0,.28));
  white-space: pre-wrap; word-break: break-word;
  /* Scroll personalizado para mantener el tema retro */
  scrollbar-width: thin;
  scrollbar-color: var(--crt-green,#33ff66) var(--crt-bg,#060d06);
}
[data-sc3d-cb] .hero-bubble::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(51,255,102,.06) 0px, rgba(51,255,102,.06) 1px, transparent 2px);
  mix-blend-mode: screen; opacity:.25;
}
[data-sc3d-cb] .hero-bubble::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 50% 0%, rgba(51,255,102,.15), transparent 40%);
  opacity:.2;
}
[data-sc3d-cb] .hero-bubble.typing::after{
  content:'▌'; display:inline-block; margin-left:2px; color: var(--crt-caret-color, #7dffa4); animation: cb-caret 1.2s steps(1,end) infinite;
}

/* Scrollbar personalizado para la burbuja de héroe (WebKit) */
[data-sc3d-cb] .hero-bubble::-webkit-scrollbar {
  width: 8px;
}
[data-sc3d-cb] .hero-bubble::-webkit-scrollbar-track {
  background: var(--crt-bg,#060d06);
  border-radius: 4px;
}
[data-sc3d-cb] .hero-bubble::-webkit-scrollbar-thumb {
  background: var(--crt-green,#33ff66);
  border-radius: 4px;
  opacity: 0.6;
}
[data-sc3d-cb] .hero-bubble::-webkit-scrollbar-thumb:hover {
  background: var(--crt-caret-color, #7dffa4);
  opacity: 0.8;
}

/* Consent box pegado abajo dentro del stage */
[data-sc3d-cb] .sc3d-cb-consent-stage .consent-box{ position:absolute; left:12px; right:12px; bottom:12px; margin:0; }

[data-sc3d-cb] .consent-box{
  margin: 12px; padding: 14px; border-radius: var(--cb-radius);
  background: var(--cb-elev); color: var(--cb-text);
  border: 1px solid var(--cb-border); box-shadow: var(--cb-shadow);
}
[data-sc3d-cb] .consent-box p{ margin: 0 0 10px 0; font-size: 13px; color: var(--cb-muted); }
[data-sc3d-cb] .consent-box a{ color: var(--cb-primary, var(--cb-accent)); text-decoration: underline; }
[data-sc3d-cb] .consent-box .consent-buttons {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}

[data-sc3d-cb] .consent-box button{
  padding: 10px 14px; border-radius: 10px;
  background: var(--cb-button-bg, var(--cb-primary)); color: var(--cb-button-text, #fff);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cb-button-bg, var(--cb-primary)) 35%, transparent);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 120px;
}

[data-sc3d-cb] .consent-box button:hover{
  filter: brightness(0.95);
  transform: translateY(-1px);
}

[data-sc3d-cb] .consent-box button.btn-secondary {
  background: var(--cb-surface);
  color: var(--cb-muted);
  border: 1px solid var(--cb-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

[data-sc3d-cb] .consent-box button.btn-secondary:hover {
  background: var(--cb-border);
  color: var(--cb-text);
}


/* Responsive design para móviles */
@media (max-width: 768px) {
  [data-sc3d-cb] .sc3d-cb-consent-stage .consent-hero {
    width: min(95%, 400px);
    min-height: 200px;
    max-height: calc(100vh - 150px);
    padding: 8px;
    gap: 8px;
  }

  [data-sc3d-cb] .hero-bubble {
    min-height: 100px;
    max-height: 300px;
    font-size: 13px;
    padding: 12px 14px;
  }

  [data-sc3d-cb] .bot-orb {
    width: 72px;
    height: 72px;
  }

  [data-sc3d-cb] .bot-orb img {
    width: 54px;
    height: 54px;
  }

  [data-sc3d-cb] .bot-orb .emoji {
    font-size: 32px;
  }

  [data-sc3d-cb] .consent-box {
    padding: 12px;
    margin: 8px;
  }

  [data-sc3d-cb] .sc3d-cb-consent-stage .consent-box {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  /* Botones de consentimiento en móvil */
  [data-sc3d-cb] .consent-box .consent-buttons {
    flex-direction: column;
    gap: 8px;
  }

  [data-sc3d-cb] .consent-box button {
    min-width: 100%;
    padding: 12px 16px;
    font-size: 16px; /* Mejor para touch en móvil */
  }
}

/* Dark mode tuning for bot orb */
@media (prefers-color-scheme: dark) {
  [data-sc3d-cb] .bot-orb{
    background: radial-gradient(circle at 30% 30%, rgba(var(--sc3d-cb-primary-rgb,20,124,186),.35), transparent 60%), #0f0f11;
    box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 var(--orb-glow-size, 6px) color-mix(in srgb, var(--orb-glow-color, var(--cb-accent)) 25%, transparent);
  }
  [data-sc3d-cb] .bot-orb::before{ opacity:.8; filter: blur(8px); }
}


/* Consent Intro (bot typing) */
[data-sc3d-cb] .consent-box .consent-intro{ margin: 6px 0 12px 0; }
[data-sc3d-cb] .consent-box .consent-intro .sc3d-cb-message{ margin:0 0 8px 0; }
[data-sc3d-cb] .consent-box .consent-intro .avatar{ animation: cb-bot-bob 3s ease-in-out infinite; }
@keyframes cb-bot-bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-2px);} }

/* Chips (sugerencias) */
[data-sc3d-cb] #sc3d-cb-sugg{
  padding: 10px 12px 6px; display:flex; flex-wrap:wrap; gap:8px;
}

/* 🎠 SCROLL AUTOMÁTICO UNIFICADO PARA MÓVIL */
@media (max-width: 768px) {
  [data-sc3d-cb] #sc3d-cb-sugg {
    /* Contenedor igual que desktop para scroll automático */
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    gap: 12px !important;
    padding: 10px 12px 6px !important;
    position: relative !important;

    /* Ocultar scrollbar completamente */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */

    /* Sin transiciones para evitar conflictos con scroll automático */
    transition: none !important;
  }

  /* Ocultar scrollbar en WebKit (Chrome, Safari) */
  [data-sc3d-cb] #sc3d-cb-sugg::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Chips individuales - igual que desktop */
  [data-sc3d-cb] #sc3d-cb-sugg .chip {
    /* Tamaño flexible como desktop para mejor scroll automático */
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-width: fit-content !important;

    /* Mantener estilo visual */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 250px !important; /* Límite máximo para móviles */

    /* Efecto touch en móvil */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  /* Efecto peek - mostrar parcialmente el siguiente chip
  [data-sc3d-cb] #sc3d-cb-sugg::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 20px !important;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8)) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
*/
  /* Contenedor con posición relativa para el efecto peek */
  [data-sc3d-cb] #sc3d-cb-sugg {
    position: relative !important;
  }

  /* Efecto touch en móvil */
  [data-sc3d-cb] #sc3d-cb-sugg .chip:active {
    transform: scale(0.95) !important;
  }
}

/* Contenedor de indicadores de navegación - OCULTO para scroll automático */
[data-sc3d-cb] .sc3d-cb-carousel-indicators {
  display: none !important; /* Completamente oculto - usamos scroll automático */
}

/* ===============================================
 * SCROLL AUTOMÁTICO PARA SUGERENCIAS
 * =============================================== */

/* Scroll automático en desktop también */
@media (min-width: 769px) {
  [data-sc3d-cb] #sc3d-cb-sugg {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    gap: 12px !important;
    padding: 10px 12px 6px !important;
    position: relative !important;
    /* Ocultar scrollbar completamente */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
  }

  /* Ocultar scrollbar en WebKit (Chrome, Safari, Edge) */
  [data-sc3d-cb] #sc3d-cb-sugg::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Chips en desktop con scroll automático */
  [data-sc3d-cb] #sc3d-cb-sugg .chip {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-width: fit-content !important;
  }
}
/*
/* Efectos de fade para scroll infinito
[data-sc3d-cb] #sc3d-cb-sugg::before,
[data-sc3d-cb] #sc3d-cb-sugg::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
  z-index: 2;
}
*/
[data-sc3d-cb] #sc3d-cb-sugg::before {
  left: 0;
  background: linear-gradient(to right, var(--cb-surface), transparent);
}
/*
[data-sc3d-cb] #sc3d-cb-sugg::after {
  right: 0;
  background: linear-gradient(to left, var(--cb-surface), transparent);
}
*/
/* Transiciones suaves para el scroll */
[data-sc3d-cb] #sc3d-cb-sugg {
  transition: none !important; /* Evitar conflictos con scroll automático */
}

/* ===============================================
 * ANIMACIÓN DE CARGA PARA SUGERENCIAS
 * =============================================== */

/* Contenedor de carga de sugerencias */
[data-sc3d-cb] .sc3d-cb-suggestions-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  gap: 8px;
  color: var(--cb-muted);
  font-size: 14px;
}

/* Spinner de carga galáctico sutil */
[data-sc3d-cb] .sc3d-cb-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--cb-border) 80%, transparent 20%);
  border-top: 2px solid color-mix(in srgb, var(--galaxy-c1) 60%, var(--cb-border) 40%);
  border-right: 2px solid color-mix(in srgb, var(--galaxy-c3) 50%, var(--cb-border) 50%);
  border-radius: 50%;
  animation: cb-spin 1.5s linear infinite;
}

@keyframes cb-spin {
  0% {
    transform: rotate(0deg);
    filter: drop-shadow(0 0 1px rgba(var(--galaxy-c1-rgb, 138, 43, 226), 0.3));
  }
  50% {
    transform: rotate(180deg);
    filter: drop-shadow(0 0 2px rgba(var(--galaxy-c3-rgb, 75, 0, 130), 0.2));
  }
  100% {
    transform: rotate(360deg);
    filter: drop-shadow(0 0 1px rgba(var(--galaxy-c1-rgb, 138, 43, 226), 0.3));
  }
}

/* Skeleton loading para sugerencias */
[data-sc3d-cb] .sc3d-cb-suggestions-skeleton {
  display: flex;
  gap: 12px;
  padding: 10px 12px 6px;
  overflow: hidden;
}

[data-sc3d-cb] .sc3d-cb-suggestion-skeleton {
  height: 36px;
  border-radius: 18px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--galaxy-c1) 30%, var(--cb-surface) 70%) 0%,
    color-mix(in srgb, var(--galaxy-c3) 25%, var(--cb-surface) 75%) 25%,
    color-mix(in srgb, var(--galaxy-c4) 30%, var(--cb-surface) 70%) 50%,
    color-mix(in srgb, var(--galaxy-c2) 25%, var(--cb-surface) 75%) 75%,
    color-mix(in srgb, var(--galaxy-c1) 30%, var(--cb-surface) 70%) 100%
  );
  background-size: 200% 100%;
  animation: cb-skeleton-shimmer 2s ease-in-out infinite;
  flex-shrink: 0;
  opacity: 0.6;
  box-shadow:
    0 0 5px rgba(var(--galaxy-c1-rgb, 138, 43, 226), 0.15),
    0 0 10px rgba(var(--galaxy-c3-rgb, 75, 0, 130), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

/* Efecto de brillo sutil */
[data-sc3d-cb] .sc3d-cb-suggestion-skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  animation: cb-skeleton-shine 3s ease-in-out infinite;
}

@keyframes cb-skeleton-shine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* ===============================================
 * ANIMACIÓN DE CARGA PARA FOLLOWUPS
 * =============================================== */

/* Contenedor de carga de followups */
[data-sc3d-cb] .sc3d-cb-followups-loading {
  margin-top: 12px;
  padding: 0;
}

[data-sc3d-cb] .sc3d-cb-followups-skeleton {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Skeleton loading para followups individuales */
[data-sc3d-cb] .sc3d-cb-followup-skeleton {
  height: 32px;
  border-radius: 16px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--galaxy-c1) 25%, var(--cb-surface) 75%) 0%,
    color-mix(in srgb, var(--galaxy-c3) 20%, var(--cb-surface) 80%) 25%,
    color-mix(in srgb, var(--galaxy-c4) 25%, var(--cb-surface) 75%) 50%,
    color-mix(in srgb, var(--galaxy-c2) 20%, var(--cb-surface) 80%) 75%,
    color-mix(in srgb, var(--galaxy-c1) 25%, var(--cb-surface) 75%) 100%
  );
  background-size: 200% 100%;
  animation: cb-followup-shimmer 2.5s ease-in-out infinite;
  flex-shrink: 0;
  opacity: 0.5;
  box-shadow:
    0 0 3px rgba(var(--galaxy-c1-rgb, 138, 43, 226), 0.1),
    0 0 6px rgba(var(--galaxy-c3-rgb, 75, 0, 130), 0.08);
  position: relative;
  overflow: hidden;
}

[data-sc3d-cb] .sc3d-cb-followup-skeleton:nth-child(1) { width: 200px; animation-delay: 0s; }
[data-sc3d-cb] .sc3d-cb-followup-skeleton:nth-child(2) { width: 160px; animation-delay: 0.3s; }
[data-sc3d-cb] .sc3d-cb-followup-skeleton:nth-child(3) { width: 180px; animation-delay: 0.6s; }

/* Efecto de brillo para followups */
[data-sc3d-cb] .sc3d-cb-followup-skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: cb-followup-shine 3.5s ease-in-out infinite;
}

@keyframes cb-followup-shimmer {
  0% {
    background-position: -200% 0;
    filter: hue-rotate(0deg) brightness(1);
  }
  33% {
    filter: hue-rotate(30deg) brightness(1.03);
  }
  66% {
    background-position: 0% 0;
    filter: hue-rotate(60deg) brightness(1.06);
  }
  100% {
    background-position: 200% 0;
    filter: hue-rotate(0deg) brightness(1);
  }
}

@keyframes cb-followup-shine {
  0% { left: -100%; }
  60% { left: 100%; }
  100% { left: 100%; }
}

/* Responsive para móviles */
@media (max-width: 768px) {
  [data-sc3d-cb] .sc3d-cb-followups-skeleton {
    gap: 6px;
  }

  [data-sc3d-cb] .sc3d-cb-followup-skeleton {
    height: 28px;
    border-radius: 14px;
  }

  [data-sc3d-cb] .sc3d-cb-followup-skeleton:nth-child(1) { width: 180px; }
  [data-sc3d-cb] .sc3d-cb-followup-skeleton:nth-child(2) { width: 140px; }
  [data-sc3d-cb] .sc3d-cb-followup-skeleton:nth-child(3) { width: 160px; }
}

[data-sc3d-cb] .sc3d-cb-suggestion-skeleton:nth-child(1) { width: 180px; }
[data-sc3d-cb] .sc3d-cb-suggestion-skeleton:nth-child(2) { width: 140px; }
[data-sc3d-cb] .sc3d-cb-suggestion-skeleton:nth-child(3) { width: 200px; }
[data-sc3d-cb] .sc3d-cb-suggestion-skeleton:nth-child(4) { width: 160px; }
[data-sc3d-cb] .sc3d-cb-suggestion-skeleton:nth-child(5) { width: 190px; }

@keyframes cb-skeleton-shimmer {
  0% {
    background-position: -200% 0;
    filter: hue-rotate(0deg) brightness(1);
  }
  25% {
    filter: hue-rotate(45deg) brightness(1.05);
  }
  50% {
    background-position: 0% 0;
    filter: hue-rotate(90deg) brightness(1.1);
  }
  75% {
    filter: hue-rotate(45deg) brightness(1.05);
  }
  100% {
    background-position: 200% 0;
    filter: hue-rotate(0deg) brightness(1);
  }
}

/* Responsive para móviles */
@media (max-width: 768px) {
  [data-sc3d-cb] .sc3d-cb-suggestions-skeleton {
    gap: 8px;
    padding: 8px 12px 4px;
  }

  [data-sc3d-cb] .sc3d-cb-suggestion-skeleton {
    height: 32px;
    border-radius: 16px;
  }

  [data-sc3d-cb] .sc3d-cb-suggestion-skeleton:nth-child(1) { width: 160px; }
  [data-sc3d-cb] .sc3d-cb-suggestion-skeleton:nth-child(2) { width: 120px; }
  [data-sc3d-cb] .sc3d-cb-suggestion-skeleton:nth-child(3) { width: 180px; }
}

@media (max-width: 768px) {
  [data-sc3d-cb] .sc3d-cb-carousel-indicators {
    display: none !important; /* Oculto también en móviles - scroll automático unificado */
  }

  /* Puntos indicadores */
  [data-sc3d-cb] .sc3d-cb-carousel-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: rgba(0, 123, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
  }

  /* Punto activo */
  [data-sc3d-cb] .sc3d-cb-carousel-dot.active {
    background: #007bff !important;
    transform: scale(1.2) !important;
  }

  /* Efecto hover en puntos */
  [data-sc3d-cb] .sc3d-cb-carousel-dot:hover {
    background: rgba(0, 123, 255, 0.6) !important;
    transform: scale(1.1) !important;
  }
}
[data-sc3d-cb] .chip{
  padding: 9px 12px; border-radius: 999px; font-size: 14px; line-height:1;
  background: var(--cb-elev); color: var(--cb-text); border: 1px solid var(--cb-border);
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
  transition: transform .12s ease, border-color var(--cb-dur) ease, background var(--cb-dur) ease;
}
[data-sc3d-cb] .chip:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--cb-accent) 35%, var(--cb-border)); background: #f8fffe; }
[data-sc3d-cb] .chip:focus-visible{ outline:0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-accent) 25%, transparent); }
/* Animaciones de chips al usar/añadir */
[data-sc3d-cb] .chip.removing{ opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
[data-sc3d-cb] .chip.new{ animation: cb-chip-in .16s ease both; }
@keyframes cb-chip-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } }


/* Followups (preguntas relacionadas) */
[data-sc3d-cb] .sc3d-cb-followups{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 0; }
[data-sc3d-cb] .sc3d-cb-followups .chip.followup{
  opacity:1; transform:none; padding:.4rem .65rem; border-radius:999px;
  border:1px solid var(--cb-accent); background: color-mix(in srgb, var(--cb-accent) 10%, transparent);
  color: color-mix(in srgb, var(--cb-accent) 80%, var(--cb-text)); font-weight:600; font-size:12px;
  transition: opacity var(--cb-dur) ease, transform var(--cb-dur) ease, box-shadow var(--cb-dur) ease, background var(--cb-dur) ease;
}
[data-sc3d-cb] .sc3d-cb-followups .chip.followup.new{ animation: cb-chip-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both; will-change: opacity, transform; }
[data-sc3d-cb] .sc3d-cb-followups .chip.followup:hover{ box-shadow:0 1px 0 rgba(2,6,23,.08), 0 0 0 3px color-mix(in srgb, var(--cb-accent) 20%, transparent) inset; }
[data-sc3d-cb] .sc3d-cb-followups .chip.followup:focus-visible{ outline:2px solid var(--cb-accent); outline-offset:2px; }


@media (prefers-reduced-motion: reduce) {
  [data-sc3d-cb] .sc3d-cb-followups .chip.followup.new {
    animation-duration: 100ms;
    animation-timing-function: ease;
  }
}


/* Mensajes */
[data-sc3d-cb] .sc3d-cb-messages{
  flex: 1; padding: 12px; overflow-y: auto;
  background: var(--cb-surface);
  scrollbar-width: thin;
  scroll-behavior: smooth;
  /* Fixed dimensions to prevent growing during typing */
  /*height: 400px;
  /*min-height: 200px;
  /*max-height: 500px;*/
}
[data-sc3d-cb] .sc3d-cb-messages::-webkit-scrollbar{ width: 10px; }
[data-sc3d-cb] .sc3d-cb-messages::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--cb-accent) 25%, #cbd5e1);
  border-radius: 999px;
}
[data-sc3d-cb] .sc3d-cb-message{ animation: cb-msg-in .18s ease both; }
@keyframes cb-msg-in{ from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:translateY(0);} }
[data-sc3d-cb] .sc3d-cb-message{
  margin: 10px 0; padding: 0; background: transparent; border: 0; box-shadow: none;
  display:flex; gap:10px; align-items:flex-start;
}
[data-sc3d-cb] .sc3d-cb-message .content{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  max-width: 100%;
  box-sizing: border-box;
}

/* Timestamps */
[data-sc3d-cb] .sc3d-cb-message .timestamp{
  font-size: 11px;
  color: var(--cb-muted);
  opacity: 0.7;
  margin-top: 2px;
  font-weight: 400;
}

/* Badge: Conocimiento del negocio */
[data-sc3d-cb] .biz-badge{
  display:inline-block;
  align-self: flex-start;
  font-size:11px; line-height:1;
  padding:4px 8px; border-radius:999px;
  background: color-mix(in srgb, var(--cb-accent) 10%, #e6f4ea);
  color: #146c43;
  border: 1px solid color-mix(in srgb, var(--cb-accent) 35%, #badbcc);
}
[data-sc3d-cb].theme-dark .biz-badge{
  background: color-mix(in srgb, var(--cb-accent) 20%, #0b1220);
  color: color-mix(in srgb, var(--cb-accent) 85%, #e5e7eb);
  border-color: color-mix(in srgb, var(--cb-accent) 45%, #1f2937);
}

[data-sc3d-cb] .sc3d-cb-message.user .timestamp{
  align-self: flex-end;
  color: rgba(255,255,255,0.8);
}
[data-sc3d-cb] .sc3d-cb-message.user .content{
  align-items:flex-end;
  max-width: 100%;
  box-sizing: border-box;
}

[data-sc3d-cb] .sc3d-cb-message .avatar{
  flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%; background:#eef2f7; color: var(--cb-accent);
  font-size:14px; line-height:1;
}
[data-sc3d-cb] .sc3d-cb-message .text{
  display:inline-block; max-width:85%; padding:14px 16px; border-radius:16px;
  line-height:1.5; font-size:14px;
  background: var(--cb-bot-bg);
  color: var(--cb-bot-text);
  border:1px solid var(--cb-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  position: relative;
}
/*
/* Estilos mejorados para mensajes del bot *//*
[data-sc3d-cb] .sc3d-cb-message.bot .text {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #e1e8ed;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  color: #2c3e50;
  font-weight: 400;
  position: relative;
}
*/
/* Cuando .text contiene solo .vector-loader (thinking), quitar fondo */
[data-sc3d-cb] .sc3d-cb-message.bot .text:has(.vector-loader:only-child) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Efecto de brillo sutil en hover */
[data-sc3d-cb] .sc3d-cb-message.bot .text:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.08);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Estilos para texto formateado en mensajes del bot */
[data-sc3d-cb] .sc3d-cb-message.bot .text h3 {
  color: #007cba;
  font-size: 16px;
  font-weight: 600;
  margin: 12px 0 8px 0;
  border-bottom: 2px solid #e1e8ed;
  padding-bottom: 4px;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text h4 {
  color: #2c3e50;
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 6px 0;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text ul,
[data-sc3d-cb] .sc3d-cb-message.bot .text ol {
  margin: 8px 0;
  padding-left: 20px;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text li {
  margin: 4px 0;
  line-height: 1.4;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text strong {
  color: #00ffd2;
  font-weight:bolder;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text em {
  color: #6c757d;
  font-style: italic;
}

/* Separadores visuales */
[data-sc3d-cb] .sc3d-cb-message.bot .text hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e1e8ed, transparent);
  margin: 12px 0;
}

/* Enlaces dentro de mensajes del bot */
[data-sc3d-cb] .sc3d-cb-message.bot .text a {
  color: #007cba !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(0, 124, 186, 0.3);
}

[data-sc3d-cb] .sc3d-cb-message.bot .text a:hover {
  color: #005a87 !important;
  border-bottom-color: #005a87;
  background-color: rgba(0, 124, 186, 0.05);
}

[data-sc3d-cb] .sc3d-cb-message.bot .text a:visited {
  color: #7b2cbf !important;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text a:active {
  color: #004d6d !important;
}

/* Estilos específicos para información de envío estructurada */
[data-sc3d-cb] .sc3d-cb-message.bot .text .sc3d-shipping-info {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border: 1px solid #d1e7ff;
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text .sc3d-shipping-info h3 {
  color: #007cba;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px 0;
  border-bottom: 2px solid #d1e7ff;
  padding-bottom: 6px;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text .shipping-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text .shipping-pricing {
  background: #e8f5e8;
  border-left: 4px solid #28a745;
  padding: 12px;
  border-radius: 6px;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text .shipping-timing {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 12px;
  border-radius: 6px;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text .shipping-detail {
  background: #f8f9fa;
  border-left: 4px solid #6c757d;
  padding: 12px;
  border-radius: 6px;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text .shipping-note {
  background: #e7f3ff;
  border: 1px solid #b3d9ff;
  border-radius: 8px;
  padding: 10px;
  margin-top: 12px;
  font-style: italic;
  color: #0056b3;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text .sc3d-shipping-fallback {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 14px;
  color: #495057;
}

/* ===== SISTEMA DE INTENCIÓN DE COMPRA ===== */

/* Contenedor principal */
[data-sc3d-cb] .sc3d-cb-message.bot .text .sc3d-purchase-intent {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border: 1px solid #e1e8ff;
  border-radius: 12px;
  padding: 20px;
  margin: 8px 0;
}

[data-sc3d-cb] .sc3d-cb-message.bot .text .sc3d-purchase-intent h3 {
  color: #007cba;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px 0;
  border-bottom: 2px solid #e1e8ff;
  padding-bottom: 6px;
}

/* Sugerencias de productos */
[data-sc3d-cb] .product-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

[data-sc3d-cb] .suggestion-chip {
  background: #ffffff;
  border: 2px solid #007cba;
  color: #007cba;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-sc3d-cb] .suggestion-chip:hover {
  background: #007cba;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 124, 186, 0.2);
}

/* Categorías de especificaciones */
[data-sc3d-cb] .spec-categories {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0;
}

[data-sc3d-cb] .spec-category h4 {
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

[data-sc3d-cb] .spec-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-sc3d-cb] .spec-chip {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #495057;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-sc3d-cb] .spec-chip:hover,
[data-sc3d-cb] .spec-chip.selected {
  background: #28a745;
  border-color: #28a745;
  color: #ffffff;
}

/* Opciones de presupuesto */
[data-sc3d-cb] .budget-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

[data-sc3d-cb] .budget-chip {
  background: #ffffff;
  border: 2px solid #28a745;
  color: #28a745;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

[data-sc3d-cb] .budget-chip:hover {
  background: #28a745;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

/* ============================================
   ESTILOS DE PRODUCTOS ELIMINADOS
   Los estilos de búsqueda ahora están en:
   views/css/front/search-results.css
   ============================================ */

/* Tabla de comparación */
[data-sc3d-cb] .sc3d-comparison {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin: 8px 0;
}

[data-sc3d-cb] .comparison-table {
  overflow-x: auto;
  margin: 20px 0;
}

[data-sc3d-cb] .comparison-table table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

[data-sc3d-cb] .comparison-table th,
[data-sc3d-cb] .comparison-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e1e8ed;
}

[data-sc3d-cb] .comparison-table th {
  background: #f8f9fa;
  color: #2c3e50;
  font-weight: 600;
}

[data-sc3d-cb] .comparison-table tr:hover {
  background: #f8f9fa;
}

/* Sin resultados */
[data-sc3d-cb] .sc3d-no-results {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 12px;
  padding: 20px;
  margin: 8px 0;
  text-align: center;
}

[data-sc3d-cb] .no-results-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

[data-sc3d-cb] .option-btn {
  background: #ffffff;
  border: 2px solid #ffc107;
  color: #856404;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-sc3d-cb] .option-btn:hover {
  background: #ffc107;
  color: #ffffff;
}

/* Refinamiento */
[data-sc3d-cb] .sc3d-refinement {
  background: #e7f3ff;
  border: 1px solid #b3d9ff;
  border-radius: 12px;
  padding: 20px;
  margin: 8px 0;
}

[data-sc3d-cb] .refinement-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

[data-sc3d-cb] .refine-btn {
  background: #ffffff;
  border: 2px solid #007cba;
  color: #007cba;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-sc3d-cb] .refine-btn:hover {
  background: #007cba;
  color: #ffffff;
}

/* Texto de ayuda */
[data-sc3d-cb] .help-text {
  margin-top: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  color: #6c757d;
  font-size: 13px;
  text-align: center;
}

/* Respuesta genérica */
[data-sc3d-cb] .sc3d-generic {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border: 1px solid #e1e8ff;
  border-radius: 12px;
  padding: 20px;
  margin: 8px 0;
  text-align: center;
}

[data-sc3d-cb] .generic-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

/* Error */
[data-sc3d-cb] .sc3d-error {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 12px;
  padding: 20px;
  margin: 8px 0;
  text-align: center;
  color: #721c24;
}

[data-sc3d-cb] .retry-btn {
  background: #dc3545;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.2s ease;
}

[data-sc3d-cb] .retry-btn:hover {
  background: #c82333;
}

/* Responsive */
@media (max-width: 768px) {
  [data-sc3d-cb] .results-actions {
    flex-direction: column;
  }

  [data-sc3d-cb] .product-footer {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  [data-sc3d-cb] .product-actions {
    justify-content: center;
  }
}
/*[data-sc3d-cb] .sc3d-cb-message.user{ flex-direction:row-reverse; }*/
[data-sc3d-cb] .sc3d-cb-message.user .avatar{ background: var(--cb-user-bg); color: var(--cb-user-text); }
[data-sc3d-cb] .sc3d-cb-message.user .text{
  background: var(--cb-user-bg);
  color: var(--cb-user-text);
  border-color: var(--cb-user-bg);
}
/* Pensando: contenedor sin fondo */
[data-sc3d-cb] .sc3d-cb-message.thinking .text {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
}

/* Loader básico: tres puntos - CLASE ÚNICA PARA EVITAR CONFLICTOS CON EL TEMA */
[data-sc3d-cb] .sc3d-cb-message .sc3d-cb-thinking-dots {
  display: inline-flex !important;
  gap: 4px !important;
  margin-left: 8px !important;
  transform: translateY(6px) !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  vertical-align: baseline !important;
  /* Reset completo para evitar herencia del tema */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

[data-sc3d-cb] .sc3d-cb-message .sc3d-cb-thinking-dots i {
  width: 6px !important;
  height: 6px !important;
  background: var(--cb-accent) !important;
  border-radius: 50% !important;
  opacity: 0.45 !important;
  animation-name: sc3d-cb-dots-bounce !important;
  animation-duration: 1s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  animation-play-state: running !important;
  display: block !important;
  flex-shrink: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 0 !important;
  line-height: 1 !important;
  /* Reset adicional */
  text-indent: 0 !important;
  text-align: left !important;
  vertical-align: baseline !important;
  position: relative !important;
  float: none !important;
  clear: none !important;
  /* Forzar que la animación se ejecute */
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  -webkit-animation-name: sc3d-cb-dots-bounce !important;
  -webkit-animation-duration: 1s !important;
  -webkit-animation-timing-function: ease-in-out !important;
  -webkit-animation-iteration-count: infinite !important;
}

[data-sc3d-cb] .sc3d-cb-message .sc3d-cb-thinking-dots i:nth-child(2) {
  animation-delay: 0.15s !important;
}

[data-sc3d-cb] .sc3d-cb-message .sc3d-cb-thinking-dots i:nth-child(3) {
  animation-delay: 0.3s !important;
}

/* Animación de rebote para los puntos - con prefijos para compatibilidad */
@keyframes sc3d-cb-dots-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    opacity: 0.9;
  }
}

@-webkit-keyframes sc3d-cb-dots-bounce {
  0%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    opacity: 0.9;
  }
}

/* Protección extra para móvil - Forzar visualización y animación del loader */
@media (max-width: 768px) {
  [data-sc3d-cb] .sc3d-cb-message .sc3d-cb-thinking-dots {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  [data-sc3d-cb] .sc3d-cb-message .sc3d-cb-thinking-dots i {
    display: block !important;
    visibility: visible !important;
    opacity: 0.45 !important;
    animation-name: sc3d-cb-dots-bounce !important;
    animation-duration: 1s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;
    -webkit-animation-name: sc3d-cb-dots-bounce !important;
    -webkit-animation-duration: 1s !important;
    -webkit-animation-timing-function: ease-in-out !important;
    -webkit-animation-iteration-count: infinite !important;
    will-change: transform, opacity !important;
  }
}

/* Rueda dentada SVG para Vector Store */
[data-sc3d-cb] .sc3d-cb-message .vector-loader {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 0 !important;
  background: none !important; /* NO heredar background de .text */
  padding: 0 !important; /* NO heredar padding de .text */
  border-radius: 0 !important; /* NO heredar border-radius de .text */
  border: none !important; /* NO heredar border de .text */
  box-shadow: none !important; /* NO heredar box-shadow de .text */
  position: static !important; /* NO heredar position de .text */
}

/* Regla más específica para cuando está dentro de .text */
[data-sc3d-cb] .sc3d-cb-message.bot .text .vector-loader {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Respaldo: cuando el mensaje tiene clase thinking, quitar fondo de .text */
[data-sc3d-cb] .sc3d-cb-message.bot.thinking .text {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
}

[data-sc3d-cb] .sc3d-cb-message .vector-loader .gear-svg {
  width: 24px;
  height: 24px;
  animation: sc3d-gear-spin 2s linear infinite;
  flex-shrink: 0;
}

[data-sc3d-cb] .sc3d-cb-message .vector-loader .gear-svg path {
  fill: #969696;
}

@keyframes sc3d-gear-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

[data-sc3d-cb] .sc3d-cb-message .vector-loader .message {
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  animation: sc3d-fade-pulse 2s ease-in-out infinite;
}

@keyframes sc3d-fade-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Input (persistente + accesible) */
[data-sc3d-cb] .sc3d-cb-input{
  display:flex; gap: 8px; align-items:center;
  padding: 10px; border-top: 1px solid var(--cb-border);
  background: var(--cb-input-bg);
}
[data-sc3d-cb] .sc3d-cb-input input{
  flex:1; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--cb-input-border); outline: none;
  background: var(--cb-input-bg);
  color: var(--cb-input-text);
transition: border-color var(--cb-dur) ease, box-shadow var(--cb-dur) ease;
}
[data-sc3d-cb] .sc3d-cb-input input::placeholder{ color: var(--cb-muted); }
[data-sc3d-cb] .sc3d-cb-input input:focus{
  border-color: var(--cb-primary, var(--cb-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 20%, transparent);
}
/* Efecto de tipeo para mensajes del bot */
[data-sc3d-cb] .sc3d-cb-message.bot.typing .text::after{
  content:'▍'; display:inline-block; margin-left:2px; opacity:.6;
  animation: cb-caret 1s steps(1) infinite;
  display: none !important;
}
@keyframes cb-caret{ 0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;} }

[data-sc3d-cb] .sc3d-cb-input button{
  padding: 12px 16px; border-radius: 12px;
  color: var(--cb-button-text);
  background: var(--cb-button-bg);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cb-button-bg) 35%, transparent);
  transition: background var(--cb-dur) ease, transform .12s ease, box-shadow var(--cb-dur) ease;
}
/*
[data-sc3d-cb] .sc3d-cb-input button:hover{
  background: color-mix(in srgb, var(--cb-button-bg) 85%, #000);
  transform: translateY(-1px);
}
[data-sc3d-cb] .sc3d-cb-input button:active{
  background: color-mix(in srgb, var(--cb-button-bg) 75%, #000);
  transform: translateY(0);
}
[data-sc3d-cb] .sc3d-cb-input button:focus-visible{
  outline:0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-button-bg) 25%, transparent);
}

*/
/* Input mic/send icon inside the input */
[data-sc3d-cb] .sc3d-cb-input{ position: relative; }
[data-sc3d-cb] .sc3d-cb-input input{ padding-right: 48px; }
[data-sc3d-cb] .sc3d-cb-input .icon-btn{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; padding: 0;
  background: transparent !important; color: var(--cb-muted);
  box-shadow: none !important; cursor: pointer;
  z-index: 3; pointer-events: auto;
}

 /*[data-sc3d-cb] .sc3d-cb-input .icon-btn:hover{ color: var(--cb-input-text); }*/
[data-sc3d-cb] .sc3d-cb-input .icon-btn.send{ display: none; }
[data-sc3d-cb] .sc3d-cb-input.mode-send .icon-btn.send{ display: flex; }
[data-sc3d-cb] .sc3d-cb-input.mode-send .icon-btn.mic{ display: none; }
[data-sc3d-cb] .sc3d-cb-input.mode-mic .icon-btn.mic{ display: flex; }

/* Botón de adjuntar - posicionado dentro del input wrapper */
[data-sc3d-cb] .sc3d-cb-input .icon-btn.attach{
  /*position: relative !important;*/
  right: 50px !important;
  top: auto !important;
  transform: none !important;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent !important;
  color: var(--cb-muted);
  box-shadow: none !important;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
  margin: 0 4px;
}
/*
[data-sc3d-cb] .sc3d-cb-input .icon-btn.attach:hover{
  color: var(--cb-input-text);
}
  */
/* Loading state styles */
[data-sc3d-cb] .sc3d-cb-input.mode-loading .icon-btn.mic{
  display: flex;
  opacity: 0.6;
  animation: pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}
[data-sc3d-cb] .sc3d-cb-input.mode-loading .icon-btn.send{ display: none; }
/* Recording state styles */
[data-sc3d-cb] .sc3d-cb-input.recording .icon-btn.mic{ color: var(--cb-primary, var(--cb-accent)); }

/* Pulse animation for loading state */
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ===== Responsive ===== */
@media (max-width: 768px){
  [data-sc3d-cb] .sc3d-cb-panel{
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    border: none;
  }
}

@media (max-width: 768px) {

  [data-sc3d-cb] .sc3d-cb-panel{
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100vw; height: 100dvh; max-height: 100svh;
    border-radius: 0; border-width: 0;
  }
  [data-sc3d-cb] .sc3d-cb-header{ padding: 14px; }
  [data-sc3d-cb] .sc3d-cb-input{ padding: 12px; }
}

/* ===== Dark mode (auto) ===== */
@media (prefers-color-scheme: dark){
  [data-sc3d-cb]{
    --cb-bg:      #0b1220;
    --cb-surface: #0d1526;
    --cb-elev:    #0f172ab3;
    --cb-text:    #e5e7eb;
    --cb-muted:   #9aa0aa;
    --cb-border:  #1f2937;
  }
  [data-sc3d-cb] .sc3d-cb-header{ background: linear-gradient(180deg, color-mix(in srgb, var(--cb-accent) 8%, #0b1220), #0b1220); }
  [data-sc3d-cb] .sc3d-cb-message .text{ background:#0f172a; border-color: #1f2937; }
  [data-sc3d-cb] .sc3d-cb-message.user .text{ background: color-mix(in srgb, var(--cb-accent) 14%, #0f172a); border-color: color-mix(in srgb, var(--cb-accent) 40%, #1f2937); }
  [data-sc3d-cb] .sc3d-cb-message .avatar{ background:#12213a; color: var(--cb-accent); }

/* Toast interno para avisos (no en el footer) */
[data-sc3d-cb] .sc3d-cb-toast{
  position: absolute;
  left: 12px; right: 12px; bottom: 80px;
  background: color-mix(in srgb, #111 6%, #fff);
  color: #111;
  border: 1px solid #e5e7eb;
  border-radius: 10px; padding: 10px 12px;
  font-size: 13px; line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
[data-sc3d-cb].theme-dark .sc3d-cb-toast{
  background: #0f172a; color: #e5e7eb; border-color: #1f2937;
}
[data-sc3d-cb] .sc3d-cb-toast.show{ opacity: 1; transform: translateY(0); }

  [data-sc3d-cb] .sc3d-cb-input{ background: #0f172a; border-top: 1px solid #1f2937; }
  [data-sc3d-cb] .sc3d-cb-input input{ background:#0b1220; border-color:#1f2937; color:#e5e7eb; }
}

/* ===== Motion seguro ===== */
@media (prefers-reduced-motion: reduce) {
  [data-sc3d-cb] .sc3d-cb-panel,
  [data-sc3d-cb] .chip,
  [data-sc3d-cb] .sc3d-cb-message,
  [data-sc3d-cb] .sc3d-cb-input button {
    transition: none !important;
    animation: none !important;
  }
}
@keyframes cb-zoom-in{
  from{ opacity: 0; transform: translateY(8px) scale(.995); }
  to{   opacity: 1; transform: translateY(0) scale(1); }
}

/* Simple fade animations */
@keyframes cb-fade-in{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@keyframes cb-fade-out{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}

/* ===============================================
 * HUMAN CONTACT INTERFACE (Card Style)
 * =============================================== */

/* Mensaje contenedor de la tarjeta de contacto */
[data-sc3d-cb] .sc3d-cb-message--contact-card .content {
  width: 100%;
  max-width: 100%;
}

/* Tarjeta de contacto principal */
[data-sc3d-cb] .sc3d-contact-card {
  background: var(--cb-elev);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius, 18px);
  padding: 1.25rem; /* 20px */
  box-shadow: var(--cb-shadow);
  width: 100%;
  animation: cb-msg-in 0.2s ease-out;
}

/* Cabecera de la tarjeta */
[data-sc3d-cb] .sc3d-contact-card__header {
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  color: var(--cb-text);
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  margin-bottom: 0.75rem; /* 12px */
}

/* Cuerpo de texto de la tarjeta */
[data-sc3d-cb] .sc3d-contact-card__body {
  font-size: 0.875rem; /* 14px */
  color: var(--cb-muted);
  margin: 0 0 1.25rem 0; /* 20px */
  line-height: 1.5;
}

/* Contenedor de acciones/botones */
[data-sc3d-cb] .sc3d-contact-card__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem; /* 12px */
}

/* Botones individuales */
[data-sc3d-cb] .sc3d-contact-card__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* 8px */
  padding: 0.75rem 1rem; /* 12px 16px */
  border-radius: var(--cb-radius-sm, 12px);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

[data-sc3d-cb] .sc3d-contact-card__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Estilos específicos por tipo de botón */
[data-sc3d-cb] .sc3d-contact-card__button.phone {
  background-color: #ecfdf5; /* green-50 */
  border-color: #a7f3d0; /* green-200 */
  color: #059669; /* green-600 */
}
[data-sc3d-cb] .sc3d-contact-card__button.phone:hover {
  background-color: #d1fae5; /* green-100 */
  border-color: #6ee7b7; /* green-300 */
  color: #047857; /* green-700 */
}

[data-sc3d-cb] .sc3d-contact-card__button.whatsapp {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #16a34a; /* green-600 */
}
[data-sc3d-cb] .sc3d-contact-card__button.whatsapp:hover {
  background-color: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

[data-sc3d-cb] .sc3d-contact-card__button.email {
  background-color: #eff6ff; /* blue-50 */
  border-color: #bfdbfe; /* blue-200 */
  color: #2563eb; /* blue-600 */
}
[data-sc3d-cb] .sc3d-contact-card__button.email:hover {
  background-color: #dbeafe; /* blue-100 */
  border-color: #93c5fd; /* blue-300 */
  color: #1d4ed8; /* blue-700 */
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  [data-sc3d-cb] .sc3d-contact-card__button.phone {
    background-color: #064e3b; /* green-900 */
    border-color: #059669; /* green-600 */
    color: #a7f3d0; /* green-200 */
  }
  [data-sc3d-cb] .sc3d-contact-card__button.phone:hover {
    background-color: #047857; /* green-700 */
  }

  [data-sc3d-cb] .sc3d-contact-card__button.whatsapp {
    background-color: #14532d;
    border-color: #16a34a;
    color: #bbf7d0;
  }
  [data-sc3d-cb] .sc3d-contact-card__button.whatsapp:hover {
    background-color: #166534;
  }

  [data-sc3d-cb] .sc3d-contact-card__button.email {
    background-color: #1e40af; /* blue-800 */
    border-color: #2563eb; /* blue-600 */
    color: #bfdbfe; /* blue-200 */
  }
  [data-sc3d-cb] .sc3d-contact-card__button.email:hover {
    background-color: #1d4ed8; /* blue-700 */
  }
}
/* ===============================================
 * ATTACHMENTS (links, images, videos)
 * =============================================== */
[data-sc3d-cb] .sc3d-cb-attachments{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
}
@media (min-width: 480px){
  [data-sc3d-cb] .sc3d-cb-attachments{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px){
  [data-sc3d-cb] .sc3d-cb-attachments{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

[data-sc3d-cb] .sc3d-cb-attachments a{ color: var(--cb-primary, #0a7abf); text-decoration: none; }
[data-sc3d-cb] .sc3d-cb-attachments a:hover{ text-decoration: underline; }

/* Link cards */
[data-sc3d-cb] .sc3d-link-card{
  display: block; background: #fff; border:1px solid #e5e7eb; border-radius: 10px; padding: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
[data-sc3d-cb] .sc3d-link-card:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cb-primary, #0a7abf) 40%, #e5e7eb);
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
[data-sc3d-cb] .sc3d-link-card .host{ display:block; font-size: 11px; color: #64748b; margin-bottom: 4px; }

/* Image thumbs */
[data-sc3d-cb] .sc3d-img{ display:block; border-radius: 10px; overflow: hidden; border:1px solid #e5e7eb; background:#f8fafc; }
[data-sc3d-cb] .sc3d-img img{ width: 100%; height: 160px; object-fit: cover; display:block; }

/* Video thumbs (click-to-open in new tab) */
[data-sc3d-cb] .sc3d-video{ position: relative; display:block; border-radius:10px; overflow:hidden; border:1px solid #e5e7eb; background:#000; }

/* Configuration error message */
[data-sc3d-cb] .sc3d-config-error {
  background: var(--cb-warning-bg);
  border: 1px solid var(--cb-warning-border);
  border-radius: var(--cb-radius-sm);
  padding: 16px;
  margin: 8px 0;
}

[data-sc3d-cb] .sc3d-config-error h4 {
  color: var(--cb-warning-text);
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}

[data-sc3d-cb] .sc3d-config-error p {
  color: var(--cb-warning-text);
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.4;
}

[data-sc3d-cb] .sc3d-config-error p:last-child {
  margin-bottom: 0;
}

/* Fallback message when AI providers fail */
[data-sc3d-cb] .sc3d-fallback-message {
  background: var(--cb-info-bg);
  border: 1px solid var(--cb-info-border);
  border-radius: var(--cb-radius-sm);
  padding: 16px;
  margin: 8px 0;
}

[data-sc3d-cb] .sc3d-fallback-message p {
  color: var(--cb-info-text);
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.4;
}

[data-sc3d-cb] .sc3d-fallback-message ul {
  color: var(--cb-info-text);
  margin: 8px 0 8px 16px;
  font-size: 13px;
  line-height: 1.4;
  padding-left: 0;
}

[data-sc3d-cb] .sc3d-fallback-message li {
  margin: 4px 0;
  list-style-type: disc;
  margin-left: 16px;
}

[data-sc3d-cb] .sc3d-fallback-message p:last-child {
  margin-bottom: 0;
}
[data-sc3d-cb] .sc3d-video iframe{ width:100%; height: 200px; border:0; display:block; }
[data-sc3d-cb] .sc3d-video::after{
  content:"▶"; position:absolute; inset:auto 0 0 0; margin:auto; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; display:grid; place-items:center; border-radius:50%;
  background: rgba(0,0,0,.55); color:#fff; font-size:18px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
  pointer-events:none;
}

/* ===============================================
 * ESTILOS MEJORADOS PARA PANEL DE CONFIGURACIÓN
 * =============================================== */

/* Headers con iconos SVG */
[data-sc3d-cb] .sc3d-cb-settings-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cb-text);
}

[data-sc3d-cb] .sc3d-cb-settings-header h3 svg {
  color: var(--cb-primary);
}

/* Labels con iconos */
[data-sc3d-cb] .sc3d-cb-setting-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--cb-text);
  margin-bottom: 8px;
}

[data-sc3d-cb] .sc3d-cb-setting-group label svg {
  color: var(--cb-primary);
  flex-shrink: 0;
}

/* Toggle switch mejorado */
[data-sc3d-cb] .sc3d-cb-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-sc3d-cb] .sc3d-cb-voice-enabled {
  display: none;
}

[data-sc3d-cb] .sc3d-cb-toggle-label {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background: var(--cb-border);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

[data-sc3d-cb] .sc3d-cb-toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-sc3d-cb] .sc3d-cb-voice-enabled:checked + .sc3d-cb-toggle-label {
  background: var(--cb-primary);
}

[data-sc3d-cb] .sc3d-cb-voice-enabled:checked + .sc3d-cb-toggle-label .sc3d-cb-toggle-slider {
  transform: translateX(20px);
}

[data-sc3d-cb] .sc3d-cb-toggle-text {
  color: var(--cb-text-secondary);
  font-size: 14px;
}

/* Slider mejorado */
[data-sc3d-cb] .sc3d-cb-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-sc3d-cb] .sc3d-cb-typing-speed {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--cb-border);
  outline: none;
  -webkit-appearance: none;
}

[data-sc3d-cb] .sc3d-cb-typing-speed::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cb-primary);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-sc3d-cb] .sc3d-cb-typing-speed::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cb-primary);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-sc3d-cb] .sc3d-cb-speed-value {
  min-width: 30px;
  text-align: center;
  font-weight: 600;
  color: var(--cb-primary);
  background: var(--cb-bg-secondary);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}

/* Botones mejorados con iconos */
[data-sc3d-cb] .sc3d-cb-clear-all,
[data-sc3d-cb] .sc3d-cb-export-data {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  background: var(--cb-bg);
  color: var(--cb-text);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: center;
}

[data-sc3d-cb] .sc3d-cb-clear-all:hover {
  background: #fee;
  border-color: #ff4444;
  color: #ff4444;
}

[data-sc3d-cb] .sc3d-cb-export-data:hover {
  background: var(--cb-primary-light);
  border-color: var(--cb-primary);
  color: var(--cb-primary);
}

/* Notificaciones */
.sc3d-cb-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 2147483647;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 300px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sc3d-cb-notification-show {
  transform: translateX(0);
  opacity: 1;
}

.sc3d-cb-notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sc3d-cb-notification-success {
  border-left: 4px solid #10b981;
}

.sc3d-cb-notification-success svg {
  color: #10b981;
}

.sc3d-cb-notification-error {
  border-left: 4px solid #ef4444;
}

.sc3d-cb-notification-error svg {
  color: #ef4444;
}

.sc3d-cb-notification-info {
  border-left: 4px solid #3b82f6;
}

.sc3d-cb-notification-info svg {
  color: #3b82f6;
}

.sc3d-cb-notification span {
  color: #374151;
  font-size: 14px;
  line-height: 1.4;
}
/* ==== Borde galáctico IA para #sc3d-cb-input ==== */
@property --galaxy-angle{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

[data-sc3d-cb]{
  --galaxy-radius: 12px;
  --galaxy-width: 2px;
  --galaxy-speed: 6s;          /* velocidad base */
  --galaxy-glow: 16px;

  /* Colores SC3D + acentos IA */
  --galaxy-c1:#41a6a2; /* teal marca */
  --galaxy-c2:#e49d2b; /* ámbar marca */
  --galaxy-c3:#8b5cf6; /* violeta IA */
  --galaxy-c4:#22d3ee; /* cian IA */
  --galaxy-c5:#0ea5a3; /* teal 600 */
}

/* Base: borde animado con conic-gradient */
[data-sc3d-cb] #sc3d-cb-input{
  position: relative;
  z-index: 0;
  border-radius: var(--galaxy-radius);
  border: var(--galaxy-width) solid transparent;
  background:
    linear-gradient(var(--cb-input-bg, #fff), var(--cb-input-bg, #fff)) padding-box,
    conic-gradient(from var(--galaxy-angle),
      var(--galaxy-c1), var(--galaxy-c2), var(--galaxy-c3), var(--galaxy-c4), var(--galaxy-c1)
    ) border-box;
  box-shadow:
    0 0 0 0 rgba(0,0,0,0),
    0 0 calc(var(--galaxy-glow)*.35) rgba(65,166,162,.22);
  transition: box-shadow .25s ease, background .25s ease;
  --galaxy-angle: 0deg;
  animation: sc3d-galaxy-rotate var(--galaxy-speed) linear infinite;
}

/* En foco: más halo y gradiente más vivo */
[data-sc3d-cb] #sc3d-cb-input:focus{
  outline: none;
  background:
    linear-gradient(var(--cb-input-bg, #fff), var(--cb-input-bg, #fff)) padding-box,
    conic-gradient(from var(--galaxy-angle),
      var(--galaxy-c4) 0%,
      var(--galaxy-c3) 20%,
      var(--galaxy-c2) 40%,
      var(--galaxy-c1) 60%,
      var(--galaxy-c5) 80%,
      var(--galaxy-c4) 100%
    ) border-box;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cb-primary, var(--cb-accent,#41a6a2)) 25%, transparent),
    0 0 var(--galaxy-glow) color-mix(in srgb, var(--cb-primary, var(--cb-accent,#41a6a2)) 45%, transparent);
}

/* Halo externo sutil */
[data-sc3d-cb] #sc3d-cb-input::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--galaxy-radius) + 2px);
  z-index:-1;
  background: radial-gradient(60% 60% at 50% 50%,
              color-mix(in srgb, var(--galaxy-c3) 18%, transparent) 0%,
              transparent 60%);
  filter: blur(8px);
  opacity:.35;
  pointer-events:none;
  transition: opacity .25s ease, filter .25s ease;
}
[data-sc3d-cb] #sc3d-cb-input:focus::after{ opacity:.6; filter: blur(10px); }

/* Acelerar cuando está “escribiendo” */
[data-sc3d-cb] #sc3d-cb-input.is-typing{
  --galaxy-speed: 2.8s;
  --galaxy-glow: 22px;
}

/* Modo oscuro: más contraste, menos brillo sucio */
@media (prefers-color-scheme: dark){
  [data-sc3d-cb] #sc3d-cb-input{
    background:
      linear-gradient(var(--cb-input-bg, #0b1220), var(--cb-input-bg, #0b1220)) padding-box,
      conic-gradient(from var(--galaxy-angle),
        var(--galaxy-c1), var(--galaxy-c3), var(--galaxy-c4), var(--galaxy-c2), var(--galaxy-c1)
      ) border-box;
    box-shadow:
      0 0 0 0 rgba(0,0,0,0),
      0 0 calc(var(--galaxy-glow)*.3) rgba(34,211,238,.22);
  }
}

/* Respeto a reduce-motion */
@media (prefers-reduced-motion: reduce){
  [data-sc3d-cb] #sc3d-cb-input{ animation: none !important; --galaxy-angle:180deg; }
}

/* Animación del ángulo */
@keyframes sc3d-galaxy-rotate{ to{ --galaxy-angle: 360deg; } }

/* ===============================================
 * NUEVOS ELEMENTOS: BOTÓN DE HERRAMIENTAS Y SONIDO
 * =============================================== */

/* Botón de herramientas en el input */
[data-sc3d-cb] .sc3d-cb-input .icon-btn.tools {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent !important;
  color: var(--cb-muted);
  box-shadow: none !important;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
}

[data-sc3d-cb] .sc3d-cb-input .icon-btn.tools:hover {
  color: var(--cb-primary, var(--cb-accent));
  background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 10%, transparent) !important;
}

/* Ajustar padding del input para hacer espacio al botón de herramientas */
[data-sc3d-cb] .sc3d-cb-input input {
  padding-left: 56px !important; /* Espacio para el botón de herramientas */
}

/* Botón de sonido en las acciones del header */
[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-sound {
  color: var(--cb-muted);
}

[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-sound:hover {
  background: color-mix(in srgb, #10b981 15%, var(--cb-surface));
  color: #10b981;
}

/* Estado desactivado del sonido */
[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-sound.disabled {
  color: #ef4444;
}

[data-sc3d-cb] .sc3d-cb-actions .sc3d-cb-sound.disabled:hover {
  background: color-mix(in srgb, #ef4444 15%, var(--cb-surface));
  color: #fca5a5;
}

/* ===============================================
 * OVERLAY DE HERRAMIENTAS
 * =============================================== */

[data-sc3d-cb] .sc3d-cb-tools-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: calc(var(--cb-z) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cb-fade-in 0.2s ease;
}

[data-sc3d-cb] .sc3d-cb-tools-menu {
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  max-width: 400px;
  width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  animation: cb-zoom-in 0.3s ease;
}

[data-sc3d-cb] .sc3d-cb-tools-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--cb-border);
}

[data-sc3d-cb] .sc3d-cb-tools-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cb-text);
}

[data-sc3d-cb] .sc3d-cb-tools-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--cb-muted);
  font-size: 20px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

[data-sc3d-cb] .sc3d-cb-tools-close:hover {
  background: var(--cb-surface);
  color: var(--cb-text);
}

[data-sc3d-cb] .sc3d-cb-tools-content {
  padding: 8px;
}

[data-sc3d-cb] .sc3d-cb-tool-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

[data-sc3d-cb] .sc3d-cb-tool-item:hover {
  background: var(--cb-surface);
  border-color: var(--cb-border);
}

[data-sc3d-cb] .sc3d-cb-tool-item svg {
  color: var(--cb-primary, var(--cb-accent));
  flex-shrink: 0;
}

[data-sc3d-cb] .sc3d-cb-tool-item .tool-title {
  font-weight: 500;
  color: var(--cb-text);
  margin-bottom: 4px;
}

[data-sc3d-cb] .sc3d-cb-tool-item .tool-desc {
  font-size: 14px;
  color: var(--cb-muted);
}

/* ===============================================
 * OVERLAY DE FEEDBACK
 * =============================================== */

[data-sc3d-cb] .sc3d-cb-feedback-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: calc(var(--cb-z) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cb-fade-in 0.2s ease;
}

[data-sc3d-cb] .sc3d-cb-feedback-form {
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  animation: cb-zoom-in 0.3s ease;
}

[data-sc3d-cb] .sc3d-cb-feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--cb-border);
}

[data-sc3d-cb] .sc3d-cb-feedback-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cb-text);
}

[data-sc3d-cb] .sc3d-cb-feedback-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--cb-muted);
  font-size: 20px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

[data-sc3d-cb] .sc3d-cb-feedback-close:hover {
  background: var(--cb-surface);
  color: var(--cb-text);
}

[data-sc3d-cb] .sc3d-cb-feedback-content {
  padding: 24px;
}

[data-sc3d-cb] .feedback-field {
  margin-bottom: 20px;
}

[data-sc3d-cb] .feedback-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--cb-text);
}

[data-sc3d-cb] .feedback-field select,
[data-sc3d-cb] .feedback-field textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  background: var(--cb-surface);
  color: var(--cb-text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

[data-sc3d-cb] .feedback-field select:focus,
[data-sc3d-cb] .feedback-field textarea:focus {
  outline: none;
  border-color: var(--cb-primary, var(--cb-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 20%, transparent);
}

[data-sc3d-cb] .feedback-field textarea {
  resize: vertical;
  min-height: 100px;
}

[data-sc3d-cb] .feedback-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

[data-sc3d-cb] .sc3d-cb-feedback-cancel,
[data-sc3d-cb] .sc3d-cb-feedback-send {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--cb-border);
}

[data-sc3d-cb] .sc3d-cb-feedback-cancel {
  background: transparent;
  color: var(--cb-text);
}

[data-sc3d-cb] .sc3d-cb-feedback-cancel:hover {
  background: var(--cb-surface);
}

[data-sc3d-cb] .sc3d-cb-feedback-send {
  background: var(--cb-primary, var(--cb-accent));
  color: white;
  border-color: var(--cb-primary, var(--cb-accent));
}

[data-sc3d-cb] .sc3d-cb-feedback-send:hover {
  background: color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 85%, #000);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cb-primary, var(--cb-accent)) 30%, transparent);
}

/* ===============================================
 * ANIMACIONES ADICIONALES
 * =============================================== */

@keyframes cb-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===============================================
 * RESPONSIVE DESIGN PARA MÓVILES
 * =============================================== */

@media (max-width: 768px) {
  /* Ajustar tamaño de botones en móviles */
  [data-sc3d-cb] .sc3d-cb-input .icon-btn.tools {
    width: 32px;
    height: 32px;
    left: 12px;
  }

  /* Ajustar padding del input en móviles */
  [data-sc3d-cb] .sc3d-cb-input input {
    padding-left: 50px !important;
    font-size: 16px; /* Evitar zoom en iOS */
  }

  /* Overlays ocupan toda la pantalla en móviles */
  [data-sc3d-cb] .sc3d-cb-tools-menu,
  [data-sc3d-cb] .sc3d-cb-feedback-form {
    width: 95vw;
    max-height: 90vh;
    margin: 20px;
  }

  /* Reducir padding en móviles */
  [data-sc3d-cb] .sc3d-cb-tools-header,
  [data-sc3d-cb] .sc3d-cb-feedback-header {
    padding: 16px 20px 12px;
  }

  [data-sc3d-cb] .sc3d-cb-tools-content,
  [data-sc3d-cb] .sc3d-cb-feedback-content {
    padding: 16px;
  }

  /* Botones de herramientas más grandes en móviles */
  [data-sc3d-cb] .sc3d-cb-tool-item {
    padding: 20px 16px;
  }

  /* Textarea más pequeño en móviles */
  [data-sc3d-cb] .feedback-field textarea {
    min-height: 80px;
  }
}

/* ===============================================
 * MODO OSCURO ESPECÍFICO PARA NUEVOS ELEMENTOS
 * =============================================== */

@media (prefers-color-scheme: dark) {
  [data-sc3d-cb] .sc3d-cb-tools-overlay,
  [data-sc3d-cb] .sc3d-cb-feedback-overlay {
    background: rgba(0, 0, 0, 0.7);
  }

  [data-sc3d-cb] .sc3d-cb-tools-menu,
  [data-sc3d-cb] .sc3d-cb-feedback-form {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
}


/* ============================================================
   SC3D · Botón flotante + badge (encaja con tu HTML inyectado)
   ============================================================ */

/* Tokens locales del FAB (no pisan los tuyos) */
[data-sc3d-cb]{
  --fab-size: 60px;
  --fab-size-sm: 56px;
  --fab-radius: 50%;
  --fab-bg: var(--cb-button-bg, var(--cb-primary, var(--cb-accent, #41a6a2)));
  --fab-fg: var(--cb-button-text, #fff);
  --fab-shadow: 0 8px 25px rgba(0,0,0,.15), 0 4px 10px rgba(0,0,0,.10);
  --fab-shadow-hover: 0 12px 30px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.12);
  --ring-rgb: var(--sc3d-cb-primary-rgb, 20,124,186);
  --pulse-color: var(--fab-bg);
  --inset-right: max(20px, env(safe-area-inset-right));
  --inset-bottom: max(20px, env(safe-area-inset-bottom));
  --inset-left: max(20px, env(safe-area-inset-left));
  --inset-top: max(20px, env(safe-area-inset-top));
}

/* ---------- FAB ---------- */
[data-sc3d-cb] .sc3d-cb-button{
  position: fixed;
  right: var(--inset-right);
  bottom: var(--inset-bottom);
  z-index: var(--cb-z, 2147483000);
  isolation: isolate;

  width: var(--fab-size);
  height: var(--fab-size);
  border: 0;
  border-radius: var(--fab-radius);

  background: var(--fab-bg);
  color: var(--fab-fg);
  box-shadow: var(--fab-shadow);

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  user-select: none;

  transition:
    transform .3s cubic-bezier(.4,0,.2,1),
    box-shadow .3s cubic-bezier(.4,0,.2,1),
    filter .3s ease;

  animation: sc3d-fab-enter .6s cubic-bezier(.4,0,.2,1) .2s both,
             sc3d-fab-breathe 6s ease-in-out 3s infinite;
  will-change: transform, box-shadow, filter;
}

[data-sc3d-cb] .sc3d-cb-button:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: var(--fab-shadow-hover);
}

[data-sc3d-cb] .sc3d-cb-button:active{
  transform: translateY(0);
  transition: transform .1s ease;
}

[data-sc3d-cb] .sc3d-cb-button:focus-visible{
  outline: none;
  box-shadow:
    var(--fab-shadow),
    0 0 0 3px rgba(var(--ring-rgb), .35);
}

/* Brillo superior */
[data-sc3d-cb] .sc3d-cb-button::before{
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.03) 50%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
[data-sc3d-cb] .sc3d-cb-button:hover::before{ opacity: 1; }

/* ::after = ripple on-press (modo por defecto) */
[data-sc3d-cb] .sc3d-cb-button::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition:
    width .5s cubic-bezier(.4,0,.2,1),
    height .5s cubic-bezier(.4,0,.2,1),
    opacity .5s;
  pointer-events: none;
}
[data-sc3d-cb] .sc3d-cb-button:active::after{
  width: 80px; height: 80px; opacity:.8;
  transition-duration: .1s;
}

/* Icono opcional <img> dentro del botón */
[data-sc3d-cb] .sc3d-cb-button > img{
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
  transition: filter .3s ease;
}
[data-sc3d-cb] .sc3d-cb-button:hover > img{
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.15));
}

/* ---------- Pulso tipo ANILLO (ring) ---------- */
/* Actívalo con .pulse en wrapper o en el propio botón, o data-pulse="true" */
[data-sc3d-cb].pulse .sc3d-cb-button::after,
[data-sc3d-cb].pulse-strong .sc3d-cb-button::after,
[data-sc3d-cb].pulse-soft .sc3d-cb-button::after,
[data-sc3d-cb].pulse-once .sc3d-cb-button::after,
[data-sc3d-cb] .sc3d-cb-button.pulse::after,
[data-sc3d-cb] .sc3d-cb-button.pulse-strong::after,
[data-sc3d-cb] .sc3d-cb-button.pulse-soft::after,
[data-sc3d-cb] .sc3d-cb-button.pulse-once::after,
[data-sc3d-cb] .sc3d-cb-button[data-pulse="true"]::after{
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: var(--pulse-color);
  opacity: .6;
  z-index: -1;
  transition: none;
  animation: sc3d-pulse-ring 2s ease-out infinite;
}
/* Intensidades */
[data-sc3d-cb].pulse-strong .sc3d-cb-button::after,
[data-sc3d-cb] .sc3d-cb-button.pulse-strong::after{ opacity: .7; animation-duration: 1.6s; }
[data-sc3d-cb].pulse-soft .sc3d-cb-button::after,
[data-sc3d-cb] .sc3d-cb-button.pulse-soft::after{   opacity: .45; animation-duration: 2.8s; }
[data-sc3d-cb].pulse-once .sc3d-cb-button::after,
[data-sc3d-cb] .sc3d-cb-button.pulse-once::after{   animation-iteration-count: 1; }

/* Evita conflicto con ripple cuando hay ring activo */
[data-sc3d-cb].pulse .sc3d-cb-button:active::after,
[data-sc3d-cb].pulse-strong .sc3d-cb-button:active::after,
[data-sc3d-cb].pulse-soft .sc3d-cb-button:active::after,
[data-sc3d-cb].pulse-once .sc3d-cb-button:active::after,
[data-sc3d-cb] .sc3d-cb-button.pulse:active::after,
[data-sc3d-cb] .sc3d-cb-button.pulse-strong:active::after,
[data-sc3d-cb] .sc3d-cb-button.pulse-soft:active::after,
[data-sc3d-cb] .sc3d-cb-button.pulse-once:active::after,
[data-sc3d-cb] .sc3d-cb-button[data-pulse="true"]:active::after{
  width: 100%; height: 100%; opacity: inherit;
}

/* ---------- Posiciones ---------- */
[data-sc3d-cb].pos-left .sc3d-cb-button{ left: var(--inset-left); right: auto; }
[data-sc3d-cb].pos-top .sc3d-cb-button{ top: var(--inset-top); bottom: auto; }

/* NO afectar a modo maximizado: oculta FAB en fullscreen/max */
[data-sc3d-cb].is-fullscreen .sc3d-cb-button,
[data-sc3d-cb].is-max .sc3d-cb-button{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ocultación opcional al abrir (si la deseas) */
[data-sc3d-cb].use-open-hide.is-open .sc3d-cb-button{
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(.9) translateX(-12px); display: none;
}

/* ---------- Badge (tu HTML lo mete DENTRO del botón) ---------- */
/* Botón a la DERECHA (por defecto) → badge a la IZQUIERDA del botón */
[data-sc3d-cb] .sc3d-cb-button .sc3d-cb-badge{
  position: absolute;
  right: 100%;
  margin-right: 8px;
  bottom: 12px;

  background: var(--cb-elev, #fff);
  color: var(--cb-text, #0f172a);
  border: 1px solid var(--cb-border, #e5e7eb);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--cb-shadow, 0 2px 8px rgba(0,0,0,.08));
  opacity: 0;

  /* Animación de entrada hacia la izquierda */
  transform: translateX(12px) scale(.96);
  animation: sc3d-badge-enter .5s ease .8s forwards;

  pointer-events: none;
}
[data-sc3d-cb] .sc3d-cb-button:hover .sc3d-cb-badge{
  transform: translateX(-3px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.08);
}

/* Botón a la IZQUIERDA (.pos-left) → badge a la DERECHA del botón */
[data-sc3d-cb].pos-left .sc3d-cb-button .sc3d-cb-badge{
  left: 100%;
  margin-left: 8px;
  right: auto;
  margin-right: 0;

  /* Animación de entrada desde la derecha (inversa) */
  transform: translateX(-12px) scale(.96);
  animation: sc3d-badge-enter-inv .5s ease .8s forwards;
}
[data-sc3d-cb].pos-left .sc3d-cb-button:hover .sc3d-cb-badge{
  transform: translateX(3px) scale(1.02);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px){
  [data-sc3d-cb] .sc3d-cb-button{
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: var(--fab-size-sm);
    height: var(--fab-size-sm);
    font-size: 22px;
  }
  [data-sc3d-cb] .sc3d-cb-button .sc3d-cb-badge{
    bottom: 10px; font-size: 12px; padding: 6px 10px;
  }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  [data-sc3d-cb] .sc3d-cb-button{ animation: none; transition: none; }
  [data-sc3d-cb] .sc3d-cb-button::before,
  [data-sc3d-cb] .sc3d-cb-button::after{ display: none; }
  [data-sc3d-cb] .sc3d-cb-button .sc3d-cb-badge{ animation: none; opacity: 1; transform: none; }
}

/* ---------- Keyframes ---------- */
@keyframes sc3d-fab-enter{
  from{ transform: translateY(12px) scale(.96); opacity: 0; }
  to  { transform: translateY(0)   scale(1);    opacity: 1; }
}
@keyframes sc3d-fab-breathe{
  0%,100%{ box-shadow: var(--fab-shadow); }
  50%   { box-shadow: 0 10px 30px rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.12); }
}
/* Entrada desde la izquierda (badge a la izquierda del botón) */
@keyframes sc3d-badge-enter{
  from{ opacity: 0; transform: translateX(12px) scale(.96); }
  to  { opacity: 1; transform: translateX(0)   scale(1); }
}
/* Entrada desde la derecha (badge a la derecha del botón) */
@keyframes sc3d-badge-enter-inv{
  from{ opacity: 0; transform: translateX(-12px) scale(.96); }
  to  { opacity: 1; transform: translateX(0)     scale(1); }
}
@keyframes sc3d-pulse-ring{
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .6; }
  70%  { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/**/
/* ===== SC3D · Banner conectado + botón cerrar sesión ===== */

/* Tokens locales del banner (puedes sobreescribirlos si cambias color de fondo/texto) */
.sc3d-live-banner{
  --sc3d-banner-fg: #0369a1;                 /* color de texto/icono */
  --sc3d-banner-hover: rgba(3,105,161,.08);  /* fondo hover texto normal */
  --sc3d-banner-active: rgba(3,105,161,.14); /* fondo active texto normal */
  --sc3d-focus: #41a6a2;                     /* anillo de enfoque marca */

  /* Acentos específicos para el BOTÓN (destacar todo el botón) */
  --sc3d-close-border: #e49d2b;              /* borde/acento principal */
  --sc3d-close-border-hover: #c78012;        /* borde al pasar el ratón */
  --sc3d-close-bg: rgba(228,157,43,.10);     /* fondo normal del botón */
  --sc3d-close-bg-hover: rgba(228,157,43,.18); /* fondo hover */
  --sc3d-close-bg-active: rgba(228,157,43,.26);/* fondo active */
  --sc3d-close-text: #034a6b;                /* color del texto del botón */
}

/* Texto principal: ocupa el espacio y recorta si no cabe */
.sc3d-live-banner .sc3d-live-banner-text{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botón cerrar sesión (✕ + texto) — AHORA CON BORDE Y FONDO PROPIO */
.sc3d-live-banner .sc3d-live-banner-close{
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--sc3d-close-border);
  background: var(--sc3d-close-bg);
  color: var(--sc3d-close-text);
  font: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-radius: .5rem;
  cursor: pointer;
  user-select: none;
  min-height: 32px;
  min-width: 44px; /* objetivo táctil accesible */
  transition:
    background-color .15s ease,
    border-color .15s ease,
    transform .06s ease,
    opacity .15s ease;
  background-clip: padding-box;
}

.sc3d-live-banner .sc3d-live-banner-close:hover{
  background: var(--sc3d-close-bg-hover);
  border-color: var(--sc3d-close-border-hover);
}

.sc3d-live-banner .sc3d-live-banner-close:active{
  background: var(--sc3d-close-bg-active);
  border-color: var(--sc3d-close-border-hover);
  transform: translateY(1px);
}

.sc3d-live-banner .sc3d-live-banner-close:focus-visible{
  outline: 2px solid var(--sc3d-focus);
  outline-offset: 2px;
}

/* Icono ✕ */
.sc3d-live-banner .sc3d-live-banner-close-icon{
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-.5px); /* microajuste óptico */
}

/* Texto “Cerrar sesión” */
.sc3d-live-banner .sc3d-live-banner-close-text{
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* En pantallas estrechas, muestra solo la ✕ para ahorrar espacio */
@media (max-width: 480px){
  .sc3d-live-banner .sc3d-live-banner-close-text{ display: none; }
}

/* Modo oscuro (si inviertes colores del banner) */
@media (prefers-color-scheme: dark){
  .sc3d-live-banner{
    --sc3d-close-bg: rgba(228,157,43,.14);
    --sc3d-close-bg-hover: rgba(228,157,43,.22);
    --sc3d-close-bg-active: rgba(228,157,43,.30);
  }
}

/* Alto contraste (Windows) */
@media (forced-colors: active){
  .sc3d-live-banner .sc3d-live-banner-close{ border-color: ButtonText; }
  .sc3d-live-banner .sc3d-live-banner-close:focus-visible{ outline-color: Highlight; }
}



/* === Desktop Integrated (Comet) mode === */
@media (min-width: 1025px) {
  body.sc3d-cb-integrated {
    --sc3d-integrated-width: min(560px, 44vw);
    --sc3d-integrated-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* Transición suave del padding-right - coordinada con el panel */
    transition: padding-right 0.48s var(--sc3d-integrated-ease) !important;
    will-change: padding-right !important;
    padding-right: 0 !important;
  }

  /* Cuando está abierto y NO está en preloading, aplicar el padding */
  body.sc3d-cb-integrated.sc3d-cb-integrated-open:not(.sc3d-cb-preloading) {
    padding-right: var(--sc3d-integrated-width) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: auto !important;
  }

  /* Mientras preloading está activo, aplicar padding pero ocultar scroll */
  body.sc3d-cb-integrated.sc3d-cb-integrated-open.sc3d-cb-preloading {
    padding-right: var(--sc3d-integrated-width) !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: none !important;
  }

  [data-sc3d-cb].is-integrated .sc3d-cb-panel{
    position: fixed !important;
    inset: 0 0 0 auto !important; /* top:0; right:0; bottom:0; left:auto */
    width: var(--sc3d-integrated-width) !important;
    max-width: 720px !important;
    height: 100dvh !important; max-height: 100dvh !important; /* altura de viewport dinámico para iOS/Android */
    border-radius: 0 !important;
    border-left: 1px solid var(--cb-border) !important;
    box-shadow: -12px 0 48px rgba(0,0,0,.12) !important;

    /* Animación de entrada: deslizar suavemente desde la derecha */
    transform: translateX(100%) !important;
    opacity: 0 !important;
    display: flex !important;
    flex-direction: column !important;

    /* Transición suave y coordinada con el preloader */
    transition: all 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    pointer-events: none !important;

    /* Fondo integrado con la página */
    background: var(--cb-bg, #ffffff) !important;
    z-index: 2147482999 !important;
  }

  /* Cuando está abierto, deslizar desde la derecha y mostrar */
  [data-sc3d-cb].is-integrated.is-open .sc3d-cb-panel{
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: -12px 0 48px rgba(0,0,0,.12) !important;
  }

  /* Cuando está cerrando, deslizar hacia la derecha y ocultar */
  [data-sc3d-cb].is-integrated.is-closing .sc3d-cb-panel{
    transform: translateX(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Loader IA dentro del panel (Comet) */
  [data-sc3d-cb].is-integrated .sc3d-cb-loader{
    position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
    background: var(--cb-bg, #fff);
    opacity:0; visibility:hidden; transition: opacity .25s var(--sc3d-integrated-ease);
  }
  [data-sc3d-cb].is-integrated.is-loading .sc3d-cb-loader{ opacity:1; visibility:visible; }
  .sc3d-cb-loader-fig{ position:relative; width:72px; height:72px; margin-right:16px; }
  .sc3d-cb-loader-fig .ring{ position:absolute; inset:0; border-radius:50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
    background: conic-gradient(from 0deg, var(--cb-primary,#1aa3ff), transparent 65%);
    filter: drop-shadow(0 0 14px rgba(26,163,255,.45));
    animation: sc3d-rotate 2.4s linear infinite;
  }
  .sc3d-cb-loader-fig .ring.r2{ inset:6px; opacity:.8; animation-duration:3.2s; animation-direction: reverse; }
  .sc3d-cb-loader-fig .ring.r3{ inset:12px; opacity:.6; animation-duration:4s; }
  .sc3d-cb-loader-fig .dots{ position:absolute; inset:0; animation: sc3d-rotate 2.6s linear infinite; }
  .sc3d-cb-loader-fig .dots i{ position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
    background: var(--cb-primary,#1aa3ff); transform: rotate(var(--r)) translate(28px); box-shadow: 0 0 10px rgba(26,163,255,.6); }

  .sc3d-cb-preloader::before{ content:""; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(60% 60% at 70% 50%, rgba(26,163,255,.08), transparent 60%);
    animation: sc3d-pre-glow 3s ease-in-out infinite alternate; }
  @keyframes sc3d-pre-glow{ from{ opacity:.45 } to{ opacity:.9 } }

  .sc3d-cb-loader-txt{
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--cb-primary, #1aa3ff);
    text-shadow: 0 0 8px rgba(26, 163, 255, 0.3);
    animation: sc3d-pulse-text 1.5s ease-in-out infinite;
    margin-top: 24px;
  }

  @keyframes sc3d-pulse-text {
    0%, 100% { opacity: 0.7; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1.02); }
  }
  @keyframes sc3d-rotate{ to{ transform: rotate(1turn); } }
  @keyframes sc3d-pulse{ 0%,100%{ transform:scale(.96); opacity:.75 } 50%{ transform:scale(1.03); opacity:1 } }
  @keyframes sc3d-shimmer{ to{ background-position:-200% 0 } }

  /* Remove overlay/backdrop when integrated */

  /* Preloader lateral previo a la apertura del panel */
  .sc3d-cb-preloader{
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: var(--sc3d-integrated-width) !important;
    max-width: 720px !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cb-bg, #fff) !important;
    box-shadow: -12px 0 48px rgba(0,0,0,.12) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* Transición suave que se solapa con la aparición del panel */
    transition: opacity 0.48s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2147483000 !important;
    will-change: opacity !important;
  }

  .sc3d-cb-preloader.is-visible{
    opacity: 1 !important;
  }

  /* Estado de pre-carga: oculta FAB y elimina barras de scroll */
  body.sc3d-cb-preloading{ overflow:hidden !important; overscroll-behavior: none; }
  body.sc3d-cb-preloading [data-sc3d-cb] .sc3d-cb-button{ display:none !important; }
  /* Ocultar scrollbars (WebKit/Chromium/Firefox) durante preloading */
  body.sc3d-cb-preloading{ scrollbar-width: none; -ms-overflow-style: none; }
  body.sc3d-cb-preloading::-webkit-scrollbar{ width:0!important; height:0!important; display:none!important; }


  /* Variante SPLASH del preloader IA */
  .sc3d-cb-splash{
    position: relative;
    width: 220px;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .sc3d-cb-splash .splash-core{
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(26,163,255,.35), transparent 55%),
                radial-gradient(circle at 65% 70%, rgba(108,108,255,.25), transparent 60%),
                radial-gradient(circle at 50% 50%, rgba(26,163,255,.18), transparent 60%);
    filter: drop-shadow(0 0 18px rgba(26,163,255,.45));
    animation: sc3d-bloom 2.4s ease-in-out infinite alternate;
  }

  .sc3d-cb-splash .splash-wave{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(26,163,255,.6), rgba(108,108,255,.25), transparent 60%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 0);
    animation: sc3d-rotate 5s linear infinite;
  }

  .sc3d-cb-splash .splash-txt{
    position: relative;
    margin-top: 24px;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cb-primary, #1aa3ff);
    text-shadow: 0 0 8px rgba(26, 163, 255, 0.3);
    animation: sc3d-pulse-text 1.5s ease-in-out infinite;
  }

  @keyframes sc3d-bloom{ 0%{ transform:scale(.9); opacity:.85 } 100%{ transform:scale(1.05); opacity:1 } }


  /* Efecto de shrink temporal de la web antes de abrir */
  body.sc3d-cb-integrated.sc3d-cb-integrated-shrink{
    transform:scale(.985); transform-origin:center right;
    transition:transform .38s var(--sc3d-integrated-ease);
  }

  [data-sc3d-cb].is-integrated::before{
    display:none!important;
  }

  /* Hide FAB when open in integrated */
  [data-sc3d-cb].is-integrated.is-open .sc3d-cb-button{
    display:none!important;
  }
  /* Also hide when body already in integrated-open (instant restore) */
  body.sc3d-cb-integrated.sc3d-cb-integrated-open [data-sc3d-cb] .sc3d-cb-button{
    display:none!important;
  }

}

@media (prefers-reduced-motion: reduce) {
  body.sc3d-cb-integrated { transition: none !important; }
  [data-sc3d-cb].is-integrated .sc3d-cb-panel{ transition: none !important; }
  .sc3d-cb-preloader,
  .sc3d-cb-loader-fig .ring,
  .sc3d-cb-loader-fig .dots,
  .sc3d-cb-splash .splash-core,
  .sc3d-cb-splash .splash-wave,
  .sc3d-cb-splash .splash-txt{ animation:none !important }
}