/* NxtKin Mobile Responsive Layer v80
   Desktop stays unchanged. Tablet/phone layouts are additive overrides only. */
:root{--nx80-mobile-bar:68px;--nx80-mobile-top:58px;--nx80-safe-bottom:env(safe-area-inset-bottom,0px)}
.nx80-menu-btn,.nx80-bottom-nav,.nx80-menu-scrim{display:none}

/* Tablet: remove fixed minimums and allow every app surface to shrink safely. */
@media (max-width:1024px){
  html,body{max-width:100%;overflow-x:hidden}
  .app-shell{min-width:0!important;width:100%!important;max-width:100vw!important}
  .main-stage,.module-view,.module-card,.tree-canvas,.lower-panels,.branch-strip{min-width:0!important;max-width:100%!important}
  .topbar{gap:12px!important;padding-inline:14px!important}
  .topbar .search{width:min(290px,28vw)!important}
  .topnav button{width:62px!important}
  .topnav button span{font-size:10px!important}
  .memory-library{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .conversation-list{grid-template-columns:220px minmax(0,1fr)!important}
  img,video,canvas,svg{max-width:100%}
}

/* Phone / small tablet shell */
@media (max-width:820px){
  html{width:100%;overflow-x:hidden!important;background:#f5eddb}
  body{width:100%;min-width:0!important;max-width:100vw!important;overflow-x:hidden!important;padding-bottom:calc(var(--nx80-mobile-bar) + var(--nx80-safe-bottom))!important;background:#f5eddb}
  body.nx47-messages-active{padding-bottom:0!important}
  *{-webkit-tap-highlight-color:transparent}
  button,a,input,select,textarea{touch-action:manipulation}
  input,select,textarea{font-size:16px!important}

  .app-shell{display:block!important;min-width:0!important;width:100%!important;max-width:100vw!important;min-height:100dvh!important;background:#f5eddb!important}
  .topbar{position:sticky!important;top:0!important;z-index:4000!important;width:100%!important;height:var(--nx80-mobile-top)!important;min-height:var(--nx80-mobile-top)!important;padding:6px 10px!important;gap:8px!important;display:flex!important;align-items:center!important;background:linear-gradient(90deg,#062f26,#073d31)!important;box-shadow:0 2px 14px rgba(6,47,38,.2)!important}
  .topbar .nxtkin-brand-image,.topbar .brand{order:2!important;flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:130px!important;height:46px!important;margin:0!important}
  .topbar .nxtkin-brand-image img{display:block!important;width:112px!important;max-width:112px!important;height:auto!important;max-height:42px!important;object-fit:contain!important}
  .topbar .search,.topbar .topnav{display:none!important}
  .topbar .top-actions{order:3!important;margin-left:auto!important;gap:3px!important;min-width:0!important}
  .topbar .icon-btn{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;padding:0!important;font-size:18px!important}
  .topbar .welcome{border:0!important;padding:0!important;margin:0 0 0 1px!important;gap:0!important}
  .topbar .welcome>div,.topbar .welcome>span{display:none!important}
  .topbar .welcome img{display:block!important;width:36px!important;height:36px!important;min-width:36px!important;border-width:2px!important}

  .nx80-menu-btn{order:1!important;display:grid!important;place-items:center!important;flex:0 0 42px!important;width:42px!important;height:42px!important;padding:0!important;border:1px solid rgba(239,188,89,.28)!important;border-radius:11px!important;background:rgba(255,255,255,.05)!important;color:#f3d47b!important;font-size:22px!important;line-height:1!important;cursor:pointer!important}

  /* Existing desktop sidebar becomes a touch drawer. */
  .sidebar.leftbar{display:block!important;position:fixed!important;z-index:5200!important;left:0!important;top:var(--nx80-mobile-top)!important;bottom:0!important;width:min(340px,88vw)!important;max-width:88vw!important;height:auto!important;padding:14px 12px calc(28px + var(--nx80-safe-bottom))!important;overflow-y:auto!important;overscroll-behavior:contain!important;transform:translateX(-105%)!important;transition:transform .22s cubic-bezier(.2,.8,.2,1)!important;box-shadow:16px 0 40px rgba(0,0,0,.25)!important;background:#fffaf0!important;border-right:1px solid #d9cab0!important}
  body.nx80-menu-open .sidebar.leftbar{transform:translateX(0)!important}
  .nx80-menu-scrim{display:block!important;position:fixed!important;z-index:5100!important;inset:var(--nx80-mobile-top) 0 0 0!important;background:rgba(4,28,23,.54)!important;backdrop-filter:blur(2px)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:.18s ease!important}
  body.nx80-menu-open .nx80-menu-scrim{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  body.nx80-menu-open{overflow:hidden!important}
  .sidebar.leftbar .user-chip{padding:5px 5px 12px!important;min-height:62px!important}
  .sidebar.leftbar .side-nav button{min-height:46px!important;height:auto!important;padding:9px 10px!important;font-size:13px!important;border-radius:10px!important}
  .sidebar.leftbar .primary.wide{min-height:48px!important;font-size:14px!important;margin-top:12px!important}
  .sidebar.leftbar .stats-card{margin-top:14px!important}

  /* Profile rail stays a drawer and never consumes mobile page width. */
  #nxtkinProfileSidebar,#nxtkinProfileSidebar.nx42-profilebar,aside.sidebar.rightbar{position:fixed!important;z-index:5000!important;top:var(--nx80-mobile-top)!important;right:0!important;bottom:0!important;left:auto!important;width:min(340px,92vw)!important;min-width:0!important;max-width:92vw!important;height:auto!important;max-height:calc(100dvh - var(--nx80-mobile-top))!important;overflow-y:auto!important}
  html.nx41-sidebar-managed .app-shell,html.nx41-sidebar-collapsed .app-shell,html.nx41-sidebar-hidden .app-shell,body.nx42-profile-collapsed .app-shell{display:block!important;width:100%!important;grid-template-columns:none!important}
  #nx41ProfileHide{top:70px!important;right:8px!important}
  #nx41ProfileBubble{width:54px!important;min-width:54px!important;height:54px!important;bottom:calc(var(--nx80-mobile-bar) + 12px + var(--nx80-safe-bottom))!important;right:12px!important;top:auto!important;left:auto!important}

  .main-stage{display:flex!important;width:100%!important;max-width:100vw!important;min-width:0!important;min-height:calc(100dvh - var(--nx80-mobile-top))!important;overflow:visible!important;padding:0!important;background:#f5eddb!important}

  /* Tree becomes a pannable canvas instead of shrinking family nodes into each other. */
  .tree-canvas{width:100%!important;height:calc(100dvh - var(--nx80-mobile-top) - var(--nx80-mobile-bar))!important;min-height:610px!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;background:#f5eddb!important}
  .tree-reference,.tree-layer,.connector-layer{width:900px!important;min-width:900px!important;max-width:none!important}
  .tree-reference{right:auto!important}
  .tree-toolbar{position:absolute!important;z-index:80!important;top:70px!important;left:10px!important;right:10px!important;inset:70px 10px auto 10px!important;width:auto!important;pointer-events:none!important}
  .tree-toolbar .view-card{left:0!important;top:0!important;width:auto!important;min-width:126px!important;padding:6px!important}
  .tree-toolbar .zoom{position:absolute!important;right:0!important;top:0!important;gap:2px!important}
  .tree-toolbar .zoom button,.tree-toolbar .zoom span{height:36px!important;min-width:36px!important}
  .family-title{top:13px!important;left:450px!important;transform:translateX(-50%)!important;min-width:260px!important}
  .family-title h1{font-size:31px!important}
  .person-node{width:108px!important}
  .person-node img{width:58px!important;height:58px!important}
  .person-node .label{font-size:10px!important}
  .explore{display:none!important}

  .lower-panels{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;padding:10px 10px calc(12px + var(--nx80-mobile-bar))!important}
  .memory-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .memory-grid img{height:110px!important}
  .branch-strip{margin:0 10px calc(14px + var(--nx80-mobile-bar))!important;width:auto!important;height:auto!important;min-height:64px!important;grid-template-columns:110px minmax(0,1fr) 26px!important;padding:8px 10px!important;overflow:hidden!important}
  .branch-strip #branchPeople{overflow-x:auto!important;justify-content:flex-start!important;padding:4px 0!important}
  .branch-person{flex:0 0 auto!important;min-width:92px!important}

  /* All standard modules become one readable column. */
  .module-view{width:100%!important;max-width:100vw!important;min-height:calc(100dvh - var(--nx80-mobile-top))!important;padding:16px 11px calc(24px + var(--nx80-mobile-bar) + var(--nx80-safe-bottom))!important;overflow-x:hidden!important;overflow-y:auto!important;background:#f8f1df!important}
  .module-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin-bottom:14px!important}
  .module-head>div,.module-head>section{min-width:0!important}
  .module-head h2{font-size:27px!important;line-height:1.08!important}
  .module-head p{font-size:13px!important;line-height:1.5!important;margin:6px 0 0!important}
  .module-head .module-button,.module-head>button{width:100%!important;min-height:46px!important}
  .module-grid{grid-template-columns:1fr!important;gap:10px!important}
  .module-card{padding:14px!important;border-radius:12px!important;overflow-wrap:anywhere!important}
  .module-button,.submit{min-height:44px!important;padding:10px 14px!important;font-size:13px!important}
  .memory-library{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .memory-tile img{height:138px!important}
  .event-list .event-full{grid-template-columns:52px minmax(0,1fr)!important;gap:9px!important;align-items:start!important}
  .event-list .event-full .module-button{grid-column:1/-1!important;width:100%!important}
  .settings-row{align-items:flex-start!important;gap:12px!important}
  .settings-row>div{min-width:0!important}
  .conversation-list{display:flex!important;flex-direction:column!important;min-height:calc(100dvh - 190px)!important;width:100%!important}
  .conversation-sidebar{width:100%!important;border-right:0!important;border-bottom:1px solid #e2d4bb!important;max-height:40dvh!important;overflow:auto!important}
  .chat-pane{min-height:52dvh!important}
  .chat-compose{position:sticky!important;bottom:0!important;background:#fffaf0!important;padding-bottom:calc(12px + var(--nx80-safe-bottom))!important}
  .feed-item{grid-template-columns:38px minmax(0,1fr)!important}

  /* Gallery v69: photo-first, two-column phone browsing with horizontal filter rail. */
  .nx69-gallery{width:100%!important;max-width:100%!important;padding-bottom:calc(var(--nx80-mobile-bar) + 18px)!important}
  .nx69-hero{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;padding:16px 12px!important;min-height:0!important}
  .nx69-title-row h1{font-size:30px!important;line-height:1.05!important}
  .nx69-hero-copy p{font-size:13px!important;line-height:1.5!important}
  .nx69-hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:100%!important}
  .nx69-hero-actions .nx69-btn{min-width:0!important;min-height:44px!important;padding:9px 8px!important;font-size:12px!important}
  .nx69-search{grid-column:1/-1!important;width:100%!important;max-width:none!important;margin:0!important}
  .nx69-search input{min-width:0!important;width:100%!important}
  .nx69-tabs{display:flex!important;overflow-x:auto!important;gap:6px!important;padding:8px 10px!important;scroll-snap-type:x proximity!important;overscroll-behavior-inline:contain!important}
  .nx69-tabs button{flex:0 0 auto!important;min-height:42px!important;scroll-snap-align:start!important}
  .nx69-body{padding:12px 10px!important}
  .nx69-masonry{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .nx69-media,.nx69-media.wide,.nx69-media.tall{grid-column:auto!important;grid-row:auto!important;min-height:150px!important;aspect-ratio:4/5!important}
  .nx69-media-visual,.nx69-media-visual img,.nx69-media-visual video{width:100%!important;height:100%!important;object-fit:cover!important}
  .nx69-album-grid,.nx69-album-grid-large,.nx69-people-grid,.nx69-place-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .nx69-section-head{align-items:center!important;gap:8px!important}
  .nx69-section-head h2{font-size:20px!important}

  /* Messages / World keep their functions but fit below the real app header. */
  body.nx47-messages-active .module-view{height:calc(100dvh - var(--nx80-mobile-top))!important;min-height:0!important;padding:0!important}
  body.nx47-messages-active .main-stage{min-height:0!important;height:calc(100dvh - var(--nx80-mobile-top))!important;overflow:hidden!important}
  .nx47-shell{height:calc(100dvh - var(--nx80-mobile-top))!important;max-height:calc(100dvh - var(--nx80-mobile-top))!important;min-height:0!important;width:100%!important}
  .nx47-modebar{flex:0 0 50px!important;height:50px!important}
  .nx47-left,.nx47-center{min-width:0!important}
  .nx47-chat-head{height:56px!important;padding-inline:10px!important}
  .nx47-compose{padding:8px!important;padding-bottom:calc(8px + var(--nx80-safe-bottom))!important;gap:6px!important}
  .nx47-compose input{font-size:16px!important}
  .nx47-world{height:100%!important;min-height:0!important}
  .nx47-scene,.nx47-scene.nx60-host{min-height:0!important;height:100%!important}
  .nx60-stage{min-height:100%!important;height:100%!important}
  .nx60-controller{left:5px!important;bottom:118px!important;transform:scale(.64)!important;transform-origin:left bottom!important}
  .nx60-actions{right:4px!important;bottom:118px!important;transform:scale(.70)!important;transform-origin:right bottom!important}
  .nx60-room-dock{left:6px!important;right:6px!important;bottom:5px!important;max-width:none!important;overflow-x:auto!important;justify-content:flex-start!important;padding-bottom:max(6px,var(--nx80-safe-bottom))!important}
  .nx47-scene.nx60-host>.nx60-world-chat,.nx60-world-chat{left:7px!important;right:7px!important;bottom:66px!important;width:auto!important;max-width:none!important;transform:none!important;height:46px!important}
  .nx63-editor-toolbar{max-width:calc(100vw - 16px)!important;overflow-x:auto!important;white-space:nowrap!important}
  .nx63-palette{left:8px!important;right:8px!important;width:auto!important;max-width:none!important;bottom:116px!important;max-height:42dvh!important;overflow:auto!important}
  .nx63-palette-items{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  /* Current call surfaces: full-screen, safe-area aware, touch-sized. */
  .nx66-stage{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;z-index:2147483000!important;overflow:hidden!important;grid-template-rows:auto auto minmax(0,1fr) auto!important}
  .nx66-header{padding:calc(10px + env(safe-area-inset-top,0px)) 12px 9px!important;min-height:70px!important}
  .nx66-header h2,.nx66-header strong{font-size:20px!important}
  .nx66-media-area{min-height:0!important;height:auto!important;overflow:hidden!important}
  .nx66-video-grid{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr)!important;inset:0!important;gap:0!important;padding:0!important}
  .nx66-video-tile{height:100%!important;min-height:0!important;border-radius:0!important}
  .nx66-video-tile video{width:100%!important;height:100%!important;object-fit:cover!important}
  .nx66-local-preview{width:102px!important;height:142px!important;right:10px!important;bottom:10px!important;border-radius:13px!important}
  .nx66-controls{display:flex!important;justify-content:flex-start!important;overflow-x:auto!important;gap:8px!important;padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px))!important;min-height:78px!important;scrollbar-width:none!important}
  .nx66-controls::-webkit-scrollbar{display:none}
  .nx66-controls button{flex:1 0 66px!important;min-width:66px!important;min-height:58px!important;padding:7px!important}
  .nx68-security-badge{margin:5px 8px!important;width:calc(100% - 16px)!important;min-height:42px!important;padding:6px 9px!important;font-size:11px!important}
  .nx68-security-panel{inset:calc(var(--nx80-mobile-top) + 6px) 8px calc(82px + env(safe-area-inset-bottom,0px)) 8px!important;width:auto!important;max-width:none!important}

  /* Bottom app navigation. Hidden inside Messages because Messages owns its own mobile nav. */
  .nx80-bottom-nav{display:grid!important;position:fixed!important;z-index:4500!important;left:0!important;right:0!important;bottom:0!important;height:calc(var(--nx80-mobile-bar) + var(--nx80-safe-bottom))!important;padding:4px 4px var(--nx80-safe-bottom)!important;grid-template-columns:repeat(5,1fr)!important;background:rgba(6,47,38,.98)!important;border-top:1px solid rgba(222,177,61,.28)!important;box-shadow:0 -9px 24px rgba(0,0,0,.16)!important;backdrop-filter:blur(16px)!important}
  .nx80-bottom-nav button{border:0!important;background:transparent!important;color:#d7dfd9!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-width:0!important;min-height:58px!important;padding:3px 1px!important;border-radius:10px!important;font-size:10px!important;font-weight:750!important;cursor:pointer!important}
  .nx80-bottom-nav button i{font-style:normal!important;font-size:20px!important;line-height:1!important;color:#f1cf68!important}
  .nx80-bottom-nav button.active{color:#ffe394!important;background:rgba(215,166,22,.12)!important}
  .nx80-bottom-nav button.active i{color:#ffce3f!important}
  body.nx47-messages-active>.nx80-bottom-nav,body.nx47-messages-active .nx80-bottom-nav{display:none!important}

  /* Dialogs become mobile bottom sheets and remain scrollable above the keyboard. */
  dialog#modal{padding:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;background:rgba(4,28,23,.45)!important}
  dialog#modal[open]{display:flex!important;align-items:flex-end!important;justify-content:center!important}
  .modal-card{width:100%!important;max-width:100%!important;max-height:90dvh!important;margin:0!important;padding:22px 16px calc(22px + env(safe-area-inset-bottom,0px))!important;border-radius:22px 22px 0 0!important;overflow-y:auto!important;overscroll-behavior:contain!important}
  .modal-close{width:44px!important;height:44px!important;right:8px!important;top:6px!important;display:grid!important;place-items:center!important}
  .modal-card input,.modal-card select,.modal-card textarea{min-height:44px!important}
  .toast{left:12px!important;right:12px!important;bottom:calc(var(--nx80-mobile-bar) + 12px + var(--nx80-safe-bottom))!important;width:auto!important;text-align:center!important;font-size:12px!important}
}

@media (max-width:480px){
  :root{--nx80-mobile-bar:64px;--nx80-mobile-top:56px}
  .topbar .nxtkin-brand-image img{width:101px!important;max-width:101px!important}
  .topbar .icon-btn:nth-of-type(2){display:none!important}
  .memory-library{grid-template-columns:1fr!important}
  .memory-tile img{height:190px!important}
  .nx69-hero-actions{grid-template-columns:1fr!important}
  .nx69-masonry{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .nx69-album-grid,.nx69-album-grid-large,.nx69-people-grid,.nx69-place-grid{grid-template-columns:1fr!important}
  .nx63-palette-items{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .nx60-controller{transform:scale(.58)!important}
  .nx60-actions{transform:scale(.62)!important}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:950px){
  :root{--nx80-mobile-top:48px;--nx80-mobile-bar:56px}
  .topbar{height:48px!important;min-height:48px!important;padding-block:2px!important}
  .topbar .nxtkin-brand-image img{max-height:34px!important}
  .nx80-menu-btn{width:38px!important;height:38px!important}
  .tree-canvas{min-height:520px!important}
  .nx66-header{min-height:52px!important;padding:5px 10px!important}
  .nx66-controls{min-height:60px!important;padding-block:5px!important}
  .nx66-controls button{min-height:48px!important}
}

@media (prefers-reduced-motion:reduce){
  .sidebar.leftbar,.nx80-menu-scrim{transition:none!important}
}

/* Public/auth/admin safety net: these selectors are inert when the page does not use them. */
@media (max-width:820px){
  .auth-card,.join-card,.invite-card,.forgot-card,.reset-card,body>.card{width:calc(100% - 22px)!important;max-width:560px!important;margin:11px auto!important;padding:20px 16px!important;border-radius:16px!important}
  .auth-card h1,.join-card h1,.invite-card h1,.forgot-card h1,.reset-card h1,body>.card h1{font-size:27px!important;line-height:1.1!important}
  .auth-tabs{grid-template-columns:1fr 1fr!important}
  .actions{display:grid!important;grid-template-columns:1fr!important}
  .actions a,.actions button{width:100%!important;min-height:44px!important;text-align:center!important}
  .nxtkin-admin-shell{width:100%!important;max-width:100vw!important;min-width:0!important}
  .nxtkin-admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .nxtkin-admin-grid,.nxtkin-admin-panels{grid-template-columns:1fr!important}
  .nxtkin-admin-table-wrap,.admin-table-wrap,.table-wrap{width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .nxtkin-admin-table{min-width:720px!important}
  .nxtkin-admin-setting{align-items:flex-start!important;gap:12px!important}
}
@media (max-width:480px){.nxtkin-admin-stats{grid-template-columns:1fr!important}}