/* ==========================================================================
   Orcheum · UNIVERSAL SIDEBAR
   Source of truth: Figma rMEk1pvm3hlrn2JuW5Sw34, node 81:913 ("Sidebar").

   THE LOCKED COLUMN. One component, one sheet, one set of measures. This file
   is the ONLY owner of the sidebar's look; components/navigation/workspace-sidebar.css
   and the sidebar block that used to live in components/workspace/workspace-home-figma.css
   were retired into it, because two sheets both writing `!important` at the same
   column is how the drawn measures drifted in the first place.

   MEASURES ARE THE FRAME'S OWN, 1:1. The frame is 248 wide inside a 1440x1080
   artboard, so nothing here is divided or rounded. Where a number looks strange
   (28.524, 10.143, 8.452, 29.584) it is the drawn value: the menu-item component
   is placed at 0.845 scale inside a 1:1 frame, and rounding it compounds down
   the column.

   FIGMA STROKES ARE INSIDE STROKES. Every border the frame draws sits INSIDE the
   box it belongs to and does not grow it. A CSS `border` does grow it, so the
   drawn hairlines are inset box-shadows here — that is what keeps the card 112
   tall and the column's inner width exactly 216.
   ========================================================================== */

:root {
  /* The locked palette — 81:913. Named, not repeated. */
  --oc-sb-w: 248px;
  --oc-sb-surface: #fdfbfa;        /* column fill */
  --oc-sb-edge: #f0eeec;           /* column right hairline */
  --oc-sb-ink: #02193e;            /* nav labels, section title, icons */
  --oc-sb-ink-selected: #12161d;   /* the selected row's label + glyph */
  --oc-sb-muted: #8f9396;          /* Recent rows */
  --oc-sb-card: #fbf9f8;           /* account card fill */
  --oc-sb-card-edge: #354a70;      /* account card hairline */
  --oc-sb-action: #171d23;         /* Upgrade fill */
  --oc-sb-action-edge: #373d43;    /* Upgrade hairline */
  --oc-sb-avatar: rgba(240, 88, 34, 0.6);
  --oc-sb-avatar-ink: #fffdf9;
  --oc-sb-email: #888c92;
  /* UI kit §10 (166:3294 / 166:3347) — the card's EXPANDED state. Declared
     here beside the closed card's because they are one component: everything
     above is what 81:913 draws closed, everything below is what §10 adds when
     it opens. */
  --oc-sb-rule: #d9d1cb;           /* 166:3316 / 166:3331 */
  --oc-sb-menu-ink: #24252d;       /* 166:3303 row label, 166:3339 name */
  --oc-sb-menu-muted: #9f9792;     /* 166:3322 the meter's value */
  --oc-sb-menu-email: #61686b;     /* 166:3342 */
  --oc-sb-meter-track: #d9d1cb;    /* 166:3324 */
  --oc-sb-meter-fill: #f05822;     /* 166:3325 */
  --oc-sb-meter-ink: #666f8d;      /* 166:3329 */
  --oc-sb-plan: #f05822;           /* 160:2883 / 166:3417 */
  --oc-sb-action-strong: #24252d;  /* 166:3343 — the panel's action is the
                                      card's #171d23 one shade lighter, which
                                      is what 166:3343 states against 157:786 */
  /* 81:934 — the selected row's peach wash. The one active treatment in the
     column; it is carried by whichever row is selected, never pinned to one. */
  --oc-sb-selected: linear-gradient(
    -21.112995111696122deg,
    rgba(253, 229, 203, 0.48) 29.578%,
    rgba(248, 164, 151, 0.48) 100%
  );
  --oc-sb-font: Geist, Inter, var(--font-sans, system-ui), sans-serif;
}

/* ---- The column — 81:913 -------------------------------------------------
   248 wide, 16 all round, 20px radius on the right corners only, and a 35.5px
   backdrop blur under a near-white fill. `inset -1px` draws the right hairline
   without spending a pixel of the 216 the contents are measured against. */
