:root {
    --bg-dark: #212121;
    --bg-sidebar: #171717;
    --bg-hover: #2f2f2f;
    --text-primary: #ececec;
    --text-secondary: #b4b4b4;
    --border-color: #424242;
    --input-bg: #2f2f2f;
    --accent: #6b6b6b;
    --modal-bg: #2d2d2d;

    /* Default Accent (Dark Gray) */
    --accent-color: #4a4a4a;
    --accent-text: #ffffff;
    /* Text color on accent background */
    --sidebar-width: 260px;

    /* Code Block Colors (Dark Mode Default) */
    --code-bg: #0d1117;
    --code-header-bg: #21262d;
    --code-text: #c9d1d9;
    --code-header-text: #8b949e;

    /* Mode Selector Defaults (Dark) */
    --mode-slider-bg: #4a4a4a;
    --mode-slider-text: #f5f5f0;
    --app-height: 100vh;
}

/* Accent Color Classes - ULTRA MUTED for White Text Support */
.accent-purple {
    --accent-color: #5e546b;
    --accent-text: #ffffff;
}

.accent-green {
    --accent-color: #546b5d;
    --accent-text: #ffffff;
}

.accent-blue {
    --accent-color: #54637a;
    --accent-text: #ffffff;
}

.accent-yellow {
    --accent-color: #8f7d4e;
    --accent-text: #ffffff;
}

.accent-red {
    --accent-color: #8f5e5e;
    --accent-text: #ffffff;
}

.accent-gray {
    --accent-color: #6b7280;
    --accent-text: #ffffff;
}

/* Ensure message backgrounds use the variable */
.message-wrapper.user .message-content {
    background-color: var(--accent-color) !important;
}

/* Light mode variables — canonical block is at the bottom of this file */

/* Override Accents in Light Mode to keep same pastel tone but maybe adjust text contrast if needed */
body.light-mode.accent-purple {
    --accent-color: #c084fc;
    --accent-text: #f5f5f0;
}

body.light-mode.accent-green {
    --accent-color: #4ade80;
    --accent-text: #f5f5f0;
}

body.light-mode.accent-blue {
    --accent-color: #60a5fa;
    --accent-text: #f5f5f0;
}

body.light-mode.accent-yellow {
    --accent-color: #eab308;
    --accent-text: #f5f5f0;
}

body.light-mode.accent-red {
    --accent-color: #f87171;
    --accent-text: #f5f5f0;
}

body.light-mode.accent-gray {
    --accent-color: #6b7280;
    --accent-text: #f5f5f0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    height: var(--app-height, 100vh);
    width: 100%;
    display: flex;
    overflow: hidden;
}

.sidebar {
    width: 260px;
    background-color: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-shrink: 0;
    z-index: 200;
    transition: width 0.3s ease;
    /* Ensure sidebar is above input container */
}

/* ── Helper Sub-Sidebar ─────────────────────────────────────────────── */
/* Hidden by default — display:none ensures it is completely invisible  */
/* and takes no space until opened. Opened via .open class toggle.      */
.helper-sidebar {
    position: fixed;
    top: 0;
    left: 260px;           /* Right next to the main sidebar */
    width: 260px;          /* Same width as main sidebar     */
    height: 100%;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: none;         /* Hidden until .open is added     */
    flex-direction: column;
    z-index: 190;
}

.helper-sidebar.open {
    display: flex;
    animation: helperSlideIn 0.18s ease;
}

@keyframes helperSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Backdrop: transparent click-away layer */
.helper-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 185;
    background: transparent;
}

.helper-sidebar-backdrop.open {
    display: block;
}

/* Collapsed main sidebar → helper shifts left */
body.sidebar-collapsed .helper-sidebar {
    left: 68px;
}

/* When helper sidebar is open, push main content right */
body.helper-open .main-content {
    margin-left: 260px;
    transition: margin-left 0.18s ease;
}
body.sidebar-collapsed.helper-open .main-content {
    margin-left: 260px;
}

.sidebar-header {
    padding: 18px 10px 12px 12px;
    /* Reduced side padding (was 20px) */
    border-bottom: none;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.logo-icon {
    font-size: 24px;
}

.logo-icon-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    --logo-filter-base: none;
    filter: var(--logo-filter-base);
}

.logo-icon-img.logo-pulse,
.toggle-logo-icon.logo-pulse {
    animation: logicumLogoPulse 2000ms cubic-bezier(0.2, 0.75, 0.2, 1);
    will-change: transform, filter;
}

@keyframes logicumLogoPulse {
    0% {
        transform: scale(1);
        filter: var(--logo-filter-base) drop-shadow(0 0 0 transparent);
    }

    10% {
        transform: translateY(-0.5px) scale(1.03) rotate(-0.9deg);
        filter: var(--logo-filter-base) drop-shadow(0 0 6px var(--logo-flame-color, var(--accent-color)));
    }

    18% {
        transform: translateY(-1px) scale(1.06) rotate(1.1deg);
        filter: var(--logo-filter-base) drop-shadow(0 0 11px var(--logo-flame-color, var(--accent-color)));
    }

    28% {
        transform: translateY(-0.4px) scale(1.04) rotate(-0.6deg);
        filter: var(--logo-filter-base) drop-shadow(0 0 8px var(--logo-flame-color, var(--accent-color)));
    }

    40% {
        transform: translateY(-1.2px) scale(1.08) rotate(0.9deg);
        filter: var(--logo-filter-base) drop-shadow(0 0 13px var(--logo-flame-color, var(--accent-color)));
    }

    54% {
        transform: translateY(-0.6px) scale(1.05) rotate(-0.5deg);
        filter: var(--logo-filter-base) drop-shadow(0 0 9px var(--logo-flame-color, var(--accent-color)));
    }

    68% {
        transform: translateY(-0.2px) scale(1.03) rotate(0.4deg);
        filter: var(--logo-filter-base) drop-shadow(0 0 7px var(--logo-flame-color, var(--accent-color)));
    }

    82% {
        transform: scale(1.015) rotate(-0.2deg);
        filter: var(--logo-filter-base) drop-shadow(0 0 4px var(--logo-flame-color, var(--accent-color)));
    }

    100% {
        transform: scale(1);
        filter: var(--logo-filter-base) drop-shadow(0 0 0 transparent);
    }
}

/* Logo unchanged in light mode — no filter applied */

.logo-text {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-chat-btn {
    width: calc(100% - 16px);
    /* Adjusted width */
    padding: 8px 12px;
    background-color: var(--accent-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 10px 8px;
    /* Reduced margin (was 10px 10px) */
    position: relative;
    z-index: 9999;
    pointer-events: auto !important;
}

.new-chat-btn:hover {
    background-color: var(--bg-hover);
    transform: translateY(-1px);
    border-color: var(--text-secondary);
}

.app-branding h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-dark);
    overflow: hidden;
    /* Prevent main-content from scrolling, let children scroll */
    position: relative;
    /* Create positioning context for absolute children */
    height: 100vh;
}

/* Minimal Active State - No Border */
.tool-btn.active,
.sidebar-btn.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.tool-btn.active .icon,
.sidebar-btn.active .icon {
    color: var(--text-primary);
}



.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
    /* Reduced padding (was 0 10px) */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-container {
    margin-top: 20px;
    margin-bottom: 4px;
}

.search-input {
    width: 100%;
    background-color: var(--bg-hover);
    border: 1px solid transparent;
    border-radius: 20px;
    /* Match chat input rounded style */
    padding: 8px 12px;
    /* Adjust padding for rounded look */
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

.search-input:focus {
    border-color: var(--border-color);
}

.chat-history-label {
    display: none;
}

.chat-history-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
    flex: 1;
    min-height: 0;
}


.history-item {
    padding: 11px 42px 11px 10px;
    /* Add right padding for menu button */
    border-radius: 18px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

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

.history-item.active {
    background-color: rgba(255, 255, 255, 0.12);
}

.history-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.15;
}

.history-preview {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.history-main {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.history-meta {
    min-width: 0;
    flex: 1;
}

.history-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.history-item-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Chat Menu Button (...) - v2.3: No border-radius, hover only shows on parent hover */
.chat-menu-btn {
    position: absolute;
    right: 4px;
    /* Moved closer to edge */
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    opacity: 0;
    /* Hidden by default */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    height: 32px;
    width: 32px;
    z-index: 10;
}

.history-item:hover .chat-menu-btn {
    opacity: 1;
    /* Show only on hover */
}

.chat-menu-btn.active {
    opacity: 1;
    /* Keep visible when menu is open */
}

.chat-menu-btn:hover {
    color: var(--text-primary);
    /* Only change color, no background or border */
}

/* Chat Menu Dropdown */
.chat-menu-dropdown {
    position: absolute;
    right: 10px;
    top: 35px;
    /* Below the item */
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: none;
    flex-direction: column;
    min-width: 158px;
    padding: 4px;
}

.chat-menu-dropdown.show {
    display: flex;
}

.chat-menu-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
    text-align: left;
    background: transparent;
    border: none;
    width: 100%;
}

.chat-menu-item:hover {
    background-color: var(--bg-hover);
}

.chat-menu-item.delete {
    color: #ff6b6b;
}

.chat-menu-item.delete:hover {
    background-color: rgba(255, 107, 107, 0.1);
}

.chat-menu-icon {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}




/* Tools Section */
.tools-section {
    margin-bottom: 16px;
    padding: 10px 0;
    border-top: none;
    border-bottom: none;
}

.section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    /* text-transform: uppercase; Removed per user request */
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding: 0 4px;
}

.tool-btn {
    width: 100%;
    padding: 14px 14px;
    background-color: transparent;
    border: none;
    border-radius: 16px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-size: 15px;
    text-align: left;
    transition: all 0.2s ease;
}

.tool-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}

.tool-btn .icon {
    width: 22px;
    height: 22px;
}

.tool-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.tool-btn.active {
    background-color: rgba(255, 255, 255, 0.08);
}

.tool-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tool-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.tool-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}

.chat-history-section {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.sidebar-footer {
    margin-top: auto;
    padding: 10px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.sidebar-btn {
    width: 100%;
    padding: 9px 12px;
    background-color: rgba(255, 255, 255, 0.03);
    border: none;
    border-radius: 10px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    transition: all 0.2s ease;
}

.sidebar-btn:hover {
    background-color: var(--bg-hover);
}

.footer-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    position: relative;
}

.collapsed-footer-actions {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.profile-btn.wide {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
}

.profile-btn.collapsed-only {
    width: 44px !important;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 10px;
    justify-content: center;
    margin: 0 auto;
}

.account-menu {
    position: absolute;
    bottom: 58px;
    left: 0;
    width: 100%;
    background: var(--modal-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px;
    display: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    z-index: 20;
}

.account-menu.open {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-menu.collapsed {
    left: 52px;
    right: auto;
    width: 170px;
    bottom: 0;
}

.account-menu-item {
    background: transparent;
    border: none;
    color: var(--text-primary);
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
}

.account-menu-item:hover {
    background: var(--bg-hover);
}

.settings-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 40px 0 12px;
}

.settings-view-header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.settings-subtitle {
    margin: 8px 0 0 0;
    color: var(--text-secondary);
    font-size: 16px;
}

.settings-tabs {
    display: flex;
    padding: 10px 0 16px;
}

.settings-tabs-pills {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 100px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.settings-tab-btn {
    background: transparent;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-secondary);
    padding: 5px 14px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    user-select: none;
}

.settings-tab-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.settings-tab-btn:hover {
    color: var(--text-primary);
}

.settings-tab-btn.active {
    color: #ffffff;
    font-weight: 600;
}

.settings-tab-pill {
    position: absolute;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}


.settings-tab-content {
    display: none;
    padding: 12px 0 28px;
}

.settings-tab-content.active {
    display: block;
}

.settings-card {
    background: var(--modal-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 18px 20px;
    max-width: 900px;
    margin: 0;
}

#settings-tab-account .settings-card+.settings-card {
    margin-top: 14px;
}

#settings-tab-appearance.settings-tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.theme-card-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.theme-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-primary);
    cursor: pointer;
}

.theme-card.active {
    border-color: var(--accent-color);
    background: rgba(94, 84, 107, 0.25);
}

.theme-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-label {
    font-size: 16px;
    font-weight: 600;
}

.color-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.color-dot {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
}

.color-dot.active {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}

.color-dot.active::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.custom-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.custom-color-row input[type="color"] {
    width: 72px;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.custom-color-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.custom-color-row input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 999px;
}

.custom-color-row input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 999px;
}

.message-preview {
    margin-top: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 12px;
}

.message-preview-bubble {
    align-self: flex-end;
    background: var(--accent-color);
    color: var(--accent-text);
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 14px;
}

.settings-view-header,
.settings-tabs,
.settings-tab-content {
    max-width: 900px;
    margin: 0 auto;
}

.settings-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.settings-card-title {
    font-weight: 600;
    font-size: 33px;
    margin-bottom: 6px;
}

.settings-card-subtitle {
    color: var(--text-secondary);
    font-size: 14px;
}

.language-card-title {
    font-size: 19px;
    margin-bottom: 6px;
}

.language-switcher {
    margin-top: 10px;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 250px;
    padding: 0;
    background: var(--bg-hover);
    border-radius: 10px;
}

.language-current-btn {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.language-current-chevron {
    color: var(--text-secondary);
    transition: transform 0.18s ease;
}

.language-switcher.open .language-current-chevron {
    transform: rotate(180deg);
}

.language-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    z-index: 40;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 10px;
    background: var(--bg-hover);
}

.language-switcher.open .language-menu {
    display: flex;
}

.language-option-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.language-option-btn:hover {
    background: rgba(127, 131, 139, 0.18);
    color: var(--text-primary);
}

.language-option-btn.active {
    background: rgba(127, 131, 139, 0.28);
    color: var(--text-primary);
}

.settings-form label {
    display: block;
    margin: 14px 0 8px;
    color: var(--text-secondary);
    font-size: 15px;
}

.settings-form input {
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 15px;
}

.settings-form .btn-primary {
    margin-top: 14px;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 999px;
    width: auto;
    min-width: 88px;
}

.settings-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: 13px;
}

.account-logout-btn {
    margin-top: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 77, 77, 0.55);
    background: transparent;
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.account-logout-btn:hover {
    background: rgba(255, 77, 77, 0.12);
}

.settings-actions {
    max-width: 900px;
    margin: 6px auto 0;
    display: flex;
    justify-content: center;
}

.settings-save-btn {
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 22px;
}

#settingsView {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#settingsView[style*="display: flex"],
#settingsView[style*="display:flex"] {
    display: flex !important;
}

.settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: -1;
}

.settings-window {
    width: 100%;
    max-width: 900px;
    height: 90vh;
    max-height: 700px;
    min-height: 560px;
    background: #111318;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    padding: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.settings-view-header {
    padding: 30px 40px 10px 40px;
    flex-shrink: 0;
}

.settings-tabs {
    padding: 10px 40px 16px 40px;
    flex-shrink: 0;
}

.settings-panels {
    flex: 1;
    overflow-y: auto;
    padding: 20px 40px 40px 40px;
    /* Custom scrollbar track should start here */
}

/* Custom scrollbar for panels */
.settings-panels::-webkit-scrollbar {
    width: 8px;
}

.settings-panels::-webkit-scrollbar-track {
    background: transparent;
}

.settings-panels::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

.settings-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2010;
    transition: all 0.2s ease;
    padding: 0;
}

.settings-close-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.settings-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

body.settings-open {
    overflow: hidden;
}

.settings-view-header,
.settings-tabs,
.settings-tab-content {
    width: 100%;
}

.settings-save-overlay {
    position: sticky;
    bottom: 14px;
    display: flex;
    justify-content: center;
    z-index: 12;
    margin-top: 8px;
    pointer-events: none;
}

.settings-save-overlay .settings-save-btn {
    min-width: 220px;
    pointer-events: auto;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.subscription-usage {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: rgba(18, 21, 28, 0.92);
}

.subscription-usage-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.subscription-usage-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.subscription-usage-grid {
    margin-top: 14px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.subscription-usage-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.subscription-usage-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.subscription-usage-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.subscription-plans {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.plan-card {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 18px;
    background: #05070f;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: translateY(0) scale(1);
    transition: transform 180ms cubic-bezier(.22, .61, .36, 1), background-color 180ms ease, box-shadow 180ms ease;
}

.plan-popular {
    border-color: #6d5efc;
    box-shadow: 0 0 0 1px rgba(109, 94, 252, 0.3) inset;
}

.plan-current {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3) inset;
}

.plan-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #f8fafc;
    padding: 4px 10px;
    border-radius: 999px;
    background: #6d5efc;
}

.plan-badge-current {
    background: #22c55e;
}

.plan-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.plan-popular .plan-icon {
    background: rgba(109, 94, 252, 0.22);
}

.plan-current .plan-icon {
    background: rgba(34, 197, 94, 0.22);
}

.plan-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .plan-card:hover {
        transform: translateY(-3px) scale(1.018);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
    }
}

.plan-name {
    margin: 2px 0 0;
    font-size: 33px;
    line-height: 1;
}

