/* Big screens, like Instagram and TikTok on the web: on any screen at least 768px wide (a computer, even with a
   tall window, or a tablet; phones are narrower), the
   bottom bar becomes a menu down the left edge (icons only, each name in a bubble on hover), the pages take the rest of
   the width, and Afiwa's video stands as a 9:16 column just right of the menu with the actions beside it. Phones
   are unchanged. */
@media (min-width:768px){
 :root{--side:76px;--nav-h:0px;--app:calc(100vw - var(--side));--app-left:var(--side);--app-right:0px;--col:min(calc((100dvh - 32px) * 9 / 16),calc(100vw - var(--side) - 220px))}
 :root body{max-width:none;margin:0 0 0 var(--side);box-shadow:none}

 /* The menu down the left edge. */
 :root body .reel-bar{--reel-bg:#fff;--reel-line:#e3e3e3;--reel-ink:#111;top:12px;bottom:auto;left:8px;right:auto;width:calc(var(--side) - 16px);height:min(calc(var(--col) * 16 / 9),calc(100dvh - 32px));padding:16px 10px 18px;flex-direction:column;align-items:stretch;justify-content:center;gap:6px;border:1px solid var(--reel-line);border-radius:14px;box-shadow:0 18px 48px #0002}
 :root body .reel-bar>a,:root body .reel-bar>details>summary{width:100%;height:48px;border-radius:12px}
 :root body .reel-bar>a:hover,:root body .reel-bar>details>summary:hover{background:#f2f2f2}
 :root body .reel-bar [data-tip]::after{left:calc(100% + 10px);bottom:auto;top:50%;translate:4px -50%}
 :root body .reel-bar [data-tip]:is(:hover,:focus-visible)::after{translate:0 -50%}
 :root body .reel-bar .ui-lang{align-self:center;margin-bottom:10px}
 :root body .reel-bar .lang-options{left:calc(100% + 8px);bottom:auto;top:0}
 :root body .reel-bar .header-profile nav{left:calc(100% + 8px);right:auto;bottom:auto;top:-8px}

 :root body .reel-bar>a,:root body .reel-bar>details>summary{text-decoration:none;color:inherit}

 /* Windows (Log in, My profile, a product...) keep the menu beside them, centred in the space left. */
 :root body.window-page .reel-bar{display:flex}

 /* Afiwa's video: a 9:16 column against the menu, 8px from it (as the menu is from the screen's edge), whatever the
    window's width: the body already starts at --side, just past the menu. */
 :root body.welcome-page main{width:var(--col);margin-inline:0;height:100dvh}
 :root body.welcome-page .guide-world{inset:12px 0 auto;height:auto;aspect-ratio:9/16;max-height:calc(100% - 32px);border-radius:14px;box-shadow:0 18px 48px #0007}

}

/* Match the sidebar controls to the cart and microphone discs. */
@media(min-width:768px){
 :root body .reel-bar{gap:14px}
 :root body .reel-bar>a,:root body .reel-bar>details>summary,:root body .reel-bar .lang-menu summary{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#ececec;color:#1c1c1c;box-shadow:0 3px 10px #0000001f;margin-inline:auto;flex:none}
 :root body .reel-bar>a:hover,:root body .reel-bar>details>summary:hover,:root body .reel-bar .lang-menu summary:hover{background:#dedede}
 :root body .reel-bar>details{align-self:center}
 :root body .reel-bar .ui-lang{margin:0;align-self:center}
 :root body .reel-bar>a>svg,:root body .reel-bar>details>summary>svg{width:26px;height:26px}
 :root body .reel-bar .lang-menu summary{font-size:10px;gap:1px}
 :root body .reel-bar .lang-menu summary>svg{width:10px;height:10px}
 :root body .reel-bar .bar-avatar{width:28px;height:28px;font-size:15px}
}