/* The sidebar: Claude's sidebar sizes (tokens.bdeb2397.css), the creative's palette and type, every list item wearing a
   Fluent 3D icon as the creative's activity tab does. Values come from the tokens only. Motion: hover fills, rows
   making way while a chat is dragged (interact.bdeb2397.js), a cut-off title scrolling on hover, and a working chat's
   app icon turning, each out of step with the others (spin.4bc2a2d5.js). */
/* no scrollbar anywhere in the page (Settings, the panes, the composer, lists): everything still scrolls by wheel,
   touch and keys, and the long panes fade at their edges instead */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
.sb { position: relative; display: flex; flex-direction: column; width: var(--sidebar-w); height: var(--app-h); overflow: hidden; background: var(--ground); box-shadow: inset calc(-1 * var(--hair)) 0 0 var(--sel); font-family: var(--ui); color: var(--ink); -webkit-font-smoothing: antialiased; }
.sb, .sb * { box-sizing: border-box; }
/* resets at zero specificity, so every class below (a group's indented list, a group's row font) wins over them */
:where(.sb) ul { margin: 0; padding: 0; list-style: none; }
:where(.sb) a { color: inherit; text-decoration: none; }
:where(.sb) a, :where(.sb) img { -webkit-user-drag: none; }
:where(.sb) button, :where(.sb) input { font: inherit; }
.sb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- top: the mark and wordmark on the icon column, then search and collapse ---------- */
.sb-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--top); padding: 0 var(--pad-x) 0 calc(var(--pad-x) + var(--row-pad)); }
.sb-brand { display: flex; align-items: center; gap: calc(var(--gap-ic) / 2); font: 700 var(--fs-brand)/1 var(--ui); letter-spacing: -0.01em; }
/* the mark's infinity is twice as wide as it is tall: a wider box, its square frame cropped to it, keeps it legible */
.sb-mark { flex: none; display: block; width: calc(var(--mark) * 1.5); height: var(--mark); }
.sb-mark > * { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-tools { display: flex; }
.sb-tool { display: grid; place-items: center; width: var(--tool); height: var(--tool); padding: 0; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink); cursor: pointer; transition: background-color var(--d-hover) ease-out; }
.sb-tool:hover { background: var(--sel); }
.sb-lu { width: var(--tool-ic); height: var(--tool-ic); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- rows: nav and chats share one anatomy ---------- */
.sb-nav { flex: none; padding: 0 var(--pad-x); }
/* a hair of air between nav rows, so New chat's fill and the current row's never touch */
.sb-nav .sb-list { display: flex; flex-direction: column; gap: calc(2px * var(--ref)); }
.sb-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0 var(--pad-x) var(--sp-16); -webkit-mask: linear-gradient(#000 calc(100% - var(--sp-24)), transparent); mask: linear-gradient(#000 calc(100% - var(--sp-24)), transparent); }
.sb-scroll::-webkit-scrollbar { display: none; }
.sb-row { display: flex; align-items: center; gap: var(--gap-ic); height: var(--row); padding: 0 var(--row-pad); border-radius: var(--r-ctl); font: var(--fs-body)/var(--lh-body) var(--ui); cursor: pointer; transition: background-color var(--d-hover) ease-out; }
.sb-row:hover, .sb-item:hover > .sb-row { background: var(--hover); }
.sb-row[aria-current="page"] { background: var(--sel); font-weight: 500; }
/* muted on the selected fill is 4.0:1, under AA for small text: the open chat's meta takes the ink */
.sb [aria-current="page"] .sb-time, .sb [aria-current="page"] .sb-sub { color: var(--ink); }
.sb-row.is-unread .sb-title { font-weight: 500; }
.sb a:focus-visible, .sb button:focus-visible { outline: var(--focus) solid var(--ink); outline-offset: calc(-1 * var(--focus)); }
.sb-ic { display: block; flex: none; width: var(--ic); height: var(--ic); }
.sb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-title { overflow: hidden; white-space: nowrap; }
.sb-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--fs-meta)/var(--lh-meta) var(--ui); color: var(--muted); }
.sb-time { flex: none; font: var(--fs-meta)/1 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }

/* a title longer than its row has no ellipsis: it fades out at the right edge. On hover or focus it slides to its end,
   with a small fade on each edge where text is hidden past it (marquee.bdeb2397.js sets the offset and both fades) */
.sb-title.is-overflow, .sb-title.is-marquee { -webkit-mask: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, var(--gap-ic))), transparent); mask: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, var(--gap-ic))), transparent); }
.sb-title.is-marquee > .sb-title-in { display: inline-block; will-change: transform; }

