/* app-switcher.css — drop this into pb_public/shared/ so all three apps load it */

.app-switcher {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  display: flex;
  gap: 6px;
  padding: 5px;
  background: rgba(20, 18, 15, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}

.app-switcher-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Syne', 'DM Serif Display', 'Fraunces', serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  padding: 0;
  text-decoration: none;
}
.app-switcher-btn:hover {
  color: #fff;
  transform: scale(1.08);
}
.app-switcher-btn .app-switcher-dot {
  color: currentColor;
  margin-left: 1px;
}

/* Active state — the app you're currently in */
.app-switcher-btn.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--app-accent);
}

/* Individual accent colors per app, applied via data attribute */
.app-switcher-btn[data-app="stash"] { --app-accent: #c8553d; }
.app-switcher-btn[data-app="dock"]  { --app-accent: #e87a3e; }
.app-switcher-btn[data-app="ink"]   { --app-accent: #4a8b7e; }

.app-switcher-btn:hover[data-app="stash"] { color: #c8553d; }
.app-switcher-btn:hover[data-app="dock"]  { color: #e87a3e; }
.app-switcher-btn:hover[data-app="ink"]   { color: #4a8b7e; }

/* Tooltip on hover */
.app-switcher-btn::after {
  content: attr(data-label);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Figtree', 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(20, 18, 15, 0.9);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.app-switcher-btn:hover::after { opacity: 1; }

@media (max-width: 480px) {
  .app-switcher { top: 10px; right: 10px; }
  .app-switcher-btn::after { display: none; }
}