/* MeetOS PWA / mobile app shell ------------------------------------------------
   Mobile-only presentation. Desktop remains untouched. */

.pwa-install-row{
  width:100%;
  border:0;
  font:inherit;
  text-align:inherit;
  cursor:pointer;
}
.pwa-install-row[hidden]{display:none!important}
.pwa-install-chevron{color:var(--muted);font-size:11px}

.pwa-help-sheet{position:fixed;inset:0;z-index:1000;pointer-events:none}
.pwa-help-backdrop{position:absolute;inset:0;border:0;background:rgba(4,6,12,.5);opacity:0;transition:opacity .22s ease}
.pwa-help-card{position:absolute;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:480px;margin:auto;padding:12px 20px 20px;border:1px solid color-mix(in srgb,var(--gold) 18%,var(--line));border-radius:28px;background:color-mix(in srgb,var(--panel) 88%,transparent);box-shadow:0 28px 80px rgba(0,0,0,.34);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);transform:translateY(calc(100% + 40px));transition:transform .28s cubic-bezier(.22,.8,.24,1);text-align:center;color:var(--text)}
.pwa-help-sheet.is-open{pointer-events:auto}.pwa-help-sheet.is-open .pwa-help-backdrop{opacity:1}.pwa-help-sheet.is-open .pwa-help-card{transform:none}
.pwa-help-grabber{width:42px;height:4px;border-radius:99px;margin:0 auto 15px;background:color-mix(in srgb,var(--muted) 32%,transparent)}
.pwa-help-icon{width:52px;height:52px;margin:0 auto 12px;border-radius:17px;display:grid;place-items:center;color:#fff;background:var(--accent-gradient);box-shadow:0 12px 28px rgba(var(--gold-rgb),.25)}
.pwa-help-card h2{margin:0;font-size:20px;letter-spacing:-.025em}.pwa-help-card p{margin:8px auto 16px;max-width:330px;color:var(--muted);font-size:13px;line-height:1.6}.pwa-help-close{min-height:46px;width:100%;border:0;border-radius:15px;color:#fff;background:var(--accent-gradient);font:inherit;font-weight:850;cursor:pointer}

@media(max-width:820px){
  html{background:var(--bg);overscroll-behavior:none}
  body.app-page{
    min-height:100dvh;
    background:var(--bg);
    overscroll-behavior-y:none;
    -webkit-tap-highlight-color:transparent;
  }
  body.app-page .app-shell{
    height:100dvh;
    min-height:100dvh;
    display:block;
  }
  body.app-page .app-sidebar{display:none!important}
  body.app-page .app-main{
    height:100dvh;
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    padding-bottom:calc(108px + env(safe-area-inset-bottom));
    scroll-padding-bottom:calc(116px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 90% -8%,rgba(var(--gold-rgb),.12),transparent 24rem),
      radial-gradient(circle at -10% 45%,rgba(var(--gold-rgb),.045),transparent 20rem),
      var(--bg);
  }
  body.app-page .app-content{
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:18px 14px calc(26px + env(safe-area-inset-bottom));
  }

  /* Compact app-like top bar with safe-area support. */
  body.app-page .account-topbar,
  body.app-page .app-topbar{
    position:sticky;
    top:0;
    z-index:55;
    min-height:calc(66px + env(safe-area-inset-top));
    height:auto;
    padding:calc(9px + env(safe-area-inset-top)) 11px 9px;
    border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);
    background:color-mix(in srgb,var(--bg) 64%,transparent);
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    backdrop-filter:blur(26px) saturate(165%);
    -webkit-backdrop-filter:blur(26px) saturate(165%);
  }
  html[data-theme="light"] body.app-page .account-topbar,
  html[data-theme="light"] body.app-page .app-topbar{
    background:rgba(248,249,253,.72);
    box-shadow:0 10px 30px rgba(30,35,48,.07);
  }
  body.app-page .account-topbar .profile-chip,
  body.app-page .account-topbar .minutes-badge,
  body.app-page .account-topbar .notification-bell,
  body.app-page .mobile-topbar-menu-toggle{
    border-radius:16px;
    border-color:color-mix(in srgb,var(--line) 72%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,transparent);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.06);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  body.app-page .mobile-topbar-menu-panel{
    border-radius:22px;
    background:color-mix(in srgb,var(--panel) 82%,transparent);
    box-shadow:0 22px 65px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(28px) saturate(175%);
    -webkit-backdrop-filter:blur(28px) saturate(175%);
  }

  /* More app-like content rhythm. */
  body.app-page .content-page-head{margin-bottom:16px}
  body.app-page .content-page-title h1{font-size:clamp(25px,7.4vw,31px);line-height:1.05;letter-spacing:-.04em}
  body.app-page .content-page-title p{font-size:12px;line-height:1.55}
  body.app-page .panel,
  body.app-page .metric-card,
  body.app-page .quick-card,
  body.app-page .account-hero,
  body.app-page .account-section,
  body.app-page .history-overview-card,
  body.app-page .meeting-card{
    border-radius:22px;
  }

  /* Floating rounded glass tab bar. */
  body.app-page .mobile-app-nav{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    z-index:90;
    width:min(calc(100vw - 20px),520px);
    height:74px;
    padding:7px 8px;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
    overflow:visible;
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    background:rgba(17,20,29,.66);
    box-shadow:0 24px 60px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    transform:translateX(-50%);
    isolation:isolate;
  }
  body.app-page .mobile-app-nav::before{
    content:"";
    position:absolute;
    inset:4px;
    z-index:-1;
    border-radius:26px;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
    pointer-events:none;
  }
  html[data-theme="light"] body.app-page .mobile-app-nav{
    border-color:rgba(255,255,255,.82);
    background:rgba(255,255,255,.68);
    box-shadow:0 22px 52px rgba(30,35,48,.16),inset 0 1px 0 rgba(255,255,255,.96);
  }
  html[data-theme="light"] body.app-page .mobile-app-nav::before{
    background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.20));
  }
  body.app-page .mobile-app-nav a{
    position:relative;
    z-index:1;
    min-width:0;
    min-height:58px;
    padding:6px 2px 5px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:color-mix(in srgb,var(--muted) 88%,var(--text));
    transition:transform .16s ease,color .16s ease,background .16s ease;
  }
  body.app-page .mobile-app-nav a span{font-size:18px;line-height:1}
  body.app-page .mobile-app-nav a small{
    max-width:100%;
    font-size:9px;
    line-height:1;
    font-weight:780;
    letter-spacing:-.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.app-page .mobile-app-nav a.active:not(.mobile-nav-hero){
    color:var(--gold);
    background:color-mix(in srgb,var(--gold) 10%,transparent);
  }
  body.app-page .mobile-app-nav a:active{transform:scale(.94)}

  /* Main Translate action: circular floating tab. */
  body.app-page .mobile-app-nav a.mobile-nav-hero,
  body.app-page .mobile-app-nav a.mobile-nav-hero.active{
    width:64px;
    height:64px;
    min-height:64px;
    justify-self:center;
    align-self:center;
    transform:translateY(-11px);
    padding:5px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    color:#fff;
    background:var(--accent-gradient);
    box-shadow:0 14px 30px rgba(var(--gold-rgb),.34),0 0 0 6px color-mix(in srgb,var(--gold) 9%,transparent),inset 0 1px 0 rgba(255,255,255,.35);
  }
  body.app-page .mobile-app-nav a.mobile-nav-hero span{color:#fff;font-size:21px}
  body.app-page .mobile-app-nav a.mobile-nav-hero small{color:#fff;font-size:8px;font-weight:900;overflow:visible}
  body.app-page .mobile-app-nav a.mobile-nav-hero:active{transform:translateY(-9px) scale(.94)}

  /* Admin PWA nav has four items, no central hero. */
  body.app-page .mobile-app-nav.admin-mobile-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.app-page .mobile-app-nav.admin-mobile-nav a{min-height:58px}

  /* Translator gets maximum usable viewport height. */
  body.app-page .translator-workspace{min-height:calc(100dvh - 78px - env(safe-area-inset-top))}
  body.app-page .translator-layout{min-height:calc(100dvh - 158px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}

  body.is-pwa-standalone.app-page .app-main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  body.is-pwa-standalone.app-page .mobile-app-nav{bottom:calc(10px + env(safe-area-inset-bottom))!important}
}

@media(max-width:430px){
  body.app-page .mobile-app-nav{width:calc(100vw - 14px);height:70px;padding-inline:5px;border-radius:27px}
  body.app-page .mobile-app-nav a{border-radius:18px}
  body.app-page .mobile-app-nav a small{font-size:8px}
  body.app-page .mobile-app-nav a.mobile-nav-hero,
  body.app-page .mobile-app-nav a.mobile-nav-hero.active{width:60px;height:60px;min-height:60px}
}

@media(max-width:370px){
  body.app-page .mobile-app-nav a small{font-size:7.2px}
  body.app-page .account-topbar .profile-chip{max-width:76px}
}

@media(max-width:820px) and (orientation:landscape){
  body.app-page .mobile-app-nav{height:64px;bottom:calc(6px + env(safe-area-inset-bottom))!important}
  body.app-page .mobile-app-nav a{min-height:50px}
  body.app-page .mobile-app-nav a.mobile-nav-hero,
  body.app-page .mobile-app-nav a.mobile-nav-hero.active{width:54px;height:54px;min-height:54px;transform:translateY(-8px)}
}

@media(prefers-reduced-motion:reduce){
  .pwa-help-card,.pwa-help-backdrop,body.app-page .mobile-app-nav a{transition:none!important}
}