/* ==========================================================================
   ai4save Workspace Stylesheet (workspace.css)
   Extracted from chateditor/views/index.php
   ========================================================================== */

body {
    font-size: 14px !important;
}

/* Premium Model Border Glowing Styles */
.model-glow-emerald {
    box-shadow: 0 0 12px 2.5px rgba(52, 211, 153, 0.65) !important;
    border-color: rgba(52, 211, 153, 0.85) !important;
}

.model-glow-orange {
    box-shadow: 0 0 12px 2.5px rgba(249, 115, 22, 0.65) !important;
    border-color: rgba(249, 115, 22, 0.85) !important;
}

.model-glow-blue {
    box-shadow: 0 0 12px 2.5px rgba(59, 130, 246, 0.65) !important;
    border-color: rgba(59, 130, 246, 0.85) !important;
}

.model-glow-indigo {
    box-shadow: 0 0 12px 2.5px rgba(99, 102, 241, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.85) !important;
}

.model-glow-purple {
    box-shadow: 0 0 12px 2.5px rgba(168, 85, 247, 0.65) !important;
    border-color: rgba(168, 85, 247, 0.85) !important;
}

.model-glow-cyan {
    box-shadow: 0 0 12px 2.5px rgba(6, 182, 212, 0.65) !important;
    border-color: rgba(6, 182, 212, 0.85) !important;
}

.model-glow-lime {
    box-shadow: 0 0 12px 2.5px rgba(163, 230, 53, 0.65) !important;
    border-color: rgba(163, 230, 53, 0.85) !important;
}

.model-glow-amber {
    box-shadow: 0 0 12px 2.5px rgba(251, 191, 36, 0.65) !important;
    border-color: rgba(251, 191, 36, 0.85) !important;
}

.model-glow-sky {
    box-shadow: 0 0 12px 2.5px rgba(56, 189, 248, 0.65) !important;
    border-color: rgba(56, 189, 248, 0.85) !important;
}

.model-glow-rose {
    box-shadow: 0 0 12px 2.5px rgba(251, 113, 133, 0.65) !important;
    border-color: rgba(251, 113, 133, 0.85) !important;
}

/* Enhanced smooth transition for the glowing border */
.multi-model-btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* New Chat Model Selector Alert Shake and Glow */
@keyframes shake-glow {

    0%,
    100% {
        transform: translateX(0);
        box-shadow: 0 0 4px 1px rgba(59, 130, 246, 0.4);
        border-color: rgba(59, 130, 246, 0.5) !important;
    }

    15%,
    45%,
    75% {
        transform: translateX(-3px);
    }

    30%,
    60%,
    90% {
        transform: translateX(3px);
    }

    50% {
        box-shadow: 0 0 16px 5px rgba(59, 130, 246, 0.75);
        border-color: rgba(59, 130, 246, 0.9) !important;
    }
}

.model-selector-shake-glow {
    animation: shake-glow 1.5s ease-in-out infinite;
    border-width: 1.5px !important;
}

/* Toast Notification Premium Styling */
#toastContainer {
    top: max(8px, env(safe-area-inset-top, 8px));
}

@media (min-width: 640px) {
    #toastContainer {
        top: 1.5rem;
    }
}

.toast-notification {
    animation: slideInToast 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInToast {
    from {
        opacity: 0;
        transform: translateY(-40px) scale(0.95);
    }

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

.toast-notification.slide-out {
    animation: slideOutToast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes slideOutToast {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-40px) scale(0.95);
    }
}

/* OpenRouter Modal Premium Styling */
.modal-overlay {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content-container {
    animation: modalScaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }

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

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

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

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

/* Custom Scrollbar Styles (Global & Containers) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f4f4f5;
}

.theme-dark ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #18181b;
}

::-webkit-scrollbar-thumb {
    background: #71717a;
    border-radius: 9999px;
    border: 2.5px solid #f4f4f5;
}

::-webkit-scrollbar-thumb:hover {
    background: #27272a;
}

.theme-dark ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-color: #18181b;
}

.theme-dark ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #fafafa;
}

/* Thin scrollbar for Explorer list and details */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f4f4f5;
}

.theme-dark .custom-scrollbar::-webkit-scrollbar-track,
[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-track {
    background: #18181b;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #71717a;
    border-radius: 9999px;
    border: 2px solid #f4f4f5;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #27272a;
}

.theme-dark .custom-scrollbar::-webkit-scrollbar-thumb,
[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-color: #18181b;
}

.theme-dark .custom-scrollbar::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #fafafa;
}

/* Disable transitions during drag resizing to eliminate lag */
.is-resizing,
.is-resizing #chatboxPanel,
.is-resizing #editorPanelWrapper,
.is-resizing #splitWorkspaceContainer {
    transition: none !important;
}

/* Premium Floating Chat Input overlay styling */
#chatboxPanel {
    position: relative !important;
}

/* Workspace Tabs Premium Styling */
.workspace-tab {
    position: relative;
    border-bottom-width: 2px;
}

.workspace-tab.active {
    color: #2563eb !important;
    border-bottom-color: #2563eb !important;
}

.workspace-tab:not(.active) {
    border-bottom-color: transparent !important;
}

#leftSidebar.sidebar-collapsed~#chatboxPanel #workspaceTabsList {
    padding-left: 3rem;
}

#chatboxTranscript {
    padding-bottom: 2rem !important;
    transform: translateZ(0);
}

#chatboxInputArea {
    position: relative !important;
    z-index: 20 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-top: 1px solid rgba(120, 120, 120, 0.15) !important;
    pointer-events: auto !important;
}

#chatboxInputArea>* {
    pointer-events: auto !important;
}

/* L-shaped bot card layout and model info header */
.user-message-row {
    position: relative !important;
    z-index: 2 !important;
}

.bot-header-left {
    background-color: #ffffff !important;
    border-top: 1.5px solid #cbd5e1 !important;
    border-left: 1.5px solid #cbd5e1 !important;
    border-right: 1.5px solid #cbd5e1 !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px 12px 5px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: auto !important;
    z-index: 10 !important;
    position: relative !important;
    margin-bottom: -13px !important;
    /* overlaps space-y gap + border */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.01) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.theme-dark .bot-header-left,
[data-theme="dark"] .bot-header-left {
    background-color: #18181b !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    border-right: 1.5px solid rgba(255, 255, 255, 0.2) !important;
}

.theme-dark .qna-response-block,
[data-theme="dark"] .qna-response-block,
.theme-dark .multi-model-card,
[data-theme="dark"] .multi-model-card {
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
}

.theme-dark .multi-model-card-header,
[data-theme="dark"] .multi-model-card-header {
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    background-color: #18181b !important;
}

.qna-response-block {
    position: relative !important;
    z-index: 1 !important;
}

.qna-response-block.rounded-tl-none {
    border-top-left-radius: 0px !important;
}

.theme-dark .qna-response-block .response-toolbar,
[data-theme="dark"] .qna-response-block .response-toolbar {
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.bot-response-content p:first-of-type {
    margin-top: 0 !important;
}

/* Compact spacing between plain-text response lines. */
.bot-response-content {
    line-height: 1.15 !important;
}

.bot-response-content p,
.bot-response-content li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.15 !important;
}

/* Left Sidebar: Fixed Width Navigation Tab Menu */
#leftSidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex: 0 0 72px !important;
    background-color: #171717 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: visible !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

#leftSidebar::-webkit-scrollbar {
    width: 3px;
}

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

#leftSidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* Chatbox Wrapper containing sidebarRightPanel & chatboxPanel */
.workspace-tab-wrapper {
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1), flex 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease-in-out;
}

.sidebar-right-panel {
    width: 248px !important;
    min-width: 248px !important;
    flex: 0 0 248px !important;
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1), min-width 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease-in-out;
}

#sidebarRightPanel-chats {
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.theme-dark #sidebarRightPanel-chats,
[data-theme="dark"] #sidebarRightPanel-chats {
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}


/* Sidebar Right Panel Collapsed State */
.workspace-tab-wrapper.sidebar-collapsed .sidebar-right-panel {
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
    opacity: 0 !important;
    border-right-width: 0 !important;
    pointer-events: none !important;
}

/* Sidebar Right Panel Models Wide State */
.workspace-tab-wrapper.sidebar-models-wide .sidebar-right-panel {
    width: 568px !important;
    min-width: 568px !important;
    flex: 0 0 568px !important;
}

/* Model Config Expanded State: right panel grows to 100%, chat/dashboard panel hides */
.workspace-tab-wrapper.sidebar-model-config:not(.sidebar-collapsed) .sidebar-right-panel {
    width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
    background-color: #f1f5f9 !important;
    /* Soft light slate background like modern SaaS */
}

.workspace-tab-wrapper.sidebar-model-config:not(.sidebar-collapsed) .workspace-main-panel {
    display: none !important;
}

#splitWorkspaceContainer:has(.workspace-tab-wrapper.sidebar-model-config)~#workspaceResizer,
#splitWorkspaceContainer:has(.workspace-tab-wrapper.sidebar-model-config)~#editorPanelWrapper {
    display: none !important;
}

/* Model Config Split State: right panel grows to 100% inside split, chat/dashboard panel hides */
.workspace-tab-wrapper.sidebar-model-config-split:not(.sidebar-collapsed) .sidebar-right-panel {
    width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
    background-color: #f1f5f9 !important;
}

.workspace-tab-wrapper.sidebar-model-config-split:not(.sidebar-collapsed) .workspace-main-panel {
    display: none !important;
}

#splitWorkspaceContainer:has(.workspace-tab-wrapper.sidebar-model-config-split)~#workspaceResizer,
#splitWorkspaceContainer:has(.workspace-tab-wrapper.sidebar-model-config-split)~#editorPanelWrapper {
    display: flex !important;
}

/* Add breathing room on the left of dashboard when sidebar is collapsed */
.workspace-tab-wrapper.sidebar-collapsed [id^="mainDashboardWrapper"] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Sidebar Home / Brand Button Active Styling */
#sidebar-tab-home {
    border: none !important;
    background: transparent !important;
    position: relative !important;
}

#sidebar-tab-home .home-active-indicator {
    display: none !important;
}

#sidebar-tab-home.active .home-logo-container {
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 50%, #f0f7ff 100%) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08) !important;
}

#sidebar-tab-home.active .home-active-indicator {
    display: block !important;
    background-color: #2563eb !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 3.5px !important;
    opacity: 1 !important;
    box-shadow: 0 -1px 8px rgba(37, 99, 235, 0.6) !important;
}

#sidebar-tab-home.active .home-logo-label {
    color: #2563eb !important;
    text-decoration: underline !important;
    text-decoration-color: #2563eb !important;
    text-underline-offset: 3px !important;
}

#sidebar-tab-home.active .home-brand-mark span {
    color: #1d4ed8 !important;
}

/* Active style overrides for vertical tab buttons */
.sidebar-tab-btn {
    width: 100% !important;
    border-radius: 0px !important;
    border: none !important;
    position: relative !important;
    z-index: 1 !important;
    transition: all 150ms ease-in-out !important;
}

.sidebar-tab-btn.active {
    background-color: #2563eb !important;
    /* Vibrant blue background for active tab */
    color: #ffffff !important;
    /* White text */
    z-index: 10 !important;
}

.sidebar-tab-btn:not(.active) {
    color: #ffffff !important;
    /* Pure white text for maximum clarity */
}

.sidebar-tab-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.sidebar-tab-btn.coming-soon {
    opacity: 0.35 !important;
    /* Darker/dimmed style for disabled/coming-soon items */
    cursor: not-allowed !important;
}

