/* Sidebar — monochrome rail (always dark) so it stays legible in light or OS dark mode */
:root {
  --sidebar-bg: #111;
  --sidebar-header-bg: #111;
  --sidebar-inline-space: max(calc(var(--inline-space) * 1.5), 1vw);
  --sidebar-tools-height: calc(var(--block-space) + var(--btn-size) + (var(--block-space) * 2));
}

body.sidebar #sidebar {
  --sidebar-fg: #fff;
  --sidebar-fg-muted: rgb(255 255 255 / 0.65);
  --sidebar-fg-subtle: rgb(255 255 255 / 0.45);
  --sidebar-border: rgb(255 255 255 / 0.1);
  --sidebar-row-hover: rgb(255 255 255 / 0.07);
  --sidebar-row-active-bg: #fff;
  --sidebar-row-active-fg: #000;
  --sidebar-search-bg: rgb(255 255 255 / 0.08);
  --sidebar-search-fg: #fff;
  --sidebar-search-border: rgb(255 255 255 / 0.14);
  --sidebar-btn-hover-outline: rgb(255 255 255 / 0.18);
}

/* Avoid global `.btn` brightness hover dimming dark-sidebar rows */
#sidebar .btn {
  --hover-filter: brightness(1);
}

.sidebar__container {
  background-color: var(--sidebar-bg);
  block-size: 100dvh;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  inline-size: 100%;
  max-block-size: 100dvh;
  max-inline-size: 100%;
  min-block-size: 0;
  min-inline-size: 0;
  overflow: hidden;
  padding-block-end: 0;
}

.sidebar__workspace-header {
  background-color: var(--sidebar-header-bg);
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  gap: 0.5rem;
  min-block-size: 3.7rem;
  padding-block: 0.55rem;
  padding-inline: clamp(0.65rem, 1vw, 1rem);
  position: relative;

  /* One safe-area inset (not also on `.sidebar__container`) so the drawer doesn’t get double top padding */
  @media (max-width: 100ch) {
    padding-block-start: calc(0.55rem + env(safe-area-inset-top, 0px));
  }
}

.sidebar__workspace-name {
  color: var(--sidebar-fg);
  font-size: 0.95rem;
  font-weight: 700;
}

/* Match main nav: square-ish account logo (see `avatars.css` `.account-logo`) */
#sidebar .sidebar__account-logo {
  --avatar-border-radius: 0.45em;
  --avatar-size: 2.25rem;
  --btn-padding: 0;

  flex-shrink: 0;

  .account-logo__initials {
    color: var(--sidebar-fg);
  }
}

#sidebar .sidebar__account-logo .account-logo {
  --avatar-size: 2.25rem;
}

.sidebar__body {
  flex: 1;
  min-block-size: 0;
  padding-block-end: var(--sidebar-tools-height);
}

.sidebar__tools {
  background-color: var(--sidebar-bg);
  border-top: 1px solid var(--sidebar-border);
  box-sizing: border-box;
  padding-block: calc(var(--block-space) * 1.1);
  padding-block-end: calc((var(--block-space) * 1.1) + env(safe-area-inset-bottom, 0px));
  padding-inline: clamp(0.75rem, 1vw, 1rem);
  padding-inline-end: calc(clamp(0.75rem, 1vw, 1rem) + env(safe-area-inset-right, 0px));
  padding-inline-start: calc(clamp(0.75rem, 1vw, 1rem) + env(safe-area-inset-left, 0px));
  position: fixed;
  inset-block-end: 0;
  inset-inline-end: 0;
  transition: inset-inline-end 180ms ease;
  z-index: 4;

  @media (max-width: 100ch) {
    inset-inline-start: 0;
    inline-size: 100%;
  }

  @media (min-width: 100ch) {
    /* Channel column width (rail is a sibling; tools are not under the rail) */
    inline-size: var(--sidebar-channel-width, var(--sidebar-width));
  }
}

/* Fixed tools must not cover the workspace rail (channel + rail share the drawer on mobile). */
#sidebar:has(.workspace-rail) .sidebar__tools {
  inset-inline-end: var(--workspace-rail-width, 0px);

  @media (max-width: 100ch) {
    inline-size: unset;
    inset-inline-start: 0;
  }

  @media (min-width: 100ch) {
    inline-size: var(--sidebar-channel-width, var(--sidebar-width));
  }
}

