ltcai 4.0.0 → 4.1.0

package/static/css/reference/chat.css

@@ -1,4623 +0,0 @@
-/* Lattice AI — chat workspace (chat.html, body.lattice-ref-chat): shell, sidebar, header, input, cards, modals, drawers, panels, onboarding. Token-native. */
-/* ============================================================
-   CHAT PAGE  (chat.html)
-   ============================================================ */
-
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-
-        body.lattice-ref-chat {
-            font-family: 'Inter', -apple-system, sans-serif;
-            background: var(--app-bg);
-            color: var(--text);
-            overflow: hidden;
-        }
-
-        /* ── 배경 장식 도형 ── */
-        body::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            pointer-events: none;
-            z-index: 0;
-            background: var(--app-bg);
-        }
-
-        .bg-shapes {
-            position: fixed;
-            inset: 0;
-            pointer-events: none;
-            z-index: 0;
-            overflow: hidden;
-        }
-        .bg-orb {
-            display: none;
-            position: absolute;
-            border-radius: 50%;
-            filter: blur(80px);
-            opacity: 0.18;
-        }
-        .bg-orb-1 {
-            width: 500px; height: 500px;
-            top: -180px; left: -120px;
-            background: radial-gradient(circle, #9a78f0, transparent 70%);
-            opacity: 0.14;
-        }
-        .bg-orb-2 {
-            width: 600px; height: 600px;
-            bottom: -200px; right: -150px;
-            background: radial-gradient(circle, #b4a0fd, transparent 70%);
-            opacity: 0.11;
-        }
-        .bg-orb-3 {
-            width: 300px; height: 300px;
-            top: 40%; left: 55%;
-            background: radial-gradient(circle, #f472b6, transparent 70%);
-            opacity: 0.07;
-        }
-        .bg-grid {
-            position: fixed;
-            inset: 0;
-            pointer-events: none;
-            z-index: 0;
-            opacity: 0.05;
-            background-image:
-                linear-gradient(var(--line) 1px, transparent 1px),
-                linear-gradient(90deg, var(--line) 1px, transparent 1px);
-            background-size: 48px 48px;
-        }
-        .app-layout, .auth-overlay { position: relative; z-index: 1; }
-
-        .app-layout {
-            display: flex;
-            height: 100dvh;
-            width: 100vw;
-        }
-
-        /* ── 사이드바 ── */
-        .sidebar {
-            width: 268px;
-            background: var(--sidebar);
-            border-right: 1px solid rgba(111,66,232,0.13);
-            display: flex;
-            flex-direction: column;
-            min-width: 240px;
-            backdrop-filter: none; /* glass removed v3.5.0 */
-            -webkit-backdrop-filter: none; /* glass removed v3.5.0 */
-        }
-
-        .sidebar-header {
-            padding: 20px 18px 16px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            border-bottom: 1px solid rgba(111,66,232,0.10);
-            position: relative;
-        }
-
-        .logo-box {
-            width: 38px;
-            height: 38px;
-            background: linear-gradient(135deg, var(--accent) 0%, #9a78f0 100%);
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #fff;
-            font-weight: 800;
-            font-size: 18px;
-            box-shadow: 0 8px 20px rgba(111,66,232,0.28);
-            flex-shrink: 0;
-        }
-
-        .brand-title {
-            font-size: 15px;
-            font-weight: 800;
-            letter-spacing: -0.02em;
-            color: var(--text);
-        }
-
-        .brand-subtitle {
-            color: var(--accent);
-            font-size: 10.5px;
-            margin-top: 1px;
-            letter-spacing: 0.03em;
-        }
-
-        .user-strip {
-            padding: 10px 18px;
-            font-size: 12px;
-            color: var(--muted);
-            border-bottom: 1px solid rgba(111,66,232,0.10);
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .user-avatar {
-            width: 26px; height: 26px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--accent), #9a78f0);
-            display: flex; align-items: center; justify-content: center;
-            font-size: 11px; font-weight: 700; color: #fff;
-            flex-shrink: 0;
-        }
-
-        .sidebar-search {
-            padding: 8px 10px;
-            border-bottom: 1px solid rgba(111,66,232,0.10);
-        }
-        .sidebar-search input {
-            width: 100%;
-            padding: 7px 10px 7px 30px;
-            background: var(--input);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            color: var(--text);
-            font-size: 12px;
-            font-family: inherit;
-            outline: none;
-            transition: border-color .15s;
-        }
-        .sidebar-search input:focus { border-color: rgba(111,66,232,0.45); }
-        .sidebar-search input::placeholder { color: var(--faint); }
-        .sidebar-search-wrap {
-            position: relative;
-        }
-        .sidebar-search-wrap i {
-            position: absolute;
-            left: 8px; top: 50%;
-            transform: translateY(-50%);
-            color: var(--faint);
-            font-size: 13px;
-            pointer-events: none;
-        }
-        .history-item-del {
-            margin-left: auto;
-            opacity: 0;
-            color: var(--faint);
-            font-size: 13px;
-            padding: 2px 4px;
-            border-radius: 4px;
-            transition: all .15s;
-            flex-shrink: 0;
-        }
-        .history-item:hover .history-item-del { opacity: 1; }
-        .history-item-del:hover { color: #ff6b6b; background: rgba(255,107,107,0.12); }
-
-        .history-container {
-            flex: 1;
-            overflow-y: auto;
-            padding: 10px;
-        }
-
-        .history-section-label {
-            font-size: 10px;
-            font-weight: 700;
-            color: var(--faint);
-            letter-spacing: 0.08em;
-            text-transform: uppercase;
-            padding: 8px 6px 4px;
-        }
-
-        .history-empty {
-            color: var(--faint);
-            font-size: 12px;
-            line-height: 1.5;
-            padding: 10px 8px;
-        }
-
-        .history-item {
-            padding: 9px 11px;
-            border-radius: var(--radius-sm);
-            cursor: pointer;
-            font-size: 12.5px;
-            color: var(--muted);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            margin-bottom: 2px;
-            border: 1px solid transparent;
-            border-left: 2px solid transparent;
-            transition: all .15s;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .history-item::before {
-            content: '';
-            width: 4px; height: 4px;
-            border-radius: 50%;
-            background: rgba(111,66,232,0.4);
-            flex-shrink: 0;
-            transition: all .15s;
-        }
-
-        .history-item:hover {
-            background: rgba(111,66,232,0.06);
-            color: var(--text);
-            border-left-color: var(--accent);
-        }
-        .history-item:hover::before { background: var(--accent); }
-        .history-item.active {
-            background: rgba(111,66,232,0.08);
-            color: var(--text);
-            border-color: rgba(111,66,232,0.16);
-            border-left-color: var(--accent);
-        }
-        .history-item.active::before { background: var(--accent); }
-
-        .sidebar-footer {
-            padding: 14px;
-            border-top: 1px solid rgba(111,66,232,0.10);
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-
-        .new-chat-btn {
-            width: 100%;
-            padding: 11px 12px;
-            border-radius: var(--radius-sm);
-            background: var(--surface-2);
-            border: 1px solid rgba(111,66,232,0.20);
-            color: var(--text);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            font-weight: 700;
-            font-size: 13px;
-            transition: all .18s;
-        }
-        .new-chat-btn:hover {
-            background: rgba(111,66,232,0.10);
-            border-color: rgba(111,66,232,0.36);
-            box-shadow: 0 0 16px var(--accent-soft);
-        }
-
-        .sidebar-primary-actions {
-            padding: 8px 10px 10px;
-            border-bottom: 1px solid rgba(111,66,232,0.10);
-        }
-
-        .admin-btn {
-            width: 100%;
-            padding: 9px 12px;
-            border-radius: var(--radius-sm);
-            background: linear-gradient(135deg, rgba(240,168,50,0.1), rgba(244,114,182,0.06));
-            border: 1px solid rgba(240,168,50,0.25);
-            color: var(--accent-2);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            font-weight: 700;
-            font-size: 12.5px;
-            transition: all .15s;
-        }
-        .admin-btn:hover {
-            background: linear-gradient(135deg, rgba(240,168,50,0.18), rgba(244,114,182,0.1));
-            border-color: rgba(240,168,50,0.45);
-        }
-
-        .status-btn {
-            width: 100%;
-            padding: 9px 12px;
-            border-radius: var(--radius-sm);
-            background: rgba(129,140,248,0.08);
-            border: 1px solid rgba(129,140,248,0.2);
-            color: var(--accent-3);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            font-weight: 600;
-            font-size: 12.5px;
-            transition: all .15s;
-        }
-        .status-btn:hover {
-            background: rgba(129,140,248,0.15);
-            border-color: rgba(129,140,248,0.38);
-        }
-
-        /* ── 메인 채팅창 ── */
-        .main-chat {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            background: transparent;
-            min-width: 0;
-        }
-
-        .chat-header {
-            min-height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 12px;
-            padding: 10px 22px;
-            border-bottom: 1px solid rgba(111,66,232,0.10);
-            background: var(--sidebar);
-            backdrop-filter: none; /* glass removed v3.5.0 */
-            -webkit-backdrop-filter: none; /* glass removed v3.5.0 */
-            position: relative;
-            z-index: 50;
-        }
-
-        .header-left, .header-pills {
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-        .header-left { gap: 7px; }
-        .header-pills { gap: 7px; justify-content: flex-end; }
-
-        .model-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            border: 1px solid rgba(111,66,232,0.20);
-            background: rgba(111,66,232,0.07);
-            border-radius: 999px;
-            padding: 6px 14px 6px 10px;
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text);
-        }
-
-        .status-pill {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            border: 1px solid var(--border);
-            background: var(--surface-2);
-            border-radius: 999px;
-            padding: 5px 11px;
-            font-size: 11.5px;
-            font-weight: 500;
-            color: var(--muted);
-        }
-
-        .status-pill.vpc-ready {
-            color: var(--accent);
-            border-color: rgba(111,66,232,0.24);
-            background: rgba(111,66,232,0.07);
-        }
-
-        .status-dot {
-            width: 7px; height: 7px;
-            background: var(--accent);
-            border-radius: 50%;
-            box-shadow: 0 0 8px var(--accent), 0 0 16px rgba(111,66,232,0.32);
-            flex: 0 0 auto;
-            animation: pulse-dot 2.5s ease-in-out infinite;
-        }
-
-        @keyframes pulse-dot {
-            0%, 100% { box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(111,66,232,0.24); }
-            50% { box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(111,66,232,0.40); }
-        }
-
-        .logout-btn {
-            background: transparent;
-            border: 1px solid transparent;
-            color: var(--muted);
-            cursor: pointer;
-            font-size: 12px;
-            border-radius: var(--radius-sm);
-            padding: 6px 10px;
-            transition: all .15s;
-        }
-        .logout-btn:hover {
-            color: var(--text);
-            border-color: rgba(255,255,255,0.08);
-            background: var(--surface-2);
-        }
-
-        .acct-modal-overlay {
-            display: none;
-            position: fixed;
-            inset: 0;
-            background: rgba(111,66,232,0.18);
-            backdrop-filter: none;
-            z-index: 1000;
-            align-items: center;
-            justify-content: center;
-        }
-        .acct-modal-overlay.open { display: flex; }
-
-        /* MCP 관리 모달 */
-        .mcp-modal-overlay {
-            display: none;
-            position: fixed;
-            inset: 0;
-            background: rgba(111,66,232,0.18);
-            backdrop-filter: none;
-            z-index: 1000;
-            align-items: center;
-            justify-content: center;
-        }
-        .mcp-modal-overlay.open { display: flex; }
-        .mcp-modal {
-            background: var(--modal);
-            border: 1px solid rgba(111,66,232,0.16);
-            border-radius: 16px;
-            width: 100%;
-            max-width: 560px;
-            max-height: 80vh;
-            display: flex;
-            flex-direction: column;
-            box-shadow: 0 20px 60px rgba(88,72,150,0.20);
-            overflow: hidden;
-        }
-        .mcp-modal-header {
-            padding: 18px 20px;
-            border-bottom: 1px solid var(--accent-soft);
-            display: flex; align-items: center; justify-content: space-between;
-        }
-        .mcp-modal-header h3 { font-size: 15px; font-weight: 700; color: var(--text); }
-        .mcp-modal-close { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 18px; padding: 2px 6px; border-radius: 6px; }
-        .mcp-modal-close:hover { color: var(--text); background: rgba(111,66,232,0.07); }
-        .mcp-modal-body.lattice-ref-chat { flex: 1; overflow-y: auto; padding: 16px 20px; }
-        .mcp-section-label { font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin: 12px 0 8px; }
-        .mcp-item {
-            display: flex; align-items: center; gap: 12px;
-            padding: 11px 14px;
-            background: var(--surface-2);
-            border: 1px solid rgba(255,255,255,0.06);
-            border-radius: 10px;
-            margin-bottom: 6px;
-        }
-        .mcp-item-icon { font-size: 20px; flex-shrink: 0; }
-        .mcp-item-info { flex: 1; min-width: 0; }
-        .mcp-item-name { font-size: 13px; font-weight: 600; color: var(--text); }
-        .mcp-item-desc { font-size: 11px; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .mcp-item-status { font-size: 10.5px; color: var(--accent); font-weight: 600; }
-        .mcp-item-status.inactive { color: var(--faint); }
-        .mcp-install-btn {
-            padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
-            border: 1px solid rgba(111,66,232,0.28); background: rgba(111,66,232,0.08);
-            color: var(--accent); cursor: pointer; transition: all .15s; flex-shrink: 0;
-        }
-        .mcp-install-btn:hover { background: rgba(111,66,232,0.16); }
-        .mcp-install-btn.installed { border-color: var(--accent-soft); background: rgba(255,255,255,0.60); color: var(--faint); }
-        /* MCP 소스 배지 */
-        .mcp-source-badge {
-            font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
-            text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0;
-        }
-        .mcp-source-badge.claude-code { background: rgba(100,180,255,0.12); color: #64b4ff; border: 1px solid rgba(100,180,255,0.2); }
-        .mcp-source-badge.custom { background: rgba(255,180,60,0.12); color: #ffb43c; border: 1px solid rgba(255,180,60,0.2); }
-        /* MCP 탭 */
-        .mcp-tabs { display: flex; gap: 4px; padding: 12px 20px 0; border-bottom: 1px solid var(--border); }
-        .mcp-tab {
-            padding: 7px 14px; border-radius: 8px 8px 0 0; font-size: 12px; font-weight: 600;
-            color: var(--faint); cursor: pointer; border: none; background: none;
-            border-bottom: 2px solid transparent; transition: all .15s;
-        }
-        .mcp-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(111,66,232,0.07); }
-        .mcp-tab:hover:not(.active) { color: var(--text); background: rgba(111,66,232,0.05); }
-        /* Custom MCP 추가 폼 */
-        .mcp-add-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
-        .mcp-add-form label { font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
-        .mcp-add-form input, .mcp-add-form textarea, .mcp-add-form select {
-            width: 100%; padding: 8px 11px; border-radius: 8px; font-size: 13px;
-            background: var(--input); border: 1px solid rgba(111,66,232,0.18);
-            color: var(--text); outline: none; transition: border .15s; box-sizing: border-box;
-        }
-        .mcp-add-form input:focus, .mcp-add-form textarea:focus { border-color: rgba(111,66,232,0.45); }
-        .mcp-add-form .field-hint { font-size: 10.5px; color: var(--faint); margin-top: -6px; }
-        .mcp-submit-btn {
-            padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 700;
-            background: var(--accent-soft); border: 1px solid rgba(111,66,232,0.30);
-            color: var(--accent); cursor: pointer; transition: all .15s; align-self: flex-end;
-        }
-        .mcp-submit-btn:hover { background: rgba(111,66,232,0.22); }
-        .mcp-delete-btn {
-            padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
-            background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.2);
-            color: #ff6b6b; cursor: pointer; transition: all .15s; flex-shrink: 0;
-        }
-        .mcp-delete-btn:hover { background: rgba(255,80,80,0.18); }
-        .acct-modal {
-            background: var(--modal);
-            border: 1px solid rgba(111,66,232,0.16);
-            border-radius: 16px;
-            width: 100%;
-            max-width: 380px;
-            display: flex;
-            flex-direction: column;
-            box-shadow: 0 20px 60px rgba(88,72,150,0.20);
-            overflow: hidden;
-        }
-        .acct-tabs {
-            display: flex;
-            border-bottom: 1px solid var(--accent-soft);
-        }
-        .acct-tab {
-            flex: 1; padding: 14px; font-size: 13px; font-weight: 500;
-            background: none; border: none; color: var(--muted); cursor: pointer;
-            transition: all .15s; border-bottom: 2px solid transparent;
-        }
-        .acct-tab.active { color: var(--text, var(--text)); border-bottom-color: var(--accent, #6366f1); }
-        .acct-body.lattice-ref-chat { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
-        .acct-tab-panel { display: none; flex-direction: column; gap: 14px; }
-        .acct-tab-panel.active { display: flex; }
-        .pw-field { display: flex; flex-direction: column; gap: 5px; }
-        .pw-field label { font-size: 11px; color: var(--muted); }
-        .pw-field input {
-            background: var(--input);
-            border: 1px solid rgba(111,66,232,0.18);
-            border-radius: 8px;
-            color: var(--text, var(--text));
-            padding: 8px 12px;
-            font-size: 13px;
-            outline: none;
-            transition: border-color .15s;
-        }
-        .pw-field input:focus { border-color: var(--accent, #6366f1); }
-        .pw-actions { display: flex; gap: 8px; }
-        .pw-actions button {
-            flex: 1; padding: 8px; border-radius: 8px; border: none;
-            cursor: pointer; font-size: 13px; font-weight: 500; transition: all .15s;
-        }
-        .pw-cancel { background: rgba(111,66,232,0.08); color: var(--muted); }
-        .pw-cancel:hover { background: rgba(111,66,232,0.13); }
-        .pw-submit { background: var(--accent, #6366f1); color: #fff; }
-        .pw-submit:hover { opacity: 0.85; }
-        .pw-msg { font-size: 12px; min-height: 16px; }
-        .pw-msg.error { color: #f87171; }
-        .pw-msg.success { color: var(--success); }
-
-        .lang-picker { position: relative; }
-        .lang-picker-menu {
-            display: none;
-            position: absolute;
-            top: calc(100% + 6px);
-            right: 0;
-            background: var(--surface-elevated);
-            border: 1px solid rgba(111,66,232,0.16);
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 8px 24px rgba(88,72,150,0.16);
-            z-index: 200;
-            min-width: 90px;
-        }
-        .lang-picker-menu.open { display: block; }
-        .lang-option {
-            display: flex; align-items: center; gap: 8px;
-            padding: 9px 14px; font-size: 13px; cursor: pointer;
-            color: var(--muted); transition: background .12s;
-        }
-        .lang-option:hover { background: rgba(111,66,232,0.07); color: var(--text, var(--text)); }
-        .lang-option.active { color: var(--accent, #6366f1); font-weight: 600; }
-
-        .auth-lang-picker {
-            position: absolute; top: 20px; right: 20px;
-        }
-        .auth-lang-btn {
-            background: rgba(255,255,255,0.07);
-            border: 1px solid rgba(255,255,255,0.12);
-            color: var(--faint); font-size: 12px; padding: 5px 10px;
-            border-radius: 8px; cursor: pointer; transition: all .15s;
-        }
-        .auth-lang-btn:hover { background: rgba(255,255,255,0.12); color: var(--surface); }
-        .auth-lang-picker .lang-picker-menu { top: calc(100% + 6px); right: 0; }
-
-        .messages-viewport {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px 20px 20px;
-            scroll-behavior: smooth;
-        }
-
-        .ops-strip {
-            max-width: var(--content-width);
-            width: calc(100% - 40px);
-            margin: 16px auto 0;
-            display: grid;
-            grid-template-columns: 1.15fr 1fr 0.9fr;
-            gap: 10px;
-        }
-
-        .ops-card {
-            min-width: 0;
-            overflow: hidden;
-            border: 1px solid rgba(219,235,255,0.16);
-            background: rgba(34,48,68,0.86);
-            border-radius: var(--radius);
-            padding: 14px 16px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 12px;
-            box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.80);
-            backdrop-filter: none; /* glass removed v3.5.0 */
-            transition: all .2s;
-        }
-
-        .ops-card.primary {
-            border-color: rgba(111,66,232,0.18);
-            background: linear-gradient(135deg, rgba(111,66,232,0.10) 0%, var(--card) 60%);
-            box-shadow: var(--shadow-sm), var(--glow-green), inset 0 1px 0 rgba(111,66,232,0.08);
-        }
-
-        .ops-card.interactive { cursor: pointer; }
-
-        .ops-card.interactive:hover {
-            transform: translateY(-2px);
-            border-color: rgba(111,66,232,0.32);
-            background: linear-gradient(135deg, var(--border) 0%, var(--card) 60%);
-            box-shadow: var(--shadow), 0 0 30px var(--border);
-        }
-
-        .ops-label {
-            color: var(--faint);
-            font-size: 10px;
-            font-weight: 700;
-            letter-spacing: 0.08em;
-            text-transform: uppercase;
-            margin-bottom: 5px;
-        }
-
-        .ops-value {
-            color: var(--text);
-            font-size: 13.5px;
-            font-weight: 700;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .ops-meta {
-            color: var(--faint);
-            font-size: 11px;
-            margin-top: 4px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .ops-icon {
-            width: 42px; height: 42px;
-            flex: 0 0 42px;
-            border-radius: 11px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 20px;
-        }
-
-        .ops-card.primary .ops-icon {
-            background: linear-gradient(135deg, rgba(111,66,232,0.18), rgba(129,140,248,0.14));
-            border: 1px solid rgba(111,66,232,0.20);
-            color: var(--accent);
-            box-shadow: 0 0 16px rgba(111,66,232,0.16);
-        }
-
-        .ops-card:not(.primary) .ops-icon {
-            background: var(--card);
-            border: 1px solid var(--border);
-            color: var(--accent-3);
-        }
-
-        .ops-card > div:first-child { min-width: 0; }
-
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(8px); }
-            to   { opacity: 1; transform: translateY(0); }
-        }
-
-        @keyframes slideInRight {
-            from { opacity: 0; transform: translateX(12px); }
-            to   { opacity: 1; transform: translateX(0); }
-        }
-
-        @keyframes slideInLeft {
-            from { opacity: 0; transform: translateX(-12px); }
-            to   { opacity: 1; transform: translateX(0); }
-        }
-
-        .message {
-            margin-bottom: 18px;
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            max-width: var(--content-width);
-            margin-left: auto;
-            margin-right: auto;
-            animation: fadeIn .25s ease;
-        }
-
-        .message.user { align-items: flex-end; animation: slideInRight .22s ease; }
-        .message.ai   { align-items: flex-start; animation: slideInLeft .22s ease; }
-
-        .sender-label {
-            font-size: 11px;
-            color: var(--faint);
-            margin-bottom: 5px;
-            padding: 0 2px;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .bubble {
-            padding: 14px 18px;
-            border-radius: var(--radius);
-            font-size: 14.5px;
-            line-height: 1.65;
-            position: relative;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            word-break: break-word;
-            max-width: min(78%, 740px);
-        }
-
-        .bubble h1, .bubble h2, .bubble h3 {
-            margin: 12px 0 6px 0;
-            color: var(--accent);
-        }
-        .bubble p { margin-bottom: 8px; }
-        .bubble ul, .bubble ol { padding-left: 20px; margin-bottom: 8px; }
-        .bubble code:not(pre code) {
-            background: rgba(111,66,232,0.08);
-            padding: 2px 5px;
-            border-radius: 4px;
-            font-family: 'JetBrains Mono', 'Fira Code', monospace;
-            font-size: 13px;
-        }
-
-        .user .bubble {
-            background: linear-gradient(135deg, var(--accent) 0%, #5832c8 70%, #7b61ff 100%);
-            color: #fff;
-            border-bottom-right-radius: 4px;
-            box-shadow: 0 6px 24px rgba(111,66,232,0.28);
-            border: none;
-        }
-
-        .ai .bubble {
-            background: var(--surface);
-            color: var(--text);
-            border: 1px solid var(--accent-soft);
-            border-bottom-left-radius: 4px;
-            box-shadow: 0 4px 18px rgba(88,72,150,0.08);
-        }
-
-        /* ── 코드 블록 ── */
-        .code-container {
-            width: 100%;
-            max-width: 100%;
-            overflow: hidden;
-            border-radius: var(--radius-sm);
-            margin: 12px 0;
-            background: var(--surface-2);
-            border: 1px solid rgba(129,140,248,0.15);
-            box-shadow: 0 4px 16px rgba(88,72,150,0.10);
-        }
-
-        .code-header {
-            background: rgba(111,66,232,0.08);
-            color: var(--muted);
-            font-size: 11px;
-            padding: 8px 12px;
-            border-bottom: 1px solid rgba(129,140,248,0.1);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .code-lang {
-            text-transform: uppercase;
-            font-weight: 700;
-            color: var(--accent-3);
-            font-size: 10px;
-            letter-spacing: 0.08em;
-        }
-
-        .code-actions { display: flex; gap: 6px; }
-
-        pre {
-            width: 100%;
-            overflow-x: auto;
-            white-space: pre;
-            padding: 16px;
-            font-size: 13px;
-            background: var(--surface-2);
-            scrollbar-width: thin;
-            font-family: 'JetBrains Mono', 'Fira Code', monospace;
-            line-height: 1.6;
-        }
-
-        /* 다운로드 버튼 전용 스타일 */
-        .download-btn-ui,
-        .copy-btn-ui {
-            background: rgba(255, 255, 255, 0.06);
-            color: var(--text);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 6px;
-            padding: 5px 8px;
-            cursor: pointer;
-            font-size: 11px;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .download-btn-ui:hover,
-        .copy-btn-ui:hover {
-            background: var(--accent-soft);
-            border-color: rgba(47, 143, 125, 0.45);
-        }
-
-        .img-attachment {
-            max-width: 300px;
-            border-radius: 12px;
-            margin-top: 8px;
-            border: 1px solid var(--border);
-        }
-
-        /* ── 사이드바 오버레이 (모바일 드로어 배경) ── */
-        .sidebar-overlay {
-            display: none;
-            position: fixed;
-            inset: 0;
-            background: rgba(111,66,232,0.18);
-            z-index: 99;
-            backdrop-filter: none;
-        }
-        body.sidebar-open .sidebar-overlay { display: block; }
-
-        /* ── 햄버거 버튼 ── */
-        .sidebar-toggle {
-            display: none;
-            background: transparent;
-            border: none;
-            color: var(--text);
-            font-size: 20px;
-            cursor: pointer;
-            padding: 4px 6px;
-            border-radius: 6px;
-            line-height: 1;
-            flex-shrink: 0;
-        }
-        .sidebar-toggle:hover { background: rgba(255,255,255,0.08); }
-
-        /* ── 사이드바 닫기 버튼 (모바일 전용) ── */
-        .sidebar-close {
-            display: none;
-            margin-left: auto;
-            background: transparent;
-            border: none;
-            color: var(--faint);
-            font-size: 18px;
-            cursor: pointer;
-            padding: 4px 6px;
-            border-radius: 6px;
-            line-height: 1;
-        }
-        .sidebar-close:hover { color: var(--text); }
-
-        /* ── 입력창 ── */
-        .input-area {
-            padding: 14px 20px 20px;
-            padding-bottom: max(20px, env(safe-area-inset-bottom));
-            background: linear-gradient(0deg, var(--input) 0%, transparent 100%);
-        }
-
-        .input-box {
-            background: var(--input);
-            border: 1px solid rgba(111,66,232,0.16);
-            border-radius: var(--radius);
-            padding: 10px 12px 10px;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            box-shadow: 0 8px 32px rgba(88,72,150,0.10);
-            max-width: var(--content-width);
-            margin: 0 auto;
-            transition: border-color .2s, box-shadow .2s;
-        }
-
-        .input-box:focus-within {
-            border-color: rgba(111,66,232,0.36);
-            box-shadow: 0 8px 32px rgba(88,72,150,0.14), 0 0 0 3px rgba(111,66,232,0.08);
-        }
-
-        .input-row {
-            display: flex;
-            align-items: flex-end;
-            gap: 8px;
-        }
-
-        textarea {
-            flex: 1;
-            background: transparent;
-            border: none;
-            color: var(--text);
-            font-size: 14.5px;
-            resize: none;
-            max-height: 200px;
-            outline: none;
-            padding: 7px 2px;
-            font-family: inherit;
-            line-height: 1.5;
-        }
-
-        textarea::placeholder { color: var(--faint); }
-
-        .action-btn {
-            background: transparent;
-            border: none;
-            color: var(--faint);
-            cursor: pointer;
-            padding: 7px;
-            border-radius: var(--radius-sm);
-            display: flex;
-            align-items: center;
-            transition: all .15s;
-        }
-        .action-btn:hover {
-            color: var(--accent);
-            background: rgba(111,66,232,0.08);
-        }
-
-        .send-btn {
-            background: linear-gradient(135deg, var(--accent), #7b61ff);
-            color: #fff;
-            border: none;
-            width: 38px; height: 38px;
-            border-radius: 10px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 800;
-            box-shadow: 0 8px 20px rgba(111,66,232,0.28);
-            transition: all .18s;
-            flex-shrink: 0;
-        }
-        .send-btn:hover {
-            background: linear-gradient(135deg, #5f35d8, #6b51ef);
-            box-shadow: 0 12px 28px rgba(111,66,232,0.36);
-            transform: scale(1.05);
-        }
-        .send-btn:disabled {
-            opacity: 0.4;
-            cursor: wait;
-            transform: none;
-            box-shadow: none;
-        }
-
-        /* ── 파일 생성 툴바 ── */
-        .file-toolbar {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            padding: 2px 2px 0;
-            flex-wrap: wrap;
-            border-top: 1px solid rgba(111,66,232,0.10);
-        }
-
-        .file-toolbar-label {
-            color: var(--faint);
-            font-size: 10px;
-            font-weight: 700;
-            letter-spacing: 0.07em;
-            text-transform: uppercase;
-            margin-right: 3px;
-        }
-
-        .file-type-btn {
-            display: inline-flex;
-            align-items: center;
-            gap: 5px;
-            padding: 4px 10px;
-            border-radius: 6px;
-            border: 1px solid rgba(255,255,255,0.06);
-            background: var(--surface-2);
-            color: var(--muted);
-            font-size: 11.5px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all .14s;
-        }
-
-        .file-type-btn:hover {
-            border-color: rgba(111,66,232,0.28);
-            color: var(--accent);
-            background: rgba(111,66,232,0.07);
-        }
-
-        /* ── 멀티 LLM 파이프라인 ── */
-        .pipeline-phase-row {
-            display: flex; flex-direction: column; gap: 8px;
-            background: rgba(111,66,232,0.04);
-            border: 1px solid var(--border);
-            border-radius: 10px; padding: 12px;
-        }
-        .pipeline-phase-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-        .pipeline-phase-badge {
-            font-size: 12px; font-weight: 600; padding: 3px 10px;
-            border-radius: 20px; white-space: nowrap;
-        }
-        .pipeline-select {
-            width: 100%; background: var(--surface); border: 1px solid var(--border);
-            color: var(--text); padding: 8px 10px; border-radius: 8px;
-            font-size: 13px; cursor: pointer; outline: none;
-        }
-        .pipeline-select:focus { border-color: var(--accent); }
-        .pipeline-active-badge {
-            display: inline-flex; align-items: center; gap: 4px;
-            font-size: 11px; background: rgba(111,66,232,0.10);
-            border: 1px solid rgba(111,66,232,0.28); color: var(--accent);
-            padding: 2px 8px; border-radius: 20px; margin-left: 6px; cursor: pointer;
-        }
-        .plan-approval-card {
-            background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.2);
-            border-radius: 12px; padding: 16px; margin-top: 4px;
-        }
-        .plan-approval-card h4 { margin: 0 0 10px; color: var(--accent); font-size: 14px; }
-        .plan-approval-card ol { margin: 0 0 12px; padding-left: 20px; color: var(--text); font-size: 13px; line-height: 1.8; }
-        .plan-approval-card .plan-meta { font-size: 11px; color: var(--muted); margin-bottom: 12px; }
-        .plan-approval-actions { display: flex; gap: 8px; }
-        .plan-approve-btn {
-            flex: 1; background: var(--accent); border: none; color: #05120d;
-            padding: 9px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
-        }
-        .plan-cancel-btn {
-            background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25);
-            color: var(--danger); padding: 9px 16px; border-radius: 8px; font-size: 13px; cursor: pointer;
-        }
-
-        /* ── 첨부 파일 칩 ── */
-        .attach-chip {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            padding: 4px 10px;
-            background: rgba(48, 167, 137, 0.12);
-            border: 1px solid rgba(48, 167, 137, 0.3);
-            border-radius: 6px;
-            font-size: 12px;
-            color: var(--accent);
-            margin: 0 2px;
-        }
-        .attach-chip button {
-            background: none;
-            border: none;
-            color: var(--muted);
-            cursor: pointer;
-            padding: 0;
-            font-size: 13px;
-            line-height: 1;
-        }
-        .attach-chip button:hover { color: var(--danger); }
-        #attach-preview-row {
-            display: none;
-            padding: 4px 2px;
-            gap: 4px;
-            flex-wrap: wrap;
-        }
-
-        /* ── 생성된 파일 다운로드 카드 ── */
-        .file-download-card {
-            display: inline-flex;
-            align-items: center;
-            gap: 10px;
-            padding: 10px 14px;
-            border: 1px solid rgba(48, 167, 137, 0.3);
-            border-radius: 8px;
-            background: rgba(48, 167, 137, 0.07);
-            margin: 6px 0;
-            max-width: 100%;
-        }
-
-        .file-download-card .file-icon {
-            font-size: 22px;
-            color: var(--accent);
-            flex: 0 0 auto;
-        }
-
-        .file-download-card .file-info {
-            flex: 1;
-            min-width: 0;
-        }
-
-        .file-download-card .file-name {
-            font-weight: 700;
-            font-size: 13px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .file-download-card .file-meta {
-            color: var(--muted);
-            font-size: 11px;
-            margin-top: 2px;
-        }
-
-        .file-dl-btn {
-            flex: 0 0 auto;
-            padding: 6px 13px;
-            border-radius: 6px;
-            border: 1px solid rgba(48, 167, 137, 0.45);
-            background: rgba(48, 167, 137, 0.12);
-            color: var(--accent);
-            font-size: 12px;
-            font-weight: 700;
-            cursor: pointer;
-            text-decoration: none;
-        }
-
-        .file-dl-btn:hover {
-            background: rgba(48, 167, 137, 0.22);
-        }
-
-        /* ── 권한 요청 다이얼로그 ── */
-        .perm-overlay {
-            position: fixed;
-            inset: 0;
-            background: rgba(0,0,0,0.65);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 9999;
-        }
-
-        .perm-dialog {
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 24px;
-            max-width: 420px;
-            width: 90%;
-            box-shadow: 0 24px 60px rgba(88,72,150,0.22);
-        }
-
-        .perm-icon {
-            font-size: 28px;
-            color: #f0a500;
-            margin-bottom: 12px;
-        }
-
-        .perm-title {
-            font-size: 16px;
-            font-weight: 700;
-            margin-bottom: 8px;
-        }
-
-        .perm-path {
-            font-family: monospace;
-            font-size: 12px;
-            background: rgba(111,66,232,0.05);
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            padding: 8px 10px;
-            word-break: break-all;
-            color: var(--accent);
-            margin: 10px 0 14px;
-        }
-
-        .perm-desc {
-            color: var(--muted);
-            font-size: 13px;
-            line-height: 1.5;
-            margin-bottom: 18px;
-        }
-
-        .perm-actions {
-            display: flex;
-            gap: 8px;
-            justify-content: flex-end;
-        }
-
-        .perm-deny-btn {
-            padding: 8px 18px;
-            border-radius: 7px;
-            border: 1px solid var(--border);
-            background: transparent;
-            color: var(--muted);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-        }
-
-        .perm-allow-btn {
-            padding: 8px 18px;
-            border-radius: 7px;
-            border: 1px solid rgba(48, 167, 137, 0.5);
-            background: rgba(48, 167, 137, 0.14);
-            color: var(--accent);
-            font-size: 13px;
-            font-weight: 700;
-            cursor: pointer;
-        }
-
-        .perm-allow-btn:hover { background: rgba(48, 167, 137, 0.25); }
-        .perm-deny-btn:hover  { background: rgba(255,255,255,0.60); }
-
-        .preview-bar {
-            display: flex;
-            gap: 10px;
-            padding-bottom: 8px;
-            border-bottom: 1px solid var(--border);
-        }
-
-        .preview-thumb {
-            width: 60px;
-            height: 60px;
-            border-radius: 8px;
-            object-fit: cover;
-            position: relative;
-        }
-
-        .remove-preview {
-            position: absolute;
-            top: -5px;
-            right: -5px;
-            background: var(--danger);
-            color: white;
-            border-radius: 50%;
-            width: 18px;
-            height: 18px;
-            font-size: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-        }
-
-        .auth-overlay {
-            position: fixed;
-            inset: 0;
-            z-index: 1000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: var(--bg);
-            padding: 24px;
-            overflow: hidden;
-        }
-
-        .auth-overlay::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background:
-                radial-gradient(ellipse 70% 60% at 20% 20%, var(--border) 0%, transparent 55%),
-                radial-gradient(ellipse 50% 50% at 80% 80%, rgba(129,140,248,0.12) 0%, transparent 55%);
-            pointer-events: none;
-        }
-
-        .auth-orb {
-            position: absolute;
-            border-radius: 50%;
-            filter: blur(60px);
-            pointer-events: none;
-        }
-        .auth-orb-1 {
-            width: 400px; height: 400px;
-            top: -150px; left: -100px;
-            background: var(--border);
-        }
-        .auth-orb-2 {
-            width: 350px; height: 350px;
-            bottom: -120px; right: -80px;
-            background: rgba(129,140,248,0.12);
-        }
-
-        .auth-card {
-            width: min(400px, 100%);
-            background: var(--card);
-            border: 1px solid rgba(111,66,232,0.16);
-            border-radius: 20px;
-            padding: 36px 32px;
-            box-shadow: var(--shadow), 0 0 0 1px rgba(111,66,232,0.05);
-            position: relative;
-            z-index: 1;
-            backdrop-filter: none; /* glass removed v3.5.0 */
-        }
-
-        .auth-card::before {
-            content: '';
-            position: absolute;
-            top: 0; left: 50%;
-            transform: translateX(-50%);
-            width: 60%; height: 1px;
-            background: linear-gradient(90deg, transparent, rgba(111,66,232,0.40), transparent);
-        }
-
-        .auth-logo {
-            width: 52px; height: 52px;
-            background: linear-gradient(135deg, var(--accent), #9a78f0);
-            border-radius: 14px;
-            display: flex; align-items: center; justify-content: center;
-            font-size: 24px; color: #fff;
-            margin: 0 auto 16px;
-            box-shadow: 0 0 30px rgba(111,66,232,0.24), 0 8px 24px rgba(88,72,150,0.16);
-        }
-
-        .auth-title {
-            margin-bottom: 6px;
-            text-align: center;
-            font-size: 22px;
-            font-weight: 800;
-            background: linear-gradient(135deg, var(--text) 35%, var(--accent) 82%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .auth-subtitle {
-            text-align: center;
-            color: var(--faint);
-            font-size: 12.5px;
-            margin-bottom: 24px;
-        }
-
-        .auth-input {
-            width: 100%;
-            padding: 12px 14px;
-            margin-bottom: 10px;
-            background: var(--input);
-            border: 1px solid rgba(255,255,255,0.08);
-            color: var(--text);
-            border-radius: 10px;
-            outline: none;
-            font-size: 14px;
-            font-family: inherit;
-            transition: border-color .15s, box-shadow .15s;
-        }
-
-        .auth-input:focus {
-            border-color: rgba(111,66,232,0.40);
-            box-shadow: 0 0 0 3px rgba(111,66,232,0.08);
-        }
-
-        .auth-input::placeholder { color: var(--faint); }
-
-        .auth-submit {
-            width: 100%;
-            padding: 13px;
-            background: linear-gradient(135deg, var(--accent), #5832c8);
-            color: #fff;
-            border: none;
-            border-radius: 10px;
-            cursor: pointer;
-            font-weight: 800;
-            font-size: 14px;
-            box-shadow: 0 0 20px rgba(111,66,232,0.24), 0 4px 12px rgba(0,0,0,0.3);
-            transition: all .18s;
-            margin-top: 4px;
-        }
-
-        .auth-submit:hover {
-            background: linear-gradient(135deg, var(--accent), #9a78f0);
-            box-shadow: 0 0 30px rgba(111,66,232,0.32), 0 4px 14px rgba(0,0,0,0.3);
-            transform: translateY(-1px);
-        }
-
-        .auth-switch {
-            margin-top: 18px;
-            text-align: center;
-            font-size: 12.5px;
-            color: var(--faint);
-        }
-
-        .auth-switch a {
-            color: var(--accent);
-            text-decoration: none;
-            font-weight: 700;
-        }
-
-        .admin-overlay {
-            position: fixed;
-            inset: 0;
-            z-index: 900;
-            display: none;
-            align-items: stretch;
-            justify-content: flex-end;
-            background: rgba(0, 0, 0, 0.46);
-        }
-
-        .model-overlay {
-            position: fixed;
-            inset: 0;
-            z-index: 850;
-            display: none;
-            align-items: center;
-            justify-content: center;
-            background: rgba(0, 0, 0, 0.52);
-            padding: 22px;
-        }
-
-        .model-panel {
-            width: min(680px, 100%);
-            max-height: min(760px, calc(100vh - 44px));
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: 10px;
-            box-shadow: var(--shadow);
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-
-        .model-panel-header {
-            padding: 18px 20px;
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 12px;
-        }
-
-        .model-panel-header h2 {
-            font-size: 18px;
-        }
-
-        .model-list {
-            padding: 14px;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            gap: 9px;
-        }
-
-        .model-download-card {
-            border: 1px solid var(--border);
-            background: var(--surface-2);
-            border-radius: 8px;
-            padding: 14px;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .model-download-head {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: 12px;
-        }
-
-        .model-download-head strong,
-        .model-download-head span {
-            display: block;
-        }
-
-        .model-download-head strong {
-            font-size: 14px;
-            word-break: break-word;
-        }
-
-        .model-download-head span {
-            color: var(--muted);
-            font-size: 12px;
-            margin-top: 3px;
-        }
-
-        .model-download-percent {
-            flex: 0 0 auto;
-            font-size: 20px;
-            font-weight: 800;
-            color: #9ce5d7;
-            min-width: 72px;
-            text-align: right;
-        }
-
-        .model-download-track {
-            height: 10px;
-            border-radius: 999px;
-            background: rgba(255, 255, 255, 0.08);
-            overflow: hidden;
-            border: 1px solid rgba(255, 255, 255, 0.08);
-        }
-
-        .model-download-fill {
-            height: 100%;
-            width: 0%;
-            border-radius: inherit;
-            background: linear-gradient(90deg, #30a789, #7cc7ff);
-            transition: width 0.35s ease;
-        }
-
-        .model-download-fill.indeterminate {
-            width: 42%;
-            animation: modelDownloadIndeterminate 1.25s ease-in-out infinite;
-        }
-
-        @keyframes modelDownloadIndeterminate {
-            0% { transform: translateX(-120%); }
-            100% { transform: translateX(260%); }
-        }
-
-        .model-download-meta {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 8px;
-        }
-
-        .model-download-meta div {
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            padding: 8px;
-            min-width: 0;
-        }
-
-        .model-download-meta span {
-            display: block;
-            color: var(--muted);
-            font-size: 11px;
-            margin-bottom: 3px;
-        }
-
-        .model-download-meta strong {
-            display: block;
-            font-size: 12px;
-            word-break: break-word;
-        }
-
-        .model-download-detail {
-            color: var(--muted);
-            font-size: 12px;
-            line-height: 1.45;
-            word-break: break-word;
-        }
-
-        @media (max-width: 520px) {
-            .model-download-meta {
-                grid-template-columns: 1fr;
-            }
-
-            .model-download-percent {
-                font-size: 18px;
-                min-width: 64px;
-            }
-        }
-
-        .engine-card {
-            border: 1px solid var(--border);
-            background: rgba(255, 255, 255, 0.028);
-            border-radius: 8px;
-            padding: 12px;
-        }
-
-        .engine-head {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: 12px;
-            margin-bottom: 10px;
-        }
-
-        .engine-head strong,
-        .engine-head span {
-            display: block;
-        }
-
-        .engine-head span {
-            color: var(--muted);
-            font-size: 12px;
-            margin-top: 4px;
-            line-height: 1.35;
-        }
-
-        .engine-actions {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            flex: 0 0 auto;
-        }
-
-        .engine-state {
-            border: 1px solid var(--border);
-            border-radius: 999px;
-            color: var(--muted);
-            font-size: 11px;
-            padding: 5px 8px;
-            white-space: nowrap;
-        }
-
-        .engine-state.ready {
-            color: #9ce5d7;
-            border-color: rgba(48, 167, 137, 0.46);
-        }
-
-        .model-group-title {
-            color: var(--muted);
-            font-size: 12px;
-            font-weight: 800;
-            margin: 12px 4px 2px;
-        }
-
-        .model-filter {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 8px;
-            margin: 4px 0 10px;
-        }
-
-        .model-filter-btn {
-            border: 1px solid var(--border);
-            background: var(--surface-2);
-            color: var(--muted);
-            border-radius: 8px;
-            padding: 9px 10px;
-            font-size: 12px;
-            font-weight: 700;
-            cursor: pointer;
-        }
-
-        .model-filter-btn.active {
-            color: #9ce5d7;
-            border-color: rgba(48, 167, 137, 0.52);
-            background: rgba(48, 167, 137, 0.12);
-        }
-
-        .model-option {
-            width: 100%;
-            border: 1px solid var(--border);
-            background: var(--surface-2);
-            color: var(--text);
-            border-radius: 8px;
-            padding: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 12px;
-            text-align: left;
-            cursor: pointer;
-        }
-
-        .model-option:hover {
-            border-color: rgba(48, 167, 137, 0.52);
-            background: rgba(48, 167, 137, 0.08);
-        }
-
-        .model-option[disabled] {
-            cursor: not-allowed;
-            opacity: 0.58;
-        }
-
-        .model-option.needs-pull {
-            border-color: rgba(255, 193, 7, 0.4);
-        }
-
-        .model-option.needs-pull:hover {
-            border-color: rgba(255, 193, 7, 0.8);
-            background: rgba(255, 193, 7, 0.07);
-        }
-
-        .model-option strong,
-        .model-option span {
-            display: block;
-        }
-
-        .model-option span {
-            color: var(--muted);
-            font-size: 12px;
-            margin-top: 4px;
-            word-break: break-word;
-        }
-
-        .family-group {
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            margin-bottom: 8px;
-            background: rgba(255, 255, 255, 0.02);
-            overflow: hidden;
-        }
-
-        .family-summary {
-            list-style: none;
-            padding: 10px 12px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 10px;
-            color: var(--text);
-            font-size: 13px;
-            font-weight: 700;
-            user-select: none;
-            border-bottom: 1px solid transparent;
-        }
-
-        .family-group[open] .family-summary {
-            border-bottom-color: var(--border);
-        }
-
-        .family-summary::-webkit-details-marker {
-            display: none;
-        }
-
-        .family-summary .family-count {
-            color: var(--muted);
-            font-size: 11px;
-            font-weight: 600;
-        }
-
-        .family-models {
-            padding: 8px;
-            display: grid;
-            gap: 8px;
-        }
-
-        .api-key-form {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-top: 8px;
-            flex-wrap: wrap;
-        }
-
-        .api-key-input {
-            flex: 1;
-            min-width: 180px;
-            background: var(--surface-2);
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            color: var(--text);
-            font-size: 12px;
-            padding: 6px 10px;
-            outline: none;
-        }
-
-        .api-key-input:focus {
-            border-color: rgba(48, 167, 137, 0.6);
-        }
-
-        /* ── VPC Panel ── */
-        .vpc-provider-tabs {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 18px;
-            flex-wrap: wrap;
-        }
-
-        .vpc-tab-btn {
-            padding: 7px 16px;
-            border-radius: 6px;
-            border: 1px solid var(--border);
-            background: var(--surface-2);
-            color: var(--muted);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-        }
-
-        .vpc-tab-btn.active {
-            background: rgba(48, 167, 137, 0.14);
-            border-color: rgba(48, 167, 137, 0.5);
-            color: var(--accent);
-        }
-
-        .vpc-tab-btn:hover:not(.active) {
-            border-color: rgba(48, 167, 137, 0.3);
-            color: var(--text);
-        }
-
-        .vpc-connection-status {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 10px 14px;
-            border-radius: 8px;
-            border: 1px solid var(--border);
-            background: var(--card);
-            margin-bottom: 16px;
-            font-size: 13px;
-        }
-
-        .vpc-status-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: var(--muted);
-            flex: 0 0 8px;
-        }
-
-        .vpc-status-dot.connected { background: #4caf86; }
-        .vpc-status-dot.standby   { background: #f0a500; }
-        .vpc-status-dot.error     { background: #e05c5c; }
-
-        /* ── Status Panel ── */
-        .status-section {
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            padding: 14px;
-            margin-bottom: 12px;
-            background: var(--surface-2);
-        }
-
-        .status-section-title {
-            color: var(--muted);
-            font-size: 11px;
-            font-weight: 700;
-            letter-spacing: 0.05em;
-            margin-bottom: 10px;
-            text-transform: uppercase;
-        }
-
-        .status-row {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            padding: 6px 0;
-            border-bottom: 1px solid rgba(111,66,232,0.08);
-            font-size: 13px;
-        }
-
-        .status-row:last-child { border-bottom: none; }
-
-        .status-row-label {
-            color: var(--muted);
-            flex: 0 0 110px;
-            font-size: 12px;
-        }
-
-        .status-row-value {
-            color: var(--text);
-            font-weight: 600;
-            flex: 1;
-            word-break: break-all;
-        }
-
-        .status-badge {
-            font-size: 11px;
-            padding: 2px 8px;
-            border-radius: 999px;
-            border: 1px solid var(--border);
-            color: var(--muted);
-        }
-
-        .status-badge.ok {
-            color: #4caf86;
-            border-color: rgba(76,175,134,0.4);
-            background: rgba(76,175,134,0.08);
-        }
-
-        .status-badge.warn {
-            color: #f0a500;
-            border-color: rgba(240,165,0,0.4);
-            background: rgba(240,165,0,0.07);
-        }
-
-        .status-mcp-list {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-
-        .status-mcp-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            font-size: 13px;
-        }
-
-        .status-mcp-item span:last-child {
-            font-size: 11px;
-            color: var(--muted);
-        }
-
-        /* ── MCP 추천 (컴팩트 버튼 → 드롭다운) ── */
-        .mcp-recommend-wrap {
-            max-width: var(--content-width);
-            margin: 0 auto 14px;
-        }
-
-        .mcp-recommend-btn {
-            display: inline-flex;
-            align-items: center;
-            gap: 7px;
-            padding: 7px 14px;
-            border-radius: 999px;
-            border: 1px solid rgba(48, 167, 137, 0.38);
-            background: rgba(48, 167, 137, 0.08);
-            color: var(--accent);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: background 0.15s;
-        }
-
-        .mcp-recommend-btn:hover {
-            background: rgba(48, 167, 137, 0.16);
-        }
-
-        .mcp-recommend-btn .mcp-count-badge {
-            background: rgba(48, 167, 137, 0.22);
-            border-radius: 999px;
-            padding: 1px 7px;
-            font-size: 11px;
-            font-weight: 700;
-            color: var(--accent);
-        }
-
-        .mcp-recommend-btn .mcp-chevron {
-            font-size: 11px;
-            transition: transform 0.2s;
-        }
-
-        .mcp-recommend-btn.open .mcp-chevron {
-            transform: rotate(180deg);
-        }
-
-        .mcp-dropdown {
-            display: none;
-            margin-top: 8px;
-            border: 1px solid rgba(111,66,232,0.16);
-            border-radius: 10px;
-            background: var(--surface-elevated);
-            box-shadow: 0 16px 36px rgba(96,72,160,0.12);
-            overflow: hidden;
-        }
-
-        .mcp-dropdown.open {
-            display: block;
-        }
-
-        .mcp-dropdown-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 12px;
-            padding: 11px 14px;
-            border-bottom: 1px solid rgba(111,66,232,0.10);
-            color: var(--text);
-        }
-
-        .mcp-dropdown-item:hover {
-            background: rgba(111,66,232,0.05);
-        }
-
-        .mcp-dropdown-item:last-child {
-            border-bottom: none;
-        }
-
-        .mcp-dropdown-item-info {
-            min-width: 0;
-            flex: 1;
-        }
-
-        .mcp-dropdown-item-info strong {
-            display: block;
-            font-size: 13px;
-            margin-bottom: 2px;
-            color: var(--text);
-        }
-
-        .mcp-dropdown-item-info span {
-            display: block;
-            color: var(--muted);
-            font-size: 12px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .mcp-install-btn {
-            flex: 0 0 auto;
-            padding: 5px 13px;
-            border-radius: 6px;
-            border: 1px solid rgba(48, 167, 137, 0.4);
-            background: rgba(48, 167, 137, 0.1);
-            color: var(--accent);
-            font-size: 12px;
-            font-weight: 600;
-            cursor: pointer;
-            white-space: nowrap;
-        }
-
-        .mcp-install-btn:hover {
-            background: rgba(48, 167, 137, 0.2);
-        }
-
-        .mcp-install-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .mcp-actions {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 8px;
-        }
-
-        .admin-panel {
-            width: min(760px, 100%);
-            height: 100%;
-            background: var(--surface);
-            border-left: 1px solid var(--border);
-            box-shadow: var(--shadow);
-            display: flex;
-            flex-direction: column;
-        }
-
-        .admin-header {
-            padding: 18px 20px;
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 12px;
-        }
-
-        .admin-header h2 {
-            font-size: 18px;
-        }
-
-        .admin-close {
-            width: 34px;
-            height: 34px;
-            border-radius: 8px;
-            border: 1px solid var(--border);
-            background: var(--surface-2);
-            color: var(--text);
-            cursor: pointer;
-        }
-
-        .admin-body.lattice-ref-chat {
-            padding: 18px 20px 24px;
-            overflow-y: auto;
-        }
-
-        .admin-stats {
-            display: grid;
-            grid-template-columns: repeat(4, minmax(0, 1fr));
-            gap: 10px;
-            margin-bottom: 18px;
-        }
-
-        .admin-stat {
-            background: var(--surface-2);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            padding: 13px;
-        }
-
-        .admin-stat span {
-            display: block;
-            color: var(--muted);
-            font-size: 12px;
-            margin-bottom: 7px;
-        }
-
-        .admin-stat strong {
-            font-size: 22px;
-        }
-
-        .admin-section-title {
-            font-size: 14px;
-            margin: 18px 0 10px;
-        }
-
-        .admin-form-grid {
-            display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-            gap: 10px;
-            margin-bottom: 12px;
-        }
-
-        .admin-field {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-
-        .admin-field.full {
-            grid-column: 1 / -1;
-        }
-
-        .admin-field label {
-            color: var(--muted);
-            font-size: 12px;
-            font-weight: 700;
-        }
-
-        .admin-input,
-        .admin-textarea {
-            width: 100%;
-            background: var(--surface-2);
-            border: 1px solid var(--border);
-            color: var(--text);
-            border-radius: 8px;
-            padding: 10px 11px;
-            outline: none;
-            font-family: inherit;
-            font-size: 13px;
-        }
-
-        .admin-textarea {
-            min-height: 76px;
-            resize: vertical;
-        }
-
-        .admin-input:focus,
-        .admin-textarea:focus {
-            border-color: rgba(111, 66, 232, 0.55);
-        }
-
-        .vpc-save-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 12px;
-            margin-bottom: 18px;
-        }
-
-        .vpc-status-copy {
-            color: var(--muted);
-            font-size: 12px;
-        }
-
-        .admin-table {
-            width: 100%;
-            border-collapse: collapse;
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            overflow: hidden;
-            font-size: 13px;
-        }
-
-        .admin-table th,
-        .admin-table td {
-            padding: 11px 10px;
-            border-bottom: 1px solid var(--border);
-            text-align: left;
-            vertical-align: middle;
-        }
-
-        .admin-table th {
-            color: var(--muted);
-            background: rgba(255, 255, 255, 0.035);
-            font-weight: 600;
-        }
-
-        .admin-actions {
-            display: flex;
-            gap: 6px;
-            flex-wrap: wrap;
-        }
-
-        .admin-action {
-            border: 1px solid var(--border);
-            background: var(--surface-2);
-            color: var(--text);
-            border-radius: 7px;
-            padding: 7px 8px;
-            cursor: pointer;
-            font-size: 12px;
-        }
-
-        .admin-action.danger {
-            color: #ffb4b4;
-            border-color: rgba(228, 87, 87, 0.45);
-        }
-
-        .role-badge {
-            display: inline-flex;
-            padding: 4px 7px;
-            border-radius: 999px;
-            border: 1px solid var(--border);
-            color: var(--muted);
-            font-size: 12px;
-        }
-
-        .sensitivity-grid {
-            display: grid;
-            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-            gap: 12px;
-            margin-bottom: 18px;
-        }
-
-        .sensitivity-panel {
-            border: 1px solid var(--border);
-            background: var(--surface-2);
-            border-radius: 8px;
-            padding: 14px;
-            min-width: 0;
-        }
-
-        .sensitivity-panel h4 {
-            font-size: 13px;
-            margin-bottom: 10px;
-            display: flex;
-            align-items: center;
-            gap: 7px;
-        }
-
-        .sensitivity-list {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            max-height: 260px;
-            overflow-y: auto;
-        }
-
-        .sensitivity-item {
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            border-radius: 8px;
-            padding: 9px;
-            background: rgba(0, 0, 0, 0.12);
-        }
-
-        .sensitivity-meta {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 6px;
-            margin-bottom: 6px;
-        }
-
-        .sensitivity-tag {
-            display: inline-flex;
-            align-items: center;
-            border-radius: 999px;
-            padding: 3px 7px;
-            font-size: 11px;
-            border: 1px solid var(--border);
-            color: var(--muted);
-        }
-
-        .sensitivity-tag.high {
-            border-color: rgba(228, 87, 87, 0.55);
-            color: #ffb4b4;
-        }
-
-        .sensitivity-tag.medium {
-            border-color: rgba(216, 160, 61, 0.55);
-            color: var(--warning);
-        }
-
-        .sensitivity-tag.low {
-            border-color: rgba(47, 143, 125, 0.55);
-            color: #9ce5d7;
-        }
-
-        .sensitivity-preview {
-            color: var(--muted);
-            font-size: 12px;
-            line-height: 1.45;
-            word-break: break-word;
-        }
-
-        .field-cloud {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 7px;
-            margin-bottom: 12px;
-        }
-
-        .sender-label {
-            font-size: 11px;
-            margin-bottom: 5px;
-            color: var(--muted);
-        }
-
-        .empty-state {
-            max-width: var(--content-width);
-            margin: 8vh auto 0;
-            color: var(--muted);
-            text-align: center;
-        }
-
-        .empty-state h1 {
-            color: var(--text);
-            font-size: 30px;
-            margin-bottom: 10px;
-            font-weight: 800;
-            background: linear-gradient(135deg, var(--text) 40%, var(--accent));
-            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
-        }
-
-        .empty-state p {
-            font-size: 14px;
-            line-height: 1.6;
-            max-width: 480px;
-            margin: 0 auto;
-        }
-
-        .empty-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 10px;
-            margin-top: 22px;
-        }
-
-        .empty-chip {
-            border: 1px solid var(--accent-soft);
-            background: linear-gradient(135deg, rgba(111,66,232,0.06), rgba(129,140,248,0.04));
-            border-radius: var(--radius);
-            padding: 14px;
-            font-size: 12.5px;
-            cursor: pointer;
-            transition: all .18s;
-            color: var(--muted);
-        }
-        .empty-chip:hover {
-            border-color: rgba(111,66,232,0.24);
-            background: linear-gradient(135deg, rgba(111,66,232,0.10), rgba(129,140,248,0.07));
-            color: var(--text);
-            transform: translateY(-2px);
-            box-shadow: 0 8px 24px rgba(111,66,232,0.10);
-        }
-        .empty-chip-icon {
-            font-size: 22px;
-            margin-bottom: 8px;
-            display: block;
-        }
-        .fake-for-css {
-            font-size: 13px;
-            color: var(--text);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.15);
-            border-radius: 3px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--muted);
-        }
-
-        /* ── 태블릿 (≤900px) ── */
-        @media (max-width: 900px) {
-            .status-pill.hide-mobile { display: none; }
-
-            .ops-strip {
-                width: calc(100% - 28px);
-                grid-template-columns: 1fr;
-                margin-top: 12px;
-            }
-
-            .bubble { max-width: 92%; }
-
-            .empty-grid { grid-template-columns: 1fr; }
-            .empty-state { margin-top: 4vh; }
-
-            .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-            .sensitivity-grid { grid-template-columns: 1fr; }
-            .admin-form-grid { grid-template-columns: 1fr; }
-            .mcp-list { grid-template-columns: 1fr; }
-
-            .admin-table {
-                display: block;
-                overflow-x: auto;
-                white-space: nowrap;
-            }
-        }
-
-        /* ── 모바일 드로어 (≤768px) ── */
-        @media (max-width: 768px) {
-            /* ops-strip: 가로 스크롤 한 줄로 압축 */
-            .ops-strip {
-                display: flex;
-                flex-direction: row;
-                overflow-x: auto;
-                gap: 8px;
-                width: calc(100% - 24px);
-                margin: 10px auto 0;
-                scrollbar-width: none;
-                -ms-overflow-style: none;
-            }
-            .ops-strip::-webkit-scrollbar { display: none; }
-            .ops-card {
-                flex: 0 0 auto;
-                min-width: 160px;
-                padding: 10px 12px;
-                font-size: 12px;
-            }
-            .ops-label { font-size: 9px; }
-            .ops-value { font-size: 13px; }
-            .ops-meta { font-size: 10px; }
-            .ops-icon { font-size: 18px; }
-            body.lattice-ref-chat { overflow: hidden; }
-
-            .sidebar-toggle { display: flex; align-items: center; justify-content: center; }
-            .sidebar-close { display: flex; align-items: center; justify-content: center; }
-
-            /* 사이드바: fixed 드로어로 전환 */
-            .sidebar,
-            .app-layout .sidebar {
-                position: fixed;
-                top: 0;
-                left: 0;
-                height: 100dvh;
-                width: 280px;
-                min-width: 0;
-                z-index: 100;
-                transform: translateX(-100%);
-                transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
-                border-right: 1px solid var(--border-strong);
-                box-shadow: 4px 0 32px rgba(88,72,150,0.18);
-                background: var(--surface);
-                backdrop-filter: none;
-                -webkit-backdrop-filter: none;
-            }
-            body.sidebar-open .sidebar {
-                transform: translateX(0);
-            }
-
-            .sidebar-header { padding: 14px 14px; }
-            .sidebar-footer { padding: 10px 14px 14px; border-top: 1px solid var(--border); }
-
-            /* 메인 채팅은 항상 전체 너비 */
-            .main-chat { width: 100%; flex: 1; }
-
-            .chat-header { padding: 10px 14px; }
-            .header-pills { gap: 6px; }
-
-            .messages-viewport { padding: 16px 12px 12px; }
-            .input-area { padding: 10px 12px max(14px, env(safe-area-inset-bottom)); }
-
-            .bubble { max-width: 94%; }
-        }
-
-        /* ── 폰 (≤480px) ── */
-        @media (max-width: 480px) {
-            .bubble { max-width: 98%; font-size: 14px; }
-            .sender-label { font-size: 11px; }
-            textarea { font-size: 16px; } /* iOS 자동 줌 방지 */
-            .model-badge span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-            .header-pills .status-pill { display: none; }
-            .admin-stats { grid-template-columns: 1fr; }
-        }
-
-/* Sidebar trigger button */
-        .setup-wizard-sidebar-btn {
-            width: 100%;
-            margin-bottom: 8px;
-            padding: 10px 12px;
-            border-radius: 8px;
-            background: rgba(122, 162, 255, 0.10);
-            border: 1px solid rgba(122, 162, 255, 0.28);
-            color: var(--text);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            font-size: 13px;
-            font-weight: 600;
-        }
-        .setup-wizard-sidebar-btn:hover {
-            background: rgba(122, 162, 255, 0.18);
-            border-color: rgba(122, 162, 255, 0.5);
-        }
-
-        /* Full-screen overlay */
-        #setup-overlay {
-            display: none;
-            position: fixed;
-            inset: 0;
-            z-index: 9000;
-            background: rgba(111, 66, 232, 0.18);
-            backdrop-filter: none;
-            align-items: center;
-            justify-content: center;
-        }
-        #setup-overlay.open { display: flex; }
-
-        /* Wizard card */
-        .wizard-card {
-            background: var(--surface);
-            border: 1px solid var(--border-strong);
-            border-radius: 20px;
-            width: min(960px, calc(100vw - 40px));
-            max-height: calc(100vh - 60px);
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            box-shadow: 0 32px 80px rgba(0,0,0,0.55);
-        }
-
-        /* Wizard header */
-        .wizard-header {
-            padding: 22px 28px 18px;
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 16px;
-            flex-shrink: 0;
-        }
-        .wizard-title { font-size: 18px; font-weight: 700; }
-        .wizard-subtitle { font-size: 12px; color: var(--muted); margin-top: 3px; }
-
-        /* Step dots */
-        .wizard-steps {
-            display: flex;
-            gap: 6px;
-            align-items: center;
-        }
-        .wstep {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            font-size: 12px;
-            color: var(--faint);
-            font-weight: 600;
-        }
-        .wstep-dot {
-            width: 26px; height: 26px;
-            border-radius: 50%;
-            border: 2px solid var(--border-strong);
-            display: flex; align-items: center; justify-content: center;
-            font-size: 11px; font-weight: 700;
-            transition: all .25s;
-        }
-        .wstep.active .wstep-dot { background: var(--accent-3); border-color: var(--accent-3); color: #0f1214; }
-        .wstep.done   .wstep-dot { background: var(--accent); border-color: var(--accent); color: #0f1214; }
-        .wstep-sep { width: 24px; height: 2px; background: var(--border); border-radius: 2px; }
-        .wstep-sep.done { background: var(--accent); }
-
-        .wizard-close {
-            background: none; border: 1px solid var(--border);
-            color: var(--muted); cursor: pointer;
-            border-radius: 8px; padding: 7px 9px; font-size: 16px;
-        }
-        .wizard-close:hover { color: var(--text); border-color: var(--border-strong); }
-
-        /* Wizard body */
-        .wizard-body.lattice-ref-chat {
-            flex: 1;
-            overflow-y: auto;
-            padding: 24px 28px;
-        }
-
-        /* ── Step 1: Scan ── */
-        .scan-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-            margin-top: 16px;
-        }
-        .scan-row {
-            display: flex;
-            align-items: flex-start;
-            gap: 10px;
-            background: var(--surface-2);
-            border: 1px solid var(--border);
-            border-radius: 10px;
-            padding: 12px 14px;
-            font-size: 13px;
-            opacity: 0;
-            transform: translateY(6px);
-            transition: opacity .3s, transform .3s;
-        }
-        .scan-row.visible { opacity: 1; transform: none; }
-        .scan-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
-        .scan-label { color: var(--muted); font-size: 11px; font-weight: 700; margin-bottom: 3px; }
-        .scan-value { font-weight: 600; }
-        .scan-pulse {
-            display: flex; align-items: center; gap: 10px;
-            color: var(--muted); font-size: 14px; padding: 8px 0;
-        }
-        .scan-spinner {
-            width: 18px; height: 18px;
-            border: 2px solid var(--border-strong);
-            border-top-color: var(--accent-3);
-            border-radius: 50%;
-            animation: spin .8s linear infinite;
-            flex-shrink: 0;
-        }
-        @keyframes spin { to { transform: rotate(360deg); } }
-
-        /* ── Step 2: Select ── */
-        .rec-section-title {
-            font-size: 11px; font-weight: 700; letter-spacing: .06em;
-            color: var(--muted); text-transform: uppercase;
-            margin: 20px 0 10px;
-        }
-        .rec-section-title:first-child { margin-top: 0; }
-
-        .rec-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 8px;
-        }
-        .rec-item {
-            background: var(--surface-2);
-            border: 1.5px solid var(--border);
-            border-radius: 12px;
-            padding: 12px 14px;
-            cursor: pointer;
-            display: flex;
-            align-items: flex-start;
-            gap: 11px;
-            transition: border-color .15s, background .15s;
-        }
-        .rec-item.checked {
-            border-color: rgba(48, 167, 137, 0.55);
-            background: linear-gradient(135deg, rgba(48,167,137,.10), var(--surface-2));
-        }
-        .rec-item.disabled {
-            opacity: 0.38;
-            cursor: not-allowed;
-        }
-        .rec-item:not(.disabled):hover { border-color: rgba(122,162,255,.45); }
-        .rec-checkbox {
-            width: 18px; height: 18px; flex-shrink: 0;
-            border: 2px solid var(--border-strong);
-            border-radius: 5px;
-            display: flex; align-items: center; justify-content: center;
-            font-size: 11px; margin-top: 2px;
-            transition: all .15s;
-        }
-        .rec-item.checked .rec-checkbox {
-            background: var(--accent);
-            border-color: var(--accent);
-            color: #fff;
-        }
-        .rec-item-body.lattice-ref-chat { flex: 1; min-width: 0; }
-        .rec-item-header { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
-        .rec-item-name { font-size: 13px; font-weight: 700; }
-        .rec-badge {
-            font-size: 10px; font-weight: 700; padding: 2px 7px;
-            border-radius: 99px; border: 1px solid;
-            white-space: nowrap;
-        }
-        .rec-badge.installed  { color: #9ce5d7; border-color: rgba(48,167,137,.4); background: rgba(48,167,137,.10); }
-        .rec-badge.available  { color: var(--accent-3); border-color: rgba(122,162,255,.35); background: rgba(122,162,255,.08); }
-        .rec-badge.active     { color: #9ce5d7; border-color: rgba(48,167,137,.4); background: rgba(48,167,137,.10); }
-        .rec-badge.ready      { color: var(--accent-2); border-color: rgba(213,162,65,.4); background: rgba(213,162,65,.10); }
-        .rec-badge.disabled-b { color: var(--faint); border-color: var(--border); background: transparent; }
-        .rec-badge.auth       { color: #e5c46a; border-color: rgba(229,196,106,.35); background: rgba(229,196,106,.08); }
-        .rec-item-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
-        .rec-recommended {
-            font-size: 10px; font-weight: 700; color: var(--accent-2);
-            background: rgba(213,162,65,.12); border: 1px solid rgba(213,162,65,.3);
-            padding: 2px 6px; border-radius: 99px;
-        }
-
-        /* ── Step 3: Install ── */
-        .install-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
-        .install-row {
-            background: var(--surface-2);
-            border: 1px solid var(--border);
-            border-radius: 10px;
-            padding: 13px 16px;
-            display: flex; align-items: flex-start; gap: 12px;
-        }
-        .install-status-icon { font-size: 18px; flex-shrink: 0; width: 22px; text-align: center; }
-        .install-row-body.lattice-ref-chat { flex: 1; min-width: 0; }
-        .install-row-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
-        .install-row-msg  { font-size: 12px; color: var(--muted); white-space: pre-line; line-height: 1.5; }
-        .install-row.status-done   { border-color: rgba(48,167,137,.4); }
-        .install-row.status-error  { border-color: rgba(228,87,87,.4); }
-        .install-row.status-auth   { border-color: rgba(229,196,106,.4); }
-        .install-row.status-waiting{ border-color: rgba(122,162,255,.35); }
-        .install-mini-spinner {
-            display: inline-block;
-            width: 14px; height: 14px;
-            border: 2px solid var(--border-strong);
-            border-top-color: var(--accent-3);
-            border-radius: 50%;
-            animation: spin .7s linear infinite;
-            vertical-align: middle; margin-right: 5px;
-        }
-
-        /* Wizard footer */
-        .wizard-footer {
-            padding: 16px 28px;
-            border-top: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            flex-shrink: 0;
-        }
-        .wizard-footer-info { font-size: 12px; color: var(--muted); }
-        .wizard-btn-row { display: flex; gap: 10px; }
-        .wbtn {
-            padding: 10px 20px; border-radius: 9px;
-            font-size: 13px; font-weight: 700; cursor: pointer;
-            border: 1px solid transparent; transition: all .15s;
-        }
-        .wbtn-primary { background: var(--accent); color: #0f1214; }
-        .wbtn-primary:hover { background: #38c09c; }
-        .wbtn-primary:disabled { opacity: .45; cursor: not-allowed; }
-        .wbtn-ghost {
-            background: transparent; border-color: var(--border);
-            color: var(--muted);
-        }
-        .wbtn-ghost:hover { border-color: var(--border-strong); color: var(--text); }
-
-        /* Complete screen */
-        .wizard-complete {
-            text-align: center; padding: 40px 20px;
-        }
-        .wizard-complete-icon { font-size: 56px; margin-bottom: 16px; }
-        .wizard-complete h2 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
-        .wizard-complete p  { color: var(--muted); font-size: 14px; line-height: 1.6; }
-
-        /* ── 스크롤바 ── */
-        ::-webkit-scrollbar { width: 5px; height: 5px; }
-        ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.08);
-            border-radius: 99px;
-        }
-        ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
-
-        /* ── 패널 공통 ── */
-        .admin-panel {
-            background: var(--card);
-            border-left: 1px solid var(--border);
-            backdrop-filter: none; /* glass removed v3.5.0 */
-            color: var(--text);
-        }
-        .admin-header {
-            background: var(--sidebar);
-            border-bottom: 1px solid var(--accent-soft);
-        }
-        .admin-form-field label {
-            color: var(--faint);
-            font-size: 11px;
-            letter-spacing: 0.05em;
-        }
-        .admin-form-field input, .admin-form-field select, .admin-form-field textarea {
-            background: var(--input);
-            border-color: rgba(111,66,232,0.18);
-            border-radius: 9px;
-            color: var(--text);
-        }
-        .admin-form-field input:focus, .admin-form-field select:focus, .admin-form-field textarea:focus {
-            border-color: rgba(111,66,232,0.50);
-            box-shadow: 0 0 0 3px rgba(111,66,232,0.08);
-        }
-        .admin-action {
-            background: linear-gradient(135deg, var(--border), rgba(139,108,255,0.10));
-            border-color: rgba(111,66,232,0.28);
-            color: var(--accent);
-        }
-        .admin-action:hover {
-            background: linear-gradient(135deg, rgba(111,66,232,0.22), rgba(139,108,255,0.16));
-            box-shadow: 0 0 16px rgba(111,66,232,0.16);
-        }
-
-        /* ── 빈 채팅 화면 ── */
-        .empty-state {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            flex: 1;
-            gap: 12px;
-            pointer-events: none;
-            padding: 40px;
-        }
-        .empty-icon {
-            width: 72px; height: 72px;
-            background: linear-gradient(135deg, var(--border), rgba(129,140,248,0.12));
-            border: 1px solid var(--border);
-            border-radius: 20px;
-            display: flex; align-items: center; justify-content: center;
-            font-size: 32px;
-            color: var(--accent);
-            box-shadow: 0 0 30px var(--accent-soft);
-        }
-        .empty-title {
-            font-size: 20px; font-weight: 800;
-            background: linear-gradient(135deg, var(--text), var(--muted));
-            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
-        }
-        .empty-sub { font-size: 13px; color: var(--faint); text-align: center; line-height: 1.6; }
-
-        /* ── 모델 배지 tooltip ── */
-        .model-badge:hover { cursor: pointer; }
-
-        /* ── 파일 다운로드 카드 개선 ── */
-        .file-download-card {
-            border: 1px solid rgba(111,66,232,0.16);
-            background: linear-gradient(135deg, rgba(111,66,232,0.07), rgba(129,140,248,0.04));
-            border-radius: var(--radius);
-            box-shadow: 0 4px 16px rgba(111,66,232,0.08);
-        }
-        .file-dl-btn {
-            background: linear-gradient(135deg, var(--border), rgba(129,140,248,0.08));
-            border-color: rgba(111,66,232,0.24);
-        }
-        .file-dl-btn:hover {
-            background: linear-gradient(135deg, rgba(111,66,232,0.20), rgba(129,140,248,0.14));
-            box-shadow: 0 0 12px rgba(111,66,232,0.16);
-        }
-
-        /* ── setup wizard 버튼 ── */
-        .setup-wizard-sidebar-btn {
-            width: 100%;
-            padding: 9px 12px;
-            border-radius: var(--radius-sm);
-            background: rgba(244,114,182,0.07);
-            border: 1px solid rgba(244,114,182,0.18);
-            color: var(--accent-pink);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            font-weight: 600;
-            font-size: 12.5px;
-            transition: all .15s;
-        }
-        .setup-wizard-sidebar-btn:hover {
-            background: rgba(244,114,182,0.13);
-            border-color: rgba(244,114,182,0.3);
-        }
-
-        /* ── MCP 드롭다운 개선 ── */
-        .mcp-dropdown {
-            background: var(--surface-elevated);
-            border: 1px solid rgba(111,66,232,0.16);
-            border-radius: var(--radius);
-            box-shadow: var(--shadow), 0 0 20px rgba(111,66,232,0.08);
-        }
-        .mcp-recommend-btn {
-            background: linear-gradient(135deg, rgba(111,66,232,0.10), rgba(129,140,248,0.07));
-            border: 1px solid rgba(111,66,232,0.16);
-            border-radius: 999px;
-            color: var(--accent);
-        }
-
-/* Lattice AI workspace — product shell theme. */
-        .app-layout {
-            --bg: var(--bg);
-            --surface: var(--surface);
-            --surface-2: var(--surface-2);
-            --surface-3: var(--surface-3);
-            --accent: var(--accent);
-            --accent-2: var(--lt-accent-2, #0f9f8f);
-            --accent-3: var(--accent-3);
-            --accent-pink: var(--accent-pink);
-            --accent-soft: var(--accent-soft);
-            --text: var(--text);
-            --muted: var(--muted);
-            --faint: var(--faint);
-            --border: var(--border);
-            --border-strong: var(--border-strong);
-            --shadow: var(--shadow);
-            --shadow-sm: var(--shadow-sm);
-            --glow-green: 0 0 30px var(--border);
-            position: relative;
-            isolation: isolate;
-            background:
-                radial-gradient(circle at 82% 12%, var(--border), transparent 30%),
-                radial-gradient(circle at 10% 80%, rgba(180,160,255,0.16), transparent 35%),
-                linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 52%, var(--surface) 100%);
-        }
-
-        .app-layout::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            z-index: -1;
-            pointer-events: none;
-            background:
-                radial-gradient(circle, rgba(111,66,232,0.18) 1px, transparent 1.8px),
-                linear-gradient(rgba(111,66,232,0.06) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(111,66,232,0.04) 1px, transparent 1px);
-            background-size: 76px 76px, 48px 48px, 48px 48px;
-            background-position: 18px 22px, 0 0, 0 0;
-            mask-image: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.03));
-        }
-
-        .app-layout::after {
-            content: '';
-            position: absolute;
-            inset: 0;
-            z-index: -1;
-            pointer-events: none;
-            background:
-                linear-gradient(116deg, transparent 0 42%, rgba(125,183,255,0.08) 42.15%, transparent 42.35% 100%),
-                linear-gradient(28deg, transparent 0 58%, rgba(167,124,255,0.08) 58.15%, transparent 58.35% 100%);
-            opacity: 0.72;
-        }
-
-        .app-layout .sidebar {
-            background: rgba(30, 32, 43, 0.94);
-            border-right-color: rgba(218,225,255,0.13);
-            box-shadow: inset -1px 0 0 rgba(255,255,255,0.025);
-        }
-
-        @media (max-width: 768px) {
-            .app-layout .sidebar {
-                background: #222431;
-                backdrop-filter: none;
-                -webkit-backdrop-filter: none;
-            }
-        }
-
-        .app-layout .sidebar-header,
-        .app-layout .user-strip,
-        .app-layout .sidebar-footer {
-            border-color: rgba(243,241,232,0.075);
-        }
-
-        .app-layout .logo-box,
-        .app-layout .user-avatar {
-            background: radial-gradient(circle at 35% 30%, #ffffff 0 16%, #a77cff 17% 62%, #5b6cff 100%);
-            color: #171926;
-            box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 10px 24px rgba(0,0,0,0.28), 0 0 26px rgba(167,124,255,0.18);
-        }
-
-        .app-layout .brand-title {
-            background: none;
-            -webkit-text-fill-color: currentColor;
-            color: var(--text);
-            letter-spacing: 0;
-        }
-
-        .app-layout .history-item:hover,
-        .app-layout .history-item.active {
-            background: rgba(167,124,255,0.10);
-            border-left-color: var(--accent);
-        }
-
-        .app-layout .history-item.active {
-            border-color: rgba(167,124,255,0.24);
-        }
-
-        .app-layout .new-chat-btn,
-        .app-layout .status-btn,
-        .app-layout .setup-wizard-sidebar-btn,
-        .app-layout .admin-btn {
-            background: rgba(247,247,242,0.045);
-            border-color: rgba(218,225,255,0.12);
-            color: var(--text);
-            box-shadow: none;
-        }
-
-        .app-layout .new-chat-btn:hover,
-        .app-layout .status-btn:hover,
-        .app-layout .setup-wizard-sidebar-btn:hover,
-        .app-layout .admin-btn:hover {
-            background: rgba(167,124,255,0.12);
-            border-color: rgba(167,124,255,0.3);
-            color: var(--accent);
-        }
-
-        .app-layout .main-chat {
-            background: transparent;
-        }
-
-        .app-layout .chat-header {
-            background: rgba(33, 35, 48, 0.82);
-            border-bottom-color: rgba(218,225,255,0.12);
-            box-shadow: 0 1px 0 rgba(255,255,255,0.025);
-        }
-
-        .app-layout .model-badge,
-        .app-layout .status-pill {
-            background: rgba(247,247,242,0.045);
-            border-color: rgba(218,225,255,0.13);
-            color: var(--muted);
-        }
-
-        .app-layout .model-badge {
-            color: var(--text);
-        }
-
-        .app-layout .status-pill.vpc-ready {
-            background: rgba(32,184,170,0.11);
-            border-color: rgba(32,184,170,0.28);
-            color: #7ee3d7;
-        }
-
-        .app-layout .status-dot {
-            background: var(--surface);
-            box-shadow: 0 0 8px rgba(247,247,242,0.7), 0 0 18px rgba(167,124,255,0.36);
-        }
-
-        .app-layout .ops-card {
-            background: rgba(34, 36, 49, 0.82);
-            border-color: rgba(218,225,255,0.14);
-            box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.035);
-        }
-
-        .app-layout .ops-card.primary {
-            background: linear-gradient(135deg, rgba(167,124,255,0.16), rgba(34,36,49,0.9) 58%);
-            border-color: rgba(167,124,255,0.28);
-        }
-
-        .app-layout .ops-card.interactive:hover {
-            background: linear-gradient(135deg, rgba(167,124,255,0.18), rgba(34,36,49,0.96) 62%);
-            border-color: rgba(167,124,255,0.38);
-            box-shadow: var(--shadow), 0 0 26px rgba(167,124,255,0.13);
-        }
-
-        .app-layout .ops-card.primary .ops-icon,
-        .app-layout .empty-icon,
-        .app-layout .empty-state > div[style] {
-            background: rgba(167,124,255,0.12);
-            border-color: rgba(167,124,255,0.24);
-            color: var(--accent);
-            box-shadow: none;
-        }
-
-        .app-layout .ops-card:not(.primary) .ops-icon {
-            background: rgba(247,247,242,0.045);
-            border-color: rgba(218,225,255,0.1);
-            color: var(--accent-3);
-        }
-
-        .app-layout .empty-state h1 {
-            background: none;
-            -webkit-text-fill-color: currentColor;
-            color: var(--text);
-        }
-
-        .app-layout .empty-chip {
-            background: rgba(34,36,49,0.82);
-            border-color: rgba(218,225,255,0.12);
-            color: var(--muted);
-            box-shadow: none;
-        }
-
-        .app-layout .empty-chip:hover {
-            background: rgba(167,124,255,0.10);
-            border-color: rgba(167,124,255,0.28);
-            box-shadow: 0 10px 28px rgba(0,0,0,0.2);
-        }
-
-        .app-layout .user .bubble {
-            background: linear-gradient(135deg, rgba(98,89,196,0.96), rgba(45,116,156,0.92));
-            border-color: rgba(167,124,255,0.24);
-            color: #fbfbff;
-            box-shadow: 0 8px 24px rgba(0,0,0,0.22);
-        }
-
-        .app-layout .ai .bubble {
-            background: rgba(34, 36, 49, 0.9);
-            border-color: rgba(218,225,255,0.13);
-            box-shadow: 0 8px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.035);
-        }
-
-        .app-layout .bubble h1,
-        .app-layout .bubble h2,
-        .app-layout .bubble h3,
-        .app-layout .code-lang {
-            color: var(--accent-3);
-        }
-
-        .app-layout .code-container,
-        .app-layout pre {
-            background: var(--surface-2);
-            border-color: rgba(218,225,255,0.10);
-        }
-
-        .app-layout .code-header {
-            background: rgba(111,66,232,0.08);
-            border-bottom-color: rgba(218,225,255,0.09);
-        }
-
-        .app-layout .input-area {
-            background: linear-gradient(0deg, var(--input) 0%, var(--input) 64%, transparent 100%);
-        }
-
-        .app-layout .input-box {
-            background: rgba(34, 36, 49, 0.94);
-            border-color: rgba(218,225,255,0.15);
-            box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.035);
-        }
-
-        .app-layout .input-box:focus-within {
-            border-color: rgba(167,124,255,0.42);
-            box-shadow: var(--shadow), 0 0 0 3px rgba(167,124,255,0.08);
-        }
-
-        .app-layout .action-btn:hover,
-        .app-layout .file-type-btn:hover {
-            background: rgba(167,124,255,0.10);
-            color: var(--accent);
-            border-color: rgba(167,124,255,0.28);
-        }
-
-        .app-layout .send-btn {
-            background: linear-gradient(135deg, var(--accent), #7b61ff);
-            color: #fff;
-            box-shadow: 0 8px 20px rgba(111,66,232,0.24);
-        }
-
-        .app-layout .send-btn:hover {
-            background: var(--surface-2);
-            box-shadow: 0 10px 24px rgba(0,0,0,0.28);
-        }
-
-        /* PPT reference skin: light workspace, indigo navigation, modal-first flow.
-           v2.2.6: gated to the explicit light theme so it no longer shadows the
-           dark palette in tokens.css. In dark, body sets no color tokens and the
-           page inherits :root[data-lt-theme="dark"] — no loaded-last override needed. */
-        :root[data-lt-theme="light"] body.lattice-ref-chat {
-            --bg: #f8f6ff;
-            --surface: #ffffff;
-            --surface-2: #f3f0ff;
-            --surface-3: #ece7ff;
-            --accent: #6f4bf6;
-            --accent-2: #ffb84d;
-            --accent-3: #7868ff;
-            --accent-soft: rgba(111,75,246,0.10);
-            --danger: #ef4444;
-            --text: #24223d;
-            --muted: #625f7c;
-            --faint: #9690b2;
-            --border: rgba(111,75,246,0.13);
-            --border-strong: rgba(111,75,246,0.24);
-            --shadow: 0 24px 68px rgba(86,70,160,0.16);
-            --shadow-sm: 0 10px 28px rgba(86,70,160,0.10);
-        }
-        body::before {
-            background:
-                radial-gradient(circle at 76% 14%, rgba(111,75,246,0.12), transparent 30%),
-                radial-gradient(circle at 8% 80%, rgba(196,181,253,0.26), transparent 35%),
-                linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
-        }
-        .bg-grid {
-            opacity: 0.28;
-            background-image:
-                radial-gradient(circle, rgba(111,75,246,0.28) 1px, transparent 1.8px),
-                linear-gradient(rgba(111,75,246,0.06) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(111,75,246,0.05) 1px, transparent 1px);
-            background-size: 84px 84px, 48px 48px, 48px 48px;
-            mask-image: linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0.04));
-        }
-        .app-layout::after {
-            background:
-                linear-gradient(115deg, transparent 0 40%, rgba(111,75,246,0.08) 40.15%, transparent 40.4% 100%),
-                radial-gradient(ellipse at 5% 88%, rgba(111,75,246,0.16), transparent 35%);
-        }
-        .app-layout .sidebar {
-            background: var(--sidebar);
-            border-right-color: rgba(111,75,246,0.12);
-            box-shadow: 12px 0 46px rgba(86,70,160,0.08);
-        }
-        .app-layout .sidebar-header,
-        .app-layout .user-strip,
-        .app-layout .sidebar-footer,
-        .app-layout .sidebar-primary-actions,
-        .app-layout .chat-header {
-            border-color: rgba(111,75,246,0.10);
-        }
-        .app-layout .logo-box,
-        .app-layout .user-avatar {
-            background: linear-gradient(135deg, #6f4bf6, #9b87ff);
-            color: #fff;
-            box-shadow: 0 14px 28px rgba(111,75,246,0.22);
-        }
-        .app-layout .brand-title,
-        .app-layout .empty-state h1 {
-            color: var(--text);
-        }
-        .app-layout .brand-subtitle,
-        .app-layout .user-strip,
-        .app-layout .history-item,
-        .app-layout .logout-btn {
-            color: var(--muted);
-        }
-        .app-layout .sidebar-search input,
-        .app-layout .mcp-add-form input,
-        .app-layout .mcp-add-form textarea,
-        .app-layout .mcp-add-form select,
-        .app-layout .pw-field input {
-            background: var(--surface);
-            border-color: rgba(111,75,246,0.12);
-            color: var(--text);
-        }
-        .app-layout .new-chat-btn,
-        .app-layout .status-btn,
-        .app-layout .setup-wizard-sidebar-btn,
-        .app-layout .admin-btn {
-            background: var(--sidebar);
-            border-color: rgba(111,75,246,0.13);
-            color: var(--text);
-            box-shadow: 0 8px 22px rgba(86,70,160,0.06);
-        }
-        .app-layout .new-chat-btn:hover,
-        .app-layout .status-btn:hover,
-        .app-layout .setup-wizard-sidebar-btn:hover,
-        .app-layout .admin-btn:hover,
-        .app-layout .history-item:hover,
-        .app-layout .history-item.active {
-            background: var(--surface);
-            border-color: rgba(111,75,246,0.25);
-            color: var(--accent);
-        }
-        .app-layout .chat-header {
-            background: var(--sidebar);
-            box-shadow: 0 8px 28px rgba(86,70,160,0.08);
-        }
-        .app-layout .model-badge,
-        .app-layout .status-pill,
-        .app-layout .logout-btn {
-            background: var(--surface-2);
-            border-color: rgba(111,75,246,0.14);
-            color: var(--muted);
-        }
-        .app-layout .model-badge {
-            color: var(--text);
-        }
-        .app-layout .status-dot {
-            background: var(--accent);
-            box-shadow: 0 0 0 4px rgba(111,75,246,0.10), 0 0 18px rgba(111,75,246,0.30);
-        }
-        .app-layout .ops-card,
-        .app-layout .empty-chip,
-        .app-layout .ai .bubble,
-        .app-layout .acct-modal,
-        .app-layout .mcp-modal {
-            background: var(--modal);
-            border-color: rgba(111,75,246,0.13);
-            box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.9);
-        }
-        .app-layout .ops-card.primary {
-            background: linear-gradient(135deg, rgba(111,75,246,0.12), var(--card) 62%);
-            border-color: rgba(111,75,246,0.23);
-        }
-        .app-layout .ops-card.interactive:hover,
-        .app-layout .empty-chip:hover {
-            background: var(--surface);
-            border-color: rgba(111,75,246,0.30);
-            box-shadow: 0 18px 42px rgba(86,70,160,0.16);
-        }
-        .app-layout .ops-card.primary .ops-icon,
-        .app-layout .ops-card:not(.primary) .ops-icon,
-        .app-layout .empty-state > div[style] {
-            background: linear-gradient(135deg, rgba(111,75,246,0.14), rgba(155,135,255,0.12));
-            border-color: rgba(111,75,246,0.18);
-            color: var(--accent);
-        }
-        .app-layout .messages-viewport {
-            background: transparent;
-        }
-        .app-layout .user .bubble {
-            background: linear-gradient(135deg, #6f4bf6, #7366ff);
-            color: #fff;
-            border-color: rgba(111,75,246,0.28);
-            box-shadow: 0 14px 32px rgba(111,75,246,0.22);
-        }
-        .app-layout .input-area {
-            background: linear-gradient(0deg, var(--input) 0%, var(--input) 64%, transparent 100%);
-        }
-        .app-layout .input-box {
-            background: var(--input);
-            border-color: rgba(111,75,246,0.16);
-            box-shadow: 0 18px 54px rgba(86,70,160,0.15);
-        }
-        .app-layout textarea {
-            color: var(--text);
-        }
-        .app-layout .send-btn {
-            background: linear-gradient(135deg, #6f4bf6, #796cff);
-            color: #fff;
-            box-shadow: 0 14px 30px rgba(111,75,246,0.24);
-        }
-        .workspace-modal-overlay,
-        .mode-modal-overlay {
-            display: none;
-            position: fixed;
-            inset: 0;
-            z-index: 1400;
-            align-items: center;
-            justify-content: center;
-            padding: 24px;
-            background: rgba(111, 66, 232, 0.18);
-            backdrop-filter: none;
-        }
-        .workspace-modal-overlay.open,
-        .mode-modal-overlay.open {
-            display: flex;
-        }
-        .workspace-modal,
-        .mode-modal {
-            width: min(620px, 100%);
-            border-radius: 20px;
-            background:
-                linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,248,255,0.94));
-            border: 1px solid rgba(111,75,246,0.16);
-            box-shadow: 0 30px 90px rgba(60,45,130,0.24);
-            padding: 30px;
-            color: var(--text);
-            position: relative;
-        }
-        .mode-modal {
-            width: min(520px, 100%);
-            background:
-                radial-gradient(circle at 18% 8%, rgba(111,75,246,0.18), transparent 32%),
-                linear-gradient(180deg, #ffffff, var(--surface));
-            color: var(--text);
-            border-color: rgba(111,66,232,0.16);
-        }
-        .modal-kicker {
-            color: var(--accent);
-            font-size: 11px;
-            font-weight: 800;
-            letter-spacing: .08em;
-            text-transform: uppercase;
-            text-align: center;
-            margin-bottom: 8px;
-        }
-        .mode-modal .modal-kicker { color: var(--accent); }
-        .workspace-modal h2,
-        .mode-modal h2 {
-            text-align: center;
-            font-size: 24px;
-            margin-bottom: 7px;
-        }
-        .workspace-modal p,
-        .mode-modal p {
-            text-align: center;
-            color: var(--muted);
-            font-size: 13px;
-            line-height: 1.6;
-            margin-bottom: 22px;
-        }
-        .mode-modal p { color: var(--muted); }
-        .workspace-options,
-        .mode-options {
-            display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-            gap: 14px;
-        }
-        .workspace-card,
-        .mode-card {
-            border-radius: 16px;
-            border: 1px solid rgba(111,75,246,0.14);
-            background: var(--card);
-            padding: 22px 18px;
-            cursor: pointer;
-            text-align: center;
-            transition: transform .18s, box-shadow .18s, border-color .18s;
-        }
-        .workspace-card:hover,
-        .workspace-card.selected,
-        .mode-card:hover,
-        .mode-card.selected {
-            transform: translateY(-3px);
-            border-color: rgba(111,75,246,0.42);
-            box-shadow: 0 18px 44px rgba(86,70,160,0.18);
-        }
-        .mode-card {
-            background: rgba(255,255,255,0.08);
-            border-color: rgba(255,255,255,0.12);
-            color: #fff;
-            position: relative;
-        }
-        .mode-card.selected::after {
-            content: '✓';
-            position: absolute;
-            top: 12px;
-            right: 12px;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: #7b6dff;
-            display: grid;
-            place-items: center;
-            font-size: 12px;
-        }
-        .workspace-icon,
-        .mode-icon {
-            width: 58px;
-            height: 58px;
-            margin: 0 auto 14px;
-            border-radius: 20px;
-            display: grid;
-            place-items: center;
-            color: #fff;
-            font-size: 26px;
-            background: linear-gradient(135deg, #6f4bf6, #9b87ff);
-            box-shadow: 0 14px 30px rgba(111,75,246,0.24);
-        }
-        .workspace-card h3,
-        .mode-card h3 {
-            font-size: 15px;
-            margin-bottom: 7px;
-        }
-        .workspace-card span,
-        .mode-card span {
-            display: block;
-            color: var(--muted);
-            font-size: 12px;
-            line-height: 1.45;
-        }
-        .mode-card span { color: var(--muted); }
-        .modal-footnote {
-            color: var(--faint);
-            font-size: 12px;
-            text-align: center;
-            margin-top: 18px;
-        }
-        .mode-close {
-            position: absolute;
-            top: 14px;
-            right: 14px;
-            border: 0;
-            background: rgba(255,255,255,0.08);
-            color: var(--muted);
-            border-radius: 10px;
-            width: 32px;
-            height: 32px;
-            cursor: pointer;
-        }
-        @media (max-width: 768px) {
-            .app-layout .sidebar { background: #fff; }
-            .workspace-options,
-            .mode-options { grid-template-columns: 1fr; }
-            .workspace-modal,
-            .mode-modal { padding: 24px 18px; }
-        }
-
-.ux-hidden { display: none; }
-
-        .app-layout .ops-strip { display: none; }
-
-        .app-layout .chat-header {
-            min-height: 64px;
-            padding: 10px 22px;
-        }
-
-        .app-layout .header-left {
-            flex: 1;
-            min-width: 0;
-        }
-
-        .mode-segmented {
-            display: inline-grid;
-            grid-auto-flow: column;
-            grid-auto-columns: minmax(98px, auto);
-            gap: 2px;
-            padding: 4px;
-            border: 1px solid rgba(111,75,246,0.16);
-            border-radius: 10px;
-            background: var(--surface-2);
-            box-shadow: 0 8px 22px rgba(86,70,160,0.08);
-        }
-
-        .mode-segmented button {
-            min-height: 34px;
-            border: 0;
-            border-radius: 8px;
-            background: transparent;
-            color: #9b8fd4;
-            cursor: pointer;
-            font: inherit;
-            font-size: 12.5px;
-            font-weight: 800;
-            white-space: nowrap;
-            padding: 0 12px;
-        }
-
-        .mode-segmented button.active {
-            background: linear-gradient(135deg, #6f4bf6, #7b6dff);
-            color: #fff;
-            box-shadow: 0 10px 24px rgba(111,75,246,0.22);
-        }
-
-        .mode-segmented button:disabled {
-            display: none;
-        }
-
-        .workspace-type-line {
-            font-size: 10.5px;
-            color: var(--faint);
-        }
-
-        .app-layout .sidebar-footer {
-            display: none;
-        }
-
-        .app-layout .reference-side-nav {
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-            padding: 12px 10px 4px;
-        }
-
-        .app-layout .reference-nav-item {
-            width: 100%;
-            min-height: 38px;
-            border: 1px solid transparent;
-            background: transparent;
-            color: var(--text);
-            border-radius: 8px;
-            padding: 0 12px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font: inherit;
-            font-size: 13px;
-            font-weight: 750;
-            cursor: pointer;
-            text-align: left;
-        }
-
-        .app-layout .reference-nav-item:hover,
-        .app-layout .reference-nav-item.active {
-            background: var(--surface);
-            border-color: rgba(111,75,246,0.22);
-            color: var(--accent);
-        }
-
-        .home-action-grid {
-            display: grid;
-            grid-template-columns: repeat(4, minmax(0, 1fr));
-            gap: 12px;
-            margin: 22px auto 20px;
-            max-width: 900px;
-            pointer-events: auto;
-        }
-
-        .home-action-card {
-            border: 1px solid rgba(111,75,246,0.14);
-            background: var(--card);
-            border-radius: 8px;
-            padding: 16px;
-            text-align: left;
-            cursor: pointer;
-            color: var(--text);
-            min-height: 132px;
-            box-shadow: 0 10px 28px rgba(86,70,160,0.08);
-        }
-
-        .home-action-card:hover {
-            transform: translateY(-2px);
-            border-color: rgba(111,75,246,0.34);
-            box-shadow: 0 18px 42px rgba(86,70,160,0.16);
-        }
-
-        .home-action-card i {
-            display: inline-grid;
-            width: 34px;
-            height: 34px;
-            place-items: center;
-            border-radius: 8px;
-            margin-bottom: 12px;
-            color: #fff;
-            background: linear-gradient(135deg, #6f4bf6, #8d7aff);
-        }
-
-        .home-action-card h3 {
-            font-size: 14px;
-            margin: 0 0 6px;
-        }
-
-        .home-action-card p {
-            font-size: 12px;
-            color: var(--muted);
-            line-height: 1.5;
-            margin: 0;
-        }
-
-        .home-summary-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            gap: 12px;
-            max-width: 900px;
-            margin: 0 auto;
-            pointer-events: auto;
-        }
-
-        .home-summary-panel {
-            border: 1px solid rgba(111,75,246,0.12);
-            background: var(--card);
-            border-radius: 8px;
-            padding: 16px;
-            text-align: left;
-            min-width: 0;
-        }
-
-        .home-summary-panel header {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: var(--text);
-            font-size: 13px;
-            font-weight: 800;
-            margin-bottom: 12px;
-        }
-
-        .home-summary-panel p {
-            display: flex;
-            justify-content: space-between;
-            gap: 10px;
-            color: var(--muted);
-            font-size: 12px;
-            line-height: 1.45;
-            margin: 0 0 9px;
-        }
-
-        .home-summary-panel p:last-child { margin-bottom: 0; }
-        .home-summary-panel span { color: var(--faint); white-space: nowrap; }
-
-        /* ── 홈 대시보드 ─────────────────────────────────────── */
-        .home-dash {
-            width: 100%;
-            max-width: 960px;
-            margin: 0 auto;
-            padding: 28px 24px 40px;
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-
-        .home-dash-head h1 {
-            font-size: 26px;
-            font-weight: 750;
-            letter-spacing: -0.03em;
-            color: var(--text);
-            margin: 0 0 4px;
-        }
-        .home-dash-head p {
-            font-size: 13px;
-            color: var(--muted);
-            margin: 0;
-        }
-
-        /* 카드 행 */
-        .home-dash-cards {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 14px;
-        }
-        .home-dash-cards:has(#home-setup-card[style*="none"]) {
-            grid-template-columns: repeat(2, 1fr);
-        }
-
-        /* 개별 카드 */
-        .hdc-card {
-            background: var(--card);
-            border: 1px solid var(--border);
-            border-radius: 14px;
-            padding: 18px;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            box-shadow: 0 4px 18px rgba(88,72,150,0.07);
-        }
-        .hdc-title {
-            font-size: 12px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.07em;
-            color: var(--accent);
-        }
-        .hdc-model-badge {
-            font-size: 15px;
-            font-weight: 650;
-            color: var(--text);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        /* stat 행 */
-        .hdc-stats { display: flex; flex-direction: column; gap: 8px; }
-        .hdc-stat-row {
-            display: grid;
-            grid-template-columns: 44px 1fr 36px;
-            align-items: center;
-            gap: 8px;
-        }
-        .hdc-stat-label { font-size: 11px; color: var(--muted); }
-        .hdc-stat-val { font-size: 12px; font-weight: 700; color: var(--text); text-align: right; }
-        .hdc-bar {
-            height: 6px;
-            border-radius: 99px;
-            background: rgba(111,66,232,0.10);
-            overflow: hidden;
-        }
-        .hdc-bar-fill {
-            height: 100%;
-            border-radius: 99px;
-            background: var(--accent);
-            transition: width 0.6s ease;
-        }
-        .hdc-bar-fill.hdc-cpu { background: #22c4a0; }
-        .hdc-bar-fill.hdc-gpu { background: #f472b6; }
-
-        /* KG counts */
-        .hdc-counts {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            flex: 1;
-        }
-        .hdc-count-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
-        .hdc-count-item span { font-size: 28px; font-weight: 750; color: var(--text); letter-spacing: -0.03em; line-height: 1; }
-        .hdc-count-item label { font-size: 11px; color: var(--muted); }
-        .hdc-count-sep { width: 1px; height: 36px; background: var(--border); }
-
-        /* Setup card */
-        .hdc-setup .hdc-setup-count { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
-        .hdc-setup .hdc-setup-count span { font-size: 40px; font-weight: 750; color: var(--accent); letter-spacing: -0.04em; line-height: 1; }
-        .hdc-setup .hdc-setup-count label { font-size: 12px; color: var(--muted); }
-
-        /* 카드 버튼 */
-        .hdc-btn {
-            padding: 8px 14px;
-            border-radius: 9px;
-            border: 1px solid rgba(111,66,232,0.22);
-            background: rgba(111,66,232,0.07);
-            color: var(--accent);
-            font-size: 12px;
-            font-weight: 600;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 5px;
-            transition: all 0.15s;
-        }
-        .hdc-btn:hover {
-            background: var(--border);
-            border-color: rgba(111,66,232,0.35);
-        }
-
-        /* 하단 최근 패널 */
-        .home-dash-recent {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 14px;
-        }
-        .hdr-panel {
-            background: var(--card);
-            border: 1px solid var(--border);
-            border-radius: 14px;
-            overflow: hidden;
-            box-shadow: 0 4px 18px rgba(88,72,150,0.07);
-        }
-        .hdr-head {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 12px 16px;
-            border-bottom: 1px solid rgba(111,66,232,0.10);
-            font-size: 12px;
-            font-weight: 700;
-            color: var(--accent);
-            text-transform: uppercase;
-            letter-spacing: 0.07em;
-        }
-        .hdr-head button {
-            background: none;
-            border: none;
-            color: var(--muted);
-            font-size: 11px;
-            cursor: pointer;
-            padding: 0;
-        }
-        .hdr-head button:hover { color: var(--accent); }
-        .hdr-list { padding: 6px 0; min-height: 120px; max-height: 200px; overflow-y: auto; }
-        .hdr-item {
-            display: grid;
-            grid-template-columns: 18px 1fr auto;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 16px;
-            font-size: 13px;
-            color: var(--text);
-            cursor: pointer;
-            transition: background 0.1s;
-        }
-        .hdr-item:hover { background: rgba(111,66,232,0.06); }
-        .hdr-item i { color: var(--accent); font-size: 14px; }
-        .hdr-item span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
-        .hdr-item small { color: var(--muted); font-size: 11px; white-space: nowrap; }
-        .hdr-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; }
-
-        .onboarding-overlay {
-            display: none;
-            position: fixed;
-            inset: 0;
-            z-index: 9500;
-            align-items: center;
-            justify-content: center;
-            padding: 24px;
-            background: rgba(28, 24, 54, 0.34);
-            backdrop-filter: none;
-        }
-
-        .onboarding-overlay.open { display: flex; }
-
-        .onboarding-card {
-            width: min(860px, 100%);
-            max-height: min(760px, calc(100vh - 48px));
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            border-radius: 16px;
-            border: 1px solid rgba(111,75,246,0.16);
-            background: linear-gradient(180deg, var(--card), var(--card));
-            box-shadow: 0 30px 90px rgba(60,45,130,0.24);
-            color: var(--text);
-        }
-
-        .onboarding-top {
-            padding: 22px 26px 16px;
-            border-bottom: 1px solid rgba(111,75,246,0.10);
-        }
-
-        .onboarding-kicker {
-            color: var(--accent);
-            font-size: 11px;
-            font-weight: 900;
-            letter-spacing: .08em;
-            text-transform: uppercase;
-            margin-bottom: 12px;
-        }
-
-        .onboarding-steps {
-            display: grid;
-            grid-template-columns: repeat(5, minmax(0, 1fr));
-            gap: 8px;
-        }
-
-        .onboarding-step {
-            min-width: 0;
-            color: var(--faint);
-            font-size: 11px;
-            font-weight: 800;
-            border-top: 3px solid rgba(111,75,246,0.12);
-            padding-top: 7px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .onboarding-step.active,
-        .onboarding-step.done {
-            color: var(--accent);
-            border-top-color: var(--accent);
-        }
-
-        .onboarding-body.lattice-ref-chat {
-            overflow-y: auto;
-            padding: 28px 30px;
-        }
-
-        .onboarding-body h2 {
-            font-size: 25px;
-            margin-bottom: 8px;
-        }
-
-        .onboarding-body > p {
-            color: var(--muted);
-            font-size: 13.5px;
-            line-height: 1.6;
-            margin-bottom: 20px;
-        }
-
-        .onboarding-actions {
-            padding: 16px 26px 22px;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            gap: 10px;
-            border-top: 1px solid rgba(111,75,246,0.10);
-        }
-
-        .onboarding-primary,
-        .onboarding-secondary {
-            border-radius: 8px;
-            min-height: 40px;
-            padding: 0 18px;
-            font: inherit;
-            font-size: 13px;
-            font-weight: 850;
-            cursor: pointer;
-        }
-
-        .onboarding-primary {
-            border: 0;
-            background: linear-gradient(135deg, #6f4bf6, #7b6dff);
-            color: #fff;
-            box-shadow: 0 14px 30px rgba(111,75,246,0.24);
-        }
-
-        .onboarding-secondary {
-            border: 1px solid rgba(111,75,246,0.16);
-            background: var(--card);
-            color: var(--muted);
-        }
-
-        .onboarding-choice-grid,
-        .onboarding-mode-grid,
-        .recommendation-grid,
-        .analysis-grid {
-            display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-            gap: 12px;
-        }
-
-        .onboarding-choice,
-        .onboarding-mode,
-        .recommendation-card,
-        .analysis-row {
-            border: 1px solid rgba(111,75,246,0.14);
-            background: var(--card);
-            border-radius: 10px;
-            padding: 16px;
-            text-align: left;
-            color: var(--text);
-        }
-
-        .onboarding-choice,
-        .onboarding-mode { cursor: pointer; }
-
-        .onboarding-choice:hover,
-        .onboarding-mode:hover {
-            border-color: rgba(111,75,246,0.38);
-            box-shadow: 0 14px 34px rgba(86,70,160,0.14);
-        }
-
-        .onboarding-choice i,
-        .onboarding-mode i {
-            color: var(--accent);
-            font-size: 24px;
-            margin-bottom: 10px;
-        }
-
-        .onboarding-choice h3,
-        .onboarding-mode h3,
-        .recommendation-card h3 {
-            font-size: 14px;
-            margin: 0 0 7px;
-        }
-
-        .onboarding-choice p,
-        .onboarding-mode p,
-        .recommendation-card p,
-        .analysis-row p {
-            color: var(--muted);
-            font-size: 12.5px;
-            line-height: 1.55;
-            margin: 0;
-        }
-
-        .analysis-row strong {
-            display: block;
-            font-size: 12px;
-            color: var(--faint);
-            margin-bottom: 4px;
-        }
-
-        .onboarding-model-list {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            max-height: min(440px, 48vh);
-            overflow-y: auto;
-            padding-right: 4px;
-        }
-
-        .onboarding-model-card {
-            border: 1px solid rgba(111,75,246,0.14);
-            background: var(--card);
-            border-radius: 10px;
-            padding: 14px;
-        }
-
-        .onboarding-model-card h3 {
-            font-size: 14px;
-            margin: 0 0 9px;
-        }
-
-        .onboarding-model-grid {
-            display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-            gap: 8px;
-        }
-
-        .onboarding-model-option {
-            border: 1px solid rgba(111,75,246,0.14);
-            background: var(--surface);
-            border-radius: 8px;
-            padding: 11px;
-            text-align: left;
-            color: var(--text);
-            cursor: pointer;
-        }
-
-        .onboarding-model-option:hover {
-            border-color: rgba(111,75,246,0.38);
-            box-shadow: 0 12px 24px rgba(86,70,160,0.12);
-        }
-
-        .onboarding-model-option strong,
-        .onboarding-model-option span {
-            display: block;
-        }
-
-        .onboarding-model-option strong {
-            font-size: 13px;
-            margin-bottom: 4px;
-        }
-
-        .onboarding-model-option span {
-            color: var(--muted);
-            font-size: 12px;
-            line-height: 1.42;
-            word-break: break-word;
-        }
-
-        .onboarding-progress-meta {
-            color: var(--muted);
-            font-size: 12px;
-            line-height: 1.45;
-            margin-top: 8px;
-        }
-
-        .setup-log-list {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .setup-log-row {
-            border: 1px solid rgba(111,75,246,0.12);
-            background: var(--surface);
-            border-radius: 8px;
-            padding: 12px 14px;
-            display: flex;
-            gap: 10px;
-            align-items: flex-start;
-            color: var(--muted);
-            font-size: 13px;
-        }
-
-        .setup-log-row.done { color: var(--success); border-color: rgba(20,122,90,0.24); }
-        .setup-log-row.error { color: var(--danger); border-color: rgba(239,68,68,0.24); }
-
-        .advanced-settings-overlay {
-            display: none;
-            position: fixed;
-            inset: 0;
-            z-index: 880;
-            align-items: center;
-            justify-content: center;
-            padding: 22px;
-            background: rgba(0,0,0,0.42);
-        }
-
-        .advanced-settings-overlay.open { display: flex; }
-
-        .advanced-settings-panel {
-            width: min(520px, 100%);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            background: var(--surface);
-            box-shadow: var(--shadow);
-            overflow: hidden;
-        }
-
-        .advanced-settings-panel header {
-            padding: 18px 20px;
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .advanced-settings-body.lattice-ref-chat {
-            padding: 18px 20px 22px;
-            display: grid;
-            gap: 10px;
-        }
-
-        .advanced-settings-action {
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            background: var(--surface-2);
-            color: var(--text);
-            padding: 13px 14px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font: inherit;
-            font-size: 13px;
-            font-weight: 800;
-            cursor: pointer;
-            text-align: left;
-        }
-
-        body[data-mode="default"] .cu-dev-controls {
-            display: none;
-        }
-
-        body.lattice-ref-chat .app-layout .sidebar,
-        body.lattice-ref-chat .app-layout .chat-header {
-            --text: #8268f2;
-            --muted: #9b8af0;
-            --faint: #b4a9ee;
-        }
-
-        body.lattice-ref-chat .app-layout .sidebar {
-            color: #9b8af0;
-        }
-
-        body.lattice-ref-chat .app-layout .brand-title,
-        body.lattice-ref-chat .app-layout .brand-subtitle,
-        body.lattice-ref-chat .app-layout .user-strip,
-        body.lattice-ref-chat .app-layout .workspace-type-line,
-        body.lattice-ref-chat .app-layout .history-section-label,
-        body.lattice-ref-chat .app-layout .history-empty,
-        body.lattice-ref-chat .app-layout .history-item,
-        body.lattice-ref-chat .app-layout .history-item i,
-        body.lattice-ref-chat .app-layout .reference-nav-item,
-        body.lattice-ref-chat .app-layout .reference-nav-item i,
-        body.lattice-ref-chat .app-layout .sidebar-search-wrap i,
-        body.lattice-ref-chat .app-layout .sidebar-search input,
-        body.lattice-ref-chat .app-layout .sidebar-search input::placeholder {
-            color: #9b8af0;
-            -webkit-text-fill-color: currentColor;
-        }
-
-        body.lattice-ref-chat .app-layout .reference-nav-item:hover,
-        body.lattice-ref-chat .app-layout .reference-nav-item.active,
-        body.lattice-ref-chat .app-layout .history-item:hover,
-        body.lattice-ref-chat .app-layout .history-item.active,
-        body.lattice-ref-chat .app-layout .new-chat-btn,
-        body.lattice-ref-chat .app-layout .status-btn,
-        body.lattice-ref-chat .app-layout .setup-wizard-sidebar-btn,
-        body.lattice-ref-chat .app-layout .admin-btn {
-            color: #7b5ff0;
-        }
-
-        body.lattice-ref-chat .app-layout .chat-header,
-        body.lattice-ref-chat .app-layout .mode-segmented button,
-        body.lattice-ref-chat .app-layout .header-pills .logout-btn,
-        body.lattice-ref-chat .app-layout .sidebar-toggle {
-            color: #8f7bf7;
-        }
-
-        body.lattice-ref-chat .app-layout .mode-segmented button:not(.active) {
-            color: var(--muted);
-        }
-
-        body.lattice-ref-chat .app-layout .mode-segmented button.active {
-            color: #ffffff;
-        }
-
-        body.lattice-ref-chat .app-layout .header-pills .logout-btn i,
-        body.lattice-ref-chat .app-layout .sidebar-toggle i {
-            color: inherit;
-        }
-
-        @media (max-width: 900px) {
-            .home-action-grid,
-            .home-summary-grid,
-            .onboarding-choice-grid,
-            .onboarding-mode-grid,
-            .onboarding-model-grid,
-            .recommendation-grid,
-            .analysis-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .mode-segmented {
-                grid-auto-columns: minmax(84px, auto);
-                max-width: 100%;
-                overflow-x: auto;
-            }
-
-            .mode-segmented button {
-                padding: 0 10px;
-                font-size: 12px;
-            }
-        }
-
-        /* =========================================================
-           Workspace product shell — full override for .app-layout
-           ========================================================= */
-        body.lattice-ref-chat .app-layout {
-            --bg: var(--bg);
-            --surface: var(--surface);
-            --surface-2: var(--surface-2);
-            --surface-3: var(--surface-3);
-            --accent: var(--accent);
-            --accent-2: var(--lt-accent-2, #0f9f8f);
-            --accent-3: var(--accent-2);
-            --accent-soft: var(--accent-soft);
-            --text: var(--text);
-            --muted: var(--muted);
-            --faint: var(--faint);
-            --border: var(--border);
-            --border-strong: var(--border-strong);
-            --shadow: var(--shadow);
-            --shadow-sm: var(--shadow-sm);
-            background: var(--app-bg);
-        }
-        body.lattice-ref-chat .app-layout::before,
-        body.lattice-ref-chat .app-layout::after {
-            display: none;
-        }
-
-        /* Sidebar */
-        body.lattice-ref-chat .app-layout .sidebar {
-            background: var(--sidebar);
-            border-right: 1px solid var(--line);
-            box-shadow: none;
-        }
-
-        /* Chat header */
-        body.lattice-ref-chat .app-layout .chat-header {
-            background: var(--sidebar);
-            border-bottom: 1px solid var(--line);
-            box-shadow: none;
-            backdrop-filter: none; /* glass removed v3.5.0 */
-        }
-
-        /* Messages viewport */
-        body.lattice-ref-chat .app-layout .messages-viewport {
-            background: transparent;
-        }
-
-        /* AI 채팅 버블 */
-        body.lattice-ref-chat .app-layout .ai .bubble {
-            background: var(--surface);
-            border: 1px solid var(--accent-soft);
-            color: var(--text);
-            box-shadow: 0 4px 18px rgba(88,72,150,0.08);
-        }
-
-        /* 사용자 채팅 버블 */
-        body.lattice-ref-chat .app-layout .user .bubble {
-            background: linear-gradient(135deg, var(--accent), var(--accent-2));
-            border: 1px solid rgba(111,66,232,0.24);
-            color: #ffffff;
-            box-shadow: 0 8px 28px var(--border-strong);
-        }
-
-        /* 버블 내 헤딩, 코드 언어 레이블 */
-        body.lattice-ref-chat .app-layout .ai .bubble h1,
-        body.lattice-ref-chat .app-layout .ai .bubble h2,
-        body.lattice-ref-chat .app-layout .ai .bubble h3,
-        body.lattice-ref-chat .app-layout .ai .bubble .code-lang {
-            color: var(--accent);
-        }
-
-        /* 코드 블록 */
-        body.lattice-ref-chat .app-layout .code-container,
-        body.lattice-ref-chat .app-layout pre {
-            background: var(--surface-2);
-            border-color: var(--border);
-        }
-        body.lattice-ref-chat .app-layout .code-header {
-            background: var(--surface-2);
-            border-bottom-color: rgba(111,66,232,0.13);
-        }
-
-        /* 입력창 영역 */
-        body.lattice-ref-chat .app-layout .input-area {
-            background: linear-gradient(0deg,
-                color-mix(in srgb, var(--bg) 98%, transparent) 0%,
-                color-mix(in srgb, var(--bg) 82%, transparent) 64%,
-                transparent 100%);
-        }
-        body.lattice-ref-chat .app-layout .input-box {
-            background: var(--input);
-            border: 1px solid var(--line);
-            box-shadow: var(--shadow-sm);
-        }
-        body.lattice-ref-chat .app-layout .input-box:focus-within {
-            border-color: var(--accent);
-            box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-soft);
-        }
-
-        /* 전송 버튼 */
-        body.lattice-ref-chat .app-layout .send-btn {
-            background: linear-gradient(135deg, var(--accent), var(--accent-2));
-            color: #ffffff;
-            box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent);
-        }
-        body.lattice-ref-chat .app-layout .send-btn:hover {
-            box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 34%, transparent);
-            opacity: 0.92;
-        }
-
-        /* 빈 상태 카드/칩 */
-        body.lattice-ref-chat .app-layout .empty-chip {
-            background: var(--surface-2);
-            border-color: rgba(111,66,232,0.15);
-            color: var(--muted);
-            box-shadow: 0 2px 10px rgba(88,72,150,0.08);
-        }
-        body.lattice-ref-chat .app-layout .empty-chip:hover {
-            background: var(--accent-soft);
-            border-color: var(--border-strong);
-        }
-        body.lattice-ref-chat .app-layout .ops-card {
-            background: var(--card);
-            border-color: var(--line);
-            box-shadow: var(--shadow-sm);
-        }
-        body.lattice-ref-chat .app-layout .ops-card.primary {
-            background: linear-gradient(135deg, var(--accent-soft), var(--card) 58%);
-            border-color: var(--border-strong);
-        }
-
-        /* 배지/버튼 */
-        body.lattice-ref-chat .app-layout .model-badge {
-            background: var(--surface-2);
-            border-color: rgba(111,66,232,0.15);
-            color: var(--text);
-        }
-        body.lattice-ref-chat .app-layout .status-pill {
-            background: var(--surface-2);
-            border-color: rgba(111,66,232,0.13);
-            color: var(--muted);
-        }
-        body.lattice-ref-chat .app-layout .status-dot {
-            background: var(--accent);
-            box-shadow: 0 0 8px rgba(111,66,232,0.5), 0 0 16px rgba(111,66,232,0.2);
-        }
-        body.lattice-ref-chat .app-layout .new-chat-btn,
-        body.lattice-ref-chat .app-layout .status-btn,
-        body.lattice-ref-chat .app-layout .admin-btn,
-        body.lattice-ref-chat .app-layout .setup-wizard-sidebar-btn {
-            background: var(--accent-soft);
-            border-color: var(--border-strong);
-            color: var(--accent);
-            box-shadow: none;
-        }
-
-        /* ── 네비 버튼 글씨 검정 ── */
-        body.lattice-ref-chat .app-layout .reference-nav-item,
-        body.lattice-ref-chat .app-layout .reference-nav-item i {
-            color: var(--text);
-            -webkit-text-fill-color: var(--text);
-        }
-        body.lattice-ref-chat .app-layout .reference-nav-item:hover,
-        body.lattice-ref-chat .app-layout .reference-nav-item.active {
-            color: var(--text);
-            -webkit-text-fill-color: var(--text);
-            background: var(--accent-soft);
-            border-color: var(--border-strong);
-        }
-        /* 채팅 기록 목록도 검정 */
-        body.lattice-ref-chat .app-layout .history-item {
-            color: var(--text);
-            -webkit-text-fill-color: var(--text);
-        }
-        body.lattice-ref-chat .app-layout .history-item:hover,
-        body.lattice-ref-chat .app-layout .history-item.active {
-            color: var(--text);
-            -webkit-text-fill-color: var(--text);
-        }
-        /* 브랜드 타이틀 / 서브타이틀 */
-        body.lattice-ref-chat .app-layout .brand-title {
-            color: var(--text);
-            -webkit-text-fill-color: var(--text);
-        }
-        /* 사이드바 검색 입력 */
-        body.lattice-ref-chat .app-layout .sidebar-search input {
-            color: var(--text);
-            background: var(--input);
-            border-color: var(--line);
-        }
-        body.lattice-ref-chat .app-layout .sidebar-search input::placeholder {
-            color: var(--faint);
-            -webkit-text-fill-color: var(--faint);
-        }
-        /* 상단 모드 세그멘트 */
-        body.lattice-ref-chat .app-layout .mode-segmented {
-            background: var(--surface-2);
-            border-color: var(--line);
-        }
-        body.lattice-ref-chat .app-layout .mode-segmented button:not(.active) {
-            color: var(--muted);
-        }
-
-        /* ── 홈 뷰: 채팅 전용 사이드바 섹션 숨기기 ── */
-        body.lattice-ref-chat .app-layout[data-view="home"] .sidebar-search,
-        body.lattice-ref-chat .app-layout[data-view="home"] .sidebar-primary-actions,
-        body.lattice-ref-chat .app-layout[data-view="home"] .history-container {
-            display: none;
-        }
-        /* 채팅 뷰: 다시 표시 (기본값이므로 명시) */
-        body.lattice-ref-chat .app-layout[data-view="chat"] .sidebar-search,
-        body.lattice-ref-chat .app-layout[data-view="chat"] .sidebar-primary-actions,
-        body.lattice-ref-chat .app-layout[data-view="chat"] .history-container {
-            display: flex;
-        }
-        body.lattice-ref-chat .app-layout[data-view="chat"] .history-container {
-            display: block;
-        }
-
-        /* ── 홈 뷰: 홈 대시보드 보임, 채팅 힌트 숨김 ── */
-        body.lattice-ref-chat .app-layout[data-view="home"] #empty-state,
-        body.lattice-ref-chat .app-layout[data-view="home"] .message,
-        body.lattice-ref-chat .app-layout[data-view="home"] .mcp-recommend-wrap,
-        body.lattice-ref-chat .app-layout[data-view="home"] .file-card {
-            display: none;
-        }
-        body.lattice-ref-chat .app-layout[data-view="home"] .home-dash { display: flex; }
-
-        /* ── 채팅 뷰: 홈 대시보드 숨김, 채팅 힌트 보임 ── */
-        body.lattice-ref-chat .app-layout[data-view="chat"] .home-dash { display: none; }
-        body.lattice-ref-chat .app-layout[data-view="chat"] .chat-empty-hint {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 12px;
-            height: 100%;
-            color: var(--muted);
-            max-width: 520px;
-            margin: 0 auto;
-            text-align: center;
-            padding: 28px 18px;
-        }
-        body.lattice-ref-chat .app-layout[data-view="chat"] .chat-empty-hint i {
-            font-size: 40px;
-            opacity: 0.35;
-        }
-        body.lattice-ref-chat .app-layout[data-view="chat"] .chat-empty-hint h2 {
-            margin: 0;
-            color: var(--text);
-            font-size: 22px;
-            line-height: 1.2;
-        }
-        body.lattice-ref-chat .app-layout[data-view="chat"] .chat-empty-hint p {
-            font-size: 14px;
-            line-height: 1.55;
-            margin: 0;
-        }
-        body.lattice-ref-chat .app-layout[data-view="chat"] .chat-capability-row {
-            display: flex;
-            justify-content: center;
-            flex-wrap: wrap;
-            gap: 7px;
-        }
-        body.lattice-ref-chat .app-layout[data-view="chat"] .chat-capability-row span {
-            border: 1px solid rgba(111,66,232,0.16);
-            background: var(--surface);
-            color: var(--muted);
-            border-radius: 999px;
-            padding: 6px 10px;
-            font-size: 12px;
-            font-weight: 650;
-        }
-
-/* v2.2.7 visual stabilization: rendered dark mode must be crisp, not glassy. */
-:root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout .input-area {
-    background:
-        linear-gradient(0deg,
-            rgba(11, 11, 30, 0.98) 0%,
-            rgba(11, 11, 30, 0.92) 58%,
-            rgba(11, 11, 30, 0.30) 82%,
-            transparent 100%);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout .input-box {
-    background: linear-gradient(180deg, rgba(33, 36, 78, 0.98), rgba(18, 20, 48, 0.98));
-    border-color: rgba(167, 139, 250, 0.30);
-    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(167, 139, 250, 0.07);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout .input-box:focus-within {
-    border-color: rgba(196, 181, 253, 0.56);
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.62), 0 0 0 3px rgba(167, 139, 250, 0.18);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout textarea {
-    color: var(--text);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout textarea::placeholder {
-    color: rgba(226, 232, 255, 0.50);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout .action-btn {
-    color: rgba(226, 232, 255, 0.62);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout .action-btn:hover {
-    background: rgba(167, 139, 250, 0.14);
-    color: var(--accent-2);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout .file-toolbar {
-    border-top-color: rgba(167, 139, 250, 0.16);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout .send-btn,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout .send-btn:hover {
-    background: linear-gradient(135deg, #8b5cf6, #22d3ee);
-    color: #ffffff;
-    box-shadow: 0 12px 28px rgba(34, 211, 238, 0.18), 0 10px 28px rgba(139, 92, 246, 0.28);
-    opacity: 1;
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout .send-btn:hover {
-    transform: translateY(-1px);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .workspace-modal-overlay,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .mode-modal-overlay,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .model-overlay,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .admin-overlay,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .advanced-settings-overlay,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .onboarding-overlay,
-:root[data-lt-theme="dark"] body.lattice-ref-chat #setup-overlay {
-    background: rgba(2, 4, 18, 0.74);
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .workspace-modal,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .mode-modal,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .onboarding-card,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .wizard-card {
-    background: linear-gradient(180deg, rgba(25, 25, 62, 0.99), rgba(18, 19, 48, 0.99));
-    border-color: rgba(167, 139, 250, 0.24);
-    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.60);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .workspace-card,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .mode-card,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .onboarding-choice,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .onboarding-mode,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .recommendation-card,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .analysis-row,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .scan-row,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .rec-item,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .install-row,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .setup-log-row {
-    background: rgba(35, 38, 79, 0.78);
-    border-color: rgba(167, 139, 250, 0.20);
-    color: var(--text);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .rec-item.checked {
-    background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(35, 38, 79, 0.86));
-    border-color: rgba(52, 211, 153, 0.52);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .onboarding-step {
-    color: rgba(226, 232, 255, 0.66);
-    border-top-color: rgba(167, 139, 250, 0.20);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .onboarding-step.active,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .onboarding-step.done {
-    color: var(--accent-2);
-    border-top-color: var(--accent-2);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .wbtn-primary {
-    background: linear-gradient(135deg, #8b5cf6, #22d3ee);
-    color: #ffffff;
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .wbtn-primary:hover {
-    background: linear-gradient(135deg, #7c3aed, #06b6d4);
-}
-
-:root[data-lt-theme="dark"] body.lattice-ref-chat .mode-close,
-:root[data-lt-theme="dark"] body.lattice-ref-chat .wizard-close {
-    background: rgba(255, 255, 255, 0.06);
-    border-color: rgba(167, 139, 250, 0.22);
-    color: var(--muted);
-}
-
-@media (max-width: 760px) {
-    :root[data-lt-theme="dark"] body.lattice-ref-chat .app-layout .input-area {
-        background:
-            linear-gradient(0deg,
-                rgba(11, 11, 30, 0.99) 0%,
-                rgba(11, 11, 30, 0.94) 64%,
-                rgba(11, 11, 30, 0.36) 86%,
-                transparent 100%);
-    }
-}