:root {

--bg-color: #ffffff;

--editor-bg: #f6f8fa;

--preview-bg: #ffffff;

/* Preview background for light mode */

--text-color: #24292e;

--text-secondary: #57606a;

--font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;

--color-danger-fg: #d73a49;

--preview-text-color: #24292e;

/* Text color for preview in light mode */

--border-color: #e1e4e8;

--header-bg: #f6f8fa;

--toolbar-surface: #ffffff;

--menu-surface: #ffffff;

--menu-border: #d0d7de;

--menu-radius: 10px;

--menu-item-radius: 7px;

--menu-shadow: 0 10px 28px rgba(31, 35, 40, 0.16);

--ui-font-xs: 10px;

--ui-font-sm: 11px;

--ui-font-md: 12px;

--ui-font-lg: 13px;

--ui-font-xl: 16px;

--ui-icon-size-xs: 9px;

--ui-icon-size-sm: 12px;

--ui-icon-size-md: 14px;

--ui-icon-size-lg: 16px;

--ui-icon-size-xl: 18px;

--ui-icon-size-brand: 20px;

--icon-size-md: var(--ui-icon-size-md);

--toolbar-control-hover: color-mix(in srgb, var(--text-color) 7%, transparent);

--toolbar-control-pressed: color-mix(in srgb, var(--text-color) 11%, transparent);

--segmented-bg: #f0f2f5;

--segmented-surface: #ffffff;

--segmented-shadow: 0 1px 2px rgba(31, 35, 40, 0.12), 0 0 0 0.5px rgba(31, 35, 40, 0.06);

--layer-menu: 1100;

--layer-notice: 1200;

--button-bg: #f6f8fa;

--button-hover: #e1e4e8;

--button-active: #d1d5da;

--favorite-color: #d97706;

--scrollbar-thumb: #c1c1c1;

--scrollbar-track: #f1f1f1;

--accent-color: #0366d6;

--review-accent: #7c3aed;

--success-color: #116329;

--warning-note-bg: #fff8c5;

--warning-note-border: #d4a72c;

--warning-note-text: #633c01;

--warning-note-icon: #9a6700;

--info-note-bg: #ddf4ff;

--info-note-border: #54aeff;

--info-note-text: #0550ae;

--info-note-icon: #0969da;

--mv-blue: #2563eb;

--mv-border: #e4e9f0;

--table-bg: #ffffff;

/* Table background for light mode */

--code-bg: #f6f8fa;

/* Code block background for light mode */

--skeleton-bg: #e2e8f0;

--skeleton-glow: rgba(255, 255, 255, 0.65);

/* Find & Replace Panel custom properties (PERF-010 consolidated) */

--fr-bg: rgba(255, 255, 255, 0.95);

--fr-border: #d0d7de;

--fr-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);

--fr-btn-active: #0969da;

--fr-btn-active-bg: #ddf4ff;

--fr-match-highlight: #ffdf5d;

--fr-match-active: #ff9b30;

--fr-match-text-color: #24292e;

--fr-match-active-text-color: #24292e;

--fr-error-bg: #ffebe9;

--fr-error-border: #ff8577;

--fr-text-danger: #cf222e;

}

[data-theme="dark"] {

--bg-color: #0d1117;

--editor-bg: #161b22;

--preview-bg: #0d1117;

/* Preview background for dark mode */

--text-color: #c9d1d9;

--text-secondary: #8b949e;

--color-danger-fg: #f85149;

--preview-text-color: #c9d1d9;

/* Text color for preview in dark mode */

--border-color: #30363d;

--header-bg: #161b22;

--toolbar-surface: #161b22;

--menu-surface: #161b22;

--menu-border: #3d444d;

--menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.46);

--toolbar-control-hover: rgba(240, 246, 252, 0.09);

--toolbar-control-pressed: rgba(240, 246, 252, 0.14);

--segmented-bg: #0d1117;

--segmented-surface: #30363d;

--segmented-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.08);

--button-bg: #21262d;

--button-hover: #30363d;

--button-active: #3b434b;

