:root {
    --bg-dark: #121214;
    --bg-sidebar: rgba(22, 22, 26, 0.75);
    --bg-hover: rgba(255, 255, 255, 0.06);
    --text-primary: #eeeeee;
    --text-secondary: #aaaaaa;
    --border-color: rgba(255, 255, 255, 0.08);
    --input-bg: rgba(255, 255, 255, 0.045);
    --accent-color: #e0e0e0;
    --accent-text: #000000;
    --modal-bg: rgba(28, 28, 32, 0.90);
    --code-bg: rgba(18, 18, 20, 0.92);
    --code-header-bg: rgba(255, 255, 255, 0.04);
    --code-text: #eeeeee;
    --code-header-text: #aaaaaa;
    --mode-slider-bg: #e0e0e0;
    --mode-slider-text: #000000;
    --codex-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    --codex-font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --codex-bg: #16161a;
    --codex-bg-deep: #0a0a0c;
    --codex-surface: rgba(22, 22, 26, 0.75);
    --codex-surface-strong: rgba(28, 28, 32, 0.90);
    --codex-surface-soft: rgba(255, 255, 255, 0.035);
    --codex-border: rgba(255, 255, 255, 0.08);
    --codex-border-strong: rgba(255, 255, 255, 0.14);
    --codex-border-soft: rgba(255, 255, 255, 0.05);
    --codex-text: #eeeeee;
    --codex-text-muted: #aaaaaa;
    --codex-text-soft: #888888;
    --codex-accent: #e0e0e0;
    --codex-accent-strong: #f5f5f5;
    --codex-accent-text: #000000;
    --codex-glow: rgba(150, 150, 150, 0.12);
    --codex-shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.45);
    --codex-shadow-md: 0 16px 36px rgba(0, 0, 0, 0.24);
    --codex-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.18);
    --codex-radius-xl: 28px;
    --codex-radius-lg: 22px;
    --codex-radius-md: 16px;
    --codex-radius-sm: 12px;
}

html,
body {
    font-family: var(--codex-font-sans);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--codex-text);
    background:
        radial-gradient(circle at 12% 18%, rgba(95, 120, 156, 0.18), transparent 28%),
        radial-gradient(circle at 82% 8%, rgba(177, 189, 208, 0.10), transparent 26%),
        radial-gradient(circle at 84% 82%, rgba(120, 135, 155, 0.10), transparent 24%),
        linear-gradient(180deg, var(--codex-bg-deep), var(--codex-bg));
}

body {
    position: relative;
    color: var(--codex-text);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    background:
        radial-gradient(circle at 20% 18%, rgba(200, 210, 224, 0.10), transparent 32%),
        radial-gradient(circle at 78% 14%, rgba(118, 134, 160, 0.14), transparent 30%),
        radial-gradient(circle at 82% 82%, rgba(69, 86, 111, 0.10), transparent 26%);
    opacity: 0.95;
    filter: blur(6px);
    animation: codex-ambient 18s ease-in-out infinite alternate;
}

body::after {
    background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.025), transparent 60%);
    mix-blend-mode: screen;
    opacity: 0.38;
}

body > * {
    position: relative;
    z-index: 1;
}

body,
button,
input,
select,
textarea {
    font-family: var(--codex-font-sans);
}

* {
    font-family: var(--codex-font-sans);
}

code,
pre,
kbd,
samp {
    font-family: var(--codex-font-mono);
}

::selection {
    background: rgba(216, 224, 235, 0.18);
    color: var(--codex-text);
}

.sidebar,
.helper-sidebar,
.login-card,
.brand-panel,
.auth-panel,
.chat-header,
.input-container,
.chat-input-area,
.library-header,
.document-card,
.modal,
.modal-settings,
.settings-window,
.side-chat-panel,
.mode-dropdown-menu,
.chat-menu-dropdown,
.theme-card,
.history-item,
.tool-btn,
.sidebar-toggle-btn,
.sidebar-btn,
.icon-btn,
.google-btn,
.submit-btn,
.current-mode-btn,
.header-search-wrapper,
.search-input,
.header-search-input,
.library-search-bar input,
.mindmap-upload-area,
.upload-area,
.generate-mindmap-btn,
.btn-primary,
.btn-secondary,
.change-avatar-btn,
.logout-btn,
.close-modal,
.close-side-chat,
.popup-ai-btn,
.welcome-tool-btn,
.settings-card,
.settings-tab-item,
.settings-tab-btn,
.study-sub-btn,
.sms-option,
.document-thumbnail,
.empty-state-library,
.mindmap-canvas,
.mindmap-input-section,
.mindmap-controls,
.upload-progress-container,
.file-list-section,
.preferred-name-input-wrap,
.ai-settings-panel,
.ai-voice-modal-card,
.notification-sound-menu,
.settings-overlay .modal,
.modal-overlay .modal {
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.sidebar,
.helper-sidebar,
.login-card,
.brand-panel,
.auth-panel,
.chat-header,
.library-header,
.document-card,
.modal,
.modal-settings,
.settings-window,
.side-chat-panel,
.mode-dropdown-menu,
.chat-menu-dropdown,
.theme-card,
.settings-card,
.settings-tab-item,
.settings-tab-btn,
.study-sub-btn,
.sms-option,
.empty-state-library,
.mindmap-canvas,
.mindmap-input-section,
.mindmap-controls,
.upload-progress-container,
.file-list-section,
.ai-settings-panel,
.ai-voice-modal-card,
.notification-sound-menu {
    background: var(--codex-surface);
    border: 1px solid var(--codex-border);
    box-shadow: var(--codex-shadow-md);
}

.main-content,
.auth-panel,
.brand-panel {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.03), transparent 42%),
        transparent;
}