.plan-tagline {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.plan-price {
    font-size: 33px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.plan-price span {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.plan-features {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #e2e8f0;
}

.plan-features li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
}

.plan-features li::before {
    content: "●";
    position: absolute;
    left: 0;
    top: 0;
    color: #86efac;
    font-size: 12px;
}

.plan-features li.muted {
    color: #8b93a9;
}

.plan-features li.muted::before {
    color: #64748b;
}

.plan-btn {
    margin-top: auto;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(93, 112, 255, 0.35);
    background: #031235;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.plan-btn-primary {
    border-color: transparent;
    background: #ef4444;
    color: #fff;
}

.plan-btn-current {
    border-color: transparent;
    background: #7f1d1d;
    color: #fde68a;
}

.subscription-footer {
    margin-top: 18px;
    text-align: center;
}

.subscription-footer h4 {
    margin: 0;
    font-size: 28px;
}

.subscription-footer p {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 16px;
}

.ai-settings-panel {
    margin-top: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(20, 22, 26, 0.92);
    padding: 14px 16px;
}

.ai-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

.ai-settings-row+.ai-settings-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-settings-row-left {
    min-width: 0;
}

.ai-settings-row-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.ai-settings-row-value {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.9;
}

.ai-settings-row-btn {
    height: 32px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.ai-settings-row-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

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

.ai-personality-option {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.01);
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 34px 1fr 24px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ai-personality-option:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.ai-persona-emoji {
    font-size: 24px;
    line-height: 1;
}

.ai-persona-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-persona-copy strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.ai-persona-copy span {
    font-size: 12px;
    color: #9ca3af;
}

.ai-persona-check {
    opacity: 0;
    color: #d1d5db;
    font-size: 14px;
    font-weight: 700;
    justify-self: end;
}

.ai-personality-option.active {
    border-color: rgba(229, 231, 235, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.ai-personality-option.active .ai-persona-check {
    opacity: 1;
}

.ai-personality-option.saved-selected:not(.active) {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
}

.ai-voice-settings {
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ai-voice-current-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.ai-voice-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1600;
}

.ai-voice-modal.open {
    display: flex;
}

.ai-voice-modal-card {
    width: min(360px, calc(100vw - 32px));
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: #181a1f;
    padding: 14px;
}

.ai-voice-modal-header {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.ai-voice-modal-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ai-voice-sphere {
    width: 104px;
    height: 104px;
    border-radius: 999px;
    box-shadow: none;
    animation: none;
    cursor: pointer;
    position: relative;
    transform: scale(var(--voice-sphere-scale, 1));
    transition: transform 85ms linear, filter 110ms linear;
    filter: saturate(calc(1 + var(--voice-sphere-energy, 0) * 0.55));
    overflow: visible;
    --voice-ring-a: #a855f7;
    --voice-ring-b: #ff5a2a;
    --voice-ring-c: #6d28d9;
    --voice-ring-size: calc(10px + var(--voice-sphere-energy, 0) * 7px);
    --voice-orbit-speed: calc(3.2s - var(--voice-sphere-energy, 0) * 1.8s);
    --voice-shimmer-speed: calc(2.6s - var(--voice-sphere-energy, 0) * 1.4s);
    background: radial-gradient(circle at center, rgba(8, 10, 18, 0.92) 0 58%, transparent 61%);
}

.ai-voice-sphere::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 999px;
    pointer-events: none;
    background:
        conic-gradient(from var(--voice-phase, 0deg),
            color-mix(in srgb, var(--voice-ring-b) 0%, transparent) 0deg,
            color-mix(in srgb, var(--voice-ring-b) 88%, white) 42deg,
            color-mix(in srgb, var(--voice-ring-a) 92%, white) 102deg,
            color-mix(in srgb, var(--voice-ring-c) 74%, black) 176deg,
            color-mix(in srgb, var(--voice-ring-b) 92%, white) 248deg,
            color-mix(in srgb, var(--voice-ring-a) 95%, white) 312deg,
            color-mix(in srgb, var(--voice-ring-b) 0%, transparent) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--voice-ring-size)), #000 calc(100% - var(--voice-ring-size) + 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--voice-ring-size)), #000 calc(100% - var(--voice-ring-size) + 2px));
    opacity: calc(0.72 + var(--voice-sphere-energy, 0) * 0.28);
    filter: blur(calc(0.6px + var(--voice-sphere-energy, 0) * 1.4px));
    animation: voicePlasmaOrbit var(--voice-orbit-speed) linear infinite;
}

.ai-voice-sphere::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,
            color-mix(in srgb, var(--voice-ring-b) 0%, transparent) 48%,
            color-mix(in srgb, var(--voice-ring-b) 42%, transparent) 58%,
            color-mix(in srgb, var(--voice-ring-a) 38%, transparent) 67%,
            color-mix(in srgb, var(--voice-ring-a) 0%, transparent) 75%);
    filter: blur(calc(5px + var(--voice-sphere-energy, 0) * 7px));
    opacity: calc(0.56 + var(--voice-sphere-energy, 0) * 0.32);
    animation: voicePlasmaShimmer var(--voice-shimmer-speed) ease-in-out infinite;
}

.ai-voice-sphere.male {
    --voice-ring-a: #6da7ff;
    --voice-ring-b: #4f8cff;
    --voice-ring-c: #2f5eff;
    background: radial-gradient(circle at center, rgba(8, 10, 18, 0.94) 0 58%, transparent 61%);
}

.ai-voice-sphere.female {
    --voice-ring-a: #d277ff;
    --voice-ring-b: #a855f7;
    --voice-ring-c: #ff5a2a;
    background: radial-gradient(circle at center, rgba(8, 10, 18, 0.94) 0 58%, transparent 61%);
}

.ai-voice-sphere[data-speaking="true"] {
    filter: saturate(calc(1.14 + var(--voice-sphere-energy, 0) * 0.8));
}

.ai-voice-next-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ai-voice-prev-btn {
    margin-right: 2px;
}

.ai-voice-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.ai-voice-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.ai-voice-dot.active {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.18);
}

.ai-voice-preview-label {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
}

.ai-voice-apply-btn {
    margin-top: 12px;
    width: 100%;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.ai-voice-apply-btn:disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

@keyframes voiceSpherePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes voiceSphereSparkle {

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

    50% {
        transform: rotate(8deg);
    }
}

@keyframes voicePlasmaOrbit {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(calc(1.01 + var(--voice-sphere-energy, 0) * 0.05));
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes voicePlasmaShimmer {

    0%,
    100% {
        transform: scale(1);
        opacity: calc(0.52 + var(--voice-sphere-energy, 0) * 0.26);
    }

    50% {
        transform: scale(calc(1.04 + var(--voice-sphere-energy, 0) * 0.18));
        opacity: calc(0.74 + var(--voice-sphere-energy, 0) * 0.24);
    }
}

@media (max-width: 1100px) {
    .subscription-usage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subscription-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    .subscription-usage-grid,
    .subscription-plans {
        grid-template-columns: 1fr;
    }

    .ai-personality-option {
        grid-template-columns: 30px 1fr 20px;
        padding: 11px 12px;
    }

    .ai-persona-copy strong {
        font-size: 16px;
    }

    .ai-persona-copy span {
        font-size: 13px;
    }
}

.profile-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px !important;
    font-size: 16px;
    font-weight: 600;
}

#profileButtonText {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.profile-avatar svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.icon-btn:hover {
    background-color: var(--bg-hover);
}

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

.icon {
    width: 18px;
    height: 18px;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-dark);
    overflow: hidden;
    transition: margin-left 0.3s ease, width 0.3s ease, margin-right 0.3s ease;
}

/* Removed duplicate chat-header definition */

.mode-selector {
    display: none;
}

.mode-btn {
    padding: 8px 16px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-btn:hover {
    background-color: var(--bg-hover);
}

.mode-btn.active {
    background-color: var(--text-primary);
    color: var(--bg-dark);
    border-color: var(--text-primary);
}

/* Light mode: use lighter background for active mode buttons */
body.light-mode .mode-btn.active {
    background-color: #d0d0d0;
    color: #4a4a4a;
    border-color: #d0d0d0;
}

.chat-menu {
    position: relative;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Force inner content to right */
    width: 100%;
    margin-right: -10px;
}

.menu-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.menu-btn:hover {
    background-color: var(--bg-hover);
}

.chat-header {
    display: flex;
    justify-content: space-between;
    position: relative;
    /* Anchor for absolute search bar */
    align-items: center;
    padding: 10px 20px;
    background-color: var(--bg-dark);
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 64px;
}

body:not(.light-mode) .chat-header {
    background-color: var(--bg-dark);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
    justify-self: start;
}


.sidebar-header {
    padding: 20px 15px;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.sidebar-toggle-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.toggle-icon {
    width: 20px;
    height: 20px;
}

.toggle-logo-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: none;
    --logo-filter-base: none;
    filter: var(--logo-filter-base);
}

/* toggle-logo-icon: logo unchanged in light mode */

/* Sidebar Collapsed State (Mini Sidebar) */
body.sidebar-collapsed .sidebar {
    width: 60px !important;
    min-width: 60px !important;
    transform: none !important;
}

body.sidebar-collapsed {
    --sidebar-width: 60px;
}

body.sidebar-collapsed .logo-text,
body.sidebar-collapsed .tool-btn span,
body.sidebar-collapsed .sidebar-btn span,
body.sidebar-collapsed .sidebar .chat-history-section,
body.sidebar-collapsed .sidebar-footer .footer-actions,
body.sidebar-collapsed .sidebar .search-container,
body.sidebar-collapsed .sidebar .chat-history-label,
body.sidebar-collapsed .sidebar .chat-history-list {
    display: none !important;
}

body.sidebar-collapsed .sidebar-header {
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    flex-direction: column;
    height: auto;
    gap: 0;
}

body.sidebar-collapsed .sidebar-toggle-btn {
    transform: none;
    margin: 0 auto;
    display: flex;
}

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

body.sidebar-collapsed .logo-icon-img {
    display: none !important;
}

body.sidebar-collapsed .tools-section {
    align-items: center;
    padding: 10px 0;
    gap: 5px;
}

body.sidebar-collapsed .tool-btn {
    justify-content: center;
    padding: 0;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

body.sidebar-collapsed .tool-btn .tool-text {
    display: none !important;
}

body.sidebar-collapsed .tool-btn .tool-icon,
body.sidebar-collapsed .tool-btn .icon {
    margin: 0 !important;
    display: block;
    width: 18px !important;
    height: 18px !important;
}

body.sidebar-collapsed .tool-btn.active::after {
    display: none;
}

body.sidebar-collapsed .sidebar-footer {
    padding: 15px 0;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

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

body.sidebar-collapsed .sidebar-btn.upload-btn {
    justify-content: center;
    padding: 0;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

body.sidebar-collapsed .sidebar-btn.upload-btn .icon {
    margin-right: 0;
}

/* Reset sidebar toggle button positioning for header */
body.sidebar-collapsed .sidebar-toggle-btn {
    transform: none;
    margin: 0 auto;
    display: flex;
}

body.sidebar-collapsed .sidebar-toggle-btn .toggle-logo-icon {
    display: block;
}

body.sidebar-collapsed .sidebar-toggle-btn .toggle-icon {
    display: none;
}

body.sidebar-collapsed .sidebar-toggle-btn:hover .toggle-logo-icon {
    display: none;
}

body.sidebar-collapsed .sidebar-toggle-btn:hover .toggle-icon {
    display: block;
}

/* Primary sidebar text reveal sequence: expand sidebar first, then labels */
.sidebar .logo-text,
.sidebar .tool-text,
.sidebar #profileButtonText {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 160ms ease, transform 160ms ease;
}

body.sidebar-revealing .sidebar .logo-text,
body.sidebar-revealing .sidebar .tool-text,
body.sidebar-revealing .sidebar #profileButtonText,
body.sidebar-hiding .sidebar .logo-text,
body.sidebar-hiding .sidebar .tool-text,
body.sidebar-hiding .sidebar #profileButtonText {
    opacity: 0;
    transform: translateY(3px);
}

.mode-selector-dropdown {
    position: relative;
    transition: margin-left 0.25s ease;
}

.chat-header.chat-history-open .mode-selector-dropdown {
    margin-left: 300px;
}

.chat-header.chat-history-open .current-mode-btn {
    min-width: auto;
    padding: 8px 10px;
    gap: 8px;
}

.chat-header.chat-history-open .current-mode-btn .mode-text {
    display: none;
}

.current-mode-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background-color 0.2s, border-color 0.2s;
    min-width: 156px;
    white-space: nowrap;
}

.current-mode-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
}

.current-mode-btn .mode-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b9c3d8;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.current-mode-btn .mode-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.current-mode-btn .mode-icon[data-mode="study"] {
    color: #9ec5ff;
}

.current-mode-btn .mode-icon[data-mode="balanced"] {
    color: #b6a9ff;
}

.chevron-icon {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    transition: transform 0.2s;
    margin-left: auto;
}

.mode-selector-dropdown.active .chevron-icon {
    transform: rotate(180deg);
}

.mode-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: rgba(20, 23, 30, 0.96);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
    width: 290px;
    padding: 8px;
    display: none;
    z-index: 101;
}

.mode-selector-dropdown.active .mode-dropdown-menu {
    display: block;
}

.mode-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.mode-option:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.mode-option-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    color: #b9c3d8;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mode-option-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.mode-option-icon[data-mode="study"] {
    color: #9ec5ff;
}

.mode-option-icon[data-mode="balanced"] {
    color: #b6a9ff;
}

.mode-option-info {
    flex: 1;
}

.mode-option-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 1px;
}

.mode-option-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.35;
}

.mode-option-check {
    width: 16px;
    height: 16px;
    color: #8ea7ff;
    opacity: 0;
}

.mode-option.selected .mode-option-check {
    opacity: 1;
}

.mode-option.selected {
    background: rgba(110, 104, 255, 0.12);
    border-color: rgba(142, 167, 255, 0.45);
}

/* Chat Menu (Three dots) */
.chat-menu {
    position: relative;
}

.menu-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.menu-btn:hover {
    background-color: var(--bg-hover);
}

.chat-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background-color: var(--modal-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 100;
}

.chat-menu-dropdown button {
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat-menu-dropdown button:first-child {
    border-radius: 8px 8px 0 0;
}

.chat-menu-dropdown button:last-child {
    border-radius: 0 0 8px 8px;
}

.chat-menu-dropdown button:hover {
    background-color: var(--bg-hover);
}

.section-title-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    min-height: 34px;
}

.section-title-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    opacity: 0.95;
}

.section-title-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.section-title-icon--lg {
    width: 36px;
    height: 36px;
}

.projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 40px 40px 12px;
}

/* Projects buttons: align visual style with app-wide buttons */
#projectsView .btn-primary,
#projectView .btn-primary,
#newProjectModal .btn-primary,
#newProjectModal .btn-secondary,
.project-action-btn {
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

#projectsView .btn-primary,
#projectView .btn-primary,
#newProjectModal .btn-primary,
.project-action-btn {
    background: var(--accent-color);
    color: var(--accent-text);
    border-color: transparent;
}

#projectsView .btn-primary:hover,
#projectView .btn-primary:hover,
#newProjectModal .btn-primary:hover,
.project-action-btn:hover {
    filter: brightness(1.06);
}

#newProjectModal .btn-secondary {
    background: transparent;
    color: var(--text-primary);
}

#newProjectModal .btn-secondary:hover {
    background: var(--bg-hover);
}

.projects-header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.projects-subtitle {
    margin: 8px 0 0 0;
    color: var(--text-secondary);
    font-size: 16px;
}

.projects-list {
    padding: 12px 40px 28px;
    min-height: calc(100vh - 240px);
}

.projects-empty-state {
    min-height: calc(100vh - 280px);
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 30px;
}

.projects-empty-state h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
}

.projects-empty-state p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 16px;
    max-width: 560px;
}

.projects-empty-state .btn-primary {
    padding: 12px 20px;
    font-size: 15px;
}

.empty-project-state .btn-primary {
    margin-top: 14px;
}

.chat-header-mobile {
    display: none;
}

.chat-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    /* Ensure it takes full width now that sidebar is gone */
    transition: width 0.3s ease;
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Right-pad by sidebar width so align-items:center lands on viewport center */
    padding: 20px calc(20px + var(--sidebar-width)) 20px 20px;
}

