/**
 * Közös mobil / tablet UX a bejelentkezett (és nyilvános) app oldalakon — profil oldal mintájára.
 * Body osztályok: profile-shell, db-shell, packages-shell, calendar-shell,
 * emotion-shell, us-shell, prop-shell, va-shell (Visual + AI Coach), bt-shell, calc-shell, mw-shell-page, di-app, home-page, legal-page-body
 */

html {
  -webkit-text-size-adjust: 100%;
}

/* Bejelentkezett modulok: fő tartalom középre, max szélesség (fejléc .container.nav-wrap változatlan) */
body.profile-shell .profile-main > .container,
body.db-shell main .container,
body.packages-shell main .container,
body.packages-shell main section.container,
body.calendar-shell main .container,
body.calendar-shell main section.container,
body.emotion-shell main .container,
body.prop-shell main .container,
body.prop-shell main section.container,
body.va-shell:not(.va-print) main .container,
body.bt-shell:not(.bt-print) main .container,
body.calc-shell main .calc-page,
body.mw-shell-page main .mw-shell,
body.di-app main .container.di-container,
body.us-shell main .us-container {
  width: 100%;
  max-width: min(var(--pipsy-app-shell-content-max, 1794px), 100%);
  padding-left: max(var(--pipsy-space-gutter, 1rem), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pipsy-space-gutter, 1rem), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* Marketing comp: a <main> maga a .mw-shell — teljes szélességű háttér marad, csak gutter + safe area */
body.mw-shell-page main.mw-shell {
  width: 100%;
  max-width: none;
  padding-left: max(var(--pipsy-space-gutter, 1rem), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pipsy-space-gutter, 1rem), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* ─── Tablet + mobil (≤1024px): kompakt fejléc, fő tartalom teljes szélesség + safe area (dashboard / profil minta) ─── */
@media (max-width: 1024px) {
  body.profile-shell,
  body.db-shell,
  body.packages-shell,
  body.calendar-shell,
  body.emotion-shell,
  body.us-shell,
  body.prop-shell,
  body.va-shell,
  body.bt-shell,
  body.calc-shell,
  body.mw-shell-page,
  body.di-app,
  body.home-page,
  body.legal-page-body {
    hyphens: none;
  }

  body.profile-shell .site-header .nav-wrap,
  body.db-shell .site-header .nav-wrap,
  body.packages-shell .site-header .nav-wrap,
  body.calendar-shell .site-header .nav-wrap,
  body.emotion-shell .site-header .nav-wrap,
  body.us-shell .site-header .nav-wrap,
  body.prop-shell .site-header .nav-wrap,
  body.va-shell .site-header .nav-wrap,
  body.bt-shell .site-header .nav-wrap,
  body.calc-shell .site-header .nav-wrap,
  body.mw-shell-page .site-header .nav-wrap,
  body.di-app .site-header .nav-wrap,
  .site-header .nav-wrap,
  body.legal-page-body .site-header .nav-wrap {
    gap: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  body.profile-shell .site-header .main-nav,
  body.db-shell .site-header .main-nav,
  body.packages-shell .site-header .main-nav,
  body.calendar-shell .site-header .main-nav,
  body.emotion-shell .site-header .main-nav,
  body.us-shell .site-header .main-nav,
  body.prop-shell .site-header .main-nav,
  body.va-shell .site-header .main-nav,
  body.bt-shell .site-header .main-nav,
  body.calc-shell .site-header .main-nav,
  body.mw-shell-page .site-header .main-nav,
  body.di-app .site-header .main-nav,
  .site-header .main-nav,
  body.legal-page-body .site-header .main-nav {
    gap: 10px !important;
    row-gap: 8px !important;
  }

  body.profile-shell .site-header .main-nav > a,
  body.db-shell .site-header .main-nav > a,
  body.packages-shell .site-header .main-nav > a,
  body.calendar-shell .site-header .main-nav > a,
  body.emotion-shell .site-header .main-nav > a,
  body.us-shell .site-header .main-nav > a,
  body.prop-shell .site-header .main-nav > a,
  body.va-shell .site-header .main-nav > a,
  body.bt-shell .site-header .main-nav > a,
  body.calc-shell .site-header .main-nav > a,
  body.mw-shell-page .site-header .main-nav > a,
  body.di-app .site-header .main-nav > a,
  .site-header .main-nav > a,
  body.legal-page-body .site-header .main-nav > a {
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
  }

  body.profile-shell .site-header .nav-actions,
  body.db-shell .site-header .nav-actions,
  body.packages-shell .site-header .nav-actions,
  body.calendar-shell .site-header .nav-actions,
  body.emotion-shell .site-header .nav-actions,
  body.us-shell .site-header .nav-actions,
  body.prop-shell .site-header .nav-actions,
  body.va-shell .site-header .nav-actions,
  body.bt-shell .site-header .nav-actions,
  body.calc-shell .site-header .nav-actions,
  body.mw-shell-page .site-header .nav-actions,
  body.di-app .site-header .nav-actions,
  .site-header .nav-actions,
  body.legal-page-body .site-header .nav-actions {
    gap: 10px !important;
  }

  /* Fő tartalom .container: teljes szélesség + safe area (a header nav-wrap .container nem main-ben van) */
  body.profile-shell .profile-main > .container,
  body.db-shell main .container,
  body.packages-shell main .container,
  body.packages-shell main section.container,
  body.calendar-shell main .container,
  body.calendar-shell main section.container,
  body.emotion-shell main .container,
  body.prop-shell main .container,
  body.prop-shell main section.container,
  body.va-shell:not(.va-print) main .container,
  body.calc-shell main .calc-page,
  body.mw-shell-page main .mw-shell,
  body.di-app main .container.di-container,
  body.home-page main .container,
  body.legal-page-body main .container,
  body.us-shell main .us-container {
    width: 100%;
    max-width: 100%;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  body.mw-shell-page main.mw-shell {
    width: 100%;
    max-width: none;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  /* Egyszerű flow oldalak (email verify, reset, marketing) */
  main.verify-shell,
  main.reset-shell {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }
}

/* ─── Mobile app shell: bottom tab bar (≤699px, logged-in only) ─── */
.pipsy-mobile-app-nav {
  display: none;
}

@media (max-width: 699px) {
  .pipsy-mobile-app-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10050;
    display: none;
    align-items: flex-end;
    justify-content: space-around;
    gap: 0;
    overflow: visible;
    min-height: calc(52px + env(safe-area-inset-bottom, 0px));
    padding: 6px 4px max(6px, env(safe-area-inset-bottom, 0px));
    margin: 0;
    box-sizing: border-box;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.97), rgba(7, 11, 23, 0.99));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
  }

  body:has(.pipsy-mobile-app-nav) .pipsy-mobile-app-nav {
    display: flex;
  }

  body:has(.pipsy-mobile-app-nav) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 10px);
  }

  body:has(.pipsy-mobile-app-nav) .site-header .main-nav {
    display: none !important;
  }

  /* Modulok: alsó sáv + sheet — fejléc user menüben ne duplikáljuk */
  body:has(.pipsy-mobile-app-nav) .user-menu-modules,
  body:has(.pipsy-mobile-app-nav) #userMenuModules {
    display: none !important;
  }

  body:has(.pipsy-mobile-app-nav) .site-header .nav-wrap {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .pipsy-mobile-app-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 12px;
    text-decoration: none;
    color: rgba(148, 163, 184, 0.95);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.15;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .pipsy-mobile-app-nav__item:active {
    background: rgba(99, 102, 241, 0.12);
  }

  .pipsy-mobile-app-nav__item.is-active {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.14);
  }

  .pipsy-mobile-app-nav__item.is-active .pipsy-mobile-app-nav__icon {
    color: #a5b4fc;
  }

  .pipsy-mobile-app-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(203, 213, 245, 0.72);
  }

  .pipsy-mobile-app-nav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  /* DM bubble: üljenek a tab bar fölé */
  body:has(.pipsy-mobile-app-nav) .pipsy-dm-widget-bubble {
    bottom: calc(max(22px, env(safe-area-inset-bottom)) + 56px + 6px);
  }

  body:has(.pipsy-mobile-app-nav) #dbAiDock ~ #pipsy-dm-widget-bubble {
    bottom: calc(max(20px, env(safe-area-inset-bottom)) + 100px + 56px);
  }

  /* Fallback ha a böngésző nem támogatja :has() — a footer script html.has-mobile-app-nav-ot ad */
  html.has-mobile-app-nav body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 10px);
  }

  html.has-mobile-app-nav body .site-header .main-nav {
    display: none !important;
  }

  html.has-mobile-app-nav body .user-menu-modules,
  html.has-mobile-app-nav body #userMenuModules {
    display: none !important;
  }

  html.has-mobile-app-nav body .pipsy-mobile-app-nav {
    display: flex;
  }

  html.has-mobile-app-nav body .pipsy-dm-widget-bubble {
    bottom: calc(max(22px, env(safe-area-inset-bottom)) + 56px + 6px);
  }

  html.has-mobile-app-nav body #dbAiDock ~ #pipsy-dm-widget-bubble {
    bottom: calc(max(20px, env(safe-area-inset-bottom)) + 100px + 56px);
  }

  /* Center „Modules” dock — prémium kiemelés a tab sávban */
  .pipsy-mobile-app-nav__item--modules {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 2px 2px 6px;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .pipsy-mobile-app-nav__item--modules:active .pipsy-mobile-app-nav__modules-dock {
    transform: translateY(-1px) scale(0.97);
  }

  .pipsy-mobile-app-nav__modules-dock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: -16px auto 2px;
    border-radius: 50%;
    background: linear-gradient(145deg, #6366f1 0%, #4f46e5 48%, #4338ca 100%);
    box-shadow:
      0 10px 26px rgba(79, 70, 229, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    color: #f8fafc;
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease;
  }

  .pipsy-mobile-app-nav__icon--modules {
    color: #f8fafc;
  }

  .pipsy-mobile-app-nav__item--modules .pipsy-mobile-app-nav__label {
    color: rgba(199, 210, 254, 0.95);
  }

  /* Bottom sheet: modulok listája */
  .pipsy-mobile-modules-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10060;
    pointer-events: none;
  }

  .pipsy-mobile-modules-sheet:not([hidden]) {
    display: block;
    pointer-events: auto;
  }

  .pipsy-mobile-modules-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.58);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .pipsy-mobile-modules-sheet[data-open="1"] .pipsy-mobile-modules-sheet__backdrop {
    opacity: 1;
  }

  .pipsy-mobile-modules-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(78vh, 540px);
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(22, 28, 45, 0.99), rgba(10, 14, 26, 0.995));
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.45);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .pipsy-mobile-modules-sheet[data-open="1"] .pipsy-mobile-modules-sheet__panel {
    transform: translateY(0);
  }

  .pipsy-mobile-modules-sheet__handle-wrap {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    flex-shrink: 0;
  }

  .pipsy-mobile-modules-sheet__handle {
    width: 36px;
    height: 4px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.35);
  }

  .pipsy-mobile-modules-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 16px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .pipsy-mobile-modules-sheet__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f1f5f9;
  }

  .pipsy-mobile-modules-sheet__close {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.12);
    color: #c7d2fe;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .pipsy-mobile-modules-sheet__close:active {
    background: rgba(99, 102, 241, 0.22);
  }

  .pipsy-mobile-modules-sheet__scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .pipsy-mobile-modules-sheet__group-title {
    margin: 0 0 8px;
    padding: 0 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.82);
  }

  .pipsy-mobile-modules-sheet__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .pipsy-mobile-modules-sheet__row {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.14);
    transition:
      background 0.15s ease,
      border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .pipsy-mobile-modules-sheet__row:active {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(129, 140, 248, 0.28);
  }

}

