:root {
            --llm-color-brand-500: #22d3ee;
            --llm-color-brand-600: #0891b2;
            --llm-color-accent-500: #38bdf8;
            --llm-color-success-500: #22c55e;
            --llm-color-warning-500: #facc15;
            --llm-color-danger-500: #f43f5e;
            --llm-color-slate-950: #020617;
            --llm-color-slate-900: #0f172a;
            --llm-color-slate-700: #334155;
            --llm-color-slate-400: #94a3b8;
            --llm-color-slate-200: #e2e8f0;
            --llm-color-white: #ffffff;
            --llm-font-size-2xs: 11px;
            --llm-font-size-xs: 12px;
            --llm-font-size-sm: 14px;
            --llm-font-size-md: 16px;
            --llm-font-size-lg: 20px;
            --llm-font-size-xl: 24px;
            --llm-space-1: 4px;
            --llm-space-2: 8px;
            --llm-space-3: 12px;
            --llm-space-4: 16px;
            --llm-space-5: 20px;
            --llm-space-6: 24px;
            --llm-space-8: 32px;
            --llm-space-10: 40px;
            --llm-radius-md: 10px;
            --llm-shadow-sm: 0 6px 16px rgba(2, 6, 23, 0.28);
            --llm-shadow-md: 0 16px 32px rgba(2, 6, 23, 0.36);
            --llm-shadow-lg: 0 24px 52px rgba(2, 6, 23, 0.52);
            --bg-a: #040710;
            --bg-b: #0b1530;
            --panel: rgba(10, 16, 34, 0.8);
            --border: rgba(133, 167, 218, 0.24);
            --llm-settings-scroll-thumb: #4a4a4a;
            --llm-settings-scroll-track: #2a2a2a;
            --llm-settings-scroll-thumb-hover: #585858;
            --llm-settings-scroll-thumb-active: #434343;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Space Grotesk', sans-serif;
            background:
                radial-gradient(70% 90% at 8% 10%, rgba(34, 211, 238, 0.16), transparent 65%),
                radial-gradient(85% 80% at 92% 0%, rgba(56, 189, 248, 0.13), transparent 65%),
                linear-gradient(155deg, var(--bg-a), var(--bg-b));
            min-height: 100vh;
            color: #e2e8f0;
        }

        body,
        header,
        .panel,
        .chat-tab,
        .settings-tab-btn,
        #settings-window,
        #settings-drag-handle,
        .settings-sidebar,
        #chat-form {
            transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
        }

        :root[data-theme="light"] {
            --bg-a: #f8fbff;
            --bg-b: #eaf1fb;
            --panel: rgba(255, 255, 255, 0.96);
            --border: rgba(100, 116, 139, 0.65);
            --llm-settings-scroll-thumb: #c1c1c1;
            --llm-settings-scroll-track: #f1f1f1;
            --llm-settings-scroll-thumb-hover: #e7e7e7;
            --llm-settings-scroll-thumb-active: #aeaeae;
        }

        :root[data-theme="light"] body {
            color: #0f172a;
        }

        :root[data-theme="light"] header,
        :root[data-theme="light"] #settings-drag-handle,
        :root[data-theme="light"] .settings-sidebar {
            background: #f1f5f9 !important;
            border-color: #94a3b8 !important;
            backdrop-filter: none !important;
        }

        :root[data-theme="light"] #model-status-text {
            color: #0f172a !important;
        }

        :root[data-theme="light"] #settings-window {
            background: #f8fafc !important;
            color: #0f172a !important;
        }

        :root[data-theme="light"] #settings-window article,
        :root[data-theme="light"] #settings-window table,
        :root[data-theme="light"] #settings-window tbody,
        :root[data-theme="light"] #settings-window thead tr,
        :root[data-theme="light"] #settings-window tr {
            background: #ffffff !important;
            border-color: #94a3b8 !important;
        }

        :root[data-theme="light"] #settings-window h2,
        :root[data-theme="light"] #settings-window p,
        :root[data-theme="light"] #settings-window label,
        :root[data-theme="light"] #settings-window th,
        :root[data-theme="light"] #settings-window td,
        :root[data-theme="light"] #settings-window span,
        :root[data-theme="light"] #settings-window div {
            color: #0f172a !important;
        }

        :root[data-theme="light"] #settings-window input,
        :root[data-theme="light"] #settings-window textarea,
        :root[data-theme="light"] #settings-window select {
            background: #ffffff !important;
            color: #0f172a !important;
            border-color: #64748b !important;
        }

        :root[data-theme="light"] #settings-window input:focus-visible,
        :root[data-theme="light"] #settings-window textarea:focus-visible,
        :root[data-theme="light"] #settings-window select:focus-visible {
            outline: 2px solid #0369a1;
            outline-offset: 1px;
        }

        :root[data-theme="light"] .settings-tab-btn {
            background: #f1f5f9;
            border-color: #64748b;
            color: #0f172a;
        }

        :root[data-theme="light"] .settings-tab-btn:hover {
            background: #e2e8f0;
            border-color: #0369a1;
            color: #0f172a;
        }

        :root[data-theme="light"] .settings-tab-btn[aria-selected="true"] {
            background: #dbeafe;
            border-color: #0369a1;
            color: #0c4a6e;
        }

        :root[data-theme="light"] #open-settings-btn,
        :root[data-theme="light"] #chat-tab-add-btn,
        :root[data-theme="light"] #profile-identity-chip {
            background: #ffffff !important;
            border-color: #64748b !important;
            color: #0f172a !important;
        }

        :root[data-theme="light"] #open-settings-btn:hover,
        :root[data-theme="light"] #chat-tab-add-btn:hover {
            background: #e2e8f0 !important;
        }

        :root[data-theme="light"] .chat-tab {
            background: #ffffff;
            border-color: #94a3b8;
            color: #0f172a;
        }

        :root[data-theme="light"] .chat-tab:hover {
            background: #e2e8f0;
            border-color: #0369a1;
        }

        :root[data-theme="light"] .chat-tab.active {
            background: #dbeafe;
            border-color: #0369a1;
            color: #0f172a;
        }

        :root[data-theme="light"] .message-bubble {
            color: #0f172a !important;
        }

        :root[data-theme="light"] .message-bubble.mr-auto {
            background: #e2e8f0 !important;
            border-color: #64748b !important;
        }

        :root[data-theme="light"] .message-bubble.ml-auto {
            background: #dbeafe !important;
            border-color: #0369a1 !important;
        }

        :root[data-theme="oled"] {
            --bg-a: #000000;
            --bg-b: #000000;
            --panel: #000000;
            --border: #1f1f1f;
            --llm-settings-scroll-thumb: #4a4a4a;
            --llm-settings-scroll-track: #2a2a2a;
            --llm-settings-scroll-thumb-hover: #585858;
            --llm-settings-scroll-thumb-active: #434343;
        }

        :root[data-theme="system"] {
            --llm-settings-scroll-thumb: #4a4a4a;
            --llm-settings-scroll-track: #2a2a2a;
            --llm-settings-scroll-thumb-hover: #585858;
            --llm-settings-scroll-thumb-active: #434343;
        }

        @media (prefers-color-scheme: light) {
            :root[data-theme="system"] {
                --llm-settings-scroll-thumb: #c1c1c1;
                --llm-settings-scroll-track: #f1f1f1;
                --llm-settings-scroll-thumb-hover: #e7e7e7;
                --llm-settings-scroll-thumb-active: #aeaeae;
            }
        }

        :root[data-theme="oled"] body {
            background: #000000 !important;
            color: #c4c4c4;
        }

        :root[data-theme="oled"] header,
        :root[data-theme="oled"] .panel,
        :root[data-theme="oled"] #chat-form,
        :root[data-theme="oled"] #settings-window,
        :root[data-theme="oled"] #settings-drag-handle,
        :root[data-theme="oled"] .settings-sidebar {
            background: #000000 !important;
            border-color: #1f1f1f !important;
            color: #c4c4c4 !important;
            backdrop-filter: none !important;
            box-shadow: none !important;
        }

        :root[data-theme="oled"] #model-status-text,
        :root[data-theme="oled"] #token-speed-stats,
        :root[data-theme="oled"] #profile-identity-chip {
            color: #c4c4c4 !important;
            border-color: #2a2a2a !important;
            background: #000000 !important;
        }

        :root[data-theme="oled"] .chat-tab,
        :root[data-theme="oled"] .settings-tab-btn {
            background: #000000 !important;
            border-color: #2a2a2a !important;
            color: #c4c4c4 !important;
        }

        :root[data-theme="oled"] .chat-tab.active,
        :root[data-theme="oled"] .settings-tab-btn[aria-selected="true"] {
            background: #000000 !important;
            border-color: #4b5563 !important;
            color: #d4d4d4 !important;
        }

        :root[data-theme="oled"] .message-bubble {
            background: #000000 !important;
            border-color: #2a2a2a !important;
            color: #c4c4c4 !important;
        }

        :root[data-theme="oled"] input,
        :root[data-theme="oled"] textarea,
        :root[data-theme="oled"] select,
        :root[data-theme="oled"] button {
            background: #000000 !important;
            color: #c4c4c4 !important;
            border-color: #2a2a2a !important;
        }

        .panel {
            background: var(--panel);
            border: 1px solid var(--border);
            backdrop-filter: blur(14px);
        }

        #settings-window,
        #settings-window * {
            scrollbar-width: thin;
            scrollbar-color: var(--llm-settings-scroll-thumb) var(--llm-settings-scroll-track);
        }

        #settings-window::-webkit-scrollbar,
        #settings-window *::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        #settings-window::-webkit-scrollbar-track,
        #settings-window *::-webkit-scrollbar-track {
            background: var(--llm-settings-scroll-track);
        }

        #settings-window::-webkit-scrollbar-thumb,
        #settings-window *::-webkit-scrollbar-thumb {
            background: var(--llm-settings-scroll-thumb);
            border-radius: 9999px;
        }

        #settings-window::-webkit-scrollbar-thumb:hover,
        #settings-window *::-webkit-scrollbar-thumb:hover {
            background: var(--llm-settings-scroll-thumb-hover);
        }

        #settings-window::-webkit-scrollbar-thumb:active,
        #settings-window *::-webkit-scrollbar-thumb:active {
            background: var(--llm-settings-scroll-thumb-active);
        }

        #settings-window::-webkit-scrollbar-button,
        #settings-window *::-webkit-scrollbar-button {
            width: 8px;
            height: 8px;
            background: var(--llm-settings-scroll-track);
        }

        @supports (overflow: overlay) {
            #settings-window,
            #settings-window * {
                scrollbar-width: auto;
            }

            #settings-window::-webkit-scrollbar,
            #settings-window *::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
        }

        .chat-scroll {
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
        }

        .chat-scroll::-webkit-scrollbar {
            width: 8px;
        }

        .chat-scroll::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.45);
            border-radius: 9999px;
        }

        .drag-handle {
            touch-action: none;
            user-select: none;
        }

        .mui-dialog {
            background: rgba(11, 20, 40, 0.96);
            border: 1px solid rgba(148, 163, 184, 0.34);
            box-shadow: 0 24px 52px rgba(2, 6, 23, 0.52);
        }

        .session-status-lamp {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            border-radius: 9999px;
            border: 1px solid rgba(148, 163, 184, 0.65);
            box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.35);
        }

        .session-status-lamp--loaded {
            background: #22c55e;
            border-color: #4ade80;
            box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22), 0 0 10px rgba(34, 197, 94, 0.4);
        }

        .session-status-lamp--loading {
            background: #facc15;
            border-color: #fde047;
            box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.22), 0 0 10px rgba(250, 204, 21, 0.4);
        }

        .session-status-lamp--idle {
            background: #ffffff;
            border-color: #e2e8f0;
            box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
        }

        :root[data-theme="light"] .session-status-lamp--idle {
            border-color: #64748b;
            box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.25);
        }

        .opfs-row-selected {
            background: rgba(56, 189, 248, 0.12);
        }

        .dropzone-active {
            border-color: rgba(34, 211, 238, 0.8);
            background: rgba(34, 211, 238, 0.12);
        }

        .message-bubble {
            position: relative;
            outline: none;
        }

        .message-row {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

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

        .message-row--assistant {
            align-items: flex-start;
        }

        .message-role-label {
            margin-bottom: 8px;
            font-size: 12px;
            line-height: 1;
            color: #6b7280;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            user-select: none;
        }

        .message-role-label--user {
            align-self: flex-end;
            text-align: right;
        }

        .message-role-label--assistant {
            align-self: flex-start;
            text-align: left;
        }

        .message-bubble:focus-visible {
            box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.6);
        }

        .message-copy-btn {
            opacity: 0;
            transform: translateY(-2px);
            transition: opacity 160ms ease, transform 160ms ease;
        }

        .message-bubble:hover .message-copy-btn,
        .message-bubble:focus-within .message-copy-btn {
            opacity: 1;
            transform: translateY(0);
        }

        .message-copy-btn:focus-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .chat-input-actions {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
        }

        .chat-inference-toggle-btn {
            position: relative;
            width: 24px;
            height: 24px;
            min-width: 24px;
            border-radius: 8px;
            border: 1px solid rgba(34, 211, 238, 0.4);
            background: rgba(15, 23, 42, 0.55);
            color: #e2e8f0;
            opacity: 0.5;
            transition: opacity 200ms ease, border-color 200ms ease, background-color 200ms ease;
        }

        .chat-inference-toggle-btn:disabled {
            cursor: not-allowed;
            opacity: 0.35;
        }

        .chat-inference-toggle-btn[aria-pressed="true"] {
            opacity: 1;
            border-color: rgba(34, 211, 238, 0.75);
            background: rgba(34, 211, 238, 0.2);
        }

        .chat-inference-toggle-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.55);
        }

        .chat-inference-icon {
            position: absolute;
            inset: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            line-height: 1;
            transition: opacity 200ms ease;
        }

        .chat-inference-icon-on {
            opacity: 0;
        }

        .chat-inference-icon-off {
            opacity: 1;
        }

        .chat-inference-toggle-btn[aria-pressed="true"] .chat-inference-icon-on {
            opacity: 1;
        }

        .chat-inference-toggle-btn[aria-pressed="true"] .chat-inference-icon-off {
            opacity: 0;
        }

        :root[data-theme="light"] .chat-inference-toggle-btn {
            border-color: rgba(2, 132, 199, 0.45);
            background: #f8fafc;
            color: #0f172a;
        }

        :root[data-theme="light"] .chat-inference-toggle-btn[aria-pressed="true"] {
            border-color: rgba(2, 132, 199, 0.75);
            background: #dbeafe;
        }

        .tabs-scroll {
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
        }

        .tabs-scroll::-webkit-scrollbar {
            height: 6px;
        }

        .tabs-scroll::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.4);
            border-radius: 9999px;
        }

        .chat-tab {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            max-width: 190px;
            padding: 7px 10px;
            border-radius: 10px;
            border: 1px solid rgba(100, 116, 139, 0.55);
            background: rgba(2, 6, 23, 0.35);
            color: #cbd5e1;
            font-size: 12px;
            line-height: 1;
            transition: background-color 120ms ease, border-color 120ms ease;
        }

        .chat-tab:hover {
            background: rgba(30, 41, 59, 0.6);
            border-color: rgba(125, 211, 252, 0.45);
        }

        .chat-tab.active {
            background: rgba(56, 189, 248, 0.2);
            border-color: rgba(34, 211, 238, 0.7);
            color: #cffafe;
            font-weight: 700;
        }

        .chat-tab-title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .chat-tab-delete {
            opacity: 0;
            pointer-events: none;
            transition: opacity 120ms ease;
        }

        .group:hover .chat-tab-delete,
        .group:focus-within .chat-tab-delete,
        .chat-tab.active + .chat-tab-delete {
            opacity: 1;
            pointer-events: auto;
        }

        .settings-tab-btn {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 0;
            border-radius: 12px;
            border: 1px solid rgba(100, 116, 139, 0.5);
            background: rgba(15, 23, 42, 0.4);
            color: #cbd5e1;
            transition: background-color 140ms ease, border-color 140ms ease;
        }

        .settings-tab-btn i {
            pointer-events: none;
        }

        .settings-tab-btn:hover {
            background: rgba(30, 41, 59, 0.75);
            border-color: rgba(125, 211, 252, 0.5);
        }

        .settings-tab-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.55);
        }

        .settings-tab-btn[aria-selected="true"] {
            background: rgba(34, 211, 238, 0.2);
            border-color: rgba(34, 211, 238, 0.8);
            color: #cffafe;
        }

        .profile-avatar-preview {
            width: 92px;
            height: 92px;
            border-radius: 9999px;
            border: 1px solid rgba(148, 163, 184, 0.4);
            object-fit: cover;
            background: rgba(15, 23, 42, 0.45);
        }

        .profile-chip-avatar {
            width: 22px;
            height: 22px;
            border-radius: 9999px;
            object-fit: cover;
            border: 1px solid rgba(125, 211, 252, 0.45);
            background: rgba(15, 23, 42, 0.55);
        }

        @media (max-width: 768px) {
            .settings-sidebar {
                width: 72px !important;
            }

            .settings-tab-btn {
                min-height: 44px;
            }
        }

        body.sidebar-layout {
            --app-sidebar-width: 304px;
            --app-sidebar-collapsed-width: 72px;
        }

        body.sidebar-layout header,
        body.sidebar-layout > section.fixed,
        body.sidebar-layout > main {
            transition: left 220ms ease, padding-left 220ms ease;
        }

        body.sidebar-layout.sidebar-open header,
        body.sidebar-layout.sidebar-open > section.fixed {
            left: var(--app-sidebar-width);
        }

        body.sidebar-layout.sidebar-collapsed header,
        body.sidebar-layout.sidebar-collapsed > section.fixed {
            left: var(--app-sidebar-collapsed-width);
        }

        body.sidebar-layout.sidebar-open > main {
            padding-left: calc(var(--app-sidebar-width) + 1rem);
        }

        body.sidebar-layout.sidebar-collapsed > main {
            padding-left: calc(var(--app-sidebar-collapsed-width) + 1rem);
        }

        body.sidebar-layout > main {
            align-items: flex-start;
            justify-content: flex-start;
        }

        body.sidebar-layout > main > section {
            width: 100%;
            max-width: none;
        }

        body.sidebar-layout > main > section > .panel.rounded-3xl {
            height: calc(100vh - 10rem);
            min-height: calc(100vh - 10rem);
            max-height: none;
        }

        .app-sidebar {
            position: fixed;
            z-index: 44;
            top: 0;
            left: 0;
            width: var(--app-sidebar-width);
            height: 100vh;
            padding: 16px 12px 18px;
            border-right: 1px solid rgba(100, 116, 139, 0.45);
            background: rgba(2, 6, 23, 0.92);
            backdrop-filter: blur(10px);
            overflow-y: auto;
            transform: translateX(-100%);
            transition: transform 220ms ease, width 220ms ease, padding 220ms ease;
        }

        body.sidebar-layout.sidebar-open .app-sidebar {
            transform: translateX(0);
        }

        .app-sidebar-backdrop {
            position: fixed;
            inset: 0;
            z-index: 42;
            background: rgba(2, 6, 23, 0.48);
            border: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity 180ms ease;
        }

        .app-sidebar-mobile-toggle {
            position: fixed;
            top: 12px;
            left: 12px;
            z-index: 46;
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            border: 1px solid rgba(100, 116, 139, 0.62);
            background: rgba(15, 23, 42, 0.92);
            color: #e0f2fe;
            box-shadow: 0 10px 26px rgba(2, 6, 23, 0.38);
            transition: left 220ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
        }

        .app-sidebar-mobile-toggle:hover {
            background: rgba(34, 211, 238, 0.15);
            border-color: rgba(34, 211, 238, 0.72);
        }

        .app-sidebar-mobile-toggle[aria-expanded="true"] {
            background: rgba(34, 211, 238, 0.18);
            border-color: rgba(34, 211, 238, 0.82);
            color: #ecfeff;
        }

        body.sidebar-layout.sidebar-open .app-sidebar-mobile-toggle {
            left: calc(var(--app-sidebar-width) + 8px);
        }

        .app-sidebar-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .app-sidebar-brand {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #a5f3fc;
            font-weight: 700;
        }

        .app-sidebar-tabs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            margin-bottom: 12px;
        }

        .app-sidebar-tab {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-height: 56px;
            padding: 6px 4px;
            border-radius: 10px;
            border: 1px solid rgba(100, 116, 139, 0.55);
            background: rgba(15, 23, 42, 0.62);
            color: #cbd5e1;
            font-size: 11px;
            line-height: 1.1;
        }

        .app-sidebar-tab:hover {
            border-color: rgba(34, 211, 238, 0.6);
            background: rgba(8, 47, 73, 0.58);
        }

        .app-sidebar-tab[aria-selected="true"] {
            border-color: rgba(34, 211, 238, 0.75);
            background: rgba(34, 211, 238, 0.2);
            color: #ecfeff;
            font-weight: 700;
        }

        .app-sidebar-panel {
            padding: 2px 0 4px;
        }

        .app-sidebar-action-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin-bottom: 8px;
        }

        .app-sidebar-action-stack {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .app-sidebar-action-btn {
            width: 100%;
            min-height: 44px;
            padding: 10px 12px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 10px;
            border: 1px solid rgba(100, 116, 139, 0.55);
            background: rgba(15, 23, 42, 0.5);
            color: #e2e8f0;
            font-size: 12px;
            font-weight: 600;
        }

        .app-sidebar-action-btn:hover {
            border-color: rgba(34, 211, 238, 0.55);
            background: rgba(8, 47, 73, 0.56);
        }

        .app-sidebar-shortcut-list {
            margin-top: 10px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .app-shortcut-item {
            border: 1px dashed rgba(100, 116, 139, 0.58);
            border-radius: 8px;
            padding: 5px 8px;
            font-size: 11px;
            color: #a5b4fc;
            background: rgba(15, 23, 42, 0.34);
        }

        .app-sidebar-tabs-host {
            min-height: 0;
        }

        .sidebar-tabs-scroll {
            max-height: calc(100vh - 420px);
            overflow-y: auto;
            padding-right: 2px;
        }

        .sidebar-tabs-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
            padding: 2px 1px 4px;
        }

        .chat-tab-item {
            position: relative;
            display: flex;
            align-items: center;
        }

        .chat-tab-item-inline {
            display: inline-flex;
            align-items: center;
            position: relative;
        }

        .chat-tab-sidebar {
            width: 100%;
            max-width: none;
            justify-content: flex-start;
            padding: 10px 30px 10px 10px;
            border-radius: 10px;
        }

        .chat-tab-delete-inline {
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 6px;
            border: 1px solid rgba(251, 113, 133, 0.42);
            background: rgba(244, 63, 94, 0.15);
            color: #fecdd3;
            line-height: 1;
        }

        .chat-tab-delete-inline:hover {
            background: rgba(244, 63, 94, 0.3);
        }

        .chat-tab-delete-sidebar {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 8px;
            border: 1px solid rgba(251, 113, 133, 0.42);
            background: rgba(244, 63, 94, 0.15);
            color: #fecdd3;
            line-height: 1;
        }

        .chat-tab-delete-sidebar:hover {
            background: rgba(244, 63, 94, 0.3);
        }

        .chat-tab-delete-sidebar:focus-visible,
        .app-sidebar-mobile-toggle:focus-visible,
        .app-sidebar-action-btn:focus-visible,
        .app-sidebar-tab:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.58);
        }

        body.sidebar-layout.sidebar-collapsed .app-sidebar {
            width: var(--app-sidebar-collapsed-width);
            padding: 14px 10px 16px;
        }

        body.sidebar-layout.sidebar-collapsed #sidebar-title-text,
        body.sidebar-layout.sidebar-collapsed .app-sidebar-tab span,
        body.sidebar-layout.sidebar-collapsed .app-sidebar-action-btn span,
        body.sidebar-layout.sidebar-collapsed .app-sidebar-shortcut-list,
        body.sidebar-layout.sidebar-collapsed .sidebar-tabs-scroll {
            display: none;
        }

        body.sidebar-layout.sidebar-collapsed .app-sidebar-tabs {
            grid-template-columns: 1fr;
            gap: 8px;
        }

        body.sidebar-layout.sidebar-collapsed .app-sidebar-tab {
            min-height: 44px;
            padding: 8px 0;
        }

        body.sidebar-layout.sidebar-collapsed .app-sidebar-action-grid,
        body.sidebar-layout.sidebar-collapsed .app-sidebar-action-stack {
            gap: 10px;
        }

        body.sidebar-layout.sidebar-collapsed .app-sidebar-action-btn {
            min-height: 42px;
            padding: 8px;
            justify-content: center;
        }

        body.sidebar-layout.sidebar-collapsed .app-sidebar-action-btn i,
        body.sidebar-layout.sidebar-collapsed .app-sidebar-tab i {
            margin: 0;
        }

        @media (max-width: 1024px) {
            body.sidebar-layout {
                --app-sidebar-width: min(86vw, 320px);
            }

            body.sidebar-layout header,
            body.sidebar-layout > section.fixed {
                left: 0;
            }

            body.sidebar-layout > main,
            body.sidebar-layout.sidebar-open > main {
                padding-left: 1rem;
            }

            body.sidebar-layout.sidebar-collapsed > main {
                padding-left: 1rem;
            }

            body.sidebar-layout > main > section > .panel.rounded-3xl {
                height: calc(100vh - 9.8rem);
                min-height: calc(100vh - 9.8rem);
            }

            .app-sidebar {
                z-index: 83;
            }

            .app-sidebar-mobile-toggle {
                left: 12px;
                width: 44px;
                height: 44px;
                border-radius: 10px;
            }

            body.sidebar-layout.sidebar-open .app-sidebar-mobile-toggle {
                left: calc(var(--app-sidebar-width) + 8px);
            }

            body.sidebar-layout.sidebar-open .app-sidebar-backdrop {
                opacity: 1;
                pointer-events: auto;
            }
        }

        @media (min-width: 1025px) {
            body.sidebar-layout .app-sidebar {
                transform: translateX(0);
            }

            .app-sidebar-backdrop {
                display: none !important;
            }

            body.sidebar-layout .app-sidebar-mobile-toggle {
                left: calc(var(--app-sidebar-width) + 8px);
            }

            body.sidebar-layout.sidebar-collapsed .app-sidebar-mobile-toggle {
                left: calc(var(--app-sidebar-collapsed-width) + 8px);
            }
        }

        :root[data-theme="light"] .app-sidebar {
            background: rgba(241, 245, 249, 0.97);
            border-color: #94a3b8;
        }

        :root[data-theme="light"] .app-sidebar-brand {
            color: #0c4a6e;
        }

        :root[data-theme="light"] .app-sidebar-tab,
        :root[data-theme="light"] .app-sidebar-action-btn,
        :root[data-theme="light"] .app-shortcut-item {
            background: #ffffff;
            color: #0f172a;
            border-color: #94a3b8;
        }

        :root[data-theme="light"] .app-sidebar-tab:hover,
        :root[data-theme="light"] .app-sidebar-action-btn:hover {
            border-color: #0284c7;
            background: #e2e8f0;
        }

        :root[data-theme="light"] .app-sidebar-tab[aria-selected="true"] {
            background: #dbeafe;
            border-color: #0284c7;
            color: #0c4a6e;
        }

        :root[data-theme="light"] .chat-tab-delete-sidebar {
            color: #881337;
            border-color: #fb7185;
            background: #ffe4e6;
        }

        :root[data-theme="light"] .chat-tab-delete-inline {
            color: #881337;
            border-color: #fb7185;
            background: #ffe4e6;
        }

        :root[data-theme="light"] .app-sidebar-mobile-toggle {
            background: #ffffff;
            border-color: #94a3b8;
            color: #0f172a;
        }

        :root[data-theme="oled"] .app-sidebar,
        :root[data-theme="oled"] .app-sidebar-tab,
        :root[data-theme="oled"] .app-sidebar-action-btn,
        :root[data-theme="oled"] .app-shortcut-item,
        :root[data-theme="oled"] .app-sidebar-mobile-toggle {
            background: #000000 !important;
            border-color: #2a2a2a !important;
            color: #c4c4c4 !important;
            box-shadow: none !important;
        }