.welcome-message {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.logo-placeholder {
    width: 50px;
    height: 50px;
    background-color: var(--bg-sidebar);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-emoji {
    font-size: 30px;
}

.welcome-message h1 {
    font-size: 24px;
    font-weight: 600;
}

.chat-messages {
    flex: 1;
    width: 100%;
    max-width: 1050px;
    /* Exact width as requested */
    margin: 0 auto;
    padding: 20px 0 80px 0;
    display: none;
    overflow-y: auto;
    /* Enable scrolling */
    height: 100%;
    /* Ensure it takes full height */
    overscroll-behavior: contain;
}

.chat-messages.active {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.message-wrapper {
    display: flex;
    width: 100%;
    padding: 0 20px;
    flex-direction: column;
}

.message-wrapper.user {
    align-items: flex-end;
}

.message-wrapper.bot {
    align-items: flex-start;
}

.message-wrapper.user.failed .message-content {
    opacity: 0.6;
    border-color: #ef4444;
}

.message-wrapper.user.failed::after {
    content: '⚠ Invio fallito';
    display: block;
    font-size: 11px;
    color: #ef4444;
    margin-top: 4px;
    text-align: right;
}

.message-inner {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    /* Contain both bubble and actions */
    min-width: 0;
}

.message-wrapper.user .message-inner {
    align-items: flex-end;
}

.message-wrapper.bot .message-inner {
    align-items: flex-start;
}

.message-content {
    width: auto;
    /* Allow bubble to shrink-wrap content */
    max-width: 100%;
    /* But don't exceed container */
    padding: 10px 15px;
    border-radius: 12px;
    line-height: 1.6;
    font-size: 16px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.message-wrapper.user .message-content {
    background-color: var(--accent-color) !important;
    border: none !important;
    color: #ffffff;
    border-radius: 18px;
    padding: 10px 16px;
    width: auto !important;
    /* Force bubble to wrap content only */
    max-width: 100%;
}

/* ... existing code ... */

.send-btn {
    background-color: var(--accent-color);
    color: #ffffff;
    border-radius: 8px;
    padding: 6px;
    transition: background-color 0.2s, color 0.2s;
}

.message-wrapper.bot .message-content {
    background: transparent;
    color: var(--text-primary);
    padding-left: 0;
    width: 100%;
}

/* ... existing code ... */

.send-btn {
    background-color: var(--accent-color);
    color: var(--accent-text);
    border-radius: 8px;
    padding: 6px;
    transition: background-color 0.2s, color 0.2s;
}

.message-content p {
    margin-bottom: 16px;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: 600;
}

.message-content ul,
.message-content ol {
    margin-bottom: 16px;
    padding-left: 20px;
}

.message-content a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.1);
    transition: color 0.2s;
}

.message-content a:hover {
    color: var(--text-primary);
}

.message-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 24px 0;
    opacity: 0.5;
}


.message-content li {
    margin-bottom: 8px;
}

.message-content p:last-child,
.message-content ul:last-child,
.message-content ol:last-child {
    margin-bottom: 0;
}

.message-content strong {
    font-weight: 600;
}

/* Integrated Header Search - Refined Toggle Design */
.header-search-wrapper {
    position: absolute;
    /* Center on viewport, not on main-content: left = 50vw - sidebar-width */
    left: calc(50vw - var(--sidebar-width));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    width: auto;
    min-width: 40px;
    max-width: 450px;
    height: 40px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0 16px;
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

.header-search-wrapper.collapsed {
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.header-search-wrapper.collapsed:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.search-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s;
}

.header-search-wrapper:not(.collapsed) .search-trigger {
    display: none;
}

.search-trigger-text {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.search-input-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.header-search-wrapper:not(.collapsed) .search-input-container {
    opacity: 1;
    pointer-events: auto;
}

.header-search-wrapper:not(.collapsed) {
    width: min(100%, 560px);
    background: var(--input-bg);
    border-color: var(--border-color);
}

.close-search-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.close-search-btn:hover {
    opacity: 1;
    color: #ff4444;
}

.search-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.header-search-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    color: var(--text-primary);
    font-size: 14px;
    padding: 0;
    outline: none !important;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.search-result-count {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
}

.highlight-search {
    background-color: rgba(255, 255, 0, 0.3);
    border-radius: 2px;
    outline: 1px solid rgba(255, 255, 0, 0.5);
}

/* Profile Modal Styles */
.profile-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.profile-avatar-large {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.profile-avatar-large svg {
    width: 58px;
    height: 58px;
    color: var(--text-secondary);
}

.profile-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.change-avatar-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.change-avatar-btn:hover {
    background: var(--bg-hover);
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-item label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 14px;
    color: var(--text-primary);
}

.profile-actions {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.logout-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid #ff4444;
    border-radius: 8px;
    color: #ff4444;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: rgba(255, 68, 68, 0.1);
}

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

body.dark-mode .highlight-search {
    background-color: rgba(255, 255, 0, 0.2);
    color: #fff;
}

.input-container {
    /* Right-pad by sidebar width so justify-content:center lands on viewport center */
    padding: 10px calc(20px + var(--sidebar-width)) 10px 20px !important;
    display: flex;
    justify-content: center;
    background-color: var(--bg-dark);
    position: sticky;
    bottom: 26px;
    z-index: 10;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Welcome Mode override for Input Container */
.input-container.welcome-mode {
    position: relative !important;
    bottom: auto !important;
    background-color: transparent !important;
    margin-top: 12px;
    padding-bottom: 0 !important;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /* Ensure container spans full width */
}

.disclaimer {
    position: fixed;
    bottom: 8px;
    left: calc(50% + (var(--sidebar-width) / 2));
    transform: translateX(-50%);
    width: calc(100% - var(--sidebar-width));
    max-width: 1050px;
    padding: 0 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 11px;
    z-index: 70;
    pointer-events: none;
    letter-spacing: 0.3px;
    opacity: 0.7;
    transition: left 0.25s ease, width 0.25s ease;
}

/* Thicker Input Area */
/* Consolidated Input Area Styles */
/* Unified Input Area Styles */
/* Unified Input Area Styles - Ultra-Slim Version */
.chat-input-area {
    display: flex;
    align-items: center;
    /* Vertically center all items */
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 6px 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    min-height: 48px;
}

/* Remove header border */
.chat-header {
    border-bottom: none !important;
}

.input-wrapper {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
}

.attachment-preview-wrap {
    margin: 0 6px 8px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.attachment-summary {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.attachment-card {
    position: relative;
    width: 64px;
    height: 64px;
    background-color: var(--bg-hover);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: fadeIn 0.2s ease;
}

.attachment-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-card .file-icon {
    font-size: 24px;
}

.attachment-card .remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background-color: rgba(14, 14, 16, 0.75);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color 0.2s;
    z-index: 2;
}

.attachment-card .remove-btn:hover {
    background-color: rgba(255, 0, 0, 0.55);
}

.attachment-card .file-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 8px;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* ── Paste Text Chip Widget ────────────────────────────────────────────── */
.paste-text-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 12px;
    background: color-mix(in srgb, var(--bg-hover) 80%, #3b82f6 20%);
    border: 1px solid color-mix(in srgb, var(--border-color) 60%, #3b82f6 40%);
    border-radius: 10px;
    max-width: 340px;
    min-width: 180px;
    animation: fadeIn 0.18s ease;
    position: relative;
    flex-shrink: 0;
}

.paste-chip-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}

.paste-chip-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.paste-chip-meta {
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--text-secondary) 80%, #93c5fd 20%);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.paste-chip-preview {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.paste-chip-remove {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-secondary);
    border: none;
    border-radius: 6px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.paste-chip-remove:hover {
    background: rgba(239, 68, 68, 0.55);
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────── */

.chat-input-area:focus-within {
    border-color: var(--border-color);
    /* Don't highlight differently than base border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    /* Keep shadow but no white border */
}

#chatInput:focus {
    outline: none !important;
}

.attach-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attach-btn:hover {
    background-color: var(--bg-hover);
}

.attach-plus-icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.send-btn {
    border: none;
    background-color: var(--accent-color);
    color: white;
    /* Always white for contrast on accent */
    border-radius: 50%;
    /* Circle */
    width: 40px;
    height: 40px;
    min-width: 40px;
    /* Enforce circle */
    min-height: 40px;
    /* Enforce circle */
    aspect-ratio: 1 / 1;
    /* Modern browser enforcement */
    padding: 0;
    /* Remove padding to center icon */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.send-btn svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.send-btn:hover {
    transform: scale(1.08);
    /* Slight grow effect */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    opacity: 1;
}

.send-btn:active {
    transform: scale(0.95);
}

.send-btn:disabled {
    background-color: var(--bg-sidebar);
    opacity: 0.6;
    cursor: not-allowed;
}

.stop-btn {
    border: none;
    background-color: #ef4444;
    /* Standard red */
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    aspect-ratio: 1 / 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    cursor: pointer;
}

.stop-btn svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.stop-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
    background-color: #dc2626;
}

.stop-btn:active {
    transform: scale(0.95);
}

.side-send-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 50%;
    /* Circle like main chat */
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.side-send-btn:hover {
    transform: scale(1.1);
    opacity: 1;
}

.side-send-btn:disabled {
    background-color: var(--border-color);
    cursor: not-allowed;
    transform: none;
}

/* Permission Request Styles */
.permission-request {
    background: rgba(255, 165, 0, 0.1);
    border-left: 3px solid #ffa500;
    padding: 16px !important;
    border-radius: 12px;
}

.permission-btn {
    margin-top: 16px;
    padding: 12px 24px;
    background: var(--accent);
    border: none;
    border-radius: 24px;
    /* Rounded button as requested */
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.permission-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

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

.permission-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.permission-btn svg {
    flex-shrink: 0;
}

.study-unavailable-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.permission-request.study-unavailable {
    background: var(--bg-secondary);
    border-left: none;
    border: 1px solid var(--border-color);
}

.study-unavailable-actions .permission-btn {
    margin-top: 0;
}

#chatInput {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    padding: 8px 10px;
    /* Adjusted for textarea vertical centering */
    outline: none;
    height: 40px;
    /* Initial fixed height */
    max-height: 200px;
    /* Maximum growth limit */
    resize: none;
    /* Disable manual resize */
    overflow-y: hidden;
    /* Hide scrollbar until needed */
    font-family: inherit;
    line-height: 1.5;
}

.disclaimer {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    background-color: var(--modal-bg);
    border-radius: 12px;
    width: 400px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-content {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.3);
    border-radius: 10px;
}

.modal-large {
    width: 550px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
}

.close-modal {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child {
    border-bottom: none;
}

/* --- NEW SETTINGS MODAL STYLES --- */
.modal-settings {
    width: 850px;
    max-width: 95%;
    height: 550px;
    max-height: 95vh;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--modal-bg);
    /* Unified light gray */
}

.modal-settings .modal-header {
    padding: 40px 50px 10px 50px;
    border-bottom: none !important;
    margin-bottom: 0;
}

.settings-layout {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    padding: 0 50px;
}

.settings-tabs-bar {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    background: rgba(128, 128, 128, 0.12);
    border-radius: 10px;
    padding: 4px;
    margin-top: 16px;
    margin-bottom: 28px;
    flex-shrink: 0;
}

.settings-tab-pill {
    position: absolute;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.14);
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.settings-tab-item {
    position: relative;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.2s;
    white-space: nowrap;
    z-index: 1;
    border-radius: 7px;
    user-select: none;
}

.settings-tab-item:hover {
    color: var(--text-primary);
}

.settings-tab-item.active {
    color: var(--text-primary);
    font-weight: 600;
}

.settings-main {
    flex: 1;
    padding: 0 0 50px 0;
    overflow-y: auto;
    background-color: transparent;
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: block;
}

.settings-section-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 32px;
    color: var(--text-primary);
}

/* --- THEME PREVIEWS --- */
.theme-previews-container {
    display: flex;
    gap: 50px;
    margin-top: 25px;
    width: 100%;
}

.theme-preview-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    flex: 1;
    max-width: 400px;
    /* Increased from 280px */
}

.theme-preview {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    border: 5px solid transparent;
    /* Even thicker border */
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    background-color: #2a2a2a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.theme-preview-wrapper:hover .theme-preview {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
}

.theme-preview-wrapper.active .theme-preview {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05), 0 20px 45px rgba(0, 0, 0, 0.4);
}

/* ChatGPT-Style Code Blocks */
.message-text pre {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.code-block-container {
    background: var(--code-bg);
    border-radius: 6px;
    margin: 12px 0;
    overflow: hidden;
}

.code-block-header {
    background: var(--code-header-bg);
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--code-header-text);
}

.code-block-lang {
    font-weight: 500;
}

.copy-code-btn {
    background: transparent;
    border: none;
    color: var(--code-header-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    transition: color 0.2s;
}

.copy-code-btn:hover {
    color: var(--text-primary);
}

.message-text code {
    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
}

/* Specific padding for the code content */
.code-block-container pre {
    padding: 16px !important;
    overflow-x: auto;
}

/* Highlight.js overrides to ensure consistency */
.hljs {
    background: transparent !important;
    color: var(--code-text) !important;
}

.preview-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.theme-preview-wrapper.active .preview-label {
    color: var(--text-primary);
    font-weight: 600;
    transform: scale(1.15);
}

/* Mini UI elements inside preview */
.preview-header {
    height: 16px;
    border-radius: 6px;
    width: 100%;
}

.preview-body {
    display: flex;
    flex: 1;
    gap: 10px;
}

.preview-sidebar {
    width: 25%;
    border-radius: 6px;
}

.preview-main {
    flex: 1;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-line {
    height: 12px;
    border-radius: 5px;
    width: 85%;
}

.preview-line.short {
    width: 45%;
}

/* Dark Preview Colors */
.theme-preview.dark {
    background-color: #1a1a1a;
}

.theme-preview.dark .preview-header {
    background-color: #262626;
}

.theme-preview.dark .preview-sidebar {
    background-color: #111;
}

.theme-preview.dark .preview-main {
    background-color: #1a1a1a;
}

.theme-preview.dark .preview-line {
    background-color: #333;
}

/* Light Preview Colors */
.theme-preview.light {
    background-color: #f5f5f0;
    border: 1px solid #d0d0c8;
}

.theme-preview.light .preview-header {
    background-color: #e8e8e3;
}

.theme-preview.light .preview-sidebar {
    background-color: #e0e0d8;
}

.theme-preview.light .preview-main {
    background-color: #f5f5f0;
}

.theme-preview.light .preview-line {
    background-color: #d0d0c8;
}

::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

/* --- Unified Mode Selection UI --- */
.mode-selection {
    display: inline-flex;
    position: relative;
    background-color: var(--bg-sidebar);
    border-radius: 32px;
    padding: 4px;
    gap: 0;
    margin: 30px auto 0;
    width: auto;
    max-width: 100%;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 10;
    /* Ensure high stacking */
}

.mode-card {
    position: relative;
    z-index: 1;
    background: transparent;
    border: none !important;
    border-radius: 28px;
    padding: 12px 24px;
    flex: 1;
    min-width: 170px;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: none !important;
    white-space: normal;
}

.mode-card:hover {
    color: var(--text-primary);
}

.mode-card.selected,
.mode-card.selected h3,
.mode-card.selected .mode-icon {
    color: var(--mode-slider-text) !important;
    font-weight: 700;
    opacity: 1;
}

.mode-card.selected:hover h3 {
    color: var(--mode-slider-text) !important;
}

.mode-selection::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc(50% - 4px);
    background-color: var(--mode-slider-bg);
    border-radius: 26px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.mode-selection[data-active="study"]::before {
    transform: translateX(0);
}

.mode-selection[data-active="balanced"]::before {
    transform: translateX(100%);
}

.mode-selection[data-active=""]::before {
    opacity: 0;
}

.mode-description {
    margin-top: 15px;
    font-size: 14px;
    /* Increased for clarity */
    color: var(--text-primary);
    /* Use primary for better contrast */
    opacity: 0.9;
    min-height: 20px;
    text-align: center;
}

.mode-card .mode-icon {
    font-size: 18px;
}

.mode-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: inherit;
}

.mode-card .mode-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.mode-card .mode-info p {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.2;
}

.mode-card.selected .mode-info p {
    color: var(--mode-slider-text);
    opacity: 0.88;
}

.mode-badge {
    width: 38px;
    height: 38px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.mode-badge svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
}

.toast {
    position: fixed;
    right: max(14px, env(safe-area-inset-right, 0px) + 8px);
    bottom: max(16px, env(safe-area-inset-bottom, 0px) + 8px);
    max-width: min(90vw, 390px);
    padding: 11px 15px;
    border-radius: 18px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.01em;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.98);
    transition: none;
    z-index: 12000;
    pointer-events: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

.toast-whatsapp {
    background: #202c33;
    color: #e9edef;
}

.toast-size-small {
    font-size: 13px;
    padding: 10px 13px;
}

.toast-size-medium {
    font-size: 14px;
    padding: 11px 15px;
}

.toast-size-large {
    font-size: 15px;
    padding: 13px 17px;
}

.toast-color-graphite {
    background: #2a3642;
    color: #f3f7fb;
}

.toast-color-emerald {
    background: #0f766e;
    color: #e9fffa;
}

.toast-color-blue {
    background: #1d4ed8;
    color: #eff6ff;
}

.toast-color-violet {
    background: #6d28d9;
    color: #f7efff;
}

.toast-color-amber {
    background: #b45309;
    color: #fff7e7;
}

.toast-negative {
    background: #4a2328 !important;
    color: #ffd9df !important;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.notification-settings-grid {
    display: grid;
    gap: 16px;
    margin-top: 12px;
}

.notification-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.notification-setting-copy {
    min-width: 0;
}

.notification-setting-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.notification-setting-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.notification-size-group,
.notification-color-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.notification-size-btn {
    border: none;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.notification-size-btn.active {
    background: color-mix(in srgb, var(--accent-color) 82%, #111 18%);
    color: #fff;
}

.notification-color-dot {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
    filter: saturate(1.12) brightness(1.08);
}

.notification-color-dot[data-toast-color="graphite"] {
    background: #2a3642;
}

.notification-color-dot[data-toast-color="emerald"] {
    background: #0f766e;
}

.notification-color-dot[data-toast-color="blue"] {
    background: #1d4ed8;
}

.notification-color-dot[data-toast-color="violet"] {
    background: #6d28d9;
}

.notification-color-dot[data-toast-color="amber"] {
    background: #b45309;
}

.notification-color-dot.active {
    transform: scale(1.12);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.92),
        0 0 0 5px color-mix(in srgb, var(--accent-color) 72%, transparent),
        0 6px 16px rgba(0, 0, 0, 0.35);
}

.notification-color-dot.active::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -56%);
    font-size: 11px;
    line-height: 1;
    color: #ffffff;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);
}

.notification-sound-select {
    display: none;
}

.notification-preview-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.notification-preview-btn {
    border: none;
    border-radius: 11px;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--accent-color) 74%, #171717 26%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.notification-preview-btn-icon {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
}

.notification-preview-btn-icon svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
}

.notification-sound-switcher {
    position: relative;
    min-width: 154px;
}

.notification-sound-current-btn {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.notification-sound-switcher.open .notification-sound-current-btn {
    background: rgba(255, 255, 255, 0.1);
}

.notification-sound-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 154px;
    padding: 6px;
    border-radius: 10px;
    background: #1e2128;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
    display: none;
    z-index: 20;
}

.notification-sound-switcher.open .notification-sound-menu {
    display: block;
}

.notification-sound-option {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 7px 8px;
    text-align: left;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.notification-sound-option:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.notification-sound-option.active {
    background: color-mix(in srgb, var(--accent-color) 80%, #111 20%);
    color: #fff;
}

.toast.entering {
    animation: toastIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.toast.exiting {
    animation: toastOut 240ms cubic-bezier(0.4, 0.0, 0.8, 1) forwards;
}

@keyframes toastIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
        filter: blur(1.6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes toastOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
        filter: blur(1px);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

.upload-modal {
    width: 600px;
    max-width: 90%;
}

.upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 20px;
    background-color: var(--bg-sidebar);
    position: relative;
    overflow: hidden;
}

.upload-area:hover {
    border-color: var(--text-primary);
    background-color: var(--bg-hover);
}

.upload-icon {
    width: 48px;
    height: 48px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.upload-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin: -6px 0 8px;
}

.upload-modal .btn-primary,
.upload-modal .btn-secondary {
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid var(--border-color);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.upload-modal .btn-primary {
    background: var(--accent-color);
    color: var(--accent-text);
    border-color: transparent;
}

.upload-modal .btn-primary:hover {
    filter: brightness(1.06);
}

.upload-modal .btn-secondary {
    background: transparent;
    color: var(--text-primary);
}

.upload-modal .btn-secondary:hover {
    background: var(--bg-hover);
}

.upload-modal .btn-primary:disabled,
.upload-modal .btn-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.upload-folder-btn {
    font-size: 13px;
    padding: 9px 15px;
}

.folder-builder-panel {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    margin-bottom: 12px;
}

.folder-builder-header h3 {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--text-primary);
}

.folder-name-input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
    padding: 0 10px;
    margin-bottom: 8px;
}

.folder-builder-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 8px;
}

.folder-selected-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.folder-file-chip {
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.folder-library-picker {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    background: var(--bg-sidebar);
}

.folder-picker-title {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.folder-library-files {
    max-height: 140px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.folder-library-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.folder-builder-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.folder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
}

.folder-item:last-child {
    border-bottom: none;
}

.folder-meta {
    color: var(--text-secondary);
    font-size: 12px;
}

/* Minimal Progress Bar */
.upload-progress-container {
    margin-top: 20px;
    display: none;
    /* Hidden by default */
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.progress-bar-bg {
    width: 100%;
    height: 4px;
    background-color: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--text-primary);
    /* Minimal: white/black based on theme */
    width: 0%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.processing-state {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    justify-content: center;
}

.processing-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.file-list-section h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.file-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    background-color: var(--bg-sidebar);
}

.file-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-primary);
}

.file-item:last-child {
    border-bottom: none;
}

.file-item-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    color: var(--text-secondary);
}

.file-item span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delete-file-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.delete-file-btn:hover {
    color: #ff4444;
    background-color: rgba(255, 68, 68, 0.1);
}

.empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
    font-style: italic;
}

.theme-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.theme-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.toggle-slider {
    background-color: var(--accent-color);
}

input:checked+.toggle-slider:before {
    transform: translateX(24px);
}

/* Light mode code colors — absorbed into canonical block at bottom of file */

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 6px;
    padding: 15px 20px;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {

    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-8px);
    }
}

/* Consolidated Message Action Styles moved to bottom */
.ai-thinking-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ai-thinking-text {
    color: var(--text-primary);
    animation: thinkingGlow 1.4s ease-in-out infinite;
}

.ai-thinking-dots {
    min-width: 30px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

@keyframes thinkingGlow {

    0%,
    100% {
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
        opacity: 0.92;
    }

    50% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
        opacity: 1;
    }
}

/* Chat Input Minimal Styling */
/* Consolidated chatInput styles moved above */
#chatInput:focus {
    outline: none;
    border: none;
}

/* Text Selection Highlight - Subtle gray like ChatGPT */
::selection {
    background-color: rgba(255, 255, 255, 0.08);
    color: inherit;
}

::-moz-selection {
    background-color: rgba(255, 255, 255, 0.08);
    color: inherit;
}

/* Text Selection Popup - Professional ChatGPT-style */
.text-selection-popup {
    position: fixed;
    z-index: 10000;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2);
    animation: popupFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
}

.text-selection-popup button {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.text-selection-popup button:hover {
    background: var(--bg-hover);
    transform: scale(1.02);
}

.text-selection-popup button:active {
    transform: scale(0.98);
}

/* Elegant question mark icon */
/* CSS icon removed - using img tag instead */

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }

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

/* Side Chat Panel */
.side-chat-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 380px;
    height: 100vh;
    background: var(--bg-dark);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.side-chat-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.side-chat-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.close-side-chat {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.close-side-chat:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.side-chat-context {
    padding: 16px 20px;
    background: rgba(128, 128, 128, 0.1);
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid var(--accent);
}

.context-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.context-icon {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.context-text {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
    font-style: italic;
    line-height: 1.5;
    max-height: 100px;
    overflow-y: auto;
}

.side-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.side-message {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-message.user {
    align-items: flex-end;
}

.side-message-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.side-message.user .side-message-bubble {
    background: var(--accent);
    color: white;
}

.side-message.bot .side-message-bubble {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Side chat typing indicator - no background, smaller dots */
.side-message.bot .side-message-bubble:has(.typing-indicator) {
    background: transparent;
    padding: 0;
}

.side-message.bot .side-message-bubble .typing-indicator {
    background: transparent;
    padding: 0;
}

.side-message.bot .side-message-bubble .typing-dot {
    width: 6px;
    height: 6px;
}

.side-chat-input-area {
    display: flex;
    align-items: center;
    /* Centered text and button */
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 28px !important;
    padding: 4px 14px !important;
    margin: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease;
    gap: 8px;
    min-height: 42px;
}

.side-attachment-preview-wrap {
    margin: 8px 12px 0;
}

.side-chat-input-area:focus-within {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

#sideChatInput {
    flex: 1;
    background: transparent !important;
    border: none !important;
    padding: 6px 0;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    height: auto;
    min-height: 24px;
    max-height: 150px;
    resize: none;
    overflow-y: hidden;
    font-family: inherit;
    line-height: 1.35;
    align-self: center;
}

#sideChatInput::placeholder {
    color: var(--text-secondary);
    opacity: 0.86;
}

/* Side Send Button icon sizing */
.side-send-btn svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Adjust main content when side chat is open */
.main-content.side-chat-open {
    margin-right: 380px;
    transition: margin-right 0.3s ease;
}

/* Mind Map Generator Modal */
.mindmap-modal {
    max-width: 700px;
    width: 90%;
}

.mindmap-content {
    padding: 24px;
}

.mindmap-input-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mindmap-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.02);
}

.mindmap-upload-area:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
}

.mindmap-upload-area .upload-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    color: var(--text-secondary);
}

.upload-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.upload-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.divider-text {
    text-align: center;
    position: relative;
    margin: 12px 0;
}

.divider-text::before,
.divider-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background: var(--border-color);
}

.divider-text::before {
    left: 0;
}

.divider-text::after {
    right: 0;
}

