/* Android App Specific CSS */
/* Utilizes body class android-webview */
/* Overrides defaults in main.css only if necessary */

html.android-webview {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* MainActivity applies the Android system-bar inset to the WebView root.
     Do not also add WebView's safe-area value inside fixed docks or their
     scrolling reserves: Android 16 reports it here and would create a second,
     visibly empty strip below the nav icons. */
  --mobile-web-safe-area-bottom: 0px;
}

/* Do not set a global font size in the Android WebView.  Doing so overrides
   each responsive component's type scale (including placeholders, captions,
   tabs, and metadata) and collapses the intended visual hierarchy. */
html.android-vs-app .hero-title {
    font-size: 1.8rem;
}
html.android-vs-app .hero-title span {
    font-size: inherit;
}
html.android-webview .hero-title .hero-mobile-greeting,
html.android-webview .hero-mobile-create-emphasis {
  font-size: clamp(1.35rem, 5.2vw, 1.8rem) !important;
}
html.android-webview .hero-title .hero-mobile-greeting {
  font-weight: 400 !important;
}
html.android-webview .hero-mobile-create-emphasis {
  font-weight: 800 !important;
}
html.android-legacy,
html.android-legacy body {
  overflow-x: hidden;
  margin-top: 1.5rem;
}

html.android-v17plus,
html.android-v17plus body {
  overflow-x: hidden;
  margin-top: 0;
  padding-top: 1.5rem;
  min-height: 100dvh;
}

@media screen and (orientation: landscape) {
  html.android-v17plus,
  html.android-v17plus body {
    padding-top: 0 !important;
  }
}

html.android-legacy .fixed-header {
  --hdr-tap: clamp(1.2rem, 0.9rem + 0.3vw, 1.3rem);
  --hdr-icon: clamp(1.2rem, 0.9rem + 0.3vw, 1.3rem);
  --hdr-coin: clamp(1.2rem, 1rem + 0.4vw, 1.3rem);
  padding-top: 3.5rem;
}

@media screen and (orientation: landscape) {
  html.android-legacy .fixed-header {
    padding-top: 1.5rem;
  }
}


/* Android v1.7+ play-page-only override: avoid root padding jump on non-portrait media. */
html.android-v17plus body.play-page.play-aspect-1-1,
html.android-v17plus body.play-page.play-aspect-16-9 {
  padding-top: 0 !important;
}

/* Android 12's stock WebView (Chrome 91) has no dynamic viewport unit support.
   The immersive player otherwise resolves its media containers to zero height.
   Modern Android WebViews continue through the normal 100dvh rules below. */
@supports not (height: 100dvh) {
  html.android-webview body.viza-redesign.play-page main.container.center-vertical.play-desktop-layout,
  html.android-webview body.viza-redesign.play-page .play-desktop-main-column,
  html.android-webview body.viza-redesign.play-page .play-media,
  html.android-webview body.viza-redesign.play-page .media-block {
    height: 100vh;
    min-height: 100vh;
  }

  html.android-webview body.viza-redesign.play-page #videoWrapper.audio-mode {
    height: 100vh !important;
    max-height: 100vh !important;
  }
}

html.android-v17plus .fixed-header {
  --hdr-tap: clamp(1.2rem, 0.9rem + 0.3vw, 1.3rem);
  --hdr-icon: clamp(1.2rem, 0.9rem + 0.3vw, 1.3rem);
  --hdr-coin: clamp(1.2rem, 1rem + 0.4vw, 1.3rem);
  padding-top: 0;
}

/* The native root already starts below the status bar. Marketing pages use a
   fixed web header with their own header offset, so the legacy app-wide body
   padding creates an extra empty band before the first hero. */
html.android-v17plus body.marketing-page {
  padding-top: 0;
}

/* Standard app pages begin just below the fixed header in Android WebView.
   Keep a small, shared breathing room for the page-frame title/content while
   leaving the immersive Play layout entirely untouched. */
@media (max-width: 959px) {
  html.android-webview body.viza-redesign:not(.play-page) main.page-frame {
    margin-top: 0.5rem;
  }
}

html.android-webview body.marketing-page .fixed-header {
  background: #050811;
  border-bottom-color: rgba(255, 255, 255, .08);
}

/* Match the marketing mobile-web composer in the Android WebView: retain its
   comfortable two-line prompt area and dock it closely above the app footer. */
@media (max-width: 760px) {
  html.android-webview body.site-shell.marketing-page .floating-creator {
    bottom: calc(var(--mobile-footer-height, 70px) + var(--mobile-web-safe-area-bottom));
    z-index: 1201;
  }

  html.android-webview body.site-shell.marketing-page .floating-creator .prompt-shell {
    min-height: 120px;
    padding: 14px 12px 12px;
    background: rgba(31, 33, 42, .96);
    border-color: rgba(255, 255, 255, .18);
  }

  html.android-webview body.site-shell.marketing-page .floating-creator .prompt-type {
    min-height: 50px;
    max-height: 72px;
    padding: 0 4px 10px;
    overflow-y: auto;
  }
}

/* 1) HEADER: coins (icon + number) a bit larger */
html.android-webview .fixed-header .header-credits {
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--hdr-coin) !important;
}

html.android-webview .fixed-header .header-credits i,
html.android-webview .fixed-header .header-credits span {
  font-size: inherit !important;
  line-height: 1;
}

