html, body {
  overscroll-behavior: none;
}

#wrapper canvas,
#vis_canvas,
#bg_canvas,
#pr_canvas,
.snap-canvas,
#UnseenCanvas,
#UnseenCanvasThr,
#UnseenCanvasMask,
#UnseenCanvasVis {
  touch-action: none;
  -webkit-touch-callout: none;
}

:-webkit-full-screen {
  background-color: rgb(41, 41, 41);
}
/* Firefox syntax */
:-moz-full-screen {
  background-color: rgb(41, 41, 41);
}
:-ms-fullscreen {
  background-color: rgb(41, 41, 41);
}
:fullscreen {
  background-color: rgb(41, 41, 41);
}

/* Table */

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

/* Set a fixed scrollable wrapper */
.tableWrap {
  height: 69vh;
}
/* Set header to stick to the top of the container (DB modal table only) */
#dbTable thead tr th {
  background: #dddddd;
  top: 0;
}

td,
th {
  border: none;
  text-align: left;
  padding: 8px;
}

td {
  max-width: 400px;
}

tbody tr:hover {
  cursor: pointer;
  background-color: rgb(41, 41, 41);
  color: white;
}

.actions_dots {
  text-align: center;
  padding: 5px;
  border-radius: 8px;
}

.actions_cell:hover .actions_dropdown {
  display: block;
  position: absolute;
}

.actions_dropdown {
  border-radius: 4px;
  z-index: 100;
  background-color: rgb(230, 230, 230);
  padding: 10px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 12%), 0 2px 2px rgb(0 0 0 / 12%),
    0 4px 4px rgb(0 0 0 / 12%), 0 8px 8px rgb(0 0 0 / 12%),
    0 16px 16px rgb(0 0 0 / 12%);
  display: none;
}

.delete_btn {
  padding: 8px 10px;
  color: #dc2626;
  border-radius: 8px;
  border: 2px solid #dc2626;
  margin-bottom: 10px;
}

.delete_btn:hover {
  color: white;
  background-color: #dc2626;
}

.archive_btn {
  padding: 8px 10px;
  background-color: #059669;
  color: white;
  border-radius: 8px;
  border: 2px solid #059669;
}

.archive_btn:hover {
  color: white;
  background-color: #10b981;
  border-color: #10b981;
}

.segmentation_row:hover .segmentation_delete_btn {
  visibility: visible;
}

.segmentation_delete_btn {
  padding: 8px 10px;
  color: #dc2626;
  border-radius: 8px;
  border: 2px solid #dc2626;
  visibility: hidden;
}

.segmentation_delete_btn:hover {
  color: white;
  border-color: #dc2626;
  background-color: #dc2626;
}

.the_dropdown {
  min-width: 150px;
  padding: 0;
}

.selectedoption {
  min-width: 150px;
  height: 14px;
  padding: 5px;
  font-weight: bold;
}

ul.the_dropdown,
.the_dropdown li ul {
  list-style-type: none;
  padding: 0;
}

.the_dropdown li a {
  color: black;
  text-decoration: none;
  background-color: rgb(230, 230, 230);
  min-width: 350px;
  display: block;
  padding: 10px 10px;
}

.the_dropdown li ul {
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 4px;
  display: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12);
}

.the_dropdown ul li:nth-child(n + 3) a:hover {
  background-color: rgb(198, 196, 196);
}

.the_dropdown li:hover ul {
  /* Display the dropdown on hover */
  display: block;
  position: absolute;
}

#uidInput {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
  min-width: 30%;
  max-width: 800px;
}

.search-container button {
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  margin-bottom: 30px;
  font-size: 17px;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

/* Modal Stuff */

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  padding-top: 5vh;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: rgb(230, 230, 230, 0.9);
  margin: auto;
  padding: 20px;
  padding-left: 40px;
  border: 3px solid #888;
  width: 80%;
  height: 80%;
  overflow: auto;
}

#controlsModalContent {
  background: rgb(28, 28, 28);
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  color: rgb(216, 216, 216);
  padding: 24px 32px;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
  width: 720px;
  max-width: 90%;
  height: 85%;
}

#controlsModalContent .close {
  color: rgba(216, 216, 216, 0.6);
  font-size: 24px;
}
#controlsModalContent .close:hover {
  color: rgb(0, 255, 242);
}

/* Profile bar */
.kb-profile-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(134, 205, 247, 0.15);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.kb-profile-pills {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.kb-profile-pill {
  padding: 5px 14px;
  border: 1px solid rgba(134, 205, 247, 0.25);
  border-radius: 16px;
  font-size: 12px;
  color: rgba(216, 216, 216, 0.6);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.kb-profile-pill:hover {
  border-color: rgba(134, 205, 247, 0.5);
  color: rgb(216, 216, 216);
}
.kb-profile-pill.active {
  border-color: rgb(0, 255, 242);
  color: rgb(0, 255, 242);
  background: rgba(0, 255, 242, 0.08);
}
.kb-profile-pill.empty {
  border-style: dashed;
  opacity: 0.4;
}
.kb-profile-pill.empty:hover {
  opacity: 0.7;
}

.kb-profile-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.kb-btn {
  padding: 5px 12px;
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 4px;
  background: rgb(32, 32, 32);
  color: rgb(196, 196, 196);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.kb-btn:hover {
  background: rgb(7, 109, 104);
  border-color: rgb(7, 140, 134);
  color: white;
}
.kb-btn.danger {
  border-color: rgba(220, 38, 38, 0.4);
}
.kb-btn.danger:hover {
  background: rgba(220, 38, 38, 0.3);
  border-color: #dc2626;
}

/* Keybinding sections */
.kb-section-header {
  color: rgb(0, 255, 242);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 14px 0 6px 0;
  border-bottom: 1px solid rgba(134, 205, 247, 0.1);
  margin-bottom: 2px;
}
.kb-section-header:first-child {
  padding-top: 0;
}

/* Keybinding rows */
.kb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 4px;
  transition: background 0.1s;
}
.kb-row:hover {
  background: rgba(134, 205, 247, 0.05);
}

.kb-label {
  font-size: 13px;
  color: rgba(216, 216, 216, 0.85);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-key-badge {
  min-width: 90px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(134, 205, 247, 0.2);
  border-radius: 5px;
  color: rgb(0, 255, 242);
  font-size: 12px;
  font-family: 'Roboto Mono', monospace;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  flex-shrink: 0;
}
.kb-key-badge:hover {
  border-color: rgb(0, 255, 242);
  background: rgba(0, 255, 242, 0.06);
}
.kb-key-badge.rebinding {
  border-color: rgb(0, 255, 242);
  background: rgba(0, 255, 242, 0.12);
  animation: kb-pulse 1s ease-in-out infinite;
}

@keyframes kb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 242, 0.3); }
  50% { box-shadow: 0 0 8px 2px rgba(0, 255, 242, 0.2); }
}

