/* Editor tab layout. Reuses the shared design tokens + components from library.css
   (topbar, nav pills, soft-button, sidebar-card, status-chip, tiny-pill). This file only
   adds the editor-specific two-pane workspace + the embedded TSL Player frame. */

.editor-shell {
  /* Sidebar width is user-resizable (drag handle) and collapsible; both persist in localStorage. */
  grid-template-columns: var(--editor-sidebar-w, 320px) 1fr;
  transition: grid-template-columns 0.18s ease, gap 0.18s ease;
}
.editor-shell.sidebar-collapsed { grid-template-columns: 0 1fr; }
.editor-shell.sidebar-collapsed .editor-sidebar {
  visibility: hidden;
  overflow: hidden;
  min-width: 0;
}

/* Full-viewport editor app at every real screen size (editor.css loads only on /editor).
   The topbar keeps its height; the shell fills the rest; the media row fills the workspace
   and the JSON/toolbar card sits just below it. This also overrides library.css's responsive
   single-column (<1180px) and its ">=1180px app-shell" grid so the resizable/collapsible
   two-column sidebar layout is consistent at every size >=768px. Phones (<768px, handled
   further below) fall back to normal vertical scrolling with stacked panes. */
@media (min-width: 768px) {
  html, body { height: 100%; }
  body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  .library-topbar { flex: 0 0 auto; }

  .editor-shell {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0 24px 12px;   /* small bottom pad so the cards nearly fill the screen */
    grid-template-columns: var(--editor-sidebar-w, 320px) 1fr !important;
  }
  .editor-shell.sidebar-collapsed {
    grid-template-columns: 0 1fr !important;
    gap: 0 !important;
  }

  /* Sidebar fills its column and scrolls its label list INTERNALLY, so the page itself
     never scrolls and the media cards keep the full height. The !important rules override
     library.css's max-width:1180px block, which otherwise reorders the label list below
     the stats card and disables the list's inner scroll. */
  .editor-sidebar { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
  .editor-sidebar .sidebar-card { margin-bottom: 0; }
  .editor-sidebar .list-card {
    order: -1 !important;   /* label list on top, stats/progress below it */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .editor-sidebar .sign-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto !important;
  }
  .editor-sidebar .stats-card { flex: 0 0 auto; }

  /* Content fills the shell and is the scroll container; workspace is one screen tall so
     the media row (below) can be a FULL screen while the JSON/toolbar card sits beneath it —
     scroll the content pane down to reach it. */
  .editor-content { height: 100%; min-height: 0; overflow-y: auto; }
  .editor-workspace { height: 100%; min-height: 0; }
}
.editor-sidebar { position: relative; min-width: 0; }
.editor-sidebar-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -8px;
  width: 12px;
  cursor: col-resize;
  z-index: 5;
}
.editor-sidebar-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
}
.editor-sidebar-resizer:hover::after,
.editor-sidebar-resizer.dragging::after { background: var(--line); }
.editor-sidebar-expand {
  position: fixed;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  border-radius: 999px;
  padding: 12px 10px;
  box-shadow: var(--shadow);
}

/* --- access gate (non-admins) --------------------------------------------- */
.editor-gate {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 64px 24px;
}
.editor-gate-card {
  max-width: 520px;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
  text-align: center;
}
.editor-gate-icon { font-size: 40px; line-height: 1; margin-bottom: 12px; }
.editor-gate-card h2 { margin: 0 0 10px; font-size: 20px; color: var(--text); }
.editor-gate-card p { margin: 0 0 22px; color: var(--muted); line-height: 1.6; }
.editor-gate-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- sidebar filters ------------------------------------------------------- */
.editor-filter-row { margin: 8px 0 10px; }
.editor-status-filters { margin-bottom: 6px; }

/* --- workspace ------------------------------------------------------------- */
.editor-content { min-width: 0; }
.editor-workspace {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  /* On desktop .editor-content is a fixed-height (calc(100vh-72px)) box; fill it so the
     media row below can flex to take all the height the compact toolbar doesn't use. */
  height: 100%;
}
/* Media panes on top, the compact header/toolbar card below them. Reordered with flex
   `order` (not DOM order) so the JS that targets these elements keeps working. */