/* 1) HEADER: language + hamburger icons larger + proper touch target */
html.android-webview .fixed-header .language-icon,
html.android-webview .fixed-header .hamburger-icon,
html.android-webview .fixed-header .credits-icon,
html.android-webview .fixed-header .notification-icon {
  min-width: 38px;
  min-height: 38px;
  padding: 0.2rem .25rem 0rem .25rem;
}
html.android-webview .fixed-header .language-icon i,
html.android-webview .fixed-header .hamburger-icon i,
html.android-webview .fixed-header .notification-icon i {
  font-size: 1.4rem !important;
  line-height: 1;
}
/* Android's legacy top padding leaves the hamburger visually lower than the
   adjacent search field. Keep its touch target, but center the glyph. */
html.android-webview .fixed-header .hamburger-icon {
  padding: 0;
  transform: translateY(-1px);
}

html.android-webview .fixed-header .credits-icon .header-credits {
  font-size: var(--hdr-coin) !important;
}

html.android-vs-app .filter-group-modern:not(.show-tabs) .toggle-label {
  font-size: 1.2rem;
}

/* Shows pages: preserve typography from shows.css inside Android app.
   This avoids the broad Android app font scaling making show descriptions,
   prize summaries, and tabs appear oversized compared to web/iOS. */
html.android-vs-app .show-page .show-handle {
  font-size: 0.9rem !important;
  line-height: 1.15 !important;
}

html.android-vs-app .show-page .show-meta {
  font-size: 0.76rem !important;
  line-height: 1.28 !important;
}

html.android-vs-app .show-page .show-prize-label,
html.android-vs-app .show-page .show-prize-highlight strong,
html.android-vs-app .show-page .show-prize-terms-link {
  font-size: 0.84rem !important;
  line-height: 1.3 !important;
}

html.android-vs-app .show-page .show-prize-terms-link {
  font-size: 0.76rem !important;
  line-height: 1.28 !important;
}

html.android-vs-app .show-page .show-tabs.filter-group-modern .toggle-label {
  font-size: 0.92rem !important;
}

html.android-vs-app .show-page .show-content h2 {
  font-size: 2.05rem !important;
  line-height: 1.15 !important;
}

html.android-vs-app .show-page #show-featured-title {
  font-size: 1.7rem !important;
  line-height: 1.2 !important;
}

html.android-vs-app .show-page .show-content h3,
html.android-vs-app .show-page .show-step-card h3 {
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
}

html.android-vs-app .show-page .show-section-title {
  font-size: 1.17rem !important;
  line-height: 1.25 !important;
}

html.android-vs-app .show-page .show-content p,
html.android-vs-app .show-page .show-content li {
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
}

html.android-vs-app .show-page .show-step-description {
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
}

/* Shows submissions song-picker typography on Android:
   keep row title/meta/button sizing aligned with mobile web. */
html.android-vs-app .show-page .show-step-card h3 small {
  font-size: 0.8em !important;
}

html.android-vs-app .show-page .show-song-title {
  font-size: 0.88rem !important;
  line-height: 1.2 !important;
}

html.android-vs-app .show-page .show-song-main small,
html.android-vs-app .show-page .show-song-main small span {
  font-size: 0.74rem !important;
  line-height: 1.2 !important;
}

html.android-vs-app .show-page .show-song-order {
  font-size: 0.75rem !important;
}

html.android-vs-app .show-page .show-song-toggle {
  font-size: 0.79rem !important;
  line-height: 1 !important;
}

html.android-vs-app .show-page .show-contestant small {
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
}

@media (max-width: 840px) {
  html.android-vs-app .show-page #show-featured-title {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
  }
}

html.android-webview .generic-popup .close-icon {
 top: 3.5rem;
 right: 1rem;
}

/* Total balance is a primary purchasing signal. Older Android WebViews are
   still resolving the shared responsive scale too small, so pin this to the
   mobile-web visual size in pixels rather than inheriting rem scaling. */
html.android-webview .credits-temp-page .credits-temp-balance-number,
html.android-vs-app .credits-temp-page .credits-temp-balance-number,
html.android .credits-temp-page .credits-temp-balance-number {
  font-size: 42px !important;
  line-height: 1 !important;
}

html.android-webview .credits-temp-page .credits-temp-balance-number small,
html.android-vs-app .credits-temp-page .credits-temp-balance-number small,
html.android .credits-temp-page .credits-temp-balance-number small {
  font-size: 14px !important;
  line-height: 1 !important;
}

html.android-webview #mobile-nav-popup{
  /* Keep Android nav drawer aligned with iOS/mobile web top rhythm. */
  padding-top: 0.78rem;
}

/* Keep the close control on the right while the signed-in profile remains
   anchored to the drawer's left edge, matching mobile web and iOS. */
html.android-webview #mobile-nav-popup .mobile-menu-header {
  position: relative;
  justify-content: flex-start !important;
  min-height: 2.75rem;
  /* Reserve the close-control lane so long account names cannot run beneath it. */
  padding-right: 3.1rem !important;
}
html.android-webview #mobile-nav-popup .mobile-menu-profile {
  flex: 1 1 auto;
  max-width: 100%;
}
html.android-webview #mobile-nav-popup .mobile-menu-profile-copy {
  min-width: 0;
  overflow: hidden;
}
html.android-webview #mobile-nav-popup .mobile-menu-close-icon {
  position: absolute !important;
  top: 0.15rem !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1;
  display: grid !important;
  place-items: center;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(148,163,184,.32) !important;
  border-radius: 50% !important;
  background: rgba(71,85,105,.55) !important;
  color: #f8fafc !important;
}