/* Mouse shortcuts */
.kb-mouse-section {
  padding-top: 8px;
  border-top: 1px solid rgba(134, 205, 247, 0.1);
  margin-top: 12px;
}

.kb-mouse-header {
  color: rgba(216, 216, 216, 0.5);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

.kb-mouse-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  font-size: 12px;
}
.kb-mouse-row .kb-label {
  font-size: 12px;
  color: rgba(216, 216, 216, 0.6);
}
.kb-mouse-row .kb-key-static {
  min-width: 90px;
  text-align: center;
  font-size: 11px;
  color: rgba(216, 216, 216, 0.45);
  font-family: 'Roboto Mono', monospace;
}

/* Links footer */
.kb-links {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid rgba(134, 205, 247, 0.1);
}
.kb-links a {
  color: rgba(134, 205, 247, 0.7);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.15s;
}
.kb-links a:hover {
  color: rgb(0, 255, 242);
}

/* Dropdown menu for save/load */
.kb-dropdown-wrap {
  position: relative;
  display: inline-block;
}
.kb-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 300;
  min-width: 160px;
  padding: 4px 0;
  background: rgb(32, 32, 32);
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  margin-top: 2px;
}
.kb-dropdown-menu.open {
  display: block;
}
.kb-dropdown-item {
  padding: 7px 14px;
  font-size: 12px;
  color: rgb(196, 196, 196);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.kb-dropdown-item:hover {
  background: rgb(7, 109, 104);
  color: white;
}
.kb-dropdown-item.empty-slot {
  color: rgba(196, 196, 196, 0.4);
  font-style: italic;
}
.kb-dropdown-sep {
  height: 1px;
  background: rgba(134, 205, 247, 0.15);
  margin: 4px 0;
}

tr:hover .dropdown-icon {
  filter: invert(100%) sepia(0%) saturate(2625%) hue-rotate(182deg)
    brightness(116%) contrast(100%);
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@keyframes animatetop {
  from { top: -300px; opacity: 0; }
  to { top: 0; opacity: 1; }
}

#splitContainer {
  position: absolute;
  left: 286px;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  overflow: hidden;
}

#mainPanel {
  flex: 1;
  position: relative;
  min-width: 200px;
  overflow: hidden;
  background: #000;
}

#wrapper {
  position: absolute;
  background: #000;
  /* The old #bg/#pr/#vis_canvas 1px border lived ON the canvas with
   * content-box sizing, which pushed the canvas 2px past the wrapper
   * and shifted the image 1px in from (0,0). Same visual cue but as an
   * OUTSET box-shadow on the wrapper itself: paints in the 4px gutter
   * around the wrapper, no overflow, no displacement. Overridden by the
   * plane-coloured ring in quad mode. */
  box-shadow: 0 0 0 1px rgb(134, 205, 247);
}

#divider {
  width: 6px;
  cursor: col-resize;
  background: rgba(134, 205, 247, 0.15);
  flex-shrink: 0;
  transition: background 0.1s;
}
#divider:hover, #divider.dragging {
  background: rgba(134, 205, 247, 0.4);
}

/* ─── Quad layout (Shift+4) ──────────────────────────────────────────────
 *
 * Single-view default: every quad-only element is display:none. In quad mode
 * mainPanel becomes a 2x2 CSS grid with four cells:
 *   TL: existing #wrapper        (active editor, behaviour unchanged — axial)
 *   TR: #quad3DHost              (3D viewer hosted via medseg3d.open())
 *   BL: snapPanel_BL             (coronal snap, .snap-wrapper)
 *   BR: snapPanel_BR             (sagittal snap, .snap-wrapper)
 * secondPanel + divider stay completely out of quad layout.
 *
 * Each .snap-wrapper mirrors the main #wrapper idiom one-for-one: a square
 * sized box (style.width/height set by SnapshotView.relayout) with bg/pr/vis
 * canvases stacked absolutely on top of each other, and a vertical slider
 * absolute on the right edge. Same shape, same handlers, just different
 * state. */
.snap-wrapper,
.quad3d-host {
  display: none;
}

body.layout-quad #mainPanel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  box-sizing: border-box;
}
/* #wrapper is position:absolute by default (so its canvases can stack). In
 * quad mode it joins grid placement via grid-area and JS (resizeCanvas) sizes
 * it to the cell dimensions via MultiView.cellSize, so it fills the TL cell
 * exactly — no centering needed. */
body.layout-quad #wrapper {
  grid-area: 1 / 1 / 2 / 2;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
}
body.layout-quad #snapPanel_BL { grid-area: 2 / 1 / 3 / 2; }
body.layout-quad #snapPanel_BR { grid-area: 2 / 2 / 3 / 3; }
/* JS (SnapshotView.relayout) sizes the snap-wrapper to the same cell
 * dimensions as the main wrapper, so it fills its grid cell exactly. */
body.layout-quad .snap-wrapper {
  display: block;
}
/* PACS-style plane-coloured 1px ring on each cell, drawn OUTSIDE the
 * wrapper into the 4px grid gap. We had an `outline: 1px solid ... ;
 * outline-offset: -1px` here originally, but stacking-context interaction
 * with the absolutely-positioned canvases inside the wrapper made the
 * ring invisible on three of the four cells in Chrome. An outset
 * box-shadow always paints beyond the wrapper's border-box and can't be
 * obscured by positioned descendants — same visible result, no painting-
 * order quirks. --plane-color is set per pane by JS (setPlane / refresh)
 * and falls back to a neutral grey if unset. */
body.layout-quad #wrapper,
body.layout-quad .snap-wrapper {
  box-shadow: 0 0 0 1px var(--plane-color, rgba(255, 255, 255, 0.18));
}
/* 3D viewer has no MPR plane to colour by — use the same neutral fallback
 * so all four cells read as a coherent group. */
