/* ==========================================================================
   RapidParty V2 — Global Redesigned Styles
   File: webroot/css/rapidparty_v2.css
   
   Common design tokens + reusable component styles for all V2/V3 pages.
   Site-wide CSS. Uses --rp-* custom properties set by JS or PHP.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* --- Brand --- */
    --rp-primary: #3b82f6;
    --rp-primary-rgb: 59, 130, 246;
    --rp-primary-light: #eff6ff;
    --rp-primary-dark: #2563eb;
    --rp-accent: #6c5ce7;
    --rp-accent-rgb: 108, 92, 231;

    /* --- Semantic --- */
    --rp-success: #10b981;
    --rp-danger: #ef4444;
    --rp-warning: #f59e0b;

    /* --- Typography --- */
    --rp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rp-font-heading: 'DM Sans', 'Inter', -apple-system, sans-serif;
    --rp-text: #1a1a2e;
    --rp-text-secondary: #6b7280;
    --rp-text-tertiary: #9ca3af;
    --rp-text-muted: #555;

    /* --- Surface --- */
    --rp-bg: #f8f7f4;
    --rp-bg-alt: #f7f5f0;
    --rp-surface: #ffffff;
    --rp-surface-hover: #fafaf8;
    --rp-border: #e8e5e0;

    /* --- Elevation --- */
    --rp-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --rp-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --rp-shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
    --rp-shadow-hover: rgba(0,0,0,0.14);

    /* --- Radii --- */
    --rp-radius: 12px;
    --rp-radius-sm: 8px;
    --rp-radius-xs: 6px;
    --rp-radius-lg: 18px;
    --rp-radius-full: 9999px;
}

#lottie-fullscreen-bg { pointer-events: none; }

/* ==========================================================================
   1A. INTRO / TUTORIAL STYLES
   ========================================================================== */
.introjs-tooltip.rp-v2-intro,
.rp-v2-intro .introjs-tooltip {
    min-width: 280px;
    max-width: 340px;
    border-radius: 18px;
    border: 1px solid rgba(10, 40, 80, 0.08);
    box-shadow: 0 20px 50px rgba(11, 35, 64, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, 0.96);
    padding: 8px;
}

.rp-v2-intro .introjs-tooltip-title {
    display: none;
}

.rp-v2-intro .introjs-tooltiptext {
    color: #12324a;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
    padding: 10px 12px 8px;
}

.rp-v2-intro .introjs-arrow {
    border-bottom-color: rgba(255, 255, 255, 0.96) !important;
}

.rp-v2-intro .introjs-skipbutton,
.rp-v2-intro .introjs-prevbutton,
.rp-v2-intro .introjs-nextbutton,
.rp-v2-intro .introjs-donebutton {
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    text-shadow: none;
    font-weight: 700;
    font-size: 12px;
    padding: 10px 16px;
    margin: 0 4px;
}

.rp-v2-intro .introjs-skipbutton,
.rp-v2-intro .introjs-prevbutton {
    background: rgba(18, 50, 74, 0.08);
    color: #12324a;
}

.rp-v2-intro .introjs-nextbutton,
.rp-v2-intro .introjs-donebutton {
    background: linear-gradient(135deg, #0f6cbd, #0b57a3);
    color: #fff;
}

.rp-v2-intro .introjs-bullets,
.rp-v2-intro .introjs-progress {
    display: none;
}

.rp-v2-intro .introjs-tooltipbuttons {
    border-top: 0;
    padding: 8px 8px 4px;
}

.introjs-helperLayer.rp-v2-intro-highlight {
    border-radius: 999px !important;
    box-shadow: 0 0 0 6px rgba(15, 108, 189, 0.18), 0 14px 40px rgba(15, 108, 189, 0.24) !important;
}

.introjs-overlay {
    background: rgba(6, 22, 38, 0.42) !important;
}

@media (max-width: 767px) {
    .introjs-tooltip.rp-v2-intro,
    .rp-v2-intro .introjs-tooltip {
        min-width: 0;
        max-width: calc(100vw - 32px);
    }

    .rp-v2-intro .introjs-tooltiptext {
        font-size: 14px;
        line-height: 1.45;
    }
}

/* ==========================================================================
   1B. EVENT RSVP MODAL STYLES
   ========================================================================== */
body.rp-v2-event #myModal .modal-dialog,
body.rp-v2-event [id^="myModal"] .modal-dialog,
body.rp-v2-event #rsvpStatusModal .modal-dialog,
body.rp-v2-event #rsvpStatusModalPC .modal-dialog {
    max-width: 560px;
}

body.rp-v2-event #myModal .modal-content,
body.rp-v2-event [id^="myModal"] .modal-content,
body.rp-v2-event #rsvpStatusModal .modal-content,
body.rp-v2-event #rsvpStatusModalPC .modal-content {
    border: 1px solid rgba(102, 126, 234, 0.18);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(44, 33, 84, 0.28);
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(246,247,255,0.98));
}

body.rp-v2-event #myModal .modal-header,
body.rp-v2-event [id^="myModal"] .modal-header,
body.rp-v2-event #rsvpStatusModal .modal-header,
body.rp-v2-event #rsvpStatusModalPC .modal-header {
    border-bottom: 0;
    padding: 22px 24px 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body.rp-v2-event #myModal .modal-title,
body.rp-v2-event [id^="myModal"] .modal-title,
body.rp-v2-event #rsvpStatusModal .modal-title,
body.rp-v2-event #rsvpStatusModalPC .modal-title {
    font-family: var(--rp-font-heading);
    font-weight: 800;
    font-size: 1.35rem;
    color: #fff;
    letter-spacing: -0.025em;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 1px 2px rgba(25, 20, 54, 0.22);
}

