/* GridCircle experimental mobile social-app shell
   Loaded only at <= 800px. Desktop remains unchanged. */

:root{--gc-mobile-nav-h:66px;--gc-mobile-header-h:58px}
html,body{overscroll-behavior-y:none}
body{-webkit-tap-highlight-color:transparent}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}

/* App canvas */
.app-view{background:#eef1f4;min-height:100dvh}
.app-view .app-shell{width:100%!important;max-width:680px!important;margin:0 auto!important;padding:0 0 calc(var(--gc-mobile-nav-h) + env(safe-area-inset-bottom) + 12px)!important}
.app-view .main-content{width:100%;min-width:0;padding-bottom:0!important}
.app-view .page{padding:12px}
.app-view #feed-page{padding:0}
.app-view .right-sidebar,.app-view .left-sidebar{display:none!important}

/* Native-feeling top app bar */
.app-view .app-header{height:calc(var(--gc-mobile-header-h) + env(safe-area-inset-top))!important;padding-top:env(safe-area-inset-top);background:rgba(255,255,255,.96);border-bottom:1px solid #e4e8ec;box-shadow:0 1px 6px rgba(9,40,68,.045);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px)}
.app-view .app-header-inner{height:var(--gc-mobile-header-h)!important;width:100%!important;padding:0 12px;margin:0;display:flex!important;align-items:center;justify-content:space-between;gap:8px}
.app-view .brand.compact{min-width:0;gap:8px}
.app-view .brand.compact .brand-mark{width:35px;height:35px;border-radius:10px;box-shadow:none}
.app-view .brand.compact .brand-copy{display:flex!important;min-width:0}
.app-view .brand.compact .brand-copy strong{font-size:20px;letter-spacing:-.55px;white-space:nowrap}
.app-view .brand.compact .brand-copy small{display:none}
.app-view .header-actions{gap:2px;flex:0 0 auto}
.app-view .header-actions .icon-btn{width:39px;height:39px;border-radius:50%;color:#354456}
.app-view .header-actions .icon-btn:active{background:#edf1f3;transform:scale(.96)}
.app-view .profile-menu-btn{width:39px;height:39px;padding:2px!important;border-radius:50%;display:grid;place-items:center}
.app-view .profile-menu-btn .avatar-sm{width:35px;height:35px;border:2px solid #e2e8e6}
.app-view .profile-menu-btn>span:nth-child(2),.app-view .profile-menu-btn>svg{display:none!important}
.app-view .global-search-wrap{display:none!important}
.app-view .mobile-search{display:grid!important}

/* Account menu is roomy like an app popover */
.app-view #profile-dropdown{top:calc(100% + 7px)!important;right:0;min-width:285px;max-width:calc(100vw - 20px);border-radius:17px;padding:8px;border:1px solid #e2e7e5;box-shadow:0 18px 50px rgba(9,31,50,.18)}
.app-view #profile-dropdown>button{min-height:43px;border-radius:11px;font-size:13px;padding:10px 11px}
.app-view .profile-switcher{padding-bottom:5px}

/* Bottom navigation: five true primary app destinations */
.app-view .mobile-nav{height:calc(var(--gc-mobile-nav-h) + env(safe-area-inset-bottom))!important;padding:0 7px env(safe-area-inset-bottom)!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;background:rgba(255,255,255,.97);border-top:1px solid #dde3e6;box-shadow:0 -5px 18px rgba(9,40,68,.07);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);align-items:stretch}
.app-view .mobile-nav button{height:var(--gc-mobile-nav-h)!important;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#687585;font-size:10px!important;font-weight:650;position:relative;padding:5px 2px}
.app-view .mobile-nav button span{font-size:10px!important;line-height:1!important;letter-spacing:-.1px}
.app-view .mobile-nav button svg{width:22px!important;height:22px!important;stroke-width:2}
.app-view .mobile-nav button.active{color:var(--primary)}
.app-view .mobile-nav button.active:before{content:"";position:absolute;top:5px;width:24px;height:3px;border-radius:3px;background:var(--primary)}
.app-view .mobile-nav button[data-nav="team"],
.app-view .mobile-nav button[data-nav="jobs"],
.app-view .mobile-nav button[data-nav="profile"]{display:none!important}
.app-view .mobile-nav button[data-nav="feed"]{order:1}
.app-view .mobile-nav button[data-nav="network"]{order:2}
.app-view .mobile-nav .mobile-create{order:3!important;width:auto!important;height:var(--gc-mobile-nav-h)!important;margin:0!important;border-radius:0!important;background:none!important;color:#687585!important;box-shadow:none!important;gap:2px!important}
.app-view .mobile-nav .mobile-create:before{display:none!important}
.app-view .mobile-nav .mobile-create svg{width:43px!important;height:43px!important;padding:10px;border-radius:50%;background:linear-gradient(135deg,#0aa477,#087657);color:#fff;box-shadow:0 5px 14px rgba(10,147,108,.28);stroke-width:2.4}
.app-view .mobile-nav .mobile-create:active svg{transform:scale(.94)}
.app-view .mobile-nav .mobile-create span{font-size:9px!important;font-weight:750;color:#526170;margin-top:-1px}
.app-view .mobile-nav button[data-nav="explore"]{order:4}
.app-view .mobile-nav button[data-nav="messages"]{order:5}

/* Feed behaves like a dedicated social timeline */
.app-view #feed-page .mobile-page-title,.app-view #feed-page .feed-intro{display:none!important}
.app-view #feed-page .composer{margin:8px 0;background:#fff;border-left:0;border-right:0;border-radius:0;padding:12px 14px}
.app-view #feed-page .composer-top{gap:10px}
.app-view #feed-page .composer-top .avatar{width:40px;height:40px}
.app-view #feed-page .composer-top button{height:42px;background:#f4f6f7;border:1px solid #e4e8ea;border-radius:22px;font-size:13px;color:#788493}
.app-view #feed-page .composer-actions{margin-top:10px;padding-top:8px;grid-template-columns:repeat(6,1fr)!important;overflow:hidden}
.app-view #feed-page .composer-actions button{padding:6px 2px;min-width:0;font-size:0!important}
.app-view #feed-page .composer-actions svg{width:20px!important;height:20px!important}
.app-view #feed-page .feed-filter{position:sticky;top:calc(var(--gc-mobile-header-h) + env(safe-area-inset-top));z-index:25;margin:0;background:rgba(255,255,255,.97);display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #eef1f2;border-bottom:1px solid #dde3e5;padding:0 8px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.app-view #feed-page .feed-filter button{padding:12px 2px 11px;text-align:center;font-size:12px}
.app-view #feed-page .feed-filter button svg{display:none}
.app-view #feed-page .feed-list{gap:8px;background:#eef1f4;padding:8px 0 0}
.app-view #feed-page .post-card{border-radius:0;border-left:0;border-right:0;padding:14px 14px 12px;box-shadow:none}
.app-view #feed-page .post-author{gap:9px}
.app-view #feed-page .post-author>.avatar{width:42px;height:42px}
.app-view #feed-page .post-author strong{font-size:14px}
.app-view #feed-page .post-author p{font-size:10.5px;margin-top:2px}
.app-view #feed-page .post-body{font-size:14.5px;line-height:1.5;margin:12px 0}
.app-view #feed-page .post-stats{font-size:10.5px;padding:7px 1px 9px}
.app-view #feed-page .post-actions{grid-template-columns:repeat(4,1fr)!important;padding:2px 0}
.app-view #feed-page .post-actions button{min-height:40px;padding:7px 2px;font-size:10px!important;gap:4px}
.app-view #feed-page .post-actions svg{width:18px;height:18px}
.app-view #feed-page .comment-compose input{font-size:16px}
.app-view #feed-page .hashtag-filter-bar{margin:0;border-radius:0;border-left:0;border-right:0}
.app-view #feed-page .post-media{margin-left:-14px;margin-right:-14px}

/* Other app sections get a clean mobile canvas */
.app-view .page:not(#feed-page)>.mobile-page-title{margin:4px 2px 12px}
.app-view .page:not(#feed-page)>.mobile-page-title h1{font-size:24px;letter-spacing:-.5px;color:var(--navy)}
.app-view .page:not(#feed-page) .card{box-shadow:none}
.app-view .explore-tabs,.app-view .team-workspace-tabs{scroll-snap-type:x proximity}
.app-view .explore-tabs button,.app-view .team-workspace-tabs button{scroll-snap-align:start}

/* Messages fill the available app viewport */
.app-view .messages-layout{min-height:calc(100dvh - var(--gc-mobile-header-h) - var(--gc-mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)!important;border-radius:14px;overflow:hidden}
.app-view .chat-window{height:calc(100dvh - var(--gc-mobile-header-h) - var(--gc-mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px)!important}

/* Touch-sized controls */
.app-view .btn{min-height:42px}
.app-view input,.app-view textarea,.app-view select,.modal input,.modal textarea,.modal select{font-size:16px!important}
.app-view textarea{line-height:1.45}
.app-view button{touch-action:manipulation}

/* Mobile popups behave like native bottom sheets */
.modal-backdrop{padding:0!important;place-items:end center!important;background:rgba(7,19,31,.54);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal{width:100%!important;max-width:680px!important;max-height:calc(92dvh - env(safe-area-inset-top))!important;border-radius:22px 22px 0 0!important;padding:22px 16px calc(22px + env(safe-area-inset-bottom))!important;box-shadow:0 -18px 55px rgba(4,19,31,.24)!important;animation:gcSheetUp .22s cubic-bezier(.22,.8,.3,1)}
.modal:before{content:"";display:block;width:38px;height:4px;border-radius:4px;background:#d7dde0;margin:-10px auto 14px}
.modal-header{margin-bottom:18px!important;gap:12px!important}
.modal-header h2{font-size:20px!important}
.modal-header .modal-subtitle{font-size:12px!important;line-height:1.45!important}
.modal-close{border-radius:50%!important;background:#eef1f3!important}
@keyframes gcSheetUp{from{transform:translateY(18px);opacity:.65}to{transform:translateY(0);opacity:1}}

/* Prevent horizontal layout shifts and keep touch content readable */
.app-view img,.app-view video{max-width:100%}
.app-view .card,.app-view .post-card,.app-view .profile-card{max-width:100%}
.app-view .toast-root{bottom:calc(var(--gc-mobile-nav-h) + env(safe-area-inset-bottom) + 8px)}

/* Slightly tighter treatment on smaller phones */
@media(max-width:430px){
  .app-view .brand.compact .brand-copy strong{font-size:18px}
  .app-view .brand.compact .brand-mark{width:33px;height:33px}
  .app-view .header-actions .icon-btn,.app-view .profile-menu-btn{width:37px;height:37px}
  .app-view #feed-page .post-actions button{font-size:9.5px!important}
  .app-view .page{padding:10px}
  .app-view #feed-page{padding:0}
}

/* Home Screen / installed PWA refinements */
@media(display-mode:standalone){
  .app-view{min-height:100dvh}
  .app-view .app-header{box-shadow:none}
  .app-view .mobile-nav{box-shadow:0 -4px 14px rgba(9,40,68,.06)}
}