.ws-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: var(--ws-sidebar-custom-w, var(--oc-sb-w));
  height: 100%;
  padding: 16px;
  background: var(--oc-sb-surface);
  -webkit-backdrop-filter: blur(35.5px);
  backdrop-filter: blur(35.5px);
  border: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: inset -1px 0 0 0 var(--oc-sb-edge);
}

/* 81:914 — head and the two groups below it, 26px apart. It takes the height
   the account card leaves; the card is never pushed off a short viewport. */
.ws-sidebar__top {
  display: flex;
  flex-direction: column;
  gap: 26px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* ---- Head — 81:915 ------------------------------------------------------
   216 x 24. Identity on the left, the two 18px controls on the right. The
   brand is the compressible half: the column is resizable (180–360) and the
   controls are the row's floor, so the wordmark yields rather than pushing
   search and the rail toggle outside the column. */
.ws-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
  height: 24px;
}

/* 81:916 — 129.377 wide: the 24 mark, 8, then the 97.377 x 18.144 wordmark.
   Both are the repository's locked identity drawings; neither is redrawn here. */
.ws-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  line-height: 0;
  text-decoration: none;
}
.ws-sidebar__brand:focus-visible {
  outline: 2px solid rgba(240, 88, 34, 0.55);
  outline-offset: 4px;
  border-radius: 4px;
}
.ws-sidebar__mark {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}
.ws-sidebar__wordmark {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  width: 97.3767px;
  max-width: 100%;
  height: 18.144px;
  object-fit: contain;
  object-position: left center;
}

/* 81:926 — two 18px controls inside a 48 box: 48 - 18 - 18 = 12 apart. */
.ws-sidebar__head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.ws-head-icon,
.ws-rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--oc-sb-ink);
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.ws-head-icon:hover,
.ws-rail-toggle:hover { background: transparent; opacity: 1; }
.ws-head-icon:focus-visible,
.ws-rail-toggle:focus-visible {
  outline: 2px solid rgba(240, 88, 34, 0.55);
  outline-offset: 3px;
  opacity: 1;
}
.ws-head-icon img,
.ws-head-icon svg,
.ws-rail-toggle img,
.ws-rail-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ---- The two groups — 81:932 --------------------------------------------
   Primary nav, then Recent, 114px apart. That gap is drawn, not slack: the
   frame separates the places you can GO from the things you have MADE, and the
   distance is the separation. */
.ws-sidebar__scroll {
  display: flex;
  flex-direction: column;
  gap: 114px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* NO RESERVED SCROLLBAR. A classic scrollbar takes its width out of the
     content box, and 6px out of 216 is 6px off every row in the column — the
     rows stop being the width they are drawn at. 81:913 draws no scrollbar, so
     the column keeps its 216 and scrolls by wheel, trackpad and keyboard. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 0 8px;
}
.ws-sidebar__scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ---- Primary nav — 81:933 ----------------------------------------------
   Five rows, 2px apart. The resting row is 28.524 tall on a 6.762 radius with
   10.143 of left inset; the SELECTED row is 33 on an 8 radius with 10 — that
   taller box is the selection, not a fifth row of a different size. */
.ws-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-new-chat,
.ws-nav-item {
  display: flex;
  align-items: center;
  gap: 8.452px;
  width: 100%;
  height: 28.524px;
  flex-shrink: 0;
  padding: 0 10.143px;
  border: 0;
  border-radius: 6.762px;
  background: none;
  font-family: var(--oc-sb-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--oc-sb-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease-standard, ease),
    height 160ms var(--ease-standard, ease);
}
.ws-new-chat:hover,
.ws-nav-item:hover { background-color: rgba(189, 196, 198, 0.22); }
.ws-new-chat:focus-visible,
.ws-nav-item:focus-visible {
  outline: 2px solid rgba(240, 88, 34, 0.55);
  outline-offset: -2px;
}

/* 81:956 and 113:5090 are drawn 34 and 33 tall against the component's own
   28.524. The surplus is dead space inside the row, not a different row — but
   it is kept, and stated here rather than normalised away, because the whole
   second group is positioned by it: levelling these three to one height lifts
   Recent 9.95px off where the frame puts it. Same specificity as `.is-active`,
   so it is declared FIRST and the selected box still wins. */
