/* STILL · Copyright 2026 DeltyWeb Ltd. All rights reserved.
   Depth toolbar and presentation controls. The mini-player has one responsive layout below. */

.depth-control-chip{
  position:absolute;
}

.depth-control-chip b{
  color:#cdbb7b;
  font-weight:500;
}

@media(max-width:700px){
.depth-control-chip{
  display:none;
}
}

.depth-control-chip{
  right:auto;
  display:flex;
  align-items:center;
  gap:18px;
  padding:9px 10px 9px 12px;
  min-height:40px;
  border:1px solid rgba(210,194,137,.18);
  color:#8f958a;
  font-size:5px;
  letter-spacing:1.1px;
  pointer-events:auto;
}

.depth-control-actions{
  display:flex;
  gap:5px;
  padding-left:12px;
  border-left:1px solid rgba(214,198,143,.14);
}

.depth-control-actions button{
  height:25px;
  padding:0 8px;
  border:1px solid rgba(209,193,137,.17);
  background:rgba(255,255,255,.015);
  color:#a6aa9f;
  font:inherit;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}

.depth-control-actions button:hover,
.depth-control-actions button:focus-visible{
  color:#f0ead8;
  border-color:rgba(212,194,132,.5);
  background:rgba(203,184,120,.08);
}

.depth-control-actions button.is-active{
  color:#171717;
  background:#d2c083;
  border-color:#d2c083;
}

.depth-camera-readout{
  position:absolute;
  display:grid;
  grid-template-columns:auto auto auto;
  gap:4px 12px;
  padding:8px 10px;
  border:1px solid rgba(210,194,137,.11);
  font-size:5px;
  letter-spacing:1px;
  color:#6f766c;
  pointer-events:none;
}

.depth-camera-readout b{
  color:#a9a483;
  font-weight:500;
}

.depth-camera-readout span{
  min-width:38px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.depth-stage.is-entering .depth-control-chip,
.depth-stage.is-entering .depth-camera-readout{
  opacity:.16;
  transition:opacity .22s ease;
}

@media(max-width:900px){
.depth-control-chip{
  gap:10px;
}

.depth-control-actions{
  padding-left:8px;
}
}

@media(max-width:700px){
.depth-control-chip{
  left:12px;
  bottom:12px;
  padding:7px;
}

.depth-control-actions{
  border-left:0;
  padding-left:0;
}

.depth-control-actions button{
  min-width:40px;
  padding:0 6px;
  font-size:5px;
}

.depth-camera-readout{
  display:none;
}
}

.depth-control-chip{
  left:28px;
}

.depth-camera-readout{
  right:28px;
}

.depth-control-actions button{
  min-width:46px;
}

.depth-camera-readout{
  min-width:122px;
}

.depth-control-chip{
  z-index:30;
  bottom:28px;
  max-width:calc(100% - 260px);
}

.depth-control-actions{
  align-items:center;
  flex-wrap:wrap;
}

.depth-camera-readout{
  z-index:29;
  bottom:28px;
}

@media(max-width:1100px){
.depth-control-chip{
  max-width:calc(100% - 40px);
}

.depth-camera-readout{
  display:none;
}
}

.depth-toolbar{
  min-height:54px;
  padding:8px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid rgba(212,197,149,.10);
  position:relative;
  z-index:40;
}

.depth-toolbar .depth-control-chip,
.depth-toolbar .depth-camera-readout{
  position:static;
  inset:auto;
  max-width:none;
  margin:0;
}

.depth-toolbar .depth-control-chip{
  flex:1 1 auto;
  min-width:0;
}

.depth-toolbar .depth-camera-readout{
  flex:0 0 auto;
}

@media(max-width:1100px){
.depth-toolbar{
  align-items:flex-start;
}

.depth-toolbar .depth-camera-readout{
  display:grid;
}
}

@media(max-width:800px){
.depth-toolbar{
  padding:7px 12px;
}

.depth-toolbar .depth-camera-readout{
  display:none;
}
}

.depth-control-actions button[data-gl-active="true"]{
  color:#171717!important;
  background:#d2c083!important;
  border-color:#d2c083!important;
}

#depth-view.depth-webgl-ready .depth-camera-readout{
  font-variant-numeric:tabular-nums;
}

