@charset "UTF-8";

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ─── Scrollbars Hidden Globally ─── */
::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

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

::-webkit-scrollbar-thumb {
    background: transparent !important;
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: none !important;
}

:root {
    --bg: #C8D5F0;
    --bg-light: #D6E0F5;
    --bg-lighter: #E0E8F7;
    --text-primary: #181A18;
    --text-dark: #181A18;
    --input-bg: rgba(180, 198, 232, 0.55);
    --input-border: rgba(160, 180, 220, 0.3);
    --icon-color: #181A18;
    --icon-muted: rgba(24, 26, 24, 0.65);
    --font-main: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    --font-serif: 'PP Editorial New', 'Newsreader', "Apple Color Emoji", "Segoe UI Emoji", serif;
    --font-chat: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

    /* Apple Liquid Glassmorphism Spec */
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.18) 100%);
    --glass-bg-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.25) 100%);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 10px 40px -10px rgba(29, 39, 59, 0.12),
                    inset 0 1px 0px rgba(255, 255, 255, 0.6),
                    inset 0 10px 20px -5px rgba(255, 255, 255, 0.2);
    --glass-blur: blur(40px) saturate(220%);
    --liquid-glow-1: transparent;
    --liquid-glow-2: transparent;
    --liquid-glow-3: transparent;

    /* ─── Butter Smooth Motion Tokens ─── */
    --ease-butter: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-quick: 140ms;
    --dur-normal: 280ms;
    --dur-fluid: 420ms;
}

html {
    scroll-behavior: smooth !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-main);
    background: var(--bg);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background-color var(--dur-fluid) var(--ease-butter), 
                color var(--dur-fluid) var(--ease-butter);
}

/* ─── Ambient Background (Glow disabled for clean minimal aesthetic) ─── */
.ambient-bg {
    display: none !important;
}

@keyframes float {
    0%, 100% { 
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; 
        transform: translate(0, 0) rotate(0deg) scale(1); 
    }
    25% { 
        border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%; 
        transform: translate(30px, -30px) rotate(90deg) scale(1.06); 
    }
    50% { 
        border-radius: 30% 70% 40% 60% / 50% 30% 70% 50%; 
        transform: translate(-15px, 15px) rotate(180deg) scale(0.94); 
    }
    75% { 
        border-radius: 58% 42% 63% 37% / 40% 60% 40% 60%; 
        transform: translate(20px, 10px) rotate(270deg) scale(1.02); 
    }
}

/* ─── Header / Nav ─── */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 40px;
    position: relative;
    z-index: 10;
}

.logo {
    font-family: var(--font-serif);
    font-size: 1.65rem;
    font-weight: 600;
    color: #000000;
    letter-spacing: 0.01em;
    cursor: default;
    user-select: none;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.menu-grid:hover {
    background: rgba(59, 79, 122, 0.08);
}

.menu-grid .dot {
    width: 5px;
    height: 5px;
    background: var(--text-primary);
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.3s ease;
}

.menu-grid:hover .dot {
    transform: scale(1.2);
    background: var(--text-dark);
}

/* ─── Main Content ─── */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    padding: 0 40px;
    margin-top: -40px;
}

.greeting {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 400;
    font-style: italic;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.5;
    padding: 12px 36px;
    cursor: default;
    user-select: none;
    will-change: transform, opacity;
    overflow: visible;
}

.greeting .gsap-char-wrap,
.greeting .gsap-word-wrap,
.greeting .gsap-char-inner {
    overflow: visible !important;
}

/* ─── Chat Input Bar ─── */
.input-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 32px 14px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.input-container {
    position: relative;
    width: 100%;
    max-width: 740px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    padding: 8px 14px 8px 10px;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, border-radius 0.2s ease;
    box-shadow: var(--glass-shadow);
    pointer-events: auto;
}

.input-container:focus-within {
    background: var(--glass-bg-hover);
    border-color: var(--text-primary);
    box-shadow: 0 8px 32px rgba(90, 111, 154, 0.15);
}

.input-disclaimer {
    font-family: var(--font-chat);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--icon-muted);
    opacity: 0.72;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    line-height: 1.25;
    margin-top: 6px;
    padding: 0 16px;
    max-width: 100%;
    transition: opacity 0.2s ease, color 0.3s ease;
}

body.dark-mode .input-disclaimer {
    color: rgba(248, 242, 237, 0.45);
}

.add-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(90, 111, 154, 0.12);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.add-btn:hover {
    background: rgba(90, 111, 154, 0.2);
    transform: rotate(90deg);
}

.chat-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-chat);
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--text-primary);
    padding: 8px 6px 8px 4px;
    caret-color: var(--text-primary);
    resize: none;
    min-height: 24px;
    max-height: 180px;
    height: 38px;
    line-height: 1.48;
    overflow-y: auto;
    scrollbar-width: none;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    box-sizing: border-box;
    display: block;
}

.chat-input::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.chat-input::placeholder {
    color: var(--icon-muted);
    font-style: italic;
}

.input-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    flex-shrink: 0;
}

.action-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: var(--icon-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.action-btn:hover {
    background: rgba(90, 111, 154, 0.1);
    color: var(--text-dark);
}

.action-btn svg {
    width: 20px;
    height: 20px;
}

/* Mic pulse animation */
.mic-btn.listening {
    color: #E74C3C;
    animation: pulse 1.5s ease-in-out infinite;
}

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

.apps-dropdown {
    position: absolute;
    top: 90px;
    right: 40px;
    width: 320px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    padding: 24px;
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
    pointer-events: none;
    z-index: 1000;
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    transform-origin: top right;
    will-change: transform, opacity;
}

.apps-dropdown-handle {
    display: none;
}

.apps-dropdown.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: all;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: 18px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-align: center;
}

.app-item:hover {
    background: rgba(59, 79, 122, 0.08);
    transform: translateY(-3px);
}

.app-logo-wrapper {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(59, 79, 122, 0.08);
    transition: all 0.25s ease;
}

.app-item:hover .app-logo-wrapper {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(59, 79, 122, 0.18);
}

.app-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.app-name {
    font-family: var(--font-chat);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.25s ease;
}

.app-item:hover .app-name {
    color: var(--text-dark);
    font-weight: 600;
}

/* Default SVG Logo styles for utility apps */
.app-logo-wrapper.default-logo {
    background: rgba(90, 111, 154, 0.1);
    color: var(--text-primary);
    border-color: rgba(90, 111, 154, 0.15);
    padding: 12px;
}

.app-item:hover .app-logo-wrapper.default-logo {
    background: rgba(90, 111, 154, 0.18);
    color: var(--text-dark);
}

.app-logo-wrapper.default-logo svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

/* Launcher Footer Card (Bottom profile and settings) */
.launcher-footer {
    margin-top: 20px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(59, 79, 122, 0.04);
}

.profile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: 1;
    padding: 6px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.profile-card:hover {
    background: rgba(255, 255, 255, 0.3);
}

.profile-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #181A18;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    overflow: hidden;
}

body.dark-mode .profile-avatar {
    background: #F8F2ED;
    color: #181A18;
}

.profile-card:hover .profile-avatar {
    transform: scale(1.05);
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}

.profile-name {
    font-family: var(--font-chat);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
}

.profile-status {
    font-family: var(--font-chat);
    font-size: 0.78rem;
    color: var(--icon-color);
    font-style: italic;
    opacity: 0.85;
}

.settings-action-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--icon-color);
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(59, 79, 122, 0.05);
}

.settings-action-btn:hover {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-dark);
    border-color: rgba(59, 79, 122, 0.2);
    transform: scale(1.05);
}

.settings-action-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: transform 0.5s ease;
}

.settings-action-btn:hover svg {
    transform: rotate(90deg);
}

/* ─── Workspace Containers ─── */
.workspace-area {
    display: none;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 40px;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.workspace-area.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.workspace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(90, 111, 154, 0.15);
    padding-bottom: 12px;
    margin-bottom: 10px;
}

.workspace-title-indicator {
    font-family: var(--font-main);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.workspace-title-indicator .workspace-title-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}

body.dark-mode .workspace-title-indicator .workspace-title-icon {
    filter: brightness(0) invert(1);
}

.exit-workspace-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(90, 111, 154, 0.1);
    border: 1px solid rgba(90, 111, 154, 0.15);
    padding: 8px 16px;
    border-radius: 30px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.exit-workspace-btn:hover {
    background: rgba(231, 76, 60, 0.15);
    color: #C0392B;
    border-color: rgba(231, 76, 60, 0.2);
}

.workspace-body {
    flex: 1;
}

/* ─── App-specific Modules UI ─── */
/* 1. Crew Styles */
.crew-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.crew-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.crew-card {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.crew-card:hover {
    background: rgba(255, 255, 255, 0.65);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(90, 111, 154, 0.08);
}

.crew-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a8c0ee, #c8d9f8);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    position: relative;
}