html.android-webview #mobile-nav-popup .menu-list li {
  display: flex;
  align-items: center;
  /* Keep the full link touch target while reducing the extra row spacing. */
  padding: 0.2rem 0.14rem;
}
html.android-webview #mobile-nav-popup .menu-list .menu-nav-icon {
  font-size: 1.05rem !important;  /* icon size */
  width: 1.6rem;                  /* reserve space so text lines up */
  text-align: center;
  margin-right: 0.62rem;
  flex: 0 0 auto;
  line-height: 1;
}
html.android-webview #mobile-nav-popup .menu-list a {
  font-size: 1.02rem !important;  /* label size */
  line-height: 1.2;
  flex: 1 1 auto;
}

/* Match the compact mobile-web close affordance rather than Android's inherited
   oversized icon metric. */
html.android-webview #mobile-nav-popup .mobile-menu-close-icon i {
  font-size: 1.05rem !important;
  line-height: 1 !important;
}

html.android-webview #notifications-overlay .notifications-tabs .segment-btn,
html.android-webview #social-follows-overlay .notifications-tabs .segment-btn,
html.android-webview #media-kit-overlay .notifications-tabs .segment-btn {
  font-size: 1.05rem !important;
}

/* Quick Create popup tabs on Android:
   keep Song/Video labels legible and aligned with mobile web sizing. */
html.android-webview #quick-create-overlay .quick-create-tabs .segment-btn {
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  min-height: 2.35rem !important;
  padding-top: 0.28rem !important;
  padding-bottom: 0.55rem !important;
}

/* Inbox typography on Android: keep action/body copy aligned with mobile web sizing. */
html.android-webview #notifications-overlay .inbox-mark-read-link {
  font-size: 0.9rem !important;
}

html.android-webview #notifications-overlay .notification-message {
  font-size: 0.9rem !important;
  line-height: 1.28 !important;
}

html.android-webview #notifications-overlay .notification-message a {
  font-size: inherit !important;
  line-height: inherit !important;
}

html.android-webview #notifications-overlay .notification-time {
  font-size: 0.75rem !important;
}

html.android-webview #notifications-overlay #messages-list .social-follow-name {
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
}

html.android-webview #media-kit-overlay .media-kit-slot-label,
html.android-webview #media-kit-overlay .media-kit-slot-sub {
  display: block;
  width: 100%;
  text-align: center !important;
}

html.android-webview #media-kit-overlay .media-kit-slot-sub {
  font-size: 0.7rem !important;
}

html.android-webview .home-following-username {
  font-size: 0.68rem !important;
}

/* Home section "See all →" on Android:
   normalize font fallback so the arrow glyph matches text size. */
html.android-webview .home-section-see-all {
  font-family: "Roboto", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

html.android-webview .home-section-see-all .see-all-arrow {
  font-size: 1em !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 0.14em;
  transform: translateY(0.05em);
  -webkit-text-size-adjust: 100%;
}

/* Templates page typography normalization on Android:
   counter global Android clamp so headings match mobile-web rhythm. */
html.android-webview body[data-page-scope="templates"] .templates-selection-title {
  font-size: 1.2rem !important;
  line-height: 1.2 !important;
}

html.android-webview body[data-page-scope="templates"] .quick-video-template-name {
  font-size: 0.94rem !important;
  line-height: 1.15 !important;
}

/* Mobile footer labels in Android webview: counter global font inflation so
   nav labels (Explore, Sign Up, etc.) match iPhone sizing and do not truncate. */
html.android-webview .mobile-footer-btn {
  font-size: 1.3rem !important;
}

html.android-webview .mobile-footer-btn[data-footer-key="create"] i {
  font-size: 1.3rem !important;
}

html.android-webview .mobile-footer-btn-label {
  font-size: 0.7rem !important;
  line-height: 1.05 !important;
  max-width: 100% !important;
}

/* _list_jingles advanced-filter pills: counter Android global font inflation */
html.android-webview .advanced-filter-pills .filter-pill {
  font-size: 0.62rem !important;
  line-height: 1.05 !important;
  padding: 0.3rem 0.66rem !important;
  gap: 0.28rem !important;
}

html.android-webview .advanced-filter-pills .filter-pill-label,
html.android-webview .advanced-filter-pills .filter-pill-value,
html.android-webview .advanced-filter-pills .filter-pill i {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Header search popup on Android:
   counter global .android-webview * font inflation so popup typography/icons
   match intended mobile-web scale. */
html.android-webview .header-search-pill {
  font-size: 0.82rem !important;
  line-height: 1.05 !important;
}

html.android-webview .header-search-btn {
  font-size: 0.8rem !important;
  line-height: 1.05 !important;
}

html.android-webview .header-search-section-head {
  font-size: 0.95rem !important;
  line-height: 1.05 !important;
}

html.android-webview .header-search-row-main strong {
  font-size: 0.82rem !important;
  line-height: 1.1 !important;
}

html.android-webview .header-search-row-main small {
  font-size: 0.72rem !important;
  line-height: 1.05 !important;
}

html.android-webview .header-search-row-action-play i,
html.android-webview .header-search-section-head button i {
  font-size: 0.86rem !important;
  line-height: 1 !important;
}

html.android-webview .header-search-panel-head span {
  font-size: 0.7rem !important;
  line-height: 1.05 !important;
}

html.android-webview .header-search-panel-head button {
  font-size: 0.76rem !important;
  line-height: 1.05 !important;
}

/* Recent history typography in header search popup */
html.android-webview .header-mobile-search-history-select span,
html.android-webview .header-search-row-main {
  font-size: 0.82rem !important;
  line-height: 1.1 !important;
}

html.android-webview .header-mobile-search-history-select i,
html.android-webview .header-mobile-search-history-remove i {
  font-size: 0.78rem !important;
  line-height: 1 !important;
}

/* _list_jingles list-view meta metrics (duration/views):
   keep same visual scale as username/date on Android. */
html.android-webview #jingles-list.jingles-list--list .carousel-meta .list-subitem,
html.android-webview #jingles-list.jingles-list--list .carousel-meta .list-subitem--duration,
html.android-webview #jingles-list.jingles-list--list .carousel-meta .list-subitem--views {
  font-size: 0.8rem !important;
  line-height: 1.1 !important;
}

html.android-webview #jingles-list.jingles-list--list .carousel-meta .list-subitem i,
html.android-webview #jingles-list.jingles-list--list .carousel-meta .list-subitem--duration i,
html.android-webview #jingles-list.jingles-list--list .carousel-meta .list-subitem--views i {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* _list_jingles three-dots action popup: keep Android text/icon size aligned
   with iPhone/mobile web (global android font scaling otherwise makes it too big). */
html.android-webview #jingles-list .list-menu-item {
  font-size: 0.8rem !important;
  line-height: 1.1 !important;
}

