/* layout-width.css — stop the settings screens ending long before the window does.
 *
 * Chatwoot caps every settings page at `max-w-5xl` (1024px) and centres it. On
 * a 1400px window that leaves ~120px of nothing on each side; on a 1900px one it
 * is nearly 450px a side, and every table on those screens is squeezed for
 * space the window is already offering.
 *
 * The cap is raised rather than removed: a settings page is mostly forms and
 * prose, and a 1900px line of text is its own kind of unreadable. 1400px is
 * about where a wide table stops helping.
 *
 * Matched on the four utility classes together because that combination is the
 * settings content column and nothing else - the campaigns board carries its
 * own marker attribute and is not touched here.
 */
/* The Contacts screen is the exception: its list runs the full width of the
 * window, so a heading row stopped at 1400px and centred puts `Contacts` and
 * the search box 100px inside every contact underneath them - two left edges on
 * one screen. It is excluded here rather than out-shouted from the other file,
 * because a cap should be decided in one place; contacts-inbox.css then lifts
 * Tailwind's own max-w-5xl on that screen, which needs no !important. */
/* The workflow editor is the other exception: it is a canvas, not prose, and
 * every pixel of width is tree the owner can see (workflow-canvas.css). */
body:not([data-crm-contacts]) main .flex.items-start.w-full.max-w-5xl.mx-auto:not(:has(.crm-wf__stage)) {
  max-width: min(1400px, 100%) !important;
}

/* Where the Copilot panel sits.
 *
 * Copilot is a flex child of <main>, drawn after the router's own view - so on
 * a stock screen it lands on the right edge, which is where it belongs. Our
 * replaced screens (Pipelines, Invoices, IG Campaign, the Insight screens)
 * mount themselves by APPENDING to <main>, which puts the page content after
 * the panel and drew Copilot down the left-hand side of the window, wedged
 * between the sidebar and the screen.
 *
 * One rule instead of changing where eight files insert themselves: the panel
 * is ordered last AND pushed to the end with an automatic start margin. Both
 * are needed - our screens are `position:absolute`, so they are out of the
 * flex flow entirely and on those screens the panel is the only item left to
 * lay out; ordering it last changes nothing and it still lands hard against
 * the sidebar. The auto margin eats the free space in front of it instead.
 *
 * Matched on the panel's own two classes (`ltr:right-0` with `z-40`); the
 * mobile sidebar launcher is the other z-40 child of <main> and sits on the
 * left, so it is not caught. Below the medium breakpoint the panel is `fixed`
 * and neither rule applies, which is correct - there it covers the screen.
 */
main > div[class*="ltr:right-0"][class*="z-40"] {
  order: 9;
  margin-inline-start: auto;
}

/* ...and the room our own screens used to leave for it.
 *
 * Until 2026-09-27 our screens (`position:absolute; inset:0` over <main>, at
 * z-index 60) stopped 320px (360px on 2xl) short of the window's edge while
 * Copilot was open, because Copilot was a docked column of the page. It now
 * floats over the screen at z-index 75 (copilot-float.css), so they keep their
 * full width and nothing is reserved. Below md the panel is `fixed` over the
 * window at the platform's own z-index, so there our screens still step under
 * it:
 */
@media (max-width: 767px) {
  main:has(> div[class*="ltr:right-0"][class*="z-40"]) > :is([class^="crm-"], [class^="ovx-"], [class^="cpo"]) {
    inset-inline-end: 0;
    z-index: 30;
  }
}

/* The Copilot button, over our own screens.
 *
 * The platform draws the launcher at z-index 50, which is above everything it
 * draws itself. Every screen we replace is `position:absolute; inset:0` at
 * z-index 60, so on OUR screens - Overview, Invoices, IG Campaign, the
 * Insight screens - the button was rendered and then painted over: present in
 * the page, invisible on it. It is lifted above them here rather than by
 * lowering eight screens, because 60 is what keeps them over the platform's
 * own leftovers underneath.
 */
main > div[class*="ltr:right-4"][class*="z-50"] {
  z-index: 70;
}

/* The sidebar's own menus, over our screens.
 *
 * The account switcher is a popover drawn INSIDE the <aside> and wider than
 * the rail - it is meant to hang over the screen beside it. It was chopped
 * off down the rail's right edge instead, account names cut mid-word ("ACT
 * Express | Admini").
 *
 * Raising the POPOVER does nothing, and that is the whole lesson: the aside
 * carries `z-40` and a `translate-x-0`, and a transform makes it a stacking
 * context, so every z-index inside it is sealed below 40 - under our screens
 * at 60. The rail itself has to come up. It never overlaps a screen of ours
 * (they start at its edge), so the only thing this changes is what its own
 * menus may hang over.
 */
aside[class*="z-40"] {
  z-index: 65;
}

/* ...and the account list shows the accounts.
 *
 * The switcher's own list is `max-h-96` (384px) with a scrollbar that is
 * drawn only while scrolling, so on an account with thirteen of them it
 * simply looked cut after the ninth - nothing said there was more. A window
 * has the room: 70% of its height, and never taller than 640px so it cannot
 * run past the rail on a laptop.
 */
aside ul[class*="max-h-96"] {
  max-height: min(70vh, 640px);
}