.crew-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.crew-status-dot.online { background-color: #2ECC71; }
.crew-status-dot.away { background-color: #F1C40F; }
.crew-status-dot.busy { background-color: #E74C3C; }

.crew-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crew-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
}

.crew-role {
    font-size: 0.85rem;
    color: var(--icon-color);
}

.crew-activity {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-primary);
    opacity: 0.8;
    margin-top: 4px;
}

.crew-feed-container {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 16px 20px;
}

.crew-feed-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.crew-feed-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crew-feed-item {
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.crew-feed-item::before {
    content: '•';
    color: var(--text-dark);
    font-weight: bold;
}

/* 2. Sparkle Styles */
.sparkle-workspace {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
    padding: 20px;
}

.sparkle-title {
    font-size: clamp(2rem, 5vw, 3rem);
    background: linear-gradient(120deg, #5A6F9A, #9A5A8F, #C06B5F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-style: italic;
    animation: textShimmer 4s ease infinite;
    padding-right: 0.15em;
    margin-right: -0.15em;
}

@keyframes textShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.sparkle-box {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 24px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(154, 90, 143, 0.1);
}

.sparkle-prompt {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--text-dark);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sparkle-btn {
    background: linear-gradient(135deg, #7A5C9A, #5A6F9A);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 30px;
    font-family: var(--font-main);
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(122, 92, 154, 0.3);
    margin-top: 15px;
}

.sparkle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(122, 92, 154, 0.4);
    filter: brightness(1.1);
}

/* 3. Conversational Module Layouts */

/* Business Styles */
.smm-calendar-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 12px 4px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.smm-calendar-scroll::-webkit-scrollbar {
    display: none;
}
.smm-post-card {
    flex: 0 0 220px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(90, 111, 154, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.smm-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(90, 111, 154, 0.1);
}
.smm-post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
}
.smm-post-platform {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.smm-post-platform.instagram {
    background: rgba(131, 58, 180, 0.12);
    color: #833ab4;
}
.smm-post-platform.facebook {
    background: rgba(24, 119, 242, 0.12);
    color: #1877f2;
}
.smm-post-image {
    width: 100%;
    height: 110px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
    background-size: cover;
    background-position: center;
}
.smm-post-caption {
    font-size: 0.82rem;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 52px;
}
.smm-approve-btn {
    background: var(--text-dark);
    color: white;
    border: none;
    padding: 8px;
    border-radius: 20px;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.smm-approve-btn:hover {
    background: var(--text-primary);
}
.smm-approve-btn.approved {
    background: #27AE60;
    cursor: default;
}

/* ─── SMM Monthly Calendar Overlay ─── */
.smm-cal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9800;
    background: rgba(10, 14, 30, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px 24px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.smm-cal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.smm-cal-modal {
    background: rgba(248, 250, 255, 0.97);
    border: 1px solid rgba(180, 195, 230, 0.4);
    border-radius: 22px;
    width: 100%;
    max-width: 780px;
    box-shadow: 0 30px 80px rgba(30, 40, 80, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    margin: auto;
}

.smm-cal-overlay.active .smm-cal-modal {
    transform: translateY(0);
}

/* Header */
.smm-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 16px;
    border-bottom: 1px solid rgba(90, 111, 154, 0.12);
    background: rgba(255, 255, 255, 0.9);
}

.smm-cal-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.smm-cal-title {
    font-family: var(--font-main);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.smm-cal-subtitle {
    font-family: var(--font-chat);
    font-size: 0.8rem;
    color: var(--icon-color);
}

.smm-cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.smm-cal-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(90, 111, 154, 0.2);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    transition: all 0.2s;
    font-family: var(--font-chat);
}

.smm-cal-nav-btn:hover {
    background: var(--text-dark);
    color: white;
    border-color: var(--text-dark);
}

.smm-cal-month-label {
    font-family: var(--font-chat);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-dark);
    min-width: 130px;
    text-align: center;
}

.smm-cal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(90, 111, 154, 0.2);
    background: rgba(255, 255, 255, 0.8);
    color: var(--icon-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    transition: all 0.2s;
}

.smm-cal-close-btn:hover {
    background: #E74C3C;
    color: white;
    border-color: #E74C3C;
}

/* Legend */
.smm-cal-legend {
    display: flex;
    gap: 16px;
    padding: 10px 24px;
    background: rgba(245, 247, 255, 0.8);
    border-bottom: 1px solid rgba(90, 111, 154, 0.08);
    flex-wrap: wrap;
}

.smm-cal-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-chat);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.smm-cal-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.smm-cal-legend-dot.approved  { background: #27AE60; }
.smm-cal-legend-dot.denied    { background: #E74C3C; }
.smm-cal-legend-dot.held      { background: #F39C12; }
.smm-cal-legend-dot.pending   { background: #BDC3D1; }
.smm-cal-legend-dot.scheduled { background: #3B82F6; }

/* Day-of-week header row */
.smm-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 10px 16px 4px;
    background: rgba(248, 250, 255, 0.97);
}

.smm-cal-weekday {
    text-align: center;
    font-family: var(--font-chat);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--icon-color);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 0;
}

/* Calendar grid */
.smm-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 4px 16px 16px;
    background: rgba(248, 250, 255, 0.97);
}

.smm-cal-day {
    min-height: 78px;
    border-radius: 10px;
    border: 1.5px solid rgba(180, 195, 230, 0.2);
    background: rgba(255, 255, 255, 0.75);
    padding: 6px 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: default;
    transition: all 0.18s ease;
    position: relative;
    overflow: hidden;
}

.smm-cal-day.empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.smm-cal-day.has-post {
    cursor: pointer;
    border-color: rgba(90, 111, 154, 0.2);
}

.smm-cal-day.has-post:hover {
    border-color: var(--text-dark);
    box-shadow: 0 4px 14px rgba(59, 79, 122, 0.1);
    transform: translateY(-1px);
    z-index: 2;
}

.smm-cal-day.today {
    border-color: var(--text-dark);
    background: rgba(59, 79, 122, 0.04);
}

.smm-cal-day-num {
    font-family: var(--font-chat);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.smm-cal-day.empty .smm-cal-day-num {
    color: transparent;
}

.smm-cal-day-today-ring {
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-dark);
    color: white;
    font-family: var(--font-chat);
    font-size: 0.72rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.smm-cal-day.today .smm-cal-day-num {
    display: none;
}

.smm-cal-day.today .smm-cal-day-today-ring {
    display: flex;
}

/* Post indicator pill inside calendar cell */
.smm-cal-post-pill {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    border-radius: 5px;
    font-family: var(--font-chat);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.smm-cal-post-pill.approved {
    background: rgba(39, 174, 96, 0.12);
    color: #1e8449;
}

.smm-cal-post-pill.denied {
    background: rgba(231, 76, 60, 0.1);
    color: #c0392b;
}

.smm-cal-post-pill.held {
    background: rgba(243, 156, 18, 0.12);
    color: #9a6009;
}

.smm-cal-post-pill.pending {
    background: rgba(90, 111, 154, 0.1);
    color: var(--icon-color);
}

.smm-cal-post-pill.scheduled {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

.smm-cal-post-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.smm-cal-post-pill.approved  .smm-cal-post-dot { background: #27AE60; }
.smm-cal-post-pill.denied    .smm-cal-post-dot { background: #E74C3C; }
.smm-cal-post-pill.held      .smm-cal-post-dot { background: #F39C12; }
.smm-cal-post-pill.pending   .smm-cal-post-dot { background: #BDC3D1; }
.smm-cal-post-pill.scheduled .smm-cal-post-dot { background: #3B82F6; }

/* Multi post pills container inside calendar cell */
.smm-cal-pills-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
    overflow-y: auto;
    max-height: 54px;
    width: 100%;
    padding-right: 2px;
}
.smm-cal-pills-container::-webkit-scrollbar {
    width: 2px;
}
.smm-cal-pills-container::-webkit-scrollbar-thumb {
    background: rgba(90, 111, 154, 0.2);
    border-radius: 2px;
}

/* Platform-specific highlights for post pills */
.smm-cal-post-pill.instagram {
    border-left: 2.5px solid #E1306C;
}
.smm-cal-post-pill.facebook {
    border-left: 2.5px solid #1877F2;
}

/* Post Detail Cards inside Day Detail Panel */
.smm-cal-post-detail-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1.5px solid rgba(90, 111, 154, 0.15);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}
.smm-cal-post-detail-card:hover {
    border-color: rgba(90, 111, 154, 0.35);
    box-shadow: 0 4px 14px rgba(59, 79, 122, 0.06);
}
body.dark-mode .smm-cal-post-detail-card {
    background: rgba(30, 41, 59, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .smm-cal-post-detail-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.smm-cal-time-chip {
    font-family: var(--font-chat);
    font-size: 0.6rem;
    color: var(--icon-color);
    font-weight: 600;
    padding-left: 2px;
}

/* Day Detail Panel (slides up from bottom of modal) */
.smm-cal-detail-panel {
    border-top: 1px solid rgba(90, 111, 154, 0.12);
    background: rgba(252, 253, 255, 0.97);
    padding: 20px 24px;
    display: none;
    flex-direction: column;
    gap: 14px;
    animation: slideUpDetail 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.smm-cal-detail-panel.visible {
    display: flex;
}

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

.smm-cal-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.smm-cal-detail-title {
    font-family: var(--font-chat);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.smm-cal-detail-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--icon-color);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.18s;
}

.smm-cal-detail-close:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #E74C3C;
}

.smm-cal-detail-caption {
    font-family: var(--font-chat);
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.6;
    padding: 10px 12px;
    background: rgba(240, 244, 252, 0.7);
    border-radius: 10px;
    border-left: 3px solid var(--text-dark);
}

.smm-cal-detail-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.smm-cal-status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-family: var(--font-chat);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.smm-cal-status-badge.approved  { background: rgba(39,174,96,0.12);  color: #1e8449; }
.smm-cal-status-badge.denied    { background: rgba(231,76,60,0.1);   color: #c0392b; }
.smm-cal-status-badge.held      { background: rgba(243,156,18,0.12); color: #9a6009; }
.smm-cal-status-badge.pending   { background: rgba(90,111,154,0.1);  color: var(--icon-color); }
.smm-cal-status-badge.scheduled { background: rgba(59,130,246,0.1);  color: #1d4ed8; }

.smm-cal-timing-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.smm-cal-timing-label {
    font-family: var(--font-chat);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-dark);
}

.smm-cal-timing-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.smm-cal-timing-row input[type="date"],
.smm-cal-timing-row input[type="time"] {
    flex: 1;
    min-width: 100px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(90, 111, 154, 0.25);
    background: rgba(255, 255, 255, 0.8);
    font-family: var(--font-chat);
    font-size: 0.85rem;
    color: var(--text-dark);
    outline: none;
    transition: border-color 0.2s;
}

.smm-cal-timing-row input:focus {
    border-color: rgba(59, 79, 122, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 79, 122, 0.07);
}

.smm-cal-timing-save-btn {
    padding: 8px 18px;
    border-radius: 10px;
    border: none;
    background: var(--text-dark);
    color: white;
    font-family: var(--font-chat);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.smm-cal-timing-save-btn:hover {
    opacity: 0.85;
}

.smm-cal-action-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.smm-cal-action-btn {
    flex: 1;
    min-width: 100px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-family: var(--font-chat);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.smm-cal-action-btn.regen {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
    color: #1d4ed8;
}

.smm-cal-action-btn.regen:hover {
    background: #3B82F6;
    color: white;
    border-color: #3B82F6;
}

.smm-cal-action-btn.approve {
    background: rgba(39, 174, 96, 0.08);
    border-color: rgba(39, 174, 96, 0.3);
    color: #1e8449;
}

.smm-cal-action-btn.approve:hover {
    background: #27AE60;
    color: white;
    border-color: #27AE60;
}

.smm-cal-action-btn.deny {
    background: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.25);
    color: #c0392b;
}

.smm-cal-action-btn.deny:hover {
    background: #E74C3C;
    color: white;
    border-color: #E74C3C;
}

/* Calendar icon button in SMM dashboard header */
.smm-cal-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(90, 111, 154, 0.25);
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-dark);
    cursor: pointer;
    font-family: var(--font-chat);
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.smm-cal-icon-btn:hover {
    background: var(--text-dark);
    color: white;
    border-color: var(--text-dark);
}

.smm-cal-icon-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Dark mode overrides */
body.dark-mode .smm-cal-modal {
    background: #181A18;
    border-color: rgba(248, 242, 237, 0.12);
}

body.dark-mode .smm-cal-header {
    background: #252825;
    border-bottom-color: rgba(248, 242, 237, 0.12);
}

body.dark-mode .smm-cal-nav-btn,
body.dark-mode .smm-cal-close-btn {
    background: #282b28;
    border-color: rgba(248, 242, 237, 0.12);
    color: var(--text-primary);
}

body.dark-mode .smm-cal-weekdays,
body.dark-mode .smm-cal-grid {
    background: #181A18;
}

body.dark-mode .smm-cal-day {
    background: #252825;
    border-color: rgba(248, 242, 237, 0.1);
}

body.dark-mode .smm-cal-day.has-post:hover {
    border-color: rgba(248, 242, 237, 0.3);
}

body.dark-mode .smm-cal-legend {
    background: #252825;
}

body.dark-mode .smm-cal-detail-panel {
    background: #252825;
    border-top-color: rgba(248, 242, 237, 0.12);
}

body.dark-mode .smm-cal-detail-caption {
    background: #181A18;
    border-left-color: rgba(248, 242, 237, 0.3);
    color: var(--text-primary);
}

body.dark-mode .smm-cal-timing-row input {
    background: #181A18;
    border-color: rgba(248, 242, 237, 0.12);
    color: var(--text-dark);
}

body.dark-mode .smm-cal-icon-btn {
    background: #282b28;
    border-color: rgba(248, 242, 237, 0.12);
    color: var(--text-primary);
}


/* Toppins Product Placement Styles */
.toppins-placement-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-shadow: 0 10px 25px rgba(90, 111, 154, 0.08);
}
.toppins-preview-container {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    background: #e5e9f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(90,111,154,0.1);
}
.toppins-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.toppins-overlay-item {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    transition: transform 0.1s ease;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.toppins-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.toppins-control-btn {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(90,111,154,0.2);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-dark);
    transition: all 0.3s ease;
}
.toppins-control-btn:hover {
    background: var(--text-dark);
    color: white;
}

/* Sparkle Variations Styles */
.sparkle-variations {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 4px;
}
.sparkle-variations::-webkit-scrollbar {
    display: none;
}
.sparkle-variation-card {
    flex: 0 0 160px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(90, 111, 154, 0.05);
    transition: transform 0.3s ease;
}
.sparkle-variation-card:hover {
    transform: translateY(-2px);
}
.sparkle-variation-image {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.sparkle-variation-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sparkle-var-btn {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(90,111,154,0.15);
    padding: 5px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-dark);
    transition: all 0.2s ease;
}
.sparkle-var-btn:hover {
    background: var(--text-dark);
    color: white;
}

/* Crew Employee Styles */
.crew-employee-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.crew-employee-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-family: var(--font-main);
    color: var(--text-dark);
}
.crew-employee-info {
    display: flex;
    flex-direction: column;
}
.crew-employee-name {
    font-weight: 700;
    font-size: 0.98rem;
}
.crew-employee-role {
    font-size: 0.82rem;
    color: var(--icon-color);
}
.crew-employee-status {
    font-size: 0.78rem;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.crew-employee-status.active {
    background: rgba(46, 204, 113, 0.12);
    color: #27ae60;
}
.crew-employee-status.absent {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
}

/* Veshup Try-On Styles */
.veshup-tryon-container {
    display: flex;
    gap: 16px;
    align-items: center;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 18px;
    padding: 16px;
    margin-top: 10px;
}
.veshup-tryon-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--text-primary), var(--text-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.veshup-tryon-divider {
    font-size: 1.2rem;
    color: var(--icon-muted);
}
.veshup-tryon-clothing {
    flex: 1;
    height: 80px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.2);
}

/* WhatsApp Toast Notification */
.whatsapp-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    background: #075E54;
    color: #ffffff;
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 320px;
    font-family: var(--font-chat);
    transform: translateY(180%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}
.whatsapp-toast.active {
    transform: translateY(0);
    opacity: 1;
}
.whatsapp-toast-icon {
    width: 24px;
    height: 24px;
    fill: #25D366;
    flex-shrink: 0;
    margin-top: 2px;
}
.whatsapp-toast-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.whatsapp-toast-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #25D366;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.whatsapp-toast-msg {
    font-size: 0.88rem;
    line-height: 1.4;
}

/* 4. TrustScore Styles */
.trust-workspace {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trust-kpis {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

@media (max-width: 600px) {
    .trust-kpis { grid-template-columns: 1fr; }
}

.trust-score-card {
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
}

.trust-score-circle {
    width: 110px;
    height: 110px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.trust-score-circle circle {
    fill: none;
    stroke-width: 8;
}

.trust-score-circle .circle-bg {
    stroke: rgba(90, 111, 154, 0.1);
}

.trust-score-circle circle-fill {
    stroke: #2ECC71;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 1.5s ease-out;
    stroke-linecap: round;
}

.trust-score-val {
    position: absolute;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
}

.trust-score-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.trust-status-text {
    font-size: 0.9rem;
    color: #2ECC71;
    font-weight: bold;
}

.trust-audit-card {
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.audit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.audit-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.audit-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2ECC71;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
}

.audit-check.pending {
    background: rgba(90, 111, 154, 0.15);
    color: var(--icon-muted);
}

.scan-btn {
    background: #27AE60;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-family: var(--font-main);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(39, 174, 96, 0.2);
    align-self: flex-start;
}

.scan-btn:hover {
    background: #219653;
    transform: translateY(-1px);
}

.scan-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(90, 111, 154, 0.1);
    border-radius: 3px;
    overflow: hidden;
    display: none;
}

.scan-progress-fill {
    height: 100%;
    background: #2ECC71;
    width: 0%;
    transition: width 0.1s linear;
}

/* 5. Veshup Styles */
.veshup-workspace {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.veshup-palette-card {
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.veshup-palette-row {
    display: flex;
    width: 100%;
    height: 80px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(90, 111, 154, 0.1);
}

.palette-swatch {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 8px;
    cursor: pointer;
    transition: flex-grow 0.3s ease;
    position: relative;
}

.palette-swatch:hover {
    flex-grow: 1.3;
}

.palette-swatch-hex {
    font-size: 0.75rem;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    color: #333333;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.palette-swatch:hover .palette-swatch-hex {
    opacity: 1;
}

.veshup-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.veshup-btn {
    background: var(--text-dark);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.veshup-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.veshup-btn.outline {
    background: transparent;
    border: 1px solid var(--text-dark);
    color: var(--text-dark);
}

.veshup-btn.outline:hover {
    background: rgba(59, 79, 122, 0.08);
}

.veshup-preview-panel {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    padding: 16px;
}

.veshup-preview-title {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.veshup-preview-elements {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.preview-button {
    padding: 10px 20px;
    border-radius: 30px;
    border: none;
    font-family: var(--font-main);
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.preview-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.preview-card {
    padding: 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    max-width: 200px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Sparkle Mode styling on body background */
body.sparkle-mode-active {
    background: linear-gradient(135deg, #2D1A3B, #1B233D);
    color: #E2E8F0;
    --text-primary: #B2C3E0;
    --text-dark: #FFFFFF;
    --input-bg: rgba(45, 30, 60, 0.6);
    --input-border: rgba(180, 100, 200, 0.2);
    --icon-color: #A2B3D0;
    --icon-muted: rgba(162, 179, 208, 0.55);
}

body.sparkle-mode-active .sparkle-title {
    background: linear-gradient(120deg, #A8C0EE, #F5CBA7, #F1948A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.sparkle-mode-active .logo {
    color: #FFFFFF;
}

body.sparkle-mode-active .apps-dropdown {
    background: rgba(35, 25, 55, 0.9);
    border-color: rgba(180, 100, 200, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Sparkle Mode Ambient (Disabled) */
body.sparkle-mode-active .ambient-bg {
    display: none !important;
}

/* Chat Contrast Fixes in Sparkle Mode */
body.sparkle-mode-active .message.user {
    background: transparent;
}

body.sparkle-mode-active .message.user .msg-bubble {
    background: rgba(122, 92, 154, 0.35);
    border: 1px solid rgba(180, 100, 200, 0.2);
    color: #FFFFFF;
}

body.sparkle-mode-active .message.assistant {
    background: transparent;
}

body.sparkle-mode-active .message.assistant .msg-bubble {
    color: #E2E8F0;
}

body.sparkle-mode-active .message.interactive-msg .msg-bubble {
    background: rgba(45, 30, 60, 0.45);
    border: 1px solid rgba(180, 100, 200, 0.2);
    color: #E2E8F0;
}

body.sparkle-mode-active .sparkle-box {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(180, 100, 200, 0.3);
}

body.sparkle-mode-active .sparkle-prompt {
    color: #FFFFFF;
}

body.sparkle-mode-active .system-message.enter {
    background: rgba(1, 142, 239, 0.12);
    border-color: rgba(1, 142, 239, 0.3);
    color: #018EEF;
}

body.sparkle-mode-active .system-message.exit {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.35);
    color: #ff7675;
}

body.sparkle-mode-active .input-connector-chip {
    background: rgba(122, 92, 154, 0.2);
    border-color: rgba(180, 100, 200, 0.25);
    color: #FFFFFF;
}

/* ─── Voice Wave Option (Voice Mode) ─── */
.voice-wave-container {
    display: none;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    gap: 4.5px;
    height: 38px;
    padding: 0 10px;
}

.wave-bar {
    width: 3.5px;
    height: 8px;
    background-color: var(--text-primary);
    border-radius: 3px;
    animation: none;
    transition: background-color 0.3s ease, height 0.2s ease, transform 0.2s ease;
}

body.sparkle-mode-active .wave-bar {
    background-color: var(--text-dark);
}

.input-container.voice-active .wave-bar {
    animation: soundWave 1.2s ease-in-out infinite alternate;
}

/* Staggered animation delays for the wave bars */
.input-container.voice-active .wave-bar:nth-child(1) { animation-delay: 0.1s; height: 14px; }
.input-container.voice-active .wave-bar:nth-child(2) { animation-delay: 0.4s; height: 22px; }
.input-container.voice-active .wave-bar:nth-child(3) { animation-delay: 0.2s; height: 10px; }
.input-container.voice-active .wave-bar:nth-child(4) { animation-delay: 0.6s; height: 26px; }
.input-container.voice-active .wave-bar:nth-child(5) { animation-delay: 0.3s; height: 18px; }
.input-container.voice-active .wave-bar:nth-child(6) { animation-delay: 0.5s; height: 28px; }
.input-container.voice-active .wave-bar:nth-child(7) { animation-delay: 0.1s; height: 12px; }
.input-container.voice-active .wave-bar:nth-child(8) { animation-delay: 0.7s; height: 20px; }
.input-container.voice-active .wave-bar:nth-child(9) { animation-delay: 0.3s; height: 16px; }
.input-container.voice-active .wave-bar:nth-child(10) { animation-delay: 0.5s; height: 8px; }

@keyframes soundWave {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(2.8); }
}

.voice-status-text {
    font-family: var(--font-main);
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-left: 12px;
    font-style: italic;
}

body.sparkle-mode-active .voice-status-text {
    color: var(--text-dark);
}

/* ─── Chat Messages Area (ChatGPT/Claude/Gemini Centered Style) ─── */
.chat-area {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 24px 60px;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chat-area.active {
    display: flex !important;
    visibility: visible !important;
}

/* Ensure the very last element in the chat area (message, card, or indicator) always clears the floating input bar */
.chat-area > *:last-child,
.message:last-child,
.message:last-of-type {
    margin-bottom: 140px !important;
}

.chat-area::after {
    content: '';
    display: block !important;
    width: 100%;
    height: 110px !important;
    min-height: 110px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .chat-area > *:last-child,
    .message:last-child,
    .message:last-of-type {
        margin-bottom: 90px !important;
    }
    .chat-area::after {
        height: 70px !important;
        min-height: 70px !important;
    }
}

/* ─── Chat Markdown Table Styling ─── */
.chat-table-wrapper {
    width: 100%;
    margin: 14px 0 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .chat-table-wrapper,
body.dark-theme .chat-table-wrapper {
    background: rgba(26, 29, 36, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.chat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left;
}

.chat-table th {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-dark, #181A18);
    font-weight: 600;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

[data-theme="dark"] .chat-table th,
body.dark-theme .chat-table th {
    background: rgba(255, 255, 255, 0.06);
    color: #F0F2F5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.chat-table td {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-primary, #2A2E2B);
    vertical-align: top;
}

[data-theme="dark"] .chat-table td,
body.dark-theme .chat-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #D1D5DB;
}

.chat-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}

[data-theme="dark"] .chat-table tbody tr:nth-child(even),
body.dark-theme .chat-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.chat-table tbody tr:last-child td {
    border-bottom: none;
}

/* Each message row is centered inside the 780px reading column */
.message {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 10px 0;
    font-family: var(--font-chat);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.75;
    opacity: 1;
    transform: none;
    filter: none;
    display: flex;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Instant clean render: guaranteed stable layout during scroll */
.message.no-anim,
.chat-area.initial-render .message {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.chat-area.initial-render {
    scroll-behavior: auto !important;
}

/* User message: right-aligned inside the centered 780px column */
.message.user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    align-self: center;
    padding: 8px 0;
    gap: 8px;
    width: 100%;
}

.message.user .msg-bubble {
    background: #181A18;
    color: #F8F2ED;
    padding: 12px 20px;
    border-radius: 20px 20px 6px 20px;
    max-width: 78%;
    font-size: 0.975rem;
    line-height: 1.6;
    word-wrap: break-word;
    box-shadow: 0 4px 20px rgba(24, 26, 24, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.dark-mode .message.user .msg-bubble {
    background: rgba(248, 242, 237, 0.12);
    color: #F8F2ED;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(248, 242, 237, 0.2);
}

/* Assistant message: left-aligned inside the centered 780px column */
.message.assistant {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: center;
    width: 100%;
    padding: 10px 0 10px 0;
}

.msg-avatar {
    display: none;
}

.message.assistant .msg-bubble {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    color: var(--text-primary);
    padding: 20px 24px;
    width: 100%;
    max-width: 100%;
    font-size: 0.985rem;
    line-height: 1.75;
    word-wrap: break-word;
    box-shadow: var(--glass-shadow);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* AI Chat Formatted Message Elements (Ultra-Premium Typography & Butler Glass Cards) */
.message.assistant .msg-bubble .chat-p {
    margin: 0 0 12px 0;
    line-height: 1.78;
    color: var(--text-primary);
    font-size: 0.985rem;
    font-weight: 400;
}
.message.assistant .msg-bubble .chat-p:last-child {
    margin-bottom: 0;
}

/* Headings & Section Titles */
.message.assistant .msg-bubble .chat-section-title {
    font-family: var(--font-main);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 22px 0 10px 0;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.message.assistant .msg-bubble .chat-section-title:first-child {
    margin-top: 2px;
}
.message.assistant .msg-bubble .chat-section-title.level-1,
.message.assistant .msg-bubble .chat-section-title.level-2 {
    font-size: 1.15rem;
    margin: 26px 0 12px 0;
}
.message.assistant .msg-bubble .chat-title-accent {
    display: inline-block;
    width: 3.5px;
    height: 16px;
    border-radius: 2px;
    background: var(--text-primary);
    flex-shrink: 0;
}

.message.assistant .msg-bubble strong {
    font-weight: 650;
    color: var(--text-primary);
}
.message.assistant .msg-bubble em {
    font-style: italic;
    color: var(--icon-muted);
}

/* Horizontal Divider */
.message.assistant .msg-bubble .chat-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin: 20px 0;
}

/* Lists */
.message.assistant .msg-bubble .chat-bullet-list,
.message.assistant .msg-bubble .chat-numbered-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.message.assistant .msg-bubble .chat-bullet-list li,
.message.assistant .msg-bubble .chat-numbered-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.68;
    color: var(--text-primary);
    font-size: 0.975rem;
}
.message.assistant .msg-bubble .chat-bullet-icon {
    display: inline-block;
    width: 5.5px;
    height: 5.5px;
    min-width: 5.5px;
    border-radius: 50%;
    background: var(--text-primary);
    margin-top: 9px;
    opacity: 0.75;
}
.message.assistant .msg-bubble .chat-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: rgba(24, 26, 24, 0.08);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.74rem;
    margin-top: 2px;
}
body.dark-mode .message.assistant .msg-bubble .chat-num-badge {
    background: rgba(248, 242, 237, 0.12);
    color: var(--text-primary);
}
.message.assistant .msg-bubble .chat-li-content {
    flex: 1;
}

/* High-Aesthetic Quote / Caption Card */
.message.assistant .msg-bubble .chat-quote-card {
    position: relative;
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid var(--glass-border);
    border-left: 3.5px solid var(--text-primary);
    border-radius: 12px;
    padding: 14px 18px 14px 16px;
    margin: 14px 0;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 2px 12px rgba(29, 39, 59, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.message.assistant .msg-bubble .chat-quote-card:hover {
    border-color: var(--text-primary);
    box-shadow: 0 4px 16px rgba(29, 39, 59, 0.08);
}
body.dark-mode .message.assistant .msg-bubble .chat-quote-card {
    background: rgba(30, 32, 30, 0.5);
    border-color: var(--glass-border);
    border-left-color: var(--text-primary);
}
.message.assistant .msg-bubble .chat-quote-body {
    flex: 1;
    font-size: 0.96rem;
    line-height: 1.72;
    color: var(--text-primary);
    font-weight: 450;
    padding-right: 28px;
}
.message.assistant .msg-bubble .chat-quote-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--icon-muted);
    cursor: pointer;
    opacity: 0.7;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: all 0.15s ease;
}
.message.assistant .msg-bubble .chat-quote-card:hover .chat-quote-copy-btn {
    opacity: 1;
}
.message.assistant .msg-bubble .chat-quote-copy-btn:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
    border-color: var(--text-primary);
}
body.dark-mode .message.assistant .msg-bubble .chat-quote-copy-btn {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--icon-muted);
}

/* Callouts */
.message.assistant .msg-bubble .chat-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 0.94rem;
    color: var(--text-primary);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
body.dark-mode .message.assistant .msg-bubble .chat-callout {
    background: rgba(30, 32, 30, 0.45);
    border-color: var(--glass-border);
    color: var(--text-primary);
}
.message.assistant .msg-bubble .chat-callout-icon {
    font-size: 1.15rem;
    line-height: 1.3;
}
.message.assistant .msg-bubble .chat-callout-content {
    flex: 1;
    line-height: 1.65;
}

/* Code Cards */
.message.assistant .msg-bubble .chat-code-card {
    background: rgba(18, 20, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin: 14px 0;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}
.message.assistant .msg-bubble .chat-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(28, 30, 28, 0.95);
    padding: 6px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.message.assistant .msg-bubble .chat-code-lang {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(248, 242, 237, 0.7);
    letter-spacing: 0.05em;
}
.message.assistant .msg-bubble .chat-code-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: rgba(248, 242, 237, 0.7);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.message.assistant .msg-bubble .chat-code-copy-btn:hover {
    color: #F8F2ED;
    background: rgba(255, 255, 255, 0.12);
}
.message.assistant .msg-bubble .chat-code-pre {
    margin: 0;
    padding: 14px 16px;
    color: #F8F2ED;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.86rem;
    line-height: 1.55;
    overflow-x: auto;
}

.message.assistant .msg-bubble .chat-inline-code {
    background: rgba(24, 26, 24, 0.07);
    color: var(--text-primary);
    border: 1px solid rgba(24, 26, 24, 0.08);
    padding: 2px 6px;
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.88em;
    font-weight: 550;
}
body.dark-mode .message.assistant .msg-bubble .chat-inline-code {
    background: rgba(248, 242, 237, 0.1);
    border-color: rgba(248, 242, 237, 0.15);
    color: var(--text-primary);
}

/* Links */
.message.assistant .msg-bubble .chat-link {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.message.assistant .msg-bubble .chat-link:hover {
    opacity: 0.75;
}

/* Live Streaming Cursor Indicator */
.chat-stream-cursor {
    display: inline-block;
    width: 6px;
    height: 15px;
    background: var(--text-primary);
    border-radius: 2px;
    vertical-align: middle;
    margin-left: 4px;
    animation: chatCursorBlink 0.6s infinite alternate;
}
@keyframes chatCursorBlink {
    0% { opacity: 0.15; transform: scaleY(0.85); }
    100% { opacity: 1; transform: scaleY(1); }
}

/* Luxury Butler Speaking Indicator (In-Phase Audio Sync) */
.chat-stream-speaking {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: var(--text-secondary);
    vertical-align: middle;
    letter-spacing: 0.2px;
}
.chat-wave-bars-mini {
    display: inline-flex;
    align-items: center;
    gap: 2.5px;
    height: 12px;
}
.chat-wave-bar {
    width: 2.5px;
    height: 10px;
    background: var(--accent-gold, #d4af37);
    border-radius: 2px;
    animation: waveBounceMini 0.8s infinite ease-in-out;
}
.chat-wave-bar:nth-child(2) { animation-delay: 0.15s; }
.chat-wave-bar:nth-child(3) { animation-delay: 0.3s; }
.chat-wave-bar:nth-child(4) { animation-delay: 0.45s; }

@keyframes waveBounceMini {
    0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* Message Actions Toolbar (Copy, Listen, Sources Badge) */
.msg-action-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 2px 0 0 0;
    width: 100%;
    justify-content: flex-start;
    opacity: 0.92;
    transition: opacity 0.2s ease;
}

.message.assistant:hover .msg-action-toolbar {
    opacity: 1;
}

.msg-sources-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 550;
    color: var(--icon-muted, rgba(24, 26, 24, 0.65));
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--glass-border);
    letter-spacing: 0.01em;
    user-select: none;
    transition: all 0.2s ease;
}

body.dark-mode .msg-sources-tag {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(248, 242, 237, 0.7);
}

.msg-sources-tag svg {
    opacity: 0.75;
    flex-shrink: 0;
}

.msg-action-btns-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.msg-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 500;
    font-family: var(--font-chat, inherit);
    color: var(--icon-muted);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.msg-action-btn:hover {
    background: var(--glass-bg-hover);
    border-color: var(--text-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.msg-action-btn:active {
    transform: translateY(0);
}

.msg-action-btn.is-speaking {
    background: var(--glass-bg-hover);
    border-color: var(--text-primary);
    color: var(--text-primary);
    font-weight: 600;
}

body.dark-mode .msg-action-btn {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--icon-muted);
}

body.dark-mode .msg-action-btn:hover {
    background: var(--glass-bg-hover);
    border-color: var(--text-primary);
    color: var(--text-primary);
}

body.dark-mode .msg-action-btn.is-speaking {
    background: var(--glass-bg-hover);
    border-color: var(--text-primary);
    color: var(--text-primary);
}

/* ─── Message Action Suggestion Chips (Logo, Refine, Audit) ─── */
.msg-logo-action-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    width: 100%;
}

.msg-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 500;
    font-family: var(--font-chat, inherit);
    color: var(--icon-muted, #64748B);
    background: var(--glass-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    backdrop-filter: var(--glass-blur, blur(10px));
    -webkit-backdrop-filter: var(--glass-blur, blur(10px));
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.msg-chip-btn svg {
    opacity: 0.75;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.msg-chip-btn:hover {
    background: var(--glass-bg-hover, rgba(0, 0, 0, 0.04));
    border-color: var(--text-primary, #181A18);
    color: var(--text-primary, #181A18);
    transform: translateY(-1px);
}

.msg-chip-btn:hover svg {
    opacity: 1;
    transform: scale(1.08);
}

.msg-chip-btn:active {
    transform: translateY(0);
}

body.dark-mode .msg-chip-btn {
    background: var(--glass-bg, rgba(255, 255, 255, 0.04));
    border-color: var(--glass-border, rgba(255, 255, 255, 0.1));
    color: var(--icon-muted, #94A3B8);
}

body.dark-mode .msg-chip-btn:hover {
    background: var(--glass-bg-hover, rgba(255, 255, 255, 0.08));
    border-color: var(--text-primary, #F8FAFC);
    color: var(--text-primary, #F8FAFC);
}

/* Interactive card messages (forms, dashboards) */
.message.interactive-msg {
    align-self: center;
    width: 100%;
    max-width: 780px;
    margin: 10px auto;
    padding: 10px 0;
    scroll-margin-bottom: 140px;
}

.message.interactive-msg .msg-bubble {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 18px 20px;
    width: 100%;
    max-width: 100%;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect on rows */
.message:hover {
    background: rgba(59, 79, 122, 0.015);
}

.message.user:hover {
    background: transparent;
}

/* ─── Chat Message Slide In Animation ─── */
@keyframes chatMessageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typing indicator - centered inside reading column and aligned with assistant flow */
.typing-indicator {
    display: flex;
    width: 100%;
    max-width: 780px;
    margin: 8px auto 16px auto;
    padding: 4px 0;
    align-items: center;
    box-sizing: border-box;
    opacity: 1;
    animation: chatMessageSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.typing-pill-standard {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 20px;
    background: var(--glass-bg, rgba(255, 255, 255, 0.85));
    backdrop-filter: var(--glass-blur, blur(16px));
    -webkit-backdrop-filter: var(--glass-blur, blur(16px));
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    border-radius: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.typing-pill-standard .typing-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--text-primary, #181A18);
    border-radius: 50%;
    animation: typingPulse 1.25s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.typing-pill-standard .typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-pill-standard .typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-pill-standard .typing-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingPulse {
    0%, 60%, 100% {
        transform: translateY(0) scale(0.85);
        opacity: 0.35;
    }
    30% {
        transform: translateY(-5px) scale(1.18);
        opacity: 1;
    }
}

/* ─── Special Live Deep Research Loading Indicator (Butler Liquid Glass) ─── */
.typing-indicator.research-active {
    display: flex;
    width: 100%;
    max-width: 780px;
    margin: 8px auto 18px auto;
    align-items: center;
    box-sizing: border-box;
    animation: chatMessageSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.research-glass-card {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--glass-shadow);
    width: auto;
    min-width: 320px;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.research-glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
    animation: researchShimmer 2.4s infinite ease-in-out;
    pointer-events: none;
}

body.dark-mode .research-glass-card::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
}

@keyframes researchShimmer {
    0% { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
}

.research-icon-wrapper {
    position: relative;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: rgba(24, 26, 24, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    flex-shrink: 0;
}

body.dark-mode .research-icon-wrapper {
    background: rgba(248, 242, 237, 0.08);
}

.research-radar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--text-primary);
    animation: researchRadarPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.6;
    pointer-events: none;
}

@keyframes researchRadarPing {
    0% { transform: scale(0.7); opacity: 0.9; }
    80%, 100% { transform: scale(1.6); opacity: 0; }
}

.research-radar-svg {
    width: 18px;
    height: 18px;
    color: var(--text-primary);
    animation: researchGlobeSpin 12s linear infinite;
}

@keyframes researchGlobeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.research-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.research-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.research-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1;
}

.research-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background: #018EEF;
    box-shadow: 0 0 4px rgba(1, 142, 239, 0.4);
    animation: liveBlueBlink 1.4s ease-in-out infinite;
}

@keyframes liveBlueBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}

.research-query-target {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--icon-muted);
    font-family: var(--font-main);
    line-height: 1;
}

.research-status-line {
    font-size: 0.82rem;
    font-weight: 450;
    color: var(--icon-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-main);
    line-height: 1.3;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.research-bars-pulse {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 14px;
    flex-shrink: 0;
    margin-left: 4px;
}

.research-bar {
    display: inline-block;
    width: 3px;
    background: var(--text-primary);
    border-radius: 2px;
    animation: researchBarBounce 1.2s ease-in-out infinite;
}

.research-bar:nth-child(1) { animation-delay: 0s; height: 6px; }
.research-bar:nth-child(2) { animation-delay: 0.18s; height: 12px; }
.research-bar:nth-child(3) { animation-delay: 0.36s; height: 14px; }
.research-bar:nth-child(4) { animation-delay: 0.54s; height: 8px; }

@keyframes researchBarBounce {
    0%, 100% { transform: scaleY(0.4); opacity: 0.35; }
    50% { transform: scaleY(1); opacity: 0.95; }
}

/* ─── Grounded Web Sources Container ─── */
.chat-grounding-card {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
body.dark-mode .chat-grounding-card {
    background: rgba(30, 32, 30, 0.4);
    border-color: var(--glass-border);
}
.chat-grounding-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.chat-grounding-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.chat-grounding-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 550;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.18s ease;
}
.chat-grounding-pill:hover {
    background: var(--glass-bg-hover);
    border-color: var(--text-primary);
    transform: translateY(-1px);
}

/* ─── Autonomous Background Intelligence Scan & Dossier ─── */
.message.assistant.bg-intelligence-container {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    align-self: center;
    padding: 10px 0;
    box-sizing: border-box;
}

.message.assistant.bg-intelligence-container .msg-bubble {
    width: 100%;
    max-width: 100% !important;
    padding: 22px 24px !important;
    background: var(--glass-bg, rgba(255, 255, 255, 0.65)) !important;
    border: 1px solid var(--glass-border, rgba(160, 180, 220, 0.3)) !important;
    border-radius: 20px !important;
    box-shadow: var(--glass-shadow, 0 8px 32px rgba(31, 38, 135, 0.08));
    backdrop-filter: var(--glass-blur, blur(16px));
    -webkit-backdrop-filter: var(--glass-blur, blur(16px));
    color: var(--text-primary);
    box-sizing: border-box;
}

body.dark-mode .message.assistant.bg-intelligence-container .msg-bubble {
    background: var(--glass-bg, rgba(26, 28, 32, 0.75)) !important;
    border-color: var(--glass-border, rgba(255, 255, 255, 0.1)) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.bg-intel-header {
    margin-bottom: 14px;
}

.bg-intel-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    background: rgba(33, 150, 243, 0.12);
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1976D2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

body.dark-mode .bg-intel-badge {
    background: rgba(66, 165, 245, 0.18);
    border-color: rgba(66, 165, 245, 0.4);
    color: #90CAF9;
}

.pulse-radar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2196F3;
    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
    animation: radarPulse 1.6s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes radarPulse {
    0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 7px rgba(33, 150, 243, 0); }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}

.bg-intel-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0;
}

/* ─── Scanner Loader ─── */
.bg-intel-loader {
    margin-top: 10px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

body.dark-mode .bg-intel-loader {
    background: rgba(255, 255, 255, 0.04);
}

.bg-intel-scan-bar {
    height: 4px;
    width: 100%;
    background: rgba(33, 150, 243, 0.15);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.bg-intel-scan-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, transparent, #2196F3, transparent);
    border-radius: 4px;
    animation: scanSweep 1.8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scanSweep {
    0% { left: -40%; }
    100% { left: 100%; }
}

.bg-intel-status-text {
    font-size: 0.82rem;
    color: var(--icon-muted, rgba(24, 26, 24, 0.65));
    margin: 0;
    font-style: italic;
}

/* ─── Intelligence Dossier Card ─── */
.intel-dossier-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.intel-dossier-header {
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 10px;
}

.intel-dossier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: rgba(46, 125, 50, 0.12);
    border: 1px solid rgba(46, 125, 50, 0.3);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2e7d32;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

body.dark-mode .intel-dossier-badge {
    background: rgba(76, 175, 80, 0.16);
    border-color: rgba(76, 175, 80, 0.4);
    color: #81c784;
}

.intel-dossier-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* ─── Founder & Personal Connection Synergy Banner ─── */
.intel-founder-insight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%);
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 12px;
    margin: 4px 0 6px 0;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.05);
}

body.dark-mode .intel-founder-insight {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.06) 100%);
    border-color: rgba(245, 158, 11, 0.35);
}

.intel-founder-insight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.18);
    color: #d97706;
    flex-shrink: 0;
    margin-top: 1px;
}

body.dark-mode .intel-founder-insight-icon {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.24);
}

.intel-founder-insight-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.intel-founder-insight-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b45309;
}

body.dark-mode .intel-founder-insight-badge {
    color: #fbbf24;
}

.intel-founder-insight-text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-primary);
    font-weight: 450;
}

.intel-dossier-body {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.intel-dossier-text p {
    margin-bottom: 10px;
}

.intel-dossier-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

.intel-sources-container {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--glass-border);
}

.intel-sources-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--icon-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.intel-sources-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.intel-source-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    font-size: 0.74rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

body.dark-mode .intel-source-pill {
    background: rgba(255, 255, 255, 0.06);
}

.intel-source-pill:hover {
    background: var(--glass-bg-hover);
    border-color: var(--text-primary);
    transform: translateY(-1px);
}

.intel-dossier-footer {
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
}

/* ─── Concise Footprint Brief & Expandable Full Report ─── */
.intel-brief-snapshot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
}

body.dark-mode .intel-brief-snapshot {
    background: rgba(255, 255, 255, 0.04);
}

.intel-brief-intro {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.intel-brief-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.intel-brief-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

body.dark-mode .intel-brief-meta-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.intel-brief-meta-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--icon-muted);
}

.intel-brief-meta-val {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Accordion Drop Button */
.intel-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 8px;
}

body.dark-mode .intel-accordion-toggle {
    background: rgba(255, 255, 255, 0.04);
}

.intel-accordion-toggle:hover {
    background: var(--glass-bg-hover);
    border-color: var(--text-primary);
    transform: translateY(-1px);
}

.intel-accordion-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

.intel-accordion-toggle.expanded .intel-accordion-arrow {
    transform: rotate(180deg);
}

/* Collapsible container */
.intel-full-report-collapse {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    animation: fadeInSlideUp 0.25s ease;
}

body.dark-mode .intel-full-report-collapse {
    background: rgba(0, 0, 0, 0.15);
}

.intel-full-report-collapse.expanded {
    display: flex;
}

/* Structured section cards in full report */
.intel-section-card {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.dark-mode .intel-section-card {
    background: rgba(255, 255, 255, 0.03);
}

.intel-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.intel-section-content {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-primary);
    opacity: 0.95;
}

.intel-section-content ul {
    margin: 4px 0 0 16px;
    padding: 0;
}

.intel-section-content li {
    margin-bottom: 4px;
}

/* ─── Footprint Audit Minimized Drop Drawer ─── */
.footprint-drop-drawer-wrap {
    width: 100%;
    max-width: 100%;
    margin: 4px 0 10px 0;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.footprint-drawer-card {
    width: 100%;
    background: var(--glass-bg, rgba(255, 255, 255, 0.7));
    backdrop-filter: var(--glass-blur, blur(16px));
    -webkit-backdrop-filter: var(--glass-blur, blur(16px));
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .footprint-drawer-card {
    background: rgba(24, 27, 34, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.footprint-drawer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
    gap: 12px;
}

.footprint-drawer-bar:hover {
    background: rgba(0, 0, 0, 0.025);
}

body.dark-mode .footprint-drawer-bar:hover {
    background: rgba(255, 255, 255, 0.035);
}

.fdd-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.fdd-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(46, 125, 50, 0.12);
    border: 1px solid rgba(46, 125, 50, 0.3);
    color: #2e7d32;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

body.dark-mode .fdd-badge {
    background: rgba(76, 175, 80, 0.16);
    border-color: rgba(76, 175, 80, 0.4);
    color: #81c784;
}

.fdd-badge.fdd-baseline {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: #2563eb;
}

body.dark-mode .fdd-badge.fdd-baseline {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}

.fdd-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.fdd-status-tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: #15803d;
    background: rgba(34, 197, 94, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.dark-mode .fdd-status-tag {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.15);
}

.fdd-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.fdd-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary, #64748b);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.fdd-toggle-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}

body.dark-mode .fdd-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.fdd-chevron {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.footprint-drawer-card.is-open .fdd-chevron {
    transform: rotate(180deg);
}

.footprint-drawer-body {
    padding: 16px;
    border-top: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    animation: fadeInSlideDown 0.25s ease;
}

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

/* ─── Chat Multimodal Attachment Tray & Chips ─── */
.chat-attachment-preview-bar {
    width: 100%;
    max-width: 740px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--glass-shadow);
    overflow-x: auto;
    pointer-events: auto;
    scrollbar-width: thin;
    animation: fadeInSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-att-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 6px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    font-size: 0.78rem;
    color: var(--text-primary);
    max-width: 240px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
}

body.dark-mode .chat-att-chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.chat-att-chip-thumb {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.chat-att-chip-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

body.dark-mode .chat-att-chip-icon {
    background: rgba(255, 255, 255, 0.1);
}

.chat-att-chip-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    line-height: 1.25;
}

.chat-att-chip-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.chat-att-chip-meta {
    font-size: 0.68rem;
    opacity: 0.65;
}

.chat-att-chip-remove {
    background: none;
    border: none;
    color: var(--icon-muted);
    cursor: pointer;
    padding: 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    transition: all 0.15s ease;
}

.chat-att-chip-remove:hover {
    color: #e53935;
    background: rgba(229, 57, 53, 0.1);
}

/* Chat Message Rendered Attachments */
.msg-attachments-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 0;
    max-width: 100%;
}

.msg-att-img-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    max-width: 280px;
    max-height: 240px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.msg-att-img-wrap:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.msg-att-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-att-video-wrap {
    border-radius: 14px;
    overflow: hidden;
    max-width: 320px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.msg-att-video-wrap video {
    display: block;
    width: 100%;
    max-height: 240px;
    border-radius: 14px;
    background: #000;
}

.msg-att-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    font-size: 0.82rem;
    color: inherit;
    text-decoration: none;
    max-width: 280px;
    transition: background 0.2s ease;
}

body.dark-mode .msg-att-file-card {
    background: rgba(255, 255, 255, 0.08);
}

.msg-att-file-card:hover {
    background: rgba(255, 255, 255, 0.25);
}

.intel-verify-prompt {
    font-size: 0.84rem;
    font-weight: 550;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.intel-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.intel-btn-approve, .intel-btn-edit, .intel-btn-reject {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: var(--font-chat);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.intel-btn-approve {
    background: #181A18;
    color: #ffffff;
    border-color: #181A18;
}

body.dark-mode .intel-btn-approve {
    background: #ffffff;
    color: #181A18;
    border-color: #ffffff;
}

.intel-btn-approve:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.intel-btn-edit {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
    border-color: var(--glass-border);
}

body.dark-mode .intel-btn-edit {
    background: rgba(255, 255, 255, 0.08);
}

.intel-btn-edit:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.intel-btn-reject {
    background: transparent;
    color: #d32f2f;
    border-color: rgba(211, 47, 47, 0.25);
}

.intel-btn-reject:hover {
    background: rgba(211, 47, 47, 0.08);
    border-color: #d32f2f;
}

.intel-confirmed-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(46, 125, 50, 0.12);
    border: 1px solid rgba(46, 125, 50, 0.35);
    border-radius: 10px;
    color: #2e7d32;
    font-size: 0.82rem;
    font-weight: 600;
}

body.dark-mode .intel-confirmed-badge {
    background: rgba(76, 175, 80, 0.16);
    color: #81c784;
}

.intel-rejected-notice {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    color: var(--icon-muted);
    font-size: 0.82rem;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ─── Inline Edit Form ─── */
.intel-edit-form {
    padding-top: 10px;
    border-top: 1px solid var(--glass-border);
}

.intel-edit-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.intel-edit-textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-primary);
    font-family: var(--font-chat);
    font-size: 0.86rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

body.dark-mode .intel-edit-textarea {
    background: rgba(20, 22, 24, 0.7);
    border-color: rgba(255, 255, 255, 0.15);
}

.intel-edit-textarea:focus {
    border-color: #2196F3;
}

.intel-edit-actions, .intel-reject-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.intel-btn-save-edit, .intel-btn-confirm-reject {
    padding: 7px 14px;
    border-radius: 8px;
    font-family: var(--font-chat);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: #181A18;
    color: #ffffff;
}

body.dark-mode .intel-btn-save-edit {
    background: #ffffff;
    color: #181A18;
}

.intel-btn-confirm-reject {
    background: #d32f2f;
    color: #ffffff;
}

.intel-btn-cancel-edit, .intel-btn-cancel-reject {
    padding: 7px 12px;
    border-radius: 8px;
    font-family: var(--font-chat);
    font-size: 0.8rem;
    font-weight: 550;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
}

.intel-reject-confirm {
    padding: 12px 14px;
    background: rgba(211, 47, 47, 0.06);
    border: 1px solid rgba(211, 47, 47, 0.25);
    border-radius: 12px;
    margin-top: 6px;
}

.intel-reject-warning {
    font-size: 0.82rem;
    color: #d32f2f;
    margin-bottom: 8px;
    font-weight: 550;
}

/* ─── Sevorse Go Digital Banner & Card ─── */
.sevorse-go-digital-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sgd-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sgd-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: rgba(230, 81, 0, 0.12);
    border: 1px solid rgba(230, 81, 0, 0.3);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #e65100;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

body.dark-mode .sgd-badge {
    background: rgba(255, 152, 0, 0.18);
    border-color: rgba(255, 152, 0, 0.4);
    color: #ffb74d;
}

.sgd-status-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #1d4ed8;
}

body.dark-mode .sgd-status-tag {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.sgd-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.sgd-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0;
}

.sgd-promo-box,
.sgd-checklist-box {
    margin: 6px 0 2px 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

body.dark-mode .sgd-promo-box,
body.dark-mode .sgd-checklist-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.sgd-checklist-title {
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.sgd-checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.sgd-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
    color: var(--text-primary);
}

.sgd-item-icon {
    flex-shrink: 0;
    opacity: 0.75;
    color: var(--text-primary);
}

/* Fix UI mismatch: Guarantee high-contrast theme readability even if cached legacy markup has inline colors */
.sevorse-go-digital-card .sgd-promo-box,
.sevorse-go-digital-card .sgd-checklist-box {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid var(--glass-border) !important;
}

body.dark-mode .sevorse-go-digital-card .sgd-promo-box,
body.dark-mode .sevorse-go-digital-card .sgd-checklist-box {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.sevorse-go-digital-card .sgd-promo-box *,
.sevorse-go-digital-card .sgd-checklist-box * {
    color: var(--text-primary) !important;
}

/* Remove legacy Configure Brand Kit button completely */
.sevorse-go-digital-card button[onclick*="activateBusinessModule"],
.sevorse-go-digital-card button[onclick*="setBusinessStage"] {
    display: none !important;
}

.sgd-promo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.sgd-promo-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #25D366;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sgd-promo-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sgd-promo-sub {
    font-size: 0.74rem;
    color: var(--icon-muted);
}

.sgd-promo-text {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
}

.sgd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.sgd-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: #25D366;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 12px;
    font-family: var(--font-chat);
    font-size: 0.84rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28);
    transition: all 0.2s ease;
}

.sgd-btn-whatsapp:hover {
    background: #20BA56;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
}

.sgd-btn-whatsapp svg {
    flex-shrink: 0;
}

.sgd-btn-dismiss {
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: var(--font-chat);
    font-size: 0.82rem;
    font-weight: 550;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sgd-btn-dismiss:hover {
    background: rgba(0, 0, 0, 0.06);
}

body.dark-mode .sgd-btn-dismiss {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .sgd-btn-dismiss:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ─── SMM Post Action Buttons ─── */
.smm-post-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.smm-action-btn {
    flex: 1;
    padding: 7px 4px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: var(--font-chat);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.smm-action-btn.approve {
    background: rgba(39, 174, 96, 0.1);
    border-color: rgba(39, 174, 96, 0.3);
    color: #1e8449;
}

.smm-action-btn.approve:hover {
    background: #27AE60;
    color: white;
    border-color: #27AE60;
}

.smm-action-btn.approve.active {
    background: #27AE60;
    color: white;
    border-color: #27AE60;
    cursor: default;
    opacity: 0.85;
}

.smm-action-btn.deny {
    background: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.25);
    color: #c0392b;
}

.smm-action-btn.deny:hover {
    background: #E74C3C;
    color: white;
    border-color: #E74C3C;
}

.smm-action-btn.deny.active {
    background: #E74C3C;
    color: white;
    border-color: #E74C3C;
    cursor: default;
    opacity: 0.85;
}

.smm-action-btn.hold {
    background: rgba(243, 156, 18, 0.08);
    border-color: rgba(243, 156, 18, 0.25);
    color: #b7770d;
}

.smm-action-btn.hold:hover {
    background: #F39C12;
    color: white;
    border-color: #F39C12;
}

.smm-action-btn.hold.active {
    background: #F39C12;
    color: white;
    border-color: #F39C12;
    cursor: default;
    opacity: 0.85;
}

/* ─── Scheduling Card ─── */
.smm-schedule-card {
    background: rgba(240, 248, 255, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(59, 79, 122, 0.06);
}

.smm-schedule-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(59, 79, 122, 0.1);
    padding-bottom: 10px;
}

.smm-schedule-title {
    font-family: var(--font-chat);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
}

.smm-schedule-subtitle {
    font-size: 0.8rem;
    color: var(--icon-color);
    font-family: var(--font-chat);
}

.smm-schedule-platform-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.smm-platform-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1.5px solid rgba(90, 111, 154, 0.2);
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-family: var(--font-chat);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    transition: all 0.2s ease;
    user-select: none;
}

.smm-platform-toggle.selected {
    background: var(--text-dark);
    color: white;
    border-color: var(--text-dark);
}

.smm-platform-toggle img {
    width: 16px;
    height: 16px;
}

.smm-schedule-datetime {
    display: flex;
    gap: 8px;
}

.smm-schedule-datetime input {
    flex: 1;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(90, 111, 154, 0.25);
    background: rgba(255, 255, 255, 0.75);
    font-family: var(--font-chat);
    font-size: 0.85rem;
    color: var(--text-dark);
    outline: none;
}

.smm-schedule-datetime input:focus {
    border-color: rgba(59, 79, 122, 0.4);
    box-shadow: 0 0 0 3px rgba(59, 79, 122, 0.06);
}

.smm-schedule-submit-btn {
    width: 100%;
    padding: 11px;
    border-radius: 10px;
    border: none;
    background: var(--text-dark);
    color: white;
    font-family: var(--font-chat);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

.smm-schedule-submit-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ─── Animations ─── */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .header {
        padding: 24px 20px;
    }

    .logo {
        font-size: 1.45rem;
    }

    .main-content {
        padding: 0 20px;
    }

    .greeting {
        font-size: 1.9rem;
        max-width: 90%;
    }

    .input-area {
        padding: 14px 16px 20px;
    }

    .input-container {
        border-radius: 28px;
        padding: 8px 12px 8px 8px;
        position: relative;
    }

    /* Floating connector chip on tablets & mobile to guarantee full input width */
    #inputConnectorChipsContainer {
        position: absolute !important;
        bottom: calc(100% + 8px) !important;
        left: 10px !important;
        z-index: 15 !important;
        margin: 0 !important;
        pointer-events: auto !important;
        max-width: calc(100% - 20px) !important;
    }

    .input-connector-chip {
        background: var(--glass-bg) !important;
        backdrop-filter: var(--glass-blur) !important;
        -webkit-backdrop-filter: var(--glass-blur) !important;
        border: 1px solid var(--glass-border) !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
        font-size: 0.78rem !important;
        padding: 3px 8px 3px 6px !important;
    }

    .add-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        flex-shrink: 0;
    }

    .chat-input {
        min-width: 140px !important;
        font-size: 0.96rem;
        flex: 1 1 auto;
    }

    .action-btn {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }

    .action-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Responsive Live Research / Footprint Card */
    .research-glass-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 14px !important;
        gap: 10px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .research-header-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
    }

    .research-live-tag {
        font-size: 0.68rem !important;
        white-space: nowrap !important;
    }

    .research-query-target {
        font-size: 0.64rem !important;
        max-width: 130px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .research-status-line {
        font-size: 0.80rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.35 !important;
    }

    /* Premium Bottom Sheet for Mobile launcher */
    .apps-dropdown {
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 28px 28px 0 0;
        transform: translateY(100%);
        transform-origin: bottom center;
        padding: 16px 24px 36px;
        box-shadow: var(--glass-shadow);
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-bottom: none;
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, background 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
        will-change: transform, opacity;
    }

    .apps-dropdown.active {
        transform: translateY(0);
        opacity: 1;
    }

    .apps-dropdown-handle {
        display: block;
        width: 36px;
        height: 5px;
        background: rgba(90, 111, 154, 0.25);
        border-radius: 10px;
        margin: 0 auto 20px;
    }

    .chat-area {
        padding: 0 0;
        padding-bottom: 220px !important;
    }

    .message {
        padding: 8px 16px;
        font-size: 0.97rem;
    }

    .message.user .msg-bubble {
        max-width: 80%;
    }

    .workspace-area {
        padding: 16px 16px 110px;
    }

    .login-card {
        padding: 28px 24px;
        border-radius: 24px;
    }
}

@media (max-width: 480px) {
    .header {
        padding: max(8px, env(safe-area-inset-top, 8px)) 12px 6px 12px;
        gap: 6px;
    }

    .logo {
        font-size: 1.18rem;
        letter-spacing: -0.01em;
        flex-shrink: 0;
    }

    .header-tagline {
        display: none !important;
    }

    .header > div:last-child {
        gap: 6px !important;
    }

    .header-share-btn,
    .header .header-share-btn {
        display: none !important;
    }

    .theme-toggle,
    .header .theme-toggle {
        display: none !important;
    }

    #appNavRail,
    .app-nav-rail {
        display: none !important;
    }

    .menu-grid {
        padding: 6px !important;
        gap: 4px !important;
        flex-shrink: 0;
    }

    .greeting {
        font-size: 1.55rem;
        line-height: 1.3;
    }

    .input-area {
        padding: 6px 8px 10px !important;
    }

    .input-container {
        padding: 6px 8px 6px 8px !important;
        gap: 5px !important;
        border-radius: 24px !important;
    }

    .add-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex-shrink: 0 !important;
    }

    .input-actions {
        gap: 4px !important;
        margin-bottom: 2px !important;
        flex-shrink: 0 !important;
    }

    .action-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex-shrink: 0 !important;
    }

    .action-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    .chat-input {
        min-width: 110px !important;
        font-size: 0.90rem !important;
        padding: 5px 4px !important;
    }

    .input-disclaimer {
        display: none !important;
    }

    .research-query-target {
        display: none !important; /* Hide secondary research badge on mobile < 480px so title never collides */
    }

    .chat-area {
        padding: 0 0;
        padding-bottom: 140px !important;
    }

    .message {
        padding: 6px 12px;
        font-size: 0.94rem;
    }

    .message.user .msg-bubble {
        max-width: 85%;
    }

    .workspace-area {
        padding: 12px 12px 105px;
    }

    .login-card {
        padding: 24px 16px;
        border-radius: 20px;
    }

    .login-logo {
        font-size: 2.3rem;
    }

    .login-subtitle {
        font-size: 1rem;
    }

    .apps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ─── Voice Dictation Overlay ─── */
.voice-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(40, 50, 75, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.voice-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.voice-overlay-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    width: 90%;
    max-width: 500px;
    border-radius: 28px;
    padding: 32px;
    box-shadow: var(--glass-shadow);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
}

.voice-overlay.active .voice-overlay-card {
    transform: translateY(0) scale(1);
}

.voice-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.live-indicator {
    font-size: 0.85rem;
    font-weight: 700;
    color: #E74C3C;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.live-indicator.processing {
    color: #2ECC71;
}

.live-indicator.processing .live-dot {
    background-color: #2ECC71;
}

.live-indicator.speaking {
    color: #3498DB;
}

.live-indicator.speaking .live-dot {
    background-color: #3498DB;
}

.live-dot {
    width: 8px;
    height: 8px;
    background-color: #E74C3C;
    border-radius: 50%;
    display: inline-block;
    animation: voiceBlink 1.2s infinite alternate;
}

@keyframes voiceBlink {
    0% { opacity: 0.3; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.2); }
}

.voice-overlay-close {
    background: rgba(59, 79, 122, 0.08);
    border: none;
    font-size: 1.6rem;
    color: var(--text-primary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    line-height: 1;
}

.voice-overlay-close:hover {
    background: rgba(231, 76, 60, 0.15);
    color: #E74C3C;
    transform: rotate(90deg);
}

.voice-overlay-body {
    padding: 10px 0;
}

.voice-transcript {
    font-family: var(--font-main);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 500;
    color: var(--text-dark);
    min-height: 100px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    word-break: break-word;
    letter-spacing: 0.01em;
}

.voice-overlay-footer {
    margin-top: 28px;
    border-top: 1px solid rgba(90, 111, 154, 0.15);
    padding-top: 16px;
}

.voice-hint {
    font-size: 0.88rem;
    color: var(--icon-color);
}

/* ─── Equalizer Wave Animation ─── */
.eq-line {
    transform-origin: center;
    transition: transform 0.25s ease;
}

@keyframes eqWave {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(2.2);
    }
}

/* Waving animation on button hover or proximity */
.eq-btn:hover .eq-line,
.eq-btn.near-hover .eq-line {
    animation: eqWave 0.7s ease-in-out infinite;
}

.eq-btn:hover .eq-line-1, .eq-btn.near-hover .eq-line-1 { animation-delay: 0.1s; }
.eq-btn:hover .eq-line-2, .eq-btn.near-hover .eq-line-2 { animation-delay: 0.3s; }
.eq-btn:hover .eq-line-3, .eq-btn.near-hover .eq-line-3 { animation-delay: 0.5s; }
.eq-btn:hover .eq-line-4, .eq-btn.near-hover .eq-line-4 { animation-delay: 0.2s; }
.eq-btn:hover .eq-line-5, .eq-btn.near-hover .eq-line-5 { animation-delay: 0.4s; }
.eq-btn:hover .eq-line-6, .eq-btn.near-hover .eq-line-6 { animation-delay: 0.1s; }
.eq-btn:hover .eq-line-7, .eq-btn.near-hover .eq-line-7 { animation-delay: 0.3s; }

/* Staggered waving animation when Voice Mode is active */
.eq-btn.listening .eq-line {
    animation: eqWave 1.0s ease-in-out infinite;
    stroke: #E74C3C; /* turns red when active */
}

.eq-btn.listening .eq-line-1 { animation-delay: 0.15s; }
.eq-btn.listening .eq-line-2 { animation-delay: 0.35s; }
.eq-btn.listening .eq-line-3 { animation-delay: 0.55s; }
.eq-btn.listening .eq-line-4 { animation-delay: 0.25s; }
.eq-btn.listening .eq-line-5 { animation-delay: 0.45s; }
.eq-btn.listening .eq-line-6 { animation-delay: 0.15s; }
.eq-btn.listening .eq-line-7 { animation-delay: 0.35s; }

/* ─── Active Connector Badge (Header) ─── */
.active-connector-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 30px;
    background: rgba(1, 142, 239, 0.08);
    border: 1px solid rgba(1, 142, 239, 0.22);
    color: #0284C7;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 8px rgba(1, 142, 239, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.active-connector-badge:hover {
    background: rgba(1, 142, 239, 0.16);
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(1, 142, 239, 0.16);
}

/* ─── Active Modules Popover ─── */
.active-modules-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 80px;
    width: 240px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--glass-shadow);
    z-index: 1000;
    display: none;
    flex-direction: column;
    gap: 12px;
    animation: popoverFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sparkle-mode-active .active-modules-popover {
    background: rgba(35, 25, 55, 0.9);
    border-color: rgba(180, 100, 200, 0.3);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

@keyframes popoverFadeIn {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.popover-title {
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--icon-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(90, 111, 154, 0.12);
    padding-bottom: 6px;
    text-align: left;
}

body.sparkle-mode-active .popover-title {
    color: var(--text-primary);
    border-bottom-color: rgba(180, 100, 200, 0.2);
}

.popover-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.popover-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    transition: background 0.2s;
}

.popover-item:hover {
    background: rgba(90, 111, 154, 0.08);
}

body.sparkle-mode-active .popover-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.popover-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.popover-item-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
}

.popover-item-name {
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.popover-item-close {
    background: transparent;
    border: none;
    font-size: 1.15rem;
    color: var(--icon-muted);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: all 0.2s;
}

.popover-item-close:hover {
    background: rgba(231, 76, 60, 0.15);
    color: #E74C3C;
}

/* ─── Input Modules Popover ─── */
.input-modules-popover {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 0;
    width: 240px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--glass-shadow);
    z-index: 1000;
    display: none;
    flex-direction: column;
    gap: 12px;
    animation: popoverFadeInUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sparkle-mode-active .input-modules-popover {
    background: rgba(35, 25, 55, 0.92);
    border-color: rgba(180, 100, 200, 0.3);
    box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.35);
}

@keyframes popoverFadeInUp {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.active-connector-badge .badge-dot {
    width: 6px;
    height: 6px;
    background-color: #018EEF;
    border-radius: 50%;
    display: inline-block;
    animation: badgeBreathe 1.5s infinite alternate;
}

@keyframes badgeBreathe {
    0% { opacity: 0.4; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.15); }
}

/* ─── Connector Locker Badges and Active Indicators ─── */
.locked-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: rgba(30, 40, 60, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F1C40F;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.active-indicator-dot {
    position: absolute;
    top: -4px;
    left: -4px;
    background-color: #2ECC71;
    border: 2px solid #ffffff;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    z-index: 10;
}

/* ===============================================================
   BUTLER V3 — SIGNATURE LUXURY PAYWALL MODAL
   =============================================================== */

.payment-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(12, 14, 12, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.payment-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.payment-card {
    background: #FFFFFF;
    color: #181A18;
    border: 1px solid rgba(24, 26, 24, 0.09);
    border-radius: 26px;
    padding: 26px 24px 22px 24px;
    width: 92%;
    max-width: 425px;
    box-shadow: 
        0 24px 60px -12px rgba(24, 26, 24, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.04);
    transform: translateY(18px) scale(0.96);
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
    text-align: center;
    position: relative;
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    overflow: hidden;
}

.payment-card.payment-card-horizontal {
    max-width: 720px;
    width: 94%;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 26px 20px 26px;
    box-sizing: border-box;
}

.payment-overlay.active .payment-card {
    transform: translateY(0) scale(1);
}

/* Header */
.payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(24, 26, 24, 0.05);
    border: 1px solid rgba(24, 26, 24, 0.08);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 650;
    color: #181A18;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    user-select: none;
}

.payment-badge-sparkle {
    font-size: 0.75rem;
    color: #D4AF37;
    line-height: 1;
}

.payment-close {
    background: rgba(24, 26, 24, 0.05);
    border: 1px solid rgba(24, 26, 24, 0.08);
    color: #181A18;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1;
}

.payment-close:hover {
    background: rgba(24, 26, 24, 0.12);
    color: #181A18;
    transform: scale(1.06);
}

/* Connector & Hero Preview */
.connector-preview {
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
    text-align: left;
}

.payment-app-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #181A18;
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
    line-height: 1.28;
}

.butler-serif-accent {
    font-family: 'Newsreader', 'PP Editorial New', serif;
    font-style: italic;
    font-weight: 500;
}

.payment-app-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(24, 26, 24, 0.7);
    margin: 0 0 12px 0;
}

/* Clean Feature List */
.payment-features-grid {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 13px;
    background: rgba(24, 26, 24, 0.03);
    border: 1px solid rgba(24, 26, 24, 0.06);
    border-radius: 14px;
}

.pay-feat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 550;
    color: #181A18;
    line-height: 1.3;
}

.pay-feat-item svg {
    color: #181A18;
    flex-shrink: 0;
    stroke-width: 2.5;
}

/* Pricing Plans Container */
.pricing-plans-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
    text-align: left;
}

.plan-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid rgba(24, 26, 24, 0.12);
    cursor: pointer;
    user-select: none;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.plan-card:hover {
    border-color: rgba(24, 26, 24, 0.25);
    background: rgba(24, 26, 24, 0.015);
    transform: translateY(-1px);
}

.plan-card.active {
    background: rgba(24, 26, 24, 0.04);
    border-color: #181A18;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.plan-radio-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-radio-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(24, 26, 24, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: #FFFFFF;
}

.plan-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #181A18;
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plan-card.active .plan-radio-circle {
    border-color: #181A18;
    background: #FFFFFF;
}

.plan-card.active .plan-radio-dot {
    transform: scale(1);
}

.plan-info {
    display: flex;
    flex-direction: column;
}

.plan-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.plan-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.88rem;
    font-weight: 650;
    color: #181A18;
    letter-spacing: -0.01em;
}

.plan-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    color: rgba(24, 26, 24, 0.62);
    margin-top: 1px;
}

.plan-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(24, 26, 24, 0.08);
    color: #181A18;
    border: 1px solid rgba(24, 26, 24, 0.12);
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.plan-badge.best-value {
    background: rgba(212, 175, 55, 0.14);
    color: #9A7B1C;
    border-color: rgba(212, 175, 55, 0.32);
}

.plan-badge.full-suite {
    background: rgba(24, 26, 24, 0.08);
    color: #181A18;
    border-color: rgba(24, 26, 24, 0.16);
}

.plan-price-block {
    display: flex;
    align-items: baseline;
    gap: 3px;
    text-align: right;
    flex-shrink: 0;
}

.plan-price-wrap {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #181A18;
    letter-spacing: -0.02em;
}

.plan-currency {
    font-size: 0.85rem;
    font-weight: 600;
}

.plan-period {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    color: rgba(24, 26, 24, 0.55);
    font-weight: 500;
}

/* ── Horizontal 2-Column Grid Layout ── */
.pricing-plans-container.horizontal-plans-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 16px 0 20px 0;
    align-items: stretch;
}

@media (max-width: 660px) {
    .pricing-plans-container.horizontal-plans-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.plan-card.plan-col-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 18px 18px 16px 18px;
    border-radius: 18px;
    border: 1.5px solid rgba(24, 26, 24, 0.12);
    background: #FFFFFF;
    position: relative;
    text-align: left;
    transition: all 0.25s ease;
}

.plan-card.plan-col-card:hover {
    border-color: rgba(0, 102, 204, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.plan-card.plan-col-card.active {
    border-color: #0066cc;
    background: rgba(0, 102, 204, 0.02);
    box-shadow: 0 8px 28px rgba(0, 102, 204, 0.12);
}

.plan-card.plan-col-card.featured-pro {
    border-color: rgba(0, 102, 204, 0.35);
}

.plan-card.plan-col-card.featured-pro.active {
    border-color: #0066cc;
    box-shadow: 0 8px 28px rgba(0, 102, 204, 0.16);
}

.plan-pro-pill {
    position: absolute;
    top: -11px;
    right: 14px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    z-index: 3;
}

.plan-col-header {
    margin-bottom: 12px;
}

.plan-feature-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.35;
    flex: 1;
}

.plan-feature-bullets li {
    position: relative;
    padding-left: 20px;
}

.plan-feature-bullets li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #0066cc;
    font-weight: 700;
}

.plan-select-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(24, 26, 24, 0.07);
    font-size: 0.8rem;
    font-weight: 600;
    color: #181A18;
}

.plan-card.plan-col-card.active .plan-select-pill {
    color: #0066cc;
}

/* Dark Mode Overrides for Horizontal Cards */
body.dark-mode .plan-card.plan-col-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .plan-card.plan-col-card:hover {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .plan-card.plan-col-card.active {
    background: rgba(0, 102, 204, 0.12);
    border-color: #38bdf8;
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.15);
}

body.dark-mode .plan-feature-bullets {
    color: rgba(248, 242, 237, 0.75);
}

body.dark-mode .plan-feature-bullets li::before {
    color: #38bdf8;
}

body.dark-mode .plan-select-pill {
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #F8F2ED;
}

body.dark-mode .plan-card.plan-col-card.active .plan-select-pill {
    color: #38bdf8;
}

/* ── In-Card Action Buttons ── */
.plan-card-action-wrap {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.plan-card-action-wrap.pro-actions-wrap {
    gap: 7px;
}

.plan-card-btn {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 0.85rem;
    font-weight: 650;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    user-select: none;
    box-sizing: border-box;
}

.plan-card-btn.starter-btn {
    background: rgba(0, 102, 204, 0.08);
    color: #0066cc;
    border: 1px solid rgba(0, 102, 204, 0.25);
}

.plan-card-btn.starter-btn:hover:not(:disabled) {
    background: #0066cc;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}

.plan-card-btn.pro-btn.primary {
    background: linear-gradient(135deg, #0066cc, #004b99);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.28);
}

.plan-card-btn.pro-btn.primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 102, 204, 0.38);
    filter: brightness(1.05);
}

.plan-card-btn.pro-trial-btn {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1.5px solid rgba(16, 185, 129, 0.38);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 9px 12px;
    letter-spacing: -0.01em;
}

.plan-card-btn.pro-trial-btn:hover:not(:disabled) {
    background: #10B981;
    color: #FFFFFF;
    border-color: #10B981;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.plan-card-btn:disabled,
.plan-card-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.plan-card-btn.current-active {
    background: #10B981 !important;
    color: #FFFFFF !important;
    border: none !important;
    opacity: 0.95 !important;
    cursor: default !important;
}

/* ── Modal Top-Up Section ── */
.modal-topup-section {
    margin: 14px 0 16px 0;
    padding: 12px 14px;
    background: rgba(24, 26, 24, 0.025);
    border: 1px dashed rgba(24, 26, 24, 0.14);
    border-radius: 14px;
    text-align: left;
}

.modal-topup-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.modal-topup-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #181A18;
}

.modal-topup-sub {
    font-size: 0.7rem;
    color: #64748B;
}

.modal-topup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.modal-topup-pill {
    background: #FFFFFF;
    border: 1px solid rgba(24, 26, 24, 0.1);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.modal-topup-pill:hover {
    border-color: #0066cc;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 102, 204, 0.1);
}

.modal-topup-pill.popular {
    border-color: rgba(212, 175, 55, 0.45);
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(212, 175, 55, 0.04) 100%);
}

.topup-pill-badge {
    position: absolute;
    top: -8px;
    right: 8px;
    background: #D97706;
    color: #FFFFFF;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    text-transform: uppercase;
}

.topup-pill-units {
    font-size: 0.75rem;
    font-weight: 700;
    color: #181A18;
}

.topup-pill-price {
    font-size: 0.72rem;
    color: #64748B;
    font-weight: 600;
}

.topup-pill-btn {
    margin-top: 4px;
    padding: 3px 8px;
    font-size: 0.68rem;
    font-weight: 650;
    border-radius: 6px;
    background: rgba(0, 102, 204, 0.08);
    color: #0066cc;
    border: 1px solid rgba(0, 102, 204, 0.2);
    cursor: pointer;
    width: 100%;
    pointer-events: none;
}

.modal-topup-pill:hover .topup-pill-btn {
    background: #0066cc;
    color: #FFFFFF;
}

/* ── Pro Only Credits View ── */
.modal-topup-section.pro-credits-only-view {
    margin: 12px 0 16px 0;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.04) 0%, rgba(24, 26, 24, 0.02) 100%);
    border: 1.5px solid rgba(0, 102, 204, 0.22);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.06);
}

.modal-topup-section.pro-credits-only-view .modal-topup-header {
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 102, 204, 0.1);
}

.modal-topup-section.pro-credits-only-view .modal-topup-title {
    font-size: 0.96rem;
    font-weight: 750;
    color: #0066cc;
}

.modal-topup-section.pro-credits-only-view .modal-topup-sub {
    font-size: 0.78rem;
    color: #475569;
}

.modal-topup-section.pro-credits-only-view .modal-topup-grid {
    gap: 12px;
}

.modal-topup-section.pro-credits-only-view .modal-topup-pill {
    padding: 14px 12px;
    border-radius: 14px;
    gap: 4px;
}

.modal-topup-section.pro-credits-only-view .topup-pill-units {
    font-size: 0.95rem;
    font-weight: 800;
}

.modal-topup-section.pro-credits-only-view .topup-pill-price {
    font-size: 0.9rem;
    color: #0066cc;
    font-weight: 700;
}

.modal-topup-section.pro-credits-only-view .topup-pill-btn {
    margin-top: 6px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 8px;
}

/* Dark mode for topup & buttons */
body.dark-mode .modal-topup-section {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .modal-topup-section.pro-credits-only-view {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(0, 102, 204, 0.35);
}

body.dark-mode .modal-topup-section.pro-credits-only-view .modal-topup-title {
    color: #60A5FA;
}

body.dark-mode .modal-topup-section.pro-credits-only-view .modal-topup-sub {
    color: #94A3B8;
}

body.dark-mode .modal-topup-section.pro-credits-only-view .topup-pill-price {
    color: #60A5FA;
}

body.dark-mode .modal-topup-title,
body.dark-mode .topup-pill-units {
    color: #F8F2ED;
}

body.dark-mode .modal-topup-pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Mobile Responsiveness for Small Phone Screens (360x800 etc) */
@media (max-width: 660px) {
    .payment-card.payment-card-horizontal {
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 16px 14px 14px 14px;
        margin: auto;
    }

    .payment-header {
        margin-bottom: 10px;
    }

    .payment-badge {
        font-size: 0.65rem;
        padding: 4px 10px;
    }

    .connector-preview {
        margin-bottom: 10px;
    }

    .payment-app-title {
        font-size: 1.1rem;
        margin-bottom: 2px;
    }

    .payment-app-desc {
        font-size: 0.74rem;
        line-height: 1.35;
    }

    .pricing-plans-container.horizontal-plans-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 10px 0 14px 0;
    }

    .plan-card.plan-col-card {
        padding: 14px 14px 12px 14px;
        border-radius: 14px;
    }

    .plan-feature-bullets {
        margin-bottom: 10px;
        gap: 5px;
        font-size: 0.73rem;
    }

    .modal-topup-section {
        margin: 10px 0 12px 0;
        padding: 10px;
    }

    .modal-topup-grid {
        gap: 6px;
    }

    .modal-topup-pill {
        padding: 6px 4px;
    }

    .topup-pill-units {
        font-size: 0.7rem;
    }

    .topup-pill-price {
        font-size: 0.68rem;
    }

    .topup-pill-btn {
        font-size: 0.62rem;
        padding: 2px 4px;
    }

    .payment-security-badge span {
        font-size: 0.65rem;
    }
}

/* Footer Actions */
.payment-footer {
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: relative;
    z-index: 2;
}

.pay-btn {
    width: 100%;
    padding: 13px 20px;
    border-radius: 999px;
    border: 1px solid rgba(24, 26, 24, 0.1);
    background: #181A18;
    color: #F8F2ED;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(24, 26, 24, 0.18);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.pay-btn:hover {
    transform: translateY(-1px);
    background: #000000;
    box-shadow: 0 6px 20px rgba(24, 26, 24, 0.25);
}

.pay-btn:active {
    transform: scale(0.98);
}

.pay-cancel-btn {
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: rgba(24, 26, 24, 0.55);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: underline;
    text-decoration-color: transparent;
}

.pay-cancel-btn:hover {
    color: #181A18;
    text-decoration-color: rgba(24, 26, 24, 0.3);
}

.payment-security-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    color: rgba(24, 26, 24, 0.5);
    margin-top: 2px;
    user-select: none;
}

.biz-act-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.biz-act-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #007aff, #5856d6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}

.biz-act-title {
    font-family: var(--font-main);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 2px 0;
}

.biz-act-sub {
    font-family: var(--font-chat);
    font-size: 0.8rem;
    color: var(--text-primary);
    opacity: 0.75;
    margin: 0;
}

.biz-act-body p {
    font-family: var(--font-chat);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-dark);
    margin: 0 0 10px 0;
}

.biz-act-models {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}

.biz-act-models span {
    font-family: var(--font-chat);
    font-size: 0.7rem;
    font-weight: 600;
    color: #007aff;
    background: rgba(10, 132, 255, 0.08);
    border: 1px solid rgba(10, 132, 255, 0.18);
    padding: 3px 8px;
    border-radius: 12px;
}

.biz-act-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.biz-act-btn {
    font-family: var(--font-chat);
    font-size: 0.82rem;
    font-weight: 650;
    padding: 8px 14px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.biz-act-btn.primary {
    background: #007aff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.biz-act-btn.primary:hover {
    background: #006ee6;
    transform: translateY(-1px);
}

.biz-act-btn.secondary {
    background: rgba(10, 132, 255, 0.08);
    color: #007aff;
    border: 1px solid rgba(10, 132, 255, 0.2);
}

.biz-act-btn.secondary:hover {
    background: rgba(10, 132, 255, 0.14);
}

/* ─── Active Connector Chip inside Chat Input Bar ─── */
.input-connector-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 6px;
    border-radius: 20px;
    background: rgba(59, 79, 122, 0.12);
    border: 1px solid rgba(59, 79, 122, 0.2);
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-right: 4px;
    animation: chipSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
}

.input-connector-chip .chip-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.input-connector-chip .chip-close-btn {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    color: var(--icon-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.2s;
}

.input-connector-chip .chip-close-btn:hover {
    color: #E74C3C;
}

@keyframes chipSlideIn {
    0% { opacity: 0; transform: scale(0.85) translateX(-10px); }
    100% { opacity: 1; transform: scale(1) translateX(0); }
}

/* ─── Conversational System Message Logs ─── */
.system-message {
    align-self: center;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--font-main);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 30px;
    margin: 16px auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translateY(8px);
    animation: systemFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.system-message.enter {
    background: rgba(1, 142, 239, 0.08);
    border: 1px solid rgba(1, 142, 239, 0.22);
    color: #0284C7;
}

.system-message.exit {
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.25);
    color: #C0392B;
}

@keyframes systemFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Settings Panel (Chat Card) ─── */
.settings-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 6px 4px;
    text-align: left;
}

.settings-header {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(90, 111, 154, 0.15);
    padding-bottom: 10px;
    margin-bottom: 4px;
}

body.sparkle-mode-active .settings-header {
    border-bottom-color: rgba(180, 100, 200, 0.2);
}

.settings-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-label {
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
}

body.sparkle-mode-active .settings-label {
    color: #ffffff;
}

.settings-select,
.settings-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(90, 111, 154, 0.2);
    background: rgba(255, 255, 255, 0.45);
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--text-dark);
    outline: none;
    transition: all 0.25s ease;
}

.settings-select:focus,
.settings-input:focus {
    border-color: var(--text-primary);
    background: rgba(255, 255, 255, 0.7);
}

body.sparkle-mode-active .settings-select,
body.sparkle-mode-active .settings-input {
    background: rgba(45, 30, 60, 0.4);
    border-color: rgba(180, 100, 200, 0.25);
    color: #ffffff;
}

body.sparkle-mode-active .settings-select:focus,
body.sparkle-mode-active .settings-input:focus {
    border-color: #ffffff;
    background: rgba(45, 30, 60, 0.7);
}

.settings-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(90, 111, 154, 0.25);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

body.sparkle-mode-active .settings-slider::-webkit-slider-thumb {
    background: #ffffff;
}

.settings-btn {
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid rgba(231, 76, 60, 0.3);
    background: rgba(231, 76, 60, 0.08);
    color: #C0392B;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.settings-btn:hover {
    background: rgba(231, 76, 60, 0.16);
    color: #E74C3C;
    border-color: rgba(231, 76, 60, 0.4);
}

/* ChatGPT style Send Button */
.send-btn {
    background: var(--text-dark) !important;
    color: #ffffff !important;
    border-radius: 50%;
    width: 34px !important;
    height: 34px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.send-btn:hover {
    transform: scale(1.08);
    background: #000000 !important;
}

.send-btn svg {
    width: 14px;
    height: 14px;
    stroke: #ffffff;
    display: block;
}

/* Stop Response Button (ChatGPT / Claude style) */
.stop-btn {
    background: var(--text-dark, #181A18) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    border: none;
}

.stop-btn:hover {
    transform: scale(1.08);
    background: #DC2626 !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.stop-btn svg {
    width: 14px;
    height: 14px;
    fill: #ffffff;
    display: block;
}

/* Floating Stop Response Pill (appears directly above input during AI response) */
.chat-stop-response-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    margin-bottom: 10px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text-dark, #181A18);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    animation: fadeInSlideUpStop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.chat-stop-response-pill:hover {
    background: #FFFFFF;
    color: #DC2626;
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.18);
    transform: translateY(-2px);
}

.stop-pill-square {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: currentColor;
    display: inline-block;
}

/* Pricing Plan Cards */
.plan-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.4);
    border: 1.5px solid rgba(90, 111, 154, 0.15);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-card:hover {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(90, 111, 154, 0.3);
    transform: translateY(-1px);
}

.plan-card.active {
    background: rgba(255, 255, 255, 0.75);
    border-color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(59, 79, 122, 0.08);
}

/* ─── Starting Login / Signup Screen ─── */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0a0a0f url('images/auth-bg.png?v=2') no-repeat center center / cover;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Vignette gradient overlay — subtle so background image shines through */
.login-overlay::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 50% 40%, rgba(10, 10, 15, 0.15) 0%, rgba(10, 10, 15, 0.45) 100%),
        linear-gradient(180deg, rgba(10, 10, 15, 0.35) 0%, transparent 40%, rgba(10, 10, 15, 0.25) 100%);
    pointer-events: none;
    z-index: 1;
}