--favorite-color: #fbbf24;

--scrollbar-thumb: #484f58;

--scrollbar-track: #21262d;

--accent-color: #58a6ff;

--review-accent: #a78bfa;

--success-color: #3fb950;

--warning-note-bg: #2d220c;

--warning-note-border: #9e6a03;

--warning-note-text: #f2cc60;

--warning-note-icon: #f2cc60;

--info-note-bg: #0c2d4a;

--info-note-border: #1f6feb;

--info-note-text: #a5d6ff;

--info-note-icon: #58a6ff;

--table-bg: #161b22;

/* Table background for dark mode */

--code-bg: #161b22;

/* Code block background for dark mode */

--skeleton-bg: #2d3139;

--skeleton-glow: rgba(255, 255, 255, 0.08);

/* Find & Replace Panel custom properties for dark mode */

--fr-bg: rgba(28, 33, 40, 0.98);

--fr-border: #444c56;

--fr-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);

--fr-btn-active: #2f81f7;

--fr-btn-active-bg: rgba(56, 139, 253, 0.15);

--fr-match-highlight: rgba(187, 128, 9, 0.4);

--fr-match-active: #ad6200;

--fr-match-text-color: #c9d1d9;

--fr-match-active-text-color: #ffffff;

--fr-error-bg: rgba(248, 81, 73, 0.1);

--fr-error-border: rgba(248, 81, 73, 0.4);

--fr-text-danger: #ff7b72;

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

@media (min-width: 768px) {

html,

body {

height: 100%;

overflow: hidden;

}

}

body {

background-color: var(--bg-color);

color: var(--text-color);

/* PERF-021: Removed background-color transition to avoid full-viewport repaint on theme toggle */

transition: color 0.15s ease;

min-height: 100vh;

font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic ProN", Meiryo, "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

}

.app-header {

background-color: var(--header-bg);

border-bottom: 1px solid var(--border-color);

padding: 0.35rem 0.75rem;

transition: background-color 0.3s ease;

position: relative;

z-index: 100;

flex-shrink: 0;

}

.app-container {

height: 100vh;

display: flex;

flex-direction: column;

overflow: hidden;

}

@media screen {

html.is-fullscreen-fallback,

html.is-fullscreen-fallback body {

height: 100%;

min-height: 0;

overflow: hidden;

overscroll-behavior: none;

}

html.is-fullscreen-fallback .app-container {

height: 100vh;

height: 100dvh;

height: var(--fullscreen-viewport-height, 100dvh);

}

html.is-fullscreen-fallback .app-header {

display: none;

}

}

.document-workspace-shell {

display: flex;

flex: 1;

min-width: 0;

min-height: 0;

overflow: hidden;

position: relative;

}

.document-editor-area {

display: flex;

flex: 1;

flex-direction: column;

min-width: 0;

min-height: 0;

overflow: hidden;

}

.document-sidebar {

--document-sidebar-width: 288px;

--document-sidebar-icon-size: var(--ui-icon-size-md);

--document-sidebar-row-height: 30px;

position: relative;

display: flex;

flex: 0 0 var(--document-sidebar-width);

flex-direction: column;

width: var(--document-sidebar-width);

min-width: 220px;

max-width: 420px;

min-height: 0;

background: var(--header-bg);

border-inline-end: 1px solid var(--border-color);

color: var(--text-color);

z-index: 35;

}

.document-sidebar-header {

display: flex;

align-items: center;

justify-content: space-between;

min-height: 32px;

padding: 2px 4px 2px 10px;

gap: 8px;

border-bottom: 1px solid var(--border-color);

}

.document-sidebar-heading,

.document-sidebar-actions {

display: flex;

align-items: center;

min-width: 0;

}

.document-sidebar-heading {

gap: 0;

}

.document-sidebar-actions {

flex: 0 0 auto;

gap: 1px;

}

.document-sidebar-heading h2 {

margin: 0;

color: var(--text-color);

font-size: 12px;

font-weight: 650;

line-height: 1.3;

}

.document-sidebar-icon-btn,