/* ═══ Mobil modul tartalom: olvasható hero, 16px űrlap, érintés, táblák (≤699px) ═══ */
@media (max-width: 699px) {
  body.home-page {
    --pipsy-touch-target-min: 3rem;
  }

  body:is(
    .db-shell,
    .calendar-shell,
    .va-shell:not(.va-print),
    .bt-shell:not(.bt-print),
    .emotion-shell,
    .prop-shell,
    .calc-shell,
    .mw-shell-page,
    .di-app,
    .us-shell,
    .packages-shell,
    .profile-shell
  ) {
    --pipsy-touch-target-min: 3rem;
  }

  body:is(
    .db-shell,
    .calendar-shell,
    .va-shell:not(.va-print),
    .bt-shell:not(.bt-print),
    .emotion-shell,
    .prop-shell,
    .calc-shell,
    .mw-shell-page,
    .di-app,
    .us-shell,
    .packages-shell,
    .profile-shell
  )
    :is(.pipsy-hero__title:not(.pipsy-hero__title--xl), .mw-hero__title) {
    font-size: clamp(1.42rem, 5.4vw, 1.82rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
  }

  body.packages-shell .packages-hero .pipsy-hero__title--xl {
    font-size: clamp(1.62rem, 5.8vw, 2.42rem) !important;
    line-height: 1.06;
    max-width: none;
  }

  body:is(
    .db-shell,
    .calendar-shell,
    .va-shell:not(.va-print),
    .bt-shell:not(.bt-print),
    .emotion-shell,
    .prop-shell,
    .calc-shell,
    .mw-shell-page,
    .di-app,
    .us-shell,
    .packages-shell,
    .profile-shell
  )
    :is(.pipsy-hero__lead, .pipsy-hero__text, .pipsy-hero__subtitle, .mw-hero__lead, .mw-hero__greet) {
    font-size: 1rem;
    line-height: 1.62;
    max-width: none;
  }

  /* iOS: 16px+ input — elkerüli az automatikus nagyítást fókusznál */
  body:is(
    .db-shell,
    .calendar-shell,
    .va-shell:not(.va-print),
    .bt-shell:not(.bt-print),
    .emotion-shell,
    .prop-shell,
    .calc-shell,
    .mw-shell-page,
    .di-app,
    .us-shell,
    .packages-shell,
    .profile-shell
  )
    main
    :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
      [type="hidden"]
    ):not([type="image"]) {
    font-size: max(16px, 1rem);
  }

  body:is(
    .db-shell,
    .calendar-shell,
    .va-shell:not(.va-print),
    .bt-shell:not(.bt-print),
    .emotion-shell,
    .prop-shell,
    .calc-shell,
    .mw-shell-page,
    .di-app,
    .us-shell,
    .packages-shell,
    .profile-shell
  )
    main
    :is(.di-table-wrap, .bt-table-wrap, .bt-compare-table-wrap, .mw-table-wrap, .mw-table-wrap--ledger-wide) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    max-width: 100%;
  }

  body.us-shell .us-hero__title {
    font-size: clamp(1.42rem, 5.4vw, 1.85rem);
    line-height: 1.18;
  }

  body.us-shell .us-hero__lead {
    font-size: 1rem;
    line-height: 1.62;
    max-width: none;
  }

  html.has-mobile-app-nav body .site-footer .footer-legal a,
  body:has(.pipsy-mobile-app-nav) .site-footer .footer-legal a {
    min-height: var(--pipsy-touch-target-min, 3rem);
    display: inline-flex;
    align-items: center;
    padding: 6px 4px;
    box-sizing: border-box;
  }
}

/* Header: share stats card (all logged-in app pages) */
.site-header .nav-stats-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  margin-right: 0.25rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: rgba(15, 23, 42, 0.4);
  color: #e2e8f0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.site-header .nav-stats-share-btn:hover {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(129, 140, 248, 0.55);
  color: #f8fafc;
}
.site-header .nav-stats-share-btn:focus-visible {
  outline: 2px solid rgba(129, 140, 248, 0.9);
  outline-offset: 2px;
}
.site-header .nav-stats-share-btn__icon {
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .site-header .nav-stats-share-btn .nav-stats-share-btn__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .site-header .nav-stats-share-btn {
    padding: 0.45rem;
    margin-right: 0.15rem;
  }
}

/* Off-screen canvas for PNG export (footer-injected) */
.pipsy-stats-canvas-export {
  position: fixed;
  left: -99999px;
  top: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}