/* Floating control groups. The old single giant toolbar is split into small, calm islands. */

:root {
  --left-dock-reserve: 126px;
  --right-dock-reserve: 236px;
}

#toolbar,
#topActions,
#fileActions,
#sideLauncher,
#navigationTools,
#zoomRail,
#status,
.floating-help-button,
.floating-shape-button {
  position: absolute;
  z-index: 10;
  background: var(--glass);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#topActions {
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  white-space: nowrap;
}

#fileActions {
  right: 22px;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 999px;
  white-space: nowrap;
}

#toolbar {
  left: var(--left-dock-reserve);
  right: var(--right-dock-reserve);
  bottom: 22px;
  transform: none;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: none;
  min-width: 0;
  padding: 8px;
  border-radius: 24px;
  white-space: nowrap;
  justify-content: flex-start;
}

#navigationTools {
  right: 76px;
  left: auto;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: calc(var(--right-dock-reserve) - 86px);
  overflow-x: auto;
  overflow-y: hidden;
}

#sideLauncher {
  left: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 24px;
}

#sideLauncher button {
  min-width: 78px;
  background: rgba(255,255,255,.36);
}

.tool-group { display: flex; gap: 4px; align-items: center; }
.primary-tools { gap: 4px; }
.divider { width: 1px; height: 26px; margin: 0 2px; background: rgba(0,0,0,.1); }
.file-divider { margin-left: 10px; }
.tool-button.active, .mini-toggle.active { background: var(--ink); color: white; box-shadow: 0 5px 16px rgba(0,0,0,.18); }

.eraser-options {
  margin-left: -2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0,0,0,.045);
  align-self: stretch;
  display: inline-flex;
  gap: 3px;
  max-width: 0;
  opacity: 0;
  transform: translateX(-6px) scale(.96);
  overflow: hidden;
  pointer-events: none;
  transition: max-width 190ms ease, opacity 150ms ease, transform 190ms ease, margin 190ms ease, padding 190ms ease;
}
.eraser-options.visible {
  max-width: 150px;
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
.mini-toggle { padding: 6px 10px; font-size: 12px; }
.control-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.small-input input { width: 74px; text-align: center; }

#zoomRail {
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 999px;
}
#zoomRail button { width: 34px; height: 34px; padding: 0; font-size: 18px; }
#zoomSlider { width: 34px; height: 190px; margin: 0; writing-mode: vertical-lr; direction: rtl; accent-color: #202020; cursor: pointer; }

.floating-help-button, .floating-shape-button {
  right: 22px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.floating-help-button { bottom: 68px; font-size: 18px; }
.floating-shape-button { bottom: 22px; font-size: 13px; }

#status {
  left: 50%; top: 72px; transform: translateX(-50%);
  max-width: min(80vw, 560px); padding: 10px 14px;
  border-radius: 999px; color: var(--muted); font-size: 13px;
  text-align: center; opacity: 0; pointer-events: none; transition: opacity 180ms ease;
}
#status.visible { opacity: 1; }
#angleHint {
  position: absolute; z-index: 12; padding: 6px 9px; border-radius: 999px;
  background: rgba(31,31,31,.88); color: white; font-size: 12px; font-weight: 600;
  pointer-events: none; opacity: 0; transform: translate(-50%, -145%); transition: opacity 100ms ease;
}
#angleHint.visible { opacity: 1; }

@media (max-width: 1160px) {
  #toolbar { left: 12px; right: 108px; bottom: 12px; transform: none; overflow-x: auto; justify-content: flex-start; border-radius: 24px; }
  #toolbar::-webkit-scrollbar, #topActions::-webkit-scrollbar, #fileActions::-webkit-scrollbar { display: none; }
  #topActions { left: 12px; right: auto; transform: none; overflow-x: auto; justify-content: flex-start; border-radius: 24px; }
  #fileActions { right: 12px; top: 22px; overflow-x: auto; border-radius: 24px; }
  #navigationTools { right: 12px; left: auto; bottom: 12px; }
  #sideLauncher { left: 12px; bottom: 12px; }
  .floating-help-button, .floating-shape-button { right: 12px; }
  #status { top: 72px; }
}