.sidebar__tool {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-color: var(--sidebar-fg);
  --hover-color: var(--sidebar-btn-hover-outline);
}

.sidebar__profile {
  --btn-border-radius: 0.4em;
  --btn-padding: 0.25em 0.35em;

  color: var(--sidebar-fg);
  justify-content: start;

  /* Same circular avatar treatment as messages / `avatar_tag` (see `avatars.css`) */
  .avatar {
    --avatar-border-radius: 50%;
  }
}

/* Profile photo: avoid `buttons.css` dark-mode invert on `.btn img:not([class])` */
#sidebar .sidebar__profile-avatar {
  filter: none;
}

.sidebar__settings {
  --btn-color: var(--sidebar-fg-muted);
  --btn-padding: 0.25em;
  min-inline-size: unset;
}

.sidebar__logout {
  --btn-color: var(--sidebar-fg-muted);
  --btn-padding: 0.25em;
  min-inline-size: unset;
}

.sidebar__logout-form {
  display: contents;
}

#sidebar .sidebar__settings img {
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

#sidebar .sidebar__logout img {
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

.sidebar__toggle {
  --btn-background: rgb(255 255 255 / 0.08);
  --btn-border-color: transparent;
  --btn-padding: 0.35rem;
  --hover-color: var(--sidebar-btn-hover-outline);

  flex-shrink: 0;
  position: relative;
  z-index: 1;

  #sidebar:where(:not(.open):has(.unread)) & {
    &::after {
      --size: 1em;

      aspect-ratio: 1;
      background-color: var(--color-negative);
      block-size: var(--size);
      border-radius: calc(var(--size) * 2);
      content: "";
      flex-shrink: 0;
      inline-size: var(--size);
      inset-block-start: calc(var(--size) / -4);
      inset-inline-end: calc(var(--size) / -4);
      position: absolute;
    }
  }

  @media (min-width: 100ch) {
    display: none;
  }

  & img {
    filter: invert(100%);
  }
}

/* Fixed control outside the translated drawer so it stays tappable when the rail is closed */
.sidebar__toggle-fab {
  --btn-background: rgb(255 255 255 / 0.92);
  --btn-border-color: transparent;
  --btn-padding: 0.35rem;
  --hover-color: var(--color-border-darker);

  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  display: none;
  /* Align with `#nav` mobile `padding-block-start` (env top + half block) */
  inset-block-start: calc(env(safe-area-inset-top, 0px) + var(--block-space-half));
  inset-inline-end: calc(env(safe-area-inset-right, 0px) + var(--inline-space-half));
  pointer-events: auto;
  position: fixed;
  z-index: 5;

  & img {
    filter: none;
  }

  body.sidebar & {
    @media (max-width: 100ch) {
      display: inline-grid;
    }
  }

  /* Drawer open: header hamburger is visible; hide the fixed duplicate */
  body.sidebar:has(#sidebar.open) & {
    @media (max-width: 100ch) {
      display: none !important;
    }
  }

  body.sidebar:has(#sidebar:not(.open)):has(#sidebar .unread) & {
    &::after {
      --size: 1em;

      aspect-ratio: 1;
      background-color: var(--color-negative);
      block-size: var(--size);
      border-radius: calc(var(--size) * 2);
      content: "";
      flex-shrink: 0;
      inline-size: var(--size);
      inset-block-start: calc(var(--size) / -4);
      inset-inline-end: calc(var(--size) / -4);
      position: absolute;
    }
  }

  @media (prefers-color-scheme: dark) {
    --btn-background: rgb(40 40 40 / 0.92);

    & img {
      filter: invert(100%);
    }
  }
}

/* Direct messsages */
.directs {
  --row-gap: 0.25em;

  display: flex;
  flex-direction: column;
}

.directs--edit  {
  display: grid;
  gap: var(--inline-space);
  grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
  grid-template-rows: min-content;
  place-items: center;

  .member {
    aspect-ratio: 1;
    block-size: auto;
    inline-size: 100%;
    margin-inline: auto;
    place-content: center;
  }
}

.direct__new {
  margin-inline-end: var(--inline-space-half);

  .avatar {
    margin-inline: 0;
  }
}