body.rp-v2-event #myModal .close,
body.rp-v2-event [id^="myModal"] .close,
body.rp-v2-event #rsvpStatusModal .close,
body.rp-v2-event #rsvpStatusModalPC .close {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.16);
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 8px 18px rgba(25, 20, 54, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.rp-v2-event #myModal .close:hover,
body.rp-v2-event [id^="myModal"] .close:hover,
body.rp-v2-event #rsvpStatusModal .close:hover,
body.rp-v2-event #rsvpStatusModalPC .close:hover,
body.rp-v2-event #myModal .close:focus,
body.rp-v2-event [id^="myModal"] .close:focus,
body.rp-v2-event #rsvpStatusModal .close:focus,
body.rp-v2-event #rsvpStatusModalPC .close:focus {
    color: #fff !important;
    background: rgba(255,255,255,0.26);
    outline: none;
}

body.rp-v2-event #myModal .modal-body,
body.rp-v2-event [id^="myModal"] .modal-body,
body.rp-v2-event #rsvpStatusModal .modal-body,
body.rp-v2-event #rsvpStatusModalPC .modal-body {
    padding: 26px 24px 24px;
    color: var(--rp-text);
    font-family: var(--rp-font-body);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.rp-v2-event #myModal .notifyMessage > p,
body.rp-v2-event #rsvpStatusModal .custom-modal-body > p,
body.rp-v2-event #rsvpStatusModalPC .custom-modal-body > p {
    color: #525b75;
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 500;
    margin-bottom: 18px;
}

body.rp-v2-event #myModal .form-control,
body.rp-v2-event [id^="myModal"] .form-control {
    border: 1px solid rgba(102, 126, 234, 0.18) !important;
    border-radius: 16px;
    min-height: 52px;
    padding: 13px 16px;
    background: linear-gradient(180deg, #ffffff, #f9faff) !important;
    color: #1f2940 !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02), 0 1px 0 rgba(255,255,255,0.65);
}

body.rp-v2-event #myModal .form-control::placeholder,
body.rp-v2-event [id^="myModal"] .form-control::placeholder {
    color: #8a93ad;
    font-weight: 500;
}

body.rp-v2-event #myModal .form-control:focus,
body.rp-v2-event [id^="myModal"] .form-control:focus {
    border-color: rgba(118, 75, 162, 0.42) !important;
    box-shadow: 0 0 0 4px rgba(118, 75, 162, 0.12), 0 10px 24px rgba(102, 126, 234, 0.08);
}

body.rp-v2-event #myModal .btn-group .form-control,
body.rp-v2-event [id^="myModal"] .btn-group .form-control {
    min-height: 52px;
    border-radius: 16px;
}

body.rp-v2-event #myModal #rsvp_button,
body.rp-v2-event [id^="myModal"] #rsvp_button,
body.rp-v2-event #rsvpSignInBtn {
    border: 0 !important;
    border-radius: 999px !important;
    min-height: 46px;
    padding: 12px 22px !important;
    background: linear-gradient(135deg, var(--rp-primary), var(--rp-primary-dark)) !important;
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 24px rgba(var(--rp-primary-rgb), 0.28);
}

body.rp-v2-event #rsvpStatusModalClose {
    color: #5b57b8 !important;
    font-weight: 700;
}

body.rp-v2-event #rsvpStatusModal hr,
body.rp-v2-event #rsvpStatusModalPC hr {
    border-top-color: rgba(var(--rp-primary-rgb), 0.12) !important;
}

body.rp-v2-event #rsvpStatusModal .social-btns,
body.rp-v2-event #rsvpStatusModalPC .social-btns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 16px;
    background: rgba(var(--rp-primary-rgb), 0.06);
    border: 1px solid rgba(var(--rp-primary-rgb), 0.1);
}

/* ==========================================================================
   2. REUSABLE CARD SYSTEM
   ========================================================================== */
/* --- Inset-glow bordered card (event single, etc) --- */
.custom-border-card {
    background: var(--rp-surface) !important;
    border: 3px solid rgba(var(--rp-primary-rgb), 0.30) !important;
    border-radius: var(--rp-radius) !important;
    box-shadow:
        inset 0 0 18px rgba(var(--rp-primary-rgb), 0.12),
        inset 0 0 5px rgba(var(--rp-accent-rgb), 0.08),
        0 2px 12px var(--rp-shadow) !important;
    transition: box-shadow 0.3s ease, transform 0.25s ease, border-color 0.3s ease !important;
    position: relative !important;
}
.custom-border-card:hover {
    border-color: rgba(var(--rp-primary-rgb), 0.50) !important;
    box-shadow:
        inset 0 0 28px rgba(var(--rp-primary-rgb), 0.20),
        inset 0 0 8px rgba(var(--rp-accent-rgb), 0.14),
        0 6px 24px var(--rp-shadow-hover) !important;
    transform: translateY(-2px) !important;
}
.custom-border-card h5.title {
    color: var(--rp-primary-dark) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.01em;
}
.custom-border-card,
.custom-border-card p,
.custom-border-card span,
.custom-border-card li,
.custom-border-card .commented-user-profile-details h5,
.custom-border-card .commented-user-profile-details p,
.custom-border-card .commented-user-profile-dec p,
.custom-border-card .commented-reaply-btn span,
.custom-border-card .guests-tab-inner-content ul li p,
.custom-border-card .guests-tab-inner-content .plus-numbers {
    color: var(--rp-text) !important;
}
.custom-border-card a:not(.btn-group):not(.imin):not(.btn):not(.nav-link) {
    color: var(--rp-primary) !important;
}
.custom-border-card .event_services_pip_box img.imageThumb {
    border-radius: var(--rp-radius-sm) !important;
}
.custom-border-card .event_services_pip_box {
    border-radius: 12px;
    overflow: hidden;
}
.custom-border-card.description-box {
    padding: 20px !important;
}
.custom-border-card.description-box p {
    color: #444 !important;
    line-height: 1.7;
}

/* --- Simple flat card --- */
.rp-card {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow-sm);
    padding: 20px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rp-card:hover {
    box-shadow: var(--rp-shadow-md);
    transform: translateY(-2px);
}