#depth-view.depth-webgl-ready .depth-toolbar{
  position:relative;
  z-index:32;
}

.depth-tour-active .depth-camera-readout{
  opacity:0!important;
  pointer-events:none!important;
}

.depth-tour-active .depth-control-actions>button:not(#depth-play):not(#depth-skip):not(#depth-exit){
  display:none!important;
}

.depth-tour-active .depth-control-chip{
  flex:0 0 auto;
  border-color:rgba(215,197,136,.26);
  background:rgba(7,7,7,.78);
  box-shadow:0 20px 55px rgba(0,0,0,.28);
}

.depth-tour-active .depth-toolbar{
  justify-content:center;
  background:linear-gradient(180deg,rgba(11,11,11,.94),rgba(9,9,9,.90));
}

#depth-view.depth-fullscreen .depth-toolbar{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  margin:0!important;
  transform:translateX(-50%);
  z-index:82!important;
  opacity:.82;
  transition:opacity .2s,border-color .2s,background .2s;
}

#depth-view.depth-fullscreen .depth-toolbar:hover,
#depth-view.depth-fullscreen .depth-toolbar:focus-within{
  opacity:1;
}

#depth-view.depth-fullscreen .depth-control-chip{
  position:static!important;
  inset:auto!important;
  min-height:0!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

#depth-view.depth-fullscreen .depth-primary-actions{
  display:flex;
  align-items:center;
  padding:0!important;
  border:0!important;
}

#depth-view.depth-fullscreen .depth-primary-actions button{
  white-space:nowrap;
}

#depth-view.depth-fullscreen.depth-tour-active .depth-toolbar{
  top:76px!important;
  opacity:1;
  width:auto!important;
}

#depth-view.depth-fullscreen.depth-tour-active .depth-primary-actions>button:not(#depth-play):not(#depth-skip):not(#depth-exit){
  display:none!important;
}

@media(max-width:800px){
#depth-view.depth-fullscreen .depth-toolbar{
  top:66px!important;
  max-width:calc(100% - 18px);
}

#depth-view.depth-fullscreen .depth-primary-actions button{
  padding:0 8px!important;
}
}

#depth-view.depth-titles-active .depth-primary-actions>button:not(#depth-titles):not(#depth-skip):not(#depth-exit){
  display:none!important;
}

#depth-view.depth-reel-active.depth-reel-hero-mode .depth-primary-actions>button:not(#depth-reel):not(#depth-skip):not(#depth-exit),
#depth-view.depth-reel-active.depth-reel-classic-mode .depth-primary-actions>button:not(#depth-reel-classic):not(#depth-skip):not(#depth-exit){
  display:none!important;
}

#depth-view.depth-showreel-active .depth-toolbar{
  top:76px!important;
  border-color:rgba(214,197,136,.18)!important;
}

#depth-view.depth-showreel-final .depth-toolbar{
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity 1.4s ease!important;
}

#depth-view.depth-fullscreen .depth-toolbar{
  top:82px!important;
  width:max-content!important;
  max-width:calc(100vw - 36px)!important;
  min-height:45px!important;
  padding:5px!important;
  overflow:visible!important;
  scrollbar-width:none;
  border-top-color:var(--gloss-edge-hi)!important;
  border-bottom-color:rgba(0,0,0,.78)!important;
  border-radius:7px!important;
}

#depth-view.depth-fullscreen .depth-toolbar::-webkit-scrollbar{
  display:none;
}

#depth-view.depth-fullscreen .depth-control-chip{
  min-width:0!important;
  width:100%;
}

#depth-view.depth-fullscreen .depth-primary-actions{
  gap:5px!important;
  width:100%;
  min-width:0;
  flex-wrap:wrap!important;
  justify-content:center;
  white-space:nowrap!important;
}