#sidebar .sidebar-bot {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-border-radius: 0.2rem;
  --btn-color: var(--sidebar-fg);
  --btn-padding: 0.3rem 0.65rem;
  --hover-color: var(--sidebar-btn-hover-outline);

  color: var(--sidebar-fg-muted);
  justify-content: start;

  &:where(:not(:active)):hover {
    --btn-background: var(--sidebar-row-hover);
  }
}

#sidebar .sidebar-bot:visited {
  color: var(--sidebar-fg-muted);
}


#sidebar .sidebar-bot-empty {
  --btn-color: var(--sidebar-fg-muted);

  color: var(--sidebar-fg-muted);
  font-size: 0.88rem;
  justify-content: center;
  min-block-size: 2.4rem;
}

/* Rooms */
.rooms {
  --column-gap: 0.5em;
  --row-gap: 0.95em;

  padding-block: 0.55rem 0.75rem;
  padding-inline: 0.625rem;
}

/* Composer-style pill (see `composer__input` + `input--actor`), tuned for dark chrome */
#sidebar .rooms__search-field {
  --hover-filter: brightness(1);
  --input-background: rgb(255 255 255 / 0.06);
  --input-border-color: rgb(255 255 255 / 0.16);
  --input-border-radius: 1.25rem;
  --input-border-size: 1px;
  --input-color: var(--sidebar-search-fg);
  --input-padding: 0.45rem 0.85rem;
  --outline-size: 0;

  font-size: 0.92rem;
  margin-block: 0.15rem 0.45rem;
  min-block-size: 2.45rem;
  text-align: start;
  text-decoration: none;
}

#sidebar .rooms__search-field:focus-visible {
  --input-border-color: rgb(255 255 255 / 0.35);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.12);
  outline: none;
}

#sidebar .rooms__search-field-icon {
  filter: invert(100%);
  opacity: 0.85;
}

#sidebar .rooms__search-field-label {
  color: var(--sidebar-fg-muted);
  font-weight: 500;
}

.sidebar-group {
  --row-gap: 0.25em;
}

.sidebar-group__heading {
  --column-gap: 0.35em;
  margin-block-end: 0.15em;
  padding-block: 0.1rem;
  padding-inline: 0.35rem;
}

#sidebar .sidebar-group__header {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-border-radius: 0.3rem;
  --btn-color: var(--sidebar-fg-muted);
  --btn-padding: 0.4rem 0.5rem;
  --hover-color: var(--sidebar-btn-hover-outline);

  color: var(--sidebar-fg-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#sidebar .sidebar-group__header:where(:not(:active):hover) {
  --btn-background: var(--sidebar-row-hover);
}

.sidebar-group__arrow {
  block-size: 0.85rem;
  inline-size: 0.85rem;
  opacity: 0.85;
  transition: transform 120ms ease-in-out;
}

.sidebar-group__header[aria-expanded="false"] .sidebar-group__arrow {
  transform: rotate(-90deg);
}

#sidebar .sidebar-group__count {
  color: var(--sidebar-fg-subtle);
  font-size: 0.75rem;
  font-weight: 500;
}

#sidebar .sidebar-group__action {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-color: var(--sidebar-fg);
  --btn-padding: 0.15em 0.1em;
  --hover-color: var(--sidebar-btn-hover-outline);

  block-size: calc(var(--btn-size) * 0.8);
  flex-shrink: 0;
  inline-size: calc(var(--btn-size) * 0.8);
  min-inline-size: unset;
  opacity: 0.9;
}

#sidebar .sidebar-group__action:hover {
  --btn-background: var(--sidebar-row-hover);
}

#sidebar .sidebar-group__action img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* `colorize--black` assumes a light page; sidebar chrome is always dark */
#sidebar .colorize--black {
  filter: invert(100%);
}

.sidebar-group__rows {
  --row-gap: 0.16em;

  display: flex;
  flex-direction: column;
}

.sidebar-row {
  inline-size: 100%;
  justify-content: start;
  max-inline-size: none;
  margin-inline: 0;
}

#sidebar .sidebar-row__prefix {
  align-items: center;
  color: var(--sidebar-fg-subtle);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.92rem;
  inline-size: 1.35rem;
  justify-content: center;
  text-align: center;
}