html.android-webview #jingles-list .list-menu-item i {
  font-size: 0.92rem !important;
  line-height: 1 !important;
}

html.android-webview .footer-links a,
html.android-webview .footer-links  {
  margin-top: 0.1rem;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

html.android-webview .step-card-icon {
  font-size: 2.5rem !important;
}

html.android-webview .sso-button.discord-btn,
html.android-webview .sso-button.apple-btn {
    display: none !important;
}

html.android-webview body.login-page .cta-wrap a,
html.android-webview body.register-page .cta-wrap a {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* The redesign shell already reserves the native header's height. */
@media (max-width: 767px) {
  html.android-webview body.viza-redesign.site-gradient-shell.login-page main.container,
  html.android-webview body.viza-redesign.site-gradient-shell.register-page main.container {
    padding-top: 20px;
  }
}

html.android-webview .web-checkout {
    display: none !important;
}

html.android-webview .android-checkout {
    display: grid !important;
    text-align: left;
}

html.android-webview .android-checkout.app-mini-offer {
    display: none !important;
}

html.android-webview .android-only {
    display: block !important;
}

/* Store language is app-specific: never show the iOS notice in Android. */
html.android-webview #creditsTempDisclaimerBlock .ios-only {
    display: none !important;
}

/* Keep the account-balance labels readable at the same visual scale as mobile
   web, despite older WebView font metrics. */
html.android-webview .credits-temp-summary-name {
    font-size: 0.8rem !important;
}

/* The account summary in the drawer uses the same readable secondary-text
   scale as mobile web. */
html.android-webview #mobile-nav-popup .mobile-menu-profile-credits {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
}

  html.android-webview .cookie-banner {
    padding: 10px;
    margin: 0 5px;
    font-size: 0.8rem;
  }

  /* Hide non-essential UI in the Android webview */
  html.android-webview .cookie-banner,
  html.android-webview #cookie-banner,
  html.android-webview .promo-code-wrapper {
    display: none !important;
  }

html.android-webview .info-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

html.android-webview .form-title {
  font-size: 1.2rem !important;
}

html.android-webview .form-sub-header {
  font-size: 0.9rem !important;
}

/* Final song/video action tiles in Android webview. */
html.android-webview .final-song-page .published-action-btn {
  gap: 0.22rem;
}

html.android-webview .final-song-page .published-action-btn i {
  font-size: 1.35rem !important;
  line-height: 1;
}

/* Keep the optional watermark line subordinate to Download in the Android
   WebView. The global Android font scale also applies directly to the nested
   link, so it must be reset separately from the enclosing span. */
html.android-webview .final-song-page .published-action-btn .published-action-subtext,
html.android-webview .final-song-page .published-action-btn .published-action-subtext a {
  display: block;
  width: 100%;
  margin-top: 0;
  color: #8f9ab2;
  font-size: 0.56rem !important;
  font-weight: 600;
  line-height: 1.05 !important;
  text-align: center;
  text-decoration: none;
}

/* final.html also carries the legacy final-song-page class. */
html.android-webview .final-video-page .published-action-btn {
  gap: 0.38rem;
}

html.android-webview .final-video-page .published-action-btn i {
  font-size: 1.1rem !important;
  line-height: 1;
}

/* The play-page action sheet uses the same compact secondary label below
   Download. Android text autosizing was enlarging the nested Watermark link,
   so keep both variants at the intended subordinate size. */
html.android-webview.play-page .media-menu-download-subtext,
html.android-webview.play-page .media-menu-download-subtext a {
  font-size: 0.7rem !important;
  line-height: 1.05 !important;
}

/* User-card permission rows in Android webview:
   reduce label size so "Image Permissions" stays on one line. */
html.android-webview .user-card-popover .user-card-perm-title {
  font-size: 0.8rem !important;
  line-height: 1.1;
  gap: 0.42rem;
}

html.android-webview .user-card-popover .user-card-perm-title i {
  font-size: 0.8rem !important;
}