#drawingCanvas.temporary-dot { cursor: copy; }


#navigationTools,
#sideLauncher,
#topActions,
#fileActions {
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#navigationTools::-webkit-scrollbar,
#sideLauncher::-webkit-scrollbar,
#topActions::-webkit-scrollbar,
#fileActions::-webkit-scrollbar {
  display: none;
}

@media (max-width: 560px) {
  #sideLauncher,
  #navigationTools,
  #topActions,
  #fileActions,
  #toolbar {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
}


/* --- Responsive control layout -------------------------------------------------
   The controls are deliberately placed in reserved lanes. The main toolbar can
   scroll horizontally inside its own lane, but it never grows over the Layers /
   Surface buttons or the bottom-right buttons. */
#toolbar,
#topActions,
#fileActions {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#toolbar::-webkit-scrollbar,
#topActions::-webkit-scrollbar,
#fileActions::-webkit-scrollbar { display: none; }
#toolbar > *,
#toolbar .tool-group,
#toolbar button,
#toolbar label,
#navigationTools button,
#sideLauncher button,
#fileActions button,
#fileActions .upload-button,
#topActions button {
  flex: 0 0 auto;
}
#toolbar {
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
#navigationTools,
#sideLauncher,
.floating-help-button,
.floating-shape-button {
  flex-shrink: 0;
}

@media (max-width: 1160px) and (min-width: 761px) {
  #toolbar {
    left: 116px;
    right: 214px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: none;
    max-width: none;
    justify-content: flex-start;
    border-radius: 24px;
  }
  #navigationTools {
    right: 104px;
    left: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: calc(214px - 92px);
  }
  #sideLauncher {
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .floating-shape-button {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .floating-help-button {
    right: 12px;
    bottom: calc(58px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  #toolbar {
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(74px + env(safe-area-inset-bottom));
    transform: none;
    max-width: none;
    padding: 7px;
    gap: 6px;
    border-radius: 22px;
    justify-content: flex-start;
  }
  #toolbar .divider { height: 22px; margin: 0; }
  #toolbar .control-label > span { display: none; }
  #toolbar .small-input input { width: 58px; padding-left: 8px; padding-right: 8px; }
  #toolbar input[type="color"] { width: 36px; height: 36px; }
  .tool-button { padding-left: 11px; padding-right: 11px; }
  .mini-toggle { padding-left: 9px; padding-right: 9px; }

  #sideLauncher {
    left: calc(8px + env(safe-area-inset-left));
    bottom: calc(8px + env(safe-area-inset-bottom));
    flex-direction: row;
    gap: 5px;
    padding: 6px;
    border-radius: 999px;
  }
  #sideLauncher button { min-width: 67px; padding-left: 10px; padding-right: 10px; }

  #navigationTools {
    right: calc(100px + env(safe-area-inset-right));
    left: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 6px;
    gap: 4px;
    border-radius: 999px;
    max-width: calc(100vw - 180px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  .floating-shape-button {
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: 40px;
    height: 40px;
  }
  .floating-help-button {
    right: calc(52px + env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: 40px;
    height: 40px;
  }

  #topActions {
    left: calc(8px + env(safe-area-inset-left));
    right: auto;
    top: calc(8px + env(safe-area-inset-top));
    max-width: calc(50vw - 12px);
    transform: none;
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 22px;
    padding: 7px;
  }
  #fileActions {
    right: calc(8px + env(safe-area-inset-right));
    top: calc(8px + env(safe-area-inset-top));
    max-width: calc(50vw - 12px);
    overflow-x: auto;
    border-radius: 22px;
    padding: 7px;
  }
  #zoomRail {
    right: calc(8px + env(safe-area-inset-right));
    top: 50%;
    padding: 7px 6px;
    gap: 6px;
  }
  #zoomRail button { width: 32px; height: 32px; }
  #zoomSlider { height: 142px; }
  #status {
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    top: calc(60px + env(safe-area-inset-top));
    transform: none;
    max-width: none;
    border-radius: 18px;
  }
}

