collabmd 0.1.18

package/src/client/styles/style.css

@@ -0,0 +1,4245 @@
+/* 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 {
+  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);
+}
+
+.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-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-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;
+}
+
+.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;
+  overflow-x: auto;
+  overflow-y: hidden;
+  word-break: normal;
+  text-wrap: nowrap;
+  scrollbar-width: thin;
+  padding-bottom: calc(var(--space-2) + 2px);
+}
+
+.comments-drawer-item-footer {
+  font-size: 11px;
+  color: var(--color-text-muted);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.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%, 360px);
+  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);
+  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-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;
+  overflow-x: auto;
+  overflow-y: hidden;
+  word-break: normal;
+  text-wrap: nowrap;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  line-height: 1.65;
+  padding-bottom: calc(var(--space-2) + 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-2);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-divider);
+}
+
+.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;
+  gap: var(--space-1);
+  margin-left: auto;
+}
+
+.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;
+}
+
+@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 {
+  border-top: 1px solid var(--color-divider);
+  margin-top: var(--space-6);
+  padding: 0 var(--space-4);
+}
+.backlinks-panel.hidden {
+  display: none;
+}
+.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-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;
+}
+.backlinks-count {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--color-primary);
+  background: oklch(from var(--color-primary) l c h / 0.12);
+  border-radius: var(--radius-full);
+  padding: 1px 8px;
+  min-width: 0;
+}
+.backlinks-count:empty {
+  display: none;
+}
+.backlinks-body {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 200ms ease;
+}
+.backlinks-panel.expanded .backlinks-body {
+  max-height: 600px;
+  overflow-y: auto;
+}
+.backlinks-list {
+  padding-bottom: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.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);
+}
+.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);
+}
+
+.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-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-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;
+}
+.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);
+  }
+
+  .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);
+  }
+}
+
+@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,
+.comment-card-quote,
+.markdown-toolbar,
+.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,
+.comment-card-quote::-webkit-scrollbar,
+.markdown-toolbar::-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,
+.comment-card-quote::-webkit-scrollbar-track,
+.markdown-toolbar::-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,
+.comment-card-quote::-webkit-scrollbar-thumb,
+.markdown-toolbar::-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,
+.comment-card-quote::-webkit-scrollbar-thumb:hover,
+.markdown-toolbar::-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);
+}