html.android-webview .user-card-popover .user-card-perm-value {
  font-size: 0.72rem !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

html.android-webview .field textarea::placeholder,
html.android-webview #lyricsEditInput {
  font-size: 0.8em;
}

html.android-webview .control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Collections: keep Android typography aligned with iOS/mobile-web and
   avoid the global Android font clamp from inflating these labels. */
html.android-webview .home-collections-section .carousel-heading,
html.android-webview .home-collections-section .home-collection-title,
html.android-webview .home-collections-section .home-collection-subtitle {
  font-size: inherit !important;
}

html.android-webview .home-collections-section .carousel-heading {
  font-size: 1.2rem !important;
  line-height: 1.2 !important;
}

html.android-webview .home-collections-section .home-collection-title {
  font-size: 0.78rem !important;
  line-height: 1.15;
}

html.android-webview .home-collections-section .home-collection-subtitle {
  font-size: 0.65rem !important;
  line-height: 1.1;
}

/* Quick Create helper copy on Android:
   keep it aligned with iPhone/mobile-web sizing despite global font scaling. */
html.android-webview .quick-create-helper-text,
html.android-webview .quick-create-helper-text * {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

/* The Android WebView's legacy-wide font rule also reaches the nested balance
   span. Keep the entire Quick Create balance row at the label's compact size. */
html.android-webview #quick-create-overlay .quick-create-credit-balance,
html.android-webview #quick-create-overlay .quick-create-credit-balance .credit-notice-link,
html.android-webview #quick-create-overlay .quick-create-credit-balance span {
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
}

/* Home hero Aidols link on Android:
   counter global Android font inflation so it matches Quick/Advanced sizing. */
html.android-webview .hero-mobile-template-link,
html.android-webview .hero-mobile-template-link * {
  font-size: 0.9rem !important;
  line-height: 1.25 !important;
}

/* Collections detail tabs on Android:
   override global Android font inflation so tab labels stay inside each tab. */
html.android-webview .collections-tabs-wrap .collections-tab {
  justify-content: center;
  text-align: center;
  font-size: 0.66rem !important;
  line-height: 1.1 !important;
  min-width: 112px !important;
  max-width: 112px !important;
  padding: 0.56rem 0.42rem 0.52rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Ensure create-card + icon is perfectly centered on Android webview. */
html.android-webview .home-collection-card--create {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
}

html.android-webview .home-collection-card--create .home-collection-art--create {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

html.android-webview .home-collection-card--create .home-collection-art--create i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

html.android-webview .control-btn i {
  font-size: 1rem;
}

html.android-webview .credits-display .credits-number {
  font-size: 1.9rem !important;
  gap: 0.42rem;
  margin-bottom: 6px;
}

html.android-webview .credits-display .credits-number i,
html.android-webview .credits-display .credits-number #creditsNumber {
  font-size: inherit !important;
}

html.android-webview #creditsTempDisclaimerBlock .credits-label-small,
html.android-webview #creditsTempDisclaimerBlock .credits-label-small a {
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
}

/* Credits page (Android app): keep monthly/reserve expiry rows aligned with mobile web,
   and prevent right-edge clipping from global Android font inflation. */
html.android-webview .credits-temp-page .credits-temp-summary-value {
  font-size: 1.02rem !important;
  line-height: 1.08 !important;
}

html.android-webview .credits-temp-page .credits-temp-summary-exp {
  font-size: 0.74rem !important;
  line-height: 1.2 !important;
}

/* Keep play-page lyric blur consistent with iOS/web.
   Android WebView can ignore generic filter declarations unless restated here. */
html.android-webview body.play-page .lyrics-backdrop {
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

html.android-webview body.play-page #videoWrapper.lyrics-preview:not(.audio-mode) .audio-lyrics {
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

/* Song mode must expose the lyric layer, not a composited video/image surface.
   Keep the media available only during the intentional swipe-back preview. */
html.android-webview body.play-page #videoWrapper.audio-mode:not(.mode-preview-video) #jingleVideo,
html.android-webview body.play-page #videoWrapper.audio-mode:not(.mode-preview-video) #imageCover {
  display: none !important;
}

/* Android WebView does not consistently composite the heavy filter on the
   song-mode artwork. Use the same low-distraction, near-black lyric canvas as
   mobile web instead of leaving a readable cover image behind the lyrics. */
html.android-webview body.play-page #videoWrapper.audio-mode:not(.mode-preview-video) {
  background: #020307 !important;
  background-image: none !important;
}

/* Do not rely on the redesign body class here: Android can switch player
   modes before that class is present. A standard song cover is mostly white,
   so a lingering audio-cover layer makes white lyrics unreadable. */
html.android-webview body.play-page #videoWrapper.audio-mode:not(.mode-preview-video) #audioCover,
html.android-webview body.play-page #videoWrapper.audio-mode:not(.mode-preview-video) #standardCoverColorShift,
html.android-webview body.play-page #videoWrapper.audio-mode:not(.mode-preview-video) #standardCoverWaveformWrap {
  display: none !important;
  opacity: 0 !important;
}

html.android-webview body.play-page #videoWrapper.audio-mode .audio-lyrics {
  z-index: 20 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* The Android-wide font scale can make the compact player metadata uneven.
   Keep the owner, follow action, view count, and seek timers on one mobile
   rhythm, matching the browser and iOS player footer. */