body.layout-quad #quad3DHost {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
body.layout-quad #quad3DHost {
  grid-area: 1 / 2 / 2 / 3;
  display: block;
  background: rgb(20, 20, 20);
  overflow: hidden;
  position: relative;
}
body.layout-quad #secondPanel { display: none !important; }
body.layout-quad #divider     { display: none !important; }
/* Both "Open 3D" entry points target secondPanel-hosted 3D, which is
 * collapsed under body.layout-quad. Hide them so the user doesn't get
 * a phantom click into a hidden panel; the 3D viewer is already
 * visible in the TR cell. */
body.layout-quad #open3dBtn,
body.layout-quad #medseg3dOpenButton { display: none !important; }
/* In quad mode the three plane buttons are meaningless (all three planes
 * are visible at once). Keep #mprQuad so the user can click to exit. */
body.layout-quad #mprButtons > .mpr-btn:not(#mprQuad):not(#rotResetBtn) { display: none; }
/* "Localizers" checkbox lives in #mprButtons so it sits in the toolbar real
 * estate the three plane buttons vacate when quad mode opens. Hidden outside
 * quad — single-view mode has no cross-plane peers to draw. */
#locLinesToggle { display: none; }
body.layout-quad #locLinesToggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 6px;
  font-size: 11px;
  color: rgb(196, 196, 196);
  cursor: pointer;
  user-select: none;
}
#locLinesToggle input { cursor: pointer; margin: 0; }
/* Rotate toggle: same chrome as Localizers (sits next to it in quad mode). */
#rotEnableToggle { display: none; }
body.layout-quad #rotEnableToggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 6px;
  font-size: 11px;
  color: rgb(196, 196, 196);
  cursor: pointer;
  user-select: none;
}
#rotEnableToggle input { cursor: pointer; margin: 0; }
#rotResetBtn { font-size: 11px; padding: 2px 6px; }
/* Once a plane has actually been tilted, slicing happens via the
 * localizer crosshair drag — hide the now-meaningless sliders/strip. */
body.oblique-active .slider,
body.oblique-active .snap-slider,
body.oblique-active .segmentation-strip { display: none !important; }
/* Ctrl/Cmd held → "pan armed" PACS cue (4-way move arrow) on every
 * interactive canvas: main MPR, all snap viewports, and the 3D host.
 * Ctrl+left-drag pans; Ctrl+right-drag zooms (cursor lock takes over
 * during the actual zoom drag, so 'move' is the pre-drag hint only). */
body.ctrl-armed #vis_canvas,
body.ctrl-armed .snap-vis,
body.ctrl-armed #quad3DHost,
body.ctrl-armed #quad3DHost canvas { cursor: move !important; }
/* Quad button is a layout toggle, not a plane selector — keep it the same
 * compact icon size in both states so users can toggle back and forth
 * without the button reflowing under their cursor. */
#mprQuad { flex: 0 0 auto; padding: 4px 8px; }

/* Quad-toggle icon: 2×2 grid when not in quad mode; 1×2 (return-to-single)
 * once active. Uses its own .is-quad-on class — NOT .active — so the
 * button doesn't get the selected-plane teal highlight while in quad mode.
 * (The Quad button is a layout toggle, not a plane selector — applying the
 * plane-button selected style would mislead the user into reading it as
 * "currently in this mode and you can pick a different one alongside".) */
.mpr-quad-icon { vertical-align: middle; }
.mpr-quad-icon-1x2 { display: none; }
#mprQuad.is-quad-on .mpr-quad-icon-2x2 { display: none; }
#mprQuad.is-quad-on .mpr-quad-icon-1x2 { display: inline-block; }


/* A snap-wrapper acts as a styled clone of #wrapper. It hosts its three
 * stacked canvases + slider as positioned siblings inside a sized box. JS
 * sets style.width/height on the wrapper based on cell size — same as
 * resizeCanvas does for #wrapper. */
.snap-wrapper {
  position: relative;
  background: #000;
  /* width/height set by SnapshotView.relayout */
}
.snap-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  box-sizing: border-box;
  image-rendering: pixelated;
}
.snap-bg  { z-index: 1; background: #000; }
.snap-pr  { z-index: 2; opacity: 0.7; pointer-events: none; }
/* Default OS cursor (arrow) so it matches the main editor; the in-canvas
 * brush halo is the real "where you're pointing" indicator. */
.snap-vis { z-index: 3; pointer-events: auto; }

/* Slider mirrors the main editor's .slider style/position. */
.snap-slider {
  appearance: none;
  -webkit-appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  position: absolute;
  right: 0;
  top: 3px;
  width: 15px;
  height: calc(100% - 6px);
  margin: 0;
  background: none;
  border: none;
  outline: none;
  opacity: 0.7;
  z-index: 10;
}
.snap-slider:hover { opacity: 1; cursor: pointer; }
.snap-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 30px;
  background: rgb(0, 255, 242);
  border: none; border-radius: 20px; cursor: pointer;
}
.snap-slider::-moz-range-thumb {
  width: 15px; height: 30px;
  background: rgb(0, 255, 242);
  border: none; border-radius: 20px; cursor: pointer;
}
.snap-label {
  position: absolute; top: 6px; left: 8px;
  font: 11px/1.3 "Roboto Mono", monospace;
  color: rgb(180, 200, 220);
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 11;
}
/* No visual "shine" on the hovered snap — the cursor halo and the
 * plane-coloured edge identify which pane the user is on without an
 * extra highlight. The .is-active class is still toggled by
 * MultiView._setActiveView so JS callers that check it still work,
 * we just don't paint anything for it. */

#secondPanel {
  flex: 0 0 35%;
  min-width: 150px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgb(41, 41, 41);
  border-left: 1px solid rgba(134, 205, 247, 0.2);
}

/* The viewer's own toolbar (.viewer-toolbar) is now built inside its
 * overlay and styled inline by view3dAddon.js. The static
 * #secondPanelToolbar element it used to share has been removed. */
.viewer-toolbar select {
  background: rgb(40, 40, 40);
  color: rgb(200, 200, 200);
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
}

#secondPanelContent {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 100px;
}