.document-filter-btn,

.document-tree-main,

.document-tree-toggle,

.document-tree-action {

border: 1px solid transparent;

border-radius: 5px;

background: transparent;

color: var(--text-color);

cursor: pointer;

font: inherit;

transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;

touch-action: manipulation;

}

.document-sidebar-icon-btn:focus-visible,

.document-filter-btn:focus-visible,

.document-tree-main:focus-visible,

.document-tree-toggle:focus-visible,

.document-tree-action:focus-visible,

#document-sidebar-search-clear:focus-visible {

outline: 2px solid var(--accent-color);

outline-offset: 1px;

}

.document-sidebar-icon-btn {

display: inline-flex;

align-items: center;

justify-content: center;

flex: 0 0 27px;

width: 27px;

height: 27px;

padding: 0;

border-color: transparent;

background: transparent;

color: var(--text-secondary);

font-size: var(--document-sidebar-icon-size);

line-height: 1;

}

.document-sidebar-icon-btn:hover,

.document-filter-btn:hover,

.document-tree-toggle:hover,

.document-tree-action:hover {

background: var(--button-hover);

color: var(--text-color);

}

.document-sidebar-icon-btn:disabled,

.panel-icon-btn:disabled {

background: transparent;

color: var(--text-secondary);

cursor: not-allowed;

opacity: 0.4;

}

.document-sidebar-close {

display: none;

}

.document-sidebar-search-wrap {

position: relative;

display: flex;

align-items: center;

margin: 8px 8px 6px;

}

.document-sidebar-search-wrap > i {

position: absolute;

inset-inline-start: 10px;

color: var(--text-secondary);

font-size: var(--document-sidebar-icon-size);

pointer-events: none;

}

#document-sidebar-search {

width: 100%;

height: 30px;

padding: 5px 32px;

border: 1px solid var(--border-color);

border-radius: 6px;

outline: none;

background: var(--bg-color);

color: var(--text-color);

font-size: 12px;

}

#document-sidebar-search::placeholder {

color: var(--text-secondary);

}

#document-sidebar-search:focus {

border-color: var(--accent-color);

box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 18%, transparent);

}

#document-sidebar-search-clear {

position: absolute;

inset-inline-end: 3px;

display: inline-flex;

align-items: center;

justify-content: center;

width: 28px;

height: 28px;

border: 0;

border-radius: 4px;

background: transparent;

color: var(--text-secondary);

cursor: pointer;

}

.segmented-control {

display: grid;

grid-template-columns: repeat(3, minmax(0, 1fr));

gap: 2px;

padding: 3px;

border: 1px solid var(--border-color);

border-radius: 6px;

background: var(--button-bg);

box-shadow: inset 0 1px 1px rgba(31, 35, 40, 0.03);

}

.document-sidebar-filters {

margin: 0 8px 7px;

}

.bi {

display: inline-block;

width: 1em;

height: 1em;

flex: 0 0 auto;

vertical-align: -0.125em;

background-color: currentColor;

-webkit-mask-position: center;

mask-position: center;

-webkit-mask-repeat: no-repeat;

mask-repeat: no-repeat;

-webkit-mask-size: contain;

mask-size: contain;

pointer-events: none;

}

