/* ===========================================================
   StarDialog V2 — Custom Theme (WhatsApp-inspired dark green)
   Works on top of Bootstrap 5
   =========================================================== */

/* ── Dark theme (default) ───────────────────────── */
html[data-cursor-mode="custom"] {
    --cursor-default: url('../cursors/light/arrow.png'), auto;
    --cursor-pointer: url('../cursors/light/hand.png'), pointer;
    --cursor-text: url('../cursors/light/ibeam.png'), text;
    --cursor-wait: url('../cursors/light/wait.png'), wait;
    --cursor-help: url('../cursors/light/help.png'), help;
    --cursor-not-allowed: url('../cursors/light/no.png'), not-allowed;
    --cursor-crosshair: url('../cursors/light/crosshair.png'), crosshair;
    --cursor-move: url('../cursors/light/sizeall.png'), move;
    --cursor-ew-resize: url('../cursors/light/sizewe.png'), ew-resize;
    --cursor-ns-resize: url('../cursors/light/sizens.png'), ns-resize;
    --cursor-nesw-resize: url('../cursors/light/sizenesw.png'), nesw-resize;
    --cursor-nwse-resize: url('../cursors/light/sizenwse.png'), nwse-resize;
}

html[data-theme="light"][data-cursor-mode="custom"] {
    --cursor-default: url('../cursors/dark/arrow.png'), auto;
    --cursor-pointer: url('../cursors/dark/hand.png'), pointer;
    --cursor-text: url('../cursors/dark/ibeam.png'), text;
    --cursor-wait: url('../cursors/dark/wait.png'), wait;
    --cursor-help: url('../cursors/dark/help.png'), help;
    --cursor-not-allowed: url('../cursors/dark/no.png'), not-allowed;
    --cursor-crosshair: url('../cursors/dark/crosshair.png'), crosshair;
    --cursor-move: url('../cursors/dark/sizeall.png'), move;
    --cursor-ew-resize: url('../cursors/dark/sizewe.png'), ew-resize;
    --cursor-ns-resize: url('../cursors/dark/sizens.png'), ns-resize;
    --cursor-nesw-resize: url('../cursors/dark/sizenesw.png'), nesw-resize;
    --cursor-nwse-resize: url('../cursors/dark/sizenwse.png'), nwse-resize;
}

html[data-cursor-mode="custom"] body,
html[data-cursor-mode="custom"] body * { cursor: var(--cursor-default); }
html[data-cursor-mode="custom"] :is(a, button, select, label[for], [role="button"], .cursor-pointer, [onclick]) { cursor: var(--cursor-pointer) !important; }
html[data-cursor-mode="custom"] :is(input, textarea, [contenteditable="true"]) { cursor: var(--cursor-text) !important; }
html[data-cursor-mode="custom"] :is(:disabled, [aria-disabled="true"], .cursor-not-allowed) { cursor: var(--cursor-not-allowed) !important; }
html[data-cursor-mode="custom"] .cursor-wait { cursor: var(--cursor-wait) !important; }
html[data-cursor-mode="custom"] .cursor-help { cursor: var(--cursor-help) !important; }
html[data-cursor-mode="custom"] .cursor-crosshair { cursor: var(--cursor-crosshair) !important; }
html[data-cursor-mode="custom"] .cursor-move { cursor: var(--cursor-move) !important; }
html[data-cursor-mode="custom"] .cursor-ew-resize { cursor: var(--cursor-ew-resize) !important; }
html[data-cursor-mode="custom"] .cursor-ns-resize { cursor: var(--cursor-ns-resize) !important; }
html[data-cursor-mode="custom"] .cursor-nesw-resize { cursor: var(--cursor-nesw-resize) !important; }
html[data-cursor-mode="custom"] .cursor-nwse-resize { cursor: var(--cursor-nwse-resize) !important; }

:root {
    --sd-canvas: #08080a;           /* Deep space background behind tablet */
    --sd-nav-bg: #111419;
    --sd-contact-bg: #1f2c33;
    --sd-workspace-bg: #0b141a;
    --sd-input-bg: #111b21;
    --sd-radius-button: 10px;
    --sd-radius-card: 14px;
    --sd-radius-field: 10px;
    --sd-button-bg: var(--sd-primary);
    --sd-button-text: #ffffff;
    --sd-button-secondary-bg: var(--sd-panel);
    --sd-button-secondary-text: var(--sd-text-primary);
    --sd-dropdown-bg: var(--sd-input-bg);
    --sd-dropdown-text: var(--sd-text-primary);
    --sd-glass-bg: rgba(18, 18, 22, 0.7); /* Frosted Glass Base */
    --sd-glass-border: rgba(255, 255, 255, 0.08); /* Subtle edge glow */
    --sd-glass-shine: rgba(255, 255, 255, 0.03);
    
    /* Accents */
    --sd-vivid: #7c3aed;            /* Vibrant Purple */
    --sd-vivid-glow: rgba(124, 58, 237, 0.3);
    --sd-gold: #c5a059;             /* Luxury Gold */
    --sd-gold-glow: rgba(197, 160, 89, 0.25);
    
    /* Legacy mapping for backward compatibility */
    --sd-green: var(--sd-gold);
    --sd-primary: var(--sd-gold);
    --sd-primary-rgb: 197, 160, 89;
    --sd-dark-bg: transparent; /* Now handled by glass backdrop */
    --sd-panel: rgba(255, 255, 255, 0.03);
    --sd-header-bg: rgba(255, 255, 255, 0.02);
    --sd-border: var(--sd-glass-border);
    --sd-text-primary: #f1f1f3;
    --sd-text-secondary: #b8c5d6;   /* Bumped for glass-dark contrast */
    --sd-muted: #a8b8c8;            /* Bumped for glass-dark contrast */

    /* ── Typography Scale (Increased for readability) ── */
    --sd-fs-xs: 0.875rem;   /* 14px */
    --sd-fs-sm: 1rem;       /* 16px */
    --sd-fs-base: 1.125rem; /* 18px */
    --sd-fs-lg: 1.35rem;    /* 21.6px */
    --sd-fs-xl: 1.65rem;    /* 26.4px */
    /* Dimensions */
    --tablet-radius: 32px;
    --card-radius: 18px;
    --glass-blur: blur(25px) saturate(160%);

    /* ── Override Bootstrap 5's default (light-mode) CSS variables ──
       Without these, Bootstrap's .text-muted, .form-text, .text-secondary etc.
       produce near-black text on dark backgrounds.                         */
    --bs-body-color:          #f1f1f3;
    --bs-body-color-rgb:      241, 241, 243;
    --bs-body-bg:             #08080a;
    --bs-body-bg-rgb:         8, 8, 10;
    --bs-secondary-color:     #a8b8c8;
    --bs-secondary-color-rgb: 168, 184, 200;
    --bs-tertiary-color:      rgba(168, 184, 200, 0.5);
    --bs-tertiary-color-rgb:  168, 184, 200;
    --bs-emphasis-color:      #f1f1f3;
    --bs-emphasis-color-rgb:  241, 241, 243;
    --bs-border-color:        rgba(255, 255, 255, 0.08);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-heading-color:       #f1f1f3;
    --bs-link-color:          var(--sd-gold);
    --bs-link-color-rgb:      197, 160, 89;
}

/* ── Global Canvas & Tablet Frame ────────────────── */
body {
    background-color: var(--sd-canvas);
    margin: 0;
    height: 100vh;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--sd-text-primary);
    overflow: hidden;
}

