/* dct-inapp.css — iOS app shell (Capacitor). <html class="in-app"> is set by assets/js/player-native.js.
   Browser never matches these rules. Chrome selectors: partials/header.hbs (.dcc-hdr), footer.hbs (.dcc-ftr),
   header-mobile.hbs (#navbar-offcanvas drawer). Player: css/player.css + css/dct-chrome.css. */

/* Footer: legal/links not needed in-app (still reachable from the account drawer). */
.in-app .dcc-ftr { display: none !important; }

/* Header kept (only entry to Đăng nhập / Tài khoản) but pinned under the notch. */
.in-app .dcc-hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: #000;
}
.in-app body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* Pages without .dcc-hdr (home, /tuyen-ngon/ = dct-bare) still need notch space. */
.in-app body.dct-bare { padding-top: env(safe-area-inset-top, 0px); }

/* Account drawer: clear the notch and home indicator. */
.in-app #navbar-offcanvas.dcc-drawer {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Player bar flush to the bottom, content above the home indicator (dct-chrome.css already pads; keep it explicit). */
.in-app #global-player,
.in-app #global-player.active { bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.in-app #gp-restore-btn { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

/* No text-selection callouts / tap flash on app chrome. */
.in-app #global-player,
.in-app .gp-popup,
.in-app .dcc-hdr { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.in-app a, .in-app button { -webkit-tap-highlight-color: transparent; }

/* ══════════ App v1 (11/10/2026, app-ios/notes/api-contract-v1.md) ══════════
   Web never shows .app-only / the tab bar; the app never shows .web-only, web header/footer, prices, QR, bank transfer. */
html:not(.in-app) .app-only,
html:not(.in-app) .dct-tabbar { display: none !important; }
.in-app .web-only { display: none !important; }
/* Store wording: App Store (iOS, default) vs Google Play (html.in-app-android, set by player-native.js). */
.in-app-android .ios-only { display: none !important; }
html:not(.in-app-android) .android-only { display: none !important; }

/* Web chrome off: header (tab bar replaces it), footer. The account drawer stays in DOM (unused). */
.in-app .dcc-hdr,
.in-app .dcc-ftr { display: none !important; }
.in-app body { padding-top: env(safe-area-inset-top, 0px); }
.in-app body.dct-bare { padding-top: env(safe-area-inset-top, 0px); }

/* Web purchase surfaces: never in the app (Apple 3.1.1). JS guards too (player-premium.js). Web QR sheet removed 20/10/2026. */
.in-app [data-dct-preview-note],
.in-app .pp-open-duration,
.in-app #dcc-plan { display: none !important; }

/* Bottom tab bar */
:root { --dct-tabbar-h: 56px; }
.dct-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 10001; /* above the player bar (9999) so it is always visible; hidden while Now Playing is open */
  display: flex; align-items: stretch; justify-content: space-around;
  height: calc(var(--dct-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #000; border-top: 1px solid rgba(255,255,255,.12);
  -webkit-user-select: none; user-select: none;
}
.dct-tab {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; color: rgba(255,255,255,.55); font: inherit; font-size: 11px; font-weight: 600;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dct-tab svg { width: 22px; height: 22px; fill: currentColor; }
.dct-tab.is-active { color: #fff; }

/* Swup swap: while #swup is empty the document is shorter than the viewport. Older app builds (ios contentInset
   'always') then shift the fixed tab bar / player bar up until the new page paints. Keep the container viewport-tall. */
.in-app #swup { min-height: 100vh; }

/* Mini player + restore button + toasts sit ABOVE the tab bar; page content clears both. */
.in-app #global-player,
.in-app #global-player.active { bottom: calc(var(--dct-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important; padding-bottom: 0 !important; }
.in-app #gp-restore-btn { bottom: calc(var(--dct-tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)) !important; }
.in-app body { padding-bottom: calc(var(--dct-tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)) !important; }
.in-app body.gp-active { padding-bottom: calc(var(--dct-tabbar-h) + var(--gp-bar-h-mobile, 72px) + 16px + env(safe-area-inset-bottom, 0px)) !important; }
/* No track loaded yet: the (empty) bar is translated by its own height from bottom:56px and would sit over the tab bar → hide it. */
.in-app #global-player:not(.active) { visibility: hidden !important; pointer-events: none !important; }
.in-app #global-player.dct-no-track { display: none !important; }
/* Now Playing popup is full-screen: cover the tab bar. */
.in-app body.gp-popup-open .dct-tabbar { display: none !important; }

/* In-app IAP sheet (dct-app.js) */
.dct-iap { position: fixed; inset: 0; z-index: 10090; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.7); }
.dct-iap[hidden] { display: none; }
.dct-iap-card { width: 100%; max-width: 480px; background: #111; color: #fff; border-radius: 18px 18px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); position: relative; }
.dct-iap-card h3 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.dct-iap-card h3 em { font-style: italic; }
.dct-iap-card p { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.45; margin: 0 0 16px; }
.dct-iap-x { position: absolute; top: 12px; right: 12px; background: none; border: 0; color: rgba(255,255,255,.6); font-size: 14px; padding: 6px 8px; cursor: pointer; }
.dct-iap-pkgs { display: grid; gap: 10px; margin-bottom: 12px; }
.dct-iap-pkg { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: #1b1b1b; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.dct-iap-pkg.is-best { border-color: #fff; }
.dct-iap-pkg small { display: block; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.6); margin-top: 2px; text-align: left; }
.dct-iap-pkg[disabled] { opacity: .5; }
.dct-iap-msg { min-height: 18px; font-size: 13px; color: rgba(255,255,255,.75); margin: 4px 0 8px; }
.dct-iap-msg.is-err { color: #ff7a7a; }
.dct-iap-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.dct-iap-foot button { background: none; border: 0; color: rgba(255,255,255,.75); text-decoration: underline; font: inherit; cursor: pointer; padding: 6px 0; }
.dct-sandbox { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 2px 6px; border-radius: 4px; background: #f5c400; color: #000; vertical-align: middle; margin-left: 6px; }

/* Player "⋯" (default.hbs [data-app-more], next to ♥) + its sheet (reuses player.css §3 action sheet). dct-app.js wires both. */
.gp-popup-more {
  flex-shrink: 0;
  width: 40px; height: 44px; margin-right: -9px;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--dct-muted);
  -webkit-tap-highlight-color: transparent;
}
.gp-popup-more:active { transform: scale(0.9); }
.gp-popup-more svg { width: 24px; height: 24px; fill: currentColor; }
.gp-popup-info .gp-popup-like { margin-right: 0; } /* "⋯" (web + app) takes the edge bleed */
.gp-more-sheet a.gp-as-option { text-decoration: none; }
.gp-more-overlay { position: absolute; } /* inside .gp-popup (transformed): cover the Now Playing screen */
.gp-more-sheet .gp-as-option { color: var(--dct-fg); }
.gp-more-sheet .gp-as-option[disabled] { color: var(--dct-muted); cursor: default; }
.gp-more-sheet .gp-as-option[hidden] { display: none; }
.gp-more-sheet .gp-more-dl-btn::before { /* paintDl() rewrites textContent, so the icon is a mask */
  content: ""; width: 22px; height: 22px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gp-more-sheet .gp-more-dl-rm { padding-left: calc(var(--s-4, 16px) + 22px + var(--s-3, 12px)); color: var(--dct-muted); font-size: 14px; }

/* Guest mode: no login gate; guest home = hero (title, subtitle, Đăng nhập) + mo-mai card + shelf, so the fold is not full-height */
.in-app #dct-optin .dct-fold { min-height: 0; }

/* Player: share lives in the "⋯" sheet (web + app, 12/10/2026); hide the top-right icon. visibility (not display) keeps the
   header's space-between layout so "Đang nghe" stays centered */
.gp-popup-share { visibility: hidden !important; pointer-events: none; }