:root {
  color-scheme: light dark;
  --bg: var(--vscode-editor-background, #fff);
  --fg: var(--vscode-editor-foreground, #111);
  --muted: var(--vscode-descriptionForeground, #666);
  --border: var(--vscode-panel-border, #d0d0d0);
  --panel: var(--vscode-sideBar-background, #fff);
  --button-bg: var(--vscode-button-background, #111);
  --button-fg: var(--vscode-button-foreground, #fff);
  --button-hover: var(--vscode-button-hoverBackground, #333);
  --error: var(--vscode-errorForeground, #b00020);
  --tile-min: 260px;
  --tile-max: 460px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--vscode-editor-background, #000);
    --fg: var(--vscode-editor-foreground, #f5f5f5);
    --muted: var(--vscode-descriptionForeground, #aaa);
    --border: var(--vscode-panel-border, #333);
    --panel: var(--vscode-sideBar-background, #050505);
    --button-bg: var(--vscode-button-background, #f5f5f5);
    --button-fg: var(--vscode-button-foreground, #000);
    --button-hover: var(--vscode-button-hoverBackground, #ddd);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 12px/1.35 var(--vscode-font-family, system-ui, sans-serif);
}

main {
  height: 100vh;
  overflow: hidden;
}

.browser-host,
.vscode-host {
  height: 100%;
  min-height: 0;
}

.browser-host {
  display: grid;
  grid-template-rows: auto 1fr;
}

.vscode-host,
.viewer {
  min-width: 0;
}

.vscode-host .viewer {
  height: 100%;
}

.topbar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--border);
}

.status {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status.error { color: var(--error); }

input[type="file"] {
  color: var(--muted);
  min-width: 0;
}

.file-button {
  border: 1px solid var(--border);
  background: var(--button-bg);
  color: var(--button-fg);
  padding: 4px 9px;
  border-radius: 2px;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.file-button:hover {
  background: var(--button-hover);
}

.file-button input {
  display: none;
}

button {
  border: 1px solid var(--border);
  background: var(--button-bg);
  color: var(--button-fg);
  padding: 4px 9px;
  border-radius: 2px;
  font: inherit;
  cursor: pointer;
}

button:hover { background: var(--button-hover); }

button:disabled,
input:disabled {
  cursor: default;
  opacity: .55;
}

input[type="range"] {
  min-width: 0;
  width: 100%;
}

.time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.browser-shell {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.browser-shell.has-playlist {
  grid-template-columns: 240px minmax(0, 1fr);
}

.browser-shell:not(.has-playlist) .playlist,
.viewer-shell:not(.has-details) .details {
  display: none;
}

.browser-shell > .viewer {
  height: auto;
}

.viewer {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  position: relative;
}

.viewer.busy {
  cursor: progress;
}

.viewer-bar {
  display: grid;
  grid-template-areas: "play stop back timeline forward time speed autoplay autoloop view scale status";
  grid-template-columns: auto auto auto minmax(140px, 1fr) auto auto auto auto auto auto minmax(110px, 132px) minmax(120px, 1fr);
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.viewer-bar .play { grid-area: play; }
.viewer-bar .stop { grid-area: stop; }
.viewer-bar .step-back { grid-area: back; }
.viewer-bar .timeline { grid-area: timeline; }
.viewer-bar .step-forward { grid-area: forward; }
.viewer-bar .time { grid-area: time; }
.viewer-bar .speed-control { grid-area: speed; }
.viewer-bar .autoplay-control { grid-area: autoplay; }
.viewer-bar .autoloop-control { grid-area: autoloop; }
.viewer-bar .view-mode-control { grid-area: view; }
.viewer-bar .tile-control { grid-area: scale; }

.viewer-bar .status {
  grid-area: status;
  min-width: 0;
}

.range-control {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  color: var(--muted);
  white-space: nowrap;
}

.input-control {
  display: grid;
  grid-template-columns: auto 5ch auto;
  gap: 4px;
  align-items: center;
  color: var(--muted);
  white-space: nowrap;
}

.input-control input {
  width: 100%;
  min-width: 0;
  font: inherit;
}

.speed-control {
  grid-template-columns: auto minmax(8ch, max-content) auto;
  overflow: visible;
}

.speed-control input {
  width: auto;
  min-width: 8ch;
  max-width: none;
  field-sizing: content;
  overflow: visible;
}

.checkbox-control {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--muted);
  white-space: nowrap;
}

.checkbox-control input {
  margin: 0;
}

.select-control {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px;
  align-items: center;
  color: var(--muted);
  white-space: nowrap;
}

.select-control select {
  min-width: 0;
  font: inherit;
}

.tile-control {
  width: min(100%, 132px);
  justify-self: end;
}

.viewer-shell {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.viewer-shell.has-details {
  grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 320px);
}

.playlist,
.details {
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--border);
  background: var(--panel);
}

.details {
  border-right: 0;
  border-left: 1px solid var(--border);
}

.playlist-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  padding: 7px 8px;
}

.playlist-item.active {
  background: var(--vscode-list-activeSelectionBackground, #111);
  color: var(--vscode-list-activeSelectionForeground, #fff);
}

.playlist-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-meta {
  color: var(--muted);
  margin-top: 2px;
}

.stage {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 8px;
  display: grid;
  grid-template-rows: max-content max-content;
  align-content: start;
  gap: 8px;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  gap: 8px;
  align-content: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  color: var(--fg);
  pointer-events: none;
}

.loading-overlay[hidden] {
  display: none;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--fg);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.loading-text {
  color: var(--muted);
}

.empty-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
}

.empty-state.error {
  color: var(--error);
}

.empty-title {
  max-width: min(520px, 100%);
  overflow-wrap: anywhere;
  text-align: center;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.tracks {
  display: grid;
  gap: 8px;
  min-height: min-content;
  align-items: start;
}

.video-tracks {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-min)), 1fr));
  min-width: 0;
  overflow: visible;
}

.video-tracks:empty {
  display: none;
}

.secondary-tracks {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  overflow: visible;
}

.secondary-tracks:empty {
  display: none;
}

.track {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 4px;
  padding: 6px;
}

.video-tracks .track {
  max-width: var(--tile-max);
  min-width: 0;
  overflow: hidden;
}

.track-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.track-title {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-id {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.video-frame {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #000;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.video-frame canvas {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

[data-video-fit="page"] .video-frame {
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
}

[data-video-fit="page"] .video-frame canvas {
  width: auto;
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
}

[data-video-fit="actual"] .video-frame {
  place-items: start;
  overflow: auto;
}

[data-video-fit="actual"] .video-frame canvas {
  width: auto;
  max-width: none;
}

.audio-meter {
  height: 28px;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--muted);
}

.audio-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--border);
}

.track-volume-control {
  width: 100%;
}

.note,
.kv dt {
  color: var(--muted);
}

.kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  margin: 0;
}

.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.section {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.section summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  list-style-position: inside;
}

.section[open] summary {
  margin-bottom: 8px;
}

.section h2 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .04em;
}

@media (max-width: 1100px) {
  .viewer-bar {
    grid-template-areas:
      "play stop back forward time speed autoplay autoloop scale"
      "timeline timeline timeline timeline view view status status status";
    grid-template-columns: auto auto auto auto auto auto auto auto minmax(110px, 132px);
  }
}

@media (max-width: 820px) {
  .browser-shell.has-playlist,
  .viewer-shell.has-details {
    grid-template-columns: 1fr;
  }

  .browser-shell.has-playlist {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .viewer-shell.has-details {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .playlist,
  .details {
    max-height: 140px;
    border: 0;
    border-bottom: 1px solid var(--border);
  }

  .viewer-bar .status {
    display: none;
  }

  .track.video {
    grid-column: span 1;
  }

  :root {
    --tile-min: 180px;
    --tile-max: 100%;
  }
}

@media (max-width: 600px) {
  .viewer-bar {
    grid-template-areas:
      "play stop back forward"
      "timeline timeline timeline timeline"
      "time speed autoplay autoloop"
      "view view scale scale";
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
  }

  .viewer-bar button {
    width: 100%;
    min-width: 0;
  }

  .viewer-bar .time {
    text-align: center;
  }
}