.login-stage-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    padding: 0 8vw;
    min-height: 100vh;
    gap: 48px;
}

/* Left Hero Branding */
.login-hero-side {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    max-width: 600px;
}

.login-hero-title {
    font-family: var(--font-serif);
    font-size: 5.5rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 20px 0;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.login-hero-subtitle {
    font-family: var(--font-main);
    font-size: 1.4rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Right Auth Card */
.login-card-side {
    flex: 0.9;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.login-card {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(20, 20, 26, 0.35) 0%, rgba(20, 20, 26, 0.15) 55%, rgba(20, 20, 26, 0.04) 100%);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    padding: 38px 34px 30px;
    width: 100%;
    max-width: 440px;
    box-shadow: 
        0 30px 80px -15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
    text-align: center;
    transform: scale(0.95);
    opacity: 0;
    animation: loginCardFadeIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

.social-login-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-social-wrap {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 4px;
}

.back-to-social-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-main);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.back-to-social-btn:hover {
    color: #ffffff;
    transform: translateX(-2px);
}

@media (max-width: 960px) {
    .login-stage-container {
        flex-direction: column;
        justify-content: center;
        gap: 32px;
        padding: 40px 24px;
        min-height: auto;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .login-hero-side {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }
    .login-hero-title {
        font-size: 3.5rem;
        margin-bottom: 12px;
    }
    .login-hero-subtitle {
        font-size: 1.15rem;
    }
    .login-card-side {
        justify-content: center;
    }
}

@keyframes loginCardFadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.login-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.05);
}

.login-logo {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    line-height: 1.1;
}

.login-subtitle {
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
    letter-spacing: 0.01em;
}

/* Login form labels & inputs — dark editorial style */
.login-overlay label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: var(--font-main) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
}