.sidebar-tab-btn.coming-soon:hover {
    opacity: 0.5 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.sidebar-tab-btn.account-tab-btn {
    color: #ffffff !important;
    /* Pure white text */
    background-color: transparent !important;
    border: none !important;
}

.sidebar-tab-btn.account-tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.sidebar-tab-btn.signin-tab-btn {
    color: #38bdf8 !important;
    /* Standout vibrant sky blue */
    background: rgba(56, 189, 248, 0.1) !important;
    border-left: 2px solid #38bdf8 !important;
}

.sidebar-tab-btn.signin-tab-btn:hover {
    background: rgba(56, 189, 248, 0.22) !important;
    color: #bae6fd !important;
}

.sidebar-tab-btn.signin-tab-btn span {
    color: #38bdf8 !important;
}

.sidebar-tab-btn.signin-tab-btn:hover span {
    color: #bae6fd !important;
}

.sidebar-tab-btn i,
.sidebar-tab-btn svg {
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Sunken / Recessed Submenu Well Effect */
.sidebar-submenu-wrapper,
#sidebar-prompts-submenu {
    width: calc(100% - 14px) !important;
    margin: 4px auto 6px auto !important;
    padding: 3px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.7) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.65),
        inset 0 1px 2px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.04) !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.sidebar-submenu-wrapper.hidden,
#sidebar-prompts-submenu.hidden {
    display: none !important;
}

.sidebar-tab-btn.sidebar-submenu-btn,
#sidebar-tab-prompts {
    width: 100% !important;
    padding: 6px 2px !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    color: #a1a1aa !important;
    transition: all 180ms ease-in-out !important;
    border: none !important;
}

.sidebar-tab-btn.sidebar-submenu-btn i,
.sidebar-tab-btn.sidebar-submenu-btn svg,
#sidebar-tab-prompts i,
#sidebar-tab-prompts svg {
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    font-size: 14px !important;
    margin-bottom: 2px !important;
}

.sidebar-tab-btn.sidebar-submenu-btn span,
#sidebar-tab-prompts span {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
}

.sidebar-tab-btn.sidebar-submenu-btn:not(.active):hover,
#sidebar-tab-prompts:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.sidebar-tab-btn.sidebar-submenu-btn.active,
#sidebar-tab-prompts.active {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

#moreMenuDropdown.force-open {
    display: block !important;
}

#folders-caret {
    transition: transform 200ms ease-in-out;
}

#folders-caret.collapsed {
    transform: rotate(-90deg);
}

/* Tree view horizontal branch lines */
.folder-chats-list {
    position: relative !important;
    margin-left: 8px !important;
}

.folder-chats-list .chat-history-wrapper,
.folder-chats-list .folder-group>div:first-child {
    position: relative !important;
}

.folder-chats-list .chat-history-wrapper::before,
.folder-chats-list .folder-group>div:first-child::before {
    content: "" !important;
    position: absolute !important;
    left: -4px !important;
    top: 50% !important;
    width: 6px !important;
    height: 1px !important;
    background-color: #cbd5e1 !important;
}

/* Edge-to-edge viewport overrides for full size chatbox page */
#splitWorkspaceContainer {
    max-width: none !important;
}

#chatboxPanel,
#editorPanel {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Add a subtle left border to the editor panel only when in split view and force min-width 0 */
#editorPanelWrapper {
    min-width: 0 !important;
}

#editorPanelWrapper.w-0:not(.floating-note-modal),
#editorPanelWrapper.hidden:not(.floating-note-modal) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
}

#editorPanelWrapper:not(.w-0) {
    border-left: 1px solid #e4e4e7;
    /* border-zinc-200 */
}

/* Floating Note Modal Mode */
#editorPanelWrapper.floating-note-modal {
    position: fixed !important;
    top: 100px;
    right: 20px;
    width: 600px;
    height: 650px;
    z-index: 9999 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4) !important;
    border: 2px solid #000000 !important;
    border-radius: 0px !important;
    background-color: #ffffff !important;
    transition: none !important;
    display: flex !important;
    flex-direction: column !important;
    resize: none !important;
    overflow: hidden !important;
    min-width: 400px !important;
    min-height: 300px !important;
}

#editorPanelWrapper.floating-note-modal.w-0 {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#editorPanelWrapper.floating-note-modal.maximized {
    border: none !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

#editorPanelWrapper.floating-note-modal.maximized #editorPanel {
    border-radius: 0px !important;
}

#editorPanelWrapper.floating-note-modal #editorPanel {
    border-radius: 0px !important;
    height: 100% !important;
    border: none !important;
}


#editorPanelWrapper.floating-note-modal #editorPanelHeader,
#editorPanelWrapper.floating-note-modal #editorPanelFooter {
    cursor: move !important;
    touch-action: none !important;
}

/* Optional styling to show dragging state */
#editorPanelWrapper.floating-note-modal {
    contain: layout;
    isolation: isolate;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#editorPanelWrapper.floating-note-modal.is-dragging {
    opacity: 1 !important;
    user-select: none !important;
    pointer-events: auto !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
    will-change: transform !important;
    transition: none !important;
}

#editorPanelWrapper.floating-note-modal.is-dragging * {
    pointer-events: none !important;
}

#editorPanelWrapper.floating-note-modal.is-dragging #editorPanelHeader,
#editorPanelWrapper.floating-note-modal.is-dragging #editorPanelFooter {
    pointer-events: auto !important;
}

/* Block background interactions and force grabbing cursor during note drag */
body.is-note-dragging {
    user-select: none !important;
    cursor: grabbing !important;
}

body.is-note-dragging #splitWorkspaceContainer,
body.is-note-dragging #leftSidebar,
body.is-note-dragging #workspaceResizer,
body.is-note-dragging .workspace-tab-wrapper {
    pointer-events: none !important;
}

body.is-note-dragging #editorPanelWrapper.floating-note-modal,
body.is-note-dragging #editorPanelWrapper.floating-note-modal #editorPanelHeader,
body.is-note-dragging #editorPanelWrapper.floating-note-modal #editorPanelFooter {
    cursor: grabbing !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle {
    position: absolute !important;
    z-index: 100 !important;
    user-select: none !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.n,
#editorPanelWrapper.floating-note-modal .note-resize-handle.s {
    left: 8px !important;
    right: 8px !important;
    height: 8px !important;
    cursor: ns-resize !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.n {
    top: -4px !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.s {
    bottom: -4px !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.e,
#editorPanelWrapper.floating-note-modal .note-resize-handle.w {
    top: 8px !important;
    bottom: 8px !important;
    width: 8px !important;
    cursor: ew-resize !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.e {
    right: -4px !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.w {
    left: -4px !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.ne,
#editorPanelWrapper.floating-note-modal .note-resize-handle.sw {
    width: 12px !important;
    height: 12px !important;
    cursor: nesw-resize !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.nw,
#editorPanelWrapper.floating-note-modal .note-resize-handle.se {
    width: 12px !important;
    height: 12px !important;
    cursor: nwse-resize !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.nw {
    top: -4px !important;
    left: -4px !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.ne {
    top: -4px !important;
    right: -4px !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.sw {
    bottom: -4px !important;
    left: -4px !important;
}

#editorPanelWrapper.floating-note-modal .note-resize-handle.se {
    bottom: -4px !important;
    right: -4px !important;
}

/* EditorJS Popover & Tune Menu overlay fix */
.ce-popover,
.tc-popover,
.ce-settings,
.ce-popover--opened,
.tc-popover--opened {
    z-index: 10000 !important;
}

.ce-popover:not(.ce-popover--nested)>.ce-popover__container,
.ce-popover:not(.ce-popover--nested)>.ce-popover-container,
#editorjs .ce-popover:not(.ce-popover--nested)>.ce-popover__container,
#editorjs .ce-popover:not(.ce-popover--nested)>.ce-popover-container {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

.ce-popover--nested,
#editorjs .ce-popover--nested {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    z-index: 10010 !important;
}

.ce-popover--nested>.ce-popover__container,
#editorjs .ce-popover--nested>.ce-popover__container,
.ce-popover--nested .ce-popover__container,
#editorjs .ce-popover--nested .ce-popover__container {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    position: absolute !important;
    top: var(--trigger-item-top, 0px) !important;
    left: 196px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    z-index: 10020 !important;
}

.ce-popover--nested.ce-popover--open-left>.ce-popover__container,
#editorjs .ce-popover--nested.ce-popover--open-left>.ce-popover__container,
.ce-popover--open-left .ce-popover--nested .ce-popover__container,
#editorjs .ce-popover--open-left .ce-popover--nested .ce-popover__container {
    left: -196px !important;
    right: auto !important;
}

.ce-popover--nested.ce-popover--open-top>.ce-popover__container,
#editorjs .ce-popover--nested.ce-popover--open-top>.ce-popover__container,
.ce-popover--open-top .ce-popover--nested .ce-popover__container,
#editorjs .ce-popover--open-top .ce-popover--nested .ce-popover__container {
    top: auto !important;
    bottom: max(0px, calc(100% - var(--trigger-item-top, 0px) - 34px)) !important;
}

.ce-popover-header,
#editorjs .ce-popover-header {
    padding: 6px 8px !important;
    margin-bottom: 6px !important;
    min-height: 28px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    user-select: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background-color 0.15s ease !important;
    background-color: transparent !important;
}

.ce-popover-header:hover,
.ce-popover-header:active,
#editorjs .ce-popover-header:hover,
#editorjs .ce-popover-header:active {
    background-color: #f4f4f5 !important;
}

.ce-popover-header__text,
#editorjs .ce-popover-header__text {
    font-size: 0 !important;
    cursor: pointer !important;
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.ce-popover-header__text::before,
#editorjs .ce-popover-header__text::before {
    content: "Back" !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #18181b !important;
}

.ce-popover-header__back-button,
#editorjs .ce-popover-header__back-button {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #52525b !important;
    border-radius: 4px !important;
}

.ce-popover-header__back-button svg,
#editorjs .ce-popover-header__back-button svg {
    width: 16px !important;
    height: 16px !important;
}

/* Styling conversation threads as alternating zebra-striped full-width rows */
.chat-qa-thread:not(#welcomeCard) {
    border: none !important;
    border-bottom: 1px solid rgba(120, 120, 120, 0.1) !important;
    border-radius: 0 !important;
    padding: 24px 16px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

#chatboxTranscript>.chat-qa-thread:not(#welcomeCard):last-child {
    border-bottom: none !important;
}

@media (min-width: 768px) {
    .chat-qa-thread:not(#welcomeCard) {
        padding: 28px 24px !important;
    }

    #chatboxInputArea {
        padding: 0.5rem !important;
    }

    #chatEditorForm {
        padding: 4px !important;
        gap: 4px !important;
    }

    #chatEditorForm #chatboxInput {
        height: 76px !important;
        min-height: 76px !important;
        padding: 0 6px !important;
        font-size: 17px !important;
        line-height: 26px !important;
    }
}

.chat-qa-thread:not(#welcomeCard):nth-child(even) {
    background-color: rgba(120, 120, 120, 0.03) !important;
}

.chat-qa-thread:not(#welcomeCard):nth-child(odd) {
    background-color: transparent !important;
}

.chat-qa-thread#welcomeCard {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Premium Chat Bubble styling for user prompt */
.user-message-bubble {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 18px 4px 18px 18px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    border: 1.5px solid #09090b !important;
    max-width: 85% !important;
    width: fit-content !important;
    display: flex !important;
    position: relative !important;
}

.theme-dark .user-message-bubble,
[data-theme="dark"] .user-message-bubble {
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.theme-dark #chatEditorForm,
[data-theme="dark"] #chatEditorForm {
    background-color: #18181b !important;
    border-color: rgba(52, 211, 153, 0.6) !important;
    box-shadow: 0 0 12px 2px rgba(52, 211, 153, 0.25) !important;
}

.theme-dark #chatEditorForm:focus-within,
[data-theme="dark"] #chatEditorForm:focus-within {
    border-color: rgba(52, 211, 153, 0.9) !important;
    box-shadow: 0 0 16px 4px rgba(52, 211, 153, 0.4) !important;
}

