/**
 * DaveTech AI Live Chat - Widget Styles (Frontend)
 * Version: 1.8.0
 * Author: David Rodriguez
 * 
 * Este archivo personaliza la apariencia del widget de chat en el sitio web
 * Compatible con Chatwoot SDK - Standard y Expanded Bubble modes
 * 
 * NOTA: Evitamos usar 'all: unset' para no romper estilos internos de Chatwoot
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================ */

:root {
    /* Variables por defecto - se sobrescriben con PHP inline styles */
    --davetech-widget-primary: #0066CC;
    --davetech-widget-primary-hover: #004C99;
    --davetech-widget-text: #ffffff;
    --davetech-bubble-size: 60px;
    --davetech-bubble-bottom: 20px;
    --davetech-bubble-side: 20px;
    --davetech-bubble-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --davetech-widget-z-index: 2147483000;
}

/* ============================================
   WIDGET CONTAINER - VISIBILITY & Z-INDEX
   ============================================ */

/* Contenedor principal del widget */
.woot-widget-holder {
    z-index: var(--davetech-widget-z-index) !important;
    position: fixed !important;
    pointer-events: auto !important;
}

/* ============================================
   BUBBLE BUTTON - STANDARD MODE (Circular)
   Solo aplicar dimensiones fijas cuando NO es expanded
   ============================================ */

/* Estilos base para TODAS las burbujas */
.woot-widget-bubble,
button.woot-widget-bubble {
    /* Posicionamiento */
    position: fixed !important;
    z-index: var(--davetech-widget-z-index) !important;
    
    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Apariencia base */
    background-color: var(--davetech-widget-primary) !important;
    border: none !important;
    box-shadow: var(--davetech-bubble-shadow) !important;
    
    /* Interacción */
    cursor: pointer !important;
    pointer-events: auto !important;
    
    /* Transiciones suaves */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s ease !important;
}

/* Burbuja STANDARD (circular) - cuando NO tiene clase expanded */
.woot-widget-bubble:not(.woot-widget--expanded):not([class*="expanded"]),
button.woot-widget-bubble:not(.woot-widget--expanded):not([class*="expanded"]) {
    width: var(--davetech-bubble-size) !important;
    height: var(--davetech-bubble-size) !important;
    min-width: var(--davetech-bubble-size) !important;
    min-height: var(--davetech-bubble-size) !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

/* ============================================
   BUBBLE BUTTON - EXPANDED MODE (Pill shape with text)
   ============================================ */

/* Burbuja EXPANDIDA (píldora con texto) */
.woot-widget-bubble.woot-widget--expanded,
button.woot-widget-bubble.woot-widget--expanded,
.woot-widget-bubble[class*="expanded"] {
    /* Dimensiones flexibles para texto */
    width: auto !important;
    min-width: var(--davetech-bubble-size) !important;
    height: var(--davetech-bubble-size) !important;
    
    /* Forma de píldora */
    border-radius: 28px !important;
    padding: 0 20px !important;
    
    /* Asegurar que el contenido se muestre */
    overflow: visible !important;
}

/* Texto dentro de burbuja expandida */
.woot-widget-bubble.woot-widget--expanded span,
.woot-widget-bubble.woot-widget--expanded #woot-widget--expanded__text,
.woot-widget-bubble [id*="expanded__text"] {
    color: var(--davetech-widget-text) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    margin-left: 8px !important;
}

/* ============================================
   BUBBLE HOVER & FOCUS STATES
   ============================================ */

.woot-widget-bubble:hover,
button.woot-widget-bubble:hover {
    background-color: var(--davetech-widget-primary-hover) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22) !important;
}

.woot-widget-bubble:focus,
.woot-widget-bubble:focus-visible,
button.woot-widget-bubble:focus,
button.woot-widget-bubble:focus-visible {
    outline: 3px solid var(--davetech-widget-primary) !important;
    outline-offset: 3px !important;
}