.divider-text span {
    background: var(--modal-bg);
    padding: 0 16px;
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mindmap-text-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mindmap-text-area label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.mindmap-text-area textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.mindmap-text-area textarea:focus {
    border-color: var(--accent);
}

.mindmap-text-area textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.generate-mindmap-btn {
    width: 100%;
    padding: 14px;
    background: var(--accent-color);
    border: none;
    border-radius: 8px;
    color: var(--accent-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.generate-mindmap-btn:hover {
    opacity: 0.9;
}

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

.mindmap-canvas {
    width: 100%;
    min-height: 400px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.canvas-placeholder {
    text-align: center;
    color: var(--text-secondary);
    padding: 100px 20px;
    font-size: 14px;
}

/* --- CHAT VIEW LAYOUT RESTORATION --- */
#chatView {
    display: flex;
    flex-direction: row;
    flex: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.chat-secondary-sidebar {
    width: 284px;
    min-width: 284px;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, #1a1a1a 0%, #131313 100%);
    padding: 10px 12px 12px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
    align-self: stretch;
    margin-top: 0;
    position: relative;
    top: 0;
}

body.light-mode .chat-secondary-sidebar {
    background: linear-gradient(180deg, #e5e6e2 0%, #dedfd9 100%);
    border-right-color: rgba(0, 0, 0, 0.08);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.04);
}

#chatView.chat-sidebar-open .chat-secondary-sidebar {
    display: flex;
}

.chat-sidebar-toggle-btn {
    position: absolute;
    top: 18px;
    left: 272px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(25, 28, 33, 0.95);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    transition: left 0.2s ease, right 0.2s ease, transform 0.2s ease, color 0.2s ease, background 0.2s ease;
    animation: none;
}

#chatView:not(.chat-sidebar-open) .chat-sidebar-toggle-btn {
    display: none;
}

.chat-sidebar-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.chat-sidebar-toggle-btn svg {
    width: 15px;
    height: 15px;
}

#chatView.chat-sidebar-collapsed .chat-secondary-sidebar {
    display: none;
}

#chatView.chat-sidebar-collapsed .chat-sidebar-toggle-btn {
    left: 10px;
}

#chatView.chat-sidebar-collapsed .chat-sidebar-toggle-btn svg {
    transform: rotate(180deg);
}

/* --- Sidebar Alignment Fixes (Desktop) --- */
@media (min-width: 769px) {
    .chat-header {
        position: relative;
        top: auto;
        z-index: 20;
    }

    /* Keep secondary chat sidebar anchored to the top of the chat area */
    #chatView {
        position: relative;
        padding-left: 0;
    }

    #chatView.chat-sidebar-open:not(.chat-sidebar-collapsed) {
        padding-left: 284px;
    }

    #chatView.chat-sidebar-open:not(.chat-sidebar-collapsed) .chat-secondary-sidebar {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        height: auto;
        margin-top: 0;
        padding-top: 0;
    }

    #chatView.chat-sidebar-collapsed {
        padding-left: 0;
    }

    #chatView.chat-sidebar-collapsed .chat-secondary-sidebar {
        display: none;
    }
}

/* Primary sidebar header: align Logicum text and hamburger button */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
}

.sidebar-header .logo {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.sidebar-toggle-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
}

.toggle-icon {
    width: 22px;
    height: 22px;
}

/* Collapsed sidebar: fixed-size toggle with equal icon sizes on hover swap */
body.sidebar-collapsed .sidebar-header {
    padding: 12px 0;
}

body.sidebar-collapsed .sidebar-toggle-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
}

body.sidebar-collapsed .sidebar-toggle-btn .toggle-logo-icon,
body.sidebar-collapsed .sidebar-toggle-btn .toggle-icon {
    width: 22px;
    height: 22px;
}

/* In collapsed state, keep button size fixed but make Logicum logo icon larger
   when not hovering top-left toggle. */
body.sidebar-collapsed .sidebar-toggle-btn .toggle-logo-icon {
    width: 30px;
    height: 30px;
}

body.sidebar-collapsed .sidebar-toggle-btn:hover .toggle-icon {
    width: 22px;
    height: 22px;
}

/* Chat mode selector: shift slightly right in chat header */
.chat-header .mode-selector-dropdown {
    margin-left: 18px;
}

/* When secondary chat sidebar is open, keep mode selector emoji-only and compact */
.chat-header.chat-history-open .mode-selector-dropdown {
    margin-left: 322px;
}

.chat-header.chat-history-open .current-mode-btn {
    min-width: 42px;
    width: 42px;
    height: 36px;
    padding: 6px;
    justify-content: center;
    gap: 0;
}

.chat-header.chat-history-open .current-mode-btn .mode-text,
.chat-header.chat-history-open .current-mode-btn .chevron-icon {
    display: none;
}

.chat-header.chat-history-open .current-mode-btn .mode-icon {
    width: 20px;
    height: 20px;
}

.chat-header.chat-history-open .current-mode-btn .mode-icon svg {
    width: 20px;
    height: 20px;
}

@keyframes chatSidebarPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.08);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }
}

.chat-secondary-sidebar .new-chat-btn {
    width: 100%;
    margin: 0 0 12px 0;
    min-height: 36px;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-weight: 620;
}

.chat-secondary-sidebar .new-chat-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

.chat-secondary-sidebar .search-container {
    margin-top: 0;
    margin-bottom: 10px;
}

.chat-secondary-sidebar .search-input {
    height: 40px;
    border-radius: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    font-size: 14px;
}

.chat-secondary-sidebar .search-input::placeholder {
    color: rgba(255, 255, 255, 0.68);
}

body.light-mode .chat-secondary-sidebar .search-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.chat-secondary-sidebar .chat-history-section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
}

.chat-secondary-sidebar .chat-history-list {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-secondary-sidebar .history-item {
    padding-top: 12px;
    padding-bottom: 12px;
}

.chat-mythic-mark {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
}

.chat-mythic-mark svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    opacity: 0.92;
}

.chat-mythic-mark span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.light-mode .chat-mythic-mark {
    color: #555;
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

.chat-main-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

#settingsView {
    height: 100%;
    overflow-y: auto;
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    min-height: calc(100vh - 220px);
    padding: 36px 20px 140px;
}

.welcome-subtitle {
    color: var(--text-secondary);
    margin-top: 6px;
    margin-bottom: 20px;
    font-size: 15px;
}

.welcome-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(700px, 100%);
    margin: 0 auto;
}

.welcome-logo-badge {
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: welcomeFloat 3.8s ease-in-out infinite;
}

.welcome-logo-badge::after {
    content: "";
    position: absolute;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 72%);
    animation: welcomeGlow 3.8s ease-in-out infinite;
    pointer-events: none;
}

.welcome-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    position: relative;
    z-index: 1;
}

/* welcome-logo-img: logo unchanged in light mode */

@keyframes welcomeFloat {

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

    50% {
        transform: translateY(-4px);
    }
}

@keyframes welcomeGlow {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.06);
    }
}

.welcome-tool-btn {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.welcome-tool-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}

.tool-pill-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.tool-pill-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.welcome-mode-selection {
    display: none;
}

#welcomeScreen.composer-mode .welcome-tools,
#welcomeScreen.composer-mode .welcome-subtitle {
    display: none;
}

#welcomeScreen.composer-mode .welcome-mode-selection {
    display: flex;
}

#welcomeScreen.composer-mode .mode-selection.welcome-mode-selection {
    margin-top: 20px;
    padding: 3px;
    border-radius: 22px;
}

#welcomeScreen.composer-mode .mode-selection.welcome-mode-selection::before {
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    width: calc(50% - 3px);
    border-radius: 18px;
}

#welcomeScreen.composer-mode .mode-selection.welcome-mode-selection .mode-card {
    min-width: 142px;
    padding: 9px 14px;
    border-radius: 18px;
    gap: 8px;
}

#welcomeScreen.composer-mode .mode-selection.welcome-mode-selection .mode-badge {
    width: 36px;
    height: 36px;
    border-radius: 0;
    background: transparent;
}

#welcomeScreen.composer-mode .mode-selection.welcome-mode-selection .mode-badge svg {
    width: 26px;
    height: 26px;
}

#welcomeScreen.composer-mode .mode-selection.welcome-mode-selection .mode-info h3 {
    font-size: 14px;
}

#welcomeScreen.composer-mode .mode-selection.welcome-mode-selection .mode-info p {
    font-size: 11px;
}

#welcomeScreen.composer-mode .mode-description.welcome-mode-selection {
    display: block;
}

.chat-history-empty {
    border: none;
    background: transparent;
    min-height: 100%;
    padding: 0;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary);
}

.chat-history-empty p {
    margin: 0;
    font-size: 12px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.48);
    font-weight: 500;
}

body.light-mode .chat-history-empty p {
    color: rgba(0, 0, 0, 0.42);
}

.chat-container.compact-mode {
    flex: 0 1 auto !important;
    min-height: auto !important;
    padding: 18px 20px 4px !important;
}

.welcome-message {
    text-align: center;
    width: 100%;
    max-width: 760px;
    margin-top: clamp(44px, 10vh, 120px);
    animation: welcomeContentIn 340ms ease-out;
}

.welcome-message h1 {
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 8px;
}

.welcome-copy-swap {
    animation: welcomeCopySwap 280ms ease-out;
}

@keyframes welcomeContentIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

@keyframes welcomeCopySwap {
    from {
        opacity: 0.62;
        transform: translateY(5px);
    }

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

@media (prefers-reduced-motion: reduce) {
    .welcome-copy-swap {
        animation: none !important;
    }
}

.chat-messages {
    flex: 1;
    padding: 20px;
    padding-bottom: 156px;
    display: none;
    flex-direction: column;
    gap: 20px;
}

.chat-messages.active {
    display: flex;
}

/* Mode Selection Restoration */


/* Message Actions Restoration & Refinement */
.message-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.message-wrapper:hover .message-actions {
    opacity: 1;
}

.message-wrapper.user .message-actions {
    justify-content: flex-end;
}

.action-btn {
    background: transparent;
    border: none;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
}

.action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.action-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.action-btn.tts-speed-btn {
    width: auto;
    min-width: 40px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.action-btn.tts-speed-btn .tts-rate-label {
    line-height: 1;
}

.action-btn.tts-pause-btn {
    width: 32px;
    min-width: 32px;
}

/* TTS Mini Player */
.tts-mini-player {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: fit-content;
    animation: fadeIn 0.2s ease-out;
}

.tts-mini-player-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.tts-mini-player-btn:hover {
    background: var(--bg-hover);
}

.tts-mini-player-btn svg {
    width: 18px;
    height: 18px;
}

.tts-mini-player-btn.active {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.1);
}

.tts-mini-player-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 4px;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

/* Word Selection Mode */
.word-selection-mode .message-text {
    cursor: crosshair;
}

.word-selection-mode .message-text span.tts-word {
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.1s, color 0.1s;
}

.word-selection-mode .message-text span.tts-word:hover {
    background: var(--accent);
    color: white;
}

.tts-word-active {
    background-color: var(--accent);
    color: white;
    border-radius: 4px;
    padding: 0 2px;
    margin: 0 -2px;
}


.mobile-sidebar-btn {
    display: none;
}

/* Mode Selector: icons only on tablet + mobile (≤1024px) */
@media (max-width: 1024px) {
    .mode-card {
        min-width: unset;
        padding: 10px 16px;
        gap: 0;
    }

    .mode-card .mode-info {
        display: none;
    }

    .mode-selection {
        margin-top: 16px;
    }

    .mode-icon.mode-badge {
        width: 24px;
        height: 24px;
    }
}

/* Mobile UX */
@media (max-width: 768px) {

    html,
    body {
        touch-action: pan-x pan-y;
    }

    body {
        --sidebar-width: 0px;
    }

    body {
        overflow: hidden;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 3000;
        width: 82vw;
        max-width: 320px;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .main-content {
        width: 100%;
    }

    .chat-header {
        position: sticky;
        top: 0;
        z-index: 50;
        padding: 12px 12px 10px 108px;
        backdrop-filter: blur(10px);
        justify-content: center;
    }

    .chat-header .mode-selector-dropdown {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0 !important;
    }

    .chat-header .chat-menu {
        position: absolute;
        right: 8px;
        margin-right: 0;
        width: auto;
        z-index: 55;
    }

    .header-search-wrapper,
    .sidebar-footer {
        display: none;
    }

    #chatView {
        flex-direction: column;
        min-height: 0;
    }

    .chat-secondary-sidebar {
        display: flex;
        position: fixed;
        top: 0 !important;
        right: 0;
        height: 100dvh;
        width: 84vw;
        max-width: 340px;
        z-index: 3200;
        border-left: 1px solid var(--border-color);
        border-right: none;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35);
        padding: max(4px, env(safe-area-inset-top, 0px)) 10px 10px;
        background: linear-gradient(180deg, #1a1a1a 0%, #131313 100%);
        transform: translateX(106%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
        will-change: transform, opacity;
    }

    #chatView.chat-sidebar-open .chat-secondary-sidebar {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #chatView.chat-sidebar-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 3150;
        pointer-events: none;
    }

    .chat-sidebar-toggle-btn {
        display: inline-flex;
        position: fixed;
        top: 18px;
        right: 58px;
        left: auto;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        z-index: 3300;
        animation: none;
    }

    /* Keep chat-history toggle visible on mobile even when sidebar is closed. */
    #chatView:not(.chat-sidebar-open) .chat-sidebar-toggle-btn {
        display: inline-flex;
    }

    body.sidebar-open .chat-sidebar-toggle-btn {
        display: none;
    }

    #chatView.chat-sidebar-open .chat-sidebar-toggle-btn {
        right: min(calc(84vw - 58px), 282px);
    }

    #chatView.chat-sidebar-open .chat-sidebar-toggle-btn svg {
        transform: rotate(180deg);
    }

    .chat-header.chat-history-open .mode-selector-dropdown {
        margin-left: 0;
    }

    .chat-secondary-sidebar .new-chat-btn {
        margin-top: 0 !important;
    }

    .chat-secondary-sidebar .search-container {
        margin-top: 0 !important;
    }

    .chat-secondary-sidebar .chat-history-list {
        margin-top: 0 !important;
    }

    .welcome-tools {
        grid-template-columns: 1fr;
    }

    .tools-section {
        padding: 12px;
    }

    .tool-btn {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
    }

    .chat-messages {
        padding: 14px 0 182px 0;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .message-wrapper {
        padding: 0 14px;
    }

    .message-inner {
        max-width: 95%;
    }

    /* ── Mode Selector: icons only on mobile ─────────────────── */
    .mode-card {
        min-width: unset;
        padding: 10px 18px;
        gap: 0;
    }

    .mode-card .mode-info {
        display: none;
    }

    .mode-selection {
        margin-top: 16px;
    }

    .mode-icon.mode-badge {
        width: 22px;
        height: 22px;
    }

    /* Mobile: no sidebar → remove centering compensation */
    .chat-container {
        padding-right: 20px;
    }

    /* ── Chat Input: use keyboard-offset variable ─────────────── */
    .input-container {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--keyboard-offset, 0px) + 10px);
        /* On mobile there is no sidebar, so restore symmetric padding */
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px !important;
        background: var(--bg-dark);
        border-top: none;
        z-index: 60;
    }

    .input-container.welcome-mode {
        position: relative !important;
        bottom: auto !important;
        background: transparent !important;
        padding: 10px 12px !important;
        margin-top: 20px !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 60;
    }

    #chatView.chat-sidebar-open .input-container {
        visibility: hidden;
        pointer-events: none;
    }

    .input-wrapper {
        max-width: 100%;
    }

    .chat-input-area {
        padding: 10px;
    }

    .chat-container {
        min-height: calc(100dvh - 210px);
        padding: 72px 14px 170px;
        justify-content: flex-start;
    }

    .welcome-message {
        margin-top: 10px;
    }

    .side-chat-panel {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        width: 100%;
        max-width: 100%;
        z-index: 4000;
        border-left: none;
    }

    .text-selection-popup {
        transform: translateX(-10%);
    }

    .modal {
        width: 92vw;
        max-width: 92vw;
        margin: 0 auto;
    }

    .message-actions {
        opacity: 1;
    }

    .mobile-sidebar-btn {
        position: fixed;
        left: 12px;
        top: 18px;
        z-index: 70;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        background: var(--bg-secondary);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    }

    body.sidebar-open .mobile-sidebar-btn {
        display: none;
    }

    .mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 2000;
    }

    body.sidebar-open .mobile-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .disclaimer {
        display: none;
    }
}

/* Chat sidebar toggle direction fix:
   when sidebar is hidden/collapsed and opens from left -> arrow must point right */
#chatView.chat-sidebar-collapsed>.chat-sidebar-toggle-btn svg,
#chatView:not(.chat-sidebar-open)>.chat-sidebar-toggle-btn svg {
    transform: none !important;
}

/* If toggle is visible while sidebar is open on some breakpoints, keep "close" direction */
#chatView.chat-sidebar-open>.chat-sidebar-toggle-btn svg {
    transform: rotate(180deg) !important;
}

/* TTS button real progress states */
.action-btn.tts-loading,
.action-btn.tts-ready {
    color: var(--accent) !important;
}

.action-btn.tts-speed-btn {
    color: var(--text-primary) !important;
}

.tts-spinner-indeterminate {
    animation: ttsSpin 0.9s linear infinite;
}

@keyframes ttsSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ChatGPT-like narrower message column even when sidebars are closed */
#chatView.chat-sidebar-collapsed .message-wrapper.bot .message-content,
#chatView:not(.chat-sidebar-open) .message-wrapper.bot .message-content {
    max-width: min(72ch, 100%) !important;
}

#chatView.chat-sidebar-collapsed .message-wrapper.user .message-content,
#chatView:not(.chat-sidebar-open) .message-wrapper.user .message-content {
    max-width: min(58ch, 100%) !important;
}

#chatView.chat-sidebar-collapsed .message-wrapper.user>.message-attachments,
#chatView:not(.chat-sidebar-open) .message-wrapper.user>.message-attachments {
    max-width: min(58ch, 100%) !important;
}

@media (max-width: 480px) {
    .chat-header {
        padding: 10px 10px 10px 102px;
    }

    .chat-sidebar-toggle-btn {
        right: 52px;
        left: auto;
        width: 34px;
        height: 34px;
    }

    .mobile-sidebar-btn {
        width: 38px;
        height: 38px;
        left: 10px;
    }

    .chat-container {
        padding: 66px 10px 172px;
    }

    .chat-input-area {
        min-height: 46px;
        padding: 8px 12px;
    }

    .chat-secondary-sidebar {
        width: 88vw;
        max-width: 320px;
    }

    #chatView.chat-sidebar-open .chat-sidebar-toggle-btn {
        right: min(calc(88vw - 52px), 268px);
    }

    .chat-messages {
        padding-bottom: 190px;
    }
}

@media (max-width: 390px) {
    .chat-header {
        padding: 8px 8px 8px 96px;
    }

    .mobile-sidebar-btn {
        top: 14px;
        left: 8px;
        width: 36px;
        height: 36px;
    }

    .chat-sidebar-toggle-btn {
        top: 14px;
        right: 46px;
        left: auto;
        width: 32px;
        height: 32px;
    }

    .chat-container {
        padding: 62px 8px 176px;
    }

    .message-wrapper {
        padding: 0 10px;
    }

    .message-inner {
        max-width: 98%;
    }

    .input-container {
        padding-left: 8px;
        padding-right: 8px;
    }

    .chat-input-area {
        border-radius: 22px;
    }

    .disclaimer {
        font-size: 9px;
        padding: 0 10px;
    }
}

/* --- Mobile overflow hard-fix (right-side corruption) --- */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100% !important;
    /* override previous 100vw rules */
}

.main-content,
#chatView,
#libraryView,
#mindMapView,
#quizView,
#projectsView,
#settingsView,
.chat-container,
.chat-header,
.chat-messages,
.input-container {
    max-width: 100%;
    overflow-x: clip;
}

@media (max-width: 768px) {

    .chat-header,
    .chat-container,
    .chat-messages,
    .input-container {
        width: 100%;
    }
}

