/* Public carousel only: the real playback control stays below its image.
   Timing, reduced-motion behaviour and media loading remain native. */
.filmstrip-section .filmstrip {
  padding-bottom: 48px;
  overflow-y: hidden;
}

.filmstrip-section .film-frame {
  overflow: visible;
}

.filmstrip-section .film-frame > :first-child {
  overflow: hidden;
  border-radius: inherit;
}

.filmstrip-section .film-frame.is-active .film-frame-play,
.filmstrip-section .compact-carousel-play {
  opacity: 1;
  pointer-events: auto;
  color: #000;
  background: transparent;
  border-color: transparent;
}

.filmstrip-section .film-frame.is-active .film-frame-play {
  right: 0;
  bottom: -42px;
}

.filmstrip-section .film-frame.is-active .film-frame-play:is(:hover, :focus-visible),
.filmstrip-section .compact-carousel-play:is(:hover, :focus-visible) {
  color: #000;
  background: #0000000a;
  border-color: transparent;
}

.filmstrip-section .film-frame-play .film-frame-play-timer {
  stroke: #000;
}

.filmstrip-section .film-frame-play:focus-visible {
  outline: 1px solid #000;
  outline-offset: -2px;
}

.filmstrip-section .compact-carousel-wrap {
  width: 100%;
}

.filmstrip-section .compact-carousel-progress {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  height: 48px;
  margin: 0 auto;
  padding-top: 6px;
  box-sizing: border-box;
}

.filmstrip-section .compact-carousel-play {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  right: auto;
  bottom: auto;
}

@media (hover: none), (pointer: coarse) {
  .filmstrip-section .compact-carousel-progress {
    height: 56px;
  }

  .filmstrip-section .compact-carousel-play {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .filmstrip-section .compact-carousel-play .film-frame-play-timer {
    inset: 3px;
  }
}

@media (forced-colors: active) {
  .filmstrip-section .film-frame.is-active .film-frame-play,
  .filmstrip-section .film-frame.is-active .film-frame-play:is(:hover, :focus-visible),
  .filmstrip-section .compact-carousel-play,
  .filmstrip-section .compact-carousel-play:is(:hover, :focus-visible) {
    color: ButtonText;
  }

  .filmstrip-section .film-frame-play .film-frame-play-timer {
    stroke: ButtonText;
  }

  .filmstrip-section .film-frame-play:focus-visible {
    outline: 1px solid Highlight;
    outline-offset: 1px;
  }
}

/* Studio carousel playback v2: captions return to their native position;
   the existing owner still controls playback, with no progress ring.
   PlaySm and PauseSm contours: @openai/apps-sdk-ui 0.2.2.

Copyright 2025 OpenAI

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the “Software”), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
.filmstrip-section {
  --studio-carousel-caption-lift: 48px;
  --studio-carousel-caption-reserve: 48px;
  --studio-carousel-play-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16.7229V7.27711C8 6.29075 9.08894 5.69298 9.9211 6.22254L17.3428 10.9454C18.1147 11.4366 18.1147 12.5634 17.3428 13.0546L9.92109 17.7775C9.08894 18.3071 8 17.7093 8 16.7229Z'/%3E%3C/svg%3E");
  --studio-carousel-pause-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 7.75C6.5 7.05964 7.05964 6.5 7.75 6.5H9.25C9.94036 6.5 10.5 7.05964 10.5 7.75V16.25C10.5 16.9404 9.94036 17.5 9.25 17.5H7.75C7.05964 17.5 6.5 16.9404 6.5 16.25V7.75Z'/%3E%3Cpath d='M13.5 7.75C13.5 7.05964 14.0596 6.5 14.75 6.5H16.25C16.9404 6.5 17.5 7.05964 17.5 7.75V16.25C17.5 16.9404 16.9404 17.5 16.25 17.5H14.75C14.0596 17.5 13.5 16.9404 13.5 16.25V7.75Z'/%3E%3C/svg%3E");
}

.filmstrip-section .film-frame-play > svg {
  display: none;
}

.filmstrip-section .film-frame-play::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--studio-carousel-play-icon) center / contain no-repeat;
  mask: var(--studio-carousel-play-icon) center / contain no-repeat;
  pointer-events: none;
}

.filmstrip-section .film-frame-play:has(> svg:not(.film-frame-play-timer) > rect)::before {
  -webkit-mask-image: var(--studio-carousel-pause-icon);
  mask-image: var(--studio-carousel-pause-icon);
}

.filmstrip-section .filmstrip-controls > :is(.filmstrip-counter, .filmstrip-description) {
  transform: translateY(calc(0px - var(--studio-carousel-caption-lift)));
  max-width: calc(100% - var(--studio-carousel-caption-reserve));
  -webkit-user-select: text;
  user-select: text;
}

.filmstrip-section .compact-carousel-wrap + .filmstrip-controls > :is(.filmstrip-counter, .filmstrip-description) {
  max-width: min(calc(100% - var(--studio-carousel-caption-reserve)), calc((100% + 880px) / 2 - var(--studio-carousel-caption-reserve)));
}

@media (hover: none), (pointer: coarse) {
  .filmstrip-section:has(> .compact-carousel-wrap) {
    --studio-carousel-caption-lift: 56px;
    --studio-carousel-caption-reserve: 56px;
  }
}