/* css/dock.css — macOS-style Dock. Owned by Dev C. All classes prefixed tb-.
   Rendered into <div id="dock-root"> (positioning handled by Dev A). */

.tb-dock {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: max-content;
  padding: 8px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Square item and button shrink together on crowded desktop widths.
   Magnification uses their measured sizes without changing the tray layout. */
.tb-dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 52px;
  height: auto;
  aspect-ratio: 1;
  transition: transform 0.12s ease-out;
}

.tb-dock-icon {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform 0.12s ease-out;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.tb-dock-icon:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
  border-radius: 14px;
}

.tb-dock-icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 12px !important;
  font-size: 30px;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

.tb-dock-icon:active .tb-dock-icon-img {
  filter: brightness(0.82);
}

/* PNG app icons: full-bleed squircles that fill the tile edge-to-edge.
   Most artwork carries its own rounded corners; the 12px radius clips the
   odd full-bleed square image (e.g. Buy Me a Coffee) to the same squircle
   silhouette so every icon reads the same size. */
.tb-dock-icon-img-file {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

/* full-bleed images (Buy Me a Coffee webp) carry no built-in padding like
   the macosicons artwork — scale them down so the visual mass matches the
   neighboring icons (radius grows proportionally to keep the squircle) */
.tb-dock-icon-img-file[src*="google-play-app"] {
  transform: scale(0.88);
  border-radius: 14px;
}

/* Dark pill label above the icon; shown on hover / keyboard focus. */
.tb-dock-tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(24, 24, 28, 0.88);
  color: #fff;
  font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.tb-dock-tooltip[hidden] { display: none; }

.tb-dock-error {
  width: 240px;
  max-width: 70vw;
  padding: 10px 12px;
  white-space: normal;
  line-height: 1.4;
  z-index: 2;
}

/* Running indicator: 4px dark dot, 4px below the icon, hidden by default. */
.tb-dock-dot {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.78);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.tb-dock-dot--on {
  opacity: 1;
}

/* 1px vertical separator between icon groups. */
.tb-dock-separator {
  align-self: stretch;
  width: 1px;
  margin: 8px 4px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 1px;
}

/* Trash "no" wiggle — plays on click instead of dispatching an event. */
@keyframes tb-dock-wiggle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20%      { transform: translateX(-2px) rotate(-3deg); }
  40%      { transform: translateX(2px) rotate(3deg); }
  60%      { transform: translateX(-1px) rotate(-2deg); }
  80%      { transform: translateX(1px) rotate(2deg); }
}

.tb-dock-icon--wiggle .tb-dock-icon-img {
  transform-origin: center;
  animation: tb-dock-wiggle 0.4s ease;
}

/* Side padding includes room for the composed trash wiggle. The border-box
   cap keeps that padding inside the viewport; lifted icons/tooltips stay free. */
.tb-dock {
  max-width: calc(100vw - 24px);
}

.tb-dock-item {
  flex-shrink: 1;
  min-width: 0;
}

.tb-dock-separator { flex-shrink: 0; transition: transform 0.12s ease-out; }

/* Phones/tablets: NEVER shrink and NEVER hide icons — the tray scrolls
   horizontally at full 52px size (touch-friendly), scrollbar suppressed.
   Hover magnification is disabled in js on these widths. */
@media (max-width: 768px) {
  .tb-dock {
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 18px;
    width: max-content;          /* keep shorter docks snug on tablets */
    max-width: 90vw;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* legacy Edge */
  }

  .tb-dock::-webkit-scrollbar {
    display: none;
  }

  .tb-dock-item {
    width: 52px;
    height: 52px;
    min-width: 52px;
    flex-shrink: 0;
  }

  .tb-dock-separator {
    flex-shrink: 0;
    margin: 8px 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tb-dock-item, .tb-dock-icon, .tb-dock-separator { transition: none; }
  .tb-dock-icon--wiggle .tb-dock-icon-img { animation: none; }
}

/* Dock sorting uses a floating copy; the real button keeps its slot and handlers. */
.tb-dock-reordering .tb-dock-item,
.tb-dock-reordering .tb-dock-icon { transition:none !important; }
.tb-dock-reordering .tb-dock-tooltip { visibility:hidden; }
.tb-dock-reorder-source .tb-dock-icon,
.tb-dock-reorder-source .tb-dock-dot { opacity:0; }
html.tb-dock-reorder-active, html.tb-dock-reorder-active * { cursor:grabbing !important; user-select:none !important; }
.tb-dock-reorder-ghost { position:fixed;left:0;top:0;z-index:2147483647;pointer-events:none;padding:0;border:0;background:none;transform-origin:center;filter:drop-shadow(0 12px 12px #0006);will-change:transform; }
.tb-dock-reorder-ghost .tb-dock-mobile-label { display:none; }
.tb-dock-reorder-status { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.tb-dock-customising .tb-dock-icon { cursor:grab; }
.tb-dock-customise-notice { position:absolute;bottom:calc(100% + 58px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(480px,calc(100vw - 32px));box-sizing:border-box;padding:9px 15px;border:1px solid #ffffff40;border-radius:16px;background:#202832c9;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 4px 16px #0003;color:#fff;font:500 12px/1.4 var(--tb-font);white-space:normal;text-align:center;overflow-wrap:anywhere;pointer-events:none; }
.tb-dock-customise-notice[hidden] { display:none; }
@media(min-width:769px) and (hover:hover) { .tb-dock-customising .tb-dock-icon { touch-action:none; } }