/* --- Side "Approfondisci" redesign: compact + clean --- */
.sidebar {
    background-color: rgba(16, 17, 20, 0.86) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)) !important;
}

.side-chat-panel {
    background: rgba(20, 22, 26, 0.88) !important;
    border-left: none !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.side-chat-header {
    border-bottom: none !important;
    padding: 12px 14px 8px !important;
}

.side-chat-header h3 {
    font-size: 13px !important;
    font-weight: 450 !important;
    color: var(--text-secondary) !important;
    letter-spacing: 0.01em !important;
}

.side-chat-context {
    margin: 0 12px 10px !important;
    padding: 8px 10px !important;
    border: none !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.045) !important;
}

.context-label {
    font-size: 10px !important;
    font-weight: 450 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    margin-bottom: 4px !important;
    color: var(--text-secondary) !important;
}

.context-icon {
    display: none !important;
}

.context-text {
    font-size: 12px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: 1.35 !important;
    max-height: 64px !important;
    color: var(--text-primary) !important;
}

.side-chat-messages {
    padding: 10px 14px !important;
    gap: 10px !important;
}

.side-message-bubble {
    border-radius: 16px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.side-message.user .side-message-bubble {
    background: var(--accent-color) !important;
    color: var(--accent-text) !important;
}

.side-message.bot .side-message-bubble {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
}

.side-chat-input-area {
    margin: 10px 12px 12px !important;
    min-height: 40px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
}

/* Claude-like subtle italics for highlighted UI spots only */
.settings-card-title em,
.settings-section-title em,
.library-subtitle em,
.projects-subtitle em {
    font-style: italic;
    font-weight: 400;
    color: var(--text-secondary);
}

/* --- Codex Mac Glass Pass (requested) --- */
:root {
    --text-primary: #e1e3e7;
    --text-secondary: #9ca0a8;
    --border-color: rgba(255, 255, 255, 0.08);
}

body,
* {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.logo-text,
.mythic-word,
.tool-title,
.tool-subtitle,
.section-title-row,
.section-title-row>span,
.settings-card-title,
.mindmap-header h1, .mindmap-header h2,
.mindmap-saved-header h1, .mindmap-saved-header h2,
.mindmap-header-row h1,
.mindmap-page-header h1 {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    letter-spacing: 0 !important;
}

.sidebar {
    position: relative;
    overflow: hidden;
    border-right: none !important;
    box-shadow: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important;
    background-color: rgba(20, 22, 26, 0.62) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
}

.chat-secondary-sidebar {
    border-right: none !important;
    border-left: none !important;
    box-shadow: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)) !important;
    background-color: rgba(19, 21, 25, 0.58) !important;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.chat-secondary-sidebar::after {
    display: none !important;
}

.main-content,
#chatView,
.chat-header,
.chat-messages {
    border-left: none !important;
}

.sidebar-footer {
    border-top: none !important;
}

.tool-btn,
.sidebar-btn,
.history-item,
.new-chat-btn,
.search-input,
.current-mode-btn {
    color: var(--text-primary) !important;
}

.tool-subtitle,
.history-preview,
.disclaimer,
.settings-card-description,
.chat-history-empty p {
    color: var(--text-secondary) !important;
}

.tool-btn:hover,
.sidebar-btn:hover,
.history-item:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

@media (max-width: 360px) {
    .chat-secondary-sidebar {
        width: 90vw;
        max-width: 300px;
    }

    #chatView.chat-sidebar-open .chat-sidebar-toggle-btn {
        right: min(calc(90vw - 14px), 286px);
    }

    .chat-container {
        padding-bottom: 182px;
    }

    .chat-messages {
        padding-bottom: 198px;
    }
}

/* Settings Modal Styles Restoration */
.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child {
    border-bottom: none;
}

.accent-picker {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.accent-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    padding: 0;
}

.accent-option:hover {
    transform: scale(1.1);
    border-color: var(--text-primary);
}

.accent-option.selected::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--text-primary);
    border-radius: 50%;
}

.accent-option[data-color="default"] {
    background: #ececec;
}

.accent-option[data-color="purple"] {
    background: #d8b4fe;
}

.accent-option[data-color="green"] {
    background: #86efac;
}

.accent-option[data-color="blue"] {
    background: #93c5fd;
}

.accent-option[data-color="yellow"] {
    background: #facc15;
}

.accent-option[data-color="red"] {
    background: #fca5a5;
}

/* End of File Style Cleanup */

/* --- AI Personality Grid --- */
.personality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    width: 100%;
}

.personality-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.personality-card:hover {
    background-color: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--text-secondary);
}

.personality-card.active {
    background-color: var(--bg-hover);
    border: 2px solid var(--text-primary);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    /* Subtle depth */
}

/* Dark mode adjustment for active state if needed */
body.dark-mode .personality-card.active {
    background-color: rgba(255, 255, 255, 0.05);
}

.persona-icon {
    font-size: 24px;
    margin-bottom: 2px;
}

.persona-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.persona-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.persona-quote {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.2;
    opacity: 0.8;
}

.input-container {
    transition: bottom 0.4s cubic-bezier(0.19, 1, 0.22, 1), left 0.4s ease, width 0.4s ease;
}

/* --- Projects Feature Styles --- */

.project-item {
    padding-left: 12px;
}

.project-icon {
    font-size: 16px;
    margin-right: 8px;
    opacity: 0.8;
}

.project-count {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-right: 24px;
    /* Space for menu btn */
}

/* New Project Modal */
.chat-selection-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 10px;
    background: var(--bg-secondary);
}

.chat-selection-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat-selection-item:last-child {
    border-bottom: none;
}

.chat-selection-item:hover {
    background-color: var(--bg-hover);
}

.chat-select-checkbox {
    margin-right: 12px;
    width: 16px;
    height: 16px;
    accent-color: var(--accent-color);
}

.chat-select-info {
    flex: 1;
    overflow: hidden;
}

.chat-select-title {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.chat-select-date {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Project View */
.project-view-container {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding: 30px;
}

.project-header {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}

.project-title-area {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.project-header-icon {
    font-size: 32px;
    margin-right: 16px;
}

.project-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.project-meta {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.project-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-in-project input {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary);
    width: 250px;
}

/* Project Chats Grid */
.project-chats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* ── Chat List: card layout with rounded corners ───────────────────── */
#chatsListGrid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 40px 32px !important;
}

#chatsListGrid .project-chat-card {
    flex-direction: row;
    align-items: center;
    gap: 0;
    border-radius: 18px;
    border: 1px solid transparent;
    padding: 14px 44px 14px 16px;
    background: transparent;
    box-shadow: none;
    transition: background 0.15s, border-color 0.15s;
}

#chatsListGrid .project-chat-card:hover {
    transform: none;
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.07);
    box-shadow: none;
}

#chatsListGrid .project-chat-card.active {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.1);
}

#chatsListGrid .chat-list-icon {
    display: none;
}

.chat-list-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    margin-top: 1px;
}

.chat-list-body {
    flex: 1;
    min-width: 0;
}

.chat-list-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.chat-list-header .card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.chat-list-header .card-date {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── Neues Chat-Listen-Design (Screenshot-Style) ── */
#chatsListGrid .chat-list-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

#chatsListGrid .card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

#chatsListGrid .card-time {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

.project-chat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    /* Required for filter hiding */
    flex-direction: column;
}

.project-chat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
}

.project-chat-card.folder-card {
    background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-secondary));
    border-left: 4px solid var(--accent-color);
}

.project-chat-card.folder-card .card-icon {
    color: var(--accent-color);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.project-chat-card.folder-card .card-title {
    font-weight: 700;
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.card-icon {
    font-size: 20px;
}

.card-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-preview {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.remove-from-project-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 4px;
    border-radius: 4px;
}

.remove-from-project-btn:hover {
    background: rgba(255, 0, 0, 0.1);
    color: #ef4444;
}

.project-chat-card:hover .remove-from-project-btn {
    opacity: 1;
}

.empty-project-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-project-stats .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* --- Greek Minimal Theme Overrides (Grayscale) --- */
:root {
    --bg-dark: #0f0f10;
    --bg-sidebar: #121213;
    --bg-hover: #1e1f21;
    --text-primary: #f3f3f3;
    --text-secondary: #a8a8ab;
    --border-color: #2b2c30;
    --input-bg: #17181a;
    --accent: #8f9197;
    --accent-color: #7f838b;
    --accent-text: #ffffff;
    --modal-bg: #151618;
    --mode-slider-bg: #f1f1f1;
    --mode-slider-text: #111214;
}

/* Light mode variables — canonical block is at the bottom of this file */

/* Force accent variants to stay grayscale */
.accent-purple,
.accent-green,
.accent-blue,
.accent-yellow,
.accent-red,
.accent-gray {
    --accent-color: #7f838b;
    --accent-text: #ffffff;
}

body.light-mode.accent-purple,
body.light-mode.accent-green,
body.light-mode.accent-blue,
body.light-mode.accent-yellow,
body.light-mode.accent-red,
body.light-mode.accent-gray {
    --accent-color: #2f3239;
    --accent-text: #ffffff;
}

* {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.logo-text {
    font-family: 'EB Garamond', 'Times New Roman', serif;
    letter-spacing: 0.04em;
    font-weight: 700;
    text-transform: none;
}

/* Use sparingly to emphasize key words with a subtle mythic tone */
.mythic-word {
    font-family: 'EB Garamond', 'Times New Roman', serif;
    letter-spacing: 0.015em;
    font-weight: 600;
}

.tool-title,
.section-title-row>span:last-child,
.settings-card-title,
.mindmap-header h1, .mindmap-header h2,
.mindmap-saved-header h1, .mindmap-saved-header h2,
.mindmap-header-row h1 {
    font-family: 'EB Garamond', 'Times New Roman', serif;
    letter-spacing: 0.01em;
}

body {
    background:
        radial-gradient(circle at 9% 18%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 45%),
        radial-gradient(circle at 88% 2%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 38%),
        var(--bg-dark);
}

.sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
        var(--bg-sidebar);
}

.chat-secondary-sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, #161719 0%, #101112 100%);
}

.chat-secondary-sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0 20px,
            rgba(255, 255, 255, 0.05) 20px 21px,
            transparent 21px 42px);
}

.tool-btn,
.new-chat-btn,
.welcome-tool-btn,
.mode-option,
.current-mode-btn,
.send-btn,
.chat-sidebar-toggle-btn {
    transition: transform 0.18s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tool-btn:hover,
.new-chat-btn:hover,
.welcome-tool-btn:hover,
.mode-option:hover,
.current-mode-btn:hover,
.send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.history-item {
    border: 1px solid transparent;
}

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

.history-item.active {
    border-color: rgba(255, 255, 255, 0.2);
}

.mode-dropdown-menu {
    background: rgba(16, 17, 18, 0.98);
}

.mode-option-icon,
.history-item-icon {
    background: rgba(255, 255, 255, 0.02);
    color: #c9ccd3;
}

.mode-option-icon[data-mode="study"],
.mode-option-icon[data-mode="balanced"] {
    color: #c9ccd3;
}

.mode-option.selected {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.mode-option-check {
    color: #e7e8eb;
}

.chat-mythic-mark {
    backdrop-filter: blur(2px);
}

.chat-mythic-mark span:empty {
    display: none;
}

.message-wrapper {
    animation: messageRiseIn 220ms ease-out;
}

@keyframes messageRiseIn {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-thinking-text {
    letter-spacing: 0.01em;
}

.ai-thinking-quote {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.92;
    font-style: italic;
}

.accent-option[data-color="default"] {
    background: #bfc3cb;
}

.accent-option[data-color="purple"] {
    background: #a9aeb8;
}

.accent-option[data-color="green"] {
    background: #989ea9;
}

.accent-option[data-color="blue"] {
    background: #8a909c;
}

.accent-option[data-color="yellow"] {
    background: #7a808c;
}

.accent-option[data-color="red"] {
    background: #69707d;
}

/* Chat sidebar controls: clean squared buttons */
.chat-sidebar-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 0;
}

.chat-mythic-mark {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-mythic-mark svg {
    width: 18px;
    height: 18px;
}

.chat-sidebar-inline-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chat-sidebar-inline-btn svg {
    width: 17px;
    height: 17px;
}

.chat-sidebar-inline-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

#chatView>.chat-sidebar-toggle-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: rgba(18, 19, 21, 0.92) !important;
    color: var(--text-secondary) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

#chatView>.chat-sidebar-toggle-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

#chatView.chat-sidebar-open>.chat-sidebar-toggle-btn {
    display: none !important;
}

#chatView.chat-sidebar-collapsed>.chat-sidebar-toggle-btn,
#chatView:not(.chat-sidebar-open)>.chat-sidebar-toggle-btn {
    display: inline-flex !important;
    position: absolute !important;
    top: 14px !important;
    left: 10px !important;
    right: auto !important;
    z-index: 36 !important;
}

@media (max-width: 768px) {

    #chatView.chat-sidebar-collapsed>.chat-sidebar-toggle-btn,
    #chatView:not(.chat-sidebar-open)>.chat-sidebar-toggle-btn {
        position: fixed !important;
        top: 14px !important;
        right: 14px !important;
        left: auto !important;
        z-index: 3340 !important;
    }
}

/* Desktop crowded-chat fix: mode switcher must not overlap search when all sidebars are open */
@media (min-width: 769px) {
    .main-content.side-chat-open .chat-header.chat-history-open {
        display: grid !important;
        grid-template-columns: auto minmax(260px, 1fr) auto;
        column-gap: 12px;
        align-items: center;
    }

    .main-content.side-chat-open .chat-header.chat-history-open .mode-selector-dropdown {
        margin-left: 0 !important;
        z-index: 180 !important;
    }

    .main-content.side-chat-open .chat-header.chat-history-open .header-search-wrapper {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        z-index: 120;
    }

    .main-content.side-chat-open .chat-header.chat-history-open .mode-dropdown-menu {
        z-index: 220 !important;
    }
}

/* New chat mode switch icons: same size, more visible */
.mode-card .mode-badge {
    width: 38px;
    height: 38px;
    border-radius: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mode-card .mode-badge svg {
    width: 28px;
    height: 28px;
}

/* --- UI cleanup: Claude-like typography and chat sidebar clarity --- */
.logo-text {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.mythic-word {
    font-family: inherit !important;
    letter-spacing: 0 !important;
    font-weight: inherit !important;
}

.tool-title,
.tool-subtitle,
.section-title-row,
.section-title-row>span,
.settings-card-title,
.mindmap-header h1, .mindmap-header h2,
.mindmap-saved-header h1, .mindmap-saved-header h2,
.mindmap-header-row h1,
.mindmap-page-header h1,
#libraryView .section-title-row,
#projectsView .section-title-row,
#settingsView .section-title-row {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    letter-spacing: 0 !important;
}

.tool-btn {
    padding: 16px 14px !important;
}

.tool-title {
    font-size: 17px !important;
    font-weight: 700 !important;
}

.tool-subtitle {
    font-size: 14px !important;
    color: #c1c3c8 !important;
}

.welcome-subtitle,
.ai-thinking-quote {
    font-style: italic;
}

.chat-secondary-sidebar {
    padding: 14px 12px 12px !important;
}

.chat-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px 0;
}

.chat-sidebar-title {
    display: block;
    min-width: 0;
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text-primary);
    text-transform: none;
}

.chat-mythic-mark {
    display: none !important;
}

.chat-secondary-sidebar .new-chat-btn {
    width: 100%;
    margin: 6px 0 12px !important;
}

.chat-secondary-sidebar .search-container {
    margin-top: 0 !important;
    margin-bottom: 8px;
}

.history-title {
    font-size: 16px !important;
    font-weight: 700 !important;
}

.history-preview {
    font-size: 13px !important;
}

.chat-sidebar-inline-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex-shrink: 0;
}

#chatView>.chat-sidebar-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: rgba(18, 19, 21, 0.94) !important;
    color: var(--text-secondary) !important;
}

#chatView>.chat-sidebar-toggle-btn svg {
    width: 18px;
    height: 18px;
}

@media (min-width: 769px) {
    #chatView {
        padding-left: 284px;
        transition: padding-left 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #chatView.chat-sidebar-collapsed,
    #chatView:not(.chat-sidebar-open) {
        padding-left: 0;
    }

    #chatView .chat-secondary-sidebar {
        display: flex !important;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.16s ease, visibility 0s linear;
    }

    #chatView.chat-sidebar-collapsed .chat-secondary-sidebar,
    #chatView:not(.chat-sidebar-open) .chat-secondary-sidebar {
        transform: translateX(-104%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.14s ease, visibility 0s linear 0.24s;
    }

    #chatView.chat-sidebar-open:not(.chat-sidebar-collapsed)>.chat-sidebar-toggle-btn {
        display: none !important;
    }

    #chatView.chat-sidebar-collapsed>.chat-sidebar-toggle-btn,
    #chatView:not(.chat-sidebar-open)>.chat-sidebar-toggle-btn {
        display: inline-flex !important;
        position: absolute !important;
        top: 14px !important;
        left: 10px !important;
        right: auto !important;
        z-index: 36 !important;
    }

    /* Prevent overlap between chat-sidebar toggle and mode selector when sidebar is closed */
    #chatView.chat-sidebar-collapsed .chat-header .mode-selector-dropdown,
    #chatView:not(.chat-sidebar-open) .chat-header .mode-selector-dropdown {
        margin-left: 64px !important;
    }
}

/* AI bubble corner detail + composer action refinements */
.message-wrapper.bot .message-content {
    position: relative;
    display: inline-block;
    width: auto !important;
    max-width: min(78ch, 100%);
    padding: 8px 14px 8px 14px;
    overflow: visible;
}

.message-wrapper.bot .message-content::before,
.message-wrapper.bot .message-content::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    border-color: rgba(183, 187, 195, 0.34);
    transition: border-color 0.18s ease, opacity 0.18s ease;
    opacity: 0.78;
}

.message-wrapper.bot .message-content::before {
    top: 2px;
    left: 2px;
    border-top: 1px solid;
    border-left: 1px solid;
    border-top-left-radius: 8px;
}

/* --- Final header/input alignment fixes --- */
.chat-header {
    overflow: visible !important;
}

.chat-header .mode-selector-dropdown {
    display: inline-flex !important;
    align-items: center;
    position: relative;
    z-index: 85;
    flex-shrink: 0;
    margin-left: 18px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Keep mode switcher visible when secondary chat sidebar is open */
.chat-header.chat-history-open .mode-selector-dropdown {
    margin-left: 18px !important;
}

/* Keep compact icon-only style while remaining visible */
.chat-header.chat-history-open .current-mode-btn {
    min-width: 42px !important;
    width: 42px !important;
    height: 36px !important;
    padding: 6px !important;
    justify-content: center !important;
    gap: 0 !important;
}

/* --- Final mode selector polish: clean look, no white border lines --- */
.chat-header .current-mode-btn {
    background: var(--input-bg) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    min-width: 132px !important;
    height: 34px !important;
    padding: 5px 10px !important;
    gap: 7px !important;
}

.chat-header .current-mode-btn:hover,
.chat-header .current-mode-btn:focus-visible {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.chat-header .current-mode-btn .mode-icon {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    width: 22px !important;
    height: 22px !important;
}

.chat-header .current-mode-btn .mode-icon[data-mode="study"],
.chat-header .current-mode-btn .mode-icon[data-mode="balanced"] {
    color: var(--text-secondary) !important;
}

.chat-header .current-mode-btn .mode-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.9 !important;
}

.chat-header .mode-dropdown-menu {
    background: var(--bg-sidebar) !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3) !important;
    width: 250px !important;
    padding: 6px !important;
}

.chat-header .mode-option {
    border: none !important;
    background: transparent !important;
    border-radius: 9px !important;
    padding: 8px !important;
    gap: 8px !important;
}

.chat-header .mode-option:hover {
    background: var(--bg-hover) !important;
    border-color: transparent !important;
}

