/* Vchat Learning Hub 2.3 — mobile header + native language flags */

/* Language switch: use the operating system's native flag emoji instead of drawn approximations. */
.lang-switch{
  gap:7px;
  min-width:68px;
  padding:0 11px;
}
.lang-switch .lang-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  letter-spacing:0;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  flex:0 0 auto;
}
.lang-switch .lang-code{
  line-height:1;
}

/* Mobile header: keep navigation visible and turn the large search field into a compact icon. */
@media (max-width:860px){
  :root{--topbar:64px}

  .topbar{
    display:flex !important;
    align-items:center !important;
    height:var(--topbar) !important;
    padding:0 12px !important;
    gap:8px !important;
    overflow:visible !important;
  }

  .topbar .hub-tabs{display:none !important}

  .brand-wrap{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    order:1;
  }

  .brand{
    min-width:0 !important;
    max-width:100%;
  }

  .brand-copy{
    min-width:0;
  }

  .top-actions{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    flex:0 0 auto !important;
    order:2;
  }

  .search-trigger{
    position:static !important;
    inset:auto !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    padding:0 !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:12px !important;
    box-shadow:none !important;
    background:var(--panel) !important;
    cursor:pointer !important;
    flex:0 0 40px !important;
    order:3;
  }

  .search-trigger span,
  .search-trigger kbd{
    display:none !important;
  }

  .search-trigger svg{
    width:19px !important;
    height:19px !important;
    margin:0 !important;
  }

  .top-actions .app-link,
  .top-actions .progress-link{
    display:none !important;
  }

  .lang-switch{
    min-width:64px !important;
    height:40px !important;
    padding:0 9px !important;
    gap:6px !important;
    border-radius:12px !important;
  }

  .lang-switch .lang-flag{font-size:17px}
  .lang-switch .lang-code{font-size:10px}

  .icon-btn{
    width:40px;
    height:40px;
  }

  /* Existing modal becomes the full search experience on phones/tablets. */
  .search-panel{
    width:min(720px,calc(100% - 24px)) !important;
    margin:max(16px,env(safe-area-inset-top)) auto 0 !important;
    max-height:calc(100dvh - max(32px,env(safe-area-inset-top))) !important;
    border-radius:18px !important;
  }

  .search-box{
    min-height:62px;
  }

  .search-box input{
    min-width:0;
    font-size:16px; /* avoids iOS form zoom */
  }
}

@media (max-width:540px){
  .topbar{
    padding-left:10px !important;
    padding-right:10px !important;
    gap:6px !important;
  }

  .brand-wrap{gap:6px !important}
  .brand-copy strong{font-size:17px !important}
  .brand-logo-shell{width:31px;height:31px;flex-basis:31px}

  .mobile-only,
  .top-actions .icon-btn,
  .search-trigger{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
  }

  .search-trigger{flex-basis:38px !important}

  .lang-switch{
    min-width:58px !important;
    height:38px !important;
    padding:0 7px !important;
    gap:5px !important;
  }

  .lang-switch .lang-flag{font-size:16px}
  .lang-switch .lang-code{font-size:9.5px}
}

@media (max-width:390px){
  .brand-copy strong{font-size:16px !important}
  .brand-logo-shell{width:29px;height:29px;flex-basis:29px}
  .lang-switch{min-width:52px !important;padding:0 6px !important}
  .lang-switch .lang-code{font-size:9px}
  .top-actions{gap:4px !important}
}