.login-overlay .settings-input,
.login-overlay input[type="email"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    transition: border-color 0.3s, background 0.3s;
}

.login-overlay .settings-input:focus,
.login-overlay input[type="email"]:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    outline: none;
}

.login-overlay .settings-input::placeholder,
.login-overlay input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

.login-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 0.98rem;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    letter-spacing: 0.005em;
}

.login-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.login-btn:active:not(:disabled) {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.14);
}

.login-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.provider-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.anon-login-btn {
    border-color: rgba(1, 142, 239, 0.35);
    background: rgba(1, 142, 239, 0.08);
    color: #38BDF8;
}

.anon-login-btn:hover:not(:disabled) {
    background: rgba(1, 142, 239, 0.16);
    border-color: rgba(1, 142, 239, 0.6);
    color: #7DD3FC;
}

.login-footer {
    font-family: var(--font-main);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.38);
    margin-top: 28px;
    line-height: 1.5;
}

.login-legal-link {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 3px;
    transition: color 0.2s, text-decoration-color 0.2s;
}

.login-legal-link:hover {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.7);
}

/* Spinner for loading state */
.spinner {
    animation: spin 1s linear infinite;
}

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

/* ─── Login/Signup Tab Toggle ─── */
.login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 28px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.login-tab {
    flex: 1;
    padding: 10px 20px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--font-main);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.01em;
}

.login-tab.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.login-tab:hover:not(.active) {
    color: rgba(255, 255, 255, 0.7);
}

/* ─── OR Divider ─── */
.login-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    width: 100%;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.login-divider span {
    font-family: var(--font-main);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* ─── Login Form Fields ─── */
.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: left;
    margin-bottom: 12px;
}

.login-form-group label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: var(--font-main) !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.02em;
}

.login-form-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 14px;
    padding: 13px 16px;
    font-size: 0.95rem;
    font-family: var(--font-main);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s, background 0.3s;
    outline: none;
}

.login-form-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.login-form-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* ─── Primary Submit Button (solid white) ─── */
.login-btn-primary {
    width: 100%;
    padding: 14px 20px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #0a0a0f;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.98rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    margin-top: 4px;
}

.login-btn-primary:hover:not(:disabled) {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.login-btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.login-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─── Mode Toggle Link ─── */
.login-mode-toggle {
    margin-top: 20px;
    font-family: var(--font-main);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

.login-mode-toggle a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s;
}

.login-mode-toggle a:hover {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* ─── Chat Segment Visual Selector Styles ─── */
.chat-selection-active .message {
    cursor: pointer !important;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-selection-active .message:hover {
    outline: 2px solid rgba(59, 79, 122, 0.4) !important;
    background-color: rgba(59, 79, 122, 0.05) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 79, 122, 0.08);
}

.chat-selection-active .message.selected-start {
    outline: 3px solid var(--text-primary) !important;
    background: rgba(59, 79, 122, 0.12) !important;
    transform: scale(1.01) translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 79, 122, 0.15);
}

.chat-selection-active .message.selected-end {
    outline: 3px solid var(--text-primary) !important;
    background: rgba(59, 79, 122, 0.12) !important;
    transform: scale(1.01) translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 79, 122, 0.15);
}

.chat-selection-active .message.selected-in-range {
    outline: 2px dashed rgba(59, 79, 122, 0.5) !important;
    background: rgba(59, 79, 122, 0.08) !important;
}

/* Floating Selector Toolbar */
.selection-toolbar {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 580px;
    background: rgba(222, 234, 254, 0.9);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 40px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 20px 40px rgba(59, 79, 122, 0.2);
    z-index: 999999;
    transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.selection-toolbar.active {
    top: 24px;
}

.selection-instructions {
    font-family: var(--font-main);
    font-size: 1.15rem;
    font-weight: 500;
    font-style: italic;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-instructions::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #E74C3C;
    border-radius: 50%;
    animation: selectionPulse 1.2s infinite;
}

@keyframes selectionPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.2); }
}

.selection-toolbar-btn {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid rgba(90, 111, 154, 0.3);
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.selection-toolbar-btn:hover {
    background: rgba(231, 76, 60, 0.12);
    color: #C0392B;
    border-color: rgba(231, 76, 60, 0.25);
    transform: translateY(-1px);
}

/* Save Chat Modal Overlay */
.save-chat-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(59, 79, 122, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.save-chat-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.save-chat-modal-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 28px;
    width: 90%;
    max-width: 420px;
    box-shadow: var(--glass-shadow);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: left;
}

.save-chat-modal-overlay.active .save-chat-modal-card {
    transform: translateY(0) scale(1);
}

.save-chat-modal-card h3 {
    font-family: var(--font-main);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.save-chat-modal-card p {
    font-family: var(--font-main);
    font-size: 1.02rem;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.4;
}

.save-chat-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.save-chat-btn {
    padding: 10px 22px;
    border-radius: 20px;
    border: none;
    background: linear-gradient(135deg, var(--text-primary), var(--text-dark));
    color: white;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(59, 79, 122, 0.2);
}

.save-chat-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 79, 122, 0.3);
}

.save-chat-cancel-btn {
    padding: 10px 22px;
    border-radius: 20px;
    border: 1px solid rgba(90, 111, 154, 0.3);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
}

.save-chat-cancel-btn:hover {
    background: rgba(90, 111, 154, 0.08);
}

/* Saved Chat segment items in settings */
.saved-chat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(90, 111, 154, 0.12);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.saved-chat-item:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(90, 111, 154, 0.25);
}

.saved-chat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    cursor: pointer;
}

.saved-chat-name {
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
}

.saved-chat-meta {
    font-family: var(--font-main);
    font-size: 0.75rem;
    color: var(--icon-muted);
}