.chat-header .mode-option.selected {
    background: rgba(127, 131, 139, 0.16) !important;
    border-color: transparent !important;
}

.chat-header .mode-option-icon {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    width: 30px !important;
    height: 30px !important;
}

.chat-header .mode-option-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.9 !important;
}

.chat-header .mode-option-title {
    font-size: 14px !important;
}

.chat-header .mode-option-desc {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.chat-header .mode-option-check {
    color: var(--text-primary) !important;
}

/* Global clean borders: remove bright white outline style across UI */
button,
input,
textarea,
select,
.tool-btn,
.sidebar-btn,
.new-chat-btn,
.search-input,
.history-item,
.chat-selection-item,
.project-chat-card,
.plan-card,
.settings-card,
.modal,
.ai-voice-modal-card,
.current-mode-btn,
.mode-option,
.mode-dropdown-menu,
.ai-personality-option,
.ai-settings-row-btn,
.ai-voice-apply-btn,
.ai-voice-next-btn,
.header-search-wrapper,
.chat-input-area,
.side-chat-input-area {
    border-color: var(--border-color) !important;
}

.mode-option:hover,
.ai-personality-option:hover {
    border-color: var(--border-color) !important;
}

.disclaimer {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(800px, calc(100% - 24px)) !important;
    max-width: 800px !important;
    padding: 0 8px !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .disclaimer {
        width: min(92vw, 800px) !important;
    }
}

.message-wrapper.bot .message-content::after {
    right: 2px;
    bottom: 2px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-bottom-right-radius: 8px;
}

.message-wrapper.bot:hover .message-content::before,
.message-wrapper.bot:hover .message-content::after {
    border-color: rgba(205, 209, 216, 0.54);
}

.attach-btn {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.02);
    border-color: transparent;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.chat-input-area:hover .attach-btn,
.chat-input-area:focus-within .attach-btn,
.attach-btn:hover,
.attach-btn:focus-visible {
    border-color: rgba(168, 173, 183, 0.5);
}

.attach-plus-icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.send-btn svg,
.side-send-btn svg {
    width: 21px;
    height: 21px;
}

/* User bubble: ChatGPT-like readable width */
.message-wrapper.user .message-content {
    max-width: min(64ch, 100%) !important;
}

.message-wrapper.user .message-text {
    max-width: 100%;
}

/* Attachments integrated in user bubble */
.message-attachments {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.message-wrapper.user>.message-attachments {
    align-self: flex-end;
    max-width: min(64ch, 100%);
    margin-bottom: 8px;
}

.message-attachments.with-text {
    margin-bottom: 10px;
}

.message-attachments img {
    max-width: 240px;
    max-height: 240px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    object-fit: cover;
}

.message-attachment-file {
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* User attachments are displayed above the text bubble (not inside it). */

/* Settings actions: cleaner save button style */
.settings-actions {
    margin-top: 10px;
}

.settings-save-btn {
    border-radius: 10px !important;
    padding: 10px 16px !important;
    min-width: 150px;
    border: 1px solid var(--border-color) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-secondary) !important;
    font-weight: 700 !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

.settings-save-btn.is-dirty {
    background: var(--accent-color) !important;
    border-color: transparent !important;
    color: var(--accent-text) !important;
}

.settings-save-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.settings-save-btn:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
}

/* Composer controls: force circular action buttons and single-row layout */
.chat-input-area,
.side-chat-input-area {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
}

.attach-btn,
.voice-btn,
.send-btn,
.side-send-btn {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
}

.attach-btn,
.voice-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.attach-btn {
    border: 1px solid transparent !important;
    background: transparent !important;
}

.attach-btn:hover,
.attach-btn:focus-visible,
.chat-input-area:hover .attach-btn,
.chat-input-area:focus-within .attach-btn,
.side-chat-input-area:hover .attach-btn,
.side-chat-input-area:focus-within .attach-btn {
    border-color: transparent !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.voice-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-secondary) !important;
}

.voice-btn:hover,
.voice-btn:focus-visible {
    border-color: rgba(168, 173, 183, 0.5) !important;
    background: var(--bg-hover) !important;
}

.voice-btn svg {
    width: 18px !important;
    height: 18px !important;
}

.voice-btn.recording {
    color: #ff6767 !important;
    border-color: rgba(255, 103, 103, 0.55) !important;
    background: rgba(255, 103, 103, 0.12) !important;
}

.chat-input-area,
.side-chat-input-area {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.voice-wave {
    position: absolute;
    left: 56px;
    right: auto;
    width: 260px;
    top: 50%;
    height: clamp(40px, 7vh, 56px);
    transform: translateY(-50%);
    pointer-events: none;
    display: none;
    z-index: 0;
    opacity: 0.96;
    transition: opacity 160ms ease;
}

.voice-wave svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.voice-wave .wave-line,
.voice-wave .wave-glow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.voice-wave .wave-line {
    stroke-width: 2.5px;
    opacity: 0.98;
}

.voice-wave .wave-glow {
    stroke-width: 6px;
    opacity: 0.52;
}

.chat-input-area.is-listening .voice-wave,
.side-chat-input-area.is-listening .voice-wave {
    display: block;
}

.chat-input-area[data-wave-state="idle"] .voice-wave,
.side-chat-input-area[data-wave-state="idle"] .voice-wave {
    opacity: 0.78;
}

.chat-input-area[data-wave-state="listening"] .voice-wave,
.side-chat-input-area[data-wave-state="listening"] .voice-wave {
    opacity: 1;
}

.chat-input-area[data-wave-state="processing"] .voice-wave,
.side-chat-input-area[data-wave-state="processing"] .voice-wave {
    opacity: 0.74;
    animation: voiceWavePulse 1.6s ease-in-out infinite;
}

.chat-input-area[data-wave-state="processing"] .voice-wave .wave-line,
.side-chat-input-area[data-wave-state="processing"] .voice-wave .wave-line {
    stroke-width: 2.2px;
}

.chat-input-area[data-wave-state="processing"] .voice-wave .wave-glow,
.side-chat-input-area[data-wave-state="processing"] .voice-wave .wave-glow {
    stroke-width: 5px;
    opacity: 0.38;
}

.chat-input-area>*,
.side-chat-input-area>* {
    position: relative;
    z-index: 1;
}

.chat-input-area>.voice-wave,
.side-chat-input-area>.voice-wave {
    z-index: 0 !important;
}

#chatInput,
#sideChatInput {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    position: relative;
    z-index: 2;
    box-sizing: border-box !important;
}

.chat-input-area.is-listening,
.side-chat-input-area.is-listening {
    min-height: 48px !important;
}

.chat-input-area.is-listening #chatInput {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    overflow-y: hidden !important;
}

.side-chat-input-area.is-listening #sideChatInput {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    overflow-y: hidden !important;
}

@media (prefers-color-scheme: light) {
    .voice-wave .wave-line {
        stroke: rgba(255, 255, 255, 0.84) !important;
    }

    .voice-wave .wave-glow {
        stroke: rgba(255, 255, 255, 0.62) !important;
        opacity: 0.24 !important;
    }
}

@keyframes voiceWavePulse {

    0%,
    100% {
        opacity: 0.66;
    }

    50% {
        opacity: 0.9;
    }
}

.send-btn,
.side-send-btn {
    background: var(--accent-color) !important;
    color: var(--accent-text) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
}

.send-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
}

.side-send-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
}

/* --- Codex-like Typography (no heavy bold) --- */
html,
body,
* {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

.logo-text {
    font-size: 35px !important;
    font-weight: 500 !important;
}

.tool-title,
.history-title,
.section-title-row,
.section-title-row>span,
.settings-card-title,
.mode-option-title,
.mode-text,
.new-chat-btn,
.sidebar-btn,
.profile-btn,
h1,
h2,
h3,
h4 {
    font-weight: 500 !important;
}

.tool-subtitle,
.history-preview,
.disclaimer,
.mode-option-desc,
.library-subtitle,
.settings-card-description,
p,
span,
label {
    font-weight: 400 !important;
}

.message-content strong,
.message-text strong,
strong {
    font-weight: 500 !important;
}

/* Chatbot emphasis styling: key words/facts use Playfair Display */
.message-wrapper.bot .message-content strong,
.message-wrapper.bot .message-content b,
.message-wrapper.bot .message-text strong,
.message-wrapper.bot .message-text b,
.side-message.bot .side-message-bubble strong,
.side-message.bot .side-message-bubble b {
    font-family: 'Playfair Display', 'Times New Roman', serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

.message-wrapper.bot .message-content em,
.message-wrapper.bot .message-content i,
.message-wrapper.bot .message-text em,
.message-wrapper.bot .message-text i,
.side-message.bot .side-message-bubble em,
.side-message.bot .side-message-bubble i {
    font-family: 'Playfair Display', 'Times New Roman', serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
}

/* --- Ultra-clean chat chrome (remove fine white borders) --- */
.chat-input-area,
.side-chat-input-area,
.search-input,
.chat-secondary-sidebar .search-input,
.new-chat-btn {
    border: none !important;
    box-shadow: none !important;
}

.chat-input-area,
.side-chat-input-area {
    background: rgba(255, 255, 255, 0.045) !important;
}

.search-input,
.chat-secondary-sidebar .search-input,
.new-chat-btn {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Remove heavy outlines from saved chat items in chat sidebar */
.history-item,
.history-item:hover,
.history-item.active {
    border: none !important;
    box-shadow: none !important;
}

.chat-secondary-sidebar .history-item {
    border-radius: 10px !important;
    background: transparent !important;
}

.chat-secondary-sidebar .history-item:hover,
.chat-secondary-sidebar .history-item.active {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Thinner text weights across sidebar navigation and chat list */
.tool-title,
.tool-subtitle,
.history-title,
.history-preview,
.logo-text,
.sidebar-btn,
.new-chat-btn,
#profileButtonText {
    font-weight: 400 !important;
}

.send-btn:hover,
.side-send-btn:hover {
    transform: none !important;
    opacity: 1;
    filter: brightness(1.05);
}

.send-btn:active,
.side-send-btn:active {
    transform: none !important;
    filter: brightness(0.98);
}

/* Mobile: move section titles to the right so they don't overlap menu button */
@media (max-width: 768px) {

    #libraryView .library-header,
    #projectsView .projects-header,
    #settingsView .settings-view-header,
    #mindMapView .mindmap-saved-header,
    #mindMapView .mindmap-header {
        padding-left: 64px !important;
    }
}

@media (max-width: 390px) {

    #libraryView .library-header,
    #projectsView .projects-header,
    #settingsView .settings-view-header,
    #mindMapView .mindmap-saved-header,
    #mindMapView .mindmap-header {
        padding-left: 58px !important;
    }
}

/* Final sidebar flattening: single-color sidebars, no gradients */
.sidebar,
.chat-secondary-sidebar,
.settings-sidebar,
.preview-sidebar,
#mindMapSavedSidebar {
    background-image: none !important;
    background: var(--bg-sidebar) !important;
}

.sidebar::before,
.sidebar::after,
.chat-secondary-sidebar::before,
.chat-secondary-sidebar::after,
.settings-sidebar::before,
.settings-sidebar::after,
.preview-sidebar::before,
.preview-sidebar::after,
#mindMapSavedSidebar::before,
#mindMapSavedSidebar::after {
    display: none !important;
    background: none !important;
}

body.light-mode .sidebar,
body.light-mode .chat-secondary-sidebar,
body.light-mode .settings-sidebar,
body.light-mode .preview-sidebar,
body.light-mode #mindMapSavedSidebar {
    background: var(--bg-sidebar) !important;
}

/* Distinct tone for chat secondary sidebar (different from primary sidebar and main chat) */
.chat-secondary-sidebar {
    background: #1d1d21 !important;
}

body.light-mode .chat-secondary-sidebar {
    background: #e2e2dd !important;
}

/* Mobile chat hard-fix: prevent any residual desktop sidebar offset */
@media (max-width: 768px) {

    .main-content,
    #chatView,
    .chat-main-area,
    .chat-container,
    .chat-messages,
    .input-container,
    .chat-header {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        left: 0 !important;
    }

    #chatView,
    #chatView.chat-sidebar-open,
    #chatView.chat-sidebar-collapsed {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .chat-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .chat-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .chat-messages {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .input-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .chat-header .mode-selector-dropdown,
    .chat-header.chat-history-open .mode-selector-dropdown {
        margin-left: 0 !important;
        transform: translateX(-50%) !important;
    }

    .disclaimer {
        left: 50% !important;
        width: calc(100% - 16px) !important;
        transform: translateX(-50%) !important;
    }
}

/* Chat history sidebar rhythm: equal spacing between New Chat, Search, and list */
.chat-secondary-sidebar .new-chat-btn {
    margin: 0 0 10px !important;
}

.chat-secondary-sidebar .search-container {
    margin: 0 0 10px !important;
}

/* Pinned chat highlight: accent line on the left outside the card */
.chat-secondary-sidebar .history-item {
    position: relative;
    overflow: visible;
}

.chat-secondary-sidebar .history-item.pinned::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 10%;
    width: 3px;
    height: 80%;
    border-radius: 999px;
    background: var(--accent-color);
    opacity: 0.95;
}

/* --- Mobile definitive chat layout fix: prevent right-shift/squeezed viewport --- */
@media (max-width: 768px) {

    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #mainContent,
    .main-content,
    #chatView,
    #chatView.chat-sidebar-open,
    #chatView.chat-sidebar-collapsed,
    #chatView .chat-main-area,
    #chatView .chat-header,
    #chatView .chat-container,
    #chatView .chat-messages,
    #chatView .input-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        translate: none !important;
    }

    /* Keep secondary chat sidebar as overlay panel only, never shifting main chat */
    #chatView .chat-secondary-sidebar {
        left: auto !important;
        right: 0 !important;
    }

    /* Side clarification panel must not shrink the main mobile viewport */
    .main-content.side-chat-open {
        margin-right: 0 !important;
    }
}

/* Final override: side "Approfondisci" chat should match main chat style (narrower) */
.side-chat-panel {
    width: 372px !important;
}

.side-chat-header h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* Sources UI for bot answers */
.message-sources-panel {
    margin-top: 8px;
    display: none;
    flex-wrap: wrap;
    gap: 8px;
}

.source-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 6px 10px;
    max-width: 220px;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.source-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.source-favicon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

.source-host {
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-actions .sources-btn.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.internal-sources-panel {
    flex-direction: column;
    gap: 8px;
}

.internal-source-row {
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 8px 10px;
}

.internal-source-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

.internal-source-detail {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-secondary);
    word-break: break-word;
}

.internal-sources-empty {
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
}

.message-actions .sources-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: auto !important;
    min-width: 92px;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.sources-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sources-btn-icon svg {
    width: 16px;
    height: 16px;
}

.sources-btn-label {
    font-size: 12px;
    line-height: 1;
}

.sources-preview {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 2px;
}

.source-preview-avatar {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.35);
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(8, 9, 11, 0.75);
}

.source-preview-avatar+.source-preview-avatar {
    margin-left: 0;
}

.context-label {
    font-size: 12px !important;
    font-weight: 600 !important;
}

.context-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.side-chat-messages {
    padding: 18px 18px 14px !important;
    gap: 14px !important;
}

.side-message {
    max-width: 100%;
}

.side-message-bubble {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Bot in side chat: no visible bubble, like main chat */
.side-message.bot .side-message-bubble {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 92% !important;
    color: var(--text-primary) !important;
}

.side-message.user .side-message-bubble {
    max-width: 78% !important;
    border-radius: 18px !important;
}

/* Side chat markdown spacing parity with main chat */
.side-message-bubble p,
.side-message-bubble ul,
.side-message-bubble ol,
.side-message-bubble pre,
.side-message-bubble blockquote {
    margin: 0 0 0.72em 0 !important;
}

.side-message-bubble p:last-child,
.side-message-bubble ul:last-child,
.side-message-bubble ol:last-child,
.side-message-bubble pre:last-child,
.side-message-bubble blockquote:last-child {
    margin-bottom: 0 !important;
}

.side-message-bubble h1,
.side-message-bubble h2,
.side-message-bubble h3,
.side-message-bubble h4 {
    margin: 0 0 0.48em 0 !important;
    line-height: 1.28 !important;
}

.side-message-bubble ul,
.side-message-bubble ol {
    padding-left: 1.2em !important;
}

.side-message-bubble li+li {
    margin-top: 0.24em !important;
}

/* Final title hierarchy override */
.logo-text {
    font-size: 38px !important;
    font-weight: 700 !important;
}

.tool-title {
    font-size: 20px !important;
    font-weight: 700 !important;
}

.history-title {
    font-size: 17px !important;
    font-weight: 700 !important;
}

.settings-view-header h1,
.projects-header h1,
.mindmap-header h1, .mindmap-header h2,
.mindmap-saved-header h1, .mindmap-saved-header h2,
.mindmap-header-row h1,
.mindmap-page-header h1,
#libraryView .section-title-row,
#projectsView .section-title-row,
#settingsView .section-title-row {
    font-size: clamp(30px, 3vw, 40px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

/* Final polish: reduce oversized left sidebar scale */
.logo-text {
    font-size: 24px !important;
    font-weight: 700 !important;
}

.tool-btn {
    padding: 12px 12px !important;
    border-radius: 10px !important;
}

.tool-title {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.tool-subtitle {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    opacity: 0.88;
}

.tool-btn .icon {
    width: 18px !important;
    height: 18px !important;
}

/* Saved chat card text clamp (never overflow outside card) */
.history-main,
.history-meta {
    min-width: 0 !important;
    overflow: hidden !important;
}

.history-title {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.history-preview {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Speech-to-text layout: wave between text and right controls; controls stay right */
.chat-input-area #chatInput {
    order: 2;
}

.chat-input-area .attach-btn {
    order: 1;
}

.chat-input-area .voice-btn {
    order: 3;
}

.chat-input-area .send-btn {
    order: 4;
}

.side-chat-input-area #sideChatInput {
    order: 2;
}

.side-chat-input-area .side-attach-btn {
    order: 1;
}

.side-chat-input-area .side-voice-btn {
    order: 3;
}

.side-chat-input-area .side-send-btn {
    order: 4;
}

/* Mobile canonical sidebar behavior (must stay last to beat previous sidebar theme blocks) */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        width: 82vw !important;
        max-width: 320px !important;
        transform: translateX(-100%) !important;
        z-index: 3000 !important;
        flex: none !important;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35) !important;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0) !important;
    }

    #mainContent,
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
    }
}

/* Final guard: chat sidebar toggle must always be clickable when sidebar is closed */
#chatView.chat-sidebar-collapsed>.chat-sidebar-toggle-btn,
#chatView:not(.chat-sidebar-open)>.chat-sidebar-toggle-btn {
    z-index: 4000 !important;
    pointer-events: auto !important;
}

/* Final guard: tighter chat width when sidebars are hidden */
#chatView.chat-sidebar-collapsed .chat-messages,
#chatView:not(.chat-sidebar-open) .chat-messages {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.sidebar-collapsed #chatView.chat-sidebar-collapsed .chat-messages,
body.sidebar-collapsed #chatView:not(.chat-sidebar-open) .chat-messages {
    max-width: 820px !important;
}

/* Final input geometry: align edge of bubble with circular attach/send buttons */
.chat-input-area,
.side-chat-input-area {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.chat-input-area .attach-btn,
.side-chat-input-area .side-attach-btn {
    margin-left: -2px !important;
}

.chat-input-area .send-btn,
.side-chat-input-area .side-send-btn {
    margin-right: -2px !important;
}

/* STT stability: keep input geometry fixed and reserve wave lane (no overlap with text) */
.chat-input-area,
.side-chat-input-area {
    --voice-wave-space: 0px;
}

.chat-input-area.is-listening,
.side-chat-input-area.is-listening {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
}

.chat-input-area.is-listening #chatInput {
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding-right: calc(var(--voice-wave-space, 0px) + 6px) !important;
    box-sizing: border-box !important;
    overflow-y: hidden !important;
}

