ltcai 4.0.0 → 4.1.0

package/static/css/responsive.css

@@ -1,861 +0,0 @@
-/* ============================================================================
- * Lattice AI — Responsive / Accessibility / Theme Foundation  (v2.2.5)
- *
- * 이 파일은 모든 페이지에서 가장 마지막에 로드된다 (lattice-reference.css /
- * workspace.css / platform.css 다음). 따라서 기존 규칙을 "덮어쓰는" 레이어로
- * 동작하며, 거대한 lattice-reference.css 를 직접 수술하지 않고도
- *   - 하단/입력창/모달/팝업 잘림
- *   - 수평 스크롤
- *   - 모바일 키보드 레이아웃 깨짐
- *   - 태블릿 레이아웃 깨짐
- *   - 작은 화면 메뉴 접근 불가
- *   - 44px 미만 터치 영역 / 포커스 링 부재
- *   - 다크/라이트 테마 패리티
- * 를 일괄 해결한다. 라이트 테마는 건드리지 않으므로 회귀 위험이 없다.
- *
- * 표준 브레이크포인트 (이 파일이 프로젝트 규약):
- *   phone   <= 600px
- *   tablet  <= 1024px
- *   laptop  (default)
- *   ultrawide >= 1600px
- * ========================================================================== */
-
-/* ============================================================================
- * 0. 전역 가드 — 수평 스크롤 / 박스 모델 / 긴 문자열
- * ========================================================================== */
-*,
-*::before,
-*::after { box-sizing: border-box; }
-
-html,
-body {
-  max-width: 100%;
-  overflow-x: hidden;          /* 어떤 와이드 자식도 페이지 수평 스크롤을 못 만들게 */
-}
-
-body { min-width: 0; }
-
-/* 미디어/코드/표는 컨테이너를 넘지 않는다 */
-img,
-svg,
-video,
-canvas,
-table,
-pre {
-  max-width: 100%;
-}
-
-/* 긴 토큰/URL 줄바꿈 (수평 오버플로우 방지) */
-pre,
-code,
-.bubble,
-.detail-summary,
-.perm-path,
-.mcp-item-desc {
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-
-/* flex 자식이 내용 때문에 줄어들지 못해 오버플로우 나는 고전 버그 */
-.main-chat,
-.messages-viewport,
-.workspace-main,
-.admin-main,
-.stage { min-width: 0; }
-
-/* 모바일 햄버거 토글은 기본 숨김 — 모바일/태블릿 미디어쿼리(섹션 7·8)에서 노출.
- * 이 기본값은 노출 규칙보다 *먼저* 선언돼야 소스 순서상 노출이 이긴다.
- * (graph-view-toggle 은 섹션 8 에서 동일 패턴으로 처리) */
-.graph-nav-toggle,
-.admin-rail-toggle { display: none; }
-
-/* ============================================================================
- * 1. 앱 셸 — dvh 기반, 100vw 스크롤바 버그 제거
- * ========================================================================== */
-.app-layout {
-  width: 100%;                 /* 100vw 는 스크롤바 폭 만큼 수평 오버플로우 발생 */
-  height: 100vh;               /* 폴백 */
-  height: 100dvh;
-}
-
-/* 인증/로그인 페이지: 키보드가 떠도 카드가 스크롤되어 버튼이 안 잘리게 */
-body.lattice-ref-auth {
-  min-height: 100vh;           /* 폴백 */
-  min-height: 100dvh;
-  overflow-y: auto;            /* 기존 overflow:hidden 블로커 해제 */
-  overflow-x: hidden;
-}
-
-/* ============================================================================
- * 2. 키보드-세이프 입력창 (composer)
- *    ux.js 의 visualViewport 리스너가 --kb-inset 를 채운다.
- * ========================================================================== */
-:root { --kb-inset: 0px; }
-
-.input-area {
-  padding-bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--kb-inset));
-  transition: padding-bottom 0.12s ease-out;
-}
-
-/* ============================================================================
- * 3. 터치 영역 최소 44x44 — 핵심 인터랙티브 컨트롤
- *    (시각적 아이콘 크기는 유지, 히트 박스만 확장)
- * ========================================================================== */
-.sidebar-toggle,
-.sidebar-close,
-.admin-close,
-.mode-close,
-.mcp-modal-close,
-.field-eye {
-  min-width: 44px;
-  min-height: 44px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.send-btn {
-  min-width: 44px;
-  min-height: 44px;
-  width: 44px;
-  height: 44px;
-}
-
-.action-btn,
-.tb-btn,
-.icon-btn,
-.table-btn,
-.lang-btn,
-.logout-btn,
-.model-badge {
-  min-height: 44px;
-}
-
-.action-btn { min-width: 44px; justify-content: center; }
-
-.lang-option,
-.filter-item,
-.legend-item,
-.rec-item,
-.history-item-del {
-  min-height: 44px;
-  display: flex;
-  align-items: center;
-}
-
-.history-item-del { min-width: 44px; justify-content: center; }
-
-/* 그래프 필터 체크박스 확대 */
-.filter-item input[type="checkbox"],
-.legend-item input[type="checkbox"],
-.rec-checkbox {
-  width: 20px;
-  height: 20px;
-  min-width: 20px;
-}
-
-/* 터치 기기에서는 호버로만 보이던 삭제 버튼을 항상 노출 */
-@media (hover: none) {
-  .history-item-del { opacity: 1; }
-}
-
-/* iOS 입력 자동 줌(폰트<16px) 방지 — 모든 폼 컨트롤 */
-input,
-textarea,
-select {
-  font-size: max(16px, 1em);
-}
-@media (min-width: 1025px) {
-  /* 데스크톱에서는 디자인 크기 복원 (줌 이슈 없음) */
-  .sidebar-search input,
-  .mcp-add-form input,
-  .mcp-add-form textarea,
-  .mcp-add-form select { font-size: 13px; }
-}
-
-/* ============================================================================
- * 4. 포커스 링 — tokens.css 가 링크 안 된 페이지를 위해 항상 보장
- *    (WCAG 2.4.7)
- * ========================================================================== */
-:focus-visible {
-  outline: 2px solid var(--accent, #6E4AE6);
-  outline-offset: 2px;
-  border-radius: inherit;
-}
-/* 마우스 클릭 시 링 숨김은 :focus-visible 가 알아서 처리 */
-
-/* ============================================================================
- * 5. 모달 / 팝업 / 오버레이 — 뷰포트 가둠 + 내부 스크롤
- *    (footer 버튼이 키보드/짧은 화면에 잘리지 않게)
- * ========================================================================== */
-.acct-modal,
-.mcp-modal,
-.mode-modal,
-.workspace-modal,
-.advanced-settings-panel,
-.perm-dialog,
-.model-panel,
-.onboarding-card,
-.wizard-card {
-  max-height: min(760px, calc(100dvh - 32px));
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-/* 모달 내부 스크롤 영역 */
-.acct-body,
-.mcp-modal-body,
-.advanced-settings-body,
-.mode-modal .mode-options,
-.workspace-modal .workspace-options,
-.model-list,
-.onboarding-model-list,
-.pipeline-modal-body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-/* #onboarding-body 는 .onboarding-card(flex column · overflow:hidden) 안의
- * 스크롤 영역이다. lattice-reference.css 의 `.onboarding-body.lattice-ref-chat`
- * 는 *복합* 선택자(두 클래스가 같은 엘리먼트)인데 lattice-ref-chat 는 <body> 에만
- * 있고 .onboarding-body 엘리먼트에는 없어 영영 매치되지 않았다 → onboarding-body
- * 에 overflow/padding 이 적용되지 않아 추천 결과 같은 긴 콘텐츠가 카드에 잘리고
- * 모델 아코디언(Gemma 4·Qwen3-VL·Llama 4)과 하단 액션 버튼에 접근 불가.
- * 올바른 단일 클래스 선택자로 스크롤 영역과 패딩을 복원한다(명시도 트릭 아님). */
-.onboarding-body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  padding: 28px 30px;
-}
-
-/* 드롭다운/팝오버: 뷰포트 안에 가둠 */
-.lang-picker-menu,
-.mcp-dropdown,
-.search-results {
-  max-width: calc(100vw - 24px);
-  max-height: min(60dvh, 360px);
-  overflow-y: auto;
-}
-
-#tooltip {
-  max-width: min(300px, calc(100vw - 24px));
-  max-height: 60dvh;
-  overflow: hidden;
-}
-
-/* 토스트가 좁은 화면을 넘지 않게 */
-.toast {
-  left: auto;
-  right: max(12px, env(safe-area-inset-right));
-  bottom: max(16px, env(safe-area-inset-bottom));
-  max-width: min(360px, calc(100vw - 24px));
-}
-
-/* 짧은 뷰포트(가로 폰/키보드)에서도 인증 컨트롤은 44px 유지 */
-@media (max-height: 760px) {
-  .auth-field,
-  .submit,
-  .register-cta,
-  .sso-btn { min-height: 44px; height: auto; }
-}
-
-/* 폰: 핵심 모달을 바텀시트로 — footer 버튼 항상 노출 */
-@media (max-width: 600px) {
-  .acct-modal,
-  .mcp-modal,
-  .mode-modal,
-  .workspace-modal,
-  .advanced-settings-panel,
-  .model-panel {
-    width: 100%;
-    max-width: none;
-    max-height: 92dvh;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-  .acct-modal-overlay,
-  .mcp-modal-overlay,
-  .mode-modal-overlay,
-  .workspace-modal-overlay,
-  .advanced-settings-overlay,
-  .model-overlay {
-    align-items: flex-end;
-  }
-}
-
-/* ============================================================================
- * 6. 채팅 — 태블릿 티어(<=1024) 에서도 드로어 + 햄버거
- *    기존 파일은 768px 에서만 드로어로 전환 → 769~1024 구간이 깨져있음
- * ========================================================================== */
-@media (max-width: 1024px) {
-  body.lattice-ref-chat { overflow: hidden; }
-
-  .sidebar-toggle,
-  .sidebar-close { display: inline-flex; }
-
-  .app-layout .sidebar,
-  .sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100dvh;
-    width: min(86vw, 320px);
-    min-width: 0;
-    z-index: 100;
-    transform: translateX(-100%);
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 4px 0 32px rgba(20, 16, 40, 0.22);
-  }
-  body.sidebar-open .sidebar { transform: translateX(0); }
-
-  .sidebar-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: 99;
-    display: none;
-    background: rgba(15, 12, 30, 0.42);
-    -webkit-backdrop-filter: none; /* glass removed v3.5.0 */
-    backdrop-filter: none; /* glass removed v3.5.0 */
-  }
-  body.sidebar-open .sidebar-overlay { display: block; }
-
-  .main-chat { width: 100%; flex: 1; }
-
-  /* 모드 세그먼트/헤더가 두 줄로 안 깨지게: 가로 스크롤 */
-  .mode-segmented {
-    overflow-x: auto;
-    flex-wrap: nowrap;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-  }
-  .mode-segmented::-webkit-scrollbar { display: none; }
-}
-
-/* ops-strip: 좁은 화면에서 카드 세로 적층 */
-@media (max-width: 760px) {
-  .ops-strip {
-    grid-template-columns: 1fr;
-    width: calc(100% - 28px);
-  }
-}
-
-/* 홈 대시보드 카드 / 온보딩 스텝 단일 열 */
-@media (max-width: 900px) {
-  .home-dash-cards { grid-template-columns: 1fr; }
-}
-@media (max-width: 560px) {
-  .onboarding-steps {
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    gap: 4px;
-  }
-  .onboarding-step { white-space: normal; font-size: 10px; }
-}
-
-/* 상태 pill 을 숨기지 말고 줄바꿈 허용 (기능 숨김 금지 원칙) */
-@media (max-width: 480px) {
-  .header-pills .status-pill { display: inline-flex; }
-  .header-pills { flex-wrap: wrap; justify-content: flex-end; }
-}
-
-/* ============================================================================
- * 7. 관리자 — 레일 접힘 + 표를 카드로
- * ========================================================================== */
-body.lattice-ref-admin {
-  overflow-x: hidden;
-  min-width: 0;
-}
-
-/* `.toolbar` 의 position:absolute / z-index:20 은 graph 캔버스 전용인데
- * 선택자가 과넓어(`.toolbar`) admin·chat 의 폼 액션 행(.toolbar)까지 새어
- * 페이지 우상단으로 떠올라 헤더 버튼(새로고침/로그아웃)을 덮었다.
- * graph 가 아닌 페이지에서는 정상 흐름(static)으로 되돌린다. !important 불필요
- * — `body.lattice-ref-*  .toolbar` 가 `.toolbar` 보다 명시도가 높다. */
-body.lattice-ref-admin .toolbar,
-body.lattice-ref-chat .toolbar {
-  position: static;
-  z-index: auto;
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
-}
-
-@media (max-width: 1024px) {
-  .lattice-ref-admin { grid-template-columns: 1fr; }
-  .lattice-ref-admin .content { width: 100%; max-width: 100%; }
-
-  /* 관리자 레일: 햄버거 드로어로 */
-  .admin-rail,
-  .lattice-ref-admin .admin-rail {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100dvh;
-    width: min(84vw, 300px);
-    z-index: 100;
-    transform: translateX(-100%);
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  body.admin-rail-open .admin-rail { transform: translateX(0); }
-  body.admin-rail-open .sidebar-overlay { display: block; }
-}
-
-/* 표 → 카드 (<=760) : .data-table / .admin-table / .table-wrap table
- * JS 렌더러가 각 <td> 에 data-label 을 넣어준다 (admin.js). */
-@media (max-width: 760px) {
-  .table-wrap { overflow: visible; }
-  .table-wrap table,
-  table.admin-table,
-  table.data-table {
-    min-width: 0;
-    width: 100%;
-    border: 0;
-  }
-  .table-wrap thead,
-  table.admin-table thead,
-  table.data-table thead { display: none; }
-  .table-wrap tr,
-  table.admin-table tr,
-  table.data-table tr {
-    display: block;
-    margin: 0 0 10px;
-    border: 1px solid var(--border, rgba(120,120,140,0.18));
-    border-radius: 12px;
-    padding: 6px 12px;
-    background: var(--surface, rgba(255,255,255,0.04));
-  }
-  .table-wrap td,
-  table.admin-table td,
-  table.data-table td {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-    padding: 8px 0;
-    border: 0;
-    white-space: normal;
-    text-align: right;
-  }
-  .table-wrap td::before,
-  table.admin-table td::before,
-  table.data-table td::before {
-    content: attr(data-label);
-    font-weight: 700;
-    text-align: left;
-    color: var(--muted, #888);
-    flex: 0 0 42%;
-  }
-  /* 카드 안 액션 버튼은 전체폭으로 */
-  .admin-actions,
-  td .table-actions {
-    flex-wrap: wrap;
-    justify-content: flex-end;
-  }
-  .admin-action,
-  .table-btn { min-height: 44px; }
-}
-
-/* ============================================================================
- * 8. 지식 그래프 — 레일 드로어(숨기지 않음) + 툴바 스크롤 + 검색창 위치
- *    JS(줌/전체화면/미니맵/관계필터/카드뷰/재맞춤)는 graph.js 에서 처리.
- * ========================================================================== */
-@media (max-width: 1024px) {
-  /* 기존: max-width:900 에서 .reference-rail{display:none} (네비 접근불가)
-     → 드로어로 전환해서 접근 가능하게 */
-  body.lattice-ref-graph .reference-rail {
-    display: flex;
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100dvh;
-    width: min(84vw, 300px);
-    z-index: 100;
-    transform: translateX(-100%);
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    overflow-y: auto;
-  }
-  body.graph-nav-open .reference-rail { transform: translateX(0); }
-  body.graph-nav-open .sidebar-overlay { display: block; }
-
-  /* 그래프 햄버거 버튼 노출 (graph.html 에 추가) */
-  .graph-nav-toggle { display: inline-flex; }
-}
-
-/* 그래프 하단 툴바: 좁은 화면에서 줄바꿈 대신 가로 스크롤 */
-@media (max-width: 900px) {
-  .lattice-ref-graph .toolbar,
-  .graph-toolbar {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    justify-content: flex-start;
-    padding-bottom: max(8px, env(safe-area-inset-bottom));
-    scrollbar-width: none;
-  }
-  .lattice-ref-graph .toolbar::-webkit-scrollbar,
-  .graph-toolbar::-webkit-scrollbar { display: none; }
-
-  /* 검색창을 스테이지 안쪽으로 (기존 top:-60px 로 화면 밖) */
-  .lattice-ref-graph .search-shell {
-    top: 12px;
-    right: 12px;
-    left: auto;
-  }
-}
-
-/* (햄버거 토글 기본 숨김은 섹션 0 으로 이동 — 노출 규칙보다 먼저 선언) */
-
-/* 그래프/카드 뷰 토글 (graph.js 가 .graph-card-view 클래스 토글) */
-.graph-view-toggle { display: none; }
-@media (max-width: 900px) {
-  .graph-view-toggle { display: inline-flex; }
-}
-/* 그래프 햄버거(모바일) 위치 */
-.graph-nav-toggle {
-  position: fixed;
-  top: max(10px, env(safe-area-inset-top));
-  left: 10px;
-  z-index: 60;
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: var(--surface, #fff);
-  border: 1px solid var(--border, rgba(120,120,140,0.2));
-  box-shadow: 0 6px 18px rgba(20, 16, 40, 0.16);
-}
-
-/* 미니맵 — 스테이지 우상단 (작은 화면에선 카드뷰가 대체하므로 숨김) */
-.stage { position: relative; }
-.graph-minimap {
-  position: absolute;
-  right: 12px;
-  top: 12px;
-  width: 180px;
-  height: 120px;
-  border: 1px solid var(--border, rgba(120,120,140,0.25));
-  border-radius: 10px;
-  background: var(--surface, rgba(255,255,255,0.6));
-  box-shadow: 0 6px 18px rgba(20, 16, 40, 0.14);
-  z-index: 8;
-  cursor: pointer;
-}
-@media (max-width: 900px) {
-  .graph-minimap { display: none; }
-}
-
-/* 모바일 카드 뷰 — 스테이지를 덮는 노드 카드 리스트 */
-.graph-card-list {
-  display: none;
-  position: absolute;
-  inset: 0;
-  z-index: 9;
-  padding: 16px;
-  padding-top: 64px;
-  overflow-y: auto;
-  background: var(--bg, #fff);
-  -webkit-overflow-scrolling: touch;
-}
-body.graph-card-view .graph-card-list { display: block; }
-body.graph-card-view .stage > canvas#graph { visibility: hidden; }
-
-/* ============================================================================
- * 9. 워크스페이스 / 플랫폼 페이지 가드
- *    (세부는 workspace.css / platform.css 에서, 여기선 안전망)
- * ========================================================================== */
-.workspace-shell { min-height: 100vh; min-height: 100dvh; }
-.workspace-rail { height: 100vh; height: 100dvh; }
-
-@media (max-width: 600px) {
-  .platform-grid,
-  .grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ============================================================================
- * 10. 울트라와이드 / 4K — 콘텐츠 폭 제한, 헤더 정렬
- * ========================================================================== */
-@media (min-width: 1600px) {
-  body.lattice-ref-chat { --content-width: 1040px; }
-}
-@media (min-width: 2200px) {
-  body.lattice-ref-chat { --content-width: 1180px; }
-}
-
-/* ============================================================================
- * 11. 모션 줄이기 (a11y)
- * ========================================================================== */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.001ms;
-    animation-iteration-count: 1;
-    transition-duration: 0.001ms;
-    scroll-behavior: auto;
-  }
-}
-
-#ltcai-toast {
-  position: fixed;
-  bottom: 28px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--surface);
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 10px 18px;
-  font-size: 13px;
-  font-weight: 600;
-  z-index: 9999;
-  box-shadow: var(--shadow-sm);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-/* 다크에서 테마 토글 아이콘 상태 */
-:root[data-lt-theme="dark"] .theme-toggle .ti-sun { display: inline-flex; }
-:root[data-lt-theme="dark"] .theme-toggle .ti-moon { display: none; }
-.theme-toggle .ti-sun { display: none; }
-.theme-toggle .ti-moon { display: inline-flex; }
-
-/* 드래그앤드롭 파일 첨부 시각 피드백 */
-.main-chat.drag-over {
-  outline: 2px dashed var(--accent, #6E4AE6);
-  outline-offset: -8px;
-  background: var(--accent-soft, rgba(110, 74, 230, 0.06));
-}
-
-/* 테마 토글 버튼 기본 스타일 + 44px */
-.theme-toggle {
-  min-width: 44px;
-  min-height: 44px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  background: transparent;
-  border: 1px solid var(--border, rgba(120,120,140,0.2));
-  border-radius: 10px;
-  color: var(--text, inherit);
-  cursor: pointer;
-}
-.theme-toggle:hover { background: var(--accent-soft, rgba(110,74,230,0.1)); }
-
-/* ============================================================================
- * 14. v2.2.5 modal stack, scrim, and hardcoded-light surface cleanup
- * ========================================================================== */
-:root {
-  --z-app-layout: 0;
-  --z-sidebar: 100;
-  --z-drawer: 800;
-  --z-modal-backdrop: 1400;
-  --z-modal-content: 1410;
-  --z-tooltip: 9600;
-  --z-toast: 9700;
-}
-
-body.modal-open {
-  overflow: hidden;
-  overscroll-behavior: contain;
-}
-
-.acct-modal-overlay,
-.mcp-modal-overlay,
-.workspace-modal-overlay,
-.mode-modal-overlay,
-.model-overlay,
-.admin-overlay,
-.advanced-settings-overlay,
-.perm-overlay,
-.onboarding-overlay,
-#setup-overlay {
-  background: var(--overlay-scrim, var(--overlay, rgba(0, 0, 0, 0.52)));
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
-}
-
-.acct-modal-overlay,
-.mcp-modal-overlay,
-.workspace-modal-overlay,
-.mode-modal-overlay,
-.model-overlay,
-.admin-overlay,
-.advanced-settings-overlay {
-  z-index: var(--z-modal-backdrop);
-}
-
-#setup-overlay { z-index: 1500; }
-.onboarding-overlay { z-index: 1600; }
-.perm-overlay { z-index: 1700; }
-#tooltip { z-index: var(--z-tooltip); }
-#ltcai-toast { z-index: var(--z-toast); }
-
-.acct-modal-overlay[aria-hidden="true"],
-.mcp-modal-overlay[aria-hidden="true"],
-.workspace-modal-overlay[aria-hidden="true"],
-.mode-modal-overlay[aria-hidden="true"],
-.model-overlay[aria-hidden="true"],
-.admin-overlay[aria-hidden="true"],
-.advanced-settings-overlay[aria-hidden="true"],
-.perm-overlay[aria-hidden="true"],
-.onboarding-overlay[aria-hidden="true"],
-#setup-overlay[aria-hidden="true"] {
-  pointer-events: none;
-}
-
-.acct-modal,
-.mcp-modal,
-.workspace-modal,
-.mode-modal,
-.model-panel,
-.admin-panel,
-.advanced-settings-panel,
-.perm-dialog,
-.onboarding-card,
-.wizard-card {
-  background: var(--modal, var(--surface));
-  border-color: var(--border);
-  color: var(--text);
-}
-
-.workspace-card,
-.mode-card,
-.onboarding-choice,
-.onboarding-mode,
-.recommendation-card,
-.analysis-row,
-.onboarding-model-card,
-.onboarding-model-option,
-.setup-log-row,
-.mcp-item,
-.model-card,
-.engine-card,
-.sensitivity-panel,
-.status-section,
-.file-download-card {
-  background: var(--surface-elevated, var(--surface));
-  border-color: var(--border);
-  color: var(--text);
-}
-
-.admin-input,
-.admin-textarea,
-.pipeline-select,
-.acct-modal input,
-.mcp-modal input,
-.mcp-modal textarea,
-.auth-input,
-.input,
-textarea,
-select {
-  background-color: var(--input, var(--surface-2));
-  border-color: var(--border);
-  color: var(--text);
-}
-
-.admin-input::placeholder,
-.admin-textarea::placeholder,
-.acct-modal input::placeholder,
-.mcp-modal input::placeholder,
-.mcp-modal textarea::placeholder,
-textarea::placeholder {
-  color: var(--faint);
-}
-
-body.lattice-ref-chat .app-layout #user-input {
-  background: transparent;
-  border: 0;
-  box-shadow: none;
-  outline: none;
-  color: var(--text);
-}
-
-body.lattice-ref-chat .app-layout #user-input:focus {
-  background: transparent;
-  border: 0;
-  box-shadow: none;
-  outline: none;
-}
-
-#cu-panel .cu-controls-panel {
-  width: 280px;
-  max-width: 100%;
-}
-
-@media (max-width: 760px) {
-  .admin-overlay,
-  .model-overlay,
-  .perm-overlay,
-  .onboarding-overlay,
-  #setup-overlay {
-    align-items: flex-end;
-    justify-content: center;
-    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
-  }
-
-  .admin-panel,
-  .model-panel,
-  .perm-dialog,
-  .wizard-card,
-  .onboarding-card {
-    width: 100%;
-    max-width: none;
-    max-height: 92dvh;
-  }
-
-  #cu-panel .admin-body > div[style*="display:flex"] {
-    flex-direction: column;
-  }
-
-  #cu-panel .cu-controls-panel {
-    width: 100%;
-  }
-}
-
-/* Product workspace shell: this file loads last, so keep the mobile rail fluid. */
-@media (max-width: 860px) {
-  body.workspace-page .workspace-shell {
-    grid-template-columns: 1fr;
-    min-width: 0;
-    width: 100%;
-  }
-
-  body.workspace-page .workspace-rail {
-    height: auto;
-    min-height: 0;
-    min-width: 0;
-    max-width: 100vw;
-    position: relative;
-    width: 100%;
-  }
-
-  body.workspace-page main {
-    min-width: 0;
-    width: 100%;
-  }
-
-  body.workspace-page .workspace-rail nav,
-  body.workspace-page .rail-links {
-    min-width: 0;
-    width: 100%;
-  }
-
-  body.workspace-page .workspace-rail a span {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-@media (max-width: 520px) {
-  body.workspace-page .workspace-rail nav,
-  body.workspace-page .rail-links {
-    grid-template-columns: 1fr;
-  }
-}