.bi-github {

-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZ2l0aHViIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDBDMy41OCAwIDAgMy41OCAwIDhjMCAzLjU0IDIuMjkgNi41MyA1LjQ3IDcuNTkuNC4wNy41NS0uMTcuNTUtLjM4IDAtLjE5LS4wMS0uODItLjAxLTEuNDktMi4wMS4zNy0yLjUzLS40OS0yLjY5LS45NC0uMDktLjIzLS40OC0uOTQtLjgyLTEuMTMtLjI4LS4xNS0uNjgtLjUyLS4wMS0uNTMuNjMtLjAxIDEuMDguNTggMS4yMy44Mi43MiAxLjIxIDEuODcuODcgMi4zMy42Ni4wNy0uNTIuMjgtLjg3LjUxLTEuMDctMS43OC0uMi0zLjY0LS44OS0zLjY0LTMuOTUgMC0uODcuMzEtMS41OS44Mi0yLjE1LS4wOC0uMi0uMzYtMS4wMi4wOC0yLjEyIDAgMCAuNjctLjIxIDIuMi44Mi42NC0uMTggMS4zMi0uMjcgMi0uMjdzMS4zNi4wOSAyIC4yN2MxLjUzLTEuMDQgMi4yLS44MiAyLjItLjgyLjQ0IDEuMS4xNiAxLjkyLjA4IDIuMTIuNTEuNTYuODIgMS4yNy44MiAyLjE1IDAgMy4wNy0xLjg3IDMuNzUtMy42NSAzLjk1LjI5LjI1LjU0LjczLjU0IDEuNDggMCAxLjA3LS4wMSAxLjkzLS4wMSAyLjIgMCAuMjEuMTUuNDYuNTUuMzhBOC4wMSA4LjAxIDAgMCAwIDE2IDhjMC00LjQyLTMuNTgtOC04LTgiLz4KPC9zdmc+");

mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZ2l0aHViIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDBDMy41OCAwIDAgMy41OCAwIDhjMCAzLjU0IDIuMjkgNi41MyA1LjQ3IDcuNTkuNC4wNy41NS0uMTcuNTUtLjM4IDAtLjE5LS4wMS0uODItLjAxLTEuNDktMi4wMS4zNy0yLjUzLS40OS0yLjY5LS45NC0uMDktLjIzLS40OC0uOTQtLjgyLTEuMTMtLjI4LS4xNS0uNjgtLjUyLS4wMS0uNTMuNjMtLjAxIDEuMDguNTggMS4yMy44Mi43MiAxLjIxIDEuODcuODcgMi4zMy42Ni4wNy0uNTIuMjgtLjg3LjUxLTEuMDctMS43OC0uMi0zLjY0LS44OS0zLjY0LTMuOTUgMC0uODcuMzEtMS41OS44Mi0yLjE1LS4wOC0uMi0uMzYtMS4wMi4wOC0yLjEyIDAgMCAuNjctLjIxIDIuMi44Mi42NC0uMTggMS4zMi0uMjcgMi0uMjdzMS4zNi4wOSAyIC4yN2MxLjUzLTEuMDQgMi4yLS44MiAyLjItLjgyLjQ0IDEuMS4xNiAxLjkyLjA4IDIuMTIuNTEuNTYuODIgMS4yNy44MiAyLjE1IDAgMy4wNy0xLjg3IDMuNzUtMy42NSAzLjk1LjI5LjI1LjU0LjczLjU0IDEuNDggMCAxLjA3LS4wMSAxLjkzLS4wMSAyLjIgMCAuMjEuMTUuNDYuNTUuMzhBOC4wMSA4LjAxIDAgMCAwIDE2IDhjMC00LjQyLTMuNTgtOC04LTgiLz4KPC9zdmc+");

}

.segmented-control-btn {

display: flex;

align-items: center;

justify-content: center;

width: auto;

min-width: 0;

min-height: 24px;

gap: 5px;

padding: 3px 6px;

border: 1px solid transparent;

border-radius: 4px;

background: transparent;

color: var(--text-secondary);

cursor: pointer;

font: inherit;

font-size: 11px;

line-height: 1.2;

text-align: center;

white-space: nowrap;

transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;

}

.segmented-control-btn:hover:not(.is-active) {

background: var(--button-hover);

color: var(--text-color);

}

.document-filter-btn i {

width: auto;

font-size: var(--ui-icon-size-sm);

line-height: 1;

text-align: center;

}

.segmented-control-btn.is-active {

background: var(--bg-color);

color: var(--text-color);

font-weight: 500;

box-shadow: 0 1px 2px rgba(31, 35, 40, 0.12);

}

.document-sidebar-status {

min-height: 0;

padding: 7px 12px 0;

color: var(--text-secondary);

font-size: 11px;

}

