rows get from Vue. */ aside nav ul li[data-crm-nav="deals"] a { color: inherit; text-decoration: none; } aside nav ul li[data-crm-nav="deals"] a:hover { background: var(--n-alpha-2, rgba(255, 255, 255, .06)); } .crm-nav-here { background: var(--n-alpha-2, rgba(255, 255, 255, .08)) !important; color: var(--n-slate-12, #e6e9e2) !important; font-weight: 600; } /* ---- the sidebar's own edge ---------------------------------------------- Three things wanted the same sliver of screen: the round collapse button, the drag-to-resize grip, and the sidebar's border. Measured, the button ran x=251..267 and the grip x=260..270 on a sidebar ending at 267 - overlapping each other by 7px and both hanging outside the panel, which is why the button read as floating over the page rather than belonging to the rail. Chatwoot itself has no collapse button at all and keeps its grip 4px wide, inside the panel. The grip follows that; the button is pulled back in. -------------------------------------------------------------------------- */ .crm-resize-grip { width: 4px !important; transform: translateX(-4px); } /* ---- the account menu belongs to the rail, not to the page ---------------- The menu that opens off the avatar at the foot of the sidebar is a fixed 20rem — 320px — while the rail it hangs from is 260px. It stood 76px out over the dashboard on every screen, and the grip above ran straight across it as a bright line, because the grip is z-index 60 against the menu's 50. The width is the awkward half. Chatwoot anchors the menu to an empty absolutely-positioned wrapper that is 0px wide, so `width: 100%` on the menu measured nothing at all; handing that wrapper back to normal flow makes the rail's own full-width column the thing the percentage is measured against. `:has()` rather than a positional selector so this can only ever reach the wrapper that holds the menu — the availability dot on the avatar is absolutely positioned too, a few nodes away. The 15rem floor is for the shut rail: at 64px there is no "inside" to fit into, and a 64px menu would be worse than one that hangs out. */ aside.bg-n-solid-2 > section:last-of-type div.absolute:has(> div[class*="bottom-12"]) { position: static !important; } aside.bg-n-solid-2 > section:last-of-type div[class*="bottom-12"][class*="z-50"] { width: max(15rem, 100%) !important; z-index: 70 !important; /* over .crm-resize-grip, which is 60 */ } /* The round collapse button is gone. Chatwoot has no such control at all - its sidebar is resized by dragging the edge and nothing else - and ours was a circle floating half over the page, fighting the grip for the same few pixels. Hidden rather than deleted: sidebar-resize.js reads this element's class to know whether the rail is collapsed, so the drag still collapses and expands exactly as before. */ .sidebar-collapse-handle { display: none !important; } /* -------------------------------------------------------------------------- The collapse button (sidebar-resize.js). Open, it lives at the end of the account row. Shut, the row is 64px of logo and there is nowhere to put it, so it takes the logo's place and appears only under the pointer - the logo fades out beneath it, and a small label says what pressing it will do. -------------------------------------------------------------------------- */ .crm-side-toggle { flex-shrink: 0; margin-inline-start: auto; display: grid; place-content: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #687078; cursor: pointer; padding: 0; transition: background-color .12s ease, color .12s ease, opacity .12s ease; } /* The icon is an drawn 1em wide, so its size is the 's font size; ".crm-ico > svg" outranks a width set on the svg alone. */ .crm-side-toggle svg { width: 20px; height: 20px; } .crm-side-toggle > .fi { font-size: 20px; line-height: 0; } .crm-side-toggle:hover { background: rgba(20, 26, 20, .09); color: #1d1b1c; } .dark .crm-side-toggle { color: #a0a8b2; } .dark .crm-side-toggle:hover { background: rgba(255, 255, 255, .12); color: #edefeb; } /* ---- shut: the button stands where the logo was ---- */ /* ---- the mark, shut ---- Open, the tile is 24px to match the platform's own header. Shut, that same 24px sits in a 64px rail directly above the search and compose buttons, which are 32px wide - so the one thing that identifies the product was the smallest thing in the column. It takes their width here: a number the stack already uses, rather than a bigger one picked by eye. */ aside.crm-rail-shut section div[class*="size-9"] { width: 32px !important; height: 32px !important; } aside.crm-rail-shut section div[class*="size-9"] > img, aside.crm-rail-shut section div[class*="size-9"] > svg { width: 21px !important; height: 21px !important; } /* The row shrinks to the mark when the rail closes - 39px wide inside a 64px rail, tight against the top corner. The button overflows it on both axes so the target is the full width of the rail and the height of a row. */ aside.crm-rail-shut section > div:first-child { position: relative; width: 100% !important; min-height: 40px; } /* Faded, never disabled. This used to carry `pointer-events: none` until the row was hovered, and that made the only way of reopening the rail unreliable: a press that arrived before the hover state had painted hit the mark underneath and nothing happened, so a shut sidebar could look permanently stuck. Nothing else lives here when the rail is shut - Vue takes the account switcher out of the row, leaving a plain div holding the mark, with no click of its own to steal - so the button can stay pressable the whole time and let opacity be the only thing the hover changes. */ aside.crm-rail-shut .crm-side-toggle { position: absolute; inset: -4px -12px; width: auto; height: auto; margin: 0; opacity: 0; pointer-events: auto; /* The box is a hit area, not a shape. What is drawn is the circle below. */ background: transparent !important; } /* The circle, exactly where the mark was and exactly its size. The button's box was left large so the whole width of the rail is pressable, but a hover fill on that box is a 63x48 slab in a 64px column - it reads as a panel opening, not as a control being pointed at. The fill is moved onto a pseudo-element sized to the 32px mark it replaces, so the thing that lights up is round and sits exactly where the eye already is. */ aside.crm-rail-shut .crm-side-toggle::before { content: ''; position: absolute; top: 50%; inset-inline-start: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%; background: transparent; transition: background-color .12s ease; } html[dir="rtl"] aside.crm-rail-shut .crm-side-toggle::before { transform: translate(50%, -50%); } aside.crm-rail-shut .crm-side-toggle:hover::before { background: rgba(20, 26, 20, .09); } .dark aside.crm-rail-shut .crm-side-toggle:hover::before { background: rgba(255, 255, 255, .12); } /* The glyph rides above the circle: the pseudo-element is positioned and the svg is not, so without this the fill paints over the icon. */ aside.crm-rail-shut .crm-side-toggle svg { position: relative; z-index: 1; } aside.crm-rail-shut section > div:first-child:hover .crm-side-toggle, aside.crm-rail-shut .crm-side-toggle:focus-visible { opacity: 1; } /* The mark steps aside rather than sitting behind the button. */ aside.crm-rail-shut section > div:first-child:hover > div[class*="size-9"], aside.crm-rail-shut section > div:first-child:has(.crm-side-toggle:focus-visible) > div[class*="size-9"] { opacity: 0; } aside.crm-rail-shut section > div:first-child > div[class*="size-9"] { transition: opacity .12s ease; } /* ---- the frame between the two states ---- A toggle is not one change but two, and they land ~130ms apart. Vue swaps the header row to the other state's markup the moment the state flips, while the rail's width is held still for the length of that re-render, so one state's layout is painted at the other state's width. Shutting, the collapsed row carries `justify-center` - and centred in a 260px sidebar the mark leaves x=12, appears at x=114, holds there for eight frames and slides back to x=16 as the width finally catches up. That jump is the flash. Opening does it in reverse: the open row is laid out at 152px inside a 64px rail, and nothing in this subtree clips, so the account name and the button spill across the conversation list until the width arrives. For the length of the move the contents are held to the start edge and the section clips. The rail's edge travels; what is inside it stays put. */ aside.crm-rail-moving section > div:first-child { justify-content: flex-start !important; } aside.crm-rail-moving section { overflow: hidden; } /* The button is mid-fade in both directions - out across the full 260px on the way shut, in at x=128 outside a 64px rail on the way open. Neither is worth showing, and it is not pressable mid-animation anyway (smoothToggle refuses while `animating`), so it waits for the rail to arrive. */ aside.crm-rail-moving .crm-side-toggle { opacity: 0 !important; transition: none !important; } /* ---- the label, only while the rail is shut ---- */ aside.crm-rail-shut .crm-side-toggle::after { content: attr(data-tip); position: absolute; inset-inline-start: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 5px 9px; border-radius: 7px; background: #1d1b1c; color: #ffffff; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 70; } aside.crm-rail-shut .crm-side-toggle:hover::after { opacity: 1; } .dark aside.crm-rail-shut .crm-side-toggle::after { background: #2b3138; } /* The shut rail's rows sit in its middle (owner, 27 Sep 2026). The nav's one 40px column is wider than the 31px left inside its padding, and a grid puts an overflowing column at the start - so every icon sat 4px right of centre. Centring the column splits the overflow evenly. Only while shut: open, the column is `auto`, and centring it would shrink every row to its text. */ aside.crm-rail-shut nav.grid { justify-content: center; } /* ---- a field with choices in it says so -------------------------------- * * The platform's reset sets `appearance: none` on form controls, and that * takes the native arrow with it - so every