/* ============================================================
   file-browser.css — Side-panel file browser component
   Right-docked panel with file tree, preview, upload, and editor
   ============================================================ */

/* ---- Panel Layout ---- */
.file-browser-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 350px;
  z-index: var(--z-tooltip);
  background: var(--surface-secondary);
  border-left: 1px solid var(--border-default);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
  overflow: hidden;
}
.file-browser-panel.open { transform: translateX(0); }
.file-browser-panel.editor-active { width: min(500px, 50vw); }

/* ---- Resize Handle ---- */
.file-browser-resize-handle {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
  transition: background var(--duration-fast);
}
.file-browser-resize-handle:hover,
.file-browser-resize-handle.dragging {
  background: var(--accent-default);
}

/* ---- Header (40px row: back + breadcrumbs + actions) ---- */
.file-browser-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 40px;
  min-height: 40px;
  padding: 0 var(--space-2);
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

/* ---- Header Action Buttons (fb-header-btn, fb-back-btn, fb-close-btn) ---- */
.fb-header-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast);
  flex-shrink: 0;
}
.fb-header-btn:hover { color: var(--text-primary); background: var(--surface-tertiary); }
.fb-header-btn.active { color: var(--accent-default); background: var(--accent-soft); }
.fb-back-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Follow-terminal toggle (📍): pulsing accent dot when actively following
   the OSC 7-tracked CWD; muted when paused (manual nav). Hidden until
   OSC 7 fires for the active session — see ADR-0019. */
.fb-follow-toggle { font-size: 14px; line-height: 1; }
.fb-follow-toggle.active { color: var(--accent-default); background: var(--accent-soft); }
.fb-follow-toggle:not(.active) { color: var(--text-tertiary); opacity: 0.6; }
.fb-follow-toggle:not(.active):hover { color: var(--text-primary); opacity: 1; }

/* ---- Breadcrumbs ---- */
.fb-breadcrumbs {
  display: flex; align-items: center;
  flex: 1; min-width: 0;
  overflow: hidden;
  gap: var(--space-0-5);
  font-size: var(--text-sm);
}
.fb-breadcrumb {
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast), background var(--duration-fast);
}
.fb-breadcrumb:hover { color: var(--accent-default); background: var(--accent-soft); }
.fb-breadcrumb.active {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  cursor: default;
}
.fb-breadcrumb.active:hover { background: none; }
.fb-breadcrumb-sep {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: var(--text-sm);
  user-select: none;
}

/* ---- Search Bar (collapsible) ---- */
.fb-search-bar {
  display: none;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}
.fb-search-bar.visible { display: block; }
.fb-search-input {
  width: 100%;
  padding: var(--space-1-5) var(--space-2);
  background: var(--surface-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--duration-fast);
}
.fb-search-input:focus { border-color: var(--accent-default); }
.fb-search-input::placeholder { color: var(--text-muted); }

/* ---- Content Area ---- */
.fb-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ---- File List ---- */
.fb-file-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) var(--surface-secondary);
}
.fb-file-list::-webkit-scrollbar { width: 10px; height: 10px; }
.fb-file-list::-webkit-scrollbar-track { background: var(--surface-secondary); }
.fb-file-list::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 5px; }
.fb-file-list::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ---- File Items ---- */
.file-browser-item {
  display: flex; align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background-color var(--duration-fast);
  border-left: 3px solid transparent;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.file-browser-item:hover { background: var(--surface-tertiary); }
.file-browser-item.selected {
  background: var(--accent-soft);
  border-left-color: var(--accent-default);
}
.file-browser-item:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: -2px;
}

/* ---- File Item Sub-elements ---- */
.file-item-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.file-item-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono);
}
.file-item-size {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.file-item-edit {
  opacity: 0;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  border: none; background: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--duration-fast);
}
.file-browser-item:hover .file-item-edit { opacity: 0.6; }
.file-item-edit:hover {
  opacity: 1;
  background: var(--accent-soft);
  color: var(--accent-default);
}

/* ---- Preview Container ---- */
.fb-preview-container {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

/* ---- Preview Header ---- */
.fb-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}
.fb-preview-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
}
.fb-preview-actions {
  display: flex;
  gap: var(--space-2);
}