/* --- EXPERIENCE V2 (Premium Glass) --- */
body.experience-v2 {
    background-image: 
        radial-gradient(at 0% 0%, rgba(124, 58, 237, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(197, 160, 89, 0.12) 0px, transparent 50%),
        url('../LoginBackground.jpg');
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px; 
}

body.experience-v2 .tablet-container {
    width: 98%; 
    height: 94vh;
    background: var(--sd-glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--sd-glass-border);
    border-radius: 48px; 
    box-shadow: 
        0 30px 80px -10px rgba(0, 0, 0, 0.7),
        0 10px 30px -5px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Mobile Full Screen Hook */
@media (max-width: 768px) {
    body.experience-v2 { padding: 0 !important; }
    body.experience-v2 .tablet-container {
        width: 100% !important;
        height: 100vh !important;
        border: none !important;
        border-radius: 0 !important;
    }
}

/* --- EXPERIENCE V1 (Legacy Desktop) --- */
body.experience-v1 {
    background-image: none;
    background-color: var(--sd-canvas);
    display: block;
    padding: 0;
}

/* Variable Overrides for V1 - Dark Mode (Original WhatsApp Dark) */
body.experience-v1[data-theme="dark"], 
body.experience-v1:not([data-theme="light"]) {
    --sd-canvas: #111b21;
    --sd-panel: #1f2c33;
    --sd-dark-bg: #111b21;
    --sd-header-bg: #202c33;
    --sd-muted: #aebac1;
    --sd-border: #2a3942;
    --sd-text-primary: #ffffff;
    --sd-text-secondary: #e9edef;
    --sd-bubble-out: #005c4b;
    --sd-bubble-in: #202c33;
    --sd-chat-bg: #0b141a;

    /* Override Bootstrap's light-mode defaults for V1 dark palette */
    --bs-body-color:          #ffffff;
    --bs-body-color-rgb:      255, 255, 255;
    --bs-body-bg:             #111b21;
    --bs-body-bg-rgb:         17, 27, 33;
    --bs-secondary-color:     #aebac1;
    --bs-secondary-color-rgb: 174, 186, 193;
    --bs-tertiary-color:      rgba(174, 186, 193, 0.5);
    --bs-tertiary-color-rgb:  174, 186, 193;
    --bs-emphasis-color:      #ffffff;
    --bs-emphasis-color-rgb:  255, 255, 255;
    --bs-border-color:        #2a3942;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
    --bs-heading-color:       #ffffff;
    --bs-link-color:          var(--sd-gold);
    --bs-link-color-rgb:      197, 160, 89;
}

body.experience-v1[data-theme="dark"] .sd-search-area,
body.experience-v1:not([data-theme="light"]) .sd-search-area {
    background-color: #1f2c33 !important;
}

body.experience-v1[data-theme="dark"] .sd-search-area .d-flex,
body.experience-v1:not([data-theme="light"]) .sd-search-area .d-flex {
    background-color: #2a3942 !important;
}

body.experience-v1[data-theme="dark"] .sd-search-area input,
body.experience-v1:not([data-theme="light"]) .sd-search-area input {
    color: #e9edef !important;
    background-color: transparent !important;
}

body.experience-v1[data-theme="dark"] .sd-search-area input::placeholder,
body.experience-v1:not([data-theme="light"]) .sd-search-area input::placeholder {
    color: #aebac1 !important;
    opacity: 1 !important;
}

body.experience-v1[data-theme="dark"] .sd-search-area .bi-search,
body.experience-v1:not([data-theme="light"]) .sd-search-area .bi-search {
    color: #aebac1 !important;
}

/* Variable Overrides for V1 - Light Mode (Premium Cream) */
body.experience-v1[data-theme="light"] {
    --sd-canvas: #f8f5ee;
    --sd-panel: #ffffff;
    --sd-dark-bg: #fdfaf3;
    --sd-header-bg: #f4f1e8;
    --sd-muted: #8e857d;
    --sd-border: rgba(0, 0, 0, 0.08);
    --sd-text-primary: #2c2b2a;
    --sd-text-secondary: #5c5854;
}

body.experience-v1 .tablet-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    background: var(--sd-canvas);
    display: flex;
    flex-direction: column;
}

body.experience-v1 .glass-sidebar {
    background: var(--sd-nav-bg, #111b21);
    border-right: 1px solid var(--sd-border);
    backdrop-filter: none;
}

body.experience-v1[data-theme="light"] .glass-sidebar {
    background: var(--sd-nav-bg, #f0f2f5);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

body.experience-v1 .sd-sidebar-v1 {
    background: var(--sd-nav-bg, #111b21) !important;
    border-right: 1px solid var(--sd-border) !important;
}

body.experience-v1[data-theme="light"] .sd-sidebar-v1 {
    background: var(--sd-nav-bg, #f0f2f5) !important;
    border-right: 1px solid var(--sd-border) !important;
}

body.experience-v1 .sd-header {
    background: var(--sd-header-bg) !important;
    border-bottom: 1px solid var(--sd-border) !important;
}

body.experience-v1 .glass-card {
    background: var(--sd-panel);
    border: 1px solid var(--sd-border);
}

#app {
    width: 100%;
    height: 100%;
}

.glass-sidebar {
    background: var(--sd-nav-bg, rgba(255, 255, 255, 0.02));
    border-right: 1px solid var(--sd-glass-border);
    backdrop-filter: blur(10px);
}

.glass-card {
    background: var(--sd-glass-shine);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--sd-glass-border);
    border-radius: var(--card-radius);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: scale(1.01) translateY(-2px);
    border-color: var(--sd-gold);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}

.sd-select-dropdown {
    background: var(--sd-glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.bubble-inbound {
    background: #202c33;
    border: none;
    border-radius: 4px 18px 18px 18px;
    padding: 12px 16px;
    color: #e9edef;
}

.bubble-outbound {
    background: #005c4b;
    border: none;
    border-radius: 18px 18px 4px 18px;
    padding: 12px 16px;
    box-shadow: none;
    color: #e9edef;
}

[data-theme="light"] .bubble-inbound {
    background: #ffffff;
    color: #111b21;
}

[data-theme="light"] .bubble-outbound {
    background: #d9fdd3;
    color: #111b21;
}

.btn-vivid {
    background: var(--sd-gold);
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    border: none;
    padding: 12px 28px;
    box-shadow: 0 0 20px var(--sd-gold-glow);
    transition: all 0.2s ease;
}

.glass-card.active-gold {
    background: rgba(197, 160, 89, 0.15);
    border-color: var(--sd-gold);
    box-shadow: 0 0 20px var(--sd-gold-glow);
}

.sd-convo-item.active-gold .text-muted {
    color: var(--sd-text-primary) !important;
    opacity: 0.8;
}

/* Ensure the app shell fills the space correctly in horizontal mode by default */
.sd-app-shell {
    height: 100%;
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden;
}

/* ── Dropdown Visibility & Accessibility Fixes ───── */
.sd-glass-select {
    transition: all 0.2s ease;
}

.sd-glass-select:focus {
    background-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0 0 2px var(--sd-vivid-glow) !important;
}

/* Hard reset for option elements to prevent transparency-induced unreadability */
.sd-select-option {
    background-color: #1f2c33 !important; /* Solid WhatsApp Dark */
    color: #ffffff !important;
    padding: 10px;
}

/* ── Light theme overrides (Premium Cream & Gold Aesthetic) ───────────────────────── */
[data-theme="light"] {
    --sd-canvas: #f8f5ee;           /* Warm cream background */
    --sd-glass-bg: rgba(255, 255, 255, 0.55);
    --sd-glass-border: rgba(0, 0, 0, 0.06);
    --sd-glass-shine: rgba(255, 255, 255, 0.5);
    
    --sd-dark-bg: #fdfaf3;
    --sd-panel: #ffffff;
    --sd-sidebar-bg: #ffffff;
    --sd-header-bg: #f4f1e8;
    --sd-muted: #8e857d;            /* Warm grey */
    --sd-border: rgba(0, 0, 0, 0.08);
    --sd-bubble-out: #e7ffdb;
    --sd-bubble-in: #ffffff;
    --sd-chat-bg: #efeae2;
    --sd-text-primary: #2c2b2a;     /* Soft charcoal */
    --sd-text-secondary: #5c5854;
    
    --sd-vivid-glow: rgba(124, 58, 237, 0.1);
    --sd-gold-glow: rgba(197, 160, 89, 0.15);

    /* Override Bootstrap's CSS variables for light mode */
    --bs-body-color:          #2c2b2a;
    --bs-body-color-rgb:      44, 43, 42;
    --bs-body-bg:             #f8f5ee;
    --bs-body-bg-rgb:         248, 245, 238;
    --bs-secondary-color:     #8e857d;
    --bs-secondary-color-rgb: 142, 133, 125;
    --bs-tertiary-color:      rgba(142, 133, 125, 0.5);
    --bs-tertiary-color-rgb:  142, 133, 125;
    --bs-emphasis-color:      #2c2b2a;
    --bs-emphasis-color-rgb:  44, 43, 42;
    --bs-border-color:        rgba(0, 0, 0, 0.08);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.08);
    --bs-heading-color:       #2c2b2a;
    --bs-link-color:          var(--sd-gold);
    --bs-link-color-rgb:      197, 160, 89;
}

/* Specific Light Mode adjustments for Glass Experience */
body.experience-v2[data-theme="light"] {
    background-image: 
        radial-gradient(at 0% 0%, rgba(197, 160, 89, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(124, 58, 237, 0.08) 0px, transparent 50%),
        url('../LoginBackgroundLight.png');
    background-color: var(--sd-canvas);
}

body.experience-v2[data-theme="light"] .tablet-container {
    background: var(--sd-glass-bg);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 20px 50px -10px rgba(197, 160, 89, 0.15),
        0 10px 30px -5px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* Accessibility for dropdowns in Light Mode */
[data-theme="light"] .sd-select-option {
    background-color: #ffffff !important;
    color: #2c2b2a !important;
}

[data-theme="light"] .sd-glass-select:focus {
    background-color: #ffffff !important;
    border-color: var(--sd-gold) !important;
}

/* ── Theme Utility Classes ───────────────────────── */
.text-sd-primary { color: var(--sd-primary) !important; }
.text-sd-text { color: var(--sd-text-primary) !important; }
.text-sd-secondary { color: var(--sd-text-secondary) !important; }
.bg-sd-panel { background-color: var(--sd-panel) !important; }
.bg-sd-dark { background-color: var(--sd-dark-bg) !important; }
.border-sd { border-color: var(--sd-border) !important; }

/* ── Smooth colour transitions on theme switch ───── */
*, *::before, *::after {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Theme changes use a single document-level reveal instead of hundreds of
   independently interpolating components. */
html.sd-theme-transitioning *,
html.sd-theme-transitioning *::before,
html.sd-theme-transitioning *::after {
    transition: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) {
    z-index: 2;
    animation: sd-theme-ripple 720ms cubic-bezier(.22, .8, .22, 1) both;
}

@keyframes sd-theme-ripple {
    from {
        clip-path: circle(0 at var(--sd-theme-ripple-x) var(--sd-theme-ripple-y));
    }
    to {
        clip-path: circle(var(--sd-theme-ripple-radius) at var(--sd-theme-ripple-x) var(--sd-theme-ripple-y));
    }
}

/* ── Onboarding Wizard Refinements ───────────────── */
.onboarding-layout-wrapper {
    display: flex;
    min-height: 100vh;
    background: var(--sd-dark-bg);
}

.onboarding-sidebar {
    width: 380px;
    background: var(--sd-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--sd-border);
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

[data-theme="light"] .onboarding-sidebar {
    background: #f8f9fa;
}

.onboarding-main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow-y: auto;
}

.onboarding-stepper-zone {
    flex: 1;
    overflow-y: auto;
    margin-top: 1.5rem;
}

.onboarding-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 1.5rem;
}

.onboarding-card {
    width: 100%;
    max-width: 1200px !important;
    margin: 0 auto;
    border-radius: 24px;
    background-color: var(--sd-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
    border: 1px solid var(--sd-border);
}

[data-theme="light"] .onboarding-card {
    box-shadow: 0 10px 40px rgba(0, 168, 132, 0.08) !important;
    background-color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────
   Vertical Stepper
   ───────────────────────────────────────────────────── */
.stepper-vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 3rem;
}

.step-item-vertical {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem; /* Increased spacing between circle and text */
    position: relative;
    padding-bottom: 3.25rem; /* Increased vertical space between steps */
}

.step-item-vertical:last-child {
    padding-bottom: 0;
}

/* Connecting line */
.step-item-vertical::after {
    content: '';
    position: absolute;
    left: 18px; /* Perfectly centered for 36px circles */
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--sd-border);
    z-index: 1;
}

.step-item-vertical:last-child::after {
    display: none;
}

.step-item-vertical.completed::after {
    background: var(--sd-green);
}

.step-circle-vertical {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sd-panel);
    border: 2px solid var(--sd-border);
    color: var(--sd-muted);
    font-weight: 700;
    font-size: 0.9rem;
    z-index: 2;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.step-item-vertical.active .step-circle-vertical {
    background: var(--sd-panel);
    border-color: var(--sd-green);
    color: var(--sd-green);
    box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.2);
}

.step-item-vertical.active {
    position: relative;
}

.step-item-vertical.active .step-content-vertical {
    background: rgba(0, 168, 132, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    margin-left: -12px;
    margin-top: -6px;
    border-left: 3px solid var(--sd-green);
}

.step-item-vertical.active .step-circle-vertical,
.step-item-vertical.active .step-content-vertical {
    position: relative;
    z-index: 1;
}

.step-item-vertical.completed .step-circle-vertical {
    background: var(--sd-green);
    border-color: var(--sd-green);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.25);
}

.step-content-vertical {
    display: flex;
    flex-direction: column;
}

.step-title-vertical {
    font-weight: bold;
    font-size: 1rem;
    color: var(--sd-muted);
    margin: 0;
    transition: all 0.3s ease;
}

.step-item-vertical.active .step-title-vertical,
.step-item-vertical.completed .step-title-vertical {
    color: var(--sd-text-primary);
}

.step-desc-vertical {
    font-size: 0.75rem;
    color: var(--sd-muted);
}

/* ── Branded Auth Tiles — Visibility Enhancements ───── */
.auth-tile {
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--sd-border);
    background: var(--sd-panel);
    cursor: pointer;
    overflow: hidden;
}

.auth-tile:hover {
    transform: translateY(-4px);
    border-color: var(--sd-green);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.auth-tile.active {
    background: rgba(0, 168, 132, 0.08) !important;
    border-color: var(--sd-green) !important;
    box-shadow: 0 0 0 4px rgba(0, 168, 132, 0.15), 0 15px 30px rgba(0, 168, 132, 0.1);
}

.auth-tile-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: var(--sd-green);
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1rem; font-weight: 700;
    z-index: 5;
}

.auth-tile.active .auth-tile-check {
    display: flex;
}

[data-theme="light"] .auth-tile {
    background: #ffffff;
    border-color: #e9edef;
}

[data-theme="light"] .auth-tile.active {
    background: #f0fff4 !important;
    border-color: var(--sd-green) !important;
}

/* ── Theme Switcher Sidebar Styles ───────────────────── */
.onboarding-sidebar .form-check-input {
    background-color: var(--sd-panel);
    border-color: var(--sd-border);
}

.onboarding-sidebar .form-check-input:checked {
    background-color: var(--sd-green);
    border-color: var(--sd-green);
}

/* ─────────────────────────────────────────────────────
   LIGHT MODE: Bootstrap dark utility class overrides
   ───────────────────────────────────────────────────── */

/* bg-dark → use panel colour */
[data-theme="light"] .bg-dark,
[data-theme="light"] [style*="background-color: #111b21"],
[data-theme="light"] [style*="background-color:#111b21"],
[data-theme="light"] [style*="background: #111b21"],
[data-theme="light"] [style*="background:#111b21"] {
    background-color: var(--sd-panel) !important;
    color: var(--sd-text-primary) !important;
}

[data-theme="light"] .bg-dark-soft {
    background-color: rgba(0,0,0,0.05) !important;
}

/* Bootstrap table-dark */
[data-theme="light"] .table-dark {
    --bs-table-bg: var(--sd-panel);
    --bs-table-color: var(--sd-text-primary);
    --bs-table-border-color: var(--sd-border);
    --bs-table-hover-bg: var(--sd-dark-bg);
    --bs-table-striped-bg: rgba(0,0,0,0.02);
}

/* Modal dialog & content */
.modal-content {
    background-color: var(--sd-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-content.bg-dark,
[data-theme="light"] .modal-content.sd-panel {
    background-color: var(--sd-panel) !important;
    color: var(--sd-text-primary) !important;
    border-color: var(--sd-border) !important;
}

/* contact modal panel (our custom fixed modal) */
[data-theme="light"] .contact-modal-panel {
    background-color: var(--sd-panel) !important;
}

/* Form controls with bg-dark */
[data-theme="light"] .form-select,
[data-theme="light"] .form-control,
[data-theme="light"] .form-select.bg-dark,
[data-theme="light"] .form-control.bg-dark,
[data-theme="light"] input.bg-dark,
[data-theme="light"] select.bg-dark {
    background-color: #f8f9fa !important;
    color: var(--sd-text-primary) !important;
    border-color: var(--sd-border) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* form-control-sd */
[data-theme="light"] .form-control-sd {
    background-color: #f8f9fa !important;
    color: var(--sd-text-primary) !important;
    border-color: var(--sd-border) !important;
}

[data-theme="light"] .form-control-sd::placeholder,
[data-theme="light"] .form-select::placeholder {
    color: var(--sd-muted);
}

/* Card with bg-dark */
[data-theme="light"] .card.bg-dark,
[data-theme="light"] .card-sd-dark {
    background-color: var(--sd-panel) !important;
    color: var(--sd-text-primary) !important;
    border-color: var(--sd-border) !important;
}

/* border-secondary in light mode */
[data-theme="light"] .border-secondary {
    border-color: var(--sd-border) !important;
}

/* text-white → dark text in light mode */
[data-theme="light"] .text-white,
[data-theme="light"] .text-white-50 {
    color: var(--sd-text-primary) !important;
}

/* Headings */
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,
[data-theme="light"] h4,[data-theme="light"] h5,[data-theme="light"] h6 {
    color: var(--sd-text-primary) !important;
}

/* Nav sidebar */
[data-theme="light"] .sd-nav {
    background-color: var(--sd-nav-bg, #f0f2f5);
    border-color: var(--sd-border) !important;
}
[data-theme="light"] .sd-nav-icon {
    color: var(--sd-muted);
}
[data-theme="light"] .sd-nav-icon:hover,
[data-theme="light"] .sd-nav-icon.active {
    color: var(--sd-green);
    background-color: rgba(0, 168, 132, 0.10);
}

/* BulkSenderModal — hardcoded inline backgrounds */
[data-theme="light"] .sd-bulk-summary {
    background: var(--sd-panel) !important;
    border-color: var(--sd-border) !important;
}
[data-theme="light"] .campaign-stat-card {
    background: var(--sd-dark-bg) !important;
    border-color: var(--sd-border) !important;
}

/* Progress bars */
[data-theme="light"] .progress,
[data-theme="light"] .progress.bg-dark {
    background-color: rgba(0,0,0,0.1) !important;
}

[data-theme="light"] .sd-dept-select {
    background-color: rgba(0,0,0,0.06) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232c2b2a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Chat sidebar */
[data-theme="light"] .sd-chat-sidebar {
    background-color: var(--sd-contact-bg, var(--sd-panel));
    border-color: var(--sd-border) !important;
}
[data-theme="light"] .sd-sidebar-header {
    background-color: var(--sd-header-bg);
}
[data-theme="light"] .sd-convo-item {
    border-color: var(--sd-border) !important;
}
[data-theme="light"] .sd-convo-item:hover,
[data-theme="light"] .sd-convo-item.active {
    background-color: var(--sd-dark-bg);
}
[data-theme="light"] .sd-search-input {
    background-color: var(--sd-input-bg, var(--sd-dark-bg));
    color: var(--sd-text-primary);
}

/* Chat compose bar */
[data-theme="light"] .sd-compose-bar {
    background-color: var(--sd-header-bg);
}
[data-theme="light"] .sd-compose-input {
    background: var(--sd-dark-bg);
    color: var(--sd-text-primary);
}

/* Chat bubbles */
[data-theme="light"] .sd-bubble.out { color: #111b21; }
[data-theme="light"] .sd-bubble.in  { color: #111b21; }

/* Settings sidebar */
[data-theme="light"] .settings-sidebar,
[data-theme="light"] .bg-dark-soft.rounded-circle {
    background-color: rgba(0,0,0,0.06) !important;
}

/* ─────────────────────────────────────────────────────
   ADMIN PAGE — Light Mode Overrides
   ───────────────────────────────────────────────────── */

/* Staff rows */
[data-theme="light"] .admin-staff-row {
    background-color: #ffffff !important;
    border-color: var(--sd-border) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .admin-staff-row:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
}

/* Number cards */
[data-theme="light"] .admin-number-card {
    background-color: #ffffff !important;
    border-color: var(--sd-border) !important;
}

/* Edit pencil button */
[data-theme="light"] .admin-edit-btn {
    background: rgba(0,0,0,.05) !important;
}
[data-theme="light"] .admin-edit-btn:hover {
    background: rgba(var(--sd-primary-rgb),.12) !important;
}

/* Dept allocation scroll area */
[data-theme="light"] .admin-staff-row .rounded-3[style*="var(--sd-dark-bg)"],
[data-theme="light"] .admin-staff-row [style*="background:var(--sd-dark-bg)"] {
    background-color: var(--sd-dark-bg) !important;
}

/* Dept toggle buttons */
[data-theme="light"] .admin-dept-btn:hover {
    background: rgba(var(--sd-primary-rgb),.08) !important;
}

/* Admin tab bar (the underline tabs at top) */
.admin-tab {
    border-radius: 0 !important;
}
[data-theme="light"] .admin-tab {
    color: var(--sd-muted);
}
[data-theme="light"] .admin-tab:hover {
    color: var(--sd-text-primary);
}
[data-theme="light"] .admin-tab-active {
    color: var(--sd-primary) !important;
}

/* Provider logo theme switching */
.aws-icon-dark, .auth0-icon-dark {
    display: inline-block;
}
.aws-icon-light, .auth0-icon-light {
    display: none;
}
[data-theme="light"] .aws-icon-dark,
[data-theme="light"] .auth0-icon-dark {
    display: none !important;
}
[data-theme="light"] .aws-icon-light,
[data-theme="light"] .auth0-icon-light {
    display: inline-block !important;
}
[data-theme="dark"] .aws-icon-dark,
[data-theme="dark"] .auth0-icon-dark {
    display: inline-block !important;
}
[data-theme="dark"] .aws-icon-light,
[data-theme="dark"] .auth0-icon-light {
    display: none !important;
}

/* Modal close button in light mode */
[data-theme="light"] .modal-content .btn-close {
    filter: none;
}

/* Add-child dashed button */
[data-theme="light"] .admin-add-child-btn {
    background: rgba(var(--sd-primary-rgb),.04) !important;
}
[data-theme="light"] .admin-add-child-btn:hover {
    background: rgba(var(--sd-primary-rgb),.1) !important;
}


/* Alert variants that use bg-dark */
[data-theme="light"] .alert.bg-dark {
    background-color: rgba(0,0,0,0.05) !important;
}

/* Sticky table headers */
[data-theme="light"] thead.bg-dark,
[data-theme="light"] thead.sticky-top.bg-dark {
    background-color: var(--sd-dark-bg) !important;
    color: var(--sd-text-primary) !important;
}

/* sd-ai-card */
[data-theme="light"] .sd-ai-card {
    background-color: var(--sd-panel);
    border-color: var(--sd-border);
    color: var(--sd-text-primary);
}

/* General body text in light mode */
[data-theme="light"] body,
[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] label,
[data-theme="light"] small,
[data-theme="light"] li,
[data-theme="light"] td,
[data-theme="light"] th {
    color: var(--sd-text-primary);
}

/* Muted text always uses our palette variable, not Bootstrap's dark default */
.text-muted {
    color: var(--sd-muted) !important;
}

/* form-text (helper text under inputs) uses the same muted colour */
.form-text {
    color: var(--sd-muted) !important;
}

/* Inputs: ensure text is always readable */
[data-theme="light"] input,
[data-theme="light"] textarea {
    background-color: #f8f9fa !important;
    color: var(--sd-text-primary) !important;
    border-color: var(--sd-border) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--sd-muted) !important;
    opacity: 0.7;
}

input::placeholder, textarea::placeholder {
    opacity: 0.7;
}

/* Ensure buttons maintain high-contrast white text in light mode */
[data-theme="light"] .btn-sd-primary,
[data-theme="light"] .btn-sd-dark,
[data-theme="light"] .btn-success {
    color: #ffffff !important;
}

/* NOTE: WhatsAppPhone preview intentionally stays dark — it simulates a real device */

/* ── Login card ──────────────────────────────────── */
[data-theme="light"] .sd-login-card {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .sd-login-card h2,
[data-theme="light"] .sd-login-card h3,
[data-theme="light"] .sd-login-card h4,
[data-theme="light"] .sd-login-card p {
    color: var(--sd-text-primary);
}

[data-theme="light"] .sd-login-left {
    background: linear-gradient(rgba(215, 218, 222, 0.6), rgba(215, 218, 222, 0.8)), url('../LoginBackgroundLight.png') !important;
    background-size: 512px !important;
    background-repeat: repeat !important;
    background-position: center !important;
}

/* ── Templates right panel background (.bg-darker) ── */
/* .bg-darker is a scoped style in TemplatesPage that uses #0b141a.
   We can't override scoped CSS directly, but we can target it via the
   utility class name with higher specificity in light mode.             */
[data-theme="light"] .bg-darker {
    background-color: var(--sd-dark-bg) !important;
}

/* ── Templates page .sd-input (scoped component style) ── */
[data-theme="light"] .sd-input {
    background: var(--sd-panel) !important;
    color: var(--sd-text-primary) !important;
    border-color: var(--sd-border) !important;
}


/* ── Utility Classes ────────────────────────────── */
.bg-dark-soft {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.text-sd-primary {
    color: var(--sd-green) !important;
}

.bg-sd-primary-transparent {
    background-color: rgba(0, 168, 132, 0.1) !important;
}

.transition-all {
    transition: all 0.2s ease-in-out;
}

.bg-sd-bubble-in {
    background-color: var(--sd-bubble-in) !important;
}

.bg-sd-bubble-out {
    background-color: var(--sd-bubble-out) !important;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--sd-border);
    border-radius: 10px;
}

/* ── Global ─────────────────────────────────────── */
html,
body {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
    font-size: var(--sd-fs-base);
    font-weight: 600;
}

.btn-sm {
    font-size: var(--sd-fs-sm);
    padding: 0.4rem 0.85rem;
}

.btn-lg {
    font-size: var(--sd-fs-lg);
    padding: 0.8rem 1.6rem;
}

.btn {
    font-size: var(--sd-fs-base);
    font-weight: 600;
}

.btn-sm {
    font-size: var(--sd-fs-sm);
    padding: 0.4rem 0.85rem;
}

.btn-lg {
    font-size: var(--sd-fs-lg);
    padding: 0.8rem 1.6rem;
}

.btn-sd-primary {
    background-color: var(--sd-green);
    color: #fff;
    border: none;
}

.btn-sd-primary:hover {
    background-color: #017561;
    color: #fff;
}

.btn-sd-dark {
    background-color: var(--sd-dark-bg);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-sd-dark:hover {
    background-color: var(--sd-header-bg);
    color: #fff;
}

.btn-outline-sd-primary {
    background-color: transparent;
    color: var(--sd-green);
    border: 1.5px solid var(--sd-green);
}

.btn-outline-sd-primary:hover {
    background-color: rgba(0, 168, 132, 0.12);
    color: var(--sd-green);
    border-color: var(--sd-green);
}

/* ── Disabled button states ──────────────────────── */
.btn:disabled,
.btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto;
}

.btn-sd-primary:disabled,
.btn-sd-primary[disabled] {
    background-color: var(--sd-muted);
    color: var(--sd-dark-bg);
    border: none;
    opacity: 0.5;
}

.btn-outline-sd-primary:disabled,
.btn-outline-sd-primary[disabled] {
    color: var(--sd-muted);
    border-color: var(--sd-border);
    background-color: transparent;
    opacity: 0.5;
}

.btn-outline-secondary:disabled,
.btn-outline-secondary[disabled] {
    color: var(--sd-muted);
    border-color: var(--sd-border);
    opacity: 0.5;
}

/* ── Dropdown ────────────────────────────────────── */
.dropdown-item {
    color: var(--sd-text-primary);
    padding: 0.65rem 1.25rem;
    font-size: var(--sd-fs-base);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--sd-green);
}

.dropdown-header {
    color: var(--sd-muted);
    font-size: var(--sd-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.25rem;
}

/* ── Form inputs ─────────────────────────────────── */
.form-control-sd {
    background-color: var(--sd-dark-bg);
    border: 1px solid var(--sd-border);
    color: var(--sd-text-primary);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    font-size: var(--sd-fs-base);
}

.form-control-sd::placeholder {
    color: var(--sd-muted);
}

.form-control-sd:focus {
    background-color: var(--sd-dark-bg);
    border-color: var(--sd-green);
    color: var(--sd-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 168, 132, 0.25);
}

.form-select {
    background-color: var(--sd-dark-bg);
    border: 1px solid var(--sd-border);
    color: var(--sd-text-primary);
    border-radius: 0.75rem;
    font-size: var(--sd-fs-base);
    padding: 0.6rem 2.25rem 0.6rem 0.75rem;
}

.form-select-sm {
    font-size: var(--sd-fs-sm);
    padding: 0.6rem 1rem;
    border-radius: 0.75rem;
}

.form-select-lg {
    font-size: var(--sd-fs-lg);
    padding: 0.8rem 3rem 0.8rem 1rem;
}

.form-select:focus {
    background-color: var(--sd-dark-bg);
    border-color: var(--sd-green);
    color: var(--sd-text-primary);
}

.form-select option {
    background-color: var(--sd-panel);
    color: var(--sd-text-primary);
}

/* Light mode: option text must be dark */
[data-theme="light"] .form-select option {
    background-color: #ffffff;
    color: #111b21;
}

/* ── Login page ──────────────────────────────────── */
.sd-login-left {
    background: linear-gradient(rgba(10, 16, 20, 0.6), rgba(10, 16, 20, 0.8)), url('../LoginBackground.jpg');
    background-size: 512px;
    background-repeat: repeat;
    background-position: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sd-login-right {
    background: linear-gradient(135deg, #0a1f1a 0%, #00a884 55%, #017561 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Appearance: paired colour palettes (independent of app experience) */
.sd-palette-card {
    width: 100%;
    height: 100%;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    border: 2px solid transparent;
    border-radius: 14px;
    background: var(--sd-panel);
    color: var(--sd-text-primary);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sd-palette-card:hover { transform: translateY(-2px); border-color: var(--sd-border); }
.sd-palette-card.is-selected { border-color: var(--sd-primary); box-shadow: 0 8px 24px rgba(var(--sd-primary-rgb), .15); }

.sd-palette-swatch {
    position: relative;
    display: block;
    height: 76px;
    overflow: hidden;
    border: 1px solid var(--sd-border);
    border-radius: 10px;
    background:
        linear-gradient(145deg, transparent 0 48%, var(--palette-accent) 48.5% 51.5%, transparent 52%),
        linear-gradient(145deg, var(--palette-dark) 0 50%, var(--palette-light) 50% 100%);
}

.sd-palette-swatch::before,
.sd-palette-swatch::after {
    content: '';
    position: absolute;
    width: 42%;
    height: 24px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.sd-palette-swatch::before { left: 9%; top: 13px; background: var(--palette-dark-panel); }
.sd-palette-swatch::after { right: 9%; bottom: 12px; background: var(--palette-light-panel); }
.sd-palette-swatch-accent { position:absolute; z-index:2; width:30px; height:8px; left:calc(50% - 15px); top:calc(50% - 4px); border-radius:999px; background:var(--palette-accent); }

.sd-palette-editor {
    padding: 1rem;
    border: 1px solid var(--sd-border);
    border-radius: 14px;
    background: var(--sd-panel);
}

.sd-component-editor {
    padding: 1rem;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-card);
    background: var(--sd-panel);
}

.sd-roundness-master,
.sd-style-control {
    padding: .8rem;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-field);
    background: var(--sd-input-bg, var(--sd-dark-bg));
}

.sd-roundness-master { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.sd-style-range { min-width: 120px; accent-color: var(--sd-primary); }
.sd-radius-value { min-width: 48px; color:var(--sd-text-primary); font-variant-numeric:tabular-nums; }

@media (max-width: 767px) {
    .sd-roundness-master { align-items:stretch; flex-direction:column; }
}

/* Unified component styling. Circular avatars/status indicators intentionally remain circular. */
:is(.card, .modal-content, .glass-card, .sd-convo-item, .sd-palette-card, .sd-palette-editor, .sd-component-editor, .rounded-2, .rounded-3, .rounded-4):not(.rounded-circle):not(.rounded-pill) {
    border-radius: var(--sd-radius-card) !important;
}

:is(.btn, button, .sd-nav-icon, .dropdown-toggle):not(.rounded-circle):not(.rounded-pill) {
    border-radius: var(--sd-radius-button) !important;
}

:is(.form-control, .form-control-sd, .form-select, .sd-search-input, .sd-compose-input, input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
    border-radius: var(--sd-radius-field) !important;
    background-color: var(--sd-dropdown-bg) !important;
    color: var(--sd-dropdown-text) !important;
}

:is(.dropdown-menu, .sd-glass-select) {
    border-radius: var(--sd-radius-field) !important;
    background-color: var(--sd-dropdown-bg) !important;
    color: var(--sd-dropdown-text) !important;
}

:is(.form-select option, .dropdown-item) { background-color:var(--sd-dropdown-bg); color:var(--sd-dropdown-text); }

:is(.btn-sd-primary, .btn-primary, .bg-sd-primary) {
    background-color: var(--sd-button-bg) !important;
    color: var(--sd-button-text) !important;
}

:is(.btn-sd-primary, .btn-primary):hover { filter:brightness(.92); color:var(--sd-button-text) !important; }

:is(.btn-secondary, .btn-outline-secondary, .btn-sd-dark) {
    background-color: var(--sd-button-secondary-bg) !important;
    color: var(--sd-button-secondary-text) !important;
    border-color: var(--sd-border) !important;
}

.sd-colour-control {
    min-height: 64px;
    padding: .65rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid var(--sd-border);
    border-radius: 10px;
    background: var(--sd-input-bg, var(--sd-dark-bg));
}

.sd-colour-control input[type="color"] {
    width: 42px;
    height: 36px;
    flex: 0 0 42px;
    padding: 2px;
    border: 1px solid var(--sd-border);
    border-radius: 8px;
    background: transparent;
}

[data-theme="light"] .sd-login-right {
    background: linear-gradient(135deg, #e8f5e9 0%, #00a884 55%, #017561 100%);
}

.sd-login-stack {
    width: min(440px, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    position: relative;
    z-index: 2;
}

.sd-login-branding {
    text-align: center;
    white-space: nowrap;
}

.sd-login-brand-name {
    font-size: clamp(1.55rem, 3vw, 2.5rem);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.03em;
}

.sd-login-brand-icon {
    width: clamp(36px, 4vw, 50px);
    height: clamp(36px, 4vw, 50px);
    object-fit: contain;
    border: none;
}

.sd-login-powered {
    font-size: clamp(0.65rem, 1vw, 0.82rem);
    letter-spacing: 0.1em;
}

.sd-login-card {
    background-color: rgba(31, 44, 51, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2rem;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 440px;
    padding: 2.5rem;
}

@media (max-height: 900px) {
    .sd-login-stack { gap: 0.5rem; }
    .sd-login-card { padding: 1.75rem 2rem; border-radius: 1.5rem; }
    .sd-login-brand-name { font-size: 2.2rem; }
    .sd-login-brand-icon { width: 48px; height: 48px; }
    .sd-login-powered { font-size: 0.75rem; }
}

@media (max-height: 760px) {
    .sd-login-right { align-items: flex-start; overflow-y: auto; }
    .sd-login-stack { margin-block: 0.75rem; }
    .sd-login-card { padding: 1.25rem 1.75rem; }
}

.sd-login-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--sd-green), #00ceab);
    border-radius: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sd-tab-bar {
    background-color: var(--sd-dark-bg);
    border-radius: 0.75rem;
    padding: 0.3rem;
    display: flex;
    gap: 0.25rem;
    margin-bottom: 2rem;
}

.sd-tab {
    flex: 1;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--sd-muted);
    border-radius: 0.6rem;
    padding: 0.6rem;
    font-weight: 600;
    text-decoration: none;
}

.sd-tab.active {
    background-color: var(--sd-green);
    color: #fff;
}

.sd-ai-card {
    background-color: var(--sd-panel);
    border: 1px solid var(--sd-border);
    border-radius: 1rem;
    color: var(--sd-text-primary);
}

.sd-bg-gradient {
    background: linear-gradient(135deg, var(--sd-dark-bg) 0%, #0a1014 100%);
    min-height: 100vh;
}

/* ── App Shell ───────────────────────────────────── */
.sd-app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ── Nav sidebar ─────────────────────────────────── */
.sd-app-shell {
    display: flex;
    height: 100vh;
    width: 100vw;
    background-color: var(--sd-workspace-bg, var(--sd-dark-bg));
    color: var(--sd-text-primary);
    overflow: hidden;
}

.sd-nav {
    width: 76px;
    background-color: var(--sd-nav-bg, var(--sd-panel));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    border-right: 1px solid var(--sd-border);
    flex-shrink: 0;
}

.sd-nav-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--sd-muted);
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sd-nav-icon span { 
    font-size: .65rem; 
    margin-top: 2px;
    font-weight: 500;
}

.sd-nav-icon:hover,
.sd-nav-icon.active {
    transform: scale(1.05);
}

/* ── Mobile Sidebar Overlays ── */
@media (max-width: 768px) {
    .sd-nav {
        position: fixed;
        left: -110px;
        width: 104px;
        height: 100%;
        z-index: 1050;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: var(--sd-nav-bg, var(--sd-panel)) !important;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .sd-nav.sd-nav-mobile-show {
        left: 0;
        box-shadow: 10px 0 30px rgba(0,0,0,0.5);
    }
}

/* ── Chat sidebar ────────────────────────────────── */
.sd-chat-sidebar {
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    background-color: var(--sd-contact-bg, var(--sd-panel));
    border-right: 1px solid var(--sd-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sd-sidebar-header {
    background-color: var(--sd-header-bg);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sd-search-input {
    background-color: var(--sd-input-bg, var(--sd-dark-bg));
    border: none;
    border-radius: 0.5rem;
    color: var(--sd-text-primary);
    padding: 0.5rem 1rem;
    width: 100%;
}

.sd-search-input::placeholder {
    color: var(--sd-muted);
}

.sd-search-input:focus {
    outline: none;
    box-shadow: none;
    background-color: var(--sd-input-bg, var(--sd-dark-bg));
    color: var(--sd-text-primary);
}

.sd-convo-item {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sd-border);
    cursor: pointer;
    transition: background 0.1s;
}

.sd-convo-item:hover,
.sd-convo-item.active {
    background-color: var(--sd-header-bg);
}

/* ── Chat view ───────────────────────────────────── */
.sd-conversation-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--sd-workspace-bg, var(--sd-chat-bg));
}

.sd-chat-header {
    background-color: var(--sd-header-bg);
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--sd-border);
}

.sd-messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column-reverse;
    background-color: #0b141a;
    background-image: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)), url('../chat-wallpaper-stardialog-dark-v2.png');
    background-repeat: repeat;
    background-size: 100% 100%, 540px auto;
    background-position: center;
    opacity: 1;
    transition: background-image 0.3s ease-in-out;
}

[data-theme="light"] .sd-messages-area {
    background-color: #efeae2;
    background-image: url('../chat-wallpaper-stardialog-light-v2.png');
    background-repeat: repeat;
    background-size: 540px auto;
    background-position: center;
}

[data-chat-wallpaper="neon"] .sd-messages-area {
    background-color: #0b141a;
    background-image: url('../whatsapp_doodle_desktop_1920x1080_1786386563825.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

[data-theme="light"][data-chat-wallpaper="neon"] .sd-messages-area,
[data-theme="light"] [data-chat-wallpaper="neon"] .sd-messages-area {
    background-color: #efeae2;
    background-image: url('../whatsapp_doodle_desktop_1920x1080_1786387515360.png');
}

.sd-compose-bar {
    background-color: var(--sd-header-bg);
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
}

.sd-compose-input {
    flex: 1;
    border: none;
    border-radius: 1.5rem;
    background: var(--sd-dark-bg);
    color: var(--sd-text-primary);
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
}

.sd-compose-input:focus {
    outline: none;
}

.sd-compose-input::placeholder {
    color: var(--sd-muted);
}

/* ── Bubbles ─────────────────────────────────────── */
.sd-bubble {
    max-width: 75%;
    margin-bottom: 4px;
}

.sd-bubble.out {
    background-color: var(--sd-bubble-out);
    align-self: flex-end;
    border-radius: 0.75rem 0 0.75rem 0.75rem;
    padding: 0.4rem 0.75rem;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    color: var(--sd-text-primary);
}

.sd-bubble.in {
    background-color: var(--sd-bubble-in);
    align-self: flex-start;
    border-radius: 0 0.75rem 0.75rem 0.75rem;
    padding: 0.4rem 0.75rem;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    color: var(--sd-text-primary);
}

.sd-bubble-time {
    font-size: 0.65rem;
    color: #8696a0;
}

/* ── Avatar ──────────────────────────────────────── */
.sd-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--sd-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ── Unread badge ────────────────────────────────── */
.sd-unread-badge {
    background-color: var(--sd-green-light);
    color: #fff;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 1rem; font-weight: 700;
    font-weight: 700;
}

/* ── Standardized Dark Card ──────────────────────── */
.card-sd-dark {
    background-color: var(--sd-panel) !important;
    border: 1px solid var(--sd-border) !important;
    border-radius: 1rem !important;
    color: var(--sd-text-primary) !important;
}

.card-sd-dark .form-label {
    color: var(--sd-muted) !important;
}

.card-sd-dark .text-white {
    color: var(--sd-text-primary) !important;
}

/* ── Standardized Onboarding Background ─────────── */
.onboarding-container {
    background: linear-gradient(135deg, var(--sd-dark-bg) 0%, #0a1014 100%) !important;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── Ally Sidebar ────────────────────────────────── */
.sd-ally-panel {
    width: 630px;
    background-color: var(--sd-panel);
    border-left: 1px solid var(--sd-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease;
}

/* ── Floating AI Cards (Login Page) ──────────────── */
.floating-ai-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.floating-ai-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 1.25rem;
    padding: 1rem;
    width: 280px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.4);
    animation: float-around 20s infinite ease-in-out;
    opacity: 0.9;
}

.ai-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.ai-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sd-green);
    object-fit: contain;
    padding: 2px;
}

.ai-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #111b21;
}

.ai-card-body {
    font-size: 0.8rem;
    color: #4a5568;
    line-height: 1.4;
    position: relative;
    padding: 0.5rem;
    background: rgba(0, 168, 132, 0.05);
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 168, 132, 0.1);
}

@keyframes float-around {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) rotate(2deg);
    }

    50% {
        transform: translateY(-10px) rotate(-1deg);
    }

    75% {
        transform: translateY(-30px) rotate(1deg);
    }
}

.ai-1 {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.ai-2 {
    top: 45%;
    right: 15%;
    animation-delay: -5s;
    width: 300px;
}

.ai-3 {
    bottom: 15%;
    left: 20%;
    animation-delay: -10s;
}

/* ── Branding Block (Login Page) ────────────────── */
.sd-branding-top-right {
    position: absolute;
    top: 3rem;
    right: 3.5rem;
    z-index: 10;
    pointer-events: none;
    text-align: right;
}

.sd-branding-top-right .h2 {
    letter-spacing: -0.02em;
}

/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
}

/* ── Media Previews (Anti-Gravity) ──────────────── */
.sd-media-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.sd-media-container:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.sd-video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 2;
}

.sd-media-container:hover .sd-video-overlay {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(0, 0, 0, 0.6);
}

/* ── Authentic WhatsApp Voice Note / Audio Player ─────────────────── */
.sd-wa-audio-player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
    max-width: 340px;
    padding: 6px 4px 4px 4px;
    user-select: none;
}

.sd-wa-audio-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: #e9edef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.sd-wa-audio-play-btn:hover {
    transform: scale(1.08);
    opacity: 0.9;
}

.sd-wa-audio-play-btn:active {
    transform: scale(0.95);
}

.sd-wa-audio-center {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 4px;
    min-width: 140px;
}

.sd-wa-waveform-container {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 2px 0;
}

.sd-wa-waveform {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 2.5px;
}

.sd-wa-bar {
    flex: 1;
    min-width: 2.5px;
    max-width: 3.5px;
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    transition: background-color 0.1s ease;
}

.sd-wa-bar.active {
    background-color: #53bdeb; /* WhatsApp blue playback bar */
}

.bubble-outbound .sd-wa-bar {
    background-color: rgba(255, 255, 255, 0.4);
}

.bubble-outbound .sd-wa-bar.active {
    background-color: #53bdeb;
}

.sd-wa-audio-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #53bdeb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    pointer-events: none;
    transition: left 0.05s linear;
}

.sd-wa-audio-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
}

.sd-wa-audio-time {
    font-family: inherit;
    letter-spacing: 0.02em;
}

.sd-wa-audio-avatar-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.sd-wa-audio-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.sd-wa-audio-avatar-initial {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #e9edef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.sd-wa-mic-badge {
    position: absolute;
    bottom: -3px;
    left: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #202c33;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Fallback for legacy class */
.sd-audio-bubble {
    width: 100%;
    background: transparent;
    padding: 0;
}

/* ── System Animations ───────────────────────────── */
.animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-up {
    animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

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

.tracking-widest { letter-spacing: 0.2em; }
.bg-chat { background-color: var(--sd-chat-bg); }

/* ── Light mode material system: matte canvases + polished controls ── */
[data-theme="light"] {
    --sd-glass-bg: color-mix(in srgb, var(--sd-panel) 94%, transparent);
    --sd-glass-border: color-mix(in srgb, var(--sd-border) 78%, white);
    --sd-glass-shine: rgba(255, 255, 255, 0.46);
    --sd-bubble-in: #ffffff;
    --sd-bubble-out: #d9fdd3;
    --sd-elevation-soft: 0 1px 2px rgba(42, 38, 32, 0.07), 0 8px 24px rgba(42, 38, 32, 0.045);
    --sd-elevation-control: 0 1px 1px rgba(42, 38, 32, 0.10), 0 5px 14px rgba(42, 38, 32, 0.07), inset 0 1px 0 rgba(255,255,255,.82);
}

[data-theme="light"] body,
body[data-theme="light"] {
    background-color: var(--sd-canvas);
    color: var(--sd-text-primary);
}

/* Large regions stay opaque and quiet: no glaring sheets of pure white. */
[data-theme="light"] :is(.tablet-container, .sd-app-shell, .sd-conversation-view, .sd-chat-sidebar,
    .settings-sidebar, .onboarding-sidebar, .onboarding-card, .modal-content, .sd-ally-panel) {
    border-color: var(--sd-border) !important;
}

body.experience-v2[data-theme="light"] .tablet-container {
    background: var(--sd-canvas);
    border-color: color-mix(in srgb, var(--sd-border) 70%, white);
    box-shadow: 0 24px 60px -22px rgba(38, 34, 29, .24), inset 0 1px 0 rgba(255,255,255,.55);
}

[data-theme="light"] .glass-sidebar { background: var(--sd-nav-bg); }
[data-theme="light"] .glass-card,
[data-theme="light"] .card-sd-dark,
[data-theme="light"] .sd-ai-card,
[data-theme="light"] .admin-staff-row,
[data-theme="light"] .admin-number-card {
    background: var(--sd-panel) !important;
    border-color: var(--sd-border) !important;
    box-shadow: var(--sd-elevation-soft);
}

/* Compact interactive pieces get the restrained glassy shine. */
[data-theme="light"] :is(.btn, .sd-palette-card, .auth-tile, .sd-dept-select, .sd-search-area > .d-flex,
    .sd-search-input, .sd-compose-input, .form-control, .form-select, .form-control-sd) {
    border-color: var(--sd-border) !important;
    box-shadow: var(--sd-elevation-control);
}

[data-theme="light"] :is(input, textarea, .form-control, .form-select, .form-control-sd,
    .sd-search-input, .sd-compose-input, .sd-glass-select) {
    background-color: var(--sd-input-bg) !important;
    color: var(--sd-text-primary) !important;
}

[data-theme="light"] :is(input, textarea, .form-control, .form-select, .form-control-sd,
    .sd-search-input, .sd-compose-input):focus {
    border-color: color-mix(in srgb, var(--sd-primary) 55%, var(--sd-border)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-primary) 15%, transparent), var(--sd-elevation-control) !important;
}

[data-theme="light"] .glass-card:hover {
    background: color-mix(in srgb, var(--sd-panel) 96%, white) !important;
    border-color: color-mix(in srgb, var(--sd-primary) 42%, var(--sd-border));
    box-shadow: 0 12px 28px -14px rgba(42,38,32,.20), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Contacts need hierarchy without turning into a stack of white cards. */
[data-theme="light"] .sd-chat-sidebar { background: var(--sd-contact-bg) !important; }
[data-theme="light"] .sd-sidebar-header,
[data-theme="light"] .sd-chat-header,
[data-theme="light"] .sd-compose-bar { background: var(--sd-header-bg) !important; }
[data-theme="light"] .sd-convo-item {
    background: transparent;
    border-color: color-mix(in srgb, var(--sd-border) 68%, transparent) !important;
}
[data-theme="light"] .sd-convo-item:hover {
    background: color-mix(in srgb, var(--sd-primary) 7%, var(--sd-contact-bg));
}
[data-theme="light"] .sd-convo-item.active {
    background: color-mix(in srgb, var(--sd-primary) 12%, var(--sd-panel));
    box-shadow: inset 3px 0 0 var(--sd-primary);
}
[data-theme="light"] .sd-unread-badge {
    background: var(--sd-primary);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--sd-primary) 28%, transparent);
}

/* The conversation canvas is warmer than a white page and the art whispers. */
[data-theme="light"] .sd-messages-area,
[data-theme="light"][data-chat-wallpaper="neon"] .sd-messages-area,
[data-theme="light"] [data-chat-wallpaper="neon"] .sd-messages-area {
    background-color: var(--sd-workspace-bg);
    background-image:
        linear-gradient(color-mix(in srgb, var(--sd-workspace-bg) 76%, transparent), color-mix(in srgb, var(--sd-workspace-bg) 76%, transparent)),
        url('../chat-wallpaper-stardialog-light-v3.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* The same classic WhatsApp canvas used by the template phone preview. */
[data-chat-wallpaper="default"] .sd-messages-area {
    background-color: #0b141a;
    background-image: url('../WhatsappChatBgDark.jpg');
    background-repeat: repeat;
    background-size: 460px auto;
    background-position: center;
}

[data-theme="light"][data-chat-wallpaper="default"] .sd-messages-area,
[data-theme="light"] [data-chat-wallpaper="default"] .sd-messages-area {
    background-color: #efeae2;
    background-image: url('../WhatsappChatBgLight.png');
    background-repeat: repeat;
    background-size: 460px auto;
    background-position: center;
}

[data-theme="light"] :is(.sd-bubble.in, .bubble-inbound) {
    background: var(--sd-bubble-in);
    color: var(--sd-text-primary);
    border: 1px solid color-mix(in srgb, var(--sd-border) 70%, transparent);
    box-shadow: 0 1px 2px rgba(42,38,32,.09), 0 5px 16px rgba(42,38,32,.04);
}
[data-theme="light"] :is(.sd-bubble.out, .bubble-outbound) {
    background: var(--sd-bubble-out);
    color: var(--sd-text-primary);
    border: 1px solid #b9dfb4;
    box-shadow: 0 1px 2px rgba(42,38,32,.08), 0 5px 16px rgba(63, 122, 66, .06);
}
[data-theme="light"] .sd-bubble-time { color: var(--sd-muted); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ── Inspector Panel ── */
.sd-inspector-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1200px;
    width: 1200px;
    max-width: 90vw;
    z-index: 150;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--sd-panel);
    border-left: 1px solid var(--sd-border);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}
.sd-inspector-panel.open {
    right: 0;
}

.sd-inspector-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    width: 22px;
    height: 48px;
    border-radius: 8px 0 0 8px;
    padding: 0;
    background: var(--sd-panel);
    border: 1px solid var(--sd-border);
    border-right: none;
    color: var(--sd-primary);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sd-inspector-toggle.open {
    right: min(1204px, calc(90vw + 4px));
}

@media (max-width: 768px) {
    .sd-inspector-panel {
        position: absolute;
        right: -100vw;
        top: 0;
        bottom: 0;
        width: 100vw !important;
        z-index: 1050;
    }
    .sd-inspector-panel.open {
        right: 0;
    }
    .sd-inspector-toggle.open {
        right: 4px; /* Hide or keep minimal on mobile since panel covers screen */
    }
    .glass-sidebar {
        border-right: none !important;
        background: transparent !important;
    }
    .sd-chat-sidebar {
        width: 100% !important;
    }
    .sd-mobile-slide-panel {
        position: fixed;
        right: -100vw;
        top: 0;
        bottom: 0;
        width: 100vw !important;
        z-index: 1050;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: var(--sd-dark-bg);
    }
    .sd-mobile-slide-panel.open {
        right: 0;
    }
    .sd-sidebar-width {
        max-width: 100% !important;
    }
}

.sd-sidebar-width {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex-shrink: 0;
    overflow: hidden;
}

/* ── Solid Popups for Glass Theme ── */
/* Prevents transparent overlapping on modals, dropdowns, and flyouts */
body.experience-v2 .dropdown-menu,
body.experience-v2 .modal-content,
body.experience-v2 .sd-inspector-panel,
body.experience-v2 .sd-select-dropdown,
body.experience-v2 .offcanvas,
body.experience-v2 .popover,
body.experience-v2 .sd-flyout {
    background-color: #121216 !important; /* Solid dark */
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.experience-v2[data-theme="light"] .dropdown-menu,
body.experience-v2[data-theme="light"] .modal-content,
body.experience-v2[data-theme="light"] .sd-inspector-panel,
body.experience-v2[data-theme="light"] .sd-select-dropdown,
body.experience-v2[data-theme="light"] .offcanvas,
body.experience-v2[data-theme="light"] .popover,
body.experience-v2[data-theme="light"] .sd-flyout {
    background-color: #ffffff !important; /* Solid light */
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── Custom File Input Button ── */
.form-control-sd::file-selector-button {
    background-color: var(--sd-primary);
    color: var(--sd-dark);
    border: none;
    border-radius: 4px;
    margin-right: 1rem;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    font-weight: 500;
}
.form-control-sd::file-selector-button:hover {
    opacity: 0.9;
}
@media (max-width: 768px) {
    .sd-messages-area {
        background-image: url('../whatsapp_doodle_mobile_1080x1920_1786386563825.png') !important;
    }
    [data-theme="light"] .sd-messages-area {
        background-image: url('../whatsapp_doodle_mobile_1080x1920_1786387515360.png') !important;
    }
    [data-chat-wallpaper="default"] .sd-messages-area {
        background-image: url('../WhatsappChatBgDark.jpg') !important;
        background-size: 460px auto;
    }
    [data-theme="light"][data-chat-wallpaper="default"] .sd-messages-area,
    [data-theme="light"] [data-chat-wallpaper="default"] .sd-messages-area {
        background-image: url('../WhatsappChatBgLight.png') !important;
        background-size: 460px auto;
    }
}

/* ===========================================================
   WhatsApp Flow Builder — Anti-Gravity Modern Canvas Styles
   =========================================================== */

/* Hide default clunky grid lines; use a subtle dot grid */
.e-diagram-background {
    background-color: var(--sd-canvas, #08080a) !important;
}

/* Modern glowing selection outline */
.e-diagram-selection-rect {
    stroke: var(--sd-primary, #c5a059) !important;
    stroke-width: 2px !important;
    stroke-dasharray: 0 !important;
}

/* Modernize the resize/rotation handles */
.e-diagram-resize-handle, .e-diagram-endpoint-handle {
    fill: var(--sd-panel, #1f2c33) !important;
    stroke: var(--sd-primary, #c5a059) !important;
    stroke-width: 2px !important;
    rx: 4px;
    ry: 4px;
}

/* WhatsApp Flow Node Card */
.flow-node-card {
    background: #111b21 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.flow-node-card:hover {
    border-color: var(--sd-primary, #c5a059) !important;
    box-shadow: 0 12px 30px rgba(197, 160, 89, 0.25);
}

.flow-node-header {
    background: #1f2c33 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flow-node-title {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0;
}

.flow-node-body {
    padding: 12px;
    flex-grow: 1;
    background: #111b21 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

/* Inner draggable / dropped components inside the node */
.flow-inner-comp {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.75rem;
    color: #e9edef !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.flow-inner-comp.cursor-grab {
    cursor: grab;
}

.flow-inner-comp.cursor-grab:active {
    cursor: grabbing;
}

.flow-inner-comp:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--sd-primary, #c5a059) !important;
    color: #ffffff !important;
}

/* Palette Sidebar */
.flow-palette-sidebar {
    background: var(--sd-panel, #111b21);
    border-right: 1px solid var(--sd-border, rgba(255, 255, 255, 0.08));
}

/* Hide Syncfusion Diagram position / coordinate tooltips (e.g. 'X:700 Y:110') */
.e-diagram-tooltip,
.e-tooltip-wrap.e-diagram-tooltip,
.e-diagram-point-handle-tooltip,
.e-diagram-resize-handle-tooltip,
.e-diagram-rotate-handle-tooltip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Foldable (~620px+) and Desktop Display Utilities ── */
@media (max-width: 619.98px) {
    .d-fold-flex {
        display: none !important;
    }
    .d-fold-block {
        display: none !important;
    }
    main.flex-grow-1 {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 620px) {
    .d-fold-none {
        display: none !important;
    }
    .d-fold-flex {
        display: flex !important;
    }
    .d-fold-block {
        display: block !important;
    }
    /* When on foldable/tablet, ensure sidebar is not forced to 100% */
    .sd-sidebar-width {
        width: 360px;
        max-width: 360px !important;
        min-width: 0;
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Dynamic Compact Mode for Samsung Fold 7 / Compact Dual-Pane (620px - 991px) */
@media (min-width: 620px) and (max-width: 991.98px) {
    .sd-sidebar-width.sd-sidebar-compact {
        width: clamp(220px, 33vw, 275px);
        max-width: 275px !important;
        min-width: 0 !important;
    }
}


/* Contain nested flex content while the fold inbox contracts. */
.sd-sidebar-width > .sd-chat-sidebar { width: 100% !important; max-width: 100%; min-width: 0; }
.sd-sidebar-width .conversation-scroll { min-height: 0; }
.sd-sidebar-width .sd-searchable-select { min-width: 0; }

.sd-chat-shell, .sd-chat-shell-main { min-width: 0; min-height: 0; }
@media (max-width: 991.98px) {
    .sd-chat-header > .min-w-0 { overflow: hidden; }
}