.theme-dark #chatboxInput,
[data-theme="dark"] #chatboxInput {
    color: #f4f4f5 !important;
}

.theme-dark #chatboxInput::placeholder,
[data-theme="dark"] #chatboxInput::placeholder {
    color: #71717a !important;
}

.theme-dark #chatEditorForm .border-t,
[data-theme="dark"] #chatEditorForm .border-t {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}

.theme-dark #chatEditorForm button:not(#btnSubmitChat),
[data-theme="dark"] #chatEditorForm button:not(#btnSubmitChat) {
    color: #a1a1aa !important;
}

.theme-dark #chatEditorForm button:not(#btnSubmitChat):hover,
[data-theme="dark"] #chatEditorForm button:not(#btnSubmitChat):hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.user-prompt-actions {
    opacity: 1 !important;
}

.user-message-bubble.is-editing .user-prompt-actions {
    display: none !important;
}

.user-message-bubble.is-editing .msg-text-container {
    padding-right: 0 !important;
}

.user-message-bubble.is-editing {
    width: 100% !important;
    min-width: 500px !important;
    padding: 8px 10px !important;
}

@media (max-width: 767px) {
    .user-message-bubble.is-editing {
        min-width: 100% !important;
    }
}

.user-message-bubble,
.user-message-bubble *,
.user-message-bubble [class*="text-zinc-"],
.user-message-bubble [class*="text-slate-"] {
    color: #000000 !important;
}

#chatboxTranscript .user-message-bubble .chat-file-attachment-card,
#chatboxTranscript .user-message-bubble .chat-file-attachment-card *,
#chatboxTranscript .user-message-bubble .chat-file-attachment-card a,
.user-message-bubble .chat-file-attachment-card,
.user-message-bubble .chat-file-attachment-card *,
.user-message-bubble .chat-file-attachment-card a {
    color: #1f2937 !important;
}

#chatboxTranscript .user-message-bubble .chat-file-attachment-card a:hover,
.user-message-bubble .chat-file-attachment-card a:hover {
    text-decoration: underline !important;
}

#chatboxTranscript .chat-file-attachment-card,
.user-message-bubble .chat-file-attachment-card {
    font-size: 0.75rem !important;
    height: 40px;
}

#chatboxTranscript .chat-file-attachment-card *,
.user-message-bubble .chat-file-attachment-card * {
    font-size: inherit !important;
}

#chatboxTranscript .chat-file-attachment-card .text-\[10px\],
#chatboxTranscript .chat-file-attachment-card .text-\[10px\] *,
.user-message-bubble .chat-file-attachment-card .text-\[10px\],
.user-message-bubble .chat-file-attachment-card .text-\[10px\] * {
    font-size: 10px !important;
}

#chatboxTranscript .chat-file-attachment-card i,
.user-message-bubble .chat-file-attachment-card i {
    font-size: 1rem !important;
}

/* User avatar badge fixed size */
.user-avatar-badge,
#chatboxTranscript .user-avatar-badge {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
}

.user-bubble-container {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

@media (max-width: 767px) {
    .user-prompt-actions {
        opacity: 1 !important;
        right: 5px !important;
        bottom: 3px !important;
        gap: 2px !important;
    }

    .user-prompt-actions button {
        padding: 2px 3px !important;
        width: 18px !important;
        height: 18px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .user-prompt-actions button i {
        font-size: 10px !important;
    }

    .chat-qa-thread:not(#welcomeCard) {
        padding: 12px 6px !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    .user-message-row {
        width: 100% !important;
        display: flex !important;
    }

    .user-message-row:has(.bot-header-left) {
        flex-direction: column-reverse !important;
        align-items: flex-end !important;
        gap: 8px !important;
    }

    .user-message-row:not(:has(.bot-header-left)) {
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .user-message-row .bot-header-left {
        align-self: flex-start !important;
        margin-top: 2px !important;
        margin-bottom: -11px !important;
        font-size: 11px !important;
        padding: 6px 10px 4px 10px !important;
        max-width: calc(100% - 10px) !important;
    }

    .user-message-row .bot-header-left span:last-child {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .user-bubble-container {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .user-message-bubble {
        max-width: calc(100% - 36px) !important;
        width: fit-content !important;
        min-width: 70px !important;
        padding: 8px 12px !important;
        border-radius: 14px 4px 14px 14px !important;
    }

    .user-message-bubble .msg-text-container {
        padding-right: 1.75rem !important;
        font-size: 13.5px !important;
        line-height: 1.45 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .qna-response-block {
        padding: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
    }

    .qna-response-block.rounded-tl-none {
        border-top-left-radius: 0px !important;
    }

    .bot-response-content {
        font-size: 13.5px !important;
        line-height: 1.45 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .multi-model-container {
        padding-left: 2px !important;
        padding-right: 2px !important;
        gap: 8px !important;
        touch-action: auto !important;
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .multi-model-card {
        height: auto !important;
        min-height: fit-content !important;
    }

    .multi-model-card-content {
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
        padding: 4px 6px !important;
    }

    .multi-model-container .multi-model-card:only-child {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        scroll-snap-align: none !important;
    }

    .multi-model-container[data-cols="1"] .multi-model-card:not(:only-child),
    .multi-model-container[data-cols="2"] .multi-model-card:not(:only-child),
    .multi-model-container[data-cols="3"] .multi-model-card:not(:only-child),
    .multi-model-container:not([data-cols]) .multi-model-card:not(:only-child) {
        width: 92% !important;
        min-width: 270px !important;
        max-width: 100% !important;
        flex: 0 0 92% !important;
        scroll-snap-align: none !important;
    }

    .table-responsive-wrapper {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    .table-responsive-wrapper table {
        min-width: max-content !important;
        width: max-content !important;
    }

    .table-responsive-wrapper th,
    .table-responsive-wrapper td {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Floating Mobile Menu Button */
    #floatingMobileMenuBtn {
        z-index: 40 !important;
    }

    /* Mobile Drawer Backdrop & Stacking Context */
    #mobileSidebarBackdrop {
        z-index: 45 !important;
    }

    #splitWorkspaceContainer.mobile-drawer-open,
    body.mobile-drawer-open #splitWorkspaceContainer {
        z-index: auto !important;
    }

    /* All workspace tabs full width & height on mobile */
    .workspace-tab-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        z-index: auto !important;
    }

    .workspace-tab-wrapper.hidden,
    .workspace-tab-wrapper[style*="display: none"],
    #chatboxWrapper.hidden,
    #chatboxWrapper[style*="display: none"],
    #appsWrapper.hidden,
    #appsWrapper[style*="display: none"],
    #modelsWrapper.hidden,
    #modelsWrapper[style*="display: none"],
    #promptsWrapper.hidden,
    #promptsWrapper[style*="display: none"],
    #homepageWrapper.hidden,
    #homepageWrapper[style*="display: none"] {
        display: none !important;
    }

    /* Left Sidebar: Off-canvas Mobile Drawer */
    #leftSidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: 100% !important;
        min-height: 100% !important;
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        z-index: 60 !important;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        padding-top: 0 !important;
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem)) !important;
    }

    #leftSidebar button[onclick*="showHomepageTab"] {
        margin-top: 0 !important;
    }

    #leftSidebar button[onclick*="showHomepageTab"]>span {
        height: 64px !important;
    }

    /* Sub-panel (History / Chats / Models etc.): Off-canvas Drawer */
    .sidebar-right-panel {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 72px !important;
        height: 100% !important;
        min-height: 100% !important;
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        width: calc(100vw - 72px) !important;
        max-width: 320px !important;
        min-width: unset !important;
        flex: unset !important;
        z-index: 50 !important;
        transform: translateX(-160%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease !important;
        box-shadow: none !important;
        background-color: #ffffff !important;
        padding-top: 0 !important;
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem)) !important;
    }

    .theme-dark .sidebar-right-panel,
    [data-theme="dark"] .sidebar-right-panel {
        background-color: #18181b !important;
    }

    /* Drawer Open State on Mobile */
    body.mobile-drawer-open #leftSidebar,
    #splitWorkspaceContainer.mobile-drawer-open #leftSidebar {
        transform: translateX(0) !important;
        pointer-events: auto !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4) !important;
    }

    body.mobile-drawer-open .sidebar-right-panel:not(.hidden),
    #splitWorkspaceContainer.mobile-drawer-open .sidebar-right-panel:not(.hidden),
    body.mobile-drawer-open .workspace-tab-wrapper.sidebar-collapsed .sidebar-right-panel:not(.hidden),
    #splitWorkspaceContainer.mobile-drawer-open .workspace-tab-wrapper.sidebar-collapsed .sidebar-right-panel:not(.hidden) {
        transform: translateX(0) !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        width: calc(100vw - 72px) !important;
        max-width: 320px !important;
        min-width: unset !important;
        display: flex !important;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.3) !important;
    }

    /* Lock html & body to prevent outer page bouncing and overflow on mobile devices */
    html,
    body {
        height: 100% !important;
        min-height: 100% !important;
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        width: 100% !important;
        overflow: hidden !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overscroll-behavior: none !important;
        -webkit-overflow-scrolling: auto !important;
        background-color: #edf2f6 !important;
    }

    #workspaceMainRoot {
        height: 100% !important;
        min-height: 100% !important;
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        max-height: 100dvh !important;
        width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: #edf2f6 !important;
    }

    /* Mobile Split Workspace Container: exact viewport containment */
    #splitWorkspaceContainer {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        max-height: 100dvh !important;
        position: relative !important;
        flex: 1 1 100% !important;
        overflow: hidden !important;
        background-color: #edf2f6 !important;
    }

    /* Floating Mobile Menu Button (< 768px) with iOS safe-area support */
    #floatingMobileMenuBtn {
        top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
        left: calc(env(safe-area-inset-left, 0px) + 12px) !important;
        border-color: transparent !important;
        background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #af52de, #ff3b30) !important;
        -webkit-background-clip: padding-box, border-box !important;
        background-clip: padding-box, border-box !important;
        background-origin: padding-box, border-box !important;
        background-size: 100% 100%, 300% 300% !important;
        animation: rainbowBorderScroll 2.5s linear infinite !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 10px rgba(99, 102, 241, 0.25) !important;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
        transform-origin: center center;
    }

    #floatingMobileMenuBtn:active {
        transform: scale(0.95) !important;
    }

    /* Tab Headers and Subtaskbars on Mobile - Respect iOS Dynamic Island */
    #appsWrapper>div:first-child,
    #modelsWrapper>header,
    #apiWrapper>header,
    #homepageWrapper>header {
        padding-top: max(0.75rem, env(safe-area-inset-top, 0.75rem)) !important;
        min-height: calc(env(safe-area-inset-top, 0px) + 52px) !important;
    }

    /* Modals & Popovers on Mobile - Full Viewport with Safe Area */
    #theme-settings-modal .modal-content-container,
    .modal-content-container {
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem)) !important;
    }

    #theme-settings-modal .modal-content-container>div:first-child {
        padding-top: max(1rem, env(safe-area-inset-top, 1rem)) !important;
    }

    /* Main Chat Panel on Mobile: 100% Full Width & Height Flexbox */
    #chatboxWrapper:not(.hidden):not([style*="display: none"]) {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        max-height: 100% !important;
        flex: 1 1 0% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #chatboxWrapper #chatboxPanel,
    #chatboxPanel {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        height: 100dvh !important;
        height: -webkit-fill-available !important;
        max-height: 100% !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        border-radius: 0 !important;
        background-color: #edf2f6 !important;
        overflow: hidden !important;
    }

    /* Workspace main dashboard / tabs full width on mobile */
    #mainDashboardWrapper {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Padding adjustments for mobile chat */
    #chatboxTranscript {
        display: block !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
        touch-action: auto !important;
        padding-top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        padding-bottom: 1rem !important;
        background-color: #edf2f6 !important;
    }

    #chatboxInputArea {
        display: block !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        padding-top: 0.25rem !important;
        padding-left: max(0.25rem, env(safe-area-inset-left, 0.25rem)) !important;
        padding-right: max(0.25rem, env(safe-area-inset-right, 0.25rem)) !important;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0.5rem)) !important;
        background-color: #edf2f6 !important;
    }

    #chatEditorForm {
        padding: 4px !important;
        border-radius: 12px !important;
        align-items: center !important;
        min-height: 64px !important;
        gap: 4px !important;
        border: 1.5px solid #cbd5e1 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }

    #chatEditorForm>div.flex-col {
        flex-direction: column !important;
        align-self: center !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin-bottom: 0 !important;
    }

    #chatEditorForm #promptPopoverBtn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 8px !important;
        background-color: #fffbeb !important;
        border: 1px solid #fde68a !important;
        color: #d97706 !important;
        box-shadow: 0 1px 2px rgba(217, 119, 6, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #chatEditorForm #promptPopoverBtn:hover {
        background-color: #fef3c7 !important;
        color: #b45309 !important;
    }

    #chatEditorForm #promptPopoverBtn i {
        font-size: 13px !important;
    }

    #chatEditorForm #btnSubmitChat {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 8px !important;
        background-color: #2563eb !important;
        color: #ffffff !important;
        border: 1px solid #1d4ed8 !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #chatEditorForm #btnSubmitChat:hover {
        background-color: #1d4ed8 !important;
    }

    #chatEditorForm #btnSubmitChat #btnSubmitIcon {
        font-size: 12px !important;
    }

    /* Khi đã gõ chữ trong mobile view: ẩn nút bóng đèn, làm nút gửi cao full input như PC view */
    #chatboxInput:not(:placeholder-shown) ~ div #promptPopoverWrapper,
    #chatboxInput:not(:placeholder-shown) ~ div #promptPopoverBtn,
    #chatboxInput:not(:placeholder-shown) ~ div .prompt-popover-wrapper,
    #chatEditorForm.has-chat-text #promptPopoverWrapper,
    #chatEditorForm.has-chat-text #promptPopoverBtn,
    #chatEditorForm.has-chat-text .prompt-popover-wrapper,
    #chatEditorForm:has(#chatboxInput:not(:placeholder-shown)) #promptPopoverWrapper,
    #chatEditorForm:has(#chatboxInput:not(:placeholder-shown)) #promptPopoverBtn,
    #chatEditorForm:has(#chatboxInput:not(:placeholder-shown)) .prompt-popover-wrapper {
        display: none !important;
    }

    #chatboxInput:not(:placeholder-shown) ~ div.flex-col,
    #chatEditorForm.has-chat-text > div.flex-col,
    #chatEditorForm:has(#chatboxInput:not(:placeholder-shown)) > div.flex-col {
        align-self: stretch !important;
        height: auto !important;
        min-height: 100% !important;
        justify-content: stretch !important;
    }

    #chatboxInput:not(:placeholder-shown) ~ div #btnSubmitChat,
    #chatEditorForm.has-chat-text #btnSubmitChat,
    #chatEditorForm:has(#chatboxInput:not(:placeholder-shown)) #btnSubmitChat {
        width: 36px !important;
        height: 100% !important;
        min-height: 100% !important;
        flex: 1 1 auto !important;
        min-width: 36px !important;
        border-radius: 10px !important;
        align-self: stretch !important;
    }
    #chatboxInput:not(:placeholder-shown) ~ div #btnSubmitChat #btnSubmitIcon,
    #chatEditorForm.has-chat-text #btnSubmitChat #btnSubmitIcon,
    #chatEditorForm:has(#chatboxInput:not(:placeholder-shown)) #btnSubmitChat #btnSubmitIcon {
        font-size: 16px !important;
    }

    #chatEditorForm.chat-form-compact {
        min-height: 0 !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    #chatEditorForm.chat-form-compact>div.flex-col {
        flex-direction: row !important;
        align-self: center !important;
        gap: 4px !important;
    }

    #chatEditorForm.chat-form-compact #chatboxInput {
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        overflow: hidden !important;
    }

    #chatEditorForm.chat-form-compact:focus-within {
        min-height: 64px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    #chatEditorForm.chat-form-compact:focus-within>div.flex-col {
        flex-direction: column !important;
    }

    #chatEditorForm.chat-form-compact:focus-within #chatboxInput {
        height: auto !important;
        min-height: 24px !important;
        max-height: 72px !important;
        overflow-y: auto !important;
    }

    #chatboxInput {
        min-height: 24px !important;
        max-height: 72px !important;
        /* Tối đa 3 line */
        align-self: center !important;
        padding: 0 6px !important;
        margin: 0 !important;
        font-size: 17px !important;
        line-height: 26px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        resize: none !important;
    }

    /* Note Editor Fullscreen on Mobile (docked or floating modal) */
    #editorPanelWrapper:not(.w-0):not(.hidden):not([style*="display: none"]),
    #editorPanelWrapper.floating-note-modal:not(.w-0):not(.hidden):not([style*="display: none"]) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100% !important;
        max-height: 100dvh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 55 !important;
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        margin: 0 !important;
    }

    #editorPanelWrapper #editorPanel,
    #editorPanelWrapper.floating-note-modal #editorPanel {
        border-radius: 0 !important;
        border: none !important;
        height: 100% !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    #editorPanelWrapper .note-resize-handle,
    #editorPanelWrapper.floating-note-modal .note-resize-handle {
        display: none !important;
    }

    #btnNoteModeFullsize,
    #btnNoteModeWindow,
    #btnNoteModeSidebar {
        display: none !important;
    }
}