/* ---- Preview Content ---- */
.fb-preview-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.fb-preview-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ---- Preview: Image ---- */
.fb-img-controls {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  padding: var(--space-2) 0;
}
.fb-img-viewport {
  position: relative;
  width: 100%;
  /* Cap the viewport so a giant image doesn't stretch the panel; panzoom
     handles overflow inside this box. min/max clipping keeps the controls
     visible above. */
  height: clamp(240px, 50vh, 600px);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-tertiary);
  /* Hint to the browser that descendants will be transformed often. */
  contain: layout paint;
  cursor: grab;
}
.fb-img-viewport:active { cursor: grabbing; }
.fb-preview-image {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
  /* When wrapped in .fb-img-viewport panzoom uses CSS transforms; allow it
     to position freely without parent flex/grid interference. */
  display: block;
  /* Block native image-drag from competing with the pan gesture. */
  user-select: none;
  -webkit-user-drag: none;
}
.fb-preview-dims {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* ---- Preview: PDF ---- */
.fb-preview-pdf {
  width: 100%;
  min-height: 300px;
  border: none;
  border-radius: var(--radius-md);
}

/* ---- Preview: PDF.js viewer (lazy, replaces iframe on iOS Safari etc.) ---- */
.fb-pdf-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: var(--bg-secondary, #1a1d23);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.fb-pdf-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px);
  background: var(--bg-tertiary, #14171c);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.fb-pdf-btn {
  background: transparent;
  color: var(--text-primary, #e6edf3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  min-height: 28px;
  user-select: none;
}
.fb-pdf-btn:hover:not(:disabled) {
  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}
.fb-pdf-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.fb-pdf-page-info,
.fb-pdf-zoom-info {
  color: var(--text-secondary, #9aa4b1);
  font-size: 12px;
  padding: 0 var(--space-2, 8px);
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fb-pdf-sep {
  width: 1px;
  height: 18px;
  background: var(--border-subtle);
  margin: 0 var(--space-2, 8px);
}
.fb-pdf-viewport {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-3, 12px);
  background: var(--bg-secondary, #0d1117);
  position: relative;
  outline: none;
}
.fb-pdf-viewport:focus-visible {
  outline: 2px solid var(--color-blue-400, #58a6ff);
  outline-offset: -2px;
}
.fb-pdf-canvas {
  display: block;
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  background: white;
}
.fb-pdf-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-secondary, #9aa4b1);
  font-size: 13px;
  pointer-events: none;
}
.fb-pdf-error .fb-preview-error {
  margin: var(--space-4, 16px);
}

/* ---- Preview: Binary ---- */
.fb-preview-binary {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-secondary);
}
.fb-preview-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ---- Preview: Error ---- */
.fb-preview-error {
  color: var(--status-error);
  padding: var(--space-4);
  text-align: center;
}

/* ---- Code Preview (gutter + code; CDN-blocked Monaco fallback) ---- */
.fb-code-preview {
  display: flex;
  background: var(--surface-tertiary);
  border-radius: var(--radius-md);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.fb-code-gutter {
  padding: var(--space-2) var(--space-2);
  text-align: right;
  color: var(--text-muted);
  user-select: none;
  border-right: 1px solid var(--border-default);
}
.fb-code-content {
  padding: var(--space-2) var(--space-3);
  flex: 1;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.fb-line-number {
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* ---- Code Preview (Monaco read-only host) ----
   Monaco's automaticLayout requires a non-zero box; enforce a min-height so
   the viewer is usable inside short preview panes (mobile, narrow window). */
.fb-code-monaco {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-tertiary);
}
.fb-code-monaco .monaco-editor {
  flex: 1;
  min-height: 0;
}
/* ---- HTML Preview (sandboxed iframe + Source/Rendered toggle) ---- */
.fb-html-preview {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.fb-html-toggle-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-secondary);
}
.fb-html-toggle-btn[disabled],
.fb-html-toggle-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fb-html-toggle-notice {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.fb-html-view {
  flex: 1;
  display: flex;
  min-height: 0;
}
.fb-html-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  background: var(--surface-primary);
  border-radius: var(--radius-md);
}

/* ---- Multi-file Tabs (file-tabs.js) ----
   The tab strip sits above the content area inside .fb-preview-container.
   Active tab uses --accent-soft as a subtle highlight; dirty dot mirrors the
   editor-toolbar dirty indicator pattern. */
.fb-tabs-host {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.fb-tabs-strip {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-secondary);
  flex-shrink: 0;
  /* No gap so adjacent tabs share their right-borders cleanly. */
}
.fb-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  border-right: 1px solid var(--border-default);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  user-select: none;
  white-space: nowrap;
  max-width: 200px;
  position: relative;
}
.fb-tab:hover { background: var(--surface-tertiary); }
.fb-tab.active {
  background: var(--accent-soft);
  color: var(--text-primary);
  border-bottom: 2px solid var(--accent-default);
  margin-bottom: -1px;
}
.fb-tab.dragging { opacity: 0.5; }
.fb-tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-tab-dirty-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-warning, #e5c07b);
  flex-shrink: 0;
}
.fb-tab-close {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px;
  color: var(--text-muted);
  line-height: 1;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fb-tab-close:hover {
  background: var(--surface-secondary);
  color: var(--text-primary);
}
.fb-tabs-content {
  flex: 1;
  display: flex;
  min-height: 0;
}
.fb-tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* fs-watcher external-change toast (#41 / ADR-0017) — non-blocking
   informational banner the TabManager emits when an external `change`
   event arrives for a dirty editor tab. Three escape hatches:
   Reload-discard / Compare / Keep-mine. Sits at the top of the tab
   content so it's visible without scrolling but doesn't intercept
   typing in the editor below. */
.fb-tab-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border-default);
  border-left: 3px solid var(--status-warning, #e5c07b);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.fb-tab-toast-msg {
  flex: 1;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-tab-toast-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ---- CSV Preview ---- */
.fb-csv-wrapper {
  /* Scrolls horizontally for wide CSVs and vertically for the
     virtualisation window. The IntersectionObserver root is set to this
     wrapper, so its overflow + height define the visible viewport. */
  overflow: auto;
  border-radius: var(--radius-md);
  /* Bound the height so the virtualisation actually has somewhere to
     scroll; the preview content area may itself scroll if this is taller. */
  max-height: clamp(320px, 60vh, 720px);
}
.fb-csv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}
.fb-csv-table th {
  background: var(--surface-tertiary);
  font-weight: var(--weight-semibold);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  /* Sticky header — works because the wrapper is the scrolling ancestor. */
  position: sticky;
  top: 0;
  z-index: 1;
}
.fb-csv-table td {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  /* Cells don't wrap; horizontal overflow handles wide values. */
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-csv-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: background var(--duration-fast);
}
.fb-csv-th-sortable:hover { background: var(--surface-elevated); }
.fb-csv-th-sortable:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: -2px;
}
.fb-csv-th-arrow {
  display: inline-block;
  margin-left: var(--space-1);
  color: var(--accent-default);
  font-size: 0.85em;
}
.fb-csv-sentinel {
  /* Invisible row-shaped target the IntersectionObserver watches. */
  height: 1px;
  width: 100%;
}

/* ---- Truncated Notice ---- */
.fb-truncated-notice {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: var(--space-2);
  text-align: center;
  background: var(--surface-tertiary);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
}

/* ---- Upload Overlay (drag-drop) ---- */
.file-browser-upload-overlay {
  position: absolute; inset: 0;
  background: var(--accent-soft);
  border: 2px dashed var(--accent-default);
  display: none; align-items: center; justify-content: center;
  z-index: 10;
  border-radius: var(--radius-md);
}
.file-browser-upload-overlay.active { display: flex; }
.fb-upload-overlay-content {
  color: var(--accent-default);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  text-align: center;
}

/* ---- Upload Progress Bar ---- */
.fb-upload-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--accent-default);
  transition: width var(--duration-normal) var(--ease-default);
  z-index: 5;
}

/* ---- Status Bar ---- */
.fb-status-bar {
  display: flex; align-items: center;
  gap: var(--space-2);
  height: 24px; min-height: 24px;
  padding: 0 var(--space-3);
  background: var(--surface-elevated);
  border-top: 1px solid var(--border-default);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ---- Editor Area ---- */
.file-browser-editor {
  flex: 1;
  display: none; flex-direction: column;
  min-height: 0;
}
.file-browser-editor.visible { display: flex; }
.file-browser-editor-toolbar {
  display: flex; align-items: center;
  gap: var(--space-2);
  height: 40px; min-height: 40px;
  padding: 0 var(--space-3);
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}
.file-browser-editor-filename {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-browser-editor-dirty {
  display: none;
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--status-warning);
  flex-shrink: 0;
}
.file-browser-editor-dirty.visible { display: inline-block; }
.file-browser-editor-autosave {
  display: flex; align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  background: transparent; border: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.file-browser-editor-autosave.active {
  background: var(--accent-soft);
  color: var(--accent-default);
}
.file-browser-editor-content { flex: 1; min-height: 0; overflow: auto; }
.file-browser-editor-status {
  display: flex; align-items: center;
  gap: var(--space-2);
  height: 24px; min-height: 24px;
  padding: 0 var(--space-3);
  background: var(--surface-elevated);
  border-top: 1px solid var(--border-default);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ---- Overwrite Banner ---- */
.file-browser-overwrite-banner {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-elevated);
  border: 1px solid var(--status-warning);
  border-radius: var(--radius-md);
  margin: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* ---- Conflict Banner ---- */
.file-browser-conflict-banner {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-elevated);
  border: 1px solid var(--status-error);
  border-radius: var(--radius-md);
  margin: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.file-browser-conflict-banner-actions {
  display: flex; gap: var(--space-2); margin-top: var(--space-2);
}

/* ---- View Transition Animations ---- */
@keyframes fbSlideInRight {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fbSlideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-30px); opacity: 0; }
}
.file-browser-view-enter { animation: fbSlideInRight var(--duration-fast) var(--ease-out); }
.file-browser-view-exit { animation: fbSlideOutLeft var(--duration-fast) var(--ease-out); }

/* ---- Empty State ---- */
.fb-empty-message,
.file-browser-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--space-8);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
  gap: var(--space-2);
}

