/* Bottom dock: every viewer control in one glass bar. --dock-clear (set by dock.js) is the space panels leave free below them. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dock {
  --glass-ink: #1d2b31;
  --glass-secondary: #596a70;
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 6px;
  color: var(--glass-ink); font: 13px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: linear-gradient(145deg, rgb(255 255 255 / .68), rgb(255 255 255 / .46) 58%, rgb(255 255 255 / .58));
  border: 1px solid rgb(255 255 255 / .72); border-radius: 28px;
  box-shadow: 0 22px 55px rgb(24 53 65 / .2), 0 4px 15px rgb(24 53 65 / .09), inset 0 1px rgb(255 255 255 / .9), inset 0 -1px rgb(255 255 255 / .38);
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  transform: translateX(-50%); animation: dock-in .5s var(--fp-ease) both;
}
@keyframes dock-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes dock-in-mobile { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.dock * { box-sizing: border-box; }
:where(.dock button, .dock select) { font: inherit; color: inherit; }
.dock :is(button, select, input):focus-visible { outline: 2px solid var(--glass-accent, #246fb4); outline-offset: 2px; }
.dock-mode, .dock-group { display: flex; align-items: center; gap: 8px; }
.dock-group { gap: 2px; }
.dock-sep { flex: none; width: 1px; height: 26px; margin: 0 2px; background: rgb(38 60 50 / .16); }
.dock-mode-sep { margin: 0 0 0 0; }

.wall-switch { display: none; gap: 2px; padding: 3px; border-radius: 22px; background: rgb(38 60 50 / .08); }
body.decomposition-mode .wall-switch { display: flex; }
.wall-switch button { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 13px 0 10px; border: 0; border-radius: 19px; background: transparent; color: var(--glass-secondary);
  font-size: 13px; font-weight: 550; white-space: nowrap; transition: background-color .2s ease, color .2s ease, box-shadow .25s ease; }
.wall-switch .pk-icon { flex: none; width: 18px; height: 18px; }
.wall-switch button:hover { color: var(--glass-ink); background: rgb(255 255 255 / .5); }
.wall-switch button[aria-pressed="true"] { background: #fff; color: var(--fp-amber-ink); font-weight: 650; box-shadow: 0 2px 8px rgb(30 22 8 / .14), inset 0 0 0 1px color-mix(in srgb, var(--fp-amber) 45%, transparent); }

.mode-switch { display: flex; gap: 2px; padding: 3px; border-radius: 22px; background: rgb(38 60 50 / .08); }
.mode-switch button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 19px; background: transparent; color: var(--glass-secondary); font-size: 13px; font-weight: 550; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .25s ease; }
.mode-switch button:hover:not(:disabled) { color: var(--glass-ink); background: rgb(255 255 255 / .5); }
.mode-switch button[aria-pressed="true"] { background: #fff; color: var(--fp-amber-ink); font-weight: 650; box-shadow: 0 2px 8px rgb(30 22 8 / .14), inset 0 0 0 1px color-mix(in srgb, var(--fp-amber) 45%, transparent); }
.mode-switch button:disabled { opacity: .42; cursor: not-allowed; }

.dock-tab, .dock-tool { display: flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; color: var(--glass-secondary);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, color .2s ease, transform .2s var(--fp-ease); }
.dock-tab { gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 550; white-space: nowrap; }
.dock-tool { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.dock-tab .pk-icon, .dock-tool .pk-icon { flex: none; width: 20px; height: 20px; }
:is(.dock-tab, .dock-tool):hover:not(:disabled) { background: rgb(255 255 255 / .6); color: var(--glass-ink); }
:is(.dock-tab, .dock-tool):active { transform: scale(.95); }
:is(.dock-tab, .dock-tool):is([aria-expanded="true"], [aria-pressed="true"]) { background: #fff; color: var(--fp-amber-ink); border-color: color-mix(in srgb, var(--fp-amber) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fp-amber) 22%, transparent), 0 6px 16px rgb(30 22 8 / .12); }
.dock [hidden] { display: none !important; }

.dock-select { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 14px; color: var(--glass-secondary); font-size: 12px; border-radius: 20px;
  background: rgb(255 255 255 / .5); border: 1px solid rgb(255 255 255 / .8); }
.dock-select select { max-width: 132px; height: 100%; padding: 0 22px 0 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596a70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 16px;
  color: var(--glass-ink); font-size: 13px; font-weight: 550; cursor: pointer; text-overflow: ellipsis; }
.dock-select select:disabled { opacity: .5; cursor: default; }

.dock-views, .dock-more, .dock-zoom, .dock-zoom-sep { display: none; }
body.decomposition-mode .dock-zoom { display: flex; }
body.decomposition-mode .dock-zoom-sep { display: block; }
.dock-zoom { gap: 4px; }
.dock-zoom .dock-tool:disabled { opacity: .38; cursor: default; }
.dock-secondary { gap: 6px; }
body.property-scene .dock-views { display: flex; }
body.property-scene :is(.mode-switch, #panelToggle, #grid, .dock-mode-sep) { display: none; }

.viewer-notice { bottom: var(--dock-clear, 90px); }

@media (max-width: 1500px) {
  body.decomposition-mode .dock-panels .dock-tab { width: 44px; padding: 0; }
  body.decomposition-mode .dock-panels .dock-tab span { display: none; }
}
@media (max-width: 1180px) {
  .dock-panels .dock-tab { width: 44px; padding: 0; }
  .dock-panels .dock-tab span { display: none; }
}
@media (max-width: 740px) {
  .dock { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); flex-wrap: wrap; justify-content: space-between; gap: 4px; max-width: none; border-radius: 26px;
    transform: none; animation-name: dock-in-mobile; }
  .dock-sep { display: none !important; }
  .dock-zoom { order: 1; gap: 2px; }
  .dock-zoom .dock-tool { width: 42px; height: 42px; }
  .dock-panels, .dock-views { flex: 1; min-width: 0; justify-content: space-around; order: 1; }
  .dock-more { display: flex; order: 1; }
  .dock-mode { order: 2; display: none; width: 100%; }
  .dock-secondary { order: 3; display: none; width: 100%; padding: 4px 0 2px; }
  .dock[data-more="true"] :is(.dock-mode, .dock-secondary) { display: flex; }
  .dock-mode { flex-wrap: wrap; }
  .mode-switch, .wall-switch { width: 100%; }
  .mode-switch button { flex: 1; padding: 0 8px; }
  .wall-switch button { flex: 1; justify-content: center; padding: 0 8px; }
  .dock-select { flex: 1; min-width: 0; }
  .dock-select select { flex: 1; max-width: none; }
  .dock-panels .dock-tab, .dock-views .dock-tab, .dock-more { flex: 1; flex-direction: column; gap: 3px; width: auto; min-width: 0; min-height: 54px; padding: 6px 2px; border-radius: 18px; font-size: 10px; }
  .dock-panels .dock-tab span, .dock-views .dock-tab span, .dock-more span { display: block; }
  .dock-more { flex: 0 0 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .dock { animation-duration: .01s; }
  :is(.dock-tab, .dock-tool, .mode-switch button) { transition-duration: .01s; }
}

body.property-scene .dock-mode { display: none !important; }