.saved-chat-delete-btn {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: var(--icon-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 5px;
    transition: all 0.2s ease;
    line-height: 1;
}

.saved-chat-delete-btn:hover {
    color: #E74C3C;
    background: rgba(231, 76, 60, 0.08);
}

/* Floating Banner when viewing saved chat */
.saved-chat-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(59, 79, 122, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    color: white;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s ease;
}

.saved-chat-banner.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.saved-chat-banner-text {
    font-family: var(--font-main);
    font-size: 1.15rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.saved-chat-banner-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.exit-saved-chat-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.exit-saved-chat-btn:hover {
    background: white;
    color: var(--text-dark);
}

@media (max-width: 640px) {
    .saved-chat-banner {
        padding: 8px 12px;
        gap: 8px;
    }
    .saved-chat-banner-text {
        font-size: 0.82rem;
        gap: 6px;
        flex: 1;
    }
    #savedChatBannerTitle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .saved-chat-banner-badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
    .exit-saved-chat-btn {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
}

/* Cached Profile Card on Login Overlay */
.cached-profile-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-bottom: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cached-profile-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #0a0a0f;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.cached-profile-btn:hover {
    transform: translateY(-1px);
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.use-another-link {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.88rem;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    text-underline-offset: 3px;
    font-family: var(--font-main);
    cursor: pointer;
    transition: color 0.2s;
    margin-top: 4px;
    display: inline-block;
}

.use-another-link:hover {
    color: rgba(255, 255, 255, 0.7);
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.use-another-link:hover {
    color: var(--text-dark);
}


/* ═══════════════════════════════════════════════════ */
/* ─── Dark / Light Mode Toggle ─── */
/* ═══════════════════════════════════════════════════ */

.theme-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.toggle-track {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 50px;
    background: linear-gradient(135deg, #87CEEB, #FFD700);
    border: 1px solid rgba(90, 111, 154, 0.15);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
    overflow: hidden;
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

.toggle-icon {
    position: absolute;
    width: 14px;
    height: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sun-icon {
    left: 7px;
    color: #FF9F0A;
    opacity: 1;
    transform: translateY(-50%) rotate(0deg);
}

.moon-icon {
    right: 7px;
    color: #181A18; /* dark contrast color for light theme track */
    opacity: 0.55;
    transform: translateY(-50%) rotate(-30deg);
}

/* ─── Checked State (Dark Mode Active) ─── */
.theme-toggle input:checked + .toggle-track {
    background: #252825;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.theme-toggle input:checked + .toggle-track .toggle-thumb {
    left: 27px;
    background: #ffffff;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.35);
}

.theme-toggle input:checked + .toggle-track .sun-icon {
    opacity: 0.4;
    transform: translateY(-50%) rotate(45deg) scale(0.9);
    color: rgba(255, 255, 255, 0.4);
}

.theme-toggle input:checked + .toggle-track .moon-icon {
    opacity: 1;
    color: #181A18;
    transform: translateY(-50%) rotate(0deg);
}

/* Hover effect */
.theme-toggle:hover .toggle-track {
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.theme-toggle:hover .toggle-thumb {
    transform: scale(1.06);
}

/* ═══════════════════════════════════════════════════ */
/* ─── DARK MODE THEME ─── */
/* ═══════════════════════════════════════════════════ */

body.dark-mode {
    --bg: #181A18;
    --bg-light: #181A18;
    --bg-lighter: #181A18;
    --text-primary: #F8F2ED;
    --text-dark: #F8F2ED;
    --input-bg: rgba(30, 32, 30, 0.75);
    --input-border: rgba(248, 242, 237, 0.15);
    --icon-color: #F8F2ED;
    --icon-muted: rgba(248, 242, 237, 0.65);
    
    /* Apple visionOS Glass Spec */
    --glass-bg: linear-gradient(135deg, rgba(30, 32, 30, 0.6) 0%, rgba(20, 22, 20, 0.4) 100%);
    --glass-bg-hover: linear-gradient(135deg, rgba(35, 38, 35, 0.75) 0%, rgba(24, 26, 24, 0.55) 100%);
    --glass-border: rgba(248, 242, 237, 0.12);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --glass-blur: blur(30px);
    --liquid-glow-1: transparent;
    --liquid-glow-2: transparent;
    --liquid-glow-3: transparent;

    background: #181A18;
    color: #F8F2ED;
}

/* ── Logo ── */
body.dark-mode .logo {
    color: #F8F2ED;
}

/* ── Ambient Orbs (Disabled) ── */
body.dark-mode .ambient-bg {
    display: none !important;
}

/* ── Menu Grid Dots ── */
body.dark-mode .menu-grid:hover {
    background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .menu-grid .dot {
    background: var(--text-primary);
}
body.dark-mode .menu-grid:hover .dot {
    background: #F8F2ED;
}

/* ── Scrollbar ── */
body.dark-mode::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}
body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ── Input Container ── */
body.dark-mode .input-container {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}
body.dark-mode .input-container:focus-within {
    background: var(--glass-bg-hover);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
body.dark-mode .add-btn {
    background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .add-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}
body.dark-mode .action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ── Chat Messages ── */
body.dark-mode .message.user {
    background: transparent;
}
body.dark-mode .message.user .msg-bubble {
    background: rgba(248, 242, 237, 0.12);
    color: #F8F2ED;
    border: 1px solid rgba(248, 242, 237, 0.2);
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35);
}
body.dark-mode .message.assistant {
    background: transparent;
}
body.dark-mode .message.assistant .msg-bubble {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    box-shadow: var(--glass-shadow);
}
body.dark-mode .message.interactive-msg .msg-bubble {
    background: rgba(28, 30, 28, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
body.dark-mode .message:hover {
    background: rgba(255, 255, 255, 0.03);
}
body.dark-mode .message.user:hover {
    background: transparent;
}
body.dark-mode .typing-pill-standard,
body.dark-mode .research-glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}
body.dark-mode .smm-schedule-card {
    background: rgba(28, 30, 28, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
}
body.dark-mode .smm-schedule-datetime input {
    background: rgba(35, 38, 35, 0.7);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-dark);
}
body.dark-mode .smm-platform-toggle {
    background: rgba(35, 38, 35, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

/* ── Apps Dropdown ── */
body.dark-mode .apps-dropdown {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}
body.dark-mode .app-item:hover {
    background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .app-logo-wrapper.default-logo {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}
body.dark-mode .app-item:hover .app-logo-wrapper.default-logo {
    background: rgba(255, 255, 255, 0.15);
}

/* ── Launcher Footer ── */
body.dark-mode .launcher-footer {
    background: rgba(28, 30, 28, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .profile-card:hover {
    background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .settings-action-btn {
    background: rgba(35, 38, 35, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
}
body.dark-mode .settings-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ── Glass Widgets ── */
body.dark-mode .smm-post-card,
body.dark-mode .toppins-placement-card,
body.dark-mode .sparkle-variation-card,
body.dark-mode .crew-employee-row,
body.dark-mode .veshup-tryon-container {
    background: rgba(28, 30, 28, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
body.dark-mode .toppins-control-btn,
body.dark-mode .sparkle-var-btn {
    background: rgba(35, 38, 35, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    color: #F8F2ED;
}
body.dark-mode .toppins-control-btn:hover,
body.dark-mode .sparkle-var-btn:hover {
    background: #F8F2ED;
    color: #181A18;
}
body.dark-mode .toppins-preview-container {
    background: rgba(20, 22, 20, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── Crew Cards ── */
body.dark-mode .crew-card {
    background: rgba(28, 30, 28, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .crew-card:hover {
    background: rgba(35, 38, 35, 0.75);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
body.dark-mode .crew-feed-container {
    background: rgba(28, 30, 28, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── Trust Score ── */
body.dark-mode .trust-score-card,
body.dark-mode .trust-audit-card {
    background: rgba(28, 30, 28, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .audit-item {
    background: rgba(35, 38, 35, 0.5);
}

/* ── Sparkle Box ── */
body.dark-mode .sparkle-box {
    background: rgba(28, 30, 28, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── Veshup ── */
body.dark-mode .veshup-palette-card {
    background: rgba(28, 30, 28, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .veshup-preview-panel {
    background: rgba(20, 22, 20, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── Voice Overlay ── */
body.dark-mode .voice-overlay {
    background: rgba(10, 12, 10, 0.6);
}
body.dark-mode .voice-overlay-card {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}
body.dark-mode .voice-overlay-close {
    background: rgba(255, 255, 255, 0.08);
}

/* ── Payment Overlay (Bespoke Obsidian & Warm Ivory Dark Mode) ── */
body.dark-mode .payment-overlay {
    background: rgba(10, 12, 10, 0.78);
}

body.dark-mode .payment-card {
    background: linear-gradient(180deg, #1C1E1C 0%, #131513 100%);
    color: #F8F2ED;
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 
        0 24px 64px -12px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.dark-mode .payment-badge {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #F8F2ED;
}

body.dark-mode .payment-badge-sparkle {
    color: #E2C268;
}

body.dark-mode .payment-close {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(248, 242, 237, 0.7);
}

body.dark-mode .payment-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
}

body.dark-mode .payment-app-title {
    color: #F8F2ED;
}

body.dark-mode .payment-app-desc {
    color: rgba(248, 242, 237, 0.65);
}

body.dark-mode .payment-features-grid {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.07);
}

body.dark-mode .pay-feat-item {
    color: rgba(248, 242, 237, 0.9);
}

body.dark-mode .pay-feat-item svg {
    color: #E2C268;
}

body.dark-mode .plan-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.09);
}

body.dark-mode .plan-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}

body.dark-mode .plan-card.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: #F8F2ED;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

body.dark-mode .plan-radio-circle {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
}

body.dark-mode .plan-card.active .plan-radio-circle {
    border-color: #F8F2ED;
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .plan-radio-dot {
    background: #F8F2ED;
}

body.dark-mode .plan-name {
    color: #F8F2ED;
}

body.dark-mode .plan-desc {
    color: rgba(248, 242, 237, 0.55);
}

body.dark-mode .plan-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #F8F2ED;
    border-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .plan-badge.best-value {
    background: rgba(212, 175, 55, 0.18);
    color: #E2C268;
    border-color: rgba(212, 175, 55, 0.35);
}

body.dark-mode .plan-badge.full-suite {
    background: rgba(255, 255, 255, 0.1);
    color: #F8F2ED;
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .plan-price-wrap {
    color: #F8F2ED;
}

body.dark-mode .plan-period {
    color: rgba(248, 242, 237, 0.45);
}

body.dark-mode .pay-btn {
    background: #F8F2ED;
    color: #181A18;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

body.dark-mode .pay-btn:hover {
    background: #FFFFFF;
    box-shadow: 0 6px 24px rgba(255, 255, 255, 0.15);
}

body.dark-mode .pay-cancel-btn {
    color: rgba(248, 242, 237, 0.5);
}

body.dark-mode .pay-cancel-btn:hover {
    color: #F8F2ED;
}

body.dark-mode .payment-security-badge {
    color: rgba(248, 242, 237, 0.4);
}

/* ── Active Modules Popover ── */
body.dark-mode .active-modules-popover {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}
body.dark-mode .popover-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ── Input Modules Popover ── */
body.dark-mode .input-modules-popover {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* ── Input Connector Chip ── */
body.dark-mode .input-connector-chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #F8F2ED;
}

/* ── System Messages ── */
body.dark-mode .system-message.enter {
    background: rgba(1, 142, 239, 0.14);
    border-color: rgba(56, 189, 248, 0.28);
    color: #38BDF8;
}
body.dark-mode .system-message.exit {
    background: rgba(231, 76, 60, 0.12);
    border-color: rgba(231, 76, 60, 0.3);
    color: #ff7675;
}

/* ── Settings Panel ── */
body.dark-mode .settings-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
body.dark-mode .settings-label {
    color: #F8F2ED;
}
body.dark-mode .settings-select,
body.dark-mode .settings-input {
    background: rgba(28, 30, 28, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    color: #F8F2ED;
}
body.dark-mode .settings-select:focus,
body.dark-mode .settings-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(35, 38, 35, 0.85);
}
body.dark-mode .settings-slider::-webkit-slider-thumb {
    background: #F8F2ED;
}

/* ── Saved Chat Items ── */
body.dark-mode .saved-chat-item {
    background: rgba(28, 30, 28, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .saved-chat-item:hover {
    background: rgba(35, 38, 35, 0.75);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ── Selection Toolbar ── */
body.dark-mode .selection-toolbar {
    background: rgba(24, 26, 24, 0.95);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
body.dark-mode .selection-toolbar-btn {
    background: rgba(35, 38, 35, 0.7);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ── Save Chat Modal ── */
body.dark-mode .save-chat-modal-card {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}
body.dark-mode .save-chat-modal-overlay {
    background: rgba(0, 0, 0, 0.5);
}

/* ── Workspace ── */
body.dark-mode .workspace-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
body.dark-mode .exit-workspace-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}
body.dark-mode .exit-workspace-btn:hover {
    background: rgba(231, 76, 60, 0.15);
}

/* ── Send Button stays consistent ── */
body.dark-mode .send-btn {
    background: #ffffff !important;
    color: #181A18 !important;
}
body.dark-mode .send-btn:hover {
    background: #e2e8f4 !important;
}
body.dark-mode .send-btn svg {
    stroke: #181A18;
}

/* ── Stop Button stays consistent in Dark Mode ── */
body.dark-mode .stop-btn {
    background: #ffffff !important;
    color: #181A18 !important;
}
body.dark-mode .stop-btn:hover {
    background: #EF4444 !important;
    color: #ffffff !important;
}
body.dark-mode .stop-btn svg {
    fill: #181A18;
}
body.dark-mode .stop-btn:hover svg {
    fill: #ffffff;
}

body.dark-mode .chat-stop-response-pill {
    background: rgba(26, 29, 31, 0.92);
    color: #F1F5F9;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
body.dark-mode .chat-stop-response-pill:hover {
    background: #232729;
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 6px 22px rgba(239, 68, 68, 0.25);
}

/* ── Chat Selection Highlights ── */
body.dark-mode .chat-selection-active .message:hover {
    outline-color: rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}
body.dark-mode .chat-selection-active .message.selected-start,
body.dark-mode .chat-selection-active .message.selected-end {
    outline-color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode .chat-selection-active .message.selected-in-range {
    outline-color: rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ── Smooth Transitions for Theme Switch ── */
body,
.header,
.input-container,
.message,
.glass-widget,
.launcher-footer,
.voice-overlay-card,
.payment-card,
.active-modules-popover,
.input-modules-popover,
.logo,
.toggle-track,
.settings-select,
.settings-input,
.crew-card,
.trust-score-card,
.trust-audit-card,
.sparkle-box,
.veshup-palette-card {
    transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* ── Mock Razorpay Dark Mode ── */
body.dark-mode .mock-razorpay-card {
    background: #252825;
    border-color: rgba(248, 242, 237, 0.12);
}

/* ─── SMM Live Poster Studio ─── */
.smm-live-canvas-panel,
.smm-live-canvas-panel * {
    font-family: var(--font-chat) !important;
}

.smm-live-canvas-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%) scale(0.95);
    width: 90%;
    max-width: 1040px;
    height: 580px;
    background: rgba(240, 244, 252, 0.9);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(90, 111, 154, 0.22);
    border-radius: 24px;
    z-index: 999;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    box-shadow: 0 20px 80px rgba(90, 111, 154, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.smm-live-canvas-panel.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.smm-live-canvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(90, 111, 154, 0.15);
    background: rgba(255, 255, 255, 0.35);
}

.smm-live-canvas-close {
    border: none;
    background: transparent;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--icon-color);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.smm-live-canvas-close:hover {
    color: #e74c3c;
    transform: scale(1.1);
}

.smm-live-canvas-body {
    display: flex;
    padding: 24px;
    gap: 28px;
    flex: 1;
    overflow: hidden;
}

.smm-live-canvas-preview-section {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 18px;
    border: 1.5px dashed rgba(90, 111, 154, 0.25);
    padding: 20px;
    gap: 12px;
}

.live-poster-canvas {
    width: 360px;
    height: 360px;
    border-radius: 16px;
    background: linear-gradient(135deg, #a3b1d6, #3b4f7a);
    position: relative;
    padding: 24px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
    text-align: left;
    transition: background 0.5s ease, width 0.3s ease, height 0.3s ease;
    font-family: var(--font-chat) !important;
}

.live-poster-canvas.ratio-1-1 {
    width: 360px;
    height: 360px;
}

.live-poster-canvas.ratio-4-5 {
    width: 320px;
    height: 400px;
}

.live-poster-canvas.ratio-9-16 {
    width: 240px;
    height: 426px;
}

.live-poster-canvas.ratio-16-9 {
    width: 420px;
    height: 236px;
}

/* Typography overrides for landscape and portrait ratios */
.live-poster-canvas.ratio-16-9 .poster-headline {
    font-size: 1.3rem;
    margin-top: 8px;
}

.live-poster-canvas.ratio-16-9 .poster-subline {
    font-size: 0.8rem;
    margin-top: 4px;
    -webkit-line-clamp: 2;
}

.live-poster-canvas.ratio-9-16 .poster-headline {
    font-size: 1.5rem;
    margin-top: 24px;
}

.live-poster-canvas.ratio-9-16 .poster-subline {
    font-size: 0.85rem;
    margin-top: 12px;
}

.poster-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(35px);
    opacity: 0.5;
    pointer-events: none;
}

.poster-shape.shape-1 {
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.45);
    top: -30px;
    right: -30px;
}

.poster-shape.shape-2 {
    width: 130px;
    height: 130px;
    background: rgba(255, 255, 255, 0.3);
    bottom: -20px;
    left: -20px;
}

.poster-logo-container {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-chat);
    font-size: 1.15rem;
    font-weight: 800;
    background: #ffffff;
    color: var(--text-dark);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.poster-logo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.poster-brand-name {
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-chat);
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.poster-headline {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.25;
    font-family: var(--font-chat);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    word-wrap: break-word;
    margin-top: 16px;
}

.poster-subline {
    font-size: 0.95rem;
    line-height: 1.45;
    opacity: 0.92;
    font-family: var(--font-chat);
    font-weight: 200;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    word-wrap: break-word;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.poster-headline[contenteditable="true"],
.poster-subline[contenteditable="true"] {
    transition: outline 0.2s ease, background 0.2s ease;
    border-radius: 4px;
}

.poster-headline[contenteditable="true"]:hover,
.poster-subline[contenteditable="true"]:hover {
    outline: 1.5px dashed rgba(255, 255, 255, 0.45);
    outline-offset: 4px;
    cursor: text;
}

.poster-headline[contenteditable="true"]:focus,
.poster-subline[contenteditable="true"]:focus {
    outline: 1.5px solid rgba(255, 255, 255, 0.85);
    outline-offset: 4px;
    background: rgba(255, 255, 255, 0.08);
}

.poster-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 800;
    opacity: 0.85;
    font-family: var(--font-chat);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: 10px;
    margin-top: auto;
}

.smm-live-canvas-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding-right: 6px;
}

.poster-type-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.type-pill {
    padding: 5px 10px;
    border-radius: 20px;
    border: 1.5px solid rgba(90, 111, 154, 0.2);
    background: transparent;
    font-family: var(--font-chat);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.type-pill:hover, .type-pill.active {
    background: var(--text-dark);
    border-color: var(--text-dark);
    color: #ffffff;
}

/* Floating Toggle Button */
.smm-live-canvas-toggle-btn {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 16px;
    z-index: 18;
    background: var(--input-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1.5px solid var(--input-border);
    border-radius: 20px;
    padding: 8px 16px;
    font-family: var(--font-chat);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(90, 111, 154, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smm-live-canvas-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(90, 111, 154, 0.18);
    border-color: rgba(90, 111, 154, 0.4);
}

/* Dark Mode Overrides */
body.dark-mode .smm-live-canvas-panel {
    background: rgba(24, 26, 24, 0.95);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

body.dark-mode .smm-live-canvas-header {
    background: rgba(0, 0, 0, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .smm-live-canvas-preview-section {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .type-pill {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

body.dark-mode .type-pill:hover,
body.dark-mode .type-pill.active {
    background: #ffffff;
    border-color: #ffffff;
    color: #181A18;
}

body.dark-mode .smm-live-canvas-toggle-btn {
    color: #ffffff;
}

body.dark-mode .poster-logo-container {
    color: #181A18;
}

/* Responsive Stacking */
@media (max-width: 600px) {
    .smm-live-canvas-panel {
        height: 85vh;
        max-height: 520px;
    }
    .smm-live-canvas-body {
        flex-direction: column;
        overflow-y: auto;
    }
    .smm-live-canvas-panel.active {
        bottom: 96px;
    }
}

/* ─── Floating Bottom Left Profile Card ─── */
.bottom-left-profile {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    min-width: 170px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--glass-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    cursor: pointer;
}

.bottom-left-profile:hover {
    transform: translateY(-2px);
    background: var(--glass-bg-hover);
    border-color: var(--text-primary);
}

body.dark-mode .bottom-left-profile:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

/* Avatar styling */
.bottom-left-profile .profile-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #181A18;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    overflow: hidden;
}

body.dark-mode .bottom-left-profile .profile-avatar-circle {
    background: #F8F2ED;
    color: #181A18;
}

/* Text info styling */
.bottom-left-profile .profile-text-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bottom-left-profile .profile-name-text {
    font-family: var(--font-chat);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

.bottom-left-profile .profile-plan-text {
    font-family: var(--font-chat);
    font-size: 0.76rem;
    font-weight: 600;
    color: #f2994a; /* Orange color from screenshot */
    line-height: 1.2;
}

/* Action buttons */
.bottom-left-profile .profile-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Download button styling */
.bottom-left-profile .profile-download-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: transparent;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.bottom-left-profile .profile-download-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-dark);
    border-color: var(--text-primary);
}

body.dark-mode .bottom-left-profile .profile-download-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.bottom-left-profile .profile-download-btn svg {
    width: 14px;
    height: 14px;
}

/* Notification badge */
.bottom-left-profile .notification-badge-dot {
    position: absolute;
    top: -2.5px;
    right: -2.5px;
    width: 8px;
    height: 8px;
    background: #3b82f6; /* Blue dot notification */
    border-radius: 50%;
    border: 1.5px solid rgb(25, 25, 37);
}

body:not(.dark-mode) .bottom-left-profile .notification-badge-dot {
    border: 1.5px solid #ffffff;
}

/* Chevron/Toggle styling */
.bottom-left-profile .profile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 2px;
}

.bottom-left-profile .profile-menu-toggle:hover {
    color: var(--text-dark);
}

.bottom-left-profile .profile-menu-toggle svg {
    width: 12px;
    height: 12px;
}

/* ─── Profile Popover Menu (Anchored to Left Rail Profile) ─── */
.profile-popover-menu {
    position: fixed;
    bottom: 18px;
    left: 68px;
    z-index: 75;
    width: 260px;
    background: #FFFFFF !important;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.profile-popover-menu.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

body.dark-mode .profile-popover-menu {
    background: #181A20 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

.profile-menu-email {
    font-family: var(--font-chat);
    font-size: 0.8rem;
    color: var(--icon-color);
    padding: 6px 12px 10px;
    font-weight: 500;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 6px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: transparent;
    padding: 9px 12px;
    border-radius: 8px;
    color: #1E293B;
    font-family: var(--font-chat);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: none;
    text-align: left;
}

.profile-menu-item svg.menu-icon {
    width: 16px;
    height: 16px;
    margin-right: 12px;
    flex-shrink: 0;
    opacity: 0.85;
}

.profile-menu-item .menu-label {
    flex: 1;
    text-align: left;
}

.profile-menu-item .menu-shortcut {
    font-size: 0.72rem;
    color: var(--icon-muted);
    font-weight: 500;
    margin-left: 10px;
    opacity: 0.8;
}

.profile-menu-item svg.menu-chevron {
    width: 12px;
    height: 12px;
    color: var(--icon-muted);
    margin-left: 10px;
    opacity: 0.7;
    flex-shrink: 0;
}

.profile-menu-item:hover,
.profile-menu-item.active {
    background: #F1F5F9 !important;
    color: #0F172A !important;
}

.profile-menu-item:hover svg.menu-icon,
.profile-menu-item:hover svg.menu-chevron,
.profile-menu-item.active svg.menu-icon,
.profile-menu-item.active svg.menu-chevron {
    color: #0F172A !important;
    opacity: 1 !important;
}

body.dark-mode .profile-menu-item {
    color: #E2E8F0;
}

body.dark-mode .profile-menu-item:hover,
body.dark-mode .profile-menu-item.active {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
}

body.dark-mode .profile-menu-item:hover svg.menu-icon,
body.dark-mode .profile-menu-item:hover svg.menu-chevron,
body.dark-mode .profile-menu-item.active svg.menu-icon,
body.dark-mode .profile-menu-item.active svg.menu-chevron {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

.profile-menu-item.is-locked {
    opacity: 0.62;
    cursor: default;
}

.profile-menu-item.is-locked:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

body.dark-mode .profile-menu-item.is-locked:hover {
    background: rgba(255, 255, 255, 0.04);
}

.profile-menu-item.is-locked .menu-lock-icon {
    margin-left: auto;
    opacity: 0.75;
}

.profile-menu-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 4px 6px;
}

/* ─── Custom Toast Notification ─── */
.butler-toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--text-dark);
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: var(--glass-shadow);
    font-family: var(--font-chat);
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.butler-toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* Scrollable support for long submenus like Language selection */
.profile-submenu.scrollable {
    max-height: 280px;
    overflow-y: auto;
}

/* ─── Profile Submenu ─── */
.profile-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 8px;
    z-index: 100 !important;
    width: 220px;
    background: #FFFFFF !important;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transform: translateX(-10px) scale(0.95);
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

body.dark-mode .profile-submenu {
    background: #181A20 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

.profile-submenu.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.profile-submenu .submenu-item {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 12px;
    border-radius: 8px;
    color: #334155;
    font-family: var(--font-chat);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: none;
    text-align: left;
}

.profile-submenu .submenu-item:hover,
.profile-submenu .submenu-item.active {
    background: #F1F5F9 !important;
    color: #0F172A !important;
}

.profile-submenu .submenu-item:hover .submenu-link-icon,
.profile-submenu .submenu-item.active .submenu-link-icon {
    color: #0F172A !important;
    opacity: 1 !important;
}

body.dark-mode .profile-submenu .submenu-item {
    color: #CBD5E1;
}

body.dark-mode .profile-submenu .submenu-item:hover,
body.dark-mode .profile-submenu .submenu-item.active {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
}

body.dark-mode .profile-submenu .submenu-item:hover .submenu-link-icon,
body.dark-mode .profile-submenu .submenu-item.active .submenu-link-icon {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

.profile-submenu .submenu-label {
    flex: 1;
    text-align: left;
}

.profile-submenu .submenu-link-icon {
    width: 12px;
    height: 12px;
    color: var(--icon-muted);
    margin-left: 10px;
    opacity: 0.7;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.profile-submenu .submenu-item:hover .submenu-link-icon {
    color: var(--text-dark);
    opacity: 1;
}

.profile-submenu .submenu-shortcut {
    font-size: 0.72rem;
    color: var(--icon-muted);
    font-weight: 500;
    margin-left: 10px;
    opacity: 0.8;
}

.profile-submenu .submenu-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 4px 6px;
}

.profile-submenu .static-item {
    cursor: default;
}

.profile-submenu .static-item:hover {
    background: transparent;
    color: var(--text-primary);
}

/* Responsive configurations */
@media (max-width: 768px) {
    .bottom-left-profile, .profile-popover-menu, .profile-submenu {
        display: none !important;
    }
}

/* ─── Claude-style Settings Modal ─── */
.settings-card-claude {
    width: 90%;
    max-width: 900px;
    height: 80vh;
    max-height: 650px;
    background: #1e1e1e; /* Dark theme default */
    color: #e2e8f0;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    overflow: hidden;
    font-family: 'Space Grotesk', sans-serif;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

body:not(.dark-mode) .settings-card-claude {
    background: #ffffff; /* Light theme support */
    color: #1a2b4c;
    border: 1px solid rgba(0, 102, 204, 0.08);
    box-shadow: 0 20px 50px rgba(29, 39, 59, 0.15);
}

/* Sidebar */
.settings-sidebar-claude {
    width: 250px;
    background: #181818;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}

body:not(.dark-mode) .settings-sidebar-claude {
    background: #f5f7fb;
    border-right: 1px solid rgba(0, 102, 204, 0.06);
}

/* Search Box */
.settings-search-claude {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.9rem;
}

body:not(.dark-mode) .settings-search-claude {
    background: rgba(0, 102, 204, 0.03);
    border-color: rgba(0, 102, 204, 0.08);
}

.settings-search-claude input {
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    width: 100%;
    font-family: inherit;
}

.settings-search-claude svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

/* Group */
.settings-nav-group-claude {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-nav-title-claude {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
    padding-left: 8px;
}

body:not(.dark-mode) .settings-nav-title-claude {
    color: rgba(26, 43, 76, 0.5);
}

.settings-nav-btn-claude {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    width: 100%;
}

.settings-nav-btn-claude svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.settings-nav-btn-claude:hover {
    background: rgba(255, 255, 255, 0.04);
}

body:not(.dark-mode) .settings-nav-btn-claude:hover {
    background: rgba(0, 102, 204, 0.04);
}

.settings-nav-btn-claude.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

body:not(.dark-mode) .settings-nav-btn-claude.active {
    background: rgba(0, 102, 204, 0.08);
    color: var(--text-dark);
}

/* Content Pane */
.settings-content-claude {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-content-header-claude {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

body:not(.dark-mode) .settings-content-header-claude {
    border-bottom-color: rgba(0, 102, 204, 0.04);
}

.settings-close-btn-claude {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    font-weight: 700;
}

.settings-close-btn-claude:hover {
    opacity: 1;
}

.settings-tab-content-claude {
    flex: 1;
    padding: 32px 40px 64px 40px;
    overflow-y: auto;
}

/* Form Styles */
.settings-section-title-claude {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 12px;
}

body:not(.dark-mode) .settings-section-title-claude {
    border-bottom-color: rgba(0, 102, 204, 0.06);
}

.settings-row-claude {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.settings-row-label-claude {
    font-size: 0.88rem;
    font-weight: 700;
}

.settings-row-desc-claude {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-bottom: 4px;
}

.settings-input-claude, .settings-select-claude, .settings-textarea-claude {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s ease;
}

body:not(.dark-mode) .settings-input-claude,
body:not(.dark-mode) .settings-select-claude,
body:not(.dark-mode) .settings-textarea-claude {
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #FFFFFF;
    color: #181A18;
}

body.dark-mode .settings-input-claude,
body.dark-mode .settings-select-claude,
body.dark-mode .settings-textarea-claude {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #F8F2ED;
}

.settings-input-claude:focus, .settings-select-claude:focus, .settings-textarea-claude:focus {
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.08);
}

body:not(.dark-mode) .settings-input-claude:focus,
body:not(.dark-mode) .settings-select-claude:focus,
body:not(.dark-mode) .settings-textarea-claude:focus {
    border-color: #181A18;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.settings-textarea-claude {
    resize: vertical;
    min-height: 120px;
    line-height: 1.55;
    transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.settings-textarea-claude.settings-textarea-expanded {
    min-height: 320px;
}

.settings-expand-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-secondary, #94A3B8);
    font-size: 0.73rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

body:not(.dark-mode) .settings-expand-toggle-btn {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #475569;
}

body:not(.dark-mode) .settings-expand-toggle-btn:hover {
    background: #E2E8F0;
    color: #0F172A;
    border-color: #94A3B8;
}

body.dark-mode .settings-expand-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.28);
}

/* Avatar Circle & Wrapper */
.settings-avatar-wrapper {
    position: relative;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.settings-avatar-wrapper:hover {
    transform: scale(1.04);
}

.settings-avatar-wrapper:hover .settings-avatar-overlay {
    opacity: 1 !important;
}

.settings-avatar-claude {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #181A18;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    overflow: hidden;
}

body.dark-mode .settings-avatar-claude {
    background: #F8F2ED;
    color: #181A18;
}

/* Buttons */
.settings-btn-claude {
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
}

body:not(.dark-mode) .settings-btn-claude {
    border-color: rgba(0, 102, 204, 0.2);
}

.settings-btn-claude:hover {
    background: rgba(255, 255, 255, 0.04);
}

body:not(.dark-mode) .settings-btn-claude:hover {
    background: rgba(0, 102, 204, 0.04);
}

.settings-btn-claude.danger {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.settings-btn-claude.danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* ─── Settings Save Footer & Actions ─── */
.settings-save-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body:not(.dark-mode) .settings-save-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.settings-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #181A18;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 9px 18px;
    cursor: pointer;
    transition: all 0.18s ease;
}

body.dark-mode .settings-btn-save {
    background: #F8F2ED;
    color: #181A18;
    border-color: transparent;
}

.settings-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.dark-mode .settings-btn-save:hover {
    background: #FFFFFF;
}

.settings-btn-save.has-unsaved-changes {
    background: #018EEF !important;
    color: #FFFFFF !important;
    border-color: #018EEF !important;
    box-shadow: 0 2px 8px rgba(1, 142, 239, 0.3) !important;
}

.settings-save-feedback {
    font-size: 0.82rem;
    color: #018EEF;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.dark-mode .settings-save-feedback {
    color: #38BDF8;
}

/* Section Header */
.settings-subsection-header-claude {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 16px;
    opacity: 0.9;
}

/* ─── Settings Mobile Sidebar Header (Hidden on Desktop) ─── */
.settings-sidebar-header-mobile {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body:not(.dark-mode) .settings-sidebar-header-mobile {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.settings-sidebar-title-mobile {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.settings-close-btn-mobile {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: all 0.2s ease;
}

.settings-close-btn-mobile:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

body:not(.dark-mode) .settings-close-btn-mobile:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* ─── Settings Billing Card ─── */
.settings-billing-card {
    background: var(--glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.2s ease;
}

body:not(.dark-mode) .settings-billing-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.settings-billing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(39, 174, 96, 0.12);
    color: #27ae60;
    border: 1px solid rgba(39, 174, 96, 0.25);
}

.settings-billing-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, inherit);
}

.settings-billing-price {
    font-size: 1.75rem;
    font-weight: 800;
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--text-primary, inherit);
}

.settings-billing-price span {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.6;
}

.settings-billing-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body:not(.dark-mode) .settings-billing-features {
    border-color: rgba(0, 0, 0, 0.06);
}

.settings-feature-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    opacity: 0.9;
}

.settings-feature-check {
    color: #27ae60;
    flex-shrink: 0;
}

/* ─── Settings Modules Cards ─── */
.settings-module-card {
    background: var(--glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

body:not(.dark-mode) .settings-module-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.settings-module-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.settings-module-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary, inherit);
}

body:not(.dark-mode) .settings-module-icon {
    background: rgba(0, 102, 204, 0.06);
    border-color: rgba(0, 102, 204, 0.12);
    color: var(--accent-color, #0066cc);
}


/* ─── Cookie Consent Card (Bottom-Right Corner) ─── */
.cookie-settings-card {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 460px;
    background: #000000; /* Flat black matching the image */
    color: #ffffff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    font-family: 'Space Grotesk', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.cookie-settings-card.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.cookie-close-btn {
    position: absolute;
    top: 16px;
    right: 18px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
    font-weight: 700;
    transition: color 0.2s;
}

.cookie-close-btn:hover {
    color: #ffffff;
}

.cookie-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.cookie-text {
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.cookie-btn-group {
    display: flex;
    gap: 12px;
    width: 100%;
}

.cookie-btn {
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    border: 1px solid transparent;
}

.cookie-btn.outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    flex: 1;
}

.cookie-btn.outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
}

.cookie-btn.filled {
    background: #fbfbfb; /* Premium off-white */
    color: #000000;
    flex: 1;
}

.cookie-btn.filled:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.cookie-btn.full-width {
    width: 100%;
    flex: none;
}

/* ─── Claude-style Settings Enhancements ─── */
.settings-toggle-row-claude {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
}

.settings-toggle-label-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    padding-right: 24px;
}

/* ─── Apple Liquid Glass Toggle Switch (iOS 26) ─── */
.claude-switch,
.share-toggle-switch,
.liquid-glass-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
}

.claude-switch input,
.share-toggle-switch input,
.liquid-glass-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.claude-switch-slider,
.share-toggle-slider,
.liquid-glass-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.35),
        inset 0 -1px 2px rgba(255, 255, 255, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
}

body:not(.dark-mode) .claude-switch-slider,
body:not(.dark-mode) .share-toggle-slider,
body:not(.dark-mode) .liquid-glass-slider {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 100%);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.16),
        inset 0 -1px 2px rgba(255, 255, 255, 0.7),
        0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Glossy highlight line on top curve of the glass track */
.claude-switch-slider::after,
.share-toggle-slider::after,
.liquid-glass-slider::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 6px;
    right: 6px;
    height: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 999px;
    pointer-events: none;
    opacity: 0.75;
    transition: opacity 0.3s ease, background 0.3s ease;
}

/* 3D Apple Liquid Glass Lens Knob */
.claude-switch-slider::before,
.share-toggle-slider::before,
.liquid-glass-slider::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 24px;
    left: 3px;
    bottom: 2px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 246, 255, 0.85) 45%, rgba(215, 228, 245, 0.7) 100%);
    backdrop-filter: blur(8px) saturate(200%);
    -webkit-backdrop-filter: blur(8px) saturate(200%);
    border-radius: 999px;
    box-shadow: 
        inset 0 2px 2px rgba(255, 255, 255, 1),
        inset 0 -2px 2.5px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.85),
        0 4px 12px rgba(0, 0, 0, 0.32),
        0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                width 0.22s ease, 
                background 0.35s ease, 
                box-shadow 0.35s ease;
    z-index: 2;
}

body:not(.dark-mode) .claude-switch-slider::before,
body:not(.dark-mode) .share-toggle-slider::before,
body:not(.dark-mode) .liquid-glass-slider::before {
    background: linear-gradient(145deg, #ffffff 0%, #f4f6fa 50%, #e5eaf2 100%);
    box-shadow: 
        inset 0 2px 2px #ffffff,
        inset 0 -2px 2px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        0 3px 8px rgba(0, 0, 0, 0.16),
        0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Liquid stretch effect when active/held */
.claude-switch:active .claude-switch-slider::before,
.share-toggle-switch:active .share-toggle-slider::before,
.liquid-glass-toggle:active .liquid-glass-slider::before {
    width: 29px;
}

/* Active / On State - Apple Solid/Liquid Blue (No Glow) */
.claude-switch input:checked + .claude-switch-slider,
.share-toggle-switch input:checked + .share-toggle-slider,
.liquid-glass-toggle input:checked + .liquid-glass-slider {
    background: #007aff;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        inset 0 1.5px 2px rgba(255, 255, 255, 0.35),
        inset 0 -1.5px 2px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.15);
}

.claude-switch input:checked + .claude-switch-slider::after,
.share-toggle-switch input:checked + .share-toggle-slider::after,
.liquid-glass-toggle input:checked + .liquid-glass-slider::after {
    opacity: 0.35;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

.claude-switch input:checked + .claude-switch-slider::before,
.share-toggle-switch input:checked + .share-toggle-slider::before,
.liquid-glass-toggle input:checked + .liquid-glass-slider::before {
    transform: translateX(20px);
    background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 55%, #e1e7f0 100%);
    box-shadow: 
        inset 0 1.5px 1.5px #ffffff,
        inset 0 -1.5px 2px rgba(0, 100, 220, 0.2),
        0 4px 10px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

.claude-switch:active input:checked + .claude-switch-slider::before,
.share-toggle-switch:active input:checked + .share-toggle-slider::before,
.liquid-glass-toggle:active input:checked + .liquid-glass-slider::before {
    transform: translateX(15px);
    width: 29px;
}

/* Disabled Switch State */
.claude-switch input:disabled + .claude-switch-slider,
.share-toggle-switch input:disabled + .share-toggle-slider,
.liquid-glass-toggle input:disabled + .liquid-glass-slider {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(20%);
}

.settings-row-link-claude {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    font-size: 0.92rem;
    transition: all 0.2s ease;
    margin-bottom: 12px;
    cursor: pointer;
}

body:not(.dark-mode) .settings-row-link-claude {
    border-color: rgba(0, 102, 204, 0.06);
    background: rgba(0, 102, 204, 0.01);
}

.settings-row-link-claude:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

body:not(.dark-mode) .settings-row-link-claude:hover {
    background: rgba(0, 102, 204, 0.03);
    border-color: rgba(0, 102, 204, 0.12);
}

.settings-row-link-claude .chevron-right {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.settings-row-link-claude:hover .chevron-right {
    transform: translateX(3px);
    opacity: 1;
}

.settings-section-subtitle-claude {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 28px;
    margin-bottom: 16px;
    border-bottom: none;
    padding-bottom: 0;
}

body:not(.dark-mode) .settings-section-subtitle-claude {
    color: rgba(26, 43, 76, 0.6);
}

.settings-action-row-claude {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 12px;
}

body:not(.dark-mode) .settings-action-row-claude {
    border-bottom-color: rgba(0, 102, 204, 0.05);
}

.settings-action-row-claude:last-child {
    border-bottom: none;
}

.settings-row-horizontal-claude {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.settings-row-horizontal-claude .settings-input-claude,
.settings-row-horizontal-claude .settings-select-claude {
    width: 280px;
    flex-shrink: 0;
}

.settings-segmented-control {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}

body:not(.dark-mode) .settings-segmented-control {
    background: rgba(0, 102, 204, 0.03);
    border-color: rgba(0, 102, 204, 0.08);
}

.settings-segment-btn {
    background: transparent;
    border: none;
    color: inherit;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.7;
    font-size: 0.85rem;
    font-weight: 600;
}

.settings-segment-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.03);
}

.settings-segment-btn.active {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body:not(.dark-mode) .settings-segment-btn.active {
    background: #ffffff;
    color: var(--text-dark);
    box-shadow: 0 2px 8px rgba(29, 39, 59, 0.08);
}

/* Reduced Motion Override */
body.reduced-motion *, 
body.reduced-motion *::before, 
body.reduced-motion *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
}

/* Account Tables & Badges */
.settings-table-claude {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.85rem;
}

.settings-table-claude th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 500;
    opacity: 0.5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body:not(.dark-mode) .settings-table-claude th {
    border-bottom-color: rgba(0, 102, 204, 0.05);
}

.settings-table-claude td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

body:not(.dark-mode) .settings-table-claude td {
    border-bottom-color: rgba(0, 102, 204, 0.03);
}

.settings-badge-claude {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 6px;
}

.settings-code-badge-claude {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 6px;
    color: #a0aec0;
    user-select: all;
}

body:not(.dark-mode) .settings-code-badge-claude {
    background: rgba(0, 102, 204, 0.02);
    border-color: rgba(0, 102, 204, 0.08);
    color: #4a5568;
}

/* ─── Floating Left Sidebar Box (Liquid Glass Effect) ─── */
.left-sidebar-glass {
    position: fixed;
    top: 112px;
    left: 32px;
    bottom: 112px; /* 32px bottom-left-profile bottom + 56px height + 24px gap */
    width: 260px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-20px);
}

.left-sidebar-glass.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

body.dark-mode .left-sidebar-glass {
    background: rgba(15, 15, 26, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.left-sidebar-glass .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.left-sidebar-glass .new-conversation-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: var(--text-dark);
    font-family: var(--font-chat);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

body.dark-mode .left-sidebar-glass .new-conversation-btn {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.left-sidebar-glass .new-conversation-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.left-sidebar-glass .new-conversation-btn .three-dots-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.left-sidebar-glass .new-conversation-btn:hover .three-dots-icon {
    opacity: 1;
}

.left-sidebar-glass .sidebar-recent-chats {
    flex: 1;
    overflow-y: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
}

/* Hide scrollbar for recent chats list */
.left-sidebar-glass .sidebar-recent-chats::-webkit-scrollbar {
    width: 0px;
}

.left-sidebar-glass .sidebar-recent-chats {
    scrollbar-width: none;
}

.sidebar-empty-recent {
    font-family: var(--font-chat);
    font-size: 0.8rem;
    color: var(--icon-muted);
    font-style: italic;
    text-align: center;
    margin-top: 24px;
}

/* Sidebar Chat Item styles consolidated in main section */

/* Universal Chat UI - Centered & Spacious */
.main-content, .chat-area, .input-area, .workspace-area {
    margin-left: 0 !important;
}

/* Sidebar options toggle styling */
body.dark-mode .sidebar-options-toggle-btn {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
}

.sidebar-options-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Sidebar Section Headers */
.left-sidebar-glass .sidebar-section-title {
    font-family: var(--font-chat);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dark);
    margin-bottom: 6px;
    margin-top: 14px;
    opacity: 0.8;
}

body.dark-mode .left-sidebar-glass .sidebar-section-title {
    color: rgba(255, 255, 255, 0.6);
}

.sidebar-options-dropdown {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 50;
    display: none;
    flex-direction: column;
    width: 190px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 6px;
    box-sizing: border-box;
}

body.dark-mode .sidebar-options-dropdown {
    background: #252825;
    border-color: rgba(248, 242, 237, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.sidebar-options-dropdown.active {
    display: flex;
}

.sidebar-options-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-dark);
    font-family: var(--font-chat);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark-mode .sidebar-options-dropdown .dropdown-item {
    color: #F8F2ED;
}

.sidebar-options-dropdown .dropdown-item:hover {
    background: rgba(90, 111, 154, 0.08);
}

body.dark-mode .sidebar-options-dropdown .dropdown-item:hover {
    background: rgba(248, 242, 237, 0.08);
}

/* Header Share Button Styling (Hidden until user starts chat) */
.header-share-btn {
    display: none !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    color: var(--text-dark) !important;
    cursor: pointer;
    transition: opacity 0.22s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.header-share-btn,
.header-share-btn.visible {
    display: none !important;
}

@keyframes headerShareBtnFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

body.dark-mode .header-share-btn {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.header-share-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

body.dark-mode .header-share-btn:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
}

/* Ongoing Chat Sidebar Button Styling */
.ongoing-chat-sidebar-btn.active {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

body.dark-mode .ongoing-chat-sidebar-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.dark-mode .ongoing-chat-sidebar-btn svg {
    color: #ffffff !important;
}

body.dark-mode .ongoing-chat-sidebar-btn.active {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.ongoing-chat-sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .ongoing-chat-sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* New Chat Sidebar Button Styling */
.new-chat-sidebar-btn {
    transition: all 0.2s ease;
}
.new-chat-sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}
body.dark-mode .new-chat-sidebar-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
body.dark-mode .new-chat-sidebar-btn svg {
    color: #ffffff !important;
}
body.dark-mode .new-chat-sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Chat Item Layout and Actions */
.sidebar-chat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 10px;
    border-radius: 10px;
    background: transparent;
    color: var(--text-dark);
    font-family: var(--font-chat);
    font-weight: 500;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid transparent;
}

body.dark-mode .sidebar-chat-item {
    color: rgba(255, 255, 255, 0.85);
}

.sidebar-chat-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .sidebar-chat-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.sidebar-chat-item.active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
    font-weight: 600;
}

body.dark-mode .sidebar-chat-item.active {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
}

.sidebar-chat-icon {
    width: 14px;
    height: 14px;
    color: var(--icon-color);
    flex-shrink: 0;
}

.sidebar-chat-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Sidebar Chat Rename Input */
.sidebar-chat-rename-input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid #007aff;
    border-radius: 6px;
    padding: 3px 6px;
    color: var(--text-dark);
    font-family: var(--font-chat);
    font-size: 0.84rem;
    font-weight: 500;
    outline: none;
    box-sizing: border-box;
    line-height: 1.2;
}

body.dark-mode .sidebar-chat-rename-input {
    background: rgba(248, 242, 237, 0.08);
    color: #F8F2ED;
    border-color: #007aff;
}

/* Sidebar Chat Menu Button (Three Dots - Stable, Static in Flex Layout, NO Moving) */
.sidebar-chat-menu-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-dark);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease !important;
    padding: 0;
    margin: 0;
    margin-left: auto;
}

body.dark-mode .sidebar-chat-menu-btn {
    color: rgba(255, 255, 255, 0.7);
}

.sidebar-chat-item:hover .sidebar-chat-menu-btn,
.sidebar-chat-item:focus-within .sidebar-chat-menu-btn,
.sidebar-chat-item.active .sidebar-chat-menu-btn,
.sidebar-chat-menu-btn.active {
    opacity: 0.7;
}

.sidebar-chat-menu-btn:hover {
    background: rgba(120, 120, 128, 0.18) !important;
    color: var(--text-dark);
    opacity: 1 !important;
    transform: none !important;
}

body.dark-mode .sidebar-chat-menu-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff;
    opacity: 1 !important;
    transform: none !important;
}

.sidebar-chat-menu-btn:active {
    transform: none !important;
}

/* Sidebar Chat Dropdown Menu */
.sidebar-chat-dropdown {
    position: absolute;
    right: 6px;
    top: calc(100% + 4px);
    z-index: 200;
    display: none;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.15);
    padding: 4px;
    min-width: 120px;
}

body.dark-mode .sidebar-chat-dropdown {
    background: #252825;
    border-color: rgba(248, 242, 237, 0.12);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5);
}

.sidebar-chat-dropdown.active {
    display: flex;
}

.chat-dropdown-item {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 7px 10px;
    border-radius: 6px;
    font-family: var(--font-chat);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 7px;
    transform: none !important;
}

body.dark-mode .chat-dropdown-item {
    color: #F8F2ED;
}

.chat-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: none !important;
}

body.dark-mode .chat-dropdown-item:hover {
    background: rgba(248, 242, 237, 0.08);
    color: #F8F2ED;
    transform: none !important;
}

.chat-dropdown-item:active {
    transform: none !important;
}

.chat-dropdown-item.delete {
    color: #e74c3c;
}

/* ─── Sidebar Multi-Select & Batch Deletion ─── */
.sidebar-select-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2px 0 4px 0;
    gap: 6px;
}

.sidebar-select-count-badge {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

body.dark-mode .sidebar-select-count-badge {
    color: #F1F5F9;
}

.sidebar-select-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sidebar-select-action-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s;
}

.sidebar-select-action-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

body.dark-mode .sidebar-select-action-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #E2E8F0;
}

.sidebar-select-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #EF4444;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s;
}

.sidebar-select-delete-btn:hover {
    background: #EF4444;
    color: #FFFFFF;
    border-color: #EF4444;
}

.sidebar-select-cancel-btn {
    background: transparent;
    border: none;
    color: var(--icon-color);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.18s;
}

.sidebar-select-cancel-btn:hover {
    color: var(--text-dark);
}

.sidebar-chat-item.select-mode {
    cursor: pointer;
    user-select: none;
}

.sidebar-chat-item.selected {
    background: rgba(236, 72, 153, 0.12) !important;
    border-color: rgba(236, 72, 153, 0.35) !important;
}

body.dark-mode .sidebar-chat-item.selected {
    background: rgba(236, 72, 153, 0.18) !important;
    border-color: rgba(236, 72, 153, 0.45) !important;
}

.sidebar-chat-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1.5px solid rgba(90, 111, 154, 0.35);
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.sidebar-chat-checkbox.checked {
    background: #EC4899;
    border-color: #EC4899;
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.35);
}

body.dark-mode .sidebar-chat-checkbox {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .sidebar-chat-checkbox.checked {
    background: #EC4899;
    border-color: #EC4899;
}

/* Share Chat Modal Styles */
.share-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
}

.share-modal-overlay.active {
    display: flex;
}

.share-modal-card {
    position: relative;
    background: #202123;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 28px;
    box-sizing: border-box;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    font-family: var(--font-main);
    color: #ffffff;
    animation: shareModalScaleIn 0.25s ease-out;
}

@keyframes shareModalScaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.share-modal-close {
    position: absolute;
    right: 20px;
    top: 20px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.share-modal-close:hover {
    color: #ffffff;
}

.share-modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #ffffff;
    text-align: left;
}

.share-modal-subtitle {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 24px 0;
    text-align: left;
}

.share-options-box {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.02);
}

.share-option-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    text-align: left;
}

.share-option-item:last-child {
    border-bottom: none;
}

.share-option-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.share-option-icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.65);
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.share-option-text {
    flex: 1;
}

.share-option-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}

.share-option-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.share-option-check {
    width: 16px;
    height: 16px;
    color: #4f83e1;
    display: none;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}

.share-option-item.active .share-option-check {
    display: block;
}

.share-option-item.active {
    background: rgba(255, 255, 255, 0.03);
}

/* Continuable Chat Option inside Share Modal */
.share-continue-item {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    animation: shareSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes shareSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.share-continue-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.share-chat-bubble-icon {
    color: #4f83e1 !important;
}



/* ─── Share Link Result Box (Link Input + Copy Button) ─── */
.share-link-result-box {
    margin-bottom: 20px;
    animation: shareSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.share-link-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 6px 6px 6px 14px;
    gap: 10px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.share-link-input-wrapper:focus-within {
    border-color: #007aff;
    background: rgba(255, 255, 255, 0.08);
}

.share-link-field-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.share-generated-link-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-copy-link-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-main);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.share-copy-link-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.share-copy-link-btn:active {
    transform: translateY(0);
}

.share-copy-link-btn.copied {
    background: #007aff;
    border-color: #007aff;
    color: #ffffff;
}

.share-copy-link-btn svg {
    width: 14px;
    height: 14px;
}

/* Shared Chat Banner */
.shared-chat-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 14px;
    color: var(--text-dark);
    font-size: 0.88rem;
    font-family: var(--font-main);
    margin: 0 auto 20px auto;
    text-align: center;
    width: 90%;
    max-width: 680px;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
}

.shared-chat-banner svg {
    width: 18px;
    height: 18px;
    color: #3b82f6;
    flex-shrink: 0;
}

body.dark-mode .shared-chat-banner {
    color: #ffffff;
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.3);
}

.share-modal-footer {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
    margin: 0 0 24px 0;
    text-align: left;
}

.share-modal-footer a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    transition: all 0.2s ease;
}

.share-modal-footer a:hover {
    color: #ffffff;
}

.share-modal-actions {
    display: flex;
    justify-content: flex-end;
}

.share-modal-action-btn {
    background: #ffffff;
    color: #1e1f20;
    border: none;
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-main);
}

.share-modal-action-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

.share-modal-action-btn:disabled {
    background: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

/* Sidebar toggle mobile layout & backdrop styles */
.sidebar-toggle-mobile {
    display: none;
}

.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 990;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-backdrop.active {
    display: block;
    opacity: 1;
}

/* Share modal media queries */
@media (max-width: 560px) {
    .share-modal-card {
        max-width: 92%;
        padding: 20px;
        margin: 16px;
    }
    .share-option-item {
        padding: 12px 16px;
        gap: 12px;
    }
    .share-modal-title {
        font-size: 1.2rem;
    }
}

/* Tablet & Mobile Responsiveness for Sidebar, Header and General Areas */
@media (max-width: 1023px) {
    .sidebar-toggle-mobile {
        display: flex !important;
    }
    
    .left-sidebar-glass {
        position: fixed;
        top: 76px;
        left: 16px;
        bottom: 16px;
        width: 280px;
        max-width: calc(100% - 32px);
        z-index: 1000;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
        opacity: 0;
        pointer-events: none;
        transform: translateX(-320px);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    }
    
    .left-sidebar-glass.mobile-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }
    
    /* Make active state visible but keep slide out hidden by default on mobile */
    .left-sidebar-glass.visible {
        /* Allow sidebar to toggle visibility based on mobile-open instead of active session auto-open */
        opacity: 0;
        pointer-events: none;
        transform: translateX(-320px);
    }
    
    .left-sidebar-glass.visible.mobile-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }
    
    /* Keep main layout centered and responsive without being pushed by sidebar */
    .main-content, .workspace-area {
        margin-left: 0 !important;
        transform: none !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .chat-area {
        margin-left: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 200px !important;
    }
    
    .input-area {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Hide the download symbol on mobile viewports */
    #blProfileDownloadBtn {
        display: none !important;
    }
    
    /* Show the bottom profile card on mobile viewports */
    .bottom-left-profile {
        display: flex !important;
        position: fixed !important;
        bottom: 28px !important;
        left: 28px !important;
        width: 256px !important;
        z-index: 1010 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
        
        /* Start hidden and slid out to the left in the exact same way as sidebar */
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(-320px) !important;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    }
    
    /* When mobile sidebar is open, slide the profile card in as well! */
    .left-sidebar-glass.mobile-open + .bottom-left-profile {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }
    
    /* Make sure profile popover and submenus sit on top of the mobile drawer */
    .profile-popover-menu,
    .profile-submenu {
        position: fixed !important;
        left: 28px !important;
        width: 256px !important;
        z-index: 1020 !important;
        bottom: 94px !important;
    }
    
    .profile-popover-menu.active {
        display: block !important;
    }
    .profile-submenu.active {
        display: block !important;
    }
}

/* Claude-Style Settings Card Responsive Media Queries */
@media (max-width: 768px) {
    #settingsOverlay {
        padding: 8px !important;
        box-sizing: border-box !important;
    }
    
    .settings-card-claude {
        flex-direction: column !important;
        height: 92vh !important;
        max-height: 92vh !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px !important;
    }
    
    /* ─── Sidebar (Settings Menu Options List) ─── */
    .settings-sidebar-header-mobile {
        display: flex !important;
    }
    
    .settings-sidebar-claude {
        display: flex !important; /* Visible by default on mobile settings launch */
        width: 100% !important;
        height: 100% !important;
        border-right: none !important;
        padding: 24px 20px !important;
        flex-direction: column !important;
        gap: 20px !important;
        overflow-y: auto !important;
        flex-shrink: 0 !important;
        scrollbar-width: none !important; /* Hide Firefox scrollbars */
    }
    
    .settings-sidebar-claude::-webkit-scrollbar {
        display: none !important; /* Hide Chrome scrollbars */
    }
    
    /* Hide the settings option list when viewing an active settings pane */
    .settings-card-claude.show-panel .settings-sidebar-claude {
        display: none !important;
    }
    
    .settings-search-claude {
        display: flex !important;
        width: 100% !important;
    }
    
    .settings-nav-title-claude {
        display: block !important;
        font-size: 1.1rem !important;
        margin-bottom: 12px !important;
        opacity: 0.8 !important;
        font-weight: 700 !important;
    }
    
    .settings-nav-group-claude {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .settings-nav-btn-claude {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 14px 18px !important;
        font-size: 0.96rem !important;
        margin: 0 !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
        background: rgba(255, 255, 255, 0.02) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }
    
    body:not(.dark-mode) .settings-nav-btn-claude {
        border: 1px solid rgba(0, 102, 204, 0.05) !important;
        background: rgba(0, 102, 204, 0.02) !important;
    }
    
    /* ─── Content Panel ─── */
    .settings-content-claude {
        display: none !important; /* Hidden by default until option clicked */
        flex: 1 !important;
        padding: 0 !important;
        overflow-y: auto !important;
        flex-direction: column !important;
    }
    
    /* Show settings panel content when tab is active */
    .settings-card-claude.show-panel .settings-content-claude {
        display: flex !important;
    }
    
    /* Premium Header Navigation Bar */
    .settings-content-header-claude {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 16px !important;
        height: 52px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.01) !important;
        flex-shrink: 0 !important;
        position: static !important;
    }
    
    body:not(.dark-mode) .settings-content-header-claude {
        border-bottom-color: rgba(0, 102, 204, 0.08) !important;
        background: rgba(0, 0, 0, 0.01) !important;
    }
    
    /* Settings Back button styling */
    .settings-back-btn-claude {
        display: inline-flex !important;
        align-items: center !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: var(--text-primary) !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        transition: all 0.2s !important;
    }
    
    .settings-back-btn-claude:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }
    
    body:not(.dark-mode) .settings-back-btn-claude {
        background: rgba(0, 102, 204, 0.04) !important;
        border: 1px solid rgba(0, 102, 204, 0.08) !important;
    }
    
    body:not(.dark-mode) .settings-back-btn-claude:hover {
        background: rgba(0, 102, 204, 0.08) !important;
    }
    
    /* Close button styling aligned to the right */
    .settings-close-btn-claude {
        position: static !important; /* Normal positioning */
        background: transparent !important;
        color: inherit !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.4rem !important;
        opacity: 0.75 !important;
        box-shadow: none !important;
        border-radius: 6px !important;
        margin: 0 !important;
    }
    
    body:not(.dark-mode) .settings-close-btn-claude {
        background: transparent !important;
        color: inherit !important;
        box-shadow: none !important;
    }
    
    .settings-tab-content-claude {
        padding: 20px 16px 36px 16px !important;
        flex: 1 !important;
        box-sizing: border-box !important;
    }
    
    .settings-section-title-claude {
        font-size: 1.25rem !important;
        margin-top: 4px !important;
        margin-bottom: 14px !important;
        padding-bottom: 8px !important;
    }
    
    /* Stacking layouts for rows */
    .settings-row-horizontal-claude {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        margin-bottom: 16px !important;
    }
    
    .settings-row-horizontal-claude .settings-input-claude,
    .settings-row-horizontal-claude .settings-select-claude {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Normal action rows with buttons (Log out, Delete account): stack vertically */
    .settings-action-row-claude {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 0 !important;
        margin-bottom: 8px !important;
    }
    
    .settings-action-row-claude .settings-btn-claude {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 14px !important;
    }
    
    /* If action row has switch, checkbox or toggle, keep it horizontal */
    .settings-action-row-claude:has(.claude-switch),
    .settings-action-row-claude:has(input[type="checkbox"]),
    .settings-action-row-claude:has(.toggle-track),
    .settings-action-row-claude:has(.settings-segmented-control),
    .settings-toggle-row-claude {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }
    
    .settings-toggle-label-group {
        padding-right: 8px !important;
    }
    
    .settings-row-label-claude {
        font-size: 0.85rem !important;
    }
    
    .settings-row-desc-claude {
        font-size: 0.76rem !important;
    }
    
    /* Segmented controls span full width on vertical stack rows */
    .settings-row-horizontal-claude .settings-segmented-control {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .settings-row-horizontal-claude .settings-segmented-control button {
        flex: 1 !important;
        font-size: 0.78rem !important;
        padding: 8px 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ─── BUTTER SMOOTH MOTION & TACTILE INTERACTION ENGINE ───
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Global Touch & Tap Performance */
*, *::before, *::after {
    -webkit-tap-highlight-color: transparent !important;
}

/* 2. Universal Smooth Scroll Containers */
.chat-scroll-container,
.chat-messages-container,
.main-chat-window,
.sidebar-recent-chats,
.modal-content-scroll,
.settings-modal-card,
.login-card {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain;
}

/* 3. Universal Tactile Spring Micro-Interactions on All Clickable Elements */
button,
.btn,
.sidebar-nav-item,
.sidebar-recent-chat,
.sidebar-new-chat-btn,
.sidebar-collapse-btn,
.login-tab,
.login-social-btn,
.login-btn-primary,
.login-mode-toggle button,
.share-modal-action-btn,
.share-copy-link-btn,
.share-option-item,
.bottom-left-profile,
.theme-toggle,
.theme-toggle-btn,
.menu-grid,
.header-action-btn,
.suggestion-chip,
.quick-prompt-card,
.feature-card,
.action-icon-btn,
.icon-btn,
.send-btn,
.voice-btn,
.upload-btn,
.tool-pill,
.model-selector-btn,
.settings-tab-claude,
.settings-btn-claude,
.message-action-btn,
.claude-switch {
    transition: transform var(--dur-normal) var(--ease-spring),
                background-color var(--dur-normal) var(--ease-butter),
                border-color var(--dur-normal) var(--ease-butter),
                box-shadow var(--dur-normal) var(--ease-spring),
                color var(--dur-normal) var(--ease-butter),
                opacity var(--dur-normal) var(--ease-butter) !important;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
}

/* Tactile Elastic Compression on Press/Click */
button:active:not(.sidebar-chat-menu-btn):not(.chat-dropdown-item),
.btn:active,
.sidebar-nav-item:active,
.sidebar-recent-chat:active,
.sidebar-new-chat-btn:active,
.sidebar-collapse-btn:active,
.login-tab:active,
.login-social-btn:active,
.login-btn-primary:active,
.share-modal-action-btn:active,
.share-copy-link-btn:active,
.share-option-item:active,
.bottom-left-profile:active,
.theme-toggle:active,
.theme-toggle-btn:active,
.header-action-btn:active,
.suggestion-chip:active,
.quick-prompt-card:active,
.send-btn:active,
.voice-btn:active,
.upload-btn:active,
.tool-pill:active,
.model-selector-btn:active,
.settings-tab-claude:active,
.settings-btn-claude:active,
.message-action-btn:active {
    transform: scale(0.955) !important;
    transition-duration: 90ms !important;
}

/* Subtle Buttery Elevation on Hover */
button:hover:not(:disabled):not(.sidebar-chat-menu-btn):not(.chat-dropdown-item),
.login-social-btn:hover,
.login-btn-primary:hover,
.share-modal-action-btn:hover,
.share-copy-link-btn:hover,
.tool-pill:hover,
.suggestion-chip:hover,
.send-btn:hover,
.sidebar-new-chat-btn:hover {
    transform: translateY(-1.5px);
}

.sidebar-chat-menu-btn,
.sidebar-chat-menu-btn:hover,
.sidebar-chat-menu-btn:active,
.chat-dropdown-item,
.chat-dropdown-item:hover,
.chat-dropdown-item:active {
    transform: none !important;
}

/* 4. Buttery Smooth Sidebar Drawer */
.sidebar,
.mobile-sidebar {
    transition: transform 0.42s var(--ease-butter),
                width 0.42s var(--ease-butter),
                box-shadow 0.42s var(--ease-butter),
                background-color 0.42s var(--ease-butter) !important;
    will-change: transform, width;
}

.sidebar-nav-item,
.sidebar-recent-chat {
    transition: all 0.24s var(--ease-butter) !important;
}

.sidebar-nav-item:hover,
.sidebar-recent-chat:hover {
    transform: translateX(3px) !important;
}

/* 5. Buttery Modals & Backdrop Overlays */
.login-overlay,
.share-modal-overlay,
.settings-modal-overlay-claude,
.settings-modal-overlay {
    transition: opacity 0.38s var(--ease-butter),
                backdrop-filter 0.38s var(--ease-butter),
                visibility 0.38s var(--ease-butter) !important;
}

.login-card,
.share-modal-card,
.settings-modal-card-claude,
.settings-modal-card {
    transition: transform 0.42s var(--ease-spring),
                opacity 0.35s var(--ease-butter),
                box-shadow 0.42s var(--ease-butter) !important;
    will-change: transform, opacity;
}

/* 6. Buttery Dropdowns, Menus & Flyouts */
.sidebar-chat-dropdown,
.popover-menu,
.profile-popover,
.model-dropdown-menu,
.prompt-enhancer-modal {
    transition: opacity 0.26s var(--ease-butter),
                transform 0.32s var(--ease-spring),
                visibility 0.26s ease !important;
    transform-origin: top center;
    will-change: transform, opacity;
}

/* 7. Clean Minimal Input Focus States */
.chat-input-bar,
.input-container,
.login-form-input,
.settings-input-claude,
.settings-select-claude {
    transition: border-color 0.2s ease,
                background-color 0.2s ease,
                box-shadow 0.2s ease !important;
}

.chat-input-bar:focus-within,
.input-container:focus-within {
    border-color: rgba(90, 111, 154, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.login-form-input:focus,
.settings-input-claude:focus {
    border-color: #007aff !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 8. Chat Message Stream Entrance */
.chat-message,
.message-bubble,
.bot-message,
.user-message {
    animation: butterMessageSlideIn 0.36s var(--ease-butter) forwards;
    will-change: transform, opacity;
}

@keyframes butterMessageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 9. Interactive Minimal Ripple Effect */
.butter-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(120, 120, 128, 0.12);
    pointer-events: none;
    transform: scale(0);
    animation: butterRippleAnim 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    z-index: 99;
}

@keyframes butterRippleAnim {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

/* ─────────────────────────────────────────────────────────────
   ─── 10. Butler V3 Animated User Onboarding Carousel ───
   ───────────────────────────────────────────────────────────── */

.onboarding-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(10, 12, 18, 0.72);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: max(12px, env(safe-area-inset-top, 12px)) 12px max(12px, env(safe-area-inset-bottom, 12px));
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.onboarding-modal-overlay.fade-in {
    opacity: 1;
}

.onboarding-modal-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.onboarding-card {
    width: 100%;
    max-width: 600px;
    max-height: calc(100dvh - 24px);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 26px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transform: scale(0.96) translateY(12px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

body.dark-mode .onboarding-card {
    background: rgba(22, 24, 30, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.onboarding-modal-overlay.fade-in .onboarding-card {
    transform: scale(1) translateY(0);
}

/* Header & Progress Bar */
.onboarding-header {
    flex-shrink: 0;
    padding: 20px 24px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 2;
}

body.dark-mode .onboarding-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.onboarding-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 16px;
}

.onboarding-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.onboarding-brand-logo {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.onboarding-user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px 12px 4px 6px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .onboarding-user-badge {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.ob-avatar-preview {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #181A18;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ob-user-email-text {
    font-size: 0.82rem;
    color: var(--text-primary);
    opacity: 0.8;
    font-weight: 500;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onboarding-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

body.dark-mode .onboarding-progress-track {
    background: rgba(255, 255, 255, 0.08);
}

.onboarding-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #181A18 0%, #4A5568 100%);
    border-radius: 10px;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .onboarding-progress-fill {
    background: linear-gradient(90deg, #E2E8F0 0%, #94A3B8 100%);
}

.onboarding-step-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--icon-muted);
    font-weight: 500;
}

/* Step Container & Transitions */
.onboarding-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.ob-step-container {
    animation: obSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.ob-step-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.ob-step-subtitle {
    font-size: 0.92rem;
    color: var(--icon-muted);
    line-height: 1.45;
    margin-bottom: 22px;
}

/* Form inputs */
.ob-input-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}

.ob-input-group label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ob-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.9);
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
}

body.dark-mode .ob-input {
    background: rgba(30, 34, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.12);
    color: #F8F9FA;
}

.ob-input:focus {
    border-color: #181A18;
    box-shadow: 0 0 0 3px rgba(24, 26, 24, 0.1);
}

body.dark-mode .ob-input:focus {
    border-color: #E2E8F0;
    box-shadow: 0 0 0 3px rgba(226, 232, 240, 0.15);
}

/* WhatsApp Phone Group */
.ob-phone-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ob-country-select {
    width: 110px;
    flex-shrink: 0;
    padding: 12px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.9);
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
}

body.dark-mode .ob-country-select {
    background: rgba(30, 34, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.12);
    color: #F8F9FA;
}

/* Interactive Choice Grid & Cards */
.ob-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}

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

.ob-nickname-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}
.ob-nick-pill {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-dark, #181A18);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    font-family: inherit;
}
body.dark-mode .ob-nick-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #F1F5F9;
}
.ob-nick-pill:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.3);
}
body.dark-mode .ob-nick-pill:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
}
.ob-nick-pill.selected {
    background: #181A18;
    color: #FFFFFF;
    border-color: #181A18;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
body.dark-mode .ob-nick-pill.selected {
    background: #E2E8F0;
    color: #0F172A;
    border-color: #E2E8F0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.ob-choice-card {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    position: relative;
}

body.dark-mode .ob-choice-card {
    background: rgba(30, 34, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

.ob-choice-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.08);
}

body.dark-mode .ob-choice-card:hover {
    background: rgba(38, 43, 54, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.4);
}

.ob-choice-card.selected {
    border-color: #181A18;
    background: rgba(24, 26, 24, 0.06);
    box-shadow: 0 0 0 2px #181A18;
}

body.dark-mode .ob-choice-card.selected {
    border-color: #E2E8F0;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 2px #E2E8F0;
}

.ob-card-icon {
    font-size: 1.35rem;
    flex-shrink: 0;
}

.ob-card-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Error Message Box */
.ob-error-banner {
    display: none;
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 14px;
    animation: obSlideIn 0.2s ease;
}

/* Modal Actions (Footer) */
.ob-modal-actions {
    flex-shrink: 0;
    padding: 14px 24px max(14px, env(safe-area-inset-bottom, 14px));
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    position: relative;
    z-index: 3;
}

body.dark-mode .ob-modal-actions {
    background: rgba(22, 24, 30, 0.95);
    border-top-color: rgba(255, 255, 255, 0.08);
}

.ob-btn-prev {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark-mode .ob-btn-prev {
    border-color: rgba(255, 255, 255, 0.15);
}

.ob-btn-prev:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-mode .ob-btn-prev:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ob-btn-next, .ob-btn-submit {
    background: #181A18;
    color: #ffffff;
    border: none;
    padding: 11px 24px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.dark-mode .ob-btn-next, body.dark-mode .ob-btn-submit {
    background: #F8F9FA;
    color: #12141A;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ob-btn-next:hover, .ob-btn-submit:hover {
    transform: translateY(-1px);
    opacity: 0.94;
}

.ob-btn-next:active, .ob-btn-submit:active {
    transform: translateY(0);
}

/* Completion Step Card */
.ob-completion-wrap {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 10px;
    animation: obSlideIn 0.4s ease;
}

.ob-completion-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #018EEF;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 16px rgba(1, 142, 239, 0.35);
    animation: obPopCheck 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes obPopCheck {
    0% { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.ob-completion-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.ob-completion-text {
    font-size: 0.95rem;
    color: var(--icon-muted);
    max-width: 380px;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   ─── Business Edition Tags, Role Cards, & Waitlist UI ───
   ───────────────────────────────────────────────────────────── */

.ob-brand-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #181A18;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: 4px;
}

body.dark-mode .ob-brand-badge {
    background: #E2E8F0;
    color: #12141A;
}

/* Role Selection List */
.ob-choice-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

.ob-choice-card.role-card {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-radius: 16px;
    gap: 14px;
    position: relative;
}

.ob-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.ob-card-desc {
    font-size: 0.8rem;
    color: var(--icon-muted);
    line-height: 1.35;
}

.ob-card-check {
    font-size: 1rem;
    font-weight: 800;
    color: #018EEF;
    display: none;
    flex-shrink: 0;
}

.ob-choice-card.role-card.selected .ob-card-check {
    display: inline-block;
}

.ob-card-badge {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(59, 130, 246, 0.12);
    color: #2563EB;
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 3px 8px;
    border-radius: 12px;
    flex-shrink: 0;
}

body.dark-mode .ob-card-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #93C5FD;
}

/* Smaller grid for Business Categories */
.ob-choice-grid.small {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (min-width: 520px) {
    .ob-choice-grid.small {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ob-choice-grid.small .ob-choice-card {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 12px;
}

.ob-choice-grid.small .ob-card-icon {
    font-size: 1.15rem;
}

.ob-choice-grid.small .ob-card-label {
    font-size: 0.82rem;
}

/* Team Size Pills */
.ob-size-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ob-size-pill {
    flex: 1;
    min-width: 80px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.75);
    font-family: var(--font-main);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

body.dark-mode .ob-size-pill {
    background: rgba(30, 34, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    color: #F8F9FA;
}

.ob-size-pill:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.2);
}

body.dark-mode .ob-size-pill:hover {
    background: rgba(38, 43, 54, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
}

.ob-size-pill.selected {
    background: #181A18;
    color: #ffffff;
    border-color: #181A18;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.dark-mode .ob-size-pill.selected {
    background: #F8F9FA;
    color: #12141A;
    border-color: #F8F9FA;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Waitlist Container & Card */
.ob-waitlist-container {
    animation: obSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ob-waitlist-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(59, 130, 246, 0.12);
    color: #2563EB;
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
}

body.dark-mode .ob-waitlist-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #93C5FD;
}

.ob-btn-waitlist {
    width: 100%;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #ffffff;
    border: none;
    padding: 13px 20px;
    border-radius: 14px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.35);
    transition: all 0.2s ease;
}

.ob-btn-waitlist:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -4px rgba(37, 99, 235, 0.5);
    opacity: 0.96;
}

.ob-btn-waitlist:active {
    transform: translateY(0);
}

.ob-waitlist-switch {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--icon-muted);
}

.ob-link-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 0.85rem;
    text-decoration: underline;
    padding: 0;
}

.ob-link-btn:hover {
    opacity: 0.8;
}

.ob-waitlist-confirmed-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 10px;
    animation: obSlideIn 0.35s ease forwards;
}

/* ==========================================================================
   Comprehensive Responsive Overhaul for Butler Onboarding Modal
   ========================================================================== */
@media (max-width: 640px) {
    .onboarding-modal-overlay {
        padding: max(6px, env(safe-area-inset-top, 6px)) 6px max(6px, env(safe-area-inset-bottom, 6px));
        align-items: center;
    }

    .onboarding-card {
        max-height: calc(100dvh - 12px);
        border-radius: 18px;
    }

    .onboarding-header {
        padding: 14px 16px 10px;
    }

    .onboarding-top-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 10px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .onboarding-brand {
        flex: 1 1 auto;
    }

    .onboarding-user-badge {
        flex: 0 1 auto;
        max-width: 150px;
    }

    .ob-user-email-text {
        max-width: 100px;
        font-size: 0.76rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ob-bypass-btn,
    #obBypassExistingAccountBtn {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 4px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .onboarding-step-meta {
        margin-top: 6px;
        font-size: 0.75rem;
    }

    .onboarding-body {
        padding: 14px 16px;
    }

    .ob-step-title {
        font-size: 1.25rem;
        margin-bottom: 4px;
        letter-spacing: -0.01em;
    }

    .ob-step-subtitle {
        font-size: 0.82rem;
        line-height: 1.35;
        margin-bottom: 14px;
    }

    .ob-input-group {
        margin-bottom: 12px;
        gap: 5px;
    }

    .ob-input-group label {
        font-size: 0.78rem;
    }

    .ob-input {
        padding: 10px 12px;
        font-size: 0.88rem;
        border-radius: 10px;
    }

    .ob-country-select {
        width: 92px;
        padding: 10px 6px;
        font-size: 0.82rem;
        border-radius: 10px;
    }

    .ob-choice-list {
        gap: 8px;
    }

    .ob-choice-card.role-card {
        padding: 12px 14px;
        gap: 10px;
        border-radius: 12px;
    }

    .ob-card-label {
        font-size: 0.84rem;
    }

    .ob-card-desc {
        font-size: 0.74rem;
        line-height: 1.3;
    }

    .ob-choice-grid {
        gap: 8px;
    }

    .ob-choice-grid.small {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
    }

    .ob-choice-grid.small .ob-choice-card {
        padding: 8px 10px;
        gap: 6px;
        border-radius: 10px;
    }

    .ob-choice-grid.small .ob-card-icon svg {
        width: 15px;
        height: 15px;
    }

    .ob-choice-grid.small .ob-card-label {
        font-size: 0.76rem;
    }

    .ob-size-pills {
        gap: 6px;
    }

    .ob-size-pill {
        min-width: 60px;
        padding: 8px 8px;
        font-size: 0.78rem;
        border-radius: 10px;
    }

    .ob-modal-actions {
        padding: 10px 16px max(10px, env(safe-area-inset-bottom, 10px));
    }

    .ob-btn-prev {
        padding: 8px 14px;
        font-size: 0.84rem;
        border-radius: 10px;
    }

    .ob-btn-next, .ob-btn-submit {
        padding: 9px 18px;
        font-size: 0.86rem;
        border-radius: 10px;
    }
}

/* ==========================================================================
   Global Avatar Image Sizing & Aspect-Ratio Preservation
   ========================================================================== */
.profile-avatar-circle img,
.profile-avatar img,
.ob-avatar-preview img,
.settings-avatar-claude img {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    display: block !important;
}

/* ==========================================================================
   Auth Resolving & Workspace Preparation Loading Overlay
   ========================================================================== */
.auth-resolving-overlay {
    display: none !important;
}

.auth-resolving-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 38px 46px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
    max-width: 400px;
    width: 90%;
    animation: authCardFloatIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body:not(.dark-mode) .auth-resolving-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.09);
}

@keyframes authCardFloatIn {
    0% {
        transform: translateY(16px) scale(0.95);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.auth-resolving-ring {
    position: relative;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.auth-resolving-brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #181A18, #2a2d2a);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    z-index: 2;
    overflow: hidden;
}

.auth-resolving-brand-icon img,
.auth-resolving-logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    animation: authLogoPulse 2s ease-in-out infinite;
}

@keyframes authLogoPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(1, 142, 239, 0.3));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 5px rgba(1, 142, 239, 0.5));
    }
}

body:not(.dark-mode) .auth-resolving-brand-icon {
    background: linear-gradient(135deg, #181A18, #2d3748);
}

.auth-resolving-spinner-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: #018EEF;
    border-right-color: rgba(1, 142, 239, 0.4);
    animation: authSpinOrbit 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 1;
}

@keyframes authSpinOrbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.auth-resolving-text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
}

.auth-resolving-title {
    font-family: var(--font-chat, 'Space Grotesk', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    margin: 0;
    letter-spacing: -0.02em;
}

body:not(.dark-mode) .auth-resolving-title {
    color: #111827;
}

.auth-resolving-status {
    font-family: var(--font-main, sans-serif);
    font-size: 0.88rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
    margin: 0;
    line-height: 1.4;
    transition: all 0.25s ease;
}

body:not(.dark-mode) .auth-resolving-status {
    color: #4b5563;
}

.auth-resolving-bar-wrap {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

body:not(.dark-mode) .auth-resolving-bar-wrap {
    background: rgba(0, 0, 0, 0.06);
}

.auth-resolving-bar-indeterminate {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
    border-radius: 999px;
    animation: authProgressBar 1.4s ease-in-out infinite;
}

@keyframes authProgressBar {
    0% {
        left: -40%;
        width: 30%;
    }
    50% {
        left: 25%;
        width: 55%;
    }
    100% {
        left: 100%;
        width: 30%;
    }
}

/* ─── Inline Chat Image & Poster Generation with Dotted Canvas Skeleton ─── */
.inline-poster-card {
    width: 100%;
    max-width: 380px;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-sans, 'Space Grotesk', sans-serif);
}

.inline-poster-canvas-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.inline-poster-canvas-box.square,
.inline-poster-canvas-box.ratio-1-1 {
    aspect-ratio: 1 / 1;
    max-width: 500px;
    margin: 0 auto;
}

.inline-poster-canvas-box.ratio-9-16 {
    aspect-ratio: 9 / 16;
    max-width: 380px;
    margin: 0 auto;
}

.inline-poster-canvas-box.ratio-4-5 {
    aspect-ratio: 4 / 5;
    max-width: 440px;
    margin: 0 auto;
}

.inline-poster-canvas-box.ratio-16-9 {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.inline-poster-canvas-box.loading {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px dashed rgba(217, 119, 6, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

body:not(.dark-mode) .inline-poster-canvas-box.loading {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(217, 119, 6, 0.5);
}

.dotted-canvas-skeleton {
    width: 100%;
    height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.dotted-pulse-ring {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px dashed rgba(245, 158, 11, 0.6);
    animation: dottedSpin 6s linear infinite;
}

@keyframes dottedSpin {
    0% { transform: rotate(0deg) scale(0.95); opacity: 0.7; }
    50% { transform: rotate(180deg) scale(1.05); opacity: 1; }
    100% { transform: rotate(360deg) scale(0.95); opacity: 0.7; }
}

.dotted-loading-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.dotted-spinner {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.dotted-spinner span {
    width: 8px;
    height: 8px;
    background: #018EEF;
    border-radius: 50%;
    display: inline-block;
    animation: dottedBounce 1.4s infinite ease-in-out both;
}

.dotted-spinner span:nth-child(1) { animation-delay: -0.32s; }
.dotted-spinner span:nth-child(2) { animation-delay: -0.16s; }
.dotted-spinner span:nth-child(3) { animation-delay: 0s; }
.dotted-spinner span:nth-child(4) { animation-delay: 0.16s; }

@keyframes dottedBounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 0 0 4px rgba(1, 142, 239, 0.4);
    }
}

.dotted-loading-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(1, 142, 239, 0.12);
    color: #38BDF8;
    border: 1px solid rgba(1, 142, 239, 0.25);
}

.dotted-loading-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark, #181A18);
    margin-top: 4px;
}

body.dark-mode .dotted-loading-title {
    color: #F8FAFC;
}

.dotted-loading-topic {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748B);
    max-width: 240px;
    line-height: 1.35;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rendered Inline Poster Art */
.inline-poster-rendered {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 20px;
    color: #FFFFFF;
    position: relative;
    box-sizing: border-box;
    animation: fadeInPoster 0.45s ease-out forwards;
}

@keyframes fadeInPoster {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.inline-poster-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.inline-poster-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-poster-monogram {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.75rem;
    color: #FFFFFF;
}

.inline-poster-brand-name {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.inline-poster-badge {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.inline-poster-mid {
    text-align: center;
    margin: auto 0;
    padding: 8px 4px;
}

.inline-poster-headline {
    font-family: var(--font-serif, 'Newsreader', serif);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 8px 0;
    color: #FFFFFF;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.inline-poster-caption {
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 auto;
    max-width: 280px;
}

.inline-poster-bot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.inline-poster-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0F172A;
    font-weight: 700;
    font-size: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.02em;
}

/* Action Toolbar Below Card */
.inline-poster-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.inline-poster-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-dark, #181A18);
    transition: all 0.2s ease;
    font-family: inherit;
}

body.dark-mode .inline-poster-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: #F1F5F9;
}

.inline-poster-btn:hover {
    transform: translateY(-1px);
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body.dark-mode .inline-poster-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
}

.inline-poster-btn.primary {
    background: #181A18;
    color: #FFFFFF;
    border-color: #181A18;
}

body.dark-mode .inline-poster-btn.primary {
    background: #F1F5F9;
    color: #0F172A;
    border-color: #F1F5F9;
}

/* ─── GSAP Letter Reveal Typography ─── */
.gsap-word-wrap {
    display: inline-block;
    white-space: nowrap;
}

.gsap-char-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
    line-height: 1.15;
}

.gsap-char-inner {
    display: inline-block;
    will-change: transform, opacity;
}

/* ─── Sidebar Tools Navigation ─── */
.sidebar-tools-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.sidebar-tool-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: var(--text-dark);
    font-family: var(--font-chat);
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.sidebar-tool-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(236, 72, 153, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.12);
}

body.dark-mode .sidebar-tool-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.09);
    color: #F1F5F9;
}

body.dark-mode .sidebar-tool-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(236, 72, 153, 0.5);
    box-shadow: 0 4px 18px rgba(236, 72, 153, 0.2);
}

.sidebar-tool-icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-tool-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.sidebar-tool-name {
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-tool-desc {
    font-size: 0.68rem;
    color: var(--icon-color);
    opacity: 0.85;
    line-height: 1.2;
}

.sidebar-tool-badge {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(236, 72, 153, 0.15);
    color: #EC4899;
    letter-spacing: 0.04em;
}

/* ─── AI Image Gen Studio Panel (Gemini 3.1 Flash Image) ─── */
.image-studio-panel,
.image-studio-panel * {
    box-sizing: border-box;
    font-family: var(--font-chat) !important;
}

.image-studio-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) scale(0.96);
    width: 92%;
    max-width: 1120px;
    height: 640px;
    max-height: 90vh;
    background: rgba(245, 247, 252, 0.94);
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
    border: 1px solid rgba(90, 111, 154, 0.25);
    border-radius: 24px;
    z-index: 1001;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.image-studio-panel.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

body.dark-mode .image-studio-panel {
    background: rgba(13, 17, 23, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.image-studio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(90, 111, 154, 0.15);
    background: rgba(255, 255, 255, 0.4);
}

body.dark-mode .image-studio-header {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.image-studio-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.image-studio-icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #018EEF, #0284C7);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(1, 142, 239, 0.3);
}

.image-studio-model-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(1, 142, 239, 0.1);
    border: 1px solid rgba(1, 142, 239, 0.22);
    color: #38BDF8;
    font-size: 0.72rem;
    font-weight: 700;
}

.pulse-green-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #018EEF;
    box-shadow: 0 0 4px rgba(1, 142, 239, 0.4);
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.image-studio-close-btn {
    border: none;
    background: transparent;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--icon-color);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
}

.image-studio-close-btn:hover {
    color: #EF4444;
    transform: scale(1.1);
}

.image-studio-body {
    display: flex;
    padding: 20px 24px;
    gap: 24px;
    flex: 1;
    overflow: hidden;
}

.image-studio-controls {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding-right: 6px;
}

.studio-control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.studio-control-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.studio-inspire-btn {
    background: none;
    border: none;
    color: #018EEF;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.studio-inspire-btn:hover {
    opacity: 0.8;
}

.studio-prompt-textarea {
    width: 100%;
    min-height: 76px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(90, 111, 154, 0.25);
    background: rgba(255, 255, 255, 0.8);
    font-family: var(--font-chat);
    font-size: 0.88rem;
    color: var(--text-dark);
    resize: none;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.studio-prompt-textarea:focus {
    border-color: #018EEF;
    box-shadow: 0 0 0 3px rgba(1, 142, 239, 0.15);
}

body.dark-mode .studio-prompt-textarea {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #F1F5F9;
}

.studio-inspire-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.inspire-chip-label {
    font-size: 0.7rem;
    color: var(--icon-color);
    font-weight: 600;
}

.studio-chip {
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid rgba(90, 111, 154, 0.2);
    background: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.18s;
}

.studio-chip:hover {
    background: rgba(236, 72, 153, 0.1);
    border-color: rgba(236, 72, 153, 0.4);
    color: #EC4899;
    transform: translateY(-1px);
}

body.dark-mode .studio-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #E2E8F0;
}

.studio-ratio-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.studio-ratio-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1.5px solid rgba(90, 111, 154, 0.18);
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.studio-ratio-btn:hover {
    border-color: rgba(1, 142, 239, 0.4);
    background: rgba(255, 255, 255, 0.9);
}

.studio-ratio-btn.active {
    border-color: #018EEF;
    background: rgba(1, 142, 239, 0.08);
    box-shadow: 0 0 0 2px rgba(1, 142, 239, 0.2);
}

body.dark-mode .studio-ratio-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.09);
    color: #F1F5F9;
}

body.dark-mode .studio-ratio-btn.active {
    background: rgba(1, 142, 239, 0.15);
    border-color: #018EEF;
}

.ratio-box {
    border: 1.5px solid currentColor;
    border-radius: 3px;
    display: inline-block;
}

.ratio-box.square { width: 16px; height: 16px; }
.ratio-box.portrait { width: 12px; height: 18px; }
.ratio-box.landscape { width: 18px; height: 12px; }
.ratio-box.standard { width: 16px; height: 13px; }

.ratio-title { font-size: 0.74rem; font-weight: 700; color: var(--text-dark); }
.ratio-sub { font-size: 0.62rem; color: var(--icon-color); }

.studio-dual-controls {
    display: flex;
    gap: 12px;
}

.studio-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(90, 111, 154, 0.22);
    background: rgba(255, 255, 255, 0.8);
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--text-dark);
    outline: none;
}

body.dark-mode .studio-select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #F1F5F9;
}

.studio-generate-action-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.studio-generate-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #EC4899, #8B5CF6);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.35);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.45);
}

.studio-generate-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.studio-hotkey-hint {
    font-size: 0.7rem;
    color: var(--icon-color);
    text-align: center;
}

.studio-hotkey-hint kbd {
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-family: monospace;
}

body.dark-mode .studio-hotkey-hint kbd {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Right Output & Preview Column */
.image-studio-preview-wrap {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.studio-canvas-stage {
    flex: 1;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.5);
    border: 1.5px dashed rgba(90, 111, 154, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 12px;
}

body.dark-mode .studio-canvas-stage {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.12);
}

.studio-idle-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    max-width: 320px;
}

.studio-idle-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(90, 111, 154, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.studio-idle-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.studio-idle-sub {
    font-size: 0.78rem;
    color: var(--icon-color);
    line-height: 1.4;
    margin: 0;
}

.studio-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.studio-dotted-skeleton {
    width: 80%;
    aspect-ratio: 1/1;
    max-height: 320px;
    border: 2px dashed rgba(236, 72, 153, 0.45);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.05) 0%, transparent 70%);
}

.studio-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.studio-loading-spinner {
    display: flex;
    gap: 5px;
}

.studio-loading-spinner span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EC4899;
    animation: bounceDots 1.4s infinite ease-in-out both;
}

.studio-loading-spinner span:nth-child(1) { animation-delay: -0.32s; }
.studio-loading-spinner span:nth-child(2) { animation-delay: -0.16s; }
.studio-loading-spinner span:nth-child(3) { animation-delay: 0s; }
.studio-loading-spinner span:nth-child(4) { animation-delay: 0.16s; }

@keyframes bounceDots {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

.studio-loading-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #EC4899;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(236, 72, 153, 0.1);
}

.studio-loading-status {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
}

.studio-loading-timer {
    font-size: 0.72rem;
    color: var(--icon-color);
    font-family: monospace;
}

.studio-result-state {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.studio-image-frame {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}

.studio-generated-img {
    display: block;
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
    border-radius: 14px;
    transition: transform 0.3s ease;
}

.studio-generated-img:hover {
    transform: scale(1.02);
}

.studio-image-overlay-info {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.studio-img-badge {
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

.studio-img-badge.model {
    background: rgba(16, 185, 129, 0.85);
}

.studio-action-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.studio-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid rgba(90, 111, 154, 0.2);
    background: rgba(255, 255, 255, 0.75);
    color: var(--text-dark);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.studio-tool-btn:hover {
    transform: translateY(-1px);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.studio-tool-btn.primary {
    background: #181A18;
    color: #fff;
    border-color: #181A18;
}

body.dark-mode .studio-tool-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #F1F5F9;
}

body.dark-mode .studio-tool-btn.primary {
    background: #F1F5F9;
    color: #0F172A;
    border-color: #F1F5F9;
}

.studio-gallery-section {
    display: flex;
    flex-direction: column;
}

.studio-gallery-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px 2px;
}

.studio-gallery-empty {
    font-size: 0.72rem;
    color: var(--icon-color);
    padding: 6px 0;
}

.studio-thumb-card {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid rgba(90, 111, 154, 0.2);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
}

.studio-thumb-card:hover {
    transform: scale(1.06);
    border-color: #018EEF;
}

.studio-thumb-card.active {
    border-color: #018EEF;
    box-shadow: 0 0 0 2px rgba(1, 142, 239, 0.35);
}

.studio-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.studio-thumb-ratio {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

/* Inline Chat Real Image Preview */
.inline-poster-real-rendered {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    overflow: hidden;
    background: #0a0a0f;
}

.inline-real-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}

.inline-poster-real-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    color: #38BDF8;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ─── Autonomous Ground Research Pill (Displayed under Greeting during initial audit) ─── */
.ground-research-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 10px 22px;
    background: var(--glass-bg, rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    color: var(--text-secondary, #475569);
    font-family: var(--font-chat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    animation: pillFadeIn 0.4s ease-out forwards;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 15;
}

[data-theme="dark"] .ground-research-pill {
    background: rgba(20, 24, 33, 0.78);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.ground-radar-ring {
    position: relative;
    width: 10px;
    height: 10px;
    display: inline-block;
}

.ground-radar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #018EEF;
    box-shadow: 0 0 6px rgba(1, 142, 239, 0.4);
    animation: groundRadarPulse 1.8s infinite ease-in-out;
}

@keyframes groundRadarPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 8px rgba(1, 142, 239, 0.6); }
}

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

/* ─── Butler Module Recommendation Card in Chat ─── */
.module-rec-container {
    width: 100%;
    max-width: 780px;
    margin: 12px auto 20px;
    align-self: center;
    box-sizing: border-box;
    scroll-margin-bottom: 140px;
    animation: modRecSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.module-rec-bubble {
    background: var(--glass-bg, #ffffff);
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    border-radius: 20px;
    padding: 24px 28px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

[data-theme="dark"] .module-rec-bubble {
    background: rgba(22, 27, 38, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.mod-rec-header {
    margin-bottom: 20px;
}

.mod-rec-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(1, 142, 239, 0.12);
    color: #018EEF;
    border: 1px solid rgba(1, 142, 239, 0.25);
    margin-bottom: 12px;
}

[data-theme="dark"] .mod-rec-badge {
    background: rgba(1, 142, 239, 0.18);
    color: #38BDF8;
    border-color: rgba(56, 189, 248, 0.35);
}

.mod-rec-title {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.mod-rec-subtitle {
    font-family: var(--font-chat);
    font-size: 0.94rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.mod-rec-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 18px 0 24px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    border-radius: 14px;
}

[data-theme="dark"] .mod-rec-card-body {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.mod-rec-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mod-rec-icon-wrap {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.mod-rec-feature-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.mod-rec-feature-desc {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.mod-rec-actions-container {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.mod-rec-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: linear-gradient(135deg, #018EEF 0%, #0070C0 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(1, 142, 239, 0.3);
    transition: all 0.2s ease;
}

.mod-rec-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 142, 239, 0.4);
    filter: brightness(1.05);
}

.mod-rec-btn-skip {
    display: inline-flex;
    align-items: center;
    padding: 11px 18px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.15));
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mod-rec-btn-skip:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

[data-theme="dark"] .mod-rec-btn-skip {
    border-color: rgba(255, 255, 255, 0.15);
    color: #94a3b8;
}

[data-theme="dark"] .mod-rec-btn-skip:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
}

.mod-rec-skipped-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

[data-theme="dark"] .mod-rec-skipped-notice {
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
}

.mod-rec-skip-tag {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* ─── Skip Guidance Box in Chat ─── */
.module-skip-guidance-box {
    margin: 12px 0;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[data-theme="dark"] .module-skip-guidance-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.guidance-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-primary);
    color: var(--bg-primary, #fff);
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.btn-guidance-menu {
    align-self: flex-start;
    margin-left: 26px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--glass-bg, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.12));
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-guidance-menu:hover {
    background: var(--text-primary);
    color: var(--bg-primary, #fff);
}

/* ─── Chat Agent Module Cards ─── */
.chat-agent-module-card {
    padding: 18px 22px;
    background: var(--glass-bg, #ffffff);
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    margin: 6px 0;
}

[data-theme="dark"] .chat-agent-module-card {
    background: rgba(22, 27, 38, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
}

.agent-mod-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #018EEF;
    margin-bottom: 4px;
}

[data-theme="dark"] .agent-mod-tag {
    color: #38BDF8;
}

.chat-agent-module-card h4 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px 0;
}

.chat-agent-module-card p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.agent-mod-list {
    margin: 0 0 16px 0;
    padding-left: 20px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.agent-mod-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-agent-enable-mod {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #018EEF 0%, #0070C0 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(1, 142, 239, 0.25);
    transition: all 0.2s ease;
}

.btn-agent-enable-mod:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 142, 239, 0.35);
}

.btn-agent-open-hub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-agent-open-hub:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.btn-agent-menu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.15));
    color: var(--text-secondary);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-agent-menu:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-agent-menu {
    border-color: rgba(255, 255, 255, 0.15);
    color: #94a3b8;
}

[data-theme="dark"] .btn-agent-menu:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
}

.menu-grid.pulse-highlight {
    animation: menuPulse 0.6s ease-in-out 3;
    border-radius: 8px;
}

@keyframes menuPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    50% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.35); }
}

/* ─── Live Research Status in Chat Area (When interrupted by user) ─── */
.live-research-banner-msg {
    margin: 10px 0 16px;
    animation: pillFadeIn 0.3s ease-out forwards;
}

.live-research-chat-bubble {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--glass-bg, rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    font-size: 0.88rem;
    color: var(--text-secondary);
}

[data-theme="dark"] .live-research-chat-bubble {
    background: rgba(20, 24, 33, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.footprint-result-msg {
    width: 100%;
    max-width: 780px;
    margin: 12px auto;
    align-self: center;
    box-sizing: border-box;
    scroll-margin-bottom: 140px;
    animation: modRecSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── My Business Profile & Settings Tab ─── */
.my-biz-status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.my-biz-status-badge.verified {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
    border: 1px solid rgba(39, 174, 96, 0.3);
}
.my-biz-status-badge.unverified {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, 0.3);
}
.my-biz-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 600px) {
    .my-biz-card-grid {
        grid-template-columns: 1fr;
    }
}
.my-biz-sources-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.settings-field-group-claude {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-field-label-claude {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark, #181A18);
    margin-bottom: 2px;
}

body.dark-mode .settings-field-label-claude {
    color: #94A3B8;
}

.my-biz-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #181A18;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 9px 18px;
    cursor: pointer;
    transition: all 0.18s ease;
}

body.dark-mode .my-biz-btn-save {
    background: #F8F2ED;
    color: #181A18;
    border-color: transparent;
}

.my-biz-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.dark-mode .my-biz-btn-save:hover {
    background: #FFFFFF;
}
.my-biz-save-feedback {
    font-size: 0.82rem;
    color: #018EEF;
    font-weight: 600;
}
body.dark-mode .my-biz-save-feedback {
    color: #38BDF8;
}
.my-biz-re-research-box {
    background: var(--glass-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 18px 20px;
}
.my-biz-re-research-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.my-biz-re-research-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-primary);
}
.my-biz-btn-research {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 9px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.my-biz-btn-research:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
}
.my-biz-btn-research:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.ground-radar-dot-small {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #018EEF;
    animation: radarPulse 1.2s infinite ease-in-out;
}
.my-biz-research-status {
    margin-top: 12px;
    font-size: 0.82rem;
    padding: 8px 12px;
    border-radius: 8px;
    line-height: 1.4;
}
.my-biz-research-status.success {
    background: rgba(1, 142, 239, 0.12);
    color: #018EEF;
    border: 1px solid rgba(1, 142, 239, 0.25);
}
body.dark-mode .my-biz-research-status.success {
    color: #38BDF8;
}
.my-biz-research-status.error {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.25);
}

.intel-btn-my-biz {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.intel-btn-my-biz:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Chat Card for My Business info */
.biz-info-chat-card {
    background: var(--glass-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    padding: 18px 20px;
    margin: 8px 0;
}
.biz-info-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 1.05rem;
}
.biz-info-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
}
.biz-info-chat-body {
    font-size: 0.92rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════
   ─── BUTLER AGENTIC CREATIVE STUDIO & PERSONAL AI MANAGER ─────────
   ═══════════════════════════════════════════════════════════════════ */

.agentic-studio-card {
    width: 100%;
    max-width: 420px;
    margin: 12px 0 6px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    font-family: var(--font-sans, 'Space Grotesk', sans-serif);
    transition: all 0.3s ease;
}

body.dark-mode .agentic-studio-card {
    background: rgba(18, 22, 28, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

.agentic-studio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .agentic-studio-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.agentic-studio-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dark, #181A18);
}

body.dark-mode .agentic-studio-badge {
    color: #F8FAFC;
}

.agentic-live-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #018EEF;
    box-shadow: 0 0 4px rgba(1, 142, 239, 0.4);
    animation: agenticPulse 1.6s infinite ease-in-out;
}

@keyframes agenticPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 6px rgba(1, 142, 239, 0.6); }
}

.agentic-studio-phase {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.agentic-studio-phase.phase-ready {
    background: rgba(1, 142, 239, 0.12);
    color: #38BDF8;
    border-color: rgba(1, 142, 239, 0.3);
}

body.dark-mode .agentic-studio-phase {
    background: rgba(255, 255, 255, 0.08);
    color: #F8F2ED;
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .agentic-studio-phase.phase-ready {
    background: rgba(1, 142, 239, 0.18);
    color: #38BDF8;
    border-color: rgba(1, 142, 239, 0.35);
}

/* Agentic Pipeline Step Tracker */
.agentic-pipeline-tracker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 2px;
}

.agentic-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary, #64748B);
    transition: all 0.25s ease;
}

.agentic-step.step-done {
    color: var(--text-dark, #1E293B);
}

body.dark-mode .agentic-step.step-done {
    color: #E2E8F0;
}

.agentic-step.step-active {
    color: #018EEF;
    font-weight: 600;
}

body.dark-mode .agentic-step.step-active {
    color: #38BDF8;
}

.step-icon {
    font-size: 0.88rem;
    min-width: 18px;
    text-align: center;
}

.step-text {
    flex: 1;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-swatch-mini {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 3px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Social Caption Card in Chat */
.agentic-caption-card {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.dark-mode .agentic-caption-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.agentic-caption-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.agentic-caption-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748B);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.agentic-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #FFFFFF;
    color: var(--text-dark, #181A18);
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark-mode .agentic-copy-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #F8FAFC;
}

.agentic-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.agentic-caption-text {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-dark, #1E293B);
    white-space: pre-wrap;
    max-height: 140px;
    overflow-y: auto;
    font-family: inherit;
}

body.dark-mode .agentic-caption-text {
    color: #E2E8F0;
}

.agentic-hashtags-text {
    font-size: 0.76rem;
    color: #0284C7;
    font-weight: 500;
    word-break: break-word;
}

body.dark-mode .agentic-hashtags-text {
    color: #38BDF8;
}

/* Strategic Timing Pill & Channel Status */
.agentic-meta-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.72rem;
}

.agentic-timing-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary, #64748B);
    font-weight: 500;
}

.agentic-channel-tags {
    display: flex;
    align-items: center;
    gap: 5px;
}

.agentic-channel-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 132, 255, 0.1);
    color: #0084FF;
    border: 1px solid rgba(0, 132, 255, 0.2);
}

/* Quick Manager Modification Chips */
.agentic-quick-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.agentic-quick-chip {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--text-secondary, #475569);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

body.dark-mode .agentic-quick-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94A3B8;
}

.agentic-quick-chip:hover {
    background: var(--text-dark, #181A18);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

body.dark-mode .agentic-quick-chip:hover {
    background: #FFFFFF;
    color: #0F172A;
}

/* ─── Jarvis Proactive Follow-up & Alive Brain Styling ─── */
.msg-bubble.jarvis-proactive-bubble {
    border: 1px solid rgba(14, 165, 233, 0.28);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.04), rgba(56, 189, 248, 0.02));
    position: relative;
    padding-top: 14px;
}

body.dark-mode .msg-bubble.jarvis-proactive-bubble {
    border-color: rgba(56, 189, 248, 0.35);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(15, 23, 42, 0.8));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 15px rgba(14, 165, 233, 0.08);
}

.jarvis-proactive-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0284C7;
    margin-bottom: 8px;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.22);
    padding: 2px 8px;
    border-radius: 999px;
}

body.dark-mode .jarvis-proactive-header {
    color: #38BDF8;
    background: rgba(14, 165, 233, 0.16);
    border-color: rgba(56, 189, 248, 0.3);
}

.jarvis-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0284C7;
    box-shadow: 0 0 6px #0284C7;
    animation: pulse 1.8s infinite;
}

body.dark-mode .jarvis-pulse-dot {
    background: #38BDF8;
    box-shadow: 0 0 8px #38BDF8;
}

.jarvis-action-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .jarvis-action-chips {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.jarvis-action-chip {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.25);
    color: #0284C7;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

body.dark-mode .jarvis-action-chip {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.25);
    color: #E0F2FE;
}

.jarvis-action-chip:hover {
    background: #0284C7;
    color: #FFFFFF;
    border-color: #0284C7;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25);
}

body.dark-mode .jarvis-action-chip:hover {
    background: #38BDF8;
    color: #0F172A;
    border-color: #38BDF8;
    box-shadow: 0 3px 10px rgba(56, 189, 248, 0.35);
}

.jarvis-action-chip.dismiss {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-muted, #64748B);
}

body.dark-mode .jarvis-action-chip.dismiss {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94A3B8;
}

.jarvis-action-chip.dismiss:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-dark, #181A18);
}

body.dark-mode .jarvis-action-chip.dismiss:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #F8FAFC;
}

/* ─── Butler V3 Dual-Voice & Strategic Pre-Sprint Styles ─── */

/* 1. Onboarding & Settings Voice Selection Cards */
.ob-voice-selection-grid,
.settings-voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.ob-voice-card,
.settings-voice-card {
    background: rgba(255, 255, 255, 0.65);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    user-select: none;
    position: relative;
}

body.dark-mode .ob-voice-card,
body.dark-mode .settings-voice-card {
    background: rgba(30, 34, 42, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
}

.ob-voice-card:hover,
.settings-voice-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.08);
}

body.dark-mode .ob-voice-card:hover,
body.dark-mode .settings-voice-card:hover {
    background: rgba(38, 43, 54, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.4);
}

.ob-voice-card.selected,
.settings-voice-card.selected {
    border-color: #0284C7;
    background: rgba(2, 132, 199, 0.06);
    box-shadow: 0 0 0 2px #0284C7, 0 4px 12px rgba(2, 132, 199, 0.15);
}

body.dark-mode .ob-voice-card.selected,
body.dark-mode .settings-voice-card.selected {
    border-color: #38BDF8;
    background: rgba(56, 189, 248, 0.12);
    box-shadow: 0 0 0 2px #38BDF8, 0 4px 12px rgba(56, 189, 248, 0.25);
}

.ob-voice-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ob-voice-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.ob-voice-avatar.female {
    background: linear-gradient(135deg, #FFE4E6, #FECDD3);
}

.ob-voice-avatar.male {
    background: linear-gradient(135deg, #E0F2FE, #BAE6FD);
}

.ob-voice-avatar.jarvis {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
}

.ob-voice-avatar.alfred {
    background: linear-gradient(135deg, #F1F5F9, #CBD5E1);
}

.ob-voice-avatar.tara {
    background: linear-gradient(135deg, #ECFDF5, #A7F3D0);
}

.ob-voice-avatar.meera {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
}

.ob-voice-avatar.alfred {
    background: linear-gradient(135deg, #1E293B, #0F172A);
    color: #F8FAFC;
}

.ob-voice-avatar.muted {
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
    color: #64748B;
}

body.dark-mode .ob-voice-avatar.muted {
    background: linear-gradient(135deg, #334155, #1E293B);
    color: #94A3B8;
}

.settings-voice-option-card {
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 12px 16px;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    user-select: none;
}

body.dark-mode .settings-voice-option-card {
    background: rgba(30, 34, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

.settings-voice-option-card:hover {
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

.settings-voice-option-card.selected {
    background: rgba(254, 243, 199, 0.35);
    border-color: #F59E0B;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
}

body.dark-mode .settings-voice-option-card.selected {
    background: rgba(245, 158, 11, 0.1);
    border-color: #F59E0B;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}

.settings-voice-option-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-voice-option-info {
    flex: 1;
    min-width: 0;
}

.settings-voice-option-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--text-primary, #0f172a);
}

body.dark-mode .settings-voice-option-title {
    color: #F8FAFC;
}

.settings-voice-option-desc {
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
    margin-top: 2px;
}

.settings-voice-radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.settings-voice-option-card.selected .settings-voice-radio-circle {
    border-color: #F59E0B;
}

.settings-voice-radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #F59E0B;
    opacity: 0;
    transform: scale(0.4);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.settings-voice-option-card.selected .settings-voice-radio-dot {
    opacity: 1;
    transform: scale(1);
}

.settings-voice-option-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.ob-single-voice-card {
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    user-select: none;
    position: relative;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .ob-single-voice-card {
    background: rgba(30, 34, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ob-single-voice-card:hover {
    transform: translateY(-1.5px);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

body.dark-mode .ob-single-voice-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ob-single-voice-card.selected {
    border-color: #D97706;
    background: rgba(245, 158, 11, 0.06);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.6), 0 4px 16px rgba(245, 158, 11, 0.12);
}

body.dark-mode .ob-single-voice-card.selected {
    border-color: #F59E0B;
    background: rgba(245, 158, 11, 0.12);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5), 0 4px 16px rgba(245, 158, 11, 0.25);
}

.ob-single-voice-card .ob-voice-demo-btn {
    width: auto;
    min-width: 170px;
    padding: 8px 16px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .ob-single-voice-card {
        flex-direction: column;
        align-items: stretch;
    }
    .ob-single-voice-card .ob-voice-demo-btn {
        width: 100%;
    }
}

body.dark-mode .ob-voice-avatar.female {
    background: linear-gradient(135deg, #881337, #4C0519);
}

body.dark-mode .ob-voice-avatar.male {
    background: linear-gradient(135deg, #075985, #082F49);
}

body.dark-mode .ob-voice-avatar.jarvis {
    background: linear-gradient(135deg, #78350F, #451A03);
}

body.dark-mode .ob-voice-avatar.alfred {
    background: linear-gradient(135deg, #334155, #1E293B);
}

body.dark-mode .ob-voice-avatar.tara {
    background: linear-gradient(135deg, #064E3B, #022C22);
}

.ob-voice-meta {
    flex: 1;
    min-width: 0;
}

.ob-voice-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-dark, #0F172A);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

body.dark-mode .ob-voice-name {
    color: #F8FAFC;
}

.ob-voice-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(2, 132, 199, 0.1);
    color: #0284C7;
}

body.dark-mode .ob-voice-badge {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
}

.ob-voice-badge.gold {
    background: rgba(245, 158, 11, 0.12);
    color: #D97706;
}

body.dark-mode .ob-voice-badge.gold {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
}

.ob-voice-badge.emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

body.dark-mode .ob-voice-badge.emerald {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

.ob-voice-desc {
    font-size: 0.76rem;
    color: var(--text-muted, #64748B);
    margin-top: 2px;
}

body.dark-mode .ob-voice-desc {
    color: #94A3B8;
}

.ob-voice-demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-dark, #0F172A);
    cursor: pointer;
    transition: all 0.18s ease;
    width: 100%;
}

body.dark-mode .ob-voice-demo-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #F8FAFC;
}

.ob-voice-demo-btn:hover {
    background: #0284C7;
    border-color: #0284C7;
    color: #FFFFFF;
    transform: translateY(-1px);
}

body.dark-mode .ob-voice-demo-btn:hover {
    background: #38BDF8;
    border-color: #38BDF8;
    color: #0F172A;
}

.ob-voice-demo-btn.playing {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

@keyframes waveBounce {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

/* 2. Global Chat Voice Mute/Unmute Button */
.action-btn.voice-mute-btn {
    position: relative;
    color: var(--icon-color, #64748B);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-btn.voice-mute-btn:hover {
    color: var(--text-dark, #0F172A);
    background: rgba(90, 111, 154, 0.1);
}

.action-btn.voice-mute-btn.muted {
    color: #94A3B8;
    opacity: 0.65;
}

.action-btn.voice-mute-btn.speaking-active {
    color: #0284C7;
    animation: voiceButtonPulse 1.2s infinite ease-in-out;
}

body.dark-mode .action-btn.voice-mute-btn.speaking-active {
    color: #38BDF8;
}

@keyframes voiceButtonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(2, 132, 199, 0);
    }
}

/* 3. Strategic Pre-Sprint Interview Card in Chat */
.strategic-sprint-interview-card {
    background: var(--glass-bg, rgba(255, 255, 255, 0.85));
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    border-radius: 18px;
    padding: 18px 20px;
    margin: 10px 0;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.08);
}

body.dark-mode .strategic-sprint-interview-card {
    background: rgba(30, 34, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.4);
}

.ssi-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ssi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(2, 132, 199, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ssi-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-dark, #0F172A);
}

body.dark-mode .ssi-title {
    color: #F8FAFC;
}

.ssi-sub {
    font-size: 0.78rem;
    color: var(--text-muted, #64748B);
    display: block;
    margin-top: 2px;
}

.ssi-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary, #334155);
    margin: 0 0 16px 0;
}

body.dark-mode .ssi-desc {
    color: #CBD5E1;
}

.ssi-question-group {
    margin-bottom: 14px;
}

.ssi-q-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark, #0F172A);
    margin-bottom: 8px;
}

body.dark-mode .ssi-q-label {
    color: #F8FAFC;
}

.ssi-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ssi-pill {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-dark, #0F172A);
    cursor: pointer;
    transition: all 0.18s ease;
}

body.dark-mode .ssi-pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #F8FAFC;
}

.ssi-pill:hover {
    border-color: #0284C7;
    color: #0284C7;
}

.ssi-pill.active {
    background: #0284C7;
    border-color: #0284C7;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

body.dark-mode .ssi-pill.active {
    background: #38BDF8;
    border-color: #38BDF8;
    color: #0F172A;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
}

.ssi-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.86rem;
    color: var(--text-dark, #0F172A);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

body.dark-mode .ssi-input {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: #F8FAFC;
}

.ssi-input:focus {
    border-color: #0284C7;
}

.ssi-narrative-preview {
    font-size: 0.78rem;
    background: rgba(0, 0, 0, 0.03);
    border: 1px dashed rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--text-muted, #64748B);
}

body.dark-mode .ssi-narrative-preview {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94A3B8;
}

.ssi-step {
    font-weight: 600;
    color: var(--text-dark, #0F172A);
}

body.dark-mode .ssi-step {
    color: #F8FAFC;
}

.ssi-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.ssi-confirm-btn {
    background: linear-gradient(135deg, #0284C7, #0369A1);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.ssi-confirm-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.4);
}

.btn-open-sprint-calendar {
    background: #0284C7;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    transition: all 0.2s ease;
}

.btn-open-sprint-calendar:hover {
    background: #0369A1;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .ob-voice-selection-grid,
    .settings-voice-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── First-Time Butler 30-Second Guided Tour & Spotlight Highlighting ─── */
.tour-welcome-msg {
    margin: 12px 0 20px;
    animation: tourCardFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tourCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tour-welcome-bubble {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 249, 255, 0.92) 100%);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 20px;
    padding: 22px 26px;
    box-shadow: 0 10px 30px -5px rgba(2, 132, 199, 0.12), 0 0 1px 1px rgba(14, 165, 233, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    max-width: 680px;
}

[data-theme="dark"] .tour-welcome-bubble {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.90) 100%);
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 12px 36px -6px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(56, 189, 248, 0.2);
}

.tour-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tour-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.2);
}

[data-theme="dark"] .tour-badge {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.3);
}

.tour-beacon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0284c7;
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7);
    animation: tourBeaconPulse 1.8s infinite;
}

[data-theme="dark"] .tour-beacon {
    background: #38bdf8;
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
}

@keyframes tourBeaconPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(2, 132, 199, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); }
}

.tour-skip-link {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.tour-skip-link:hover {
    color: var(--text-dark, #0f172a);
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .tour-skip-link:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.08);
}

.tour-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark, #0f172a);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

[data-theme="dark"] .tour-heading {
    color: #f8fafc;
}

.tour-body-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-body, #334155);
    margin: 0 0 16px;
    min-height: 44px;
    transition: opacity 0.25s ease;
}

[data-theme="dark"] .tour-body-text {
    color: #cbd5e1;
}

.tour-progress-track {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .tour-progress-track {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.tour-step-pill {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-muted, #64748b);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

[data-theme="dark"] .tour-step-pill {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
}

.tour-step-pill.active {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    border-color: #0284c7;
    transform: translateY(-1px);
}

[data-theme="dark"] .tour-step-pill.active {
    background: #38bdf8;
    color: #0f172a;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.4);
    border-color: #38bdf8;
}

.tour-step-pill.done {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .tour-step-pill.done {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.4);
}

/* ─── Spotlight Animation for Highlighted Tour Elements ─── */
.tour-spotlight-active {
    position: relative !important;
    z-index: 1000 !important;
    animation: tourElementSpotlight 1.5s ease-in-out infinite alternate !important;
    outline: none !important;
}

@keyframes tourElementSpotlight {
    0% {
        box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.9), 0 0 20px rgba(2, 132, 199, 0.45);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 0 6px rgba(2, 132, 199, 0.5), 0 0 32px rgba(2, 132, 199, 0.7);
        transform: scale(1.03);
    }
}

#voiceMuteBtn.tour-spotlight-active {
    border-radius: 50% !important;
    background: rgba(2, 132, 199, 0.15) !important;
}

#railNavModules.tour-spotlight-active,
#menuToggle.tour-spotlight-active {
    background: rgba(2, 132, 199, 0.18) !important;
    border-radius: 10px !important;
}

#chatInputContainer.tour-spotlight-active {
    border-color: #0284c7 !important;
    transform: scale(1.008) !important;
}

/* ─── Shake notice when user tries to send message during tour or background audit ─── */
@keyframes inputShakeNotice {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.tour-input-locked {
    animation: inputShakeNotice 0.4s ease-in-out !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.35) !important;
}

/* ─── Live Canvas Retirement (Per User Instruction) ─── */
.smm-live-canvas-toggle-btn,
#smmLiveCanvasToggleBtn,
.smm-live-canvas-panel,
#smmLiveCanvasPanel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Comprehensive Viewport Width & Height Responsive Systems
   ========================================================================== */

/* 1. SMM Calendar Modal Small-Screen Responsive Overhaul */
@media (max-width: 600px) {
    .smm-cal-overlay {
        padding: 12px 8px !important;
        align-items: center !important;
    }

    .smm-cal-modal {
        border-radius: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 24px) !important;
    }

    .smm-cal-header {
        padding: 12px 14px 10px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: space-between !important;
    }

    .smm-cal-title-group {
        flex: 1 1 auto;
    }

    .smm-cal-title {
        font-size: 1.05rem !important;
    }

    .smm-cal-subtitle {
        font-size: 0.72rem !important;
    }

    .smm-cal-nav {
        gap: 4px !important;
    }

    .smm-cal-nav-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.85rem !important;
    }

    .smm-cal-month-label {
        min-width: 90px !important;
        font-size: 0.82rem !important;
    }

    .smm-cal-close-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.95rem !important;
        flex-shrink: 0 !important;
    }

    .smm-cal-legend {
        padding: 8px 12px !important;
        gap: 10px !important;
        font-size: 0.72rem !important;
    }

    .smm-cal-grid {
        gap: 3px !important;
        padding: 6px !important;
    }

    .smm-cal-day {
        min-height: 48px !important;
        padding: 4px !important;
    }
}

/* 2. Constrained Height Viewports (Laptops with address bars & Mobile Landscape: height <= 600px) */
@media (max-height: 600px) {
    .header {
        padding: 8px 20px !important;
        height: auto !important;
        min-height: 46px !important;
    }

    .header-tagline {
        display: none !important;
    }

    .logo {
        font-size: 1.25rem !important;
    }

    .main-content {
        margin-top: -10px !important;
    }

    .greeting {
        font-size: 1.4rem !important;
        padding: 4px 16px !important;
    }

    .input-area {
        padding: 6px 16px 8px !important;
    }

    .input-container {
        padding: 6px 12px 6px 8px !important;
        border-radius: 20px !important;
    }

    .chat-input {
        font-size: 0.9rem !important;
        min-width: 100px !important;
    }

    .input-disclaimer {
        display: none !important;
    }

    .login-stage-container {
        padding: 16px 20px !important;
        gap: 16px !important;
        min-height: auto !important;
    }

    .login-hero-title {
        font-size: 2.2rem !important;
        margin-bottom: 6px !important;
    }

    .login-hero-subtitle {
        font-size: 0.92rem !important;
    }

    .login-card {
        padding: 18px 22px !important;
    }

    .social-login-group {
        gap: 8px !important;
    }

    .login-btn {
        padding: 9px 12px !important;
        font-size: 0.84rem !important;
    }

    .onboarding-card {
        max-height: calc(100dvh - 12px) !important;
    }

    .onboarding-header {
        padding: 10px 16px 8px !important;
    }

    .onboarding-body {
        padding: 10px 16px !important;
    }

    .ob-step-title {
        font-size: 1.15rem !important;
        margin-bottom: 2px !important;
    }

    .ob-step-subtitle {
        font-size: 0.78rem !important;
        margin-bottom: 8px !important;
    }

    .settings-card-claude {
        max-height: calc(100dvh - 16px) !important;
    }
}

/* 3. Ultra-Wide Screens (min-width: 2000px): Comfortable Reading Columns & Scaling */
@media (min-width: 2000px) {
    .chat-area,
    .main-content {
        max-width: 1400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .input-area {
        max-width: 1400px !important;
        margin: 0 auto !important;
    }
}

/* ─── Butler Active Plan & Radial Capacity Gauge ─── */
.biz-hub-plan-and-capacity {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 102, 204, 0.05);
    border: 1px solid rgba(0, 102, 204, 0.15);
    border-radius: 50px;
    padding: 4px 12px 4px 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
}

body.dark-mode .biz-hub-plan-and-capacity {
    background: rgba(56, 139, 253, 0.08);
    border-color: rgba(56, 139, 253, 0.2);
}

.biz-hub-plan-and-capacity:hover {
    background: rgba(0, 102, 204, 0.1);
    border-color: #0066cc;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.12);
}

.biz-hub-plan-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #0066cc 0%, #004b99 100%);
    color: #ffffff;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap !important;
    flex-shrink: 0;
    line-height: 1;
}

/* Prevent drawer capacity widget from peeking out behind apps dropdown */
body.apps-dropdown-open #bizHubPlanCapacityWidget,
body:has(.apps-dropdown.active) #bizHubPlanCapacityWidget {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
}

.radial-gauge-container {
    position: relative;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radial-gauge-svg {
    transform: rotate(-90deg);
}

.gauge-bg {
    stroke: rgba(0, 102, 204, 0.15);
}

body.dark-mode .gauge-bg {
    stroke: rgba(255, 255, 255, 0.15);
}

.gauge-progress {
    stroke: #0066cc;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .gauge-progress {
    stroke: #388bfd;
}

.gauge-percentage-text {
    position: absolute;
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--text-dark, #181A18);
    letter-spacing: -0.04em;
    pointer-events: none;
}

body.dark-mode .gauge-percentage-text {
    color: #ffffff;
}

.gauge-info-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.gauge-label {
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0066cc;
}

body.dark-mode .gauge-label {
    color: #58a6ff;
}

.gauge-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, #64748B);
}

/* ─── Compact Top Drawer Hub Plan & Capacity Widget ─── */
#bizHubPlanCapacityWidget {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(0, 102, 204, 0.05) !important;
    border: 1px solid rgba(0, 102, 204, 0.16) !important;
    border-radius: 20px !important;
    padding: 2px 8px 2px 3px !important;
    height: 26px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    flex-shrink: 0 !important;
}

body.dark-mode #bizHubPlanCapacityWidget {
    background: rgba(56, 139, 253, 0.08) !important;
    border-color: rgba(56, 139, 253, 0.22) !important;
}

#bizHubPlanCapacityWidget:hover {
    background: rgba(0, 102, 204, 0.1) !important;
    border-color: #0066cc !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15) !important;
}

#bizHubPlanCapacityWidget .biz-hub-plan-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 7px !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    height: 20px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

#bizHubPlanCapacityWidget .radial-gauge-container {
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#bizHubPlanCapacityWidget .radial-gauge-svg {
    width: 22px !important;
    height: 22px !important;
    transform: rotate(-90deg) !important;
}

#bizHubPlanCapacityWidget .gauge-percentage-text {
    position: absolute !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.48rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.06em !important;
    pointer-events: none !important;
}

#bizHubPlanCapacityWidget .gauge-info-text {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3px !important;
    line-height: 1 !important;
}

#bizHubPlanCapacityWidget .gauge-label {
    display: none !important; /* Tooltip and radial gauge communicate capacity clearly; removing label saves 60px of horizontal space */
}

#bizHubPlanCapacityWidget .gauge-sub {
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--text-dark, #181A18) !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
}

body.dark-mode #bizHubPlanCapacityWidget .gauge-sub {
    color: #F8F2ED !important;
}

/* ─── Sprint Rest Day Card Styling (Pro 12-post alternate days) ─── */
.biz-week-day-card.rest-day-card {
    opacity: 0.85;
    background: rgba(241, 245, 249, 0.6);
    border: 1px dashed rgba(100, 116, 139, 0.25);
}

body.dark-mode .biz-week-day-card.rest-day-card {
    background: rgba(30, 41, 59, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.biz-rest-day-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 12px;
    text-align: center;
    background: transparent !important;
}

.biz-rest-day-tag {
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    font-weight: 700;
    color: #64748B;
    background: rgba(100, 116, 139, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

/* ─── Prevent Business Hub Action Controls Truncation ─── */
.biz-brand-drawer .biz-hub-top-window-controls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    min-width: max-content !important;
}

.biz-brand-drawer .biz-hub-top-window-controls button {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex-shrink: 0 !important;
    padding: 4px 10px !important;
    min-width: fit-content !important;
}

/* ─── Luxury Animated Payment Success Overlay ─── */
.payment-success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInOverlay 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.payment-success-card {
    position: relative;
    width: 100%;
    max-width: 470px;
    background: #ffffff;
    border: 1px solid rgba(0, 102, 204, 0.2);
    border-radius: 26px;
    padding: 38px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 40, 100, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    transform: scale(0.92);
    animation: popUpSuccessCard 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s forwards;
    overflow: hidden;
}

body.dark-mode .payment-success-card {
    background: #141A23;
    border-color: rgba(56, 139, 253, 0.3);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.payment-success-icon-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    border: 1.5px solid rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 0 35px rgba(16, 185, 129, 0.3);
}

.checkmark-circle-svg {
    width: 52px;
    height: 52px;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3.5;
    stroke-miterlimit: 10;
    stroke: #10B981;
    animation: checkmarkStroke 0.65s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #10B981;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: checkmarkStroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

@keyframes checkmarkStroke {
    100% { stroke-dashoffset: 0; }
}

@keyframes popUpSuccessCard {
    to { transform: scale(1); }
}

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

.payment-success-badge {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 700;
    color: #10B981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 3px 10px;
    border-radius: 50px;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.payment-success-title {
    font-family: var(--font-chat, sans-serif);
    font-size: 1.45rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
    margin: 0 0 8px 0;
}

body.dark-mode .payment-success-title {
    color: #F8FAFC;
}

.payment-success-brand {
    background: linear-gradient(135deg, #0066cc 0%, #004b99 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-mode .payment-success-brand {
    background: linear-gradient(135deg, #388bfd 0%, #58a6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.payment-success-desc {
    font-size: 0.86rem;
    color: #64748B;
    line-height: 1.45;
    margin: 0 0 20px 0;
    max-width: 380px;
}

body.dark-mode .payment-success-desc {
    color: #94A3B8;
}

.payment-success-receipt {
    width: 100%;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

body.dark-mode .payment-success-receipt {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.pay-receipt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
}

.pay-receipt-label {
    color: #64748B;
}

body.dark-mode .pay-receipt-label {
    color: #94A3B8;
}

.pay-receipt-val {
    color: #0F172A;
    font-weight: 600;
}

body.dark-mode .pay-receipt-val {
    color: #F8FAFC;
}

.pay-receipt-val.highlight {
    color: #0066cc;
    font-weight: 700;
}

body.dark-mode .pay-receipt-val.highlight {
    color: #58a6ff;
}

.pay-receipt-code {
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    color: #475569;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

body.dark-mode .pay-receipt-code {
    color: #CBD5E1;
    background: rgba(255, 255, 255, 0.08);
}

.btn-payment-success-continue {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    background: linear-gradient(135deg, #0066cc 0%, #004b99 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-family: var(--font-chat, sans-serif);
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-payment-success-continue:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0, 102, 204, 0.45);
}

/* ─── Locked Week Card for 7-Day Free Trial ─── */
.biz-trial-locked-week-overlay {
    width: 100%;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}

.biz-trial-locked-card {
    max-width: 440px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px dashed rgba(0, 102, 204, 0.3);
    border-radius: 20px;
    padding: 30px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 50, 120, 0.06);
}

body.dark-mode .biz-trial-locked-card {
    background: rgba(20, 26, 35, 0.9);
    border-color: rgba(56, 139, 253, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.biz-trial-locked-card .locked-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.biz-trial-locked-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #0F172A;
}

body.dark-mode .biz-trial-locked-card h3 {
    color: #F8FAFC;
}

.biz-trial-locked-card p {
    font-size: 0.84rem;
    color: #64748B;
    line-height: 1.5;
    margin: 0 0 18px 0;
}

body.dark-mode .biz-trial-locked-card p {
    color: #94A3B8;
}

.btn-unlock-upgrade-sprint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: linear-gradient(135deg, #0066cc 0%, #004b99 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.25);
    transition: all 0.2s ease;
}

.btn-unlock-upgrade-sprint:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 102, 204, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════
   BUTLER PRESENSE DEDICATED CHECKOUT MODAL & COUPON ENGINE
   ═══════════════════════════════════════════════════════════════════ */
.checkout-overlay {
    z-index: 100020 !important;
}

.checkout-card {
    width: 580px !important;
    max-width: 95vw !important;
    padding: 0 !important;
    border-radius: 20px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 92vh !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(0, 102, 204, 0.1) !important;
}

.checkout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: #FFFFFF;
}

.checkout-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 102, 204, 0.06);
    border: 1px solid rgba(0, 102, 204, 0.15);
    color: #0066cc;
    font-size: 0.78rem;
    font-weight: 650;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.checkout-back-btn:hover {
    background: rgba(0, 102, 204, 0.12);
    transform: translateX(-1px);
}

.checkout-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 102, 204, 0.08);
    color: #0066cc;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.8px;
    padding: 4px 12px;
    border-radius: 20px;
}

.checkout-scroll-area {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Plan summary box */
.checkout-plan-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(240, 246, 255, 0.9) 100%);
    border: 1.5px solid rgba(0, 102, 204, 0.18);
    border-radius: 14px;
}

.checkout-plan-info {
    flex: 1;
}

.checkout-plan-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.checkout-plan-title {
    font-size: 1.15rem;
    font-weight: 750;
    color: #0F172A;
    margin: 0;
}

.checkout-plan-badge {
    background: linear-gradient(135deg, #0066cc, #004b99);
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}

.checkout-plan-desc {
    font-size: 0.78rem;
    color: #475569;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.checkout-plan-cadence-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 102, 204, 0.15);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #0066cc;
}

.cadence-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    display: inline-block;
}

.checkout-plan-price-box {
    text-align: right;
    min-width: 105px;
}

.checkout-cycle-label {
    display: block;
    font-size: 0.7rem;
    color: #64748B;
    font-weight: 500;
    margin-bottom: 2px;
}

.checkout-price-wrap {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 2px;
}

.checkout-currency {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0066cc;
}

.checkout-amount {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.5px;
}

.checkout-period {
    font-size: 0.72rem;
    color: #64748B;
    font-weight: 600;
}

/* Auto-Pay banner */
.checkout-autopay-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 12px;
}

.autopay-icon-wrap {
    color: #059669;
    padding-top: 1px;
    flex-shrink: 0;
}

.autopay-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #065F46;
    margin-bottom: 2px;
}

.autopay-desc {
    font-size: 0.74rem;
    color: #047857;
    line-height: 1.35;
}

/* Coupon Section */
.checkout-coupon-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkout-coupon-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkout-section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
}

.checkout-coupon-box {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coupon-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.checkout-coupon-input {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #0F172A;
    outline: none;
    transition: all 0.15s ease;
}

.checkout-coupon-input:focus {
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}

.btn-apply-coupon {
    padding: 10px 18px;
    background: #0066cc;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-apply-coupon:hover {
    background: #004b99;
    transform: translateY(-1px);
}

.btn-apply-coupon.applied {
    background: #10B981;
}

.checkout-coupon-quick-chips {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.72rem;
}

.quick-chips-label {
    color: #64748B;
    font-weight: 600;
}

.coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #EFF6FF;
    border: 1px dashed #3B82F6;
    color: #1D4ED8;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.coupon-chip:hover {
    background: #DBEAFE;
    transform: translateY(-1px);
}

.coupon-chip strong {
    font-weight: 750;
    letter-spacing: 0.5px;
}

.coupon-feedback-message {
    font-size: 0.76rem;
    font-weight: 650;
    padding: 6px 10px;
    border-radius: 6px;
    line-height: 1.35;
}

.coupon-feedback-message.success {
    background: rgba(16, 185, 129, 0.1);
    color: #065F46;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.coupon-feedback-message.error {
    background: rgba(239, 68, 68, 0.1);
    color: #991B1B;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Price Breakdown Card */
.checkout-breakdown-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #475569;
}

.breakdown-label {
    font-weight: 500;
}

.breakdown-value {
    font-weight: 650;
    color: #1E293B;
}

.breakdown-row.discount-row {
    color: #059669;
}

.text-discount {
    color: #059669;
    font-weight: 750;
}

.text-muted {
    color: #94A3B8;
    font-size: 0.74rem;
}

.breakdown-divider {
    height: 1px;
    background: #E2E8F0;
    margin: 4px 0;
}

.breakdown-row.total-row {
    padding-top: 2px;
}

.breakdown-total-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0F172A;
}