.ws-nav-item[data-nav="customize"] { height: 34px; }
.ws-nav-item[data-nav="labs"] { height: 33px; }

/* THE LOCKED ACTIVE STATE — 81:934. Whichever row is selected wears it. */
.ws-new-chat.is-active,
.ws-nav-item.is-active {
  height: 33px;
  padding-left: 10px;
  border-radius: 8px;
  background-image: var(--oc-sb-selected);
  font-weight: 500;
  color: var(--oc-sb-ink-selected);
}
.ws-new-chat.is-active:hover,
.ws-nav-item.is-active:hover { background-color: transparent; }

.ws-new-chat__icon,
.ws-nav-item__icon {
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.ws-nav-item__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- New chat / Search slot --------------------------------------------
   Existing behaviour, unchanged: search TAKES OVER the New chat row rather
   than pushing a field in below it. The button stays in flow so the slot is
   whatever height the row currently is — 28.524 at rest, 33 when it is the
   selected row — and the field lies over it. */
.ws-cta {
  position: relative;
  flex-shrink: 0;
}
.ws-cta > .ws-search-field {
  position: absolute;
  inset: 0;
}
.ws-search-field {
  display: flex;
  align-items: center;
  gap: 8.452px;
  width: 100%;
  padding: 0 10.143px;
  border: 0;
  border-radius: 6.762px;
  background: rgba(189, 196, 198, 0.18);
  box-shadow: inset 0 0 0 1px var(--oc-sb-edge);
}
.ws-new-chat,
.ws-search-field {
  transition:
    opacity var(--duration-base, 0.2s) var(--ease-standard, ease),
    transform var(--duration-base, 0.2s) var(--ease-standard, ease),
    visibility 0s linear var(--duration-base, 0.2s);
}
.ws-search-field {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  pointer-events: none;
}
.ws-sidebar.is-searching .ws-new-chat {
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  pointer-events: none;
}
.ws-sidebar.is-searching .ws-search-field {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}
.ws-search-field:focus-within {
  background: rgba(189, 196, 198, 0.28);
  box-shadow: inset 0 0 0 1px rgba(2, 25, 62, 0.28);
}
.ws-search-field__icon {
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.ws-search-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--oc-sb-font);
  font-size: 12px;
  line-height: 1.25;
  color: var(--oc-sb-ink);
}
.ws-search-field input::placeholder { color: var(--oc-sb-muted); }

/* ---- Recent — 81:961 ----------------------------------------------------
   Title 29.584 tall, then rows stacked with NO gap at 28.524 each. The rows
   are the muted grey the frame draws and every one of them ellipsises. */
.ws-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ws-section__title {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 29.584px;
  padding: 0 10.143px;
  overflow: hidden;
  font-family: var(--oc-sb-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--oc-sb-ink);
  text-transform: none;
  letter-spacing: 0;
}

/* `display: block`, not flex: `text-overflow` needs a block, and the row's
   own text is its only child. 6.762 + 15 + 6.762 = 28.524, the drawn height. */
.ws-chat-item {
  display: block;
  width: 100%;
  padding: 6.762px 10.143px;
  border: 0;
  border-radius: 6.762px;
  background: none;
  font-family: var(--oc-sb-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--oc-sb-muted);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color 160ms var(--ease-standard, ease);
}
.ws-chat-item:hover { background-color: rgba(189, 196, 198, 0.22); }
.ws-chat-item:focus-visible {
  outline: 2px solid rgba(240, 88, 34, 0.55);
  outline-offset: -2px;
}
/* The open conversation. 81:913 draws no selected Recent row — every one of
   them is at rest while New chat carries the selection — so this keeps the
   neutral mark the workspace already used rather than inventing a second
   reading of the locked peach. */
.ws-chat-item.is-active {
  background-color: rgba(189, 196, 198, 0.34);
  color: var(--oc-sb-ink);
}
.ws-chat-item.is-hidden { display: none; }

.ws-chats__empty {
  padding: 6.762px 10.143px;
  font-family: var(--oc-sb-font);
  font-size: 12px;
  line-height: 1.25;
  color: var(--oc-sb-muted);
}