.editor-media-row { order: 1; }
.editor-toolbar-card { order: 2; }

/* Kept intentionally compact: small fonts + tight padding so the header card
   stays a couple of short rows and leaves more height for the media panes. */
.editor-toolbar-card { padding: 8px 12px; }
.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.editor-toolbar-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.editor-toolbar-info h2 { margin: 0; font-size: 15px; color: var(--text); }
.editor-copy-label { padding: 3px 9px; font-size: 12px; line-height: 1.4; }
.editor-toolbar-info .meta-line { font-size: 11.5px; }
.editor-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Shrink the selects + buttons inside the header so the actions fit on fewer rows. */
.editor-toolbar .library-select { padding: 4px 8px; font-size: 12px; }
.editor-toolbar .soft-button { padding: 5px 9px; font-size: 12px; }
.editor-version-label { margin: 0; white-space: nowrap; font-size: 11.5px; }
.editor-version-select { min-width: 150px; max-width: 220px; }
.editor-fbx-btn.has-fbx {
  border-color: var(--green);
  color: var(--green);
  font-weight: 600;
}
.editor-fbx-btn.uploading { opacity: 0.65; cursor: wait; }
.editor-fbx-delete { color: var(--red); }
.editor-fbx-status { color: var(--green) !important; font-weight: 600; }
.editor-fbx-avatar-type { min-width: 92px; width: auto; }
.editor-toolbar-status {
  display: flex;
  gap: 12px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.editor-toolbar-status .meta-line { font-size: 11.5px; }
#editorSaveStatus { font-weight: 600; }

.editor-workspace.verify-model-only .editor-toolbar-actions,
.editor-workspace.verify-model-only .editor-toolbar-status {
  display: none !important;
}
.editor-workspace.verify-model-only .editor-toolbar {
  justify-content: flex-start;
}
.editor-workspace.verify-model-only .editor-toolbar-card {
  order: 1;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 3;
}
.editor-workspace.verify-model-only .editor-media-row {
  order: 2;
  flex: 1 1 auto;
  min-height: 0 !important;
}

/* --- verify workflow bar (Submit / Approve / Not Approve) -------------------
   (the .editor-workflow-bar rule itself lives further down, with its hover states) */
.editor-workflow-spacer { flex: 1 1 auto; }
.editor-workflow-bar .meta-line { min-width: 0; }

/* --- embedded player frame ------------------------------------------------- */
.editor-frame-card {
  padding: 0;
  overflow: hidden;
  flex: 1 1 auto;
  /* min-height:0 (not a fixed 620px) so the card shrinks to fit the height-constrained
     workspace instead of overflowing it — the media row's own min-height keeps it tall.
     The <=900px stacked layout below restores a fixed floor. */
  min-height: 0;
  display: flex;
}
.editor-player-frame {
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 0;
  display: block;
  background: #12141a;
}

/* --- label list "done" badge ---------------------------------------------- */
.sign-list .sign-item .editor-done-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
  white-space: nowrap;
}
/* Word class (POS) chip; muted so it never competes with the status colors. */
.sign-list .sign-item .editor-pos-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.editor-sidebar .editor-pos-filter {
  width: 100%;
  cursor: pointer;
}
/* Word-list status edges: color on the left border the base .sign-item already reserves
   (border-left: 4px solid transparent in library.css). The :hover/.active compounds +
   !important are required — library.css sets border-left-color with !important on hover
   (teal) and on .active in both themes, which would erase the status color exactly on the
   rows the user is pointing at. has-rejected is last so red wins over amber/green. */
.editor-sidebar .sign-item.st-waiting,
.editor-sidebar .sign-item.st-waiting:hover,
.editor-sidebar .sign-item.st-waiting.active { border-left-color: var(--amber) !important; }
.editor-sidebar .sign-item.st-done,
.editor-sidebar .sign-item.st-done:hover,
.editor-sidebar .sign-item.st-done.active { border-left-color: var(--green) !important; }
.editor-sidebar .sign-item.has-rejected,
.editor-sidebar .sign-item.has-rejected:hover,
.editor-sidebar .sign-item.has-rejected.active { border-left-color: var(--red) !important; }

