/* Shared transport for the B/A, FilmFrameComposer and AIGC displays. */
.film-transport.film-ba-controls,.film-transport.film-process-controls,.film-transport.film-aigc-controls{display:flex;align-items:center;flex-wrap:nowrap;gap:12px;margin:14px 0 0;min-width:0}
.film-transport.film-process-controls{margin-bottom:24px}
.film-transport button{display:grid;place-items:center;flex:none;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--frame);background:transparent;color:var(--ink);font:12px/1.5 'DM Mono',monospace;cursor:pointer}
.film-transport button:disabled{opacity:.5;cursor:wait}
.film-transport .film-transport-play{width:44px;padding:8px;min-width:44px}
.film-transport svg{display:block;width:20px;height:20px}
.film-transport .film-transport-seek{flex:1;width:100%;min-width:0;min-height:30px;margin:0;accent-color:var(--frame);cursor:ew-resize}
.film-transport output{flex:none;width:112px;min-width:0;white-space:nowrap;text-align:right;color:var(--muted);font:11px/1.5 'DM Mono',monospace}
.film-transport button:focus-visible,.film-transport input:focus-visible{outline:2px solid var(--frame);outline-offset:3px}
.film-transport .film-aigc-views button{min-width:0;min-height:44px;font:11px/1.5 'Noto Sans TC',sans-serif;padding:8px 12px}
@media(max-width:600px){
 .film-transport.film-ba-controls,.film-transport.film-process-controls,.film-transport.film-aigc-controls{display:grid;grid-template-columns:44px auto minmax(40px,1fr) max-content;gap:8px}
 .film-transport .film-transport-play{grid-column:1;grid-row:1}
 .film-transport .film-transport-replay{grid-column:2;grid-row:1}
 .film-transport .film-transport-seek{grid-column:3;grid-row:1}
 .film-transport output{grid-column:4;grid-row:1;width:auto;font-size:10px;text-align:right}
 .film-transport .film-aigc-views{grid-column:1/-1;grid-row:2;justify-self:end}
 .film-transport .film-aigc-views button{padding:8px 10px;font-size:10px}
}