/* Glass treatment from the Vibiz landing-navbar pill, with shared hit areas and gutters. */
:root {
  --ui-edge: 32px;
  --ui-gap: 8px;
  --ui-height: 40px;
  --ui-ink: #35434c;
  --ui-surface: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.3),
    rgb(231 231 231 / 0.3) 42%,
    rgb(251 251 251 / 0.3)
  );
  --ui-border: rgb(255 255 255 / 0.7);
  --ui-hover: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.6),
    rgb(231 231 231 / 0.45) 42%,
    rgb(251 251 251 / 0.3)
  );
  --ui-active: linear-gradient(180deg, #eaf7ffb3, #c7e4f280);
  --ui-shadow: 0 0 0 .5px rgb(15 23 42 / 0.12), 0 10px 24px rgb(0 0 0 / 0.12);
  --ui-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.8), transparent);
}
body.night-mode:not(.read-mode) {
  --ui-ink: #eaf1f5;
  --ui-surface: linear-gradient(180deg, #4b5b6b70, #28343f80 42%, #36465470);
  --ui-border: #ffffff40;
  --ui-hover: linear-gradient(180deg, #61738690, #384d60a0);
  --ui-active: linear-gradient(180deg, #587e96a0, #2f5065a0);
  --ui-sheen: linear-gradient(180deg, #ffffff40, transparent);
}
#desk-ui-header {
  height: 80px;
  padding: 20px var(--ui-edge);
  gap: 24px;
  align-items: center;
}
#desk-ui-header .header-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-gap);
  margin-left: auto;
}
#desk-ui-header .header-note {
  padding-left: 24px;
}
#desk-ui-footer {
  position: fixed;
  inset: auto 0 0;
  height: auto;
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px var(--ui-edge);
  background: none;
  backdrop-filter: none;
}
#desk-ui-footer .view-switch {
  display: flex;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  background: none;
  gap: 0;
}
#desk-ui-footer .camera-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  width: auto;
  height: auto;
  order: initial;
  flex-wrap: nowrap;
}
#desk-ui-footer .control-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
#desk-ui-header .control,
#desk-ui-footer .control,
#work-dialog .control {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--ui-height);
  min-width: 40px;
  width: auto;
  padding: 0 12px;
  margin: 0;
  border: 1px solid var(--ui-border);
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  backdrop-filter: blur(6px) saturate(1.5);
  -webkit-backdrop-filter: blur(6px) saturate(1.5);
  color: var(--ui-ink);
  font: 500 13px / 1 var(--sans);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