/* ---- Account card — 81:994 "User/free" ----------------------------------
   216 x 112, 12px radius, a 2x16 shadow and a single inside hairline. The
   inside hairline is why this is `inset` rather than `border`: a border would
   make the card 114 and push the identity row off its drawn baseline. */
.ws-sidebar__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  gap: 0;
  width: 100%;
  padding: 0;
  margin-top: auto;
}
.ws-sidebar__foot .ws-account {
  position: relative;
  width: 100%;
}
.ws-user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--oc-sb-card);
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px var(--oc-sb-card-edge);
  overflow: hidden;
}

/* Identity row 81:996 — 192 x 40. One gap in the row and it is AFTER the
   avatar, so it is carried by the avatar's own margin: 81:1000 opens at x=46
   against a 36 avatar, and the chevron sits flush at the block's right edge. */
.ws-user-card .ws-sidebar__profile-card {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--oc-sb-ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.ws-user-card .ws-sidebar__profile-card:hover { background: transparent; }
.ws-user-card .ws-sidebar__profile-card:focus-visible {
  outline: 2px solid rgba(240, 88, 34, 0.55);
  outline-offset: 2px;
}
.ws-user-card .ws-sidebar__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border: 0;
  border-radius: 100px;
  background: var(--oc-sb-avatar);
  -webkit-backdrop-filter: blur(13.524px);
  backdrop-filter: blur(13.524px);
  overflow: hidden;
}
.ws-user-card .ws-avatar__initials {
  font-family: var(--oc-sb-font);
  font-weight: 600;
  font-size: 12px;
  line-height: normal;
  color: var(--oc-sb-avatar-ink);
}
.ws-sidebar__avatar .ws-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-sidebar__avatar.has-image .ws-avatar__initials { display: none; }

/* The identity column takes what the avatar leaves and no more. `min-width: 0`
   with `align-items: stretch` is the pair that gives the ellipsis an edge to
   happen at — without either, a long address sizes the column to itself. */
.ws-user-card .ws-sidebar__meta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
/* 160:2880 — name, pipe and tier on one line, 4 apart, bottoms aligned. On the
   free card (157:782) the line holds the name alone and reads exactly as it
   did before this row existed. */
.ws-user-card .ws-sidebar__nameline {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}
.ws-user-card .ws-sidebar__plan-sep,
.ws-user-card .ws-sidebar__plan {
  flex: 0 0 auto;
  font-family: var(--oc-sb-font);
  font-size: 14px;
}
.ws-user-card .ws-sidebar__plan-sep {
  font-weight: 600;
  line-height: 1.5;
  color: var(--oc-sb-menu-ink);
}
/* 160:2883 — Medium, not SemiBold, and on 20 rather than the name's 21. */
.ws-user-card .ws-sidebar__plan {
  font-weight: 500;
  line-height: 20px;
  color: var(--oc-sb-plan);
}
.ws-user-card .ws-sidebar__plan[hidden],
.ws-user-card .ws-sidebar__plan-sep[hidden] { display: none; }
/* 160:2881 sets the paid card's name in #24252d where 157:782 sets the free
   card's in #02193e. Stated as drawn rather than levelled to one value. */
.ws-user-card[data-plan] .ws-sidebar__name { color: var(--oc-sb-menu-ink); }

.ws-user-card .ws-sidebar__name,
.ws-user-card .ws-sidebar__email {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--oc-sb-font);
}
.ws-user-card .ws-sidebar__name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--oc-sb-ink);
}
.ws-user-card .ws-sidebar__email {
  height: 16px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  color: var(--oc-sb-email);
}
/* 81:1003 — the chevron is placed ON the identity block, at its right edge,
   not spaced after it. 146 wide, glyph at x=127, so 1px in from the end. */
.ws-user-card .ws-sidebar__profile-chevron {
  position: absolute;
  top: 0;
  right: 1px;
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 1;
  transition: transform var(--duration-base, 0.2s) var(--ease-standard, ease);
}
.ws-user-card .ws-sidebar__profile-card[aria-expanded="true"] .ws-sidebar__profile-chevron {
  transform: rotate(180deg);
}

/* A guest has no identity to draw, and nothing is invented in its place: the
   card becomes its one action inside the same 12px of padding. */