#sidebar .sidebar-row__prefix--dm::before {
  aspect-ratio: 1;
  background-color: var(--sidebar-fg-muted);
  block-size: 0.55rem;
  border-radius: 999px;
  content: "";
  display: block;
  inline-size: 0.55rem;
}

/* Direct peer is online (workspace activity based presence). */
#sidebar .sidebar-row__prefix--dm-online::before {
  background-color: var(--color-positive);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35);
}

#sidebar .sidebar-row__label {
  color: var(--sidebar-fg-muted);
  flex: 1 1 auto;
  font-size: 0.92rem;
  font-weight: 500;
  min-inline-size: 0;
}

#sidebar .sidebar-row--active .sidebar-row__prefix,
#sidebar .sidebar-row--active .sidebar-row__label {
  color: var(--sidebar-row-active-fg);
}

#sidebar .sidebar-row--active .sidebar-row__prefix--dm::before {
  background-color: var(--sidebar-row-active-fg);
}

/* Keep “peer in this chat” green on the active row; only the idle gray dot follows pill contrast */
#sidebar .sidebar-row--active .sidebar-row__prefix--dm-online::before {
  background-color: var(--color-positive);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.55);
}

#sidebar .sidebar-group__title {
  color: var(--sidebar-fg-muted);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Sidebar + search drawer list rows (dark chrome) — channels and DMs share one row block */
#sidebar .room {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-border-radius: 0.2rem;
  --btn-color: var(--sidebar-fg);
  --btn-padding: 0.3rem 0.65rem;
  --hover-color: var(--sidebar-btn-hover-outline);

  box-shadow: none;
  color: var(--sidebar-fg-muted);
  font-size: 0.92rem;
  font-weight: normal;
  inline-size: 100%;
  justify-content: start;
  margin-inline: 0;
  max-inline-size: none;
  min-block-size: 1.9rem;
  position: relative;
  text-align: start;
  text-decoration: none;

  .searches-list & {
    border-radius: 0.5em;
  }

  &:focus-within,
  &:where(:not(:active)):focus-visible {
    outline: 0;
  }

  &:where(:not(:active)):hover {
    --btn-background: var(--sidebar-row-hover);
  }

  &.unread {
    color: var(--sidebar-fg);
    font-weight: 700;
    padding-inline-end: 1.4rem;
  }
}

/* Unread dot: scope to `.sidebar-row.room.btn` so it still applies when `#sidebar` is not an ancestor
   (turbo-frame + `display: contents`). */
.sidebar-row.room.btn .sidebar-row__unread-dot {
  display: none;
}

.sidebar-row.room.btn.unread .sidebar-row__unread-dot {
  align-items: center;
  display: flex;
  filter: drop-shadow(0 0 0.5px rgb(0 0 0 / 0.35));
  forced-color-adjust: none;
  inset-block-start: 50%;
  inset-inline-end: 0.5rem;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  transform: translateY(-50%);
  z-index: 1;
}

.sidebar-row.room.btn.unread .sidebar-row__unread-dot svg {
  display: block;
}

.sidebar-row.room.btn.unread .sidebar-row__unread-dot circle {
  fill: #ff4d4f;
}

.sidebar-row.room.btn.sidebar-row--active.unread .sidebar-row__unread-dot circle {
  fill: color-mix(in oklab, #ff4d4f, white 18%);
}

/* `.btn` uses `--btn-background`; do not set `background-color` on `.room` or it overrides the active pill */
#sidebar .room.sidebar-row--active {
  --btn-background: var(--sidebar-row-active-bg);
  --btn-color: var(--sidebar-row-active-fg);
  --hover-color: transparent;

  color: var(--sidebar-row-active-fg);
}

#sidebar .room.sidebar-row--active.unread {
  color: var(--sidebar-row-active-fg);
}

#sidebar .room:visited:not(.sidebar-row--active) {
  color: var(--sidebar-fg-muted);
}

