/* ── BLOCK 1 ── */
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
    }
    input, textarea, [contenteditable] {
      user-select: text;
      -webkit-user-select: text;
    }

    body {
      font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary-mid) 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: max(20px, calc(50vh - 300px)) 20px 80px;
      color: white;
    }
    body.is-new-user {
      justify-content: center;
      padding: 20px;
    }

    .container {
      max-width: 800px;
      width: 100%;
      text-align: center;
    }

    /* Returning-user home (onboarding complete): anchor the logo near the top
       and vertically centre the action buttons in the space between the logo
       and the bottom nav (FAB dock). The auto margins on .buttons absorb the
       free space equally above and below, so the credit footer settles just
       above the nav bar. Scoped with :not(.is-new-user) so the steps 0-3
       onboarding layout is left untouched.

       At phone / native widths the #iphone-frame wrappers are plain blocks,
       so the container can't flex-grow off the body — it's given a min-height
       that fills the viewport minus the top inset and the ~104px reserved for
       the FAB dock. The ≥920px iPad frame puts the container inside a flex
       #scroll-view, so there it flex-grows instead (see the media query). */
    body:not(.is-new-user) {
      padding-top: max(24px, env(safe-area-inset-top, 0px));
    }
    body:not(.is-new-user) .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: calc(100dvh - max(24px, env(safe-area-inset-top, 0px)) - 104px);
    }
    body:not(.is-new-user) .buttons {
      margin-top: auto;
      margin-bottom: auto;
    }
    /* Logo: vertically centred between the page top and the first action
       button rather than pinned to the top — its auto top margin shares the
       container's free space equally with the .buttons auto margins. Keeps
       the default home (just the Mood Journal button; Survival Kit and
       Bipolar Anonymous are opt-in) looking balanced, and degrades to the
       old top-anchored layout when vertical space runs out (auto margins
       collapse to 0). */
    body:not(.is-new-user) .logo-bounce-wrapper {
      margin-top: auto;
    }
    /* iPad frame: #scroll-view is a flex column, so let the container grow into
       it rather than forcing a viewport-height min-height (which would overflow
       the ~96dvh device frame). */
    @media (min-width: 920px) {
      body:not(.is-new-user) .container {
        min-height: 0;
        flex: 1;
      }
    }

    .logo-bounce-wrapper {
      display: inline-block;
      animation: logoBounce 2.4s ease-in-out infinite;
      margin-bottom: 6px;
    }

    .logo-img {
      max-width: 160px;
      border-radius: 18px;
      padding: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      cursor: pointer;
      touch-action: manipulation;
      display: block;
      -webkit-touch-callout: none;
      -webkit-user-drag: none;
    }

    @keyframes logoBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    @keyframes hintFade {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }
    @keyframes bbHintNudge { 0%,100%{transform:scale(1)} 25%{transform:scale(1.18) rotate(-4deg)} 75%{transform:scale(1.12) rotate(3deg)} }

    /* Post-sign-up soft hint on the profile popup's Survival / Anonymous
       customise toggles: gentle ring pulse + a small NEW pill. Applied by
       _renderHomeBtnToggles() while bbCustomiseNewPending is set. */
    @keyframes bbNewPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255,149,0,0.45); }
      50%      { box-shadow: 0 0 0 7px rgba(255,149,0,0); }
    }
    .bb-new-toggle {
      animation: bbNewPulse 1.8s ease-in-out infinite;
      border-color: var(--brand-primary) !important;
    }
    .bb-new-pill {
      position: absolute;
      top: -8px;
      right: -7px;
      background: var(--brand-primary);
      color: white;
      font-size: 0.58em;
      font-weight: 800;
      letter-spacing: 0.05em;
      padding: 2px 6px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      pointer-events: none;
    }

    @keyframes fabHintSlide {
      0%, 100% { transform: translateX(0); opacity: 0.85; }
      50% { transform: translateX(5px); opacity: 1; }
    }
    @keyframes signinHintPulse {
      0%, 100% { opacity: 0.75; }
      50% { opacity: 1; }
    }
    .fab-hint {
      position: fixed;
      bottom: 38px;
      right: calc(10% + 22px);
      display: flex;
      align-items: center;
      gap: 6px;
      z-index: 55;
      pointer-events: none;
      animation: fabHintSlide 1.6s ease-in-out infinite;
    }
    @media (min-width: 520px) {
      /* feedback hint: sits left of feedback FAB (position 5) */
      .fab-hint:not(#waFabLabel) { right: calc(50% - 170px); }
      /* Chat hint (unused but kept): sits right of chat FAB (position 1) */
      #waFabLabel { left: calc(50% - 214px + 44px); }
    }
    @media (min-width: 768px) {
      .fab-hint:not(#waFabLabel) { right: calc(50% - 170px); }
      #waFabLabel { left: calc(50% - 170px); }
    }
    .fab-hint-label {
      background: rgba(0,0,0,0.58);
      color: white;
      font-size: 0.8em;
      font-weight: 700;
      padding: 5px 11px;
      border-radius: 20px;
      white-space: nowrap;
    }
    .fab-hint-arrow {
      font-size: 1.1em;
      line-height: 1;
      color: white;
      text-shadow: 0 1px 3px rgba(0,0,0,0.35);
    }

    .logo-hint {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      margin-bottom: 36px;
      pointer-events: none;
      animation: hintFade 2.4s ease-in-out infinite;
    }

    .logo-hint span {
      font-size: 0.78em;
      font-weight: 700;
      font-style: italic;
      color: #fff;
      white-space: nowrap;
      font-family: 'Georgia', serif;
      letter-spacing: 0.01em;
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    .logo {
      font-size: 6em;
      margin-bottom: 20px;
      animation: bounce 2s ease-in-out 3;
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    h1 {
      font-size: 3.5em;
      margin-bottom: 15px;
      text-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.18);
    }

    .tagline {
      font-size: 1.4em;
      margin-bottom: 50px;
      font-weight: 500;
      text-shadow: 0 1px 4px rgba(0,0,0,0.35);
    }

    .buttons {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 15px;
      width: fit-content;
      margin: 20px auto 0;
    }

    .btn-container {
      display: block;
      padding: 10px;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 20px 56px 20px 30px;
      font-size: 1.15em;
      font-weight: 600;
      text-decoration: none;
      border-radius: 15px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
      white-space: nowrap;
      width: 100%;
      box-sizing: border-box;
      text-shadow: 0 1px 3px rgba(0,0,0,0.22);
    }

    .btn-journal {
      background: rgba(255, 255, 255, 0.28);
      color: white;
      border: 3px solid rgba(255, 255, 255, 0.62);
    }

    .btn-survival {
      background: rgba(255, 255, 255, 0.28);
      color: white;
      border: 3px solid rgba(255, 255, 255, 0.62);
    }

    .btn-anonymous {
      background: rgba(255, 255, 255, 0.28);
      color: white;
      border: 3px solid rgba(255, 255, 255, 0.62);
      transition: opacity 0.2s, border-color 0.2s, background 0.2s;
    }
    .btn-anonymous.locked {
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.85);
      border: 3px dashed rgba(255, 255, 255, 0.55);
      box-shadow: none;
      cursor: default;
      pointer-events: none;
    }
    .btn-subnote {
      display: none;
      text-align: center;
      font-size: 0.78em;
      font-weight: 600;
      color: #fff;
      margin-top: 4px;
      letter-spacing: 0.1px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
      /* Smooth unblur when the skeleton class is removed (~350ms). Combined
         with the 450ms minimum-visible delay enforced in js/index.js this
         gives a consistent ~800ms "loading" feel — long enough to register
         visually even when data was already cached in localStorage and
         resolved instantly. */
      transition: filter 0.35s ease, opacity 0.35s ease;
    }
    /* Skeleton placeholder — reserves vertical space and blurs the
       placeholder text so layout doesn't jump when js/index.js swaps in
       real values (streak, sections, new messages). Added by index.html
       for users who have account context; removed inline for fresh
       devices, and removed by js/index.js once each badge is populated
       (or explicitly hidden when there's no data to show). */
    .btn-subnote.bb-skeleton {
      display: block;
      min-height: 1.1em;
      /* blur(4px) keeps the rough text shape visible (so users see a
         "blurred number / streak / message count" in the right place)
         while the longer min-display time + slower transition in
         js/index.js make the loading state clearly perceptible. */
      filter: blur(4px);
      opacity: 0.5;
      pointer-events: none;
      user-select: none;
    }
    /* "Show stats" toggle off (Profile → Customise) — hide all stat badges
       (streaks, survival progress, anon messages) under the home buttons.
       !important overrides the inline display set by _revealBadge(). */
    .buttons.bb-hide-stats .btn-subnote { display: none !important; }
    .btn-subnote-muted {
      display: block;
      text-align: center;
      font-size: 0.78em;
      font-weight: 600;
      color: #fff;
      margin-top: 4px;
      letter-spacing: 0.1px;
      font-style: italic;
      text-shadow: 0 1px 3px rgba(0,0,0,0.35);
    }

    .btn.btn-whatsapp {
      background: rgba(37, 211, 102, 0.2);
      max-width: 250px;
      color: white;
      border: 3px solid rgba(37, 211, 102, 0.3);
      padding: 14px 28px;
      font-size: 1em;
      min-width: 0;
      gap: 8px;
      border-radius: 15px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    @media (hover: hover) and (pointer: fine) {
      .btn.btn-whatsapp:hover {
        background: rgba(37, 211, 102, 0.39);
        color: white;
        border-color: #25D366;
        box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
      }
    }
    /* Hidden on web; shown only in native app via JS below */
    .btn.btn-whatsapp { display: none !important; }
    .is-native .btn.btn-whatsapp { display: flex !important; }

    .icon {
      font-size: 1.5em;
    }

    .features { display: none !important; }

    .footer-link {
      display: inline-block;
      margin-top: 20px;
      margin-bottom: 10px;
      font-size: 0.9em;
      color: rgba(255, 255, 255, 0.9);
      text-decoration: none;
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.22);
      border-radius: 20px;
      transition: all 0.3s ease;
    }

    @media (hover: hover) and (pointer: fine) {
      .footer-link:hover {
        background: rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }
    }

    @media (max-width: 768px) {
      h1 {
        font-size: 2.5em;
      }

      .tagline {
        font-size: 1.1em;
      }

      .logo-img {
        width: 180px;      }

      .logo {
        font-size: 4em;
      }

      .buttons {
        margin-bottom: 40px;
      }

      .btn-container {
        padding: 5px;
      }
    }

    /* ── Short screens (iPhone 15 Pro and similar) — tighten spacing to avoid scroll ── */
    @media (max-height: 860px) {
      body {
        padding-top: max(12px, calc(50vh - 340px));
        padding-bottom: 60px;
      }
      .logo-img {
        max-width: 140px;
        width: 140px;
      }
      .logo-bounce-wrapper {
        margin-bottom: 8px;
      }
      .logo-hint {
        margin-bottom: 20px;
      }
      h1 {
        font-size: 2.2em;
        margin-bottom: 8px;
      }
      .tagline {
        font-size: 1em;
        margin-bottom: 24px;
      }
      .buttons {
        gap: 12px;
        margin-top: 12px;
        margin-bottom: 20px;
      }
      .btn {
        padding: 14px 48px 14px 24px;
        font-size: 1.05em;
      }
      .btn-container {
        padding: 3px 5px;
      }
    }

    /* ── Prevent double-tap zoom on iOS ── */
    * { touch-action: manipulation; }

    /* Force light mode — prevent OS dark mode from affecting colours */
    :root { color-scheme: light; }
    html { background-color: var(--brand-primary-dark); }

    /* ── Auth / Settings Modal ── */
    .overlay-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 1000;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    .overlay-modal.active { display: flex; }
    .modal-box {
      background: white;
      border-radius: 20px;
      padding: 28px;
      max-width: 400px;
      width: 100%;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    .modal-box h3 { margin-bottom: 18px; font-size: 1.3em; color: #2d2d2d; }
    .modal-input {
      width: 100%;
      padding: 12px 14px;
      border: 2px solid #e9ecef;
      border-radius: 10px;
      font-size: 1em;
      margin-bottom: 12px;
      box-sizing: border-box;
      color: #2d2d2d;
    }
    .modal-input:focus { outline: none; border-color: var(--brand-primary); }
    .modal-btn {
      width: 100%;
      padding: 13px;
      border: none;
      border-radius: 10px;
      font-size: 1em;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 10px;
      transition: all 0.2s;
    }
    .modal-btn-primary { background: var(--brand-primary); color: white; }
    .modal-btn-secondary { background: #f8f9fa; color: #495057; border: 2px solid #e9ecef; }
    @media (hover: hover) and (pointer: fine) {
      .modal-btn-primary:hover { background: var(--brand-primary-dark); }
      .modal-btn-secondary:hover { background: #e9ecef; }
    }
    .modal-toggle { text-align: center; font-size: 0.9em; color: #495057; margin-top: 4px; }
    .modal-toggle span { color: var(--brand-primary); cursor: pointer; font-weight: 600; }
    .modal-error { color: #c92a2a; font-size: 0.9em; margin-bottom: 10px; display: none; }

    /* ── Entry status tick inside journal button ── */
    .entry-tick {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px dashed rgba(255,255,255,0.55);
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.55);
      flex-shrink: 0;
      pointer-events: none;
      transition: border 0.25s ease, background 0.25s ease, color 0.25s ease;
    }
    .entry-tick[data-done="true"] {
      border: 2px solid white;
      background: white;
      color: var(--brand-primary);
    }
    /* Dotted placeholder for hidden FAB slot */

    @keyframes wnSlideUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes waHintSlide {
      0%, 100% { transform: translateX(0); opacity: 0.85; }
      50% { transform: translateX(-5px); opacity: 1; }
    }

    /* WhatsApp confirmation modal */
    .wa-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .wa-modal.active { display: flex; }
    .wa-modal-box {
      background: white;
      border-radius: 20px;
      padding: 28px 24px;
      max-width: 340px;
      width: 100%;
      text-align: center;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }


    /* ─── iPad simulator (≥ 920px) ─── */
    @media (min-width: 920px) {
      body {
        background: #eaeaea !important;
        padding: 0 !important;
        min-height: 100dvh;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: auto;
      }
      #iphone-frame {
        width: 768px;
        height: min(1024px, 96dvh);
        background: linear-gradient(160deg, #2a2a2a 0%, #111 60%, #1a1a1a 100%);
        border-radius: 40px;
        padding: 20px 16px 28px;
        position: relative;
        flex-shrink: 0;
        margin: 20px 0;
        box-shadow:
          inset 0 0 0 1px rgba(255,255,255,0.12),
          inset 0 0 0 3px #000,
          0 40px 120px rgba(0,0,0,0.95),
          0 8px 40px rgba(0,0,0,0.7);
      }
      #iphone-frame::before {
        content: '';
        position: absolute;
        left: -4px; top: 200px;
        width: 4px; height: 36px;
        background: #2a2a2a;
        border-radius: 2px 0 0 2px;
        box-shadow: 0 60px 0 #2a2a2a;
        pointer-events: none;
      }
      #iphone-frame::after {
        content: '';
        position: absolute;
        right: -4px; top: 260px;
        width: 4px; height: 80px;
        background: #2a2a2a;
        border-radius: 0 2px 2px 0;
        pointer-events: none;
      }
      #iphone-frame .dynamic-island {
        position: absolute;
        top: 12px; left: 50%;
        transform: translateX(-50%);
        width: 12px; height: 12px;
        background: #000;
        border-radius: 50%;
        z-index: 9999;
        pointer-events: none;
      }
      #iphone-frame .home-indicator {
        position: absolute;
        bottom: 8px; left: 50%;
        transform: translateX(-50%);
        width: 220px; height: 5px;
        background: rgba(255,255,255,0.28);
        border-radius: 3px;
        z-index: 9999;
        pointer-events: none;
      }
      #app-shell {
        width: 100%;
        height: 100%;
        border-radius: 30px;
        background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary-mid) 100%);
        transform: translateZ(0);
      }
      #scroll-view {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
        overflow-y: auto;
        height: 100%;
        border-radius: 30px;
        scrollbar-width: none;
        padding: 48px 28px 80px;
        box-sizing: border-box;
      }
      #scroll-view::-webkit-scrollbar { display: none; }
    }
    @media (min-width: 920px) and (prefers-color-scheme: dark) {
      body { background: #111 !important; }
    }

    /* ─── Native (Capacitor) full-screen override ───
       On the web, the ≥920px media query above wraps the app in a decorative
       iPad device frame on a grey backdrop — a deliberate desktop
       presentation. On a real device that frame must NOT appear: iPad is wide
       enough (≈1024px) to trigger it, which made the live app — and its App
       Store screenshots — look like a mockup rather than the app in use.
       Gated on the <html>.is-native class (set by js/shared/platform.js) and
       scoped to ≥920px (the only width the frame exists at on this page, so
       the native iPhone layout below 920px is untouched). Collapses the frame
       wrappers back to plain passthrough blocks so the app renders full-bleed
       on the brand background. */
    @media (min-width: 920px) {
      html.is-native body {
        background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary-mid) 100%) !important;
        padding: max(24px, env(safe-area-inset-top, 0px)) 20px 80px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: auto;
      }
      /* The home screen is short, so centre the logo + buttons in the viewport
         rather than letting them sit top-anchored with a large empty area
         below. Collapse the tall mobile container min-height so the flex
         centring above can actually take effect. */
      html.is-native .container {
        min-height: auto !important;
        flex: none !important;
      }
      html.is-native #iphone-frame,
      html.is-native #app-shell {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        background: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        transform: none !important;
      }
      /* Centre the app in a comfortable column rather than stretching edge to
         edge across the full iPad width. */
      html.is-native #iphone-frame {
        max-width: 760px !important;
        margin: 0 auto !important;
      }
      html.is-native #scroll-view {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
      }
      html.is-native #iphone-frame::before,
      html.is-native #iphone-frame::after,
      html.is-native #iphone-frame .dynamic-island,
      html.is-native #iphone-frame .home-indicator {
        display: none !important;
        content: none !important;
      }
    }

/* ── BLOCK 2 ── */
@keyframes bbCelebToast {
      0%   { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.92); }
      15%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
      75%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
      100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.96); }
    }