collabmd 0.1.18 → 0.1.20

package/src/client/styles/style.css

@@ -2265,6 +2265,10 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
 
 /* Preview body (contains preview + outline side by side) */
 .preview-body {
+  --preview-floating-sidebar-gap: var(--space-3);
+  --preview-floating-comments-width: min(300px, 34vw);
+  --preview-floating-outline-width: 220px;
+  --preview-content-max-width: 720px;
   display: flex;
   flex: 1;
   overflow: hidden;
@@ -2298,6 +2302,12 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   color: var(--color-text-muted);
 }
 
+@media (min-width: 769px) {
+  .preview-content {
+    padding-bottom: calc(var(--space-12) + 96px);
+  }
+}
+
 .preview-content.is-excalidraw-file-preview {
   display: flex;
   width: 100%;
@@ -2310,6 +2320,17 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   max-width: none;
 }
 
+.preview-content.is-image-file-preview {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+  padding: var(--space-4);
+  position: relative;
+  box-sizing: border-box;
+  max-width: none;
+}
+
 .preview-content.is-plantuml-file-preview {
   width: 100%;
   min-height: 100%;
@@ -2337,6 +2358,31 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   min-height: 100%;
 }
 
+.preview-content.is-image-file-preview [data-preview-render-host="true"] {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 100%;
+}
+
+.image-file-preview-shell {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-file-preview-image {
+  max-width: min(100%, 1200px);
+  max-height: calc(100vh - 180px);
+  object-fit: contain;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  background: var(--color-surface);
+}
+
 .preview-content.is-mermaid-file-preview .mermaid-shell {
   margin: 0;
   min-height: 100%;
@@ -2590,6 +2636,163 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   height: auto;
   border-radius: var(--radius-md);
   margin: var(--space-4) 0;
+  cursor: zoom-in;
+}
+
+.image-lightbox-root {
+  position: fixed;
+  inset: 0;
+  z-index: 220;
+  display: grid;
+  place-items: center;
+  pointer-events: auto;
+}
+
+.image-lightbox-root[hidden] {
+  display: none !important;
+}
+
+.image-lightbox-backdrop {
+  position: absolute;
+  inset: 0;
+  border: none;
+  background: oklch(0.08 0.01 260 / 0.82);
+  backdrop-filter: blur(10px);
+  cursor: zoom-out;
+}
+
+.image-lightbox-shell {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.image-lightbox-toolbar {
+  position: absolute;
+  top: var(--space-5);
+  left: var(--space-5);
+  right: var(--space-5);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  pointer-events: none;
+}
+
+.image-lightbox-title {
+  min-width: 0;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: white;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: oklch(0.18 0.02 260 / 0.68);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 16px 40px oklch(0 0 0 / 0.24);
+  pointer-events: auto;
+}
+
+.image-lightbox-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  pointer-events: auto;
+}
+
+.image-lightbox-btn {
+  min-width: 0;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 999px;
+  background: oklch(0.18 0.02 260 / 0.68);
+  color: white;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 16px 40px oklch(0 0 0 / 0.24);
+  transition: background 0.18s ease, transform 0.18s ease;
+}
+
+.image-lightbox-btn:hover:not(:disabled) {
+  background: oklch(0.24 0.02 260 / 0.82);
+}
+
+.image-lightbox-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.image-lightbox-zoom-label {
+  min-width: 58px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: oklch(0.18 0.02 260 / 0.68);
+  color: white;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 16px 40px oklch(0 0 0 / 0.24);
+}
+
+.image-lightbox-viewport {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+}
+
+.image-lightbox-viewport.is-dragging .image-lightbox-image {
+  cursor: grabbing !important;
+}
+
+.image-lightbox-image {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  max-width: calc(100vw - (var(--space-8) * 2));
+  max-height: calc(100vh - (var(--space-8) * 2));
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  transform-origin: center center;
+  will-change: transform;
+  box-shadow: 0 28px 80px oklch(0 0 0 / 0.28);
+}
+
+body.image-lightbox-open {
+  overflow: hidden;
+}
+
+@media (max-width: 768px) {
+  .image-lightbox-toolbar {
+    top: var(--space-3);
+    left: var(--space-3);
+    right: var(--space-3);
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .image-lightbox-controls {
+    justify-content: flex-start;
+  }
+
+  .image-lightbox-btn {
+    flex: 0 0 auto;
+  }
+
+  .image-lightbox-image {
+    max-width: calc(100vw - (var(--space-4) * 2));
+    max-height: calc(100vh - (var(--space-4) * 2));
+  }
 }
 
 .preview-content .video-embed-shell {
@@ -2923,13 +3126,29 @@ body.plantuml-maximized-open::before {
   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;
+  white-space: pre-wrap;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  max-height: 9.5rem;
   scrollbar-width: thin;
-  padding-bottom: calc(var(--space-2) + 2px);
+  padding-bottom: calc(var(--space-3) + 2px);
+}
+
+.comments-drawer-item-preview {
+  position: relative;
+  max-height: 7.8rem;
+  overflow: hidden;
+  color: var(--color-text-muted);
+}
+
+.comments-drawer-item-preview:after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 2.5rem;
+  background: linear-gradient(180deg, oklch(0 0 0 / 0), color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%));
+  pointer-events: none;
 }
 
 .comments-drawer-item-footer {
@@ -2937,6 +3156,12 @@ body.plantuml-maximized-open::before {
   color: var(--color-text-muted);
   font-weight: 600;
   letter-spacing: 0.01em;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.comments-drawer-item-updated {
+  color: var(--color-text-faint);
 }
 
 .comment-editor-layer,
@@ -3029,7 +3254,7 @@ body.plantuml-maximized-open::before {
 }
 
 .comment-card {
-  width: min(100%, 360px);
+  width: min(100%, 520px);
   border-radius: 18px;
   border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-comment) 18%);
   background: color-mix(in srgb, var(--color-surface) 94%, var(--color-comment) 6%);
@@ -3038,6 +3263,8 @@ body.plantuml-maximized-open::before {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
+  max-height: min(78vh, 720px);
+  overflow: hidden;
   animation: comment-card-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -3056,6 +3283,19 @@ body.plantuml-maximized-open::before {
   justify-content: space-between;
 }
 
+.comment-card-header {
+  flex-shrink: 0;
+}
+
+.comment-card-scroll {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-height: 0;
+  overflow: auto;
+  padding-right: 2px;
+}
+
 .comment-card-title {
   font-size: 15px;
   font-weight: 700;
@@ -3110,15 +3350,15 @@ body.plantuml-maximized-open::before {
 }
 
 .comment-card-quote {
-  white-space: pre;
-  overflow-x: auto;
-  overflow-y: hidden;
-  word-break: normal;
-  text-wrap: nowrap;
+  white-space: pre-wrap;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   font-family: var(--font-mono);
   font-size: 11.5px;
   line-height: 1.65;
-  padding-bottom: calc(var(--space-2) + 2px);
+  max-height: 11rem;
+  padding-bottom: calc(var(--space-3) + 2px);
   scrollbar-width: thin;
 }
 
@@ -3137,11 +3377,24 @@ body.plantuml-maximized-open::before {
 .comment-thread-card {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  gap: var(--space-3);
   padding-top: var(--space-3);
   border-top: 1px solid var(--color-divider);
 }
 
+.comment-thread-card-header {
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.comment-thread-card-heading {
+  display: flex;
+  flex: 1 1 160px;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2);
+  min-width: 0;
+}
+
 .comment-thread-card-author,
 .comment-message-card-author {
   font-size: 12px;
@@ -3156,8 +3409,10 @@ body.plantuml-maximized-open::before {
 
 .comment-thread-card-actions {
   display: inline-flex;
+  flex-wrap: wrap;
   gap: var(--space-1);
   margin-left: auto;
+  justify-content: flex-end;
 }
 
 .comment-message-card {
@@ -3170,6 +3425,246 @@ body.plantuml-maximized-open::before {
 .comment-message-card-body {
   margin-top: var(--space-1);
   font-size: 12px;
+  line-height: 1.65;
+}
+
+.comment-reaction-bar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-top: var(--space-2);
+}
+
+.comment-reaction-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.comment-reaction-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.comment-reaction-chip,
+.comment-reaction-more-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 30px;
+  padding: 4px 10px;
+  border-radius: var(--radius-full);
+  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
+  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-comment) 10%);
+  color: var(--color-text-muted);
+  font-size: 11px;
+  font-weight: 600;
+  transition: background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive), transform 140ms ease;
+}
+
+.comment-reaction-chip:hover,
+.comment-reaction-more-trigger:hover {
+  color: var(--color-text);
+  border-color: oklch(from var(--color-comment) l c h / 0.22);
+  background: color-mix(in srgb, var(--color-surface-offset) 76%, var(--color-comment) 24%);
+}
+
+.comment-reaction-chip.is-active {
+  color: var(--color-comment);
+  border-color: oklch(from var(--color-comment) l c h / 0.28);
+  background: color-mix(in srgb, var(--color-surface-offset) 64%, var(--color-comment) 36%);
+}
+
+.comment-reaction-chip-emoji,
+.comment-reaction-chip-count {
+  line-height: 1;
+}
+
+.comment-reaction-quick-add,
+.comment-reaction-picker-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  min-height: 34px;
+  padding: 0;
+  border-radius: var(--radius-md);
+  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
+  background: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
+  font-size: 18px;
+  transition: background var(--transition-interactive), border-color var(--transition-interactive), transform 140ms ease;
+}
+
+.comment-reaction-quick-add:hover,
+.comment-reaction-picker-btn:hover {
+  border-color: oklch(from var(--color-comment) l c h / 0.24);
+  background: color-mix(in srgb, var(--color-surface-offset) 78%, var(--color-comment) 22%);
+  transform: translateY(-1px);
+}
+
+.comment-reaction-picker-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.comment-reaction-picker {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 2;
+  min-width: 220px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-comment) 18%);
+  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
+  box-shadow: var(--shadow-lg);
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+.comment-reaction-picker.is-upward {
+  top: auto;
+  bottom: calc(100% + 8px);
+}
+
+.comment-reaction-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: var(--space-2);
+}
+
+.comment-markdown {
+  color: var(--color-text);
+  font-size: 12px;
+  line-height: 1.65;
+}
+
+.comment-markdown > :first-child {
+  margin-top: 0;
+}
+
+.comment-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.comment-markdown p,
+.comment-markdown ul,
+.comment-markdown ol,
+.comment-markdown blockquote,
+.comment-markdown pre,
+.comment-markdown .comment-markdown-table,
+.comment-markdown table {
+  max-width: none;
+}
+
+.comment-markdown p,
+.comment-markdown ul,
+.comment-markdown ol,
+.comment-markdown blockquote,
+.comment-markdown pre,
+.comment-markdown .comment-markdown-table {
+  margin: var(--space-2) 0;
+}
+
+.comment-markdown li + li {
+  margin-top: 4px;
+}
+
+.comment-markdown ul,
+.comment-markdown ol {
+  padding-left: var(--space-5);
+}
+
+.comment-markdown a {
+  color: var(--color-primary);
+  overflow-wrap: anywhere;
+  text-decoration: underline;
+}
+
+.comment-markdown blockquote {
+  padding: var(--space-2) var(--space-3);
+  border-left: 3px solid oklch(from var(--color-comment) l c h / 0.45);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  background: color-mix(in srgb, var(--color-surface-offset) 84%, var(--color-comment) 16%);
+  color: var(--color-text-muted);
+}
+
+.comment-markdown code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: color-mix(in srgb, var(--color-surface-offset) 88%, var(--color-comment) 12%);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  color: var(--color-primary);
+}
+
+.comment-markdown pre {
+  border-radius: var(--radius-lg);
+  overflow: auto;
+  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
+  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
+  max-width: 100%;
+}
+
+.comment-markdown pre code {
+  display: block;
+  padding: var(--space-3);
+  background: none;
+  color: var(--color-text);
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre;
+  width: max-content;
+  min-width: 100%;
+}
+
+.comment-markdown .comment-markdown-table {
+  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
+  border-radius: var(--radius-md);
+  overflow: auto;
+}
+
+.comment-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.comment-markdown th,
+.comment-markdown td {
+  padding: var(--space-2) var(--space-3);
+  text-align: left;
+  border-bottom: 1px solid var(--color-divider);
+  font-size: 12px;
+}
+
+.comment-markdown th {
+  background: color-mix(in srgb, var(--color-surface-offset) 90%, var(--color-comment) 10%);
+}
+
+.comment-markdown-preview > :not(pre):not(blockquote):not(.comment-markdown-table) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+.comment-markdown-preview pre code {
+  max-height: 6.6rem;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.comment-markdown-preview .comment-markdown-table {
+  display: none;
 }
 
 @keyframes comment-card-in {
@@ -3185,14 +3680,45 @@ body.plantuml-maximized-open::before {
 
 /* ===== BACKLINKS PANEL ===== */
 
+.backlinks-panel.hidden,
+.backlinks-panel-layer.hidden {
+  display: none;
+}
 .backlinks-panel {
+  min-width: 0;
+}
+.backlinks-panel-layer {
+  position: absolute;
+  left: max(
+    var(--space-4),
+    calc((100% - min(var(--preview-content-max-width), 100%)) / 2)
+  );
+  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
+  width: min(320px, calc(min(var(--preview-content-max-width), 100%) - var(--space-8)));
+  z-index: 14;
+  pointer-events: none;
+}
+.backlinks-panel-dock {
+  display: flex;
+  flex-direction: column-reverse;
+  border: 1px solid var(--color-divider);
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-offset) 16%);
+  box-shadow: 0 14px 34px oklch(0 0 0 / 0.18);
+  backdrop-filter: blur(16px);
+  overflow: hidden;
+  pointer-events: auto;
+  transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
+}
+.backlinks-panel-dock:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 18px 40px oklch(0 0 0 / 0.2);
+}
+.backlinks-panel-inline {
   border-top: 1px solid var(--color-divider);
   margin-top: var(--space-6);
   padding: 0 var(--space-4);
 }