.viewer-toolbar-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: #ccc;
  padding: 2px 6px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.1s;
}
.viewer-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.viewer-popover {
  position: fixed;
  z-index: 250;
  padding: 10px 12px;
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 6px;
  background: rgb(28, 28, 28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  color: rgb(216, 216, 216);
  max-height: 80vh;
  overflow-y: auto;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
}

/* Section headers inside the combined Advanced popover
   (TF / Lighting / Diagnostics). */
.viewer-popover-section {
  margin: 12px 0 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(134, 205, 247, 0.15);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(142, 202, 230);
}
.viewer-popover-section:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

/* Labels popover (🏷 button) — one row per label with swatch, name, eye, slider, pct. */
.labels-popover-header {
  font-size: 11px;
  color: rgba(216, 216, 216, 0.6);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.15);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.labels-popover-master {
  display: grid;
  grid-template-columns: 14px minmax(60px, 1fr) 28px minmax(60px, 1.4fr) 32px;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.15);
}
.labels-popover-master-label {
  grid-column: 1 / span 3;
  font-size: 11px;
  font-weight: 600;
  color: rgba(216, 216, 216, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.labels-popover-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
}
.labels-popover-empty {
  font-size: 11px;
  color: rgba(216, 216, 216, 0.5);
  padding: 12px 4px;
  text-align: center;
  font-style: italic;
}
.labels-popover-row {
  display: grid;
  grid-template-columns: 14px minmax(60px, 1fr) 28px minmax(60px, 1.4fr) 32px;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.labels-popover-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.labels-popover-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: rgb(216, 216, 216);
}
.labels-popover-eye {
  width: 28px;
  height: 24px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.labels-popover-slider {
  width: 100%;
  margin: 0;
  vertical-align: middle;
  accent-color: rgb(134, 205, 247);
}
.labels-popover-pct {
  text-align: right;
  font-size: 11px;
  color: rgba(216, 216, 216, 0.7);
  font-variant-numeric: tabular-nums;
}
.labels-popover-footer {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(134, 205, 247, 0.15);
}
.labels-popover-footer .viewer-toolbar-btn {
  flex: 1;
  padding: 4px 8px;
  font-size: 11px;
}

#bg_canvas,
#pr_canvas,
#vis_canvas,
#webgl_canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  transform: none;
}

#UnseenCanvas,
#UnseenCanvasThr,
#UnseenCanvasMask,
#UnseenCanvasVis {
  width: 0px;
  height: 0px;
}

.pacs-overlay {
  position: absolute;
  z-index: 99;
  color: rgb(224, 224, 224);
  font: 12px/1.5 "Roboto Mono", "Courier New", monospace;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
  border-radius: 3px;
  pointer-events: none;
  user-select: none;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pacs-tl { top: 8px; left: 8px; }
/* Cursor tooltip uses viewport coords (see canvasInteraction.js mouseMoves),
   so position:fixed — lets us feed evt.clientX/clientY directly into left/top
   without a getBoundingClientRect call on every touchmove. */
.pacs-cursor { position: fixed; white-space: pre-line; }
.pacs-overlay:empty { display: none; }

/* Mask-switcher chevron — appears inside pacsTopLeft only when this series
   has >1 mask. Pacs-overlay parent is pointer-events:none, so the chevron
   re-enables pointer events on itself. */
.mask-switch-chev {
  pointer-events: auto;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  margin: 0 0 0 4px;
  vertical-align: baseline;
  opacity: 0.8;
}
/* :hover background-color also overrides the global button:hover teal halo
   (specificity 0,1,1 beats 0,1,0) — without this the chevron lights up with
   a 6px-asymmetric green box centred to the left of the glyph. */
.mask-switch-chev:hover { opacity: 1; background: transparent; }
.mask-switch-chev[hidden] { display: none; }

.mask-switch-dropdown {
  position: absolute;
  top: 36px;
  left: 8px;
  z-index: 100;
  background: rgba(20, 20, 20, 0.95);
  color: rgb(224, 224, 224);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 4px 0;
  font: 12px/1.6 "Roboto Mono", "Courier New", monospace;
  min-width: 200px;
  max-width: 60%;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  user-select: none;
}
.mask-switch-dropdown[hidden] { display: none; }
.mask-switch-item {
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mask-switch-item:hover { background: rgba(255, 255, 255, 0.1); }
.mask-switch-item-current { font-weight: 600; }
.mask-switch-item-check {
  display: inline-block;
  width: 12px;
  text-align: center;
}
.mask-switch-empty {
  padding: 4px 12px;
  opacity: 0.65;
  font-style: italic;
}

#toastContainer {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: min(400px, 92vw);
}
.msg-toast {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  color: rgb(230, 230, 230);
  background: rgba(28, 28, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: msg-toast-in 0.18s ease-out;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
}
.msg-toast-saving {
  border-color: rgba(96, 165, 250, 0.6);
  background: rgba(30, 58, 94, 0.95);
}
.msg-toast-success {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(20, 83, 45, 0.95);
}
.msg-toast-error {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(127, 29, 29, 0.95);
}
@keyframes msg-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#bg_canvas {
  image-rendering: auto;
}
#pr_canvas {
  image-rendering: pixelated;
  opacity: 0.7;
}
#vis_canvas {
  image-rendering: pixelated;
}

body {
  /* background: rgb(134, 161, 125); */
  background: rgb(41, 41, 41);
  /* font-family: 'Times New Roman', Times, serif; */
}

h2 {
  z-index: 9999999999999;
  color: rgb(155, 171, 216);
  font-size: 5px;
  float: right;
  position: relative;
  left: 3px;
  top: 14px;
}

/* During editor load, hide incomplete editor chrome from the first paint.
   #splitContainer keeps its layout box so fitToScreen can still measure real
   dimensions while the overlay is visible. */
body.editor-loading #splitContainer,
body.editor-loading #mobileTopBar {
  visibility: hidden;
  pointer-events: none;
}
body.editor-loading #allText { display: none; }

.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgb(28, 28, 28);
  z-index: 9000;
}
body.editor-loading .loading-overlay,
.loading-overlay.is-visible {
  display: flex;
}
/* Translucent variant for mid-session swaps (e.g. mask-switcher) where the
   user wants to see the change land on the canvas behind the overlay. The
   overlay still blocks pointer events during the swap. */