.ws-user-card[data-state="guest"] .ws-sidebar__profile-card { display: none; }

/* Upgrade / Sign in 81:1005 — 192 x 40, the card's one dark action. The label
   is the frame's two-stop wash over white, clipped to the glyphs. */
.ws-user-card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--oc-sb-action);
  box-shadow: inset 0 0 0 1px var(--oc-sb-action-edge);
  color: #ffffff;
  font-family: var(--oc-sb-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.ws-user-card__action[hidden] { display: none; }
.ws-user-card__action-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-image:
    /* 157:788 states THREE stops; the orange middle one was missing here and
       the wash read blue-to-yellow. §10 restates the same three at 166:3345. */
    linear-gradient(
      90deg,
      rgba(95, 156, 238, 0.32) 0%,
      rgba(240, 88, 34, 0.32) 50.481%,
      rgba(251, 188, 4, 0.32) 100%
    ),
    linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ws-user-card__action:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: #23303c;
}
.ws-user-card__action:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: #0f1319;
}
.ws-user-card__action:disabled,
.ws-user-card__action[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}
.ws-user-card__action:focus-visible {
  outline: 2px solid rgba(240, 88, 34, 0.6);
  outline-offset: 2px;
}
.ws-user-card__action img,
.ws-user-card__action svg {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}


/* ==========================================================================
   THE CARD, EXPANDED — UI kit §10 "User Profiles & Tab selectors" (158:1113),
   variants 166:3294 "User/free_expanded" and 166:3347 "User/pro_expanded".

   WHAT THE KIT SETTLED. 81:913 draws the account card CLOSED and nothing else,
   so when the sidebar was built the opened menu kept the look it had when the
   control still lived in the top bar — Figma 580:2100, drawn in
   components/navigation/workspace-navbar.css. That left ONE control with TWO
   visual owners, and the borrowed panel disagreed with the card it hung off:

     shell    249 white, no edge, 0/3/20/-8 10% shadow  ->  233 #fbf9f8,
                                                            1px #354a70,
                                                            0/2/16 5% shadow
     order    identity, Upgrade, rows, Sign out         ->  rows, rule, meter,
                                                            rule, identity,
                                                            Upgrade
     avatar   30 x 24 chip on a 5 radius, 10px ink      ->  the card's own 36
                                                            round mark
     upgrade  #f7e0c7 row with an 18 mark               ->  the card's own dark
                                                            action, no mark
     credits  a row that only said its own name         ->  a labelled value,
                                                            with the kit's
                                                            meter behind it

   §10 resolves it by making the panel THE SAME COMPONENT: same fill, same
   hairline, same shadow, same radius, and the card's own identity row and dark
   action repeated at its foot. Expanded is a STATE of the card, not a popup
   beside it — which is why this file now owns both and workspace-navbar.css
   owns neither. The panel is 233 against the card's 216: it grows out of the
   card by 8.5 a side, and it is anchored over the card rather than above it,
   so the identity row the reader clicked stays exactly where they left it.

   THE METER IS BOUND, NOT DRAWN. 166:3324 states a 161 x 6 track and an
   #f05822 fill; 166:3371 (pro) states the SAME row with NO track at all. The
   product has no member usage figure — every authenticated session is Free and
   carries no plan or usage field (index.html `sessionPlanLabel`), and the one
   real allowance in the product is the GUEST one, which this menu never serves
   because a guest card has no identity row to open. So the row renders in the
   kit's own trackless form and the track appears only when a real numerator
   and denominator are supplied. Nothing here manufactures a percentage.

   WHAT §10 DOES NOT DRAW IS KEPT, NOT INVENTED. There is no Sign out in either
   expanded variant and the product must have one, so it is carried as the last
   row of the plain group — the kit's own treatment for a non-navigational row
   — which leaves the drawn footer (identity, then the dark action) untouched.
   Hover, focus, the open/close transition and the reduced-motion opt-out have
   no §10 specimen either; they are the panel's existing ones, moved here.
   ========================================================================== */