/* Fix chat editing container inputs and buttons in all themes, overriding user-message-bubble wildcard overrides */
#chatboxTranscript .user-message-bubble .edit-prompt-textarea,
.user-message-bubble .edit-prompt-textarea {
    color: #18181b !important;
    background-color: #ffffff !important;
}

#chatboxTranscript .user-message-bubble .btn-cancel-edit,
.user-message-bubble .btn-cancel-edit {
    color: #52525b !important;
    background-color: #f4f4f5 !important;
}

#chatboxTranscript .user-message-bubble .btn-cancel-edit:hover,
.user-message-bubble .btn-cancel-edit:hover {
    color: #27272a !important;
    background-color: #e4e4e7 !important;
}

#chatboxTranscript .user-message-bubble .btn-save-edit,
.user-message-bubble .btn-save-edit {
    color: #ffffff !important;
    background-color: #3b82f6 !important;
}

#chatboxTranscript .user-message-bubble .btn-save-edit:hover,
.user-message-bubble .btn-save-edit:hover {
    background-color: #2563eb !important;
}

/* Single bot response block card layout */
.qna-response-block {
    background-color: #ffffff !important;
    border: 1.5px solid #09090b !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
}

/* Multi-model comparison styles */
.multi-model-info-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: #64748b !important;
    /* neutral slate color */
    font-weight: 500 !important;
}

/* Segmented Control Pill Header */
.multi-model-tabs {
    display: inline-flex !important;
    background-color: rgba(120, 120, 120, 0.08) !important;
    padding: 4px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(120, 120, 120, 0.15) !important;
    width: fit-content !important;
    margin-bottom: -4px !important;
    align-self: center !important;
    align-items: center !important;
}