@media (max-width: 959px) {
  /* Android WebView renders the playback metadata smaller than the same CSS on
     mobile browsers. Increase this shared token slightly without changing the
     mobile-web or iOS player. */
  html.android-webview body.viza-redesign.play-page {
    --play-mobile-meta-font-size: 16px;
  }

  html.android-webview body.viza-redesign.play-page .play-footer-meta-row,
  html.android-webview body.viza-redesign.play-page .play-owner-meta,
  html.android-webview body.viza-redesign.play-page .play-owner-meta a,
  html.android-webview body.viza-redesign.play-page .play-footer-meta-row .views,
  html.android-webview body.viza-redesign.play-page .play-footer-meta-row .views i,
  html.android-webview body.viza-redesign.play-page .play-footer-follow-btn,
  html.android-webview body.viza-redesign.play-page .play-footer-following-icon,
  html.android-webview body.viza-redesign.play-page .play-footer-seek-row .time-display {
    font-size: var(--play-mobile-meta-font-size) !important;
    line-height: 1.2 !important;
  }
}

html.android-webview .music-tag-button {
  font-size: 0.7rem;
}

/* Keep Android card meta text aligned across library and Home media cards.
   Home rails use .card-meta-primary while library cards use .username-link. */
html.android-webview #jingles-list .carousel-meta .username-link,
html.android-webview #jingles-recommended .carousel-meta .username-link,
html.android-webview #jingles-top-hits .carousel-meta .username-link,
html.android-webview #jingles-recommended .carousel-meta .card-meta-primary,
html.android-webview #jingles-top-hits .carousel-meta .card-meta-primary,
html.android-webview #jingles-list .carousel-meta .views,
html.android-webview #jingles-recommended .carousel-meta .views,
html.android-webview #jingles-top-hits .carousel-meta .views,
html.android-webview #jingles-list .carousel-meta .views i,
html.android-webview #jingles-recommended .carousel-meta .views i,
html.android-webview #jingles-top-hits .carousel-meta .views i {
  font-size: 0.9rem !important;
  line-height: 1.15;
}

/* Prevent the global .android-webview * font-size rule from re-inflating nested username spans on list pages. */
html.android-webview #jingles-list .carousel-meta .username-link *,
html.android-webview #jingles-recommended .carousel-meta .username-link *,
html.android-webview #jingles-top-hits .carousel-meta .username-link *,
html.android-webview #jingles-recommended .carousel-meta .card-meta-primary *,
html.android-webview #jingles-top-hits .carousel-meta .card-meta-primary * {
  font-size: inherit !important;
  line-height: inherit;
}

/* My Studio owner cards show a relative timestamp instead of a username.
   Keep it at the same compact grid-card size as mobile web rather than
   allowing the Android app-wide fallback scale to enlarge it. */
html.android-webview #jingles-list.jingles-list--grid .carousel-meta .time-ago {
  font-size: 0.72rem !important;
  line-height: 1.2 !important;
}

html.android-webview #jingles-list.jingles-list--grid .carousel-meta .time-ago * {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* My Studio list view uses the same relative timestamp as its cards. Keep it
   at the compact mobile-web scale rather than Android's broad text fallback. */
html.android-webview #jingles-list.jingles-list--list .carousel-meta .time-ago {
  font-size: 0.8rem !important;
  line-height: 1.15 !important;
}

html.android-webview #jingles-list.jingles-list--list .carousel-meta .time-ago * {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Video Step 2's prompt label is a nested <strong>. Prevent the broad Android
   font fallback from making it larger than the adjacent prompt copy. */
html.android-webview #template-use-overlay .tpl-use-prompt-text strong {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Keep the three-option account and credit tabs at the compact mobile-web
   size so translated labels retain room within their segment. */
html.android-webview body.viza-redesign .settings-tabs .toggle-label {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* The Android app-wide fallback text scale is useful for legacy pages, but it
   must not override the compact control typography used by Settings. Keep
   every field label, sharing segment, and help affordance at the same size as
   the mobile-web Settings page. */
html.android-webview body.viza-redesign.settings-page .settings-panel .input-label,
html.android-webview body.viza-redesign.settings-page .settings-panel .switch-label {
  font-size: 13px !important;
  line-height: 1.3 !important;
}

html.android-webview body.viza-redesign.settings-page .settings-share-toggle .segment-btn {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* Android's app-wide fallback font scale makes native select values much
   larger than surrounding form copy after a choice is made. Apply the same
   compact display size to every dropdown, including its selected option. */
html.android-webview select,
html.android-webview select option {
  font-size: 0.9rem !important;
  line-height: 1.3 !important;
}

html.android-webview body.viza-redesign.settings-page .input-label .info-icon {
  display: inline-flex !important;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  vertical-align: middle;
  font-size: 11px !important;
  line-height: 1 !important;
}

/* Chrome 91 cannot evaluate the :has() selector that switches four duration
   choices to four columns. Use the explicit duration class so All, Short,
   Medium, and Long remain on one row in the Android filter sheet. */
html.android-webview body.viza-redesign .advanced-filter-body .advanced-segmented--duration {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Font Awesome inherits Android's legacy app-wide scale unless it is reset.
   Keep the Type icons visually identical to their Song and Video labels. */
html.android-webview body.viza-redesign .advanced-filter-body .segment-btn i {
  font-size: inherit !important;
  line-height: inherit !important;
}

html.android-webview .audio-actions i, html.android-webview .guidance-actions i {
  font-size: 0.9rem !important;
}

html.android-webview #videoWrapper .control-btn {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  padding: 0;
}

html.android-webview #videoWrapper .control-btn i {
  font-size: 1.25rem !important;
}

html.android-webview #videoWrapper .side-peek {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
}