.loading-overlay.is-translucent { opacity: 0.5; }
.loading-overlay-text {
  color: rgb(216, 216, 216);
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.4px;
  margin-bottom: 14px;
}
.loading-overlay-bar-bg {
  width: 240px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.loading-overlay-bar {
  width: 0%;
  height: 100%;
  background: rgb(0, 255, 242);
  border-radius: 2px;
  transition: width 0.2s;
}

#allText {
  zoom: 1;
  top: 5px;
  left: 5px;
  width: 265px;
  position: absolute;
  border: 2px solid rgb(134, 205, 247);
  padding: 5px;
  /* background: rgb(114, 173, 146); */
  background: rgb(32, 32, 32);
  /* Flex-column so #labelsSection can absorb the leftover vertical space
     and only its scrollable list overflows — the toolbar sections above
     keep their natural height, the labels-toolbar header (with add/delete/
     lock) stays pinned, and only the rows in #labelsContainer scroll. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100% - 24px);
  color: rgb(216, 216, 216);
  font-family: Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light,
    Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
}

#labelsSection {
  flex: 1;
  min-height: 0; /* allow shrink below intrinsic content size */
  display: flex;
  flex-direction: column;
}
#labelsContainer {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

button {
  border: 1px solid rgb(121, 159, 182);
  border-radius: 5px 5px 5px 5px;
  margin: 2px;
  padding: 2px;
  transition-duration: 0.1s;
  background-color: rgb(32, 32, 32);
  color: rgb(196, 196, 196);
}
button:hover {
  background-color: rgb(7, 109, 104);
  cursor: pointer;
}

.modalButton {
  border: 1px solid rgb(0, 0, 0);
  border-radius: 5px 5px 5px 5px;
  margin: 1px;
  padding: 1px;
  transition-duration: 0.1s;
  background-color: rgb(235, 235, 235);
  color: rgb(39, 3, 68);
}
.modalButton:hover {
  background-color: rgb(191, 255, 252);
}

/* Vertical slice slider on the right edge of each viewport.
   `writing-mode: vertical-lr` makes the input render vertically natively,
   replacing an older `transform: rotate(270deg)` hack that broke hit-testing
   in Firefox/Safari. `direction: rtl` flips the slider so the maximum slice
   index is at the top (matches patient-superior in axial views).
   Layout box now matches visual extent: width = track thickness, height =
   slide length. */
.slider {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  position: absolute;
  right: 0;
  top: 3px;
  width: 15px;
  height: calc(100% - 6px);
  outline: none;
  background: none;
  border: none;
  border-radius: 20px;
  opacity: 0.7;
  transition: opacity 0.1s;
  z-index: 10;
}

.slider:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

/* Mid-stroke the slider drops pointer events so the stroke can run across
   the right edge of the viewport. mousemove is wired to vis_canvas only,
   so without this any crossing of the slider's column severs the stroke. */
body.painting-stroke .slider {
  pointer-events: none;
}

.slider::-webkit-slider-runnable-track,
.slider::-moz-range-track {
  background: transparent;
  border: none;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 30px;
  background: rgb(0, 255, 242);
  cursor: pointer;
  border: none;
  border-radius: 20px;
}
.slider::-moz-range-thumb {
  width: 15px;
  height: 30px;
  background: rgb(0, 255, 242);
  cursor: pointer;
  border: none;
  border-radius: 20px;
}

/* Segmentation strip — per-slice presence ticks for the active label, in a
   thin column immediately left of the slider track. The strip box itself
   is a passive visual region (pointer-events:none); only the ticks and
   the current-slice marker are rendered into it, and only the ticks
   capture clicks (for slice navigation). Empty space between ticks falls
   through to the canvas underneath, so the brush cursor follows correctly
   and a paint stroke can start there without panning. The strip sits
   behind the slider's z-index so the slider thumb wins hit-testing inside
   its own 15px column. */
.segmentation-strip {
  position: absolute;
  right: 17px;
  top: 3px;
  height: calc(100% - 4px);
  width: 8px;
  pointer-events: none;
  z-index: 9;
}
.segmentation-strip .seg-tick {
  position: absolute;
  left: 0;
  right: 0;
  /* bottom + height are set in pixels by segmentationStrip.js so the tick can
     be clamped to the strip bounds when min-height (4px) exceeds the per-slice
     spacing — without clamping the topmost ticks overflow above the strip
     for high slice counts. */
  pointer-events: auto;
  cursor: pointer;
  background-color: rgb(0, 255, 242);
  border-radius: 4px;
}
/* Hover halo via native :hover — a pseudo-element that snaps in to make the
   active tick *look* bigger. Halo extends leftward (away from the slider,
   into the canvas margin) and a little vertically. For dense segmentations
   where ticks visually overlap, multiple stacked ticks may register :hover
   simultaneously, but their halos render at the same coords and read as one
   — clicking such a stack navigates to whichever tick is topmost in DOM
   order (last to render). No fade — feels snappier. */
.segmentation-strip .seg-tick::before {
  content: "";
  position: absolute;
  left: -6px;
  right: 0;
  top: -2px;
  bottom: -2px;
  background: inherit;
  pointer-events: none;
  opacity: 0;
  border-radius: 3px;
}
.segmentation-strip .seg-tick:hover::before {
  opacity: 1;
}
/* Mid-stroke ticks defer to the canvas as well so the brush cursor doesn't
   flicker to `pointer` when the stroke crosses one. */
body.painting-stroke .segmentation-strip .seg-tick {
  pointer-events: none;
}
/* Current-slice indicator: an always-present marker in the strip at the
   slider's current Y, so the indicator is visible regardless of whether
   that slice has a segmentation tick. Transparent fill + high-contrast
   double outline (white inner + black outer ring) so it stays visible on
   any underlying label color or canvas pixel behind the strip. z-index
   above ticks so the outline isn't clipped when overlapping a tick. */
