html.pwa-standalone,
html.pwa-standalone body {
  height: 100%;
}

html.pwa-standalone body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

html.pwa-standalone {
  --hdr-pad-top: calc(var(--safe-top) + 10px);
}

html.pwa-standalone .bottom-nav {
  padding-bottom: 8px;
}

@media (max-width: 480px) {
  .bottom-nav,
  .app-shell .bottom-nav {
    left: 6px;
    right: 6px;
    bottom: calc(6px + var(--safe-bottom));
    min-height: 64px;
    padding: 6px;
    border-radius: 24px;
    align-items: stretch;
  }

  .bn {
    min-width: 0;
    height: 52px;
    padding: 4px 2px;
    gap: 3px;
  }

  .bn span {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.05;
    text-align: center;
  }
}

@media (max-width: 480px) {
  html.pwa-standalone .bottom-nav,
  html.pwa-standalone .app-shell .bottom-nav {
    padding-bottom: 6px;
  }
}

/* Finance: scoped mobile fix without breaking section headers */
@media (max-width: 480px) {
  .view[data-view="finance"] .fnGoalsHead,
  .view[data-view="finance"] .fnTxHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .view[data-view="finance"] .fnGoalsTitle,
  .view[data-view="finance"] .fnTxTitle {
    min-width: 0;
    flex: 1 1 auto;
  }

  .view[data-view="finance"] .fnGoalsHead > .ppAddBtn,
  .view[data-view="finance"] .fnTxHead > .ppAddBtn {
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
    padding: 0 12px;
    gap: 8px;
    font-size: 13px;
  }

  .view[data-view="finance"] .fnGoalsHead > .ppAddBtn b,
  .view[data-view="finance"] .fnTxHead > .ppAddBtn b {
    display: inline;
    line-height: 1;
  }

  .view[data-view="finance"] .fnGoalsHead > .ppAddBtn .plus,
  .view[data-view="finance"] .fnTxHead > .ppAddBtn .plus {
    width: 18px;
    height: 18px;
  }

  .view[data-view="finance"] .fnTx,
  .view[data-view="finance"] .fnTxWrap,
  .view[data-view="finance"] .fnTxList,
  .view[data-view="finance"] .fnTxRow,
  .view[data-view="finance"] .fnTxBody,
  .view[data-view="finance"] .fnTxMeta {
    min-width: 0;
    max-width: 100%;
  }

  .view[data-view="finance"] .fnTxRow {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) max-content;
    align-items: start;
    gap: 8px 10px;
    padding: 12px 2px;
  }

  .view[data-view="finance"] .fnTxIc {
    width: 36px;
    height: 36px;
  }

  .view[data-view="finance"] .fnTxBody {
    min-width: 0;
  }

  .view[data-view="finance"] .fnTxName,
  .view[data-view="finance"] .fnTxCat {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.22;
  }

  .view[data-view="finance"] .fnTxCat {
    margin-top: 4px;
  }

  .view[data-view="finance"] .fnTxMeta {
    min-width: max-content;
    text-align: right;
    justify-self: end;
  }

  .view[data-view="finance"] .fnTxAmt {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.15;
    font-size: 15px;
  }

  .view[data-view="finance"] .fnTxTime {
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.2;
  }
}

@media (max-width: 390px) {
  .view[data-view="finance"] .fnGoalsHead > .ppAddBtn,
  .view[data-view="finance"] .fnTxHead > .ppAddBtn {
    padding: 0 10px;
    gap: 6px;
    font-size: 12px;
  }

  .view[data-view="finance"] .fnGoalsHead > .ppAddBtn .plus,
  .view[data-view="finance"] .fnTxHead > .ppAddBtn .plus {
    width: 16px;
    height: 16px;
  }

  .view[data-view="finance"] .fnTxRow {
    grid-template-columns: 36px minmax(0, 1fr) max-content;
    gap: 8px;
  }
}
/* Notifications: isolated mobile adaptation */
@media (max-width: 560px) {
  #view-notifications #notifications-root,
  #view-notifications {
    min-width: 0;
  }

  #view-notifications #notifications-root .viewShell {
    overflow-x: clip;
  }

  #view-notifications #notifications-root .tabIntro {
    gap: 8px;
    padding-inline: 0;
  }

  #view-notifications #notifications-root .tabIntro__title {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  #view-notifications #notifications-root .tabIntro__desc {
    max-width: 100%;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  #view-notifications #notifications-root .notifToolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  #view-notifications #notifications-root .notifToolbar__side,
  #view-notifications #notifications-root .tabsViewport,
  #view-notifications #notifications-root #notifFilters {
    min-width: 0;
    width: 100%;
  }

  #view-notifications #notifications-root #notifFilters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #view-notifications #notifications-root #notifFilters .tabChip {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding-inline: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #view-notifications #notifications-root #notifResetViewed {
    width: 100%;
    justify-content: center;
  }

  #view-notifications #notifications-root .homeAlerts {
    gap: 10px;
    margin-bottom: 16px;
  }

  #view-notifications #notifications-root .notifCard,
  #view-notifications #notifications-root .homeAlert {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #view-notifications #notifications-root .notifCard__head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 0;
    width: 100%;
  }

  #view-notifications #notifications-root .notifCard__body,
  #view-notifications #notifications-root .homeAlert__body {
    min-width: 0;
    width: 100%;
  }

  #view-notifications #notifications-root .homeAlert__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: start;
  }

  #view-notifications #notifications-root .homeAlert__title,
  #view-notifications #notifications-root .homeAlert__sub,
  #view-notifications #notifications-root .notifCard__hint,
  #view-notifications #notifications-root .notifCard__badge,
  #view-notifications #notifications-root .emptyState__title,
  #view-notifications #notifications-root .emptyState__desc {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #view-notifications #notifications-root .homeAlert__val {
    display: block;
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  #view-notifications #notifications-root .notifCard__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 6px;
  }

  #view-notifications #notifications-root .notifCard__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    justify-content: stretch;
  }

  #view-notifications #notifications-root .notifCard__actions .ppBtn {
    min-width: 0;
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
  }
}

@media (max-width: 390px) {
  #view-notifications #notifications-root .notifCard,
  #view-notifications #notifications-root .homeAlert {
    padding: 10px;
  }

  #view-notifications #notifications-root #notifFilters,
  #view-notifications #notifications-root .notifCard__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-notifications #notifications-root .homeAlert__icon {
    width: 32px;
    height: 32px;
    border-radius: 11px;
  }
}

/* Mobile: remove artificial vertical stretch that creates empty scroll area */
@media (max-width: 980px) {
  .app-main,
  .view,
  :where(
      #home-root,
      #notifications-root,
      #tasks-root,
      #goals-root,
      #ideas-root,
      #finance-root,
      #achievementsRoot
    )
    > .viewShell,
  :where(
    .view[data-view="home"],
    .view[data-view="notifications"],
    .view[data-view="tasks"],
    .view[data-view="goals"],
    .view[data-view="ideas"],
    .view[data-view="finance"],
    .view[data-view="achievements"]
  ),
  .viewShell {
    min-height: auto;
  }

  .viewShell {
    grid-template-rows: auto auto auto auto;
  }

  .viewShell__content {
    min-height: auto;
    flex: 0 0 auto;
  }
}