html.android-webview #videoWrapper .side-peek i {
  font-size: 1.4rem !important;
}

html.android-webview #videoWrapper .media-buffer-spinner .spinner-ring {
  font-size: 2.6rem !important;
}

html.android-webview .copy-style-trigger i {
  font-size: 1.4rem;
  margin-right: 0.5rem;
}

html.android-webview .list-views, html.android-webview .fa-eye {
  font-size: 0.85rem !important;
}

/* Play page backdrop parity with iOS/mobile web:
   enforce blur in Android WebView for square/landscape media backgrounds. */
html.android-webview body.play-page:not(.final-page) .play-page-blur-backdrop {
  -webkit-filter: blur(14px) saturate(1.05) brightness(0.82);
  filter: blur(14px) saturate(1.05) brightness(0.82);
  transform: scale(1.12);
  background-image: none !important;
  overflow: hidden;
}

html.android-webview body.play-page:not(.final-page) .play-page-blur-backdrop::before {
  content: '';
  position: absolute;
  inset: -22px;
  background-image: var(--play-blur-bg);
  background-size: cover;
  background-position: center;
  -webkit-filter: blur(18px) saturate(1.05) brightness(0.82);
  filter: blur(18px) saturate(1.05) brightness(0.82);
  transform: scale(1.08);
}

html.android-webview body.play-page:not(.final-page) .play-page-blur-backdrop::after {
  background: linear-gradient(180deg, rgba(3, 7, 18, 0.22) 0%, rgba(3, 7, 18, 0.38) 100%);
}

html.android-webview body.create-flow textarea::placeholder {
  font-size: inherit;
  line-height: inherit;
}

/* Keep the two credit helper lines in create flow the same size on Android.
   The global android-webview font scaling can otherwise re-inflate nested
   link/value text inside the "Credit balance" row. */
html.android-webview body.create-flow .credit-notice,
html.android-webview body.create-flow .credit-notice .credit-notice-link,
html.android-webview body.create-flow .credit-notice .credit-notice-link *,
html.android-webview body.create-flow .credit-notice span {
  font-size: 0.875rem !important;
  line-height: 1.35 !important;
}

/* Match Create-flow typography to mobile web. The Android app has a broad
   fallback font scale for legacy screens; it was also scaling nested spans and
   icons inside chips/toggles, while leaving form labels too small. */