.compare-tab-btn {
    border-radius: 50% !important;
    border: none !important;
    background-color: transparent !important;
    color: #71717a !important;
    width: 42px !important;
    height: 42px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.compare-tab-btn span {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.compare-tab-btn i {
    font-size: 22px !important;
}

.compare-tab-btn:hover {
    color: #18181b !important;
}

.compare-tab-btn.active-tab {
    background-color: #ffffff !important;
    color: #18181b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Active state adjustments for dark modes */
.theme-dark .compare-tab-btn.active-tab,
[data-theme="dark"] .compare-tab-btn.active-tab {
    background-color: #ffffff !important;
    color: #18181b !important;
}

.theme-dark .multi-model-tabs,
[data-theme="dark"] .multi-model-tabs {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.theme-dark .multi-model-tabs span.w-px,
[data-theme="dark"] .multi-model-tabs span.w-px {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

.theme-dark .compare-tab-btn,
[data-theme="dark"] .compare-tab-btn,
.theme-dark .compare-tab-btn i,
[data-theme="dark"] .compare-tab-btn i {
    color: #d4d4d8 !important;
}

.theme-dark .compare-tab-btn:hover,
[data-theme="dark"] .compare-tab-btn:hover,
.theme-dark .compare-tab-btn:hover i,
[data-theme="dark"] .compare-tab-btn:hover i {
    color: #ffffff !important;
}

/* Horizontal Swipe Card Container with Peek */
.multi-model-container {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    width: 100% !important;
    gap: 8px !important;
    padding-bottom: 0px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    box-sizing: border-box !important;
    scrollbar-width: auto !important;
    scrollbar-color: #71717a #f4f4f5 !important;
    cursor: grab !important;
}

.multi-model-container.dragging-autoscroll {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}

.multi-model-container.active-dragging,
body.multi-model-active-dragging,
body.multi-model-active-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.multi-model-card {
    cursor: grab;
}

.multi-model-card-header,
.multi-model-card-content,
.multi-model-card .bot-response-content,
.multi-model-card .bot-response-placeholder {
    cursor: grab;
}

.multi-model-card pre,
.multi-model-card code,
.multi-model-card .code-block-body {
    cursor: text !important;
}

.multi-model-card button,
.multi-model-card a,
.multi-model-card input,
.multi-model-card select,
.multi-model-card textarea,
.multi-model-card [role="button"],
.multi-model-card .btn-retry-response,
.multi-model-card .btn-pick-correct,
.multi-model-card .compare-nav-btn,
.multi-model-card-header button,
.multi-model-card-header a,
.multi-model-card-header i {
    cursor: pointer !important;
}

.theme-dark .multi-model-container,
[data-theme="dark"] .multi-model-container {
    scrollbar-color: #d4d4d8 #18181b !important;
}

.multi-model-container::-webkit-scrollbar {
    display: block !important;
    height: 10px !important;
}

.multi-model-container::-webkit-scrollbar-track {
    background: #f4f4f5 !important;
    border-radius: 9999px !important;
}

.theme-dark .multi-model-container::-webkit-scrollbar-track,
[data-theme="dark"] .multi-model-container::-webkit-scrollbar-track {
    background: #18181b !important;
}

.multi-model-container::-webkit-scrollbar-thumb {
    background: #71717a !important;
    border-radius: 9999px !important;
    border: 2.5px solid #f4f4f5 !important;
}

.multi-model-container::-webkit-scrollbar-thumb:hover {
    background: #27272a !important;
}

.theme-dark .multi-model-container::-webkit-scrollbar-thumb,
[data-theme="dark"] .multi-model-container::-webkit-scrollbar-thumb {
    background: #d4d4d8 !important;
    border: 2.5px solid #18181b !important;
}

.theme-dark .multi-model-container::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .multi-model-container::-webkit-scrollbar-thumb:hover {
    background: #fafafa !important;
}

@media (min-width: 768px) {
    .multi-model-container {
        padding-left: 2px !important;
        padding-right: 2px !important;
        gap: 10px !important;
    }
}

.multi-model-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1.5px solid #09090b !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 100% !important;
    flex-shrink: 0 !important;
    scroll-snap-align: center !important;
}

/* Dynamic widths depending on grid-cols layouts:
   - When all response cards fit on screen (number of cards <= layout columns),
     cards expand to reach 100% of view width without leaving any gap at the end.
   - Only when there are more response cards than columns (more cards behind),
     leave a gap on the right so the next card peeks out to indicate scrollability.
*/

/* If only 1 card exists in container -> always 100% full width */
.multi-model-card:only-child,
.multi-model-container .multi-model-card:only-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    scroll-snap-align: center !important;
}

/* 1-column view with 2+ cards -> peek next card */
.multi-model-container[data-cols="1"] .multi-model-card:not(:only-child),
.multi-model-container:not([data-cols]) .multi-model-card:not(:only-child) {
    width: 92% !important;
    flex: 0 0 92% !important;
    scroll-snap-align: center !important;
}

@media (min-width: 768px) {

    .multi-model-container[data-cols="1"] .multi-model-card:not(:only-child),
    .multi-model-container:not([data-cols]) .multi-model-card:not(:only-child) {
        width: 80% !important;
        flex: 0 0 80% !important;
        scroll-snap-align: center !important;
    }
}

/* 2-column view */
.multi-model-container[data-cols="2"] .multi-model-card {
    width: 92% !important;
    flex: 0 0 92% !important;
    scroll-snap-align: start !important;
}

@media (min-width: 768px) {

    /* 1 or 2 cards -> all displayed on screen -> reach 100% width */
    .multi-model-container[data-cols="2"] .multi-model-card {
        width: calc((100% - 10px) / 2) !important;
        flex: 1 1 0px !important;
        scroll-snap-align: start !important;
    }

    /* 3+ cards -> 3rd card behind -> peek 3rd card */
    .multi-model-container[data-cols="2"]:has(.multi-model-card:nth-child(3)) .multi-model-card,
    .multi-model-container[data-cols="2"] .multi-model-card:nth-last-child(n+3),
    .multi-model-container[data-cols="2"] .multi-model-card:nth-last-child(n+3)~.multi-model-card {
        width: calc((100% - 20px) / 2.15) !important;
        flex: 0 0 calc((100% - 20px) / 2.15) !important;
        scroll-snap-align: start !important;
    }
}

/* 3-column view */
.multi-model-container[data-cols="3"] .multi-model-card {
    width: 92% !important;
    flex: 0 0 92% !important;
    scroll-snap-align: start !important;
}

@media (min-width: 768px) {

    /* 1 to 3 cards -> all displayed on screen -> reach 100% width */
    .multi-model-container[data-cols="3"] .multi-model-card {
        width: calc((100% - 20px) / 3) !important;
        flex: 1 1 0px !important;
        scroll-snap-align: start !important;
    }

    /* If exactly 2 cards in 3-col layout -> split 50-50 to fill 100% width */
    .multi-model-container[data-cols="3"]:has(.multi-model-card:nth-child(2):last-child) .multi-model-card,
    .multi-model-container[data-cols="3"] .multi-model-card:nth-child(1):nth-last-child(2),
    .multi-model-container[data-cols="3"] .multi-model-card:nth-child(2):nth-last-child(1) {
        width: calc((100% - 10px) / 2) !important;
        flex: 1 1 0px !important;
    }

    /* 4+ cards -> 4th card behind -> peek 4th card */
    .multi-model-container[data-cols="3"]:has(.multi-model-card:nth-child(4)) .multi-model-card,
    .multi-model-container[data-cols="3"] .multi-model-card:nth-last-child(n+4),
    .multi-model-container[data-cols="3"] .multi-model-card:nth-last-child(n+4)~.multi-model-card {
        width: calc((100% - 30px) / 3.15) !important;
        flex: 0 0 calc((100% - 30px) / 3.15) !important;
        scroll-snap-align: start !important;
    }
}

/* Layout Button Styles */
.compare-layout-btn {
    border-radius: 50% !important;
    border: none !important;
    background-color: transparent !important;
    color: #71717a !important;
    width: 32px !important;
    height: 32px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.compare-layout-btn i {
    font-size: 14px !important;
}

@media (max-width: 767px) {

    .compare-layout-btn[data-layout="2"],
    .compare-layout-btn[data-layout="3"] {
        opacity: 0.45 !important;
        cursor: not-allowed !important;
    }
}

.compare-layout-btn:hover {
    color: #18181b !important;
    background-color: rgba(120, 120, 120, 0.05) !important;
}

.theme-dark .compare-layout-btn:hover,
[data-theme="dark"] .compare-layout-btn:hover,
.theme-dark .compare-layout-btn:hover i,
[data-theme="dark"] .compare-layout-btn:hover i {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.theme-dark .compare-layout-btn,
[data-theme="dark"] .compare-layout-btn,
.theme-dark .compare-layout-btn i,
[data-theme="dark"] .compare-layout-btn i {
    color: #ffffff !important;
}

.compare-layout-btn.active-layout {
    background-color: #ffffff !important;
    color: #18181b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.theme-dark .compare-layout-btn.active-layout i,
[data-theme="dark"] .compare-layout-btn.active-layout i {
    color: #18181b !important;
}

.theme-dark .compare-layout-btn.active-layout,
[data-theme="dark"] .compare-layout-btn.active-layout {
    background-color: #ffffff !important;
    color: #18181b !important;
}

/* Add Button Styles */
.compare-add-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px dashed rgba(120, 120, 120, 0.3) !important;
    background-color: transparent !important;
    color: #71717a !important;
}

.compare-add-btn i {
    font-size: 13px !important;
}

.compare-add-btn:hover {
    color: #18181b !important;
    border-color: #71717a !important;
    background-color: rgba(120, 120, 120, 0.05) !important;
}

.theme-dark .compare-add-btn,
[data-theme="dark"] .compare-add-btn,
.theme-dark .compare-add-btn i,
[data-theme="dark"] .compare-add-btn i {
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #d4d4d8 !important;
}

.theme-dark .compare-add-btn:hover,
[data-theme="dark"] .compare-add-btn:hover,
.theme-dark .compare-add-btn:hover i,
[data-theme="dark"] .compare-add-btn:hover i {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Slider navigation overlays */
.multi-model-wrapper {
    position: relative !important;
    width: 100% !important;
}

.compare-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(120, 120, 120, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4b5563 !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.theme-dark .compare-nav-btn,
[data-theme="dark"] .compare-nav-btn {
    background-color: rgba(39, 39, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #d4d4d8 !important;
}

.compare-nav-btn:hover {
    background-color: #ffffff !important;
    transform: translateY(-50%) scale(1.1) !important;
    color: #111827 !important;
}

.theme-dark .compare-nav-btn:hover,
[data-theme="dark"] .compare-nav-btn:hover {
    background-color: #27272a !important;
    color: #ffffff !important;
}

.compare-nav-btn.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.compare-prev-btn {
    left: 4px !important;
}

.compare-next-btn {
    right: 4px !important;
}

@media (max-width: 768px) {

    /* Dim compare navigation buttons during scroll/touch interaction on mobile so underlying text is readable */
    body.is-chat-scrolling .compare-nav-btn.visible,
    body.is-touch-scrolling .compare-nav-btn.visible,
    .multi-model-wrapper.is-scrolling .compare-nav-btn.visible,
    .compare-nav-btn.scroll-dimmed {
        opacity: 0.35 !important;
        pointer-events: none !important;
    }

    .compare-nav-btn:active,
    .compare-nav-btn:focus {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media (min-width: 768px) {
    .compare-prev-btn {
        left: -2px !important;
    }

    .compare-next-btn {
        right: -2px !important;
    }
}

/* Style overrides for logo containers and icons inside nav buttons to make them larger */
.compare-nav-btn span {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
}

.compare-nav-btn i {
    font-size: 15px !important;
}

.multi-model-card:hover {
    box-shadow: 0 6px 12px -2px rgba(50, 50, 93, 0.08), 0 3px 7px -3px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.multi-model-card.active-card {
    border-color: #3b82f6 !important;
    border-width: 2px !important;
    box-shadow: 0 0 14px 2px rgba(59, 130, 246, 0.18) !important;
}

.multi-model-card.is-correct {
    border-color: #10b981 !important;
    border-width: 2px !important;
    box-shadow: 0 0 14px 2px rgba(16, 185, 129, 0.18) !important;
}

.multi-model-card.is-correct .multi-model-card-header {
    background-color: #f0fdf4 !important;
    border-bottom-color: #d1fae5 !important;
}

.multi-model-card.is-correct .multi-model-card-footer {
    background-color: #f0fdf4 !important;
    border-top-color: #d1fae5 !important;
}

.multi-model-card.is-correct .btn-pick-correct {
    background-color: #10b981 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.multi-model-card.is-correct .btn-pick-correct:hover {
    background-color: #059669 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}

.turn-evaluation-warning {
    border-radius: 0 0 8px 8px !important;
    font-weight: 500 !important;
    display: flex;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    border-style: solid !important;
    border-width: 1px 0 0 0 !important;
    transition: all 0.3s ease !important;
}

.turn-evaluation-warning.bg-amber-50 {
    background-color: #e8e8e8 !important;
    border-top-color: #fde8bb !important;
    color: #92400e !important;
}

.turn-evaluation-warning.bg-emerald-50 {
    background-color: #f0fdf4 !important;
    border-top-color: #bbf7d0 !important;
    color: #166534 !important;
}

.theme-dark .turn-evaluation-warning.bg-amber-50,
[data-theme="dark"] .turn-evaluation-warning.bg-amber-50 {
    background-color: rgba(120, 53, 15, 0.25) !important;
    border-top-color: #92400e !important;
    color: #d97706 !important;
}

.theme-dark .turn-evaluation-warning.bg-amber-50 .text-amber-500,
[data-theme="dark"] .turn-evaluation-warning.bg-amber-50 .text-amber-500 {
    color: #d97706 !important;
}

.theme-dark .turn-evaluation-warning.bg-amber-50 .text-amber-800,
[data-theme="dark"] .turn-evaluation-warning.bg-amber-50 .text-amber-800 {
    color: #d97706 !important;
}

.theme-dark .turn-evaluation-warning.bg-emerald-50,
[data-theme="dark"] .turn-evaluation-warning.bg-emerald-50 {
    background-color: rgba(6, 78, 59, 0.15) !important;
    border-top-color: #059669 !important;
    color: #a7f3d0 !important;
}

.theme-dark .multi-model-card.is-correct,
[data-theme="dark"] .multi-model-card.is-correct {
    border-color: #10b981 !important;
    box-shadow: 0 0 14px 2px rgba(16, 185, 129, 0.25) !important;
}

.theme-dark .multi-model-card.is-correct .multi-model-card-header,
[data-theme="dark"] .multi-model-card.is-correct .multi-model-card-header {
    background-color: #064e3b !important;
    border-bottom-color: #047857 !important;
}

.theme-dark .multi-model-card.is-correct .multi-model-card-footer,
[data-theme="dark"] .multi-model-card.is-correct .multi-model-card-footer {
    background-color: #064e3b !important;
    border-top-color: #047857 !important;
}

.theme-dark .multi-model-card.is-correct .btn-pick-correct,
[data-theme="dark"] .multi-model-card.is-correct .btn-pick-correct {
    background-color: #059669 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.theme-dark .multi-model-card.is-correct .btn-pick-correct:hover,
[data-theme="dark"] .multi-model-card.is-correct .btn-pick-correct:hover {
    background-color: #047857 !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
}

.multi-model-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-bottom: 1.5px solid #09090b !important;
    background-color: #f8fafc !important;
    user-select: none !important;
}

.multi-model-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 3px 6px !important;
    margin-top: auto !important;
    border-top: 1.5px solid #09090b !important;
    background-color: #f8fafc !important;
    user-select: none !important;
    gap: 6px !important;
}

.theme-dark .multi-model-card-footer,
[data-theme="dark"] .multi-model-card-footer {
    border-top: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    background-color: #18181b !important;
}

.model-card-cost {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
}

.cost-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 8px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.25;
    border: 1px solid #e4e4e7;
    background-color: #ffffff;
    color: #52525b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.cost-badge:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

.cost-badge-icon {
    font-size: 11px;
    color: #d97706;
    line-height: 1;
    flex-shrink: 0;
}

.cost-badge-label {
    font-size: 11px;
    font-weight: 500;
    color: #71717a;
    line-height: 1;
}

.cost-badge-val {
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: #18181b;
    line-height: 1;
}

.theme-dark .cost-badge,
[data-theme="dark"] .cost-badge {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: #202024;
    color: #d4d4d8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.theme-dark .cost-badge:hover,
[data-theme="dark"] .cost-badge:hover {
    background-color: #27272a;
    border-color: rgba(255, 255, 255, 0.2);
}

.theme-dark .cost-badge-icon,
[data-theme="dark"] .cost-badge-icon {
    color: #fbbf24;
}

.theme-dark .cost-badge-label,
[data-theme="dark"] .cost-badge-label {
    color: #a1a1aa;
}

.theme-dark .cost-badge-val,
[data-theme="dark"] .cost-badge-val {
    color: #f4f4f5;
}

.multi-model-card.is-correct .cost-badge {
    border-color: #86efac;
    background-color: #f0fdf4;
}

.multi-model-card.is-correct .cost-badge-icon {
    color: #16a34a;
}

.multi-model-card.is-correct .cost-badge-label {
    color: #15803d;
}

.multi-model-card.is-correct .cost-badge-val {
    color: #14532d;
}

.theme-dark .multi-model-card.is-correct .cost-badge,
[data-theme="dark"] .multi-model-card.is-correct .cost-badge {
    background-color: rgba(6, 78, 59, 0.3);
    border-color: rgba(34, 197, 94, 0.35);
}

.theme-dark .multi-model-card.is-correct .cost-badge-icon,
[data-theme="dark"] .multi-model-card.is-correct .cost-badge-icon {
    color: #4ade80;
}

.theme-dark .multi-model-card.is-correct .cost-badge-label,
[data-theme="dark"] .multi-model-card.is-correct .cost-badge-label {
    color: #86efac;
}

.theme-dark .multi-model-card.is-correct .cost-badge-val,
[data-theme="dark"] .multi-model-card.is-correct .cost-badge-val {
    color: #bbf7d0;
}

.cost-badge-byok {
    border-color: #bfdbfe;
    background-color: #eff6ff;
}

.cost-badge-byok .cost-badge-icon {
    color: #2563eb;
}

.cost-badge-byok .cost-badge-label {
    color: #1d4ed8;
}

.theme-dark .cost-badge-byok,
[data-theme="dark"] .cost-badge-byok {
    background-color: rgba(30, 58, 138, 0.3);
    border-color: rgba(59, 130, 246, 0.35);
}

.theme-dark .cost-badge-byok .cost-badge-icon,
[data-theme="dark"] .cost-badge-byok .cost-badge-icon {
    color: #60a5fa;
}

.theme-dark .cost-badge-byok .cost-badge-label,
[data-theme="dark"] .cost-badge-byok .cost-badge-label {
    color: #93c5fd;
}

@media (max-width: 480px) {
    .cost-badge {
        padding: 2px 6px;
        gap: 3.5px;
        font-size: 10px;
    }

    .cost-badge-icon {
        font-size: 10px;
    }

    .cost-badge-label {
        font-size: 10px;
    }

    .cost-badge-val {
        font-size: 10px;
    }
}

.btn-pick-correct {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin-left: auto !important;
    padding: 2.5px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    border: 1px solid #e4e4e7 !important;
    background-color: #ffffff !important;
    color: #52525b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.btn-pick-correct:hover {
    background-color: #ecfdf5 !important;
    color: #059669 !important;
    border-color: #a7f3d0 !important;
}

.theme-dark .btn-pick-correct,
[data-theme="dark"] .btn-pick-correct {
    background-color: #27272a !important;
    border-color: #3f3f46 !important;
    color: #d4d4d8 !important;
}

.theme-dark .btn-pick-correct:hover,
[data-theme="dark"] .btn-pick-correct:hover {
    background-color: #064e3b !important;
    color: #6ee7b7 !important;
    border-color: #059669 !important;
}

.multi-model-card-content {
    padding: 14px !important;
    flex: 1 1 auto !important;
    overflow-y: visible !important;
    height: auto !important;
    font-size: 13.5px !important;
    line-height: 1.625 !important;
}

/* Model Thinking Indicator & Dark Mode text styling */
.model-thinking {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px !important;
    line-height: 1.4;
    color: #71717a !important;
}

.theme-dark .qna-response-block,
[data-theme="dark"] .qna-response-block,
.theme-dark .multi-model-card,
[data-theme="dark"] .multi-model-card {
    background-color: #18181b !important;
}

.theme-dark #chatboxTranscript .bot-response-content,
.theme-dark #chatboxTranscript .bot-response-content *,
.theme-dark #chatboxTranscript .model-thinking,
.theme-dark #chatboxTranscript .model-thinking *,
.theme-dark #chatboxTranscript .chat-cursor,
[data-theme="dark"] #chatboxTranscript .bot-response-content,
[data-theme="dark"] #chatboxTranscript .bot-response-content *,
[data-theme="dark"] #chatboxTranscript .model-thinking,
[data-theme="dark"] #chatboxTranscript .model-thinking *,
[data-theme="dark"] #chatboxTranscript .chat-cursor {
    color: #ffffff !important;
}

/* Fix visibility of error text, links, and retry buttons in dark mode */
.theme-dark #chatboxTranscript .bot-response-content .text-rose-500,
.theme-dark #chatboxTranscript .bot-response-content .text-rose-500 *,
[data-theme="dark"] #chatboxTranscript .bot-response-content .text-rose-500,
[data-theme="dark"] #chatboxTranscript .bot-response-content .text-rose-500 * {
    color: #f43f5e !important;
}

.theme-dark #chatboxTranscript .bot-response-content .text-rose-500 a,
[data-theme="dark"] #chatboxTranscript .bot-response-content .text-rose-500 a {
    color: #fb7185 !important;
    text-decoration: underline !important;
}

.theme-dark #chatboxTranscript .bot-response-content .text-rose-500 a:hover,
[data-theme="dark"] #chatboxTranscript .bot-response-content .text-rose-500 a:hover {
    color: #fda4af !important;
}

.theme-dark .btn-retry-response,
[data-theme="dark"] .btn-retry-response {
    background-color: #e11d48 !important;
    color: #ffffff !important;
    border-color: #be123c !important;
}

.theme-dark .btn-retry-response:hover,
[data-theme="dark"] .btn-retry-response:hover {
    background-color: #f43f5e !important;
    color: #ffffff !important;
}

/* Make typing cursor color match the current text color dynamically */
.chat-cursor {
    background-color: currentColor !important;
}

/* Styling thinking blocks */
.thought-details {
    padding: 0 !important;
}

.thought-details summary {
    list-style: none !important;
    cursor: pointer !important;
    user-select: none !important;
}

.thought-details summary::-webkit-details-marker {
    display: none !important;
}

.thought-details summary::after {
    content: "\f054" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    margin-left: auto !important;
    color: #a1a1aa !important;
    display: inline-block !important;
    transition: transform 0.2s ease !important;
}

.thought-details[open] summary::after {
    transform: rotate(90deg) !important;
}

.thought-details>div {
    font-size: 11px !important;
    line-height: 1.5 !important;
}

.thought-details>div * {
    font-size: 11px !important;
}

.thought-details>div pre code {
    font-size: 10.5px !important;
}

/* Add Model Dropdown Menu */
.add-model-dropdown {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.12) !important;
}

.theme-dark .add-model-dropdown,
[data-theme="dark"] .add-model-dropdown {
    background-color: #1f1f23 !important;
    border-color: #2d2d30 !important;
}

.add-model-dropdown button {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 12px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.add-model-dropdown button:hover {
    background-color: #f1f5f9 !important;
}

.theme-dark .add-model-dropdown button:hover,
[data-theme="dark"] .add-model-dropdown button:hover {
    background-color: #2d2d30 !important;
}

/* Drag and drop reordering visual feedback and cursors */
.multi-model-card-header {
    cursor: grab !important;
}

.multi-model-card-header:active {
    cursor: grabbing !important;
}

.multi-model-card-header button,
.multi-model-card-header a,
.multi-model-card-header i {
    cursor: pointer !important;
}

.multi-model-card.drag-over-swap {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    background-color: rgba(240, 253, 250, 0.6) !important;
    transform: scale(1.01) !important;
}

/* Premium Markdown Tables Styling */
.table-responsive-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    border-radius: 8px !important;
    border: 1px solid #e4e4e7 !important;
    /* border-zinc-200 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

.main-response-text table,
.qna-response-block table,
.bot-response-content table,
#editorPreview table {
    width: 100%;
    min-width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
}

.main-response-text thead,
.qna-response-block thead,
.bot-response-content thead,
#editorPreview thead {
    background-color: #f4f4f5 !important;
    /* bg-zinc-100 */
}

.main-response-text th,
.qna-response-block th,
.bot-response-content th,
#editorPreview th {
    color: #18181b !important;
    /* text-zinc-900 */
    font-weight: 600 !important;
    padding: 10px 14px !important;
    border-bottom: 2px solid #e4e4e7 !important;
    border-right: 1px solid #e4e4e7 !important;
}

.main-response-text th:last-child,
.qna-response-block th:last-child,
.bot-response-content th:last-child,
#editorPreview th:last-child {
    border-right: none !important;
}

.main-response-text td,
.qna-response-block td,
.bot-response-content td,
#editorPreview td {
    padding: 10px 14px !important;
    border-bottom: 1px solid #e4e4e7 !important;
    border-right: 1px solid #e4e4e7 !important;
    color: #3f3f46 !important;
    /* text-zinc-750 */
}

.main-response-text td:last-child,
.qna-response-block td:last-child,
.bot-response-content td:last-child,
#editorPreview td:last-child {
    border-right: none !important;
}

.main-response-text tr:last-child td,
.qna-response-block tr:last-child td,
.bot-response-content tr:last-child td,
#editorPreview tr:last-child td {
    border-bottom: none !important;
}

/* Zebra Striping */
.main-response-text tr:nth-child(even),
.qna-response-block tr:nth-child(even),
.bot-response-content tr:nth-child(even),
#editorPreview tr:nth-child(even) {
    background-color: rgba(244, 244, 245, 0.4) !important;
    /* bg-zinc-100/40 */
}

/* Hover effect */
.main-response-text tr:hover,
.qna-response-block tr:hover,
.bot-response-content tr:hover,
#editorPreview tr:hover {
    background-color: rgba(244, 244, 245, 0.8) !important;
}