.document-tree-heading {

display: flex;

align-items: center;

justify-content: space-between;

min-height: 27px;

gap: 8px;

padding: 7px 10px 3px;

color: var(--text-secondary);

font-size: 10px;

font-weight: 700;

letter-spacing: 0.055em;

line-height: 1.2;

text-transform: uppercase;

}

#document-tree-heading-hint {

overflow: hidden;

font-size: 9px;

font-weight: 500;

letter-spacing: 0;

text-overflow: ellipsis;

text-transform: none;

white-space: nowrap;

}

#document-tree-heading-hint[hidden] {

display: none;

}

.document-sidebar-status:empty {

display: none;

}

.document-tree {

flex: 1;

min-height: 0;

padding: 2px 4px 12px;

overflow-x: hidden;

overflow-y: auto;

overscroll-behavior: contain;

scrollbar-width: thin;

scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

}

.document-tree-empty {

display: grid;

place-items: center;

min-height: 132px;

padding: 20px 12px;

color: var(--text-secondary);

font-size: 12px;

line-height: 1.45;

text-align: center;

}

.document-tree-section-label {

margin: 8px 6px 4px;

color: var(--text-secondary);

font-size: 10px;

font-weight: 700;

letter-spacing: 0.06em;

text-transform: uppercase;

}

.document-tree-row {

--tree-depth: 0;

position: relative;

display: flex;

align-items: center;

min-width: 0;

min-height: var(--document-sidebar-row-height);

margin: 1px 0;

padding-inline-start: calc(var(--tree-depth) * 12px);

border-radius: 4px;

cursor: pointer;

content-visibility: auto;

contain-intrinsic-size: auto var(--document-sidebar-row-height);

touch-action: manipulation;

transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease;

}

.document-tree-row:focus {

outline: none;

}

.document-tree-load-more {

width: calc(100% - 12px);

min-height: 30px;

margin: 6px;

border: 1px solid var(--border-color);

border-radius: 7px;

background: var(--button-bg);

color: var(--text-secondary);

font-size: 12px;

}

.document-tree-load-more:hover {

border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border-color));

background: var(--button-hover);

color: var(--text-color);

}

.document-tree-load-more:focus-visible {

outline: 2px solid var(--accent-color);

outline-offset: 1px;

}

.document-tree-row:focus-visible {

outline: none;

}

.document-tree-row:focus-visible > .document-tree-main {

box-shadow: inset 2px 0 0 var(--accent-color);

}

[dir="rtl"] .document-tree-row:focus-visible > .document-tree-main {

box-shadow: inset -2px 0 0 var(--accent-color);

}

.document-tree-row:hover {

background: var(--button-hover);

}

.document-tree-row:active {

background: var(--button-active);

}

.document-tree-row.is-active {

background: transparent;

color: var(--text-color);

}

.document-tree-row.is-active:hover {

background: transparent;

}

.document-tree-row.is-active > .document-tree-main {

background: var(--button-active);

}

.document-tree-row.is-selected:not(.is-active) > .document-tree-main {

background: color-mix(in srgb, var(--accent-color) 7%, transparent);

}

.document-tree-row[data-tree-type="document"].is-selected > .document-tree-main > i:first-child,

.document-tree-row[data-tree-type="document"].is-active > .document-tree-main > i:first-child {

color: var(--accent-color);

}

.document-tree-row[draggable="true"] {

cursor: grab;

}

.document-tree-row[draggable="true"].is-dragging {

cursor: grabbing;

opacity: 0.45;

}

.document-drag-preview {

position: fixed;

top: -160px;

left: -160px;

z-index: var(--layer-notice);

display: flex;

width: 88px;

flex-direction: column;

align-items: center;

gap: 5px;

pointer-events: none;

}

.document-drag-preview-page {

position: relative;

display: grid;

width: 48px;

height: 58px;

place-items: center;

border: 1px solid #b8c0cc;

border-radius: 2px;

background: #ffffff;

box-shadow: 0 3px 8px rgba(31, 35, 40, 0.2);

color: #52606f;

}