.segmentation-strip .seg-current-marker {
  position: absolute;
  left: 0;
  right: 0;
  /* bottom + height set in pixels by segmentationStrip.js, same clamp as ticks. */
  pointer-events: none;
  background: transparent;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 0 2px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
/* When the slider is on a segmented slice, the marker overlays a tick — push
   to full opacity so the ring stays distinct against the colored tick. */
.segmentation-strip .seg-current-marker.on-tick {
  box-shadow:
    0 0 0 1px rgb(255, 255, 255),
    0 0 0 2px rgb(0, 0, 0);
}

.undraggable {
  /* make non-draggable: */
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.clickableImage {
  opacity: 0.7;
  transition: opacity 0.1s;

  /* make non-draggable: */
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.clickableImage:hover {
  opacity: 1;
  transition: opacity 0.05s;
  cursor: pointer;
}

.clickable:hover {
  cursor: pointer;
  background-color: rgb(0, 255, 242, 0.1);
}
.pointerCursor {
  cursor: pointer;
}

label:hover {
  cursor: pointer;
}

/* Toolbar sections */
.toolbar-section {
  padding: 8px 5px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.2);
}

.toolbar-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(216, 216, 216, 0.5);
  margin-bottom: 4px;
}

.toolbar-icon-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar-icon {
  width: 32px;
  height: 32px;
  opacity: 0.7;
  transition: opacity 0.1s;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}
.toolbar-icon:hover {
  opacity: 1;
}

.toolbar-btn-group {
  display: flex;
  gap: 4px;
}

.mpr-btn {
  flex: 1;
  padding: 4px 2px;
  font-size: 12px;
  border: 1px solid rgb(121, 159, 182);
  border-radius: 4px;
  background-color: rgb(32, 32, 32);
  color: rgb(196, 196, 196);
  cursor: pointer;
  transition: background-color 0.1s;
}
.mpr-btn:hover {
  background-color: rgb(50, 50, 50);
}
.mpr-btn.active {
  background-color: rgb(7, 109, 104);
  color: white;
  border-color: rgb(7, 140, 134);
}

.toolbar-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0;
}

.toolbar-row-label {
  font-size: 11px;
  width: 42px;
  flex-shrink: 0;
  color: rgba(216, 216, 216, 0.7);
}

.toolbar-slider {
  flex: 1;
  height: 12px;
  min-width: 0;
  accent-color: rgb(134, 205, 247);
}

.toolbar-val {
  width: 26px;
  flex-shrink: 0;
  font-size: 12px;
}

.toolbar-val-wide {
  width: 40px;
  flex-shrink: 0;
  font-size: 12px;
}

.toolbar-reset {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.1s;
}
.toolbar-reset:hover {
  opacity: 1;
}

/* Settings popover panel */
.settings-panel {
  position: fixed;
  z-index: 200;
  padding: 10px 12px;
  border: 1px solid rgba(134, 205, 247, 0.4);
  border-radius: 6px;
  background: rgb(28, 28, 28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 11px;
  color: rgb(216, 216, 216);
  min-width: 260px;
  max-height: 80vh;
  overflow-y: auto;
  font-family: Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light,
    Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
}

.settings-label {
  min-width: 90px;
  flex-shrink: 0;
  color: rgba(216, 216, 216, 0.7);
}

.settings-input {
  width: 44px;
  padding: 2px 3px;
  font-size: 11px;
}

.settings-input-sm {
  width: 28px;
  padding: 2px 3px;
  font-size: 11px;
  text-align: center;
}

.settings-slider {
  width: 80px;
  height: 10px;
  accent-color: rgb(134, 205, 247);
}

.settings-actions {
  display: flex;
  gap: 6px;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(134, 205, 247, 0.15);
}

/* Label rows */
.label-row {
  position: relative;
  padding: 5px;
  width: 90%;
  height: 36px;
  border: 2px solid rgb(0, 120, 155);
  margin: 5px;
  cursor: default;
}

.label-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.label-number {
  position: absolute;
  left: 4%;
  top: 15%;
  width: 20px;
  font-size: 26px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 0 3px black;
  pointer-events: none;
  user-select: none;
}

.label-colorpicker-hidden {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  position: absolute;
}

.label-color-swatch {
  position: absolute;
  right: 70%;
  top: 20%;
  height: 50%;
  width: 12%;
  border: 3px solid rgb(0, 0, 0);
  cursor: pointer;
}

.label-lock {
  position: absolute;
  right: 55%;
  top: 1%;
  width: 25px;
  padding: 10px 2px;
}

.label-name {
  position: absolute;
  right: 15%;
  top: 36%;
  width: 96px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 0 3px black;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-radio {
  position: absolute;
  right: 3%;
  top: 24%;
  width: 25px;
  margin: 0 0 -2px 20px;
}

.label-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 1px 3px;
  font-family: inherit;
  font-weight: bold;
  font-size: inherit;
  color: rgb(230, 230, 230);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(134, 205, 247, 0.55);
  border-radius: 2px;
  text-align: center;
  outline: none;
}

/* Labels toolbar */
.label-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.label-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.label-toolbar-btn {
  height: 22px;
  min-width: 22px;
  padding: 0 6px;
  font-size: 14px;
  line-height: 1;
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 3px;
  background: rgb(32, 32, 32);
  color: rgb(216, 216, 216);
  cursor: pointer;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
  user-select: none;
}
.label-toolbar-btn:hover:not(:disabled) {
  background: rgb(50, 50, 50);
  border-color: rgba(134, 205, 247, 0.6);
}
.label-toolbar-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.label-toolbar-btn-danger:hover:not(:disabled) {
  background: rgb(70, 30, 30);
  border-color: rgba(255, 100, 100, 0.6);
  color: rgb(255, 200, 200);
}
.label-toolbar-btn-icon {
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.label-toolbar-btn-icon img {
  width: 14px;
  height: 14px;
  display: block;
  opacity: 0.85;
  -webkit-user-drag: none;
}

/* Confirm modal */
.confirm-modal-content {
  background: rgb(28, 28, 28);
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  color: rgb(216, 216, 216);
  padding: 20px 24px;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
  width: 420px;
  max-width: 90%;
  height: auto;
  margin-top: 20vh;
}
.confirm-modal-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.confirm-modal-message {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(216, 216, 216, 0.85);
  margin-bottom: 18px;
}
.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.confirm-modal-btn {
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 4px;
  background: rgb(40, 40, 40);
  color: rgb(216, 216, 216);
  cursor: pointer;
}
.confirm-modal-btn:hover {
  background: rgb(55, 55, 55);
  border-color: rgba(134, 205, 247, 0.6);
}
.confirm-modal-btn-primary {
  background: rgb(120, 40, 40);
  border-color: rgba(255, 120, 120, 0.45);
  color: rgb(255, 220, 220);
}
.confirm-modal-btn-primary:hover {
  background: rgb(150, 50, 50);
  border-color: rgba(255, 120, 120, 0.7);
}

.prompt-modal-input {
  width: 100%;
  padding: 7px 10px;
  font-size: 14px;
  font-family: inherit;
  background: rgb(20, 20, 20);
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 4px;
  color: rgb(216, 216, 216);
  margin-bottom: 8px;
  box-sizing: border-box;
}
.prompt-modal-input:focus {
  outline: none;
  border-color: rgba(134, 205, 247, 0.7);
}
.prompt-modal-error {
  font-size: 12px;
  color: rgb(255, 140, 140);
  min-height: 16px;
  margin-bottom: 10px;
}

.noselect {
  /* makes it propagate through */
  pointer-events: none;

  /* below to make not selectable, but I think it's not needed */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                        supported by Chrome, Edge, Opera and Firefox */
}

/* ============================================================
   Responsive layout (phone / tablet)
   Driven by body.layout-{desktop,tablet,phone} set in responsiveLayout.js.
   Desktop rules are the defaults above; these only apply on smaller tiers.
   ============================================================ */

#mobileTopBar {
  display: none;
}

/* Mobile toolbar buttons — share visual language with .viewer-toolbar-btn */
.mobile-toolbar-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #d8d8d8;
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex-shrink: 0;
  padding: 0;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.mobile-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.mobile-toolbar-btn.active {
  background-color: rgb(7, 109, 104);
  color: #fff;
  border-color: rgb(7, 140, 134);
}
.mobile-toolbar-btn.danger-active {
  background-color: rgb(168, 43, 43);
  color: #fff;
  border-color: rgb(196, 70, 70);
}
.mobile-toolbar-btn .mseg-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  pointer-events: none;
  display: block;
}
.mseg-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mobile-toolbar-btn .mtb-label {
  font-size: 10px;
  margin-left: 4px;
}

