/* A viewport-sized workspace; only the playlist scrolls on normal desktops. */
body[data-app-id=video]{height:100dvh;min-height:560px;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
body[data-app-id=video] .tool-topbar{width:100%;padding:12px max(24px,calc((100vw - 1760px)/2))}
body[data-app-id=video] .tool-main{width:100%;min-height:0;margin:0 auto;padding:14px clamp(18px,2.3vw,40px) 0;display:flex;flex-direction:column;gap:12px}
body[data-app-id=video] .tool-heading{display:flex;align-items:center;gap:16px;padding:0;margin:0}
body[data-app-id=video] .tool-heading h1{font-size:21px;letter-spacing:0}
body[data-app-id=video] .privacy-note{position:static;font-size:11px;padding:3px 9px}
.video-workspace{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px;gap:12px}
.video-import-header{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}
.video-import-header .video-drop{width:auto;max-width:none;padding:0;border:0;background:none}
.video-add{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:5px 12px;min-height:36px;font-size:12px;background:var(--accent-soft);border:1px solid var(--line);color:var(--accent)}
.video-add span{font-size:18px;line-height:1}
#video-files:focus-visible+label{outline:2px solid var(--accent);outline-offset:3px}
.video-import-hint{font-size:11px;color:var(--muted)}
.video-workspace.is-dragging{outline:2px dashed var(--accent);outline-offset:-4px}
.video-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,23vw,360px);grid-template-rows:minmax(0,1fr) 40px;gap:10px 16px;margin:0}
.video-view{display:contents}
.video-stage{grid-area:1/1;aspect-ratio:auto;height:100%;max-height:none;min-height:0;width:100%}
.video-stage video{height:100%;width:100%;object-fit:contain}
.video-caption{grid-area:2/1;margin:0;min-width:0;overflow:hidden}
.video-caption .video-current{margin:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.video-caption .video-details{margin:0;font-size:10px}
.video-library{grid-area:1/2;height:100%;align-self:stretch;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px;overflow:hidden}
.video-list-heading{gap:8px;margin:0;flex-shrink:0}
.video-list-heading h3{font-size:13px;white-space:nowrap}
.video-list-heading span{margin-left:auto;font-size:10px;white-space:nowrap}
.video-clear{border:0;background:transparent;color:var(--muted);font-size:11px;padding:4px;min-height:28px}
.video-clear:hover:not(:disabled){color:var(--accent)}
.video-library-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.video-library-tools .field{flex:1}
.video-library-tools input[type=search]{min-height:34px;padding:6px 8px;font-size:12px}
.video-autonext{margin:0;align-items:center;gap:5px;font-size:10px;white-space:nowrap}
.video-autonext input{margin:0;width:14px;height:14px}
.video-list{flex:1;min-height:0;max-height:none;margin:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.video-list li{gap:0;margin:0 0 4px;border:0;background:transparent;border-radius:7px;align-items:center}
.video-list li:has([aria-current=true]){background:var(--accent-soft)}
.video-track{position:relative;display:block;padding:11px 8px;min-height:42px;background:none;border-radius:7px}
.video-track-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;font-size:12px;line-height:20px}
.video-remove{font-size:19px;padding:0;width:28px;min-height:42px;border-radius:6px}
#video-list-empty{margin:10px 0;font-size:12px}
body[data-app-id=video] .tool-footer{width:100%;padding:7px clamp(18px,2.3vw,40px);border:0;font-size:10px;align-items:center;gap:12px}
.video-settings{position:relative}
.video-settings summary{cursor:pointer;white-space:nowrap;padding:4px 0;font-size:11px}
.video-settings summary::after{display:none}
.video-settings .offline-panel{position:absolute;right:0;bottom:100%;z-index:5;width:min(340px,calc(100vw - 36px));margin:0 0 8px;padding:14px;flex-direction:column;align-items:flex-start;box-shadow:0 8px 30px #0003}
.video-settings .offline-actions{gap:6px}
.video-settings .offline-actions button{font-size:11px;min-height:34px;padding:5px 8px}
.video-stage:fullscreen{grid-area:auto;height:100vh;width:100vw;min-height:0;max-height:none}
.video-stage:fullscreen.is-playing.controls-idle{cursor:none}
.video-stage:fullscreen.is-playing.controls-idle .video-controls{opacity:0;pointer-events:none}
@media(min-width:761px) and (max-width:1100px){
  .video-controls-row{flex-wrap:wrap}
  .video-playback-controls{flex:1 0 100%;justify-content:center;gap:12px}
}
@media(max-width:760px){
  body[data-app-id=video]{height:auto;min-height:100dvh;display:block}
  body[data-app-id=video] .tool-topbar{padding:10px 14px;gap:8px;flex-wrap:wrap}
  body[data-app-id=video] .tool-topbar .header-actions{gap:6px;flex-wrap:wrap}
  body[data-app-id=video] .back-link{display:none}
  body[data-app-id=video] .tool-main{padding:12px 12px 0;gap:10px}
  body[data-app-id=video] .tool-heading{justify-content:space-between;gap:6px}
  body[data-app-id=video] .tool-heading h1{font-size:17px}
  body[data-app-id=video] .privacy-note{font-size:9px;padding:3px 5px}
  .video-workspace{padding:10px;gap:10px}
  .video-import-header{gap:8px}
  .video-import-hint{font-size:10px}
  .video-layout{display:flex;flex-direction:column;gap:10px}
  .video-stage{height:auto;aspect-ratio:16/9;min-height:210px}
  .video-caption{height:40px;flex-shrink:0}
  .video-library{height:clamp(160px,calc(100dvh - 550px),300px);padding:10px}
  .video-controls-row{flex-wrap:wrap;gap:2px}
  .video-playback-controls{flex:1 0 100%;justify-content:center;gap:12px}
  .video-controls-spacer{flex:1}
  .video-volume-controls input{display:none}
  .video-controls{padding:24px 10px 8px}
  .video-control{width:30px;height:32px}
  .video-controls select{min-height:32px;width:58px}
  .video-stage:fullscreen{height:100dvh;aspect-ratio:auto}
  body[data-app-id=video] .tool-footer{padding:6px 12px}
}