@media (max-width: 380px) {
  #toolbar { bottom: calc(116px + env(safe-area-inset-bottom)); }
  #sideLauncher {
    bottom: calc(60px + env(safe-area-inset-bottom));
  }
  #navigationTools {
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(60px + env(safe-area-inset-bottom));
  }
  .floating-help-button {
    right: calc(52px + env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .floating-shape-button {
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
  #sideLauncher button { min-width: 62px; }
  .tool-button { padding-left: 10px; padding-right: 10px; }
}

/* Final toolbar sizing: the drawing toolbar now shrink-wraps its contents.
   When space is tight it caps at the available lane and scrolls sideways,
   instead of stretching into an ugly empty glass bar. */
#toolbar {
  width: max-content;
  max-width: calc(100vw - var(--left-dock-reserve) - var(--right-dock-reserve));
  left: calc(var(--left-dock-reserve) + ((100vw - var(--left-dock-reserve) - var(--right-dock-reserve)) / 2));
  right: auto;
  transform: translateX(-50%);
  justify-content: flex-start;
}

@media (max-width: 1160px) and (min-width: 761px) {
  #toolbar {
    width: max-content;
    max-width: calc(100vw - 116px - 214px);
    left: calc(116px + ((100vw - 116px - 214px) / 2));
    right: auto;
    transform: translateX(-50%);
  }
}

@media (max-width: 760px) {
  #toolbar {
    width: max-content;
    max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* Batch upgrade: independent scrollable lanes and compact controls. */
#toolbar {
  width: max-content;
  max-width: calc(100vw - var(--left-dock-reserve, 126px) - var(--right-dock-reserve, 236px));
  justify-self: center;
}
#navigationTools,
#sideLauncher,
#topActions,
#fileActions {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
#navigationTools::-webkit-scrollbar,
#sideLauncher::-webkit-scrollbar,
#topActions::-webkit-scrollbar,
#fileActions::-webkit-scrollbar { display: none; }

