/* --- Brand color — overridden at runtime by setBrandColor() --- */
/* ============================================================
   [hidden] MEANS HIDDEN.
   The attribute selector is specificity 0,1,0 and the UA rule
   that backs it comes first, so any later class setting display
   silently beats it. That has now caught .ht-group, .kanban,
   .lp-pick and .lp-convert -- four features that looked broken
   for one reason. Stated once, at the top, for everything.
   ============================================================ */
[hidden] { display: none !important; }

:root {
    --brand-color: #D4A03A;
    --brand-color-rgb: 212, 160, 58;

    /* --- Typography ---------------------------------------------------------
       --font-ui    Interface face. Inter is a grotesque drawn for screens: it
                    sits narrower than Montserrat at the same px, so the whole
                    dashboard reads a step smaller without any size change.
       --font-brand Montserrat stays the brand voice — wordmark, Showcase
                    exports, anything that is marketing rather than interface. */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-brand: 'Montserrat', sans-serif;

    /* Toolbar control geometry — rounded rectangles, not capsules. */
    --radius-control: 10px;
    --radius-control-inner: 7px;

    /* Control surface. Every chip in the toolbar and the pagination bar reads
       from these four, so they cannot drift apart. Definition comes from the
       stroke, not from a grey fill — a filled chip on a white panel looks
       like a disabled input; a hairline-bounded one looks like a control. */
    --control-bg:           rgba(255, 255, 255, 0.03);
    --control-border:       rgba(255, 255, 255, 0.14);
    --control-bg-hover:     rgba(255, 255, 255, 0.07);
    --control-border-hover: rgba(255, 255, 255, 0.24);
}

/* --- 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 */
    border-radius: 14px;
    padding: 12px 16px;
    width: 240px;
    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;
}

@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 {
    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, #0044FF);
    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;
    margin-bottom: 10px;
}

.chat-cs-text {
    font-size: 13px;
    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: var(--font-ui); 
    letter-spacing: -0.006em;
    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; }

/* --- LOGIN SCREEN --- */
#login-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 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;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    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; margin-bottom: 30px; font-weight: 500; }
.login-input-group { margin-bottom: 15px; width: 100%; text-align: left; }
.login-label { font-size: 11px; margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.5px; }
.login-input {
    width: 100%;
    padding: 12px 15px; border-radius: 8px; font-family: var(--font-ui);
    font-size: 14px; outline: none; transition: all 0.2s;
}
.btn-login {
    width: 100%; margin-top: 10px;
    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; }
.login-error {
    width: 100%; padding: 10px 14px; margin-bottom: 4px; border: 1px solid rgba(239,68,68,0.25);
    border-radius: 8px; font-size: 12px; font-weight: 500;
    text-align: center; line-height: 1.5; box-sizing: border-box;
}
body.light-mode .login-error {
    background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.3); color: #dc2626;
}