#depth-view.depth-fullscreen .depth-primary-actions button{
  height:35px!important;
  min-width:0!important;
  padding:0 14px!important;
  border:1px solid rgba(255,255,255,.065)!important;
  border-top-color:rgba(255,255,255,.12)!important;
  border-bottom-color:rgba(0,0,0,.68)!important;
  border-radius:4px!important;
  font-size:8px!important;
  font-weight:600!important;
  letter-spacing:.82px!important;
  line-height:1!important;
  text-shadow:0 1px 0 rgba(0,0,0,.9)!important;
}

#depth-view.depth-fullscreen .depth-primary-actions button:hover,
#depth-view.depth-fullscreen .depth-primary-actions button:focus-visible{
  color:#f0f2f3!important;
  border-color:rgba(255,255,255,.14)!important;
  border-top-color:rgba(255,255,255,.20)!important;
}

#depth-view.depth-fullscreen .depth-primary-actions button[aria-pressed="true"],
#depth-view.depth-fullscreen .depth-primary-actions button[data-gl-active="true"]{
  border-top-color:rgba(176,198,217,.34)!important;
}

@media(max-width:840px){
#depth-view.depth-fullscreen .depth-toolbar{
  top:70px!important;
  max-width:calc(100vw - 20px)!important;
}

#depth-view.depth-fullscreen .depth-primary-actions button{
  height:34px!important;
  padding:0 11px!important;
  font-size:7px!important;
}
}

#depth-view.depth-fullscreen .depth-primary-actions button{
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.018) inset,
    0 2px 5px rgba(0,0,0,.16)!important;
}

#depth-view.depth-fullscreen .depth-primary-actions button:hover,
#depth-view.depth-fullscreen .depth-primary-actions button:focus-visible{
  background:linear-gradient(180deg,rgba(255,255,255,.070),rgba(255,255,255,.016) 50%,rgba(0,0,0,.06)),
    rgba(18,20,21,.42)!important;
}

#depth-view.depth-showreel-active .depth-toolbar,
#depth-view.depth-reel-active .depth-toolbar,
#depth-view.depth-tour-active .depth-toolbar,
#depth-view.depth-titles-active .depth-toolbar{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.010) 38%,rgba(0,0,0,.10)),
    rgba(8,10,11,.50)!important;
  backdrop-filter:blur(28px) saturate(.74)!important;
  -webkit-backdrop-filter:blur(28px) saturate(.74)!important;
}

@media(max-width:840px){
#depth-view.depth-fullscreen .depth-toolbar{
  background:rgba(8,10,11,.62)!important;
}
}

#depth-view.depth-showreel-active .depth-primary-actions{
  align-items:center!important;
}

#depth-view.depth-showreel-active .depth-toolbar{
  max-width:calc(100vw - 32px)!important;
}

#depth-view.depth-showreel-active .depth-toolbar{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate(-50%,-8px)!important;
}

#depth-view.depth-tour-active .depth-toolbar,
#depth-view.depth-titles-active .depth-toolbar,
#depth-view.depth-reel-active .depth-toolbar{
  top:76px!important;
  width:auto!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1!important;
}

#depth-view.depth-tour-active .depth-control-chip,
#depth-view.depth-titles-active .depth-control-chip,
#depth-view.depth-reel-active .depth-control-chip{
  width:278px!important;
  max-width:calc(100vw - 24px)!important;
  min-height:50px!important;
  padding:5px!important;
  margin:0!important;
  border-radius:9px!important;
}

#depth-view.depth-tour-active .depth-primary-actions,
#depth-view.depth-titles-active .depth-primary-actions,
#depth-view.depth-reel-active .depth-primary-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 54px 54px!important;
  width:100%!important;
  gap:5px!important;
  align-items:stretch!important;
  padding:0!important;
}

/* Only Pause/Resume, Next and End belong to the active three-column controls.
   Nested Showreel buttons and separators must not become extra grid items. */