.side-chat-input-area.is-listening #sideChatInput {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding-right: calc(var(--voice-wave-space, 0px) + 4px) !important;
    box-sizing: border-box !important;
    overflow-y: hidden !important;
}

.chat-input-area.is-listening .attach-btn,
.chat-input-area.is-listening .voice-btn,
.chat-input-area.is-listening .send-btn,
.side-chat-input-area.is-listening .side-attach-btn,
.side-chat-input-area.is-listening .side-voice-btn,
.side-chat-input-area.is-listening .side-send-btn {
    transform: none !important;
    margin-left: inherit !important;
    margin-right: inherit !important;
}

/* Keep action buttons anchored during STT (no horizontal jumps) */
.chat-input-area.is-listening .attach-btn {
    margin-left: -2px !important;
}

.chat-input-area.is-listening .send-btn {
    margin-right: -2px !important;
}

.side-chat-input-area.is-listening .side-attach-btn {
    margin-left: -2px !important;
}

.side-chat-input-area.is-listening .side-send-btn {
    margin-right: -2px !important;
}

/* STT hard stability: keep attach/send anchored and prevent horizontal drift */
.chat-input-area .attach-btn,
.chat-input-area .voice-btn,
.chat-input-area .send-btn,
.side-chat-input-area .side-attach-btn,
.side-chat-input-area .side-voice-btn,
.side-chat-input-area .side-send-btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.chat-input-area .attach-btn,
.side-chat-input-area .side-attach-btn {
    margin-left: -2px !important;
    margin-right: 0 !important;
}

.chat-input-area .send-btn,
.side-chat-input-area .side-send-btn {
    margin-right: -2px !important;
    margin-left: 0 !important;
}

.chat-input-area #chatInput,
.side-chat-input-area #sideChatInput {
    flex: 1 1 0% !important;
}

/* Final border cleanup (dark mode): remove white fine outlines from key UI controls */
body:not(.light-mode) {
    --ui-border-soft: rgba(112, 118, 128, 0.34);
    --ui-border-soft-2: rgba(96, 102, 112, 0.28);
}

body:not(.light-mode) .header-search-wrapper,
body:not(.light-mode) .header-search-wrapper:not(.collapsed),
body:not(.light-mode) .header-search-wrapper.collapsed:hover,
body:not(.light-mode) #chatSearchInput,
body:not(.light-mode) .chat-secondary-sidebar .search-input,
body:not(.light-mode) .search-input,
body:not(.light-mode) .current-mode-btn,
body:not(.light-mode) .mode-dropdown-menu,
body:not(.light-mode) .mode-option,
body:not(.light-mode) .chat-sidebar-toggle-btn,
body:not(.light-mode) #chatView>.chat-sidebar-toggle-btn,
body:not(.light-mode) .settings-card,
body:not(.light-mode) .settings-tab-btn.active,
body:not(.light-mode) .settings-form input,
body:not(.light-mode) .theme-card,
body:not(.light-mode) .message-preview,
body:not(.light-mode) .subscription-usage,
body:not(.light-mode) .subscription-usage-item,
body:not(.light-mode) .plan-card,
body:not(.light-mode) .ai-settings-panel,
body:not(.light-mode) .ai-settings-row-btn,
body:not(.light-mode) .ai-voice-modal-card,
body:not(.light-mode) .ai-voice-apply-btn,
body:not(.light-mode) .ai-voice-next-btn,
body:not(.light-mode) .settings-save-btn {
    border-color: var(--ui-border-soft) !important;
}

body:not(.light-mode) .mode-option:hover,
body:not(.light-mode) .current-mode-btn:hover,
body:not(.light-mode) .current-mode-btn:focus-visible,
body:not(.light-mode) #chatView>.chat-sidebar-toggle-btn:hover,
body:not(.light-mode) .settings-tab-btn:hover,
body:not(.light-mode) .ai-settings-row-btn:hover {
    border-color: var(--ui-border-soft-2) !important;
}

body:not(.light-mode) .current-mode-btn .mode-icon,
body:not(.light-mode) .mode-option-icon {
    border-color: transparent !important;
}

/* Hide saved-chats toggle on main quick-features screen; show only in active chat view */
#chatView.chat-toggle-hidden>.chat-sidebar-toggle-btn {
    display: none !important;
}

/* Mobile chat scroll stabilization: keep vertical scroll smooth and non-blocking */
@media (max-width: 768px) {

    #chatView,
    #chatView .chat-main-area {
        min-height: 0 !important;
    }

    #chatView .chat-main-area {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #chatView .chat-container {
        flex: 0 0 auto !important;
        min-height: auto !important;
    }

    #chatView .chat-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        scroll-behavior: auto !important;
    }

    #chatView .chat-messages.active {
        display: flex !important;
    }
}

/* Library folders: minimal folder card + folder detail header */
.library-folder-header {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.library-folder-back-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.library-folder-back-btn svg {
    width: 18px;
    height: 18px;
}

.library-folder-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.folder-card {
    position: relative;
    overflow: visible;
}

.folder-card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
}

.folder-menu-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(109, 115, 126, 0.32);
    background: rgba(20, 23, 28, 0.84);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.folder-menu-btn:hover {
    color: var(--text-primary);
    background: rgba(35, 39, 47, 0.92);
}

.folder-menu {
    position: absolute;
    top: 32px;
    right: 0;
    min-width: 154px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    padding: 6px;
    display: none;
}

.folder-menu.open {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.folder-menu-item {
    border: none;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

.folder-menu-item:hover {
    background: var(--bg-hover);
}

.folder-menu-item.danger {
    color: #ff8f8f;
}

.folder-visual {
    position: relative;
    width: 100%;
    min-height: 128px;
    border-radius: 14px;
    border: 1px solid rgba(112, 118, 128, 0.3);
    background: linear-gradient(180deg, rgba(33, 37, 44, 0.98) 0%, rgba(25, 28, 34, 0.98) 100%);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.folder-visual::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 14px;
    width: 72px;
    height: 14px;
    border: 1px solid rgba(112, 118, 128, 0.3);
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: linear-gradient(180deg, rgba(43, 47, 56, 0.98), rgba(33, 37, 44, 0.98));
}

.folder-cover {
    display: none;
}

.folder-preview-stack {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 14px;
    bottom: 14px;
}

.folder-preview-tile {
    position: absolute;
    width: 70%;
    height: 78px;
    border-radius: 10px;
    border: 1px solid rgba(120, 126, 136, 0.3);
    background: linear-gradient(180deg, rgba(45, 50, 58, 0.94), rgba(34, 38, 45, 0.94));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.folder-preview-tile:first-child {
    left: 2px;
    top: 8px;
    z-index: 2;
}

.folder-preview-tile:last-child {
    right: 2px;
    top: 22px;
    z-index: 1;
}

.folder-preview-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.folder-preview-fallback {
    font-size: 10px;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-secondary);
}

.folder-drop-target {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 1px var(--accent-color), 0 0 0 4px rgba(71, 78, 90, 0.22);
}

/* Final mobile viewport canonical fix (Safari/Chrome/Android/iOS) */
@media (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        height: var(--app-height, 100dvh) !important;
        min-height: var(--app-height, 100dvh) !important;
        overflow: hidden !important;
    }

    #mainContent,
    .main-content,
    #chatView,
    #chatView .chat-main-area {
        width: 100% !important;
        max-width: 100% !important;
        height: var(--app-height, 100dvh) !important;
        min-height: var(--app-height, 100dvh) !important;
        overflow: hidden !important;
    }

    #chatView .chat-messages {
        padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #chatView .input-container {
        bottom: 0 !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Absolute border de-whitening: remove white border tones from all key UI controls */
body :where(button,
    input,
    textarea,
    select,
    .tool-btn,
    .sidebar-btn,
    .new-chat-btn,
    .search-input,
    .history-item,
    .chat-selection-item,
    .project-chat-card,
    .plan-card,
    .settings-card,
    .settings-tab-btn,
    .modal,
    .ai-voice-modal-card,
    .current-mode-btn,
    .mode-option,
    .mode-dropdown-menu,
    .ai-personality-option,
    .ai-settings-row-btn,
    .ai-voice-apply-btn,
    .ai-voice-next-btn,
    .header-search-wrapper,
    .chat-input-area,
    .side-chat-input-area,
    .language-switcher,
    .language-option-btn,
    .chat-sidebar-toggle-btn,
    .theme-card,
    .message-preview,
    .subscription-usage,
    .subscription-usage-item,
    .folder-menu,
    .folder-visual,
    .folder-preview-tile) {
    border-color: var(--border-color) !important;
}

body :where(.color-dot.active) {
    border-color: var(--border-color) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.34) !important;
}

body :where(.settings-tab-btn.active, .language-option-btn.active, .mode-option.selected) {
    border-color: var(--border-color) !important;
}

/* Final hard cleanup requested: no white border accents, cohesive graphite UI */
body:not(.light-mode) {
    --ui-panel-1: #1f2329;
    --ui-panel-2: #252a33;
    --ui-border: #313844;
    --ui-hover: #2b313b;
}

body:not(.light-mode) :where(.settings-card,
    .settings-tab-btn,
    .settings-form input,
    .settings-save-btn,
    .theme-card,
    .message-preview,
    .ai-settings-panel,
    .ai-settings-row-btn,
    .ai-personality-option,
    .ai-voice-modal-card,
    .language-switcher,
    .language-option-btn,
    .welcome-tool-btn,
    .header-search-wrapper,
    #chatSearchInput,
    .current-mode-btn,
    .mode-dropdown-menu,
    .mode-option,
    .chat-sidebar-toggle-btn,
    #chatView > .chat-sidebar-toggle-btn,
    .chat-secondary-sidebar .search-input) {
    border-color: var(--ui-border) !important;
    box-shadow: none !important;
}

body:not(.light-mode) :where(.settings-card,
    .ai-settings-panel,
    .ai-voice-modal-card,
    .mode-dropdown-menu,
    .header-search-wrapper:not(.collapsed),
    .welcome-tool-btn,
    .chat-sidebar-toggle-btn,
    #chatView > .chat-sidebar-toggle-btn) {
    background: var(--ui-panel-1) !important;
}

body:not(.light-mode) :where(.settings-tab-btn.active,
    .theme-card.active,
    .ai-personality-option.active,
    .mode-option.selected,
    .language-option-btn.active) {
    background: var(--ui-panel-2) !important;
    border-color: var(--ui-border) !important;
}

body:not(.light-mode) :where(.settings-tab-btn:hover,
    .welcome-tool-btn:hover,
    .ai-settings-row-btn:hover,
    .current-mode-btn:hover,
    .mode-option:hover,
    .language-option-btn:hover,
    .chat-sidebar-toggle-btn:hover,
    #chatView > .chat-sidebar-toggle-btn:hover,
    .header-search-wrapper.collapsed:hover) {
    background: var(--ui-hover) !important;
    border-color: var(--ui-border) !important;
}

/* STT hard lock: keep input geometry and button anchors identical while recording */
.chat-input-area,
.side-chat-input-area {
    border-radius: 28px !important;
}

.chat-input-area .attach-btn,
.chat-input-area .voice-btn,
.chat-input-area .send-btn,
.side-chat-input-area .side-attach-btn,
.side-chat-input-area .side-voice-btn,
.side-chat-input-area .side-send-btn {
    flex: 0 0 auto !important;
    align-self: center !important;
}

.chat-input-area .attach-btn {
    width: 38px !important;
    min-width: 38px !important;
    margin-left: -2px !important;
    margin-right: 0 !important;
}

.chat-input-area .send-btn {
    width: 40px !important;
    min-width: 40px !important;
    margin-right: -2px !important;
    margin-left: 0 !important;
}

.side-chat-input-area .side-attach-btn {
    width: 34px !important;
    min-width: 34px !important;
    margin-left: -2px !important;
    margin-right: 0 !important;
}

.side-chat-input-area .side-send-btn {
    width: 34px !important;
    min-width: 34px !important;
    margin-right: -2px !important;
    margin-left: 0 !important;
}

.chat-input-area #chatInput,
.side-chat-input-area #sideChatInput {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.chat-input-area.is-listening,
.side-chat-input-area.is-listening {
    min-height: inherit !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 28px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.chat-input-area.is-listening #chatInput,
.side-chat-input-area.is-listening #sideChatInput {
    min-height: inherit !important;
    height: auto !important;
    max-height: none !important;
    padding-right: 10px !important;
    overflow-y: hidden !important;
}

body:not(.light-mode) .settings-tab-btn.active {
    color: var(--text-primary) !important;
}

body:not(.light-mode) .ai-settings-row+.ai-settings-row {
    border-top: 1px solid var(--ui-border) !important;
}

body:not(.light-mode) .color-dot.active {
    border-color: var(--ui-border) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.34) !important;
}

/* User-requested hard rule: ZERO borders across UI controls/cards */
body :where(button,
    input,
    textarea,
    select,
    .tool-btn,
    .sidebar-btn,
    .new-chat-btn,
    .search-input,
    .history-item,
    .chat-selection-item,
    .project-chat-card,
    .plan-card,
    .settings-card,
    .settings-tab-btn,
    .theme-card,
    .message-preview,
    .subscription-usage,
    .subscription-usage-item,
    .modal,
    .ai-voice-modal-card,
    .current-mode-btn,
    .mode-option,
    .mode-dropdown-menu,
    .ai-personality-option,
    .ai-settings-panel,
    .ai-settings-row-btn,
    .ai-voice-apply-btn,
    .ai-voice-next-btn,
    .header-search-wrapper,
    .chat-input-area,
    .side-chat-input-area,
    .language-switcher,
    .language-option-btn,
    .chat-sidebar-toggle-btn,
    #chatView > .chat-sidebar-toggle-btn,
    .folder-menu,
    .folder-visual,
    .folder-preview-tile) {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove internal separator lines that still look like borders */
.ai-settings-row+.ai-settings-row,
.settings-sidebar,
.settings-sidebar::before,
.settings-sidebar::after,
.chat-secondary-sidebar,
.sidebar,
.sidebar-header,
.sidebar-footer,
.input-container,
.message-actions,
.file-list-section,
.folder-visual::before {
    border: none !important;
    box-shadow: none !important;
}

/* Keep selected subscription plan outlined with user accent color */
.plan-card.plan-current {
    border: 1px solid var(--accent-color) !important;
}

/* Exception: selected controls keep an accent border (user-selected color) */
/* Note: .settings-tab-btn.active is excluded here — pill handles the active visual */
body :where(.theme-card.active,
    .language-option-btn.active,
    .mode-option.selected,
    .current-mode-btn,
    .ai-personality-option.active,
    .plan-card.plan-current) {
    border: 1px solid var(--accent-color) !important;
}

/* settings-tab-btn inside the pill strip must never show its own border */
.settings-tabs-pills .settings-tab-btn,
.settings-tabs-pills .settings-tab-btn.active {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.plan-card.plan-current {
    border: 1px solid var(--accent-color) !important;
}

/* Keep selected mode trigger clear in chat header */
.chat-header .current-mode-btn {
    border: none !important;
}

/* Final UX overrides: selected subscription/theme need clearly visible accent border */
#settingsView .plan-card.plan-current {
    border: 2.5px solid var(--accent-color) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 42%, transparent) !important;
}

#settingsView .theme-card.active {
    border: 2.5px solid var(--accent-color) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 38%, transparent) !important;
}

/* Settings tab pill: no individual borders — the pill background handles active state */
#settingsView .settings-tab-btn.active,
#settingsView .settings-tabs-pills .settings-tab-btn.active {
    border: none !important;
    box-shadow: none !important;
}

/* No section-switch animation in Settings tabs */
#settingsView .settings-tab-content,
#settingsView .settings-tab-content.active {
    animation: none !important;
    transition: none !important;
}

/* Hard stop for any residual click animations/transitions inside Settings UI */
#settingsView :where(.settings-tab-btn,
    .settings-card,
    .settings-save-btn,
    .theme-card,
    .color-dot,
    .language-current-btn,
    .language-option-btn,
    .notification-size-btn,
    .notification-color-dot,
    .notification-sound-current-btn,
    .notification-sound-option,
    .ai-settings-row-btn,
    .ai-personality-option,
    .ai-voice-apply-btn,
    .ai-voice-next-btn,
    button,
    input,
    select,
    textarea) {
    animation: none !important;
    transition: none !important;
}

/* Settings cards visual separation */
#settingsView .settings-card {
    background: color-mix(in srgb, #171b22 86%, #232a35 14%) !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px rgba(127, 131, 139, 0.24) !important;
}

#settingsView .settings-card+.settings-card {
    margin-top: 18px !important;
}

#settingsView .settings-card:nth-of-type(even) {
    background: color-mix(in srgb, #1d222b 85%, #2b3340 15%) !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(138, 144, 156, 0.22) !important;
}

body.light-mode #settingsView .settings-card {
    background: color-mix(in srgb, #ffffff 88%, #e6ebf3 12%) !important;
    box-shadow:
        0 8px 18px rgba(20, 28, 42, 0.08),
        inset 0 0 0 1px rgba(112, 124, 145, 0.24) !important;
}

body.light-mode #settingsView .settings-card:nth-of-type(even) {
    background: color-mix(in srgb, #f8fbff 86%, #e1e8f3 14%) !important;
    box-shadow:
        0 8px 18px rgba(20, 28, 42, 0.07),
        inset 0 0 0 1px rgba(112, 124, 145, 0.2) !important;
}

/* Uniform settings cards: Profile Information must match all other cards */
#settingsView .settings-card,
#settingsView .settings-card:nth-of-type(even) {
    background: color-mix(in srgb, #171b22 86%, #232a35 14%) !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px rgba(127, 131, 139, 0.24) !important;
}

body.light-mode #settingsView .settings-card,
body.light-mode #settingsView .settings-card:nth-of-type(even) {
    background: color-mix(in srgb, #ffffff 88%, #e6ebf3 12%) !important;
    box-shadow:
        0 8px 18px rgba(20, 28, 42, 0.08),
        inset 0 0 0 1px rgba(112, 124, 145, 0.24) !important;
}

