/* COPILOT FLOATS OVER THE SCREEN (owner, 2026-09-27).
 *
 * The platform docks the Copilot panel as a column of the page from the
 * medium breakpoint up (`md:static md:w-[320px]`, 360px on 2xl), so opening
 * it squeezed whatever was on screen - and our own screens had to stop short
 * of it (layout-width.css). The owner wants it to take no room: it now floats
 * over the right edge of the window, the page under it keeps its full width,
 * and its inner edge carries a handle to make it wider or narrower
 * (copilot-float.js, width in --crm-cp-w).
 *
 * ONLY the Captain widget - the panel the floating button opens, which is a
 * direct child of <main>. The Contact panel beside a conversation carries the
 * very same classes (md:w-[320px], ltr:right-0), and the first version caught
 * it too and floated it over the conversation: the owner asked for the widget
 * alone, and the conversation screen and its panels stay as they were -
 * including Captain there, which stays docked beside the conversation
 * (body.crm-convo, set by conversations.js on every conversations route). The
 * `isOverlay` variant is left alone, and so are phones, where the platform
 * already covers the window with it.
 */
@media (min-width: 768px) {
  body:not(.crm-convo) main > div[class*="md:w-[320px]"][class*="ltr:right-0"]:not([class*="!absolute"]) {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: var(--crm-cp-w, 380px) !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 75 !important;
    box-shadow: -14px 0 36px rgba(15, 23, 42, 0.14) !important;
  }
  html:not([dir="rtl"]) body:not(.crm-convo) main > div[class*="md:w-[320px]"][class*="ltr:right-0"]:not([class*="!absolute"]) {
    right: 0 !important;
    left: auto !important;
  }
  html[dir="rtl"] body:not(.crm-convo) main > div[class*="md:w-[320px]"][class*="ltr:right-0"]:not([class*="!absolute"]) {
    left: 0 !important;
    right: auto !important;
    box-shadow: 14px 0 36px rgba(15, 23, 42, 0.14) !important;
  }
}

/* The handle: a strip along the inner edge, a grip line when you point at it. */
.crm-cp-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  z-index: 5;
  cursor: ew-resize;
  touch-action: none;
  outline: none;
}
.crm-cp-grip[data-side="left"] { left: 0; }
.crm-cp-grip[data-side="right"] { right: 0; }
.crm-cp-grip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: 4px;
  height: 44px;
  margin-top: -22px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.18);
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.crm-cp-grip:hover::after,
.crm-cp-grip:focus-visible::after,
body.crm-cp-resizing .crm-cp-grip::after {
  opacity: 1;
  background: #d4fb08;
}
body.crm-cp-resizing,
body.crm-cp-resizing * {
  cursor: ew-resize !important;
  user-select: none !important;
}
/* No slide animation while the width follows the pointer. */
body.crm-cp-resizing:not(.crm-convo) main > div[class*="md:w-[320px]"][class*="ltr:right-0"] {
  transition: none !important;
}
@media (max-width: 767px) {
  .crm-cp-grip { display: none; }
}