#depth-view.depth-tour-active .depth-primary-actions>:not(button),
#depth-view.depth-titles-active .depth-primary-actions>:not(button),
#depth-view.depth-reel-active .depth-primary-actions>:not(button){
  display:none!important;
}

#depth-view.depth-tour-active .depth-primary-actions>button,
#depth-view.depth-titles-active .depth-primary-actions>button,
#depth-view.depth-reel-active .depth-primary-actions>button{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:38px!important;
  min-width:0!important;
  margin:0!important;
  padding:0 11px!important;
  border-radius:5px!important;
  font-size:7px!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:.78px!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

@media(max-width:480px){
#depth-view.depth-tour-active .depth-control-chip,
#depth-view.depth-titles-active .depth-control-chip,
#depth-view.depth-reel-active .depth-control-chip{
  width:248px!important;
  min-height:46px!important;
  padding:4px!important;
}

#depth-view.depth-tour-active .depth-primary-actions,
#depth-view.depth-titles-active .depth-primary-actions,
#depth-view.depth-reel-active .depth-primary-actions{
  grid-template-columns:minmax(0,1fr) 48px 48px!important;
  gap:4px!important;
}

#depth-view.depth-tour-active .depth-primary-actions>button,
#depth-view.depth-titles-active .depth-primary-actions>button,
#depth-view.depth-reel-active .depth-primary-actions>button{
  height:36px!important;
  font-size:6.5px!important;
}
}

.depth-showreel-group{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%;
  gap:4px;
  padding-left:4px;
}

.depth-group-label{
  padding:0 5px;
  color:#8d8f88;
  font-size:10px;
  font-weight:600;
  letter-spacing:.9px;
  text-transform:uppercase;
}

#depth-view.depth-fullscreen .depth-primary-actions{
  overflow:visible;
  scrollbar-width:none;
}

#depth-view.depth-fullscreen .depth-primary-actions::-webkit-scrollbar{
  display:none;
}

#depth-view.depth-fullscreen .depth-primary-actions button:not(.depth-zoom-btn){
  font-size:10px!important;
  letter-spacing:.55px!important;
}

#depth-view.depth-fullscreen .depth-tour-status,
#depth-view.depth-fullscreen .depth-foot{
  font-size:9px!important;
}

#depth-view .depth-webgl-tooltip small,
#depth-view .depth-webgl-tooltip span{
  font-size:9px!important;
}

#depth-view .depth-showreel-fx-btn::after{
  font-size:8px!important;
}

#depth-view .depth-fx-ps-icon{
  font-size:9px!important;
}

#depth-view .depth-fx-ps-copy b{
  font-size:10px!important;
}

#depth-view .depth-fx-ps-copy small{
  font-size:8px!important;
}

#depth-view .depth-fx-select-value{
  font-size:10px!important;
}

#depth-view.depth-tour-active .depth-showreel-group{
  display:none!important;
}

@media(max-width:900px){
.depth-group-label{
  display:none;
}
}

/* One dock, one player: the legacy console classes in markup are compatibility
   hooks only. Grid areas keep controls attached to their own space at every size. */