/* --- media row: real clip beside the player, user-resizable split ------------ */
.editor-media-row {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
/* >=768px: the video + avatar cards fill a WHOLE screen (min-height:100% of the one-screen-
   tall workspace); the JSON/toolbar card sits just below, reached by scrolling the content
   pane down. Placed after the base rule so it wins by source order. */
@media (min-width: 768px) {
  .editor-media-row { min-height: 100%; }
}
/* Video width is a PERCENT of the row (not fixed px) so collapsing the sidebar
   widens the clip and the avatar player proportionally. */
.editor-video-card {
  flex: 0 0 var(--editor-video-pct, 32%);
  width: var(--editor-video-pct, 32%);
  min-width: 220px;
  max-width: 62vw;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.editor-video-head { display: flex; flex-direction: column; gap: 4px; }
.editor-video-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.editor-video-head h3 { margin: 0; font-size: 14px; color: var(--text); }
.editor-video-tools { display: flex; align-items: center; gap: 6px; }
.editor-rate-select { min-width: 74px; padding: 4px 8px; font-size: 12px; }
.editor-mini-btn { padding: 4px 10px; font-size: 12px; white-space: nowrap; }
.editor-mini-btn.active { border-color: var(--green); color: var(--green); font-weight: 600; }
.editor-video {
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: 10px;
  background: #000;
  object-fit: contain;
}
.editor-split-handle {
  flex: 0 0 12px;
  cursor: col-resize;
  position: relative;
}
.editor-split-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 4px;
  border-radius: 2px;
  background: var(--line);
}
.editor-split-handle:hover::after,
.editor-split-handle.dragging::after { background: var(--muted); }

/* --- toolbar extras -------------------------------------------------------- */
.editor-file-select { min-width: 180px; max-width: 300px; }
.editor-step-btn { padding: 4px 8px; }
.editor-file-index { white-space: nowrap; min-width: 40px; font-size: 11.5px; }
.editor-toolbar-card .tiny-pill { padding: 2px 8px; font-size: 10.5px; }

/* Word navigation buttons (prev/next word) */
.editor-word-nav { display: flex; gap: 3px; align-items: center; }
.editor-nav-btn {
  padding: 3px 7px;
  font-size: 13px;
  border-radius: 6px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.editor-nav-btn:hover { opacity: 1; background: var(--panel-soft); }

/* Save button with kbd hint */
.editor-save-btn { display: flex; align-items: center; gap: 4px; }

/* Kbd badge (keyboard shortcut indicator) */
.kbd {
  display: inline-block;
  font-size: 9px;
  line-height: 1;
  padding: 2px 4px;
  background: var(--panel-soft);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono, monospace);
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
}

/* Batch mode toggle */
.editor-batch-btn {
  padding: 4px 10px;
  font-size: 11.5px;
  border-radius: 6px;
  font-weight: 600;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.editor-batch-btn.active {
  opacity: 1;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.editor-batch-btn.active .kbd { background: rgba(255,255,255,0.2); color: #fff; border-color: rgba(255,255,255,0.3); }

/* Workflow buttons */
.editor-approve-btn {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  font-weight: 600;
  padding: 5px 14px;
}
.editor-approve-btn:hover { background: #1a9e6f; }
.editor-reject-btn {
  border-color: var(--red);
  color: var(--red);
  padding: 5px 14px;
}
.editor-reject-btn:hover { background: var(--red); color: #fff; }
.editor-workflow-btn {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Save success animation */
@keyframes editorSavePulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
.editor-save-btn.save-flash {
  animation: editorSavePulse 0.5s ease-out;
}

/* Toolbar status row improvements */
.editor-toolbar-status .meta-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Improve workflow bar visibility */
.editor-workflow-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  transition: border-color 0.2s;
}
.editor-workflow-bar:hover {
  border-top-color: var(--muted);
}

/* Keyboard shortcut overlay (shown on ? key) */
.editor-shortcut-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.editor-shortcut-overlay.hidden { display: none; }
.editor-shortcut-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 24px 28px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}
.editor-shortcut-box h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--text);
}
.editor-shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.editor-shortcut-row:last-child { border-bottom: none; }
.editor-shortcut-label {
  color: var(--muted);
  font-size: 13px;
}
.editor-shortcut-box .kbd {
  font-size: 11px;
  padding: 3px 7px;
}

/* ---- Leaderboard ---- */
.nav-pill-leaderboard { cursor: pointer; font: inherit; }
.nav-pill-leaderboard.hidden { display: none; }
.editor-leaderboard-box { max-width: 560px; }
.editor-leaderboard-box h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.editor-leaderboard-caption {
  margin: -6px 0 14px;
  color: var(--muted);
  font-size: 12.5px;
}
.editor-leaderboard-body { display: flex; flex-direction: column; gap: 6px; }
.editor-leaderboard-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 18px 0;
}
.editor-leaderboard-row {
  display: grid;
  grid-template-columns: 32px 34px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.editor-leaderboard-row.rank-1 { border-color: #f5c518; background: rgba(245,197,24,0.08); }
.editor-leaderboard-row.rank-2 { border-color: #b8c0cc; }
.editor-leaderboard-row.rank-3 { border-color: #cd7f32; }
.editor-leaderboard-row.is-me { outline: 2px solid var(--accent, #2563eb); outline-offset: -1px; }
.editor-leaderboard-rank {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
}
.editor-leaderboard-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.editor-leaderboard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.editor-leaderboard-name {
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-leaderboard-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.editor-leaderboard-count b { font-size: 15px; color: var(--text); }
.editor-leaderboard-approved {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  padding-left: 4px;
}

/* ---- FBX trim modal ---- */
.editor-trim-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  padding: 20px;
}
.editor-trim-modal.hidden { display: none; }
.editor-trim-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px 24px;
  width: min(1280px, 97vw);
  height: 94vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.editor-trim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.editor-trim-head h3 { margin: 0; font-size: 16px; color: var(--text); }
.editor-trim-filename { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.editor-trim-preview {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 320px;
  background: #0b0e13;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.editor-trim-preview-frame { width: 100%; height: 100%; border: 0; display: block; }
.editor-trim-controls { display: flex; flex-direction: column; gap: 8px; }
.editor-trim-transport { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.editor-trim-play {
  min-width: 108px;
  font-size: 14px;
  padding: 9px 16px;
}
.editor-trim-time {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 56px;
}
.editor-trim-hint { font-size: 12px; color: var(--muted); }
/* Dual-thumb range: two stacked native sliders over one shared filled track. */
.editor-trim-track {
  --trim-a: 0%;
  --trim-b: 100%;
  --trim-p: 0%;
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--line);
  margin: 6px 2px 2px;
  cursor: pointer;          /* drag the red playhead to scrub */
  touch-action: none;       /* let pointer-drag scrub instead of scrolling on touch */
}
.editor-trim-track.scrubbing { cursor: grabbing; }
/* Follow the finger instantly while scrubbing — the idle easing would lag behind. */
.editor-trim-track.scrubbing .editor-trim-playhead { transition: none; }
.editor-trim-fill {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--trim-a);
  right: calc(100% - var(--trim-b));
  background: var(--accent, #2563eb);
  border-radius: 5px;
}
.editor-trim-playhead {
  position: absolute;
  top: -4px; bottom: -4px;
  left: var(--trim-p);
  width: 3px;
  margin-left: -1.5px;
  background: #f43f5e;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
  pointer-events: none;
  transition: left 0.08s linear;
}
.editor-trim-ranges { position: relative; height: 22px; }
.editor-trim-range {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  width: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none; /* only the thumbs catch events so both sliders stay usable */
}
.editor-trim-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  cursor: pointer;
}
.editor-trim-range::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  border: 2px solid #fff;
  cursor: pointer;
}
.editor-trim-range:disabled::-webkit-slider-thumb { background: var(--muted); cursor: default; }
.editor-trim-range:disabled::-moz-range-thumb { background: var(--muted); cursor: default; }
.editor-trim-readout {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
  flex-wrap: wrap;
}
.editor-trim-readout b { color: var(--text); font-variant-numeric: tabular-nums; }
.editor-trim-duration { margin-left: auto; }
.editor-trim-speed {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  flex-wrap: wrap;
}
.editor-trim-speed-range { flex: 1 1 180px; min-width: 140px; accent-color: var(--accent); }
.editor-trim-speed-value {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
  min-width: 52px;
  text-align: right;
}
.editor-trim-speed-preset { padding: 3px 9px; font-size: 11.5px; }
.editor-trim-status { margin: 0; font-size: 12px; color: var(--muted); min-height: 15px; }
.editor-trim-actions { display: flex; align-items: center; gap: 8px; }
.editor-trim-spacer { flex: 1; }

/* Phones (<768px): normal vertical scrolling, media panes stacked with real heights,
   the JSON/toolbar card below them. */
@media (max-width: 767px) {
  .editor-shell { grid-template-columns: 1fr; }
  .editor-media-row { flex-direction: column; gap: 12px; min-height: 0; }
  .editor-video-card { flex-basis: auto; width: 100%; max-width: none; }
  .editor-video { max-height: 44vh; }
  .editor-split-handle { display: none; }
  .editor-frame-card, .editor-player-frame { min-height: 70vh; }
}

/* --- toast ----------------------------------------------------------------- */
.editor-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--text);
  color: var(--panel);
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: 14px;
  max-width: 90vw;
}
.editor-toast.error { background: var(--red); color: #fff; }
.editor-toast.success { background: var(--green); color: #fff; }

/* --- filter chip counts ------------------------------------------------------ */
.status-chip .chip-count {
  margin-left: 6px;
  font-size: 10.5px;
  opacity: 0.75;
  font-weight: 700;
}
.status-chip[data-status="rejected"]:not(.active) .chip-count { color: var(--red); }

/* --- รอ Verify sub-filter (FBX / JSON) --------------------------------------- */
.editor-subfilters { margin-top: -2px; padding-left: 10px; }
.status-chip.sub {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
}

/* --- saved-but-not-submitted pill -------------------------------------------- */
.tiny-pill.edited { background: var(--accent-soft); color: var(--accent); }

/* --- word-list empty / loading state ------------------------------------------ */
.editor-list-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* --- reject-reason callout (the editor's actual task, not a muted meta-line) --- */
.editor-reject-note {
  color: var(--red) !important;
  background: var(--red-soft);
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 4px 10px;
  font-weight: 600;
  font-size: 12.5px !important;
}

/* --- inline reject panel (reason required) ------------------------------------ */
.editor-reject-panel {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.editor-reject-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-basis: 100%;
}
/* Base .tiny-pill has no background/border of its own — give the chips a real pill look
   and a transparent border box so the hover outline actually renders. */
.editor-reject-chips .tiny-pill {
  cursor: pointer;
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid transparent;
}
.editor-reject-chips .tiny-pill:hover { border-color: var(--red); }
.editor-reject-panel textarea {
  flex: 1;
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  resize: vertical;
}

/* --- verify mode: unmistakable ------------------------------------------------ */
.editor-verify-banner {
  background: var(--accent-warm-soft);
  border-left: 4px solid var(--accent-warm);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 6px;
}
.editor-workspace.verify-model-only .editor-frame-card {
  outline: 2px solid var(--accent-warm);
  outline-offset: -2px;
}
/* The decision IS the verifier's whole job — not 12px buttons visually equal to Refresh. */
.editor-workspace.verify-model-only .editor-approve-btn,
.editor-workspace.verify-model-only .editor-reject-btn {
  padding: 9px 20px;
  font-size: 14px;
}

/* --- shortcut overlay close button --------------------------------------------- */
.editor-shortcut-close {
  float: right;
  margin: -4px -8px 0 0;
  padding: 2px 8px;
  font-size: 13px;
}

/* --- intent colors must survive dark mode ---------------------------------------
   library.css flattens ALL .soft-button in dark theme with !important (only
   .primary/.success/.danger are excepted), collapsing Approve/Reject/Batch/Sync to the
   same gray. editor.css loads after library.css, so equal-specificity !important here
   wins by source order. */
html[data-theme="dark"] .editor-approve-btn {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #06220f !important;
}
html[data-theme="dark"] .editor-reject-btn {
  background: transparent !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
}
html[data-theme="dark"] .editor-reject-btn:hover {
  background: var(--red) !important;
  color: #2a0c0c !important;
}
html[data-theme="dark"] .editor-batch-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #06222a !important;
}
html[data-theme="dark"] .editor-mini-btn.active {
  border-color: var(--green) !important;
  color: var(--green) !important;
}

.hidden { display: none !important; }