/**
 * APN WhatsApp Multiusuario — Public Styling Pro
 * Floating Widget & Sales Executives Multi-User UI
 * APÚNTATE SPA ECOSYSTEM
 *
 * @package APN\WhatsApp
 */

/* ==========================================================================
   1. WIDGET ROOT & CSS ISOLATION (THEME RESET)
   ========================================================================== */
#apn-wa-widget-root,
.apn-wa-widget-root {
    position: fixed !important;
    z-index: 999990 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

#apn-wa-widget-root *,
.apn-wa-widget-root * {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* DESKTOP POSITIONING */
.apn-wa-widget-root.apn-pos-bottom-right {
    bottom: 24px !important;
    right: 24px !important;
}

.apn-wa-widget-root.apn-pos-bottom-left {
    bottom: 24px !important;
    left: 24px !important;
}

/* ==========================================================================
   2. LAUNCHER BUBBLE BUTTON
   ========================================================================== */
.apn-wa-launcher {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(18, 140, 126, 0.4) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
    outline: none !important;
    padding: 0 !important;
}

.apn-wa-launcher:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 24px rgba(18, 140, 126, 0.55) !important;
}

.apn-wa-launcher:active {
    transform: scale(0.96) !important;
}

/* LAUNCHER ICONS */
.apn-wa-launcher-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
}

.apn-wa-launcher-icon svg {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: block !important;
    fill: currentColor !important;
}

.apn-wa-icon-open {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
}

.apn-wa-icon-close {
    opacity: 0 !important;
    transform: scale(0.5) rotate(-90deg) !important;
    position: absolute !important;
}

/* OPEN LAUNCHER STATE */
.apn-wa-widget-root.is-open .apn-wa-icon-open {
    opacity: 0 !important;
    transform: scale(0.5) rotate(90deg) !important;
    position: absolute !important;
}

.apn-wa-widget-root.is-open .apn-wa-icon-close {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
    position: relative !important;
}

/* COUNTER BADGE */
.apn-wa-launcher-badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    background: #e11d48 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* PULSE ANIMATION */
.apn-wa-launcher.apn-has-pulse::after {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7) !important;
    animation: apnWaPulse 2s infinite cubic-bezier(0.66, 0, 1) !important;
    pointer-events: none !important;
}

@keyframes apnWaPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* ==========================================================================
   3. WIDGET CARD (DESPLEGABLE)
   ========================================================================== */
.apn-wa-card {
    position: absolute !important;
    bottom: 76px !important;
    width: 390px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 96px) !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(16px) scale(0.96) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: column !important;
}

.apn-pos-bottom-right .apn-wa-card {
    right: 0 !important;
    transform-origin: bottom right !important;
}

.apn-pos-bottom-left .apn-wa-card {
    left: 0 !important;
    transform-origin: bottom left !important;
}

.apn-wa-widget-root.is-open .apn-wa-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