.selection-actions {
  position: absolute;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.selection-actions[hidden] { display: none; }
.mini-toggle.danger { color: #8c2b21; }
.shape-mode-controls {
  margin-left: -2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0,0,0,.045);
  align-self: stretch;
  display: inline-flex;
  gap: 3px;
  max-width: 0;
  opacity: 0;
  transform: translateX(-6px) scale(.96);
  overflow: hidden;
  pointer-events: none;
  transition: max-width 190ms ease, opacity 150ms ease, transform 190ms ease, margin 190ms ease, padding 190ms ease;
  flex: 0 0 auto;
}
.shape-mode-controls.visible {
  max-width: 170px;
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}


.select-mode-controls {
  margin-left: -2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0,0,0,.045);
  align-self: stretch;
  display: inline-flex;
  gap: 3px;
  max-width: 0;
  opacity: 0;
  transform: translateX(-6px) scale(.96);
  overflow: hidden;
  pointer-events: none;
  transition: max-width 190ms ease, opacity 150ms ease, transform 190ms ease, margin 190ms ease, padding 190ms ease;
  flex: 0 0 auto;
}
.select-mode-controls.visible {
  max-width: 190px;
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.mobile-modifier-bar {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(124px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 11;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
}
.touch-ui .mobile-modifier-bar.visible { display: flex; }


@media (max-width: 760px) {  #navigationTools {
    right: calc(140px + env(safe-area-inset-right));
    max-width: calc(100vw - 220px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  #toolbar {
    width: auto;
    max-width: none;
  }
  .selection-actions {
    bottom: calc(122px + env(safe-area-inset-bottom));
  }
  
.select-mode-controls {
  margin-left: -2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0,0,0,.045);
  align-self: stretch;
  display: inline-flex;
  gap: 3px;
  max-width: 0;
  opacity: 0;
  transform: translateX(-6px) scale(.96);
  overflow: hidden;
  pointer-events: none;
  transition: max-width 190ms ease, opacity 150ms ease, transform 190ms ease, margin 190ms ease, padding 190ms ease;
  flex: 0 0 auto;
}
.select-mode-controls.visible {
  max-width: 190px;
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.mobile-modifier-bar {
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(126px + env(safe-area-inset-bottom));
    transform: none;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .shape-mode-controls { max-width: 210px; overflow-x: auto; }

}

.selection-actions::-webkit-scrollbar { display: none; }
.selection-number-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.selection-number-label input {
  width: 64px;
  height: 30px;
  padding: 4px 8px;
}


/* ---------------------------------------------------------------------------
   Final responsive toolbar reachability pass.
   Keep every floating island independent, shrink-wrap the main drawing toolbar
   when possible, and make every tight layout horizontally scrollable. These
   rules intentionally sit last so they override the older iterative patches
   above without disturbing the JavaScript or markup.
--------------------------------------------------------------------------- */
#toolbar,
#selectionActions,
#mobileModifierBar,
#sideLauncher,
#navigationTools,
#topActions,
#fileActions {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
}
#toolbar::-webkit-scrollbar,
#selectionActions::-webkit-scrollbar,
#mobileModifierBar::-webkit-scrollbar,
#sideLauncher::-webkit-scrollbar,
#navigationTools::-webkit-scrollbar,
#topActions::-webkit-scrollbar,
#fileActions::-webkit-scrollbar {
  display: none;
}

#toolbar > *,
#toolbar .tool-group,
#toolbar button,
#toolbar label,
#selectionActions > *,
#mobileModifierBar > *,
#sideLauncher > *,
#navigationTools > *,
#topActions > *,
#fileActions > * {
  flex: 0 0 auto;
}

/* Desktop / wide tablet: center the drawing tools in the safe lane between
   left and right control islands. The bar is only as wide as its contents until
   it truly needs to scroll. */
#toolbar {
  width: max-content !important;
  max-width: max(220px, calc(100vw - var(--left-dock-reserve, 126px) - var(--right-dock-reserve, 236px) - 24px)) !important;
  left: calc(var(--left-dock-reserve, 126px) + ((100vw - var(--left-dock-reserve, 126px) - var(--right-dock-reserve, 236px)) / 2)) !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  justify-content: flex-start !important;
  white-space: nowrap;
}

/* Middle widths: keep the same three-lane layout, but reserve explicit room for
   the Layers/Surface island and the right-side navigation/3D/help controls. */
@media (max-width: 1160px) and (min-width: 761px) {
  #toolbar {
    width: max-content !important;
    max-width: max(220px, calc(100vw - 116px - 214px - 24px)) !important;
    left: calc(116px + ((100vw - 116px - 214px) / 2)) !important;
    right: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
  }
  #navigationTools {
    max-width: 122px !important;
  }
}

/* Compact screens: the main drawing toolbar becomes its own upper row. It
   shrink-wraps if the tools fit and caps at the viewport if they don't; in the
   latter case it scrolls sideways. No full-width empty glass bar. */
@media (max-width: 760px) {
  #toolbar {
    width: max-content !important;
    max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    justify-content: flex-start !important;
  }

  #sideLauncher {
    max-width: calc(52vw - 16px - env(safe-area-inset-left)) !important;
  }

  #navigationTools {
    max-width: calc(48vw - 96px - env(safe-area-inset-right)) !important;
  }

  #topActions,
  #fileActions {
    max-width: calc(50vw - 14px) !important;
  }

  .selection-actions {
    width: max-content;
    max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .mobile-modifier-bar.visible,
  .touch-ui .mobile-modifier-bar.visible {
    display: flex;
    width: max-content;
    max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    justify-content: flex-start;
  }
}