/* ---- Loading Spinner ---- */
.fb-loading,
.file-browser-loading {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8);
}
.file-browser-spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent-default);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

/* ---- Mobile Backdrop ---- */
.file-browser-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: var(--overlay-backdrop);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
}
.file-browser-backdrop.active { display: block; }

/* ============================================================
   Responsive — Medium Viewports (tablet overlay)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .file-browser-panel.open { z-index: var(--z-modal); }
}

/* ============================================================
   Responsive — Small Viewports (mobile full-width)
   ============================================================ */
@media (max-width: 768px) {
  .file-browser-panel { width: 100%; z-index: var(--z-modal); }

  .file-browser-item {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }
  .file-item-edit { opacity: 0.6; }

  .fb-back-btn,
  .fb-header-btn { width: 36px; height: 36px; }

  .fb-breadcrumbs {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .fb-search-input {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
  }
}

/* ============================================================
   Terminal Path Context Menu
   ============================================================ */
.fb-terminal-context-menu {
  position: fixed;
  z-index: var(--z-dropdown);
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1) 0;
  min-width: 180px;
}

.fb-terminal-context-menu .ctx-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: background-color var(--duration-fast);
}

.fb-terminal-context-menu .ctx-item:hover:not(.disabled) {
  background: var(--surface-tertiary);
}