.ws-account-menu {
  /* 166:3294 — the shell. Anchored by index.html `positionMenu()` against the
     card, so the sheet states the box and never the place. The hairline is an
     inset shadow for the same reason it is on the card: a real border would
     make the panel 235 and shift every row 1px in. */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 233px;
  max-width: min(233px, calc(100vw - 16px));
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--oc-sb-card);
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px var(--oc-sb-card-edge);
  box-sizing: border-box;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 130ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 130ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ws-account-menu[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.ws-account-menu.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

/* 166:3296 — the two groups and the two rules, 13 apart. */
.ws-account-menu__body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* 166:3297 — Account / Settings / Billing, 23 apart. The gap is between the
   rows' TEXT; each row carries 6px of its own vertical padding for a hover
   surface and pays it back through the group's gap, so the labels land on the
   frame's baselines while the surface still reaches the panel's inner edge. */
.ws-account-menu__group {
  display: flex;
  flex-direction: column;
  gap: 23px;
  width: 100%;
}
/* 166:3317 — Credits and Documentation, 21 apart. */
.ws-account-menu__group--plain {
  gap: 21px;
}

/* 166:3316 / 166:3331 — 209 x 1, #d9d1cb. */
.ws-account-menu__rule {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--oc-sb-rule);
}

/* The row. 166:3298 sets a 16 mark, a 10 gap and Geist Regular 14 / 1.25 in
   #24252d; the plain group's rows are the same type with the frame's wider
   tracking and no mark. Padding widens the hit area only — the negative margin
   lets the hover surface bleed to the panel's 12px inset without moving the
   label off 166:3298's x. */
.ws-account-menu__item,
.ws-account-menu__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% + 24px);
  /* 166:3298 draws an 18-tall row and 166:3297 puts 23 between them, so the
     rows' texts are 41 apart. 14/1.25 is 17.5 of real content, and Figma's row
     box is that rounded up: `min-height` restores the drawn 18 (30 less the
     12 of padding) so the pitch lands on 41 rather than 40.5. The padding is
     hover surface only and the negative margin hands it straight back to the
     layout, so it never enters the arithmetic. */
  min-height: 30px;
  margin: -6px -12px;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-sizing: border-box;
  text-align: left;
  font-family: var(--oc-sb-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.14px;      /* 166:3303 */
  color: var(--oc-sb-menu-ink);
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ws-account-menu__group--plain .ws-account-menu__item,
.ws-account-menu__logout {
  letter-spacing: -0.21px;      /* 166:3330 */
}
.ws-account-menu__item:hover,
.ws-account-menu__logout:hover {
  background-color: rgba(36, 37, 45, 0.05);
}
.ws-account-menu__item:active,
.ws-account-menu__logout:active {
  background-color: rgba(36, 37, 45, 0.08);
}
.ws-account-menu__item:focus-visible,
.ws-account-menu__logout:focus-visible,
.ws-account-menu__identity:focus-visible,
.ws-account-menu__action:focus-visible {
  outline: 2px solid rgba(240, 88, 34, 0.6);
  outline-offset: -2px;
}

/* 166:3299 / 166:3305 / 166:3311 — each mark is a 16 BOX, and the drawn glyph
   inside it is not 16. The exports carry the leaf's own artboard (11.667 x 13,
   12.942 x 14.309, 14.333 x 14.333) and `preserveAspectRatio="none"`, so a
   16x16 img stretches them out of shape. The box is 16, the leaf keeps its
   dimensions, and the frame's insets put it dead centre in both axes. */
.ws-account-menu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.ws-account-menu__icon img {
  display: block;
  flex: none;
}
/* Each leaf at the size its own export states, centred in the 16 box. These
   are the drawn artboards (166:3300, 166:3306, 166:3312 plus the stroke each
   one overflows by), not three roundings of "about 14". */
.ws-account-menu__icon--user img { width: 11.667px; height: 13px; }
.ws-account-menu__icon--settings img { width: 12.942px; height: 14.309px; }
.ws-account-menu__icon--billing img { width: 14.333px; height: 14.333px; }

/* 166:3318 — the meter block. The label row is 4 above the track on the metered
   variant; the trackless variant is the label row alone (166:3371). */
.ws-account-menu__credits {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: calc(100% + 24px);
  min-height: 30px;             /* 166:3371's 18, as above */
  margin: -6px -12px;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ws-account-menu__credits:hover { background-color: rgba(36, 37, 45, 0.05); }
.ws-account-menu__credits:active { background-color: rgba(36, 37, 45, 0.08); }
.ws-account-menu__credits:focus-visible {
  outline: 2px solid rgba(240, 88, 34, 0.6);
  outline-offset: -2px;
}
/* 166:3319 — "Credits", the pipe and the value, 8 apart on one line. */
.ws-account-menu__credits-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--oc-sb-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.21px;
  color: var(--oc-sb-menu-ink);
  white-space: nowrap;
}
.ws-account-menu__credits-sep { flex: 0 0 auto; }
/* 166:3322 — the value is the muted one, and it is the only part that moves. */
.ws-account-menu__credits-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: normal;
  line-height: normal;
  color: var(--oc-sb-menu-muted);
}
/* 166:3323 — the meter and its percentage, 13 apart, baselines aligned. The
   whole row is absent unless the JS has a real fraction to put in it. */