/* --- Tile card (for grids/carousels) --- */
.rp-tile {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rp-tile:hover {
    box-shadow: var(--rp-shadow-md);
    transform: translateY(-2px);
}
.rp-tile > a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ==========================================================================
   3. ACTION TOOLBAR — Inline icon+label buttons (Invite, Share, Delete)
   
   Used in dashboard cards, event listings, group listings, etc.
   Completely resets old .event-action-area styles when inside .rp-actions.
   ========================================================================== */
.rp-actions {
    position: static !important;
    top: auto !important; right: auto !important;
    left: auto !important; bottom: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 8px 12px 4px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
    display: block !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    transition: none !important;
}
.rp-actions ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
    text-align: left !important;
}
.rp-actions ul li {
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    list-style: none !important;
    border: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    display: inline-flex !important;
}
.rp-actions ul li:hover {
    background: transparent !important;
    background-color: transparent !important;
}
.rp-actions ul li:first-child,
.rp-actions ul li:last-child {
    border-radius: 0 !important;
}

/* --- Pill button base --- */
.rp-actions ul li a,
.rp-actions ul li a.delbutton,
.rp-actions ul li a.copy-link,
.rp-actions ul li label {
    color: var(--rp-text-secondary) !important;
    font-family: var(--rp-font-body) !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: var(--rp-radius-xs) !important;
    border: 1px solid var(--rp-border) !important;
    background: var(--rp-surface) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    float: none !important;
}
.rp-actions ul li a:hover,
.rp-actions ul li label:hover {
    color: var(--rp-primary) !important;
    border-color: var(--rp-primary) !important;
    background: var(--rp-primary-light) !important;
}
.rp-actions ul li a br {
    display: none !important;
}
.rp-actions ul li a span {
    display: inline !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    color: inherit !important;
}
.rp-actions ul li a i,
.rp-actions ul li label i {
    font-size: 0.65rem !important;
    color: inherit !important;
    height: auto !important;
    width: auto !important;
    float: none !important;
    line-height: 1 !important;
}

/* --- Delete pill → danger on hover --- */
.rp-actions ul li a.delbutton,
.rp-actions ul li .delbutton {
    color: var(--rp-text-tertiary) !important;
    border-color: var(--rp-border) !important;
}
.rp-actions ul li a.delbutton:hover,
.rp-actions ul li .delbutton:hover {
    color: var(--rp-danger) !important;
    border-color: var(--rp-danger) !important;
    background: rgba(239,68,68,0.04) !important;
}
.rp-actions ul li .readonly {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* --- Share box inside toolbar --- */
.rp-actions .share-box,
.rp-actions .share-box.share-label {
    position: relative !important;
    margin: 0 !important;
    display: inline-flex !important;
}
.rp-actions .share-box label {
    color: var(--rp-text-secondary) !important;
    font-family: var(--rp-font-body) !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: var(--rp-radius-xs) !important;
    border: 1px solid var(--rp-border) !important;
    background: var(--rp-surface) !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    margin: 0 !important;
}
.rp-actions .share-box label:hover {
    color: var(--rp-primary) !important;
    border-color: var(--rp-primary) !important;
    background: var(--rp-primary-light) !important;
}
.rp-actions .share-box label br {
    display: none !important;
}

/* --- Share menu dropdown --- */
.rp-actions ul.share-menu,
.rp-actions .share-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-top: 4px !important;
    background: var(--rp-surface) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: var(--rp-radius-sm) !important;
    box-shadow: var(--rp-shadow-md) !important;
    padding: 4px !important;
    z-index: 20 !important;
    list-style: none !important;
    display: none;
    flex-direction: row !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}
.rp-actions ul.share-menu::after,
.rp-actions .share-menu::after {
    display: none !important;
}
.rp-actions .share-menu li.share-menu-item {
    float: none !important;
    overflow: visible !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    background: transparent !important;
}
.rp-actions .share-menu li.share-menu-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: var(--rp-radius-xs) !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1 !important;
}
.rp-actions .share-menu li.share-menu-item a:hover {
    background: var(--rp-primary-light) !important;
}
.rp-actions .share-menu li.share-menu-item a[class*="facebook"] {
    color: #4d64a7 !important;
    background: transparent !important;
}
.rp-actions .share-menu li.share-menu-item a[class*="twitter"] {
    color: #1DA1F2 !important;
    background: transparent !important;
}

/* ==========================================================================
   4. RSVP / CTA BUTTON SYSTEM
   
   Reusable button patterns for I'm In, Interested, Maybe, Accept, Reject, etc.
   ========================================================================== */
/* --- Primary CTA (solid) --- */
.rp-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 16px !important;
    border-radius: var(--rp-radius-xs) !important;
    font-family: var(--rp-font-body) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    background: var(--rp-primary) !important;
    border: 1.5px solid var(--rp-primary) !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.rp-btn-primary:hover {
    background: var(--rp-primary-dark) !important;
    border-color: var(--rp-primary-dark) !important;
    color: #fff !important;
}