/* ---------- a working chat's app icon as a slab, for its turns (spin.4bc2a2d5.js builds the layers): the face at z 0, so
   it is drawn at its own size at rest, the edge and back behind it, turning about the slab's middle. Chrome rasters a
   layer turning in 3D at about one texel per CSS pixel, which steps a 13px icon's glyph: the slab is laid out 4x as
   large (--slab) about the icon's centre and scaled back down in 3D, so its layers raster with 4x the detail ---------- */
.sb-spin { position: relative; perspective: calc(var(--ic) * 5); }
.sb-spin-body { --slab: calc(var(--ic) * 4); position: absolute; left: calc(50% - var(--slab) / 2); top: calc(50% - var(--slab) / 2); width: var(--slab); height: var(--slab); scale: 0.25 0.25 0.25; transform-style: preserve-3d; transform-origin: 50% 50% calc(var(--slab) * var(--depth) * -0.5); }
.sb-spin-body > img { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(calc(var(--slab) * var(--z))); }
.sb-spin-front, .sb-spin-back { backface-visibility: hidden; }
.sb-spin-body > .sb-spin-back { transform: translateZ(calc(var(--slab) * var(--z))) rotateY(0.5turn); }
.sb-spin-edge { filter: brightness(0.6); }

/* ---------- a chat's "•••": shown on hover or focus (or while its menu is open), the title making room for it ---------- */
.sb-item { position: relative; }
.sb-more { position: absolute; top: 50%; right: calc((var(--row) - var(--more)) / 2); display: grid; place-items: center; width: var(--more); height: var(--more); padding: 0; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--muted); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity var(--d-hover) ease-out, background-color var(--d-hover) ease-out; }
.sb-more:hover { background: var(--sel); color: var(--ink); }
.sb-item:hover > .sb-more, .sb-item:focus-within > .sb-more, .sb-more[aria-expanded="true"] { opacity: 1; pointer-events: auto; }
/* the title stops a row's height short of the edge: the button, its 4px inset, and 4px of air before the fade */
.sb-item:is(:hover, :focus-within) > .sb-row, .sb-item:has(> .sb-more[aria-expanded="true"]) > .sb-row { padding-right: var(--row); }

/* ---------- dragging a chat: a ghost under the pointer, a gap where it will land ---------- */
.sb-scroll .sb-item > .sb-row { user-select: none; touch-action: none; }
.sb.is-dragging, .sb.is-dragging * { cursor: grabbing !important; }
.sb.is-dragging .sb-more { opacity: 0; pointer-events: none; }
.sb-ghost { position: absolute; z-index: 5; pointer-events: none; }
.sb-ghost .sb-row { background: var(--surface); box-shadow: 0 0 0 var(--hair) var(--sel), var(--lift); }
.sb-ghost .sb-more { display: none; }
.sb-gap { list-style: none; }

/* ---------- sections: a muted label ---------- */
.sb-sec { margin-top: var(--gap-sec); }
.sb-head { display: flex; align-items: center; height: var(--head); margin: 0; padding: 0 var(--row-pad); font: 400 var(--fs-meta)/1 var(--ui); color: var(--muted); }

/* ---------- loading and empty ---------- */
.sb-skel { display: flex; align-items: center; gap: var(--gap-ic); height: var(--row); padding: 0 var(--row-pad); }
.sb-skel i { flex: none; width: var(--ic); height: var(--ic); border-radius: var(--r-ctl); background: var(--sel); }
.sb-skel b { flex: 1; height: var(--sp-6); max-width: 70%; border-radius: 9999px; background: var(--sel); }
.sb-skel:nth-child(2n) b { max-width: 52%; }
.sb-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); padding: var(--row-pad); }
.sb-empty p { margin: 0; font: var(--fs-meta)/var(--lh-meta) var(--ui); color: var(--muted); }
.sb-btn { display: inline-flex; align-items: center; height: var(--row); padding: 0 var(--sp-10); border-radius: var(--r-ctl); background: var(--ink); color: var(--surface) !important; font: 500 var(--fs-meta)/1 var(--ui); }

/* ---------- footer: the account, under a hairline, its avatar centred on the icon column ---------- */
.sb-foot { flex: none; display: flex; align-items: center; height: var(--foot-h); padding: 0 var(--pad-x); box-shadow: inset 0 var(--hair) 0 var(--sel); }
.sb-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(var(--gap-ic) - (var(--avatar) - var(--ic)) / 2); padding-left: calc(var(--row-pad) - (var(--avatar) - var(--ic)) / 2); }
.sb-avatar { flex: none; width: var(--avatar); height: var(--avatar); border-radius: 9999px; object-fit: cover; }
.sb-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 var(--fs-body)/1 var(--ui); }
.sb-me .sb-tool { color: var(--muted); }
.sb-me .sb-tool:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .sb-tool, .sb-row, .sb-more { transition: none; }
}