.ws-account-menu__meter {
  display: flex;
  align-items: flex-end;
  gap: 13px;
}
.ws-account-menu__meter[hidden] { display: none; }
.ws-account-menu__meter-track {
  position: relative;
  flex: 0 0 161px;
  width: 161px;
  height: 6px;
  border-radius: 200px;
  background: var(--oc-sb-meter-track);
  overflow: hidden;
}
.ws-account-menu__meter-fill {
  display: block;
  height: 100%;
  border-radius: 200px;
  background: var(--oc-sb-meter-fill);
}
/* 166:3329 — the one Inter number in the panel; §10 states it, so it is not
   folded into the Geist the rest of the column uses. */
.ws-account-menu__meter-value {
  font-family: Inter, var(--font-sans, system-ui), sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: var(--oc-sb-meter-ink);
  text-align: center;
  white-space: nowrap;
}

/* 166:3332 — the identity row, 40 tall, and the panel's own collapse control.
   It is the SAME toggle the card's row is: the panel covers the card while it
   is open, so the row the reader pressed has to keep working where it now is.
   Nothing new happens here — `wireAccountMenu()` runs its existing toggle. */
.ws-account-menu__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
}
.ws-account-menu__face {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 100px;
  background: var(--oc-sb-avatar);
  -webkit-backdrop-filter: blur(13.524px);
  backdrop-filter: blur(13.524px);
  overflow: hidden;
  font-family: var(--oc-sb-font);
  font-weight: 600;
  font-size: 12px;
  line-height: 20.286px;        /* 166:3335 */
  color: var(--oc-sb-avatar-ink);
}
.ws-account-menu__face .ws-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  object-fit: cover;
}
.ws-account-menu__face.has-image .ws-avatar__initials { display: none; }

.ws-account-menu__meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
/* 166:3337 — the name at one end, the chevron at the other. */
.ws-account-menu__nameline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.ws-account-menu__namewrap {
  display: flex;
  align-items: flex-end;
  gap: 4px;                     /* 166:3414 */
  min-width: 0;
}
.ws-account-menu__name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--oc-sb-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--oc-sb-menu-ink);
}
/* 166:3416 / 166:3417 — the pipe and the plan. Both are absent until the
   session actually names a plan, so nothing claims a tier the account
   does not hold. */
.ws-account-menu__plan-sep {
  flex: 0 0 auto;
  font-family: var(--oc-sb-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--oc-sb-menu-ink);
}
.ws-account-menu__plan {
  flex: 0 0 auto;
  font-family: var(--oc-sb-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--oc-sb-plan);
}
.ws-account-menu__plan[hidden],
.ws-account-menu__plan-sep[hidden] { display: none; }
/* 166:3340 — the card's chevron, turned over. */
.ws-account-menu__chevron {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  transform: scaleY(-1);
}
.ws-account-menu__email {
  height: 16px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--oc-sb-font);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  color: var(--oc-sb-menu-email);
}

/* 166:3343 — the dark action at the foot, 209 x 40 on a 20/10 inset. It is the
   card's action in the panel's width, so it takes the card's label treatment
   (the wash clipped to the glyphs) from `.ws-user-card__action-label`.
   166:3347 draws no action at all, which is why this hides on a paid plan. */