.sidebar {
    width: 260px;
    transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease;
    background:
        linear-gradient(180deg, rgba(13, 16, 22, 0.92), rgba(10, 12, 18, 0.85)),
        var(--codex-bg);
    border-right: 1px solid var(--codex-border);
    box-shadow: 18px 0 52px rgba(0, 0, 0, 0.18);
}

.main-content {
    background:
        radial-gradient(circle at 50% 0%, rgba(179, 192, 214, 0.10), transparent 36%),
        linear-gradient(180deg, rgba(8, 10, 14, 0.98), rgba(6, 8, 12, 0.98));
}

.sidebar-header,
.sidebar-footer,
.tools-section,
.chat-history-section,
.chat-header,
.library-header,
.mindmap-header,
.settings-view-header,
.settings-tabs,
.settings-panels,
.settings-main,
.modal-header,
.modal-content,
.side-chat-header,
.side-chat-context,
.side-chat-messages,
.mindmap-input-section,
.mindmap-controls,
.upload-modal .modal-content,
.upload-modal .modal-header,
.profile-content,
.auth-panel,
.login-card,
.logo-section {
    position: relative;
}

.logo-icon-img,
.logo-image {
    background: transparent !important;
    border-radius: 18px;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
}

.logicum-mark {
    background: transparent !important;
    border-radius: 0 !important;
    object-fit: contain;
}

body.light-mode .logicum-mark {
    filter: invert(1) brightness(0.72) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12));
}

.logo-white {
    display: block !important;
}

.logo-black {
    display: none !important;
}

body.light-mode .logo-white {
    display: none !important;
}

body.light-mode .logo-black {
    display: block !important;
    filter: invert(1) contrast(0.9) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12));
}

.logo-text,
.brand-title,
.logo-section h1,
.library-header h1,
.settings-view-header h1,
.settings-section-title,
.modal-title,
.mindmap-title,
.welcome-message h1,
.section-title-row,
.section-title-row *,
.chat-header,
.tagline,
.brand-subtitle,
.library-subtitle,
.projects-subtitle,
.settings-subtitle,
.mode-option-title,
.mode-option-desc,
.history-title,
.history-preview,
.tool-btn,
.sidebar-btn,
.current-mode-btn,
.header-search-input,
.search-input,
.library-search-bar input,
.form-group label,
.form-group input,
.error-message,
.google-btn,
.submit-btn,
.btn-primary,
.btn-secondary,
.upload-first-btn,
.generate-mindmap-btn,
.change-avatar-btn,
.logout-btn,
.close-modal,
.close-side-chat,
.popup-ai-btn,
.preferred-name-input,
.preferred-name-help {
    letter-spacing: -0.01em;
}

.logo-text,
.logo-section h1,
.brand-title,
.welcome-message h1,
.library-header h1,
.settings-view-header h1,
.modal-title,
.mindmap-title {
    font-weight: 650;
}

.sidebar-header {
    padding: 18px 12px 12px;
    border-bottom: 1px solid var(--codex-border-soft);
}

.logo-text {
    color: var(--codex-text);
}

.tool-btn,
.sidebar-toggle-btn,
.sidebar-btn,
.icon-btn,
.google-btn,
.submit-btn,
.btn-primary,
.btn-secondary,
.change-avatar-btn,
.logout-btn,
.upload-first-btn,
.generate-mindmap-btn,
.close-modal,
.close-side-chat,
.popup-ai-btn,
.current-mode-btn,
.menu-btn,
.back-to-project-btn,
.header-search-wrapper,
.search-input,
.header-search-input,
.library-search-bar input,
.mindmap-upload-area,
.upload-area,
.preferred-name-input,
.settings-tab-btn,
.settings-tab-item,
.theme-card,
.study-sub-btn,
.sms-option {
    border-radius: 16px;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        opacity 180ms ease;
}

.tool-btn,
.sidebar-btn,
.sidebar-toggle-btn,
.icon-btn,
.google-btn,
.current-mode-btn,
.back-to-project-btn,
.menu-btn,
.close-modal,
.close-side-chat,
.popup-ai-btn,
.change-avatar-btn,
.logout-btn,
.upload-first-btn,
.generate-mindmap-btn,
.btn-primary,
.btn-secondary {
    border: 1px solid var(--codex-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--codex-text);
    box-shadow: none;
}

.tool-btn:hover,
.sidebar-toggle-btn:hover,
.sidebar-btn:hover,
.icon-btn:hover,
.google-btn:hover,
.current-mode-btn:hover,
.back-to-project-btn:hover,
.menu-btn:hover,
.close-modal:hover,
.close-side-chat:hover,
.popup-ai-btn:hover,
.change-avatar-btn:hover,
.logout-btn:hover,
.upload-first-btn:hover,
.generate-mindmap-btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.075);
    border-color: var(--codex-border-strong);
    transform: translateY(-1px);
}

