/**
 * Mobile / tablet overrides — MUST load AFTER page CSS (coins/users/messages).
 * Desktop base rules stay in ome.css / page CSS; this file only adds max-width media.
 */

/* —— Phones & small tablets —— */
@media (max-width: 820px) {
  /*
   * Unlock vertical page scroll.
   * Desktop chat uses height:100% + overflow:hidden; that must NOT apply to
   * info/landing/profile/coins pages on phones.
   */
  html,
  body {
    height: auto !important;
    max-height: none !important;
    min-height: 100%;
    max-width: 100vw;
    overflow-x: clip;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
  }

  /* Chat app keeps a locked viewport (no document scroll) */
  html:has(.ome-app),
  html:has(.ome-app) body {
    height: 100% !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  :root {
    --site-content-width: calc(100% - 1rem) !important;
  }

  /* —— Topbar —— */
  .ome-topbar,
  .ome-topbar--light {
    min-height: 52px !important;
    padding-top: env(safe-area-inset-top);
  }
  .topbar-inner {
    width: calc(100% - 0.85rem) !important;
    min-height: 52px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    grid-template-columns: none !important;
  }
  .topbar-ad { display: none !important; }
  .topbar-burger { display: inline-flex !important; }
  .topbar-nav {
    display: none;
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    width: 100% !important;
    max-height: min(70dvh, 480px);
    overflow-y: auto;
    background: #fff;
    z-index: 60;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    padding: 0.35rem;
  }
  .topbar-nav.is-open { display: flex !important; }
  .topbar-tab {
    min-height: 0 !important;
    width: 100% !important;
    padding: 0.8rem 0.95rem !important;
    justify-content: space-between;
  }
  .topbar-end { margin-left: auto; overflow: visible; }
  .topbar-right,
  .topbar-notify {
    overflow: visible !important;
  }

  /* Bell is only ~40px wide; do not size the panel from that parent. */
  .topbar-notify-panel {
    position: fixed !important;
    top: calc(52px + env(safe-area-inset-top, 0px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    max-height: min(72dvh, 560px);
    z-index: 200 !important;
    display: flex;
    flex-direction: column;
  }
  .topbar-notify-panel[hidden] { display: none !important; }
  .topbar-notify-list {
    max-height: none;
    min-height: 0;
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .topbar-notify-item {
    grid-template-columns: minmax(0, 1fr) 44px;
  }
  .topbar-notify-main {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 0.85rem 0.4rem 0.85rem 1rem;
  }
  .topbar-notify-del {
    min-width: 44px;
    font-size: 1.5rem;
  }
  .topbar-notify-viewall {
    min-height: 48px;
  }

  /* —— Landing —— */
  .lp-body {
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: auto !important;
  }
  .auth-gate {
    overflow: visible !important;
    min-height: calc(100dvh - 56px);
    height: auto !important;
  }
  .lp-site-block,
  .lp-main {
    overflow-x: clip;
    overflow-y: visible !important;
    max-width: 100%;
    height: auto !important;
  }
  .lp-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 0.75rem 0.85rem 1.5rem !important;
  }
  .lp-phone { order: -1; }
  .lp-phone-frame { width: min(220px, 64vw) !important; }
  .lp-cta-row {
    grid-template-columns: 1fr !important;
  }
  .lp-cta-btn { width: 100%; text-align: center; box-sizing: border-box; }
  .lp-earn-grid {
    grid-template-columns: 1fr !important;
  }
  .lp-people-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }
  .lp-links { display: none !important; }
  .lp-hero .lp-hero-title,
  .lp-hero h1 {
    font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
  }
  .lp-main { padding: 1rem 0.85rem 2rem !important; }
  .lp-earn { padding: 1rem 0.9rem 1.15rem !important; }

  /* —— Auth —— */
  .auth-online,
  .auth-gate #onlineCount {
    display: none !important;
  }
  .auth-gate {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: max(0.75rem, env(safe-area-inset-top)) 0.65rem max(3rem, calc(env(safe-area-inset-bottom) + 2.25rem)) !important;
  }
  .auth-modal {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: calc(100vw - 1.1rem) !important;
    min-height: auto !important;
    max-height: calc(100dvh - 4.25rem);
    overflow: auto;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
  }
  .auth-hero { min-height: 140px !important; }
  .auth-fake-ui { display: none !important; }
  .oauth-row { grid-template-columns: 1fr !important; }
  .field input,
  .field select,
  .auth-modal input,
  .auth-modal select {
    font-size: 16px !important;
    min-height: 46px;
  }

  /* —— Info / shared shells —— */
  .info-app,
  .info-main,
  .info-card,
  .profile-shell,
  .users-shell,
  .users-main,
  .coins-app,
  .coins-page,
  .messages-shell,
  .messages-main,
  .vip-page,
  .zodiac-card-wrap,
  .zodiac-detail {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .info-body,
  .coins-body,
  .users-body,
  .profile-body,
  .messages-body {
    height: auto !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }
  .info-app {
    height: auto !important;
    min-height: 100dvh;
    grid-template-rows: auto auto !important;
    overflow: visible !important;
  }
  .info-main {
    padding: 0.75rem 0.55rem 1.35rem !important;
    place-items: start stretch !important;
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .info-card {
    padding: 1.05rem 0.95rem !important;
    border-radius: 14px !important;
    margin-inline: 0;
    color: #222 !important;
    background-color: #fff !important;
    -webkit-text-fill-color: currentColor;
  }
  .info-card > .page-hero,
  .ads-card > .page-hero,
  .contact-card > .page-hero {
    color: #222 !important;
    -webkit-text-fill-color: currentColor;
  }
  .info-card p,
  .info-card li,
  .info-card h1,
  .info-card h2,
  .info-card h3,
  .info-card label,
  .info-card span {
    -webkit-text-fill-color: currentColor;
  }
  .page-hero,
  .rules-hero,
  .faq-hero-title {
    padding: 0.65rem 0.25rem 0.85rem !important;
    margin-bottom: 1rem !important;
  }
  .page-hero-word,
  .rules-hero-word,
  .faq-hero-word,
  .info-card p.page-hero-word {
    font-size: clamp(2rem, 12vw, 2.75rem) !important;
    line-height: 1 !important;
    color: #ff4b8b !important;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(120deg, #ff4b8b 0%, #9b5cff 55%, #5b7cfa 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }
  .page-hero h1,
  .rules-hero h1,
  .faq-hero-title h1 {
    font-size: clamp(1.2rem, 5vw, 1.45rem) !important;
    color: #161823 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .page-hero-lead {
    color: #555 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .contact-layout,
  .ads-layout,
  .rules-grid {
    grid-template-columns: 1fr !important;
  }
  .ads-layout,
  .contact-layout {
    min-height: 0 !important;
  }

  /* Dark panels: solid bg + light text (no invisible light-on-white) */
  .ads-aside,
  .contact-aside {
    background-color: #121014 !important;
    background-image:
      radial-gradient(circle at 20% 0%, rgba(254, 44, 85, 0.12), transparent 50%),
      linear-gradient(165deg, #1c1a1f 0%, #121014 100%) !important;
    color: #f2efe8 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .ads-aside p,
  .ads-aside li,
  .ads-aside h3,
  .ads-aside .info-list,
  .ads-aside .ads-steps,
  .ads-aside .ads-slots,
  .contact-aside p,
  .contact-aside li,
  .contact-aside h1,
  .contact-aside .contact-emails {
    color: rgba(242, 239, 232, 0.92) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .ads-aside-title,
  .ads-aside-note,
  .ads-login-note,
  .ads-kicker {
    -webkit-text-fill-color: currentColor !important;
  }
  .ads-form,
  .contact-form {
    background: #fff !important;
    color: #161823 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .ads-form h2,
  .ads-form-lead,
  .ads-field,
  .ads-hint,
  .ads-price,
  .contact-form h2,
  .contact-form-lead,
  .contact-field {
    color: inherit;
    -webkit-text-fill-color: currentColor !important;
  }
  .ads-form-lead,
  .contact-form-lead,
  .ads-field,
  .contact-field,
  .ads-hint {
    color: #6a6d75 !important;
  }
  .ads-form h2,
  .contact-form h2 {
    color: #161823 !important;
  }
  .rules-block,
  .rules-list,
  .info-terms,
  .info-terms p,
  .info-terms li,
  .faq-item,
  .faq-item p,
  .faq-item summary {
    color: #222 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .profile-ad-link,
  .profile-ad-img,
  .topbar-ad-link {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* —— Profile —— */
  .profile-layout {
    grid-template-columns: 1fr !important;
  }
  .profile-aside { position: static !important; }
  .profile-hero-content {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .profile-grid,
  .profile-inline,
  .profile-two,
  .profile-custom-row {
    grid-template-columns: 1fr !important;
  }
  .profile-btn--gold {
    width: 100%;
    justify-self: stretch;
  }

  /* —— Users / VIP / public profile —— */
  .users-shell {
    padding-inline: 0.15rem;
  }
  .users-hero {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
  }
  .users-stats {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  .users-stat { min-width: 0 !important; }
  .users-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.55rem !important;
  }
  .users-search,
  .users-select,
  .users-age-range,
  .users-filter-btn {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .users-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }
  .vip-layout {
    grid-template-columns: 1fr !important;
  }
  .sub-plans {
    grid-template-columns: 1fr !important;
  }
  .vip-buy-btn,
  .vip-actions {
    width: 100%;
  }
  .vip-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .public-photos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* —— Coins —— */
  .coins-app {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0.55rem 1.75rem !important;
  }
  .coins-page {
    margin-top: 0.55rem;
    padding: 0.95rem 0.85rem 1.1rem !important;
    border-radius: 12px !important;
  }
  .coins-userbar,
  .coins-checkout-row,
  .coins-layout,
  .coins-grid {
    grid-template-columns: 1fr !important;
  }
  .coins-packs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .coins-recharge {
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
  }
  .coins-pay-btn,
  .coins-recharge button {
    width: 100%;
    min-height: 46px;
  }

  /* —— Messages —— */
  .messages-shell {
    padding: 0 0.55rem 1rem !important;
  }
  .messages-layout {
    grid-template-columns: 1fr !important;
    min-height: min(78dvh, 680px) !important;
    height: calc(100dvh - 110px) !important;
    border-radius: 14px !important;
  }
  .messages-layout.has-thread .messages-threads { display: none !important; }
  .messages-layout:not(.has-thread) .messages-convo { display: none !important; }
  .messages-chat-back { display: grid !important; }
  .messages-chat-compose input,
  .messages-chat-compose textarea {
    font-size: 16px !important;
  }

  /* —— Chat video —— */
  .ome-videos {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .ome-bottom {
    grid-template-columns: 1fr !important;
  }
  .ome-app.is-matched .ome-videos {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .ome-app.is-matched #localTile {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    z-index: auto !important;
  }
  .ome-app.is-matched .ome-chat,
  .ome-app.is-matched .chat-form {
    display: flex !important;
  }

  /* —— Modals —— */
  .gifts-modal,
  .wallet-modal,
  .report-modal {
    padding: 0 !important;
    align-items: end !important;
  }
  .gifts-sheet,
  .wallet-card,
  .report-card {
    width: 100% !important;
    max-width: none !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: min(90dvh, 720px);
    overflow: auto;
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
  }

  /* —— Zodiac —— */
  .zodiac-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
}

/* —— Small phones —— */
@media (max-width: 480px) {
  :root {
    --site-content-width: calc(100% - 0.7rem) !important;
  }
  .info-main { padding: 0.55rem 0.4rem 1.15rem !important; }
  .info-card { padding: 0.9rem 0.8rem !important; }
  .users-grid { gap: 0.45rem !important; }
  .coins-packs { grid-template-columns: 1fr !important; }
  .lp-people-row { gap: 0.45rem !important; }
  .auth-hero { min-height: 110px !important; }
  .page-hero-word,
  .rules-hero-word,
  .faq-hero-word {
    font-size: clamp(1.75rem, 14vw, 2.35rem) !important;
  }
  .gifts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .ctl-gifts .ctl-label { font-size: 0.58rem; }
}

@media (max-width: 360px) {
  .ome-controls {
    gap: 3px;
    padding: 4px 4px max(6px, env(safe-area-inset-bottom));
  }
  .ctl-btn {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }
  .users-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* —— Phone landscape —— */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .ome-app.is-matched .ome-videos {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
  }
  .ctl-label { display: none; }
  .ctl-btn {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }
}

/* —— Touch —— */
@media (hover: none) and (pointer: coarse) {
  .topbar-tab,
  .faq-filter,
  .gift-item,
  .ctl-btn,
  .users-filter-btn,
  .lp-cta-btn {
    touch-action: manipulation;
  }
  .chat-form input,
  .messages-chat-compose input,
  .messages-chat-compose textarea,
  .users-search input,
  .field input {
    font-size: 16px !important;
  }
}