/* Family Book — final Midnight mobile surface overrides */
@media (max-width:759px){

  /* Search / composer bar directly below the mobile navigation */
  html[data-fb-visual-theme="midnight-aurora"] .home-status-composer-shell{
    margin:0 0 12px!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] .home-social-compact{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
    min-height:54px!important;
    padding:7px 8px!important;
    border-radius:16px!important;
    background:
      linear-gradient(90deg,
        rgba(4,13,31,.76) 0%,
        rgba(5,17,37,.54) 45%,
        rgba(4,13,31,.66) 100%),
      url("../assets/midnight-aurora-alpine.webp") 50% 13%/185% auto no-repeat!important;
    border:1px solid rgba(88,229,255,.34)!important;
    box-shadow:
      0 10px 24px rgba(0,0,0,.24),
      0 0 16px rgba(34,211,238,.08),
      inset 0 1px 0 rgba(255,255,255,.045)!important;
    backdrop-filter:blur(9px) saturate(112%)!important;
    -webkit-backdrop-filter:blur(9px) saturate(112%)!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] .home-social-compact::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(45% 110% at 13% 20%,rgba(34,211,238,.13),transparent 68%),
      radial-gradient(38% 105% at 86% 18%,rgba(168,85,247,.14),transparent 70%);
  }

  html[data-fb-visual-theme="midnight-aurora"] .home-social-compact>*{
    position:relative!important;
    z-index:1!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] .home-social-compact-avatar{
    border:1px solid rgba(103,232,249,.32)!important;
    box-shadow:
      0 0 0 2px rgba(6,182,212,.05),
      0 0 12px rgba(34,211,238,.10)!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] .home-social-compact-prompt{
    height:38px!important;
    border-radius:999px!important;
    background:
      linear-gradient(90deg,rgba(5,15,34,.68),rgba(8,20,43,.54))!important;
    border:1px solid rgba(101,226,255,.12)!important;
    color:#b8c7db!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 0 12px rgba(34,211,238,.04)!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] .home-social-compact-action{
    width:31px!important;
    height:31px!important;
    border-radius:10px!important;
    background:
      linear-gradient(145deg,rgba(7,20,42,.88),rgba(17,26,58,.72))!important;
    border:1px solid rgba(95,225,255,.20)!important;
    color:#8ff5ff!important;
    box-shadow:
      0 0 11px rgba(34,211,238,.08),
      inset 0 1px 0 rgba(255,255,255,.04)!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] .home-social-compact-action svg{
    color:#8ff5ff!important;
    stroke:currentColor!important;
    filter:
      drop-shadow(0 0 5px rgba(34,211,238,.30))
      drop-shadow(0 0 8px rgba(139,92,246,.10))!important;
  }
}


/* ============================================================
   MIDNIGHT AURORA — MOBILE CONTENT CONTAINERS
   Match the desktop reference: Memories and Wall sit inside
   distinct rounded Midnight panels instead of floating sections.
   ============================================================ */