.tool-btn.active,
.sidebar-btn.active,
.settings-tab-btn.active,
.settings-tab-item.active,
.study-sub-btn.active,
.sms-option.active,
.theme-card.active,
.history-item.active,
.mode-card.selected,
.mode-option.selected {
    background: rgba(219, 226, 237, 0.11);
    border-color: rgba(219, 226, 237, 0.22);
    color: var(--codex-text);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.sidebar-btn:hover,
.history-item:hover,
.mode-card:hover,
.mode-option:hover,
.document-card:hover,
.theme-card:hover {
    transform: translateY(-2px);
}

.tool-icon,
.icon,
.search-icon,
.toggle-icon,
.chevron-icon,
.context-icon,
.popup-ai-icon,
.upload-icon,
.close-modal svg,
.close-side-chat svg,
.btn-primary svg,
.btn-secondary svg {
    color: var(--codex-text-muted);
    stroke: currentColor;
}

.tool-icon,
.icon,
.search-icon,
.toggle-icon,
.chevron-icon,
.mode-icon svg,
.mode-option-icon svg,
.profile-avatar svg {
    display: block;
    flex: 0 0 auto;
    shape-rendering: geometricPrecision;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-menu-dropdown button svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    display: block;
    flex: 0 0 auto;
}

.sidebar-footer .profile-btn .profile-avatar svg {
    color: var(--codex-text-muted);
    width: 18px;
    height: 18px;
}

.search-input,
.header-search-input,
.library-search-bar input,
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"],
.preferred-name-input,
.mindmap-input-section textarea,
.mindmap-input-section input,
.settings-form input,
.settings-form textarea,
.settings-form select,
.chat-input-area textarea,
.side-chat-input-area textarea,
.chat-input,
.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"],
.google-btn {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--codex-border);
    color: var(--codex-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.search-input:focus,
.header-search-input:focus,
.library-search-bar input:focus,
.form-group input:focus,
.preferred-name-input:focus,
.mindmap-input-section textarea:focus,
.mindmap-input-section input:focus,
.settings-form input:focus,
.settings-form textarea:focus,
.settings-form select:focus,
.chat-input-area textarea:focus,
.side-chat-input-area textarea:focus,
.chat-input:focus,
.login-card input:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(219, 226, 237, 0.26);
    box-shadow: 0 0 0 4px rgba(169, 184, 206, 0.10);
    outline: none;
}

.sidebar-footer {
    border-top: 1px solid var(--codex-border-soft);
    background: rgba(0, 0, 0, 0.10);
}

.search-container {
    margin-top: 14px;
}

.search-trigger,
.search-input-container,
.library-search-bar {
    align-items: center;
}

.search-input {
    border-radius: 999px;
    padding: 10px 14px;
}

.header-search-wrapper .search-trigger {
    min-height: 100%;
}

.header-search-wrapper .search-icon {
    width: 18px;
    height: 18px;
    margin: 0;
}

.header-search-wrapper .search-input-container {
    gap: 10px;
}

.library-search-bar {
    min-height: 56px;
}

.library-search-bar .search-icon {
    position: static !important;
    transform: none !important;
    width: 20px;
    height: 20px;
}

.library-search-bar input {
    padding-left: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.history-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.06);
}

.history-item-icon,
.section-title-icon,
.section-title-icon--lg,
.profile-avatar,
.profile-avatar-large,
.file-type-badge,
.file-name-display,
.mindmap-view-header,
.ai-settings-row-btn,
.theme-toggle-track,
.upload-progress-container,
.progress-bar-bg,
.disclaimer,
.empty-state,
.empty-state-library {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--codex-border);
}