.breakdown-total-sub {
    font-size: 0.7rem;
    color: #64748B;
}

.breakdown-total-amount {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.total-currency {
    font-size: 1.15rem;
    font-weight: 750;
    color: #0066cc;
}

.total-number {
    font-size: 1.75rem;
    font-weight: 850;
    color: #0F172A;
    letter-spacing: -0.5px;
}

/* Customer Note */
.checkout-customer-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #64748B;
    background: rgba(0, 0, 0, 0.02);
    padding: 6px 12px;
    border-radius: 8px;
}

/* Proceed CTA button */
.checkout-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.btn-proceed-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 22px;
    background: linear-gradient(135deg, #0066cc 0%, #004b99 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 0.96rem;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.3);
    transition: all 0.2s ease;
}

.btn-proceed-checkout:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 12px 28px rgba(0, 102, 204, 0.4);
}

.btn-proceed-checkout:active {
    transform: translateY(0);
}

.checkout-guarantee-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: #64748B;
}

.guarantee-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ═══════════════════════════════════════════════════════════════════
   CANCEL SUBSCRIPTION / AUTO-PAY MODAL STYLES
   ═══════════════════════════════════════════════════════════════════ */
.cancel-sub-card {
    width: 480px !important;
    max-width: 92vw !important;
    padding: 24px !important;
    border-radius: 18px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 24px 60px rgba(220, 38, 38, 0.15), 0 0 0 1px rgba(220, 38, 38, 0.1) !important;
}