.fb-terminal-context-menu .ctx-item.disabled {
  opacity: 0.4;
  cursor: default;
}

.fb-terminal-context-menu .ctx-icon {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

/* ============================================================
   Overwrite Banner (inner elements)
   ============================================================ */
.fb-overwrite-msg {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.fb-overwrite-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ============================================================
   Markdown render (markdown-render.js)
   ============================================================ */
.fb-markdown-rendered {
  /* Tight typography for the in-panel markdown viewer; design is reading-
     centric, not document-centric (the editor is for that). */
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  padding: var(--space-3);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.fb-markdown-rendered h1,
.fb-markdown-rendered h2,
.fb-markdown-rendered h3,
.fb-markdown-rendered h4 {
  margin: var(--space-4) 0 var(--space-2);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
}
.fb-markdown-rendered h1 { font-size: var(--text-2xl); border-bottom: 1px solid var(--border-default); padding-bottom: var(--space-1); }
.fb-markdown-rendered h2 { font-size: var(--text-xl); border-bottom: 1px solid var(--border-default); padding-bottom: var(--space-1); }
.fb-markdown-rendered h3 { font-size: var(--text-lg); }
.fb-markdown-rendered h4 { font-size: var(--text-md); }
.fb-markdown-rendered p { margin: 0 0 var(--space-3); }
.fb-markdown-rendered a {
  color: var(--accent-default);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast);
}
.fb-markdown-rendered a:hover { border-bottom-color: var(--accent-default); }
.fb-markdown-rendered code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-tertiary);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}
.fb-markdown-rendered pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--surface-tertiary);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 0 0 var(--space-3);
}
.fb-markdown-rendered pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}
.fb-markdown-rendered blockquote {
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-left: 3px solid var(--accent-default);
  color: var(--text-secondary);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.fb-markdown-rendered ul,
.fb-markdown-rendered ol { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
.fb-markdown-rendered li { margin-bottom: var(--space-1); }
.fb-markdown-rendered table {
  border-collapse: collapse;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  width: 100%;
}
.fb-markdown-rendered th,
.fb-markdown-rendered td {
  border: 1px solid var(--border-default);
  padding: var(--space-1-5) var(--space-2);
  text-align: left;
}
.fb-markdown-rendered th { background: var(--surface-tertiary); font-weight: var(--weight-semibold); }
.fb-markdown-rendered img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}
.fb-markdown-rendered hr {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: var(--space-4) 0;
}
.fb-markdown-rendered input[type="checkbox"] {
  /* Markdown task-list checkboxes — visible but read-only */
  margin-right: var(--space-1);
  pointer-events: none;
}

/* Mermaid diagram blocks — wrapper sized by mermaid SVG */
.fb-mermaid-block {
  display: block;
  margin: var(--space-3) 0;
  text-align: center;
}
.fb-mermaid-block svg { max-width: 100%; height: auto; }
.fb-mermaid-error {
  color: var(--status-error);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--surface-tertiary);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--status-error);
}

