collabmd 0.1.20 → 0.1.23

package/src/client/styles/style.css

@@ -1,4901 +1,25 @@
-/* CollabMD Design Tokens & Styles */
-
-/* ===== TYPE SCALE ===== */
-:root {
-  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
-  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
-  --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.125rem);
-  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
-  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2.25rem);
-  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
-
-  /* Fonts */
-  --font-body: 'Inter', system-ui, sans-serif;
-  --font-display: 'Geist', 'Cal Sans', 'Inter', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
-
-  /* ===== SPACING (4px base) ===== */
-  --space-1:  0.25rem;
-  --space-2:  0.5rem;
-  --space-3:  0.75rem;
-  --space-4:  1rem;
-  --space-5:  1.25rem;
-  --space-6:  1.5rem;
-  --space-8:  2rem;
-  --space-10: 2.5rem;
-  --space-12: 3rem;
-  --space-16: 4rem;
-  --space-20: 5rem;
-  --space-24: 6rem;
-  --space-32: 8rem;
-
-  /* Radius */
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-full: 9999px;
-
-  /* Transitions */
-  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
-
-  /* Content widths */
-  --content-narrow: 640px;
-  --content-default: 960px;
-  --content-wide: 1200px;
-
-  /* Toolbar height */
-  --toolbar-h: 48px;
-}
-
-/* ===== COLOR PALETTE ===== */
-
-/* LIGHT MODE */
-:root, [data-theme="light"] {
-  --color-bg:               #f5f5f7;
-  --color-surface:          #ffffff;
-  --color-surface-2:        #fafafe;
-  --color-surface-offset:   #eeeef2;
-  --color-surface-offset-2: #e6e6eb;
-  --color-surface-dynamic:  #dddde3;
-  --color-divider:          #d1d1d8;
-  --color-border:           #c4c4ce;
-
-  --color-text:           #1a1a2e;
-  --color-text-muted:     #6b6b80;
-  --color-text-faint:     #a0a0b0;
-  --color-text-inverse:   #f5f5f7;
-
-  --color-primary:          #4f46e5;
-  --color-primary-hover:    #4338ca;
-  --color-primary-active:   #3730a3;
-  --color-primary-highlight: #e0e0ff;
-  --color-comment:          #4f46e5;
-  --color-comment-soft:     rgba(79, 70, 229, 0.08);
-  --color-comment-strong:   rgba(79, 70, 229, 0.14);
-  --color-comment-text:     #3730a3;
-
-  --color-error:          #dc2626;
-  --color-error-highlight: #fce8e8;
-  --color-success:          #16a34a;
-  --color-success-highlight: #dcfce7;
-  --color-warning:          #d97706;
-  --color-warning-highlight: #fef3c7;
-  --diff-add-bg: rgba(22, 163, 74, 0.06);
-  --diff-add-line-bg: rgba(22, 163, 74, 0.14);
-  --diff-add-text: #16a34a;
-  --diff-del-bg: rgba(220, 38, 38, 0.06);
-  --diff-del-line-bg: rgba(220, 38, 38, 0.14);
-  --diff-del-text: #dc2626;
-  --diff-hunk-bg: rgba(79, 70, 229, 0.08);
-  --diff-hunk-text: #4f46e5;
-  --diff-gutter: #a0a0b0;
-
-  --shadow-sm: 0 1px 2px oklch(0.2 0.02 260 / 0.06);
-  --shadow-md: 0 4px 12px oklch(0.2 0.02 260 / 0.08);
-  --shadow-lg: 0 12px 32px oklch(0.2 0.02 260 / 0.12);
-}
-
-/* DARK MODE (default) */
-[data-theme="dark"] {
-  --color-bg:               #0f1117;
-  --color-surface:          #161822;
-  --color-surface-2:        #1c1e2c;
-  --color-surface-offset:   #1a1c28;
-  --color-surface-offset-2: #22243a;
-  --color-surface-dynamic:  #2a2c3e;
-  --color-divider:          #2e3044;
-  --color-border:           #383a50;
-
-  --color-text:           #e2e2ea;
-  --color-text-muted:     #8b8ba0;
-  --color-text-faint:     #5a5a70;
-  --color-text-inverse:   #0f1117;
-
-  --color-primary:          #818cf8;
-  --color-primary-hover:    #6366f1;
-  --color-primary-active:   #4f46e5;
-  --color-primary-highlight: #1e1e3a;
-  --color-comment:          #818cf8;
-  --color-comment-soft:     rgba(129, 140, 248, 0.1);
-  --color-comment-strong:   rgba(129, 140, 248, 0.16);
-  --color-comment-text:     #c7d2fe;
-
-  --color-error:          #f87171;
-  --color-error-highlight: #2a1a1a;
-  --color-success:          #4ade80;
-  --color-success-highlight: #1a2a1a;
-  --color-warning:          #fbbf24;
-  --color-warning-highlight: #2a261a;
-  --diff-add-bg: rgba(74, 222, 128, 0.08);
-  --diff-add-line-bg: rgba(74, 222, 128, 0.15);
-  --diff-add-text: #4ade80;
-  --diff-del-bg: rgba(248, 113, 113, 0.08);
-  --diff-del-line-bg: rgba(248, 113, 113, 0.15);
-  --diff-del-text: #f87171;
-  --diff-hunk-bg: rgba(129, 140, 248, 0.1);
-  --diff-hunk-text: #818cf8;
-  --diff-gutter: #5a5a70;
-
-  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
-  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
-  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.5);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    --color-bg:               #0f1117;
-    --color-surface:          #161822;
-    --color-surface-2:        #1c1e2c;
-    --color-surface-offset:   #1a1c28;
-    --color-surface-offset-2: #22243a;
-    --color-surface-dynamic:  #2a2c3e;
-    --color-divider:          #2e3044;
-    --color-border:           #383a50;
-    --color-text:           #e2e2ea;
-    --color-text-muted:     #8b8ba0;
-    --color-text-faint:     #5a5a70;
-    --color-text-inverse:   #0f1117;
-    --color-primary:          #818cf8;
-    --color-primary-hover:    #6366f1;
-    --color-primary-active:   #4f46e5;
-    --color-primary-highlight: #1e1e3a;
-    --color-comment:          #818cf8;
-    --color-comment-soft:     rgba(129, 140, 248, 0.1);
-    --color-comment-strong:   rgba(129, 140, 248, 0.16);
-    --color-comment-text:     #c7d2fe;
-    --color-error:          #f87171;
-    --color-error-highlight: #2a1a1a;
-    --color-success:          #4ade80;
-    --color-success-highlight: #1a2a1a;
-    --color-warning:          #fbbf24;
-    --color-warning-highlight: #2a261a;
-    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
-    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
-    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.5);
-  }
-}
-
-
-/* ===== SHARED COMPONENTS ===== */
-
-.hidden { display: none !important; }
-
-html[data-initial-file-requested="true"] .empty-state {
-  display: none !important;
-}
-
-html[data-initial-file-requested="true"] .editor-page.hidden {
-  display: flex !important;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  transition: all var(--transition-interactive);
-  cursor: pointer;
-  white-space: nowrap;
-  border: none;
-  text-decoration: none;
-}
-.btn:active { transform: scale(0.97); }
-
-.btn-primary {
-  background: var(--color-primary);
-  color: var(--color-text-inverse);
-}
-.btn-primary:hover { background: var(--color-primary-hover); }
-
-.btn-secondary {
-  background: var(--color-surface-2);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-}
-.btn-secondary:hover { background: var(--color-surface-dynamic); }
-
-.btn-danger {
-  background: var(--color-error);
-  color: var(--color-text-inverse);
-}
-.btn-danger:hover { filter: brightness(0.95); }
-
-.btn-ghost {
-  background: transparent;
-  color: var(--color-text-muted);
-  padding: var(--space-2);
-}
-.btn-ghost:hover { color: var(--color-text); background: var(--color-surface-offset); }
-
-.btn-lg {
-  padding: var(--space-3) var(--space-6);
-  font-weight: 600;
-}
-
-.input {
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  font-size: var(--text-sm);
-  color: var(--color-text);
-  transition: border-color var(--transition-interactive);
-  width: 100%;
-}
-.input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
-}
-.input::placeholder { color: var(--color-text-faint); }
-
-
-/* ===== LOADING STATE ===== */
-
-.editor-loading {
-  display: flex;
-  flex-direction: column;
-  padding: var(--space-6) var(--space-8);
-  height: 100%;
-  gap: var(--space-2);
-}
-.editor-loading.hidden { display: none; }
-
-.skeleton-line {
-  height: 16px;
-  background: var(--color-surface-offset);
-  border-radius: 4px;
-  animation: pulse-skeleton 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse-skeleton {
-  0% { opacity: 0.6; }
-  50% { opacity: 0.3; }
-  100% { opacity: 0.6; }
-}
-
-
-/* ===== APP SHELL ===== */
-
-.app-shell {
-  display: flex;
-  height: 100dvh;
-  overflow: hidden;
-}
-
-/* ===== SIDEBAR ===== */
-
-.sidebar {
-  width: 260px;
-  min-width: 260px;
-  max-width: 260px;
-  background: var(--color-surface);
-  border-right: 1px solid var(--color-divider);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1), min-width 180ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.sidebar.collapsed {
-  width: 0;
-  min-width: 0;
-  border-right: none;
-  overflow: hidden;
-}
-
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-3) var(--space-3);
-  border-bottom: 1px solid var(--color-divider);
-  min-height: var(--toolbar-h);
-  gap: var(--space-2);
-}
-
-.sidebar-brand {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.sidebar-title {
-  font-size: var(--text-sm);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  white-space: nowrap;
-}
-
-.sidebar-actions {
-  display: flex;
-  gap: 4px;
-}
-
-.sidebar-action-btn {
-  background: none;
-  border: none;
-  min-width: 28px;
-  min-height: 28px;
-  padding: 4px;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-muted);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: color var(--transition-interactive), background var(--transition-interactive);
-}
-
-.sidebar-action-btn:hover {
-  background: var(--color-surface-offset);
-  color: var(--color-text);
-}
-
-.sidebar-action-btn:active {
-  transform: scale(0.95);
-}
-
-.sidebar-close-btn {
-  display: none;
-}
-
-.sidebar-search {
-  padding: var(--space-2) var(--space-3);
-  border-bottom: 1px solid var(--color-divider);
-}
-
-.sidebar-search-input {
-  width: 100%;
-  background: var(--color-surface-offset);
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  padding: var(--space-1) var(--space-2);
-  font-size: var(--text-xs);
-  color: var(--color-text);
-  outline: none;
-  transition: border-color var(--transition-interactive);
-}
-
-.sidebar-search-input::placeholder {
-  color: var(--color-text-faint);
-}
-
-.sidebar-search-input:focus {
-  border-color: var(--color-primary);
-}
-
-.sidebar-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--color-divider);
-  padding: 0 var(--space-2);
-}
-
-.sidebar-tab {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: var(--space-2) var(--space-3);
-  color: var(--color-text-muted);
-  border-bottom: 2px solid transparent;
-  font-size: var(--text-xs);
-  font-weight: 500;
-  transition: all var(--transition-interactive);
-  position: relative;
-}
-
-.sidebar-tab.has-changes::after {
-  content: "";
-  position: absolute;
-  top: 8px;
-  right: 12px;
-  width: 6px;
-  height: 6px;
-  background-color: var(--color-success);
-  border-radius: 50%;
-  animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(0.8); }
-}
-
-.sidebar-tab:hover {
-  background: var(--color-surface-offset);
-  color: var(--color-text);
-}
-
-.sidebar-tab.active {
-  color: var(--color-primary);
-  border-bottom-color: var(--color-primary);
-}
-
-/* File tree */
-
-.file-tree {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--space-2) 0;
-}
-
-.file-tree-empty {
-  padding: var(--space-4) var(--space-3);
-  font-size: var(--text-xs);
-  color: var(--color-text-faint);
-  text-align: center;
-}
-.file-tree-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  width: 100%;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  padding-right: 8px;
-  padding-left: calc(8px + var(--depth, 0) * 16px);
-  border: none;
-  background: none;
-  font-size: 13px;
-  font-family: var(--font-body);
-  color: var(--color-text-muted);
-  cursor: pointer;
-  text-align: left;
-  user-select: none;
-  position: relative;
-}
-
-.file-tree-item:not([data-depth="0"])::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: calc(8px + (var(--depth, 1) - 1) * 16px + 6px);
-  width: 1px;
-  background-color: var(--color-border);
-  opacity: 0.3;
-}
-
-.file-tree-file {
-  padding-left: calc(8px + var(--depth, 0) * 16px + 18px);
-}
-
-.file-tree-item {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border-radius: 0;
-  transition: background var(--transition-interactive), color var(--transition-interactive);
-}
-
-.file-tree-item:hover {
-  background: var(--color-surface-offset);
-  color: var(--color-text);
-}
-
-.file-tree-file.active {
-  background: var(--color-primary-highlight);
-  color: var(--color-primary);
-}
-
-.file-tree-chevron {
-  flex-shrink: 0;
-  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.file-tree-chevron.expanded {
-  transform: rotate(90deg);
-}
-
-.file-tree-icon {
-  flex-shrink: 0;
-  opacity: 0.5;
-}
-
-.file-tree-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.file-tree-children {
-  /* Children indentation handled by paddingLeft on items */
-}
-
-/* Git sidebar */
-
-.git-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-}
-
-.git-panel.active {
-  display: flex;
-}
-
-.git-branch-bar {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--space-2);
-  padding: var(--space-3);
-  border-bottom: 1px solid var(--color-divider);
-  font-size: var(--text-xs);
-}
-
-.git-branch-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  min-width: 0;
-  width: 100%;
-}
-
-.git-branch-name {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  max-width: 100%;
-  padding: 3px 8px;
-  border-radius: var(--radius-sm);
-  background: var(--color-surface-offset);
-  color: var(--color-text);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.git-branch-name svg {
-  flex-shrink: 0;
-  color: var(--color-primary);
-}
-
-.git-sync-info {
-  display: inline-flex;
-  gap: var(--space-2);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  flex-shrink: 0;
-}
-
-.git-sync-info-muted {
-  color: var(--color-text-faint);
-}
-
-.git-change-stats {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.git-branch-actions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px;
-  width: 100%;
-}
-
-.git-branch-action-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  width: 100%;
-  min-width: 0;
-  min-height: 30px;
-  padding: 0 12px;
-  border-radius: 999px;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface-offset);
-  color: var(--color-text-muted);
-  font-size: 11px;
-  font-weight: 600;
-  transition: all var(--transition-interactive);
-}
-
-.git-branch-action-btn:hover:not(:disabled) {
-  background: var(--color-surface-dynamic);
-  color: var(--color-text);
-}
-
-.git-branch-action-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.git-branch-action-btn svg {
-  flex-shrink: 0;
-}
-
-.git-change-add {
-  color: var(--diff-add-text);
-}
-
-.git-change-del {
-  color: var(--diff-del-text);
-}
-
-.git-section {
-  border-bottom: 1px solid var(--color-divider);
-}
-
-.git-section-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: var(--space-2) var(--space-3);
-  background: transparent;
-  color: var(--color-text-muted);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  text-align: left;
-}
-
-.git-section-header:hover {
-  background: var(--color-surface-offset);
-}
-
-.git-section-count {
-  padding: 1px 6px;
-  border-radius: var(--radius-full);
-  background: var(--color-surface-dynamic);
-  color: var(--color-text-muted);
-  font-size: 10px;
-  font-weight: 600;
-}
-
-.git-section-chevron {
-  color: var(--color-text-faint);
-  transition: transform 150ms ease;
-}
-
-.git-section-chevron.collapsed {
-  transform: rotate(-90deg);
-}
-
-.git-file-list {
-  padding: var(--space-1) 0;
-}
-
-.git-file-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  margin: 0 var(--space-2) 2px;
-  padding: 2px;
-  border-radius: var(--radius-md);
-  transition: background var(--transition-interactive), color var(--transition-interactive);
-}
-
-.git-file-row:hover {
-  background: var(--color-surface-offset);
-}
-
-.git-file-row.active {
-  background: var(--color-primary-highlight);
-}
-
-.git-file-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  min-width: 0;
-  flex: 1;
-  padding: 5px var(--space-2) 5px calc(var(--space-2) + 10px);
-  border-radius: calc(var(--radius-md) - 2px);
-  background: transparent;
-  color: var(--color-text-muted);
-  text-align: left;
-  transition: color var(--transition-interactive);
-}
-
-.git-file-item:hover {
-  color: var(--color-text);
-}
-
-.git-file-item.active {
-  color: var(--color-primary);
-}
-
-.git-file-row.active .git-file-path {
-  color: color-mix(in oklab, var(--color-primary) 56%, var(--color-text-muted));
-}
-
-.git-file-icon {
-  flex-shrink: 0;
-  opacity: 0.5;
-}
-
-.git-file-copy {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.git-file-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 13px;
-}
-
-.git-file-path {
-  color: var(--color-text-faint);
-  font-size: 11px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.git-status-badge {
-  flex-shrink: 0;
-  padding: 1px 5px;
-  border-radius: 3px;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-}
-
-.git-status-badge.modified {
-  color: var(--color-warning);
-  background: color-mix(in oklab, var(--color-warning) 14%, transparent);
-}
-
-.git-status-badge.added {
-  color: var(--color-success);
-  background: color-mix(in oklab, var(--color-success) 14%, transparent);
-}
-
-.git-status-badge.deleted {
-  color: var(--color-error);
-  background: color-mix(in oklab, var(--color-error) 14%, transparent);
-}
-
-.git-status-badge.renamed {
-  color: var(--color-primary);
-  background: color-mix(in oklab, var(--color-primary) 16%, transparent);
-}
-
-.git-status-badge.untracked {
-  color: var(--color-text-faint);
-  background: var(--color-surface-offset);
-}
-
-.git-file-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-  padding-right: 4px;
-}
-
-.git-file-action-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  min-height: 26px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  background: color-mix(in oklab, var(--color-surface-offset) 82%, transparent);
-  color: var(--color-text-muted);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  transition: background var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive);
-}
-
-.git-file-action-btn:hover:not(:disabled) {
-  background: var(--color-surface-dynamic);
-  color: var(--color-text);
-}
-
-.git-file-action-btn:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.git-file-action-btn svg {
-  flex-shrink: 0;
-}
-
-.git-file-action-btn-primary {
-  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
-  color: var(--color-primary);
-  border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-}
-
-.git-file-row.active .git-file-action-btn {
-  background: color-mix(in oklab, var(--color-surface) 30%, var(--color-primary-highlight));
-  color: var(--color-text);
-}
-
-.git-file-row.active .git-file-action-btn-primary {
-  background: color-mix(in oklab, var(--color-primary) 18%, transparent);
-  color: var(--color-primary);
-}
-
-.git-panel-footer {
-  margin-top: auto;
-  padding: var(--space-3);
-  border-top: 1px solid var(--color-divider);
-}
-
-.git-panel-footer-actions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.git-view-all-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  width: 100%;
-  padding: var(--space-2);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-offset);
-  color: var(--color-text-muted);
-  font-size: var(--text-xs);
-  font-weight: 500;
-  transition: all var(--transition-interactive);
-}
-
-.git-view-all-btn:hover {
-  background: var(--color-surface-dynamic);
-  color: var(--color-text);
-}
-
-.git-footer-commit-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 34px;
-  padding: 0 var(--space-3);
-  border-radius: var(--radius-md);
-  border: 1px solid color-mix(in oklab, var(--color-primary) 22%, transparent);
-  background: color-mix(in oklab, var(--color-primary) 16%, transparent);
-  color: var(--color-primary);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  transition: all var(--transition-interactive);
-}
-
-.git-footer-commit-btn:hover:not(:disabled) {
-  background: color-mix(in oklab, var(--color-primary) 22%, transparent);
-}
-
-.git-footer-commit-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.git-panel-empty {
-  padding: var(--space-4);
-  color: var(--color-text-faint);
-  font-size: var(--text-xs);
-  text-align: center;
-}
-
-/* Context menu */
-
-.file-context-menu {
-  position: fixed;
-  z-index: 1000;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  padding: var(--space-1);
-  min-width: 120px;
-  transform-origin: top left;
-  opacity: 1;
-  transform: scale(1);
-  transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@starting-style {
-  .file-context-menu {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-}
-
-.file-context-item {
-  display: block;
-  width: 100%;
-  padding: var(--space-1) var(--space-3);
-  border: none;
-  background: none;
-  font-size: 13px;
-  font-family: var(--font-body);
-  color: var(--color-text);
-  cursor: pointer;
-  text-align: left;
-  border-radius: var(--radius-sm);
-  transition: background var(--transition-interactive);
-}
-
-.file-context-item:hover {
-  background: var(--color-surface-offset);
-}
-
-.file-context-danger {
-  color: var(--color-error);
-}
-
-/* Wiki-link */
-
-.wiki-link {
-  color: var(--color-primary);
-  text-decoration: underline;
-  text-decoration-style: dotted;
-  text-underline-offset: 2px;
-  cursor: pointer;
-}
-
-.wiki-link:hover {
-  text-decoration-style: solid;
-}
-
-.wiki-link-new {
-  color: var(--color-text-muted);
-  text-decoration-style: dashed;
-  opacity: 0.7;
-}
-
-.wiki-link-new:hover {
-  color: var(--color-primary);
-  opacity: 1;
-  text-decoration-style: dashed;
-}
-
-/* ===== MAIN AREA ===== */
-
-.main-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-width: 0;
-}
-
-/* ===== EMPTY STATE ===== */
-
-.empty-state {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-8);
-}
-
-.empty-state-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: var(--space-2);
-  max-width: 320px;
-}
-
-.empty-state-logo {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
-  margin-bottom: var(--space-2);
-  border: 1px solid color-mix(in oklab, var(--color-primary) 22%, var(--color-divider));
-  border-radius: 24px;
-  background:
-    radial-gradient(circle at top, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%),
-    linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 94%, white 2%), color-mix(in oklab, var(--color-surface-2) 88%, black 12%));
-  box-shadow:
-    0 18px 36px rgb(0 0 0 / 0.18),
-    inset 0 1px 0 rgb(255 255 255 / 0.04);
-}
-
-.empty-state-logo svg {
-  display: block;
-  opacity: 0.72;
-}
-
-.empty-state-title {
-  font-size: var(--text-lg);
-  font-weight: 600;
-  margin: 0;
-  letter-spacing: -0.02em;
-}
-
-.empty-state-desc {
-  margin: 0;
-  font-size: var(--text-sm);
-  color: var(--color-text-muted);
-  line-height: 1.5;
-}
-
-.empty-state-actions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  margin-top: var(--space-4);
-  width: 100%;
-}
-
-.empty-state-btn {
-  justify-content: flex-start;
-  padding: var(--space-3) var(--space-4);
-  font-size: var(--text-sm);
-  color: var(--color-text);
-  background: var(--color-surface-offset);
-  border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-sm);
-}
-
-.empty-state-btn:hover {
-  background: var(--color-surface-offset-2);
-  border-color: var(--color-text-faint);
-}
-
-.empty-state-kbd {
-  margin-left: auto;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  background: var(--color-surface);
-  padding: 2px 6px;
-  border-radius: 4px;
-  border: 1px solid var(--color-divider);
-}
-
-
-/* ===== EDITOR PAGE ===== */
-
-.editor-page {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-}
-
-.diff-page {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-}
-
-/* Toolbar */
-.toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: var(--toolbar-h);
-  padding: 0 var(--space-3);
-  background: var(--color-surface);
-  border-bottom: 1px solid var(--color-divider);
-  flex-shrink: 0;
-  z-index: 10;
-  gap: var(--space-2);
-}
-
-.toolbar-left,
-.toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-.toolbar-left {
-  min-width: 0;
-  flex: 1;
-}
-.toolbar-right {
-  flex-shrink: 0;
-}
-
-.toolbar-logo {
-  display: flex;
-  align-items: center;
-  padding: var(--space-1);
-  border-radius: var(--radius-sm);
-  transition: background var(--transition-interactive);
-  flex-shrink: 0;
-}
-.toolbar-logo:hover {
-  background: var(--color-surface-offset);
-}
-
-.toolbar-room-info {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  min-width: 0;
-}
-.toolbar-room-name {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.toolbar-badge {
-  font-size: 11px;
-  font-weight: 500;
-  padding: 2px var(--space-2);
-  border-radius: var(--radius-full);
-  background: var(--color-primary-highlight);
-  color: var(--color-primary);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.toolbar-center {
-  flex-shrink: 0;
-}
-
-.view-toggle {
-  display: flex;
-  background: var(--color-surface-offset);
-  border-radius: var(--radius-md);
-  padding: 2px;
-  gap: 2px;
-}
-.view-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 28px;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-faint);
-  transition: all var(--transition-interactive);
-}
-.view-btn:hover {
-  color: var(--color-text-muted);
-}
-.view-btn.active {
-  background: var(--color-surface);
-  color: var(--color-text);
-  box-shadow: var(--shadow-sm);
-}
-
-.diff-mode-toggle {
-  padding: 3px;
-}
-
-.diff-mode-btn {
-  width: auto;
-  min-width: 72px;
-  height: 28px;
-  padding: 0 var(--space-3);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-/* Diff */
-
-.diff-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  padding: var(--space-2) var(--space-4);
-  background: var(--color-surface-2);
-  border-bottom: 1px solid var(--color-divider);
-}
-
-.diff-toolbar-left,
-.diff-toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-}
-
-.diff-toolbar-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.diff-toolbar-actions-group {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.diff-toolbar-actions-group-git {
-  padding: 3px;
-  border: 1px solid var(--color-divider);
-  border-radius: 12px;
-  background: color-mix(in oklab, var(--color-surface) 78%, transparent);
-  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-text) 4%, transparent);
-}
-
-.diff-toolbar-actions-divider {
-  width: 1px;
-  height: 28px;
-  background: var(--color-divider);
-  opacity: 0.9;
-}
-
-.diff-toolbar-actions .btn {
-  min-height: 36px;
-  padding: 0 14px;
-  border-radius: 10px;
-  font-size: 12px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.diff-action-btn {
-  min-width: 92px;
-  border-radius: 9px;
-}
-
-.diff-open-editor-btn {
-  min-width: 116px;
-}
-
-.diff-open-editor-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.diff-file-nav {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.diff-nav-btn {
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-muted);
-}
-
-.diff-nav-btn:hover {
-  background: var(--color-surface-offset);
-  color: var(--color-text);
-}
-
-.diff-nav-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.diff-file-indicator {
-  color: var(--color-text-muted);
-  font-size: var(--text-xs);
-  font-variant-numeric: tabular-nums;
-}
-
-.diff-stats {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.diff-stats-add {
-  color: var(--diff-add-text);
-}
-
-.diff-stats-del {
-  color: var(--diff-del-text);
-}
-
-.diff-scroll {
-  flex: 1;
-  overflow: auto;
-}
-
-.diff-content {
-  min-width: fit-content;
-}
-
-.diff-file-block {
-  margin-bottom: 0;
-}
-
-.diff-file-header {
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-4);
-  background: var(--color-surface-offset);
-  border-top: 1px solid var(--color-divider);
-  border-bottom: 1px solid var(--color-divider);
-}
-
-.diff-file-header:first-child {
-  border-top: none;
-}
-
-.diff-file-path {
-  color: var(--color-text);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.diff-file-header-stats {
-  margin-left: auto;
-  display: inline-flex;
-  gap: var(--space-2);
-  font-family: var(--font-mono);
-  font-size: 11px;
-}
-
-.diff-hunk-header,
-.diff-split-hunk {
-  padding: 4px var(--space-4);
-  padding-left: 92px;
-  background: var(--diff-hunk-bg);
-  color: var(--diff-hunk-text);
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-
-.diff-line {
-  display: flex;
-  align-items: stretch;
-  min-height: 20px;
-  font-family: var(--font-mono);
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.diff-line-numbers {
-  display: flex;
-  flex-shrink: 0;
-  user-select: none;
-}
-
-.diff-line-num {
-  width: 40px;
-  padding: 0 8px;
-  color: var(--diff-gutter);
-  text-align: right;
-  font-size: 12px;
-  border-right: 1px solid var(--color-divider);
-}
-
-.diff-line-num:first-child {
-  border-right: none;
-}
-
-.diff-line-prefix {
-  width: 20px;
-  padding-left: 8px;
-  flex-shrink: 0;
-  font-weight: 500;
-  user-select: none;
-}
-
-.diff-line-content {
-  flex: 1;
-  padding: 0 var(--space-3);
-  white-space: pre;
-  tab-size: 4;
-}
-
-.diff-line.addition {
-  background: var(--diff-add-bg);
-}
-
-.diff-line.addition .diff-line-num {
-  background: var(--diff-add-line-bg);
-  color: var(--diff-add-text);
-}
-
-.diff-line.addition .diff-line-prefix {
-  color: var(--diff-add-text);
-}
-
-.diff-line.deletion {
-  background: var(--diff-del-bg);
-}
-
-.diff-line.deletion .diff-line-num {
-  background: var(--diff-del-line-bg);
-  color: var(--diff-del-text);
-}
-
-.diff-line.deletion .diff-line-prefix {
-  color: var(--diff-del-text);
-}
-
-.diff-line.note {
-  background: var(--color-surface-offset);
-  color: var(--color-text-faint);
-}
-
-.diff-highlight-add {
-  background: color-mix(in oklab, var(--diff-add-text) 24%, transparent);
-  border-radius: 2px;
-  padding: 0 1px;
-}
-
-.diff-highlight-del {
-  background: color-mix(in oklab, var(--diff-del-text) 24%, transparent);
-  border-radius: 2px;
-  padding: 0 1px;
-}
-
-.diff-split {
-  display: block;
-}
-
-.diff-split-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-}
-
-.diff-split-pane-header {
-  display: none;
-}
-
-.diff-split-line {
-  display: flex;
-  min-height: 20px;
-  font-family: var(--font-mono);
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.diff-split-line:first-child {
-  border-right: 1px solid var(--color-divider);
-}
-
-.diff-split-num {
-  width: 44px;
-  padding: 0 8px;
-  color: var(--diff-gutter);
-  text-align: right;
-  font-size: 12px;
-  border-right: 1px solid var(--color-divider);
-}
-
-.diff-split-content {
-  flex: 1;
-  padding: 0 var(--space-3);
-  white-space: pre;
-  tab-size: 4;
-}
-
-.diff-split-line.addition {
-  background: var(--diff-add-bg);
-}
-
-.diff-split-line.addition .diff-split-num {
-  background: var(--diff-add-line-bg);
-  color: var(--diff-add-text);
-}
-
-.diff-split-line.deletion {
-  background: var(--diff-del-bg);
-}
-
-.diff-split-line.deletion .diff-split-num {
-  background: var(--diff-del-line-bg);
-  color: var(--diff-del-text);
-}
-
-.diff-split-line.empty {
-  background: var(--color-surface-offset);
-  opacity: 0.45;
-}
-
-.diff-binary-message,
-.diff-empty-state {
-  padding: var(--space-4);
-  color: var(--color-text-faint);
-}
-
-.diff-limit-card {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-2);
-  padding: var(--space-4);
-  color: var(--color-text-muted);
-  border-top: 1px solid var(--color-divider);
-}
-
-.diff-limit-card strong {
-  color: var(--color-text);
-  font-size: var(--text-sm);
-}
-
-.diff-load-full-btn {
-  margin-top: var(--space-1);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.toolbar-btn {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  padding: var(--space-1) var(--space-2);
-  border-radius: var(--radius-md);
-  font-size: var(--text-xs);
-}
-.toolbar-btn-label {
-  font-size: var(--text-xs);
-}
-.toolbar-name-btn {
-  max-width: 132px;
-}
-.toolbar-user-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Mobile view toggle — hidden on desktop */
-.mobile-view-toggle {
-  display: none;
-}
-
-.user-avatars {
-  display: flex;
-  align-items: center;
-}
-.user-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: var(--radius-full);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  font-weight: 600;
-  color: white;
-  border: 2px solid var(--color-surface);
-  margin-left: -4px;
-  position: relative;
-  z-index: 1;
-  flex-shrink: 0;
-}
-.user-avatar-initial {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-.user-avatar:first-child {
-  margin-left: 0;
-}
-.user-avatar.is-local {
-  width: auto;
-  min-width: 44px;
-  padding: 0 8px 0 6px;
-  gap: 4px;
-  border-radius: var(--radius-full);
-  margin-right: 6px;
-  box-shadow:
-    0 0 0 2px var(--color-surface),
-    0 0 0 4px oklch(from var(--color-primary) l c h / 0.18);
-  z-index: 5;
-}
-.user-avatar.is-local + .user-avatar {
-  margin-left: 0;
-}
-.user-avatar.is-local .user-avatar-initial {
-  width: 14px;
-  height: 14px;
-  border-radius: var(--radius-full);
-  background: rgb(255 255 255 / 0.22);
-  font-size: 9px;
-}
-.user-avatar-self-label {
-  padding: 2px 4px;
-  border-radius: var(--radius-full);
-  background: rgb(15 17 23 / 0.84);
-  color: #ffffff;
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  line-height: 1;
-  text-transform: uppercase;
-}
-.user-avatar-button {
-  cursor: pointer;
-  padding: 0;
-  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
-}
-.user-avatar-button:hover {
-  transform: translateY(-1px);
-  z-index: 2;
-}
-.user-avatar-button:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.45);
-  z-index: 3;
-}
-.user-avatar.is-following {
-  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px oklch(from var(--color-primary) l c h / 0.2);
-  z-index: 4;
-}
-.user-avatar-button.different-file {
-  opacity: 0.55;
-}
-.user-avatar-button.different-file:hover {
-  opacity: 0.85;
-}
-
-.chat-container {
-  position: relative;
-}
-
-.chat-toggle-btn {
-  position: relative;
-}
-
-.chat-toggle-btn.is-active {
-  color: var(--color-text);
-  background: var(--color-surface-offset);
-}
-
-.chat-toggle-btn.is-unread:not(.is-active) {
-  color: var(--color-primary);
-  background: oklch(from var(--color-primary) l c h / 0.12);
-  box-shadow: inset 0 0 0 1px oklch(from var(--color-primary) l c h / 0.22);
-}
-
-.chat-toggle-btn.is-unread:not(.is-active):hover {
-  background: oklch(from var(--color-primary) l c h / 0.18);
-}
-
-.chat-toggle-badge {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  border-radius: var(--radius-full);
-  background: var(--color-primary);
-  color: var(--color-text-inverse);
-  font-size: 10px;
-  font-weight: 700;
-  line-height: 18px;
-  text-align: center;
-}
-
-.chat-toggle-btn.is-unread:not(.is-active) .chat-toggle-badge {
-  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.16);
-}
-
-.chat-panel {
-  position: absolute;
-  top: calc(100% + var(--space-2));
-  right: 0;
-  width: min(360px, calc(100vw - var(--space-6)));
-  max-height: min(70vh, 520px);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  padding: var(--space-3);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: oklch(from var(--color-surface) l c h / 0.98);
-  box-shadow: var(--shadow-lg);
-  backdrop-filter: blur(14px);
-  z-index: 30;
-}
-
-.chat-container > .chat-toast-container {
-  position: fixed;
-  top: calc(var(--toolbar-h) + var(--space-2));
-  right: var(--space-3);
-  width: min(360px, calc(100vw - var(--space-6)));
-  align-items: flex-end;
-  z-index: 60;
-}
-
-.chat-toast-container .toast {
-  width: 100%;
-  max-width: 100%;
-  padding: 12px 14px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: color-mix(in oklab, #f59e0b 78%, white 10%);
-  border-left-width: 4px;
-  background:
-    linear-gradient(135deg,
-      color-mix(in oklab, #f59e0b 32%, transparent),
-      color-mix(in oklab, var(--color-surface) 86%, #0b1022 14%) 42%),
-    color-mix(in oklab, var(--color-surface) 74%, #1b1320 26%);
-  color: color-mix(in oklab, white 92%, #fef3c7 8%);
-  font-size: 13px;
-  font-weight: 600;
-  box-shadow:
-    0 18px 34px rgb(0 0 0 / 0.38),
-    0 0 0 1px color-mix(in oklab, #f59e0b 18%, transparent);
-}
-
-:root[data-theme="light"] .chat-toast-container .toast {
-  border-color: color-mix(in oklab, #f59e0b 84%, #b45309 16%);
-  background:
-    linear-gradient(135deg,
-      color-mix(in oklab, #fcd34d 42%, white 58%),
-      color-mix(in oklab, white 94%, #fff7ed 6%) 42%),
-    #fff8e7;
-  color: #422006;
-  box-shadow:
-    0 16px 30px rgb(84 46 10 / 0.18),
-    0 0 0 1px rgb(245 158 11 / 0.12);
-}
-
-.chat-panel-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--space-3);
-}
-
-.chat-panel-title {
-  margin: 0;
-  font-size: var(--text-sm);
-  font-weight: 700;
-}
-
-.chat-panel-status {
-  margin: var(--space-1) 0 0;
-  font-size: 11px;
-  color: var(--color-text-muted);
-}
-
-.chat-alert-btn {
-  flex-shrink: 0;
-  padding: 6px 10px;
-  font-size: 11px;
-}
-
-.chat-alert-btn.is-enabled {
-  border-color: oklch(from var(--color-success) l c h / 0.45);
-  color: var(--color-success);
-  background: oklch(from var(--color-success) l c h / 0.12);
-}
-
-.chat-alert-btn.is-blocked {
-  color: var(--color-warning);
-}
-
-.chat-empty-state {
-  padding: var(--space-4);
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: 12px;
-  color: var(--color-text-muted);
-  background: var(--color-surface-2);
-}
-
-.chat-messages {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  overflow-y: auto;
-  padding-right: var(--space-1);
-  min-height: 140px;
-  max-height: 320px;
-}
-
-.chat-message {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-2);
-}
-
-.chat-message.is-local {
-  flex-direction: row-reverse;
-}
-
-.chat-message-avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: var(--radius-full);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 12px;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.chat-message-body {
-  min-width: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.chat-message.is-local .chat-message-body {
-  align-items: flex-end;
-}
-
-.chat-message-meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-}
-
-.chat-message.is-local .chat-message-meta {
-  justify-content: flex-end;
-}
-
-.chat-message-author {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-.chat-message-time,
-.chat-message-file {
-  font-size: 10px;
-  color: var(--color-text-muted);
-}
-
-.chat-message-file {
-  padding: 2px 6px;
-  border-radius: var(--radius-full);
-  background: var(--color-surface-offset);
-}
-
-.chat-message-text {
-  margin: 0;
-  padding: 10px 12px;
-  border-radius: var(--radius-md);
-  background: var(--color-surface-2);
-  border: 1px solid var(--color-divider);
-  color: var(--color-text);
-  font-size: 13px;
-  line-height: 1.45;
-  word-break: break-word;
-  width: fit-content;
-  max-width: 78%;
-}
-
-.chat-message.is-local .chat-message-text {
-  background: oklch(from var(--color-primary) l c h / 0.14);
-  border-color: oklch(from var(--color-primary) l c h / 0.25);
-}
-
-.chat-form {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.chat-input {
-  font-size: 13px;
-}
-
-.chat-send-btn {
-  flex-shrink: 0;
-  padding-inline: var(--space-4);
-}
-
-.app-dialog {
-  width: min(420px, calc(100vw - var(--space-6)));
-  margin: auto;
-  padding: 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  background: var(--color-surface);
-  color: var(--color-text);
-  box-shadow: var(--shadow-lg);
-  opacity: 0;
-  transform: scale(0.95);
-  transition:
-    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
-    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
-    display 0.2s cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
-}
-
-.app-dialog[open] {
-  opacity: 1;
-  transform: scale(1);
-}
-
-@starting-style {
-  .app-dialog[open] {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-.app-dialog::backdrop {
-  background: oklch(from var(--color-bg) l c h / 0.72);
-  backdrop-filter: blur(6px);
-  opacity: 0;
-  transition:
-    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
-    display 0.2s cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
-}
-
-.app-dialog[open]::backdrop {
-  opacity: 1;
-}
-
-@starting-style {
-  .app-dialog[open]::backdrop {
-    opacity: 0;
-  }
-}
-.app-dialog-form {
-  display: grid;
-  gap: var(--space-4);
-  padding: var(--space-5);
-}
-.app-dialog-header {
-  display: grid;
-  gap: var(--space-1);
-}
-.app-dialog-title {
-  font-size: var(--text-base);
-  font-weight: 600;
-}
-.app-dialog-copy {
-  color: var(--color-text-muted);
-  font-size: var(--text-sm);
-}
-.app-dialog-field {
-  display: grid;
-  gap: var(--space-2);
-}
-.app-dialog-label {
-  font-size: var(--text-xs);
-  font-weight: 600;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-.app-dialog-hint {
-  color: var(--color-text-muted);
-  font-size: var(--text-xs);
-  line-height: 1.5;
-}
-.app-dialog-note {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-offset);
-  color: var(--color-text);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: var(--text-xs);
-  line-height: 1.6;
-  overflow-wrap: anywhere;
-  padding: var(--space-3);
-}
-.app-dialog-note.is-danger {
-  background: var(--color-error-highlight);
-  border-color: oklch(from var(--color-error) l c h / 0.35);
-  color: var(--color-error);
-}
-.app-dialog-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--space-2);
-}
-
-.tab-lock-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1200;
-  display: grid;
-  place-items: center;
-  padding: var(--space-6);
-  background:
-    radial-gradient(circle at top, oklch(from var(--color-primary) l c h / 0.16), transparent 38%),
-    oklch(from var(--color-bg) l c h / 0.82);
-  backdrop-filter: blur(10px);
-}
-
-.tab-lock-card {
-  width: min(520px, 100%);
-  display: grid;
-  gap: var(--space-4);
-  padding: var(--space-6);
-  border: 1px solid oklch(from var(--color-primary) l c h / 0.25);
-  border-radius: var(--radius-xl);
-  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
-  box-shadow: var(--shadow-lg);
-}
-
-.tab-lock-kicker {
-  font-size: var(--text-xs);
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--color-primary);
-}
-
-.tab-lock-title {
-  font-size: var(--text-lg);
-  line-height: 1.2;
-}
-
-.tab-lock-copy {
-  color: var(--color-text-muted);
-  font-size: var(--text-sm);
-  line-height: 1.6;
-}
-
-.tab-lock-actions {
-  display: flex;
-  justify-content: flex-start;
-}
-
-
-/* ===== EDITOR LAYOUT ===== */
-
-.editor-layout {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
-
-.editor-pane,
-.preview-pane {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.editor-pane {
-  flex: 1;
-  min-width: 200px;
-}
-.preview-pane {
-  flex: 1;
-  min-width: 200px;
-}
-
-.pane-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-1) var(--space-3);
-  background: var(--color-surface-offset);
-  border-bottom: 1px solid var(--color-divider);
-  flex-shrink: 0;
-  height: 28px;
-}
-.pane-header-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-.pane-header-meta {
-  display: flex;
-  align-items: baseline;
-  gap: var(--space-3);
-  min-width: 0;
-}
-.pane-label {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-.pane-label-meta {
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--color-text-muted);
-}
-
-/* Resizer */
-.resizer {
-  width: 4px;
-  cursor: col-resize;
-  background: var(--color-divider);
-  flex-shrink: 0;
-  position: relative;
-  transition: background var(--transition-interactive);
-  z-index: 5;
-}
-.resizer:hover,
-.resizer.dragging {
-  background: var(--color-primary);
-}
-.resizer::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -6px;
-  right: -6px;
-  bottom: 0;
-}
-
-/* Editor container (CodeMirror) */
-.markdown-toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  flex-wrap: wrap;
-  padding: var(--space-1) var(--space-2);
-  background: var(--color-surface);
-  border-bottom: 1px solid var(--color-divider);
-  flex-shrink: 0;
-}
-
-.markdown-toolbar-btn {
-  min-width: 36px;
-  min-height: 28px;
-  padding: 0;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-muted);
-  font-size: 11px;
-  line-height: 1;
-}
-
-.markdown-toolbar-btn svg {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  pointer-events: none;
-}
-
-.markdown-toolbar-separator {
-  width: 1px;
-  height: 18px;
-  background: var(--color-divider);
-  margin: 0 2px;
-  flex-shrink: 0;
-}
-
-.markdown-toolbar-btn:hover {
-  color: var(--color-text);
-  background: var(--color-surface-offset);
-}
-
-.markdown-toolbar-btn:active {
-  transform: scale(0.95);
-}
-
-.markdown-toolbar-btn:focus-visible {
-  outline: 2px solid oklch(from var(--color-primary) l c h / 0.35);
-  outline-offset: 1px;
-}
-
-.editor-container {
-  flex: 1;
-  overflow: hidden;
-  background: var(--color-bg);
-  position: relative;
-}
-
-.editor-container > .editor-loading {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  background: var(--color-bg);
-}
-
-.editor-container.is-loading-editor .cm-editor {
-  visibility: hidden;
-}
-
-.editor-container .cm-editor {
-  height: 100%;
-  font-family: var(--font-mono);
-  font-size: 14px;
-}
-.editor-container .cm-editor .cm-scroller {
-  overflow: auto;
-  font-family: var(--font-mono);
-}
-.editor-container .cm-editor.cm-focused {
-  outline: none;
-}
-
-/* y-webrtc cursor styles */
-.cm-editor .cm-ySelectionInfo {
-  font-family: var(--font-body);
-  font-size: 11px;
-  font-weight: 600;
-  padding: 1px 4px;
-  border-radius: 3px 3px 3px 0;
-  opacity: 1;
-  transition: opacity 0.3s;
-  position: absolute;
-  top: -1.2em;
-  left: -1px;
-  white-space: nowrap;
-  z-index: 10;
-}
-
-/* Preview body (contains preview + outline side by side) */
-.preview-body {
-  --preview-floating-sidebar-gap: var(--space-3);
-  --preview-floating-comments-width: min(300px, 34vw);
-  --preview-floating-outline-width: 220px;
-  --preview-content-max-width: 720px;
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-  min-height: 0;
-  position: relative;
-}
-
-/* Preview container */
-.preview-container {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: var(--color-bg);
-  overscroll-behavior: contain;
-  min-width: 0;
-}
-
-.preview-content {
-  padding: var(--space-6) var(--space-6) var(--space-12);
-  max-width: 720px;
-  margin: 0 auto;
-  min-width: 0;
-  overflow: hidden;
-  position: relative;
-  font-family: var(--font-body);
-  font-size: var(--text-sm);
-  line-height: 1.7;
-  color: var(--color-text);
-}
-.preview-content[data-render-phase="shell"] {
-  color: var(--color-text-muted);
-}
-
-@media (min-width: 769px) {
-  .preview-content {
-    padding-bottom: calc(var(--space-12) + 96px);
-  }
-}
-
-.preview-content.is-excalidraw-file-preview {
-  display: flex;
-  width: 100%;
-  min-height: 100%;
-  height: 100%;
-  margin: 0;
-  padding: var(--space-3);
-  position: relative;
-  box-sizing: border-box;
-  max-width: none;
-}
-
-.preview-content.is-image-file-preview {
-  display: flex;
-  width: 100%;
-  min-height: 100%;
-  margin: 0;
-  padding: var(--space-4);
-  position: relative;
-  box-sizing: border-box;
-  max-width: none;
-}
-
-.preview-content.is-plantuml-file-preview {
-  width: 100%;
-  min-height: 100%;
-  max-width: none;
-}
-
-.preview-content.is-mermaid-file-preview {
-  width: 100%;
-  min-height: 100%;
-  max-width: none;
-}
-
-.preview-content.is-mermaid-file-preview [data-preview-render-host="true"] {
-  min-height: 100%;
-}
-
-.preview-content.is-plantuml-file-preview [data-preview-render-host="true"] {
-  min-height: 100%;
-}
-
-.preview-content.is-excalidraw-file-preview [data-preview-render-host="true"] {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  min-height: 100%;
-}
-
-.preview-content.is-image-file-preview [data-preview-render-host="true"] {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  min-height: 100%;
-}
-
-.image-file-preview-shell {
-  width: 100%;
-  min-height: 100%;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.image-file-preview-image {
-  max-width: min(100%, 1200px);
-  max-height: calc(100vh - 180px);
-  object-fit: contain;
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  background: var(--color-surface);
-}
-
-.preview-content.is-mermaid-file-preview .mermaid-shell {
-  margin: 0;
-  min-height: 100%;
-}
-
-.preview-content.is-plantuml-file-preview .plantuml-shell {
-  margin: 0;
-  min-height: 100%;
-}
-
-.preview-content.is-excalidraw-file-preview .excalidraw-embed,
-.preview-content.is-excalidraw-file-preview .excalidraw-embed-placeholder {
-  margin: 0;
-  width: 100%;
-  min-height: 100%;
-}
-
-.preview-content.is-excalidraw-file-preview .excalidraw-embed {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.preview-content.is-excalidraw-file-preview .excalidraw-embed-placeholder {
-  display: flex;
-  align-items: stretch;
-}
-
-.preview-content.is-excalidraw-file-preview .preview-shell {
-  width: 100%;
-  min-height: 100%;
-}
-
-.preview-content.is-excalidraw-file-preview .excalidraw-embed-iframe {
-  flex: 1;
-  min-height: 0;
-  height: 100% !important;
-}
-
-.preview-content.is-excalidraw-file-preview .excalidraw-embed-resizer {
-  display: none;
-}
-
-.preview-content.is-excalidraw-file-preview .excalidraw-embed.is-maximized {
-  position: absolute;
-  inset: var(--space-3);
-  margin: 0;
-  z-index: 2;
-  max-width: calc(100% - (var(--space-3) * 2));
-  box-sizing: border-box;
-}
-
-.preview-content.is-excalidraw-file-preview .excalidraw-embed.is-maximized .excalidraw-embed-iframe {
-  height: 100% !important;
-}
-
-.preview-shell {
-  min-height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--text-sm);
-  color: var(--color-text-muted);
-}
-
-/* ===== MARKDOWN PREVIEW STYLES ===== */
-
-.preview-content h1 {
-  font-size: var(--text-xl);
-  font-weight: 700;
-  margin: var(--space-8) 0 var(--space-4);
-  padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--color-divider);
-  letter-spacing: -0.02em;
-}
-.preview-content h1:first-child {
-  margin-top: 0;
-}
-.preview-content h2 {
-  font-size: var(--text-lg);
-  font-weight: 600;
-  margin: var(--space-6) 0 var(--space-3);
-  letter-spacing: -0.01em;
-}
-.preview-content h3 {
-  font-size: var(--text-base);
-  font-weight: 600;
-  margin: var(--space-5) 0 var(--space-2);
-}
-.preview-content h4, .preview-content h5, .preview-content h6 {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  margin: var(--space-4) 0 var(--space-2);
-  color: var(--color-text-muted);
-}
-
-.preview-content p {
-  margin-bottom: var(--space-4);
-  max-width: 72ch;
-}
-
-.preview-content p:has(> .excalidraw-embed-placeholder:only-child) {
-  max-width: none;
-  margin-bottom: 0;
-}
-
-.preview-content p:has(> .video-embed-placeholder:only-child) {
-  max-width: none;
-  margin-bottom: 0;
-}
-
-.preview-content p:has(> .plantuml-shell:only-child) {
-  max-width: none;
-  margin-bottom: 0;
-}
-
-.preview-content a {
-  color: var(--color-primary);
-  text-decoration: none;
-  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.3);
-  transition: border-color var(--transition-interactive);
-}
-.preview-content a:hover {
-  border-bottom-color: var(--color-primary);
-}
-
-.preview-content strong { font-weight: 600; }
-.preview-content em { font-style: italic; }
-.preview-content del { text-decoration: line-through; color: var(--color-text-muted); }
-
-.preview-content ul,
-.preview-content ol {
-  margin-bottom: var(--space-4);
-  padding-left: var(--space-6);
-}
-.preview-content li {
-  margin-bottom: var(--space-1);
-}
-.preview-content li > ul,
-.preview-content li > ol {
-  margin-top: var(--space-1);
-  margin-bottom: 0;
-}
-
-/* Task list checkboxes */
-.preview-content .task-list-item {
-  list-style: none;
-  margin-left: calc(var(--space-6) * -1);
-  padding-left: var(--space-1);
-}
-.preview-content .task-list-item input[type="checkbox"] {
-  margin-right: var(--space-2);
-  accent-color: var(--color-primary);
-  vertical-align: middle;
-}
-
-/* Blockquote */
-.preview-content blockquote {
-  margin: var(--space-4) 0;
-  padding: var(--space-3) var(--space-5);
-  border-left: 3px solid var(--color-primary);
-  background: var(--color-surface);
-  border-radius: 0 var(--radius-md) var(--radius-md) 0;
-  color: var(--color-text-muted);
-}
-.preview-content blockquote p:last-child {
-  margin-bottom: 0;
-}
-
-/* Inline code */
-.preview-content code {
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  background: var(--color-surface-offset);
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-  color: var(--color-primary);
-}
-
-/* Code blocks */
-.preview-content pre {
-  margin: var(--space-4) 0;
-  border-radius: var(--radius-lg);
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  border: 1px solid var(--color-border);
-  max-width: 100%;
-  background: var(--color-surface);
-}
-.preview-content pre code {
-  display: block;
-  padding: var(--space-4);
-  background: none;
-  color: var(--color-text);
-  font-size: 13px;
-  line-height: 1.6;
-  white-space: pre;
-  word-wrap: normal;
-  overflow-wrap: normal;
-  width: fit-content;
-  min-width: 100%;
-}
-
-/* Tables */
-.preview-content .table-wrapper {
-  margin: var(--space-4) 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-.preview-content table {
-  width: 100%;
-  min-width: 100%;
-  border-collapse: collapse;
-  white-space: nowrap;
-}
-.preview-content th,
-.preview-content td {
-  padding: var(--space-2) var(--space-3);
-  text-align: left;
-  border-bottom: 1px solid var(--color-divider);
-  font-size: var(--text-sm);
-}
-.preview-content th {
-  background: var(--color-surface-offset);
-  font-weight: 600;
-  font-size: var(--text-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--color-text-muted);
-}
-.preview-content tr:last-child td {
-  border-bottom: none;
-}
-.preview-content tr:hover td {
-  background: var(--color-surface-offset);
-}
-
-/* Horizontal rule */
-.preview-content hr {
-  border: none;
-  height: 1px;
-  background: var(--color-divider);
-  margin: var(--space-8) 0;
-}
-
-/* Images */
-.preview-content img {
-  max-width: 100%;
-  height: auto;
-  border-radius: var(--radius-md);
-  margin: var(--space-4) 0;
-  cursor: zoom-in;
-}
-
-.image-lightbox-root {
-  position: fixed;
-  inset: 0;
-  z-index: 220;
-  display: grid;
-  place-items: center;
-  pointer-events: auto;
-}
-
-.image-lightbox-root[hidden] {
-  display: none !important;
-}
-
-.image-lightbox-backdrop {
-  position: absolute;
-  inset: 0;
-  border: none;
-  background: oklch(0.08 0.01 260 / 0.82);
-  backdrop-filter: blur(10px);
-  cursor: zoom-out;
-}
-
-.image-lightbox-shell {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-}
-
-.image-lightbox-toolbar {
-  position: absolute;
-  top: var(--space-5);
-  left: var(--space-5);
-  right: var(--space-5);
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  pointer-events: none;
-}
-
-.image-lightbox-title {
-  min-width: 0;
-  font-size: var(--text-xs);
-  font-weight: 600;
-  color: white;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 8px 12px;
-  border-radius: 999px;
-  background: oklch(0.18 0.02 260 / 0.68);
-  backdrop-filter: blur(12px);
-  box-shadow: 0 16px 40px oklch(0 0 0 / 0.24);
-  pointer-events: auto;
-}
-
-.image-lightbox-controls {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  pointer-events: auto;
-}
-
-.image-lightbox-btn {
-  min-width: 0;
-  padding: 8px 12px;
-  border: none;
-  border-radius: 999px;
-  background: oklch(0.18 0.02 260 / 0.68);
-  color: white;
-  font-size: var(--text-xs);
-  font-weight: 600;
-  backdrop-filter: blur(12px);
-  box-shadow: 0 16px 40px oklch(0 0 0 / 0.24);
-  transition: background 0.18s ease, transform 0.18s ease;
-}
-
-.image-lightbox-btn:hover:not(:disabled) {
-  background: oklch(0.24 0.02 260 / 0.82);
-}
-
-.image-lightbox-btn:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-
-.image-lightbox-zoom-label {
-  min-width: 58px;
-  padding: 8px 12px;
-  border-radius: 999px;
-  background: oklch(0.18 0.02 260 / 0.68);
-  color: white;
-  font-size: var(--text-xs);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-  backdrop-filter: blur(12px);
-  box-shadow: 0 16px 40px oklch(0 0 0 / 0.24);
-}
-
-.image-lightbox-viewport {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  touch-action: none;
-  user-select: none;
-}
-
-.image-lightbox-viewport.is-dragging .image-lightbox-image {
-  cursor: grabbing !important;
-}
-
-.image-lightbox-image {
-  position: absolute;
-  inset: 0;
-  margin: auto;
-  max-width: calc(100vw - (var(--space-8) * 2));
-  max-height: calc(100vh - (var(--space-8) * 2));
-  width: auto;
-  height: auto;
-  object-fit: contain;
-  transform-origin: center center;
-  will-change: transform;
-  box-shadow: 0 28px 80px oklch(0 0 0 / 0.28);
-}
-
-body.image-lightbox-open {
-  overflow: hidden;
-}
-
-@media (max-width: 768px) {
-  .image-lightbox-toolbar {
-    top: var(--space-3);
-    left: var(--space-3);
-    right: var(--space-3);
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .image-lightbox-controls {
-    justify-content: flex-start;
-  }
-
-  .image-lightbox-btn {
-    flex: 0 0 auto;
-  }
-
-  .image-lightbox-image {
-    max-width: calc(100vw - (var(--space-4) * 2));
-    max-height: calc(100vh - (var(--space-4) * 2));
-  }
-}
-
-.preview-content .video-embed-shell {
-  display: block;
-  background: #000;
-}
-
-.preview-content .video-embed,
-.preview-content .video-embed-placeholder {
-  display: block;
-  transition: box-shadow 0.18s ease;
-}
-
-.preview-content .video-embed-placeholder.is-hydrated {
-  visibility: hidden;
-}
-
-.video-embed-overlay-root {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.preview-content .video-embed-frame,
-.preview-content .video-embed,
-.preview-content .video-embed-placeholder {
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-}
-
-.preview-content .video-embed-frame {
-  height: 100%;
-}
-
-.preview-content .video-embed-placeholder-card {
-  border-radius: 0;
-  min-height: 100%;
-}
-
-.preview-content .video-embed-placeholder-copy {
-  display: grid;
-  gap: 2px;
-}
-
-.preview-content .video-embed-iframe,
-.preview-content .video-embed-player {
-  display: block;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  border: none;
-  background: #000;
-}
-
-.preview-content .video-embed-player {
-  object-fit: contain;
-}
-
-/* Mermaid diagrams */
-.preview-content .mermaid-shell {
-  display: grid;
-  gap: 0;
-}
-.preview-content .mermaid-placeholder-card {
-  border-radius: 0;
-}
-.preview-content .mermaid-toolbar {
-  justify-content: flex-end;
-}
-.preview-content .mermaid-zoom-btn {
-  min-width: 32px;
-  line-height: 1.5;
-}
-.preview-content .mermaid-zoom-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.preview-content .mermaid-frame {
-  max-width: none;
-}
-.preview-content .mermaid-frame.is-pannable {
-  cursor: grab;
-}
-.preview-content .mermaid-frame.is-dragging {
-  cursor: grabbing;
-  user-select: none;
-}
-.preview-content .mermaid-frame svg {
-  display: block;
-}
-body.mermaid-maximized-open {
-  overflow: hidden;
-}
-body.mermaid-maximized-open::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  background: oklch(0.1 0 0 / 0.42);
-  backdrop-filter: blur(2px);
-  z-index: 170;
-}
-.preview-content .mermaid-shell.is-maximized {
-  position: fixed;
-  inset: var(--space-4);
-  width: auto;
-  z-index: 171;
-  margin: 0;
-  max-width: none;
-  box-shadow: var(--shadow-lg);
-  grid-template-rows: auto minmax(0, 1fr);
-}
-.preview-content .mermaid-shell.is-maximized .mermaid-frame {
-  max-height: none;
-  height: 100%;
-}
-
-/* PlantUML diagrams */
-.preview-content .plantuml-shell,
-.plantuml-maximized-root .plantuml-shell {
-  display: grid;
-  gap: 0;
-}
-.preview-content .plantuml-shell,
-.plantuml-maximized-root .plantuml-shell {
-  min-width: 0;
-  width: 100%;
-}
-.preview-content .plantuml-placeholder-card,
-.plantuml-maximized-root .plantuml-placeholder-card {
-  border-radius: 0;
-}
-.preview-content .plantuml-tool-btn:disabled,
-.plantuml-maximized-root .plantuml-tool-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.preview-content .plantuml-toolbar,
-.plantuml-maximized-root .plantuml-toolbar {
-  justify-content: flex-end;
-}
-.preview-content .plantuml-tool-btn,
-.plantuml-maximized-root .plantuml-tool-btn {
-  min-width: 32px;
-  line-height: 1.5;
-}
-.preview-content .plantuml-frame,
-.plantuml-maximized-root .plantuml-frame {
-  max-width: 100%;
-}
-.preview-content .plantuml-frame.is-pannable,
-.plantuml-maximized-root .plantuml-frame.is-pannable {
-  cursor: grab;
-}
-.preview-content .plantuml-frame.is-dragging,
-.plantuml-maximized-root .plantuml-frame.is-dragging {
-  cursor: grabbing;
-  user-select: none;
-}
-.preview-content .plantuml-frame svg,
-.plantuml-maximized-root .plantuml-frame svg {
-  display: block;
-}
-body.plantuml-maximized-open {
-  overflow: hidden;
-}
-body.plantuml-maximized-open::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  background: oklch(0.1 0 0 / 0.42);
-  backdrop-filter: blur(2px);
-  z-index: 170;
-}
-.plantuml-maximized-root {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 171;
-}
-.preview-content .plantuml-shell.is-maximized,
-.plantuml-maximized-root .plantuml-shell.is-maximized {
-  position: fixed;
-  inset: var(--space-4);
-  width: auto;
-  z-index: 171;
-  margin: 0;
-  max-width: none;
-  box-shadow: var(--shadow-lg);
-  pointer-events: auto;
-  grid-template-rows: auto minmax(0, 1fr);
-}
-.preview-content .plantuml-shell.is-maximized .plantuml-frame,
-.plantuml-maximized-root .plantuml-shell.is-maximized .plantuml-frame {
-  max-height: none;
-  height: 100%;
-}
-
-/* ===== OUTLINE PANEL ===== */
-
-.pane-header-btn {
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  font-size: 11px;
-  color: var(--color-text-muted);
-  white-space: nowrap;
-  transition: color var(--transition-interactive), background var(--transition-interactive);
-}
-.pane-header-btn:hover {
-  color: var(--color-text);
-  background: var(--color-surface-dynamic);
-}
-.pane-header-btn.active {
-  color: var(--color-primary);
-  background: oklch(from var(--color-primary) l c h / 0.1);
-}
-
-/* ===== COMMENTS ===== */
-
-.comments-drawer {
-  width: min(300px, 34vw);
-  min-width: 240px;
-  border-left: 1px solid var(--color-divider);
-  background:
-    linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.035), transparent 120px),
-    color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  box-shadow: inset 1px 0 0 oklch(from var(--color-comment) l c h / 0.06);
-}
-
-.comments-drawer-header {
-  padding: var(--space-4);
-  border-bottom: 1px solid var(--color-divider);
-  background: color-mix(in srgb, var(--color-surface) 97%, var(--color-comment) 3%);
-}
-
-.comments-drawer-title {
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--color-comment);
-}
-
-.comments-drawer-empty {
-  padding: var(--space-4);
-  color: var(--color-text-muted);
-  font-size: 12px;
-}
-
-.comments-drawer-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  overflow: auto;
-  padding: var(--space-3);
-}
-
-.comments-drawer-item {
-  width: 100%;
-  text-align: left;
-  border: 1px solid color-mix(in srgb, var(--color-divider) 90%, var(--color-comment) 10%);
-  border-radius: calc(var(--radius-lg) + 4px);
-  padding: var(--space-4);
-  background:
-    linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.028), transparent 70%),
-    color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%);
-  transition: transform 140ms ease, border-color var(--transition-interactive), background var(--transition-interactive), box-shadow var(--transition-interactive);
-}
-
-.comments-drawer-item:hover {
-  transform: translateY(-1px);
-  border-color: oklch(from var(--color-comment) l c h / 0.18);
-  background:
-    linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.042), transparent 70%),
-    color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
-  box-shadow: var(--shadow-md);
-}
-
-.comments-drawer-item.is-active {
-  border-color: color-mix(in srgb, var(--color-border) 78%, var(--color-comment) 22%);
-  background:
-    linear-gradient(180deg, oklch(from var(--color-comment) l c h / 0.055), transparent 72%),
-    color-mix(in srgb, var(--color-surface-2) 90%, var(--color-comment) 10%);
-  box-shadow: 0 0 0 1px oklch(from var(--color-comment) l c h / 0.14);
-}
-
-.comments-drawer-item-header,
-.comments-drawer-item-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
-}
-
-.comments-drawer-item-title {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--color-comment);
-}
-
-.comments-drawer-item-count {
-  min-width: 20px;
-  height: 20px;
-  border-radius: var(--radius-full);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-comment-soft);
-  color: var(--color-comment);
-  font-size: 11px;
-  font-weight: 700;
-  border: 1px solid oklch(from var(--color-comment) l c h / 0.18);
-}
-
-.comments-drawer-item-quote {
-  margin: var(--space-3) 0;
-  padding: var(--space-3);
-  border-radius: var(--radius-lg);
-  border: 1px solid color-mix(in srgb, var(--color-divider) 90%, var(--color-comment) 10%);
-  background: color-mix(in srgb, var(--color-surface-offset) 90%, var(--color-comment) 10%);
-  color: var(--color-text-muted);
-  font-family: var(--font-mono);
-  font-size: 11.5px;
-  line-height: 1.65;
-  white-space: pre-wrap;
-  overflow: auto;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  max-height: 9.5rem;
-  scrollbar-width: thin;
-  padding-bottom: calc(var(--space-3) + 2px);
-}
-
-.comments-drawer-item-preview {
-  position: relative;
-  max-height: 7.8rem;
-  overflow: hidden;
-  color: var(--color-text-muted);
-}
-
-.comments-drawer-item-preview:after {
-  content: "";
-  position: absolute;
-  inset: auto 0 0 0;
-  height: 2.5rem;
-  background: linear-gradient(180deg, oklch(0 0 0 / 0), color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%));
-  pointer-events: none;
-}
-
-.comments-drawer-item-footer {
-  font-size: 11px;
-  color: var(--color-text-muted);
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  align-items: flex-end;
-  flex-wrap: wrap;
-}
-
-.comments-drawer-item-updated {
-  color: var(--color-text-faint);
-}
-
-.comment-editor-layer,
-.comment-preview-layer,
-.comment-preview-highlights {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.comment-editor-badge,
-.comment-preview-badge {
-  position: absolute;
-  min-width: 28px;
-  height: 24px;
-  border-radius: var(--radius-full);
-  background: color-mix(in srgb, var(--color-surface) 68%, var(--color-comment) 32%);
-  color: var(--color-comment);
-  border: 1px solid oklch(from var(--color-comment) l c h / 0.24);
-  box-shadow: var(--shadow-md);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 0 7px;
-  font-size: 10px;
-  font-weight: 700;
-  pointer-events: auto;
-  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
-}
-
-.comment-editor-badge.is-active,
-.comment-preview-badge.is-active {
-  background: color-mix(in srgb, var(--color-surface) 42%, var(--color-comment) 58%);
-  border-color: oklch(from var(--color-comment) l c h / 0.32);
-  color: var(--color-text-inverse);
-}
-
-.comment-marker-icon {
-  display: inline-flex;
-  width: 12px;
-  height: 12px;
-  flex: 0 0 auto;
-}
-
-.comment-marker-icon svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.comment-marker-count {
-  line-height: 1;
-}
-
-.comment-editor-badge:hover,
-.comment-preview-badge:hover,
-.comment-selection-chip:hover {
-  transform: translateY(-1px) scale(1.04);
-  box-shadow: var(--shadow-lg);
-}
-
-.comment-selection-chip {
-  position: absolute;
-  border-radius: var(--radius-full);
-  padding: 6px 10px;
-  min-width: 96px;
-  background: color-mix(in srgb, var(--color-surface) 25%, var(--color-comment) 75%);
-  color: var(--color-text-inverse);
-  border: 1px solid oklch(from var(--color-comment) l c h / 0.22);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  text-align: center;
-  box-shadow: var(--shadow-md);
-  pointer-events: auto;
-  transition: transform 140ms ease, box-shadow 140ms ease;
-}
-
-.comment-preview-highlight {
-  position: absolute;
-  border-radius: 6px;
-  background: var(--color-comment-soft);
-  border: 1px solid oklch(from var(--color-comment) l c h / 0.16);
-}
-
-.comment-card-root {
-  position: fixed;
-  z-index: 50;
-}
-
-.comment-card {
-  width: min(100%, 520px);
-  border-radius: 18px;
-  border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-comment) 18%);
-  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-comment) 6%);
-  box-shadow: 0 20px 56px oklch(0 0 0 / 0.24);
-  padding: var(--space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  max-height: min(78vh, 720px);
-  overflow: hidden;
-  animation: comment-card-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.comment-card-header,
-.comment-thread-card-header,
-.comment-message-card-meta,
-.comment-card-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.comment-card-header,
-.comment-thread-card-header,
-.comment-card-actions {
-  justify-content: space-between;
-}
-
-.comment-card-header {
-  flex-shrink: 0;
-}
-
-.comment-card-scroll {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  min-height: 0;
-  overflow: auto;
-  padding-right: 2px;
-}
-
-.comment-card-title {
-  font-size: 15px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
-
-.comment-card-meta {
-  margin-top: 2px;
-  color: var(--color-comment);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-.comment-card-close,
-.comment-thread-card-action {
-  padding: 5px 8px;
-  border-radius: var(--radius-full);
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--color-text-muted);
-  background: color-mix(in srgb, var(--color-surface-offset) 88%, var(--color-comment) 12%);
-  border: 1px solid transparent;
-  transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive);
-}
-
-.comment-card-close:hover,
-.comment-thread-card-action:hover {
-  color: var(--color-text);
-  border-color: oklch(from var(--color-comment) l c h / 0.16);
-}
-
-.comment-thread-card-action.is-active {
-  color: var(--color-text);
-  background: color-mix(in srgb, var(--color-surface-offset) 72%, var(--color-comment) 28%);
-  border-color: oklch(from var(--color-comment) l c h / 0.2);
-}
-
-.comment-thread-card-action.is-danger {
-  color: var(--color-error);
-}
-
-.comment-card-quote,
-.comment-thread-card-excerpt {
-  font-size: 12px;
-  color: var(--color-text-muted);
-  background: color-mix(in srgb, var(--color-surface-offset) 90%, var(--color-comment) 10%);
-  border-radius: var(--radius-md);
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
-}
-
-.comment-card-quote {
-  white-space: pre-wrap;
-  overflow: auto;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  font-family: var(--font-mono);
-  font-size: 11.5px;
-  line-height: 1.65;
-  max-height: 11rem;
-  padding-bottom: calc(var(--space-3) + 2px);
-  scrollbar-width: thin;
-}
-
-.comment-card-form,
-.comment-reply-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-.comment-card-input {
-  resize: vertical;
-  min-height: 88px;
-}
-
-.comment-thread-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  padding-top: var(--space-3);
-  border-top: 1px solid var(--color-divider);
-}
-
-.comment-thread-card-header {
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.comment-thread-card-heading {
-  display: flex;
-  flex: 1 1 160px;
-  flex-wrap: wrap;
-  gap: var(--space-1) var(--space-2);
-  min-width: 0;
-}
-
-.comment-thread-card-author,
-.comment-message-card-author {
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.comment-thread-card-time,
-.comment-message-card-time {
-  font-size: 11px;
-  color: var(--color-text-faint);
-}
-
-.comment-thread-card-actions {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: var(--space-1);
-  margin-left: auto;
-  justify-content: flex-end;
-}
-
-.comment-message-card {
-  border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
-  border: 1px solid color-mix(in srgb, var(--color-divider) 90%, var(--color-comment) 10%);
-  padding: var(--space-2) var(--space-3);
-}
-
-.comment-message-card-body {
-  margin-top: var(--space-1);
-  font-size: 12px;
-  line-height: 1.65;
-}
-
-.comment-reaction-bar {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-  margin-top: var(--space-2);
-}
-
-.comment-reaction-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-
-.comment-reaction-actions {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-
-.comment-reaction-chip,
-.comment-reaction-more-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-height: 30px;
-  padding: 4px 10px;
-  border-radius: var(--radius-full);
-  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
-  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-comment) 10%);
-  color: var(--color-text-muted);
-  font-size: 11px;
-  font-weight: 600;
-  transition: background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive), transform 140ms ease;
-}
-
-.comment-reaction-chip:hover,
-.comment-reaction-more-trigger:hover {
-  color: var(--color-text);
-  border-color: oklch(from var(--color-comment) l c h / 0.22);
-  background: color-mix(in srgb, var(--color-surface-offset) 76%, var(--color-comment) 24%);
-}
-
-.comment-reaction-chip.is-active {
-  color: var(--color-comment);
-  border-color: oklch(from var(--color-comment) l c h / 0.28);
-  background: color-mix(in srgb, var(--color-surface-offset) 64%, var(--color-comment) 36%);
-}
-
-.comment-reaction-chip-emoji,
-.comment-reaction-chip-count {
-  line-height: 1;
-}
-
-.comment-reaction-quick-add,
-.comment-reaction-picker-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 34px;
-  min-height: 34px;
-  padding: 0;
-  border-radius: var(--radius-md);
-  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
-  background: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
-  font-size: 18px;
-  transition: background var(--transition-interactive), border-color var(--transition-interactive), transform 140ms ease;
-}
-
-.comment-reaction-quick-add:hover,
-.comment-reaction-picker-btn:hover {
-  border-color: oklch(from var(--color-comment) l c h / 0.24);
-  background: color-mix(in srgb, var(--color-surface-offset) 78%, var(--color-comment) 22%);
-  transform: translateY(-1px);
-}
-
-.comment-reaction-picker-wrap {
-  position: relative;
-  display: inline-flex;
-}
-
-.comment-reaction-picker {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  z-index: 2;
-  min-width: 220px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  padding: var(--space-3);
-  border-radius: var(--radius-lg);
-  border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-comment) 18%);
-  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
-  box-shadow: var(--shadow-lg);
-  overflow: auto;
-  scrollbar-width: thin;
-}
-
-.comment-reaction-picker.is-upward {
-  top: auto;
-  bottom: calc(100% + 8px);
-}
-
-.comment-reaction-picker-grid {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: var(--space-2);
-}
-
-.comment-markdown {
-  color: var(--color-text);
-  font-size: 12px;
-  line-height: 1.65;
-}
-
-.comment-markdown > :first-child {
-  margin-top: 0;
-}
-
-.comment-markdown > :last-child {
-  margin-bottom: 0;
-}
-
-.comment-markdown p,
-.comment-markdown ul,
-.comment-markdown ol,
-.comment-markdown blockquote,
-.comment-markdown pre,
-.comment-markdown .comment-markdown-table,
-.comment-markdown table {
-  max-width: none;
-}
-
-.comment-markdown p,
-.comment-markdown ul,
-.comment-markdown ol,
-.comment-markdown blockquote,
-.comment-markdown pre,
-.comment-markdown .comment-markdown-table {
-  margin: var(--space-2) 0;
-}
-
-.comment-markdown li + li {
-  margin-top: 4px;
-}
-
-.comment-markdown ul,
-.comment-markdown ol {
-  padding-left: var(--space-5);
-}
-
-.comment-markdown a {
-  color: var(--color-primary);
-  overflow-wrap: anywhere;
-  text-decoration: underline;
-}
-
-.comment-markdown blockquote {
-  padding: var(--space-2) var(--space-3);
-  border-left: 3px solid oklch(from var(--color-comment) l c h / 0.45);
-  border-radius: 0 var(--radius-md) var(--radius-md) 0;
-  background: color-mix(in srgb, var(--color-surface-offset) 84%, var(--color-comment) 16%);
-  color: var(--color-text-muted);
-}
-
-.comment-markdown code {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
-  background: color-mix(in srgb, var(--color-surface-offset) 88%, var(--color-comment) 12%);
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-  color: var(--color-primary);
-}
-
-.comment-markdown pre {
-  border-radius: var(--radius-lg);
-  overflow: auto;
-  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
-  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
-  max-width: 100%;
-}
-
-.comment-markdown pre code {
-  display: block;
-  padding: var(--space-3);
-  background: none;
-  color: var(--color-text);
-  font-size: 12px;
-  line-height: 1.6;
-  white-space: pre;
-  width: max-content;
-  min-width: 100%;
-}
-
-.comment-markdown .comment-markdown-table {
-  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
-  border-radius: var(--radius-md);
-  overflow: auto;
-}
-
-.comment-markdown table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.comment-markdown th,
-.comment-markdown td {
-  padding: var(--space-2) var(--space-3);
-  text-align: left;
-  border-bottom: 1px solid var(--color-divider);
-  font-size: 12px;
-}
-
-.comment-markdown th {
-  background: color-mix(in srgb, var(--color-surface-offset) 90%, var(--color-comment) 10%);
-}
-
-.comment-markdown-preview > :not(pre):not(blockquote):not(.comment-markdown-table) {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  overflow: hidden;
-}
-
-.comment-markdown-preview pre code {
-  max-height: 6.6rem;
-  min-width: 0;
-  width: 100%;
-  overflow: hidden;
-}
-
-.comment-markdown-preview .comment-markdown-table {
-  display: none;
-}
-
-@keyframes comment-card-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-/* ===== BACKLINKS PANEL ===== */
-
-.backlinks-panel.hidden,
-.backlinks-panel-layer.hidden {
-  display: none;
-}
-.backlinks-panel {
-  min-width: 0;
-}
-.backlinks-panel-layer {
-  position: absolute;
-  left: max(
-    var(--space-4),
-    calc((100% - min(var(--preview-content-max-width), 100%)) / 2)
-  );
-  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
-  width: min(320px, calc(min(var(--preview-content-max-width), 100%) - var(--space-8)));
-  z-index: 14;
-  pointer-events: none;
-}
-.backlinks-panel-dock {
-  display: flex;
-  flex-direction: column-reverse;
-  border: 1px solid var(--color-divider);
-  border-radius: 18px;
-  background: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-offset) 16%);
-  box-shadow: 0 14px 34px oklch(0 0 0 / 0.18);
-  backdrop-filter: blur(16px);
-  overflow: hidden;
-  pointer-events: auto;
-  transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
-}
-.backlinks-panel-dock:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 18px 40px oklch(0 0 0 / 0.2);
-}
-.backlinks-panel-inline {
-  border-top: 1px solid var(--color-divider);
-  margin-top: var(--space-6);
-  padding: 0 var(--space-4);
-}
-.backlinks-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-3) 0;
-  cursor: pointer;
-  user-select: none;
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-text-muted);
-  transition: color var(--transition-interactive);
-}
-.backlinks-header:hover {
-  color: var(--color-text);
-}
-.backlinks-panel-dock .backlinks-header {
-  padding: 11px 14px;
-  background: color-mix(in srgb, var(--color-surface-offset) 76%, var(--color-bg) 24%);
-}
-.backlinks-header-empty {
-  cursor: default;
-  opacity: 0.5;
-}
-.backlinks-header-empty:hover {
-  color: var(--color-text-muted);
-}
-.backlinks-chevron {
-  flex-shrink: 0;
-  transition: transform var(--transition-interactive);
-}
-.backlinks-panel.expanded .backlinks-chevron {
-  transform: rotate(90deg);
-}
-.backlinks-toggle {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.backlinks-count {
-  font-size: var(--text-xs);
-  font-weight: 600;
-  color: var(--color-primary);
-  background: oklch(from var(--color-primary) l c h / 0.14);
-  border-radius: var(--radius-full);
-  padding: 1px 7px;
-  min-width: 22px;
-  text-align: center;
-}
-.backlinks-count:empty {
-  display: none;
-}
-.backlinks-body {
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 200ms ease;
-}
-.backlinks-panel-inline.expanded .backlinks-body {
-  max-height: 600px;
-  overflow-y: auto;
-}
-.backlinks-panel-dock .backlinks-body {
-  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-surface-offset) 6%);
-}
-.backlinks-panel-dock.expanded .backlinks-body {
-  max-height: min(44vh, 400px);
-  overflow-y: auto;
-  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 78%, var(--color-primary) 22%);
-}
-.backlinks-panel-dock.expanded {
-  border-color: color-mix(in srgb, var(--color-divider) 72%, var(--color-primary) 28%);
-  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-offset) 10%);
-}
-.backlinks-list {
-  padding-bottom: var(--space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-.backlinks-panel-dock .backlinks-list {
-  padding: 10px;
-}
-.backlink-item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: var(--space-3);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-divider);
-  background: var(--color-surface);
-  cursor: pointer;
-  transition: border-color var(--transition-interactive), background var(--transition-interactive);
-}
-.backlinks-panel-dock .backlink-item {
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-offset) 12%);
-}
-.backlink-item:hover {
-  border-color: var(--color-primary);
-  background: oklch(from var(--color-primary) l c h / 0.04);
-}
-.backlink-item:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px oklch(from var(--color-primary) l c h / 0.45);
-}
-.backlink-file-name {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-text);
-  margin-bottom: var(--space-1);
-}
-.backlink-icon {
-  flex-shrink: 0;
-  color: var(--color-text-muted);
-}
-.backlink-dir {
-  font-size: var(--text-xs);
-  font-weight: 400;
-  color: var(--color-text-faint);
-  margin-left: auto;
-}
-.backlink-context {
-  font-size: var(--text-xs);
-  color: var(--color-text-muted);
-  line-height: 1.6;
-  padding-left: 22px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.backlink-more {
-  font-style: italic;
-  color: var(--color-text-faint);
-}
-
-@media (min-width: 769px) {
-  .backlinks-panel-inline {
-    display: none !important;
-  }
-}
-
-.outline-panel {
-  width: 220px;
-  flex-shrink: 0;
-  border-left: 1px solid var(--color-divider);
-  background: var(--color-surface-offset);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease;
-}
-.outline-panel.hidden {
-  width: 0;
-  border-left: none;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.outline-header {
-  padding: var(--space-2) var(--space-3);
-  border-bottom: 1px solid var(--color-divider);
-  flex-shrink: 0;
-}
-.outline-title {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-text-muted);
-}
-
-.outline-nav {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--space-2) 0;
-}
-.outline-nav::-webkit-scrollbar {
-  width: 4px;
-}
-.outline-nav::-webkit-scrollbar-thumb {
-  background: var(--color-surface-dynamic);
-  border-radius: var(--radius-full);
-}
-
-.outline-item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: 3px var(--space-3);
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--color-text-muted);
-  background: none;
-  border: none;
-  border-left: 2px solid transparent;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transition: color var(--transition-interactive), border-color var(--transition-interactive), background var(--transition-interactive);
-  font-family: var(--font-body);
-}
-.outline-item:hover {
-  color: var(--color-text);
-  background: var(--color-surface-dynamic);
-}
-.outline-item.active {
-  color: var(--color-primary);
-  border-left-color: var(--color-primary);
-  background: oklch(from var(--color-primary) l c h / 0.06);
-}
-
-.outline-item[data-level="1"] { padding-left: var(--space-3); font-weight: 600; }
-.outline-item[data-level="2"] { padding-left: calc(var(--space-3) + 12px); }
-.outline-item[data-level="3"] { padding-left: calc(var(--space-3) + 24px); font-size: 11px; }
-.outline-item[data-level="4"] { padding-left: calc(var(--space-3) + 36px); font-size: 11px; }
-.outline-item[data-level="5"] { padding-left: calc(var(--space-3) + 48px); font-size: 11px; }
-.outline-item[data-level="6"] { padding-left: calc(var(--space-3) + 60px); font-size: 11px; }
-
-.outline-empty {
-  padding: var(--space-4) var(--space-3);
-  font-size: 12px;
-  color: var(--color-text-faint);
-  font-style: italic;
-}
-
-
-/* ===== VIEW MODES ===== */
-
-.editor-layout[data-view="editor"] .preview-pane,
-.editor-layout[data-view="editor"] .resizer {
-  display: none;
-}
-.editor-layout[data-view="preview"] .editor-pane,
-.editor-layout[data-view="preview"] .resizer {
-  display: none;
-}
-.editor-layout[data-view="preview"] .preview-pane {
-  flex: 1;
-}
-.editor-layout[data-view="preview"] .preview-body {
-  --preview-content-max-width: 1080px;
-}
-.editor-layout[data-view="preview"] .preview-content {
-  max-width: 1080px;
-}
-.editor-layout[data-view="preview"] .preview-content.is-excalidraw-file-preview {
-  max-width: none;
-}
-.editor-layout[data-view="preview"] .preview-content.is-image-file-preview {
-  max-width: none;
-}
-.editor-layout[data-view="preview"] .preview-content.is-mermaid-file-preview {
-  max-width: none;
-}
-.editor-layout[data-view="preview"] .preview-content.is-plantuml-file-preview {
-  max-width: none;
-}
-.editor-layout[data-view="preview"] .preview-content p {
-  max-width: 84ch;
-}
-
-.editor-layout[data-view="preview"] .preview-content p:has(> .excalidraw-embed-placeholder:only-child) {
-  max-width: none;
-}
-
-.editor-layout[data-view="preview"] .preview-content p:has(> .video-embed-placeholder:only-child) {
-  max-width: none;
-}
-
-.editor-layout[data-view="preview"] .preview-content p:has(> .mermaid-shell:only-child) {
-  max-width: none;
-}
-
-.editor-layout[data-view="preview"] .preview-content p:has(> .plantuml-shell:only-child) {
-  max-width: none;
-}
-@media (min-width: 769px) {
-  .preview-body > .comments-drawer,
-  .preview-body > .outline-panel {
-    position: absolute;
-    top: var(--preview-floating-sidebar-gap);
-    right: var(--preview-floating-sidebar-gap);
-    bottom: var(--preview-floating-sidebar-gap);
-    z-index: 20;
-    overflow: hidden;
-    border: 1px solid var(--color-divider);
-    border-radius: calc(var(--radius-lg) + 2px);
-    box-shadow: var(--shadow-lg);
-    backdrop-filter: blur(14px);
-  }
-
-  .preview-body > .comments-drawer {
-    width: var(--preview-floating-comments-width);
-    min-width: 240px;
-    border-left: 1px solid var(--color-divider);
-  }
-
-  .preview-body > .outline-panel {
-    width: var(--preview-floating-outline-width);
-    border-left: 1px solid var(--color-divider);
-  }
-
-  .preview-body > .comments-drawer.hidden,
-  .preview-body > .outline-panel.hidden {
-    display: flex !important;
-    opacity: 0;
-    pointer-events: none;
-    transform: translateX(12px);
-    visibility: hidden;
-  }
-
-  .preview-body > .comments-drawer:not(.hidden),
-  .preview-body > .outline-panel:not(.hidden) {
-    opacity: 1;
-    transform: translateX(0);
-    visibility: visible;
-  }
-
-  .preview-body:has(> .outline-panel:not(.hidden)) > .comments-drawer:not(.hidden) {
-    right: calc(
-      var(--preview-floating-sidebar-gap) * 2
-      + var(--preview-floating-outline-width)
-    );
-  }
-}
-.editor-layout[data-view="editor"] .editor-pane {
-  flex: 1;
-}
-
-
-/* ===== TOAST ===== */
-
-.toast-container {
-  position: fixed;
-  bottom: var(--space-4);
-  right: var(--space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  z-index: 100;
-  pointer-events: none;
-}
-.toast {
-  pointer-events: auto;
-  padding: var(--space-2) var(--space-4);
-  background: var(--color-surface-2);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: var(--text-xs);
-  color: var(--color-text);
-  box-shadow: var(--shadow-md);
-  max-width: 320px;
-  
-  opacity: 1;
-  transform: translateX(0) scale(1);
-  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1), display 300ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
-}
-
-@starting-style {
-  .toast {
-    opacity: 0;
-    transform: translateX(8px) scale(0.96);
-  }
-}
-
-.toast.leaving {
-  opacity: 0;
-  transform: translateX(8px) scale(0.96);
-  pointer-events: none;
-}
-
-
-/* ===== MOBILE / RESPONSIVE ===== */
-
-@media (max-width: 768px) {
-  /* Keep mobile text inputs at 16px to prevent iOS Safari focus zoom. */
-  .input,
-  .sidebar-search-input,
-  .qs-input,
-  .chat-input,
-  .editor-container .cm-editor {
-    font-size: 16px;
-  }
-
-  .sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 100;
-    box-shadow: var(--shadow-lg);
-  }
-
-  .sidebar.collapsed {
-    display: none;
-  }
-
-  .toolbar-btn-label { display: none; }
-  .toolbar-center { display: none; }
-  .mobile-view-toggle { display: flex !important; }
-  .toolbar-name-btn { max-width: none; }
-  .sidebar-close-btn { display: inline-flex; }
-  .sidebar-tabs { padding: 0 var(--space-1); }
-  .sidebar-tab { padding: var(--space-2); }
-
-  .editor-layout {
-    flex-direction: column;
-  }
-  .resizer {
-    display: none !important;
-  }
-
-  /* On mobile, hide the non-active pane */
-  .editor-layout[data-view="split"] .preview-pane {
-    display: none;
-  }
-  .editor-layout[data-view="split"] .editor-pane {
-    flex: 1;
-  }
-
-  .preview-content {
-    padding: var(--space-4);
-  }
-
-  .backlinks-panel-layer {
-    display: none !important;
-  }
-
-  .diff-toolbar {
-    flex-wrap: wrap;
-    padding: var(--space-2) var(--space-3);
-  }
-
-  .diff-toolbar-left,
-  .diff-toolbar-right {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  .diff-toolbar-left {
-    flex-wrap: wrap;
-  }
-
-  .diff-toolbar-actions {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  .diff-toolbar-actions-group-git {
-    flex: 1;
-  }
-
-  .diff-toolbar-actions-group-git .diff-action-btn {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .diff-toolbar-actions-divider {
-    display: none;
-  }
-
-  .diff-mode-btn {
-    min-width: 74px;
-  }
-
-  .diff-split-row {
-    grid-template-columns: 1fr;
-  }
-
-  .diff-split-line:first-child {
-    border-right: none;
-    border-bottom: 1px solid var(--color-divider);
-  }
-
-  .markdown-toolbar {
-    overflow-x: auto;
-    flex-wrap: nowrap;
-    scrollbar-width: thin;
-  }
-
-  .outline-panel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: auto;
-    border-left: none;
-    border-top: 1px solid var(--color-divider);
-    background: oklch(from var(--color-surface) l c h / 0.98);
-    backdrop-filter: blur(10px);
-    box-shadow: var(--shadow-lg);
-    z-index: 6;
-  }
-  .outline-panel.hidden {
-    display: none !important;
-  }
-  #outlineToggle {
-    display: inline-flex !important;
-  }
-  
-  .toolbar {
-    padding: 0 var(--space-2);
-  }
-  .toolbar-room-name {
-    font-size: var(--text-xs);
-    max-width: 120px;
-  }
-
-  .chat-panel {
-    position: fixed;
-    top: calc(var(--toolbar-h) + var(--space-2));
-    right: var(--space-2);
-    left: var(--space-2);
-    width: auto;
-    max-height: calc(100vh - var(--toolbar-h) - var(--space-6));
-  }
-
-  .chat-form {
-    align-items: stretch;
-  }
-
-  .chat-send-btn {
-    padding-inline: var(--space-3);
-  }
-
-  .comment-card {
-    width: min(100vw - 32px, 520px);
-    max-height: min(72vh, 680px);
-  }
-
-  .comment-thread-card-actions {
-    width: 100%;
-    margin-left: 0;
-    justify-content: flex-start;
-  }
-
-  .comment-reaction-picker {
-    left: 0;
-    right: auto;
-    min-width: min(240px, calc(100vw - 64px));
-  }
-}
-
-@media (min-width: 769px) {
-  .mobile-view-toggle { display: none !important; }
-}
-
-
-/* ===== LIGHT MODE OVERRIDES ===== */
-
-[data-theme="light"] .preview-content pre,
-[data-theme="light"] .preview-content pre code,
-[data-theme="light"] .hljs {
-  background: var(--color-surface) !important;
-}
-
-
-/* ===== SCROLLBAR STYLING ===== */
-
-.preview-container,
-.cm-scroller,
-.file-tree,
-.git-panel,
-.diff-scroll,
-.comments-drawer-list,
-.comments-drawer-item-quote,
-.comment-card-quote,
-.comment-card-scroll,
-.markdown-toolbar,
-.comment-markdown pre,
-.comment-markdown .comment-markdown-table,
-.preview-content pre,
-.preview-content .table-wrapper,
-.preview-content .mermaid-frame,
-.preview-content .plantuml-frame,
-.plantuml-maximized-root .plantuml-frame {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-surface-dynamic) transparent;
-}
-
-.preview-container::-webkit-scrollbar,
-.cm-scroller::-webkit-scrollbar,
-.file-tree::-webkit-scrollbar,
-.git-panel::-webkit-scrollbar,
-.diff-scroll::-webkit-scrollbar,
-.comments-drawer-list::-webkit-scrollbar,
-.comments-drawer-item-quote::-webkit-scrollbar,
-.comment-card-quote::-webkit-scrollbar,
-.comment-card-scroll::-webkit-scrollbar,
-.markdown-toolbar::-webkit-scrollbar,
-.comment-markdown pre::-webkit-scrollbar,
-.comment-markdown .comment-markdown-table::-webkit-scrollbar,
-.preview-content pre::-webkit-scrollbar,
-.preview-content .table-wrapper::-webkit-scrollbar,
-.preview-content .mermaid-frame::-webkit-scrollbar,
-.preview-content .plantuml-frame::-webkit-scrollbar,
-.plantuml-maximized-root .plantuml-frame::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.preview-container::-webkit-scrollbar-track,
-.cm-scroller::-webkit-scrollbar-track,
-.file-tree::-webkit-scrollbar-track,
-.git-panel::-webkit-scrollbar-track,
-.diff-scroll::-webkit-scrollbar-track,
-.comments-drawer-list::-webkit-scrollbar-track,
-.comments-drawer-item-quote::-webkit-scrollbar-track,
-.comment-card-quote::-webkit-scrollbar-track,
-.comment-card-scroll::-webkit-scrollbar-track,
-.markdown-toolbar::-webkit-scrollbar-track,
-.comment-markdown pre::-webkit-scrollbar-track,
-.comment-markdown .comment-markdown-table::-webkit-scrollbar-track,
-.preview-content pre::-webkit-scrollbar-track,
-.preview-content .table-wrapper::-webkit-scrollbar-track,
-.preview-content .mermaid-frame::-webkit-scrollbar-track,
-.preview-content .plantuml-frame::-webkit-scrollbar-track,
-.plantuml-maximized-root .plantuml-frame::-webkit-scrollbar-track {
-  background: transparent;
-}
-.preview-container::-webkit-scrollbar-thumb,
-.cm-scroller::-webkit-scrollbar-thumb,
-.file-tree::-webkit-scrollbar-thumb,
-.git-panel::-webkit-scrollbar-thumb,
-.diff-scroll::-webkit-scrollbar-thumb,
-.comments-drawer-list::-webkit-scrollbar-thumb,
-.comments-drawer-item-quote::-webkit-scrollbar-thumb,
-.comment-card-quote::-webkit-scrollbar-thumb,
-.comment-card-scroll::-webkit-scrollbar-thumb,
-.markdown-toolbar::-webkit-scrollbar-thumb,
-.comment-markdown pre::-webkit-scrollbar-thumb,
-.comment-markdown .comment-markdown-table::-webkit-scrollbar-thumb,
-.preview-content pre::-webkit-scrollbar-thumb,
-.preview-content .table-wrapper::-webkit-scrollbar-thumb,
-.preview-content .mermaid-frame::-webkit-scrollbar-thumb,
-.preview-content .plantuml-frame::-webkit-scrollbar-thumb,
-.plantuml-maximized-root .plantuml-frame::-webkit-scrollbar-thumb {
-  background: var(--color-surface-dynamic);
-  border-radius: var(--radius-full);
-}
-.preview-container::-webkit-scrollbar-thumb:hover,
-.cm-scroller::-webkit-scrollbar-thumb:hover,
-.file-tree::-webkit-scrollbar-thumb:hover,
-.git-panel::-webkit-scrollbar-thumb:hover,
-.diff-scroll::-webkit-scrollbar-thumb:hover,
-.comments-drawer-list::-webkit-scrollbar-thumb:hover,
-.comments-drawer-item-quote::-webkit-scrollbar-thumb:hover,
-.comment-card-quote::-webkit-scrollbar-thumb:hover,
-.comment-card-scroll::-webkit-scrollbar-thumb:hover,
-.markdown-toolbar::-webkit-scrollbar-thumb:hover,
-.comment-markdown pre::-webkit-scrollbar-thumb:hover,
-.comment-markdown .comment-markdown-table::-webkit-scrollbar-thumb:hover,
-.preview-content pre::-webkit-scrollbar-thumb:hover,
-.preview-content .table-wrapper::-webkit-scrollbar-thumb:hover,
-.preview-content .mermaid-frame::-webkit-scrollbar-thumb:hover,
-.preview-content .plantuml-frame::-webkit-scrollbar-thumb:hover,
-.plantuml-maximized-root .plantuml-frame::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-faint);
-}
-
-/* ===== WIKI-LINK AUTOCOMPLETE ===== */
-
-.cm-tooltip-autocomplete {
-  background: var(--color-surface) !important;
-  border: 1px solid var(--color-divider) !important;
-  border-radius: var(--radius-md) !important;
-  box-shadow: var(--shadow-md) !important;
-  overflow: hidden;
-  font-family: var(--font-body);
-  font-size: var(--text-sm);
-}
-
-.cm-tooltip-autocomplete > ul {
-  max-height: 240px !important;
-  padding: var(--space-1) 0;
-}
-
-.cm-tooltip-autocomplete > ul > li {
-  padding: var(--space-2) var(--space-3) !important;
-  line-height: 1.4;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.cm-tooltip-autocomplete > ul > li[aria-selected] {
-  background: var(--color-primary) !important;
-  color: var(--color-text-inverse) !important;
-}
-
-.cm-tooltip-autocomplete .cm-completionLabel {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.cm-tooltip-autocomplete .cm-completionDetail {
-  font-size: var(--text-xs);
-  opacity: 0.6;
-  margin-left: auto;
-  white-space: nowrap;
-}
-
-.cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionDetail {
-  opacity: 0.85;
-}
-
-.cm-completionIcon-text::after {
-  content: '📄';
-  font-size: 13px;
-}
-
-/* ===== QUICK SWITCHER (Cmd+K) ===== */
-
-.qs-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  justify-content: center;
-  padding-top: min(20vh, 160px);
-  background: oklch(0.1 0 0 / 0.5);
-  backdrop-filter: blur(4px);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 120ms ease, visibility 120ms ease, display 120ms ease allow-discrete;
-}
-
-.qs-overlay.visible {
-  opacity: 1;
-  visibility: visible;
-}
-
-@starting-style {
-  .qs-overlay.visible {
-    opacity: 0;
-  }
-}
-
-.qs-modal {
-  width: min(560px, calc(100vw - 32px));
-  max-height: min(440px, 60vh);
-  display: flex;
-  flex-direction: column;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  overflow: hidden;
-  transform: translateY(-8px) scale(0.98);
-  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.qs-overlay.visible .qs-modal {
-  transform: translateY(0) scale(1);
-}
-
-@starting-style {
-  .qs-overlay.visible .qs-modal {
-    transform: translateY(-8px) scale(0.98);
-  }
-}
-
-.qs-input-wrap {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  border-bottom: 1px solid var(--color-divider);
-}
-
-.qs-search-icon {
-  flex-shrink: 0;
-  color: var(--color-text-muted);
-}
-
-.qs-input {
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: var(--text-sm);
-  font-family: var(--font-body);
-  color: var(--color-text);
-  line-height: 1.5;
-}
-
-.qs-input::placeholder {
-  color: var(--color-text-faint);
-}
-
-.qs-kbd {
-  flex-shrink: 0;
-  font-family: var(--font-body);
-  font-size: 11px;
-  line-height: 1;
-  padding: 3px 6px;
-  border-radius: var(--radius-sm);
-  background: var(--color-surface-offset);
-  border: 1px solid var(--color-divider);
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.qs-results {
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: var(--space-1) 0;
-}
-
-.qs-result-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  width: 100%;
-  padding: var(--space-2) var(--space-4);
-  border: none;
-  background: transparent;
-  color: var(--color-text);
-  font-size: var(--text-sm);
-  font-family: var(--font-body);
-  text-align: left;
-  cursor: pointer;
-  transition: background 60ms ease;
-}
-
-.qs-result-item:hover,
-.qs-result-item.selected {
-  background: var(--color-surface-offset);
-}
-
-.qs-result-item.selected {
-  background: var(--color-primary-highlight);
-}
-
-[data-theme="dark"] .qs-result-item.selected {
-  background: oklch(from var(--color-primary) l c h / 0.18);
-}
-
-.qs-result-icon {
-  flex-shrink: 0;
-  color: var(--color-text-muted);
-}
-
-.qs-result-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.qs-result-name mark {
-  background: oklch(from var(--color-primary) l c h / 0.2);
-  color: var(--color-primary);
-  border-radius: 2px;
-  padding: 0 1px;
-}
-
-.qs-result-path {
-  flex-shrink: 0;
-  font-size: var(--text-xs);
-  color: var(--color-text-faint);
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.qs-hint {
-  padding: var(--space-4) var(--space-4);
-  text-align: center;
-  font-size: var(--text-xs);
-  color: var(--color-text-muted);
-}
-
-.qs-hint.hidden {
-  display: none;
-}
-
-/* ── Excalidraw Embeds ───────────────────────────────────────────── */
-
-.diagram-preview-shell {
-  margin: var(--space-4) 0;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--color-surface);
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.diagram-preview-placeholder-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  padding: var(--space-4);
-  background: var(--color-surface);
-}
-
-.diagram-preview-placeholder-copy {
-  display: grid;
-  gap: 2px;
-}
-
-.diagram-preview-placeholder-copy strong {
-  font-size: var(--text-sm);
-}
-
-.diagram-preview-placeholder-copy span {
-  color: var(--color-text-muted);
-  font-size: var(--text-xs);
-}
-
-.diagram-preview-placeholder-btn {
-  flex-shrink: 0;
-  appearance: none;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface-2);
-  color: var(--color-text);
-  font-size: var(--text-xs);
-  padding: 4px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.diagram-preview-placeholder-btn:hover {
-  background: var(--color-surface-offset);
-}
-
-.diagram-preview-toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-3);
-  background: var(--color-surface-raised);
-  border-bottom: 1px solid var(--color-border);
-  font-size: var(--text-xs);
-  color: var(--color-text-muted);
-  user-select: none;
-  min-width: 0;
-  flex-wrap: wrap;
-}
-
-.diagram-preview-action-btn {
-  flex-shrink: 0;
-  appearance: none;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface-2);
-  color: var(--color-text);
-  font-size: var(--text-xs);
-  padding: 2px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  box-shadow: inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
-  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
-}
-
-.diagram-preview-action-btn.is-icon-only {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  min-width: 30px;
-  height: 30px;
-  padding: 0;
-}
-
-.diagram-preview-action-btn.is-icon-only svg {
-  width: 14px;
-  height: 14px;
-  display: block;
-}
-
-.diagram-preview-action-btn:hover:not(:disabled) {
-  background: var(--color-surface-offset);
-  border-color: oklch(from var(--color-border) calc(l + 0.08) c h);
-}
-
-.diagram-preview-action-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.diagram-preview-zoom-label {
-  min-width: 52px;
-  text-align: center;
-  color: var(--color-text-muted);
-  font-size: var(--text-xs);
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
-
-.diagram-preview-frame {
-  overflow: auto;
-  padding: var(--space-3);
-  background: transparent;
-  overscroll-behavior: contain;
-  max-height: min(70vh, 720px);
-  min-width: 0;
-  max-width: 100%;
-}
-
-.excalidraw-embed,
-.excalidraw-embed-placeholder {
-  transition: box-shadow 0.18s ease;
-  display: block;
-}
-
-.excalidraw-embed-overlay-root {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.excalidraw-maximized-root {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 171;
-}
-
-body.excalidraw-maximized-open {
-  overflow: hidden;
-}
-
-body.excalidraw-maximized-open::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  background: oklch(0.1 0 0 / 0.42);
-  backdrop-filter: blur(2px);
-  z-index: 170;
-}
-
-body.excalidraw-maximized-open .excalidraw-maximized-root {
-  z-index: 171;
-}
-
-body.excalidraw-maximized-open .resizer {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.excalidraw-embed:hover {
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-[data-theme="dark"] .excalidraw-embed:hover {
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-}
-
-.excalidraw-embed-placeholder.is-hydrated {
-  visibility: hidden;
-}
-
-.excalidraw-embed-header {
-  gap: var(--space-2);
-}
-
-.excalidraw-embed-icon {
-  display: flex;
-  align-items: center;
-  color: var(--color-primary);
-  flex-shrink: 0;
-}
-
-.excalidraw-embed-label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 500;
-}
-
-.excalidraw-embed-iframe {
-  display: block;
-  width: 100%;
-  border: none;
-  background: white;
-  min-height: 200px;
-}
-
-[data-theme="dark"] .excalidraw-embed-iframe {
-  background: #121212;
-}
-
-.excalidraw-embed.is-maximized {
-  position: fixed;
-  inset: var(--space-4);
-  width: auto;
-  margin: 0;
-  z-index: 172;
-  max-width: none;
-  box-sizing: border-box;
-  border-radius: 10px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
-  display: flex;
-  flex-direction: column;
-}
-
-.excalidraw-embed.is-maximized .excalidraw-embed-header {
-  flex-shrink: 0;
-}
-
-.excalidraw-embed.is-maximized .excalidraw-embed-iframe {
-  height: auto !important;
-  min-height: 0;
-  flex: 1;
-}
-
-.excalidraw-embed.is-maximized .excalidraw-embed-resizer {
-  display: none;
-}
-
-[data-theme="dark"] .excalidraw-embed.is-maximized {
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
-}
-
-@media (max-width: 768px) {
-  .excalidraw-embed.is-maximized {
-    inset: var(--space-3);
-    width: auto;
-  }
-
-  .excalidraw-embed.is-maximized .excalidraw-embed-iframe {
-    height: auto !important;
-  }
-}
-
-.excalidraw-embed-resizer {
-  height: 6px;
-  background: var(--color-border);
-  cursor: ns-resize;
-  transition: background 0.18s ease;
-  position: relative;
-}
-
-.excalidraw-embed-resizer::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 32px;
-  height: 3px;
-  border-radius: 2px;
-  background: var(--color-text-faint);
-  opacity: 0;
-  transition: opacity 0.18s ease;
-}
-
-.excalidraw-embed-resizer:hover {
-  background: var(--color-primary);
-}
-
-.excalidraw-embed-resizer:hover::after {
-  opacity: 1;
-}
-
-/* File tree — excalidraw file icon */
-
-.file-tree-file.is-excalidraw .file-tree-icon {
-  color: var(--color-primary);
-}
-
-.file-tree-file.is-mermaid .file-tree-icon {
-  color: oklch(from var(--color-primary) calc(l * 0.96) calc(c * 0.86) 215);
-}
+@import './foundation/tokens.css';
+@import './foundation/themes.css';
+@import './foundation/utilities.css';
+@import './primitives/controls.css';
+@import './layout/overlays.css';
+@import './layout/sidebar.css';
+@import './layout/editor-page.css';
+@import './layout/shell.css';
+@import './components/navigation.css';
+@import './components/actions.css';
+@import './components/surfaces.css';
+@import './components/states.css';
+@import './components/scrollbars.css';
+@import './features/git.css';
+@import './features/diff.css';
+@import './features/collaboration-ui.css';
+@import './features/preview-content.css';
+@import './features/comments.css';
+@import './features/preview-sidebars.css';
+@import './layout/view-modes.css';
+@import './components/feedback.css';
+@import './layout/responsive.css';
+@import './overrides/vendor.css';
+@import './features/quick-switcher.css';
+@import './features/diagram-preview.css';