#depth-view .depth-mini-dock{
  display:none;
  position:absolute;
  left:50%;
  bottom:calc(42px + env(safe-area-inset-bottom,0px));
  z-index:130;
  width:min(900px,calc(100% - 32px));
  min-width:0;
  padding:8px;
  margin:0;
  border-radius:13px;
  transform:translateX(-50%);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .28s ease,transform .28s ease,visibility .28s ease;
}
#depth-view.depth-showreel-active .depth-mini-dock{display:block}
#depth-view #depth-showreel-sound.depth-mini-player{
  display:grid;
  grid-template-columns:max-content 44px minmax(80px,1fr) 44px 44px 1px 56px 48px 44px;
  grid-template-areas:"play current seek duration mute divider next end fullscreen";
  gap:8px;
  align-items:center;
  width:100%;
  min-width:0;
  min-height:44px;
  margin:0;
  padding:0;
}
#depth-view #depth-player-play{grid-area:play}
#depth-view #depth-player-current{grid-area:current}
#depth-view .depth-mini-scrubber{grid-area:seek;display:flex;align-items:center;min-width:0}
#depth-view #depth-player-duration{grid-area:duration}
#depth-view #depth-player-mute{grid-area:mute}
#depth-view .depth-mini-divider{grid-area:divider;width:1px;height:20px;justify-self:center}
#depth-view #depth-player-next{grid-area:next}
#depth-view #depth-player-end{grid-area:end}
#depth-view #depth-player-fullscreen{grid-area:fullscreen}
#depth-view .depth-mini-player button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  height:44px;
  margin:0;
  padding:0 8px;
  border-radius:7px;
  font:600 10px/1 DM,Arial,sans-serif;
  letter-spacing:.5px;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .18s ease,color .18s ease;
}
#depth-view .depth-mini-player button:focus-visible{
  outline:2px solid #c8b77f;
  outline-offset:2px;
}
#depth-view .depth-mini-showreel-toggle{gap:8px;padding:0 12px}
#depth-view .depth-mini-play-icon{display:inline-flex;justify-content:center;width:12px;font-size:12px;line-height:1}
#depth-view .depth-mini-play-label{font-size:10px;letter-spacing:.55px;white-space:nowrap}
#depth-view .depth-mini-player .depth-mini-mute{font-size:16px}
#depth-view .depth-mini-mute[aria-pressed="true"]{opacity:.68}
#depth-view .depth-mini-time{font:500 10px/1 DM,Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.15px;white-space:nowrap;text-align:center}
#depth-view .depth-mini-seek{
  --player-progress:0%;
  width:100%;
  min-width:0;
  height:44px;
  margin:0;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
}
#depth-view .depth-mini-seek::-webkit-slider-runnable-track{height:3px;border-radius:999px}
#depth-view .depth-mini-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border:1px solid #090909;border-radius:50%;background:#f0f0f0;box-shadow:0 1px 5px rgba(0,0,0,.55)}
#depth-view .depth-mini-seek::-moz-range-track,#depth-view .depth-mini-seek::-moz-range-progress{height:3px;border:0;border-radius:999px}
#depth-view .depth-mini-seek::-moz-range-thumb{width:14px;height:14px;border:1px solid #090909;border-radius:50%;background:#f0f0f0;box-shadow:0 1px 5px rgba(0,0,0,.55)}
#depth-view .depth-mini-seek:focus-visible{outline:2px solid #c8b77f;outline-offset:2px;border-radius:4px}
#depth-view.depth-showreel-final .depth-mini-dock{transition:opacity 2.4s ease}
#depth-view.depth-showreel-final.showreel-final-fade .depth-mini-dock{opacity:0}
#depth-view.depth-showreel-active.player-ui-hidden .depth-mini-dock{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,12px);
}
#depth-view.depth-showreel-active.player-ui-visible .depth-mini-dock,
#depth-view.depth-showreel-active .depth-mini-dock:hover,
#depth-view.depth-showreel-active .depth-mini-dock:focus-within{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}
@media(max-width:760px){
  #depth-view .depth-mini-dock{width:calc(100% - 16px);bottom:calc(34px + env(safe-area-inset-bottom,0px));padding:6px}
  #depth-view #depth-showreel-sound.depth-mini-player{
    grid-template-columns:repeat(5,minmax(44px,1fr));
    grid-template-areas:"current seek seek seek duration" "play mute next end fullscreen";
    gap:4px;
  }
  #depth-view .depth-mini-player button{width:100%;padding:0 6px}
  #depth-view .depth-mini-play-label,#depth-view .depth-mini-divider{display:none}
  #depth-view .depth-mini-seek::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7.5px}
  #depth-view .depth-mini-seek::-moz-range-thumb{width:18px;height:18px}
}
@media(prefers-reduced-motion:reduce){#depth-view .depth-mini-dock,#depth-view .depth-mini-player button{transition:none}}