/* --- Secondary (outline) --- */
.rp-btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 16px !important;
    border-radius: var(--rp-radius-xs) !important;
    font-family: var(--rp-font-body) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    background: var(--rp-surface) !important;
    border: 1.5px solid var(--rp-border) !important;
    color: var(--rp-text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.rp-btn-secondary:hover {
    border-color: var(--rp-primary) !important;
    color: var(--rp-primary) !important;
    background: var(--rp-primary-light) !important;
}

/* --- Danger outline --- */
.rp-btn-danger-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 16px !important;
    border-radius: var(--rp-radius-xs) !important;
    font-family: var(--rp-font-body) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: 1.5px solid var(--rp-border) !important;
    color: var(--rp-text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
.rp-btn-danger-outline:hover {
    border-color: var(--rp-danger) !important;
    color: var(--rp-danger) !important;
    background: rgba(239,68,68,0.04) !important;
}

/* --- Status badge --- */
.rp-badge {
    font-family: var(--rp-font-body);
    font-size: 0.66rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--rp-radius-full);
    display: inline-block;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.rp-badge-success {
    color: #fff;
    background: var(--rp-success);
}
.rp-badge-warning {
    color: #fff;
    background: var(--rp-warning);
}
.rp-badge-danger {
    color: #fff;
    background: var(--rp-danger);
}

/* ==========================================================================
   5. SECTION PANEL SYSTEM
   
   Section header (top bar) + content container (bottom)
   Used for dashboard sections, listing pages, etc.
   ========================================================================== */
.rp-section-header {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-bottom: none;
    border-radius: var(--rp-radius) var(--rp-radius) 0 0;
    padding: 14px 18px 10px;
    margin: 0;
    box-shadow: var(--rp-shadow-sm);
}
.rp-section-header h2 {
    font-family: var(--rp-font-heading);
    color: var(--rp-text);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.rp-section-body {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-top: none;
    border-radius: 0 0 var(--rp-radius) var(--rp-radius);
    box-shadow: var(--rp-shadow);
    padding: 10px;
    margin: 0;
}

/* --- View all pill --- */
.rp-view-all {
    background: transparent !important;
    border: 1px solid var(--rp-border) !important;
    color: var(--rp-text-secondary) !important;
    border-radius: var(--rp-radius-full) !important;
    font-family: var(--rp-font-body) !important;
    font-weight: 500 !important;
    font-size: 0.72rem !important;
    padding: 3px 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}
.rp-view-all:hover {
    background: var(--rp-primary-light) !important;
    color: var(--rp-primary) !important;
    border-color: var(--rp-primary) !important;
}

/* ==========================================================================
   6. TILE HERO IMAGE
   ========================================================================== */
.rp-tile-image {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.rp-tile-image--bottom {
    order: 99;
    margin-top: auto;
    border-top: 1px solid var(--rp-border);
    border-radius: 0 0 calc(var(--rp-radius) - 1px) calc(var(--rp-radius) - 1px);
}
.rp-tile-image--top {
    order: -1;
    border-bottom: 1px solid var(--rp-border);
    border-radius: calc(var(--rp-radius) - 1px) calc(var(--rp-radius) - 1px) 0 0;
}

/* ==========================================================================
   7. SCROLLBAR
   ========================================================================== */
.rp-scroll-x::-webkit-scrollbar { height: 4px; }
.rp-scroll-x::-webkit-scrollbar-track { background: transparent; }
.rp-scroll-x::-webkit-scrollbar-thumb { background: var(--rp-border); border-radius: 2px; }
.rp-scroll-x { scrollbar-width: thin; scrollbar-color: var(--rp-border) transparent; }

/* ==========================================================================
   8. GUEST TABS
   ========================================================================== */
.guests-tab .nav-link {
    color: var(--rp-text-muted) !important;
    border-bottom-color: transparent !important;
    font-weight: 500;
    transition: color 0.2s;
}
.guests-tab .nav-link:hover { color: var(--rp-text) !important; }
.guests-tab .nav-link.active {
    color: var(--rp-primary) !important;
    border-bottom: 2px solid var(--rp-primary) !important;
    font-weight: 600;
}

/* ==========================================================================
   9. UTILITY CLASSES
   ========================================================================== */
.rp-text-primary { color: var(--rp-primary) !important; }
.rp-text-dark { color: var(--rp-text) !important; }
.rp-text-muted { color: var(--rp-text-muted) !important; }
.rp-bg-primary-light { background: var(--rp-primary-light) !important; }
.rp-bg-alt { background: var(--rp-bg-alt) !important; }
.rp-border-primary { border-color: rgba(var(--rp-primary-rgb), 0.30) !important; }

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --rp-radius: 10px;
        --rp-radius-sm: 8px;
        --rp-radius-lg: 14px;
    }
}

/* ==========================================================================
   11. LOTTIE BACKGROUND TRANSPARENCY
   Active ONLY when #lottie-fullscreen-bg exists on the page.
   Uses :has() to detect lottie presence — no PHP needed.
   Every wrapper between <html> and the content cards becomes fully
   transparent so the animation renders at full colour. Cards keep a
   frosted-glass effect via backdrop-filter.
   ========================================================================== */

/* --- Lottie layer positioning -------------------------------------------- */
#lottie-fullscreen-bg {
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0 !important;
    pointer-events: none;
}
#lottie-fullscreen-bg lottie-player {
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0 !important;
}

/* --- Override design tokens when lottie is present ----------------------- */
html:has(#lottie-fullscreen-bg) {
    --rp-page-bg: transparent;
    /* Use host's design colour + alpha for card tints (mirrors V1 approach) */
    --rp-bg: rgba(var(--rp-host-card-rgb), var(--rp-host-card-alpha));
    --rp-bg-alt: rgba(var(--rp-host-card-rgb), calc(var(--rp-host-card-alpha) * 0.6));
    --rp-surface: rgba(var(--rp-host-card-rgb), var(--rp-host-card-alpha));
    /* Text follows design font colour */
    --rp-text: var(--rp-host-font);
    --rp-text-muted: var(--rp-host-font);
}