.cancel-sub-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cancel-sub-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.cancel-sub-title {
    font-size: 1.22rem;
    font-weight: 750;
    color: #0F172A;
    margin: 0;
}

.cancel-sub-desc {
    font-size: 0.84rem;
    color: #64748B;
    margin: 0;
    line-height: 1.45;
}

.cancel-sub-benefits-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 16px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.8rem;
    color: #334155;
    line-height: 1.4;
}

.cancel-benefit-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.cancel-benefit-check {
    color: #10B981;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.2;
}

.cancel-sub-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.btn-cancel-keep {
    flex: 1;
    padding: 12px 16px;
    background: #F1F5F9;
    color: #334155;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 650;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-cancel-keep:hover {
    background: #E2E8F0;
}

.btn-cancel-confirm {
    flex: 1.3;
    padding: 12px 16px;
    background: #DC2626;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}

.btn-cancel-confirm:hover {
    background: #B91C1C;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35);
}

/* Paywall Manage Button */
.pay-manage-sub-btn {
    background: transparent;
    border: 1px solid rgba(0, 102, 204, 0.3);
    color: #0066cc;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 650;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pay-manage-sub-btn:hover {
    background: rgba(0, 102, 204, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS BILLING ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════ */
.settings-billing-active-banner {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.06) 0%, rgba(16, 185, 129, 0.06) 100%);
    border: 1.5px solid rgba(0, 102, 204, 0.2);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}

.settings-billing-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-billing-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.5px;
}

