/* --- WORDPRESS OVERRIDES (Hides WP Header/Footer) --- */
header#masthead, 
header.site-header, 
footer#colophon, 
footer.site-footer, 
.elementor-location-header, 
.elementor-location-footer,
#wpadminbar { 
    display: none !important; 
}

/* --- PREMIUM WATER GLASS NOTICE --- */
.reaction-notice-popover {
    position: fixed;
    z-index: 1000001; /* Above almost everything */
    background: rgba(20, 20, 20, 0.75);
    backdrop-filter: blur(15px) saturate(160%);
    -webkit-backdrop-filter: blur(15px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 12px 16px;
    width: 240px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    color: #eee;
    font-size: 12px;
    line-height: 1.5;
    pointer-events: auto;
    display: none; /* Controlled by JS */
    animation: noticeFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.reaction-notice-popover::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(255, 255, 255, 0.15);
}

@keyframes noticeFadeIn {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#reaction-notice-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 1000000;
    display: none;
}

/* --- PREMIUM COMING SOON OVERLAY --- */
.chat-coming-soon-overlay {
    display: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: inherit;
    animation: fadeIn 0.5s ease;
}

.chat-cs-card {
    background: rgba(20, 20, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    padding: 40px;
    border-radius: 24px;
    text-align: center;
    max-width: 320px;
    transform: translateY(0);
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-cs-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0084FF, #00c6ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 132, 255, 0.3);
}

.chat-cs-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}

.chat-cs-text {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 25px;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- PREMIUM DESKTOP LASER OUTLINE --- */
@keyframes rdv-laser-pulse {
    0% { box-shadow: 0 0 0 0px rgba(34, 197, 94, 0.8); }
    100% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
}

.rdv-laser-focus {
    outline: 2px solid #22c55e !important;
    outline-offset: -2px;
    background: rgba(34, 197, 94, 0.1) !important;
    animation: rdv-laser-pulse 0.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    z-index: 5;
    position: relative;
}

/* Force body to fill screen and remove WP spacing */
html { margin-top: 0 !important; height: 100%; overflow: hidden; }
body { 
    margin: 0 !important; 
    padding: 0 !important; 
    background: #000 !important; 
    color: #fff; 
    font-family: 'Montserrat', sans-serif; 
    overflow: hidden !important; 
    height: 100% !important; 
    width: 100% !important; 
    position: absolute; 
    top: 0;
    left: 0;
    z-index: 9999; 
    overflow-x: hidden !important; 
}
* { box-sizing: border-box; }

/* --- PREMIUM ATTENTION SHAKE --- */
@keyframes card-attention-nudge {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.attention-shake {
    animation: card-attention-nudge 0.5s cubic-bezier(.36,.07,.19,.97) both;
    border-color: rgba(34, 197, 94, 0.5) !important; /* Temporarily highlight green */
    background: rgba(34, 197, 94, 0.05) !important;
}

/* --- CUSTOM SCROLLBARS --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* --- LOGIN SCREEN --- */
#login-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; z-index: 999999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.5s ease;
}
.login-card {
    width: 380px; padding: 40px;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.7);
    text-align: center;
}
@media(max-width: 480px) { .login-card { width: 90%; padding: 30px 20px; } }

.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

.login-logo { font-size: 28px; font-weight: 800; margin-bottom: 8px; letter-spacing: -1px; }
.login-subtitle { font-size: 13px; color: #666; margin-bottom: 30px; font-weight: 500; }
.login-input-group { margin-bottom: 15px; width: 100%; text-align: left; }
.login-label { font-size: 11px; font-weight: 700; color: #555; margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.5px; }
.login-input {
    width: 100%; background: #0a0a0a; border: 1px solid #222; color: #fff;
    padding: 12px 15px; border-radius: 8px; font-family: 'Montserrat', sans-serif;
    font-size: 14px; outline: none; transition: all 0.2s;
}
.login-input:focus { border-color: #444; background: #111; }
.btn-login {
    width: 100%; margin-top: 10px; background: #fff; color: #000;
    font-weight: 700; font-size: 14px; padding: 14px; border-radius: 8px; border: none;
    cursor: pointer; transition: transform 0.1s, opacity 0.2s;
}
.btn-login:hover { opacity: 0.9; }
.btn-login:active { transform: scale(0.98); }
.btn-login:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- DASHBOARD WRAPPER --- */
.dashboard-wrapper {
    display: none; background-color: #000; width: 100%; height: 100vh; 
    grid-template-columns: 260px 1fr; overflow: hidden;
}

/* --- SIDEBAR (DESKTOP) --- */
.sidebar { background: #0a0a0a; border-right: 1px solid #1a1a1a; display: flex; flex-direction: column; padding: 16px; height: 100%; z-index: 2; box-sizing: border-box; width: 100%; overflow-y: auto; }
.logo-area { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 20px; padding-left: 10px; letter-spacing: -0.5px; flex-shrink: 0; }
.account-switcher { display: flex; align-items: center; gap: 10px; padding: 10px; background: #151515; border: 1px solid #222; border-radius: 8px; margin-bottom: 25px; cursor: pointer; flex-shrink: 0; }
.switcher-avatar { width: 36px; height: 36px; background: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; }
.switcher-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.switcher-name { font-size: 13px; font-weight: 700; color: #fff; white-space: normal; line-height: 1.3; }
.switcher-role { font-size: 11px; color: #666; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.switcher-badge { background: #222; padding: 1px 4px; border-radius: 3px; font-size: 9px; border: 1px solid #333; }
.nav-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }
.nav-item { padding: 12px 14px; border-radius: 6px; cursor: pointer; color: #999; font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 12px; transition: all 0.1s; flex-shrink: 0; }
.nav-item i { font-size: 20px; transition: color 0.2s; }
.nav-item:hover { background: #1a1a1a; color: #fff; }
.nav-item.active {
    background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 100%);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
    color: #fff; font-weight: 600;
}
.sidebar-footer { border-top: 1px solid #1a1a1a; padding-top: 15px; margin-top: 15px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

/* --- MOBILE BOTTOM NAV --- */
.mobile-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid #222;
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    height: 55px; 
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom); 
}
.mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #666; 
    cursor: pointer; width: 20%;
    height: 100%;
    transition: color 0.2s;
}
.mobile-nav-item span { display: none; }
.mobile-nav-item i { font-size: 24px; margin: 0; }
.mobile-nav-item.active { color: #fff; }
.mobile-nav-item.active i { color: #fff; }

/* --- MAIN CONTENT --- */
.main-content { display: flex; flex-direction: column; background: #000; position: relative; width: 100%; height: 100%; overflow: hidden; }
.top-header { height: 60px; border-bottom: 1px solid #1a1a1a; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 25px; background: #0a0a0a; width: 100%; box-sizing: border-box; }
.page-title { font-size: 18px; font-weight: 700; }

/* --- STATUS BADGES & POPOVER --- */
.status-badge { display: flex; align-items: center; gap: 6px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; color: #22c55e; letter-spacing: 0.5px; }
.status-dot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 5px rgba(34, 197, 94, 0.5); }

.crm-badge {
    padding: 5px 4px; width: 90%; margin: 0 auto; display: block; text-align: center;
    border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: capitalize; letter-spacing: 0.3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: normal;
}
.crm-badge.actionable { cursor: pointer; transition: all 0.2s ease; position: relative; user-select: none; }
.crm-badge.actionable:hover { transform: translateY(-1px); filter: brightness(1.2); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

.badge-blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-red { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.badge-green { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); box-shadow: 0 0 8px rgba(34, 197, 94, 0.1); }
.badge-glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); color: #bbb; }

.status-popover {
    position: fixed; z-index: 999999; background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8); display: none; flex-direction: column;
    min-width: 180px; overflow: hidden; animation: fadeIn 0.1s ease-out;
}
.status-popover.active { display: flex; }
.status-option {
    padding: 12px 16px; font-size: 12px; font-weight: 500; color: #ccc;
    cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.1s; display: flex; align-items: center; gap: 8px;
}
.status-option:last-child { border-bottom: none; }
.status-option:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.status-dot-mini { width: 6px; height: 6px; border-radius: 50%; }

.view-section { display: none; flex: 1; width: 100%; overflow-y: auto; }
.view-section.active-view { display: flex; flex-direction: column; }

/* --- PREMIUM REVENUE MODAL --- */
.revenue-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 9999999; display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.revenue-modal-overlay.active { display: flex; opacity: 1; }
.revenue-modal-card {
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px; /* Reduced padding for sleeker look */
    width: 380px; max-width: 90%; 
    max-height: 90vh; overflow-y: auto; /* Prevents stretching off-screen */
    text-align: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
    transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.revenue-modal-overlay.active .revenue-modal-card { transform: scale(1); }

.rev-modal-icon {
    width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 15px auto;
    background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6; font-size: 24px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}
.revenue-modal-card h3 { margin: 0 0 15px 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }

/* The Sleek Micro-Copy Box */
.rev-info-box {
    display: flex; flex-direction: column; gap: 8px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px; padding: 12px 15px; margin-bottom: 20px; text-align: left;
}
.rev-info-item { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #aaa; font-weight: 500; }
.rev-info-item i { font-size: 16px; flex-shrink: 0; }

.rev-input-group { text-align: left; margin-bottom: 15px; }
.rev-input-group label { display: block; font-size: 10px; font-weight: 700; color: #777; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
.rev-input-group input {
    width: 100%; background: #0a0a0a; border: 1px solid #222; color: #fff;
    padding: 12px 15px; border-radius: 8px; font-family: 'Montserrat', sans-serif;
    font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-weight: 600;
}
.rev-input-group input:focus { border-color: #3b82f6; box-shadow: 0 0 15px rgba(59, 130, 246, 0.15); background: #111; }

.rev-modal-actions { display: flex; gap: 10px; margin-top: 25px; }
.btn-rev-skip { flex: 1; background: transparent; border: 1px solid #333; color: #999; padding: 12px; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.btn-rev-skip:hover { background: rgba(255,255,255,0.05); color: #fff; }
.btn-rev-save { flex: 2; background: #3b82f6; border: none; color: #fff; padding: 12px; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
.btn-rev-save:hover { background: #2563eb; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); }

/* Mobile Specific Tweaks for the Modal */
@media (max-width: 600px) {
    .revenue-modal-card { padding: 20px 20px 25px 20px; width: 92%; }
    .rev-modal-icon { width: 40px; height: 40px; font-size: 20px; margin-bottom: 12px; }
    .revenue-modal-card h3 { font-size: 18px; margin-bottom: 12px; }
    .rev-info-box { padding: 10px 12px; margin-bottom: 15px; }
    .rev-input-group { margin-bottom: 12px; }
    .rev-input-group input { padding: 10px 12px; font-size: 16px; /* 16px prevents iOS auto-zoom */ }
    .rev-modal-actions { margin-top: 20px; }
}

/* --- PREMIUM COMING SOON HOME VIEW & AI --- */
.home-premium-wrapper { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #050505; }
.mock-dashboard { padding: 25px; display: flex; flex-direction: column; gap: 15px; width: 100%; height: 100%; overflow-y: auto; transition: filter 0.5s ease; }
.mock-top-bar { display: flex; gap: 15px; flex-wrap: wrap; }
.mock-top-card { background: #111; border: 1px solid #222; border-radius: 8px; padding: 12px 20px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #aaa; flex: 1; min-width: 150px; }
.mock-top-card.accent { color: #ef4444; font-weight: 600; font-size: 16px; }
.mock-main-grid { display: grid; grid-template-columns: 1fr 300px 300px; gap: 15px; }
@media(max-width: 1200px) { .mock-main-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width: 900px) { .mock-main-grid { grid-template-columns: 1fr; } }
.mock-panel { background: #111; border: 1px solid #222; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
.mock-panel-title { font-size: 12px; color: #888; margin-bottom: 15px; font-weight: 500; }
.mock-funnel { display: flex; align-items: center; justify-content: space-between; background: #151515; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
.mock-funnel-item { text-align: center; }
.mock-funnel-val { font-size: 24px; font-weight: 700; color: #fff; }
.mock-funnel-label { font-size: 11px; color: #666; }
.mock-funnel-divider { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #333; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #aaa; }
.mock-chart-area { height: 150px; width: 100%; border-bottom: 1px solid #333; border-left: 1px solid #333; position: relative; display: flex; align-items: flex-end; }
.mock-line { width: 100%; height: 100%; }
.mock-line polyline { fill: none; stroke: #06b6d4; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mock-rev-list { display: flex; flex-direction: column; gap: 10px; }
.mock-rev-item { background: #151515; padding: 12px 15px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.mock-rev-label { color: #888; }
.mock-rev-val { color: #fff; font-weight: 600; }
.mock-donut-container { display: flex; justify-content: center; align-items: center; flex: 1; position: relative; }
.mock-donut { width: 180px; height: 180px; border-radius: 50%; background: conic-gradient(#4ade80 0% 30%, #3b82f6 30% 50%, #06b6d4 50% 80%, #6366f1 80% 100%); display: flex; align-items: center; justify-content: center; }
.mock-donut-inner { width: 100px; height: 100px; background: #111; border-radius: 50%; }
.mock-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
@media(max-width: 900px) { .mock-bottom-grid { grid-template-columns: 1fr; } }
.mock-bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin-top: auto; border-bottom: 1px solid #333; padding-bottom: 10px; }
.mock-bar { flex: 1; background: #06b6d4; border-radius: 2px 2px 0 0; min-height: 10%; }
.mock-ai-dashboard { padding: 25px; display: flex; flex-direction: column; gap: 15px; width: 100%; height: 100%; transition: filter 0.5s ease; }
.mock-ai-header { display: flex; gap: 15px; flex-wrap: wrap; }
.mock-ai-stat { background: #111; border: 1px solid #222; border-radius: 8px; padding: 15px 20px; flex: 1; color: #aaa; font-size: 13px; font-weight: 500; min-width: 150px; }
.mock-ai-chat-area { background: #111; border: 1px solid #222; border-radius: 12px; flex: 1; padding: 25px; display: flex; flex-direction: column; gap: 15px; }
.mock-ai-bubble { padding: 14px 18px; border-radius: 12px; max-width: 60%; font-size: 14px; line-height: 1.5; }
.mock-ai-bubble.left { background: #1a1a1a; color: #ccc; align-self: flex-start; border-bottom-left-radius: 4px; }
.mock-ai-bubble.right { background: #06b6d4; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.mock-ai-input { margin-top: auto; background: #151515; border: 1px solid #333; border-radius: 999px; height: 50px; width: 100%; }
.coming-soon-overlay { display: none !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(5,5,5,0.2) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.95) 100%); }
.cs-content-box { text-align: center; background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1); padding: 50px 40px; border-radius: 24px; max-width: 450px; animation: floatUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform: translateY(20px); opacity: 0; }
@keyframes floatUp { to { transform: translateY(0); opacity: 1; } }
.cs-icon-wrapper { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; font-size: 28px; color: #fff; box-shadow: 0 0 20px rgba(255,255,255,0.05); }
.cs-title { font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 10px 0; letter-spacing: -0.5px; background: linear-gradient(to right, #ffffff, #888888); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.cs-subtitle { font-size: 14px; color: #888; line-height: 1.6; margin: 0 0 30px 0; }
.cs-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.2); color: #06b6d4; padding: 8px 20px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
@keyframes badgePulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
.cs-badge-dot { width: 6px; height: 6px; background: #06b6d4; border-radius: 50%; box-shadow: 0 0 10px #06b6d4; animation: badgePulse 2s infinite; }

/* --- LEADS TABLE --- */
.leads-view-wrapper { padding: 30px; width: 100%; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.leads-table-container { background: #0e0e0e; border: 1px solid #1f1f1f; border-radius: 12px; overflow: hidden; flex: 1; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.table-scroll-area { overflow-y: scroll; flex: 1; }
.leads-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; font-family: 'Montserrat', sans-serif !important; }
.leads-table thead th { position: sticky; top: 0; z-index: 10; background: #151515; color: #777; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 12px 16px; text-align: center; border-bottom: 1px solid #2a2a2a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leads-table thead th:nth-child(1), .leads-table thead th:nth-child(5) { text-align: left; }
.leads-table tbody td { padding: 0 10px; border-bottom: 1px solid #1a1a1a; color: #e5e5e5; vertical-align: middle !important; font-family: 'Montserrat', sans-serif !important; text-align: center; height: 45px; line-height: 45px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leads-table tbody td:nth-child(1), .leads-table tbody td:nth-child(5) { text-align: left; }
.leads-table tbody tr:hover { background: #1a1a1a; }
.lead-profile { display: flex; align-items: center; gap: 0px; overflow: hidden; height: 100%; }
.lead-name-text { font-weight: 600; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: normal; }
.lead-phone { font-family: 'Montserrat', sans-serif; letter-spacing: 0.5px; color: #fff; font-size: 13px; font-weight: 600; width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; line-height: normal; }
.lead-date { color: #555; font-size: 12px; font-weight: 500; }
.treatment-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: #111; border: 1px solid #222; color: #ccc; font-size: 12px; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: normal; }
.note-text { line-height: normal; }

/* --- STATUS COLUMN FILTER --- */
.status-th-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
    user-select: none;
    white-space: nowrap;
}
.status-th-filter:hover {
    background: rgba(255,255,255,0.06);
}
.sfd-active-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: none; /* shown via JS when filter active */
}
.status-th-caret {
    font-size: 11px;
    color: #888; /* Brightened slightly so you can actually see it */
    transition: transform 0.2s ease;
    flex-shrink: 0; /* STRICT RULE: Never squish the icon */
}

/* Force the text to truncate so it leaves room for the arrow */
#status-th-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 85px; /* Leaves exactly enough room for the dot and the arrow */
    display: block;
}

/* The dropdown itself — fixed positioned, appended to body */
.status-filter-dropdown {
    position: fixed;
    z-index: 9999;
    background: #1a1a1a;
    border: 1px solid #2f2f2f;
    border-radius: 10px;
    padding: 6px;
    min-width: 220px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    animation: sfd-pop 0.12s ease;
}
@keyframes sfd-pop {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.sfd-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #bbb;
    transition: background 0.1s ease, color 0.1s ease;
    letter-spacing: 0.2px;
}
.sfd-option:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.sfd-option.active {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.sfd-option.active::after {
    content: '';
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}
.sfd-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- LEADS TABLE PAGINATION FOOTER --- */
.leads-table-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid #1f1f1f;
    border-top: none;
    background: #0e0e0e;
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}
/* On mobile the table container is hidden so footer connects directly to mobile list */
@media (max-width: 900px) {
    .leads-table-footer {
        border-top: 1px solid #1f1f1f;
        border-radius: 12px;
        margin-top: 10px;
        margin-bottom: 80px; /* clears the bottom nav */
    }
}
.pag-btn {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.pag-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}
.pag-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    transform: none;
}
.pag-text {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    white-space: nowrap;
}
.pag-input {
    width: 52px;
    height: 34px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: all 0.15s ease;
    -moz-appearance: textfield;
}
.pag-input::-webkit-inner-spin-button,
.pag-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pag-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}
.pag-divider {
    flex: 1;
}
.pag-count {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}


.note-input-wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; }
.note-input { width: 100%; height: 100%; background: transparent !important; border: 0 !important; border-bottom: none !important; border-top: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; outline: none !important; color: #ffffff !important; font-family: 'Montserrat', sans-serif; font-size: 13px; padding: 0 32px 0 0; text-overflow: ellipsis; }
.note-input::placeholder { color: #ffffff !important; opacity: 0.2; }
.note-input:focus { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; }
.btn-save-note { position: absolute; right: 0; top: 50%; transform: translateY(-50%) scale(0); width: 28px; height: 28px; min-width: 28px; min-height: 28px; flex-shrink: 0; aspect-ratio: 1 / 1; padding: 0; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 15px rgba(0,0,0,0.3); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s, background 0.2s; font-size: 12px; pointer-events: none; opacity: 0; }
.note-input-wrapper:focus-within .btn-save-note, 
.btn-save-note:disabled { 
    transform: translateY(-50%) scale(1); 
    pointer-events: auto; 
    opacity: 1; 
}
.btn-save-note:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-50%) scale(1.1); box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); }
.btn-save-note:disabled { opacity: 0.7; cursor: not-allowed; }

/* --- RDV CELL STYLES --- */
.rdv-cell { position: relative; transition: background 0.2s; }
.rdv-cell:hover { background: rgba(255,255,255,0.05); }

/* --- ROW DATE PICKER MODAL --- */
#row-date-picker-modal { position: fixed; z-index: 9999999; background: #151515; border: 1px solid #333; border-radius: 16px; width: 320px; box-shadow: 0 20px 60px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.05); padding: 15px; display: none; flex-direction: column; gap: 10px; backdrop-filter: blur(20px); opacity: 0; transform: scale(0.95); transition: opacity 0.2s, transform 0.2s; transform-origin: top left; }
#row-date-picker-modal.active { display: flex; opacity: 1; transform: scale(1); }

/* --- LEADS HEADER GROUPING & SEARCH --- */
.leads-header-group { display: flex; align-items: center; gap: 12px; }
.glass-search-wrapper { position: relative; width: 280px; }
.glass-search-input { width: 100%; background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #fff !important; height: auto; padding: 12px 15px 12px 50px !important; border-radius: 999px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; outline: none; transition: all 0.2s ease; box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05); -webkit-appearance: none; appearance: none; margin: 0; line-height: normal; }
.glass-search-input:-webkit-autofill, .glass-search-input:-webkit-autofill:hover, .glass-search-input:-webkit-autofill:focus, .glass-search-input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #0a0a0a inset !important; -webkit-text-fill-color: white !important; transition: background-color 5000s ease-in-out 0s; }
.glass-search-input::placeholder { color: rgba(255, 255, 255, 0.5) !important; }
.glass-search-input:focus { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 0 15px rgba(255,255,255,0.05) !important; }
.glass-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #999; font-size: 18px; pointer-events: none; z-index: 10; }

/* --- MOBILE LEADS LIST --- */
.mobile-leads-list { display: none; flex-direction: column; gap: 10px; flex: 1; overflow-y: auto; }
.mobile-lead-card { background: #111; border: 1px solid #222; border-radius: 12px; padding: 15px; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; cursor: pointer; }
.mobile-lead-card:active { background: #1a1a1a; }
.m-lead-left { display: flex; flex-direction: column; gap: 4px; overflow: hidden; flex: 1; padding-right: 10px; }
.m-lead-name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-lead-date { font-size: 11px; color: #666; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.m-lead-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-call-mobile { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none !important; font-size: 18px; transition: all 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.3); flex-shrink: 0; }
.btn-call-mobile:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
.btn-call-mobile:active { transform: scale(0.95) translateY(0); background: rgba(255, 255, 255, 0.15); }

/* --- DATE PICKER STYLES --- */
.date-picker-container { position: relative; width: 250px; }
.date-trigger-btn { width: 100%; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; padding: 10px 15px; border-radius: 999px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all 0.2s ease; box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05); }
.date-trigger-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
.date-trigger-btn i { font-size: 16px; color: #999; }
.date-picker-modal { position: absolute; top: 110%; left: 0; background: #151515; border: 1px solid #333; border-radius: 16px; width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05); z-index: 1000; padding: 15px; display: none; flex-direction: column; gap: 10px; backdrop-filter: blur(20px); }
.date-picker-modal.open { display: flex; animation: fadeIn 0.2s ease-out; }
.dp-calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 5px; }
.dp-month-label { font-size: 14px; font-weight: 700; color: #fff; }
.dp-nav-btn { background: transparent; border: 1px solid #333; color: #fff; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dp-nav-btn:hover { background: #222; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dp-day-header { text-align: center; font-size: 10px; color: #666; font-weight: 700; padding-bottom: 5px; }
.dp-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #ccc; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.dp-day:hover:not(.empty) { background: #222; color: #fff; }
.dp-day.selected { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3); color: #fff; font-weight: 700; }
.dp-day.in-range { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; }
.dp-day.today { border: 1px solid rgba(255, 255, 255, 0.3); }
.dp-day.empty { cursor: default; }
.dp-footer { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid #2a2a2a; margin-top: 5px; }
.dp-clear-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); color: #999; padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.dp-clear-btn:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.dp-confirm-btn { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 15px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3); color: #fff; padding: 10px 24px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.dp-confirm-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
.dp-confirm-btn:active { transform: translateY(0); }

/* --- GLASS TOOLTIP --- */
#glass-tooltip { position: fixed; z-index: 999999; background: rgba(20, 20, 20, 0.65); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 15px 40px rgba(0,0,0,0.6); padding: 8px 14px; border-radius: 10px; color: #fff; font-size: 12px; font-weight: 500; pointer-events: none; display: none; max-width: 300px; white-space: normal; word-wrap: break-word; font-family: 'Montserrat', sans-serif; }

/* --- DROPDOWNS & PAGE SELECTOR CSS --- */
.hidden-select { display: none !important; }
.custom-select-wrapper { position: relative; display: inline-block; width: 100%; margin-bottom: 5px; max-width: 100%; }
.custom-select-trigger { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-radius: 999px; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 4px 15px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.3px; padding: 10px 20px; padding-right: 40px; width: 100%; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; transition: all 0.2s ease; }
.custom-select-trigger span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; margin-right: 10px; min-width: 0; }
.custom-select-trigger:after { content: ''; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; }
.custom-select-trigger:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.custom-select-wrapper.open .custom-select-trigger { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); }
.custom-select-wrapper.open .custom-select-trigger:after { transform: translateY(-50%) rotate(180deg); }
.custom-options { position: absolute; top: 110%; left: 0; right: 0; z-index: 100000; background: rgba(20, 20, 20, 0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 15px 40px rgba(0,0,0,0.6); border-radius: 14px; overflow: hidden; opacity: 0; visibility: hidden; transform: scale(0.95); transform-origin: top center; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.custom-select-wrapper.open .custom-options { opacity: 1; visibility: visible; transform: scale(1); }
.custom-option { padding: 12px 20px; font-size: 13px; font-weight: 500; color: #eaeaea; cursor: pointer; transition: background 0.1s; display: block; position: relative; }
.custom-option:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.custom-option.selected { background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 700; }
.custom-option:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; background: rgba(255, 255, 255, 0.08); pointer-events: none; }
.page-option-ui { display: flex; align-items: center; gap: 12px; width: 100%; padding-right: 20px; }
.page-icon-box { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.platform-fb { background: linear-gradient(135deg, #1877F2, #0e5a20); border: 1px solid rgba(24, 119, 242, 0.3); }
.platform-ig { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border: 1px solid rgba(225, 48, 108, 0.3); }
.page-text-group { display: flex; flex-direction: column; text-align: left; overflow: hidden; flex: 1; }
.page-name-text { font-size: 13px; font-weight: 700; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.page-id-text { font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 0.4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
#page-selector-wrapper .custom-select-trigger { padding: 8px 15px; height: auto; min-height: 50px; }
#page-selector-wrapper .custom-select-trigger span { margin-right: 0; overflow: visible; display: block; width: 100%; }

/* --- CHAT INTERFACE --- */
.chat-interface { display: grid; grid-template-columns: 320px 1fr 0px; width: 100%; height: 100%; overflow: hidden; transition: grid-template-columns 0.4s ease-out; }
.chat-interface.profile-open { grid-template-columns: 320px 1fr 300px; }
.chat-list-panel { background: #0a0a0a; border-right: 1px solid #1a1a1a; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-search-bar { padding: 15px; border-bottom: 1px solid #1a1a1a; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.search-input { width: 100%; background: #151515; border: 1px solid #333; padding: 10px 15px; border-radius: 8px; color: #fff; font-family: 'Montserrat', sans-serif; outline: none; box-sizing: border-box; }
.conversations-list { flex: 1; overflow-y: auto; list-style: none; padding: 0; margin: 0; min-height: 0; }
.convo-item { display: flex; align-items: center; gap: 15px; padding: 15px 20px; cursor: pointer; transition: background 0.1s; border-bottom: 1px solid #111; }
.convo-item:hover { background: #151515; }
.convo-item.selected { background: #151515; border-right: 3px solid #0072FF; }
.convo-avatar { width: 42px; height: 42px; border-radius: 50%; background: #333; flex-shrink: 0; position: relative; }
.convo-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.platform-badge-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #0a0a0a;
    color: #fff;
    z-index: 10;
    
    /* --- TRUE CENTER LOGIC --- */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important; /* Prevents font-spacing from pushing the icon */
}

/* Specific nudge for Phosphor icons to hit the mathematical center */
.platform-badge-icon i {
    font-size: 10px;
    display: block;
    transform: translateY(0.5px); /* Micro-nudge for visual balance */
}
.convo-details { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.convo-top-row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin-bottom: 3px; }
.convo-name { font-weight: 600; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-time-display { font-size: 11px; color: #666; font-weight: 500; white-space: nowrap; margin-left: 6px; }
.convo-preview { font-size: 13px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;  }
.active-chat-panel { display: flex; flex-direction: column; background: #000; position: relative; width: 100%; height: 100%; min-height: 0; }
.chat-header { padding:15px 20px; border-bottom:1px solid #1a1a1a; font-weight:700; font-size:14px; flex-shrink: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.chat-header:hover { background: #0a0a0a; }
.profile-panel { background: #0a0a0a; border-left: 1px solid #1a1a1a; height: 100%; display: flex; flex-direction: column; overflow-y: auto; padding: 25px; box-sizing: border-box; }
.profile-section-title { font-size: 10px; color: #444; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; letter-spacing: 1px; }
.profile-data-item { margin-bottom: 20px; }
.profile-label { font-size: 11px; color: #666; margin-bottom: 4px; }
.profile-value { font-size: 13px; font-weight: 500; color: #fff; word-break: break-all; }
.messages-feed { flex: 1; padding: 20px 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background-image: radial-gradient(#111 1px, transparent 1px); background-size: 20px 20px; min-height: 0; }
.message-group { display: flex; flex-direction: column; max-width: 70%; position: relative; opacity: 1; }
.message-group.incoming { align-self: flex-start; }
.message-group.outgoing { align-self: flex-end; align-items: flex-end; }
@keyframes glideUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
.animate-pop { animation: glideUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.msg-bubble { padding: 10px 16px; padding-bottom: 18px; border-radius: 18px; font-size: 15px; line-height: 1.4; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; position: relative; min-width: 60px; box-shadow: 0 1px 2px rgba(0,0,0,0.3); word-wrap: break-word; word-break: break-word; }
.incoming .msg-bubble { background: #262626; color: #e5e5e5; border-bottom-left-radius: 4px; }
.outgoing .msg-bubble { background: #0084FF; color: #fff; border-bottom-right-radius: 4px; }
.msg-time { position: absolute; bottom: 4px; right: 10px; font-size: 10px; opacity: 0.7; font-weight: 500; }
.chat-input-area { padding: 20px; background: #0a0a0a; border-top: 1px solid #1a1a1a; display: flex; gap: 15px; align-items: center; flex-shrink: 0; }
.message-input { flex: 1; background: #151515; border: 1px solid #222; padding: 12px 18px; border-radius: 8px; color: #fff; font-family: 'Montserrat', sans-serif; outline: none; }
.send-btn { width: 40px; height: 40px; background: #0072FF; color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }
.back-to-list-btn { display: none; font-size: 18px; padding-right: 15px; color: #fff; background: none; border: none; cursor: pointer; }
.chat-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #666; gap: 10px; }
.chat-spinner { width: 30px; height: 30px; border: 3px solid rgba(255,255,255,0.1); border-top-color: #0072FF; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- PREMIUM SETTINGS --- */
.premium-settings-wrapper { padding: 40px; max-width: 800px; margin: 0 auto; width: 100%; animation: fadeIn 0.3s ease; }
.premium-settings-header { margin-bottom: 30px; }
.premium-settings-header h2 { font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 5px 0; }
.premium-settings-header p { font-size: 14px; color: #666; margin: 0; }
.premium-settings-card { background: #0e0e0e; border: 1px solid #1a1a1a; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.ps-row { display: flex; justify-content: space-between; align-items: center; padding: 25px; border-bottom: 1px solid #1a1a1a; transition: background 0.2s; }
.ps-row:last-child { border-bottom: none; }
.ps-row:hover { background: rgba(255,255,255,0.02); }
.ps-info { display: flex; flex-direction: column; gap: 4px; padding-right: 20px; }
.ps-title { font-size: 14px; font-weight: 600; color: #fff; }
.ps-desc { font-size: 13px; color: #888; line-height: 1.4; }
.ps-badge { background: rgba(34, 197, 94, 0.1); color: #22c55e; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid rgba(34,197,94,0.2); }
.ps-link { color: #06b6d4; text-decoration: none; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; transition: opacity 0.2s; }
.ps-link:hover { opacity: 0.8; }
.btn-logout-action { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; padding: 10px 20px; border-radius: 6px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; }
.btn-logout-action:hover { background: rgba(239, 68, 68, 0.2); box-shadow: 0 0 15px rgba(239, 68, 68, 0.1); }

/* --- LEAD PROFILE VIEW (PREMIUM MINIMALIST) --- */
.profile-view-header { display: flex; align-items: center; gap: 15px; padding: 20px 30px; border-bottom: 1px solid #1a1a1a; background: #0a0a0a; position: sticky; top: 0; z-index: 10; }
.btn-back-profile { background: transparent; border: 1px solid #333; color: #fff; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.btn-back-profile:hover { background: #222; border-color: #555; }
.lead-profile-container { padding: 40px; max-width: 1000px; margin: 0 auto; width: 100%; animation: fadeIn 0.3s ease-out; }
.profile-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #1a1a1a; }
.profile-avatar-large { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #333, #111); color: #fff; font-size: 32px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.profile-hero-info h1 { margin: 0; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.profile-hero-info p { margin: 5px 0 0 0; color: #666; font-size: 14px; font-weight: 500; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.info-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 25px; transition: transform 0.2s, background 0.2s; }
.info-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-2px); }
.info-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #555; font-weight: 700; margin-bottom: 8px; }
.info-value { font-size: 15px; color: #fff; font-weight: 500; word-break: break-word; line-height: 1.5; }
.info-value.highlight { color: #3b82f6; } 

/* --- STATUS HISTORY TIMELINE --- */
.history-section { margin-top: 40px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 25px; }
.history-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
.timeline { display: flex; flex-direction: column; gap: 15px; position: relative; padding-left: 20px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 5px; bottom: 5px; width: 2px; background: rgba(255, 255, 255, 0.1); }
.timeline-item { position: relative; display: flex; flex-direction: column; gap: 4px; }
.timeline-dot { position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #06b6d4; border: 2px solid #0a0a0a; }
.timeline-item:first-child .timeline-dot { background: #22c55e; box-shadow: 0 0 10px rgba(34, 197, 94, 0.4); }
.timeline-status { font-size: 13px; font-weight: 600; color: #fff; }
.timeline-time { font-size: 11px; color: #666; font-weight: 500; }

@media (max-width: 600px) {
    .lead-profile-container { padding: 20px; }
    .profile-hero { flex-direction: column; text-align: center; gap: 15px; }
    .profile-grid { grid-template-columns: 1fr; }
}

/* --- RESPONSIVE OVERRIDES --- */
@media (max-width: 900px) {
    .dashboard-wrapper { grid-template-columns: 1fr; height: 100vh; overflow-x: hidden; } 
    .sidebar { display: none; }
    .mobile-bottom-nav { display: flex; }
    .main-content { padding-bottom: 0px; width: 100%; overflow-x: hidden; } 
    .chat-interface { grid-template-columns: 1fr; width: 100%; max-width: 100%; overflow: hidden; } 
    .chat-list-panel { display: flex; flex-direction: column; width: 100%; padding-bottom: 80px; background: #000; min-width: 0; box-sizing: border-box; }
    .chat-search-bar { padding: 15px 20px; background: #000; border-bottom: none; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; } 
    .search-input { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; padding: 12px 20px; font-size: 16px; }
    .conversations-list { padding-left: 20px !important; padding-right: 20px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; }
    .convo-item { background: #111; border: 1px solid #222; border-radius: 12px; padding: 12px 15px; margin-bottom: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.2); width: 100%; box-sizing: border-box; }
    .convo-details { min-width: 0; }
    .convo-item.selected { background: #1a1a1a; border: 1px solid #333; border-right: 1px solid #333; }
    .custom-select-trigger { width: 100%; box-sizing: border-box; max-width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); }
    .active-chat-panel { display: none; width: 100%; padding-bottom: 80px; min-width: 0; }
    .messages-feed { padding: 20px 15px; }
    .profile-panel { display: none !important; }
    .chat-interface.mobile-chat-active .chat-list-panel { display: none; }
    .chat-interface.mobile-chat-active .active-chat-panel { display: flex; }
    .back-to-list-btn { display: block; }
    
    /* --- NEW MOBILE HEADER LAYOUT --- */
   .leads-header-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
   
   /* 1. Date Picker stays full width at the very top */
   .date-picker-container { width: 100%; order: 1; } 
   
   /* 2. Timer moves to the LEFT (under the date picker) */
   .leads-header-group > div:nth-child(3) { order: 2; flex-shrink: 0; padding: 12px 16px !important; width: auto !important; }
   
   /* 3. Search Bar moves to the RIGHT and takes the remaining space */
   .leads-header-group > .glass-search-wrapper:nth-child(2) { order: 3; flex: 1; width: auto; min-width: 0; }
   
   /* Hides the "AVG REACTION:" text on mobile */
    .leads-header-group > div:nth-child(3) > span:nth-of-type(1) { display: none !important; }
    .glass-search-input { font-size: 16px !important; } 
    .leads-view-wrapper { padding: 15px 15px 0 15px; } 
    .mock-dashboard, .mock-ai-dashboard { padding: 20px; }
    .premium-settings-wrapper { padding: 20px; }
    .leads-table-container { display: none; }
    .mobile-leads-list { display: flex; padding-bottom: 70px; } 
}

/* --- INSTANT LOAD OVERRIDES --- */
body.is-authenticated #login-overlay { display: none !important; }
body.is-authenticated .dashboard-wrapper { display: grid !important; }

/* --- MOBILE SCROLL SNAP-BACK FIX --- */
/* Use min-height instead of forcing height to prevent layout thrashing */
html, body, .dashboard-wrapper { 
    height: 100%; 
    min-height: 100vh;
    min-height: -webkit-fill-available; /* Native iOS fix */
}

@media (max-width: 900px) {
    /* Forces a physical, invisible block at the bottom of all scrollable lists */
    /* This guarantees the bottom items stay above the navigation bar permanently */
    .mobile-leads-list::after, 
    .conversations-list::after, 
    .mock-dashboard::after,
    .mock-ai-dashboard::after,
    #view-settings::after, 
    #view-lead-profile::after {
        content: '';
        display: block;
        height: 100px !important;
        min-height: 100px !important;
        width: 100%;
        flex-shrink: 0;
    }

    /* Keeps the live chat text input above the navigation bar */
    .active-chat-panel { padding-bottom: 80px !important; }

    /* Removes the old padding that wasn't working to prevent double spacing */
    .chat-list-panel { padding-bottom: 0 !important; }
    .mobile-leads-list { padding-bottom: 0 !important; }
}

/* --- LANGUAGE SELECTOR BUTTONS --- */
.btn-lang {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #999;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-lang:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-1px);
}
.btn-lang.active {
    background: #3b82f6; /* Santidenty Blue */
    color: #fff;
    border-color: #3b82f6;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* ============================================================
   THEME TOGGLE BUTTON STYLES (Settings Page)
   ============================================================ */
.btn-theme {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #999;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.btn-theme:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-1px);
}
.btn-theme.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* ============================================================
   LIGHT MODE — ManyChat-inspired, crisp, high-contrast.
   No shadows. Whites are white. Greys are bold enough to read.
   ============================================================ */

/* Color palette used throughout:
   --text-primary:   #111827  (near-black, all main text)
   --text-secondary: #374151  (dark charcoal, sub-titles, roles)
   --text-muted:     #6b7280  (grey, labels, timestamps, meta)
   --text-faint:     #9ca3af  (light grey, only for tiny uppercase labels)
   --border:         #e5e7eb  (soft border)
   --bg-surface:     #f9fafb  (subtle off-white card bg)
   --bg-hover:       #f3f4f6  (hover states)
   --bg-input:       #f3f4f6  (input backgrounds)
*/

/* --- SCROLLBARS --- */
body.light-mode ::-webkit-scrollbar-thumb { background: #d1d5db; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* --- BODY & WRAPPER --- */
body.light-mode { background: #fff !important; color: #111827 !important; }
body.light-mode .dashboard-wrapper { background-color: #fff; }

/* --- LOGIN SCREEN --- */
body.light-mode #login-overlay { background: #f9fafb; }
body.light-mode .login-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .login-logo { color: #111827; }
body.light-mode .login-subtitle { color: #6b7280; }
body.light-mode .login-label { color: #374151; }
body.light-mode .login-input { background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827; }
body.light-mode .login-input:focus { border-color: #9ca3af; background: #eff0f1; }
body.light-mode .btn-login { background: #111827; color: #fff; }

/* --- SIDEBAR --- */
body.light-mode .sidebar { background: #fff; border-right: 1px solid #e5e7eb; }
body.light-mode .logo-area { color: #111827; }
body.light-mode .account-switcher { background: #f3f4f6; border: 1px solid #e5e7eb; }
body.light-mode .switcher-avatar { background: #d1d5db; color: #111827; }
body.light-mode .switcher-name { color: #111827; }
body.light-mode .switcher-role { color: #6b7280; }
body.light-mode .switcher-badge { background: #e5e7eb; border: 1px solid #d1d5db; color: #374151; }
body.light-mode .sidebar i[style*="color: #666"] { color: #9ca3af !important; }
body.light-mode .nav-item { color: #374151; }
body.light-mode .nav-item:hover { background: #f3f4f6; color: #111827; }
body.light-mode .nav-item.active {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-top: 1px solid #d1d5db;
    color: #111827;
    box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .sidebar-footer { border-top: 1px solid #e5e7eb; }

/* --- MOBILE BOTTOM NAV --- */
body.light-mode .mobile-bottom-nav {
    background: rgba(255,255,255,0.98);
    border-top: 1px solid #e5e7eb;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .mobile-nav-item { color: #9ca3af; }
body.light-mode .mobile-nav-item.active { color: #111827; }
body.light-mode .mobile-nav-item.active i { color: #111827; }

/* --- MAIN CONTENT & HEADER --- */
body.light-mode .main-content { background: #fff; }
body.light-mode .top-header { background: #fff; border-bottom: 1px solid #e5e7eb; }
body.light-mode .page-title { color: #111827; }

/* --- VIEW SECTIONS --- */
body.light-mode .view-section { background: #fff; }
body.light-mode #view-settings { background: #fff !important; }
body.light-mode #view-lead-profile { background: #fff !important; }

/* --- SETTINGS PAGE --- */
body.light-mode .premium-settings-header h2 { color: #111827; }
body.light-mode .premium-settings-header p { color: #6b7280; }
body.light-mode .premium-settings-card { background: #fff; border: 1px solid #e5e7eb; box-shadow: none; }
body.light-mode .ps-row { border-bottom: 1px solid #f3f4f6; }
body.light-mode .ps-row:hover { background: #fafafa; }
body.light-mode .ps-title { color: #111827; }
body.light-mode .ps-desc { color: #6b7280; }
body.light-mode .ps-badge { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); color: #16a34a; }
body.light-mode .ps-link { color: #2563eb; }
body.light-mode .btn-lang { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; box-shadow: none; }
body.light-mode .btn-lang:hover:not(.active) { background: #e5e7eb; color: #111827; }
body.light-mode .btn-lang.active { background: #3b82f6; color: #fff; border-color: #3b82f6; box-shadow: none; }
body.light-mode .btn-theme { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; box-shadow: none; }
body.light-mode .btn-theme:hover:not(.active) { background: #e5e7eb; color: #111827; transform: none; }
body.light-mode .btn-theme.active { background: #111827; color: #fff; border-color: #111827; box-shadow: none; }
body.light-mode .btn-logout-action { background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.2); box-shadow: none; }
body.light-mode .btn-logout-action:hover { background: rgba(239,68,68,0.1); box-shadow: none; }

/* --- GLASS TOOLTIP --- */
body.light-mode #glass-tooltip {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #111827;
    box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* --- LEADS VIEW --- */
body.light-mode .leads-table-container { background: #fff; border: 1px solid #e5e7eb; box-shadow: none; }
body.light-mode .leads-table thead th { background: #f9fafb; color: #6b7280; border-bottom: 1px solid #e5e7eb; }
body.light-mode .leads-table tbody td { color: #111827; border-bottom: 1px solid #f3f4f6; }
body.light-mode .leads-table tbody tr:hover { background: #f9fafb; }
body.light-mode .lead-name-text { color: #111827; }
body.light-mode .lead-phone { color: #111827; }
body.light-mode .lead-date { color: #6b7280; }
body.light-mode .treatment-pill { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; }
body.light-mode .note-input { color: #111827 !important; }
body.light-mode .note-input::placeholder { color: #111827 !important; opacity: 0.3; }
body.light-mode .btn-save-note {
    background: rgba(0,0,0,0.07); border: 1px solid rgba(0,0,0,0.12); color: #111827;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .btn-save-note:hover { background: rgba(0,0,0,0.13); box-shadow: none; }

/* --- STATUS COLUMN FILTER DROPDOWN --- */
body.light-mode .status-th-filter:hover { background: rgba(0,0,0,0.04); }
body.light-mode .status-th-caret { color: #9ca3af; }
body.light-mode .status-filter-dropdown { background: #fff; border: 1px solid #e5e7eb; box-shadow: none; }
body.light-mode .sfd-option { color: #374151; }
body.light-mode .sfd-option:hover { background: #f3f4f6; color: #111827; }
body.light-mode .sfd-option.active { background: #f3f4f6; color: #111827; }
body.light-mode .sfd-option.active::after { background: #111827; }

/* --- PAGINATION FOOTER --- */
body.light-mode .leads-table-footer { background: #fff; border: 1px solid #e5e7eb; border-top: none; }
@media (max-width: 900px) {
    body.light-mode .leads-table-footer { border-top: 1px solid #e5e7eb; }
}
body.light-mode .pag-btn { background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827; }
body.light-mode .pag-btn:hover:not(:disabled) { background: #e5e7eb; border-color: #d1d5db; box-shadow: none; transform: none; }
body.light-mode .pag-text { color: #374151; }
body.light-mode .pag-input { background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827; }
body.light-mode .pag-input:focus { border-color: #9ca3af; background: #eff0f1; }
body.light-mode .pag-count { color: #6b7280; }

/* --- SEARCH & GLASS INPUTS --- */
body.light-mode .glass-search-input {
    background: #f3f4f6 !important; border: 1px solid #e5e7eb !important;
    color: #111827 !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.light-mode .glass-search-input::placeholder { color: #9ca3af !important; }
body.light-mode .glass-search-input:focus {
    background: #eff0f1 !important; border-color: #9ca3af !important; box-shadow: none !important;
}
body.light-mode .glass-search-input:-webkit-autofill,
body.light-mode .glass-search-input:-webkit-autofill:hover,
body.light-mode .glass-search-input:-webkit-autofill:focus,
body.light-mode .glass-search-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f3f4f6 inset !important;
    -webkit-text-fill-color: #111827 !important;
}
body.light-mode .glass-search-icon { color: #9ca3af; }

/* --- DATE PICKER TRIGGER BUTTON --- */
body.light-mode .date-trigger-btn {
    background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .date-trigger-btn:hover { background: #e5e7eb; border-color: #d1d5db; }
body.light-mode .date-trigger-btn i { color: #9ca3af; }

/* --- DATE PICKER MODALS (main & row) --- */
body.light-mode .date-picker-modal,
body.light-mode #row-date-picker-modal {
    background: #fff; border: 1px solid #e5e7eb;
    box-shadow: none; backdrop-filter: none;
}
body.light-mode .dp-month-label { color: #111827; }
body.light-mode .dp-nav-btn { border: 1px solid #e5e7eb; color: #111827; }
body.light-mode .dp-nav-btn:hover { background: #f3f4f6; }
body.light-mode .dp-day-header { color: #9ca3af; }
body.light-mode .dp-day { color: #374151; }
body.light-mode .dp-day:hover:not(.empty) { background: #f3f4f6; color: #111827; }
body.light-mode .dp-day.selected {
    background: #111827; color: #fff; border: 1px solid #111827;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .dp-day.in-range { background: #f3f4f6; border: none; backdrop-filter: none; }
body.light-mode .dp-day.today { border: 1px solid #9ca3af; }
body.light-mode .dp-footer { border-top: 1px solid #e5e7eb; }
body.light-mode .dp-clear-btn { border: 1px solid #e5e7eb; color: #374151; }
body.light-mode .dp-clear-btn:hover { background: #f3f4f6; border-color: #d1d5db; color: #111827; }
body.light-mode .dp-confirm-btn {
    background: #111827; color: #fff; border: 1px solid #111827;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .dp-confirm-btn:hover { background: #374151; border-color: #374151; transform: none; }

/* --- REACTION NOTICE POPOVER --- */
body.light-mode .reaction-notice-popover {
    background: #fff; border: 1px solid #e5e7eb; color: #374151;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .reaction-notice-popover::after { border-bottom: 6px solid #e5e7eb; }

/* --- AVG REACTION BADGE --- */
body.light-mode #avg-reaction-badge { background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; }
body.light-mode #avg-reaction-badge span[style*="color: #888"] { color: #6b7280 !important; }
body.light-mode #avg-reaction-badge #avg-reaction-time { color: #111827 !important; }

/* --- PAGE SELECTOR DROPDOWN --- */
body.light-mode .custom-select-trigger {
    background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .custom-select-trigger:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23111827' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
}
body.light-mode .custom-select-trigger:hover { background: #e5e7eb; transform: none; }
body.light-mode .custom-select-wrapper.open .custom-select-trigger { background: #e5e7eb; border-color: #d1d5db; }
body.light-mode .custom-options {
    background: #fff; border: 1px solid #e5e7eb;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .custom-option { color: #374151; }
body.light-mode .custom-option:hover { background: #f3f4f6; color: #111827; }
body.light-mode .custom-option.selected { background: #f3f4f6; color: #111827; }
body.light-mode .custom-option:not(:last-child)::after { background: #f3f4f6; }
body.light-mode .page-name-text { color: #111827; }
body.light-mode .page-id-text { color: #6b7280; }

/* --- CHAT INTERFACE --- */
body.light-mode .chat-list-panel { background: #fff; border-right: 1px solid #e5e7eb; }
body.light-mode .chat-search-bar { border-bottom: 1px solid #e5e7eb; }
body.light-mode .search-input { background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827; }
body.light-mode .convo-item { border-bottom: 1px solid #f3f4f6; }
body.light-mode .convo-item:hover { background: #f9fafb; }
body.light-mode .convo-item.selected { background: #f3f4f6; border-right: 3px solid #0072FF; }
body.light-mode .convo-name { color: #111827; }
body.light-mode .convo-preview { color: #6b7280; }
body.light-mode .convo-time-display { color: #9ca3af; }
body.light-mode .platform-badge-icon { border: 2px solid #fff; }

@media (max-width: 900px) {
    body.light-mode .chat-list-panel { background: #fff; }
}

body.light-mode .active-chat-panel { background: #fff; }
body.light-mode .chat-header { border-bottom: 1px solid #e5e7eb; color: #111827; }
body.light-mode .chat-header:hover { background: #fafafa; }
body.light-mode .chat-header i[style*="color: #666"] { color: #9ca3af !important; }
body.light-mode #chat-header-name { color: #111827; }
body.light-mode .back-to-list-btn { color: #111827; }

/* Messages feed */
body.light-mode .messages-feed { background-image: radial-gradient(#e5e7eb 1px, transparent 1px); }
body.light-mode .incoming .msg-bubble { background: #f3f4f6; color: #111827; box-shadow: none; }
body.light-mode .outgoing .msg-bubble { box-shadow: none; }
body.light-mode .msg-time { color: rgba(0,0,0,0.4); }
body.light-mode .outgoing .msg-time { color: rgba(255,255,255,0.65); }

body.light-mode .chat-input-area { background: #fff; border-top: 1px solid #e5e7eb; }
body.light-mode .message-input { background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827; }
body.light-mode .chat-loader { color: #9ca3af; }
body.light-mode .chat-spinner { border: 3px solid rgba(0,0,0,0.1); border-top-color: #0072FF; }

/* Profile panel (chat sidebar) */
body.light-mode .profile-panel { background: #fff; border-left: 1px solid #e5e7eb; }
body.light-mode .profile-section-title { color: #9ca3af; }
body.light-mode .profile-label { color: #6b7280; }
body.light-mode .profile-value { color: #111827; }

/* --- STATUS POPOVER --- */
body.light-mode .status-popover {
    background: #fff; border: 1px solid #e5e7eb;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .status-option { color: #374151; border-bottom: 1px solid #f3f4f6; }
body.light-mode .status-option:hover { background: #f3f4f6; color: #111827; }

/* --- COMING SOON OVERLAYS --- */
body.light-mode .home-premium-wrapper { background: #f9fafb; }
body.light-mode .chat-cs-card { background: rgba(255,255,255,0.95); border: 1px solid #e5e7eb; box-shadow: none; }
body.light-mode .chat-cs-title { color: #111827; }
body.light-mode .chat-cs-text { color: #6b7280; }
body.light-mode .coming-soon-overlay {
    display: none !important;
}

/* --- REVENUE MODAL --- */
body.light-mode .revenue-modal-card { background: #fff; border: 1px solid #e5e7eb; box-shadow: none; }
body.light-mode .revenue-modal-card h3 { color: #111827; }
body.light-mode .rev-modal-icon { box-shadow: none; }
body.light-mode .rev-info-box { background: #f9fafb; border: 1px solid #e5e7eb; }
body.light-mode .rev-info-item { color: #374151; }
body.light-mode .rev-input-group label { color: #374151; }
body.light-mode .rev-input-group input { background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827; }
body.light-mode .rev-input-group input:focus { border-color: #3b82f6; box-shadow: none; background: #eff0f1; }
body.light-mode .btn-rev-skip { border: 1px solid #e5e7eb; color: #374151; }
body.light-mode .btn-rev-skip:hover { background: #f3f4f6; color: #111827; }
body.light-mode .btn-rev-save { box-shadow: none; }
body.light-mode .btn-rev-save:hover { box-shadow: none; transform: none; }

/* --- LEAD PROFILE VIEW --- */
body.light-mode .profile-view-header { background: #fff; border-bottom: 1px solid #e5e7eb; }
body.light-mode .btn-back-profile { border: 1px solid #e5e7eb; color: #111827; }
body.light-mode .btn-back-profile:hover { background: #f3f4f6; border-color: #d1d5db; }
body.light-mode .profile-view-header span { color: #111827; }
body.light-mode .profile-hero { border-bottom: 1px solid #e5e7eb; }
body.light-mode .profile-avatar-large { background: #e5e7eb; color: #111827; border: 1px solid #d1d5db; box-shadow: none; }
body.light-mode .profile-hero-info h1 { color: #111827; }
body.light-mode .profile-hero-info p { color: #6b7280; }
body.light-mode .info-card { background: #f9fafb; border: 1px solid #e5e7eb; }
body.light-mode .info-card:hover { background: #f3f4f6; transform: none; }
body.light-mode .info-label { color: #6b7280; }
body.light-mode .info-value { color: #111827; }
body.light-mode .history-section { background: #f9fafb; border: 1px solid #e5e7eb; }
body.light-mode .history-title { color: #111827; }
body.light-mode .timeline::before { background: #e5e7eb; }
body.light-mode .timeline-dot { border: 2px solid #fff; }
body.light-mode .timeline-status { color: #111827; }
body.light-mode .timeline-time { color: #6b7280; }

/* --- MOBILE LEADS LIST --- */
body.light-mode .mobile-lead-card { background: #f9fafb; border: 1px solid #e5e7eb; }
body.light-mode .mobile-lead-card:active { background: #f3f4f6; }
body.light-mode .m-lead-name { color: #111827; }
body.light-mode .m-lead-date { color: #6b7280; }
body.light-mode .btn-call-mobile {
    background: #f3f4f6; border: 1px solid #e5e7eb; color: #111827;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .btn-call-mobile:hover { background: #e5e7eb; border-color: #d1d5db; transform: none; box-shadow: none; }

/* --- RDV CELL & ROW DATE PICKER --- */
body.light-mode .rdv-cell:hover { background: rgba(0,0,0,0.03); }
body.light-mode #row-date-picker-modal {
    background: #fff; border: 1px solid #e5e7eb;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ============================================================
   LIGHT MODE — ADDITIONAL OVERRIDES (pass 2)
   Covers: mock elements, badge-glass, status shadow, caret,
   lp-status, send-btn, timeline helpers, new CSS classes,
   and all remaining dark-hardcoded elements.
   ============================================================ */

/* --- STATUS BADGE HOVER — remove shadow --- */
body.light-mode .crm-badge.actionable:hover {
    box-shadow: none;
    filter: brightness(0.95);
}

/* --- BADGE-GLASS in light mode — make it visible --- */
body.light-mode .badge-glass {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #374151;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* --- ACCOUNT SWITCHER CARET --- */
body.light-mode .account-switcher .ph-caret-down,
body.light-mode .account-switcher i[style*="color: #666"] {
    color: #9ca3af !important;
}

/* --- LP-STATUS (lead profile page subtitle) --- */
body.light-mode #lp-status { color: #374151; }

/* --- SEND BUTTON --- */
body.light-mode .send-btn {
    background: #111827;
    color: #fff;
    box-shadow: none;
}

/* --- MOCK ELEMENTS (Analytics & AI views — blurred previews) --- */
body.light-mode .mock-top-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
}
body.light-mode .mock-top-card.accent { color: #ef4444; }
body.light-mode .mock-top-card span[style*="color:#fff"],
body.light-mode .mock-top-card span[style*="color: #fff"] { color: #111827 !important; }
body.light-mode .mock-panel {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}
body.light-mode .mock-panel-title { color: #6b7280; }
body.light-mode .mock-rev-item {
    background: #f3f4f6;
}
body.light-mode .mock-rev-label { color: #6b7280; }
body.light-mode .mock-rev-val { color: #111827; }
body.light-mode .mock-bar-chart { border-bottom: 1px solid #e5e7eb; }
body.light-mode .mock-ai-stat {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
}
body.light-mode .mock-ai-chat-area {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}
body.light-mode .mock-ai-bubble.left {
    background: #e5e7eb;
    color: #374151;
}
body.light-mode .mock-ai-input {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

/* --- CS-BADGE (coming soon "Pending Review") dot shadow --- */
body.light-mode .cs-badge-dot { box-shadow: none; }

/* --- TIMELINE HELPER CLASSES (replaces old inline styles) --- */
.timeline-loading { font-size: 12px; color: #666; }
.timeline-empty   { font-size: 12px; color: #666; }
.timeline-error   { font-size: 12px; color: #ef4444; }
.timeline-details { font-size: 12px; margin-top: 2px; line-height: 1.4; color: #ccc; }
body.light-mode .timeline-loading { color: #6b7280; }
body.light-mode .timeline-empty   { color: #6b7280; }
body.light-mode .timeline-details { color: #374151; }

/* --- CHAT HELPER CLASSES (replaces old inline styles) --- */
.chat-list-empty  { padding: 40px; text-align: center; color: #666; font-size: 13px; }
.chat-feed-empty  { text-align: center; margin-top: 50px; color: #444; font-size: 13px; }
.chat-feed-error  { text-align: center; color: #ef4444; margin-top: 20px; font-size: 13px; }
.no-pages-text    { color: #666; font-style: italic; }
body.light-mode .chat-list-empty { color: #6b7280; }
body.light-mode .chat-feed-empty { color: #374151; }
body.light-mode .no-pages-text   { color: #6b7280; }

/* --- MOBILE CARD NOTES (replaces old inline style) --- */
.m-note-preview {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
    font-style: italic;
}
body.light-mode .m-note-preview { color: #6b7280; }

/* --- AVG-REACTION-TIME hardcoded white in index.html --- */
body.light-mode #avg-reaction-time { color: #111827 !important; }
body.light-mode #avg-reaction-badge .ph-clock { color: #6b7280 !important; }

/* --- MOCK AI STAT inline white text spans --- */
body.light-mode .mock-ai-stat span[style*="color:#fff"],
body.light-mode .mock-ai-stat span[style*="color: #fff"] { color: #111827 !important; }

/* --- INFO ICON in chat header --- */
body.light-mode .ph-info { color: #9ca3af !important; }

/* --- VIEW BG overrides (belt + suspenders against inline style="background:#000") --- */
body.light-mode #view-lead-profile { background: #fff !important; }
body.light-mode #view-settings { background: #fff !important; }

/* --- LEADS INFO LABELS — bump contrast in light mode --- */
body.light-mode .info-label { color: #374151; }

/* --- PROFILE SECTION TITLE (chat panel) — not too faint --- */
body.light-mode .profile-section-title { color: #6b7280; }

/* --- SWITCHER CARET --- */
.switcher-caret { color: #666; font-size: 14px; }
body.light-mode .switcher-caret { color: #9ca3af; }

/* --- AVG REACTION TIME default (dark mode) color --- */
#avg-reaction-time { color: #fff; }