/* Pepebot – Frontend Styles | Prefijo único: ppbt- */

#ppbt-wrapper {
    position: fixed !important;
    z-index: 999999 !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: auto !important;
    max-width: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}
#ppbt-wrapper.ppbt-pos-bottom-right { right: 24px !important; left: auto !important; align-items: flex-end !important; }
#ppbt-wrapper.ppbt-pos-bottom-left  { left: 24px !important; right: auto !important; align-items: flex-start !important; }

.ppbt-toggle-btn {
    position: relative !important;
    width: 58px !important; height: 58px !important;
    border-radius: 50% !important;
    background: var(--aichat-primary, #6C2BD9) !important;
    border: none !important; cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
    transition: transform .2s, box-shadow .2s !important;
    outline: none !important; z-index: 2 !important;
    opacity: 1 !important; visibility: visible !important;
    margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important;
}
.ppbt-toggle-btn:hover  { transform: scale(1.08) !important; box-shadow: 0 6px 28px rgba(0,0,0,0.3) !important; }
.ppbt-toggle-btn:active { transform: scale(0.96) !important; }

.ppbt-badge {
    position: absolute !important; top: -4px !important; right: -4px !important;
    background: #EF4444 !important; color: white !important;
    font-size: 11px !important; font-weight: 700 !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 white !important; pointer-events: none !important;
    margin: 0 !important; padding: 0 !important;
}

.ppbt-contact-wrap {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; gap: 12px !important;
    margin: 0 !important; padding: 0 !important;
}
#ppbt-wrapper.ppbt-pos-bottom-right .ppbt-contact-wrap { align-items: flex-end !important; }

.ppbt-action-menu {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; gap: 10px !important;
    opacity: 0 !important; pointer-events: none !important;
    transform: translateY(10px) !important;
    transition: opacity .22s ease, transform .22s ease !important;
    margin: 0 0 4px 0 !important; padding: 0 !important;
}
#ppbt-wrapper.ppbt-pos-bottom-right .ppbt-action-menu { align-items: flex-end !important; }
.ppbt-action-menu.ppbt-menu-open {
    opacity: 1 !important; transform: translateY(0) !important; pointer-events: all !important;
}

.ppbt-action-item {
    display: flex !important; align-items: center !important;
    gap: 0 !important; margin: 0 !important; padding: 0 !important;
}
#ppbt-wrapper.ppbt-pos-bottom-right .ppbt-action-item { flex-direction: row-reverse !important; justify-content: flex-end !important; }
.ppbt-action-label { display: none !important; }
.ppbt-action-btn {
    width: 48px !important; height: 48px !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border: none !important; cursor: pointer !important; text-decoration: none !important;
    flex-shrink: 0 !important; box-shadow: 0 3px 12px rgba(0,0,0,0.2) !important;
    transition: transform .2s, box-shadow .2s !important; margin: 0 !important; padding: 0 !important;
}
.ppbt-action-btn:hover { transform: scale(1.1) !important; box-shadow: 0 5px 18px rgba(0,0,0,0.25) !important; }
.ppbt-btn-whatsapp { background: #25D366 !important; }
.ppbt-btn-email    { background: #EF4444 !important; }
.ppbt-btn-phone    { background: #22C55E !important; }
.ppbt-btn-chatbot  { background: var(--aichat-primary, #6C2BD9) !important; position: relative !important; }

.ppbt-window {
    position: fixed !important;
    bottom: 90px !important; right: 90px !important; left: auto !important; top: auto !important;
    width: 360px !important; max-height: 520px !important; min-height: 400px !important;
    background: #ffffff !important; border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    transform: translateY(12px) scale(0.97) !important;
    transition: opacity .25s, transform .25s, visibility .25s !important;
    z-index: 999998 !important; margin: 0 !important; padding: 0 !important;
}
.ppbt-pos-bottom-right .ppbt-window { right: 90px !important; left: auto !important; }
.ppbt-pos-bottom-left  .ppbt-window { left: 90px !important; right: auto !important; }
.ppbt-window.ppbt-open {
    opacity: 1 !important; visibility: visible !important;
    pointer-events: all !important; transform: translateY(0) scale(1) !important;
}

.ppbt-header {
    background: var(--aichat-primary, #6C2BD9) !important;
    padding: 14px 16px !important; display: flex !important;
    align-items: center !important; justify-content: space-between !important;
    color: white !important; flex-shrink: 0 !important; margin: 0 !important;
}
.ppbt-header-info { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; }
.ppbt-avatar {
    width: 36px !important; height: 36px !important; border-radius: 50% !important;
    background: rgba(255,255,255,0.2) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: white !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important;
}
.ppbt-bot-name { display: block !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; }
.ppbt-status   { display: block !important; font-size: 11px !important; opacity: .75 !important; margin: 0 !important; padding: 0 !important; }
.ppbt-status-dot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #4ADE80 !important; margin-right: 4px !important; }
.ppbt-close-btn {
    background: transparent !important; border: none !important; border-radius: 50% !important;
    cursor: pointer !important; display: flex !important; align-items: center !important;
    justify-content: center !important; padding: 4px !important; transition: background .2s !important; margin: 0 !important;
}
.ppbt-close-btn:hover { background: rgba(255,255,255,0.15) !important; }

.ppbt-messages {
    flex: 1 !important; overflow-y: auto !important; padding: 16px !important;
    display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 !important;
}
.ppbt-messages::-webkit-scrollbar { width: 4px !important; }
.ppbt-messages::-webkit-scrollbar-track { background: transparent !important; }
.ppbt-messages::-webkit-scrollbar-thumb { background: #D1D5DB !important; border-radius: 2px !important; }

.ppbt-msg { display: flex !important; gap: 8px !important; align-items: flex-end !important; animation: ppbtFadeIn .25s ease !important; margin: 0 !important; padding: 0 !important; }
@keyframes ppbtFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ppbt-msg-bot  { flex-direction: row !important; }
.ppbt-msg-user { flex-direction: row-reverse !important; }
.ppbt-msg-avatar {
    width: 28px !important; height: 28px !important; border-radius: 50% !important; flex-shrink: 0 !important;
    background: var(--aichat-primary, #6C2BD9) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: white !important; font-size: 13px !important; margin: 0 !important; padding: 0 !important;
}
.ppbt-bubble {
    max-width: 80% !important; padding: 10px 14px !important; border-radius: 16px !important;
    font-size: 14px !important; line-height: 1.55 !important; word-break: break-word !important; margin: 0 !important;
}
.ppbt-msg-bot  .ppbt-bubble { background: #F3F4F6 !important; color: #1F2937 !important; border-bottom-left-radius: 4px !important; }
.ppbt-msg-user .ppbt-bubble { background: var(--aichat-primary, #6C2BD9) !important; color: white !important; border-bottom-right-radius: 4px !important; }
.ppbt-msg-error .ppbt-bubble { background: #FEF2F2 !important; color: #991B1B !important; border: 1px solid #FECACA !important; }

.ppbt-typing .ppbt-bubble { background: #F3F4F6 !important; padding: 12px 16px !important; }
.ppbt-typing-dots { display: flex !important; gap: 4px !important; align-items: center !important; }
.ppbt-typing-dots span {
    width: 7px !important; height: 7px !important; background: #9CA3AF !important;
    border-radius: 50% !important; animation: ppbtBounce 1.2s infinite ease-in-out !important;
    display: inline-block !important; margin: 0 !important;
}
.ppbt-typing-dots span:nth-child(1) { animation-delay: 0s !important; }
.ppbt-typing-dots span:nth-child(2) { animation-delay: 0.2s !important; }
.ppbt-typing-dots span:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes ppbtBounce {
    0%,60%,100% { transform: translateY(0); opacity: .5; }
    30%          { transform: translateY(-6px); opacity: 1; }
}

.ppbt-input-wrap { padding: 8px 12px !important; border-top: 1px solid #f0f0f0 !important; background: #fff !important; flex-shrink: 0 !important; margin: 0 !important; }
.ppbt-input-row {
    display: flex !important; align-items: center !important; gap: 6px !important;
    background: white !important; border: 1px solid #E5E7EB !important;
    border-radius: 8px !important; padding: 4px 4px 4px 10px !important;
    transition: border-color .2s !important; margin: 0 !important;
}
.ppbt-input-row:focus-within { border-color: var(--aichat-primary, #6C2BD9) !important; box-shadow: 0 0 0 3px rgba(108,43,217,0.1) !important; }
.ppbt-input {
    flex: 1 !important; border: none !important; outline: none !important; resize: none !important;
    font-size: 13px !important; line-height: 1.4 !important; max-height: 60px !important;
    background: transparent !important; color: #1F2937 !important; font-family: inherit !important;
    min-height: 0px !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important;
}
.ppbt-send-btn {
    background: var(--aichat-primary, #6C2BD9) !important;
    height: 36px !important; width: 36px !important; border-radius: 6px !important; flex-shrink: 0 !important;
    transition: background .2s, transform .1s !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border: none !important; cursor: pointer !important; margin: 0 !important; padding: 0 !important;
}
.ppbt-send-btn svg { display: block !important; width: 14px !important; height: 14px !important; pointer-events: none !important; }
.ppbt-send-btn svg path { fill: white !important; }
.ppbt-send-btn:hover   { opacity: .88 !important; }
.ppbt-send-btn:active  { transform: scale(0.93) !important; }
.ppbt-send-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; }

.ppbt-link {
    display: inline-block !important; margin-top: 6px !important; padding: 4px 10px !important;
    border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important;
    text-decoration: none !important; background: rgba(255,255,255,0.2) !important;
    color: inherit !important; border: 1px solid rgba(255,255,255,0.3) !important; transition: background .2s !important;
}
.ppbt-msg-bot .ppbt-link { background: rgba(108,43,217,0.08) !important; border-color: rgba(108,43,217,0.2) !important; color: var(--aichat-primary, #6C2BD9) !important; }
.ppbt-link:hover { opacity: .8 !important; }

.ppbt-list-item { display: flex !important; gap: 8px !important; align-items: flex-start !important; margin: 4px 0 !important; padding: 0 !important; }
.ppbt-list-num {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 20px !important; height: 20px !important; border-radius: 50% !important;
    background: var(--aichat-primary, #6C2BD9) !important; color: white !important;
    font-size: 11px !important; font-weight: 700 !important; flex-shrink: 0 !important; margin-top: 1px !important;
}
.ppbt-msg-user .ppbt-list-num { background: rgba(255,255,255,0.3) !important; }

.ppbt-toggle-btn svg { width: 26px !important; height: 26px !important; display: block !important; }
.ppbt-icon-open  { align-items: center !important; justify-content: center !important; }
.ppbt-icon-close { align-items: center !important; justify-content: center !important; }
@media (max-width: 420px) {
    .ppbt-window { width: calc(100vw - 24px) !important; right: 0 !important; left: 0 !important; margin: 0 12px !important; bottom: 80px !important; }
    #ppbt-wrapper.ppbt-pos-bottom-right, #ppbt-wrapper.ppbt-pos-bottom-left { right: 12px !important; left: 12px !important; }
}