/* The sidebar on the app's pages (home and its chats, My invitations, Pricing), as in ChatGPT and Claude: New chat,
   the chats, and at its foot a sign-in card or the account. Collapsed on wide screens it's a rail; on phones a drawer. */
:root{ --side-w:268px; --rail-w:62px; --side-bg:#F4F2EE; --ease-glide:cubic-bezier(.32,.72,0,1) }
:root[data-theme="dark"]{ --side-bg:#101318 }

/* ---------- header toggle ---------- */
.nav-left{justify-self:start;display:flex;align-items:center;gap:6px;min-width:0}
.side-toggle{flex:none;width:38px;height:38px;margin-left:-8px;border:0;border-radius:10px;display:grid;place-items:center;background:transparent;color:var(--muted);cursor:pointer}
.side-toggle:hover{background:var(--hover);color:var(--ink)}
.side-toggle svg{width:20px;height:20px}
/* With the sidebar the header spans the whole window, as in YouTube or Gemini: the toggle sits at the far
   left, its icon on the same line as the sidebar's icons (both centred 31px in), whether the sidebar is open or closed. */
@media (min-width:901px){
  body.has-side .nav-in{max-width:none;padding-left:20px;position:relative;z-index:1}
  /* the header above the sidebar takes the sidebar's colour and divider, so the column runs from the top of
     the window to the bottom with the toggle and logo at its head, as in ChatGPT and Claude */
  body.has-side .nav::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:0;background:var(--side-bg);
    box-shadow:inset -1px 0 0 var(--line);transition:width .5s var(--ease-glide);pointer-events:none}
  body.has-side:not(.side-closed) .nav::before{width:var(--side-w)}
  /* collapsed, the rail keeps the toggle at its head and the logo steps out beside it */
  body.has-side.side-closed .nav::before{width:var(--rail-w)}
  body.has-side .nav-left .brand{transition:transform .5s var(--ease-glide)}
  body.has-side.side-closed .nav-left .brand{transform:translateX(18px)}
  body.no-anim .nav::before,body.no-anim .nav-left .brand{transition:none}
}

/* ---------- shell ---------- */
/* The sidebar opens by widening its own column: the page glides over while the list slides in from under it. */
.shell{display:grid;grid-template-columns:0px minmax(0,1fr);transition:grid-template-columns .5s var(--ease-glide)}
body.has-side .shell{grid-template-columns:var(--side-w) minmax(0,1fr)}
body.has-side.side-closed .shell{grid-template-columns:var(--rail-w) minmax(0,1fr)}
.side{position:sticky;top:68px;height:calc(100vh - 68px);height:calc(100dvh - 68px);overflow:hidden;background:var(--side-bg);box-shadow:inset -1px 0 0 var(--line);
  visibility:hidden;transition:visibility 0s .5s}
body.has-side .side{visibility:visible;transition:visibility 0s}
.side-in{width:var(--side-w);height:100%;display:flex;flex-direction:column;gap:10px;padding:14px 10px 10px;
  opacity:0;transform:translateX(-18px);transition:opacity .25s ease,transform .5s var(--ease-glide)}
body.has-side .side-in{opacity:1;transform:none;transition:opacity .4s .08s ease,transform .5s var(--ease-glide)}
/* on opening, the rows arrive one after another */
@keyframes side-row{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
body.side-opening .side-list>*{animation:side-row .45s calc(.1s + var(--i,0) * 22ms) var(--ease-glide) both}
.main{min-width:0}
.side-new{display:flex;align-items:center;gap:10px;width:100%;height:42px;padding:0 12px;border:0;border-radius:12px;background:var(--surface);color:var(--ink);
  font:500 14.5px/1 var(--font);white-space:nowrap;overflow:hidden;cursor:pointer;box-shadow:0 0 0 1px var(--line),0 6px 14px -10px rgba(24,23,26,.35);
  transition:box-shadow .2s,width .5s var(--ease-glide)}
.side-new:hover{box-shadow:0 0 0 1px var(--line-strong),0 8px 18px -10px rgba(24,23,26,.4)}
.side-new svg{flex:none;width:18px;height:18px}
.side-label{transition:opacity .25s}
.side-list{flex:1;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px;scrollbar-width:thin;transition:opacity .3s}
.side-group{margin:18px 10px 6px;font-size:12px;font-weight:600;color:var(--muted)}
.side-group:first-child{margin-top:8px}
.side-item{position:relative;display:flex;align-items:center;height:38px;border-radius:10px;transition:background .15s}
.side-item:hover{background:var(--hover)}
.side-item.on{background:var(--chip)}
.side-item a{flex:1;min-width:0;padding:0 40px 0 12px;font-size:14.5px;line-height:38px;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-item.on a{font-weight:600}
.side-item a:focus-visible{outline-offset:-2px;border-radius:10px}
.side-item input{flex:1;min-width:0;height:30px;margin:0 6px;padding:0 8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font:14px var(--font);outline:none}
.side-item input:focus{border-color:var(--ink)}
.side-more{position:absolute;right:5px;top:5px;width:28px;height:28px;border:0;border-radius:8px;display:grid;place-items:center;background:transparent;color:var(--muted);cursor:pointer;opacity:0;transition:opacity .15s}
.side-item:hover .side-more,.side-item.on .side-more,.side-more:focus-visible,.side-more[aria-expanded="true"]{opacity:1}
.side-more:hover{color:var(--ink);background:var(--hover)}
.side-more svg{width:16px;height:16px}

/* ---------- the foot: a sign-in card for people who haven't signed in, as in ChatGPT; their account once they have ---------- */
.side-foot{display:grid;margin:0 -10px;padding:0 10px}
.side.signed-in .side-foot{padding-top:8px;box-shadow:inset 0 1px 0 var(--line)}
.side-account{display:grid;gap:4px;margin:0;padding:14px 12px 12px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line);transition:opacity .3s}
.side-account[hidden]{display:none}
.side-account-t{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.side-account-d{margin:0 0 8px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.side-signin{height:36px;border:0;border-radius:10px;background:var(--btn-bg);color:var(--btn-fg);font:600 13.5px/1 var(--font);cursor:pointer}
.side-signin:hover{opacity:.9}
.side-me{display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 6px;border:0;border-radius:12px;background:transparent;color:var(--ink);
  font:inherit;text-align:left;white-space:nowrap;overflow:hidden;cursor:pointer;transition:background .15s,width .5s var(--ease-glide)}
.side-me:hover,.side-me[aria-expanded="true"]{background:var(--hover)}
.side-me:focus-visible{outline-offset:-2px}
.me-av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--btn-bg);color:var(--btn-fg);font:600 13px/1 var(--font)}
.me-who{display:grid;min-width:0;transition:opacity .25s}
.me-name{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:600;line-height:1.3}
.me-plan{overflow:hidden;text-overflow:ellipsis;font-size:12.5px;line-height:1.3;color:var(--muted)}
.me-plan:empty{display:none}
/* the account menu rises above the account at the foot (header.js places it) */
.account-menu.up{position:fixed;top:auto;right:auto;min-width:0;max-height:calc(100dvh - 90px);overflow-y:auto;z-index:96;
  animation:menu-up .18s cubic-bezier(.2,.8,.2,1) both}
@keyframes menu-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scrim{display:none}

/* ---------- the rail: collapsed on a wide screen, New chat and the account stay as icons ---------- */
@media (min-width:901px){
  body.side-closed .side-new,body.side-closed .side-me{width:42px}
  body.side-closed .side-label,body.side-closed .me-who{opacity:0}
  body.side-closed .side-list,body.side-closed .side-account{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
}
body.no-anim .shell,body.no-anim .side,body.no-anim .side-in,body.no-anim .side-new,body.no-anim .side-me{transition:none!important}

.item-menu{position:fixed;z-index:95;min-width:164px;padding:6px;border-radius:14px;background:var(--surface);display:grid;gap:2px;
  box-shadow:0 0 0 1px var(--line),0 22px 48px -20px rgba(24,23,26,.45)}
.item-menu button{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:500 14px/1 var(--font);text-align:left;cursor:pointer}
.item-menu button:hover,.item-menu button:focus-visible{background:var(--hover);outline:none}
.item-menu .danger{color:var(--danger)}
.item-menu svg{width:16px;height:16px}

/* ---------- phones: the sidebar becomes a drawer ---------- */
@media (max-width:900px){
  .shell,body.has-side .shell,body.has-side.side-closed .shell{display:block}
  .side,body.has-side .side,body.has-side:not(.side-closed) .side{position:fixed;top:0;left:0;bottom:0;z-index:92;width:min(304px,86vw);height:auto;
    border-radius:0 22px 22px 0;visibility:hidden;transform:translateX(-100%);transition:transform .5s var(--ease-glide),visibility 0s .5s}
  body.side-open .side,body.side-open.has-side .side{visibility:visible;transform:none;transition:transform .5s var(--ease-glide);
    box-shadow:0 0 0 1px var(--line),30px 0 80px -30px rgba(0,0,0,.45)}
  .side-in,body.has-side .side-in{width:100%;opacity:1;transform:none;padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .scrim{display:block;position:fixed;inset:0;z-index:91;background:rgba(12,14,18,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .45s ease}
  body.side-open .scrim{opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion: reduce){
  .shell,.side,.side-in,.scrim,.side-new,.side-me,.side-label,.me-who,.side-list,.side-account{transition:none}
  body.has-side .nav::before,body.has-side .nav-left .brand{transition:none}
  body.side-opening .side-list>*,.account-menu.up{animation:none}
}