/* GeoHub Step 6 — production responsive / overlay polish
   This file is intentionally loaded last so it can normalize old page-specific CSS. */
:root{
  --gh-mobile-nav-h: 68px;
  --gh-safe-bottom: env(safe-area-inset-bottom, 0px);
  --gh-safe-top: env(safe-area-inset-top, 0px);
  --gh-overlay-z: 9000;
  --gh-chat-z: 2147483000;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{min-width:0;overflow-x:hidden;}
img,video,canvas,svg{max-width:100%;height:auto;}
button,a,input,textarea,select{touch-action:manipulation;}
*{box-sizing:border-box;}

/* Shared responsive containers */
.container,.page-container,.main-container,.content-container,.feed-shell,.profile-shell,.admin-main,.dashboard-main,.section-inner{
  max-width: min(1180px, calc(100vw - 32px));
  margin-left:auto;
  margin-right:auto;
}
.card,.panel,.widget,.glass-card,.post-card,.story-card,.group-card,.event-card,.place-card,.business-card,.reward-card,.creator-card{
  min-width:0;
  overflow-wrap:anywhere;
}

/* Header / nav stability */
.site-header,.navbar,.topbar,.main-header,.feed-topbar,.social-header{
  max-width:100vw;
}
.navbar,.nav-inner,.site-nav,.header-inner,.feed-topbar,.social-header{
  min-width:0;
}
.navbar a,.site-nav a,.header-actions a,.header-actions button{
  white-space:nowrap;
}

/* Generic overlays/modals: keep inside viewport and above page chrome */
.modal-overlay,.auth-modal-overlay,.cm-overlay,.gh-modal-overlay,.app-action-overlay,.story-viewer-overlay,.stories-viewer-overlay,.admin-sidebar-overlay,.notification-panel-overlay{
  z-index:var(--gh-overlay-z)!important;
}
.modal-card,.auth-modal-card,.cm-modal,.gh-modal,.chal-modal,.create-event-modal,.ev-detail-modal,.admin-drawer,.notification-panel,.notif-panel{
  max-width:min(94vw, 760px)!important;
  max-height:calc(100dvh - 32px)!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch;
}
body.gh-overlay-open{overflow:hidden!important;}
body.gh-overlay-open .app-bottom-nav{pointer-events:none;}

/* Messenger should not cover mobile bottom navigation and should not appear on full messages page. */
body.messages-page #ghChatPopRoot,
body[data-page="messages"] #ghChatPopRoot,
html[data-page="messages"] #ghChatPopRoot{display:none!important;}
#ghChatPopRoot.gh-chat-pop-root{
  right:18px!important;
  bottom:calc(18px + var(--gh-safe-bottom))!important;
  z-index:var(--gh-chat-z)!important;
}
.gh-chat-pop{
  width:min(370px, calc(100vw - 24px))!important;
  height:min(560px, calc(100dvh - 96px - var(--gh-safe-bottom)))!important;
}
.gh-chat-body,.messages-list,.chat-messages{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.gh-chat-bubble,.msg-bubble,.message-bubble{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.gh-chat-img,.msg-image,.message-image,.msg-bubble img,.gh-chat-bubble img{
  max-width:min(300px, 70vw)!important;
  max-height:260px!important;
  border-radius:14px!important;
  object-fit:cover!important;
}

/* Floating panels cannot escape screen */
.emoji-picker-wrap,.gh-chat-emoji-panel,.msg-reaction-picker,.gh-chat-reaction-panel,.dropdown-menu,.user-menu,.lang-menu,.notification-panel,.notif-panel{
  max-width:calc(100vw - 24px)!important;
}
.notification-panel,.notif-panel{
  right:12px!important;
  left:auto!important;
  width:min(380px, calc(100vw - 24px))!important;
  max-height:calc(100dvh - 96px)!important;
  overflow:auto!important;
}

/* Stories viewer: stable full-screen overlay */
.gh-story-viewer,.stories-viewer,.story-viewer{
  position:fixed!important;
  inset:0!important;
  z-index:calc(var(--gh-overlay-z) + 50)!important;
  max-width:none!important;
  max-height:none!important;
}
.gh-story-viewer img,.stories-viewer img,.story-viewer img{
  max-height:82dvh!important;
  object-fit:contain!important;
}

@media (max-width: 900px){
  .container,.page-container,.main-container,.content-container,.feed-shell,.profile-shell,.admin-main,.dashboard-main,.section-inner{
    max-width:calc(100vw - 24px)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .grid,.cards-grid,.stats-grid,.features-grid,.places-grid,.groups-grid,.events-grid,.business-grid,.rewards-grid,.creators-grid,.dashboard-grid{
    grid-template-columns:1fr!important;
  }
  .two-col,.split-layout,.profile-layout,.feed-layout,.admin-layout,.messages-layout{
    display:block!important;
  }
  body.page-messages .messages-layout{
    display:grid!important;
  }
  .sidebar,.left-sidebar,.right-sidebar,.feed-sidebar,.profile-sidebar{
    width:100%!important;
    max-width:none!important;
    position:static!important;
  }
}

@media (max-width: 768px){
  html,body{max-width:100vw;overflow-x:hidden!important;}
  .navbar{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    width:100%!important;
    padding:0 12px!important;
  }
  .navbar .navbar-links,
  .navbar .navbar-actions a:not(.nav-profile-icon):not([href*="profile"]),
  .navbar .btn:not(.nav-profile-icon){
    display:none!important;
  }
  .navbar-brand{min-width:0!important;flex:1 1 auto!important;}
  .navbar-brand .logo-text{font-size:1rem!important;white-space:nowrap!important;}
  .hamburger{display:inline-flex!important;flex:0 0 auto!important;}
  .gh-topbar{
    grid-template-columns:auto 1fr auto!important;
    width:100vw!important;
    max-width:100vw!important;
    padding:0 10px!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  .gh-brand{min-width:0!important;width:auto!important;}
  .gh-brand span{display:inline!important;font-size:1rem!important;white-space:nowrap!important;}
  .gh-top-search,
  .gh-top-actions a[title="Home"],
  .gh-top-actions a[title="Discover"],
  .gh-top-actions a[title="Messages"],
  .gh-top-actions .gh-create-btn,
  .gh-top-actions .gh-theme-toggle{
    display:none!important;
  }
  .gh-top-actions{gap:6px!important;min-width:0!important;}
  .gh-icon-btn,.gh-user-btn{width:42px!important;min-width:42px!important;padding:0!important;}
  .gh-user-btn span:not(.gh-avatar){display:none!important;}
  body{
    padding-bottom:calc(var(--gh-mobile-nav-h) + var(--gh-safe-bottom) + 12px)!important;
  }
  .hide-mobile{display:none!important;}
  .show-mobile{display:block!important;}
  .hero,.page-hero,.section{padding-left:14px!important;padding-right:14px!important;}
  h1{font-size:clamp(1.75rem, 8vw, 2.55rem)!important;line-height:1.08!important;}
  h2{font-size:clamp(1.35rem, 6vw, 2rem)!important;line-height:1.14!important;}
  .btn,button,.button,[role="button"]{min-height:42px;}
  input,select,textarea{font-size:16px!important;max-width:100%;}
  .table-wrap,table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .app-bottom-nav{z-index:1200!important;}
  #ghChatPopRoot.gh-chat-pop-root{
    right:12px!important;
    bottom:calc(var(--gh-mobile-nav-h) + var(--gh-safe-bottom) + 14px)!important;
  }
  #ghChatPopRoot .gh-chat-pop-btn{
    width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;padding:0!important;
  }
  #ghChatPopRoot .gh-chat-pop-btn span:not(.dot){display:none!important;}
  .gh-chat-pop{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(var(--gh-mobile-nav-h) + var(--gh-safe-bottom) + 10px)!important;
    width:calc(100vw - 20px)!important;
    height:min(72dvh, 560px)!important;
    border-radius:18px!important;
  }
  .gh-chat-toast{
    left:10px!important;
    right:10px!important;
    bottom:calc(var(--gh-mobile-nav-h) + var(--gh-safe-bottom) + 76px)!important;
    width:auto!important;
  }
  .notification-panel,.notif-panel{
    top:calc(60px + var(--gh-safe-top))!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-height:calc(100dvh - 92px - var(--gh-mobile-nav-h))!important;
  }
  .modal-overlay,.auth-modal-overlay,.cm-overlay,.gh-modal-overlay,.app-action-overlay{
    padding:10px!important;
    align-items:flex-end!important;
  }
  .modal-card,.auth-modal-card,.cm-modal,.gh-modal,.chal-modal,.create-event-modal,.ev-detail-modal{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 24px - var(--gh-safe-bottom))!important;
    border-radius:18px 18px 0 0!important;
  }
  .emoji-picker-wrap,.gh-chat-emoji-panel{
    left:8px!important;right:8px!important;max-width:none!important;
    bottom:56px!important;
  }
  .msg-reaction-picker,.gh-chat-reaction-panel{
    right:auto!important;left:0!important;transform:none!important;
  }
  .gh-chat-img,.msg-image,.message-image,.msg-bubble img,.gh-chat-bubble img{
    max-width:68vw!important;
    max-height:220px!important;
  }
}

@media (max-width: 420px){
  .card,.panel,.widget,.post-card,.story-card,.group-card,.event-card,.place-card,.business-card{border-radius:16px!important;}
  .hero,.page-hero,.section{padding-left:10px!important;padding-right:10px!important;}
  .gh-chat-pop{left:6px!important;right:6px!important;width:calc(100vw - 12px)!important;height:min(76dvh, 560px)!important;}
  .gh-chat-msg-wrap{max-width:86%!important;}
  .msg-bubble-wrap{max-width:86%!important;}
}