/* --- DASHBOARD WRAPPER --- */
.dashboard-wrapper {
    display: none; width: 100%; height: 100vh;
    /* 208px is the floor: the widest nav row is "SEO & GEO" at 170px including
       its NEW chip, plus the sidebar's own 32px of padding = 202px. */
    grid-template-columns: 208px 1fr; overflow: hidden;
    transition: grid-template-columns 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- SIDEBAR (DESKTOP) --- */
.sidebar { 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: 18px; font-weight: 800; margin-bottom: 16px; padding-left: 10px; letter-spacing: -0.5px; flex-shrink: 0; }
.account-switcher { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; margin-bottom: 16px; cursor: pointer; flex-shrink: 0; }
.switcher-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.switcher-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.switcher-name {
    font-size: 13px; line-height: 1.3;
    /* One line, ellipsised. It used to wrap, which was survivable in a 260px
       sidebar but grows the switcher at 208px — "Khelil Dental Center" is the
       longest account name in the system and now truncates instead. The full
       name is exposed via title on the row. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.switcher-role { font-size: 11px; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.switcher-badge { padding: 1px 4px; border-radius: 3px; font-size: 9px; }
.nav-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; position: relative; }
.nav-item { padding: 9px 12px; border-radius: 6px; cursor: pointer; font-size: 13.5px; display: flex; align-items: center; gap: 10px; transition: all 0.1s; flex-shrink: 0; }
.nav-item i { font-size: 17px; transition: color 0.2s; }
.nav-item.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1;
}

/* The sliding pill — absolutely positioned inside .nav-menu */
#nav-slider {
    position: absolute;
    left: 0;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.2);
    pointer-events: none;
    z-index: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.sidebar-footer { padding-top: 15px; margin-top: 15px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

/* --- MOBILE BOTTOM NAV (kept for legacy, hidden on mobile) --- */
.mobile-bottom-nav { display: none !important; }

/* ============================================================
   MOBILE TOP BAR (Gemini-style)
   ============================================================ */
.mobile-top-bar {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%;
    height: 56px;
    z-index: 1001;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    padding-top: env(safe-area-inset-top);
    box-sizing: border-box;
}

.mobile-hamburger {
    width: 40px; height: 40px;
    background: transparent; border: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; cursor: pointer; padding: 8px; border-radius: 10px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.mobile-hamburger:active { background: rgba(255,255,255,0.08); }
.mobile-hamburger span {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-top-logo {
    font-size: 18px; font-weight: 800;
    letter-spacing: -0.5px;
    position: absolute; left: 50%; transform: translateX(-50%);
    pointer-events: none;
}

.mobile-top-spacer { width: 40px; flex-shrink: 0; }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.mobile-drawer-backdrop {
    display: none;
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mobile-drawer-backdrop.open {
    display: block; opacity: 1;
}

.mobile-drawer {
    position: fixed; top: 0; left: 0;
    width: 88vw; max-width: 360px;
    /* Use dvh so the drawer stops exactly at the visual viewport bottom, not under the browser bar */
    height: 100vh;
    height: 100dvh;
    z-index: 10001;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    box-shadow: none;
    padding-top: env(safe-area-inset-top);
    box-sizing: border-box;
    overflow: hidden;
}
.mobile-drawer.open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,0.7);
}

.mobile-drawer-header {
    padding: 24px 20px 16px;
    flex-shrink: 0;
}
.mobile-drawer-logo {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.5px; margin-bottom: 16px;
}
.mobile-drawer-account {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border-radius: 12px;
}
.mobile-drawer-avatar {
    width: 38px; height: 38px;
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-weight: 700;
    font-size: 15px; flex-shrink: 0;
}
.mobile-drawer-user-info { flex: 1; min-width: 0; }
.mobile-drawer-username {
    font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-drawer-role {
    font-size: 11px;
    display: flex; align-items: center; gap: 4px; margin-top: 3px;
}

.mobile-drawer-nav {
    list-style: none; padding: 10px 10px 0; margin: 0;
    flex: 1; overflow-y: auto; min-height: 0;
    display: flex; flex-direction: column; gap: 2px;
}

.mobile-drawer-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 14px; border-radius: 12px;
    cursor: pointer;
    font-size: 14px; font-family: var(--font-ui);
    transition: all 0.15s ease;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.mobile-drawer-item i { font-size: 20px; flex-shrink: 0; }
.mobile-drawer-item:active { background: #1e1e1e; transform: scale(0.99); }
.mobile-drawer-item.active {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-drawer-footer {
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    flex-shrink: 0;
}

/* --- MAIN CONTENT --- */
.main-content { display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; overflow: hidden; }
.top-header { height: 52px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 25px; width: 100%; box-sizing: border-box; }
.page-title { font-size: 15px; }

/* ── REFRESH + FRESHNESS PILL — left of Filter button ── */
.leads-refresh-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}
.leads-refresh-pill:hover:not(:disabled) {
    background: var(--control-bg-hover);
    border-color: var(--control-border-hover);
}
.leads-refresh-pill:disabled { cursor: wait; opacity: 0.8; }
.leads-refresh-pill i { font-size: 14px; line-height: 1; }
.leads-refresh-pill.spinning i { animation: leadsRefreshSpin 0.8s linear infinite; }
@keyframes leadsRefreshSpin { to { transform: rotate(360deg); } }

/* Staleness decay — passive websocket-health indicator */

/* Light-mode variants */
body.light-mode .leads-refresh-pill { color: rgba(60, 60, 67, 0.7); }
body.light-mode .leads-refresh-pill:hover:not(:disabled) { color: rgba(60, 60, 67, 0.95); }
body.light-mode .leads-refresh-pill.stale-mild {
    color: #B45309;
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}
body.light-mode .leads-refresh-pill.stale-high {
    color: #B91C1C;
    background: rgba(239, 68, 68, 0.07);
    border-color: rgba(239, 68, 68, 0.3);
}

/* --- 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 10px; display: inline-flex; align-items: center; justify-content: center;
    min-width: 162px; width: 162px; box-sizing: border-box;
    border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: capitalize; letter-spacing: 0.3px;
    white-space: nowrap; line-height: normal; flex-shrink: 0;
}
.crm-badge.actionable { cursor: pointer; transition: all 0.2s ease; position: relative; user-select: none; }
.crm-badge.actionable:hover { transform: translateY(-1px); }

/* Chip badges — background + border pill */
.badge-blue   { background: rgba(51, 105, 255, 0.15);  color: #3369FF; border: 1px solid rgba(51, 105, 255, 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-amber  { background: rgba(245, 158, 11, 0.15);  color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-orange { background: rgba(249, 115, 22, 0.15);  color: #f97316; border: 1px solid rgba(249, 115, 22, 0.3); }
.badge-cyan   { background: rgba(51, 105, 255, 0.15);   color: #3369FF; border: 1px solid rgba(51, 105, 255, 0.3); }
.badge-muted  { background: rgba(75, 85, 99, 0.15);    color: #9ca3af; border: 1px solid rgba(75, 85, 99, 0.3); }

/* Plain text badge — New Inquiry: no chip, just blue text */

.status-popover {
    position: fixed; z-index: 999999; border-radius: 10px; 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;
    cursor: pointer;
    transition: background 0.1s; display: flex; align-items: center; gap: 8px;
}
.status-option:last-child { border-bottom: none; }
.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;
    animation: viewEnter 0.2s ease;
}

@keyframes viewEnter {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --- 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 {
    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;
    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(51, 105, 255, 0.1); border: 1px solid rgba(51, 105, 255, 0.3);
    color: #3369FF; font-size: 24px; display: flex; align-items: center; justify-content: center;
}
.revenue-modal-card h3 { margin: 0 0 15px 0; font-size: 20px; letter-spacing: -0.5px; }

/* The Sleek Micro-Copy Box */
.rev-info-box {
    display: flex; flex-direction: column; gap: 8px;
    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; 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; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
.rev-input-group input {
    width: 100%;
    padding: 12px 15px; border-radius: 8px; font-family: var(--font-ui);
    font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-weight: 600;
}

.rev-modal-actions { display: flex; gap: 10px; margin-top: 25px; }
.btn-rev-skip { flex: 1; background: transparent; padding: 12px; border-radius: 8px; font-family: var(--font-ui); font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.btn-rev-save { flex: 2; background: #3369FF; border: none; color: #fff; padding: 12px; border-radius: 8px; font-family: var(--font-ui); font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.btn-rev-save:hover { background: #2459EB; }

/* 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; }
.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 { border-radius: 8px; padding: 12px 20px; display: flex; align-items: center; gap: 10px; font-size: 13px; flex: 1; min-width: 150px; }
.mock-top-card.accent { 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 { border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
.mock-panel-title { font-size: 12px; 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: #3369FF; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mock-rev-list { display: flex; flex-direction: column; gap: 10px; }
.mock-rev-item { padding: 12px 15px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.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%, #3369FF 30% 50%, #3369FF 50% 80%, #648AF2 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; padding-bottom: 10px; }
.mock-bar { flex: 1; background: #3369FF; 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 { border-radius: 8px; padding: 15px 20px; flex: 1; font-size: 13px; font-weight: 500; min-width: 150px; }
.mock-ai-chat-area { 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 { align-self: flex-start; border-bottom-left-radius: 4px; }
.mock-ai-bubble.right { background: #3369FF; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.mock-ai-input { margin-top: auto; border-radius: 999px; height: 50px; width: 100%; }
.coming-soon-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; flex-direction: column; align-items: center; justify-content: center; }
.cs-content-box { text-align: center; 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%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; font-size: 28px; }
.cs-title { font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 10px 0; letter-spacing: -0.5px; }
.cs-subtitle { font-size: 14px; line-height: 1.6; margin: 0 0 30px 0; }
.cs-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(51, 105, 255, 0.1); border: 1px solid rgba(51, 105, 255, 0.2); color: #3369FF; 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: #3369FF; border-radius: 50%; animation: badgePulse 2s infinite; }

/* --- LEADS TABLE --- */
.leads-view-wrapper { padding: 0; width: 100%; box-sizing: border-box; overflow: visible; display: flex; flex-direction: column; height: 100%; }
.leads-table-container { overflow: hidden; flex: 1; display: flex; flex-direction: column; }
.table-scroll-area {
    /* Both axes. width:100% used to squeeze every column into the viewport,
       so adding one made all the others narrower — the table got denser
       instead of longer. Now columns keep the width they were given and the
       table scrolls sideways, the way a CRM grid is expected to. */
    overflow: auto;
    flex: 1;
    scrollbar-width: thin;
    -ms-overflow-style: auto;
}
.table-scroll-area::-webkit-scrollbar { width: 9px; height: 9px; }
.table-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(60,60,67,0.22);
    border-radius: 999px;
}
.table-scroll-area::-webkit-scrollbar-thumb:hover { background: rgba(60,60,67,0.35); }
.table-scroll-area::-webkit-scrollbar-track { background: transparent; }

/* width must NOT be content-based: table-layout:fixed is ignored when it is,
   and the browser silently falls back to auto layout — which is how the notes
   column ended up 1166px wide and the table 2385px. width:100% keeps the
   layout fixed and the th widths authoritative; min-width lets the whole table
   exceed a narrow viewport and scroll instead of compressing. */
.leads-table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
    font-family: var(--font-ui) !important;
}

/* Scrolled right, a row of dates with no name attached is unreadable, so the
   first column stays put. It needs its own background or the cells sliding
   under it show through. */
.leads-table thead th:first-child,
.leads-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: #fff;
}
.leads-table thead th:first-child { z-index: 6; }
/* Deliberately low. Every dropdown in this app is a positioned layer above
   the table, and a sticky header that outranks one of them clips it in a way
   that looks like a rendering bug rather than a stacking rule. 5 is above the
   rows and below everything else. */
.leads-table thead th { position: sticky; top: 0; z-index: 5; padding: 11px 12px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leads-table tbody td { padding: 0 12px; vertical-align: middle !important; font-family: var(--font-ui) !important; text-align: left; height: 40px; line-height: 40px; white-space: nowrap; overflow: visible; }
.leads-table thead th:first-child, .leads-table tbody td:first-child { padding-left: 22px; }
.leads-table thead th:last-child,  .leads-table tbody td:last-child  { padding-right: 22px; }
.lead-profile { display: flex; align-items: center; gap: 6px; overflow: hidden; height: 100%; }
.lead-name-text { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: normal; min-width: 0; flex: 1; }
.lead-phone { font-family: var(--font-ui); letter-spacing: 0.5px; font-size: 13px; font-weight: 600; width: 100%; display: block; text-overflow: ellipsis; line-height: normal; }
.lead-date { font-size: 12px; font-weight: 500; }
.treatment-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-control-inner); 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;
    margin-left: -8px;      /* cancel the padding so the label starts on the column edge */
    border-radius: 6px;
    transition: background 0.15s ease;
    user-select: none;
    white-space: nowrap;
}
.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; /* 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;
    border-radius: 10px;
    padding: 6px;
    min-width: 220px;
    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;
    transition: background 0.1s ease, color 0.1s ease;
    letter-spacing: 0.2px;
}
.sfd-option.active::after {
    content: '';
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sfd-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- GROUPED RDV VIEW (Upcoming / Past) --- */
.rdv-group-header td,
td.rdv-group-header {
    padding: 18px 16px 6px !important;
    background: transparent !important;
    border-bottom: 1px solid #1f1f1f !important;
    line-height: 1 !important;
    height: auto !important;
}

.rdv-group-header--empty {
    opacity: 0.5;
}

.rdv-group-date-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.rdv-group-icon {
    font-size: 13px;
    flex-shrink: 0;
}

.rdv-group-no-booking {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    font-style: italic;
    text-transform: none;
}

/* Count badge — small pill showing number of leads */
.rdv-group-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    flex-shrink: 0;
}

/* Caret — rotates 90° when group is open */
.rdv-group-caret {
    font-size: 11px;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 1px;
}

td.rdv-group-no-future {
    padding: 20px 16px !important;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    font-style: italic;
    height: auto !important;
    line-height: 1 !important;
}

/* Mobile group headers */
.rdv-group-header-mobile {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 18px 4px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid #1f1f1f;
    margin-bottom: 4px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.rdv-group-header-mobile:active {
    opacity: 0.7;
}

.rdv-group-no-future-mobile {
    padding: 16px 4px;
    font-size: 12px;
    font-weight: 500;
    font-style: italic;
    text-align: center;
}

.rdv-group-empty-state {
    padding: 40px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

/* Light mode adjustments */
body.light-mode .rdv-group-date-label      { color: rgba(0, 0, 0, 0.45); }
body.light-mode .rdv-group-icon            { color: rgba(0, 0, 0, 0.2); }
body.light-mode .rdv-group-no-booking      { color: rgba(0, 0, 0, 0.2); }
body.light-mode .rdv-group-count-badge     { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #16a34a; }
body.light-mode .rdv-group-caret           { color: rgba(0,0,0,0.25); }
body.light-mode td.rdv-group-no-future     { color: rgba(0, 0, 0, 0.2); }
body.light-mode .rdv-group-header-mobile   { color: rgba(0, 0, 0, 0.45); border-color: rgba(0,0,0,0.1); }
body.light-mode .rdv-group-no-future-mobile{ color: rgba(0, 0, 0, 0.2); }
body.light-mode .rdv-group-header-row:hover td { background: rgba(0,0,0,0.02) !important; }


@keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%       { opacity: 1;   transform: scale(1); }
}

/* ── New-lead pulsing dot ── leading indicator on rows where status is
   "New Inquiry" AND created_at is within the last 24h. Auto-removed by
   patchLeadRow on status change and by a 60s sweep when the window expires.
   Premium minimal: small (6px), soft halo, slow elegant cadence. */
.lead-new-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
    animation: leadNewPulse 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes leadNewPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
    70%  { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
}
body.light-mode .lead-new-dot {
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.3);
    animation-name: leadNewPulseLight;
}
@keyframes leadNewPulseLight {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.3); }
    70%  { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
    body.light-mode .lead-new-dot { animation: none; box-shadow: 0 0 3px rgba(22, 163, 74, 0.4); }
}
.pag-load-indicator { display: flex; align-items: center; gap: 5px; margin-left: 12px; }
.pag-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); animation: pulse 1s infinite; }
.pag-dot:nth-child(2) { animation-delay: 0.2s; }
.pag-dot:nth-child(3) { animation-delay: 0.4s; }

.leads-table-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    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-radius: 12px;
        margin-top: 10px;
        margin-bottom: 16px;
    }
}
.pag-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.pag-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    transform: none;
}
.pag-text {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.pag-input {
    width: 52px;
    height: 34px;
    border-radius: 8px;
    font-family: var(--font-ui);
    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-divider {
    flex: 1;
}
.pag-count {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}


/* --- RDV CELL STYLES --- */
.rdv-cell { position: relative; transition: background 0.2s; }

/* Empty-state placeholder for RDV column — reveals calendar icon + brightens on row hover */
.rdv-empty-hint {
    opacity: 0.3;
    font-style: italic;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.18s ease, font-style 0.18s ease;
}
.rdv-empty-hint i {
    font-size: 12px;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.leads-table tbody tr:hover .rdv-empty-hint,
.mobile-lead-card:hover .rdv-empty-hint { opacity: 0.6; font-style: normal; }
.leads-table tbody tr:hover .rdv-empty-hint i,
.mobile-lead-card:hover .rdv-empty-hint i { opacity: 1; transform: translateX(0); }


/* ── NOTES COLUMN ─────────────────────────────────────────────────────────
   The old cell was a full-width text input. Empty, it showed a greyed-out
   placeholder that the row-hover ring boxed off-centre — the input reserved
   32px on the right for a save button, so the highlight never sat around the
   text. An empty cell now offers one thing instead: a single centred +. */
.notes-col { overflow: visible !important; }
.notes-cell { display: flex; align-items: center; gap: 8px; height: 100%; min-width: 0; }
/* Centred on the column's own label, not in the middle of a 155px cell. The
   header word is where the eye already is, and a + floating in the middle of
   empty space reads as belonging to no column in particular. 4px = half the
   difference between the 33px word and the 26px button, past the shared 12px
   text inset; "Notes" is the same string in both shipped languages. */
.notes-cell.is-empty { justify-content: flex-start; }
.notes-cell.is-empty .note-add-btn { margin-left: 4px; }

.note-text {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; color: #000000;
}
/* How many more are one hover away. A count, not a badge — it is metadata
   about the cell, not a status worth a colour. */
.note-count {
    flex-shrink: 0; font-size: 11px; font-weight: 600; line-height: 1;
    padding: 3px 6px; border-radius: 5px;
    color: rgba(60,60,67,0.55); background: rgba(60,60,67,0.07);
    font-variant-numeric: tabular-nums;
}

/* The + is the whole affordance, so it carries the brand. It rests quiet and
   fills in on hover; in a populated cell it stays hidden until the row is
   hovered, so a column of notes reads as text rather than a column of buttons. */
.note-add-btn {
    flex-shrink: 0; width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer; font-size: 14px;
    color: var(--blue, #0043FB);
    background: rgba(0,67,251,0.07);
    border: 1px solid rgba(0,67,251,0.16);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease;
}
.note-add-btn:hover { background: rgba(0,67,251,0.14); border-color: rgba(0,67,251,0.3); transform: scale(1.08); }
.note-add-btn:active { transform: scale(0.94); }
.notes-cell:not(.is-empty) .note-add-btn { opacity: 0; pointer-events: none; }
.leads-table tbody tr:hover .notes-cell .note-add-btn { opacity: 1; pointer-events: auto; }
.notes-cell.is-empty .note-add-btn { opacity: 0.5; }
.leads-table tbody tr:hover .notes-cell.is-empty .note-add-btn { opacity: 1; }

/* ── STICKERS ──────────────────────────────────────────────────────────── */
.note-sticker {
    background: #FFFFFF;
    border: 1px solid rgba(60,60,67,0.10);
    border-radius: 10px;
    padding: 10px 12px 8px;
    text-align: left;
}
.note-sticker + .note-sticker { margin-top: 8px; }
.note-sticker-text { font-size: 13px; line-height: 1.45; color: #000000; white-space: pre-wrap; word-break: break-word; }
.note-sticker-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.note-sticker-time { font-size: 11px; color: rgba(60,60,67,0.45); font-variant-numeric: tabular-nums; }
.note-sticker-time em { font-style: italic; }
.note-sticker-del {
    width: 22px; height: 22px; padding: 0; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: none; border-radius: 6px; cursor: pointer;
    color: rgba(60,60,67,0.3); font-size: 13px;
    opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.note-sticker:hover .note-sticker-del { opacity: 1; }
.note-sticker-del:hover { color: #ef4444; background: rgba(239,68,68,0.08); }

/* ── HOVER POPOVER ─────────────────────────────────────────────────────── */
.notes-popover {
    position: fixed; z-index: 9999998;
    width: 300px; max-height: 320px;
    display: flex; flex-direction: column;
    background: #F8F9FC;
    border: 1px solid rgba(60,60,67,0.10);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(60,40,15,0.12), 0 2px 6px rgba(60,40,15,0.06);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.notes-popover.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.notes-popover-head {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 14px 9px; flex-shrink: 0;
    font-size: 12px; font-weight: 600; color: rgba(60,60,67,0.5);
    border-bottom: 1px solid rgba(60,60,67,0.07);
}
.notes-popover-head span {
    font-size: 11px; padding: 2px 6px; border-radius: 5px;
    background: rgba(60,60,67,0.07); color: rgba(60,60,67,0.6);
    font-variant-numeric: tabular-nums;
}
.notes-popover-body { overflow-y: auto; padding: 10px 12px 12px; }

/* ── COMPOSE CARD ──────────────────────────────────────────────────────── */
.notes-modal-overlay {
    position: fixed; inset: 0; z-index: 9999999;
    background: rgba(60,60,67,0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.22s ease;
}
.notes-modal-overlay.active { display: flex; opacity: 1; }
/* Square: a stack of stickers plus a place to write one. A tall dialog would
   turn the stack into the entire screen. */
.notes-modal-card {
    width: 460px; max-width: calc(100% - 32px); height: 460px; max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: #F8F9FC;
    border: 1px solid rgba(60,60,67,0.08);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(60,40,15,0.16);
    overflow: hidden;
}
.notes-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; flex-shrink: 0; }
.notes-card-kicker { font-size: 12px; font-weight: 500; color: rgba(60,60,67,0.5); }
.notes-card-name { font-size: 18px; font-weight: 700; color: #000000; letter-spacing: -0.3px; margin-top: 3px; }
.notes-card-close {
    width: 30px; height: 30px; flex-shrink: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; cursor: pointer; font-size: 15px;
    color: rgba(60,60,67,0.55); background: rgba(120,120,128,0.09); border: 1px solid rgba(60,60,67,0.08);
    transition: background 0.15s ease, color 0.15s ease;
}
.notes-card-close:hover { background: rgba(120,120,128,0.18); color: #000; }
.notes-card-stack { flex: 1 1 auto; overflow-y: auto; padding: 4px 22px 14px; }
.notes-card-empty { padding: 28px 0; text-align: center; font-size: 13px; color: rgba(60,60,67,0.4); }
.notes-card-compose { flex-shrink: 0; padding: 14px 22px 18px; border-top: 1px solid rgba(60,60,67,0.07); background: #FFFFFF; }
.notes-card-compose textarea {
    width: 100%; box-sizing: border-box; resize: none;
    font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; color: #000;
    background: #F8F9FC; border: 1px solid rgba(60,60,67,0.12); border-radius: 10px;
    padding: 10px 12px; outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.notes-card-compose textarea::placeholder { color: rgba(60,60,67,0.35); }
.notes-card-compose textarea:focus { border-color: rgba(0,67,251,0.4); box-shadow: 0 0 0 3px rgba(0,67,251,0.10); }
.notes-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
.notes-card-hint { font-size: 11px; color: rgba(60,60,67,0.38); font-variant-numeric: tabular-nums; }
.notes-card-save {
    padding: 9px 18px; border: 0; border-radius: 9px; cursor: pointer;
    font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: #fff;
    background: var(--blue, #0043FB);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.notes-card-save:hover { filter: brightness(1.08); }
.notes-card-save:active { transform: scale(0.97); }
.notes-card-save:disabled { opacity: 0.6; cursor: default; }

/* ── PROFILE STACK ─────────────────────────────────────────────────────── */
.notes-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.notes-stack-scroll { width: 100%; max-height: 208px; overflow-y: auto; }
.notes-stack .note-sticker { width: 100%; box-sizing: border-box; }
.notes-stack.is-empty { flex-direction: row; align-items: center; gap: 10px; }
.notes-empty-label { font-size: 13px; color: rgba(60,60,67,0.4); }

@media (max-width: 600px) {
    .notes-modal-card { height: auto; max-height: calc(100vh - 32px); }
}

/* --- ROW DATE PICKER MODAL --- */
#row-date-picker-modal { position: fixed; z-index: 9999999; border-radius: 16px; width: 320px; padding: 15px; display: none; flex-direction: column; gap: 10px; 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: 10px; flex-wrap: wrap; }
.leads-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    padding: 11px 22px;
    flex-shrink: 0;
}
.leads-toolbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── Unified metric strip — icon + value segments with dividers; label on hover (title) ── */
.metrics-strip {
    display: inline-flex; align-items: center; gap: 0;
    padding: 5px 6px;
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    flex-shrink: 0;
    user-select: none;
}
.metric-seg {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    border-radius: var(--radius-control-inner);
    white-space: nowrap;
    transition: background 0.15s ease;
}
.metric-seg[onclick] { cursor: pointer; }
.metric-seg i { font-size: 16px; line-height: 1; transition: color 0.3s ease; flex-shrink: 0; }
.metric-seg span { font-size: 14px; font-weight: 700; line-height: 1; }
.metric-divider { width: 1px; align-self: stretch; margin: 5px 0; flex-shrink: 0; }
/* Trimmed leads search — frees room for the metric strip, shrinks first when crowded */
#leads-search-box { width: 190px; min-width: 150px; flex-shrink: 1; }
.glass-search-wrapper { position: relative; width: 280px; }
.glass-search-input { width: 100%; background: var(--control-bg) !important; border: 1px solid var(--control-border) !important; padding: 11px 15px 11px 42px !important; border-radius: var(--radius-control); font-family: var(--font-ui); font-size: 13px; font-weight: 500; outline: none; transition: all 0.2s ease; -webkit-appearance: none; appearance: none; margin: 0; line-height: normal; box-sizing: border-box; }
.glass-search-input:-webkit-autofill, .glass-search-input:-webkit-autofill:hover, .glass-search-input:-webkit-autofill:focus, .glass-search-input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }
.glass-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 18px; pointer-events: none; z-index: 10; }

/* --- MOBILE LEADS LIST --- */
.mobile-leads-fade-wrap {
    display: none;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: visible; /* Must NOT clip — filter panel is absolutely positioned */
}

/* Glass edge overlays — sit on top of the scrolling list */
.mobile-glass-edge {
    position: absolute;
    left: 0; right: 0;
    z-index: 2;
    pointer-events: none;
    height: 36px;
    transition: opacity 0.18s ease;
}

/* Top glass: disabled — header line acts as the separator */

/* Bottom glass: fades from transparent → page bg upward */
.mobile-glass-bottom {
    bottom: 0;
    height: 48px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
    mask-image: linear-gradient(to top, black 0%, transparent 100%);
    opacity: 1; /* visible at rest */
}
.mobile-leads-list {
    display: none;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    padding: 2px 1px;
    /* ── Hide scrollbar (Mobile Contacts) ── */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mobile-leads-list::-webkit-scrollbar { display: none; }

.mobile-lead-card {
    content-visibility: auto;       /* skip layout+paint for off-screen cards */
    contain-intrinsic-size: 0 72px; /* estimated card height — keeps scrollbar stable */
    border: 1px solid #252525;
    border-radius: 14px;
    padding: 14px 12px 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-height: 66px;
}

.m-lead-left { display: flex; flex-direction: column; gap: 5px; overflow: hidden; flex: 1; min-width: 0; }
.m-lead-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.m-lead-date { font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }

/* Treatment label next to date */
.m-lead-treatment {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

/* Status cell wrapper — badge + meta dot side by side */
.status-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Meta source dot — ph-meta-logo icon next to status badge, desktop only */
.meta-source-dot {
    color: #0082fb;
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1;
}

.m-lead-right { display: flex; flex-direction: row; align-items: center; gap: 9px; flex-shrink: 0; }


/* RDV date under status badge */
.m-rdv-date {
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    letter-spacing: 0.1px;
}
.m-rdv-date i { font-size: 10px; }

/* Name row — flex so badge sits right after truncated name */
.m-lead-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    min-width: 0;
}
/* Name inside row still truncates */
.m-lead-name-row .m-lead-name {
    flex: 1;
    min-width: 0;
}

/* ── AI score ──────────────────────────────────────────────────────────────
   Bar + number. The value is a generated column in Postgres; this only paints
   it. Band colours are the same three the status badges already use, so a hot
   lead reads hot in both columns instead of introducing a second vocabulary. */
.score-cell { white-space: nowrap; }
.score-cell-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
/* A hairline, not a progress bar. 3px reads as a measurement; 6px read as a
   download. Longer and thinner is what makes it look considered — the eye
   compares lengths far better than it compares thicknesses, so the extra
   width buys real precision as well as calm. */
.score-bar {
    display: block;
    width: 68px;
    height: 3px;
    flex-shrink: 0;
    border-radius: 2px;
    overflow: hidden;
    /* Track colour is per-theme, like .lead-phone. A single value cannot work:
       the light wash (#EBF0FF) glares on the dark theme, and a translucent
       white disappears on the light one. */
}
.score-bar-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: currentColor;
    /* Width is inline (the value); only the growth is animated, so a re-render
       after a realtime update slides instead of snapping. */
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.score-num {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    /* Tabular figures and a fixed width so the numbers form a clean right
       edge down the column instead of jittering with each value. */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    min-width: 20px;
    text-align: right;
}
/* One blue for every score, never a red/amber/green ladder. A colour that
   changes with the value tells the reader "this lead is bad" — but a low score
   often just means the patient stopped answering, and the status column is
   already the place that judges. The bar shows magnitude; the colour is
   brand, not verdict. --blue is the logo blue from the palette at the bottom
   of this file, and it drives the fill through currentColor. */
.score-cell-inner { color: var(--blue, #0043FB); }
/* The number reads as data, not as a link — it borrows the phone column's
   colour exactly, so the row has one voice and only the bar carries brand.
   Two values, because .lead-phone is #fff on the dark theme and a soft grey
   on light; a single colour would vanish into one of them. */
/* No score is not a zero score: grey, an em dash, and no bar at all, so it
   cannot be misread as "this lead scored badly". */
.score-empty {
    color: #9aa4b2;
    opacity: 0.55;
    font-size: 13px;
    font-weight: 500;
    cursor: default;
    /* Sits where the bar starts, so the dashes line up with the bars above
       and below rather than floating in the middle of the cell. */
    padding-inline-start: 2px;
}
/* The score is desktop-only. On a phone card the name row already carries the
   new-lead dot and the reapply pill, and a third element squeezed the name
   into an ellipsis — the patient's name is worth more there than a number
   nobody sorts by on a phone. The desktop table keeps it. */

/* Reapply badge — compact count pill e.g. ×3 */
.reapply-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 17px;
    padding: 0 5px;
    border-radius: 6px;
    border: 1px solid rgba(34, 197, 94, 0.3);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
}

/* Mobile badge — wide enough for longest label, text never touches border */
.m-badge {
    font-size: 10px !important;
    padding: 5px 14px !important;
    min-width: 148px !important;
    width: 148px !important;
    border-radius: 8px !important;
}

/* Glassmorphism call button — liquid glass, Apple-style */
.btn-call-mobile {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    font-size: 18px;
    transition: all 0.18s;
    flex-shrink: 0;
}
.btn-call-mobile:active { transform: scale(0.94); background: var(--control-bg-hover); }
.btn-call-mobile.called { background: rgba(34,197,94,0.15) !important; border-color: rgba(34,197,94,0.4) !important; color: #22c55e !important; }

/* --- DATE PICKER STYLES --- */
.date-picker-container { position: relative; width: 250px; }

/* ── FILTER BUTTON & PANEL ──────────────────────────────────────────────── */
.filter-btn-container { position: relative; flex-shrink: 0; z-index: 1000; }

.filter-trigger-btn {
    display: flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 18px;
    background: var(--control-bg);
    border: 1px solid var(--control-border); border-radius: var(--radius-control); font-family: var(--font-ui);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
}
.filter-trigger-btn:hover { background: var(--control-bg-hover); border-color: var(--control-border-hover); }
.filter-trigger-btn i { font-size: 16px; }

.filter-active-badge {
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #22c55e; color: #000; font-size: 11px; font-weight: 800;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}

.filter-panel {
    position: absolute; top: calc(100% + 8px); left: 0;
    width: 260px;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
    padding: 8px 0; z-index: 99999;
    opacity: 0; transform: translateY(-8px) scale(0.97);
    pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
}
.filter-panel.fp-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }

.fp-row { padding: 0; }

.fp-section-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px; background: none; border: none; font-family: var(--font-ui); cursor: pointer; text-align: left;
    transition: background 0.15s;
}

.fp-row-left { display: flex; align-items: center; gap: 10px; }
.fp-caret { font-size: 12px; color: rgba(255,255,255,0.35); transition: transform 0.2s ease; flex-shrink: 0; }

.fp-active-tag {
    display: inline-flex; align-items: center; padding: 2px 8px;
    background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3);
    color: #22c55e; font-size: 10px; font-weight: 700; border-radius: 999px;
    white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis;
}

.fp-sub {
    max-height: 0; overflow: hidden;
    transition: max-height 0.25s ease, padding 0.15s ease;
    padding: 0 12px;
}
.fp-sub.fp-sub-open { max-height: 400px; padding: 4px 12px 8px; }

/* Status sub: fixed height showing ~3.5 items, scrollable */
#fp-sub-status.fp-sub-open {
    max-height: 148px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
#fp-sub-status.fp-sub-open::-webkit-scrollbar { width: 3px; }
#fp-sub-status.fp-sub-open::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; }

.fp-sub-btn {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; font-family: var(--font-ui); font-weight: 600; cursor: pointer; margin-bottom: 5px;
    transition: all 0.15s; text-align: left;
}
.fp-sub-btn.fp-sub-active { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); color: #22c55e; }

.fp-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}

.fp-calendar-inner { padding: 4px 0; }
.fp-calendar-inner .dp-calendar-wrapper { box-shadow: none; border: none; background: transparent; padding: 0; }
.fp-calendar-inner .dp-footer { margin-top: 8px; padding: 0; }

.fp-divider { height: 1px; margin: 4px 0; }

.fp-clear-all-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; background: none; border: none;
    color: #ef4444; font-family: var(--font-ui);
    font-size: 12px; font-weight: 700; cursor: pointer; opacity: 0.4;
    transition: opacity 0.2s, background 0.15s; border-radius: 0 0 16px 16px;
}
.fp-clear-all-btn:hover { background: rgba(239,68,68,0.06); opacity: 1 !important; }
.date-trigger-btn { width: 100%; padding: 10px 15px; height: 40px; box-sizing: border-box; border-radius: 999px; font-family: var(--font-ui); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all 0.2s ease; }
.date-trigger-btn i { font-size: 16px; }
.date-picker-modal { position: absolute; top: 110%; left: 0; border-radius: 16px; width: 340px; z-index: 1000; padding: 15px; display: none; flex-direction: column; gap: 10px; }
.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; }
.dp-nav-btn { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dp-day-header { text-align: center; padding-bottom: 5px; }
.dp-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.dp-day.selected { font-weight: 700; }
.dp-day.in-range { -webkit-backdrop-filter: blur(8px); color: #fff; }
.dp-day.empty { cursor: default; }
.dp-footer { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 5px; }
.dp-clear-btn { background: transparent; padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.dp-confirm-btn { padding: 10px 24px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.dp-confirm-btn:active { transform: translateY(0); }

/* --- GLASS TOOLTIP --- */
#glass-tooltip { position: fixed; z-index: 999999; padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 500; pointer-events: none; display: none; max-width: 300px; white-space: normal; word-wrap: break-word; font-family: var(--font-ui); }

/* --- 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 { border-radius: 999px; font-family: var(--font-ui); 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-repeat: no-repeat; background-position: center; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; }
.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; 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; cursor: pointer; transition: background 0.1s; display: block; position: relative; }
.custom-option.selected { font-weight: 700; }
.custom-option:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; 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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.page-id-text { font-size: 10px; font-weight: 500; 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 { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-search-bar { padding: 15px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.search-input { width: 100%; padding: 10px 15px; border-radius: 8px; font-family: var(--font-ui); 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; }
.convo-avatar { width: 42px; height: 42px; border-radius: 50%; 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%;
    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-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-time-display { font-size: 11px; font-weight: 500; white-space: nowrap; margin-left: 6px; }
.convo-preview { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;  }
.active-chat-panel { display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; min-height: 0; }
.chat-header { padding: 10px 16px; flex-shrink: 0; display: flex; align-items: center; min-height: 56px; }
.chat-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.chat-header-avatar-wrap { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #222; display: flex; align-items: center; justify-content: center; }
.chat-header-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: none; }
.chat-header-avatar-placeholder { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.chat-header-title-group { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; cursor: pointer; }
.chat-header-name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.chat-header:hover { background: #0a0a0a; }
.profile-panel { height: 100%; display: flex; flex-direction: column; overflow-y: auto; padding: 25px; box-sizing: border-box; }
.profile-section-title { margin-bottom: 15px; }
.profile-data-item { margin-bottom: 20px; }
.profile-label { font-size: 11px; margin-bottom: 4px; }
.profile-value { font-size: 13px; word-break: break-all; }
.messages-feed { flex: 1; padding: 12px 16px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.message-group { display: flex; flex-direction: column; max-width: 75%; position: relative; opacity: 1; gap: 2px; }
.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: 9px 13px 6px 13px; border-radius: 20px; font-size: 15px; line-height: 1.4; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; position: relative; min-width: 50px; word-wrap: break-word; word-break: break-word; display: flex; flex-direction: column; gap: 2px; }
.incoming .msg-bubble { border-bottom-left-radius: 4px; }
.outgoing .msg-bubble { border-bottom-right-radius: 4px; }
.msg-time { font-size: 11px; opacity: 0.5; font-weight: 500; display: block; line-height: 1; align-self: flex-end; white-space: nowrap; }
.chat-input-area { padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; flex-shrink: 0; position: relative; }
.chat-input-pill { display: flex; align-items: center; border: 1px solid rgba(255,255,255,0.13); border-radius: 999px; flex: 1; padding: 0 5px 0 14px; min-height: 40px; gap: 6px; }
.message-input { flex: 1; padding: 9px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; outline: none; min-width: 0; }
.send-btn { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; flex-shrink: 0; font-size: 14px; transition: background 0.15s; }
.back-to-list-btn { display: none; font-size: 18px; padding-right: 15px; background: none; border: none; cursor: pointer; }
.chat-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; }
.chat-spinner { width: 30px; height: 30px; 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; margin: 0 0 5px 0; }
.premium-settings-header p { font-size: 14px; margin: 0; }
.premium-settings-card { border-radius: 16px; overflow: hidden; }
.ps-row { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; transition: background 0.2s; gap: 16px; }
.ps-row:last-child { border-bottom: none; }
.ps-info { display: flex; flex-direction: column; gap: 4px; padding-right: 20px; flex: 1; min-width: 0; }
.ps-action { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ps-title { font-size: 14px; }
.ps-desc { font-size: 13px; line-height: 1.4; }
.ps-badge { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ps-link { 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 { padding: 10px 20px; font-family: var(--font-ui); font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; }

/* --- LEAD PROFILE VIEW (PREMIUM MINIMALIST) --- */
.profile-view-header { display: flex; align-items: center; gap: 15px; padding: 20px 30px; position: sticky; top: 0; z-index: 10; }
.btn-back-profile { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.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: 22px; margin-bottom: 6px; }
/* The hero mark is the AI score, not an initial. Colour vocabulary is the
   table column's, verbatim: one blue for every value, because a hue that moves
   with the score would call a lead bad when the patient simply stopped
   answering. The ring shows magnitude; the status line beneath it judges. */
.profile-score-mark { flex-shrink: 0; }
.score-ring { --score-pct: 0%; width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
/* The knockout has to match the surface behind it, per theme — that is what
   turns the disc into a ring. */
.score-ring-inner { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
/* One number, one line. Stacking "/ 90" under it shifted the digits off the
   ring's optical centre for the sake of a denominator the tooltip already
   carries. line-height:1 on a flex-centred single line is what actually
   centres it — with a normal line-height the glyph box adds leading below. */
.score-ring-num { font-size: 23px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
/* No score is not a zero score: a flat grey track, an em dash, no sweep and no
   denominator — nothing that could be read as "this lead scored badly". */
.score-ring.is-empty .score-ring-num { font-size: 21px; font-weight: 500; }
.profile-hero-info h1 { margin: 0; font-size: 23px; }
.profile-hero-info p { margin: 6px 0 0 0; font-size: 13px; font-weight: 500; }
/* The profile borrows the leads table's grammar outright: a flat surface,
   hairline rules, 12px regular labels in the same muted grey, and values in
   the same near-white. Cards here were nine rounded, bordered, shadowed,
   lifting-on-hover boxes for nine short strings — chrome that cost more
   attention than the data inside it. Rows on lines carry the same content
   with nothing to look at but the content. */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 48px; row-gap: 0; }
.info-card { border-radius: 0; padding: 13px 0; transition: none; }
/* Static. A row in a table does not lift when you point at it, and nothing
   in this list is clickable except the two fields that say so themselves. */
.info-label { margin-bottom: 5px; }
.info-value { font-size: 14px; word-break: break-word; line-height: 1.45; }
/* The phone was the one blue string on the page. In the table that column is
   plain text, and the profile should not shout what the table states. */
.info-value.highlight { color: inherit; }

/* One accent lives on this screen — the score ring. Every other signal that
   used to be a coloured word, a filled pill or a glyph is now this: a 6px
   dot before plain text. Colour marks WHICH rows carry a signal; the text
   says what it is. Nine competing hues became one vocabulary. */
.val-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 9px; vertical-align: middle; position: relative; top: -1px; flex-shrink: 0; }


/* --- STATUS HISTORY TIMELINE --- */
.history-section { margin-top: 34px; border-radius: 0; padding: 26px 0 0; }
.history-title { font-size: 12px; margin-bottom: 18px; text-transform: none; letter-spacing: 0; }
.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; }
.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: #3369FF; }
.timeline-item:first-child .timeline-dot { background: #22c55e; }
.timeline-status { font-size: 13px; }
.timeline-time { font-size: 11px; 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; }
    .cs-content-box { padding: 40px 24px; margin: 0 20px; max-width: calc(100% - 40px); box-sizing: border-box; }
    .cs-title { font-size: 22px; }
}

/* --- RESPONSIVE OVERRIDES --- */
@media (max-width: 900px) {
    .dashboard-wrapper { grid-template-columns: 1fr; height: 100vh; overflow-x: hidden; } 
    .sidebar { display: none; }
    .mobile-top-bar { display: flex; }
    .main-content { padding-bottom: 0px; padding-top: 56px; width: 100%; overflow-x: hidden; } 
    .top-header { display: none; }
    .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: 0; min-width: 0; box-sizing: border-box; }
    .chat-search-bar { padding: 10px 16px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; } 
    .search-input { border-radius: 999px; padding: 12px 20px; font-size: 16px; }
    /* Meta search matches WhatsApp on mobile (16px = no iOS zoom-on-focus).
       !important needed: the base .mobile-chat-search-input rule appears later in the file. */
    .mobile-chat-search-input { font-size: 16px !important; }
    /* Flat list — no cards */
    .conversations-list { padding: 0 !important; display: flex; flex-direction: column; gap: 0; width: 100%; box-sizing: border-box; }
    .convo-item { padding: 11px 16px; margin-bottom: 0; width: 100%; box-sizing: border-box; gap: 12px; align-items: center; }
    .convo-details { min-width: 0; gap: 3px; }
    .convo-avatar { width: 54px; height: 54px; flex-shrink: 0; }
    .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: 0; min-width: 0; }
    .messages-feed { padding: 10px 12px 6px; }
    .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; }
    /* Full-screen chat: hide top bar, zero out its padding */
    body.chat-open .mobile-top-bar { display: none !important; }
    body.chat-open .main-content { padding-top: 0 !important; }
    
    /* --- MOBILE HEADER LAYOUT --- */
    .leads-header-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }

    /* Row 1: refresh · filter · search (compact controls, search fills the rest) */
    #leads-refresh-pill { order: 1; flex-shrink: 0; height: 40px; padding: 0 11px; font-size: 11px; gap: 5px; }
    .filter-btn-container { order: 2; flex-shrink: 0; }
    .filter-trigger-btn { height: 40px; padding: 0 13px; font-size: 12px; }
    #leads-search-box { order: 3; flex: 1 1 70px; width: auto; min-width: 0; }
    #leads-search-box .glass-search-input { width: 100%; min-width: 0; box-sizing: border-box; }

    /* Row 2: metric strip — full width, 4 evenly-sized segments */
    #metrics-strip { order: 4; width: 100%; box-sizing: border-box; }
    #metrics-strip .metric-seg { flex: 1; justify-content: center; padding: 6px 4px; }

    /* Filter panel: full width on mobile */
    .filter-panel { width: calc(100vw - 30px); left: 0; z-index: 100000; }

    .glass-search-input { font-size: 16px !important; height: 40px !important; padding: 0 15px 0 42px !important; box-sizing: border-box !important; line-height: 40px !important; }
    .filter-trigger-btn { flex-shrink: 0; min-width: 90px; }
    .leads-view-wrapper { padding: 15px 15px 0 15px; } 
    .mock-dashboard, .mock-ai-dashboard { padding: 20px; }
    .premium-settings-wrapper { padding: 20px 16px; }
    .ps-row { flex-wrap: wrap; gap: 12px; padding: 18px 16px; }
    .ps-action { width: 100%; justify-content: center; }
    .ps-info { padding-right: 0; width: 100%; }
    #view-leads .leads-table-container { display: none; }
    .meta-source-dot { display: none; } /* desktop only */
    .mobile-leads-fade-wrap { display: flex; flex-direction: column; }
    .mobile-leads-list { display: flex; padding-bottom: 8px; padding-top: 8px; } 
}

/* --- 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) {
    /* Spacer — only for non-leads lists */
    .conversations-list::after, 
    .mock-dashboard::after,
    .mock-ai-dashboard::after,
    #view-settings::after, 
    #view-lead-profile::after {
        content: '';
        display: block;
        height: 30px !important;
        min-height: 30px !important;
        width: 100%;
        flex-shrink: 0;
    }

    /* Full-screen chat panel — no extra bottom gap */
    .active-chat-panel { padding-bottom: 0 !important; }

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

/* --- LANGUAGE SELECTOR BUTTONS --- */
.btn-lang {
    padding: 8px 16px;
    border-radius: 8px;
    font-family: var(--font-ui);
    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) {
    transform: translateY(-1px);
}

/* ============================================================
   THEME TOGGLE BUTTON STYLES (Settings Page)
   ============================================================ */
.btn-theme {
    padding: 8px 14px;
    border-radius: 8px;
    font-family: var(--font-ui);
    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;
}

/* ============================================================
   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: rgba(60,60,67,0.2); border-radius: 4px; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: rgba(60,60,67,0.35); }

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

/* --- LOGIN SCREEN --- */
body.light-mode #login-overlay { background: #F8F9FC; }
body.light-mode .login-card {
    background: #FFFFFF;
    border: 1px solid rgba(60,60,67,0.12);
    box-shadow: 0 2px 20px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8);
}
body.light-mode .login-logo { color: #000000; }
body.light-mode .login-subtitle { color: rgba(60,60,67,0.6); }
body.light-mode .login-label { color: rgba(60,60,67,0.85); font-weight: 500; }
body.light-mode .login-input { background: rgba(120,120,128,0.12); border: 1px solid rgba(60,60,67,0.1); color: #000000; }
body.light-mode .login-input:focus { border-color: #0043FB; background: rgba(0,67,251,0.04); box-shadow: 0 0 0 3px rgba(0,67,251,0.12); }
body.light-mode .btn-login { background: #0043FB; color: #fff; box-shadow: 0 2px 8px rgba(0,67,251,0.3); }

/* --- SIDEBAR --- */
body.light-mode {
    --control-bg:           #FFFFFF;
    --control-border:       rgba(60, 60, 67, 0.14);
    --control-bg-hover:     #FFFFFF;
    --control-border-hover: rgba(60, 60, 67, 0.28);
}
body.light-mode .sidebar { background: #F8F9FC; border-right: 1px solid rgba(60,60,67,0.12); }
body.light-mode .logo-area { color: #000000; }
body.light-mode .account-switcher { background: rgba(120,120,128,0.1); border: 1px solid rgba(60,60,67,0.1); }
body.light-mode .switcher-avatar { background: #1C1C1E; color: #ffffff; }
body.light-mode .switcher-name { color: #000000; font-weight: 600; }
body.light-mode .switcher-role { color: rgba(60,60,67,0.6); }
body.light-mode .switcher-badge { background: rgba(120,120,128,0.16); border: 1px solid rgba(60,60,67,0.1); color: rgba(60,60,67,0.7); letter-spacing: 0.2px; }
body.light-mode .sidebar i[style*="color: #666"] { color: rgba(60,60,67,0.4) !important; }
body.light-mode .nav-item { color: rgba(60,60,67,0.8); font-weight: 500; }
body.light-mode .nav-item:hover { background: rgba(120,120,128,0.1); color: #000000; }
body.light-mode .nav-item.active {
    background: rgba(255,255,255,0.75);
    color: #000000;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.light-mode #nav-slider {
    background: rgba(255,255,255,0.75);
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.light-mode .sidebar-footer { border-top: 1px solid rgba(60,60,67,0.1); }

/* --- MOBILE BOTTOM NAV --- */
body.light-mode .mobile-bottom-nav {
    background: rgba(248,249,252,0.92);
    border-top: 1px solid rgba(60,60,67,0.12);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
}
body.light-mode .mobile-nav-item { color: rgba(60,60,67,0.4); }
body.light-mode .mobile-nav-item.active { color: #000000; }
body.light-mode .mobile-nav-item.active i { color: #000000; }

/* --- MOBILE TOP BAR & DRAWER (light mode) --- */
body.light-mode .mobile-top-bar {
    background: rgba(248,249,252,0.92);
    border-bottom: 1px solid rgba(60,60,67,0.12);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
}
body.light-mode .mobile-hamburger span { background: #1C1C1E; }
body.light-mode .mobile-top-logo { color: #000000; }
body.light-mode .mobile-drawer {
    background: #F8F9FC;
    border-right: 1px solid rgba(60,60,67,0.12);
}
body.light-mode .mobile-drawer-header { border-bottom: 1px solid rgba(60,60,67,0.1); }
body.light-mode .mobile-drawer-logo { color: #000000; }
body.light-mode .mobile-drawer-account { background: rgba(120,120,128,0.1); border: 1px solid rgba(60,60,67,0.1); }
body.light-mode .mobile-drawer-avatar { background: #1C1C1E; color: #ffffff; }
body.light-mode .mobile-drawer-username { color: #000000; font-weight: 600; }
body.light-mode .mobile-drawer-role { color: rgba(60,60,67,0.6); }
body.light-mode .mobile-drawer-item { color: rgba(60,60,67,0.85); font-weight: 500; }
body.light-mode .mobile-drawer-item:hover { background: rgba(120,120,128,0.1); color: #000000; }
body.light-mode .mobile-drawer-item.active {
    color: #000000;
    background: rgba(255,255,255,0.75);
    font-weight: 600;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.light-mode .mobile-drawer-footer { border-top: 1px solid rgba(60,60,67,0.1); }

/* --- MAIN CONTENT & HEADER --- */
body.light-mode .main-content { background: #F8F9FC; }
body.light-mode .top-header { background: rgba(248,249,252,0.92); border-bottom: 1px solid rgba(60,60,67,0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body.light-mode .page-title { color: #000000; font-weight: 700; letter-spacing: -0.3px; }

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

/* --- SETTINGS PAGE --- */
body.light-mode .premium-settings-header h2 { color: #000000; font-weight: 700; letter-spacing: -0.3px; }
body.light-mode .premium-settings-header p { color: rgba(60,60,67,0.6); }
body.light-mode .premium-settings-card { background: #FFFFFF; border: 1px solid rgba(60,60,67,0.1); box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
body.light-mode .ps-row { border-bottom: 1px solid rgba(60,60,67,0.08); }
body.light-mode .ps-row:hover { background: rgba(120,120,128,0.05); }
body.light-mode .ps-title { color: #000000; font-weight: 500; }
body.light-mode .ps-desc { color: rgba(60,60,67,0.55); }
body.light-mode .ps-badge { background: rgba(52,199,89,0.1); border: 1px solid rgba(52,199,89,0.25); color: #248A3D; }
body.light-mode .ps-link { color: #0043FB; }
body.light-mode .btn-lang { background: rgba(120,120,128,0.12); border: 1px solid rgba(60,60,67,0.1); color: rgba(60,60,67,0.8); box-shadow: none; }
body.light-mode .btn-lang:hover:not(.active) { background: rgba(120,120,128,0.2); color: #000000; }
body.light-mode .btn-lang.active { background: #0043FB; color: #fff; border-color: #0043FB; box-shadow: 0 2px 6px rgba(0,67,251,0.3); }
body.light-mode .btn-theme { background: rgba(120,120,128,0.12); border: 1px solid rgba(60,60,67,0.1); color: rgba(60,60,67,0.8); box-shadow: none; }
body.light-mode .btn-theme:hover:not(.active) { background: rgba(120,120,128,0.2); color: #000000; transform: none; }
body.light-mode .btn-theme.active { background: #3A3A3C; color: #fff; border-color: #3A3A3C; box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
body.light-mode .btn-logout-action { background: rgba(255,59,48,0.07); border: 1px solid rgba(255,59,48,0.18); box-shadow: none; color: #FF3B30; width: 100%; justify-content: center; border-radius: 12px; }
body.light-mode .btn-logout-action:hover { background: rgba(255,59,48,0.12); box-shadow: none; }

/* --- GLASS TOOLTIP --- */
body.light-mode #glass-tooltip {
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(60,60,67,0.12);
    color: #000000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}

/* --- LEADS VIEW --- */
body.light-mode .leads-table-container {
    background: #FFFFFF;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
body.light-mode .leads-toolbar {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(60,60,67,0.08);
}
body.light-mode .leads-view-wrapper { background: #FFFFFF; }
body.light-mode .mobile-glass-top { display: none !important; }
body.light-mode .mobile-glass-bottom {
    background: linear-gradient(to top, rgba(249,250,251,0.92) 0%, rgba(249,250,251,0.55) 45%, rgba(249,250,251,0) 100%);
}
body.light-mode .leads-table thead th { background: #FFFFFF; color: rgba(60,60,67,0.5); border-bottom: 0; box-shadow: inset 0 -1px 0 rgba(60,60,67,0.08); font-weight: 500; letter-spacing: 0; font-size: 12px; text-transform: none; }
body.light-mode .leads-table tbody td { color: #000000; border-bottom: 1px solid rgba(60,60,67,0.06); }
body.light-mode .leads-table tbody tr:hover { background: rgba(120,120,128,0.05); }
body.light-mode .lead-name-text { color: #000000; font-weight: 500; }
body.light-mode .lead-phone { color: rgba(60,60,67,0.85); white-space: nowrap; overflow: visible; }
body.light-mode .score-num { color: rgba(60,60,67,0.85); }
body.light-mode .score-bar { background: rgba(0,67,251,0.13); }
body.light-mode .lead-date { color: rgba(60,60,67,0.45); }
body.light-mode .treatment-pill { background: var(--control-bg); border: 1px solid var(--control-border); color: rgba(60,60,67,0.8); }
body.light-mode .rdv-empty-hint { color: rgba(60,60,67,0.45); }
body.light-mode .leads-table tbody tr:hover .rdv-empty-hint,
body.light-mode .mobile-lead-card:hover .rdv-empty-hint { color: rgba(60,60,67,0.75); }

/* --- STATUS COLUMN FILTER DROPDOWN --- */
body.light-mode .status-th-filter:hover { background: rgba(120,120,128,0.08); border-radius: 6px; }
body.light-mode .status-th-caret { color: rgba(60,60,67,0.35); }
body.light-mode .status-filter-dropdown { background: #FFFFFF; border: 1px solid rgba(60,60,67,0.1); box-shadow: 0 8px 30px rgba(0,0,0,0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body.light-mode .sfd-option { color: rgba(60,60,67,0.85); }
body.light-mode .sfd-option:hover { background: rgba(120,120,128,0.08); color: #000000; }
body.light-mode .sfd-option.active { background: rgba(0,67,251,0.08); color: #0043FB; }
body.light-mode .sfd-option.active::after { background: #0043FB; }

/* --- PAGINATION FOOTER --- */
body.light-mode .leads-table-footer { background: #FFFFFF; border: 1px solid rgba(60,60,67,0.1); border-top: none; }
@media (max-width: 900px) {
    body.light-mode .leads-table-footer { border-top: 1px solid rgba(60,60,67,0.1); }
}
body.light-mode .pag-btn { background: rgba(120,120,128,0.1); border: 1px solid rgba(60,60,67,0.1); color: #000000; }
body.light-mode .pag-btn:hover:not(:disabled) { background: rgba(120,120,128,0.18); border-color: rgba(60,60,67,0.18); box-shadow: none; transform: none; }
body.light-mode .pag-text { color: rgba(60,60,67,0.75); }
body.light-mode .pag-input { background: rgba(120,120,128,0.1); border: 1px solid rgba(60,60,67,0.1); color: #000000; }
body.light-mode .pag-input:focus { border-color: #0043FB; background: rgba(0,67,251,0.04); }
body.light-mode .pag-count { color: rgba(60,60,67,0.45); }

/* --- SEARCH & GLASS INPUTS --- */
body.light-mode .glass-search-input {
    color: #000000 !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.light-mode .glass-search-input::placeholder { color: rgba(60,60,67,0.35) !important; }
body.light-mode .glass-search-input:focus {
    background: rgba(0,67,251,0.04) !important; border-color: #0043FB !important; box-shadow: 0 0 0 3px rgba(0,67,251,0.1) !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 rgba(248,249,252,1) inset !important;
    -webkit-text-fill-color: #000000 !important;
}
body.light-mode .glass-search-icon { color: rgba(60,60,67,0.4); }

/* --- DATE PICKER TRIGGER BUTTON --- */
body.light-mode .date-trigger-btn {
    background: rgba(120,120,128,0.1); border: 1px solid rgba(60,60,67,0.1); color: #000000;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .date-trigger-btn:hover { background: rgba(120,120,128,0.18); border-color: rgba(60,60,67,0.15); }
body.light-mode .date-trigger-btn i { color: rgba(60,60,67,0.4); }

/* --- DATE PICKER MODALS (main & row) --- */
body.light-mode .date-picker-modal,
body.light-mode #row-date-picker-modal {
    background: #FFFFFF; border: 1px solid rgba(60,60,67,0.1);
    box-shadow: 0 8px 40px rgba(0,0,0,0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
body.light-mode .dp-month-label { color: #000000; font-weight: 600; }
body.light-mode .dp-nav-btn { border: 1px solid rgba(60,60,67,0.1); color: #0043FB; background: rgba(0,67,251,0.06); }
body.light-mode .dp-nav-btn:hover { background: rgba(0,67,251,0.12); }
body.light-mode .dp-day-header { color: rgba(60,60,67,0.4); font-weight: 600; font-size: 11px; }
body.light-mode .dp-day { color: #000000; }
body.light-mode .dp-day:hover:not(.empty) { background: rgba(0,67,251,0.08); color: #0043FB; }
body.light-mode .dp-day.selected {
    background: #0043FB; color: #fff; border: 1px solid #0043FB;
    box-shadow: 0 2px 8px rgba(0,67,251,0.3); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .dp-day.in-range { background: rgba(0,67,251,0.08); border: none; backdrop-filter: none; }
body.light-mode .dp-day.today { border: 1.5px solid #0043FB; color: #0043FB; font-weight: 600; }
body.light-mode .dp-footer { border-top: 1px solid rgba(60,60,67,0.08); }
body.light-mode .dp-clear-btn { border: 1px solid rgba(60,60,67,0.12); color: rgba(60,60,67,0.7); }
body.light-mode .dp-clear-btn:hover { background: rgba(120,120,128,0.1); border-color: rgba(60,60,67,0.2); color: #000000; }
body.light-mode .dp-confirm-btn {
    background: #0043FB; color: #fff; border: 1px solid #0043FB;
    box-shadow: 0 2px 8px rgba(0,67,251,0.3); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.light-mode .dp-confirm-btn:hover { background: #003DE6; border-color: #003DE6; transform: none; }

/* --- REACTION NOTICE POPOVER --- */
body.light-mode .reaction-notice-popover {
    background: rgba(255,255,255,0.96); border: 1px solid rgba(60,60,67,0.12); color: rgba(60,60,67,0.85);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
}
body.light-mode .reaction-notice-popover::after { border-bottom: 6px solid rgba(60,60,67,0.12); }

/* --- METRIC STRIP (unified KPI bar) — light mode --- */
body.light-mode .metrics-strip { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.light-mode .metric-seg:hover { background: rgba(60,60,67,0.06); }
body.light-mode .metric-seg i { color: rgba(60,60,67,0.45); }
body.light-mode .metric-seg span { color: #1a1a1a; }
body.light-mode .metric-divider { background: rgba(60,60,67,0.12); }

/* --- PAGE SELECTOR DROPDOWN --- */
body.light-mode .custom-select-trigger {
    background: rgba(120,120,128,0.1); border: 1px solid rgba(60,60,67,0.1); color: #000000;
    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: rgba(120,120,128,0.18); transform: none; }
body.light-mode .custom-select-wrapper.open .custom-select-trigger { background: rgba(120,120,128,0.18); border-color: rgba(60,60,67,0.15); }
body.light-mode .custom-options {
    background: #FFFFFF; border: 1px solid rgba(60,60,67,0.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
body.light-mode .custom-option { color: rgba(60,60,67,0.85); }
body.light-mode .custom-option:hover { background: rgba(120,120,128,0.08); color: #000000; }
body.light-mode .custom-option.selected { background: rgba(0,67,251,0.08); color: #0043FB; }
body.light-mode .custom-option:not(:last-child)::after { background: rgba(60,60,67,0.06); }
body.light-mode .page-name-text { color: #000000; font-weight: 500; }
body.light-mode .page-id-text { color: rgba(60,60,67,0.45); }

/* --- CHAT INTERFACE --- */
body.light-mode .chat-list-panel { background: #F8F9FC; border-right: 1px solid rgba(60,60,67,0.1); }
body.light-mode .chat-search-bar { background: rgba(248,249,252,0.9); border-bottom: 1px solid rgba(60,60,67,0.08); }
body.light-mode .search-input {
    background: rgba(120,120,128,0.1); border: 1px solid rgba(60,60,67,0.08); color: #000000;
}
body.light-mode .search-input::placeholder { color: rgba(60,60,67,0.35); }
body.light-mode .search-input:focus { border-color: #0043FB; background: rgba(0,67,251,0.04); box-shadow: 0 0 0 3px rgba(0,67,251,0.1); outline: none; }

/* Conversation list items */
body.light-mode .convo-item {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(60,60,67,0.07);
    margin: 0;
}
body.light-mode .convo-item:hover { background: rgba(120,120,128,0.05); }
body.light-mode .convo-item.selected {
    background: rgba(0,67,251,0.06);
    border-right: 3px solid #0043FB;
    border-bottom: 1px solid rgba(60,60,67,0.06);
}
body.light-mode .convo-avatar { background: rgba(120,120,128,0.18); }
body.light-mode .platform-badge-icon { border: 2px solid #fff; }
body.light-mode .convo-name { color: #000000; font-weight: 600; }
body.light-mode .convo-preview { color: rgba(60,60,67,0.5); }
body.light-mode .convo-time-display { color: rgba(60,60,67,0.38); }

/* Mobile conversation flat list — light mode */
@media (max-width: 900px) {
    body.light-mode .convo-item {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        min-height: 72px;
    }
    body.light-mode .convo-item:active { background: rgba(60,60,67,0.05); }
    body.light-mode .convo-item.selected {
        background: rgba(0,67,251,0.05);
        border-right: none;
    }
    body.light-mode .chat-search-bar { background: #f2f2f7; border-bottom: 1px solid rgba(60,60,67,0.08); }
    body.light-mode .chat-list-panel { background: #fff; }
    body.light-mode .search-input {
        background: rgba(120,120,128,0.1); border: 1px solid rgba(60,60,67,0.08); color: #000000;
    }
}

/* Active chat panel */
body.light-mode .active-chat-panel { background: #F8F9FC; }
body.light-mode .chat-header {
    background: #fff;
    border-bottom: 1px solid rgba(60,60,67,0.1);
    color: #000;
}
body.light-mode #chat-header-name, body.light-mode .chat-header-name { color: #000; font-weight: 600; }
body.light-mode #sms-header-name { color: #000000; font-weight: 600; }
body.light-mode .back-to-list-btn { color: #0043FB !important; }
body.light-mode .chat-header-avatar-placeholder { background: #e5e5ea; color: #8e8e93; }

/* Messages feed — plain light background like Instagram */
body.light-mode .messages-feed { background: #fff; }

/* Incoming bubbles */
body.light-mode .incoming .msg-bubble {
    background: #E9E9EB;
    color: #000;
}
/* Outgoing bubbles */
body.light-mode .outgoing .msg-bubble {
    background: #0043FB;
    color: #fff;
}
body.light-mode .msg-time { color: rgba(60,60,67,0.38); }
body.light-mode .outgoing .msg-time { color: rgba(255,255,255,0.6); }

/* Chat input area */
body.light-mode .chat-input-area {
    background: transparent;
    border-top: none;
}
body.light-mode .chat-input-pill {
    background: rgba(120,120,128,0.12);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-color: rgba(60,60,67,0.15);
}
body.light-mode .message-input { background: transparent; border: none; color: #000; }
body.light-mode .message-input::placeholder { color: rgba(60,60,67,0.4); }
body.light-mode .send-btn { background: #0043FB; color: #fff; }
body.light-mode .send-btn:hover { background: #003DE6; }

/* Chat loaders */
body.light-mode .chat-loader { color: rgba(60,60,67,0.35); }
body.light-mode .chat-spinner { border: 3px solid rgba(60,60,67,0.12); border-top-color: #0043FB; }

/* Profile panel (desktop chat sidebar) */
body.light-mode .profile-panel { background: #F8F9FC; border-left: 1px solid rgba(60,60,67,0.1); }
body.light-mode .profile-section-title { color: rgba(60,60,67,0.4); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
body.light-mode .profile-label { color: rgba(60,60,67,0.5); }
body.light-mode .profile-value { color: #000000; font-weight: 500; }

/* --- STATUS POPOVER --- */
body.light-mode .status-popover {
    background: rgba(255,255,255,0.97); border: 1px solid rgba(60,60,67,0.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
}
body.light-mode .status-option { color: rgba(60,60,67,0.85); border-bottom: 1px solid rgba(60,60,67,0.06); }
body.light-mode .status-option:hover { background: rgba(120,120,128,0.07); color: #000000; }

/* --- COMING SOON OVERLAYS --- */
body.light-mode .home-premium-wrapper { background: #F8F9FC; }
body.light-mode .chat-cs-card { background: rgba(255,255,255,0.97); border: 1px solid rgba(60,60,67,0.1); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
body.light-mode .chat-cs-title { color: #000000; font-weight: 700; }
body.light-mode .chat-cs-text { color: rgba(60,60,67,0.55); }
body.light-mode .coming-soon-overlay {
    background: linear-gradient(180deg, rgba(248,249,252,0.1) 0%, rgba(248,249,252,0.88) 55%, rgba(248,249,252,0.97) 100%);
}
body.light-mode .cs-content-box {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255,255,255,0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
body.light-mode .cs-icon-wrapper {
    background: linear-gradient(135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.01));
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: rgba(60,60,67,0.7);
    box-shadow: none;
}
body.light-mode .cs-title {
    background: linear-gradient(to right, #111827, #4b5563);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-mode .cs-subtitle { color: rgba(60,60,67,0.55); }

/* --- REVENUE MODAL --- */
body.light-mode .revenue-modal-card { background: #FFFFFF; border: 1px solid rgba(60,60,67,0.1); box-shadow: 0 8px 40px rgba(0,0,0,0.12); }
body.light-mode .revenue-modal-card h3 { color: #000000; font-weight: 600; }
body.light-mode .rev-modal-icon { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
body.light-mode .rev-info-box { background: rgba(248,249,252,0.8); border: 1px solid rgba(60,60,67,0.08); }
body.light-mode .rev-info-item { color: rgba(60,60,67,0.8); }
body.light-mode .rev-input-group label { color: rgba(60,60,67,0.75); font-weight: 500; }
body.light-mode .rev-input-group input { background: rgba(120,120,128,0.1); border: 1px solid rgba(60,60,67,0.1); color: #000000; }
body.light-mode .rev-input-group input:focus { border-color: #0043FB; box-shadow: 0 0 0 3px rgba(0,67,251,0.1); background: rgba(0,67,251,0.04); }
body.light-mode .btn-rev-skip { border: 1px solid rgba(60,60,67,0.12); color: rgba(60,60,67,0.7); }
body.light-mode .filter-trigger-btn { color: #000000; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.light-mode .filter-panel { background: rgba(255,255,255,0.98); border-color: rgba(60,60,67,0.1); box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.1); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); }
body.light-mode .fp-section-btn { color: rgba(60,60,67,0.75); font-weight: 600; font-size: 13px; letter-spacing: 0.1px; }
body.light-mode .fp-section-btn:hover { background: rgba(120,120,128,0.08); }
body.light-mode .fp-sub-btn { background: rgba(120,120,128,0.07); border-color: rgba(60,60,67,0.09); color: rgba(60,60,67,0.75); font-size: 12px; }
body.light-mode .fp-sub-btn:hover { background: rgba(0,67,251,0.08); color: #0043FB; border-color: rgba(0,67,251,0.2); }
body.light-mode .fp-divider { background: rgba(60,60,67,0.08); }
body.light-mode .btn-rev-skip:hover { background: rgba(120,120,128,0.1); color: #000000; }
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: rgba(248,249,252,0.92); border-bottom: 1px solid rgba(60,60,67,0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body.light-mode .btn-back-profile { border: 1px solid rgba(60,60,67,0.14); color: #000000; background: rgba(120,120,128,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
body.light-mode .btn-back-profile:hover { background: rgba(120,120,128,0.2); border-color: rgba(60,60,67,0.22); }
body.light-mode .profile-view-header span { color: #000000; font-weight: 600; }
body.light-mode .profile-hero { border-bottom: 1px solid rgba(60,60,67,0.08); background: none; padding-bottom: 28px; }
body.light-mode .score-ring { background: conic-gradient(var(--blue, #0043FB) var(--score-pct), rgba(60,60,67,0.10) 0); }
body.light-mode .score-ring-inner { background: #F8F9FC; }
body.light-mode .score-ring-num { color: #000000; }
body.light-mode .score-ring.is-empty { background: rgba(60,60,67,0.09); }
body.light-mode .score-ring.is-empty .score-ring-num { color: rgba(60,60,67,0.38); }
body.light-mode .profile-hero-info h1 { color: #000000; font-weight: 700; letter-spacing: -0.3px; }
body.light-mode .profile-hero-info p { color: rgba(60,60,67,0.5); }
/* Same hairline the light table draws under every row. */
body.light-mode .info-card { background: none; border: 0; border-bottom: 1px solid rgba(60,60,67,0.06); box-shadow: none; }
body.light-mode .info-card:hover { background: none; transform: none; }
body.light-mode .info-label { color: rgba(60,60,67,0.5); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }
body.light-mode .info-value { color: #000000; font-weight: 500; }
/* Scoped to <em>: the panel no longer sets a value in italics, but this rule
   used to catch <i class="ph"> icons too and grey out every glyph in the
   grid — including ones given an explicit colour. */
body.light-mode .info-value em { color: rgba(60,60,67,0.4); font-style: italic; }
body.light-mode .history-section { background: none; border: 0; border-top: 1px solid rgba(60,60,67,0.08); box-shadow: none; }
body.light-mode .history-title { color: rgba(60,60,67,0.5); font-weight: 500; }
body.light-mode .timeline::before { background: rgba(60,60,67,0.12); }
body.light-mode .timeline-dot { border: 2px solid #F8F9FC; }
body.light-mode .timeline-status { color: #000000; font-weight: 500; }
body.light-mode .timeline-time { color: rgba(60,60,67,0.45); }

/* --- MOBILE LEADS LIST --- */
body.light-mode .mobile-lead-card { background: #FFFFFF; border-color: rgba(60,60,67,0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(60,60,67,0.06); }
body.light-mode .mobile-lead-card:active { background: rgba(120,120,128,0.06); border-color: rgba(60,60,67,0.15); }
body.light-mode .m-lead-name { color: #000000; font-weight: 500; }
body.light-mode .m-lead-date { color: rgba(60,60,67,0.4); }
body.light-mode .m-lead-treatment { color: rgba(60,60,67,0.5); }
body.light-mode .m-rdv-date { color: #248A3D; }
body.light-mode .reapply-badge { background: rgba(52,199,89,0.1); border-color: rgba(52,199,89,0.3); color: #248A3D; }
body.light-mode .btn-call-mobile {
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    color: rgba(60,60,67,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: none;
}
body.light-mode .btn-call-mobile:hover { background: var(--control-bg-hover); border-color: var(--control-border-hover); transform: scale(1.05); }
body.light-mode .btn-call-mobile.called { background: rgba(52,199,89,0.12); border-color: rgba(52,199,89,0.3); color: #248A3D; }

/* --- RDV CELL & ROW DATE PICKER --- */
body.light-mode .rdv-cell:hover { background: rgba(0,67,251,0.05); }
body.light-mode #row-date-picker-modal {
    background: #FFFFFF; border: 1px solid rgba(60,60,67,0.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

/* ============================================================
   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 {
    filter: brightness(0.94);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* --- BADGE-GLASS in light mode — make it visible --- */
body.light-mode .badge-glass {
    background: rgba(120,120,128,0.1);
    border: 1px solid rgba(60,60,67,0.1);
    color: rgba(60,60,67,0.8);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.light-mode .badge-grey {
    background: transparent;
    border: 1px solid transparent;
    color: #34C759;
    font-weight: 600;
    font-size: 12px;
}

/* --- ACCOUNT SWITCHER CARET --- */
body.light-mode .account-switcher .ph-caret-down,
body.light-mode .account-switcher i[style*="color: #666"] {
    color: rgba(60,60,67,0.35) !important;
}

/* --- LP-STATUS (lead profile page subtitle) --- */
body.light-mode #lp-status { color: rgba(60,60,67,0.7); font-weight: 500; }

/* --- MOCK ELEMENTS (Analytics & AI views — blurred previews) --- */
body.light-mode .mock-top-card {
    background: #FFFFFF;
    border: 1px solid rgba(60,60,67,0.08);
    color: rgba(60,60,67,0.75);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
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: #000000 !important; }
body.light-mode .mock-panel {
    background: #FFFFFF;
    border: 1px solid rgba(60,60,67,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
body.light-mode .mock-panel-title { color: rgba(60,60,67,0.5); }
body.light-mode .mock-rev-item {
    background: rgba(120,120,128,0.08);
}
body.light-mode .mock-rev-label { color: rgba(60,60,67,0.5); }
body.light-mode .mock-rev-val { color: #000000; font-weight: 500; }
body.light-mode .mock-bar-chart { border-bottom: 1px solid rgba(60,60,67,0.1); }
body.light-mode .mock-ai-stat {
    background: #FFFFFF;
    border: 1px solid rgba(60,60,67,0.08);
    color: rgba(60,60,67,0.75);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
body.light-mode .mock-ai-chat-area {
    background: rgba(248,249,252,0.8);
    border: 1px solid rgba(60,60,67,0.08);
}
body.light-mode .mock-ai-bubble.left {
    background: rgba(120,120,128,0.14);
    color: rgba(60,60,67,0.8);
}
body.light-mode .mock-ai-input {
    background: rgba(120,120,128,0.1);
    border: 1px solid rgba(60,60,67,0.08);
}

/* --- 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; }
.timeline-empty   { font-size: 12px; }
.timeline-error   { font-size: 12px; color: #ef4444; }
.timeline-details { font-size: 12px; margin-top: 2px; line-height: 1.4; }
body.light-mode .timeline-loading { color: rgba(60,60,67,0.45); }
body.light-mode .timeline-empty   { color: rgba(60,60,67,0.45); }
body.light-mode .timeline-details { color: rgba(60,60,67,0.7); }

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

.chat-load-older-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: calc(100% - 24px); margin: 12px; padding: 10px 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.chat-load-older-btn.loading { opacity: 0.5; cursor: wait; }
.chat-load-older-btn i { font-size: 14px; }
body.light-mode .chat-load-older-btn {
    background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: rgba(60,60,67,0.6);
}
body.light-mode .chat-load-older-btn:hover {
    background: rgba(0,0,0,0.06); color: rgba(60,60,67,0.9);
}

/* --- MOBILE CARD NOTES (replaces old inline style) --- */
.m-note-preview {
    font-size: 11px;
    margin-top: 4px;
    font-style: italic;
}
body.light-mode .m-note-preview { color: rgba(60,60,67,0.5); }

/* --- AVG-REACTION-TIME hardcoded white in index.html --- */
body.light-mode #avg-reaction-time { color: #000000 !important; font-weight: 700; }
body.light-mode #conversion-rate-value { color: #000000 !important; font-weight: 700; }
body.light-mode #showup-rate-value { color: #000000 !important; font-weight: 700; }
body.light-mode #treatment-rate-value { color: #000000 !important; font-weight: 700; }
/* clock icon color is JS-controlled via setReactionIcon() */

/* --- 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: #000000 !important; }

/* --- INFO ICON in chat header --- */
body.light-mode .ph-info { color: rgba(60,60,67,0.35) !important; }

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


/* --- PROFILE SECTION TITLE (chat panel) — not too faint --- */
body.light-mode .profile-section-title { color: rgba(60,60,67,0.4); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

/* --- SWITCHER CARET --- */
.switcher-caret { font-size: 14px; }
body.light-mode .switcher-caret { color: rgba(60,60,67,0.35); }

/* --- AVG REACTION TIME default (dark mode) color --- */

/* --- VIRTUAL ASSISTANT TOGGLE --- */
.va-toggle {
    width: 38px;
    height: 22px;
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.28s ease;
    flex-shrink: 0;
}
.va-toggle.va-updating { opacity: 0.6; pointer-events: none; }
.va-toggle-knob {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.va-toggle.va-on .va-toggle-knob { transform: translateX(16px); }

/* Light mode VA toggle */
body.light-mode #va-toggle-wrapper {
    background: rgba(0,0,0,0.04) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}
body.light-mode #va-toggle-wrapper span { color: rgba(60,60,67,0.6) !important; }
body.light-mode #va-toggle-wrapper .ph-robot { color: rgba(60,60,67,0.4) !important; }
body.light-mode .va-toggle { background: rgba(120,120,128,0.25); }
body.light-mode .va-toggle.va-on { background: #34C759; }
body.light-mode .va-toggle-knob { box-shadow: 0 1px 4px rgba(0,0,0,0.2); }

/* ================================================================
   SANTIDENTY v2.1 — ENHANCEMENTS
   ================================================================ */

/* === TOAST NOTIFICATION (CSS-driven) === */
.sdnt-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-ui);
    /* Above the modal overlay (9999999), not below it. Modals are where most
       messages are fired from — a failed save, a missing field — and a toast
       behind an 8px blur is a message nobody can read. */
    z-index: 10000001;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}
.sdnt-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
body.light-mode .sdnt-toast {
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(60,60,67,0.12);
    color: #000000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    background: rgba(255,255,255,0.96);
    color: #111827;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* === SMS — COMING SOON BADGE IN NAV === */
.nav-soon-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 2px 5px;
    margin-left: auto;
    flex-shrink: 0;
}
body.light-mode .nav-soon-badge {
    color: rgba(0,0,0,0.35);
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
}

/* === SKELETON SHIMMER === */
@keyframes sdnt-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton {
    animation: sdnt-shimmer 1.5s infinite linear;
    border-radius: 6px;
    display: inline-block;
}
body.light-mode .skeleton {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.04) 25%,
        rgba(0,0,0,0.09) 50%,
        rgba(0,0,0,0.04) 75%
    );
    background-size: 200% 100%;
}
.skeleton-line { height: 12px; width: 100%; margin-bottom: 8px; }
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }

/* === COMING SOON — CTA BUTTON === */
.cs-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 22px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-ui);
    letter-spacing: 0.3px;
    cursor: default;
    user-select: none;
    transition: background 0.2s, border-color 0.2s;
}
.cs-cta-btn i { font-size: 14px; }

/* === GMAIL MODULE — CSS CLASSES (replaces inline styles) === */

/* Top bar */
.gmail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.gmail-topbar-left { display: flex; align-items: center; gap: 12px; }
.gmail-status-indicator { display: flex; align-items: center; gap: 8px; }
.gmail-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.6);
    flex-shrink: 0;
}
.gmail-connected-address { font-size: 12px; font-weight: 600; }
.gmail-ai-savings-pill {
    font-size: 11px; color: rgba(255,255,255,0.25);
    padding: 3px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
}
.gmail-topbar-right { display: flex; align-items: center; gap: 8px; }
.gmail-last-sync-text { font-size: 11px; }

/* Body split */
.gmail-body-split { display: flex; flex: 1; overflow: hidden; }

/* Left panel */
.gmail-left-panel {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Tabs */
.gmail-tabs-row { display: flex; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.gmail-tab-btn {
    flex: 1;
    padding: 12px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.gmail-tab-btn.active       { border-bottom-color: #3369FF; }
.gmail-tab-btn.active-sent  { color: rgba(255,255,255,0.7); border-bottom-color: #22c55e; }
.gmail-tab-count {
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    margin-left: 4px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.3);
}
.gmail-tab-count.active-count {
    background: rgba(51,105,255,0.2);
    color: #3369FF;
}
.gmail-list-scroll { flex: 1; overflow-y: auto; padding: 8px; }

/* Right panel */
.gmail-right-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* Empty/all-caught-up state */
.gmail-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,0.15);
}
.gmail-all-done-icon-wrap {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.2);
    display: flex; align-items: center; justify-content: center;
}
.gmail-all-done-title { font-size: 16px; margin-bottom: 6px; }
.gmail-all-done-sub  { font-size: 13px; }

/* Draft / Skipped / Sent viewers */
.gmail-viewer-panel { display: none; flex-direction: column; height: 100%; overflow: hidden; }

.gmail-viewer-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.gmail-viewer-subject    { font-size: 16px; margin-bottom: 10px; }
.gmail-viewer-meta-row   { display: flex; align-items: center; gap: 12px; }
.gmail-sender-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(51,105,255,0.3), rgba(100,138,242,0.3));
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #3369FF;
}
.gmail-sender-name  { font-size: 13px; }
.gmail-sender-email { font-size: 11px; color: rgba(255,255,255,0.35); }
.gmail-viewer-time  { margin-left: auto; font-size: 11px; color: rgba(255,255,255,0.25); }

.gmail-viewer-scroll { flex: 1; overflow-y: auto; padding: 0 24px; }

/* Original email block */
.gmail-original-block {
    margin: 16px 0; padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}
.gmail-block-label {
    font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.2);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 10px;
}
.gmail-block-label.ai-label { color: rgba(51,105,255,0.7); display: flex; align-items: center; gap: 6px; }
.gmail-block-text { font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.gmail-block-hint { font-size: 10px; color: rgba(255,255,255,0.2); }

/* AI draft reply area */
.gmail-draft-section { margin: 16px 0; }
.gmail-draft-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gmail-reply-textarea {
    width: 100%; min-height: 180px;
    border: 1px solid rgba(51,105,255,0.15);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13px; font-family: inherit; line-height: 1.7;
    resize: vertical; outline: none;
    transition: border-color 0.2s;
}
.gmail-reply-textarea:focus { border-color: rgba(51,105,255,0.4); }

/* Action bar */
.gmail-action-bar {
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
}
.btn-gmail-send {
    flex: 1; padding: 12px;
    background: linear-gradient(135deg, #3369FF, #0043FB);
    border: none; border-radius: 10px;
    color: #fff; font-size: 13px; font-weight: 700; font-family: inherit;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: opacity 0.2s;
}
.btn-gmail-send:hover { opacity: 0.9; }
.btn-gmail-send:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-gmail-discard {
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background 0.2s;
}
.btn-gmail-discard:hover { background: rgba(255,255,255,0.07); }

/* Skipped viewer */
.gmail-ai-reason-badge {
    padding: 12px 14px;
    background: rgba(245,158,11,0.05);
    border: 1px solid rgba(245,158,11,0.15);
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 12px; color: rgba(245,158,11,0.7);
    display: flex; align-items: center; gap: 8px;
}
.gmail-snippet-text { font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.btn-gmail-requeue {
    width: 100%; padding: 12px;
    background: rgba(51,105,255,0.08);
    border: 1px solid rgba(51,105,255,0.2);
    border-radius: 10px;
    color: #3369FF; font-size: 13px; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: background 0.2s;
}
.btn-gmail-requeue:hover { background: rgba(51,105,255,0.14); }

/* Sent viewer */
.gmail-sent-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.gmail-sent-subject-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gmail-sent-reply-label {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.25);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px;
}
.gmail-sent-reply-body {
    font-size: 13px; line-height: 1.7; white-space: pre-wrap;
    border: 1px solid rgba(34,197,94,0.12);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 20px;
}
.gmail-sent-original-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }

/* === GMAIL MOBILE RESPONSIVE === */
@media (max-width: 700px) {
    .gmail-body-split { position: relative; }
    .gmail-left-panel { width: 100%; border-right: none; }
    .gmail-right-panel {
        position: absolute;
        inset: 0;
        background: #000;
        z-index: 10;
        display: none !important;
    }
    .gmail-body-split.mobile-email-active .gmail-left-panel { display: none; }
    .gmail-body-split.mobile-email-active .gmail-right-panel { display: flex !important; }
    .gmail-mobile-back {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 0 0 12px 0;
        background: none;
        border: none;
        color: rgba(255,255,255,0.5);
        font-size: 13px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
    }
}
@media (min-width: 701px) {
    .gmail-mobile-back { display: none; }
}

/* Light mode Gmail */
body.light-mode .gmail-topbar       { border-bottom-color: rgba(0,0,0,0.07); }
body.light-mode .gmail-left-panel   { border-right-color: rgba(0,0,0,0.07); }
body.light-mode .gmail-tabs-row     { border-bottom-color: rgba(0,0,0,0.07); }
body.light-mode .gmail-viewer-header { border-bottom-color: rgba(0,0,0,0.07); }
body.light-mode .gmail-action-bar   { background: rgba(248,249,252,0.9); border-top-color: rgba(60,60,67,0.08); }
body.light-mode .gmail-connected-address { color: rgba(60,60,67,0.5); }
body.light-mode .gmail-last-sync-text { color: rgba(0,0,0,0.3); }
body.light-mode .gmail-sender-name  { color: rgba(0,0,0,0.85); font-weight: 500; }
body.light-mode .gmail-viewer-subject { color: #000000; font-weight: 600; }
body.light-mode .gmail-viewer-subject.muted { color: rgba(0,0,0,0.5); }
body.light-mode .gmail-block-text   { color: rgba(0,0,0,0.5); }
body.light-mode .gmail-reply-textarea { background: rgba(0,67,251,0.03); color: rgba(0,0,0,0.82); }
body.light-mode .gmail-snippet-text { color: rgba(0,0,0,0.4); }
body.light-mode .gmail-original-block { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
body.light-mode .gmail-all-done-title { color: rgba(60,60,67,0.7); font-weight: 500; }
body.light-mode .gmail-all-done-sub  { color: rgba(60,60,67,0.38); }
body.light-mode .btn-gmail-discard { background: rgba(120,120,128,0.08); border-color: rgba(60,60,67,0.1); color: rgba(60,60,67,0.5); }
body.light-mode .gmail-tab-btn { color: rgba(60,60,67,0.35); }
body.light-mode .gmail-tab-btn.active { color: #0043FB; font-weight: 600; }
body.light-mode #gmail-right-panel, 
body.light-mode .gmail-right-panel { background: #F8F9FC; }
body.light-mode .gmail-sent-reply-body { color: rgba(0,0,0,0.55); background: rgba(34,197,94,0.04); }

/* === SETTINGS: INTEGRATION STATUS DOTS === */
.integration-status-dot {
    display: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: status-dot-pulse 2s ease-in-out infinite;
}
.integration-status-dot.connected {
    display: inline-block;
}
@keyframes status-dot-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.5); }
    50%       { box-shadow: 0 0 10px rgba(34, 197, 94, 0.9); }
}
body.light-mode .integration-status-dot { box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }

/* =============================================================
   TAB PERMISSIONS — LOCK ICONS & LOCKED OVERLAY
   ============================================================= */

/* ── Pro star marker on locked nav items ── small, recessive, lifts on hover ──
   Selector qualified with the parent class to beat `.nav-item i { font-size: 20px }` */
.nav-item .nav-pro-star,
.mobile-drawer-item .nav-pro-star {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
    user-select: none;
}
.nav-item {
    display: flex;
    align-items: center;
}
.mobile-drawer-item {
    display: flex;
    align-items: center;
}
body.light-mode .nav-item .nav-pro-star,
body.light-mode .mobile-drawer-item .nav-pro-star {
    color: #A87B22;
    opacity: 0.5;
}
body.light-mode .nav-item:hover .nav-pro-star,
body.light-mode .mobile-drawer-item:hover .nav-pro-star {
    opacity: 0.95;
}

/* ── Locked tab overlay — sits inside main-content, above views ── */
.tab-locked-overlay {
    position: absolute;
    inset: 0;
    top: 60px; /* clear the top-header */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Must sit above everything the underlying view can raise: the filter
       chip (1000) and its panel / custom selects (100000). At the old value
       of 80 the chip painted through the blur and stayed clickable. Still
       below the loading cover, login overlay and modals. */
    z-index: 100001;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 24px;
}

.tlo-card {
    border-radius: 20px;
    padding: 48px 40px 40px;
    max-width: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    animation: tlo-in 0.25s ease;
}

@keyframes tlo-in {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tlo-lock-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: none;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.tlo-lock-badge i {
    font-size: 20px;
}

.tlo-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(51, 105, 255, 0.1);
    border: 1px solid rgba(51, 105, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tlo-feature-icon i {
    font-size: 28px;
    color: #3369FF;
}

.tlo-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.tlo-desc {
    font-size: 14px;
    line-height: 1.65;
    max-width: 320px;
}

.tlo-request-btn {
    margin-top: 8px;
    padding: 12px 28px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #0043FB 0%, #3425FB 100%);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
    font-family: inherit;
}
.tlo-request-btn:hover:not(:disabled) {
    opacity: 0.85;
}
.tlo-request-btn.requested,
.tlo-request-btn:disabled {
    cursor: default;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light mode overrides */
body.light-mode .tab-locked-overlay {
    background: rgba(255, 255, 255, 0.6);
}
body.light-mode .tlo-card {
    background: #FFFFFF;
    border: 1px solid rgba(60,60,67,0.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 24px 80px rgba(0,0,0,0.15);
}
body.light-mode .tlo-lock-badge {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
}
body.light-mode .tlo-lock-badge i {
    color: rgba(0,0,0,0.35);
}
body.light-mode .tlo-title {
    color: #0a0a0a;
}
body.light-mode .tlo-desc {
    color: rgba(0,0,0,0.5);
}
body.light-mode .tlo-request-btn.requested,
body.light-mode .tlo-request-btn:disabled {
    background: rgba(0,0,0,0.07);
    color: rgba(0,0,0,0.4);
    border-color: rgba(0,0,0,0.1);
}

/* Make sure main-content has position:relative for overlay positioning */
.main-content {
    position: relative;
}


/* =============================================================
   LOADING COVER — shown on reload while preInit fetches data
   ============================================================= */
#sdnt-loading-cover {
    position: fixed;
    inset: 0;
    z-index: 999998; /* just below login overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease;
}
#sdnt-loading-cover.hidden {
    opacity: 0;
    pointer-events: none;
}
body.light-mode #sdnt-loading-cover {
    background: #F8F9FC;
}

.sdnt-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: sdnt-spin 0.7s linear infinite;
}
@keyframes sdnt-spin {
    to { transform: rotate(360deg); }
}
body.light-mode .sdnt-spinner {
    border-color: rgba(0, 0, 0, 0.08);
    border-top-color: #3369FF;
}
/* ═══════════════════════════════════════════════════════════
   ANALYTICS DASHBOARD
═══════════════════════════════════════════════════════════ */

.an-wrapper {
    padding: 20px 24px;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Header */
.an-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.an-header-left { display: flex; flex-direction: column; gap: 3px; }
.an-title {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.an-title i { color: #3369FF; font-size: 16px; }
.an-period-total {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    font-weight: 500;
}

/* Period pills */
.an-period-pills {
    display: flex;
    gap: 5px;
    border: 1px solid rgba(255,255,255,0.07);
}
.an-period-btn {
    background: transparent;
    border: none;
    font-size: 11px;
    font-family: inherit;
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s;
}
.an-period-btn:hover { color: rgba(255,255,255,0.6); }

/* KPI grid */
.an-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.an-kpi-card {
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    animation: kpiPop 0.4s both;
    transition: border-color 0.2s, background 0.2s;
}
.an-kpi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--kpi-glow, transparent);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s;
}
.an-kpi-card:hover::before { opacity: 1; }
.an-kpi-card:hover { border-color: rgba(255,255,255,0.12); }

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

.an-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--kpi-color, #3369FF);
    font-size: 16px;
}
.an-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.an-kpi-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.an-kpi-value { font-size: 22px; line-height: 1.1; }
.an-kpi-sub { font-size: 10px; color: rgba(255,255,255,0.25); }

/* Chart cards */
.an-card {
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.an-card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.an-card-title i { font-size: 13px; }
.an-card-wide { grid-column: span 2; }

.an-chart-box { position: relative; }
.an-chart-box canvas { display: block; width: 100% !important; }

/* Grid layouts */
.an-grid-2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
}
.an-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Empty state */
.an-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 120px;
    color: rgba(255,255,255,0.12);
    font-size: 11px;
}
.an-empty i { font-size: 24px; }

/* Light mode overrides */
body.light-mode .an-kpi-card,
body.light-mode .an-card {
    background: #FFFFFF;
    border: 1px solid rgba(60,60,67,0.07);
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(60,60,67,0.05);
}
body.light-mode .an-title { color: #000000; font-weight: 700; }
body.light-mode .an-kpi-label { color: rgba(60,60,67,0.45); }
body.light-mode .an-card-title { color: rgba(60,60,67,0.5); }
body.light-mode .an-card-title i { color: rgba(60,60,67,0.25); }
body.light-mode .an-kpi-value { color: #000000; font-weight: 700; }
body.light-mode .an-period-pills {
    background: rgba(120,120,128,0.12);
    border-color: transparent;
    border-radius: 9px;
    padding: 3px;
}
body.light-mode .an-period-btn { color: rgba(60,60,67,0.5); font-weight: 600; }
body.light-mode .an-period-btn.active { background: #FFFFFF; color: #000000; font-weight: 600; border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }

/* Mobile responsive */
@media (max-width: 900px) {
    .an-wrapper { padding: 14px 12px; gap: 12px; }
    .an-kpis { grid-template-columns: repeat(2, 1fr); }
    .an-kpis .an-kpi-card:last-child { grid-column: span 2; }
    .an-grid-2 { grid-template-columns: 1fr; }
    .an-grid-2 .an-card-wide { grid-column: span 1; }
    .an-grid-3 { grid-template-columns: 1fr; }
    .an-period-pills { flex-wrap: wrap; }
    .an-kpi-value { font-size: 18px; }
}
/* ─── SETTINGS: INLINE STYLE OVERRIDES FOR LIGHT MODE ─────────────────────── */

/* Gmail connect button (inline bg: rgba(255,255,255,0.05), inline color: rgba(255,255,255,0.7)) */
body.light-mode #btn-connect-gmail {
    background: rgba(120,120,128,0.1) !important;
    border: 1px solid rgba(60,60,67,0.15) !important;
    color: #000000 !important;
}
body.light-mode #btn-connect-gmail:hover {
    background: rgba(120,120,128,0.18) !important;
}

/* Gmail disconnect button (inline: border rgba(255,255,255,0.08), color rgba(255,255,255,0.25)) */
body.light-mode #btn-disconnect-gmail {
    background: rgba(255,59,48,0.06) !important;
    border: 1px solid rgba(255,59,48,0.2) !important;
    color: #FF3B30 !important;
}
body.light-mode #btn-disconnect-gmail:hover {
    background: rgba(255,59,48,0.12) !important;
}

/* Pages connected address (inline: color rgba(255,255,255,0.5)) */
body.light-mode #gmail-connected-address {
    color: rgba(60,60,67,0.55) !important;
}

/* Gmail not-connected panel note text (inline: color rgba(255,255,255,0.2)) */
body.light-mode #gmail-not-connected [style*="color:rgba(255,255,255"],
body.light-mode #gmail-not-connected [style*="color: rgba(255,255,255"] {
    color: rgba(60,60,67,0.5) !important;
}

/* Meta not-connected panel note text */
body.light-mode #meta-not-connected [style*="color:rgba(255,255,255"],
body.light-mode #meta-not-connected [style*="color: rgba(255,255,255"] {
    color: rgba(60,60,67,0.5) !important;
}

/* Any inline white-ish text inside settings ps-rows → force readable */
body.light-mode .ps-row [style*="color:rgba(255,255,255"],
body.light-mode .ps-row [style*="color: rgba(255,255,255"] {
    color: rgba(60,60,67,0.6) !important;
}

/* Gmail last-sync text */
body.light-mode .gmail-last-sync-text {
    color: rgba(60,60,67,0.35) !important;
}
/* =============================================================
   SANTIDENTY AI CHAT
   ============================================================= */

#view-santidentyai.active-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* ── WELCOME ─────────────────────────────────────────────────── */
.sai-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 20px;
    text-align: center;
    animation: saiFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

.sai-welcome-logo {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sai-logo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: saiSpinRing 7s linear infinite;
    background: conic-gradient(
        from 0deg,
        rgba(51,105,255,0)   0%,
        rgba(51,105,255,0.6) 40%,
        rgba(100,138,242,0.4) 60%,
        rgba(51,105,255,0)   100%
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #fff calc(100% - 1.5px));
    mask:         radial-gradient(farthest-side, transparent calc(100% - 1.5px), #fff calc(100% - 1.5px));
}

@keyframes saiSpinRing { to { transform: rotate(360deg); } }

.sai-logo-core {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(51,105,255,0.18), rgba(0,0,0,0.65));
    border: 1px solid rgba(51,105,255,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 0 24px rgba(51,105,255,0.18), inset 0 1px 0 rgba(255,255,255,0.07);
}

.sai-welcome-title {
    font-family: var(--font-ui);
    font-size: clamp(17px, 3vw, 24px);
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.35;
}

.sai-welcome-sub {
    font-size: 13px;
    margin: 0 0 30px;
    max-width: 400px;
    line-height: 1.6;
}

.sai-suggestions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 540px;
}

@media (max-width: 480px) { .sai-suggestions { grid-template-columns: 1fr; } }

.sai-suggest-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    font-size: 12.5px;
    font-family: var(--font-ui);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.4;
}

.sai-suggest-btn i { font-size: 15px; color: #3369FF; flex-shrink: 0; }

.sai-suggest-btn:hover {
    transform: translateY(-1px);
}

/* ── MESSAGES ────────────────────────────────────────────────── */
.sai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 8px;
    display: none;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
}

.sai-messages::-webkit-scrollbar { width: 3px; }
.sai-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 2px; }

.sai-msg {
    display: flex;
    gap: 10px;
    animation: saiFadeUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sai-msg.user      { flex-direction: row-reverse; align-self: flex-end;  max-width: 78%; }
.sai-msg.assistant { align-self: flex-start;                              max-width: 88%; }

.sai-msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
}

.sai-msg.assistant .sai-msg-avatar {
    background: radial-gradient(circle at 35% 35%, rgba(51,105,255,0.2), rgba(0,0,0,0.55));
    border: 1px solid rgba(51,105,255,0.28);
    color: #3369FF;
}

.sai-msg.user .sai-msg-avatar {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
    font-size: 12px;
}

.sai-msg-bubble {
    padding: 11px 15px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.65;
}

.sai-msg.user .sai-msg-bubble {
    border: 1px solid rgba(51,105,255,0.22);
    border-top-right-radius: 4px;
}

.sai-msg.assistant .sai-msg-bubble {
    border: 1px solid rgba(255,255,255,0.07);
    border-top-left-radius: 4px;
}

.sai-msg-bubble.error {
    background: rgba(239,68,68,0.06);
    border-color: rgba(239,68,68,0.18);
    color: rgba(239,68,68,0.78);
}

.sai-msg-bubble strong { font-weight: 700; }
.sai-msg-bubble em     { color: rgba(255,255,255,0.5); font-style: italic; }
.sai-msg-bubble ul     { margin: 7px 0 3px 16px; padding: 0; list-style: disc; }
.sai-msg-bubble li     { margin-bottom: 3px; }

/* ── THINKING ────────────────────────────────────────────────── */
.sai-thinking {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 24px;
    animation: saiFadeIn 0.35s ease both;
}

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

.sai-thinking-avatar {
    position: relative;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sai-think-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.sai-think-ring-1 {
    animation: saiThinkSpin1 3s linear infinite;
    background: conic-gradient(from 0deg, rgba(51,105,255,0) 0%, rgba(51,105,255,0.65) 35%, rgba(51,105,255,0) 70%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #fff calc(100% - 1.5px));
    mask:         radial-gradient(farthest-side, transparent calc(100% - 1.5px), #fff calc(100% - 1.5px));
}

.sai-think-ring-2 {
    inset: 8px;
    animation: saiThinkSpin2 2s linear infinite reverse;
    background: conic-gradient(from 180deg, rgba(100,138,242,0) 0%, rgba(100,138,242,0.55) 35%, rgba(100,138,242,0) 70%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #fff calc(100% - 1.5px));
    mask:         radial-gradient(farthest-side, transparent calc(100% - 1.5px), #fff calc(100% - 1.5px));
}

@keyframes saiThinkSpin1 { to { transform: rotate(360deg); } }
@keyframes saiThinkSpin2 { to { transform: rotate(360deg); } }

.sai-think-core {
    position: relative;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(51,105,255,0.2), rgba(0,0,0,0.7));
    border: 1px solid rgba(51,105,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    animation: saiCoreGlow 2s ease-in-out infinite;
}

@keyframes saiCoreGlow {
    0%,100% { box-shadow: 0 0 10px rgba(51,105,255,0.2); }
    50%      { box-shadow: 0 0 26px rgba(51,105,255,0.5); }
}

.sai-thinking-dots { display: flex; gap: 5px; align-items: center; }

.sai-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(51,105,255,0.7);
    animation: saiDotBounce 1.2s ease-in-out infinite;
}
.sai-dot:nth-child(2) { animation-delay: 0.2s; }
.sai-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes saiDotBounce {
    0%,80%,100% { transform: scale(0.8); opacity: 0.4; }
    40%          { transform: scale(1.25); opacity: 1; }
}

.sai-thinking-label {
    font-size: 12px;
    font-family: var(--font-ui);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ── INPUT BAR ───────────────────────────────────────────────── */
.sai-input-area {
    padding: 10px 18px 14px;
    flex-shrink: 0;
}

.sai-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 10px 10px 10px 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sai-input-bar:focus-within {
    border-color: rgba(51,105,255,0.38);
    box-shadow: 0 0 0 3px rgba(51,105,255,0.05);
}

.sai-textarea {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--font-ui);
    font-size: 13.5px;
    line-height: 1.5;
    resize: none;
    max-height: 140px;
    overflow-y: auto;
    padding: 2px 0;
}
.sai-textarea::-webkit-scrollbar { width: 3px; }
.sai-textarea::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }

.sai-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3369FF, #0043FB);
    border: none;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 0.35;
    transform: scale(0.94);
}

.sai-send-btn:not(:disabled) { opacity: 1; transform: scale(1); }
.sai-send-btn:not(:disabled):hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(51,105,255,0.38); }
.sai-send-btn:disabled { cursor: not-allowed; }

.sai-input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 3px 0;
}

.sai-powered-by {
    font-size: 10.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.03em;
}

.sai-powered-by i { color: rgba(51,105,255,0.45); font-size: 11px; }

.sai-clear-btn {
    background: none;
    border: none;
    font-size: 11px;
    font-family: var(--font-ui);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 4px;
    border-radius: 6px;
    transition: color 0.2s;
}

.sai-clear-btn:hover { color: rgba(239,68,68,0.65); }

/* ── LIGHT MODE ──────────────────────────────────────────────── */
body.light-mode .sai-welcome-title { color: #111; }
body.light-mode .sai-welcome-sub   { color: rgba(0,0,0,0.38); }

body.light-mode .sai-suggest-btn {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.09);
    color: rgba(0,0,0,0.6);
}
body.light-mode .sai-suggest-btn:hover {
    background: rgba(51,105,255,0.07);
    border-color: rgba(51,105,255,0.28);
    color: rgba(0,0,0,0.82);
}

body.light-mode .sai-input-bar {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}
body.light-mode .sai-textarea       { color: rgba(0,0,0,0.85); }
body.light-mode .sai-textarea::placeholder { color: rgba(0,0,0,0.28); }

body.light-mode .sai-msg.user .sai-msg-bubble {
    background: linear-gradient(135deg, rgba(51,105,255,0.12), rgba(100,138,242,0.08));
    border-color: rgba(51,105,255,0.2);
    color: rgba(0,0,0,0.85);
}
body.light-mode .sai-msg.assistant .sai-msg-bubble {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.07);
    color: rgba(0,0,0,0.75);
}
body.light-mode .sai-msg-bubble strong { color: #000; }
body.light-mode .sai-msg-bubble li    { color: rgba(0,0,0,0.72); }
body.light-mode .sai-thinking-label   { color: rgba(0,0,0,0.3); }
body.light-mode .sai-powered-by       { color: rgba(0,0,0,0.2); }
body.light-mode .sai-clear-btn        { color: rgba(0,0,0,0.2); }

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .sai-welcome    { padding: 24px 14px 14px; }
    .sai-messages   { padding: 14px 12px 6px; }
    .sai-input-area { padding: 8px 10px 12px; }
    .sai-msg.user, .sai-msg.assistant { max-width: 92%; }
    .sai-welcome-logo { width: 64px; height: 64px; }
    .sai-logo-core    { width: 48px; height: 48px; font-size: 17px; }
}
/* ============================================================
   MOBILE META INBOX — iOS-style search bar (no page selector)
   ============================================================ */
.mobile-chat-search-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.mobile-chat-search-icon {
    position: absolute;
    left: 14px;
    font-size: 16px;
    color: rgba(60, 60, 67, 0.45);
    pointer-events: none;
    z-index: 1;
}

.mobile-chat-search-input {
    width: 100%;
    background: rgba(118, 118, 128, 0.12);
    border: none;
    border-radius: 10px;
    padding: 9px 12px 9px 38px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 400;
    color: #000;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease;
}

.mobile-chat-search-input::placeholder {
    color: rgba(60, 60, 67, 0.45);
    font-weight: 400;
}

.mobile-chat-search-input:focus {
    background: rgba(118, 118, 128, 0.16);
}

/* Dark mode overrides */
body:not(.light-mode) .mobile-chat-search-input {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

body:not(.light-mode) .mobile-chat-search-input::placeholder {
    color: rgba(235, 235, 245, 0.45);
}

body:not(.light-mode) .mobile-chat-search-icon {
    color: rgba(235, 235, 245, 0.45);
}

body:not(.light-mode) .mobile-chat-search-input:focus {
    background: rgba(255, 255, 255, 0.12);
}

/* Override legacy search-input styles inside the mobile chat bar */
@media (max-width: 768px) {
    .chat-search-bar {
        padding: 10px 16px 10px 16px;
        gap: 0;
    }
    body.light-mode .chat-search-bar {
        background: #f2f2f7;
        border-bottom: 1px solid rgba(60, 60, 67, 0.08);
    }
    body.light-mode .mobile-chat-search-icon {
        color: rgba(60, 60, 67, 0.45);
    }
}

/* ============================================================
   FLAT CONVERSATION LIST — Instagram/DM style
   ============================================================ */

/* Bottom row: preview text + unread dot side by side */
.convo-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

/* Unread state — bold name */
.convo-name--unread {
    font-weight: 700 !important;
}
body.light-mode .convo-name--unread { color: #000 !important; }

/* Unread state — bold preview */
.convo-preview--unread {
    font-weight: 600 !important;
}
body.light-mode .convo-preview--unread { color: rgba(0,0,0,0.75) !important; }

/* Blue unread dot (Instagram-style) */
.convo-unread-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3166F6;
    flex-shrink: 0;
}

/* Larger avatar on mobile flat list */
@media (max-width: 900px) {
    .convo-avatar { width: 54px; height: 54px; }
    .convo-name { font-size: 15px; font-weight: 600; }
    .convo-preview { font-size: 13px; color: rgba(255,255,255,0.45); }
    .convo-time-display { font-size: 12px; color: rgba(255,255,255,0.35); }
    .convo-top-row { margin-bottom: 2px; align-items: center; }
    .convo-bottom-row { min-width: 0; }
    /* Platform badge scales with avatar */
    .platform-badge-icon { width: 20px; height: 20px; bottom: -1px; right: -1px; }
    .platform-badge-icon i { font-size: 11px; }
}

/* ============================================================
   SEARCH ROW + FILTER BUTTON
   ============================================================ */
.mobile-chat-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.mobile-chat-search-row .mobile-chat-search-wrapper {
    flex: 1;
    min-width: 0;
}

/* Filter button */
.chat-filter-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.chat-filter-btn:active,
.chat-filter-btn.active {
    background: rgba(49,102,246,0.18);
    color: #3166F6;
}
body.light-mode .chat-filter-btn {
    background: rgba(120,120,128,0.12);
    color: rgba(60,60,67,0.55);
}
body.light-mode .chat-filter-btn.active {
    background: rgba(0,67,251,0.12);
    color: #0043FB;
}

/* ============================================================
   PLATFORM FILTER PILLS
   ============================================================ */
.chat-filter-pills {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 2px 0 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.chat-filter-pills::-webkit-scrollbar { display: none; }

.chat-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.12);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.chat-filter-pill i { font-size: 14px; }
.chat-filter-pill:active { opacity: 0.7; }

body.light-mode .chat-filter-pill {
    border-color: rgba(60,60,67,0.2);
    color: rgba(60,60,67,0.55);
    background: transparent;
}
body.light-mode .chat-filter-pill.active {
    background: #0043FB;
    border-color: #0043FB;
    color: #fff;
}

/* ============================================================
   CHAT SEARCH BAR — scroll-to-hide animation
   ============================================================ */
#chat-container .chat-search-bar {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.28s ease,
                max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 120px;
    overflow: hidden;
    transform: translateY(0);
    opacity: 1;
    will-change: transform, opacity;
}

#chat-container .chat-search-bar--hidden {
    transform: translateY(-100%);
    opacity: 0;
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   CHAT PANEL — iOS-style conversation view
   ============================================================ */

/* Dark mode message feed */

/* Message input pill — dark mode */
.chat-input-pill { border: 1px solid rgba(255,255,255,0.13); }
.send-btn:active { background: #204FCF; transform: scale(0.94); }

/* Remove old msg-time absolute positioning issue — keep it subtle inline */
.msg-time { font-size: 11px; opacity: 0.5; font-weight: 500; display: block; line-height: 1; align-self: flex-end; white-space: nowrap; margin-top: 1px; }
.outgoing .msg-time { text-align: right; }
.incoming .msg-time { text-align: left; }

/* Date divider in messages */
.chat-date-label {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    padding: 10px 0 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body.light-mode .chat-date-label { color: rgba(60,60,67,0.45); }

/* Active chat panel dark bg */
body.light-mode .active-chat-panel { background: #fff; }

/* Back button sizing */
.back-to-list-btn { font-size: 22px; padding: 0 6px 0 0; }

/* Mobile: full-screen active chat */
@media (max-width: 900px) {
    .chat-header { padding: 10px 12px; min-height: 56px; }
    .chat-header-name { font-size: 16px; }
    .chat-header-avatar-wrap { width: 34px; height: 34px; }
    .chat-header-avatar { width: 34px; height: 34px; }
    .chat-input-area { padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); background: transparent; }
    .chat-input-pill { min-height: 40px; padding: 0 5px 0 14px; border-radius: 999px; }
    .message-input { font-size: 17px; }
    .send-btn { width: 34px; height: 34px; font-size: 15px; }
    .msg-bubble { font-size: 16px; padding: 9px 13px; }
    .message-group { max-width: 80%; }
}

/* ============================================================
   FULL-SCREEN CHAT — when chat-open body class is active
   ============================================================ */
@media (max-width: 900px) {
    /* Entire chat panel takes over the screen */
    body.chat-open #chat-container.mobile-chat-active .active-chat-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        background: #000;
        padding-bottom: 0 !important;
    }
    body.light-mode.chat-open #chat-container.mobile-chat-active .active-chat-panel {
        background: #fff;
    }
    /* Add safe area padding to the header top */
    body.chat-open .chat-header {
        padding-top: calc(env(safe-area-inset-top, 12px) + 10px);
        min-height: calc(56px + env(safe-area-inset-top, 0px));
    }
    /* Input area hugs the bottom with home indicator safe area */
    body.chat-open .chat-input-area {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: transparent;
    }
    /* Messages feed fills remaining space */
    body.chat-open .messages-feed {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   CONTACTS — scroll behaviour
   ============================================================ */
@media (max-width: 900px) {
    /* Header stays fully visible at all times — no hide-on-scroll */
    #view-leads .leads-view-wrapper > div:first-child {
        opacity: 1;
        transform: none;
        max-height: none;
        overflow: visible;
        pointer-events: auto;
    }

    /* Scroll to top button */
    .leads-scroll-top-btn {
        position: absolute;
        bottom: 20px;
        right: 16px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 50;
        opacity: 0;
        transform: scale(0.7) translateY(10px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    }
    .leads-scroll-top-btn--visible {
        opacity: 1;
        transform: scale(1) translateY(0);
        pointer-events: auto;
    }
    .leads-scroll-top-btn:active { transform: scale(0.92); opacity: 0.75; }
    body.light-mode .leads-scroll-top-btn {
        background: rgba(255,255,255,0.55);
        border: 1px solid rgba(60,60,67,0.15);
        color: rgba(60,60,67,0.8);
        box-shadow: 0 2px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.7);
    }
}


/* ═══════════════════════════════════════════════════════════════════
   BOT CONFIG DRAWER — System Message / Chatbot Settings
═══════════════════════════════════════════════════════════════════ */

/* ── Gear/sparkle button — same neutral style as filter button ── */
.bot-config-btn { /* inherits .chat-filter-btn fully, no override needed */ }

/* Overlay */
.bot-config-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bot-config-overlay.active { opacity: 1; pointer-events: all; }

/* Drawer — 520px on desktop, bottom sheet on mobile */
.bot-config-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 520px;
    max-width: 100vw;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}
.bot-config-drawer.active { transform: translateX(0); }

/* Header */
.bcd-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px;
    flex-shrink: 0;
}
.bcd-header-left { display: flex; align-items: center; gap: 12px; }
.bcd-icon {
    width: 40px; height: 40px; border-radius: 12px;
    border: 1px solid rgba(51,105,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.bcd-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.bcd-subtitle { font-size: 11px; margin-top: 2px; }
.bcd-close {
    width: 32px; height: 32px; border: none; border-radius: 8px; font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s; flex-shrink: 0;
}

/* Scrollable body */
.bcd-body { flex: 1; overflow-y: auto; padding: 0 0 8px; scrollbar-width: none; -ms-overflow-style: none; }
.bcd-body::-webkit-scrollbar { display: none; }

/* Section */
.bcd-section { padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.bcd-section-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.bcd-section-label-row {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}

/* Status toggle — blue palette */
.bcd-status-toggle { display: flex; gap: 6px; margin-bottom: 10px; }
.bcd-st-btn {
    flex: 1; padding: 9px 6px;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    font-size: 12px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.bcd-status-live { font-size: 12px; min-height: 16px; }

/* Working hours grid */
.bcd-hours-grid { display: flex; flex-direction: column; gap: 6px; }
.bcd-day-row {
    display: grid;
    grid-template-columns: 110px 44px 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    transition: background 0.15s;
}
.bcd-day-name { font-size: 12px; font-weight: 600; }

/* Toggle switch */
.bcd-day-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.bcd-day-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.bcd-day-toggle-track {
    position: absolute; inset: 0; border-radius: 999px;
    cursor: pointer; transition: background 0.2s;
}
.bcd-day-toggle-track::after {
    content: ''; position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%; background: #fff;
    transition: transform 0.2s;
}
.bcd-day-toggle input:checked + .bcd-day-toggle-track::after { transform: translateX(16px); }

/* Time inputs row */
.bcd-day-times { display: flex; align-items: center; gap: 8px; transition: opacity 0.2s; }
.bcd-day-times.disabled { opacity: 0.2; pointer-events: none; }
.bcd-time-input {
    flex: 1; min-width: 0;
    padding: 6px 8px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; font-size: 12px; font-family: inherit;
    outline: none; text-align: center; transition: border-color 0.15s;
}
.bcd-time-input:focus { background: rgba(51,105,255,0.06); }
.bcd-day-closed-label { font-size: 11px; font-style: italic; flex: 1; }
.bcd-time-sep { font-size: 11px; color: rgba(255,255,255,0.25); flex-shrink: 0; }

/* Clinic info */
.bcd-field-group { display: flex; flex-direction: column; gap: 10px; }
.bcd-label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.bcd-input {
    width: 100%; padding: 9px 12px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; font-size: 13px; font-family: inherit;
    outline: none; box-sizing: border-box; transition: border-color 0.15s, background 0.15s;
}
.bcd-input-row { display: flex; gap: 8px; align-items: center; }
.bcd-input-row .bcd-input { flex: 1; }
.bcd-test-btn {
    width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.15s;
}

/* Phones */
.bcd-phones-list { display: flex; flex-direction: column; gap: 8px; }
.bcd-phone-row {
    display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px; padding: 8px 10px;
}
.bcd-phone-label {
    width: 90px; flex-shrink: 0; padding: 5px 8px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px; font-size: 11px; font-family: inherit;
    outline: none;
}
.bcd-phone-label::placeholder { color: rgba(255,255,255,0.2); }
.bcd-phone-number {
    flex: 1; min-width: 0; padding: 5px 0;
    background: transparent; border: none; font-size: 13px; font-family: inherit; outline: none;
}
.bcd-phone-number::placeholder { color: rgba(255,255,255,0.2); }
.bcd-phone-booking {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 600;
    white-space: nowrap; flex-shrink: 0; cursor: pointer;
}
.bcd-phone-booking input[type=checkbox] { accent-color: #3369FF; width: 13px; height: 13px; }

/* Treatments — premium card style */
.bcd-add-btn {
    font-size: 11px; font-weight: 700; border: 1px solid rgba(51,105,255,0.2);
    border-radius: 8px; padding: 4px 10px; cursor: pointer;
    font-family: inherit; transition: all 0.15s;
}
.bcd-treatments-list { display: flex; flex-direction: column; gap: 10px; }
.bcd-treatment-card {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; overflow: hidden;
    transition: border-color 0.15s;
}
.bcd-tc-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bcd-tc-name {
    flex: 1; min-width: 0;
    background: transparent; border: none; font-size: 13px; font-weight: 600; font-family: inherit;
    outline: none;
}
.bcd-tc-name::placeholder { color: rgba(255,255,255,0.25); font-weight: 400; }
.bcd-tc-remove {
    width: 24px; height: 24px; border: none; background: transparent;
    color: rgba(255,255,255,0.2); font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: color 0.15s, background 0.15s; flex-shrink: 0;
}
.bcd-tc-remove:hover { background: rgba(239,68,68,0.12); color: #f87171; }
.bcd-tc-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.bcd-tc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bcd-tc-field { display: flex; flex-direction: column; gap: 4px; }
.bcd-tc-field.full { grid-column: 1 / -1; }
.bcd-tc-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }
.bcd-tc-select, .bcd-tc-input {
    padding: 7px 10px; border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px; font-size: 12px; font-family: inherit;
    outline: none; transition: border-color 0.15s; appearance: none; -webkit-appearance: none;
}
.bcd-tc-select {
    padding-right: 28px;
}
.bcd-tc-select:focus, .bcd-tc-input:focus { border-color: rgba(51,105,255,0.45); }
.bcd-tc-input::placeholder { color: rgba(255,255,255,0.2); }
.bcd-tc-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 0;
}
.bcd-tc-toggle-label { font-size: 12px; }
.bcd-tc-toggle {
    position: relative; width: 32px; height: 18px; flex-shrink: 0;
}
.bcd-tc-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.bcd-tc-toggle-track {
    position: absolute; inset: 0; border-radius: 999px;
    cursor: pointer; transition: background 0.2s;
}
.bcd-tc-toggle-track::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%; background: #fff;
    transition: transform 0.2s;
}
.bcd-tc-toggle input:checked + .bcd-tc-toggle-track::after { transform: translateX(14px); }

/* Booking method */
.bcd-booking-select {
    width: 100%; padding: 9px 36px 9px 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; font-size: 13px; font-family: inherit;
    outline: none; appearance: none; -webkit-appearance: none;
    transition: border-color 0.15s;
}
.bcd-booking-select:focus { border-color: rgba(51,105,255,0.45); }
.bcd-booking-url { margin-top: 8px; }

/* Textarea */
.bcd-textarea {
    width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; font-size: 12px;
    font-family: inherit; outline: none; resize: vertical; line-height: 1.6;
    box-sizing: border-box; transition: border-color 0.15s;
}
.bcd-textarea:focus { border-color: rgba(51,105,255,0.45); background: rgba(51,105,255,0.04); }

/* Footer */
.bcd-footer {
    padding: 14px 24px; border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.bcd-save-feedback { flex: 1; font-size: 12px; min-height: 16px; }
.bcd-save-feedback.success { color: #22c55e; }
.bcd-save-feedback.error   { color: #f87171; }
.bcd-save-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 20px;
    border: 1px solid rgba(51,105,255,0.35); border-radius: 10px; font-size: 13px; font-weight: 700;
    font-family: inherit; cursor: pointer; transition: all 0.15s; flex-shrink: 0;
}
.bcd-save-btn:hover { color: #BECFFE; }
.bcd-save-btn:active { transform: scale(0.98); }

/* ── LIGHT MODE ── */
body.light-mode .bot-config-drawer { background: #F8F9FC; border-left: 1px solid rgba(60,60,67,0.1); }
body.light-mode .bcd-header { border-bottom: 1px solid rgba(60,60,67,0.08); }
body.light-mode .bcd-icon { background: rgba(0,67,251,0.08); border-color: rgba(0,67,251,0.15); color: #0043FB; }
body.light-mode .bcd-title { color: #000; }
body.light-mode .bcd-subtitle { color: rgba(60,60,67,0.45); }
body.light-mode .bcd-close { background: rgba(120,120,128,0.1); color: rgba(60,60,67,0.5); }
body.light-mode .bcd-close:hover { background: rgba(120,120,128,0.2); color: #000; }
body.light-mode .bcd-section { border-bottom-color: rgba(60,60,67,0.06); }
body.light-mode .bcd-section-label { color: rgba(60,60,67,0.45); }
body.light-mode .bcd-st-btn { border-color: rgba(60,60,67,0.12); background: rgba(255,255,255,0.7); color: rgba(60,60,67,0.5); }
body.light-mode .bcd-st-btn.active-auto   { background: rgba(0,67,251,0.1);  border-color: rgba(0,67,251,0.3);  color: #0043FB; }
body.light-mode .bcd-st-btn.active-open   { background: rgba(52,199,89,0.1);  border-color: rgba(52,199,89,0.3);  color: #34C759; }
body.light-mode .bcd-st-btn.active-closed { background: rgba(255,59,48,0.08); border-color: rgba(255,59,48,0.25); color: #FF3B30; }
body.light-mode .bcd-status-live { color: rgba(60,60,67,0.5); }
body.light-mode .bcd-day-row { background: rgba(255,255,255,0.6); border-color: rgba(60,60,67,0.08); }
body.light-mode .bcd-day-row:hover { background: rgba(255,255,255,0.9); }
body.light-mode .bcd-day-name { color: rgba(60,60,67,0.8); }
body.light-mode .bcd-day-toggle-track { background: rgba(120,120,128,0.2); }
body.light-mode .bcd-day-toggle input:checked + .bcd-day-toggle-track { background: #0043FB; }
body.light-mode .bcd-time-input { background: #fff; border-color: rgba(60,60,67,0.12); color: #000; }
body.light-mode .bcd-time-input:focus { border-color: #0043FB; }
body.light-mode .bcd-day-closed-label { color: rgba(60,60,67,0.3); }
body.light-mode .bcd-label { color: rgba(60,60,67,0.5); }
body.light-mode .bcd-input { background: #fff; border-color: rgba(60,60,67,0.12); color: #000; }
body.light-mode .bcd-input:focus { border-color: #0043FB; background: rgba(0,67,251,0.02); }
body.light-mode .bcd-input::placeholder { color: rgba(60,60,67,0.3); }
body.light-mode .bcd-test-btn { background: rgba(120,120,128,0.1); border-color: rgba(60,60,67,0.12); color: rgba(60,60,67,0.5); }
body.light-mode .bcd-test-btn:hover { background: rgba(120,120,128,0.2); color: #000; }
body.light-mode .bcd-phone-row { background: rgba(255,255,255,0.7); border-color: rgba(60,60,67,0.1); }
body.light-mode .bcd-phone-label { background: rgba(120,120,128,0.08); border-color: rgba(60,60,67,0.1); color: rgba(60,60,67,0.7); }
body.light-mode .bcd-phone-number { color: #000; }
body.light-mode .bcd-phone-booking { color: rgba(60,60,67,0.4); }
body.light-mode .bcd-phone-booking.is-booking { color: #0043FB; }
body.light-mode .bcd-add-btn { background: rgba(0,67,251,0.08); border-color: rgba(0,67,251,0.2); color: #0043FB; }
body.light-mode .bcd-add-btn:hover { background: rgba(0,67,251,0.14); }
body.light-mode .bcd-treatment-card { background: rgba(255,255,255,0.7); border-color: rgba(60,60,67,0.1); }
body.light-mode .bcd-treatment-card:hover { border-color: rgba(60,60,67,0.18); }
body.light-mode .bcd-tc-header { border-bottom-color: rgba(60,60,67,0.07); }
body.light-mode .bcd-tc-name { color: #000; }
body.light-mode .bcd-tc-label { color: rgba(60,60,67,0.45); }
body.light-mode .bcd-tc-select, body.light-mode .bcd-tc-input { background: #fff; border-color: rgba(60,60,67,0.12); color: #000; }
body.light-mode .bcd-tc-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(60,60,67,0.45)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
body.light-mode .bcd-tc-select option { background: #fff; color: #000; }
body.light-mode .bcd-tc-toggle-label { color: rgba(60,60,67,0.65); }
body.light-mode .bcd-tc-toggle-track { background: rgba(120,120,128,0.2); }
body.light-mode .bcd-tc-toggle input:checked + .bcd-tc-toggle-track { background: #0043FB; }
body.light-mode .bcd-booking-select {
    background-color: #fff; border-color: rgba(60,60,67,0.12); color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='rgba(60,60,67,0.45)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
body.light-mode .bcd-booking-select option { background: #fff; color: #000; }
body.light-mode .bcd-textarea { background: #fff; border-color: rgba(60,60,67,0.12); color: rgba(60,60,67,0.85); }
body.light-mode .bcd-textarea::placeholder { color: rgba(60,60,67,0.3); }
body.light-mode .bcd-footer { border-top-color: rgba(60,60,67,0.08); }
body.light-mode .bcd-save-feedback { color: rgba(60,60,67,0.45); }
body.light-mode .bcd-save-btn { background: rgba(0,67,251,0.1); border-color: rgba(0,67,251,0.25); color: #0043FB; }
body.light-mode .bcd-save-btn:hover { background: rgba(0,67,251,0.16); border-color: rgba(0,67,251,0.35); }


/* Practice type toggle */
.bcd-practice-toggle {
    display: flex;
    gap: 6px;
}
.bcd-pt-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.bcd-pt-btn:hover:not(.active) {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
}
body.light-mode .bcd-pt-btn {
    background: rgba(255,255,255,0.7);
    border-color: rgba(60,60,67,0.12);
    color: rgba(60,60,67,0.5);
}
body.light-mode .bcd-pt-btn.active {
    background: rgba(0,67,251,0.1);
    border-color: rgba(0,67,251,0.28);
    color: #0043FB;
}

/* Mobile — bottom sheet */
@media (max-width: 600px) {
    .bot-config-drawer {
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; height: 92vh;
        border-left: none; border-top: 1px solid rgba(255,255,255,0.08);
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }
    .bot-config-drawer.active { transform: translateY(0); }
}

/* Bot config status indicators */
.bot-nav-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
    animation: botDotPulse 2.5s ease-in-out infinite;
}
.bot-nav-dot.unconfigured {
    background: rgba(255,255,255,0.2);
    box-shadow: none;
    animation: none;
}
@keyframes botDotPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* AI enabled toggle in drawer header */
.bcd-ai-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
}
.bcd-ai-toggle-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: color 0.2s;
    min-width: 36px;
}
.bcd-ai-toggle {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.bcd-ai-toggle input {
    opacity: 0; width: 0; height: 0; position: absolute;
}
.bcd-ai-toggle-track {
    position: absolute; inset: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid rgba(255,255,255,0.1);
}
.bcd-ai-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.bcd-ai-toggle input:checked + .bcd-ai-toggle-track::after {
    transform: translateX(18px);
}
body.light-mode .bcd-ai-toggle-label { color: #16a34a; }
body.light-mode .bcd-ai-toggle-label.off { color: rgba(60,60,67,0.3); }
body.light-mode .bcd-ai-toggle-track { background: rgba(120,120,128,0.2); border-color: rgba(60,60,67,0.1); }
body.light-mode .bcd-ai-toggle input:checked + .bcd-ai-toggle-track { background: #22c55e; border-color: #22c55e; }

/* ============================================================
   BRAND COLOR SWATCHES (Settings → Branding)
   ============================================================ */
.brand-swatches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.brand-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}
.brand-swatch:hover {
    transform: scale(1.1);
}
.brand-swatch-custom {
    background: conic-gradient(from 180deg, #ff0080, #7928ca, #2afadf, #17ead9, #f7b733, #ff0080) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}
.brand-swatch-custom i { font-size: 13px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.brand-swatch-custom input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}
body.light-mode .brand-swatch { border-color: rgba(60,60,67,0.12); }
body.light-mode .brand-swatch:hover { border-color: rgba(60,60,67,0.25); }
body.light-mode .brand-swatch.active { border-color: #000; box-shadow: 0 0 0 2px rgba(0,0,0,0.08), 0 2px 10px rgba(0,0,0,0.1); }

/* ============================================================
   SHOWCASE TAB — Hub + Editors
   ============================================================ */
#view-showcase { padding: 0; }
.showcase-hub,
.showcase-editor {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 40px 60px 40px;
    box-sizing: border-box;
}

.showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.showcase-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.showcase-title i {
    font-size: 26px;
    background: linear-gradient(135deg, #BC89FA 0%, #618AFA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.showcase-subtitle {
    font-size: 14px;
    margin: 6px 0 0 0;
    font-weight: 500;
}

/* Hub grid */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Hub card */
.showcase-card {
    position: relative;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.2,0,0.2,1), border-color 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
}
.showcase-card-active { cursor: pointer; }
.showcase-card-active:hover {
    transform: translateY(-3px);
}
.showcase-card-soon { cursor: not-allowed; opacity: 0.55; }
.showcase-card-soon:hover { opacity: 0.7; }

.showcase-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 9px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 3;
}
.showcase-card-preview {
    width: 100%;
    aspect-ratio: 16/10;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-preview-soon i { font-size: 54px; }

/* Before/After mini preview inside card — minimal Classic look */
.ba-preview { padding: 0; }
.ba-preview-img {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    border-radius: 0;
}
.ba-preview-before {
    top: 0;
    background: #1a1a1a url('assets/sample-before.jpg') center/cover no-repeat;
    filter: brightness(0.5);
}
.ba-preview-after {
    bottom: 0;
    background: #1a1a1a url('assets/sample-after.jpg') center/cover no-repeat;
    filter: brightness(0.5);
}
/* Thin brand-accent divider line */
.ba-preview::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(var(--brand-color-rgb),0.55) 25%, rgba(var(--brand-color-rgb),0.55) 75%, transparent);
    z-index: 3;
}
/* Minimal signature image on the divider — small, premium, understated */
.ba-preview-signature-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 22%;
    max-height: 16%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)) drop-shadow(0 0 8px rgba(255,255,255,0.08));
    pointer-events: none;
}
/* Tiny BEFORE/AFTER chips — semi-transparent dark pills with gold text */
.ba-preview-label {
    position: absolute;
    font-size: 8px;
    letter-spacing: 0.2em;
    font-weight: 700;
    padding: 2px 7px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 3px;
    border: 1px solid rgba(var(--brand-color-rgb),0.3);
    z-index: 2;
}
.ba-label-before { top: 9%; left: 9%; }
.ba-label-after  { bottom: 9%; right: 9%; }

.showcase-card-body { padding: 18px 20px 20px 20px; }
.showcase-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px 0;
    letter-spacing: -0.2px;
}
.showcase-card-desc {
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

/* Editor */
.showcase-editor { display: flex; flex-direction: column; }
.showcase-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.showcase-editor-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.3px;
}
.showcase-back-btn {
    border: 1px solid rgba(255,255,255,0.08);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

.showcase-editor-body {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 32px;
    align-items: start;
}

.showcase-editor-controls {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.sb-field { display: flex; flex-direction: column; gap: 10px; }
.sb-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Drop zone */
.sb-dropzone {
    position: relative;
    border: 1.5px dashed rgba(255,255,255,0.14);
    border-radius: 14px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}
.sb-dropzone.dragging { transform: scale(1.01); }
.sb-dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
}
.sb-dropzone-empty i { font-size: 32px; }
.sb-dropzone-text { font-size: 13px; }
.sb-dropzone-text strong { font-weight: 600; }
.sb-dropzone-preview {
    display: none;
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
}
.sb-dropzone.has-image .sb-dropzone-empty { display: none; }
.sb-dropzone.has-image .sb-dropzone-preview { display: block; }
.sb-dropzone.has-image { border-style: solid; border-color: rgba(255,255,255,0.1); padding: 0; }
.sb-dropzone.has-image .sb-dropzone-clear { display: flex; }
.sb-dropzone-clear {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
    z-index: 2;
}
.sb-dropzone-clear:hover { background: rgba(239,68,68,0.8); border-color: rgba(239,68,68,1); }

/* Ratio picker */
.sb-ratio-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.sb-ratio-btn {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s;
}
.sb-ratio-btn.active {
    box-shadow: 0 0 20px rgba(188,137,250,0.15);
}
.sb-ratio-icon {
    width: 32px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    opacity: 0.7;
}
.sb-ratio-btn.active .sb-ratio-icon { opacity: 1; }

/* Style picker — identical shell to ratio picker + tiny layout mockups */
.sb-style-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.sb-style-btn {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 6px 10px 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
    overflow: hidden;
}
.sb-style-btn.active {
    box-shadow: 0 0 20px rgba(188,137,250,0.15);
}
.sb-style-btn span:last-child { white-space: nowrap; }

.sb-style-thumb {
    position: relative;
    width: 42px;
    aspect-ratio: 4/5;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

/* Classic thumb — minimal stack, small corner chips, tiny center logo */
.sb-thumb-classic::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(155deg, #a6814e 0%, #7a5a35 100%);
}
.sb-thumb-classic::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(155deg, #efe0c9 0%, #d8c4a3 100%);
}
.sb-thumb-classic .thumb-band {
    position: absolute;
    top: 50%;
    left: 35%; right: 35%;
    height: 6%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.9);
    border: 0.5px solid rgba(var(--brand-color-rgb),0.5);
    border-radius: 999px;
    z-index: 3;
}
.sb-thumb-classic .thumb-chip-top,
.sb-thumb-classic .thumb-chip-bot {
    position: absolute;
    width: 22%;
    height: 6%;
    background: rgba(0,0,0,0.6);
    border: 0.5px solid rgba(var(--brand-color-rgb),0.5);
    border-radius: 1px;
    z-index: 2;
}
.sb-thumb-classic .thumb-chip-top { top: 9%; left: 9%; }
.sb-thumb-classic .thumb-chip-bot { bottom: 9%; right: 9%; }

/* Minimal thumb — stacked, corner chips, thin gradient line */
.sb-thumb-minimal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 49.7%;
    background: linear-gradient(135deg, #444 0%, #222 100%);
}
.sb-thumb-minimal::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 49.7%;
    background: linear-gradient(135deg, #c8c8c8 0%, #7a7a7a 100%);
}
.sb-thumb-minimal .thumb-band {
    position: absolute;
    top: 50%;
    left: 10%; right: 10%;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    z-index: 3;
}
.sb-thumb-minimal .thumb-chip-top,
.sb-thumb-minimal .thumb-chip-bot {
    position: absolute;
    width: 28%;
    height: 7%;
    background: rgba(255,255,255,0.55);
    border-radius: 1px;
    z-index: 2;
}
.sb-thumb-minimal .thumb-chip-top { top: 9%; left: 10%; }
.sb-thumb-minimal .thumb-chip-bot { bottom: 9%; right: 10%; }

/* Light mode — style picker */
body.light-mode .sb-style-btn {
    background: rgba(255,255,255,0.7);
    border-color: rgba(60,60,67,0.1);
    color: rgba(60,60,67,0.7);
}
body.light-mode .sb-style-btn:hover { background: #fff; border-color: rgba(60,60,67,0.2); color: #000; }
body.light-mode .sb-style-btn.active {
    background: linear-gradient(145deg, rgba(160,90,246,0.12) 0%, rgba(100,138,242,0.06) 100%);
    border-color: rgba(160,90,246,0.45);
    color: #6421B5;
}
body.light-mode .sb-style-thumb { background: #ebedf2; border-color: rgba(60,60,67,0.1); }

.sb-hint { font-size: 12px; margin: 0; }
.sb-hint-center { text-align: center; }

/* Export button */
.sb-export-btn {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(188,137,250,0.3);
    background: linear-gradient(135deg, #A05AF6 0%, #648AF2 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.02em;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    margin-top: 4px;
}
.sb-export-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(160,90,246,0.35);
}
.sb-export-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Preview */
.showcase-editor-preview {
    position: sticky;
    top: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.sb-preview-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/5;
}
.sb-preview-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}
.sb-preview-canvas:active { cursor: grabbing; }
.sb-preview-canvas.no-drag { cursor: default; }

/* Drag hint under preview */
.sb-drag-hint {
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sb-drag-hint i { font-size: 13px; }
.sb-preview-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 40px;
}
.sb-preview-placeholder i { font-size: 52px; }
.sb-preview-placeholder p { margin: 0; font-size: 13px; max-width: 240px; }

/* Light mode — Showcase */
body.light-mode .showcase-title { color: #000; }
body.light-mode .showcase-subtitle { color: rgba(60,60,67,0.6); }
body.light-mode .showcase-header { border-bottom-color: rgba(60,60,67,0.12); }
body.light-mode .showcase-card {
    background: rgba(255,255,255,0.9);
    border-color: rgba(60,60,67,0.1);
}
body.light-mode .showcase-card-active:hover {
    border-color: rgba(60,60,67,0.18);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
body.light-mode .showcase-card-preview { background: linear-gradient(180deg, #eef0f5 0%, #e0e3ea 100%); }
body.light-mode .ba-preview { background: linear-gradient(180deg, #eef0f5 0%, #e0e3ea 100%); }
body.light-mode .ba-preview-divider { background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.2) 50%, transparent 100%); }
body.light-mode .ba-preview-label {
    color: rgba(60,60,67,0.9);
    background: rgba(255,255,255,0.85);
    border-color: rgba(60,60,67,0.1);
}
body.light-mode .showcase-card-title { color: #000; }
body.light-mode .showcase-card-desc { color: rgba(60,60,67,0.6); }
body.light-mode .showcase-card-badge {
    background: rgba(0,0,0,0.75);
    color: #fff;
    border-color: rgba(0,0,0,0.15);
}
body.light-mode .sc-preview-soon i { color: rgba(60,60,67,0.25); }
body.light-mode .showcase-editor-title { color: #000; }
body.light-mode .showcase-editor-header { border-bottom-color: rgba(60,60,67,0.12); }
body.light-mode .showcase-back-btn {
    background: rgba(255,255,255,0.8);
    border-color: rgba(60,60,67,0.12);
    color: #333;
}
body.light-mode .showcase-back-btn:hover {
    background: #fff;
    border-color: rgba(60,60,67,0.2);
    color: #000;
}
body.light-mode .sb-label { color: rgba(60,60,67,0.6); }
body.light-mode .sb-dropzone {
    background: rgba(255,255,255,0.6);
    border-color: rgba(60,60,67,0.18);
}
body.light-mode .sb-dropzone:hover { background: rgba(255,255,255,0.9); border-color: rgba(60,60,67,0.3); }
body.light-mode .sb-dropzone.dragging { background: rgba(160,90,246,0.05); border-color: #A05AF6; }
body.light-mode .sb-dropzone-empty { color: rgba(60,60,67,0.5); }
body.light-mode .sb-dropzone-empty i { color: rgba(60,60,67,0.35); }
body.light-mode .sb-dropzone-text { color: rgba(60,60,67,0.7); }
body.light-mode .sb-dropzone-text strong { color: #A05AF6; }
body.light-mode .sb-ratio-btn {
    background: rgba(255,255,255,0.7);
    border-color: rgba(60,60,67,0.1);
    color: rgba(60,60,67,0.7);
}
body.light-mode .sb-ratio-btn:hover { background: #fff; border-color: rgba(60,60,67,0.2); color: #000; }
body.light-mode .sb-ratio-btn.active {
    background: linear-gradient(145deg, rgba(160,90,246,0.15) 0%, rgba(100,138,242,0.08) 100%);
    border-color: rgba(160,90,246,0.5);
    color: #6421B5;
}
body.light-mode .sb-hint { color: rgba(60,60,67,0.5); }
body.light-mode .sb-export-btn:disabled {
    background: rgba(120,120,128,0.15);
    border-color: rgba(60,60,67,0.1);
    color: rgba(60,60,67,0.4);
}
body.light-mode .sb-preview-wrap {
    background: linear-gradient(180deg, #f5f6fa 0%, #ecedf2 100%);
    border-color: rgba(60,60,67,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}
body.light-mode .sb-preview-placeholder { color: rgba(60,60,67,0.4); }
body.light-mode .sb-preview-placeholder i { color: rgba(60,60,67,0.18); }
body.light-mode .sb-preview-placeholder p { color: rgba(60,60,67,0.5); }

/* ===== LOGO CARD + EDITOR ===== */
.logo-card-preview {
    padding: 0;
}
.logo-card-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.logo-card-image {
    max-width: 80%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 4px 20px rgba(var(--brand-color-rgb),0.25));
}
.logo-card-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
}
.logo-card-placeholder i {
    font-size: 42px;
    color: rgba(var(--brand-color-rgb),0.5);
}
.logo-card-placeholder span {
    font-size: 10px;
    letter-spacing: 0.2em;
    font-weight: 700;
    text-transform: uppercase;
}
.logo-card-shimmer {
    position: absolute;
    bottom: 18%;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--brand-color-rgb),0.35), transparent);
}

/* Logo editor layout */
.logo-editor-body {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 32px;
    align-items: start;
}
.logo-editor-controls { display: flex; flex-direction: column; gap: 22px; }

.logo-name-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 500;
    outline: none;
    transition: all 0.15s;
    box-sizing: border-box;
}

/* Generate button — distinct from Save (outline + sparkle) */
.sb-generate-btn {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid rgba(188,137,250,0.4);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.02em;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s, background 0.2s;
}
.sb-generate-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(160,90,246,0.2);
    color: #fff;
}
.sb-generate-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.sb-generate-btn i { font-size: 17px; }

/* Logo preview stage */
.logo-editor-preview {
    position: sticky;
    top: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.logo-preview-stage {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 4/3;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
.logo-preview-stage::after {
    content: '';
    position: absolute;
    bottom: 10%; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--brand-color-rgb),0.25), transparent);
}
/* Logo preview — image (after generation) + empty + loading states */
.logo-preview-image {
    max-width: 85%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 30px rgba(var(--brand-color-rgb),0.3));
    animation: logoFadeIn 0.4s ease;
}
@keyframes logoFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
.logo-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.3);
    text-align: center;
}
.logo-preview-empty i {
    font-size: 56px;
    color: rgba(var(--brand-color-rgb),0.45);
}
.logo-preview-empty p {
    margin: 0;
    font-size: 13px;
    color: #777;
    max-width: 240px;
}
.logo-preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.logo-loading-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(var(--brand-color-rgb),0.15);
    border-top-color: rgba(var(--brand-color-rgb),0.9);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.logo-loading-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #ddd;
}
.logo-loading-sub {
    margin: 0;
    font-size: 12px;
    color: #777;
}

/* Light mode — Logo */
body.light-mode .logo-card-preview {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(var(--brand-color-rgb),0.08) 0%, transparent 60%),
        linear-gradient(145deg, #1a1a1a 0%, #0f0f0f 100%);
}
body.light-mode .logo-card-placeholder { color: rgba(255,255,255,0.35); }
body.light-mode .logo-name-input {
    background: rgba(255,255,255,0.8);
    border-color: rgba(60,60,67,0.12);
    color: #000;
}
body.light-mode .logo-name-input:focus { background: #fff; border-color: rgba(160,90,246,0.5); box-shadow: 0 0 0 3px rgba(160,90,246,0.12); }
body.light-mode .logo-name-input::placeholder { color: rgba(60,60,67,0.35); }
body.light-mode .sb-generate-btn {
    background: linear-gradient(145deg, rgba(160,90,246,0.08) 0%, rgba(100,138,242,0.05) 100%);
    border-color: rgba(160,90,246,0.35);
    color: #6421B5;
}
body.light-mode .sb-generate-btn:not(:disabled):hover {
    background: linear-gradient(145deg, rgba(160,90,246,0.18) 0%, rgba(100,138,242,0.1) 100%);
}
body.light-mode .logo-preview-stage {
    background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%);
    border-color: rgba(60,60,67,0.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 1024px) {
    .showcase-editor-body,
    .logo-editor-body { grid-template-columns: 1fr; }
    .showcase-editor-preview,
    .logo-editor-preview { position: static; }
    .sb-preview-wrap { max-width: 420px; margin: 0 auto; }
    .logo-preview-stage { max-width: 100%; }
}
@media (max-width: 768px) {
    .showcase-hub, .showcase-editor { padding: 20px 18px 40px 18px; }
    .showcase-grid { grid-template-columns: 1fr; gap: 16px; }
    .showcase-title { font-size: 22px; }
    .showcase-title i { font-size: 22px; }
    .showcase-editor-title { font-size: 18px; }
}

/* ── Sidebar brand mark — gradient star + "Santidenty." wordmark (light sidebar) ── */
.logo-area { display: flex; align-items: center; gap: 9px; }
.sidebar-logo-star { width: 26px !important; height: 26px !important; display: block; flex-shrink: 0; }
.sidebar-logo-text { font-size: 15.5px; font-weight: 800; letter-spacing: -0.3px; color: #000000; line-height: 1; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR COLLAPSE — toggle between full (260px) and icon rail (76px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Footer row: Settings (grows) + collapse toggle pinned right */
.sidebar-footer-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.sidebar-footer-row .nav-item { flex: 1; min-width: 0; }
.sidebar-collapse-btn {
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(60, 60, 67, 0.5);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.sidebar-collapse-btn:hover {
    background: rgba(120, 120, 128, 0.12);
    border-color: rgba(60, 60, 67, 0.12);
    color: #000000;
}
.sidebar-collapse-btn i { font-size: 16px; line-height: 1; }

/* Collapsed width — desktop only (mobile uses the drawer, sidebar is hidden) */
@media (min-width: 901px) {
    body.sidebar-collapsed .dashboard-wrapper { grid-template-columns: 76px 1fr; }
}

/* Hide every label/text element; keep only icons + avatar + star */
body.sidebar-collapsed .sidebar-logo-text,
body.sidebar-collapsed .nav-item > span,
body.sidebar-collapsed .switcher-info,
body.sidebar-collapsed .switcher-caret,
body.sidebar-collapsed .nav-pro-star { display: none; }

/* Tighten padding + center the surviving icons */
body.sidebar-collapsed .sidebar        { padding-left: 12px; padding-right: 12px; }
body.sidebar-collapsed .logo-area      { justify-content: center; padding-left: 0; gap: 0; }
body.sidebar-collapsed .account-switcher { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
body.sidebar-collapsed .nav-item       { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
body.sidebar-collapsed .sidebar-footer-row { flex-direction: column; gap: 8px; }
body.sidebar-collapsed .sidebar-footer-row .nav-item { flex: none; width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   WHATSAPP TAB — authentic WhatsApp Web look
   Scoped to #sms-container so the Meta tab (#chat-container) is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Chat background: WhatsApp beige + doodle pattern (light / default) ---- */
#sms-container .active-chat-panel { background-color: #efeae2; }
#sms-container .messages-feed {
    background-color: #efeae2;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJyB2aWV3Qm94PScwIDAgMzAwIDMwMCc+CjxnIGZpbGw9J25vbmUnIHN0cm9rZT0nIzExMWIyMScgc3Ryb2tlLXdpZHRoPScyLjEnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgb3BhY2l0eT0nMC4wNic+CjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDMwLDMyKSc+CjxjaXJjbGUgY3g9JzE0JyBjeT0nMTQnIHI9JzEzJy8+CjxjaXJjbGUgY3g9JzknIGN5PScxMScgcj0nMS40JyBmaWxsPScjMTExYjIxJyBzdHJva2U9J25vbmUnLz4KPGNpcmNsZSBjeD0nMTknIGN5PScxMScgcj0nMS40JyBmaWxsPScjMTExYjIxJyBzdHJva2U9J25vbmUnLz4KPHBhdGggZD0nTTgsMTYgcTYsNiAxMiwwJy8+CjwvZz4KPGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMTE4LDMwKSc+CjxwYXRoIGQ9J00xMiwyMSBDMTIsMjEgMSwxMy41IDEsNi41IEMxLDMgMy41LDAuOCA2LjIsMC44IEM5LDAuOCAxMSwzIDEyLDQuOCBDMTMsMyAxNSwwLjggMTcuOCwwLjggQzIwLjUsMC44IDIzLDMgMjMsNi41IEMyMywxMy41IDEyLDIxIDEyLDIxIFonLz4KPC9nPgo8ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgxOTYsMzQpJz4KPHBhdGggZD0nTTQsMCBoMjAgYTQsNCAwIDAgMSA0LDQgdjggYTQsNCAwIDAgMSAtNCw0IGgtMTIgbC02LDUgdi01IGgtMiBhNCw0IDAgMCAxIC00LC00IHYtOCBhNCw0IDAgMCAxIDQsLTQgWicvPgo8L2c+CjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDI1Niw5MiknPgo8cGF0aCBkPSdNNCwyIEMxLjUsMiAwLjUsNSAxLjUsOSBDMi41LDEzIDIsMTYgMywyMSBDMy42LDI0IDUuNSwyNCA2LjUsMjEgQzcuMiwxOC44IDgsMTcgMTEsMTcgQzE0LDE3IDE0LjgsMTguOCAxNS41LDIxIEMxNi41LDI0IDE4LjQsMjQgMTksMjEgQzIwLDE2IDE5LjUsMTMgMjAuNSw5IEMyMS41LDUgMjAuNSwyIDE4LDIgQzE0LjUsMiAxNC41LDQgMTEsNCBDNy41LDQgNy41LDIgNCwyIFonLz4KPC9nPgo8ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgzNiwxMTgpJz4KPHBhdGggZD0nTTEzLDEgTDE2LjIsOS4zIEwyNSw5LjggTDE4LjIsMTUuNCBMMjAuNSwyNCBMMTMsMTkuMiBMNS41LDI0IEw3LjgsMTUuNCBMMSw5LjggTDkuOCw5LjMgWicvPgo8L2c+CjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDEyOCwxMTYpJz4KPHBhdGggZD0nTTEsMTIgTDI1LDIgTDE1LDI1IEwxMiwxNSBaJy8+CjxwYXRoIGQ9J00xMiwxNSBMMjUsMicvPgo8L2c+CjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDIzMCwxNDApJz4KPGVsbGlwc2UgY3g9JzUnIGN5PScyMScgcng9JzQuNicgcnk9JzMuNCcvPgo8cGF0aCBkPSdNOS42LDIxIFYzIHE2LDIgNSw5Jy8+CjwvZz4KPGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMzIsMjAwKSc+CjxjaXJjbGUgY3g9JzE0JyBjeT0nMTQnIHI9JzcnLz4KPHBhdGggZD0nTTE0LDAgVjMgTTE0LDI1IFYyOCBNMCwxNCBIMyBNMjUsMTQgSDI4IE00LDQgTDYsNiBNMjQsNCBMMjIsNiBNNCwyNCBMNiwyMiBNMjQsMjQgTDIyLDIyJy8+CjwvZz4KPGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMTE2LDIwMiknPgo8cGF0aCBkPSdNMyw2IGgxNiB2MTAgYTQsNCAwIDAgMSAtNCw0IGgtOCBhNCw0IDAgMCAxIC00LC00IFonLz4KPHBhdGggZD0nTTE5LDggaDMgYTMsMyAwIDAgMSAwLDYgaC0zJy8+CjxwYXRoIGQ9J004LDEgcTIsMiAwLDQgTTEzLDEgcTIsMiAwLDQnLz4KPC9nPgo8ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgxOTgsMjA2KSc+CjxwYXRoIGQ9J00yLDYgaDcgbDIsLTMgaDYgbDIsMyBoNyB2MTUgaC0yNCBaJy8+CjxjaXJjbGUgY3g9JzE0JyBjeT0nMTQnIHI9JzUnLz4KPGNpcmNsZSBjeD0nMjMnIGN5PSc5JyByPScxJyBmaWxsPScjMTExYjIxJyBzdHJva2U9J25vbmUnLz4KPC9nPgo8ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgxMjAsMjU2KSc+CjxjaXJjbGUgY3g9JzEzJyBjeT0nMTMnIHI9JzMnIGZpbGw9JyMxMTFiMjEnIHN0cm9rZT0nbm9uZScvPgo8Y2lyY2xlIGN4PScxMycgY3k9JzUnIHI9JzQnLz4KPGNpcmNsZSBjeD0nMjAnIGN5PScxMCcgcj0nNCcvPgo8Y2lyY2xlIGN4PScxNycgY3k9JzE5JyByPSc0Jy8+CjxjaXJjbGUgY3g9JzknIGN5PScxOScgcj0nNCcvPgo8Y2lyY2xlIGN4PSc2JyBjeT0nMTAnIHI9JzQnLz4KPC9nPgo8ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgyNjIsMjUwKSc+CjxwYXRoIGQ9J00xMCwxIEwzLDE1IEg5IEw3LDI1IEwxNywxMSBIMTEgWicvPgo8L2c+CjwvZz4KPC9zdmc+Cg==");
    background-repeat: repeat;
    background-size: 300px 300px;
}

/* ---- Header bar ---- */
#sms-container .chat-header,
body.light-mode #sms-container .chat-header {
    background: #f0f2f5;
    border-bottom: 1px solid rgba(11,20,26,0.08);
}
#sms-container #sms-header-name { color: #111b21; }
#sms-container #sms-header-phone { color: #667781; opacity: 1; }
#sms-container .back-to-list-btn,
body.light-mode #sms-container .back-to-list-btn { color: #54656f !important; }

/* ---- Bubbles ---- */
#sms-container .msg-bubble {
    border-radius: 7.5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 14.2px;
    line-height: 19px;
    box-shadow: 0 1px 0.5px rgba(11,20,26,0.13);
    padding: 6px 9px 7px 9px;
}
/* incoming = patient → white, tail top-left */
#sms-container .incoming .msg-bubble,
body.light-mode #sms-container .incoming .msg-bubble {
    background: #ffffff;
    color: #111b21;
    border-top-left-radius: 0;
}
#sms-container .incoming .msg-bubble::before {
    content: ""; position: absolute; top: 0; left: -8px; width: 0; height: 0;
    border-top: 8px solid #ffffff;
    border-left: 8px solid transparent;
}
/* outgoing = clinic → green, tail top-right */
#sms-container .outgoing .msg-bubble,
body.light-mode #sms-container .outgoing .msg-bubble {
    background: #d9fdd3;
    color: #111b21;
    border-top-right-radius: 0;
}
#sms-container .outgoing .msg-bubble::before {
    content: ""; position: absolute; top: 0; right: -8px; width: 0; height: 0;
    border-top: 8px solid #d9fdd3;
    border-right: 8px solid transparent;
}
/* timestamps */
#sms-container .msg-time,
body.light-mode #sms-container .msg-time,
body.light-mode #sms-container .outgoing .msg-time {
    color: rgba(17,27,33,0.45);
    opacity: 1;
    font-size: 11px;
}

/* ---- Input bar ---- */
#sms-container .chat-input-area,
body.light-mode #sms-container .chat-input-area {
    background: #f0f2f5;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    border-top: none;
}
#sms-container .message-input,
body.light-mode #sms-container .message-input {
    background: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 9px 13px;
    color: #111b21;
    font-size: 15px;
}
#sms-container .message-input::placeholder,
body.light-mode #sms-container .message-input::placeholder { color: #8696a0; }
#sms-container .send-btn,
body.light-mode #sms-container .send-btn {
    background: transparent;
    color: #54656f;
    width: 40px; height: 40px;
    font-size: 22px;
}
#sms-container .send-btn:hover,
body.light-mode #sms-container .send-btn:hover { background: rgba(11,20,26,0.05); color: #00a884; }
#sms-container .send-btn:active { background: rgba(11,20,26,0.08); color: #00a884; transform: scale(0.94); }


/* WhatsApp badge in the leads table (desktop) — opens that lead's conversation */
.lead-wa-badge {
    color: #25D366;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.12s ease, opacity 0.12s ease;
}
.lead-wa-badge:hover { transform: scale(1.18); opacity: 0.85; }
/* Red unread count next to the WhatsApp logo in the Patients table */
.lead-unread-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}


/* WhatsApp tab: clickable conversation header name → opens the patient profile */
#sms-container .sms-header-name { cursor: pointer; display: inline-block; transition: opacity 0.12s ease; }
#sms-container .sms-header-name:hover { text-decoration: underline; opacity: 0.8; }


/* WhatsApp unread badges — red counter on the nav tab, green count per chat */
.sms-nav-badge {
    display: none;            /* JS switches to inline-flex when count > 0 */
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 9px;
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}
.convo-preview-row { display: flex; align-items: center; gap: 8px; }
.convo-preview-row .convo-preview { flex: 1; min-width: 0; }
.convo-unread-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ff3b30;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* ============================================================
   BRAND WORDMARK — "Santidenty." tinted with the logo gradient
   (same blue -> purple as the star mark; see favicon.svg)
   ============================================================ */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sidebar-logo-text,
    .login-logo,
    .mobile-top-logo,
    .mobile-drawer-logo,
    body.light-mode .sidebar-logo-text,
    body.light-mode .login-logo,
    body.light-mode .mobile-top-logo,
    body.light-mode .mobile-drawer-logo {
        background: linear-gradient(135deg, #0043FB 0%, #7301FC 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #0043FB;
    }
    /* Shrink the painted box to the word itself, so the gradient runs
       blue -> purple across "Santidenty." instead of across the container. */
    .login-logo, body.light-mode .login-logo {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    .mobile-drawer-logo, body.light-mode .mobile-drawer-logo { width: fit-content; }
}

/* ============================================================
   BRAND PALETTE — one hue (224, the logo blue), lightness ladder.
   Rules: interactive colours are saturated; surfaces and text are the
   same hue desaturated. Purple (hue 267) is reserved for the logo and
   the AI surfaces (.sai-*, .showcase-*, .sb-*) — nowhere else.
   ============================================================ */
:root {
    --bg-page:       #F8F9FC;   /* 224/45/98 */
    --bg-alt:        #F1F3F9;   /* 224/40/96 */
    --blue-wash:     #EBF0FF;   /* 224/100/96 */
    --border-soft:   #DEE2ED;   /* 224/30/90 */
    --border:        #CCD1E0;   /* 224/25/84 */
    --blue-soft:     #3369FF;   /* 224/100/60 */
    --blue:          #0043FB;   /* 224/100/49 — the logo blue */
    --blue-hover:    #0036CC;   /* 224/100/40 */
    --blue-deep:     #113597;   /* 224/80/33  */
    --text-muted:    #48516A;   /* 224/19/35 — 7.5:1 on --bg-page */
    --text-body:     #3C3F49;   /* 224/10/26 — 10:1  */
    --text-strong:   #212531;   /* 224/20/16 — 14.5:1 */
    --ai-purple:     #A05AF6;   /* 267/90/66 — AI surfaces only */
}

/* ============================================================
   ACTIVE NAV — measured from the reference pill.
   Fill: blue tint fading left-to-right, lightening and drifting a
   few degrees toward sky at the far end. Radius 12px. The 3px accent
   bar sits INSIDE the pill and is clipped by its corner radius, which
   is what gives the bar its tapered top and bottom. No shadow.
   ============================================================ */
#nav-slider,
body.light-mode #nav-slider {
    background: linear-gradient(90deg, #AEC2F9 0%, #C4D7FD 50%, #D3E5FD 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 12px;
    box-shadow: none !important;
    overflow: hidden;   /* clips the accent bar to the rounded corners */
}
/* Dark mode: same construction, translucent so the sidebar reads through */
#nav-slider::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #295FF5;
}

.nav-item.active {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Label sampled from the reference (#2E66EB, nudged to hue 224).
       NOTE: 3.0:1 on the pill — under WCAG AA. Swap to #0B3ECB for 4.6:1. */
body.light-mode .nav-item.active { color: #2E60EA !important; }
body.light-mode .nav-item.active i { color: #2E60EA !important; }
body.light-mode .nav-item.active .nav-pro-star { color: rgba(46,96,234,0.75) !important; opacity: 1; }

/* Mobile drawer — no slider element there, so the item carries the pill */
.mobile-drawer-item.active {
    position: relative;
    overflow: hidden;
    border: none !important;
    border-radius: 12px;
    box-shadow: none !important;
}
.mobile-drawer-item.active::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #295FF5;
}
body.light-mode .mobile-drawer-item.active {
    background: linear-gradient(90deg, #AEC2F9 0%, #C4D7FD 50%, #D3E5FD 100%) !important;
    color: #2E60EA !important;
}
body.light-mode .mobile-drawer-item.active i { color: #2E60EA !important; }
body.light-mode .mobile-drawer-item.active .nav-pro-star { color: rgba(46,96,234,0.75) !important; opacity: 1; }

/* ============================================================
   LEAD → WHATSAPP SIDE PANEL (desktop only)
   Slides in from the right over the leads table. Hosts the real
   .active-chat-panel node, so nothing about sending/receiving is
   duplicated here — only the shell is styled.
   ============================================================ */
.lead-wa-backdrop {
    position: fixed; inset: 0;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1400;
}
.lead-wa-backdrop.open { opacity: 1; pointer-events: auto; }

.lead-wa-drawer {
    position: fixed; top: 0; right: 0;
    width: 420px; max-width: 92vw; height: 100%;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1401;
    will-change: transform;
}
.lead-wa-drawer.open { transform: translateX(0); }

.lead-wa-drawer-bar {
    flex-shrink: 0;
    height: 44px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px 0 14px;
}
.lead-wa-drawer-label {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
}
.lead-wa-drawer-label i { font-size: 16px; }
.lead-wa-drawer-actions { display: flex; align-items: center; gap: 2px; }
.lead-wa-drawer-btn {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 8px; cursor: pointer;
    font-size: 16px; transition: background 0.15s ease, color 0.15s ease;
}

/* The moved chat panel fills what is left */
.lead-wa-drawer-slot { flex: 1; min-height: 0; display: flex; }
.lead-wa-drawer-slot .active-chat-panel { flex: 1; min-width: 0; height: 100%; }
/* The panel's own back-button belongs to the mobile list flow — not here */
.lead-wa-drawer-slot .back-to-list-btn { display: none !important; }

body.light-mode .lead-wa-drawer {
    background: #fff;
    border-left: 1px solid rgba(60,60,67,0.12);
    box-shadow: -18px 0 46px rgba(20,30,60,0.16);
}
body.light-mode .lead-wa-drawer-bar {
    background: linear-gradient(135deg, rgba(0,67,251,0.13) 0%, rgba(52,37,251,0.07) 100%);
    border-bottom: 1px solid rgba(0,67,251,0.14);
    color: #0043FB;
}
body.light-mode .lead-wa-drawer-btn { color: rgba(0,67,251,0.75); }
body.light-mode .lead-wa-drawer-btn:hover { background: rgba(0,67,251,0.10); color: #0043FB; }
body.light-mode .lead-wa-backdrop { background: rgba(20, 30, 60, 0.18); }

/* Clickable WhatsApp badge in the leads table */
.lead-wa-badge { cursor: pointer; transition: transform 0.15s ease, color 0.15s ease; }
.lead-wa-badge:hover { transform: scale(1.15); }

/* Mobile keeps the full-screen WhatsApp tab — the drawer never shows */
@media (max-width: 900px) {
    .lead-wa-drawer, .lead-wa-backdrop { display: none !important; }
}

/* ============================================================
   WEBSITE TAB — traffic + search console
   Reuses the analytics card system (.an-*); only the pieces that
   have no analytics equivalent are defined here.
   ============================================================ */
.web-subtabs { display: flex; gap: 6px; margin: 4px 0 18px; }
.web-subtab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 10px;
    background: transparent; border: 1px solid transparent; font-family: inherit;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.web-subtab i { font-size: 16px; }
body.light-mode .web-subtab { color: rgba(60,60,67,0.6); }
body.light-mode .web-subtab:hover { color: #000; background: rgba(120,120,128,0.08); }
body.light-mode .web-subtab.active {
    background: linear-gradient(90deg, #AEC2F9 0%, #D3E5FD 100%);
    color: #2E60EA;
}

/* Setup / connect states */
.web-setup {
    max-width: 620px; margin: 40px auto; text-align: center;
    padding: 36px 28px; border-radius: 18px;
}
body.light-mode .web-setup { background: #fff; border: 1px solid rgba(60,60,67,0.1); }
.web-setup-icon {
    width: 56px; height: 56px; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px; font-size: 26px; color: #fff;
    background: linear-gradient(135deg, #0043FB 0%, #3425FB 100%);
}
.web-setup-title { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.web-setup-desc { margin: 0 0 22px; font-size: 13px; line-height: 1.65; }
body.light-mode .web-setup-desc { color: rgba(60,60,67,0.7); }
.web-setup-hint { margin: 16px 0 0; font-size: 12px; }
body.light-mode .web-setup-hint { color: rgba(60,60,67,0.5); }

.web-snippet-row { display: flex; gap: 8px; align-items: stretch; text-align: left; }
.web-snippet {
    flex: 1; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; line-height: 1.5;
    overflow-x: auto; white-space: nowrap;
}
body.light-mode .web-snippet { background: #F1F3F9; border-color: rgba(60,60,67,0.12); color: #2E60EA; }
.web-copy-btn, .web-gsc-btn {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 12px 18px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #0043FB 0%, #3425FB 100%);
    color: #fff; font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: filter 0.15s ease;
}
.web-copy-btn:hover, .web-gsc-btn:hover { filter: brightness(1.12); }
.web-gsc-btn { margin: 0 auto; background: #fff; color: #1F2937; border: 1px solid rgba(60,60,67,0.18); }
.web-gsc-btn:hover { filter: none; background: #F1F3F9; }

.web-waiting {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
    font-size: 12px;
}
body.light-mode .web-waiting { color: rgba(60,60,67,0.55); }
.web-waiting-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #0043FB;
    animation: webPulse 1.8s ease-out infinite;
}
@keyframes webPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,67,251,0.55); }
    100% { box-shadow: 0 0 0 10px rgba(0,67,251,0); }
}

/* Tables */
.web-table-wrap { overflow-x: auto; }
.web-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.web-table th {
    text-align: left; padding: 6px 10px 10px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid rgba(255,255,255,0.07);
}
body.light-mode .web-table th { color: rgba(60,60,67,0.45); border-bottom-color: rgba(60,60,67,0.1); }
.web-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
body.light-mode .web-table td { border-bottom-color: rgba(60,60,67,0.06); }
.web-table tr:last-child td { border-bottom: none; }
.web-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.web-table-divider td {
    padding-top: 16px; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; border-bottom: none;
}
body.light-mode .web-table-divider td { color: rgba(60,60,67,0.45); }

/* Page cell: a proportional bar behind the label */
.web-page-cell { position: relative; max-width: 340px; }
.web-bar {
    position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: 5px; z-index: 0;
}
body.light-mode .web-bar { background: rgba(0,67,251,0.10); }
.web-page-label {
    position: relative; z-index: 1; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-left: 8px; font-weight: 500;
}
.web-page-title {
    position: relative; z-index: 1; display: block; padding-left: 8px;
    font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.light-mode .web-page-title { color: rgba(60,60,67,0.5); }

.web-empty { padding: 28px 10px; text-align: center; font-size: 12.5px; }
body.light-mode .web-empty { color: rgba(60,60,67,0.45); }

@media (max-width: 900px) {
    .web-snippet-row { flex-direction: column; }
    .web-copy-btn { justify-content: center; }
    .web-setup { margin: 20px 0; padding: 26px 18px; }
    .web-page-cell { max-width: 190px; }
}

/* AI (GEO) section extras */
.web-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.web-note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 16px; border-radius: 12px; margin-top: 4px;
    border: 1px solid rgba(160,90,246,0.18);
    font-size: 12px; line-height: 1.6;
}
.web-note i { font-size: 15px; color: #A05AF6; flex-shrink: 0; margin-top: 1px; }
body.light-mode .web-note { background: rgba(160,90,246,0.06); border-color: rgba(160,90,246,0.2); color: rgba(60,60,67,0.7); }

/* Text-valued KPI (e.g. an engine name) — shrink and clip instead of overflowing */
.an-kpi-value.web-kpi-text {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   NAV — "New" chip + locked-tab star
   ============================================================ */

/* Tiny premium chip beside a nav label. Deliberately small: it should
   read as a mark, not a badge competing with the label. */
.nav-new-chip {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #fff;
    background: linear-gradient(135deg, #0043FB 0%, #7301FC 100%);
    box-shadow: 0 1px 4px rgba(0,67,251,0.35);
}
/* On the active pill the chip sits on a pale blue ground — invert it so it
   stays legible without shouting. */
body.light-mode .nav-item.active .nav-new-chip,
body.light-mode .mobile-drawer-item.active .nav-new-chip {
    background: #fff;
    color: #2E60EA;
    box-shadow: none;
}
body.sidebar-collapsed .nav-new-chip { display: none; }

/* Locked-tab star — the logo gradient, not the clinic brand colour.
   Phosphor renders as a font glyph, so the gradient is clipped to the text. */
.nav-item .nav-pro-star,
.mobile-drawer-item .nav-pro-star,
body.light-mode .nav-item .nav-pro-star,
body.light-mode .mobile-drawer-item .nav-pro-star {
    background: linear-gradient(135deg, #0043FB 0%, #7301FC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0043FB;
    opacity: 0.9;
}
.nav-item:hover .nav-pro-star,
.mobile-drawer-item:hover .nav-pro-star,
body.light-mode .nav-item:hover .nav-pro-star,
body.light-mode .mobile-drawer-item:hover .nav-pro-star {
    opacity: 1;
    transform: scale(1.12);
}

/* Managed-site status row + the manual fallback disclosure */
.web-status {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid rgba(0,67,251,0.16);
    font-size: 12.5px; font-weight: 600;
}
body.light-mode .web-status { color: #2E60EA; background: rgba(0,67,251,0.06); }
.web-status-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #0043FB;
    animation: webPulse 1.8s ease-out infinite;
}

.web-manual { margin-top: 26px; text-align: left; }
.web-manual-summary {
    display: flex; align-items: center; gap: 7px;
    cursor: pointer; list-style: none;
    font-size: 12px; font-weight: 600;
    padding: 8px 0;
    transition: color 0.15s ease;
}
.web-manual-summary::-webkit-details-marker { display: none; }
body.light-mode .web-manual-summary { color: rgba(60,60,67,0.5); }
body.light-mode .web-manual-summary:hover { color: rgba(60,60,67,0.8); }
.web-manual-summary i { font-size: 13px; transition: transform 0.18s ease; }
.web-manual[open] .web-manual-summary i { transform: rotate(90deg); }
.web-manual-body { padding-top: 6px; }
.web-manual-desc { margin: 0 0 12px; font-size: 12px; line-height: 1.6; }
body.light-mode .web-manual-desc { color: rgba(60,60,67,0.6); }
.web-manual .web-setup-hint { text-align: left; }

/* ============================================================
   SETTINGS — chips and action buttons on the one glass blue.
   Deliberately excluded: the green connected dot and the red Log Out
   button. Those two carry meaning (state, and destructive action)
   rather than decoration.
   ============================================================ */
.btn-glass-action,
body.light-mode .btn-glass-action {
    background: linear-gradient(135deg, rgba(0,67,251,0.13) 0%, rgba(52,37,251,0.07) 100%) !important;
    border: 1px solid rgba(0,67,251,0.16) !important;
    color: #A9BEFF !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: none !important;
}
.btn-glass-action:hover,
body.light-mode .btn-glass-action:hover {
    background: linear-gradient(135deg, rgba(0,67,251,0.20) 0%, rgba(52,37,251,0.11) 100%) !important;
    box-shadow: none !important;
}
body.light-mode .btn-glass-action { color: #2E60EA !important; }

/* Version chip — was green, now the same glass */
body.light-mode .ps-badge { color: #2E60EA; }

/* ============================================================
   LOCKED-TAB CARD — offer variant (bulleted, wider)
   Used when TAB_INFO supplies bullets, e.g. SEO & GEO, where the
   tab is the reporting half of a service that has to be explained
   before anyone requests it.
   ============================================================ */
.tlo-card-wide { max-width: 520px; }

.tlo-bullets {
    list-style: none;
    margin: 22px 0 6px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    width: 100%;
}
.tlo-bullet { display: flex; align-items: flex-start; gap: 12px; }
.tlo-bullet-icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    font-size: 15px; color: #fff;
    background: linear-gradient(135deg, #0043FB 0%, #3425FB 100%);
}
.tlo-bullet-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tlo-bullet-text strong { font-size: 13px; font-weight: 700; }
.tlo-bullet-text span { font-size: 12px; line-height: 1.55; }
body.light-mode .tlo-bullet-text strong { color: #0a0a0a; }
body.light-mode .tlo-bullet-text span { color: rgba(60,60,67,0.65); }

.tlo-note {
    margin-top: 14px;
    font-size: 11.5px;
    line-height: 1.55;
    max-width: 400px;
}
body.light-mode .tlo-note { color: rgba(60,60,67,0.5); }

@media (max-width: 600px) {
    .tlo-card-wide { max-width: 92vw; }
    .tlo-bullet-icon { width: 26px; height: 26px; font-size: 13px; }
}



/* ============================================================
   Custom nav icons, drawn as CSS masks.
   The Phosphor glyphs inherit `color`, so they grey out, go blue
   when active and turn white in dark mode for free. An <img>
   cannot do that. Masking the artwork and filling it with
   currentColor buys the same behaviour from a PNG, in every
   state, without a single per-state rule.
   ============================================================ */
.icon-mask {
    display: block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

/* One line per icon; everything else is shared. */
.icon-seogeo    { --icon: url("assets/icon-seogeo.png"); }
.icon-showcase  { --icon: url("assets/icon-showcase.png"); }
.icon-ai        { --icon: url("assets/icon-ai.png"); }
.icon-whatsapp  { --icon: url("assets/icon-whatsapp.png"); }
.icon-analytics { --icon: url("assets/icon-analytics.png"); }

/* Sizes match the Phosphor glyphs they replace */
.nav-icon-mask    { width: 20px; height: 20px; }
.title-icon-mask  { width: 16px; height: 16px; }
.tlo-feature-mask { width: 30px; height: 30px; }

body.sidebar-collapsed .nav-icon-mask { margin: 0 auto; }

/* The locked card tints its glyph explicitly; match it. */
.tlo-feature-icon .tlo-feature-mask { background-color: #3369FF; }

/* --- Brand voice stays Montserrat -----------------------------------------
   The wordmark is a logo, not interface text: it should not shift when the
   UI face changes. */
.sidebar-logo-text,
.logo-area,
.login-logo { font-family: var(--font-brand); }

/* ============================================================
   PATIENTS — PAGINATION BAR
   Seven items, mirroring the Supabase table footer:
   prev · "Page" · page input · "of N" · next · rows-per-page · record count.
   Sits on the same surface as the table and is closed by the same hairline
   weight, so the list reads as one continuous panel.
   ============================================================ */
.leads-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 22px;
    font-size: 12px;
    user-select: none;
}
.pag-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0;
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control-inner);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pag-arrow i { font-size: 14px; line-height: 1; }
.pag-arrow:hover:not(:disabled) {
    background: var(--control-bg-hover);
    border-color: var(--control-border-hover);
}
/* Disabled has to read as "you are at the end", not as a broken button. */
.pag-arrow:disabled { opacity: 0.35; cursor: default; }

.pag-label { white-space: nowrap; }

.pag-input {
    width: 46px; height: 28px;
    padding: 0 6px;
    text-align: center;
    border-radius: var(--radius-control-inner);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pag-select-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 6px; }
.pag-select {
    height: 28px;
    padding: 0 26px 0 10px;
    border-radius: var(--radius-control-inner);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none; appearance: none;
}
.pag-select:hover { background: var(--control-bg-hover); border-color: var(--control-border-hover); }
.pag-select-caret {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    font-size: 11px; pointer-events: none;
}

/* Pushed to the far edge — it is a readout, not a control. */
.pag-records { margin-left: auto; white-space: nowrap; }

/* --- Light mode --- */
body.light-mode .leads-pagination {
    background: #FFFFFF;
    border-top: 1px solid rgba(60, 60, 67, 0.08);
    color: rgba(60, 60, 67, 0.7);
}
body.light-mode .pag-arrow { color: rgba(60, 60, 67, 0.8); }
body.light-mode .pag-arrow:hover:not(:disabled) { color: #000; }
/* Beats the older .pag-input block further up the file, which still paints a grey fill. */
body.light-mode .pag-input,
body.light-mode .pag-select {
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    color: #000;
}
body.light-mode .pag-input:focus { border-color: var(--control-border-hover); }
body.light-mode .pag-select-caret { color: rgba(60, 60, 67, 0.45); }
body.light-mode .pag-records { color: rgba(60, 60, 67, 0.5); }

/* --- Mobile: the bar still has to work, so the record readout drops first
       (it is the only item that is purely informational) and the rest stays. --- */
@media (max-width: 900px) {
    .leads-pagination { padding: 8px 15px; gap: 6px; font-size: 11px; }
    .pag-records { display: none; }
    .pag-select-wrap { margin-left: auto; }
}

/* --- Created column ------------------------------------------------------
   Date leads, time follows in a lighter tone: the day is what gets scanned,
   the minute only matters once you have found the row. --- */
.created-cell { display: flex; align-items: baseline; gap: 6px; line-height: normal; }
.created-date { color: inherit; }
.created-time { font-size: 12px; font-variant-numeric: tabular-nums; }
body.light-mode .created-time { color: rgba(60, 60, 67, 0.45); }

/* Non-selectable rows in a column filter dropdown (loading / empty states). */
.sfd-option--muted { opacity: 0.5; cursor: default; pointer-events: none; }

/* --- New-inquiry counter on the Patients nav row -------------------------
   Hidden until there is something to report: a badge showing 0 is noise. --- */
.nav-count-badge {
    display: none;
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 5px;    /* matches .nav-new-chip */
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    color: #fff;
}
.nav-count-badge.visible { display: inline-block; }
body.light-mode .nav-count-badge { background: #dc2626; }   /* deeper red holds up on white */
/* Collapsed rail has no room for it, same as the NEW chip. */
body.sidebar-collapsed .nav-count-badge { display: none; }

/* ============================================================
   LEAD PROFILE — SLIDE-OVER PANEL
   Was a full view swap that replaced the Patients table. As a panel the list
   stays mounted behind it: closing returns you to the same scroll position and
   the same page, with no refetch.
   ============================================================ */
#lead-panel-backdrop {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 55;
}
body.lead-panel-open #lead-panel-backdrop { opacity: 1; visibility: visible; }

.lead-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(820px, 88%);
    display: flex; flex-direction: column;
    overflow-y: auto;
    z-index: 60;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.28s;
}
body.lead-panel-open .lead-panel { transform: translateX(0); visibility: visible; }

/* The panel is its own scroll container, so the sticky header sticks to the
   panel rather than to the page behind it. */
.lead-panel .profile-view-header { border-radius: 0; }
/* 40px gutters made sense at full width; inside an 820px panel they crowd. */
.lead-panel .lead-profile-container { padding: 28px 30px 40px; }

body.light-mode .lead-panel {
    background: #FFFFFF;
    border-left: 1px solid rgba(60, 60, 67, 0.1);
    box-shadow: -24px 0 60px rgba(60, 40, 15, 0.10);
}
body.light-mode #lead-panel-backdrop { background: rgba(60, 60, 67, 0.18); }

/* Motion-sensitive users get the panel without the slide. */
@media (prefers-reduced-motion: reduce) {
    .lead-panel { transition: visibility 0.01s; }
}

/* Phones: full width, no backdrop gap to aim at. */
@media (max-width: 900px) {
    .lead-panel { width: 100%; border-left: 0; }
    .lead-panel .lead-profile-container { padding: 20px 16px 32px; }
    /* At full width the panel is a screen, not a drawer, so it has to own the
       top of the viewport. Under .mobile-top-bar (z-index 1001) the fixed bar
       painted straight over the sticky header, burying the back arrow — which,
       with no reachable backdrop and no Escape key, was the only way out. */
    .lead-panel { z-index: 1002; }
    /* Clear of the notch, now that nothing sits above the panel to do it. */
    .lead-panel .profile-view-header { padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: 16px; }
    /* A 36px target is fine under a mouse; a thumb wants 44. */
    .lead-panel .btn-back-profile { width: 44px; height: 44px; font-size: 18px; }
}

/* --- While the lead panel is open ----------------------------------------
   The Filter button carries z-index 1000 so its dropdown can escape the table.
   That also floated it above the backdrop, leaving one bright control in an
   otherwise dimmed toolbar. Drop it back into the stack while the panel is up. */
body.lead-panel-open #filter-btn-container { z-index: auto; }

/* The row whose profile is open. Two independent signals, deliberately:
   
   1. A brand tint and a heavy left accent. This reads as "selected" even when
      the row is dimmed along with everything else — it does not depend on
      stacking working at all.
   2. A lift above the backdrop (55, below the panel at 60) so the row also
      stays bright where the browser allows it.
   
   The lift is applied to the CELLS, not the row. WebKit does not reliably
   honour position/z-index on a <tr>, and this dashboard is used in Safari, so
   a tr-level lift silently did nothing there. Cells stack correctly. */
.leads-table tbody tr.lead-row-active td {
    position: relative;
    z-index: 56;
}
.leads-table tbody tr.lead-row-active td:first-child {
    box-shadow: inset 4px 0 0 #3369FF;
}
body.light-mode .leads-table tbody tr.lead-row-active td {
    background: #DCE7FF;
    border-bottom-color: rgba(51, 105, 255, 0.28);
}
body.light-mode .leads-table tbody tr.lead-row-active .lead-name-text { color: #000; font-weight: 700; }

/* Hover must not wash the selected state back out. */
.leads-table tbody tr.lead-row-active:hover td,
body.light-mode .leads-table tbody tr.lead-row-active:hover td {
    background: rgba(51, 105, 255, 0.26);
}
body.light-mode .leads-table tbody tr.lead-row-active:hover td { background: #CFDEFF; }

/* ============================================================
   MOBILE — PATIENTS LIST
   Brought in line with the desktop table: flat full-bleed rows separated by
   hairlines, not floating cards. Card chrome (radius, border, shadow, gaps)
   made every patient look like its own object with the list reading as a
   scattered pile; on a phone that costs vertical space too.
   ============================================================ */
@media (max-width: 900px) {
    /* Rules run edge to edge; the gutter moves onto the row's own padding. */
    .leads-view-wrapper { padding: 0; }
    .leads-toolbar { padding: 10px 15px; }

    .mobile-leads-list { gap: 0; padding: 0 0 8px; }

    .mobile-lead-card {
        contain-intrinsic-size: 0 62px;
        border-radius: 0;
        padding: 11px 15px;
        min-height: 60px;
    }
    .mobile-lead-card:active { border-color: #1a1a1a; }

    body.light-mode .mobile-lead-card {
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(60, 60, 67, 0.08);
        box-shadow: none;
    }
    body.light-mode .mobile-lead-card:active { background: rgba(120, 120, 128, 0.06); }

    /* The row whose profile is open, same signal as the desktop table. */
    .mobile-lead-card.lead-row-active {
        box-shadow: inset 4px 0 0 #3369FF;
    }
    body.light-mode .mobile-lead-card.lead-row-active { background: #DCE7FF; }

    /* --- Toolbar: three full-width rows instead of ragged left-aligned bits.
       Refresh and Filter share row one evenly, search takes row two, the metric
       strip row three. Nothing is left floating against empty space. --- */
    #leads-refresh-pill {
        order: 1; flex: 1 1 0; min-width: 0;
        height: 38px; padding: 0 10px;
        justify-content: center;
    }
    #leads-refresh-pill span {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .filter-btn-container { order: 2; flex: 1 1 0; min-width: 0; }
    .filter-trigger-btn {
        width: 100%; height: 38px; min-width: 0;
        justify-content: center; padding: 0 10px;
    }
    #leads-search-box { order: 3; flex: 1 1 100%; width: 100%; min-width: 0; }
    .glass-search-input { height: 38px !important; line-height: 38px !important; }

    /* The metric strip lives in .leads-toolbar-right, a separate flex child of
       the toolbar — so `order` on the strip itself does nothing. The wrapper is
       what has to become a full-width row. */
    .leads-toolbar-right { flex: 1 1 100%; width: 100%; min-width: 0; }
    #metrics-strip { width: 100%; box-sizing: border-box; }
}

/* --- RDV picker: the Fermer button only dismisses, so it should not wear the
   primary blue that the filter picker's Apply button uses for a real confirm.
   Scoped to this modal so Apply keeps its blue. --- */
#row-date-picker-modal .dp-confirm-btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#row-date-picker-modal .dp-confirm-btn:hover {
    transform: none;
}
body.light-mode #row-date-picker-modal .dp-confirm-btn {
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    color: #000;
    box-shadow: none;
}
body.light-mode #row-date-picker-modal .dp-confirm-btn:hover {
    background: var(--control-bg-hover);
    border-color: var(--control-border-hover);
}

/* ============================================================
   OUTCOME QUEUE — appointments that already happened with no
   recorded outcome. Sits above the leads table.

   Reads as a work surface, not an alert: a hairline-bounded panel
   on the page ground, same grammar as the toolbar chips. It is a
   list of questions somebody can answer in a minute, and dressing
   it in red would make a normal Tuesday look like a crisis.
   ============================================================ */
/* Floating, bottom-right, deliberately small. It is a nudge that follows you
   across tabs, so it has to earn its space: one question, two answers, gone.
   A full-width panel at the top of a page was easy to scroll past; something
   that sits in the corner of every screen is not. */
.outcome-queue {
    position: fixed;
    right: 20px; bottom: 20px;
    width: 320px; max-width: calc(100vw - 32px);
    z-index: 900;                     /* under modals (9999999), over content */
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 34px rgba(33, 37, 49, .13), 0 2px 6px rgba(33, 37, 49, .06);
    overflow: hidden;
    animation: oq-rise .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes oq-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.oq-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 10px 9px 13px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--blue-wash);
}
.oq-title {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 700; color: var(--text-strong);
    min-width: 0;
}
.oq-title > span:not(.oq-count) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oq-title i { font-size: 14px; color: var(--blue); flex: 0 0 auto; }
.oq-count {
    flex: 0 0 auto;
    min-width: 18px; padding: 1px 6px;
    border-radius: 999px;
    background: var(--blue); color: #fff;
    font-size: 10.5px; font-weight: 700; text-align: center;
}
.oq-close {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border: none; border-radius: 7px; background: none;
    color: var(--text-muted); font-size: 14px; cursor: pointer;
}
.oq-close:hover { background: rgba(33,37,49,.07); color: var(--text-body); }

.oq-card { padding: 15px 14px 12px; text-align: center; }
.oq-card-name {
    font-size: 14.5px; font-weight: 700; color: var(--text-strong); line-height: 1.25;
}
.oq-card-what { margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }
.oq-card-when {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 7px; font-size: 11px; color: var(--text-muted);
}
.oq-card-when i { font-size: 12px; }

.oq-card-actions { display: flex; gap: 8px; margin-top: 13px; }
.oq-big {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 10px;
    border-radius: var(--radius-control-inner);
    border: 1px solid var(--border);
    background: #fff;
    font-family: var(--font-ui);
    font-size: 12.5px; font-weight: 600; color: var(--text-body);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.oq-big i { font-size: 14px; }
.oq-yes:hover { border-color: #22c55e; color: #15803d; background: #F0FDF4; }
.oq-no:hover  { border-color: #ef4444; color: #b91c1c; background: #FEF2F2; }

.oq-skip {
    margin-top: 9px; padding: 4px 8px;
    border: none; background: none;
    font-family: var(--font-ui); font-size: 11px; color: var(--text-muted);
    cursor: pointer;
}
.oq-skip:hover { color: var(--text-body); text-decoration: underline; }

@media (max-width: 700px) {
    /* Above the mobile nav, and full width minus the gutters. */
    .outcome-queue { left: 12px; right: 12px; bottom: 12px; width: auto; }
    /* The two buttons stay side by side even on the narrowest phone: they are
       a binary choice, and stacking them would imply an order of preference. */
    .oq-big { padding: 11px 8px; }
}

/* ── deal outcome modal ─────────────────────────────────────── */
.do-who {
    font-size: 12.5px; color: var(--text-muted);
    margin-bottom: 16px; text-align: center;
}
.do-amount-row { margin-bottom: 14px; text-align: left; }
.do-amount-row label {
    display: block; margin-bottom: 5px;
    font-size: 11.5px; font-weight: 600; color: var(--text-muted);
}
.do-amount-input {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control-inner);
    padding: 0 11px; background: #fff;
}
.do-amount-input input {
    flex: 1 1 auto; min-width: 0;
    border: none; outline: none; background: none;
    padding: 9px 0;
    font-family: var(--font-ui); font-size: 14px; font-weight: 600;
    color: var(--text-strong);
}
.do-amount-input span {
    flex: 0 0 auto;
    font-size: 11.5px; font-weight: 700; color: var(--text-muted);
}

.do-choice {
    display: flex; align-items: center; gap: 9px;
    width: 100%; margin-bottom: 7px; padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control-inner);
    background: #fff;
    font-family: var(--font-ui);
    font-size: 13px; font-weight: 600; color: var(--text-body);
    cursor: pointer; text-align: left;
    transition: background .12s, border-color .12s, color .12s;
}
.do-choice i { font-size: 17px; }
.do-won i { color: #22c55e; }
.do-won:hover { border-color: #22c55e; background: #F0FDF4; color: #15803d; }
.do-thinking i { color: #f59e0b; }
.do-thinking:hover { border-color: #f59e0b; background: #FFFBEB; color: #b45309; }
.do-lost-trigger i { color: #ef4444; }
.do-lost-trigger:hover { border-color: #ef4444; background: #FEF2F2; color: #b91c1c; }

.do-reason {
    width: 100%; margin: 8px 0 7px; padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control-inner);
    background: #fff;
    font-family: var(--font-ui); font-size: 13px; color: var(--text-body);
}
.do-lost-confirm { justify-content: center; border-color: #ef4444; color: #b91c1c; }
.do-lost-confirm:hover { background: #FEF2F2; }

.do-cancel {
    width: 100%; margin-top: 6px; padding: 8px;
    border: none; background: none;
    font-family: var(--font-ui); font-size: 12px; color: var(--text-muted);
    cursor: pointer;
}
.do-cancel:hover { color: var(--text-body); }

/* ============================================================
   DEALS LIST — the money already in flight. Summary first,
   because the tab exists to make a number visible that has
   never been visible anywhere.
   ============================================================ */
.deals-name  { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.deals-phone { font-size: 11.5px; color: var(--text-muted); }
.deals-interest, .deals-touched { font-size: 12.5px; color: var(--text-muted); }
.deals-amount { font-size: 13px; font-weight: 600; color: var(--text-strong); }

/* Stage reads as a label with its colour carried on the left edge, not as a
   filled pill. Filled badges in a dense table turn every row into a stripe. */
.deals-stage {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--text-body);
}
.deals-stage::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--stage-color, #888); flex: 0 0 auto;
}

.deals-overdue { color: #b91c1c; font-weight: 600; }
.deals-nodate  { color: var(--text-muted); }
/* A voided deal never should have existed, so it is shown struck through
   rather than removed: hiding it makes the count jump for no visible reason. */
.deals-row-void { opacity: .55; }
.deals-row-void .deals-name { text-decoration: line-through; }

.deals-empty {
    padding: 28px 16px;
    text-align: center;
    font-size: 13px; color: var(--text-muted);
}

@media (max-width: 700px) {
    .ds-cell { flex: 1 1 100%; }
    .deals-toolbar { flex-direction: column; align-items: stretch; }
}

/* The deals stage chip is the only neutral one. Lead statuses keep the colours
   they always had: that column is the thing an agent scans, and the colour is
   how they scan it. The deals table already carries its meaning in the column
   itself, so a second colour system there was noise. */
.crm-badge.badge-neutral {
    background: #fff;
    color: var(--text-body);
    border: 1px solid transparent;
    box-shadow: none;
    transition: border-color .12s, background .12s;
}
.crm-badge.badge-neutral:hover { background: #fff; border-color: var(--border); }

.deals-stage::before { display: none; }
.deals-stage { color: var(--text-body); }


/* ── header tools: search and sort beside the page title ─────── */
.top-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ht-group { display: flex; align-items: center; gap: 8px; }
/* [hidden] is an attribute selector, same specificity as the class above and
   declared earlier, so without this the class wins and every view's tools show
   at once. */
.ht-group[hidden] { display: none; }

/* Small on purpose. These are things you reach for occasionally; the table is
   what the screen is for, and full-size controls at the top competed with it. */
.header-tools .glass-search-wrapper { width: 210px; }
.header-tools .glass-search-input { font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; }



/* The existing filter trigger, brought down to the same weight. */
.filter-trigger-btn { font-size: 12px; padding: 6px 10px; }
.filter-trigger-btn i { font-size: 13px; }

@media (max-width: 700px) {
    .header-tools .glass-search-wrapper { width: 140px; }
}



/* ── sort / filter menus ─────────────────────────────────────── */
.sort-btn-container { position: relative; }
.sort-menu {
    display: none;
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 190px; padding: 5px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(33,37,49,.12), 0 2px 6px rgba(33,37,49,.06);
    z-index: 1200;
}
.sort-menu.open { display: block; }
/* Moved to <body> on open, so no ancestor's stacking context can put the
   table header above it. */
.sort-menu-floating { position: fixed; top: 0; left: 0; z-index: 999999; }
.sort-menu-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 9px;
    border: none; border-radius: 8px; background: none;
    font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
    color: var(--text-body); text-align: left; cursor: pointer;
}
.sort-menu-item:hover { background: var(--bg-alt); }
/* The tick is always in the layout so choosing does not shift the text
   sideways; only its colour changes. */
.sort-menu-item i { font-size: 13px; color: transparent; flex: 0 0 auto; }
.sort-menu-item.active i { color: var(--blue); }
.sort-menu-item.active { color: var(--text-strong); }
.sort-menu-item span:first-of-type { flex: 1 1 auto; }
.sort-menu-n { font-size: 11px; font-weight: 700; color: var(--text-muted); }

/* The convert entry sits apart: it is the only option that does not just set a
   field, it creates a deal and moves the person to another tab. */
.status-option-convert {
    border-top: 1px solid var(--border-soft);
    margin-top: 4px; padding-top: 9px;
    font-weight: 700;
}
.status-option-icon { font-size: 14px; margin-right: 6px; vertical-align: -2px; }

/* Sort menu direction arrow, pushed to the right edge of its row. */
.sort-menu-dir { font-size: 12px; color: var(--blue); flex: 0 0 auto; }

/* Interest reads as plain text, not a pill. A pill is a control or a state;
   this is neither, and a column of grey capsules made the eye stop on every
   row for a word that is the same on almost all of them. */
.treatment-text { font-size: 12.5px; color: var(--text-body); }

/* Status and stage chips: white, borderless at rest, outlined on hover so the
   affordance appears only when the pointer is there. */

/* ── header: settings icon + account avatar ──────────────────── */
.ht-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid transparent; border-radius: var(--radius-control-inner);
    background: none; color: var(--text-muted);
    font-size: 17px; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.ht-icon-btn:hover { background: var(--bg-alt); border-color: var(--border); color: var(--text-body); }
.ht-icon-btn.active { color: var(--blue); }

.ht-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 auto;
    border: none; border-radius: 50%;
    background: var(--text-strong); color: #fff;
    font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
    cursor: pointer;
}
.ht-avatar:hover { opacity: .88; }

/* ============================================================
   SIDEBAR — light ground, solid pill for the active tab.
   The old treatment was a gradient slider that animated between
   items; a filled navy row states where you are without moving.
   ============================================================ */
:root {
    --sidebar-bg:     #16233E;
    --sidebar-active: #2A3F66;
}
.sidebar, body.light-mode .sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--border-soft);
}

/* The animated highlight is retired: it cannot be a solid pill and a moving
   gradient at the same time, and the pill is what was asked for. */
#nav-slider, body.light-mode #nav-slider { display: none !important; }

.sidebar .nav-item {
    border-radius: 10px;
    transition: background .12s, color .12s;
}
.sidebar .nav-item:hover { background: rgba(27, 59, 111, .07); }
.sidebar .nav-item.active,
body.light-mode .sidebar .nav-item.active {
    background: var(--sidebar-active) !important;
    color: #fff !important;
}
.sidebar .nav-item.active i,
.sidebar .nav-item.active span,
body.light-mode .sidebar .nav-item.active i,
body.light-mode .sidebar .nav-item.active span { color: #fff !important; }
/* Masked icons paint with background-color, so they need the fill switched
   rather than the text colour. */
.sidebar .nav-item.active .icon-mask { background-color: #fff !important; }

/* ── collapse control, beside the logo ───────────────────────── */
.logo-area { display: flex; align-items: center; gap: 9px; }
.sidebar-collapse-btn {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: none; border-radius: 8px; background: none;
    color: var(--text-muted); font-size: 17px; cursor: pointer;
    transition: background .12s, color .12s;
}
.sidebar-collapse-btn:hover { background: rgba(27, 59, 111, .09); color: var(--text-strong); }

/* Collapsed: the logo is all that shows, and hovering the sidebar swaps it for
   the control that reopens it -- the mark becomes the button exactly when a
   pointer is there to use it. */
body.sidebar-collapsed .sidebar .sidebar-collapse-btn { display: none; }
body.sidebar-collapsed .sidebar:hover .sidebar-logo-star { display: none; }
body.sidebar-collapsed .sidebar:hover .sidebar-collapse-btn {
    display: inline-flex; margin-left: 0;
}

/* The clicked row is what stays marked, not the last button pressed. Buttons
   keep a focus ring for keyboard users only -- :focus-visible never fires on a
   mouse click, which is what made Filter look selected while a row was open. */
tr.row-selected,
tr.row-selected:hover { background: var(--blue-wash) !important; }
tr.row-selected td:first-child { box-shadow: inset 3px 0 0 var(--blue); }

.filter-trigger-btn:focus:not(:focus-visible),
.sidebar-collapse-btn:focus:not(:focus-visible),
.ht-icon-btn:focus:not(:focus-visible),
.pag-arrow:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Profile status and stage read as controls: quiet until hovered, same as the
   chips in the tables. */
.lp-pick {
    display: inline-block; margin: 0 8px 0 0; padding: 3px 9px;
    border: 1px solid transparent; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; transition: border-color .12s, background .12s;
}
.lp-pick:hover { border-color: var(--border); background: var(--bg-alt); }
.lp-pick-stage { color: var(--blue); }

.lp-edit-hint { margin-left: 7px; font-size: 12px; color: transparent; transition: color .12s; }
.info-card:hover .lp-edit-hint { color: var(--text-muted); }
.lp-inline-input {
    width: 100%; padding: 3px 6px;
    border: 1px solid var(--blue); border-radius: 6px;
    font-family: var(--font-ui); font-size: 13px; color: var(--text-strong);
    outline: none; background: #fff;
}


/* The rail and the content have to differ or neither reads as a surface. The
   sidebar takes the cool tint and the content behind the tables goes white --
   the same relationship the reference has, which I had inverted twice: first
   with both near-grey, then with both white. */
.main-content, body.light-mode .main-content { background: #FFFFFF; }
.top-header, body.light-mode .top-header { background: #FFFFFF; }

/* ============================================================
   SIDEBAR — dark navy rail against white content.
   Everything inside it has to be re-coloured: the shell was
   built for a light rail, so text, icons, badges and the logo
   all inherit dark values that vanish on this ground.
   ============================================================ */
.sidebar, body.light-mode .sidebar {
    background: var(--sidebar-bg) !important;
    border-right: none !important;
}

/* Logo: the wordmark is near-black by default and disappears here. */
.sidebar-logo-text, body.light-mode .sidebar-logo-text { color: #FFFFFF !important; }

.sidebar .nav-item,
body.light-mode .sidebar .nav-item {
    color: rgba(255, 255, 255, .74) !important;
    border-radius: 10px;
}
.sidebar .nav-item i,
body.light-mode .sidebar .nav-item i { color: rgba(255, 255, 255, .74) !important; }
/* Masked icons paint with background-color, not colour, so they need the fill
   switched or they stay dark on dark and read as missing. */
.sidebar .nav-item .icon-mask,
body.light-mode .sidebar .nav-item .icon-mask { background-color: rgba(255,255,255,.74) !important; }

.sidebar .nav-item:hover,
body.light-mode .sidebar .nav-item:hover { background: rgba(255, 255, 255, .07) !important; }

.sidebar .nav-item.active,
body.light-mode .sidebar .nav-item.active {
    background: var(--sidebar-active) !important;
    color: #FFFFFF !important;
}
.sidebar .nav-item.active i,
.sidebar .nav-item.active span,
body.light-mode .sidebar .nav-item.active i,
body.light-mode .sidebar .nav-item.active span { color: #FFFFFF !important; }
.sidebar .nav-item.active .icon-mask,
body.light-mode .sidebar .nav-item.active .icon-mask { background-color: #FFFFFF !important; }

.sidebar-collapse-btn, body.light-mode .sidebar-collapse-btn { color: rgba(255,255,255,.6) !important; }
.sidebar-collapse-btn:hover, body.light-mode .sidebar-collapse-btn:hover {
    background: rgba(255,255,255,.10) !important; color: #FFFFFF !important;
}

/* Badges sat on a light rail and are unreadable on navy. */
.sidebar .nav-new-chip { background: rgba(255,255,255,.16) !important; color: #FFFFFF !important; }
.sidebar .nav-count-badge, .sidebar .sms-nav-badge, .sidebar .gmail-nav-badge {
    background: #3369FF !important; color: #FFFFFF !important;
}
.sidebar .nav-item .ph-star, .sidebar .nav-star { color: rgba(255,255,255,.45) !important; }

/* Header row inside the status popover, for the reason sub-lists. */
.status-option-head {
    padding: 7px 12px 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--text-muted);
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 4px;
}

/* ── nav sections ────────────────────────────────────────────── */
.nav-section {
    display: flex; align-items: center; gap: 9px;
    margin: 14px 0 4px; padding: 6px 12px;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: rgba(255,255,255,.46);
    cursor: pointer; user-select: none;
    list-style: none;
}
.nav-section:first-child { margin-top: 4px; }
.nav-section:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); }
/* The section headers carry the brand blue, so Sales and Tools read as
   structure rather than two more greyed-out rows. #3369FF rather than the
   logo's #0043FB: on this sidebar (#16233E) the logo blue lands at 2.38:1,
   which is under the 3:1 a 14px glyph needs to stay legible. This one is the
   same blue the badges and buttons already use and measures 3.43:1. */
.nav-section-icon { font-size: 14px; color: #3369FF; }
.nav-section-caret { margin-left: auto; font-size: 12px; transition: transform .15s; }
.nav-section.closed .nav-section-caret { transform: rotate(180deg); }
/* Section items sit in from their header so the grouping reads without rules. */
.sidebar .nav-item[data-section] { margin-left: 8px; }

/* Collapsed rail: headers would be a row of stray words next to iconless rows. */
body.sidebar-collapsed .nav-section { display: none; }
body.sidebar-collapsed .sidebar .nav-item[data-section] { margin-left: 0; }

/* ── view toggle ─────────────────────────────────────────────── */
.view-toggle {
    display: inline-flex; padding: 2px;
    border: 1px solid var(--border); border-radius: var(--radius-control-inner);
    background: var(--bg-alt);
}
.view-toggle button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 26px;
    border: none; border-radius: 6px; background: none;
    color: var(--text-muted); font-size: 15px; cursor: pointer;
    transition: background .12s, color .12s;
}
.view-toggle button.active { background: #fff; color: var(--text-strong); box-shadow: 0 1px 2px rgba(33,37,49,.10); }

/* ── kanban ──────────────────────────────────────────────────── */
/* [hidden] is an attribute selector and loses to the class below, which is
   why switching back to the list left the board stacked underneath it. Same
   trap as .ht-group. */
.kanban { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kanban[hidden] { display: none !important; }

.kb-cols {
    display: flex; gap: 14px; align-items: flex-start;
    overflow-x: auto; overflow-y: hidden;
    /* Left gutter so the first column is not welded to the sidebar. */
    padding: 2px 2px 10px 14px; min-height: 0; flex: 1;
}
.kb-note { flex: 0 0 auto; margin-bottom: 8px; font-size: 11.5px; color: var(--text-muted); }

.kb-col {
    flex: 0 0 268px; max-height: 100%;
    display: flex; flex-direction: column;
    background: none; border: none;   /* the header is the card; the column is not */
}

/* The header is its own tile, detached from the stack below it. */
.kb-head {
    flex: 0 0 auto;
    margin-bottom: 12px; padding: 11px 14px 12px;
    border: 1px solid #A9DDD8; border-radius: 8px;
    background: #D8F1EF;
}
.kb-head-top { display: flex; align-items: center; gap: 8px; }
.kb-title { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.kb-n {
    min-width: 19px; padding: 1px 6px; border-radius: 999px;
    background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.07);
    font-size: 10.5px; font-weight: 700; color: var(--text-body); text-align: center;
}
.kb-pct { font-size: 12px; color: var(--text-muted); }
/* Always drawn, zero included: "this stage holds nothing" is a number worth
   reading, and a blank space does not say it. */
.kb-sum { margin-top: 5px; font-size: 16px; font-weight: 700; color: var(--text-strong); }

.kb-cards {
    flex: 1; min-height: 44px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    padding: 2px; border-radius: 8px;
}
.kb-col.kb-over .kb-cards { background: var(--blue-wash); outline: 1px dashed var(--blue-soft); }

.kb-card {
    padding: 12px 13px;
    border: 1px solid var(--border-soft); border-radius: 8px;
    background: #fff; cursor: pointer;
    box-shadow: 0 1px 2px rgba(33,37,49,.05);
    transition: border-color .12s, box-shadow .12s;
}
.kb-card:hover { border-color: var(--border); box-shadow: 0 3px 10px rgba(33,37,49,.09); }
.kb-card:active { cursor: grabbing; }
.kb-card-void { opacity: .55; }
.kb-card-void .kb-name { text-decoration: line-through; }

.kb-name { font-size: 13px; font-weight: 700; color: var(--text-strong); }
.kb-sub  { margin-top: 3px; font-size: 12px; color: var(--text-muted); }
/* Left-aligned like everything else on the card. space-between pushed the date
   to the far edge and made each row look like a different layout. */
.kb-meta {
    display: flex; align-items: center; gap: 10px;
    margin-top: 9px; font-size: 12px; color: var(--text-muted);
}
.kb-amount { font-weight: 500; color: var(--text-body); }

/* Won and lost carry their own colour: a green tile for the outcome you want
   and a red one for the other reads at a glance, where a row of identical mint
   headers makes the two ends of the pipeline look the same. */
.kb-head-won  { background: #E9F8EF; border-color: #A9DCBB; }
.kb-head-lost { background: #FDECEC; border-color: #F0B5B5; }

/* The converting column never holds anything -- booking creates a deal and the
   person leaves this board -- so it explains itself instead of counting. */
.kb-head-convert { background: var(--blue-wash); border-color: #B9CBF7; }
.kb-hint { margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--text-muted); }
.kb-col-convert .kb-cards { opacity: .9; }

.kb-meta-sub { margin-top: 4px; font-size: 11px; }

/* The Meta mark sits beside the stage in the table and after the name on a
   card. Scoped out of the mobile-only hide that applies to the leads table. */
#deals-table-body .meta-source-dot,
.kb-card .meta-source-dot { display: inline-block !important; margin-left: 6px; font-size: 13px; color: #0866FF; }

/* ── global search results ───────────────────────────────────── */
.gs-results {
    position: fixed; z-index: 1300;
    max-height: 380px; overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--border-soft); border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(33,37,49,.14), 0 2px 6px rgba(33,37,49,.06);
}
.gs-results[hidden] { display: none !important; }

/* The group header is the answer to "which tab is this person in", so it is
   stated plainly rather than implied by ordering. */
.gs-group {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 10px 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted);
}
.gs-group i { font-size: 13px; }
.gs-count {
    margin-left: auto; padding: 0 6px; border-radius: 999px;
    background: var(--bg-alt); font-size: 10.5px; font-weight: 700;
}

.gs-row {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 10px;
    border: none; border-radius: 8px; background: none;
    text-align: left; cursor: pointer;
}
.gs-row:hover { background: var(--bg-alt); }
.gs-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.gs-sub  { font-size: 12px; color: var(--text-muted); }
.gs-where {
    margin-left: auto; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--border-soft); background: var(--bg-alt);
    font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
}
.gs-where-deal { border-color: #B9CBF7; background: var(--blue-wash); color: var(--blue); }

.gs-empty { padding: 16px 12px; text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* Focused search takes more room -- you are reading results, not glancing at a
   control -- and the page behind the panel goes soft so the list reads as a
   layer rather than more page. */
.header-tools .glass-search-wrapper {
    transition: width .16s cubic-bezier(.2,.8,.2,1);
}
/* Two things had to give way. #leads-search-box sets its own width and an ID
   outranks any number of classes, so the rule is matched on the ID too. And
   the wrapper inherits flex-grow:1 with basis 100% from the search component,
   which means width is ignored entirely inside a flex row -- so the basis is
   what actually has to change. */
#leads-search-box, #deals-search-box {
    flex: 0 0 210px; width: 210px;
}
#leads-search-box:focus-within, #leads-search-box.gs-active,
#deals-search-box:focus-within, #deals-search-box.gs-active {
    flex-basis: 340px; width: 340px;
}

/* Only the page content goes soft. The first version blurred every child of
   main-content, and the results panel, the outcome queue and every modal live
   there too -- so the panel blurred itself. Targeting the view sections is
   precise and needs no list of exceptions. */
body.gs-open .view-section {
    filter: blur(2px) saturate(.9);
    transition: filter .16s;
    pointer-events: none;
}
body.gs-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(33,37,49,.10);
    z-index: 1200;
}

/* Interest is free text from an ad campaign -- "F3 — Résidence Les Oliviers"
   is a normal value, not an outlier. The cell keeps it on one line and clips
   with an ellipsis rather than spilling into the next column, carries the full
   string as a tooltip, and the table scrolls sideways when the sum of the
   columns needs more room than the window has. */
.treatment-text {
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.table-scroll-area { overflow-x: auto; }
.leads-table { min-width: 1080px; }

/* The convert button sits beside the status, and reads as the action it is. */
.lp-convert {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 4px; padding: 4px 11px;
    border: 1px solid var(--border); border-radius: 999px;
    background: #fff;
    font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
    color: var(--blue); cursor: pointer;
    transition: background .12s, border-color .12s;
}
.lp-convert:hover { background: var(--blue-wash); border-color: var(--blue-soft); }
.lp-convert[hidden] { display: none !important; }

/* Same treatment as the leads Interest column: one line, clipped, full value
   in the tooltip, rather than running under the next column. */
.deals-interest {
    max-width: 210px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The name on the notification opens that person. It is the one thing on the
   card you might want before answering -- what did we last say to them -- and
   it was the only piece of text there that looked clickable and was not. */
button.oq-card-name {
    display: block; width: 100%;
    border: none; background: none; padding: 0;
    font-family: var(--font-ui);
    font-size: 14.5px; font-weight: 700; color: var(--text-strong);
    line-height: 1.25; text-align: center; cursor: pointer;
}
button.oq-card-name:hover { color: var(--blue); text-decoration: underline; }

/* ── OWNER ──────────────────────────────────────────────────────────────────
   A name, not a badge. The table already carries colour for status — the one
   field where colour means something — and a second coloured pill beside it
   competed for the same attention without encoding anything. */
.owner-name {
    display: inline-block;
    margin-left: 6px;
    font-size: 12.5px;
    color: var(--text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    vertical-align: middle;
}

.cv-who-owner {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 6px;
}
.cv-who-owner .owner-name { margin-left: 0; }
.cv-who-touch { font-size: 12px; opacity: 0.6; }

/* An admin needs somewhere to click on a lead nobody owns yet, so it still
   renders — greyed, because it names an absence. */
.owner-name-none { color: var(--text-muted); cursor: pointer; font-style: italic; }
.owner-name-actionable { cursor: pointer; }
.owner-name-actionable:hover,
.owner-name-none:hover { text-decoration: underline; }

/* The rotation skips an unavailable agent; a human assigning by hand does not
   have to, so the option stays selectable and just says so. */
.owner-opt-off { font-size: 11px; opacity: 0.5; margin-left: 4px; }

.toast-action {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

/* ── AVAILABILITY TOGGLE ────────────────────────────────────────────────────
   Sits in the header because an agent needs to see his own state without
   going to look for it — the whole point is that he flips it on the way into
   a site visit. Green when taking leads, grey when not: the off state is a
   normal working choice, not an error, so it stays quiet rather than red. */
.avail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    margin-right: 8px;
    border-radius: 999px;
    border: 1px solid rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.10);
    color: #15803d;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.avail-toggle:hover { background: rgba(34,197,94,0.16); }
.avail-toggle:disabled { opacity: 0.6; cursor: default; }

.avail-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

.avail-toggle.avail-off {
    border-color: rgba(107,114,128,0.35);
    background: rgba(107,114,128,0.10);
    color: #4b5563;
}
.avail-toggle.avail-off:hover { background: rgba(107,114,128,0.16); }
.avail-toggle.avail-off .avail-dot { background: #9ca3af; }

/* The header is crowded on a phone; the dot alone still says which state. */
@media (max-width: 640px) {
    .avail-toggle { padding: 0 9px; }
    .avail-toggle #avail-label { display: none; }
}

/* ── ÉQUIPE ─────────────────────────────────────────────────────────────────
   Lives in Settings rather than as its own tab: it is somewhere you go three
   times when a new person joins, not somewhere you work. */
.team-row .ps-title { display: flex; align-items: center; gap: 8px; }
.team-row .owner-name { margin-left: 0; font-weight: 600; }
.team-row-off { opacity: 0.5; }
.team-you { font-size: 11px; opacity: 0.5; }
.team-role-tag { font-size: 11px; font-weight: 600; opacity: 0.7; }
.team-avail { font-size: 11px; font-weight: 600; }
.team-avail.on  { color: #22c55e; }
.team-avail.off { color: #9ca3af; }

/* Add-agent form. The domain is fixed text, not an input: the client sends a
   local part and the server appends the rest, so there is nothing to type. */
.ag-domain { font-size: 12.5px; opacity: 0.55; white-space: nowrap; padding-right: 2px; }
.ag-gen {
    border: none;
    background: rgba(51,105,255,0.12);
    color: #3369FF;
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.ag-gen:hover { background: rgba(51,105,255,0.2); }

.ag-check { min-height: 16px; font-size: 11.5px; margin-top: 5px; text-align: left; }
.ag-ok       { color: #22c55e; font-weight: 600; }
.ag-bad      { color: #ef4444; font-weight: 600; }
.ag-checking { opacity: 0.5; }

.ag-roles { display: flex; gap: 8px; }
.ag-role {
    flex: 1;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid rgba(60,60,67,0.15);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}
.ag-role.active {
    border-color: #3369FF;
    background: rgba(51,105,255,0.10);
    color: #3369FF;
}

/* Shown once, meant to be read aloud or copied — so it is monospaced and
   selectable rather than styled to look decorative. */
.ag-cred {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13.5px;
    background: rgba(120,120,128,0.10);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    user-select: all;
    word-break: break-all;
}

/* The settings section labels are inline-styled rgba(255,255,255,0.25) — white
   at a quarter opacity, which on this light background is invisible. Every one
   of them ("Integrations", "Team", the rest) currently reads as blank space.
   Overriding here rather than editing each inline style keeps it to one place. */
.ps-section-label {
    color: rgba(60, 60, 67, 0.45) !important;
}

/* ── PLATEFORME ─────────────────────────────────────────────────────────────
   The operator console. Same card language as Settings on purpose — it is a
   back office, not a product surface, and inventing a second visual system for
   an audience of one would be the wrong kind of effort. */
.pf-card { margin-bottom: 12px; }
.pf-name { display: flex; align-items: center; gap: 8px; }
.pf-ind {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 999px;
    color: #3369FF;
    background: rgba(51,105,255,0.12);
}
.pf-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 12px;
    opacity: 0.7;
}
.pf-stats b { font-size: 13.5px; opacity: 1; }
.pf-tablist { opacity: 0.55; }
.pf-loading { padding: 28px; text-align: center; opacity: 0.6; font-size: 13px; }
.pf-card .ps-action { display: flex; gap: 8px; }

.pf-tabs-body { text-align: left; margin-bottom: 14px; }
.pf-tab-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    font-size: 13px;
    text-transform: capitalize;
    cursor: pointer;
}
.pf-tab-row input { width: 16px; height: 16px; accent-color: #3369FF; cursor: pointer; }
/* A tenant asking for a tab is the one state worth surfacing here — it is a
   request waiting on the operator, not a setting. */
.pf-requested {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
}

/* .btn-logout-action is built for the full-width rows in Settings, so in the
   console header it stretches to fill. Here it is a header action, not a row. */
.premium-settings-header .btn-logout-action {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

/* The single action a modal exists for: filled, so it reads as the way out
   rather than as one option among several. Deliberately NOT applied to
   .do-won in the deal-outcome modal — Won sits beside Thinking and Lost there,
   and filling one of three would be the interface choosing for you. */
.do-primary {
    justify-content: center;
    border-color: #16a34a;
    background: #16a34a;
    color: #fff;
}
.do-primary i { color: #fff; }
.do-primary:hover { background: #15803d; border-color: #15803d; color: #fff; }
.do-primary:disabled { opacity: 0.55; cursor: default; background: #16a34a; }

/* The primary action on each list. First in the right-hand group, so it lands
   where the eye already goes for the metrics and stays out of the sort/filter
   cluster on the left — those narrow what is there, this adds to it. */
.add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    margin-left: 12px;
    border-radius: var(--radius-control-inner, 8px);
    border: 1px solid #3369FF;
    background: #3369FF;
    color: #fff;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.add-btn:hover { background: #2456e0; border-color: #2456e0; }
.add-btn i { font-size: 15px; }

@media (max-width: 640px) {
    .add-btn { padding: 0 10px; margin-left: 8px; }
    .add-btn span { display: none; }
}

.owner-col .owner-name { margin-left: 0; }
.touch-col { color: var(--text-muted); font-size: 12px; }

/* Three states, shown as three buttons rather than a dropdown: the whole
   point is seeing at a glance which tabs a company has, and a column of
   collapsed selects hides exactly that. */
.pf-tab-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    font-size: 13px;
}
.pf-tab-name { text-transform: capitalize; flex: 1; }
.pf-tab-states { display: inline-flex; gap: 4px; }
.pf-tab-state {
    border: 1px solid rgba(60,60,67,0.15);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 6px;
    cursor: pointer;
}
.pf-tab-state:hover { background: rgba(60,60,67,0.05); }
.pf-tab-state.active {
    border-color: #3369FF;
    background: rgba(51,105,255,0.10);
    color: #3369FF;
}

/* The owner gets its own line on a deal card, directly above the date. On a
   card there is no column to put it in, and sharing the title line meant the
   name moved every time an owner changed. */
.kb-owner .owner-name { margin-left: 0; font-weight: 600; }

/* ── LEAVING FOR THE DEALS TAB ──────────────────────────────────────────────
   A converted lead is handed to another tab, and a row that just disappears
   reads as a bug. For about a second the row becomes the handover itself, then
   the list closes underneath it while it is still opaque, so the banner lifts
   away from a list that is already correct -- nothing snaps back into place.

   Drawn as a fixed overlay measured to the row, not a child of it: a <div>
   inside a <tr> is invalid and the first cell is position:sticky, which would
   clip anything spanning the row. Everything animated here is transform or
   opacity, so it stays on the compositor and never reflows the list. */

.lead-converting > td > *,
.lead-converting.kb-card > *,
.lead-converting.mobile-lead-card > * {
    opacity: 0;
    transition: opacity 140ms ease;
}
.lead-converting { pointer-events: none; }

.convert-away {
    position: fixed;
    z-index: 10000000;
    display: flex;
    align-items: center;
    /* Left, not centred. The row is up to 1300px wide; centring put the
       sentence out by the date columns, half a screen from the name the eye
       was already on. Starting it where the name was means the message lands
       exactly where the person was looking, and it replaces them in place. */
    justify-content: flex-start;
    overflow: hidden;
    border-radius: 12px;
    pointer-events: none;

    /* The logo's blue-to-violet, but given somewhere to start. A single
       saturated blue across the whole row reads as a filled rectangle; the
       deep navy at the left edge is the sidebar's own colour, so the banner
       looks like part of the app rather than a swatch dropped on top of it,
       and the eye reads depth before it reads the hue. The white radial is a
       light source, not a highlight: it is what keeps the middle from going
       flat at full width. */
    background:
        radial-gradient(130% 190% at 10% -60%,
            rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 58%),
        linear-gradient(101deg,
            #14224A 0%, #1B3AA8 17%, #2B55E6 41%, #4A49E6 64%, #6B33DE 88%);

    /* Cool shadow, not black: a neutral drop under a blue object is what makes
       a panel look pasted on. */
    box-shadow:
        0 14px 34px -12px rgba(22, 46, 128, 0.55),
        0 2px 6px -2px rgba(22, 46, 128, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.16);

    animation: convertAway 5000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}

/* Rises into place, holds, then lifts. It does not slide sideways: Deals is a
   destination in the sidebar, and a horizontal exit points at a direction the
   layout does not actually have. */
/* The percentages look lopsided because the duration is a five second hold
   with a fast move at each end, not a five second move. Entry finishes at
   3.2% (160ms) and the lift starts at 93% (4.65s): stretching the old curve
   over five seconds would have made it crawl, which is the difference between
   waiting and being made to wait. */
@keyframes convertAway {
    0%    { opacity: 0; transform: scaleY(0.86); }
    3.2%  { opacity: 1; transform: scaleY(1); }
    93%   { opacity: 1; transform: translateY(0) scale(1); }
    100%  { opacity: 0; transform: translateY(-5px) scale(0.985); }
}

/* Leaving early because the list was rebuilt underneath. Its own animation
   rather than a transition: swapping animation:none and opacity in the same
   frame is not a reliable transition start, and this must never be the thing
   that leaves a banner stuck on screen. */
.convert-away.cv-bye,
.convert-away.cv-still.cv-bye {
    animation: convertBye 260ms ease forwards;
}
@keyframes convertBye {
    from { opacity: 1; }
    to   { opacity: 0; transform: translateY(-3px); }
}

/* One pass, wide and weak. A narrow bright band is a "shine" effect; a broad
   soft one just makes the gradient look lit. */
.convert-away-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(103deg,
        rgba(255,255,255,0)    30%,
        rgba(255,255,255,0.13) 47%,
        rgba(255,255,255,0.19) 52%,
        rgba(255,255,255,0)    70%);
    transform: translateX(-100%);
    animation: convertSheen 950ms cubic-bezier(0.33, 0, 0.2, 1) 150ms;
}
@keyframes convertSheen {
    to { transform: translateX(100%); }
}

/* Stars: dust, not confetti. Two layers at deliberately unrelated tile widths
   (541 and 389, coprime) so the pattern does not line up again across a wide
   row -- the previous version tiled every 240px and read as a texture rather
   than a sky. Painted with gradients, so the cost is one node however many
   there appear to be. */
.convert-away-stars,
.convert-away-stars::after {
    position: absolute;
    inset: -30% -12%;
    background-repeat: repeat;
    pointer-events: none;
}
.convert-away-stars {
    background-image:
        radial-gradient(1.5px 1.5px at 7%  31%, rgba(255,255,255,0.95), transparent 66%),
        radial-gradient(1.1px 1.1px at 23% 68%, rgba(255,255,255,0.68), transparent 66%),
        radial-gradient(1.7px 1.7px at 41% 17%, rgba(255,255,255,0.85), transparent 66%),
        radial-gradient(1.0px 1.0px at 52% 79%, rgba(255,255,255,0.58), transparent 66%),
        radial-gradient(1.4px 1.4px at 69% 44%, rgba(255,255,255,0.80), transparent 66%),
        radial-gradient(1.1px 1.1px at 88% 24%, rgba(255,255,255,0.62), transparent 66%);
    background-size: 541px 100%;
    animation: starsDrift 5000ms linear,
               starsTwinkle 1400ms ease-in-out infinite alternate;
}
.convert-away-stars::after {
    content: '';
    background-image:
        radial-gradient(1.3px 1.3px at 14% 72%, rgba(255,255,255,0.72), transparent 66%),
        radial-gradient(1.8px 1.8px at 36% 39%, rgba(255,255,255,0.90), transparent 66%),
        radial-gradient(1.0px 1.0px at 61% 85%, rgba(255,255,255,0.52), transparent 66%),
        radial-gradient(1.4px 1.4px at 79% 12%, rgba(255,255,255,0.75), transparent 66%);
    background-size: 389px 100%;
    animation: starsDriftSlow 5000ms linear,
               starsTwinkle 1900ms ease-in-out infinite alternate-reverse;
}
/* Held to roughly the same speed as before rather than the same distance:
   over five seconds a fast drift turns the sky into a conveyor belt. */
@keyframes starsDrift      { from { transform: translateX(0); } to { transform: translateX(-64px); } }
@keyframes starsDriftSlow  { from { transform: translateX(0); } to { transform: translateX(-34px); } }
@keyframes starsTwinkle    { from { opacity: 0.62; } to { opacity: 1; } }

.convert-away-text {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    /* 22px is .leads-table td:first-child's padding-left, so the sentence
       starts on the exact pixel the name it replaces started on. */
    padding: 0 22px;
    max-width: 100%;
    color: #fff;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 550;
    letter-spacing: 0.15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Tight and cool, so it reads as contrast rather than glow. */
    text-shadow: 0 1px 2px rgba(10, 22, 60, 0.45);
    animation: convertText 5000ms cubic-bezier(0.22, 1, 0.36, 1);
}
.convert-away-text i { font-size: 16px; opacity: 0.92; flex-shrink: 0; }
.convert-away-text b { font-weight: 750; }

@keyframes convertText {
    0%    { opacity: 0; transform: translateY(4px); }
    4.5%  { opacity: 1; transform: translateY(0); }
    94%   { opacity: 1; }
    100%  { opacity: 0; }
}

/* Asked not to be moved. The banner stays -- it is the only thing that says
   where the person went -- and everything that travels stops: no drift, no
   sheen, no twinkle, no lift. It fades in, holds the sentence, fades away.
   Carried by .cv-still from JS rather than the media query alone, so the rule
   holds anywhere the overlay is drawn. */
.convert-away.cv-still {
    animation: convertStill 5000ms ease forwards;
}
@keyframes convertStill {
    0%   { opacity: 0; }
    3%   { opacity: 1; }
    94%  { opacity: 1; }
    100% { opacity: 0; }
}
.convert-away.cv-still .convert-away-sheen { display: none; }
.convert-away.cv-still .convert-away-stars,
.convert-away.cv-still .convert-away-stars::after {
    animation: none;
    opacity: 0.85;
}
.convert-away.cv-still .convert-away-text { animation: none; }

@media (prefers-reduced-motion: reduce) {
    /* Belt and braces: an overlay that somehow missed .cv-still still holds
       still here. */
    .convert-away,
    .convert-away-sheen,
    .convert-away-stars,
    .convert-away-stars::after,
    .convert-away-text { animation: none; }
    .convert-away.cv-still { animation: convertStill 5000ms ease forwards; }
}

.cv-done { display: inline-flex; align-items: center; gap: 9px; }
.cv-done-icon { color: #22c55e; font-size: 17px; flex-shrink: 0; }