/* The contact page's width, its side panel, and the handle that sets it.
 *
 * NOTHING HERE WAITS FOR JAVASCRIPT.
 *
 * The layout rules used to be written `body[data-crm-cp] …`, and that
 * attribute is set by contact-panel-resize.js once the page has already been
 * drawn. So the page arrived at its shipped 650px, the script ran, and it
 * jumped wide — a visible flinch on every single open, caused by nothing but
 * the order the two files happened to run in.
 *
 * The page describes itself well enough without being told. `max-w-[40.625rem]`
 * appears in exactly two views in the whole compiled bundle — ContactManageView
 * and CompanyDetailView — so it identifies this layout on its own, in the first
 * byte of CSS, before a single script has parsed. The attribute is left to the
 * one thing that genuinely cannot exist before JavaScript: the drag handle.
 */

/* ---------- the page's own column ----------
 *
 * The page caps its content at 650px and centres it, so on any screen worth
 * having there was more empty margin than page.
 *
 * NO NUMBER REPLACES IT. 820, then 980, then 1200 — each measured against
 * whatever window happened to be open, and each wrong on the next screen. The
 * column takes the room its container has; the container was already doing the
 * work, so this follows the sidebar opening, the panel being dragged, and a
 * 1280 laptop or a 3840 monitor, without being told about any of them.
 *
 * The header (breadcrumb, Block contact, Send message) and the body (avatar,
 * stat cards, tabs, edit form) are two separate blocks carrying the SAME cap,
 * which is what keeps them lined up with each other. One rule for both:
 * measuring them separately is how the buttons stop sitting over the edge of
 * the cards beneath them.
 */
div[class*="max-w-[40.625rem]"] {
  max-width: none;
}

/* The 224px the shell holds back on a wide screen.
 *
 * `ltr:2xl:ml-56` puts a 14rem margin on the page shell above 1536px, which is
 * how a 2560px monitor started its content 312px in — sidebar, then a hand's
 * width of nothing, then the page. With the column no longer capped, that
 * margin was the only thing still padding the screen out.
 *
 * `:has()` is what keeps this on the right pages. The class itself is generic —
 * it is on the shell of every screen — so the rule asks for a shell that
 * CONTAINS the capped block, which is to say this layout and no other. Both
 * directions, because the shell carries `rtl:2xl:mr-56` too and the dashboard
 * follows the agent's own language.
 */
@media (min-width: 1536px) {
  [class*="2xl:ml-56"]:has(div[class*="max-w-[40.625rem]"]):where([dir="ltr"], [dir="ltr"] *) {
    margin-left: 3rem;
  }

  [class*="2xl:mr-56"]:has(div[class*="max-w-[40.625rem]"]):where([dir="rtl"], [dir="rtl"] *) {
    margin-right: 3rem;
  }
}

/* ---------- the side panel ----------
 *
 * It ships capped at `max-w-md` — 448px, the same on a 1280px screen and a
 * 3840px one, with no setting anywhere. The cap becomes a number the reader
 * owns, and the fallback is exactly what it was: on any screen where nobody has
 * dragged anything, and on every other page this selector can reach, the value
 * is the 28rem it always was.
 */
section.justify-evenly > div[class*="max-w-md"][class*="lg:block"] {
  max-width: var(--crm-cp-width, 28rem) !important;
  flex: 0 0 auto;
}

/* AND THE MAIN COLUMN HAS TO BE ABLE TO GIVE THE SPACE UP.
 *
 * Both columns are `w-full` shrinking to fit, and the main one carries the
 * default `min-width: auto` — its own contents are its floor. So the panel
 * could be dragged NARROWER all day and refused to go wider: the space it asked
 * for was not the section's to hand over. `min-width: 0` lets a flex item
 * shrink past its contents, which is what makes the handle work in both
 * directions instead of one.
 */
section.justify-evenly:has(div[class*="max-w-[40.625rem]"]) > div:first-child {
  min-width: 0;
}

/* A drag has to be answered in the same frame it happens in. The panel carries
   `transition-all duration-500` for its open and shut, which on a drag reads as
   the edge trailing half a second behind the mouse. */
body[data-crm-cp-dragging] div[class*="max-w-md"][class*="lg:block"],
body[data-crm-cp-dragging] div[class*="max-w-md"][class*="lg:block"] * {
  transition: none !important;
}

/* The page must not select text while the edge is being dragged. */
body[data-crm-cp-dragging] {
  user-select: none;
  cursor: col-resize;
}

/* ---------- the handle ----------
 *
 * A wide invisible target with a thin visible line inside it: 10px is what a
 * mouse can actually hit, 2px is what the eye should have to look at.
 *
 * This one IS built by the script, because an element that does not exist in
 * the page cannot be conjured by a stylesheet. It appearing a moment late costs
 * nothing — the layout is already correct without it.
 */
.crm-cp-grip {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -5px;
  width: 10px;
  cursor: col-resize;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crm-cp-grip i {
  width: 2px;
  height: 46px;
  border-radius: 999px;
  background: transparent;
  transition: background .15s ease;
}

.crm-cp-grip:hover i,
body[data-crm-cp-dragging] .crm-cp-grip i {
  background: rgba(212, 251, 8, .55);
}

/* ---------- the canned-response box in a side panel ----------
 *
 * It opens over the note editor and inherits the panel's width, which used to
 * mean a 365px box: a reply's name and the first few words of it, wrapped.
 * Notes has no preview pane — that is a different component from the one the
 * conversation composer uses, and no stylesheet can add it — so the one pane
 * there is may as well be readable.
 */
body[data-crm-cp] div[class*="rounded-xl"][class*="z-[9999]"] {
  min-width: min(520px, calc(100vw - 40px));
}