/* VibeHQ mobile layout. Desktop styles remain unchanged; these rules are the
   responsive layout used by phones and by the Android app. */
@media (max-width: 720px){
  :root{--mobile-nav-height:68px;--mobile-gutter:12px}
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}
  #siteShell{width:100%;min-width:0}

  /* Phone navigation: the desktop header is replaced by the bottom bar. */
  .topbar{display:none!important}
  .mobile-bottom-nav{display:grid!important}

  #app{width:100%;max-width:none;margin:0;padding:16px var(--mobile-gutter) calc(var(--mobile-nav-height) + 22px);}
  .page{width:100%;min-width:0}
  .page-head{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-bottom:16px}
  .page-head h1{font-size:28px;line-height:1.12;margin:5px 0}
  .page-head .btn{width:100%;justify-content:center}

  .feed{width:100%;max-width:none;gap:10px}
  .post{width:100%;max-width:none;padding:14px;border-radius:16px}
  .post-text{font-size:15px;line-height:1.55;margin:13px 0}
  .post-media{width:100%;height:auto;max-height:none;border-radius:12px}

  .panel{max-width:none;border-radius:16px}
  .search-box{display:grid;grid-template-columns:1fr;gap:9px}
  .search-box .btn{width:100%}
  .user-grid,.group-grid{grid-template-columns:1fr;width:100%}
  .user-card,.conversation{width:100%;min-width:0}
  .layout-grid{grid-template-columns:1fr 1fr;gap:9px}
  .layout-option{min-width:0}
  .layout-card-actions{display:grid;grid-template-columns:1fr;gap:7px}
  .layout-card-actions .btn{width:100%}

  /* All profile/layout template shells collapse to the phone width. */
  .site-layout-shell,.site-layout-shell #app{width:100%;max-width:none;padding-left:0;padding-right:0}
  .layout-banner,.layout-top,.layout-masthead,.layout-rule,.layout-hero,.layout-split,
  .layout-frame,.portal-grid,.retro-body,.scrap-grid,.terminal-grid,.magazine-cover,
  .layout-columns{width:100%;max-width:none;margin-left:0;margin-right:0}
  .layout-columns,.layout-columns.two-left,.layout-columns.two-right,
  .newspaper-columns,.portal-grid,.retro-body,.scrap-grid,.terminal-grid,
  .layout-split,.layout-frame-body{grid-template-columns:1fr}
  .layout-sidebar{width:100%}
  .layout-split>.layout-sidebar,.layout-frame-body>.layout-sidebar{border-right:0;border-bottom:1px solid var(--theme-line)}
  .layout-masthead span{font-size:34px}
  .layout-hero strong{font-size:38px}
  .magazine-cover span,.magazine-cover>b{font-size:48px}

  .profile-columns{grid-template-columns:1fr;gap:10px}
  .profile-columns>aside:last-child{grid-column:auto}
  .profile-intro{padding:16px}
  .profile-top .avatar{width:84px;height:84px}
  .profile-actions{grid-template-columns:1fr}
  .app-card{padding:20px;display:flex;flex-direction:column;gap:20px}

  .modal-backdrop{padding:0;align-items:end}
  .modal{width:100%;max-width:none;max-height:90dvh;border-radius:20px 20px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));}
  .modal .input{font-size:16px}
  .toast{bottom:calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom));max-width:calc(100% - 24px);text-align:center}

  input,textarea,select{font-size:16px!important}
  img,video{max-width:100%}

  .mobile-bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    height:var(--mobile-nav-height);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    grid-template-columns:repeat(5,1fr);gap:4px;
    background:rgba(5,11,20,.97);
    border-top:1px solid var(--line);
    box-shadow:0 -10px 35px rgba(0,0,0,.32);
    backdrop-filter:blur(18px);
  }
  .mobile-bottom-nav button{
    min-width:0;border:0;background:transparent;border-radius:13px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:#8ca4b8;font-size:10px;font-weight:800;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-bottom-nav button span:first-child{font-size:21px;line-height:1}
  .mobile-bottom-nav button.active{color:#fff;background:#ffffff10}
  .mobile-bottom-nav button[data-action="status"]{color:#fff}
  .mobile-bottom-nav button[data-action="status"] span:first-child{
    width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,#27d9ff,#4d6cff 55%,#a64dff);
    box-shadow:0 5px 18px rgba(77,108,255,.35);font-size:22px;
  }
}
@media (max-width:380px){
  #app{padding-left:8px;padding-right:8px}
  .mobile-bottom-nav{padding-left:4px;padding-right:4px}
  .mobile-bottom-nav button{font-size:9px}
}
@media (max-width:720px){body:not(.is-authenticated) .mobile-bottom-nav{display:none!important}}

@media (max-width:720px){
  body{
    padding-bottom:0!important;
  }

  .topbar{
    display:flex!important;
    position:sticky!important;
    top:0!important;
    z-index:80!important;
    width:100%!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
  }

  .mobile-bottom-nav{
    display:none!important;
  }

  #app{
    padding-bottom:22px!important;
  }
}