/* Dark Mode Override for Tables */
.theme-dark .table-responsive-wrapper,
[data-theme="dark"] .table-responsive-wrapper {
    border-color: #3f3f46 !important;
    /* border-zinc-700 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25) !important;
}

.theme-dark .main-response-text thead,
.theme-dark .qna-response-block thead,
.theme-dark .bot-response-content thead,
.theme-dark #editorPreview thead,
[data-theme="dark"] .main-response-text thead,
[data-theme="dark"] .qna-response-block thead,
[data-theme="dark"] .bot-response-content thead,
[data-theme="dark"] #editorPreview thead {
    background-color: #27272a !important;
    /* bg-zinc-800 */
}

.theme-dark .main-response-text th,
.theme-dark .qna-response-block th,
.theme-dark .bot-response-content th,
.theme-dark #editorPreview th,
[data-theme="dark"] .main-response-text th,
[data-theme="dark"] .qna-response-block th,
[data-theme="dark"] .bot-response-content th,
[data-theme="dark"] #editorPreview th {
    color: #f4f4f5 !important;
    /* text-zinc-100 */
    border-bottom: 2px solid #3f3f46 !important;
    border-right: 1px solid #3f3f46 !important;
}

.theme-dark .main-response-text td,
.theme-dark .qna-response-block td,
.theme-dark .bot-response-content td,
.theme-dark #editorPreview td,
[data-theme="dark"] .main-response-text td,
[data-theme="dark"] .qna-response-block td,
[data-theme="dark"] .bot-response-content td,
[data-theme="dark"] #editorPreview td {
    border-bottom: 1px solid #3f3f46 !important;
    border-right: 1px solid #3f3f46 !important;
    color: #e4e4e7 !important;
    /* text-zinc-200 */
}