/* Very narrow phones: move the drawing toolbar above the lower utility row, but
   keep it scrollable and content-sized. The bottom utility islands also scroll
   in their own lanes rather than covering one another. */
@media (max-width: 380px) {
  #toolbar {
    width: max-content !important;
    max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(116px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
  }

  #sideLauncher {
    max-width: calc(50vw - 14px - env(safe-area-inset-left)) !important;
    left: calc(8px + env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }

  #navigationTools {
    max-width: calc(50vw - 58px - env(safe-area-inset-right)) !important;
    right: calc(8px + env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }
}

/* Ultra-tight fallback: if the right navigation island has too little room, keep
   it usable by letting it sit above the shape/help buttons and scroll. */
@media (max-width: 330px) {
  #navigationTools {
    bottom: calc(106px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 120px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
  }
  #toolbar {
    bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  }
  .selection-actions {
    bottom: calc(196px + env(safe-area-inset-bottom)) !important;
  }
}

/* Desktop browsers should still allow wheel/trackpad horizontal scrolling over
   any floating island when a tool row is clipped. */
#toolbar,
#selectionActions,
#mobileModifierBar {
  scroll-snap-type: none;
}



/* ---------------------------------------------------------------------------
   Final no-overlap / phone-only touch modifier pass.
   The modifier row is only for real compact touch devices. It never appears on
   desktop browser windows, and when it does appear it reserves its own row
   between the toolbar and selection action strip instead of floating over them.
--------------------------------------------------------------------------- */
#mobileModifierBar {
  display: none !important;
}

body.compact-ui.touch-ui #mobileModifierBar.visible {
  display: flex !important;
}

body:not(.compact-ui) #mobileModifierBar,
body:not(.touch-ui) #mobileModifierBar {
  display: none !important;
}

/* Compact touch stack:
   lower utility row -> main toolbar -> optional touch modifiers -> selection actions.
   Each island remains content-sized and horizontally scrollable. */
@media (max-width: 760px) {
  body.compact-ui.touch-ui #toolbar {
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }

  body.compact-ui.touch-ui #mobileModifierBar.visible {
    left: 50% !important;
    right: auto !important;
    bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    z-index: 12 !important;
  }

  body.compact-ui.touch-ui.mobile-modifiers-visible #selectionActions:not([hidden]) {
    bottom: calc(174px + env(safe-area-inset-bottom)) !important;
  }

  body.compact-ui.touch-ui:not(.mobile-modifiers-visible) #selectionActions:not([hidden]) {
    bottom: calc(124px + env(safe-area-inset-bottom)) !important;
  }
}

/* Very narrow phones get a taller stack. Nothing shares the same vertical lane. */
@media (max-width: 380px) {
  body.compact-ui.touch-ui #toolbar {
    bottom: calc(116px + env(safe-area-inset-bottom)) !important;
  }

  body.compact-ui.touch-ui #mobileModifierBar.visible {
    bottom: calc(166px + env(safe-area-inset-bottom)) !important;
  }

  body.compact-ui.touch-ui.mobile-modifiers-visible #selectionActions:not([hidden]) {
    bottom: calc(216px + env(safe-area-inset-bottom)) !important;
  }

  body.compact-ui.touch-ui:not(.mobile-modifiers-visible) #selectionActions:not([hidden]) {
    bottom: calc(166px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 330px) {
  body.compact-ui.touch-ui #toolbar {
    bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  }

  body.compact-ui.touch-ui #mobileModifierBar.visible {
    bottom: calc(200px + env(safe-area-inset-bottom)) !important;
  }

  body.compact-ui.touch-ui.mobile-modifiers-visible #selectionActions:not([hidden]) {
    bottom: calc(250px + env(safe-area-inset-bottom)) !important;
  }

  body.compact-ui.touch-ui:not(.mobile-modifiers-visible) #selectionActions:not([hidden]) {
    bottom: calc(200px + env(safe-area-inset-bottom)) !important;
  }
}