.settings-billing-plan-badge.active-auto {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.settings-billing-plan-badge.cancelled-grace {
    background: rgba(245, 158, 11, 0.12);
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.settings-btn-cancel-auto {
    background: transparent;
    color: #DC2626;
    border: 1px solid rgba(220, 38, 38, 0.35);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.settings-btn-cancel-auto:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: #DC2626;
}

body.dark-mode .settings-btn-cancel-auto {
    color: #F87171;
    border-color: rgba(248, 113, 113, 0.35);
}

body.dark-mode .settings-btn-cancel-auto:hover {
    background: rgba(248, 113, 113, 0.12);
    border-color: #F87171;
}

/* ═══════════════════════════════════════════════════════════════════
   FULL WORKSPACE DRAG & DROP OVERLAY FOR CHAT & MEDIA
   ═══════════════════════════════════════════════════════════════════ */
.chat-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: fadeIn 0.15s ease-out;
}

.chat-drop-card {
    background: #ffffff;
    border: 2px dashed #0084FF;
    border-radius: 24px;
    padding: 36px 52px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 132, 255, 0.25);
    transform: scale(1.02);
    max-width: 440px;
    margin: 20px;
    pointer-events: auto;
}

body.dark-mode .chat-drop-card {
    background: #18191E;
    border-color: #38BDF8;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

.chat-drop-icon {
    color: #0084FF;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.dark-mode .chat-drop-icon {
    color: #38BDF8;
}

.chat-drop-title {
    margin: 0 0 6px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark, #181A18);
}

body.dark-mode .chat-drop-title {
    color: #F8F2ED;
}

.chat-drop-desc {
    margin: 0;
    font-size: 0.86rem;
    color: #64748B;
    line-height: 1.45;
}

body.dark-mode .chat-drop-desc {
    color: #94A3B8;
}

/* Brand Kit Dropzone Dragover Glow */
.biz-single-logo-dropzone.dragover,
.biz-product-upload-area.dragover {
    border-color: #0084FF !important;
    background: #EFF6FF !important;
    transform: scale(1.01);
}

body.dark-mode .biz-single-logo-dropzone.dragover,
body.dark-mode .biz-product-upload-area.dragover {
    background: rgba(0, 132, 255, 0.15) !important;
    border-color: #38BDF8 !important;
}

/* Logo Planning & Critique Action Chips in Chat */
.logo-chat-action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

body.dark-mode .logo-chat-action-chips {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.btn-logo-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 102, 204, 0.06);
    color: #0066cc;
    border: 1px solid rgba(0, 102, 204, 0.22);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-logo-action-chip:hover {
    background: #0066cc;
    color: #ffffff;
    border-color: #0066cc;
    transform: translateY(-1px);
}

body.dark-mode .btn-logo-action-chip {
    background: rgba(56, 189, 248, 0.1);
    color: #38BDF8;
    border-color: rgba(56, 189, 248, 0.25);
}

body.dark-mode .btn-logo-action-chip:hover {
    background: #38BDF8;
    color: #0F172A;
    border-color: #38BDF8;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════ */
body.dark-mode .checkout-card,
body.dark-mode .cancel-sub-card {
    background: #18191E !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .checkout-header {
    background: #18191E;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .checkout-plan-summary {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(0, 102, 204, 0.3);
}

body.dark-mode .checkout-plan-title,
body.dark-mode .checkout-amount,
body.dark-mode .breakdown-total-title,
body.dark-mode .total-number,
body.dark-mode .cancel-sub-title {
    color: #F8F2ED;
}

body.dark-mode .checkout-plan-cadence-pill {
    background: #23252B;
    border-color: rgba(255, 255, 255, 0.1);
    color: #60A5FA;
}

body.dark-mode .checkout-coupon-box,
body.dark-mode .checkout-breakdown-card,
body.dark-mode .cancel-sub-benefits-card {
    background: #23252B;
    border-color: rgba(255, 255, 255, 0.08);
    color: #CBD5E1;
}

body.dark-mode .checkout-coupon-input {
    background: #18191E;
    border-color: rgba(255, 255, 255, 0.15);
    color: #F8F2ED;
}

body.dark-mode .breakdown-value {
    color: #E2E8F0;
}

body.dark-mode .btn-cancel-keep {
    background: #23252B;
    color: #E2E8F0;
    border-color: rgba(255, 255, 255, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS (< 660px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 660px) {
    .checkout-card {
        width: 95vw !important;
        margin: auto;
    }
    
    .checkout-scroll-area {
        padding: 14px 14px;
        gap: 12px;
    }

    .checkout-plan-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .checkout-plan-price-box {
        text-align: left;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px dashed rgba(0, 102, 204, 0.15);
        padding-top: 8px;
    }

    .checkout-price-wrap {
        justify-content: flex-start;
    }

    .checkout-coupon-input {
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    .btn-apply-coupon {
        padding: 8px 14px;
    }

    .total-number {
        font-size: 1.45rem;
    }

    .cancel-sub-actions {
        flex-direction: column-reverse;
    }
}

/* ─────────────────────────────────────────────────────────────
   BUSINESS SWITCH MODAL & INDIVIDUAL PROFILE MODE ENHANCEMENTS
   ───────────────────────────────────────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10005;
    background: rgba(12, 14, 12, 0.72);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.business-switch-modal-card {
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #181A18);
    border: 1px solid var(--glass-border, rgba(24, 26, 24, 0.1));
    border-radius: 22px;
    width: 92%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.28);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    position: relative;
    box-sizing: border-box;
}

.modal-overlay.active .business-switch-modal-card {
    transform: translateY(0) scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
}

.modal-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text-primary, #181A18);
    letter-spacing: -0.01em;
}

.modal-subtitle {
    margin: 3px 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary, #666666);
    line-height: 1.4;
}

.modal-close-btn {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary, #666);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.12);
    color: var(--text-primary, #111);
    transform: scale(1.05);
}

.ob-btn-back {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #181A18);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ob-btn-back:hover {
    background: rgba(0, 0, 0, 0.05);
}

.ob-btn-primary {
    background: #181A18;
    color: #ffffff;
    border: none;
    padding: 11px 22px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ob-btn-primary:hover {
    transform: translateY(-1px);
    opacity: 0.94;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.ob-btn-primary:active {
    transform: translateY(0);
}

/* Custom Select styling for Onboarding & Modals */
.ob-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23555555%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px !important;
    cursor: pointer;
}

/* Individual Profile Settings Styles */
.indiv-goals-display-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.indiv-goal-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    background: rgba(0, 102, 204, 0.08);
    color: #0066cc;
    border: 1px solid rgba(0, 102, 204, 0.2);
}

.indiv-switch-biz-card {
    background: linear-gradient(135deg, rgba(24, 26, 24, 0.03) 0%, rgba(0, 102, 204, 0.06) 100%);
    border: 1px solid rgba(0, 102, 204, 0.22);
    border-radius: 16px;
    padding: 18px 20px;
    margin-top: 14px;
}

.indiv-switch-biz-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.indiv-switch-biz-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #181A18;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.indiv-switch-biz-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #181A18;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.indiv-switch-biz-btn:hover {
    transform: translateY(-1px);
    background: #000000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

/* Dark Mode Overrides */
body.dark-mode .business-switch-modal-card {
    background: #181A18;
    color: #F0F2F0;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
}

body.dark-mode .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .modal-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

body.dark-mode .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

body.dark-mode .ob-btn-back {
    color: #f0f2f0;
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .ob-btn-back:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .ob-btn-primary {
    background: #F8F9FA;
    color: #12141A;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

body.dark-mode .ob-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23bbbbbb%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-color: #1e221e;
    color: #f0f2f0;
}

body.dark-mode .indiv-goal-pill {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.28);
}

body.dark-mode .indiv-switch-biz-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(56, 189, 248, 0.08) 100%);
    border-color: rgba(56, 189, 248, 0.22);
}

body.dark-mode .indiv-switch-biz-btn {
    background: #ffffff;
    color: #181A18;
}

body.dark-mode .indiv-switch-biz-btn:hover {
    background: #f0f2f0;
}