.theme-dark .main-response-text tr:nth-child(even),
.theme-dark .qna-response-block tr:nth-child(even),
.theme-dark .bot-response-content tr:nth-child(even),
.theme-dark #editorPreview tr:nth-child(even),
[data-theme="dark"] .main-response-text tr:nth-child(even),
[data-theme="dark"] .qna-response-block tr:nth-child(even),
[data-theme="dark"] .bot-response-content tr:nth-child(even),
[data-theme="dark"] #editorPreview tr:nth-child(even) {
    background-color: rgba(39, 39, 42, 0.4) !important;
    /* bg-zinc-800/40 */
}

.theme-dark .main-response-text tr:hover,
.theme-dark .qna-response-block tr:hover,
.theme-dark .bot-response-content tr:hover,
.theme-dark #editorPreview tr:hover,
[data-theme="dark"] .main-response-text tr:hover,
[data-theme="dark"] .qna-response-block tr:hover,
[data-theme="dark"] .bot-response-content tr:hover,
[data-theme="dark"] #editorPreview tr:hover {
    background-color: rgba(39, 39, 42, 0.8) !important;
}

.theme-dark .multi-model-card.drag-over-swap,
[data-theme="dark"] .multi-model-card.drag-over-swap {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    background-color: rgba(13, 148, 136, 0.15) !important;
}

/* Table Resize Handles */
.main-response-text th,
.qna-response-block th,
.bot-response-content th,
#editorPreview th {
    position: relative !important;
}

.col-resize-handle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 6px !important;
    height: 100% !important;
    cursor: col-resize !important;
    user-select: none !important;
    z-index: 50 !important;
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.col-resize-handle:hover,
.col-resize-handle.resizing {
    background-color: rgba(59, 130, 246, 0.6) !important;
}

.main-response-text td,
.qna-response-block td,
.bot-response-content td,
#editorPreview td {
    position: relative !important;
}

.row-resize-handle {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 6px !important;
    cursor: row-resize !important;
    user-select: none !important;
    z-index: 50 !important;
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.row-resize-handle:hover,
.row-resize-handle.resizing {
    background-color: rgba(59, 130, 246, 0.6) !important;
}

table.table-resizing {
    user-select: none !important;
}

/* Hide/lock comparison, retry and warning controls on previous turns once a new turn is started */
#chatboxTranscript .chat-qa-thread:not(:last-child) .btn-retry-response,
#chatboxTranscript .chat-qa-thread:not(:last-child) .compare-plus-btn,
#chatboxTranscript .chat-qa-thread:not(:last-child) .turn-evaluation-warning {
    display: none !important;
}

/* Drag and Drop Premium Aesthetics */
body.dragging-chat .chat-item-actions {
    display: none !important;
}

#folders-accordion-content {
    border: 1px solid transparent !important;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.folders-tree-drag-hover {
    background-color: rgba(59, 130, 246, 0.05) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.folder-drag-hover {
    background-color: rgba(59, 130, 246, 0.08) !important;
    transform: scale(1.01);
    transition: all 0.2s ease;
}

.unassigned-drag-hover {
    background-color: rgba(59, 130, 246, 0.05) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 0.75rem;
    min-height: 48px;
    transition: all 0.2s ease;
}

/* Disable pointer-events on children during drag to prevent dragenter/dragleave flickering */
body.dragging-chat .chat-history-wrapper:not(.dragging) {
    pointer-events: none !important;
}

body.dragging-chat .folder-drop-zone * {
    pointer-events: none !important;
}

/* ============================================================= */
/* FILE EXPLORER - Windows Explorer Style                         */
/* ============================================================= */

/* Explorer Layout */
.explorer-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
}

.theme-dark .explorer-layout,
[data-theme="dark"] .explorer-layout {
    background-color: #18181b;
}

/* Explorer Toolbar */
.explorer-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
    flex-shrink: 0;
    min-height: 40px;
}

.theme-dark .explorer-toolbar,
[data-theme="dark"] .explorer-toolbar {
    background: linear-gradient(180deg, #27272a 0%, #1f1f23 100%);
    border-bottom-color: #3f3f46;
}

.explorer-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.explorer-toolbar-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #cbd5e1;
}

.explorer-toolbar-btn.active {
    background: #dbeafe;
    color: #2563eb;
    border-color: #93c5fd;
}

.theme-dark .explorer-toolbar-btn:hover,
[data-theme="dark"] .explorer-toolbar-btn:hover {
    background: #3f3f46;
    color: #e4e4e7;
    border-color: #52525b;
}

.theme-dark .explorer-toolbar-btn.active,
[data-theme="dark"] .explorer-toolbar-btn.active {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.4);
}

.explorer-toolbar-sep {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
    margin: 0 4px;
    flex-shrink: 0;
}

.theme-dark .explorer-toolbar-sep,
[data-theme="dark"] .explorer-toolbar-sep {
    background: #3f3f46;
}

/* Address / Breadcrumb Bar */
.explorer-address-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    flex-shrink: 0;
    min-height: 36px;
}

.theme-dark .explorer-address-bar,
[data-theme="dark"] .explorer-address-bar {
    background: #18181b;
    border-bottom-color: #3f3f46;
}

.explorer-breadcrumb {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 10px;
    color: #475569;
}

.theme-dark .explorer-breadcrumb,
[data-theme="dark"] .explorer-breadcrumb {
    background: #27272a;
    border-color: #3f3f46;
    color: #a1a1aa;
}

.explorer-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.12s;
    white-space: nowrap;
}

.explorer-breadcrumb-item:hover {
    background: #dbeafe;
    color: #2563eb;
}

.theme-dark .explorer-breadcrumb-item:hover,
[data-theme="dark"] .explorer-breadcrumb-item:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.explorer-breadcrumb-sep {
    color: #94a3b8;
    margin: 0 1px;
}

/* Explorer Search in address bar */
.explorer-search-inline {
    position: relative;
    width: 200px;
    flex-shrink: 0;
}

.explorer-search-inline input {
    width: 100%;
    padding: 4px 8px 4px 28px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    color: #1e293b;
    outline: none;
    transition: all 0.15s;
}

.explorer-search-inline input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    background: #ffffff;
}

.theme-dark .explorer-search-inline input,
[data-theme="dark"] .explorer-search-inline input {
    background: #27272a;
    border-color: #3f3f46;
    color: #e4e4e7;
}

.theme-dark .explorer-search-inline input:focus,
[data-theme="dark"] .explorer-search-inline input:focus {
    border-color: rgba(59, 130, 246, 0.5);
    background: #1f1f23;
}

.explorer-search-inline i {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

/* Explorer Body (Main content + optional detail panel) */
.explorer-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Main Content Area */
.explorer-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    min-width: 0;
    position: relative;
}

/* Drop Zone overlay inside Explorer Content */
.explorer-drop-overlay {
    position: absolute;
    inset: 8px;
    border: 2.5px dashed #93c5fd;
    border-radius: 12px;
    background: rgba(219, 234, 254, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

.explorer-drop-overlay.visible {
    display: flex;
}

.theme-dark .explorer-drop-overlay,
[data-theme="dark"] .explorer-drop-overlay {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.1);
}

/* Grid View (Icons) */
.explorer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 4px;
    padding: 4px;
}

.explorer-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 6px 8px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: default;
    transition: all 0.12s ease;
    position: relative;
    user-select: none;
    min-height: 100px;
}

/*
.explorer-grid-item:hover {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.15);
}
*/
.explorer-grid-item.selected {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.4);
}

/*
.explorer-grid-item.selected:hover {
    background: rgba(59, 130, 246, 0.15);
}
.theme-dark .explorer-grid-item:hover,
[data-theme="dark"] .explorer-grid-item:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}
*/
.theme-dark .explorer-grid-item.selected,
[data-theme="dark"] .explorer-grid-item.selected {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
}

.explorer-grid-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border-radius: 8px;
    flex-shrink: 0;
    position: relative;
}

/* Type-specific icon backgrounds */
.explorer-grid-icon.type-image {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #3b82f6;
}

.explorer-grid-icon.type-document {
    background: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 100%);
    color: #6366f1;
}

.explorer-grid-icon.type-video {
    background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
    color: #8b5cf6;
}

.explorer-grid-icon.type-audio {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    color: #f59e0b;
}

.explorer-grid-icon.type-archive {
    background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
    color: #10b981;
}

.explorer-grid-icon.type-other {
    background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
    color: #64748b;
}

.theme-dark .explorer-grid-icon.type-image,
[data-theme="dark"] .explorer-grid-icon.type-image {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.08) 100%);
}

.theme-dark .explorer-grid-icon.type-document,
[data-theme="dark"] .explorer-grid-icon.type-document {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.08) 100%);
}

.theme-dark .explorer-grid-icon.type-video,
[data-theme="dark"] .explorer-grid-icon.type-video {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.08) 100%);
}

.theme-dark .explorer-grid-icon.type-audio,
[data-theme="dark"] .explorer-grid-icon.type-audio {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.08) 100%);
}

.theme-dark .explorer-grid-icon.type-archive,
[data-theme="dark"] .explorer-grid-icon.type-archive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.08) 100%);
}

.theme-dark .explorer-grid-icon.type-other,
[data-theme="dark"] .explorer-grid-icon.type-other {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.2) 0%, rgba(100, 116, 139, 0.08) 100%);
}

/* Shared badge on grid icon */
.explorer-grid-icon .shared-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.theme-dark .explorer-grid-icon .shared-indicator,
[data-theme="dark"] .explorer-grid-icon .shared-indicator {
    border-color: #18181b;
}

.explorer-grid-name {
    font-weight: 500;
    text-align: center;
    color: #1e293b;
    word-break: break-word;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.theme-dark .explorer-grid-name,
[data-theme="dark"] .explorer-grid-name {
    color: #e4e4e7;
}

/* List View (Details) */
.explorer-list {
    width: 100%;
    border-collapse: collapse;
}

.explorer-list thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 6px 12px;
    font-weight: 600;
    text-align: left;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.12s;
}

.explorer-list thead th:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.theme-dark .explorer-list thead th,
[data-theme="dark"] .explorer-list thead th {
    background: #27272a;
    border-bottom-color: #3f3f46;
    color: #a1a1aa;
}

.theme-dark .explorer-list thead th:hover,
[data-theme="dark"] .explorer-list thead th:hover {
    background: #3f3f46;
    color: #e4e4e7;
}

.explorer-list tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.1s;
    cursor: default;
}

/*
.explorer-list tbody tr:hover {
    background: rgba(59, 130, 246, 0.04);
}
*/
.explorer-list tbody tr.selected {
    background: rgba(59, 130, 246, 0.08);
}

/*
.explorer-list tbody tr.selected:hover {
    background: rgba(59, 130, 246, 0.12);
}
*/
.theme-dark .explorer-list tbody tr,
[data-theme="dark"] .explorer-list tbody tr {
    border-bottom-color: #27272a;
}

/*
.theme-dark .explorer-list tbody tr:hover,
[data-theme="dark"] .explorer-list tbody tr:hover {
    background: rgba(59, 130, 246, 0.06);
}
*/
.theme-dark .explorer-list tbody tr.selected,
[data-theme="dark"] .explorer-list tbody tr.selected {
    background: rgba(59, 130, 246, 0.12);
}

.explorer-list tbody td {
    padding: 6px 12px;
    color: #475569;
    white-space: nowrap;
}

.theme-dark .explorer-list tbody td,
[data-theme="dark"] .explorer-list tbody td {
    color: #a1a1aa;
}

.explorer-list-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #1e293b;
}

.theme-dark .explorer-list-name,
[data-theme="dark"] .explorer-list-name {
    color: #e4e4e7;
}