/* settings-card-header must be transparent — no box */
.settings-card-header {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.chat-header,
.library-header,
.mindmap-header,
.mindmap-container,
.mindmap-input-section,
.upload-modal .modal-content,
.profile-content,
.settings-main,
.settings-view-header,
.settings-panels,
.side-chat-panel,
.modal-content,
.modal-header,
.welcome-message,
.chat-container,
.input-container,
.chat-input-area,
.side-chat-input-area,
.mode-selection,
.welcome-tools,
.document-card,
.document-thumbnail,
.library-search-bar,
.filter-bar,
.header-search-wrapper,
.current-mode-btn,
.mode-dropdown-menu,
.chat-menu-dropdown {
    box-shadow: var(--codex-shadow-sm);
}

.chat-header,
.library-header,
.mindmap-header,
.settings-view-header,
.modal-header,
.side-chat-header {
    border-bottom: 1px solid var(--codex-border-soft);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        var(--codex-surface);
}

.chat-header {
    padding: 14px 18px;
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.chat-header .current-mode-btn,
.mode-card,
.mode-option,
.chat-menu-dropdown,
.mode-dropdown-menu,
.settings-tab-item,
.settings-tab-btn,
.study-sub-btn,
.sms-option {
    background: rgba(255, 255, 255, 0.03);
}

.mode-dropdown-menu,
.chat-menu-dropdown,
.settings-tabs-bar,
.settings-layout,
.modal,
.modal-settings,
.settings-window {
    border-radius: var(--codex-radius-lg);
}

.mode-dropdown-menu,
.chat-menu-dropdown {
    padding: 8px;
}

.mode-option,
.mode-card,
.settings-tab-item,
.settings-tab-btn,
.study-sub-btn,
.sms-option {
    border: 1px solid transparent;
}

.mode-option:hover,
.mode-card:hover,
.settings-tab-item:hover,
.settings-tab-btn:hover,
.study-sub-btn:hover,
.sms-option:hover {
    background: rgba(255, 255, 255, 0.06);
}

.welcome-message,
.chat-container,
.library-content,
.mindmap-container,
.side-chat-panel,
.settings-panel,
.profile-content,
.modal-content {
    color: var(--codex-text);
}

.brand-title,
.library-header h1,
.settings-view-header h1,
.mindmap-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.brand-quote {
    font-family: var(--codex-font-sans);
    font-size: 22px;
    line-height: 1.42;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.welcome-message,
.library-header,
.mindmap-header,
.modal-header,
.settings-view-header {
    border-radius: var(--codex-radius-xl);
}

.welcome-message {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.mode-card {
    border-radius: 20px;
    padding: 16px;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.mode-card:hover {
    background: rgba(255, 255, 255, 0.07);
}

.mode-card .mode-icon,
.mode-option-icon {
    filter: grayscale(1) brightness(1.15);
    opacity: 0.95;
}

.chat-messages {
    padding-top: 16px;
}

.message-wrapper {
    padding-inline: 6px;
}

.message-content {
    border-radius: 22px;
    border: none;
    background: transparent;
    box-shadow: none;
}

.message-wrapper.user .message-content {
    background: linear-gradient(180deg, rgba(216, 224, 235, 0.18), rgba(216, 224, 235, 0.09));
    color: var(--codex-text);
    border-color: rgba(216, 224, 235, 0.16);
}

.message-wrapper.bot .message-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.chat-input-area,
.side-chat-input-area {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02)),
        var(--codex-surface);
    border: 1px solid var(--codex-border);
    border-radius: 28px;
}

.chat-input-area textarea,
.side-chat-input-area textarea,
.chat-input,
.side-chat-input-area #sideChatInput,
#chatInput {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    resize: none;
}

.attach-btn,
.send-btn,
.side-send-btn {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--codex-border);
    border-radius: 999px;
}

.attach-btn:hover,
.send-btn:hover,
.side-send-btn:hover {
    background: rgba(255, 255, 255, 0.085);
}

.disclaimer {
    color: var(--codex-text-soft);
    border-radius: 999px;
    padding: 8px 14px;
}

.library-header,
.mindmap-header,
.settings-view-header {
    margin: 16px 16px 0;
}

.library-content,
.mindmap-container,
.settings-main,
.profile-content,
.modal-content,
.side-chat-messages {
    background: transparent;
}

.document-card {
    border-radius: 20px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
        var(--codex-surface);
}

#projectsView .projects-header,
#libraryView .library-header,
#chatsListView .library-header {
    margin: 0 !important;
    padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 28px) clamp(10px, 1.4vw, 14px) !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

#projectsView .projects-list,
#libraryView .library-content {
    margin: 0 16px 16px !important;
    padding: clamp(14px, 1.8vw, 22px) !important;
}

#projectsView .projects-list {
    min-height: calc(100vh - 210px) !important;
}

#libraryView .documents-grid {
    padding: 0 !important;
    gap: clamp(12px, 1.5vw, 18px) !important;
}

#projectsView .project-chat-card,
#libraryView .document-card {
    border-radius: 20px !important;
    min-height: 132px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
        var(--codex-surface) !important;
}

#chatsListGrid .project-chat-card {
    border-radius: 20px !important;
    min-height: 60px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
        var(--codex-surface) !important;
}

#projectsView .project-chat-card {
    padding: 14px 16px !important;
}

#chatsListGrid .project-chat-card {
    padding: 10px 16px !important;
}

#libraryView .document-card {
    padding: 12px !important;
}

#projectsView .projects-empty-state,
#libraryView .empty-state-library {
    border-radius: 24px !important;
    min-height: 380px;
}

.document-thumbnail {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.file-type-badge {
    border-radius: 999px;
    padding-inline: 10px;
    color: var(--codex-text-muted);
}

.modal-overlay {
    background: rgba(5, 7, 10, 0.58);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.modal,
.modal-settings,
.settings-window,
.ai-voice-modal-card,
.notification-sound-menu {
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
        var(--codex-surface-strong);
}

.modal-title,
.settings-section-title,
.settings-card-title,
.settings-card-subtitle,
.settings-subtitle,
.tagline,
.brand-subtitle,
.brand-quote,
.library-subtitle,
.projects-subtitle,
.mode-option-desc,
.history-preview,
.preferred-name-help,
.disclaimer,
.empty-state,
.empty-state-library,
.error-message {
    color: var(--codex-text-muted);
}

.error-message {
    background: rgba(255, 120, 120, 0.10);
    border: 1px solid rgba(255, 120, 120, 0.16);
}

#signupPassword::placeholder,
#confirmPassword::placeholder {
    font-family: var(--codex-font-sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    opacity: 0.46;
}

.submit-btn,
.btn-primary,
.generate-mindmap-btn {
    background: linear-gradient(180deg, rgba(232, 238, 246, 0.96), rgba(202, 210, 221, 0.90));
    color: var(--codex-accent-text);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18);
}

.submit-btn:hover,
.btn-primary:hover,
.generate-mindmap-btn:hover {
    background: linear-gradient(180deg, rgba(246, 249, 252, 0.98), rgba(220, 228, 237, 0.95));
}

.btn-secondary,
.logout-btn,
.change-avatar-btn,
.upload-first-btn {
    background: rgba(255, 255, 255, 0.035);
}

.theme-toggle-track {
    background: rgba(255, 255, 255, 0.07);
}

.theme-toggle-knob {
    background: linear-gradient(180deg, #fdfefe, #dfe5ec);
}

.settings-tabs-bar {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid var(--codex-border) !important;
    box-shadow: var(--codex-shadow-sm) !important;
}

.settings-tab-pill {
    background: rgba(216, 224, 235, 0.14) !important;
}

.settings-tab-item {
    color: var(--codex-text-muted) !important;
}

.settings-tab-item:hover,
.settings-tab-item.active {
    color: var(--codex-text) !important;
}

.settings-main,
.settings-card,
.settings-card-header,
.settings-section-title,
.settings-subtitle,
.settings-card-title,
.settings-card-subtitle,
.theme-previews-container,
.theme-preview-wrapper,
.theme-preview,
.theme-preview.dark,
.theme-preview.light {
    color: var(--codex-text) !important;
}

.theme-preview.dark {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), #161a20 !important;
}

.theme-preview.dark .preview-header {
    background-color: #252b35 !important;
}

.theme-preview.dark .preview-sidebar {
    background-color: #10141a !important;
}

.theme-preview.dark .preview-main {
    background-color: #181d24 !important;
}

.theme-preview.dark .preview-line {
    background-color: #2f3742 !important;
}

.theme-preview.light {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(235, 239, 244, 0.92)), #eef1f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
}