@media (max-width:759px){

  /* Family Memories outer panel */
  html[data-fb-visual-theme="midnight-aurora"] .home-memory-strip-shell{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
    margin:0 0 14px!important;
    padding:12px 10px 12px!important;
    border-radius:17px!important;
    background:
      linear-gradient(180deg,rgba(4,14,34,.42),rgba(3,12,30,.62)),
      url("../assets/midnight-aurora-alpine.webp") 46% 12%/150% auto no-repeat!important;
    border:1px solid rgba(78,226,255,.30)!important;
    box-shadow:
      0 14px 30px rgba(0,0,0,.28),
      0 0 18px rgba(34,211,238,.08),
      inset 0 1px 0 rgba(255,255,255,.045)!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] .home-memory-strip-shell::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(50% 90% at 12% 8%,rgba(34,211,238,.10),transparent 68%),
      radial-gradient(44% 86% at 88% 8%,rgba(168,85,247,.11),transparent 70%);
  }

  html[data-fb-visual-theme="midnight-aurora"] .home-memory-strip-shell>*{
    position:relative!important;
    z-index:1!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] .home-memory-strip-head{
    margin:0 0 9px!important;
    padding:0 3px!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] .home-memory-strip-track{
    margin:0!important;
    padding:1px 0 2px!important;
  }

  /* Family Wall outer panel */
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
    margin:0 0 16px!important;
    padding:14px 10px 14px!important;
    border-radius:18px!important;
    background:
      linear-gradient(180deg,
        rgba(4,14,34,.38) 0%,
        rgba(4,13,32,.56) 28%,
        rgba(3,11,28,.82) 100%),
      url("../assets/midnight-aurora-alpine.webp") 72% 54%/145% auto no-repeat!important;
    border:1px solid rgba(76,229,255,.32)!important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.30),
      0 0 20px rgba(34,211,238,.08),
      inset 0 1px 0 rgba(255,255,255,.045)!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(56% 78% at 88% 0%,rgba(34,211,238,.10),transparent 70%),
      radial-gradient(46% 82% at 4% 12%,rgba(168,85,247,.10),transparent 72%);
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel>*{
    position:relative!important;
    z-index:1!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel>.section-head.wall-head{
    margin:0 3px 10px!important;
  }

  /* Posts remain their own glass cards inside the outer Wall container. */
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel .wall-post{
    border-radius:15px!important;
    background:rgba(4,14,31,.80)!important;
    border:1px solid rgba(90,220,255,.16)!important;
    box-shadow:
      0 10px 26px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
}


/* ============================================================
   MIDNIGHT AURORA — FAMILY WALL STRIP ONLY
   Outer Wall container carries the aurora; post cards stay plain.
   ============================================================ */
@media (max-width:759px){
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
    margin:0 0 16px!important;
    padding:14px 10px 14px!important;
    border-radius:18px!important;
    background:
      linear-gradient(180deg,
        rgba(4,14,34,.34) 0%,
        rgba(4,13,32,.48) 24%,
        rgba(3,11,28,.72) 100%),
      url("../assets/midnight-aurora-alpine.webp") 72% 46%/150% auto no-repeat!important;
    border:1px solid rgba(76,229,255,.30)!important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.28),
      0 0 18px rgba(34,211,238,.08),
      inset 0 1px 0 rgba(255,255,255,.04)!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(52% 78% at 88% 4%,rgba(34,211,238,.10),transparent 70%),
      radial-gradient(42% 72% at 4% 10%,rgba(168,85,247,.10),transparent 72%);
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel>*{
    position:relative!important;
    z-index:1!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel>.section-head.wall-head{
    margin:0 3px 10px!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel .wall-post{
    border-radius:15px!important;
    background:rgba(4,14,31,.92)!important;
    background-image:none!important;
    border:1px solid rgba(90,220,255,.14)!important;
    box-shadow:
      0 10px 24px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.02)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel .wall-post::before,
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel .wall-post::after{
    content:none!important;
    display:none!important;
    background:none!important;
  }
}


/* ============================================================
   MIDNIGHT AURORA — WALL MOUNTAIN CROP
   Deliberately bring mountains + forest into the outer Wall panel.
   ============================================================ */
@media (max-width:759px){
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel{
    background:
      linear-gradient(180deg,
        rgba(3,11,28,.18) 0%,
        rgba(3,12,30,.30) 26%,
        rgba(3,11,28,.58) 62%,
        rgba(2,9,23,.80) 100%),
      url("../assets/midnight-aurora-alpine.webp") 82% 66%/170% auto no-repeat!important;
  }

  /* Keep top text readable while allowing the mountain ridge to show beneath. */
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel::before{
    background:
      linear-gradient(180deg,rgba(3,10,25,.08),transparent 38%,rgba(2,8,21,.22) 100%),
      radial-gradient(48% 72% at 88% 0%,rgba(34,211,238,.08),transparent 72%),
      radial-gradient(40% 70% at 4% 10%,rgba(168,85,247,.08),transparent 74%)!important;
  }

  /* Posts remain non-scenic. */
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel .wall-post{
    background:rgba(4,14,31,.94)!important;
    background-image:none!important;
  }
}


/* ============================================================
   MIDNIGHT AURORA — WALL SCENIC HEADER STRIP
   Visible mountain/forest band at the top of the outer Wall.
   Individual posts remain plain dark.
   ============================================================ */
@media (max-width:759px){
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
    background:
      linear-gradient(180deg,rgba(3,11,28,.24) 0%,rgba(3,11,28,.54) 22%,rgba(3,11,28,.86) 42%,rgba(3,11,28,.96) 100%)!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:0!important;
    height:285px!important;
    pointer-events:none!important;
    z-index:0!important;
    background:
      linear-gradient(180deg,
        rgba(3,10,25,.02) 0%,
        rgba(3,10,25,.08) 45%,
        rgba(3,11,28,.54) 76%,
        rgba(3,11,28,.96) 100%),
      url("../assets/midnight-aurora-alpine.webp") 82% 64%/cover no-repeat!important;
    opacity:1!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    z-index:0!important;
    background:
      radial-gradient(44% 34% at 92% 3%,rgba(34,211,238,.10),transparent 72%),
      radial-gradient(38% 32% at 6% 6%,rgba(168,85,247,.10),transparent 74%)!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel>*{
    position:relative!important;
    z-index:1!important;
  }

  /* Keep the title readable over the scenic strip. */
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel>.section-head.wall-head{
    padding:2px 4px 8px!important;
    border-radius:12px!important;
    background:linear-gradient(90deg,rgba(3,12,29,.34),rgba(3,12,29,.06))!important;
  }

  /* Posts are intentionally non-scenic. */
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel .wall-post{
    background:rgba(4,14,31,.95)!important;
    background-image:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel .wall-post::before,
  html[data-fb-visual-theme="midnight-aurora"] #screen .family-wall-panel .wall-post::after{
    content:none!important;
    display:none!important;
  }
}


/* ============================================================
   REMOVE LEGACY MOBILE HOME BLOCK
   The modern mobile Home already has Memories + Family Wall.
   Hide the old Your Family Book / Recent memories / Upcoming block.
   ============================================================ */
@media (max-width:759px){
  #screen > .section-head:has(#homeActivityTitle),
  #screen > .section-head:has(#homeActivityTitle) + .columns{
    display:none!important;
  }
}


/* ============================================================
   MIDNIGHT AURORA — SHARED MOBILE PAGE BACKGROUND
   Portrait aurora scene behind Home + Memories only.
   ============================================================ */
@media (max-width:759px){

  /* Home page full scenic background */
  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell){
    position:relative!important;
    isolation:isolate!important;
    background:
      linear-gradient(180deg,
        rgba(2,7,20,.34) 0%,
        rgba(2,8,22,.54) 28%,
        rgba(2,8,21,.74) 62%,
        rgba(2,7,19,.90) 100%),
      url("../assets/midnight-aurora-widget-flow.webp") center top/100% auto repeat-y!important;
    background-color:#020814!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell)::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(48% 28% at 88% 8%,rgba(34,211,238,.10),transparent 72%),
      radial-gradient(42% 26% at 6% 14%,rgba(168,85,247,.10),transparent 74%);
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell)>*{
    position:relative!important;
    z-index:1!important;
  }

  /* Keep Home outer surfaces glassy so the scenic background reads through. */
  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell) .home-memory-strip-shell,
  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell) .family-wall-panel{
    background-color:rgba(3,12,28,.58)!important;
    backdrop-filter:blur(8px) saturate(112%)!important;
    -webkit-backdrop-filter:blur(8px) saturate(112%)!important;
  }
}


/* ============================================================
   MIDNIGHT AURORA — HOME TEXT COLOR CORRECTION
   Remove leftover green Classic typography from the Midnight Home.
   ============================================================ */
@media (max-width:759px){
  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell) .home-memory-strip-head h2,
  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell) .family-wall-panel .wall-head h2,
  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell) .family-wall-panel .wall-head h3{
    color:#f4f8ff!important;
    text-shadow:0 0 12px rgba(34,211,238,.06)!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell) .family-wall-panel .wall-head p,
  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell) .home-memory-strip-head p{
    color:#b9c7da!important;
  }

  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell) .home-memory-strip-head .link,
  html[data-fb-visual-theme="midnight-aurora"] #screen:has(.home-status-composer-shell) .family-wall-panel .link{
    color:#75f3ff!important;
  }
}