.explorer-list-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Detail Panel (Right Side) */
.explorer-detail-panel {
    width: 260px;
    flex-shrink: 0;
    border-left: 1px solid #e2e8f0;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.2s ease;
}

.explorer-detail-panel.hidden {
    width: 0;
    border-left: none;
    overflow: hidden;
}

.theme-dark .explorer-detail-panel,
[data-theme="dark"] .explorer-detail-panel {
    background: #1f1f23;
    border-left-color: #3f3f46;
}

.explorer-detail-header {
    padding: 4px 12px 8px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
    background: transparent;
}

.theme-dark .explorer-detail-header,
[data-theme="dark"] .explorer-detail-header {
    border-bottom-color: #3f3f46;
}

.explorer-detail-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.explorer-detail-filename {
    font-weight: 700;
    color: #1e293b;
    word-break: break-word;
    line-height: 1.3;
}

.theme-dark .explorer-detail-filename,
[data-theme="dark"] .explorer-detail-filename {
    color: #f4f4f5;
}

.explorer-detail-type {
    color: #94a3b8;
    margin-top: 2px;
}

.explorer-detail-meta {
    padding: 12px 16px;
    flex: 1;
}

.explorer-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.theme-dark .explorer-detail-row,
[data-theme="dark"] .explorer-detail-row {
    border-bottom-color: #27272a;
}

.explorer-detail-label {
    color: #94a3b8;
    font-weight: 500;
    flex-shrink: 0;
}

.explorer-detail-value {
    color: #334155;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.theme-dark .explorer-detail-value,
[data-theme="dark"] .explorer-detail-value {
    color: #d4d4d8;
}

.explorer-detail-actions {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.theme-dark .explorer-detail-actions,
[data-theme="dark"] .explorer-detail-actions {
    border-top-color: #3f3f46;
}

.explorer-detail-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: all 0.12s;
}

.explorer-detail-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

.explorer-detail-btn.danger:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.theme-dark .explorer-detail-btn,
[data-theme="dark"] .explorer-detail-btn {
    background: #27272a;
    border-color: #3f3f46;
    color: #a1a1aa;
}

.theme-dark .explorer-detail-btn:hover,
[data-theme="dark"] .explorer-detail-btn:hover {
    background: #3f3f46;
    color: #e4e4e7;
}

.theme-dark .explorer-detail-btn.danger:hover,
[data-theme="dark"] .explorer-detail-btn.danger:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

/* Context Menu */
.explorer-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 4px;
    animation: explorerMenuIn 0.12s ease-out;
    overflow: hidden;
}

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

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

.theme-dark .explorer-context-menu,
[data-theme="dark"] .explorer-context-menu {
    background: #27272a;
    border-color: #3f3f46;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.explorer-ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.1s;
    white-space: nowrap;
}

.explorer-ctx-item:hover {
    background: #eff6ff;
    color: #2563eb;
}

.explorer-ctx-item.danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.theme-dark .explorer-ctx-item,
[data-theme="dark"] .explorer-ctx-item {
    color: #d4d4d8;
}

.theme-dark .explorer-ctx-item:hover,
[data-theme="dark"] .explorer-ctx-item:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.theme-dark .explorer-ctx-item.danger:hover,
[data-theme="dark"] .explorer-ctx-item.danger:hover {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}

.explorer-ctx-sep {
    height: 1px;
    background: #f1f5f9;
    margin: 3px 6px;
}

.theme-dark .explorer-ctx-sep,
[data-theme="dark"] .explorer-ctx-sep {
    background: #3f3f46;
}

.explorer-ctx-item i {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Status Bar */
.explorer-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    flex-shrink: 0;
    min-height: 28px;
}

.theme-dark .explorer-status-bar,
[data-theme="dark"] .explorer-status-bar {
    background: #1f1f23;
    border-top-color: #3f3f46;
    color: #71717a;
}

/* Explorer Empty State */
.explorer-empty-state {
    display: flex;
    min-height: 300px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: #64748b;
}

.explorer-empty-state.hidden {
    display: none !important;
}

.explorer-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: linear-gradient(145deg, #eff6ff, #f8fafc);
    color: #60a5fa;
    font-size: 28px;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.10);
}

.explorer-empty-copy h3 {
    margin: 0;
    color: #1e293b;
    font-size: 15px;
    font-weight: 700;
}

.explorer-empty-copy p {
    max-width: 280px;
    margin: 7px 0 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.6;
}

.explorer-empty-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 10px 17px;
    border: 0;
    border-radius: 9px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.explorer-empty-upload-btn:hover {
    background: #1d4ed8;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.30);
    transform: translateY(-1px);
}

.explorer-empty-hint {
    margin-top: 12px;
    color: #cbd5e1;
    font-size: 11px;
}

.theme-dark .explorer-empty-icon,
[data-theme="dark"] .explorer-empty-icon {
    border-color: rgba(96, 165, 250, 0.20);
    background: rgba(59, 130, 246, 0.10);
    color: #93c5fd;
}

.theme-dark .explorer-empty-copy h3,
[data-theme="dark"] .explorer-empty-copy h3 {
    color: #e4e4e7;
}

.theme-dark .explorer-empty-copy p,
[data-theme="dark"] .explorer-empty-copy p {
    color: #a1a1aa;
}

.theme-dark .explorer-empty-hint,
[data-theme="dark"] .explorer-empty-hint {
    color: #71717a;
}

/* Storage bar in explorer status */
.explorer-storage-bar-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.explorer-storage-mini-bar {
    width: 80px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}

.theme-dark .explorer-storage-mini-bar,
[data-theme="dark"] .explorer-storage-mini-bar {
    background: #3f3f46;
}

.explorer-storage-mini-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 99px;
    transition: width 0.3s ease;
}

/* Filter chips row */
.explorer-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.explorer-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.12s;
}

.explorer-filter-chip:hover,
.explorer-filter-chip.active {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #2563eb;
}

.theme-dark .explorer-filter-chip,
[data-theme="dark"] .explorer-filter-chip {
    background: #27272a;
    border-color: #3f3f46;
    color: #a1a1aa;
}

.theme-dark .explorer-filter-chip:hover,
.theme-dark .explorer-filter-chip.active,
[data-theme="dark"] .explorer-filter-chip:hover,
[data-theme="dark"] .explorer-filter-chip.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}

/* Rubber band selection */
.explorer-rubber-band {
    position: absolute;
    border: 1px solid rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.08);
    pointer-events: none;
    z-index: 100;
}

/* Prompt Library styles */
.prompt-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}

.prompt-filter-select:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}

.prompt-filter-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.prompt-view-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.prompt-view-btn:hover {
    color: #0f172a;
    background-color: #f1f5f9;
}

.prompt-view-btn.active {
    color: #0f172a;
    background-color: #e2e8f0;
}

#promptsListContainer.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    align-items: stretch;
}

@media (min-width: 640px) {
    #promptsListContainer.grid-view {
        gap: 16px;
    }
}

#promptsListContainer.list-view {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 640px) {
    #promptsListContainer.list-view {
        gap: 10px;
    }
}

.prompt-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
    color: #94a3b8;
}

.prompt-toolbar-card {
    border-radius: 12px !important;
}

.prompt-toolbar-input,
.prompt-toolbar-select,
.prompt-toolbar-btn,
.prompt-toolbar-switcher {
    border-radius: 8px !important;
}

.prompt-card {
    border-radius: 4px !important;
}

@media (max-width: 639px) {
    .prompt-card {
        border-radius: 8px !important;
    }
}

.prompt-card-icon,
.prompt-card-tag,
.prompt-card-action-btn {
    border-radius: 4px !important;
}

@media (min-width: 768px) and (max-width: 1023px) {

    /* Hide the workspace content wrappers (chats, apps, models, etc.) when the Notes editor is active */
    body:has(#nav-quick-note-btn.active) .workspace-tab-wrapper {
        display: none !important;
    }

    /* Let the editor panel occupy the full width minus the left sidebar */
    body:has(#nav-quick-note-btn.active) #editorPanelWrapper {
        width: calc(100% - 72px) !important;
        max-width: calc(100% - 72px) !important;
        flex: 1 1 calc(100% - 72px) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: flex !important;
    }

    /* Ensure the splitWorkspaceContainer only takes the width of the sidebar */
    body:has(#nav-quick-note-btn.active) #splitWorkspaceContainer {
        width: 72px !important;
        max-width: 72px !important;
        flex: 0 0 72px !important;
    }
}


/* Marquee Train Styles */
@keyframes modelsTrainTrackWs {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.models-train-container-ws {
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    touch-action: pan-y;
}

.models-train-track-ws {
    display: flex;
    gap: 0.875rem;
    width: max-content;
    animation: modelsTrainTrackWs 70s linear infinite;
    will-change: transform;
    touch-action: pan-y;
}

@media (hover: hover) and (pointer: fine) {
    .models-train-container-ws:hover .models-train-track-ws {
        animation-play-state: paused;
    }
}

/* ==========================================================================
   Chat Text Highlighter & Floating Selection Toolbar (.chat-highlight)
   ========================================================================== */
.chat-highlight {
    background-color: rgba(253, 224, 71, 0.72) !important;
    color: #1c1917 !important;
    border-radius: 3px !important;
    padding: 1px 3px !important;
    margin: 0 -1px !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    cursor: pointer !important;
    border-bottom: 2px solid rgba(245, 158, 11, 0.55) !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.chat-highlight:hover {
    background-color: rgba(250, 204, 21, 0.95) !important;
    border-bottom-color: rgba(217, 119, 6, 0.9) !important;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.3) !important;
}

html.dark .chat-highlight,
.dark .chat-highlight {
    background-color: rgba(245, 158, 11, 0.28) !important;
    color: #fef08a !important;
    border-bottom-color: rgba(245, 158, 11, 0.7) !important;
}

html.dark .chat-highlight:hover,
.dark .chat-highlight:hover {
    background-color: rgba(245, 158, 11, 0.45) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(251, 191, 36, 0.9) !important;
    box-shadow: 0 1px 6px rgba(245, 158, 11, 0.35) !important;
}

/* Floating Action Toolbar */
#chatHighlightToolbar {
    position: fixed;
    z-index: 99999;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 9999px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
    transform: translate(-50%, -100%);
    margin-top: -8px;
    user-select: none;
    pointer-events: auto;
    animation: chatHlToolbarPop 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

html.dark #chatHighlightToolbar,
.dark #chatHighlightToolbar {
    background: #18181b;
    border-color: #27272a;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.3);
}

@keyframes chatHlToolbarPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -90%) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1);
    }
}

#chatHighlightToolbar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

html.dark #chatHighlightToolbar::after,
.dark #chatHighlightToolbar::after {
    border-color: #18181b transparent transparent transparent;
}

.chat-hl-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.chat-hl-btn-add {
    background: #fef08a;
    color: #854d0e;
}

.chat-hl-btn-add:hover {
    background: #fde047;
    color: #713f12;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(234, 179, 8, 0.25);
}

html.dark .chat-hl-btn-add,
.dark .chat-hl-btn-add {
    background: rgba(245, 158, 11, 0.3);
    color: #fef08a;
}

html.dark .chat-hl-btn-add:hover,
.dark .chat-hl-btn-add:hover {
    background: rgba(245, 158, 11, 0.48);
    color: #ffffff;
}

.chat-hl-btn-remove {
    background: #fee2e2;
    color: #b91c1c;
}

.chat-hl-btn-remove:hover {
    background: #fecaca;
    color: #991b1b;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

html.dark .chat-hl-btn-remove,
.dark .chat-hl-btn-remove {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

html.dark .chat-hl-btn-remove:hover,
.dark .chat-hl-btn-remove:hover {
    background: rgba(239, 68, 68, 0.4);
    color: #ffffff;
}

.chat-hl-badge-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-family: monospace;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.08);
    color: currentColor;
    margin-left: 2px;
}