#desk-ui-header .control span,
#desk-ui-footer .control span {
  font: inherit;
}
#desk-ui-header .control svg,
#desk-ui-footer .control svg {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#desk-ui-header .control:hover,
#desk-ui-footer .control:hover,
#work-dialog .control:hover {
  background: var(--ui-hover);
  border-color: #ffffffb3;
}
#desk-ui-header .control:focus-visible,
#desk-ui-footer .control:focus-visible,
#work-dialog .control:focus-visible,
.dialog-close:focus-visible {
  outline: 2px solid #0081c0;
  outline-offset: 3px;
}
#desk-ui-header .control[aria-pressed="true"],
#work-dialog .work-task-controls .control[aria-pressed="true"] {
  background: var(--ui-active);
  color: var(--ui-ink);
  border-color: #0081c070;
}
#desk-ui-footer .view-switch .control[aria-pressed="true"] {
  display: none;
}
#desk-ui-footer .icon-control {
  width: 40px;
  padding: 0;
}
#desk-ui-footer .control-primary {
  margin-left: auto;
  background: linear-gradient(180deg, #343434db, #171717e6);
  color: #fff;
  border-color: #ffffff45;
  padding: 0 16px;
  gap: 20px;
}
#desk-ui-footer .control-primary:hover {
  background: #006da3;
  border-color: #006da3;
}
#desk-ui-footer .control-orbit {
  padding-left: 16px;
  border-left: 1px solid var(--ui-border);
}
#desk-ui-header .shift-toggle {
  display: none;
}
body[data-office="ready"]:not(.read-mode) #desk-ui-header .shift-toggle {
  display: inline-flex;
}
body.read-mode #desk-ui-footer .camera-controls {
  display: none;
}
body.room-active .scene-caption {
  left: var(--ui-edge);
  bottom: 96px;
  padding: 8px 14px;
  gap: 10px;
}
body.room-active.night-mode .scene-caption {
  color: var(--ui-ink);
  background: var(--ui-surface);
  backdrop-filter: blur(6px);
}
body.room-active .scene-caption .drag-symbol {
  flex: 0 0 auto;
  line-height: 1;
}
body[data-coffee="spilled"] #desk-ui-footer .reset-button {
  background: #fff0d7;
  color: #984c24;
  border-color: #d39359;
}
body .office-prop {
  min-height: 32px;
  padding: 0 10px;
  font: 500 12px / 1 var(--sans);
  gap: 6px;
  border-radius: 8px;
}
.dialog-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  right: 16px;
  top: 16px;
  line-height: 1;
  border-radius: 8px;
}
.dialog-close:hover {
  background: #71879612;
}
#work-dialog {
  --ui-ink: #35434c;
  --ui-surface: #fff;
  --ui-border: #63778530;
  --ui-hover: #edf5fa;
  --ui-active: #e4f3fb;
}
#work-dialog .work-heading {
  gap: 16px;
  margin-bottom: 20px;
  padding-right: 44px;
}
#work-dialog .work-task-controls {
  gap: 8px;
  margin-top: 16px;
}
@media (max-width: 1180px) {
  #desk-ui-header .header-note {
    display: none;
  }
  #desk-ui-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  #desk-ui-footer .camera-controls {
    grid-column: 1 / -1;
    justify-content: center;
    order: 3;
  }
  body.room-active .scene-caption {
    bottom: 144px;
  }
}
@media (max-width: 760px) {
  :root {
    --ui-edge: 16px;
  }
  #desk-ui-header {
    height: 72px;
    padding: 16px;
    gap: 12px;
  }
  #desk-ui-header .brand {
    font-size: 25px;
    gap: 8px;
  }
  body.room-active:not(.read-mode) #desk-ui-header .brand {
    color: #fff9ed;
    text-shadow: 0 1px 8px rgb(35 21 13 / 0.4);
  }
  #desk-ui-header .header-actions {
    gap: 8px;
  }
  #desk-ui-header .control {
    width: 40px;
    padding: 0;
  }
  #desk-ui-header .control span {
    display: none;
  }
  #desk-ui-footer {
    padding: 12px 16px max(16px, env(safe-area-inset-bottom));
    gap: 12px;
  }
  #desk-ui-footer .camera-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    width: 100%;
  }
  #desk-ui-footer .control-presets {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  #desk-ui-footer .control-orbit {
    padding: 0;
    border: 0;
    gap: 4px;
  }
  #desk-ui-footer .control {
    font-size: 12px;
    justify-self: stretch;
    padding: 0 10px;
  }
  #desk-ui-footer .icon-control {
    padding: 0;
  }
  #desk-ui-footer .control-primary {
    gap: 12px;
    margin-left: 0;
  }
  #desk-ui-footer .reset-button {
    grid-column: auto;
    justify-self: end;
  }
  body.room-active .scene-caption {
    bottom: 180px;
    font-size: 10px;
    max-width: calc(100vw - 32px);
  }
  #work-dialog .work-task-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #work-dialog .work-heading {
    padding-right: 32px;
    gap: 12px;
  }
  #work-dialog .control {
    font-size: 12px;
    padding: 0 10px;
  }
  body.read-mode #desk-ui-footer {
    min-height: 72px;
  }
  body.read-mode #desk-ui-footer .view-switch svg {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  #desk-ui-header .control,
  #desk-ui-footer .control,
  #work-dialog .control {
    transition: none;
  }
}
@media print {
  #desk-ui-header,
  #desk-ui-footer {
    display: none !important;
  }
}

