/* === user-bubble-no-purple === */
        .user-message-bubble-color { background: var(--user-bubble-bg, var(--accent)) !important; color: #fff !important; }
        [data-theme="light"] .user-message-bubble-color { color: #0d0d0d !important; }
        .message.user .message-bubble {
            background: var(--user-bubble-bg, var(--accent)) !important;
            background-image: none !important;
            box-shadow: none !important;
            border: none !important;
            outline: none !important;
            filter: none !important;
            text-shadow: none !important;
            /* Enforce requested sizing and roundness */
            border-radius: 18px !important; /* rounded-[18px] */
            padding: 6px 16px !important; /* px-4 py-1.5 */
            max-width: var(--user-chat-width, 70%) !important; /* max-w-[var(--user-chat-width,70%)] */
            position: relative !important; /* relative */
        }
        /* data-[multiline]:py-3 */
        .message.user .message-bubble[data-multiline] { padding-top: 12px !important; padding-bottom: 12px !important; }
        .message.user::before,
        .message.user::after,
        .message.user .message-bubble::before,
        .message.user .message-bubble::after {
            content: none !important;
        }
        [data-theme="light"] .message.user .message-bubble {
            background: var(--user-bubble-bg, var(--accent)) !important;
            color: #0d0d0d !important;
        }
        [data-theme="light"] .message.user .message-text { color: #0d0d0d !important; }
        [data-theme="light"] .message.user ::selection { background-color: rgba(0,0,0,0.15) !important; color: #0d0d0d !important; }
        [data-theme="light"] .message.user ::-moz-selection { background-color: rgba(0,0,0,0.15) !important; color: #0d0d0d !important; }

/* === message-and-modal-tweaks === */
        /* Assistant message bubble should be #212121 in dark theme, no border */
        .message.assistant .message-bubble {
            background: #212121 !important;
            border: none !important;
            box-shadow: none !important;
        }
        /* In light theme, assistant bubble follows surface color */
        [data-theme="light"] .message.assistant .message-bubble {
            background: var(--surface) !important;
        }

        /* Remove red focus on message input */
        #messageInput:focus,
        textarea#messageInput:focus,
        .input-wrapper:focus-within #messageInput,
        .input-wrapper:focus-within textarea#messageInput {
            outline: none !important;
            box-shadow: none !important;
            border-color: var(--border) !important;
        }

        /* Ensure press effects for confirm/custom modal buttons */
        .modal-overlay .btn:active,
        .custom-modal .btn:active {
            transform: translateY(1px) scale(0.98);
        }

/* === modal-layering-fix === */
        .modal-overlay,
        .modal,
        .custom-modal {
            z-index: 20000 !important;
        }

/* === layout-color-overrides === */
        .main-content { background: #212121 !important; }
        .messages-container { background: #212121 !important; }
        .messages-area { background: #212121 !important; }
        [data-theme="light"] .main-content { background: #ffffff !important; }
        [data-theme="light"] .messages-container { background: #ffffff !important; }
        [data-theme="light"] .messages-area { background: #ffffff !important; }
        .header { background: rgba(33,33,33,0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
        [data-theme="light"] .header { background: rgba(255,255,255,0.9) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
        .sidebar.open { background: #171717 !important; }
        .sidebar:not(.collapsed) { background: #171717 !important; }
        [data-theme="light"] .sidebar.open { background: #f9f9f9 !important; }
        [data-theme="light"] .sidebar:not(.collapsed) { background: #f9f9f9 !important; }
        .input-wrapper,
        .input-wrapper:focus-within,
        .input-wrapper.centered,
        .input-wrapper.centered:focus-within,
        .input-wrapper:not(.centered),
        .input-wrapper:not(.centered):focus-within { background: #2f2f2f !important; }
        [data-theme="light"] .input-wrapper,
        [data-theme="light"] .input-wrapper:focus-within,
        [data-theme="light"] .input-wrapper.centered,
        [data-theme="light"] .input-wrapper.centered:focus-within,
        [data-theme="light"] .input-wrapper:not(.centered),
        [data-theme="light"] .input-wrapper:not(.centered):focus-within { background: #f4f4f4 !important; }
        .message.assistant .message-bubble { background: #212121 !important; }
        [data-theme="light"] .message.assistant .message-bubble { background: #ffffff !important; }
        .message.assistant .message-bubble { border: none !important; }
        .send-btn svg, .send-btn path { stroke-width: 2.5 !important; stroke-linecap: round; stroke-linejoin: round; }

/* === assistant-font-sizing === */
        .message.assistant .message-text,
        body.font-small .message.assistant .message-text,
        body.font-medium .message.assistant .message-text,
        body.font-large .message.assistant .message-text { font-size: 17px !important; }

/* === chat-width-and-list-marker-overrides === */
        /* Make assistant bubble appear wider by widening the container */
        .messages-container { max-width: 840px !important; }
        /* Show bullets instead of numbers for ordered lists inside assistant messages */
        .message-text ol { list-style: decimal !important; padding-left: 24px; margin: 0 0 16px 0; }
        .message-text ol li { margin: 4px 0; color: var(--text-primary); }

/* === tools-menu-overrides === */
        /* Remove hover animations and tighten spacing in toolsMenu */

        /* Container padding */
        #toolsMenu { padding: 4px !important; }

        .tools-menu .tool-item { padding: 8px 10px 8px 5px !important; gap: 8px !important; border-radius: 18px !important; }


/* === sidebar-hover-disable-animations === */
        /* Disable hover transitions/animations within the sidebar */
        .sidebar *:hover,
        .sidebar *:focus-visible:hover,
        .sidebar *:hover::before,
        .sidebar *:hover::after { }

        /* Neutralize common sidebar item transitions to avoid subtle hover animations */
        .sidebar .chat-item::before,
        .sidebar .chat-menu-trigger,
        .sidebar .action-btn,
        .sidebar .sidebar-footer,
        .sidebar .sidebar-header *,
        .sidebar .tools-menu .tool-item,
        .sidebar .memory-action-btn { }

/* === page-to-page-transitions === */
        /* Page-to-Page Transition Animations */
        
        
        
        
        
        
        
        
        
        
        .page-to-page-transition:not(.active-view-transition) {
            @view-transition { navigation: auto; }
        }
        
        .page-to-page-transition {
            view-transition-name: none;
        }
        
        .page-to-page-transition body {
            view-transition-name: page;
        }
        
        @media (prefers-reduced-motion: reduce) {
            .page-to-page-transition::view-transition {
                display: none;
            }
        }
        
        .page-to-page-transition::view-transition-old(header),
        .page-to-page-transition::view-transition-old(sidebar) {
            display: none;
        }
        
        .page-to-page-transition::view-transition-new(header),
        .page-to-page-transition::view-transition-new(sidebar) {
        }
        
        .page-to-page-transition::view-transition-image-pair(active-image),
        .page-to-page-transition::view-transition-new(active-image),
        .page-to-page-transition::view-transition-old(active-image),
        .page-to-page-transition::view-transition-image-pair(page-title),
        .page-to-page-transition::view-transition-new(page-title),
        .page-to-page-transition::view-transition-old(page-title) {
            height: 100%;
        }
        
        .page-to-page-transition::view-transition-group(*),
        .page-to-page-transition::view-transition-new(*),
        .page-to-page-transition::view-transition-old(*) {
        }
        
        .page-to-page-transition.to-landing-page::view-transition-new(page) {
        }
        
        /* Composer slide transition */
        .composer-slide {
            --vt-composer: composer;
        }
        
        .composer-slide::view-transition-group(composer),
        .composer-slide::view-transition-old(composer) {
        }
        
        /* Grid item transition */
        .grid-item {
            --vt-grid-item: grid-item;
        }
        
        .grid-item::view-transition-new(grid-item),
        .grid-item::view-transition-old(grid-item) {
            height: 100%;
            object-fit: fill;
            transform-origin: center;
            width: 100%;
        }
        
        /* Fullscreen popover transitions */
        .fullscreen-popover-thread-opening-transition,
        .fullscreen-popover-thread-closing-transition {
            --vt-composer: composer;
        }
        
        .fullscreen-popover-thread-opening-transition::view-transition-group(composer),
        .fullscreen-popover-thread-closing-transition::view-transition-group(composer),
        .fullscreen-popover-thread-opening-transition::view-transition-old(composer),
        .fullscreen-popover-thread-closing-transition::view-transition-old(composer) {
            z-index: 999;
        }
        
        .fullscreen-popover-thread-opening-transition::view-transition-new(fullscreen-popover-thread) {
            transform-origin: bottom center;
            z-index: 0;
        }
        
        .fullscreen-popover-thread-closing-transition::view-transition-old(fullscreen-popover-thread) {
            transform-origin: bottom center;
            z-index: 0;
        }

/* === sidebar-toggle-hover-fix === */
        /* Match New Chat button hover appearance by not overriding bg/color; keep animations off */
        #sidebarToggleBtn:hover,
        .sidebar-header #sidebarToggleBtn:hover,
        #sidebarToggleBtn:focus-visible:hover {
            box-shadow: none !important;
            transform: none !important;
        }

/* === chat-list-gap-and-chip-icon-fixes === */
        /* Clean solution: all chat items have zero margin and no gaps */
        #chatHistory, .chat-history { 
            row-gap: 0;
            gap: 0;
        }
        
        #chatHistory .chat-item,
        .chat-history .chat-item,
        #chatHistory .chat-item.hover-box,
        .chat-history .chat-item.hover-box,
        #chatHistory .chat-item.hover-box.active,
        .chat-history .chat-item.hover-box.active {
            margin: 0;
            border: none;
            outline: none;
        }

        /* Disable all pseudo elements that could add visual gaps */
        .chat-item.hover-box::before,
        .chat-item.hover-box::after,
        .chat-item.hover-box.active::before,
        .chat-item.hover-box.active::after {
            display: none;
        }

        /* Show real colors for attach/file chip icons */
        .attach-chip .ui-icon-white,
        .attach-chip img,
        .file-chip .ui-icon-white,
        .file-chip img,
        .file-chip .tile-icon img { 
            filter: none;
            -webkit-filter: none;
            mix-blend-mode: normal;
        }

        /* Remove any separator bars within chat list completely */
        #chatHistory hr,
        .chat-history hr,
        #chatHistory .divider,
        .chat-history .divider,
        #chatHistory .menu-separator,
        .chat-history .menu-separator,
        #chatHistory .markdown-separator,
        .chat-history .markdown-separator,
        #chatHistory .drop-indicator,
        .chat-history .drop-indicator,
        #chatHistory .drop-indicator.visible,
        .chat-history .drop-indicator.visible {
            display: none;
            height: 0;
            margin: 0;
            padding: 0;
            opacity: 0;
            border: 0;
            background: transparent;
        }

/* === search-chats-modal-light-theme === */
        [data-theme="light"] #searchChatsModal > div {
            background: #ffffff !important;
            border-color: rgba(0,0,0,0.1) !important;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
        }
        [data-theme="light"] #searchChatsModal > div > div:first-child {
            border-bottom-color: rgba(0,0,0,0.06) !important;
        }
        [data-theme="light"] #searchChatsModal #searchChatsInput {
            color: #0d0d0d !important;
        }
        [data-theme="light"] #searchChatsModal #searchChatsInput::placeholder {
            color: rgba(0,0,0,0.35) !important;
        }
        [data-theme="light"] #searchChatsModal kbd {
            background: rgba(0,0,0,0.05) !important;
            color: rgba(0,0,0,0.4) !important;
            border-color: rgba(0,0,0,0.1) !important;
        }
        [data-theme="light"] #searchChatsModal svg {
            color: rgba(0,0,0,0.4) !important;
        }
        [data-theme="light"] #searchChatsResults {
            scrollbar-color: rgba(0,0,0,0.15) transparent;
        }

/* === search-chats-modal-animation === */
        @keyframes searchModalSlideUp {
            from { opacity: 0; transform: translateY(24px) scale(0.98); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes searchModalSlideDown {
            from { opacity: 1; transform: translateY(0) scale(1); }
            to   { opacity: 0; transform: translateY(24px) scale(0.98); }
        }
        #searchChatsModal.show > div {
            animation: searchModalSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        #searchChatsModal.closing > div {
            animation: searchModalSlideDown 0.18s cubic-bezier(0.4, 0, 1, 1) both;
        }

/* === model-selector === */
        .model-selector-container { position: relative; }
        .model-selector-btn {
            display: flex; align-items: center; gap: 4px;
            background: transparent; border: none; color: #818181;
            font-size: 13px; font-weight: 500; cursor: pointer;
            padding: 4px 8px; border-radius: 8px;
            font-family: inherit; transition: color 0.15s;
        }
        .model-selector-btn:hover { color: #ececec; }
        .model-selector-menu {
            position: absolute; left: 0; bottom: calc(100% + 8px);
            width: 220px; background: #2f2f2f; border: 1px solid #3a3a3a;
            border-radius: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
            overflow: hidden; z-index: 10500; padding: 4px;
        }
        .model-option {
            width: 100%; background: transparent; border: none;
            color: #ececec; display: flex; flex-direction: column;
            align-items: flex-start; gap: 2px; padding: 10px 12px;
            border-radius: 12px; cursor: pointer; text-align: left;
            font-family: inherit;
        }
        .model-option:hover { background: rgba(255,255,255,0.06); }
        .model-option.selected { background: rgba(255,255,255,0.08); }
        .model-option-name { font-size: 14px; font-weight: 500; }
        .model-option-desc { font-size: 12px; color: #818181; }

        [data-theme="light"] .model-selector-btn { color: #8f8f8f; }
        [data-theme="light"] .model-selector-btn:hover { color: #0d0d0d; }
        [data-theme="light"] .model-selector-menu {
            background: #ffffff; border-color: rgba(0,0,0,0.1);
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        }
        [data-theme="light"] .model-option { color: #0d0d0d; }
        [data-theme="light"] .model-option:hover { background: rgba(0,0,0,0.04); }
        [data-theme="light"] .model-option.selected { background: rgba(0,0,0,0.06); }
        [data-theme="light"] .model-option-desc { color: #8f8f8f; }

        .model-pro-badge {
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 10px; font-weight: 600; line-height: 1;
            padding: 2px 6px; border-radius: 6px;
            background: #3e91ff; color: #fff;
            margin-left: 6px; vertical-align: middle;
        }
        [data-theme="light"] .model-pro-badge { background: #0072de; }

        .model-option.disabled { opacity: 0.4; cursor: not-allowed; }
        .model-option.disabled:hover { background: transparent; }
        .model-option-desc.pro-required { color: #ff6b6b !important; }
        [data-theme="light"] .model-option-desc.pro-required { color: #dc3545 !important; }

        .model-limit-counter {
            font-size: 11px; color: #818181; font-weight: 400;
            margin-left: 2px;
        }
        .model-limit-counter:empty { display: none; }
        [data-theme="light"] .model-limit-counter { color: #8f8f8f; }

/* === cosmos-memory-indicator === */
        .cosmos-memory-indicator {
            display: flex; align-items: center; gap: 6px;
            font-size: 12px; color: #818181; padding: 4px 0;
            animation: memoryPulse 1.5s ease-in-out infinite;
        }
        @keyframes memoryPulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
        [data-theme="light"] .cosmos-memory-indicator { color: #8f8f8f; }
        [data-theme="light"] .cosmos-memory-indicator img { filter: none !important; opacity: 0.5; }

/* === skills-page === */
        .skills-section-title {
            font-size: 15px; font-weight: 600; color: var(--text-primary, #ececec); margin: 0 0 4px;
        }
        .skills-section-subtitle {
            font-size: 13px; color: var(--text-secondary, #818181); margin: 0 0 14px;
        }
        .skills-grid {
            display: flex; flex-direction: column; gap: 8px;
        }
        .skill-card {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 12px 14px; border-radius: 12px;
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
            transition: background 0.15s;
        }
        .skill-card:hover { background: rgba(255,255,255,0.05); }
        .skill-card.disabled { opacity: 0.45; }
        .skill-card-body { flex: 1; min-width: 0; }
        .skill-card-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .skill-card-name { font-size: 14px; font-weight: 500; color: var(--text-primary, #ececec); }
        .skill-card-badge {
            font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 9999px;
            line-height: 1.5; white-space: nowrap;
        }
        .skill-card-badge.badge-synthenis { background: rgba(62,145,255,0.15); color: #3e91ff; }
        .skill-card-badge.badge-anthropic { background: rgba(255,255,255,0.06); color: #818181; }
        .skill-card-badge.badge-custom { background: rgba(255,255,255,0.04); color: #818181; }
        .skill-card-desc {
            font-size: 13px; color: var(--text-secondary, #818181); margin-top: 4px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
            line-height: 1.45; cursor: pointer;
        }
        .skill-card-desc.expanded { -webkit-line-clamp: unset; }
        .skill-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-top: 2px; }
        .skill-delete-btn {
            width: 28px; height: 28px; border-radius: 50%; border: none;
            background: transparent; color: #818181; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s, color 0.15s;
        }
        .skill-delete-btn:hover { background: rgba(255,80,80,0.12); color: #ff5050; }
        .skills-drop-zone {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 8px; padding: 24px 16px; border: 2px dashed rgba(255,255,255,0.1);
            border-radius: 14px; cursor: pointer; text-align: center;
            font-size: 13px; color: var(--text-secondary, #818181);
            transition: border-color 0.2s, background 0.2s;
        }
        .skills-drop-zone:hover, .skills-drop-zone.dragover {
            border-color: rgba(62,145,255,0.4); background: rgba(62,145,255,0.04);
        }
        .skills-empty-state {
            font-size: 13px; color: var(--text-secondary, #818181);
            text-align: center; padding: 16px 0;
        }

        [data-theme="light"] .skill-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
        [data-theme="light"] .skill-card:hover { background: rgba(0,0,0,0.04); }
        [data-theme="light"] .skill-card-badge.badge-synthenis { background: rgba(0,114,222,0.1); color: #0072de; }
        [data-theme="light"] .skill-card-badge.badge-anthropic { background: rgba(0,0,0,0.04); color: #8f8f8f; }
        [data-theme="light"] .skill-card-badge.badge-custom { background: rgba(0,0,0,0.03); color: #8f8f8f; }
        [data-theme="light"] .skill-delete-btn { color: #8f8f8f; }
        [data-theme="light"] .skill-delete-btn:hover { background: rgba(255,50,50,0.08); color: #dc2626; }
        [data-theme="light"] .skills-drop-zone { border-color: rgba(0,0,0,0.1); }
        [data-theme="light"] .skills-drop-zone:hover, [data-theme="light"] .skills-drop-zone.dragover {
            border-color: rgba(0,114,222,0.35); background: rgba(0,114,222,0.03);
        }
        [data-theme="light"] .skills-drop-zone img { filter: none !important; opacity: 0.4; }

        @media (max-width: 600px) {
            .skill-card { padding: 10px 12px; }
            .skill-card-actions .switch { transform: scale(0.9); }
        }