/* Installed desktop app: replace the browser-owned title bar with CHEW's own header. */
@media (display-mode: window-controls-overlay) {
  html :is(.app-header, .review-header, .queue-header) {
    --wco-height: 46px;
    --wco-gutter: clamp(14px, 2vw, 28px);
    height: max(var(--wco-height), env(titlebar-area-height, 0px));
    padding-left: max(var(--wco-gutter), calc(env(titlebar-area-x, 0px) + 8px));
    padding-right: max(var(--wco-gutter), calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 8px));
    -webkit-app-region: drag;
    app-region: drag;
  }

  .app-header {
    --wco-height: var(--app-header-height);
    --wco-gutter: 9px;
  }

  .review-header {
    --wco-height: var(--app-header-height);
    --wco-gutter: 9px;
  }

  html :is(.app-header, .review-header, .queue-header) :is(a, button, input, select, [role="button"]) {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
}