/* floating overlays on top of the 3D room: topbar badge, mode toggle,
   tip card, hover chip, meow bubble, rack bar */

.topbar-badge {
  position: absolute;
  left: 20px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(42, 39, 64, .34);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(42, 39, 64, .16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: tipIn .45s ease-out both;
}

.traffic-lights {
  display: flex;
  gap: 5px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(42, 39, 64, .35);
}

.dot-pink { background: #ff6fb5; }
.dot-yellow { background: #ffd76f; }
.dot-teal { background: #55d3e0; }

.badge-label {
  font: 400 12px Silkscreen, monospace;
  color: var(--ink);
}

.top-actions {
  position: absolute;
  right: 20px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-links {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(42, 39, 64, .34);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(42, 39, 64, .16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: tipIn .45s ease-out both;
}

.quick-links a,
.quick-links button {
  padding: 6px 9px;
  background: none;
  border-radius: 999px;
  font: 400 12px Silkscreen, monospace;
  color: var(--ink);
  cursor: pointer;
}

.quick-links a:hover,
.quick-links button:hover {
  background: rgba(233, 68, 127, .16);
  text-decoration: none;
}

.mode-toggle {
  padding: 8px 12px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(42, 39, 64, .34);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(42, 39, 64, .16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 400 12px Silkscreen, monospace;
  color: var(--ink);
  cursor: pointer;
  animation: tipIn .45s ease-out both;
}

.hover-chip {
  position: absolute;
  right: 20px;
  top: 62px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(42, 39, 64, .22);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(42, 39, 64, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 400 12px Silkscreen, monospace;
  color: var(--ink);
}

/* bottom-centre only in the full room and at the album rack; everywhere else it stays top right */
.hover-chip.chip-bottom {
  right: auto;
  top: auto;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 8px 18px;
  font-size: 13px;
}

.meow-bubble {
  position: absolute;
  left: 96px;
  top: 118px;
  padding: 7px 13px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px 14px 14px 3px;
  box-shadow: 3px 3px 0 rgba(42, 39, 64, .2);
  font: 13px Verdana, sans-serif;
  color: var(--ink);
  animation: popIn .22s cubic-bezier(.2, .9, .25, 1) both;
}

/* short landscape viewports (phones on their side) */
@media (max-height: 500px) {
  .topbar-badge,
  .top-actions {
    top: 10px;
  }

  .topbar-badge { left: max(12px, env(safe-area-inset-left)); }
  .top-actions { right: max(12px, env(safe-area-inset-right)); }

  .quick-links a,
  .quick-links button { padding: 4px 7px; font-size: 11px; }
  .mode-toggle { padding: 6px 10px; font-size: 11px; }

  .hover-chip {
    top: 48px;
    right: max(12px, env(safe-area-inset-right));
  }

  .hover-chip.chip-bottom {
    top: auto;
    right: auto;
    bottom: 10px;
  }

  .meow-bubble {
    left: 80px;
    top: 60px;
  }
}

/* lofi controls, bottom-right of the room; slides left when the side panel is open */
.lofi-dock {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(42, 39, 64, .42);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(42, 39, 64, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: right .52s cubic-bezier(.2, .85, .2, 1);
}

.lofi-dock.panel-open { right: min(556px, calc(100vw - 260px)); }

.dock-title {
  font: 400 12px Silkscreen, monospace;
  color: var(--ink);
}