/* Remove any residual outline/border from chat sidebar show-hide buttons */
#chatView>.chat-sidebar-toggle-btn,
#chatView>.chat-sidebar-toggle-btn:hover,
#chatView>.chat-sidebar-toggle-btn:focus,
#chatView>.chat-sidebar-toggle-btn:focus-visible,
#chatView>.chat-sidebar-toggle-btn:active,
#chatHistorySection .chat-sidebar-inline-btn,
#chatHistorySection .chat-sidebar-inline-btn:hover,
#chatHistorySection .chat-sidebar-inline-btn:focus,
#chatHistorySection .chat-sidebar-inline-btn:focus-visible,
#chatHistorySection .chat-sidebar-inline-btn:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Clarification UI cleanup: no white outlines + better side input button alignment */
#openSideChatBtn,
#openSideChatBtn:hover,
#openSideChatBtn:focus,
#openSideChatBtn:focus-visible,
#openSideChatBtn:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.side-chat-input-area,
.side-chat-input-area:hover,
.side-chat-input-area:focus-within {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Move side attach slightly left and side send slightly right for parallel edge alignment */
.side-chat-input-area {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.side-chat-input-area .side-attach-btn {
    margin-left: -5px !important;
    margin-right: 0 !important;
}

.side-chat-input-area .side-send-btn {
    margin-right: -5px !important;
    margin-left: 0 !important;
}

/* FINAL STT LOCK (must stay last): no input morph + no button drift during recording */
.chat-input-area.is-listening,
.side-chat-input-area.is-listening {
    min-height: inherit !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 28px !important;
}

.chat-input-area.is-listening #chatInput,
.side-chat-input-area.is-listening #sideChatInput {
    min-height: inherit !important;
    height: auto !important;
    max-height: none !important;
    padding-right: 10px !important;
    overflow-y: hidden !important;
}

.chat-input-area .attach-btn,
.chat-input-area .voice-btn,
.chat-input-area .send-btn,
.side-chat-input-area .side-attach-btn,
.side-chat-input-area .side-voice-btn,
.side-chat-input-area .side-send-btn {
    flex: 0 0 auto !important;
    align-self: center !important;
    transform: none !important;
}

.chat-input-area .attach-btn {
    margin-left: -2px !important;
}

.chat-input-area .send-btn {
    margin-right: -2px !important;
}

.side-chat-input-area .side-attach-btn {
    margin-left: -2px !important;
}

.side-chat-input-area .side-send-btn {
    margin-right: -2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CANONICAL LIGHT MODE — einzige Quelle aller Farb-Variablen im Hell-Modus
   ═══════════════════════════════════════════════════════════════════════ */
body.light-mode {
    /* Hintergründe */
    --bg-dark:    #f6f6f7 !important;
    --bg-sidebar: #eeeeef !important;
    --bg-hover:   #dde3ec !important;

    /* Texte */
    --text-primary:   #161a22 !important;
    --text-secondary: #4e5562 !important;

    /* Rahmen & Inputs */
    --border-color: #d5d7dc !important;
    --input-bg:     #e3e7ee !important;

    /* Modals */
    --modal-bg: #edf1f7 !important;

    /* Akzentfarbe (Standard Dunkelgrau) */
    --accent-color: #2f3239 !important;
    --accent-text:  #ffffff !important;

    /* Mode-Slider */
    --mode-slider-bg:   #2f3239 !important;
    --mode-slider-text: #f7f7f8 !important;

    /* Code-Blöcke */
    --code-bg:          #ffffff !important;
    --code-header-bg:   #e1e1db !important;
    --code-text:        #24292e !important;
    --code-header-text: #6a737d !important;
}

body.light-mode :where(.tool-title,
    .tool-subtitle,
    .settings-card-title,
    .settings-card-subtitle,
    .settings-tab-btn,
    .language-current-btn,
    .language-option-btn,
    .notification-label,
    .notification-hint,
    .mode-option-title,
    .mode-option-desc,
    .mode-label,
    .mode-title,
    .history-item .history-title,
    .history-item .history-subtitle,
    .search-input,
    #chatSearchInput,
    #chatInput,
    #sideChatInput,
    .header-search-input,
    .current-mode-btn,
    .new-chat-btn,
    .plan-title,
    .plan-price,
    .plan-feature) {
    color: #161a22 !important;
}

body.light-mode :where(.search-input::placeholder,
    #chatSearchInput::placeholder,
    #chatInput::placeholder,
    #sideChatInput::placeholder,
    .header-search-input::placeholder) {
    color: #677080 !important;
    opacity: 1 !important;
}

body.light-mode :where(.search-input,
    #chatSearchInput,
    #chatInput,
    #sideChatInput,
    .header-search-input,
    .chat-input-area,
    .side-chat-input-area,
    .header-search-wrapper,
    .theme-card,
    .settings-tab-btn,
    .language-current-btn,
    .language-option-btn,
    .notification-size-btn,
    .notification-sound-current-btn,
    .notification-sound-option,
    .current-mode-btn,
    .mode-dropdown-menu,
    .mode-option,
    .history-item,
    .new-chat-btn) {
    background: #e7ebf2 !important;
}

body.light-mode :where(.settings-tab-btn.active,
    .language-option-btn.active,
    .theme-card.active,
    .mode-option.selected,
    .notification-size-btn.active,
    .notification-sound-option.active,
    .plan-card.plan-current,
    .current-mode-btn) {
    background: color-mix(in srgb, var(--accent-color) 24%, #ffffff 76%) !important;
    color: #121722 !important;
}

body.light-mode :where(.settings-tab-btn.active .settings-tab-icon,
    .mode-option.selected .mode-option-check,
    .current-mode-btn .mode-label,
    .current-mode-btn .chevron-icon) {
    color: #121722 !important;
    stroke: #121722 !important;
}

body.light-mode #settingsView .settings-card,
body.light-mode #settingsView .settings-card:nth-of-type(even) {
    background: #eef2f8 !important;
    box-shadow: 0 10px 22px rgba(28, 37, 54, 0.08) !important;
}

/* Light mode hard fix: remove dark hardcoded panels/buttons */
body.light-mode .subscription-usage {
    background: #f2f5fb !important;
}

body.light-mode .subscription-usage-item {
    background: #e7ecf5 !important;
}

body.light-mode .subscription-plans .plan-card {
    background: #f7f9fd !important;
    color: #171d28 !important;
    box-shadow: 0 8px 18px rgba(24, 34, 50, 0.06) !important;
}

body.light-mode .subscription-plans .plan-tagline,
body.light-mode .subscription-plans .plan-price span,
body.light-mode .subscription-plans .plan-features li.muted {
    color: #596376 !important;
}

body.light-mode .subscription-plans .plan-features {
    color: #212937 !important;
}

/* Appearance tab clarity: make controls clearly distinct from card background */
#settingsView #settings-tab-appearance .theme-card {
    border: none !important;
    background: color-mix(in srgb, #0f141d 82%, #242d3b 18%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(162, 172, 188, 0.18),
        0 8px 18px rgba(0, 0, 0, 0.26) !important;
}

#settingsView #settings-tab-appearance .theme-card:hover {
    background: color-mix(in srgb, #141b27 80%, #2d3748 20%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(178, 189, 206, 0.24),
        0 10px 22px rgba(0, 0, 0, 0.3) !important;
}

#settingsView #settings-tab-appearance .theme-card.active {
    background: color-mix(in srgb, var(--accent-color) 22%, #121722 78%) !important;
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 72%, #ffffff 28%),
        0 10px 24px rgba(0, 0, 0, 0.32) !important;
}

#settingsView #settings-tab-appearance .color-dot {
    box-shadow:
        0 0 0 2px rgba(16, 20, 28, 0.92),
        0 0 0 4px rgba(174, 183, 197, 0.18) !important;
}

#settingsView #settings-tab-appearance .color-dot.active {
    box-shadow:
        0 0 0 2px rgba(16, 20, 28, 0.96),
        0 0 0 4px color-mix(in srgb, var(--accent-color) 68%, #ffffff 32%),
        0 6px 16px color-mix(in srgb, var(--accent-color) 32%, transparent) !important;
}

body.light-mode #settingsView #settings-tab-appearance .theme-card {
    border: none !important;
    background: color-mix(in srgb, #dfe6f1 70%, #cfd8e6 30%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(102, 118, 142, 0.2),
        0 6px 14px rgba(23, 34, 52, 0.1) !important;
}

body.light-mode #settingsView #settings-tab-appearance .theme-card:hover {
    background: color-mix(in srgb, #d6deeb 74%, #c6d0df 26%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(86, 103, 130, 0.24),
        0 8px 16px rgba(23, 34, 52, 0.12) !important;
}

body.light-mode #settingsView #settings-tab-appearance .theme-card.active {
    background: color-mix(in srgb, var(--accent-color) 24%, #e9eef7 76%) !important;
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 72%, #ffffff 28%),
        0 8px 18px rgba(23, 34, 52, 0.14) !important;
}

body.light-mode #settingsView #settings-tab-appearance .color-dot {
    box-shadow:
        0 0 0 2px #eef2f8,
        0 0 0 4px rgba(94, 109, 131, 0.22) !important;
}

/* Learning switch + Learning view */
.tools-switch-wrap {
    position: relative;
    margin-bottom: 10px;
}

.tools-switch-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
}

.tools-switch-btn.active {
    background: color-mix(in srgb, var(--accent-color) 18%, var(--bg-hover) 82%);
}

.tools-switch-menu {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 62px;
    display: none;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-sidebar) 92%, #1f2530 8%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
    z-index: 35;
}

.tools-switch-menu.open {
    display: grid;
}

.tools-switch-menu.from-collapsed {
    left: 56px;
    right: auto;
    width: 230px;
    bottom: 12px;
}

.tools-switch-menu-option {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    border-radius: 10px;
    padding: 8px 9px;
    display: grid;
    gap: 1px;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.tools-switch-menu-option:hover {
    background: var(--bg-hover);
}

.tools-switch-menu-option.active {
    background: color-mix(in srgb, var(--accent-color) 18%, var(--bg-hover) 82%);
}

.tools-switch-menu-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.tools-switch-menu-subtitle {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.25;
}

.tools-switch-menu-tip {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-secondary);
    padding: 4px 4px 2px;
}

body.light-mode .tools-switch-menu {
    background: #e9edf5;
    box-shadow: 0 8px 18px rgba(25, 35, 53, 0.16);
}

.tools-switch-transition {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 2500;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, #03050a 78%, transparent 22%);
    backdrop-filter: blur(5px);
    transition: opacity 0.18s ease;
}

.tools-switch-transition.active {
    opacity: 1;
    pointer-events: auto;
}

.tools-switch-card {
    width: min(420px, calc(100vw - 44px));
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    gap: 10px;
    text-align: center;
    justify-items: center;
}

.tools-switch-glyph {
    width: 30px;
    height: 30px;
    color: color-mix(in srgb, var(--accent-color) 76%, #dbe3f1 24%);
}

.tools-switch-glyph svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

.tools-switch-title {
    font-size: 15px;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.tools-switch-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.tools-switch-progress {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 22%, transparent 78%);
    overflow: hidden;
}

.tools-switch-progress-bar {
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    border-radius: inherit;
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--accent-color) 90%, #e3e8f6 10%),
            color-mix(in srgb, var(--accent-color) 62%, #7aa4ff 38%));
}

body.light-mode .tools-switch-transition {
    background: color-mix(in srgb, #e8ecf3 72%, transparent 28%);
}

body.light-mode .tools-switch-card {
    background: transparent;
    box-shadow: none;
}

.first-access-tour {
    position: fixed;
    inset: 0;
    z-index: 2550;
    display: none;
    background: transparent;
    pointer-events: auto;
}

.first-access-tour.active {
    display: block;
}

.first-access-tour-spotlight {
    position: fixed;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(6, 9, 14, 0.54);
    pointer-events: none;
}

.first-access-tour-bubble {
    position: fixed;
    width: min(360px, calc(100vw - 38px));
    border-radius: 16px;
    padding: 12px 14px;
    background: color-mix(in srgb, #131a25 88%, #202838 12%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
    display: grid;
    gap: 6px;
}


.first-access-tour-bubble::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: inherit;
    transform: rotate(45deg);
}

.first-access-tour-bubble.pos-right::after {
    left: -6px;
    top: calc(50% - 6px);
}

.first-access-tour-bubble.pos-left::after {
    right: -6px;
    top: calc(50% - 6px);
}

.first-access-tour-bubble.pos-down::after {
    top: -6px;
    left: calc(50% - 6px);
}

.first-access-tour-bubble.pos-up::after {
    bottom: -6px;
    left: calc(50% - 6px);
}

.first-access-tour-step {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent-color) 68%, var(--text-secondary) 32%);
}

.first-access-tour-text {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
}

.first-access-tour-hint {
    font-size: 12px;
    color: var(--text-secondary);
}

.first-access-tour-name-wrap {
    display: none;
    gap: 10px;
}

.first-access-tour-bubble.is-name-step .first-access-tour-step,
.first-access-tour-bubble.is-name-step .first-access-tour-text,
.first-access-tour-bubble.is-name-step .first-access-tour-hint {
    display: none;
}

.first-access-tour-bubble.is-name-step .first-access-tour-name-wrap {
    display: grid;
}

.first-access-tour-name-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.first-access-tour-name-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.first-access-tour-name-input {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--bg-main) 84%, #ffffff 16%);
    color: var(--text-primary);
    outline: none;
    font-size: 14px;
}

.first-access-tour-name-actions {
    display: flex;
    justify-content: flex-end;
}

.first-access-tour-name-save {
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: color-mix(in srgb, var(--accent-color) 86%, #111827 14%);
    cursor: pointer;
}

.first-access-tour-name-save:disabled {
    opacity: 0.65;
    cursor: default;
}

.first-access-tour-name-success {
    display: none;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    color: #c5f5d8;
    background: color-mix(in srgb, #1f8f4a 20%, #0f1f17 80%);
}

.first-access-tour-bubble.show-success .first-access-tour-name-success {
    display: block;
    animation: tourSuccessIn 180ms ease-out;
}

@keyframes tourSuccessIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

.first-access-tour-skip {
    position: fixed;
    left: 50%;
    bottom: 108px;
    transform: translateX(-50%);
    border: none;
    background: transparent;
    color: color-mix(in srgb, var(--text-secondary) 90%, #ffffff 10%);
    font-size: 12px;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.first-access-tour-skip:hover {
    color: var(--text-primary);
}

.tutorial-focus {
    position: relative;
    z-index: 2600 !important;
    filter: none !important;
    opacity: 1 !important;
}

body.light-mode .first-access-tour {
    background: transparent;
}

body.light-mode .first-access-tour-bubble {
    background: #f4f7fc;
    box-shadow: 0 10px 24px rgba(22, 34, 53, 0.16);
}

body.light-mode .first-access-tour-name-input {
    background: #e9eef7;
}

body.light-mode .first-access-tour-name-success {
    color: #1f7a44;
    background: #dbf4e4;
}

body.light-mode .first-access-tour-step {
    color: color-mix(in srgb, var(--accent-color) 76%, #4d5c74 24%);
}

body.light-mode .first-access-tour-spotlight {
    box-shadow: 0 0 0 9999px rgba(229, 236, 245, 0.58);
}

.tour-test-btn {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 900;
    border: none;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-sidebar) 88%, #232b38 12%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
    cursor: pointer;
}

.tour-test-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 20%, var(--bg-sidebar) 80%);
}

body.light-mode .tour-test-btn {
    background: #e7edf7;
    box-shadow: 0 6px 14px rgba(28, 38, 56, 0.12);
}

.sidebar .tools-section-learning {
    display: none !important;
}

body:not(.learning-mode) .sidebar .tools-section-core {
    display: flex !important;
}

body:not(.learning-mode) .sidebar .tools-section-learning {
    display: none !important;
}

body.learning-mode .sidebar .tools-section-core {
    display: none !important;
}

body.learning-mode .sidebar .tools-section-learning {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
}

/* Study sidebar buttons: keep exact compact sizing like main sidebar */
body.learning-mode .sidebar .tools-section-learning .tool-btn {
    padding: 12px 12px !important;
    border-radius: 10px !important;
    min-height: 58px !important;
}

body.learning-mode .sidebar .tools-section-learning .tool-text {
    min-width: 0 !important;
}

body.learning-mode .sidebar .tools-section-learning .tool-title,
body.learning-mode .sidebar .tools-section-learning .tool-subtitle {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.learning-only {
    display: none !important;
}

body.learning-mode .learning-only {
    display: inline-flex !important;
}

.sidebar-collapsed .tools-switch-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    justify-content: center;
    padding: 0;
}

.sidebar-collapsed .tools-switch-btn span {
    display: none;
}

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

.learning-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.learning-sidebar {
    background: color-mix(in srgb, var(--bg-sidebar) 88%, #222a35 12%);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.learning-sidebar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: none;
    margin: 2px 4px 8px;
}

.learning-nav-btn {
    border: none;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}

.learning-nav-btn.active {
    background: color-mix(in srgb, var(--accent-color) 18%, rgba(255, 255, 255, 0.06) 82%);
}

.learning-nav-title {
    font-size: 15px;
    font-weight: 650;
}

.learning-nav-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}

.learning-nav-btn.is-soon .learning-nav-subtitle {
    color: color-mix(in srgb, var(--accent-color) 52%, var(--text-secondary) 48%);
}

.learning-main {
    background: color-mix(in srgb, var(--bg-main) 95%, var(--bg-hover) 5%);
    border-radius: 18px;
    padding: 22px;
    overflow: auto;
}

.learning-subtitle {
    margin: 6px 0 18px;
    color: var(--text-secondary);
}

.learning-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.learning-card {
    border: none;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    border-radius: 14px;
    padding: 16px 15px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.learning-card-title {
    font-size: 16px;
    font-weight: 700;
}

.learning-card-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.learning-card.is-soon .learning-card-subtitle {
    color: color-mix(in srgb, var(--accent-color) 52%, var(--text-secondary) 48%);
}

body.light-mode .learning-sidebar {
    background: #eef2f8;
}

body.light-mode .learning-main {
    background: #f5f7fb;
}

body.light-mode .learning-nav-btn,
body.light-mode .learning-card {
    background: #e8edf5;
    color: #1a2230;
}

body.light-mode .learning-nav-subtitle,
body.light-mode .learning-card-subtitle {
    color: #5d687c;
}

@media (max-width: 900px) {
    .learning-shell {
        grid-template-columns: 1fr;
    }

    .learning-cards {
        grid-template-columns: 1fr;
    }
}

body.light-mode .subscription-plans .plan-icon {
    background: #e5eaf3 !important;
    color: #2a3241 !important;
}

body.light-mode .subscription-plans .plan-btn:not(.plan-btn-primary):not(.plan-btn-current) {
    background: #e6ebf4 !important;
    color: #1d2532 !important;
}

body.light-mode .ai-settings-panel {
    background: #f2f5fb !important;
}

body.light-mode .ai-settings-row+.ai-settings-row {
    border-top: 1px solid rgba(82, 95, 116, 0.14) !important;
}

body.light-mode .ai-settings-row-btn {
    background: #e6ebf4 !important;
    color: #1d2532 !important;
}

body.light-mode .ai-settings-row-btn:hover {
    background: #dde5f1 !important;
}

body.light-mode #chatView>.chat-sidebar-toggle-btn {
    background: #e6ebf4 !important;
    color: #445066 !important;
}

body.light-mode .chat-header .mode-dropdown-menu {
    background: #f3f7fd !important;
}

body.light-mode .mindmap-upload-area,
body.light-mode .mindmap-text-area textarea {
    background: #e8edf6 !important;
}

body.light-mode .generate-mindmap-btn {
    background: #e3e9f4 !important;
    color: #1a2230 !important;
}

/* Collapsed profile menu: always above app content and never clipped */
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed .sidebar-footer,
body.sidebar-collapsed .collapsed-footer-actions {
    overflow: visible !important;
}

body.sidebar-collapsed #collapsedProfileBtn {
    position: relative;
    z-index: 12020;
}

body.sidebar-collapsed #collapsedAccountMenu.account-menu.collapsed {
    position: fixed !important;
    left: 70px !important;
    bottom: 14px !important;
    width: 188px !important;
    z-index: 12050 !important;
    display: none;
}

body.sidebar-collapsed #collapsedAccountMenu.account-menu.collapsed.open {
    display: flex !important;
}

/* ─── Clickable Option Buttons ─── */
.option-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.option-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
    line-height: 1.4;
}

.option-btn:hover {
    background: var(--bg-hover);
}

.option-btn.selected {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-text);
}

.light-mode .option-btn {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.light-mode .option-btn:hover {
    background: var(--bg-hover);
}

.light-mode .option-btn.selected {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-text);
}

/* ═══════════════════════════════════════════════
   SETTINGS: pill-shape everything — final pass
   ═══════════════════════════════════════════════ */

/* Tab strip container */
.settings-tabs-pills {
    border-radius: 100px !important;
}

/* Individual tab buttons + the animated pill highlight */
.settings-tab-btn,
.settings-tab-btn.active {
    border-radius: 100px !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.settings-tab-pill {
    border-radius: 100px !important;
}

/* Theme mode cards */
.theme-card {
    border-radius: 20px !important;
}

/* Language option buttons */
.language-option-btn,
.language-current-btn {
    border-radius: 100px !important;
}

/* Settings form inputs */
.settings-form input {
    border-radius: 100px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Notification size chips */
.notification-size-btn {
    border-radius: 100px !important;
}

/* Notification sound dropdown */
.notification-sound-current-btn,
.notification-sound-option {
    border-radius: 100px !important;
}

/* AI personality options */
.ai-personality-option {
    border-radius: 20px !important;
}

/* AI settings row buttons */
.ai-settings-row-btn {
    border-radius: 100px !important;
}

/* Save button (already 999px but lock it) */
.settings-save-btn {
    border-radius: 100px !important;
}
}