/* The signed-in tabs: Live app · Dashboard · Account. Shared by the web app (which holds all three tabs, see shell.js),
   pricing and the session page, so people can always move between them. Hidden inside the extension's side panel (the
   app marks it web-only there). The credits chip next to them opens pricing. */

/* ── The tab bar (4 Nov 2026): three equal tabs, each with an icon, and a highlight that stretches like a switch ── */
.lc-tabs{position:relative;display:grid;flex:none;grid-template-columns:repeat(3,120px);gap:4px;padding:4px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.035);transition:border-color .3s ease,box-shadow .3s ease}
.lc-tabs:hover{border-color:rgba(139,130,240,.28);box-shadow:0 0 0 1px rgba(139,130,240,.07),0 8px 26px rgba(108,97,229,.14)}
.lc-tabs[hidden]{display:none}
.lc-tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 8px;border-radius:10px;font-size:14px;font-weight:500;line-height:1;color:var(--text-dim,#A6A6BC);white-space:nowrap;text-decoration:none;transition:color .3s ease,background-color .25s ease;-webkit-tap-highlight-color:transparent}
.lc-tab:hover{color:var(--text,#EDEDF4);background:rgba(255,255,255,.05);text-decoration:none}
.lc-tab:focus-visible{outline:2px solid var(--accent,#8B82F0);outline-offset:2px}
.lc-tab.on{color:#fff}
.lc-tab.on:hover{background:none}
.lc-tab:active{transform:scale(.97)}
.lc-tab .ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease,filter .3s ease}
.lc-tab:hover .ic,.lc-tab.on .ic{filter:drop-shadow(0 0 5px rgba(139,130,240,.75))}
.lc-tab:hover .ic{transform:translateY(-1px)}
/* The Live app's dot: green, with a soft ring that keeps pinging out of it. */
.lc-tab .live{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--green,#2BC48F)}
.lc-tab .live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green,#2BC48F);animation:lc-live 2s ease-out infinite}
@keyframes lc-live{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.8);opacity:0}}

/* The highlight is its own element (.lc-tabpill), placed by --lc-i (which tab) and --lc-n (how many tabs it covers).
   At rest it covers the current tab. On a click (shell.js) it first stretches over every tab from the old one to the new
   one, quickly and glowing, then lets go of the old side and settles on the new tab with a small bounce. */
.lc-tabpill{position:absolute;z-index:0;top:4px;bottom:4px;left:calc(4px + var(--lc-i,0) * ((100% - 16px) / 3 + 4px));width:calc((100% - 16px) / 3 * var(--lc-n,1) + 4px * (var(--lc-n,1) - 1));border-radius:10px;background:linear-gradient(180deg,rgba(139,130,240,.34),rgba(108,97,229,.22));box-shadow:inset 0 0 0 1px rgba(155,146,255,.55),0 6px 20px rgba(108,97,229,.28);transition:left .55s cubic-bezier(.34,1.56,.64,1),width .55s cubic-bezier(.34,1.56,.64,1),box-shadow .5s ease;pointer-events:none;view-transition-name:lc-tabpill}
.lc-tabs.lc-stretch .lc-tabpill{transition:left .17s cubic-bezier(.45,0,.55,1),width .17s cubic-bezier(.45,0,.55,1),box-shadow .17s ease;box-shadow:inset 0 0 0 1px rgba(155,146,255,.6),0 0 26px rgba(139,130,240,.55)}
.lc-tabs:has(> .lc-tab.on:nth-child(3)){--lc-i:1}
.lc-tabs:has(> .lc-tab.on:nth-child(4)){--lc-i:2}
.lc-tabs:not(:has(> .lc-tab.on)) .lc-tabpill{display:none}

/* The logo glows a little under the mouse. */
nav:has(.lc-tabs) .logo .logo-dot{transition:box-shadow .3s ease}
nav:has(.lc-tabs) .logo:hover .logo-dot{box-shadow:0 0 0 4px rgba(139,130,240,.2),0 6px 22px rgba(91,79,224,.65)}

.lc-credits{font-family:var(--font-m,monospace);font-size:12px;color:var(--accent,#8B82F0);background:var(--accent-soft,rgba(139,130,240,.14));padding:5px 11px;border-radius:99px;white-space:nowrap;text-decoration:none}
.lc-credits[hidden]{display:none}
.lc-credits:hover{text-decoration:none;filter:brightness(1.2)}
.lc-credits.low{color:var(--amber,#E8B44C);background:rgba(232,180,76,.13)}

/* Phones and narrow windows: the tabs take their own row under the logo, each tab an equal share. */
/* Only where the tabs show: never in the extension's side panel, never before sign-in on the app page. */
@media (max-width:820px){
  .lc-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  body:not(.in-panel) nav .nav-in:has(.lc-tabs:not([hidden])){flex-wrap:wrap;height:auto;min-height:62px;padding-top:10px;padding-bottom:10px;row-gap:10px}
  nav .lc-tabs{order:3;width:100%}
  nav .lc-tab{height:38px;padding:0 6px;font-size:13.5px;gap:7px}
}

/* The top bar is as wide on the Live app as on the other pages, so the tabs stay in the same place when you switch. */
nav:has(.lc-tabs) .nav-in.wrap{max-width:960px}
@media (max-width:820px){body:not(.in-panel) nav .nav-in.wrap:has(.lc-tabs:not([hidden])){padding-left:24px;padding-right:24px}}

/* ── The three tabs on one page (4 Nov 2026, shell.js) ──
   The Live app page holds all three tabs. The Live app is the page itself (#lcViewApp); Dashboard and Account each live
   in their own frame (#lcViewDash, #lcViewAcct) that fills the window under the top bar, loads once and then stays.
   html[data-lc-tab] says which tab shows; a tab on its way out keeps .lc-leaving until its slide ends. */
html[data-lc-tab] .lc-view{visibility:hidden}
html[data-lc-tab=app] #lcViewApp,html[data-lc-tab=dashboard] #lcViewDash,html[data-lc-tab=account] #lcViewAcct,html[data-lc-tab] .lc-view.lc-leaving{visibility:visible}
/* While Dashboard or Account shows, the Live app folds to no height (still all there, a call still running), so the
   window has one scroll bar: the frame's. The top bar keeps the place of the app's scroll bar, so nothing in it moves. */
html.lc-app-folded #lcViewApp{height:0;overflow:hidden}
html.lc-app-folded body>nav{padding-right:var(--lc-sbw,0px)}
.lc-frame-view{display:none}   /* (the extension's side panel, which shows only the Live app) */
html[data-lc-tab] .lc-frame-view{display:block;position:fixed;left:0;right:0;top:var(--lc-nav-h,63px);bottom:0;z-index:5}
.lc-frame-view iframe{display:block;width:100%;height:100%;border:0;background:transparent;color-scheme:dark}
/* Opening /dashboard or /account straight away: the page slides in under the still tab bar, like the Live app does. */
html[data-lc-tab=dashboard] main,html[data-lc-tab=account] main{view-transition-name:none}
html[data-lc-tab=dashboard] #lcViewDash,html[data-lc-tab=account] #lcViewAcct{view-transition-name:lc-main}
/* The Game Space chip belongs to Dashboard and Account, not the Live app (and never during a call). */
html[data-lc-tab=app] .gs-chip,body.in-panel .gs-chip{display:none!important}

/* The Dashboard and Account pages inside their frame: no top bar of their own (the app's stays), and see-through, so
   the app's background shows behind them. */
html.lc-embed{color-scheme:dark;background:transparent}
html.lc-embed body{background:transparent;min-height:0}
html.lc-embed body>nav{display:none}

/* ── Moving between the signed-in pages and pricing or a session (29 Oct 2026) ──
   The browser's page-transition feature (Chrome and Safari; other browsers just change page): the tab bar stays still,
   the highlight glides and the page slides under it. */
@view-transition{navigation:auto}
main{view-transition-name:lc-main}
html{--lc-x:0px}
html[data-lc-dir=fwd]{--lc-x:34px}
html[data-lc-dir=back]{--lc-x:-34px}
::view-transition-group(lc-tabpill){animation-duration:.46s;animation-timing-function:cubic-bezier(.3,1.3,.4,1)}
::view-transition-old(lc-tabpill){display:none}
::view-transition-new(lc-tabpill){animation:none;width:100%;height:100%}
::view-transition-old(lc-main){animation:lc-out .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(lc-main){animation:lc-in .42s cubic-bezier(.2,.9,.25,1) .06s both}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
@keyframes lc-out{to{opacity:0;transform:translateX(calc(var(--lc-x) * -1))}}
@keyframes lc-in{from{opacity:0;transform:translateX(var(--lc-x))}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .lc-tabpill,.lc-tabs.lc-stretch .lc-tabpill{transition:none}
  .lc-tab:active{transform:none}
  .lc-tab .live::after{animation:none;opacity:0}
}