/* Mindvora — responsive layer (loaded after style.css).
   Phones ≤ 640px · tablets 641–1024px · desktop > 1024px.
   Only layout rules live here; colours and components stay in style.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, canvas, iframe { max-width: 100%; height: auto; }
button, a, input, select, textarea { touch-action: manipulation; }

/* Notches / home bar on modern phones */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.app-layout { height: calc(100dvh - 56px); }

/* Modals never wider/taller than the screen */
.modal-box { max-width: min(460px, calc(100vw - 20px)); max-height: min(88vh, calc(100dvh - 20px)); }
.modal-body, .modal-content { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── Desktop ─────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  .app-layout { max-width: 1280px; margin: 0 auto !important; }
  .feed-col { max-width: 680px; margin: 0 auto; }
  .dm-wrap { max-width: 920px; height: 82vh; }
  .dm-left { width: 300px; }
}

/* Larger displays: keep the entire post media visible and avoid stretched feed cards. */
@media (min-width: 1024px) {
  .sk-media-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: min(82vh, 900px);
    background: #000;
  }
  .sk-media-img-wrap > .sk-media {
    width: 100% !important;
    height: auto !important;
    max-height: min(82vh, 900px) !important;
    object-fit: contain !important;
    object-position: center;
  }
  .sk-media-wrap { max-height: min(82vh, 900px) !important; }
  .sk-media-wrap > .sk-media-main {
    max-height: min(82vh, 900px) !important;
    object-fit: contain !important;
    object-position: center;
  }
}

@media (min-width: 1200px) {
  .app-body { justify-content: center; }
  .feed-col {
    flex: 0 1 900px !important;
    width: min(900px, calc(100% - 300px)) !important;
    max-width: 900px !important;
    min-width: 0 !important;
    padding: 20px 24px 32px !important;
  }
  .right-sidebar { flex: 0 0 280px !important; width: 280px !important; max-width: 280px !important; }
  .compose-box { margin: 0 0 14px !important; border: 1px solid var(--border) !important; border-radius: 18px !important; }
  .spark-card { margin: 0 0 14px !important; border: 1px solid var(--border) !important; border-radius: 18px !important; }
}

/* Desktop: use the available screen width instead of centering a narrow feed. */
@media (min-width: 1200px) {
  .app-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }
  .feed-col {
    flex: 1 1 0% !important;
    width: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 20px clamp(14px, 1.75vw, 24px) 32px !important;
  }
  .right-sidebar {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    margin: 0 !important;
  }
}

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .sidebar { width: 72px; padding: 10px 6px; }
  .sidebar .sb-lbl, .sidebar .s-lbl, .sidebar .nav-lbl { display: none; }
  .feed-col { padding: 12px; }
  .dm-wrap { max-width: 96vw; height: 86vh; }
  .dm-left { width: 250px; }
}

/* ── Phone ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sidebar { display: none; }
  .feed-col { padding: 8px 8px calc(72px + env(safe-area-inset-bottom)); }
  .tb-sw { max-width: none; }
  .modal-box { max-width: 100vw; width: 100%; border-radius: 18px 18px 0 0; max-height: 92dvh; margin-top: auto; }
  .auth-box { padding: 22px 18px; border-radius: 18px; }

  /* Messages: list and chat take turns filling the screen */
  .dm-wrap { max-width: 100vw; width: 100vw; height: 100dvh; border-radius: 0; }
  .dm-left { width: 100%; border-right: 0; }
  .dm-right { display: none; }
  .dm-wrap.chat-open .dm-left { display: none; }
  .dm-wrap.chat-open .dm-right { display: flex; width: 100%; }
  .dm-pv { max-width: 60vw; }
  .chat-bar { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .chat-inp { font-size: 16px; } /* stops iPhone zooming in when typing */
  input, select, textarea { font-size: 16px; }
  .sec-alert-banner { left: 8px; right: 8px; max-width: none; }
}

/* Very small phones */
@media (max-width: 360px) {
  html { font-size: 15px; }
  .feed-col { padding-left: 4px; padding-right: 4px; }
}

/* Landscape phones: give content the height */
@media (max-height: 480px) and (orientation: landscape) {
  .modal-box { max-height: 96dvh; }
}

