/* SUNDUQ v113 — mobile drawer geometry fix + mobile experience layer. */
:root{
  --su112-bg:#06131f;
  --su112-card:#0b2233;
  --su112-card-2:#102d42;
  --su112-line:rgba(114,177,212,.24);
  --su112-text:#edf6ff;
  --su112-muted:#8da5b7;
  --su112-pink:#f31d59;
  --su112-blue:#69bfff;
  --su112-nav-h:72px;
  --su112-radio-h:54px;
}
.su112OnlyMobile{display:none!important}
.su112Lightbox,.su112UploadState{font-family:inherit}

@media(max-width:900px){
  html{scroll-padding-bottom:calc(var(--su112-nav-h) + var(--su112-radio-h) + 22px);-webkit-text-size-adjust:100%}
  body{padding-bottom:calc(var(--su112-nav-h) + var(--su112-radio-h) + env(safe-area-inset-bottom,0px))!important;overflow-x:hidden}
  body.su112NoMobileChrome{padding-bottom:0!important}
  body.su112ModalOpen{overflow:hidden!important;touch-action:none}
  .sunduqFooter{display:none!important}
  button,a,input,textarea,select{touch-action:manipulation}
  input,textarea,select{font-size:16px!important}
  button,[role="button"],a{ -webkit-tap-highlight-color:transparent }
  .su112OnlyMobile{display:flex!important}

  /* Common legacy header becomes compact, while the new home header keeps its own layout. */
  .suTop:not(.nhTop){min-height:64px!important;height:64px!important;padding:0 12px!important;gap:10px!important;position:sticky!important;top:0!important;z-index:180!important;background:rgba(3,16,26,.97)!important;backdrop-filter:blur(16px)!important;border-bottom:1px solid rgba(92,157,193,.22)!important}
  .suTop:not(.nhTop) .suMenuBtn{display:grid!important;place-items:center;width:42px!important;height:42px!important;min-width:42px!important;border-radius:14px!important;font-size:20px!important}
  .suTop:not(.nhTop) .suBrand{min-width:0!important;gap:9px!important}
  .suTop:not(.nhTop) .suBrandMark{width:42px!important;height:42px!important;min-width:42px!important;border-radius:14px!important}
  .suTop:not(.nhTop) .suBrand b{font-size:18px!important;white-space:nowrap!important}
  .suTop:not(.nhTop) .suBrand small{display:none!important}
  .suTop:not(.nhTop) .suNav{display:none!important}
  .suTop:not(.nhTop) .suUser{margin-left:auto!important;gap:7px!important}
  .suTop:not(.nhTop) .suUser .suIconBtn{width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border-radius:13px!important}
  .suTop:not(.nhTop) .suUser .suIconBtn:first-child{display:none!important}
  .suTop:not(.nhTop) .suUser #authBox,.suTop:not(.nhTop) .suWriteBtn{display:none!important}
  /* The legacy closed position was left:-320px. After widening the drawer on mobile,
     40–75 px remained visible and covered the page. Use a width-independent transform. */
  .suDrawer{
    z-index:1200!important;
    left:0!important;
    width:min(88vw,360px)!important;
    max-width:calc(100vw - 16px)!important;
    box-sizing:border-box!important;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;
    transform:translate3d(-105%,0,0)!important;
    transition:transform .24s ease,visibility 0s linear .24s!important;
    visibility:hidden!important;
    pointer-events:none!important;
    will-change:transform!important;
    overflow-x:hidden!important;
  }
  .suDrawer.open{
    transform:translate3d(0,0,0)!important;
    transition:transform .24s ease!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .suDrawerShade{z-index:1190!important}
  .suDrawerShade.hidden{display:none!important}

  /* Global mobile bottom navigation. */
  .su112MobileNav,.nhMobileNav.su112Enhanced{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    height:calc(var(--su112-nav-h) + env(safe-area-inset-bottom,0px))!important;
    padding:0 5px env(safe-area-inset-bottom,0px)!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:center!important;
    background:rgba(3,16,26,.985)!important;border-top:1px solid rgba(93,159,195,.28)!important;
    box-shadow:0 -18px 45px rgba(0,0,0,.36)!important;backdrop-filter:blur(18px)!important;z-index:9800!important
  }
  .su112MobileNav a,.su112MobileNav button,.nhMobileNav.su112Enhanced a,.nhMobileNav.su112Enhanced button{
    position:relative!important;height:100%!important;min-width:0!important;border:0!important;background:transparent!important;color:#8299aa!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
    padding:5px 2px!important;text-decoration:none!important;font-size:10px!important;font-weight:800!important;line-height:1!important
  }
  .su112MobileNav a.active,.nhMobileNav.su112Enhanced a.active{color:#ff4c79!important}
  .su112NavIcon,.nhMobileNav.su112Enhanced>a>span:not(.nhMobilePlus),.nhMobileNav.su112Enhanced>button>span:not(.nhMobilePlus){font-size:21px!important;line-height:1!important}
  .su112ComposeButton{overflow:visible!important}
  .su112ComposeIcon,.nhMobileNav.su112Enhanced .nhMobilePlus{
    width:44px!important;height:44px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
    margin-top:-22px!important;background:linear-gradient(135deg,#ff2b65,#d80d49)!important;color:#fff!important;
    font-size:28px!important;box-shadow:0 10px 28px rgba(243,29,89,.38)!important;border:3px solid #071722!important
  }
  .su112NavBadge{position:absolute;top:8px;left:calc(50% + 9px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#f31d59;color:#fff;display:grid;place-items:center;font-size:10px;font-style:normal;box-shadow:0 0 0 2px #071722}
  .su112NavBadge.hidden{display:none!important}

  /* Sticky mini radio player. */
  .su112MiniRadio{
    position:fixed;left:8px;right:8px;bottom:calc(var(--su112-nav-h) + env(safe-area-inset-bottom,0px) + 6px);
    height:var(--su112-radio-h);z-index:9700;display:grid;grid-template-columns:38px 38px minmax(0,1fr) 36px 36px;align-items:center;gap:6px;
    padding:0 8px;border:1px solid rgba(102,174,213,.32);border-radius:17px;background:linear-gradient(135deg,rgba(14,45,65,.98),rgba(7,26,40,.98));
    box-shadow:0 16px 42px rgba(0,0,0,.42);backdrop-filter:blur(18px);color:var(--su112-text)
  }
  .su112MiniRadio.hidden{display:none!important}
  .su112MiniRadio button,.su112MiniRadio a{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(125,186,219,.22);border-radius:12px;background:#102d42;color:#eaf6ff;text-decoration:none;font-size:17px;padding:0}
  .su112MiniRadio .su112RadioPlay{background:linear-gradient(135deg,#f62a63,#d9114c);border:0;color:#fff;font-size:18px}
  .su112RadioText{min-width:0;display:grid;gap:2px;cursor:pointer}
  .su112RadioText b,.su112RadioText small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .su112RadioText b{font-size:13px}.su112RadioText small{font-size:10px;color:#91a9bb}
  .su112MiniRadio.is-playing .su112RadioPlay{box-shadow:0 0 0 4px rgba(243,29,89,.12)}

  /* Home page: mobile-first feed and full-screen composer. */
  .neighborsHome{padding-bottom:calc(var(--su112-nav-h) + var(--su112-radio-h) + env(safe-area-inset-bottom,0px) + 12px)!important}
  .neighborsHome .nhPage{padding-bottom:18px!important}
  .neighborsHome .nhTop{z-index:250!important}
  .neighborsHome .nhFilterBar{z-index:230!important}
  .neighborsHome .nhTypeFilters,.neighborsHome .nhComposerActions,.neighborsHome .nhComposeTypes{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
  .neighborsHome .nhTypeFilters::-webkit-scrollbar,.neighborsHome .nhComposerActions::-webkit-scrollbar,.neighborsHome .nhComposeTypes::-webkit-scrollbar{display:none}
  .neighborsHome .nhTypeFilters button,.neighborsHome .nhComposerActions button,.neighborsHome .nhComposeTypes button{scroll-snap-align:start;min-height:44px!important}
  .neighborsHome .nhComposerTop>button{min-height:48px!important}
  .neighborsHome .nhFeedCard{border-radius:18px!important;overflow:hidden!important}
  .neighborsHome .nhPostMain{padding:14px!important}
  .neighborsHome .nhPostText h2{font-size:18px!important;line-height:1.24!important}
  .neighborsHome .nhPostImage{border-radius:14px!important;overflow:hidden!important;cursor:zoom-in!important}
  .neighborsHome .nhPostImage img{width:100%!important;height:100%!important;object-fit:cover!important}
  .neighborsHome .nhMoreBtn{min-height:50px!important;width:100%!important;border-radius:16px!important}
  .neighborsHome .nhMobileNav{bottom:0!important}
  .neighborsHome .nhComposeOverlay{padding:0!important;align-items:stretch!important;z-index:12000!important}
  .neighborsHome .nhComposeModal{width:100%!important;height:100dvh!important;max-height:none!important;border:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
  .neighborsHome .nhComposeModalHead{position:relative!important;flex:0 0 auto!important;padding:14px 14px 12px!important}
  .neighborsHome .nhComposeModalHead h2{font-size:21px!important}
  .neighborsHome .nhComposeModalHead p{font-size:12px!important}
  .neighborsHome .nhComposeTypes{position:relative!important;flex:0 0 auto!important;display:flex!important;overflow-x:auto!important;padding:10px 12px!important;border-bottom:1px solid rgba(84,145,179,.18)!important}
  .neighborsHome .nhComposeTypes button{min-width:max-content!important;padding:0 14px!important}
  .neighborsHome .nhUnifiedComposeForm{flex:1 1 auto!important;overflow-y:auto!important;display:grid!important;grid-template-columns:1fr!important;align-content:start!important;padding:14px 12px 104px!important;gap:13px!important}
  .neighborsHome .nhComposeWide{grid-column:1!important}
  .neighborsHome .nhComposeField input,.neighborsHome .nhComposeField select{min-height:50px!important;border-radius:14px!important}
  .neighborsHome .nhComposeField textarea{min-height:126px!important;border-radius:14px!important;resize:vertical!important}
  .neighborsHome .nhComposeImageField{min-height:92px!important;border-radius:17px!important}
  .neighborsHome .nhComposeImageField input{width:48px!important;height:48px!important}
  .neighborsHome .nhComposePreview{height:min(42vh,320px)!important}
  .neighborsHome .nhComposeFooter{position:absolute!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;padding:11px 12px calc(12px + env(safe-area-inset-bottom,0px))!important;background:rgba(5,21,33,.985)!important;box-shadow:0 -16px 35px rgba(0,0,0,.3)!important;z-index:5!important}
  .neighborsHome .nhComposeFooter button{min-height:50px!important;font-size:15px!important}

  /* Topic/photo cards and action bars. */
  .tp106Layout{width:100%!important;margin:0 auto!important;padding:10px 8px 18px!important;display:block!important;box-sizing:border-box!important}
  .tp106Main{width:100%!important}.tp106Back{margin:4px 6px 10px!important}
  .tp106Card{padding:16px 13px!important;border-radius:19px!important}
  .tp106Card h1{font-size:clamp(28px,10vw,42px)!important}
  .tp106Text{font-size:17px!important;line-height:1.58!important}
  .tp106Gallery{margin:17px 0!important}.tp106Gallery.multi{grid-template-columns:1fr!important}
  .tp106Gallery button{min-height:150px!important;border-radius:15px!important}.tp106Gallery img{max-height:72vh!important}
  .tp106Actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .tp106Actions button{min-height:49px!important;padding:9px 7px!important}
  .tp106Side{margin-top:12px!important}.tp106SideCard{border-radius:18px!important}
  .tp106LightFigure{max-width:100%!important}.tp106LightFigure img{max-width:100vw!important;max-height:82dvh!important}

  /* Profile, notifications and messaging. */
  .trustProfilePage{padding-bottom:12px!important}
  .trustActions button,.trustActions a,.trustFormActions button{min-height:48px!important}
  .trustPub img{cursor:zoom-in!important}
  .act111Page{padding:10px 9px 18px!important}.act111Hero{border-radius:19px!important;padding:18px 15px!important}.act111Filters{overflow-x:auto!important;display:flex!important;scrollbar-width:none}.act111Filters::-webkit-scrollbar{display:none}.act111Filters button{min-width:max-content!important;min-height:44px!important}
  .act111ReadAll{min-height:44px!important}
  .msg111Page{padding:0!important;margin:0!important}.msg111Shell{height:calc(100dvh - 64px - var(--su112-nav-h) - var(--su112-radio-h) - env(safe-area-inset-bottom,0px) - 10px)!important;border-radius:0!important}
  .msg111PaneHead button,.msg111Composer button,.msg111MobileBack{min-height:46px!important}.msg111Composer{padding:10px!important}.msg111Composer textarea{min-height:50px!important;max-height:110px!important}.msg111MessagesList{padding:14px 10px!important}.msg111Bubble{max-width:91%!important}

  /* Generic touch target and media improvements on older sections. */
  main button:not(.su112RadioPlay),main a.primaryBtn,main .primaryBtn{min-height:44px}
  main img[data-su112-viewable="1"]{cursor:zoom-in}
  .suSearchModal,.notificationsPanel{max-width:calc(100vw - 18px)!important}
  .notificationsPanel{right:9px!important;left:9px!important;top:72px!important;width:auto!important;max-height:68dvh!important;overflow:auto!important}

  /* Fast photo viewer. */
  .su112Lightbox{position:fixed;inset:0;z-index:20000;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(0,5,10,.965);backdrop-filter:blur(10px);color:#fff;touch-action:none}
  .su112Lightbox.hidden{display:none!important}
  .su112LightboxHead{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.1)}
  .su112LightboxHead button{width:42px;height:42px;border:0;border-radius:14px;background:#173044;color:#fff;font-size:24px}.su112LightboxHead span{font-size:12px;color:#9db0bf}
  .su112LightboxStage{position:relative;display:grid;place-items:center;overflow:hidden;padding:8px}.su112LightboxStage img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;border-radius:10px}
  .su112LightboxNav{position:absolute;top:50%;transform:translateY(-50%);width:43px;height:52px;border:0;border-radius:14px;background:rgba(11,35,52,.8);color:#fff;font-size:31px}.su112LightboxPrev{left:8px}.su112LightboxNext{right:8px}
  .su112LightboxCaption{min-height:52px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));font-size:13px;color:#bed0dc;text-align:center}

  /* Client-side image optimisation feedback. */
  .su112UploadState{display:flex;align-items:center;gap:8px;margin-top:7px;padding:8px 10px;border-radius:11px;background:#0d2a3c;color:#a9c1d1;font-size:11px;line-height:1.35}
  .su112UploadState:before{content:'↯';width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#173e55;color:#85d5ff;font-weight:900}
  .su112UploadState.working:before{content:'…';animation:su112Pulse 1s infinite}.su112UploadState.ok{background:#0d3226;color:#bcebd0}.su112UploadState.ok:before{content:'✓';background:#185238;color:#d8ffe7}.su112UploadState.bad{background:#391924;color:#ffd0da}.su112UploadState.bad:before{content:'!';background:#6a2638;color:#fff}
  @keyframes su112Pulse{50%{opacity:.45}}
}

@media(max-width:520px){
  .su112MiniRadio{left:6px;right:6px;grid-template-columns:34px 36px minmax(0,1fr) 34px 34px;padding:0 6px;gap:4px}.su112MiniRadio button,.su112MiniRadio a{width:34px;height:34px}.su112RadioText b{font-size:12px}
  .neighborsHome .nhPage{padding-left:5px!important;padding-right:5px!important}.neighborsHome .nhComposer{border-radius:17px!important}.neighborsHome .nhFeedCard{border-radius:16px!important}
  .tp106Actions{grid-template-columns:1fr 1fr!important}.tp106Actions button{font-size:13px!important}
}
@media(max-width:900px){body.su112NoMiniRadio{padding-bottom:calc(var(--su112-nav-h) + env(safe-area-inset-bottom,0px))!important}}