/* Nav “recent search” chips stay on the main (light) surface */
.searches__recents .room {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-border-radius: 0.35em;
  --btn-padding: 0.22rem 0.55rem;

  background-color: transparent;
  color: color-mix(in oklab, var(--color-text), var(--color-bg) 22%);
  font-size: 0.92rem;
  font-weight: normal;
  justify-content: start;
  min-block-size: 1.9rem;

  &:where(:not(:active)):hover {
    --btn-background: color-mix(in oklab, var(--color-text), var(--color-bg) 90%);
  }

  &.unread {
    color: var(--color-text);
    font-weight: 700;
  }
}

.room--current {
  --btn-border-radius: 0.5em;
  --hover-filter: none;
  --num-buttons: 1;

  min-block-size: var(--btn-size);

  .room__contents {
    .account-has-logo & {
      --num-buttons: 2;
    }

    max-inline-size: calc(100dvw - (var(--btn-size) * var(--num-buttons)) - (var(--btn-size) + max(var(--inline-space), 1vw)) - ((var(--inline-space) + 1.8em) * 2) - var(--sidebar-width) - var(--inline-space) * var(--num-buttons));

    @media (max-width: 100ch) {
      --num-buttons: 2;

      .account-has-logo & {
        --num-buttons: 3;
      }
    }
  }
}

/* Searches */
.searches {
  #nav {
    align-items: start;
    column-gap: 0;
    padding-inline-end: 0;
  }

  .rooms {
    padding-block-start: var(--block-space);
  }

  .message--formatted .message__room {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    visibility: visible;
    white-space: nowrap;

    &::before {
      content: "→";
    }

    .message--me & {
      &::after {
        content: "←";
      }

      &::before {
        content: "";
      }
    }
  }

  .message__actions {
    display: none !important;
    visibility: hidden !important;
  }
}

.searches__recents {
  --mask: linear-gradient(to left, oklch(0% 0 0 / 1) 97%, oklch(0% 0 0 / 0) 99%);

  -webkit-mask-image: var(--mask);
  display: none;
  mask-image: var(--mask);
  position: relative;

  @media (max-width: 100ch) {
    display: flex;
  }

  .room {
    max-inline-size: 20ch;

    &:first-child {
      margin-inline-start: var(--inline-space);
    }
  }

  .searches__btn {
    margin-inline-end: var(--inline-space-double);
  }
}

.searches__query {
  --btn-border-radius: 0.5em;

  min-block-size: var(--btn-size);
}

.searches__results {
  padding-block-start: var(--navbar-height);
}

.searches__input:required:invalid {
  ~ .searches__reset {
    display: none;
    visibility: hidden;
  }
}

@media (max-width: 100ch) {
  #sidebar .rooms {
    --row-gap: 0.85rem;
    padding-inline: clamp(0.75rem, 3vw, 1.15rem);
  }

  #sidebar .rooms__search-field {
    --input-padding: 0.5rem 0.95rem;
  }

  #sidebar .sidebar-group__header {
    font-size: 0.78rem;
  }

  #sidebar .room {
    --btn-padding: 0.36em 0.55rem;
  }
}

#user_sidebar {
  block-size: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-block-size: 100dvh;
  min-block-size: 0;
  min-inline-size: 0;
}

.sidebar__layout {
  align-items: stretch;
  block-size: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  max-block-size: 100dvh;
  min-block-size: 0;
  min-inline-size: 0;
}

.sidebar__column {
  flex: 1 1 auto;
  max-block-size: 100dvh;
  min-block-size: 0;
  min-inline-size: 0;
}

/* Workspace rail: same column layout on all viewports (inside the drawer on narrow screens). */
.workspace-rail {
  /* Cap logo size so tiles don’t fill the full column; still scales down if the rail is narrow. */
  --workspace-rail-avatar: min(2.45rem, calc(var(--workspace-rail-width) - 0.9rem));

  background-color: #0c0c0c;
  border-inline-start: 1px solid var(--sidebar-border);
  box-sizing: border-box;
  flex: 0 0 var(--workspace-rail-width);
  justify-content: space-between;
  max-block-size: 100dvh;
  min-block-size: 0;
  min-inline-size: 0;
  padding-block: 0.5rem 0.65rem;
  padding-inline: 0.35rem;
  transition: flex-basis 180ms ease;

  @media (max-width: 100ch) {
    /* Align with header safe area — rail is full-height, header already pads the column only */
    padding-block-start: calc(0.5rem + env(safe-area-inset-top, 0px));
    padding-block-end: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  }
}