.ws-account-menu__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 40px;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--oc-sb-action-strong);
  box-sizing: border-box;
  font-family: var(--oc-sb-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.ws-account-menu__action[hidden] { display: none; }
.ws-account-menu__action:hover { background-color: #2f3039; }
.ws-account-menu__action:active { background-color: #17181e; }

@media (prefers-reduced-motion: reduce) {
  .ws-account-menu,
  .ws-account-menu__item,
  .ws-account-menu__credits,
  .ws-account-menu__logout,
  .ws-account-menu__action { transition: none; }
  .ws-account-menu { transform: none; }
}

/* ==========================================================================
   PRESERVED BEHAVIOUR — the rail, the resizer, the narrow viewport.
   None of this is drawn by 81:913. It is the workspace's existing collapse and
   resize behaviour, carried across unchanged so the locked composition is the
   only thing this build changes.
   ========================================================================== */

.ws-sidebar__resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -4px;
  width: 8px;
  cursor: col-resize;
  z-index: 10;
  touch-action: none;
  user-select: none;
}
.ws-sidebar__resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: transparent;
  transition: background var(--duration-base, 0.2s) var(--ease-standard, ease);
}
.ws-sidebar__resizer:hover::after,
.ws-sidebar.is-resizing .ws-sidebar__resizer::after {
  background: var(--ws-figma-orange, #f05822);
}
.ws-sidebar.is-rail .ws-sidebar__resizer { display: none; }

body.is-resizing-sidebar { cursor: col-resize !important; user-select: none !important; }
body.is-resizing-sidebar * { user-select: none !important; }

/* `is-rail-ready` lands one committed frame after the boot state, so arriving
   straight into a collapsed column shows a rail rather than a full sidebar
   swinging shut. Only reader-driven changes animate. */
.ws-sidebar.is-rail-ready {
  transition:
    width 0.34s var(--ease-emphasized, cubic-bezier(0.22, 1, 0.36, 1)),
    padding 0.34s var(--ease-emphasized, cubic-bezier(0.22, 1, 0.36, 1));
}

.ws-sidebar.is-rail {
  width: 68px !important;
  padding-left: 14px;
  padding-right: 14px;
  overflow: hidden;
}
.ws-sidebar.is-rail .ws-sidebar__top { gap: 18px; }
.ws-sidebar.is-rail .ws-sidebar__scroll {
  gap: 18px;
  overflow-y: visible;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
.ws-sidebar.is-rail .ws-sidebar__wordmark,
.ws-sidebar.is-rail .ws-sidebar__head-actions,
.ws-sidebar.is-rail .ws-section,
.ws-sidebar.is-rail .ws-search-field,
.ws-sidebar.is-rail .ws-nav-item__label,
.ws-sidebar.is-rail .ws-sidebar__nameline,
.ws-sidebar.is-rail .ws-sidebar__meta,
.ws-sidebar.is-rail .ws-sidebar__profile-chevron { display: none !important; }

.ws-sidebar.is-rail .ws-sidebar__head { justify-content: center; }
.ws-sidebar.is-rail .ws-sidebar__brand {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  justify-content: center;
  cursor: pointer;
}
.ws-sidebar.is-rail .ws-nav-item,
.ws-sidebar.is-rail .ws-new-chat {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.ws-sidebar.is-rail .ws-user-card {
  padding: 0;
  background: transparent;
  box-shadow: none;
  gap: 8px;
}
.ws-sidebar.is-rail .ws-user-card .ws-sidebar__profile-card {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  padding: 0;
  justify-content: center;
}
.ws-sidebar.is-rail .ws-user-card__action-label { display: none; }
.ws-sidebar.is-rail .ws-user-card__action {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 50%;
}
.ws-sidebar.is-rail .ws-sidebar__foot {
  align-items: center;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 1024px) {
  .ws-sidebar { width: 240px; }
}
@media (max-width: 820px) {
  .ws-sidebar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-sidebar,
  .ws-new-chat,
  .ws-nav-item,
  .ws-chat-item { transition: none; }
}