/* HEADER DEL WIDGET */
.apn-wa-card-header {
    background: linear-gradient(135deg, #075E54 0%, #128C7E 100%) !important;
    color: #ffffff !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.apn-wa-header-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.apn-wa-brand-logo-wrap {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 3px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.apn-wa-brand-logo-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.apn-wa-brand-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
}

.apn-wa-header-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.apn-wa-card-title {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
}

.apn-wa-card-subtitle {
    margin: 3px 0 0 0 !important;
    font-size: 11.5px !important;
    color: #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.apn-wa-status-dot {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
    background: #4ade80 !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.apn-wa-status-dot.is-offline {
    background: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}

.apn-wa-close-btn {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 26px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    opacity: 0.85 !important;
    transition: opacity 0.15s ease !important;
    flex-shrink: 0 !important;
}

.apn-wa-close-btn:hover {
    opacity: 1 !important;
}

/* ==========================================================================
   4. BODY & MODULAR FIELDS
   ========================================================================== */
.apn-wa-card-body {
    max-height: min(640px, calc(100vh - 210px)) !important;
    overflow-y: auto !important;
    padding: 16px 18px !important;
    background: #ffffff !important;
    -webkit-overflow-scrolling: touch !important;
}

.apn-wa-top-banner {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    color: #166534 !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}

.apn-wa-prechat-form {
    margin-bottom: 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
}

.apn-wa-form-intro {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 10px !important;
}

.apn-wa-input-group {
    margin-bottom: 10px !important;
}

.apn-wa-input-group label,
.apn-wa-form-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 4px !important;
}

/* UNIVERSAL FORM INPUT RESET FOR WORDPRESS THEME IMMUNITY */
#apn-wa-widget-root input.apn-wa-input,
#apn-wa-widget-root textarea.apn-wa-input,
.apn-wa-input {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#apn-wa-widget-root input.apn-wa-input:focus,
#apn-wa-widget-root textarea.apn-wa-input:focus,
.apn-wa-input:focus {
    border-color: #25d366 !important;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2) !important;
    background-color: #ffffff !important;
}

.apn-wa-input.is-valid {
    border-color: #10b981 !important;
    background-color: #f0fdf4 !important;
}

.apn-wa-input.is-invalid {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

/* RUT WRAPPER & BADGES */
.apn-wa-rut-wrapper {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.apn-wa-rut-badge {
    position: absolute !important;
    right: 8px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.apn-wa-rut-badge.is-persona {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.apn-wa-rut-badge.is-empresa {
    background: #dbeafe !important;
    color: #1e40af !important;
}

.apn-wa-field-hint {
    display: block !important;
    font-size: 10.5px !important;
    margin-top: 3px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

/* CHILEAN PHONE PREFIX STACK RESET */
#apn-wa-widget-root .apn-wa-phone-input-wrap,
.apn-wa-phone-input-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#apn-wa-widget-root .apn-wa-country-prefix,
.apn-wa-country-prefix {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    user-select: none !important;
}

#apn-wa-widget-root .apn-wa-phone-input-wrap input.apn-wa-input,
.apn-wa-phone-input-wrap .apn-wa-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid #cbd5e1 !important;
    margin: 0 !important;
}

.apn-wa-form-divider {
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px dashed #cbd5e1 !important;
}

/* ==========================================================================
   5. LISTA DE EJECUTIVOS
   ========================================================================== */
.apn-wa-executives-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-height: 380px !important;
}

.apn-wa-exec-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.15s ease-in-out !important;
}

.apn-wa-exec-row:hover {
    background: #ffffff !important;
    border-color: #25D366 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.apn-wa-avatar-wrap {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
}

.apn-wa-avatar-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    display: block !important;
}

.apn-wa-online-indicator {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 11px !important;
    height: 11px !important;
    background: #22c55e !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
}

.apn-wa-exec-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.apn-wa-exec-name {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.apn-wa-exec-role {
    font-size: 11.5px !important;
    color: #64748b !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.apn-wa-exec-hint {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #16a34a !important;
    margin-top: 2px !important;
}

.apn-wa-exec-action {
    flex-shrink: 0 !important;
}

.apn-wa-chat-bubble-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #e6f7ec !important;
    color: #128C7E !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.apn-wa-exec-row:hover .apn-wa-chat-bubble-btn {
    background: #25D366 !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
}

/* ==========================================================================
   6. OFF-HOURS & LEAD RECOVERY PRO
   ========================================================================== */
.apn-wa-offhours-box {
    padding: 4px 0 !important;
}

.apn-wa-offhours-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #fffbeb !important;
    border: 1px solid #fef3c7 !important;
    color: #b45309 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    margin-bottom: 10px !important;
}

.apn-wa-offhours-msg {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: #334155 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px !important;
    margin-bottom: 14px !important;
}

.apn-wa-lead-recovery-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}

.apn-wa-recovery-title {
    margin: 0 0 4px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.apn-wa-recovery-desc {
    margin: 0 0 12px 0 !important;
    font-size: 11.5px !important;
    color: #64748b !important;
}

.apn-wa-textarea {
    resize: vertical !important;
    min-height: 70px !important;
}

/* SUBMIT BUTTON WITH STRICT THEME RESET */
#apn-wa-widget-root .apn-wa-submit-lead-btn,
.apn-wa-submit-lead-btn {
    width: 100% !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    margin-top: 10px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

#apn-wa-widget-root .apn-wa-submit-lead-btn:hover,
.apn-wa-submit-lead-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45) !important;
    transform: translateY(-1px) !important;
}

#apn-wa-widget-root .apn-wa-submit-lead-btn * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.apn-wa-submit-lead-btn.is-loading {
    opacity: 0.7 !important;
    cursor: wait !important;
}

.apn-wa-lead-success-msg {
    text-align: center !important;
    padding: 18px 10px !important;
}

.apn-wa-success-icon {
    font-size: 28px !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.apn-wa-lead-success-msg h4 {
    margin: 0 0 6px 0 !important;
    font-size: 15px !important;
    color: #065f46 !important;
}

.apn-wa-lead-success-msg p {
    margin: 0 !important;
    font-size: 12px !important;
    color: #047857 !important;
    line-height: 1.4 !important;
}

.apn-wa-lead-response.is-error {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    margin-top: 8px !important;
}

/* ==========================================================================
   7. FOOTER BRANDING DETAILS
   ========================================================================== */
.apn-wa-card-footer {
    padding: 10px 16px !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    text-align: center !important;
}

.apn-wa-footer-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.apn-wa-footer-status {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #15803d !important;
}

.apn-wa-footer-support {
    font-size: 10px !important;
    color: #64748b !important;
}

.apn-wa-footer-credit {
    font-size: 9.5px !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}

.apn-wa-footer-credit a {
    color: #0f172a !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ==========================================================================
   8. STRICT RESPONSIVE RULES (MOBILE & TABLET FIX)
   ========================================================================== */
@media screen and (max-width: 640px) {
    /* Launcher positions for mobile */
    .apn-wa-widget-root.apn-pos-bottom-right {
        bottom: 16px !important;
        right: 16px !important;
        left: auto !important;
    }

    .apn-wa-widget-root.apn-pos-bottom-left {
        bottom: 16px !important;
        left: 16px !important;
        right: auto !important;
    }

    /* Fixed centered card to avoid any overflow off-screen */
    #apn-wa-widget-root .apn-wa-card,
    .apn-wa-card {
        position: fixed !important;
        bottom: 80px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        max-height: calc(100vh - 92px) !important;
        z-index: 999999 !important;
        border-radius: 16px !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28) !important;
    }

    /* Scrollable body in mobile view */
    #apn-wa-widget-root .apn-wa-card-body,
    .apn-wa-card-body {
        max-height: calc(100vh - 180px) !important;
        overflow-y: auto !important;
        padding: 14px 16px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Tweak title and header for small screens */
    .apn-wa-card-title {
        font-size: 14px !important;
    }

    .apn-wa-card-subtitle {
        font-size: 11px !important;
    }

    /* Phone prefix in mobile */
    #apn-wa-widget-root .apn-wa-country-prefix,
    .apn-wa-country-prefix {
        padding: 8px !important;
        font-size: 12px !important;
    }
}