.sidebar__layout.workspace-rail--collapsed .workspace-rail {
  border-width: 0;
  display: none;
  flex: 0 0 0;
  margin: 0;
  padding: 0;
}

.workspace-rail__list {
  flex: 1 1 auto;
  gap: 0.4rem;
  min-block-size: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.workspace-rail__footer {
  flex-shrink: 0;
  margin-block-start: auto;
  padding-block-start: 0.35rem;
}

.workspace-rail__form {
  display: block;
  inline-size: 100%;
  margin: 0;
}

.workspace-rail__toggle--header {
  --btn-background: rgb(255 255 255 / 0.1);
  --btn-border-color: transparent;
  --btn-padding: 0.1rem;
  --hover-color: var(--sidebar-btn-hover-outline);

  display: inline-flex;
  flex-shrink: 0;

  .workspace-rail__icon {
    filter: invert(100%);
    opacity: 0.9;
  }
}

.sidebar__layout.workspace-rail--collapsed .workspace-rail__toggle--header .workspace-rail__icon--expanded,
.sidebar__layout:not(.workspace-rail--collapsed) .workspace-rail__toggle--header .workspace-rail__icon--collapsed {
  display: none;
}

/* `btn` + `avatar` on the control avoids `buttons.css` shrinking imgs to 1.3em on `.btn:has(img):not(.avatar)`. */
.workspace-rail__btn.avatar {
  --avatar-border-radius: 0.45em;
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-border-radius: 0.45rem;
  --btn-border-size: 0;
  --btn-color: var(--sidebar-fg);
  --btn-padding: 0;
  --hover-color: rgb(255 255 255 / 0.22);

  align-items: center;
  block-size: calc(var(--workspace-rail-avatar) + 0.2rem);
  border: none;
  box-sizing: border-box;
  display: inline-flex;
  inline-size: 100%;
  justify-content: center;
  max-inline-size: calc(var(--workspace-rail-avatar) + 0.2rem);
  min-inline-size: calc(var(--workspace-rail-avatar) + 0.2rem);
  overflow: visible;

  &:hover {
    filter: none;
  }
}

.workspace-rail__btn .account-logo {
  --avatar-border-radius: 0.45em;
  --avatar-size: var(--workspace-rail-avatar);
  block-size: var(--avatar-size);
  border-radius: var(--avatar-border-radius);
  flex-shrink: 0;
  inline-size: var(--avatar-size);
}

/* `outline` ignores `border-radius` in browsers → broken rings. Use `box-shadow`, which follows the rounded rect. */
.workspace-rail__btn.avatar.is-active .account-logo {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.92);
}

/* Fill the figure; `buttons.css` `.btn.avatar img { inline-size: 100% }` sizes against the figure, not 1.3em. */
#sidebar .workspace-rail .account-logo img {
  block-size: 100%;
  filter: none;
  inline-size: 100%;
  max-block-size: 100%;
  max-inline-size: 100%;
  object-fit: cover;
}

.workspace-rail .account-logo__initials {
  color: rgb(255 255 255 / 0.95);
  font-size: 0.58rem;
}

.workspace-rail__add {
  --btn-background: transparent;
  --btn-border-color: rgb(255 255 255 / 0.22);
  --btn-border-radius: 0.45rem;
  --btn-color: var(--sidebar-fg-muted);
  --btn-padding: 0;
  --hover-color: rgb(255 255 255 / 0.35);

  align-items: center;
  block-size: calc(var(--workspace-rail-avatar) + 0.45rem);
  flex-shrink: 0;
  inline-size: calc(var(--workspace-rail-avatar) + 0.45rem);
  justify-content: center;
}

.workspace-rail__add-icon {
  filter: invert(100%);
  opacity: 0.85;
}

/* ⋯ menu only when there is no workspace rail (same rail UI replaces it on mobile and desktop). */
#sidebar:has(.workspace-rail) .sidebar__workspace-switcher--mobile {
  display: none !important;
}

.sidebar__workspace-switcher--mobile {
  @media (min-width: 100ch) {
    display: none;
  }
}

#sidebar .sidebar__workspace-header .sidebar__account-logo {
  @media (min-width: 100ch) {
    display: none;
  }
}