/* --- Nuclear transparent: html + body ------------------------------------ */
html:has(#lottie-fullscreen-bg),
html:has(#lottie-fullscreen-bg) body {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- Nuclear transparent: EVERY structural wrapper ----------------------- */
html:has(#lottie-fullscreen-bg) .service-list-page,
html:has(#lottie-fullscreen-bg) .landing-navbar-banner,
html:has(#lottie-fullscreen-bg) .clearHeader,
html:has(#lottie-fullscreen-bg) .clearHeader.darkHeader,
html:has(#lottie-fullscreen-bg) .darkHeader,
html:has(#lottie-fullscreen-bg) .dark-gray,
html:has(#lottie-fullscreen-bg) .dashboard-sec,
html:has(#lottie-fullscreen-bg) .landing-inner-event-details,
html:has(#lottie-fullscreen-bg) .Eventhost-Block,
html:has(#lottie-fullscreen-bg) .single-event-invitation,
html:has(#lottie-fullscreen-bg) .single-event-invitation .container,
html:has(#lottie-fullscreen-bg) .single-event-invitation .row,
html:has(#lottie-fullscreen-bg) .single-event-invitation [class*="col-"],
html:has(#lottie-fullscreen-bg) .single-event-invitation .mt-3:not(.custom-border-card),
html:has(#lottie-fullscreen-bg) .single-event-invitation .mt-4:not(.custom-border-card),
html:has(#lottie-fullscreen-bg) .single-event-invitation .card,
html:has(#lottie-fullscreen-bg) .single-event-invitation .tab-content,
html:has(#lottie-fullscreen-bg) .single-event-invitation .tab-pane,
html:has(#lottie-fullscreen-bg) .contribute_now_btn,
html:has(#lottie-fullscreen-bg) footer.copyright,
html:has(#lottie-fullscreen-bg) footer.copyright *,
html:has(#lottie-fullscreen-bg) footer.inner-footer,
html:has(#lottie-fullscreen-bg) footer.inner-footer * {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- Content z-stacking over lottie -------------------------------------- */
html:has(#lottie-fullscreen-bg) .landing-inner-event-details.single-event-invitation {
    position: relative !important;
    z-index: 1 !important;
}

/* --- Cards: design-tinted glass when lottie visible ---------------------- */
html:has(#lottie-fullscreen-bg) .custom-border-card {
    background: rgba(var(--rp-host-card-rgb), var(--rp-host-card-alpha)) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
    border-color: rgba(var(--rp-host-card-rgb), calc(var(--rp-host-card-alpha) + 0.08)) !important;
}

/* --- Details card (V2 injected): design-tinted glass -------------------- */
html:has(#lottie-fullscreen-bg) #esv2-injected-details {
    background: rgba(var(--rp-host-card-rgb), var(--rp-host-card-alpha)) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
    border-color: rgba(var(--rp-host-card-rgb), calc(var(--rp-host-card-alpha) + 0.08)) !important;
}

/* --- Contributions box: design-tinted ----------------------------------- */
html:has(#lottie-fullscreen-bg) .contributions-box a {
    background: rgba(var(--rp-host-card-rgb), var(--rp-host-card-alpha)) !important;
    backdrop-filter: blur(12px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
}

/* --- RSVP / dropdown / modal: design-tinted ----------------------------- */
html:has(#lottie-fullscreen-bg) .RSVP,
html:has(#lottie-fullscreen-bg) .going_guest_mobile_hide,
html:has(#lottie-fullscreen-bg) .modal-body-mff,
html:has(#lottie-fullscreen-bg) .dropdown__filter,
html:has(#lottie-fullscreen-bg) .dropdown__select-option {
    background: rgba(var(--rp-host-card-rgb), var(--rp-host-card-alpha)) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* --- Hero image: semi-transparent so lottie peeks through --------------- */
html:has(#lottie-fullscreen-bg) .event-details-banner-image {
    position: relative;
}
html:has(#lottie-fullscreen-bg) .event-details-banner-image img {
    opacity: 0.85 !important;
}
/* Re-enable the gradient overlay with the design's tint colour */
html:has(#lottie-fullscreen-bg) .event-details-banner-image::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(var(--rp-host-card-rgb), var(--rp-host-card-alpha)) 100%
    ) !important;
}

/* --- RSVP bar on hero: design-tinted glass ------------------------------ */
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp {
    background: rgba(var(--rp-host-card-rgb), calc(var(--rp-host-card-alpha) + 0.20)) !important;
    border-color: rgba(var(--rp-host-card-rgb), calc(var(--rp-host-card-alpha) + 0.10)) !important;
}
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp .esv2-rsvp-label {
    color: var(--rp-host-font) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp .esv2-rsvp-buttons a.btn-group {
    background: rgba(255,255,255,0.15) !important;
    color: var(--rp-host-font) !important;
}
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp .esv2-rsvp-buttons a.btn-group:hover {
    background: rgba(255,255,255,0.28) !important;
}
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp .esv2-rsvp-buttons a.btn-group.imin,
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp .esv2-rsvp-buttons a.btn-group.active {
    background: rgba(255,255,255,0.30) !important;
    color: var(--rp-host-font) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.20);
}
/* Others trigger button — lottie */
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp .event-other-listing a.other-status-check {
    background: rgba(255,255,255,0.15) !important;
    color: var(--rp-host-font) !important;
}
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp .event-other-listing a.other-status-check:hover {
    background: rgba(255,255,255,0.28) !important;
}
/* Others dropdown panel — lottie */
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp .event-other-listing p.other-event-single {
    background: rgba(var(--rp-host-card-rgb), calc(var(--rp-host-card-alpha) + 0.35)) !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.12) !important;
}
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp .event-other-listing p.other-event-single a {
    color: var(--rp-host-font) !important;
}
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp .event-other-listing p.other-event-single a:hover {
    background: rgba(255,255,255,0.15) !important;
}
html:has(#lottie-fullscreen-bg) #esv2-injected-rsvp .event-other-listing p.other-event-single a.active {
    background: rgba(255,255,255,0.30) !important;
    color: var(--rp-host-font) !important;
}

/* --- Font colours: use the design's font_color when lottie present ------ */
html:has(#lottie-fullscreen-bg) .custom-border-card h5.title,
html:has(#lottie-fullscreen-bg) .description-box p,
html:has(#lottie-fullscreen-bg) .host-event-descr,
html:has(#lottie-fullscreen-bg) .commented-user-profile-details h5,
html:has(#lottie-fullscreen-bg) .commented-user-profile-dec p,
html:has(#lottie-fullscreen-bg) #esv2-injected-details .esv2-event-title,
html:has(#lottie-fullscreen-bg) #esv2-injected-details .esv2-meta-row,
html:has(#lottie-fullscreen-bg) #esv2-injected-details .esv2-meta-item,
html:has(#lottie-fullscreen-bg) #esv2-injected-details .esv2-address-text,
html:has(#lottie-fullscreen-bg) #esv2-injected-details .esv2-cohosts,
html:has(#lottie-fullscreen-bg) .custom-border-card {
    color: var(--rp-host-font) !important;
}
html:has(#lottie-fullscreen-bg) .custom-border-card a:not(.btn):not(.imin) {
    color: var(--rp-host-font) !important;
    opacity: 0.85;
}
html:has(#lottie-fullscreen-bg) #esv2-injected-details .esv2-meta-item i,
html:has(#lottie-fullscreen-bg) .esv2-directions-link {
    color: var(--rp-host-font) !important;
    opacity: 0.9;
}
/* --- Contributions stats: font colour when lottie present --------------- */
html:has(#lottie-fullscreen-bg) .contributions-box a,
html:has(#lottie-fullscreen-bg) .contributions-box a span,
html:has(#lottie-fullscreen-bg) .contributions-box a h4 {
    color: var(--rp-host-font) !important;
}

/* --- Guest list card: inner elements when lottie present ----------------- */
html:has(#lottie-fullscreen-bg) .guests-tab .nav-link {
    color: var(--rp-host-font) !important;
    opacity: 0.7;
    border-bottom-color: transparent !important;
}
html:has(#lottie-fullscreen-bg) .guests-tab .nav-link:hover {
    opacity: 1;
}
html:has(#lottie-fullscreen-bg) .guests-tab .nav-link.active {
    color: var(--rp-host-font) !important;
    opacity: 1;
    border-bottom-color: var(--rp-host-font) !important;
}
html:has(#lottie-fullscreen-bg) .guests-tab-inner-content ul li {
    border-bottom-color: rgba(var(--rp-host-card-rgb), 0.15) !important;
}
html:has(#lottie-fullscreen-bg) .guests-tab-inner-content ul li h4,
html:has(#lottie-fullscreen-bg) .guests-tab-inner-content ul li p,
html:has(#lottie-fullscreen-bg) .guests-tab-inner-content ul li span,
html:has(#lottie-fullscreen-bg) .guests-tab-inner-content .plus-numbers {
    color: var(--rp-host-font) !important;
}
html:has(#lottie-fullscreen-bg) .guests-tab-inner-content ul li img {
    border-color: rgba(var(--rp-host-card-rgb), 0.30) !important;
}
/* Guest list action buttons */
html:has(#lottie-fullscreen-bg) .solid-btn {
    color: var(--rp-host-font) !important;
    border-color: rgba(var(--rp-host-card-rgb), 0.30) !important;
}
html:has(#lottie-fullscreen-bg) .invite-btn-plus {
    color: var(--rp-host-font) !important;
}
/* Item contributions list text */
html:has(#lottie-fullscreen-bg) .guests-list-scrollable ul li p,
html:has(#lottie-fullscreen-bg) .guests-list-scrollable ul li span,
html:has(#lottie-fullscreen-bg) .guests-list-scrollable ul li a {
    color: var(--rp-host-font) !important;
}

/* --- Header / navbar: frosted glass when lottie present ----------------- */
html:has(#lottie-fullscreen-bg) .landing-page-header-main {
    background: rgba(var(--rp-host-card-rgb), calc(var(--rp-host-card-alpha) + 0.15)) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.15) !important;
    border-bottom: 1px solid rgba(var(--rp-host-card-rgb), 0.20) !important;
}
html:has(#lottie-fullscreen-bg) .landing-page-header-main.sticky {
    background: rgba(var(--rp-host-card-rgb), calc(var(--rp-host-card-alpha) + 0.25)) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.20) !important;
}
/* Nav links + brand text */
html:has(#lottie-fullscreen-bg) .landing-page-header-main .nav-link,
html:has(#lottie-fullscreen-bg) .landing-page-header-main .navbar-brand {
    color: var(--rp-host-font) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
/* Sign-up / Sign-in outline button */
html:has(#lottie-fullscreen-bg) .landing-page-header-main .outline-btn,
html:has(#lottie-fullscreen-bg) .landing-page-header-main .white-outline-btn {
    border-color: var(--rp-host-font) !important;
    color: var(--rp-host-font) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
/* Google button — fix V1's padding:0 / width:100% and restore proper shape */
html:has(#lottie-fullscreen-bg) .landing-page-header-main .btn-danger.google,
html:has(#lottie-fullscreen-bg) .landing-page-header-main .btn.google {
    background: rgba(219,68,55,0.85) !important;
    border-color: transparent !important;
    color: #fff !important;
    padding: 6px 18px !important;
    width: auto !important;
    text-align: center !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    display: inline-block !important;
    margin-right: 6px !important;
}
html:has(#lottie-fullscreen-bg) .landing-page-header-main .btn-danger.google:hover {
    background: rgba(219,68,55,1) !important;
}
/* Facebook button — same fix */
html:has(#lottie-fullscreen-bg) .landing-page-header-main .btn-primary.facebook,
html:has(#lottie-fullscreen-bg) .landing-page-header-main .btn.facebook {
    background: rgba(59,89,152,0.85) !important;
    border-color: transparent !important;
    color: #fff !important;
    padding: 6px 18px !important;
    width: auto !important;
    text-align: center !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    display: inline-block !important;
    margin-right: 6px !important;
}
html:has(#lottie-fullscreen-bg) .landing-page-header-main .btn-primary.facebook:hover {
    background: rgba(59,89,152,1) !important;
}
/* Hamburger toggle icon — invert black icon to white on dark glass header */
html:has(#lottie-fullscreen-bg) .landing-page-header-main .navbar-toggler-icon img {
    filter: invert(1) brightness(2) !important;
}
html:has(#lottie-fullscreen-bg) .landing-page-header-main .navbar-toggler {
    border-color: rgba(255,255,255,0.4) !important;
}
/* Mobile expanded nav — glass background so items are readable */
html:has(#lottie-fullscreen-bg) .landing-page-header-main .navbar-collapse.show,
html:has(#lottie-fullscreen-bg) .landing-page-header-main .navbar-collapse.collapsing {
    background: rgba(var(--rp-host-card-rgb), calc(var(--rp-host-card-alpha) + 0.40)) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-top: 8px !important;
}


/* ===================================================================
   CHAT PAGE — Modern Redesign
   =================================================================== */

/* ---------- Variables ---------- */
:root {
    --rp-chat-bg: #f0f2f5;
    --rp-chat-bubble-own: #dcf8c6;
    --rp-chat-bubble-other: #ffffff;
    --rp-chat-bubble-system: rgba(0,0,0,0.04);
    --rp-chat-accent: #128c7e;
    --rp-chat-accent-hover: #075e54;
    --rp-chat-radius: 18px;
    --rp-chat-radius-sm: 12px;
    --rp-chat-header-h: 64px;
    --rp-chat-input-h: 64px;
}

/* ---------- Chat Area Wrapper ---------- */
.rp-chat-area {
    background: var(--rp-chat-bg) !important;
    padding: 0 !important;
}

/* ---------- Chat Header ---------- */
.rp-chat-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: var(--rp-chat-header-h) !important;
    padding: 10px 18px !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

.rp-chat-header-avatar {
    position: relative;
    flex-shrink: 0;
}

.rp-chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rp-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rp-chat-avatar-fallback {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
}

.rp-chat-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border: 2px solid #fff;
    border-radius: 50%;
}

.rp-chat-header-info {
    flex: 1;
    min-width: 0;
}

.rp-chat-header-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-chat-header-title:hover {
    color: var(--rp-chat-accent);
}

.rp-chat-header-meta {
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-chat-header-meta a {
    color: var(--rp-chat-accent);
    text-decoration: none;
}

.rp-chat-header-meta a:hover {
    text-decoration: underline;
}

.rp-chat-meta-sep {
    margin: 0 6px;
    color: #94a3b8;
}

/* ---------- Typing Indicator ---------- */
.rp-chat-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    font-size: 13px;
    color: #64748b;
    background: rgba(255,255,255,0.85);
    flex-shrink: 0;
}

.rp-typing-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.rp-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: rpTypingBounce 1.4s ease-in-out infinite;
}

.rp-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.rp-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes rpTypingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

/* ---------- Messages Pane ---------- */
.rp-chat-messages {
    padding: 16px 18px !important;
    position: relative;
    background: var(--rp-chat-bg) !important;
    min-height: calc(100% - var(--rp-chat-header-h) - var(--rp-chat-input-h) - 20px);
}

/* Thin scrollbar on chatArea */
#chatArea::-webkit-scrollbar { width: 5px; }
#chatArea::-webkit-scrollbar-track { background: transparent; }
#chatArea::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 10px; }

/* ---------- Chat Row + Bubble (used by JS renderer) ---------- */
.chat-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
    clear: both;
}

.chat-row.me {
    align-items: flex-end !important;
}

.chat-row.other {
    align-items: flex-start !important;
}

.chat-row.system-row {
    align-items: center !important;
}

.chat-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: var(--rp-chat-radius);
    font-size: 14.5px;
    line-height: 1.45;
    word-wrap: break-word;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}

.chat-row.me .chat-bubble {
    background: var(--rp-chat-bubble-own) !important;
    border-bottom-right-radius: 4px;
    color: #1a1a2e;
}

.chat-row.other .chat-bubble {
    background: var(--rp-chat-bubble-other) !important;
    border-bottom-left-radius: 4px;
    color: #1a1a2e;
}

.chat-row.system-row .chat-bubble,
.chat-bubble.system-bubble {
    background: var(--rp-chat-bubble-system) !important;
    color: #64748b;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: none;
    max-width: 90%;
    text-align: center;
}

.chat-meta {
    font-size: 11px;
    color: #8696a0;
    margin-top: 4px;
}

.chat-bubble .message-image {
    max-width: 100%;
    border-radius: var(--rp-chat-radius-sm);
    cursor: pointer;
    display: block;
}

.date-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    color: #8696a0;
    font-size: 12px;
    font-weight: 500;
    justify-content: center;
}

.system-message {
    color: #64748b;
    font-size: 13px;
}

@media (max-width: 767.98px) {
    .chat-bubble {
        max-width: 85%;
        font-size: 14px;
    }
}

/* ---------- Individual Message Bubbles ---------- */
.rp-msg {
    display: flex;
    margin-bottom: 4px;
    align-items: flex-end;
    gap: 8px;
}

.rp-msg + .rp-msg { margin-top: 2px; }

.rp-msg-own {
    flex-direction: row-reverse;
}

.rp-msg-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: var(--rp-chat-radius);
    font-size: 14.5px;
    line-height: 1.45;
    word-wrap: break-word;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}

.rp-msg-own .rp-msg-bubble {
    background: var(--rp-chat-bubble-own);
    border-bottom-right-radius: 4px;
    color: #1a1a2e;
}

.rp-msg:not(.rp-msg-own) .rp-msg-bubble {
    background: var(--rp-chat-bubble-other);
    border-bottom-left-radius: 4px;
    color: #1a1a2e;
}

.rp-msg-sender {
    font-size: 12px;
    font-weight: 600;
    color: var(--rp-chat-accent);
    margin-bottom: 2px;
}

.rp-msg-time {
    font-size: 11px;
    color: #8696a0;
    margin-top: 4px;
    text-align: right;
}

.rp-msg-own .rp-msg-time {
    text-align: left;
}

/* Image messages */
.rp-msg-bubble img.chat-image {
    max-width: 100%;
    border-radius: var(--rp-chat-radius-sm);
    cursor: pointer;
    display: block;
}

/* System / date divider */
.rp-msg-system {
    justify-content: center;
    margin: 12px 0;
}

.rp-msg-system .rp-msg-bubble {
    background: var(--rp-chat-bubble-system);
    color: #64748b;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: none;
    max-width: 90%;
    text-align: center;
}

.rp-date-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    color: #8696a0;
    font-size: 12px;
    font-weight: 500;
}

.rp-date-divider::before,
.rp-date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,0.08);
}

/* Avatar in non-own messages (group/event) */
.rp-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.rp-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Reaction Picker ---------- */
.rp-reaction-picker {
    position: absolute;
    z-index: 1000;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 24px;
    padding: 6px 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.rp-reaction-row {
    display: flex;
    gap: 6px;
}

.rp-reaction-row .reaction-option {
    font-size: 22px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 8px;
    transition: transform 0.15s, background 0.15s;
}

.rp-reaction-row .reaction-option:hover {
    transform: scale(1.3);
    background: rgba(0,0,0,0.05);
}

/* Reaction badges on messages */
.reaction-summary {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
}

.reaction-badge:hover,
.reaction-badge.my-reaction {
    background: rgba(18,140,126,0.12);
    border-color: var(--rp-chat-accent);
}

.reaction-badge .reaction-count {
    font-size: 11px;
    color: #64748b;
}

/* ---------- New Messages Toast ---------- */
.rp-new-msg-toast {
    position: sticky;
    bottom: 8px;
    text-align: center;
    z-index: 5;
    pointer-events: none;
}

.rp-new-msg-toast button {
    pointer-events: auto;
    background: var(--rp-chat-accent);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: background 0.2s;
}

.rp-new-msg-toast button:hover {
    background: var(--rp-chat-accent-hover);
}

/* ---------- Chat Input Bar ---------- */
.rp-chat-input {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0,0,0,0.10) !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

.rp-chat-input-field {
    flex: 1 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 10px 18px !important;
    font-size: 14.5px !important;
    background: #f8fafc !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 0;
    height: auto !important;
}

.rp-chat-input-field:focus {
    border-color: var(--rp-chat-accent);
    box-shadow: 0 0 0 3px rgba(18,140,126,0.12);
    background: #fff;
}

.rp-chat-input-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.rp-chat-action-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.rp-chat-action-btn:hover {
    background: rgba(0,0,0,0.06);
    color: var(--rp-chat-accent);
}

.rp-chat-send-btn {
    width: 42px !important;
    height: 42px !important;
    border: none !important;
    background: var(--rp-chat-accent) !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
    padding: 0 !important;
}

.rp-chat-send-btn:hover {
    background: var(--rp-chat-accent-hover);
    transform: scale(1.06);
}

.rp-chat-send-btn:active {
    transform: scale(0.94);
}

/* ---------- Inbox Sidebar ---------- */
#inboxSidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: var(--rp-chat-radius) 0 0 var(--rp-chat-radius) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
}

#inboxSidebar .p-3.border-bottom {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    flex-shrink: 0;
}

.rp-inbox-search {
    border-radius: 20px !important;
    background: #f0f2f5 !important;
    border: 1px solid transparent !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.rp-inbox-search:focus {
    border-color: var(--rp-chat-accent) !important;
    box-shadow: 0 0 0 3px rgba(18,140,126,0.10) !important;
    background: #fff !important;
}

/* Thread items in sidebar */
.rp-thread-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: var(--rp-chat-radius-sm);
    margin: 2px 8px;
    text-decoration: none;
    color: inherit;
}

.rp-thread-item:hover {
    background: rgba(0,0,0,0.04);
}

.rp-thread-item.active {
    background: rgba(18,140,126,0.08);
}

.rp-thread-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.rp-thread-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rp-thread-info {
    flex: 1;
    min-width: 0;
}

.rp-thread-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-thread-preview {
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-thread-time {
    font-size: 11px;
    color: #8696a0;
    white-space: nowrap;
    flex-shrink: 0;
}

.rp-thread-unread {
    width: 20px;
    height: 20px;
    background: var(--rp-chat-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------- Mobile Thread Drawer ---------- */
#threadDrawer {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    max-width: 320px !important;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    z-index: 1050;
    transition: left 0.3s ease;
    box-shadow: none;
    border-radius: 0 var(--rp-chat-radius) var(--rp-chat-radius) 0 !important;
    overflow-y: auto;
}

#threadDrawer.open {
    left: 0;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
}

.thread-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.threads-toggle-btn {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--rp-chat-accent);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: 4px;
}

.threads-toggle-btn:hover {
    background: var(--rp-chat-accent-hover);
}

@media (max-width: 767.98px) {
    .threads-toggle-btn {
        display: flex;
    }
    #inboxSidebar {
        display: none !important;
    }
    #chatArea {
        /* Account for mobile bottom nav (~60px) */
        max-height: calc(100vh - 130px) !important;
    }
}

/* ---------- GIF Picker / Member Modal Overrides ---------- */
.modal .modal-content {
    border-radius: var(--rp-chat-radius) !important;
    overflow: hidden;
}

.modal .modal-header {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.modal .modal-footer {
    border-top: 1px solid rgba(0,0,0,0.06);
}

/* ---------- Mobile Responsive ---------- */
@media (max-width: 767.98px) {
    .rp-chat-area {
        border-radius: 0;
    }

    .rp-chat-header {
        border-radius: 0;
        padding: 8px 12px;
    }

    .rp-chat-avatar {
        width: 40px;
        height: 40px;
    }

    .rp-chat-header-title {
        font-size: 15px;
    }

    .rp-chat-messages {
        padding: 12px;
    }

    .rp-msg-bubble {
        max-width: 85%;
        font-size: 14px;
    }

    .rp-chat-input {
        padding: 8px 10px;
    }

    .rp-chat-input-field {
        padding: 9px 14px;
        font-size: 14px;
    }

    .rp-chat-action-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .rp-chat-send-btn {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    #inboxSidebar {
        border-radius: 0;
    }
}

@media (max-width: 575.98px) {
    .rp-chat-header-meta {
        font-size: 12px;
    }

    .rp-chat-action-btn:not(.rp-chat-send-btn) {
        display: none;
    }

    .rp-chat-input-actions .rp-chat-action-btn:first-child {
        display: flex; /* keep GIF button */
    }
}

/* ---------- Image Lightbox Overlay ---------- */
.rp-image-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: rpFadeIn 0.2s;
}

.rp-image-overlay img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: var(--rp-chat-radius-sm);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

@keyframes rpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Sender Info (kept from original inline) ---------- */
.sender-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.sender-info .sender-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.sender-info .sender-name {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--rp-chat-accent);
}