/* Recovery belongs to the existing control row, outside the picture. Keep this
   player-only adjustment separate from the main player stylesheet. */
.video-controls .control-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.video-controls .control-actions > button,
.video-controls .playback-action { flex: 0 0 auto; }

.video-controls .video-source-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: var(--sidebar-button-size);
  padding: 0 8px;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--panel-text);
  font-size: 13px;
  white-space: nowrap;
  touch-action: manipulation;
}
.video-controls .video-source-button .ui-icon { display: none; }

.video-controls .control-actions input[type="range"] {
  flex: 1 1 126px;
  min-width: 28px;
  max-width: 130px;
}

.video-controls .playback-action {
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
  flex-wrap: nowrap;
  overflow: visible;
  gap: 4px;
}

.video-controls #resumePlaybackButton {
  padding: 0;
  min-height: var(--sidebar-button-size);
  border-radius: 8px;
  background: var(--panel-soft);
}

.app-shell .video-controls.quiet-status {
  --actions-min-width: 228px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.video-controls.quiet-status .playback-status { display: none; }

@media (max-width: 760px) {
  .app-shell:not(.platform-tv) .video-source-button { width: 44px; padding: 0; }
  html:not([lang="zh-CN"]) .app-shell:not(.platform-tv) .video-source-button .source-switch-label { display: none; }
  html:not([lang="zh-CN"]) .app-shell:not(.platform-tv) .video-source-button .ui-icon { display: block; }
  /* Keep the source action and readable ID in the same row. Mute and device
     volume remain available when the optional slider cannot fit beside the ID. */
  .app-shell:not(.platform-tv) .video-controls:has(> .player-number:not([hidden])) #volumeSlider { display: none; }
}
@media (max-width: 360px) {
  .app-shell:not(.platform-tv) .video-controls.quiet-status .player-number { max-width: 72px; }
  .app-shell:not(.platform-tv) .video-controls.quiet-status:has(> .player-number:not([hidden])) .control-actions {
    flex-basis: 228px;
    min-width: 228px;
  }
}
@media (max-width: 760px) and (orientation: landscape) {
  .app-shell.device-volume:not(.platform-tv) .video-controls .control-actions {
    /* The cutout can leave less than one four-button row beside the sidebar. */
    flex-basis: 182px;
    min-width: min(100%, 182px);
    flex-wrap: wrap;
  }
}

/* A stopped source needs a visible explanation. Keep ordinary pause and
   recovery controls compact, and place errors above the unchanged button row. */
.video-controls .playback-action .playback-error-message {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 6px);
  max-height: min(180px, calc(100dvh - 90px));
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: #162330;
  color: #f6f8f9;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.5;
}