/* ============================================================================
   human-sidebar.css  —  SINGLE SOURCE OF TRUTH for the app sidebar look
   ----------------------------------------------------------------------------
   The Settings sidebar (resources/views/layouts/settings.blade.php) is the
   reference design. Its visual language lives here so BOTH the Settings shell
   AND the main-app chat sidebars (components/public-side-bar.blade.php +
   private-side-bar.blade.php) wear the same skin.

   Two skins, one set of tokens:
     - Settings shell rules are scoped under `.shell` (settings-only ancestor).
     - Chat-app rules are scoped under `#mainSidebar` (chat-only id) + chat-only
       class names. They only touch COSMETIC properties (colour, radius, spacing,
       label typography, active pill) and never layout / collapse / opacity, so
       the collapse-expand, chat list, New Chat, search and all JS stay intact.

   Palette + font come from each page's own :root (style.css / settings inline),
   which already share the same values and support dark mode, so both skins
   inherit dark theme automatically. Edit the --sb-* tokens below once to move
   both sidebars together.
   ========================================================================== */

:root {
  --sb-width: 248px;          /* expanded sidebar width */
  --sb-item-radius: 12px;     /* nav item / chat item corner */
  --sb-item-pad-y: 10px;
  --sb-item-pad-x: 12px;
  --sb-item-gap: 11px;
  --sb-item-size: 14px;
  --sb-item-weight: 450;
  --sb-active-weight: 550;
  --sb-icon-size: 17px;
  --sb-label-size: 10px;      /* uppercase section label */
  --sb-label-spacing: .13em;
  --sb-label-weight: 600;
  --sb-label-pad: 14px 12px 6px;
}

/* ========================================================================== */
/* SETTINGS SHELL  —  the reference look (moved verbatim from settings.blade,  */
/* now token-driven and scoped to .shell)                                      */
/* ========================================================================== */
.shell .sidebar {
  width: var(--sb-width);
  flex-shrink: 0;
  background: var(--sideBar-bg);
  border-right: 1px solid var(--border);
  height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Fixed top (brand + back-to-app), scrolling middle, fixed footer. */
.shell .sidebar-head {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 16px 8px;
}
.shell .sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 16px 12px;
}
/* Unified brand lockup (Task 2033): BOTH sidebars now wear the same "hey human"
   wordmark (img/human-logo.svg) at the same size + position. The main-app header
   row is re-flowed to match the Settings head so the logo lands identically. */
.shell .sidebar .brand,
#mainSidebar .sidebar-branding .brand { padding: 6px 10px 14px; display: block; text-decoration: none; }
.shell .sidebar .brand img,
#mainSidebar .sidebar-branding .brand img { height: 26px; width: auto; display: block; }
/* Wordmark is dark artwork; invert it in dark mode so it stays legible. */
body.dark .shell .sidebar .brand img,
body.dark #mainSidebar .sidebar-branding .brand img { filter: invert(1) grayscale(1); }
/* Main-app header row: drop the fixed 60px height + space-between (toggle is gone)
   and match the Settings head padding so both logos share one vertical position. */
#mainSidebar .sidebar-header-row {
  height: auto;
  padding: 22px 16px 8px;
  justify-content: flex-start;
}
.shell .sidebar .nav-group-label {
  text-transform: uppercase;
  letter-spacing: var(--sb-label-spacing);
  font-size: var(--sb-label-size);
  font-weight: var(--sb-label-weight);
  color: var(--light-text);
  padding: var(--sb-label-pad);
}
.shell .side-link {
  display: flex;
  align-items: center;
  gap: var(--sb-item-gap);
  padding: var(--sb-item-pad-y) var(--sb-item-pad-x);
  border-radius: var(--sb-item-radius);
  font-size: var(--sb-item-size);
  color: var(--text);
  text-decoration: none;
  font-weight: var(--sb-item-weight);
}
.shell .side-link svg {
  width: var(--sb-icon-size);
  height: var(--sb-icon-size);
  stroke: var(--light-text);
  flex-shrink: 0;
}
.shell .side-link:hover { background: var(--hover); }
.shell .side-link.active {
  background: var(--white);
  border: 1px solid var(--border);
  font-weight: var(--sb-active-weight);
}
.shell .side-link.active svg { stroke: var(--black); }
.shell .sidebar .spacer { flex: 1; }
.shell .side-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sb-item-pad-y) var(--sb-item-pad-x);
  border-radius: var(--sb-item-radius);
  font-size: 13px;
  color: var(--light-text);
}
.shell .side-foot .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.shell .side-link.danger svg { stroke: var(--danger); }
.shell .side-link.danger.active { border-color: var(--danger); }
.shell .side-foot-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  margin-bottom: 6px;
}

