/* UUS V14 — partner drawer at lower left; navigation and actions at lower right. */
:root {
  --partner-width: clamp(142px, 11.5vw, 174px);
  --dock-right: max(4.5vw, env(safe-area-inset-right, 0px));
  --dock-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}

.uus-partner-drawer {
  position: fixed;
  left: 0;
  bottom: var(--dock-bottom);
  z-index: 18;
  width: var(--partner-width);
  aspect-ratio: 1306 / 1084;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  contain: layout paint;
}
.partner-panel,
.partner-gold {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  backface-visibility: hidden;
}
.partner-panel { z-index: 0; border-radius: 12% 1% 12% 12%; }
.partner-gold { z-index: 1; }
.partner-panel img,
.partner-gold img {
  display: block;
  position: absolute;
  height: auto;
  max-width: none;
  pointer-events: none;
}
/* Per-layer framing retains the generated alpha without changing the PNGs. */
.partner-panel img { top: 0; left: -5.513%; width: 111.103%; }
.partner-gold img { bottom: 0; left: -1.852%; width: 103.348%; }
.uus-partner-drawer[data-moving] .partner-panel,
.uus-partner-drawer[data-moving] .partner-gold { will-change: transform; }
.partner-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}
.partner-handle:focus-visible {
  outline: 2px solid #f6d000;
  outline-offset: -3px;
}
.desk-open .uus-partner-drawer { visibility: hidden; }

/* All existing React controls keep their original actions and accessible names. */
.experience .journey-footer {
  height: 178px;
  padding: 0;
  pointer-events: none;
  background: linear-gradient(0deg, #090d1ba6, transparent 70%);
}
.experience .playback-controls {
  position: fixed;
  right: var(--dock-right);
  bottom: var(--dock-bottom);
  gap: 22px;
  pointer-events: auto;
}
.experience .autoplay-button,
.experience .motion-button { min-height: 36px; }
.experience .legal-rail {
  left: auto;
  right: var(--dock-right);
  bottom: calc(var(--dock-bottom) + 42px);
  justify-content: flex-end;
  font-size: 12px;
  gap: 10px;
}
.experience .legal-rail button { min-height: 28px; }
.experience .chapter-nav {
  left: auto;
  right: var(--dock-right);
  top: auto;
  bottom: calc(var(--dock-bottom) + 80px);
  transform: none;
  flex-direction: row;
  gap: 9px;
  counter-reset: chapter;
  z-index: 16;
}
.experience .chapter-nav button {
  position: relative;
  justify-content: center;
  gap: 0;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 1px solid #b2bfd330;
  border-radius: 4px;
  background: #09112170;
  color: #adb8cc;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: color 180ms, border-color 180ms, background 180ms;
}
.experience .chapter-nav button::before { counter-increment: chapter; content: counter(chapter, decimal-leading-zero); }
.experience .chapter-nav button.active { color: #f5e5a2; border-color: #d2c49499; background: #27314a99; }
.experience .chapter-nav button:hover { color: white; border-color: #d2c494; }
.experience .chapter-nav .nav-dot { display: none; }
.experience .chapter-nav .nav-name {
  position: absolute;
  right: 0;
  bottom: calc(100% + 62px);
  padding: 5px 9px;
  white-space: nowrap;
  pointer-events: none;
  font-size: 12px;
  transform: translateY(3px);
}
.experience .chapter-status {
  position: fixed;
  left: auto;
  right: var(--dock-right);
  bottom: calc(var(--dock-bottom) + 124px);
  justify-content: flex-end;
  font-size: 12px;
  gap: 8px;
}
.experience .chapter-status .footer-rule { width: 18px; }
.experience .chapter-status .status-title { margin-left: 4px; }
.experience .scroll-cue { position: fixed; bottom: var(--dock-bottom); left: 43%; }
.experience .replay { bottom: calc(var(--dock-bottom) + 154px); right: var(--dock-right); }
.experience .loading-status { bottom: calc(var(--dock-bottom) + 194px); right: var(--dock-right); }

@media (max-width: 1150px) { .experience .scroll-cue { display: none; } }

@media (max-width: 760px) {
  :root {
    --partner-width: clamp(100px, 28vw, 124px);
    --dock-right: max(12px, env(safe-area-inset-right, 0px));
    --dock-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
  .experience .playback-controls,
  .experience .legal-rail,
  .experience .chapter-nav,
  .experience .chapter-status { max-width: calc(100vw - var(--partner-width) - 26px); }
  .experience .playback-controls { flex-direction: column; align-items: flex-end; gap: 0; }
  .experience .autoplay-button,
  .experience .motion-button { min-height: 30px; padding: 5px 0; font-size: 11px; gap: 6px; }
  .experience .legal-rail {
    bottom: calc(var(--dock-bottom) + 65px);
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 0;
    font-size: 10px;
    line-height: 1.3;
  }
  .experience .legal-rail button { min-height: 24px; padding: 4px 0; }
  .experience .chapter-nav { bottom: calc(var(--dock-bottom) + 120px); gap: 5px; }
  .experience .chapter-nav button { width: 32px; height: 32px; font-size: 11px; }
  .experience .chapter-status { bottom: calc(var(--dock-bottom) + 161px); font-size: 10px; gap: 6px; }
  .experience .chapter-status .status-title { display: none; }
  .experience .journey-footer { height: 190px; }
  .experience .loading-status { bottom: calc(var(--dock-bottom) + 185px); }
}

@media (max-height: 559px) and (min-width: 761px) {
  :root { --partner-width: 112px; --dock-right: max(18px, env(safe-area-inset-right, 0px)); }
  .experience .replay { display: none; }
}

@media (pointer: coarse) { .partner-handle { min-width: 44px; } }
@media (prefers-reduced-motion: reduce) { .experience .chapter-nav button { transition: none; } }