.document-drag-preview.is-multiple .document-drag-preview-page {

box-shadow: -3px 3px 0 -1px var(--toolbar-surface), -3px 3px 0 0 var(--border-color), 0 5px 10px rgba(31, 35, 40, 0.2);

}

.document-drag-preview-page::after {

position: absolute;

top: -1px;

right: -1px;

width: 13px;

height: 13px;

border-bottom: 1px solid #b8c0cc;

border-left: 1px solid #b8c0cc;

background: linear-gradient(225deg, var(--editor-bg) 49%, #ffffff 51%);

content: '';

}

.document-drag-preview-page > i {

margin-top: 2px;

color: var(--accent-color);

font-size: 22px;

}

.document-drag-preview-badge {

position: absolute;

right: 3px;

bottom: 3px;

padding: 1px 3px;

border-radius: 3px;

background: var(--accent-color);

color: #ffffff;

font-size: 7px;

font-weight: 800;

letter-spacing: 0.03em;

line-height: 1.35;

}

.document-drag-preview-label {

overflow: hidden;

max-width: 88px;

padding: 2px 5px;

border: 1px solid var(--border-color);

border-radius: 4px;

background: var(--toolbar-surface);

box-shadow: 0 2px 5px rgba(31, 35, 40, 0.14);

color: var(--text-color);

font-size: var(--ui-font-xs);

line-height: 1.25;

text-overflow: ellipsis;

white-space: nowrap;

}

.document-tree-row.is-drop-target {

background: color-mix(in srgb, var(--accent-color) 14%, var(--button-bg));

box-shadow: inset 0 0 0 1px var(--accent-color);

}

.document-tree-group[data-drop-folder-id]:not([hidden]):empty {

min-height: 12px;

}

.document-tree-group.is-drop-target {

border-radius: 4px;

background: color-mix(in srgb, var(--accent-color) 9%, transparent);

box-shadow: inset 0 0 0 1px var(--accent-color);

}

.document-tree-row.is-secret-locked .document-tree-main > i,

.document-tree-row.is-secret-locked .document-tree-meta {

color: var(--text-secondary);

}

.document-tree-main {

display: flex;

align-items: center;

flex: 1;

min-width: 0;

min-height: calc(var(--document-sidebar-row-height) - 2px);

gap: 6px;

padding: 4px 5px;

text-align: start;

}

.document-tree-main:hover,

.document-tree-main:active {

background: transparent;

}

.document-tree-main > i {

flex: 0 0 var(--ui-icon-size-md);

color: var(--text-secondary);

font-size: var(--document-sidebar-icon-size);

line-height: 1;

text-align: center;

}

.document-tree-main > .lucide-folder-open,

.document-tree-row[aria-expanded="true"] > .document-tree-main > .lucide-briefcase-business {

color: var(--accent-color);

}

.document-tree-label {

flex: 1;

min-width: 0;

overflow: hidden;

color: inherit;

font-size: var(--ui-font-md);

line-height: 1.3;

text-overflow: ellipsis;

white-space: nowrap;

}

.document-tree-row[data-tree-type="workspace"] .document-tree-label {

font-weight: 400;

}

.document-tree-meta {

flex: 0 0 auto;

color: var(--text-secondary);

font-size: var(--ui-font-xs);

}

.document-tree-main > .document-favorite-indicator {

flex: 0 0 auto;

color: var(--favorite-color);

font-size: var(--ui-font-xs);

}

.document-tree-toggle,

.document-tree-action {

display: inline-flex;

align-items: center;

justify-content: center;

flex: 0 0 28px;

width: 28px;

height: 28px;

padding: 0;

color: var(--text-secondary);

font-size: var(--document-sidebar-icon-size);

line-height: 1;

}

.document-tree-toggle {

flex-basis: 24px;

width: 24px;

}

.document-tree-toggle > i {

font-size: var(--ui-icon-size-sm);

}

.document-tree-row[data-tree-type="document"] > .document-tree-toggle {

flex-basis: 18px;

width: 18px;

}

.document-tree-action {

opacity: 0;

}

.document-tree-row:hover .document-tree-action,

.document-tree-row:focus-within .document-tree-action,

.document-tree-row.is-active .document-tree-action,

.document-tree-action.open {

opacity: 1;

}

@media (hover: none) {

.document-tree-action {

opacity: 1;

}

}

.document-tree-group {

position: relative;

}

.document-tree-group::before {

position: absolute;

inset-block: 0;

width: 1px;

background: color-mix(in srgb, var(--border-color) 78%, transparent);

content: '';

pointer-events: none;

}

.document-tree-group--workspace::before {

inset-inline-start: 10px;

}

.document-tree-group--folder::before {

inset-inline-start: 22px;

}

.document-tree-group[hidden] {

display: none;

}

.document-tree-temporary .document-tree-main > i {

color: var(--accent-color);

}

.document-sidebar-footer {

display: flex;

align-items: center;

justify-content: flex-start;

min-height: 32px;

padding: 4px 8px 4px 10px;

gap: 8px;

border-top: 1px solid var(--border-color);

color: var(--text-secondary);

font-size: 10px;

}

.document-sidebar-resizer {

position: absolute;

inset-block: 0;

inset-inline-end: -4px;

display: flex;

align-items: center;

justify-content: center;

width: 8px;

background-color: transparent;

cursor: col-resize;

touch-action: none;

z-index: 2;

transition: background-color 0.2s ease;

}

.document-sidebar-resizer:hover,

.document-sidebar-resizer:focus-visible {

background-color: var(--button-hover);

outline: none;

}

.is-resizing > .document-sidebar-resizer {

background-color: var(--accent-color);

}

.document-sidebar-resizer:hover .resize-divider-handle,

.document-sidebar-resizer:focus-visible .resize-divider-handle,

.is-resizing > .document-sidebar-resizer .resize-divider-handle {

width: 3px;

background-color: var(--accent-color);

}

.document-panel-resizer {

inset-inline-start: 0;

inset-inline-end: auto;

}

.find-replace-panel:not(.docked) > .document-panel-resizer {

left: 0;

right: auto;

}

@media (max-width: 1079px) {

.document-outline > .document-panel-resizer {

left: 0;

right: auto;

}

}

.document-sidebar-backdrop {

display: none;

}

.tool-button.document-sidebar-open {

display: inline-flex;

flex: 0 0 30px;

width: 30px;

height: 30px;

min-width: 30px;

padding: 4px 6px;

margin-inline-end: 2px;

border-radius: 8px;

border-color: transparent;

background: transparent;

}

body.document-sidebar-collapsed .document-sidebar {

display: none;

}

.tool-button.document-sidebar-open:focus-visible {

outline: 2px solid var(--accent-color);

outline-offset: -2px;

}

.document-sidebar-tab-divider {

flex: 0 0 1px;

width: 1px;

height: 18px;

margin-inline: 1px 4px;

background: var(--border-color);

}

.document-modal-error {

margin: 6px 0 0;

color: var(--color-danger-fg);

font-size: 12px;

}

@media (min-width: 768px) and (max-width: 1079px) {

.document-sidebar {

--document-sidebar-width: 236px;

min-width: 210px;

max-width: 320px;

}

}

@media (max-width: 767px) {

.tool-button.document-sidebar-open {

display: inline-flex;

min-width: 44px;

min-height: 44px;

}

.document-sidebar-header {

min-height: 48px;

padding-inline: 10px 4px;

}

.document-sidebar-close {

display: inline-flex;

}

.document-sidebar {

--document-sidebar-width: min(88vw, 340px);

position: fixed;

inset-block: 0;

inset-inline-start: 0;

width: var(--document-sidebar-width);

min-width: min(88vw, 280px);

max-width: min(88vw, 340px);

padding-block-start: env(safe-area-inset-top, 0px);

padding-block-end: env(safe-area-inset-bottom, 0px);

box-shadow: 12px 0 32px rgba(31, 35, 40, 0.2);

transform: translateX(-102%);

transition: transform 0.2s ease;

z-index: 1002;

}

[dir="rtl"] .document-sidebar {

transform: translateX(102%);

}