/* ========================================================================== */
/* CHAT-APP SIDEBAR RE-SKIN  —  same tokens, chat-only selectors.              */
/* Cosmetic only. Collapse/expand, chat list, dropdowns, JS untouched.         */
/* ========================================================================== */

/* Match the reference expanded width (collapsed 60px rail is left as-is). */
#mainSidebar.sidebar.expanded { width: var(--sb-width); }

/* Primary actions (New Chat / New Private Chat / New Space) as tidy nav items. */
#mainSidebar .sidebar-menu-actions .menu-item {
  padding: var(--sb-item-pad-y) var(--sb-item-pad-x);
  border-radius: var(--sb-item-radius);
  gap: var(--sb-item-gap);
}
#mainSidebar .sidebar-menu-actions .menu-item span.link-text {
  font-weight: var(--sb-item-weight);
  color: var(--text);
}
#mainSidebar .sidebar-menu-actions .menu-item svg { color: var(--light-text); }
#mainSidebar .sidebar-menu-actions .menu-item:hover svg { color: var(--black); }

/* Section headers ("Your Spaces" / "Your Chats") -> uppercase group labels. */
#mainSidebar .sidebar-menu-chats .chat-label {
  text-transform: uppercase;
  letter-spacing: var(--sb-label-spacing);
  font-size: var(--sb-label-size);
  font-weight: var(--sb-label-weight);
  color: var(--light-text);
  padding: 16px 12px 6px;
}

/* Chat + space rows: same corner + rhythm as Settings nav items. */
#mainSidebar .sidebar-menu-chats ul li.chat-item,
#mainSidebar .sidebar-menu-chats ul li.chat-item-2 {
  padding: var(--sb-item-pad-y) var(--sb-item-pad-x);
  border-radius: var(--sb-item-radius);
  margin-bottom: 3px;
}
#mainSidebar .sidebar-menu-chats ul li.chat-item .text-box,
#mainSidebar .sidebar-menu-chats ul li.chat-item-2 .text-box {
  font-weight: var(--sb-item-weight);
  color: var(--text);
}

/* Active row -> the Settings white "pill" (inset border avoids any reflow). */
#mainSidebar .sidebar-menu-chats ul li.chat-item.active,
#mainSidebar .sidebar-menu-chats ul li.chat-item-2.active {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}
#mainSidebar .sidebar-menu-chats ul li.chat-item.active .text-box,
#mainSidebar .sidebar-menu-chats ul li.chat-item-2.active .text-box {
  font-weight: var(--sb-active-weight);
}

/* Nested space children align to the same left rhythm. */
#mainSidebar .sidebar-menu-chats ul li.chat-item ul.space-chat-lst { padding-left: 6px; }

/* Footer rows (logout + profile) -> rounded nav items, not full pills. */
#mainSidebar .sidebar-footer .info-icon { border-radius: var(--sb-item-radius); }

/* ========================================================================== */
/* SHARED STRUCTURE  —  fixed header + fixed footer, only the middle scrolls.  */
/* Applied to BOTH sidebars so they behave identically: the brand/actions stay */
/* pinned at the top, the user + logout stay pinned at the bottom, and only    */
/* the middle nav/chat list scrolls (and only when it overflows).              */
/* ========================================================================== */

/* --- Chat sidebar (main app) --- */
/* Make the inner shell a full-height flex column. */
#mainSidebar .sidebar-in {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Header row stays put. */
#mainSidebar .sidebar-header-row { flex: none; }
/* Content region grows and becomes the scroll host. */
#mainSidebar .sidebar-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#mainSidebar nav.sidebar-menu {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Primary actions (New Chat etc.) stay put; only the chat list scrolls. */
#mainSidebar .sidebar-menu-actions { flex: none; }
#mainSidebar .sidebar-menu-chats {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;            /* was a fixed 60vh; now flex-driven */
  overflow-y: auto;
}
/* Footer moves from absolute-positioned to a normal pinned flex child. */
#mainSidebar .sidebar-footer {
  position: static;
  flex: none;
  width: auto;
}

