@blendviewer/vision-scope 0.1.0

package/dist/styles/document.css

@@ -0,0 +1,1158 @@
+/* Document Renderer Styles */
+
+.vision-scope-document {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: #eeeeee;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+}
+
+/* PDF viewport fills the shell without propagating intrinsic height to VisionScope chrome */
+.vision-scope-viewport.vision-scope-document.vision-scope-pdf {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.vision-scope-viewport.vision-scope-document.vision-scope-pdf > .pdf-viewer-layout {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* PDF Viewer Layout */
+.pdf-viewer-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+  flex: 1 1 auto;
+  background: #eeeeee;
+}
+
+/* Custom Scrollbar Styles (Ultra-thin & Auto-hide) */
+.pdf-sidebar::-webkit-scrollbar,
+.pdf-main-viewer::-webkit-scrollbar {
+  width: 3px !important;
+  height: 3px !important;
+}
+
+.pdf-sidebar::-webkit-scrollbar-track,
+.pdf-main-viewer::-webkit-scrollbar-track {
+  background: transparent !important;
+}
+
+.pdf-sidebar::-webkit-scrollbar-thumb,
+.pdf-main-viewer::-webkit-scrollbar-thumb {
+  background: transparent !important;
+  border-radius: 2px;
+  transition: background 0.3s ease;
+}
+
+/* Show scrollbar on hover */
+.pdf-sidebar:hover::-webkit-scrollbar-thumb,
+.pdf-main-viewer:hover::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.25) !important;
+}
+
+.pdf-sidebar::-webkit-scrollbar-thumb:hover,
+.pdf-main-viewer::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.4) !important;
+}
+
+/* Firefox Scrollbar */
+.pdf-sidebar,
+.pdf-main-viewer {
+  scrollbar-width: thin !important;
+  scrollbar-color: transparent transparent !important;
+}
+
+.pdf-sidebar:hover,
+.pdf-main-viewer:hover {
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent !important;
+}
+
+/* Custom Toolbar — 与主内容区 .pdf-main-viewer 背景一致，无分割线与投影 */
+.pdf-custom-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 16px;
+  background: #eeeeee;
+  border-bottom: none;
+  flex-shrink: 0;
+  box-shadow: none;
+}
+
+.pdf-toolbar-left,
+.pdf-toolbar-center,
+.pdf-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.pdf-toolbar-left {
+  justify-content: flex-start;
+}
+
+.pdf-toolbar-center {
+  justify-content: center;
+}
+
+.pdf-toolbar-right {
+  justify-content: flex-end;
+}
+
+/* Icon-only — match VisionScope .vsui-btn (no white tile; hover = soft gray) */
+button.pdf-toolbar-btn {
+  appearance: none;
+  -webkit-appearance: none;
+  font: inherit;
+  line-height: 1;
+}
+
+button.pdf-toolbar-btn::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.pdf-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: rgba(26, 26, 26, 0.88);
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    opacity 0.15s ease,
+    background-color 0.15s ease,
+    border-radius 0.15s ease;
+  box-shadow: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.pdf-toolbar-btn:focus {
+  outline: none;
+}
+
+.pdf-toolbar-btn:focus-visible {
+  outline: 2px solid rgba(0, 0, 0, 0.2);
+  outline-offset: 2px;
+}
+
+.pdf-toolbar-btn:hover {
+  color: #111;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 6px;
+}
+
+.pdf-toolbar-btn:active {
+  color: #111;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 6px;
+}
+
+.pdf-toolbar-btn svg {
+  display: block;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
+}
+
+.pdf-page-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #1a1a1a;
+  min-width: 72px;
+  justify-content: center;
+}
+
+.pdf-zoom-level {
+  font-size: 13px;
+  color: #1a1a1a;
+  font-weight: 500;
+  min-width: 50px;
+  text-align: center;
+}
+
+/* Main Content */
+.pdf-main-content {
+  flex: 1 1 0;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+}
+
+/* Sidebar rail: equal top/bottom inset to the main row (floating card); keep modest gap */
+.pdf-sidebar-outer {
+  flex-shrink: 0;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 228px;
+  padding: 16px 12px 16px 16px;
+  overflow: hidden;
+  transition:
+    width 0.22s ease,
+    padding 0.22s ease,
+    opacity 0.2s ease;
+}
+
+.pdf-viewer-layout.sidebar-collapsed .pdf-sidebar-outer {
+  width: 0;
+  padding-left: 0;
+  padding-right: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Sidebar (Thumbnails) — white card with shadow inside the rail */
+.pdf-sidebar {
+  width: 200px;
+  flex: 1;
+  min-height: 0;
+  background: #ffffff;
+  border-radius: 10px;
+  box-shadow:
+    0 2px 12px rgba(0, 0, 0, 0.08),
+    0 1px 3px rgba(0, 0, 0, 0.06);
+  border: none;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.pdf-thumbnails-title {
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.pdf-thumbnail {
+  padding: 12px;
+  cursor: pointer;
+  border-bottom: 1px solid #f3f4f6;
+  transition: background 0.2s;
+  position: relative;
+}
+
+.pdf-thumbnail:hover {
+  background: #f3f4f6;
+}
+
+.pdf-thumbnail.active {
+  background: #e0f2fe;
+  border-left: 4px solid #3b82f6;
+}
+
+.pdf-thumbnail canvas {
+  width: 100%;
+  height: auto;
+  display: block;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.pdf-thumbnail-label {
+  text-align: center;
+  margin-top: 8px;
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+/* Main Viewer — only inner vertical scroll; no outer horizontal/vertical bars on this panel */
+.pdf-main-viewer {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 24px;
+  background: #eeeeee;
+}
+
+/* PDF main column — same flex boundary pattern as ppt-main-viewer-wrap */
+.vision-scope-pdf .pdf-main-viewer-wrap {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.vision-scope-pdf .pdf-main-viewer-wrap > .pdf-main-viewer {
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+/* Continuous scroll: scroll stays inside the wrap; outer shell never grows with page stack */
+.vision-scope-pdf .pdf-main-viewer.continuous-scroll {
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.pdf-main-viewer-scroll {
+  flex: 1 1 0;
+  min-height: 0;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 24px;
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  overscroll-behavior-y: contain;
+}
+
+.pdf-main-viewer.continuous-scroll .pdf-main-viewer-scroll::-webkit-scrollbar,
+.pdf-main-viewer-scroll::-webkit-scrollbar {
+  width: 3px !important;
+  height: 3px !important;
+}
+
+.pdf-main-viewer.continuous-scroll .pdf-main-viewer-scroll::-webkit-scrollbar-thumb,
+.pdf-main-viewer-scroll::-webkit-scrollbar-thumb {
+  background: transparent !important;
+  border-radius: 2px;
+  transition: background 0.3s ease;
+}
+
+.pdf-main-viewer.continuous-scroll .pdf-main-viewer-scroll:hover::-webkit-scrollbar-thumb,
+.pdf-main-viewer-scroll:hover::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.25) !important;
+}
+
+.pdf-main-viewer.continuous-scroll .pdf-main-viewer-scroll,
+.pdf-main-viewer-scroll {
+  scrollbar-width: thin !important;
+  scrollbar-color: transparent transparent !important;
+}
+
+.pdf-main-viewer.continuous-scroll .pdf-main-viewer-scroll:hover,
+.pdf-main-viewer-scroll:hover {
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent !important;
+}
+
+.pdf-pages-scroll {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.pdf-page-slot {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.pdf-page-placeholder {
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.55);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+}
+
+.pdf-main-canvas {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  background: white;
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* PDF Text Layer for text selection */
+.pdf-page-container {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+/* Reading Mode Styles */
+.pdf-main-viewer.reading-mode {
+  background: #2a2a2a;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pdf-double-page-container {
+  display: flex;
+  gap: 40px;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.pdf-page-left,
+.pdf-page-right {
+  flex-shrink: 0;
+}
+
+.pdf-custom-toolbar.hidden,
+.pdf-sidebar-outer.hidden {
+  display: none !important;
+}
+
+.pdf-toolbar-btn.active {
+  color: #111;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 6px;
+}
+
+.pdf-text-layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  opacity: 1;
+  line-height: 1;
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  text-size-adjust: none;
+  forced-color-adjust: none;
+}
+
+.pdf-text-layer span {
+  color: transparent;
+  position: absolute;
+  white-space: pre;
+  cursor: text;
+  transform-origin: 0% 0%;
+}
+
+.pdf-text-layer span::selection {
+  background: rgba(0, 100, 255, 0.3);
+}
+
+/* Text Styles */
+.document-text {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 48px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  font-family: 'Monaco', 'Menlo', 'Courier New', 'Consolas', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #1a1a1a;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Plain text + Markdown — scroll inside the document viewport (PDF uses .pdf-main-viewer) */
+.vision-scope-document > .document-markdown,
+.vision-scope-document > .document-text {
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.vision-scope-document > .document-markdown::-webkit-scrollbar,
+.vision-scope-document > .document-text::-webkit-scrollbar {
+  width: 6px;
+}
+
+.vision-scope-document > .document-markdown::-webkit-scrollbar-track,
+.vision-scope-document > .document-text::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.vision-scope-document > .document-markdown::-webkit-scrollbar-thumb,
+.vision-scope-document > .document-text::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.vision-scope-document > .document-markdown::-webkit-scrollbar-thumb:hover,
+.vision-scope-document > .document-text::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.35);
+}
+
+/* Markdown Styles */
+.document-markdown {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 48px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  font-size: 16px;
+  line-height: 1.7;
+  color: #1a1a1a;
+}
+
+.document-markdown h1,
+.document-markdown h2,
+.document-markdown h3,
+.document-markdown h4,
+.document-markdown h5,
+.document-markdown h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+  color: #1a1a1a;
+}
+
+.document-markdown h1 {
+  font-size: 32px;
+  border-bottom: 1px solid #eaeaea;
+  padding-bottom: 8px;
+}
+
+.document-markdown h2 {
+  font-size: 24px;
+  border-bottom: 1px solid #eaeaea;
+  padding-bottom: 6px;
+}
+
+.document-markdown h3 {
+  font-size: 20px;
+}
+
+.document-markdown h4 {
+  font-size: 18px;
+}
+
+.document-markdown p {
+  margin: 16px 0;
+}
+
+.document-markdown a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+.document-markdown a:hover {
+  text-decoration: underline;
+}
+
+.document-markdown ul,
+.document-markdown ol {
+  margin: 16px 0;
+  padding-left: 32px;
+}
+
+.document-markdown li {
+  margin: 8px 0;
+}
+
+.document-markdown blockquote {
+  margin: 16px 0;
+  padding: 0 16px;
+  border-left: 4px solid #ddd;
+  color: #666;
+}
+
+.document-markdown code {
+  background: #f6f8fa;
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 85%;
+  font-family: 'Monaco', 'Menlo', 'Courier New', 'Consolas', monospace;
+}
+
+.document-markdown pre {
+  background: #f6f8fa;
+  border-radius: 6px;
+  padding: 16px;
+  overflow-x: auto;
+  margin: 16px 0;
+}
+
+.document-markdown pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.document-markdown table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 16px 0;
+}
+
+.document-markdown th,
+.document-markdown td {
+  border: 1px solid #ddd;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.document-markdown th {
+  background: #f6f8fa;
+  font-weight: 600;
+}
+
+.document-markdown img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  margin: 16px 0;
+}
+
+.document-markdown hr {
+  border: none;
+  border-top: 1px solid #eaeaea;
+  margin: 24px 0;
+}
+
+/* Loading State */
+.vision-scope-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid #e0e0e0;
+  border-top-color: #666;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  margin-top: 16px;
+  font-size: 14px;
+  color: #999;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Error State */
+.vision-scope-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 48px;
+  text-align: center;
+}
+
+.error-icon {
+  font-size: 64px;
+  margin-bottom: 16px;
+}
+
+.error-message {
+  font-size: 18px;
+  font-weight: 600;
+  color: #d32f2f;
+  margin-bottom: 8px;
+}
+
+.error-details {
+  font-size: 14px;
+  color: #666;
+  max-width: 500px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .vision-scope-pdf .pdf-sidebar-outer,
+  .vision-scope-presentation .ppt-sidebar-outer {
+    width: 200px;
+    padding: 12px;
+  }
+
+  .vision-scope-pdf .pdf-page-thumb,
+  .vision-scope-presentation .ppt-slide-thumb {
+    width: 168px;
+  }
+
+  .vision-scope-pdf .pdf-thumbnail-limit-note,
+  .vision-scope-presentation .ppt-thumbnail-limit-note {
+    width: 168px;
+  }
+
+  .pdf-sidebar-outer {
+    width: 178px;
+    padding: 16px 8px 16px 12px;
+  }
+
+  .pdf-sidebar {
+    width: 150px;
+  }
+
+  .pdf-custom-toolbar {
+    padding: 4px 12px;
+  }
+
+  .pdf-main-viewer {
+    padding: 16px;
+  }
+
+  .document-text,
+  .document-markdown {
+    padding: 24px;
+  }
+}
+
+/* PDF document viewer — sidebar aligned with presentation thumb rail */
+.vision-scope-pdf .pdf-viewer-layout,
+.vision-scope-pdf .pdf-main-content,
+.vision-scope-pdf .pdf-main-viewer,
+.vision-scope-pdf .pdf-sidebar-outer,
+.vision-scope-pdf .pdf-page-sidebar {
+  background: #eeeeee;
+}
+
+.vision-scope-pdf .pdf-sidebar-outer {
+  width: 240px;
+  padding: 16px;
+  align-self: stretch;
+}
+
+.vision-scope-pdf .pdf-page-sidebar {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  border-radius: 0;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+.vision-scope-pdf .pdf-thumbnails-title {
+  background: transparent;
+  border-bottom: none;
+  padding: 4px 4px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.vision-scope-pdf .pdf-page-sidebar .pdf-thumb-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 0;
+}
+
+.pdf-page-thumb {
+  position: relative;
+  flex-shrink: 0;
+  display: block;
+  width: 150px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  background: #fff;
+  box-shadow: none;
+  transition: opacity 0.15s ease;
+}
+
+.pdf-page-thumb:hover:not(.is-active) {
+  opacity: 0.88;
+}
+
+.pdf-page-thumb.is-active {
+  opacity: 1;
+}
+
+.pdf-page-thumb:focus {
+  outline: none;
+}
+
+.pdf-page-thumb:focus-visible {
+  outline: none;
+}
+
+.pdf-page-thumb.is-active::after,
+.ppt-slide-thumb.is-active::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 4px;
+  background: #3b82f6;
+  border-radius: 6px 0 0 6px;
+  pointer-events: none;
+  z-index: 3;
+}
+
+.pdf-page-thumb:focus-visible::before,
+.ppt-slide-thumb:focus-visible::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 6px;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.pdf-page-thumb-preview {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+.pdf-page-thumb-preview canvas {
+  width: 100%;
+  height: auto;
+  display: block;
+  pointer-events: none;
+}
+
+.pdf-page-thumb-badge,
+.ppt-slide-thumb-badge {
+  position: absolute;
+  right: 6px;
+  bottom: 4px;
+  z-index: 2;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-size: 9px;
+  font-weight: 500;
+  line-height: 1;
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.pdf-page-thumb:hover .pdf-page-thumb-badge,
+.ppt-slide-thumb:hover .ppt-slide-thumb-badge {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.vision-scope-pdf .pdf-thumbnail-limit-note,
+.vision-scope-presentation .ppt-thumbnail-limit-note {
+  width: 200px;
+  padding: 8px 0 4px;
+  font-size: 11px;
+  color: #6b7280;
+  text-align: center;
+  border-top: none;
+}
+
+/* PPTX presentation viewer (PresentationRenderer) */
+.vision-scope-presentation .ppt-viewer-layout,
+.vision-scope-presentation .pdf-main-content,
+.vision-scope-presentation .ppt-main-viewer,
+.vision-scope-presentation .ppt-sidebar-outer,
+.vision-scope-presentation .ppt-slide-sidebar {
+  background: #eeeeee;
+}
+
+.vision-scope-presentation .ppt-viewer-layout {
+  position: relative;
+}
+
+.vision-scope-presentation .ppt-sidebar-outer {
+  width: 240px;
+  padding: 16px;
+  align-self: stretch;
+}
+
+.vision-scope-presentation .ppt-slide-sidebar {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  border-radius: 0;
+  box-shadow: none;
+  border: none;
+}
+
+.vision-scope-presentation .pdf-thumbnails-title {
+  background: transparent;
+  border-bottom: none;
+  padding: 4px 4px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.vision-scope-presentation .ppt-main-viewer-wrap {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.vision-scope-presentation .ppt-main-viewer {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  align-items: stretch;
+  justify-content: stretch;
+  padding: 0;
+  scroll-snap-type: y mandatory;
+  scroll-padding: 0;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.vision-scope-presentation .ppt-slide-stage {
+  width: 100%;
+  max-width: 100%;
+  min-height: min-content;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* One slide per viewport — slot height set in JS via --ppt-slide-slot-height */
+.vision-scope-presentation .ppt-slide-stage > [data-slide-index] {
+  height: var(--ppt-slide-slot-height, 100%);
+  min-height: var(--ppt-slide-slot-height, 100%);
+  max-height: var(--ppt-slide-slot-height, 100%);
+  margin-bottom: 0 !important;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  box-sizing: border-box;
+}
+
+/* SlideReport-style floating capsule toolbar */
+.ppt-float-toolbar {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.ppt-main-viewer-wrap:hover .ppt-float-toolbar,
+.ppt-main-viewer-wrap:focus-within .ppt-float-toolbar,
+.ppt-viewer-layout.is-playing .ppt-float-toolbar,
+.ppt-viewer-layout.is-fullscreen .ppt-float-toolbar {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ppt-float-btn {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.ppt-float-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.ppt-float-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.ppt-float-btn:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 1px;
+}
+
+.ppt-float-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.ppt-float-page {
+  font-size: 13px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: rgba(255, 255, 255, 0.85);
+  min-width: 52px;
+  text-align: center;
+  user-select: none;
+  padding: 0 4px;
+}
+
+.ppt-float-divider {
+  width: 1px;
+  height: 16px;
+  background: rgba(255, 255, 255, 0.25);
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+
+/* Auto-play / fullscreen — hide sidebar like SlideReport */
+.ppt-viewer-layout.is-playing .ppt-sidebar-outer {
+  display: none !important;
+}
+
+.ppt-viewer-layout.is-playing .ppt-main-viewer,
+.ppt-viewer-layout.is-fullscreen .ppt-main-viewer {
+  background: #111;
+}
+
+.ppt-main-viewer.is-fullscreen {
+  cursor: pointer;
+}
+
+.ppt-viewer-layout:fullscreen {
+  background: #111;
+}
+
+.ppt-viewer-layout:fullscreen .pdf-main-content {
+  flex: 1;
+  min-height: 0;
+}
+
+/* Presentation thumbnail items — active state: right-side vertical bar only */
+.vision-scope-presentation .ppt-slide-sidebar .ppt-thumb-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 0;
+}
+
+.ppt-slide-thumb {
+  position: relative;
+  flex-shrink: 0;
+  display: block;
+  width: 150px;
+  aspect-ratio: 16 / 9;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  background: #fff;
+  box-shadow: none;
+  transition: opacity 0.15s ease;
+}
+
+.ppt-slide-thumb:hover:not(.is-active) {
+  opacity: 0.88;
+}
+
+.ppt-slide-thumb.is-active {
+  opacity: 1;
+}
+
+.ppt-slide-thumb:focus {
+  outline: none;
+}
+
+.ppt-slide-thumb:focus-visible {
+  outline: none;
+}
+
+.ppt-slide-thumb-preview {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+}
+
+.ppt-slide-thumb-preview > * {
+  max-width: 100%;
+  max-height: 100%;
+  pointer-events: none;
+}