/* "Feature unavailable" inline badge — used by the markdown render's KaTeX
   and Mermaid lazy loaders when the CDN import fails. Tells the user the
   raw source is still being shown so the page is not silently broken. */
.fb-md-feature-unavailable {
  display: inline-block;
  margin: var(--space-1) 0;
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--surface-tertiary);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
}

.fb-md-loading {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-3);
  text-align: center;
}

.fb-md-fallback {
  /* Markdown failed to render entirely — show source as <pre>. */
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  padding: var(--space-3);
}

/* ============================================================
   Monaco loader fallback (file-viewer-monaco.js → renderPlainTextFallback)
   ============================================================ */
.fb-monaco-fallback {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.fb-monaco-fallback-notice {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--surface-tertiary);
  padding: var(--space-1-5) var(--space-3);
  border-bottom: 1px solid var(--border-default);
}
.fb-monaco-fallback-pre {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--surface-secondary);
  color: var(--text-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ---- Diff Viewer (file-diff.js, mounted by TabManager mode='diff') ---- */
.fb-diff-host {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.fb-diff-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-secondary);
  flex-shrink: 0;
}
.fb-diff-title {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.fb-diff-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  overflow: hidden;
  background: var(--surface-tertiary);
}
.fb-diff-body .monaco-diff-editor {
  flex: 1;
  min-height: 0;
}