/* Drawer (labels bottom sheet) */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 500;
  display: none;
}
.mobile-drawer-backdrop.open { display: block; }
.mobile-drawer {
  position: fixed;
  z-index: 501;
  background: rgb(28, 28, 28);
  color: rgb(216, 216, 216);
  border: 1px solid rgba(134, 205, 247, 0.3);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
  display: none;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
  overflow: hidden;
}
.mobile-drawer.open { display: flex; flex-direction: column; }
.mobile-drawer-header {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.2);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.mobile-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}
.mobile-drawer-close {
  background: none;
  border: none;
  color: #ccc;
  font-size: 22px;
  cursor: pointer;
  padding: 0 6px;
  margin: 0;
}

/* Phone: bottom-sheet drawer */
body.layout-phone .mobile-drawer {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 65vh;
  border-radius: 14px 14px 0 0;
}

/* Tablet: right-edge drawer */
body.layout-tablet .mobile-drawer {
  top: 0;
  bottom: 0;
  right: 0;
  width: min(340px, 70vw);
  border-radius: 14px 0 0 14px;
}

/* Popover backdrop — blocks canvas interaction while a popover is open */
.mobile-popover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 509;
  display: none;
}
.mobile-popover-backdrop.open { display: block; }

/* Popovers share visual language with .viewer-popover but anchor to the toolbar */
.mobile-popover {
  position: fixed;
  z-index: 510;
  padding: 12px 14px;
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 8px;
  background: rgb(28, 28, 28);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  font-size: 13px;
  color: rgb(216, 216, 216);
  max-height: 80vh;
  overflow-y: auto;
  display: none;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
  min-width: 220px;
}
.mobile-popover.open { display: block; }
.mobile-popover .mp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.mobile-popover .mp-row label {
  flex: 0 0 60px;
  font-size: 12px;
  color: rgba(216, 216, 216, 0.7);
}
.mobile-popover .mp-row input[type="range"] {
  flex: 1;
  min-width: 0;
}
.mobile-popover .mp-row input[type="number"],
.mobile-popover .mp-row input[type="text"] {
  width: 56px;
  background: rgb(40, 40, 40);
  color: rgb(216, 216, 216);
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 12px;
}
.mobile-popover .mp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.mobile-popover .mp-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
}
.mobile-popover .mp-chip:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.mobile-popover .mp-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(216, 216, 216, 0.55);
  margin: 10px 0 4px;
}
.mobile-popover-mini {
  min-width: 160px;
  padding: 8px 12px;
}
.mobile-popover-mini .mp-row {
  margin: 0;
}
.mp-ptr-val {
  min-width: 24px;
  text-align: center;
  font-size: 12px;
  color: rgba(216, 216, 216, 0.85);
}

/* --------- Phone tier --------- */
body.layout-phone #allText {
  display: none;
}
body.layout-phone #splitContainer {
  left: 0;
  top: 56px; /* must clear #mobileTopBar height (border-box) */
  right: 0;
  bottom: 0;
  flex-direction: column;
}
body.layout-phone #mobileTopBar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgb(24, 24, 24);
  border-bottom: 2px solid rgba(134, 205, 247, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  box-sizing: border-box; /* height includes padding + border */
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 400;
  -webkit-overflow-scrolling: touch;
}
body.layout-phone #mobileTopBar::-webkit-scrollbar {
  height: 4px;
}
body.layout-phone #mobileTopBar::-webkit-scrollbar-thumb {
  background: rgba(134, 205, 247, 0.4);
  border-radius: 2px;
}
body.layout-phone #mainPanel {
  flex: 1 1 auto;
  min-height: 200px;
}
body.layout-phone #secondPanel {
  flex: 0 0 40vh;
  min-width: 0;
  border-left: none;
  border-top: 2px solid rgba(134, 205, 247, 0.4);
}
body.layout-phone #divider {
  width: 100%;
  height: 6px;
  cursor: row-resize;
  flex-shrink: 0;
}
body.layout-phone #savingOverlay {
  width: 80vw !important;
  height: auto !important;
  top: 30vh !important;
  left: 10vw !important;
  padding: 18px !important;
}

/* --------- Tablet tier --------- */
body.layout-tablet #allText {
  display: none;
}
body.layout-tablet #splitContainer {
  left: 0;
  top: 56px; /* must clear #mobileTopBar height (border-box) */
}
body.layout-tablet #mobileTopBar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgb(24, 24, 24);
  border-bottom: 2px solid rgba(134, 205, 247, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  box-sizing: border-box; /* height includes padding + border */
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 400;
  -webkit-overflow-scrolling: touch;
}
body.layout-tablet #mobileTopBar::-webkit-scrollbar {
  height: 4px;
}
body.layout-tablet #mobileTopBar::-webkit-scrollbar-thumb {
  background: rgba(134, 205, 247, 0.4);
  border-radius: 2px;
}
body.layout-tablet #secondPanel {
  flex: 0 0 45%;
}

