/* MIIGO_SHORT_MOBILE_TABBAR_BLACK_V3_20260703
 * 只修手机短剧底部导航白底。
 * 电脑端不生效。
 * 纯 CSS，不改短剧播放、不改分享、不改点赞收藏。
 */

@media (max-width: 820px) {
  body[data-channel="short"],
  body[data-channel="drama"],
  html[data-channel="short"] body,
  html[data-channel="drama"] body {
    --miigo-main-nav-bg: #000000 !important;
    --miigo-main-nav-shadow: rgba(255,255,255,.08) !important;
    --miigo-main-nav-text: #ffffff !important;
    --miigo-main-nav-active: #ffffff !important;
    background: #000000 !important;
  }

  body[data-channel="short"] #miigo-v4-tabbar,
  body[data-channel="drama"] #miigo-v4-tabbar,
  html[data-channel="short"] body #miigo-v4-tabbar,
  html[data-channel="drama"] body #miigo-v4-tabbar,

  body[data-channel="short"] #miigo-v4-tabbar.miigo-main-bottom-nav-ready,
  body[data-channel="drama"] #miigo-v4-tabbar.miigo-main-bottom-nav-ready,
  html[data-channel="short"] body #miigo-v4-tabbar.miigo-main-bottom-nav-ready,
  html[data-channel="drama"] body #miigo-v4-tabbar.miigo-main-bottom-nav-ready,

  body[data-channel="short"] footer#miigo-v4-tabbar.miigo-backend-tabbar-v1,
  body[data-channel="drama"] footer#miigo-v4-tabbar.miigo-backend-tabbar-v1,
  html[data-channel="short"] body footer#miigo-v4-tabbar.miigo-backend-tabbar-v1,
  html[data-channel="drama"] body footer#miigo-v4-tabbar.miigo-backend-tabbar-v1,

  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="short"] #miigo-v4-tabbar,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="drama"] #miigo-v4-tabbar,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="short"] #miigo-v4-tabbar.miigo-main-bottom-nav-ready,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="drama"] #miigo-v4-tabbar.miigo-main-bottom-nav-ready {
    background: #000000 !important;
    background-color: #000000 !important;
    border-top-color: rgba(255,255,255,.08) !important;
    box-shadow: none !important;
  }

  body[data-channel="short"] #miigo-v4-tabbar::before,
  body[data-channel="short"] #miigo-v4-tabbar::after,
  body[data-channel="drama"] #miigo-v4-tabbar::before,
  body[data-channel="drama"] #miigo-v4-tabbar::after,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="short"] #miigo-v4-tabbar::before,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="short"] #miigo-v4-tabbar::after,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="drama"] #miigo-v4-tabbar::before,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="drama"] #miigo-v4-tabbar::after {
    background: #000000 !important;
    background-color: #000000 !important;
  }

  body[data-channel="short"] #miigo-v4-tabbar button,
  body[data-channel="short"] #miigo-v4-tabbar a,
  body[data-channel="short"] #miigo-v4-tabbar span,
  body[data-channel="short"] #miigo-v4-tabbar em,
  body[data-channel="short"] #miigo-v4-tabbar i,
  body[data-channel="drama"] #miigo-v4-tabbar button,
  body[data-channel="drama"] #miigo-v4-tabbar a,
  body[data-channel="drama"] #miigo-v4-tabbar span,
  body[data-channel="drama"] #miigo-v4-tabbar em,
  body[data-channel="drama"] #miigo-v4-tabbar i {
    color: #ffffff !important;
  }

  body[data-channel="short"] #miigo-v4-tabbar img,
  body[data-channel="drama"] #miigo-v4-tabbar img {
    filter: none !important;
  }

  body[data-channel="short"] #miigo-v4-tabbar svg,
  body[data-channel="drama"] #miigo-v4-tabbar svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  body[data-channel="short"] #miigo-v4-tabbar .is-active,
  body[data-channel="short"] #miigo-v4-tabbar .active,
  body[data-channel="drama"] #miigo-v4-tabbar .is-active,
  body[data-channel="drama"] #miigo-v4-tabbar .active {
    color: #ff2d55 !important;
  }
}

/* MIIGO_SHORT_MOBILE_TABBAR_COMPACT_V4_20260703
 * 修复 iPhone/PWA 登录硬重开后，短剧底部黑色导航上方多出一大块黑底。
 * 只压缩 short/drama 手机底部导航高度，不动短剧播放/分享/滑动。
 */
@media (max-width: 820px) {
  body[data-channel="short"] #miigo-v4-tabbar,
  body[data-channel="drama"] #miigo-v4-tabbar,
  html[data-channel="short"] body #miigo-v4-tabbar,
  html[data-channel="drama"] body #miigo-v4-tabbar,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="short"] #miigo-v4-tabbar,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="drama"] #miigo-v4-tabbar {
    height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 2px 8px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
    justify-content: space-around !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body[data-channel="short"] #miigo-v4-tabbar[data-miigo-tabbar-portal-body="1"],
  body[data-channel="drama"] #miigo-v4-tabbar[data-miigo-tabbar-portal-body="1"],
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="short"] #miigo-v4-tabbar[data-miigo-tabbar-portal-body="1"],
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="drama"] #miigo-v4-tabbar[data-miigo-tabbar-portal-body="1"] {
    height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 2px 8px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-channel="short"] #miigo-v4-tabbar button,
  body[data-channel="drama"] #miigo-v4-tabbar button,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="short"] #miigo-v4-tabbar button,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="drama"] #miigo-v4-tabbar button {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  body[data-channel="short"] #miigo-v4-tabbar img[data-miigo-inner-tab-icon],
  body[data-channel="drama"] #miigo-v4-tabbar img[data-miigo-inner-tab-icon],
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="short"] #miigo-v4-tabbar img[data-miigo-inner-tab-icon],
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="drama"] #miigo-v4-tabbar img[data-miigo-inner-tab-icon] {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    margin: 0 0 1px !important;
    object-fit: contain !important;
  }

  body[data-channel="short"] #miigo-v4-tabbar button[data-miigo-inner-tab-key="vip"] img[data-miigo-inner-tab-icon],
  body[data-channel="drama"] #miigo-v4-tabbar button[data-miigo-inner-tab-key="vip"] img[data-miigo-inner-tab-icon],
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="short"] #miigo-v4-tabbar button[data-miigo-inner-tab-key="vip"] img[data-miigo-inner-tab-icon],
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="drama"] #miigo-v4-tabbar button[data-miigo-inner-tab-key="vip"] img[data-miigo-inner-tab-icon] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }

  body[data-channel="short"] #miigo-v4-tabbar button span,
  body[data-channel="drama"] #miigo-v4-tabbar button span,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="short"] #miigo-v4-tabbar button span,
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="drama"] #miigo-v4-tabbar button span {
    line-height: 1.05 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
  }

  body[data-channel="short"],
  body[data-channel="drama"],
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="short"],
  html.miigo-pwa-standalone-mode body.miigo-inner-real-body[data-channel="drama"] {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}