/* ---- Markdown viewer (markdown-render.js, .md / .mdx / .markdown files) ---- */
.fb-markdown-host {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

/* ---- Notebook viewer (notebook-render.js, .ipynb files) ---- */
.fb-notebook-host {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
}
.fb-nb-loading {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.fb-notebook-rendered {
  padding: var(--space-3);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.fb-notebook-rendered img {
  max-width: 100%;
  height: auto;
}
.fb-notebook-rendered pre {
  background: var(--surface-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.fb-notebook-rendered table {
  border-collapse: collapse;
  margin: var(--space-2) 0;
}
.fb-notebook-rendered td,
.fb-notebook-rendered th {
  border: 1px solid var(--border-default);
  padding: var(--space-1) var(--space-2);
}
.fb-nb-fallback {
  padding: var(--space-2);
}

/* ---- Diff dropdown menu in the preview header ---- */
.fb-diff-menu-wrap { position: relative; display: inline-block; }
.fb-diff-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  padding: var(--space-1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.fb-diff-menu-item {
  appearance: none;
  background: none;
  border: 0;
  text-align: left;
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--text-sm);
}
.fb-diff-menu-item:hover { background: var(--surface-tertiary); }
.fb-diff-menu-item:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: -2px;
}

/* ---- Cross-file search panel (file-search.js, Cmd+Shift+F) ----
   Sits ABOVE the file-list / preview area, anchored to the panel itself
   so it overlays whatever is currently shown. Toggle via Cmd/Ctrl+Shift+F
   from anywhere in the app, or Esc to dismiss. */
.fb-search-panel {
  position: absolute;
  top: 40px;            /* below the panel header */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--surface-secondary);
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.fb-search-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-elevated);
  flex-shrink: 0;
}
.fb-search-panel-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--surface-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  outline: none;
}
.fb-search-panel-input:focus { border-color: var(--accent-default); }
.fb-search-toggle {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  flex-shrink: 0;
}
.fb-search-toggle:hover { background: var(--surface-tertiary); }
.fb-search-toggle.active {
  background: var(--accent-soft);
  color: var(--accent-default);
  border-color: var(--accent-default);
}
.fb-search-glob {
  width: 110px;
  padding: var(--space-1) var(--space-2);
  background: var(--surface-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  outline: none;
  flex-shrink: 0;
}
.fb-search-close {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
.fb-search-close:hover {
  color: var(--text-primary);
  background: var(--surface-tertiary);
}
.fb-search-status {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-secondary);
  flex-shrink: 0;
}
.fb-search-status.busy { color: var(--accent-default); }
.fb-search-status.error { color: var(--status-error, #f85149); }
.fb-search-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  background: var(--surface-secondary);
}
.fb-search-result {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.fb-search-result:hover {
  background: var(--surface-tertiary);
}
.fb-search-result:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: -2px;
}
.fb-search-result-loc {
  color: var(--accent-default);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-search-result-text {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- FindPanel — Cmd-P "Go to File" picker (Part B) ---- */
/*
 * Mounted into <body> so it floats above the terminal and the file-browser
 * panel both. Centered modal with a max-width like VS Code's quick-open.
 * Keyboard nav handled by FindPanel itself; we just style.
 */
.fb-find-panel {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-modal, 1200);
  width: min(640px, 92vw);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated, var(--surface-secondary));
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.fb-find-panel-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--border-default);
}
.fb-find-panel-input {
  flex: 1;
  padding: 8px 10px;
  background: var(--surface-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  outline: none;
}
.fb-find-panel-input:focus { border-color: var(--accent-default); }
.fb-find-close {
  background: none;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
}
.fb-find-close:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.fb-find-truncation {
  padding: 6px 12px;
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: 12px;
  border-bottom: 1px solid var(--border-default);
}
.fb-find-status {
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.fb-find-status.busy { color: var(--accent-default); }
.fb-find-status.error { color: var(--danger-default, #e53e3e); }
.fb-find-results {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.fb-find-result {
  display: block;
  text-align: left;
  width: 100%;
  background: none;
  border: 0;
  padding: 8px 12px;
  color: var(--text-primary);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-find-result:hover,
.fb-find-result.focused { background: var(--accent-soft); }
.fb-find-result-basename { font-weight: 600; }
.fb-find-result-parent { color: var(--text-tertiary); margin-left: 4px; font-size: 12px; }

/* ---- Ambiguity picker (Part C — terminal-link multi-hit resolver) ---- */
.fb-ambiguity-picker {
  z-index: var(--z-modal, 1200);
  width: min(480px, 90vw);
  max-height: 280px;
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated, var(--surface-secondary));
  border: 1px solid var(--accent-default);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
}
.fb-ambiguity-header {
  padding: 6px 10px;
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-default);
}
.fb-ambiguity-row {
  display: block;
  text-align: left;
  width: 100%;
  background: none;
  border: 0;
  padding: 6px 10px;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-ambiguity-row:hover,
.fb-ambiguity-row.focused { background: var(--accent-soft); }
.fb-ambiguity-basename { font-weight: 600; }
.fb-ambiguity-parent { color: var(--text-tertiary); font-size: 12px; }