/* ═══════════════════════════════════════════
   PATO CHAT PRO v4.1.8 — UI Refinement
   Emoji Drawer & Precision Alignment
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --pcp-bg: #0C0C12;
    --pcp-header: #14151D;
    --pcp-sidebar: #13141B;
    --pcp-accent: #2481CC;
    --pcp-text: #E1E1E6;
    --pcp-bubble-own: #1565C0;
    --pcp-bubble-other: #20222e;
    --pcp-border: rgba(255, 255, 255, 0.1);
}

#pcp-root {
    font-family: 'Outfit', sans-serif !important;
    width: 100% !important;
    height: 650px !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--pcp-bg) !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    border: 1px solid var(--pcp-border) !important;
}

.pcp-chat-container { display: flex !important; flex: 1 !important; width: 100% !important; height: 100% !important; overflow: hidden !important;}

/* ── ÁREA PRINCIPAL EXPANDIDA ── */
.pcp-main { 
    flex: 1 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    height: 100% !important;
    background: var(--pcp-bg) !important;
    min-width: 0 !important;
    border-right: 1px solid var(--pcp-border) !important;
}

/* ── MENSAJES ── */
.pcp-messages { 
    flex: 1 !important; 
    overflow-y: auto !important; 
    padding: 20px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 12px !important;
}

/* ── CAJÓN DE EMOJIS (OCULTO POR DEFECTO) ── */
.pcp-emoji-panel {
    display: none !important; /* SE ACTIVA CON EL BOTÓN 😃 */
    width: 100% !important;
    height: 120px !important;
    background: rgba(0,0,0,0.4) !important;
    border-top: 1px solid var(--pcp-border) !important;
    padding: 15px !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    overflow-y: auto !important;
    backdrop-filter: blur(10px) !important;
}
.pcp-emoji-opt {
    font-size: 24px !important;
    cursor: pointer !important;
    transition: transform 0.1s !important;
    display: inline-block !important;
}
.pcp-emoji-opt:hover { transform: scale(1.3) !important; }

/* ── BARRA DE ENTRADA PRO ── */
.pcp-input-bar { 
    width: 100% !important;
    padding: 15px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    background: rgba(0,0,0,0.3) !important;
    border-top: 1px solid var(--pcp-border) !important;
}
.pcp-msg-input { 
    flex: 1 !important; 
    width: 100% !important;
    border: 1px solid rgba(255,255,255,0.1) !important; 
    padding: 12px 20px !important; 
    border-radius: 30px !important; 
    background: rgba(255,255,255,0.05) !important; 
    color: #fff !important; 
    font-size: 15px !important;
    outline: none !important;
}
.pcp-btn-send {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 20px !important;
    transition: transform 0.2s !important;
}
.pcp-btn-send:hover { transform: rotate(-15deg) scale(1.1) !important; }

/* ── SIDEBAR FIJA ── */
.pcp-sidebar { 
    width: 250px !important;
    background: var(--pcp-sidebar) !important; 
    overflow-y: auto !important; 
    flex-shrink: 0 !important;
}
.pcp-online-item { padding: 12px 20px !important; display: flex !important; align-items: center !important; gap: 12px !important; }
.pcp-online-name { font-size: 14px !important; font-weight: 500 !important; color: #E1E1E6 !important; }

/* ── MESSAGE ROWS ── */
.pcp-msg-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 10px !important;
    align-self: flex-start !important;
.pcp-msg-row.is-own {
    flex-direction: row-reverse !important;
    align-self: flex-end !important;
}
/* ── BUBBLES ESTILO WHATSAPP ── */
.pcp-msg-row.is-own .pcp-bubble {
    border-radius: 12px 12px 0 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.pcp-msg-row:not(.is-own) .pcp-bubble {
    border-radius: 12px 12px 12px 0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

/* ── BUBBLES ── */
.pcp-bubble { width: fit-content !important; min-width: 100px !important; max-width: 85% !important; padding: 10px 14px !important; position: relative !important; margin-bottom: 2px !important; word-break: break-word !important; }

/* ── REACCIONES ── */
.pcp-react-bar {
    display: flex !important;
    gap: 4px !important;
    margin-top: 4px !important;
}
.pcp-msg-row.is-own .pcp-react-bar { justify-content: flex-end !important; }

.pcp-react-chip {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}
.pcp-react-chip:hover { background: rgba(255,255,255,0.2) !important; }

.pcp-react-picker {
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important;
    background: #20222e !important;
    border: 1px solid var(--pcp-border) !important;
    border-radius: 20px !important;
    padding: 5px 10px !important;
    display: none !important;
    gap: 10px !important;
    z-index: 100 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}
.pcp-msg-row.is-own .pcp-react-picker { left: auto !important; right: 0 !important; }
.pcp-react-btn { cursor: pointer !important; font-size: 18px !important; transition: transform 0.1s !important; }
.pcp-react-btn:hover { transform: scale(1.3) !important; }

.pcp-bubble:hover .pcp-react-trigger { opacity: 1 !important; }
.pcp-react-trigger {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: -30px !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
    font-size: 16px !important;
    color: #888 !important;
}
.pcp-msg-row.is-own .pcp-react-trigger { right: auto !important; left: -30px !important; }

@media (max-width: 800px) { 
    .pcp-sidebar { display: none !important; }
    .pcp-input-bar { padding: 10px !important; gap: 8px !important; }
    #pcp-msg-box { padding: 10px 15px !important; font-size: 14px !important; }
    #pcp-send-it { width: 42px !important; height: 42px !important; font-size: 18px !important; flex-shrink: 0 !important; min-width: 42px !important; }
    #pcp-em-btn { font-size: 22px !important; flex-shrink: 0 !important; }
    .pcp-messages { padding: 12px !important; gap: 8px !important; }
    .pcp-bubble { max-width: 80% !important; padding: 6px 12px !important; font-size: 14px !important; }
}