/* ========================================================================== */
/* SHARED FOOTER  —  ONE footer skin for BOTH sidebars (Task 2033).            */
/* Every rule targets both `.shell .sidebar-footer` (settings) AND             */
/* `#mainSidebar .sidebar-footer` (chat app). The #mainSidebar id gives enough */
/* specificity to override style.css, so the chat footer no longer wears its   */
/* own sizing (was: pill radius, 5px pad, 32x18 icon). Both footers are now    */
/* pixel-identical: same padding, gap, radius, icon size, avatar + text.       */
/* ========================================================================== */
.shell .sidebar-footer,
#mainSidebar .sidebar-footer {
  position: static;
  flex: none;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--sideBar-bg);
}
.shell .sidebar-footer .info-icon,
#mainSidebar .sidebar-footer .info-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: var(--sb-item-pad-y) var(--sb-item-pad-x);
  border-radius: var(--sb-item-radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background .2s;
}
.shell .sidebar-footer .info-icon:hover,
#mainSidebar .sidebar-footer .info-icon:hover { background: var(--hover); }
.shell .sidebar-footer .menu-item,
#mainSidebar .sidebar-footer .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.shell .sidebar-footer .menu-item svg,
.shell .sidebar-footer .info-icon svg,
#mainSidebar .sidebar-footer .menu-item svg,
#mainSidebar .sidebar-footer .info-icon svg {
  width: var(--sb-icon-size);
  height: var(--sb-icon-size);
  stroke: currentColor;
  flex-shrink: 0;
}
.shell .sidebar-footer .user-profile-row-text,
#mainSidebar .sidebar-footer .user-profile-row-text {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.shell .sidebar-footer .user-profile-row-text .link-text,
#mainSidebar .sidebar-footer .user-profile-row-text .link-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  opacity: 1;
  visibility: visible;
}
.shell .sidebar-footer .user-avatar,
#mainSidebar .sidebar-footer .user-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
.shell .sidebar-footer .user-profile-row-icon,
#mainSidebar .sidebar-footer .user-profile-row-icon {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   WARM PALETTE ACCENTS  (Task 2031, Shepard — 2026-07-14)
   Active nav + avatars read GREEN in BOTH shells. Green tokens come from
   each page's own :root (style.css+human-theme.css for the chat app,
   settings.blade inline :root for settings), which now both define them.
   ========================================================================== */

/* --- Settings shell: active nav item = green pill --- */
.shell .side-link.active {
  background: var(--green-tint);
  border-color: var(--green-soft);
}
.shell .side-link.active svg { stroke: var(--green); }
.shell .side-link.active span { color: var(--green-deep); }

/* --- Chat app: active chat / space row = green pill --- */
#mainSidebar .sidebar-menu-chats ul li.chat-item.active,
#mainSidebar .sidebar-menu-chats ul li.chat-item-2.active {
  background: var(--green-tint);
  box-shadow: inset 0 0 0 1px var(--green-soft);
}
#mainSidebar .sidebar-menu-chats ul li.chat-item.active .text-box,
#mainSidebar .sidebar-menu-chats ul li.chat-item-2.active .text-box {
  color: var(--green-deep);
}

/* --- User avatars carry the primary green (warm brand accent) --- */
.shell .side-foot .avatar,
.shell .sidebar-footer .user-avatar,
#mainSidebar .sidebar-footer .user-avatar {
  background: var(--green);
  color: #fff;
}

/* ==========================================================================
   SETTINGS AREA SELF-ID  (Task 2033)
   Small static "Settings" heading above the Back-to-app link so the settings
   sidebar announces where you are.
   ========================================================================== */
.shell .sidebar-head .settings-title {
  padding: 2px 10px 8px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--text);
}

/* ==========================================================================
   ALWAYS-EXPANDED ALIGNMENT  (Task 2033)
   The sidebar no longer collapses; it is always --sb-width (248px). The chat
   composer was pinned to the old 280px expanded width, so realign it to the
   real sidebar width to close the gap.
   ========================================================================== */
body.expanded-sidebar .form-box-wrapper { left: var(--sb-width); }

/* ==========================================================================
   ROW HOVER ACTION MENU  (Task 2036, Shepard — 2026-07-14)
   The per-row three-dot (⋮) action menu. Goal: a ghost icon button that sits
   neatly INSIDE the row (never overhanging the sidebar edge), vertically
   centred, revealing a subtle rounded highlight ON THE BUTTON ITSELF on hover
   (not a hard sand slab), with no layout jump. Chat rows + space rows behave
   identically; on space rows the expand chevron and the ⋮ align with a clean
   gap. Scoped to #mainSidebar so only the chat sidebars are touched. Overrides
   the base .chat-action* rules in style.css by id-specificity.

   NB: no `transform` on .chat-action — a transform there becomes the containing
   block for the position:fixed dropdown and breaks its JS viewport positioning.
   Vertical centring is done with top/bottom + flex instead.
   ========================================================================== */

/* --- Action wrapper: right-inset inside the row padding, vertically centred.
   Single-line rows (chats + nested space chats) centre on the row height. --- */