/* ── Chat header call buttons ────────────────────────────────────────── */
.chat-hd { position: relative; }
.chat-call-btns { margin-left: auto; display: flex; gap: 6px; }
.back-to-list { display: none; background: none; border: 0; color: var(--white, #fff); font-size: 20px; padding: 4px 8px; cursor: pointer; }
@media (max-width: 640px) { .back-to-list { display: inline-block; } }
.chat-call-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border, #1f3d2a);
  background: var(--card, #0d2118); font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.chat-call-btn:hover { filter: brightness(1.2); }

/* ── Call screen ─────────────────────────────────────────────────────── */
.mv-call { position: fixed; inset: 0; z-index: 99999; background: #06120b; display: none;
  flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.mv-call.open { display: flex; }
.mv-call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
.mv-call-local { position: absolute; right: 12px; top: calc(12px + env(safe-area-inset-top)); width: 28vw; max-width: 160px;
  aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255,255,255,.25); display: none; transform: scaleX(-1); z-index: 2; }
.mv-call.video .mv-call-remote, .mv-call.video .mv-call-local { display: block; }
.mv-call-info { position: relative; z-index: 1; text-align: center; }
.mv-call.video .mv-call-info { position: absolute; top: calc(20px + env(safe-area-inset-top)); left: 16px; text-align: left; }
.mv-call-av { width: 96px; height: 96px; border-radius: 50%; background: #166534; margin: 0 auto 14px;
  display: grid; place-items: center; font-size: 40px; font-weight: 700; }
.mv-call.video .mv-call-av { display: none; }
.mv-call-name { font-size: 22px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.mv-call-status { font-size: 14px; opacity: .8; margin-top: 4px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.mv-call-bar { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 0 12px; }
.mv-cb { width: 58px; height: 58px; border-radius: 50%; border: 0; font-size: 22px; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(6px); }
.mv-cb.off { background: rgba(255,255,255,.85); color: #111; }
.mv-cb-accept { background: #16a34a; }
.mv-cb-decline { background: #dc2626; }
@media (max-width: 360px) { .mv-cb { width: 50px; height: 50px; font-size: 19px; } .mv-call-bar { gap: 10px; } }

/* ── Notification permission banner ─────────────────────────────────── */
.mv-push-prompt { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 9000; width: min(520px, calc(100vw - 20px)); display: flex; gap: 10px; align-items: center;
  background: var(--card, #0d2118); border: 1px solid var(--borderhi, #166534); color: var(--white, #fff);
  border-radius: 14px; padding: 12px 14px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.mv-push-prompt span { flex: 1; }
.mv-push-prompt button { border: 0; border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight: 600; }
#mv-push-yes { background: #16a34a; color: #fff; }
#mv-push-no { background: transparent; color: inherit; }

/* ── Update-required screen ─────────────────────────────────────────── */
.mv-update { position: fixed; inset: 0; z-index: 100000; background: #06120b; color: #fff; display: flex;
  flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 14px; }
.mv-update h2 { font-size: 22px; margin: 0; }
.mv-update p { opacity: .85; max-width: 420px; margin: 0; line-height: 1.5; }
.mv-update a, .mv-update button { background: #16a34a; color: #fff; border: 0; border-radius: 12px; padding: 12px 22px;
  font-weight: 700; text-decoration: none; cursor: pointer; }
.mv-update .later { background: transparent; opacity: .7; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (prefers-reduced-motion: reduce) { .float-card, .earn-showcase, .feat-pill, .fc1, .fc2, .fc3 { animation-duration: 4s !important; } }

/* ── v5: bottom menu only after login (hidden on login / sign-up / code screens) ── */
body:not(.mv-authed) .bottom-nav { display: none !important; }

/* ── v5: Messages on phones — list and chat take turns.
      Overrides older !important rules in style.css that kept the previous chat
      visible underneath the "new message" search list. ── */
@media (max-width: 767px) {
  .dm-wrap { flex-direction: column !important; }
  .dm-left { width: 100% !important; max-height: none !important; height: 100% !important;
             overflow-y: auto !important; border-bottom: 0 !important; }
  .dm-right { display: none !important; }
  .dm-wrap.chat-open .dm-left { display: none !important; }
  .dm-wrap.chat-open .dm-right { display: flex !important; width: 100% !important; height: 100% !important; }
  .back-to-list { display: inline-block !important; }
}

/* reCAPTCHA checkbox must keep Google's own size (the rule above squashed it) */
#r-captcha iframe, #mv-cap-pop iframe, iframe[src*="recaptcha"] { height: 78px !important; width: 304px !important; max-width: none !important; }
iframe[src*="recaptcha"][src*="bframe"] { height: 580px !important; width: 400px !important; max-width: 100vw !important; }
#r-captcha { display: flex; justify-content: center; overflow: hidden; }
@media (max-width: 340px) { #r-captcha > div { transform: scale(.88); transform-origin: center; } }

/* Light-mode phone navigation: override the legacy dark glass bar. */
body.light-mode .bottom-nav, body.light .bottom-nav {
  background: rgba(250, 246, 239, .97) !important;
  border-top: 1px solid rgba(111, 73, 53, .24) !important;
  box-shadow: 0 -8px 24px rgba(66, 45, 32, .10) !important;
  backdrop-filter: blur(20px);
}
body.light-mode nav.bottom-nav .nav-item, body.light nav.bottom-nav .nav-item {
  color: #49372d !important;
  background: transparent !important;
  border-color: transparent !important;
}
body.light-mode nav.bottom-nav .nav-item.active, body.light nav.bottom-nav .nav-item.active {
  color: #32231b !important;
  background: rgba(151, 91, 58, .15) !important;
  border-color: rgba(117, 69, 43, .28) !important;
  box-shadow: inset 0 2px 0 rgba(117, 69, 43, .18) !important;
}
body.light-mode .bottom-nav .nav-ic, body.light .bottom-nav .nav-ic { color: inherit !important; }

/* Phones: keep the feed inside the viewport with equal, safe-area-aware gutters. */
@media (max-width: 767px) {
  html, body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; }
  #app-screen, .app-body { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden !important; }
  .feed-col {
    flex: 1 1 0% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 calc(10px + env(safe-area-inset-right, 0px)) calc(84px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px)) !important;
    overflow-x: hidden !important;
  }
  .spark-card, .compose-box {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 15px !important;
  }
  .stories-bar, .filter-bar { box-sizing: border-box; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
  .sk-head, .sk-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .sk-name, .sk-handle, .sk-body { max-width: 100%; overflow-wrap: anywhere; }
  .sk-actions .s-btn { max-width: 100%; min-width: 0; }
  .sk-media-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100%;
    max-height: min(72vh, 560px);
    border-radius: 12px !important;
    background: #000;
  }
  .sk-media-img-wrap > .sk-media {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 560px !important;
    max-height: min(72vh, 560px) !important;
    object-fit: contain !important;
    object-position: center;
  }
  .sk-media-wrap {
    width: 100% !important;
    max-width: 100%;
    max-height: 560px !important;
    max-height: min(72vh, 560px) !important;
    border-radius: 12px !important;
  }
  .sk-media-wrap > .sk-media-main {
    max-width: 100% !important;
    max-height: 560px !important;
    max-height: min(72vh, 560px) !important;
    object-fit: contain !important;
    object-position: center;
  }
}

.mv-install-guide-backdrop {
  position: fixed; inset: 0; z-index: 100005; display: grid; place-items: center;
  padding: 16px; background: rgba(2, 8, 17, .76); backdrop-filter: blur(8px);
}
.mv-install-guide-dialog {
  position: relative; width: min(520px, 100%); max-height: min(86vh, 820px); overflow: auto;
  padding: 24px; border: 1px solid var(--border, rgba(255,255,255,.18)); border-radius: 18px;
  background: var(--card, #102139); color: var(--white, #f4f8ff); box-shadow: var(--shadow, 0 18px 60px rgba(0,0,0,.4));
}
.mv-install-guide-dialog h2 { margin: 0 36px 10px 0; font-size: 19px; }
.mv-install-guide-dialog h3 { margin: 16px 0 5px; font-size: 14px; color: var(--green3, #d8ff67); }
.mv-install-guide-dialog p, .mv-install-guide-dialog li { font-size: 13px; line-height: 1.6; }
.mv-install-guide-dialog ol { padding-left: 20px; margin: 8px 0; }
.mv-install-guide-close {
  position: absolute; top: 10px; right: 10px; min-width: 40px; min-height: 40px;
  border: 1px solid var(--border, rgba(255,255,255,.18)); border-radius: 10px;
  background: transparent; color: inherit; font-size: 22px; cursor: pointer;
}