-.backlinks-panel.hidden {
-  display: none;
-}
 .backlinks-header {
   display: flex;
   align-items: center;
@@ -3208,6 +3734,10 @@ body.plantuml-maximized-open::before {
 .backlinks-header:hover {
   color: var(--color-text);
 }
+.backlinks-panel-dock .backlinks-header {
+  padding: 11px 14px;
+  background: color-mix(in srgb, var(--color-surface-offset) 76%, var(--color-bg) 24%);
+}
 .backlinks-header-empty {
   cursor: default;
   opacity: 0.5;
@@ -3224,15 +3754,20 @@ body.plantuml-maximized-open::before {
 }
 .backlinks-toggle {
   flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .backlinks-count {
   font-size: var(--text-xs);
   font-weight: 600;
   color: var(--color-primary);
-  background: oklch(from var(--color-primary) l c h / 0.12);
+  background: oklch(from var(--color-primary) l c h / 0.14);
   border-radius: var(--radius-full);
-  padding: 1px 8px;
-  min-width: 0;
+  padding: 1px 7px;
+  min-width: 22px;
+  text-align: center;
 }
 .backlinks-count:empty {
   display: none;
@@ -3242,16 +3777,31 @@ body.plantuml-maximized-open::before {
   max-height: 0;
   transition: max-height 200ms ease;
 }
-.backlinks-panel.expanded .backlinks-body {
+.backlinks-panel-inline.expanded .backlinks-body {
   max-height: 600px;
   overflow-y: auto;
 }
+.backlinks-panel-dock .backlinks-body {
+  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-surface-offset) 6%);
+}
+.backlinks-panel-dock.expanded .backlinks-body {
+  max-height: min(44vh, 400px);
+  overflow-y: auto;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 78%, var(--color-primary) 22%);
+}
+.backlinks-panel-dock.expanded {
+  border-color: color-mix(in srgb, var(--color-divider) 72%, var(--color-primary) 28%);
+  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-offset) 10%);
+}
 .backlinks-list {
   padding-bottom: var(--space-4);
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 }
+.backlinks-panel-dock .backlinks-list {
+  padding: 10px;
+}
 .backlink-item {
   display: block;
   width: 100%;
@@ -3263,6 +3813,10 @@ body.plantuml-maximized-open::before {
   cursor: pointer;
   transition: border-color var(--transition-interactive), background var(--transition-interactive);
 }
+.backlinks-panel-dock .backlink-item {
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-offset) 12%);
+}
 .backlink-item:hover {
   border-color: var(--color-primary);
   background: oklch(from var(--color-primary) l c h / 0.04);
@@ -3304,6 +3858,12 @@ body.plantuml-maximized-open::before {
   color: var(--color-text-faint);
 }
 
+@media (min-width: 769px) {
+  .backlinks-panel-inline {
+    display: none !important;
+  }
+}
+
 .outline-panel {
   width: 220px;
   flex-shrink: 0;
@@ -3404,12 +3964,18 @@ body.plantuml-maximized-open::before {
 .editor-layout[data-view="preview"] .preview-pane {
   flex: 1;
 }
+.editor-layout[data-view="preview"] .preview-body {
+  --preview-content-max-width: 1080px;
+}
 .editor-layout[data-view="preview"] .preview-content {
   max-width: 1080px;
 }
 .editor-layout[data-view="preview"] .preview-content.is-excalidraw-file-preview {
   max-width: none;
 }
+.editor-layout[data-view="preview"] .preview-content.is-image-file-preview {
+  max-width: none;
+}
 .editor-layout[data-view="preview"] .preview-content.is-mermaid-file-preview {
   max-width: none;
 }
@@ -3435,6 +4001,55 @@ body.plantuml-maximized-open::before {
 .editor-layout[data-view="preview"] .preview-content p:has(> .plantuml-shell:only-child) {
   max-width: none;
 }
+@media (min-width: 769px) {
+  .preview-body > .comments-drawer,
+  .preview-body > .outline-panel {
+    position: absolute;
+    top: var(--preview-floating-sidebar-gap);
+    right: var(--preview-floating-sidebar-gap);
+    bottom: var(--preview-floating-sidebar-gap);
+    z-index: 20;
+    overflow: hidden;
+    border: 1px solid var(--color-divider);
+    border-radius: calc(var(--radius-lg) + 2px);
+    box-shadow: var(--shadow-lg);
+    backdrop-filter: blur(14px);
+  }
+
+  .preview-body > .comments-drawer {
+    width: var(--preview-floating-comments-width);
+    min-width: 240px;
+    border-left: 1px solid var(--color-divider);
+  }
+
+  .preview-body > .outline-panel {
+    width: var(--preview-floating-outline-width);
+    border-left: 1px solid var(--color-divider);
+  }
+
+  .preview-body > .comments-drawer.hidden,
+  .preview-body > .outline-panel.hidden {
+    display: flex !important;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(12px);
+    visibility: hidden;
+  }
+
+  .preview-body > .comments-drawer:not(.hidden),
+  .preview-body > .outline-panel:not(.hidden) {
+    opacity: 1;
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  .preview-body:has(> .outline-panel:not(.hidden)) > .comments-drawer:not(.hidden) {
+    right: calc(
+      var(--preview-floating-sidebar-gap) * 2
+      + var(--preview-floating-outline-width)
+    );
+  }
+}
 .editor-layout[data-view="editor"] .editor-pane {
   flex: 1;
 }
@@ -3534,6 +4149,10 @@ body.plantuml-maximized-open::before {
     padding: var(--space-4);
   }
 
+  .backlinks-panel-layer {
+    display: none !important;
+  }
+
   .diff-toolbar {
     flex-wrap: wrap;
     padding: var(--space-2) var(--space-3);
@@ -3631,6 +4250,23 @@ body.plantuml-maximized-open::before {
   .chat-send-btn {
     padding-inline: var(--space-3);
   }
+
+  .comment-card {
+    width: min(100vw - 32px, 520px);
+    max-height: min(72vh, 680px);
+  }
+
+  .comment-thread-card-actions {
+    width: 100%;
+    margin-left: 0;
+    justify-content: flex-start;
+  }
+
+  .comment-reaction-picker {
+    left: 0;
+    right: auto;
+    min-width: min(240px, calc(100vw - 64px));
+  }
 }
 
 @media (min-width: 769px) {
@@ -3655,8 +4291,12 @@ body.plantuml-maximized-open::before {
 .git-panel,
 .diff-scroll,
 .comments-drawer-list,
+.comments-drawer-item-quote,
 .comment-card-quote,
+.comment-card-scroll,
 .markdown-toolbar,
+.comment-markdown pre,
+.comment-markdown .comment-markdown-table,
 .preview-content pre,
 .preview-content .table-wrapper,
 .preview-content .mermaid-frame,
@@ -3672,8 +4312,12 @@ body.plantuml-maximized-open::before {
 .git-panel::-webkit-scrollbar,
 .diff-scroll::-webkit-scrollbar,
 .comments-drawer-list::-webkit-scrollbar,
+.comments-drawer-item-quote::-webkit-scrollbar,
 .comment-card-quote::-webkit-scrollbar,
+.comment-card-scroll::-webkit-scrollbar,
 .markdown-toolbar::-webkit-scrollbar,
+.comment-markdown pre::-webkit-scrollbar,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar,
 .preview-content pre::-webkit-scrollbar,
 .preview-content .table-wrapper::-webkit-scrollbar,
 .preview-content .mermaid-frame::-webkit-scrollbar,
@@ -3688,8 +4332,12 @@ body.plantuml-maximized-open::before {
 .git-panel::-webkit-scrollbar-track,
 .diff-scroll::-webkit-scrollbar-track,
 .comments-drawer-list::-webkit-scrollbar-track,
+.comments-drawer-item-quote::-webkit-scrollbar-track,
 .comment-card-quote::-webkit-scrollbar-track,
+.comment-card-scroll::-webkit-scrollbar-track,
 .markdown-toolbar::-webkit-scrollbar-track,
+.comment-markdown pre::-webkit-scrollbar-track,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar-track,
 .preview-content pre::-webkit-scrollbar-track,
 .preview-content .table-wrapper::-webkit-scrollbar-track,
 .preview-content .mermaid-frame::-webkit-scrollbar-track,
@@ -3703,8 +4351,12 @@ body.plantuml-maximized-open::before {
 .git-panel::-webkit-scrollbar-thumb,
 .diff-scroll::-webkit-scrollbar-thumb,
 .comments-drawer-list::-webkit-scrollbar-thumb,
+.comments-drawer-item-quote::-webkit-scrollbar-thumb,
 .comment-card-quote::-webkit-scrollbar-thumb,
+.comment-card-scroll::-webkit-scrollbar-thumb,
 .markdown-toolbar::-webkit-scrollbar-thumb,
+.comment-markdown pre::-webkit-scrollbar-thumb,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar-thumb,
 .preview-content pre::-webkit-scrollbar-thumb,
 .preview-content .table-wrapper::-webkit-scrollbar-thumb,
 .preview-content .mermaid-frame::-webkit-scrollbar-thumb,
@@ -3719,8 +4371,12 @@ body.plantuml-maximized-open::before {
 .git-panel::-webkit-scrollbar-thumb:hover,
 .diff-scroll::-webkit-scrollbar-thumb:hover,
 .comments-drawer-list::-webkit-scrollbar-thumb:hover,
+.comments-drawer-item-quote::-webkit-scrollbar-thumb:hover,
 .comment-card-quote::-webkit-scrollbar-thumb:hover,
+.comment-card-scroll::-webkit-scrollbar-thumb:hover,
 .markdown-toolbar::-webkit-scrollbar-thumb:hover,
+.comment-markdown pre::-webkit-scrollbar-thumb:hover,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar-thumb:hover,
 .preview-content pre::-webkit-scrollbar-thumb:hover,
 .preview-content .table-wrapper::-webkit-scrollbar-thumb:hover,
 .preview-content .mermaid-frame::-webkit-scrollbar-thumb:hover,