/* =========================================
   RL Portable Popup Styles
   ========================================= */

/* CONTAINER: Fixed positioning, hidden by default, blocks no clicks */
#rl-portable-popup {
    position: fixed;
    bottom: 90px;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 16px;
    pointer-events: none; /* Critical: Clicks pass through when hidden */
    visibility: hidden;   /* Critical: Visually gone */
    opacity: 0;           /* Transparent */
    transition: visibility 0.3s, opacity 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ACTIVE STATE: Visible and clickable */
#rl-portable-popup.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto; /* Re-enable clicking */
}

/* PANEL DESIGN */
#rl-portable-popup .rl-panel {
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    max-width: 340px;
    width: 100%;
    position: relative;
    
    /* Animation: Slide Up Effect */
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}

/* Slide up when active */
#rl-portable-popup.is-active .rl-panel {
    transform: translateY(0);
}

/* CONTENT STYLES */
#rl-portable-popup .rl-header { display: flex; gap: 10px; margin-bottom: 12px; }
#rl-portable-popup .rl-icon { font-size: 20px; line-height: 1; margin-top: 1px; }
#rl-portable-popup .rl-title { font-size: 15px; font-weight: 600; margin: 0 0 4px 0; line-height: 1.3; }
#rl-portable-popup .rl-desc { font-size: 13px; margin: 0; opacity: .7; line-height: 1.4; }
#rl-portable-popup .rl-actions { display: flex; gap: 8px; margin-top: 12px; }
#rl-portable-popup .rl-btn { flex: 1; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all .2s ease; text-align: center; }
#rl-portable-popup .rl-btn:active { transform: scale(.98); }
#rl-portable-popup .rl-close { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; cursor: pointer; border: none; background: transparent; font-size: 16px; line-height: 1; padding: 0; opacity: .6; transition: opacity .2s; }
#rl-portable-popup .rl-close:hover { opacity: 1; }

/* DARK MODE COLORS */
@media (prefers-color-scheme:dark) {
    #rl-portable-popup .rl-panel { background: #1a1a1a; border: 1px solid #333; color: #e0e0e0; }
    #rl-portable-popup .rl-btn { background: #2a2a2a; color: #e0e0e0; border-color: #444; }
    #rl-portable-popup .rl-btn:hover { background: #333; border-color: #555; }
    #rl-portable-popup .rl-btn-primary { background: #f0f0f0; color: #1a1a1a; border-color: #f0f0f0; }
    #rl-portable-popup .rl-btn-primary:hover { background: #fff; border-color: #fff; }
    #rl-portable-popup .rl-close { color: #888; }
    #rl-portable-popup .rl-close:hover { color: #e0e0e0; }
}

/* LIGHT MODE COLORS */
@media (prefers-color-scheme:light) {
    #rl-portable-popup .rl-panel { background: #fff; border: 1px solid #e0e0e0; color: #1a1a1a; }
    #rl-portable-popup .rl-btn { background: #f5f5f5; color: #1a1a1a; border-color: #d0d0d0; }
    #rl-portable-popup .rl-btn:hover { background: #e8e8e8; border-color: #c0c0c0; }
    #rl-portable-popup .rl-btn-primary { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
    #rl-portable-popup .rl-btn-primary:hover { background: #000; border-color: #000; }
    #rl-portable-popup .rl-close { color: #666; }
    #rl-portable-popup .rl-close:hover { color: #1a1a1a; }
}