#mainSidebar .sidebar-menu-chats ul li.chat-item > .chat-action,
#mainSidebar .sidebar-menu-chats ul li.chat-item-2 > .chat-action {
  right: 6px;
  top: 0;
  bottom: 0;
  transform: none;
  display: flex;
  align-items: center;
}

/* Space header row wraps its (possibly expanded) child list, so pin the menu to
   the HEADER band only (fixed height), not the middle of the whole block. */
#mainSidebar .sidebar-menu-chats ul li.chat-item.space-toggle-main > .chat-action {
  /* ROBUST vertical centring (Task 2047 — replaces the Task 2038 magic top:10px
     + height:40px that fought Task 2044). The ⋮ band is pinned to the
     .accordian-block HEADER row itself, derived from the design tokens, not from
     a hardcoded pixel offset:
       - top:0 == the top of the header. The .accordian-block is the li's first
         child and the space li carries no padding (Task 2044 moved the padding
         onto the .accordian-block for full-width pills), so the header starts at
         the li padding-box top.
       - height == the header's own height, built from the SAME tokens the
         .accordian-block uses: pad-y top + 20px content line + pad-y bottom. A
         future padding-value change flows through to BOTH the header and this
         band, so the dots can no longer drift out of centre.
     display:flex + align-items:center vertically centres the 28px button in that
     band (matching the chevron, which is centred in the same header). NO fixed
     top offset, NO fixed 40px, and NO transform (a transform here would become
     the containing block for the position:fixed dropdown and mis-place it). */
  top: 0;
  bottom: auto;
  height: calc(var(--sb-item-pad-y) * 2 + 20px);
  display: flex;
  align-items: center;
}

/* Reserve a consistent slot on the space header so the chevron clears the ⋮
   (both inside the row bounds, small gap between them). */
#mainSidebar .sidebar-menu-chats ul li.chat-item.space-toggle-main .accordian-block:hover,
#mainSidebar .sidebar-menu-chats ul li.chat-item.space-toggle-main:hover .accordian-block,
#mainSidebar .sidebar-menu-chats ul li.chat-item.space-toggle-main.chat-opened .accordian-block,
#mainSidebar .sidebar-menu-chats ul li.chat-item.space-toggle-main:has(.show) .accordian-block {
  padding-right: 40px;
}

/* --- Ghost icon button: transparent by default, muted-ink glyph, tidy square.
   Sized to sit comfortably inside the row with no overhang. --- */
#mainSidebar .chat-action-btn.drop-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: transparent;
  color: var(--light-text);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

/* Row hover reveals the button but keeps it GHOST (kills the sand slab). */
#mainSidebar .sidebar-menu-chats ul li.chat-item:hover .chat-action .chat-action-btn,
#mainSidebar .sidebar-menu-chats ul li.chat-item-2:hover .chat-action .chat-action-btn {
  background-color: transparent;
  color: var(--light-text);
}

/* Highlight only on the button itself (pointer on button) or while its menu is
   open: subtle rounded warm-green tint + green ink. High-specificity selectors
   beat the base :hover rules in style.css. */
#mainSidebar .sidebar-menu-chats ul li.chat-item .chat-action .chat-action-btn.drop-btn:hover,
#mainSidebar .sidebar-menu-chats ul li.chat-item-2 .chat-action .chat-action-btn.drop-btn:hover,
#mainSidebar .sidebar-menu-chats ul li.chat-item .chat-action:has(.show) .chat-action-btn.drop-btn,
#mainSidebar .sidebar-menu-chats ul li.chat-item-2 .chat-action:has(.show) .chat-action-btn.drop-btn {
  background-color: var(--green-tint);
  color: var(--green-deep);
}

/* --- Dropdown popup (rename / delete / add-to-space): tidy warm card that
   sits just under the button, consistent padding, warm-green hover rows. --- */
#mainSidebar .chat-dropcontent.drop-content {
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color: var(--white);
  padding: 6px;
  min-width: 172px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
#mainSidebar .chat-dropcontent-item-list { gap: 2px; }
#mainSidebar .chat-dropcontent-item-list .item {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
}
#mainSidebar .chat-dropcontent-item-list .item:hover,
#mainSidebar .chat-dropcontent.drop-content:has(.show-drop) .item.add2-space-box {
  background-color: var(--green-tint);
  color: var(--green-deep);
}

/* Nested "Add to space" submenu carries the same warm rounding + hover. */
#mainSidebar .add2-space-dropcontent.drop-content {
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
#mainSidebar .add2-space-dropcontent-list ul li:hover,
#mainSidebar .add2-space-dropcontent-list-2 li:hover {
  background-color: var(--green-tint);
  color: var(--green-deep);
  border-radius: 8px;
}

