html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #212426;
}

.app-layout {
  width: 100dvw;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}

.zv-main-header,
.zv-player-navbar {
  padding-top: env(safe-area-inset-top);
}

.zv-main-asider {
  top: calc(64px + env(safe-area-inset-top));
  height: calc(100% - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

@media (max-width: 900px) {
  .zv-main-header-right,
  .zv-main-header-drag,
  .zv-main-header-reload,
  .zv-main-header-download {
    display: none !important;
  }

  .zv-main-asider {
    width: 56px;
  }

  .zv-main-content-with-asider {
    left: 56px;
  }

  .aside-menu-box > section {
    padding: 10px 4px;
    text-align: center;
    font-size: 12px;
  }

  .aside-menu-box > section > span {
    display: block;
    max-width: 48px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .zv-player-right,
  .zv-player-navbar-action,
  .zv-player-switch {
    display: none !important;
  }

  .zv-player-navbar-inner,
  .zv-player-left,
  .zv-player-inner {
    width: 100vw !important;
  }

  .zv-player-player {
    height: calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .zv-main-asider {
    width: 120px;
  }

  .zv-main-content-with-asider {
    left: 120px;
  }
}

.zv-player,
.zv-player-full .zv-player-inner {
  width: 100dvw;
  height: 100dvh;
}

.zv-player-player video {
  max-height: 100%;
}

button,
[role='button'],
.zv-btn {
  touch-action: manipulation;
}

@media (max-width: 1180px) {
  .dplayer-controller {
    padding: 0 10px !important;
  }

  .dplayer-controller .dplayer-icons.dplayer-icons-left {
    left: 8px !important;
    gap: 2px !important;
  }

  .dplayer-controller .dplayer-icons.dplayer-icons-left .dplayer-icon {
    width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
  }

  .dplayer-controller .dplayer-icons .dplayer-danmaku-comment {
    width: min(22vw, 140px) !important;
    max-width: 150px !important;
    height: 36px !important;
    margin-left: 2px !important;
    padding: 6px 8px !important;
  }

  .dplayer-controller .dplayer-icons .dplayer-danmaku-comment.dplayer-danmaku-comment-focus {
    width: min(32vw, 180px) !important;
  }

  .dplayer-controller .dplayer-icons .dplayer-danmaku-comment .dplayer-comment-input {
    flex: 1 1 40px !important;
    width: 40px !important;
    min-width: 0 !important;
    max-width: 70px !important;
    font-size: 13px !important;
  }

  .dplayer-controller .dplayer-icons.dplayer-icons-right {
    right: 8px !important;
    gap: 2px !important;
    padding: 0 2px !important;
  }

  .dplayer-controller .dplayer-icons .dplayer-text {
    padding: 3px 8px !important;
    font-size: 13px !important;
  }

  .dplayer-controller .dplayer-icons .dplayer-text.dplayer-vlist-text {
    margin-right: 2px !important;
  }
}