/* Touch mode: widen divider hit area for finger dragging */
body.touch-mode #divider {
  position: relative;
}
body.touch-mode #divider::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}
body.layout-phone.touch-mode #divider::before {
  top: -14px;
  bottom: -14px;
  left: 0;
  right: 0;
}

/* Touch mode cursors (suppress mouse hover artifacts) */
body.touch-mode #vis_canvas,
body.touch-mode #wrapper canvas {
  cursor: default;
}

/* Modal responsiveness on phone */
body.layout-phone .modal-content {
  width: 96vw !important;
  height: 90vh !important;
  padding: 12px 14px !important;
}
body.layout-phone #controlsModalContent {
  width: 96vw !important;
  height: 90vh !important;
  padding: 14px 16px !important;
  max-width: 96vw !important;
}
body.layout-phone .settings-panel {
  width: calc(100vw - 16px) !important;
  max-width: none !important;
  min-width: auto !important;
  left: 8px !important;
  right: 8px !important;
  max-height: 75vh !important;
}
body.layout-phone .modal {
  padding-top: 2vh;
}
body.layout-phone .models-modal {
  padding-top: 0 !important;
}

/* ============================================================
   Models modal — redesigned layout (desktop + mobile)
   ============================================================ */

.models-modal {
  /* parent .modal still handles display:block via createModal; we only style the content */
  padding-top: 0;
}

.models-modal-content {
  /* Override generic .modal-content inherited styles */
  background: rgb(26, 26, 28) !important;
  color: rgb(216, 216, 216);
  border: 1px solid rgba(134, 205, 247, 0.35) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  width: min(900px, 92vw) !important;
  height: min(86vh, 820px) !important;
  max-width: none;
  margin: 4vh auto !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 13px;
}

.models-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.2);
  background: rgb(22, 22, 24);
}
.models-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: rgb(230, 230, 230);
  letter-spacing: 0.3px;
}
.models-modal-header .close {
  color: rgba(216, 216, 216, 0.7);
  float: none;
  font-size: 28px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.1s;
}
.models-modal-header .close:hover {
  color: #fff;
}

.models-modal-status {
  flex-shrink: 0;
  padding: 10px 20px;
  background: rgb(20, 20, 22);
  border-bottom: 1px solid rgba(134, 205, 247, 0.15);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.models-status-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
}
.models-status-label {
  flex: 0 0 120px;
  color: rgba(216, 216, 216, 0.55);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.6px;
}
.models-status-value {
  flex: 1;
  color: rgb(0, 255, 242);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.models-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
  -webkit-overflow-scrolling: touch;
}
.models-modal-body::-webkit-scrollbar { width: 8px; }
.models-modal-body::-webkit-scrollbar-thumb {
  background: rgba(134, 205, 247, 0.25);
  border-radius: 4px;
}
.models-modal-body::-webkit-scrollbar-track { background: transparent; }

.models-section {
  margin-bottom: 22px;
}
.models-section:empty {
  margin: 0;
}
.models-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(134, 205, 247, 0.85);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.12);
  font-weight: 600;
}
.models-section-sub {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(216, 216, 216, 0.5);
  margin-left: 4px;
  font-size: 10px;
}
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.model-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  color: rgb(216, 216, 216);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.1s, border-color 0.1s, transform 0.08s;
  font-family: inherit;
  font-size: 12px;
  min-height: 62px;
  touch-action: manipulation;
}
.model-card:hover {
  background: rgba(134, 205, 247, 0.08);
  border-color: rgba(134, 205, 247, 0.4);
}
.model-card:active {
  transform: scale(0.98);
}
.model-card.active {
  background: rgba(7, 109, 104, 0.35);
  border-color: rgb(7, 140, 134);
}
.model-card-stars {
  font-size: 10px;
  color: rgba(255, 200, 64, 0.9);
  letter-spacing: 1px;
  line-height: 1;
  opacity: 0.85;
}
.model-card-stars[data-rating="1"] { color: rgba(255, 200, 64, 0.4); }
.model-card-stars[data-rating="2"] { color: rgba(255, 200, 64, 0.55); }
.model-card-stars[data-rating="3"] { color: rgba(255, 200, 64, 0.75); }
.model-card-name {
  font-size: 13px;
  font-weight: 500;
  color: rgb(230, 230, 230);
  line-height: 1.25;
}
.model-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.model-card-size {
  font-size: 10px;
  color: rgba(216, 216, 216, 0.5);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
}
.model-card-hint {
  font-size: 10px;
  color: rgba(216, 216, 216, 0.55);
  margin-top: 2px;
}
.model-card-hint kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  margin: 0 1px;
}

.nni-featured-card:hover {
  background: rgba(0, 204, 204, 0.12) !important;
  border-color: rgba(0, 204, 204, 0.6) !important;
}
.models-legacy-toggle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(216, 216, 216, 0.45);
  cursor: pointer;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
  user-select: none;
}
.models-legacy-toggle::-webkit-details-marker { display: none; }
.models-legacy-toggle::before {
  content: "\25B6";
  display: inline-block;
  margin-right: 6px;
  font-size: 8px;
  transition: transform 0.15s;
}
details[open] > .models-legacy-toggle::before {
  transform: rotate(90deg);
}
.models-legacy-toggle:hover {
  color: rgba(216, 216, 216, 0.7);
}
.models-legacy-toggle .models-section-sub {
  font-size: 10px;
}

/* Phone & small tablet overrides for the models modal */
@media (max-width: 720px) {
  .models-modal-content {
    width: 94vw !important;
    height: 88vh !important;
    height: 88dvh !important;
    border-radius: 10px !important;
    max-width: none !important;
    margin: 6vh auto !important;
  }
  .models-modal { padding-top: 0; }
  .models-modal-header {
    padding: 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .models-modal-title { font-size: 15px; }
  .models-modal-header .close {
    font-size: 32px;
    padding: 0 8px;
  }
  .models-modal-status {
    padding: 8px 14px;
  }
  .models-status-label { flex: 0 0 90px; }
  .models-modal-body {
    padding: 14px 14px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .models-grid {
    grid-template-columns: 1fr;
  }
  .model-card {
    min-height: 56px;
  }
}
body.layout-phone .models-modal { padding-top: 0; }