.theme-preview.light .preview-header {
    background-color: #dde3ea !important;
}

.theme-preview.light .preview-sidebar {
    background-color: #d0d7e0 !important;
}

.theme-preview.light .preview-main {
    background-color: #eef1f5 !important;
}

.theme-preview.light .preview-line {
    background-color: #c7d0db !important;
}

.theme-preview-wrapper.active .theme-preview {
    border-color: var(--codex-border-strong) !important;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.03), 0 18px 38px rgba(0, 0, 0, 0.18) !important;
}

.accent-option {
    border: 1px solid var(--codex-border) !important;
    background: #9097a1 !important;
}

.accent-option:hover {
    background: #a3aab4 !important;
}

.accent-option[data-color="default"] { background: #9ca3ad !important; }
.accent-option[data-color="purple"] { background: #7f8792 !important; }
.accent-option[data-color="green"] { background: #8a918f !important; }
.accent-option[data-color="blue"] { background: #818995 !important; }
.accent-option[data-color="yellow"] { background: #a29d90 !important; }
.accent-option[data-color="red"] { background: #96898a !important; }

body.light-mode .settings-tabs-bar {
    background: rgba(8, 12, 18, 0.04) !important;
}

body.light-mode .settings-tab-pill {
    background: rgba(18, 24, 32, 0.12) !important;
}

body.light-mode .accent-option[data-color="default"] { background: #7f8792 !important; }
body.light-mode .accent-option[data-color="purple"] { background: #6d7580 !important; }
body.light-mode .accent-option[data-color="green"] { background: #75807a !important; }
body.light-mode .accent-option[data-color="blue"] { background: #6e7886 !important; }
body.light-mode .accent-option[data-color="yellow"] { background: #8d8574 !important; }
body.light-mode .accent-option[data-color="red"] { background: #897374 !important; }

body.sidebar-collapsed .sidebar {
    width: 72px !important;
    min-width: 72px !important;
    transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease !important;
    overflow: hidden;
}

body.sidebar-collapsed .sidebar-header,
body.sidebar-collapsed .sidebar-footer {
    transition: padding 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease !important;
}

body.sidebar-collapsed .tools-section {
    transition: padding 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.sidebar-collapsed .sidebar-footer .footer-actions {
    display: none !important;
}

body.sidebar-collapsed .sidebar-footer .profile-btn {
    flex: 0 0 auto;
    width: 44px;
    justify-content: center;
    padding: 0;
}

body.sidebar-collapsed #profileButtonText {
    display: none !important;
}

body.light-mode {
    --bg-dark: #f0f0f0;
    --bg-sidebar: rgba(255, 255, 255, 0.72);
    --bg-hover: rgba(0, 0, 0, 0.06);
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --border-color: rgba(0, 0, 0, 0.08);
    --input-bg: rgba(0, 0, 0, 0.035);
    --accent-color: #1a1a1a;
    --accent-text: #ffffff;
    --modal-bg: rgba(255, 255, 255, 0.90);
    --code-bg: rgba(240, 240, 240, 0.96);
    --code-header-bg: rgba(0, 0, 0, 0.04);
    --code-text: #1a1a1a;
    --code-header-text: #666666;
    --mode-slider-bg: #1a1a1a;
    --mode-slider-text: #ffffff;
    --codex-bg: #f0f0f0;
    --codex-bg-deep: #f7f7f7;
    --codex-surface: rgba(255, 255, 255, 0.72);
    --codex-surface-strong: rgba(255, 255, 255, 0.90);
    --codex-surface-soft: rgba(0, 0, 0, 0.035);
    --codex-border: rgba(0, 0, 0, 0.08);
    --codex-border-strong: rgba(0, 0, 0, 0.14);
    --codex-border-soft: rgba(0, 0, 0, 0.05);
    --codex-text: #1a1a1a;
    --codex-text-muted: #666666;
    --codex-text-soft: #888888;
    --codex-accent: #1a1a1a;
    --codex-accent-strong: #0a0a0a;
    --codex-accent-text: #ffffff;
    --codex-glow: rgba(120, 120, 120, 0.12);
    background:
        radial-gradient(circle at 12% 18%, rgba(120, 120, 120, 0.08), transparent 28%),
        radial-gradient(circle at 82% 8%, rgba(255, 255, 255, 0.70), transparent 26%),
        linear-gradient(180deg, var(--codex-bg-deep), var(--codex-bg));
}

body.light-mode::before {
    background:
        radial-gradient(circle at 20% 18%, rgba(120, 120, 120, 0.08), transparent 32%),
        radial-gradient(circle at 78% 14%, rgba(255, 255, 255, 0.65), transparent 30%),
        radial-gradient(circle at 82% 82%, rgba(120, 120, 120, 0.05), transparent 26%);
}

body.light-mode::after {
    opacity: 0.20;
}

body.light-mode .sidebar,
body.light-mode .helper-sidebar,
body.light-mode .login-card,
body.light-mode .brand-panel,
body.light-mode .auth-panel,
body.light-mode .chat-header,
body.light-mode .library-header,
body.light-mode .document-card,
body.light-mode .modal,
body.light-mode .modal-settings,
body.light-mode .settings-window,
body.light-mode .side-chat-panel,
body.light-mode .mode-dropdown-menu,
body.light-mode .chat-menu-dropdown,
body.light-mode .theme-card,
body.light-mode .settings-card,
body.light-mode .settings-tab-item,
body.light-mode .settings-tab-btn,
body.light-mode .study-sub-btn,
body.light-mode .sms-option,
body.light-mode .empty-state-library,
body.light-mode .mindmap-canvas,
body.light-mode .mindmap-input-section,
body.light-mode .mindmap-controls,
body.light-mode .upload-progress-container,
body.light-mode .file-list-section,
body.light-mode .ai-settings-panel,
body.light-mode .ai-voice-modal-card,
body.light-mode .notification-sound-menu {
    box-shadow: 0 18px 52px rgba(14, 20, 30, 0.09);
}

body.light-mode .tool-btn,
body.light-mode .sidebar-toggle-btn,
body.light-mode .sidebar-btn,
body.light-mode .icon-btn,
body.light-mode .google-btn,
body.light-mode .current-mode-btn,
body.light-mode .back-to-project-btn,
body.light-mode .menu-btn,
body.light-mode .close-modal,
body.light-mode .close-side-chat,
body.light-mode .popup-ai-btn,
body.light-mode .change-avatar-btn,
body.light-mode .logout-btn,
body.light-mode .upload-first-btn,
body.light-mode .generate-mindmap-btn,
body.light-mode .btn-primary,
body.light-mode .btn-secondary,
body.light-mode .submit-btn {
    background: rgba(8, 12, 18, 0.035);
    border-color: rgba(6, 12, 20, 0.08);
    color: var(--codex-text);
}

body.light-mode .tool-btn:hover,
body.light-mode .sidebar-toggle-btn:hover,
body.light-mode .sidebar-btn:hover,
body.light-mode .icon-btn:hover,
body.light-mode .google-btn:hover,
body.light-mode .current-mode-btn:hover,
body.light-mode .back-to-project-btn:hover,
body.light-mode .menu-btn:hover,
body.light-mode .close-modal:hover,
body.light-mode .close-side-chat:hover,
body.light-mode .popup-ai-btn:hover,
body.light-mode .change-avatar-btn:hover,
body.light-mode .logout-btn:hover,
body.light-mode .upload-first-btn:hover,
body.light-mode .generate-mindmap-btn:hover,
body.light-mode .btn-primary:hover,
body.light-mode .btn-secondary:hover,
body.light-mode .submit-btn:hover {
    background: rgba(8, 12, 18, 0.055);
    border-color: rgba(6, 12, 20, 0.14);
}

body.light-mode .message-wrapper.user .message-content {
    background: linear-gradient(180deg, rgba(18, 24, 32, 0.92), rgba(18, 24, 32, 0.84));
    color: var(--codex-text);
}

body.light-mode .chat-input-area,
body.light-mode .side-chat-input-area,
body.light-mode .input-container,
body.light-mode .search-input,
body.light-mode .header-search-input,
body.light-mode .library-search-bar input,
body.light-mode .form-group input[type="email"],
body.light-mode .form-group input[type="password"],
body.light-mode .form-group input[type="text"],
body.light-mode .preferred-name-input,
body.light-mode .mindmap-input-section textarea,
body.light-mode .mindmap-input-section input,
body.light-mode .settings-form input,
body.light-mode .settings-form textarea,
body.light-mode .settings-form select,
body.light-mode .chat-input,
body.light-mode .login-card input[type="email"],
body.light-mode .login-card input[type="password"],
body.light-mode .login-card input[type="text"] {
    background: rgba(8, 12, 18, 0.035);
    color: var(--codex-text);
}

body.light-mode .disclaimer,
body.light-mode .tagline,
body.light-mode .brand-subtitle,
body.light-mode .brand-quote,
body.light-mode .library-subtitle,
body.light-mode .projects-subtitle,
body.light-mode .mode-option-desc,
body.light-mode .history-preview,
body.light-mode .preferred-name-help,
body.light-mode .settings-subtitle,
body.light-mode .settings-card-subtitle,
body.light-mode .empty-state,
body.light-mode .empty-state-library,
body.light-mode .error-message {
    color: var(--codex-text-muted);
}

body.light-mode .sidebar-footer {
    background: rgba(8, 12, 18, 0.025);
}

body.light-mode .theme-toggle-track {
    background: rgba(8, 12, 18, 0.10);
}

body.light-mode .theme-toggle-knob {
    background: linear-gradient(180deg, #202833, #11161d);
}

body.light-mode .mode-card,
body.light-mode .mode-option {
    background: rgba(8, 12, 18, 0.03);
}

body.light-mode .mode-card.selected,
body.light-mode .mode-option.selected {
    background: rgba(18, 24, 32, 0.09);
}

body.light-mode .modal-overlay {
    background: rgba(244, 247, 251, 0.60);
}

body.light-mode .chat-header,
body.light-mode .library-header,
body.light-mode .mindmap-header,
body.light-mode .settings-view-header,
body.light-mode .modal-header,
body.light-mode .side-chat-header {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.60)),
        var(--codex-surface);
}

body.light-mode .message-content,
body.light-mode .document-card,
body.light-mode .history-item,
body.light-mode .tool-btn,
body.light-mode .sidebar-btn,
body.light-mode .icon-btn,
body.light-mode .google-btn,
body.light-mode .current-mode-btn,
body.light-mode .chat-menu-dropdown,
body.light-mode .mode-dropdown-menu,
body.light-mode .theme-card,
body.light-mode .settings-card,
body.light-mode .settings-tab-item,
body.light-mode .settings-tab-btn {
    box-shadow: 0 10px 22px rgba(14, 20, 30, 0.06);
}

body.light-mode .logo-text,
body.light-mode .brand-title,
body.light-mode .logo-section h1,
body.light-mode .library-header h1,
body.light-mode .settings-view-header h1,
body.light-mode .modal-title,
body.light-mode .mindmap-title,
body.light-mode .welcome-message h1 {
    color: var(--codex-text);
}

@keyframes codex-ambient {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
        opacity: 0.75;
    }

    100% {
        transform: scale(1.04) translate3d(0, -8px, 0);
        opacity: 1;
    }
}

@keyframes codex-enter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-card,
.welcome-message,
.library-header,
.mindmap-header,
.modal,
.modal-settings,
.settings-window,
.side-chat-panel,
.document-card,
.history-item,
.mode-card,
.mode-option {
    animation: codex-enter 280ms ease both;
}

.login-card {
    animation-delay: 40ms;
}

.document-card:nth-child(2n),
.history-item:nth-child(2n),
.mode-card:nth-child(2n) {
    animation-delay: 50ms;
}

@media (max-width: 1100px) {
    .brand-panel {
        display: none;
    }

    .login-card {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: 240px;
    }

    .chat-header,
    .library-header,
    .mindmap-header,
    .settings-view-header {
        margin: 12px 12px 0;
    }

    .welcome-message {
        padding: 22px;
    }

    .login-card {
        border-radius: 22px;
    }

    #projectsView .projects-header,
    #libraryView .library-header {
        margin: 12px 12px 0 !important;
        padding: 18px 18px 12px !important;
    }

    #projectsView .projects-list,
    #libraryView .library-content {
        margin: 0 12px 12px !important;
        padding: 14px !important;
    }

    #projectsView .projects-list {
        min-height: calc(100vh - 196px) !important;
    }

    #projectsView .project-chat-card,
    #chatsListGrid .project-chat-card,
    #libraryView .document-card {
        min-height: 120px;
    }
}

@media (max-width: 480px) {
    .sidebar {
        width: 100%;
    }

    .login-card,
    .modal,
    .settings-window,
    .side-chat-panel {
        border-radius: 20px;
    }

    .chat-header {
        padding: 12px 14px;
    }

    #projectsView .projects-header,
    #libraryView .library-header {
        margin: 10px 10px 0 !important;
        padding: 16px 16px 10px !important;
    }

    #projectsView .projects-list,
    #libraryView .library-content {
        margin: 0 10px 10px !important;
        padding: 12px !important;
    }

    #projectsView .project-chat-card,
    #chatsListGrid .project-chat-card,
    #libraryView .document-card {
        min-height: 112px;
        border-radius: 18px !important;
    }
}

/* --- Premium Refined Welcome Screen --- */
.welcome-message {
    background: transparent !important;
    padding: 40px 20px !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 900px !important;
    margin-top: clamp(24px, 8vh, 80px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

body.light-mode .welcome-message {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.welcome-message h1 {
    font-size: 21px !important; /* Smaller and cleaner as requested */
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    color: var(--codex-text) !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
    font-family: var(--codex-font-sans) !important;
}

.welcome-subtitle {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 24px !important;
    opacity: 0.85;
}

.welcome-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}

.welcome-tool-btn {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--codex-text) !important;
    border-radius: 24px !important;
    padding: 8px 18px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: center !important;
    cursor: pointer !important;
}

body.light-mode .welcome-tool-btn {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

.welcome-tool-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--accent-color, #7c6ef5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 255, 255, 0.05) !important;
}

body.light-mode .welcome-tool-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--accent-color, #7c6ef5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

.tool-pill-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--accent-color, #7c6ef5) !important;
    transition: transform 0.2s ease !important;
}

.welcome-tool-btn:hover .tool-pill-icon {
    transform: scale(1.1) !important;
    color: var(--accent-color, #7c6ef5) !important;
    background: transparent !important;
}

/* ─── UNIQUE PREMIUM SIDEBAR OVERHAUL ─── */
.sidebar {
    width: 260px !important;
    background: linear-gradient(180deg, rgba(8, 11, 18, 0.94) 0%, rgba(4, 5, 8, 0.97) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(30px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(140%) !important;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

body.light-mode .sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 249, 252, 0.97) 100%) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.03) !important;
}

.sidebar-header {
    padding: 24px 20px 18px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

body.light-mode .sidebar-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.logo-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(135deg, #ffffff 30%, rgba(255, 255, 255, 0.6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-mode .logo-text {
    background: linear-gradient(135deg, #0f172a 30%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Sidebar Toggle button */
.sidebar-toggle-btn {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 10px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Tool Buttons Layout */
.tools-section {
    padding: 16px 12px !important;
    gap: 6px !important;
}

.tool-btn {
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tool-btn:hover {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    transform: none !important;
}

body.light-mode .tool-btn:hover {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
}

.tool-btn .tool-icon {
    width: 18px !important;
    height: 18px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    transition: all 0.2s ease !important;
}

body.light-mode .tool-btn .tool-icon {
    color: rgba(15, 23, 42, 0.5) !important;
}

.tool-btn .tool-title {
    font-size: 13.5px !important;
    font-weight: 550 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.2s ease !important;
}

body.light-mode .tool-btn .tool-title {
    color: #334155 !important;
}

.tool-btn .tool-subtitle {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 400 !important;
}

body.light-mode .tool-btn .tool-subtitle {
    color: #64748b !important;
}

/* Active State */
.tool-btn.active {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-left: 3px solid #ffffff !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15) !important;
    transform: none !important;
}

body.light-mode .tool-btn.active {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.01) 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-left: 3px solid #0f172a !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

.tool-btn.active .tool-icon {
    color: #ffffff !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)) !important;
}

body.light-mode .tool-btn.active .tool-icon {
    color: #0f172a !important;
    filter: none !important;
}

.tool-btn.active .tool-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

body.light-mode .tool-btn.active .tool-title {
    color: #0f172a !important;
}

/* History/Conversations list */
.chat-history-section {
    padding: 8px 12px !important;
}

.chat-history-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: rgba(255, 255, 255, 0.3) !important;
    padding-left: 8px !important;
    margin-bottom: 12px !important;
}

body.light-mode .chat-history-label {
    color: #94a3b8 !important;
}

.history-item {
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    margin-bottom: 3px !important;
    transition: all 0.18s ease !important;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

body.light-mode .history-item:hover {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.03) !important;
}

.history-item.active {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

body.light-mode .history-item.active {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

/* Footer & Profile */
.sidebar-footer {
    padding: 16px 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    background: transparent !important;
}

body.light-mode .sidebar-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.profile-btn {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.2s ease !important;
}

.profile-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1px) !important;
}

body.light-mode .profile-btn {
    background: rgba(0, 0, 0, 0.01) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .profile-btn:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

.profile-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-mode .profile-avatar {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

#profileButtonText {
    font-size: 13px !important;
    font-weight: 550 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

body.light-mode #profileButtonText {
    color: #334155 !important;
}

/* Hide settings gear in profile button */
.profile-btn svg[stroke="currentColor"] {
    display: none !important;
}

/* ─── Ultra Clean Sidebar Collapse/Expand Animation ─── */
.sidebar {
    transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 280ms ease !important;
}

/* Text and inner element animations */
.sidebar .logo-text,
.sidebar .tool-text,
.sidebar #profileButtonText,
.sidebar .chat-history-section,
.sidebar .sidebar-footer .footer-actions,
.sidebar .search-container,
.sidebar .chat-history-label,
.sidebar .chat-history-list {
    transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 120ms !important;
}

/* Hiding state (Transitioning to collapsed) */
body.sidebar-hiding .sidebar .logo-text,
body.sidebar-hiding .sidebar .tool-text,
body.sidebar-hiding .sidebar #profileButtonText,
body.sidebar-hiding .sidebar .chat-history-section,
body.sidebar-hiding .sidebar .sidebar-footer .footer-actions,
body.sidebar-hiding .sidebar .search-container,
body.sidebar-hiding .sidebar .chat-history-label,
body.sidebar-hiding .sidebar .chat-history-list {
    opacity: 0 !important;
    transform: translateX(-12px) !important;
}

/* Revealing state (Transitioning to expanded) */
body.sidebar-revealing .sidebar .logo-text,
body.sidebar-revealing .sidebar .tool-text,
body.sidebar-revealing .sidebar #profileButtonText,
body.sidebar-revealing .sidebar .chat-history-section,
body.sidebar-revealing .sidebar .sidebar-footer .footer-actions,
body.sidebar-revealing .sidebar .search-container,
body.sidebar-revealing .sidebar .chat-history-label,
body.sidebar-revealing .sidebar .chat-history-list {
    opacity: 0 !important;
    transform: translateX(-8px) !important;
}

/* Default state when fully visible */
.sidebar:not(.sidebar-collapsed) .logo-text,
.sidebar:not(.sidebar-collapsed) .tool-text,
.sidebar:not(.sidebar-collapsed) .profile-btn span,
.sidebar:not(.sidebar-collapsed) .chat-history-section,
.sidebar:not(.sidebar-collapsed) .sidebar-footer .footer-actions,
.sidebar:not(.sidebar-collapsed) .search-container,
.sidebar:not(.sidebar-collapsed) .chat-history-label,
.sidebar:not(.sidebar-collapsed) .chat-history-list {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 200ms ease-in 40ms, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1) 40ms !important;
}

/* Remove border/frame from disclaimer */
.disclaimer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
}