.woot-widget-bubble:active,
button.woot-widget-bubble:active {
    transform: scale(0.98) !important;
}

/* ============================================
   BUBBLE POSITIONING
   ============================================ */

/* Posición derecha */
.woot-widget-bubble.woot-elements--right,
button.woot-widget-bubble.woot-elements--right {
    right: var(--davetech-bubble-side) !important;
    left: auto !important;
    bottom: var(--davetech-bubble-bottom) !important;
    top: auto !important;
}

/* Posición izquierda */
.woot-widget-bubble.woot-elements--left,
button.woot-widget-bubble.woot-elements--left {
    left: var(--davetech-bubble-side) !important;
    right: auto !important;
    bottom: var(--davetech-bubble-bottom) !important;
    top: auto !important;
}

/* ============================================
   BUBBLE ICON (SVG) - Standard Mode
   ============================================ */

/* Icono SVG dentro de la burbuja */
.woot-widget-bubble svg#woot-widget-bubble-icon,
.woot-widget-bubble svg[id*="bubble-icon"] {
    width: 24px !important;
    height: 24px !important;
    color: var(--davetech-widget-text) !important;
    fill: var(--davetech-widget-text) !important;
    flex-shrink: 0 !important;
}

/* ============================================
   CUSTOM LOGO IN BUBBLE
   ============================================ */

/* Logo personalizado - reemplaza el icono SVG */
.woot-widget-bubble img.custom-bubble-logo,
img.custom-bubble-logo {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    flex-shrink: 0 !important;
}

/* ============================================
   CHAT WINDOW (iframe)
   ============================================ */

/* Ventana del chat */
.woot-widget-holder iframe {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18) !important;
    background: #fff !important;
}

/* ============================================
   UNREAD MESSAGES BADGE
   ============================================ */

/* Badge de contador de mensajes no leídos */
.woot-widget-bubble .woot-widget__unread-count,
.woot-widget-bubble [class*="unread"] {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #DC2626 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4) !important;
}

/* ============================================
   ENTRANCE ANIMATION
   ============================================ */

@keyframes davetech-bubble-in {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.woot-widget-bubble {
    animation: davetech-bubble-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    :root {
        --davetech-bubble-size: 56px;
        --davetech-bubble-bottom: 16px;
        --davetech-bubble-side: 16px;
    }
    
    .woot-widget-holder iframe {
        border-radius: 0 !important;
    }
}

@media (max-width: 480px) {
    :root {
        --davetech-bubble-size: 52px;
        --davetech-bubble-bottom: 12px;
        --davetech-bubble-side: 12px;
    }
    
    /* Reducir padding en burbuja expandida en móvil */
    .woot-widget-bubble.woot-widget--expanded {
        padding: 0 14px !important;
    }
    
    .woot-widget-bubble.woot-widget--expanded span {
        font-size: 13px !important;
    }
}

/* ============================================
   VISIBILITY STATES
   ============================================ */

.woot-widget-holder.loading {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .woot-widget-bubble {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --davetech-bubble-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }
}

/* ============================================
   WORDPRESS THEME CONFLICT PREVENTION
   ============================================ */

/* Asegurar que el widget no sea ocultado por temas */
body .woot-widget-holder,
html body .woot-widget-holder {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevenir que estilos globales de botones afecten la burbuja */
body button.woot-widget-bubble,
html body button.woot-widget-bubble {
    background-color: var(--davetech-widget-primary) !important;
    border: none !important;
    color: var(--davetech-widget-text) !important;
    text-decoration: none !important;
    box-shadow: var(--davetech-bubble-shadow) !important;
}

/* Asegurar border-radius correcto según el modo */
body button.woot-widget-bubble:not(.woot-widget--expanded) {
    border-radius: 50% !important;
}

body button.woot-widget-bubble.woot-widget--expanded {
    border-radius: 28px !important;
}