/* ==========================================================================
   MOBILE RESPONSIVE FIXES  (Task 2039, Shepard — 2026-07-14)
   The desktop always-expanded sidebar (Task 2033) broke the phone layout: the
   sidebar poked a cream sliver onto the content edge, and the chat composer
   stayed pinned to the 248px desktop sidebar offset (shrinking to a pill
   bottom-right on chat screens). These rules are scoped to the mobile
   breakpoint ONLY, so the approved desktop layout is untouched. human-sidebar
   .css loads after style.css, so #id + later-in-cascade win cleanly.

   NB: deliberately NO `transform` on #mainSidebar — a transform there would
   become the containing block for the position:fixed row dropdowns and break
   their viewport positioning. Off-canvas is done with `left` instead.
   ========================================================================== */
@media (max-width: 991px) {
  /* 1. Sidebar fully off-canvas as an overlay drawer (kills the cream sliver).
     The base mobile rules parked it at left:-239px while the width is 248px,
     so 9px bled onto the content edge. Anchor the off-canvas left to the real
     width so nothing shows until the hamburger opens it. */
  #mainSidebar.sidebar {
    left: calc(-1 * var(--sb-width));
    /* Unified drawer motion + shadow (matches the settings drawer). */
    transition: left .24s cubic-bezier(.2, .7, .2, 1);
    box-shadow: 0 0 60px -12px rgba(0, 0, 0, .45);
  }
  /* Hamburger adds .active -> slide the drawer fully in over the content. */
  #mainSidebar.sidebar.active { left: 0; }

  /* 2. Composer + disclaimer take the full viewport width. On mobile the main
     content spans the whole viewport (sidebar is off-canvas), so remove the
     248px sidebar offset that was shrinking the composer to a pill. */
  body.expanded-sidebar .form-box-wrapper,
  body.chat-screen .form-box-wrapper { left: 0; right: 0; }

  /* ------------------------------------------------------------------------
     UNIFIED DRAWER CHROME (Task 2048, Shepard) — make the app drawer match the
     settings drawer: dimmed + blurred scrim, and a header that is logo (left) +
     X close (right) with the same close-button style. Mobile only; desktop
     (static always-expanded sidebar) is untouched.
     ------------------------------------------------------------------------ */
  /* Scrim: same tint + blur as the settings drawer .set-drawer-scrim. */
  .backdrop-box.active {
    background: rgba(17, 17, 17, .42);
    backdrop-filter: blur(2px);
  }
  /* Header row: logo left, close X right. */
  #mainSidebar .sidebar-header-row { justify-content: space-between; }
  #mainSidebar.sidebar .sidebar-mobile-close { display: flex; }
}

/* Mobile drawer close button. Hidden on desktop; on mobile it sits at the top-
   right of the header, styled identically to the settings drawer .sd-close
   (34x34 rounded white square, Lucide X). Closing is wired in app.blade.php
   (closeMainSidebar()), and also fires on scrim-tap + Esc. */
#mainSidebar .sidebar-mobile-close {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--white);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  font-family: inherit;
}
#mainSidebar .sidebar-mobile-close svg {
  width: 18px;
  height: 18px;
  stroke: var(--text);
}

/* ==========================================================================
   SPACE-ROW WIDTH PARITY  (Task 2044, Shepard — 2026-07-14)
   The space header highlight lives on the inner `.accordian-block`. The generic
   #mainSidebar `li.chat-item` re-skin re-asserted 12px horizontal padding on the
   space li (overriding base `li.space-toggle-main{padding:0}` by id-specificity),
   so the accordian-block was inset inside the li padding AND padded again itself.
   Result: the space selected/hover pill rendered NARROWER / more-inset than the
   chat-row pill (which paints on the full-width li).

   Fix: strip the space li's own padding so its `.accordian-block` spans the FULL
   row width, then carry the token padding + radius on the accordian-block itself.
   Now the space pill == the chat pill: same left/right inset, same border-radius,
   same horizontal padding, same single 10px vertical rhythm. The ⋮ column (Task
   2038) and chevron are untouched — the hover/opened `padding-right:40px` rules
   below are more specific and still win, so the dots stay in their column.
   ========================================================================== */
#mainSidebar .sidebar-menu-chats ul li.chat-item.space-toggle-main {
  padding: 0;
}
#mainSidebar .sidebar-menu-chats ul li.chat-item.space-toggle-main .accordian-block {
  padding: var(--sb-item-pad-y) var(--sb-item-pad-x);
  border-radius: var(--sb-item-radius);
}