/* A subtle edge reflection keeps each control one continuous glass surface. */
#desk-ui-header .control::before,
#desk-ui-footer .control::before,
#work-dialog .control::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  left: 12px;
  right: 12px;
  top: 3px;
  height: 12px;
  border-radius: 999px;
  background: var(--ui-sheen);
  opacity: .35;
  filter: blur(2px);
}
body.room-active[data-office="ready"] .office-prop-controls .office-prop {
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
  backdrop-filter: blur(6px) saturate(1.5);
  -webkit-backdrop-filter: blur(6px) saturate(1.5);
}
#desk-ui-footer .control-primary {
  --ui-sheen: linear-gradient(180deg, #ffffff24, transparent);
}

/* Restore the original introduction without adding an opaque sidebar over the room. */
@media (min-width: 1001px) {
  body.room-active:not(.read-mode) .intro {
    position: fixed; inset: 110px auto auto var(--ui-edge); width: clamp(290px, 30vw, 430px);
    height: auto; padding: 0; margin: 0; overflow: visible; clip: auto;
    white-space: normal; z-index: 6; pointer-events: none;
    filter: drop-shadow(0 2px 14px #fff9);
  }
  body.room-active .intro::before { content: ""; position: absolute; inset: -28px -32px -20px -32px; z-index: -1; background: radial-gradient(ellipse at 30% 45%, #f2eddfed, #f2eddfa8 48%, transparent 74%); filter: blur(16px); }
  body.room-active.night-mode .intro::before { background: radial-gradient(ellipse at 30% 45%, #292722e6, #29272299 48%, transparent 74%); }
  body.room-active .intro h1 { font-size: clamp(42px, 3.5vw, 60px); line-height: 1.12; }
  body.room-active .intro .availability { margin-bottom: 18px; color: #343d38; }
  body.room-active .intro-description { display: block; color: #343d38; font-size: 15px; }
  body.room-active.night-mode .intro { filter: drop-shadow(0 2px 14px #000a); }
  body.room-active.night-mode .intro-description, body.room-active.night-mode .intro .availability { color: #f3eee6; }
}
body.read-mode .room-keyboard-controls { display: none; }
.room-keyboard-controls .skip:focus { top: 84px; border-radius: 999px; color: #25333e; box-shadow: 0 4px 24px #0003; }

#desk-ui-footer #camera-menu-toggle, #desk-ui-footer .hire-short { display: none; }
@media (max-width: 760px) {
  body.room-active #desk-ui-footer {
    height: auto; min-height: 72px; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 10px;
  }
  body.room-active:not(.read-mode) #desk-ui-footer #camera-menu-toggle { display: inline-flex; }
  #desk-ui-footer .hire-full { display: none; }
  #desk-ui-footer .hire-short { display: inline; }
  #desk-ui-footer .view-switch .control { width: 100%; }
  body.room-active:not(.read-mode) #desk-ui-footer .control-primary { grid-column: 3; }
  #desk-ui-footer .camera-controls { display: none; }
  body.camera-menu-open:not(.read-mode) #desk-ui-footer .camera-controls {
    display: grid; position: absolute; bottom: calc(100% + 8px); left: 16px; right: 16px; width: auto;
    padding: 12px; border-radius: 24px; background: #eee8deed; border: 1px solid #ffffffb3;
    backdrop-filter: blur(14px); box-shadow: 0 8px 28px #0003; pointer-events: auto;
  }
  body.camera-menu-open.night-mode #desk-ui-footer .camera-controls { background: #2b2e2be8; }
  body.room-active .scene-caption { display: none; }
  body.read-mode #desk-ui-footer { display: flex; justify-content: space-between; }
}

@media (max-width: 760px) {
  #desk-ui-header .control::before { opacity: .3; }
  #desk-ui-header .control, #desk-ui-footer .control { min-height: 44px; }
  .touch-help { margin: 0 0 4px; grid-column: 1 / -1; font: 12px/1.5 var(--sans); color: var(--ui-ink); }
}
@media (min-width: 761px) { .touch-help { display: none; } }

/* Icon-only controls have equal sides and the shared rounded glass corners. */
#desk-ui-footer .icon-control {
  width: var(--ui-height);
  height: var(--ui-height);
  border-radius: 16px;
}
@media (max-width: 760px) {
  #desk-ui-header .control,
  #desk-ui-footer .icon-control,
  #desk-ui-footer #camera-menu-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 16px;
    padding: 0;
  }
  body.room-active #desk-ui-footer { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
}