@media (max-width: 959px) {
  html.android-webview body.viza-redesign.create-flow .create-step-label,
  html.android-webview body.viza-redesign.create-flow .field label.create-step-label {
    font-size: 16px !important;
    line-height: 1.32 !important;
  }
  html.android-webview body.viza-redesign.create-flow .choice-toggle-label,
  html.android-webview body.viza-redesign.create-flow .choice-toggle-label span,
  html.android-webview body.viza-redesign.create-flow .segment-btn {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  html.android-webview body.viza-redesign.create-flow .choice-toggle-label i {
    font-size: 14px !important;
  }
  html.android-webview body.viza-redesign.create-flow .choice-toggle-ai-icon {
    width: 15px !important;
    height: 15px !important;
  }
  html.android-webview body.viza-redesign.create-flow .quick-prompt-button,
  html.android-webview body.viza-redesign.create-flow .music-tag-button,
  html.android-webview body.viza-redesign.create-flow .quick-prompt-text {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  html.android-webview body.viza-redesign.create-flow .quick-prompt-icon,
  html.android-webview body.viza-redesign.create-flow .quick-prompt-icon i,
  html.android-webview body.viza-redesign.create-flow .music-tag-button i {
    font-size: 14px !important;
    line-height: 1 !important;
  }
  html.android-webview body.viza-redesign.create-flow .ux-input,
  html.android-webview body.viza-redesign.create-flow textarea.ux-input,
  html.android-webview body.viza-redesign.create-flow input.ux-input,
  html.android-webview body.viza-redesign.create-flow select.ux-input {
    font-size: 14px !important;
  }
}

/* Song step (My Voice): keep upload guidance text aligned with iPhone sizing. */
html.android-webview body.step2-page .song-voice-title,
html.android-webview body.step2-page #myVoiceUploadPrompt,
html.android-webview body.step2-page #myVoiceUploadPrompt *,
html.android-webview body.step2-page .song-voice-tip,
html.android-webview body.step2-page .song-voice-tip * {
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
}

/* Aidols rankings bracket note text on Android:
   keep sentence and "Terms" link same readable size. */
html.android-webview .show-bracket-note,
html.android-webview .show-bracket-note a,
html.android-webview .show-bracket-note a * {
  font-size: 0.9rem !important;
  line-height: 1.38 !important;
}

@media (max-width: 767px) {
  /* Create-flow headings otherwise begin directly against the fixed header's
     divider in Android. Give every step and published result the same small,
     deliberate inset without changing mobile web or iOS. */
  html.android-webview body.create-flow .lyrics-create-layout,
  html.android-webview body.create-flow .song-create-layout,
  html.android-webview body.create-flow .video-create-layout,
  html.android-webview body.create-flow .final-song-create-layout,
  html.android-webview body.create-flow .final-video-create-layout {
    padding-top: 10px;
  }

  /* Android WebView otherwise starts the create form flush with the title
     divider. Match the intentional breathing room used by mobile web. */
  html.android-webview .viza-redesign.create-flow .form-wrapper {
    padding-top: 24px;
  }

  /* Published pages use a status badge immediately after the title. The
     standard form inset is unnecessarily tall here, so reclaim the space for
     the completed song/video while preserving the room above the header. */
  html.android-webview body.final-song-page .published-shell,
  html.android-webview body.final-video-page .published-shell {
    padding-top: 6px;
  }

  html.android-webview {
    /* Fixed Android navigation can occupy more visual height than its nominal
       layout token once the device safe area and WebView text metrics apply.
       Keep a shared trailing scroll reserve so the last control on every
       normal page remains reachable above the dock. */
    --mobile-page-bottom-buffer: 96px;
  }

  html.android-legacy body {
    padding-bottom: calc(var(--mobile-footer-height) + var(--mobile-page-bottom-buffer) + var(--mobile-web-safe-area-bottom));
  }

  html.android-v17plus body {
    /* Body padding is not consistently exposed as scrollable space by Android
       WebView when the body is a flex canvas. The generated flex spacer below
       is the single source of bottom-safe scroll room instead. */
    padding-bottom: 0;
  }

  html.android-v17plus body.viza-redesign::after {
    content: '';
    display: block;
    flex: 0 0 calc(
      var(--mobile-footer-height)
      + var(--mobile-page-bottom-buffer)
      + var(--mobile-web-safe-area-bottom)
    );
    height: calc(
      var(--mobile-footer-height)
      + var(--mobile-page-bottom-buffer)
      + var(--mobile-web-safe-area-bottom)
    );
  }

  /* Android's app-wide font baseline otherwise inflates the date and
     description cells while the amount cell retains its compact table rule.
     Give every transaction column one intentional, readable mobile size. */
  html.android-webview body.viza-redesign .transactions-table th,
  html.android-webview body.viza-redesign .transactions-table td,
  html.android-webview body.viza-redesign .transactions-table td.tx-amount {
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
  }

  /* The pagination is inside the bordered table wrapper. A real trailing
     margin lets it scroll fully above Android's fixed navigation dock rather
     than leaving Prev/Next partially covered at the document limit. */
  html.android-webview body.viza-redesign .credits-page [data-credits-panel="history"] .transactions-wrapper {
    margin-bottom: calc(
      var(--mobile-footer-height)
      + var(--mobile-page-bottom-buffer)
      + var(--mobile-web-safe-area-bottom)
    );
  }

  html.android-webview body.create-flow main.container,
  html.android-webview body.create-flow main.create-container {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  html.android-webview body.step1-page .quick-prompt-scroll,
  html.android-webview body.step1-page .music-tag-scroll {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    overflow-y: hidden;
  }

}

/* Logged-in Home's approved mobile shelves keep See all compact and arrow-free. */
@media (max-width: 959px) {
  html.android-webview body.home-logged-in .home-discovery-shelf .home-section-see-all { font-size: 13px !important; }
  html.android-webview body.home-logged-in .home-discovery-shelf .see-all-arrow { display: none !important; }
}

/* Unloaded Android video elements paint a native play placeholder. Home cards
   already have a poster/backdrop; reveal the preview only during playback. */
html.android-webview .home-logged-in .home-discovery-list .video-preview-wrapper {
  display: none;
}
html.android-webview .home-logged-in .home-discovery-list .jingle-card.is-preview-playing .video-preview-wrapper {
  display: block;
}
html.android-webview .home-logged-in .hero-video-wrapper:not(.hero-video-wrapper--ready) video {
  display: none;
}

/* Keep shared media-card letterboxes blurred on Home, Explore, galleries,
   and story chapters. The generic thumbnail-img rule otherwise wins
   position/object-fit; the native WebView also disables filters globally. */
html.android-webview body.viza-redesign .carousel-thumb > .carousel-thumb-backdrop {
  position: absolute;
  inset: -12%;
  z-index: 0;
  width: 124%;
  height: 124%;
  max-width: none;
  object-fit: cover;
  /* The native WebView injects a universal filter:none!important for speed.
     Restore only this small poster layer, not expensive full-page filters. */
  -webkit-filter: blur(8px) brightness(.58) saturate(.98) !important;
  filter: blur(8px) brightness(.58) saturate(.98) !important;
  transform: scale(1.08);
  pointer-events: none;
}

/* Safe-area offsets can leave the translated refresh badge partly on screen. */
html.android-webview .pull-to-refresh:not(.pulling):not(.refreshing) {
  visibility: hidden;
  opacity: 0;
}

/* Keep Director captions near the bottom after landscape controls disappear. */
.android-director-captions { display: none; }
@media (max-width: 959px) and (max-height: 520px) and (orientation: landscape) {
  html.android-webview body.play-page #jingleVideo.android-custom-captions::cue {
    color: transparent;
    background: transparent;
    text-shadow: none;
  }
  html.android-webview body.play-page .android-director-captions:not([hidden]) {
    display: block;
    position: absolute;
    z-index: 8;
    left: 10%;
    right: 10%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    color: #fff;
    font-size: clamp(14px, 2.5vh, 20px);
    line-height: 1.35;
    text-align: center;
    white-space: pre-line;
    text-shadow: 0 1px 3px #000, 0 0 5px #000;
    pointer-events: none;
  }
  html.android-webview body.play-page .android-director-captions.controls-visible {
    bottom: calc(56px + env(safe-area-inset-bottom));
  }
}