/* conv-history.css — what is left over after the panel is built from the
 * platform's own classes.
 *
 * THIS FILE IS SHORT ON PURPOSE, and that is the point of the rewrite. The
 * first version painted the whole panel here: its own greys, its own font
 * sizes, its own pills. It sat in the right place and still read as a guest,
 * because "built in" is not where a panel opens - it is being made of the same
 * parts as the panel beside it.
 *
 * So the header, the toolbar, the input, the buttons, the rows, the dividers
 * and the empty state are now written with the build's own utility classes,
 * exactly as Search messages writes them. What remains here is the handful of
 * things those classes cannot say: a channel mark is a background image, and
 * the exact-date pair has to be hidden until it is asked for.
 */

/* The channel mark, standing where Search messages puts the sender's avatar
   and at the same size, so the two lists share one rhythm. The image comes
   from channel-icons.css, which means a channel added there arrives here
   without another rule. */
.crm-hist__mark {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Two date fields on a 320px panel that nobody asked for is most of the
   toolbar spent on the rarest case, so they wait until "Pick dates". */
.crm-hist__dates { display: none; }
.crm-hist__dates.is-on { display: flex; }

/* While the panel is open the sidebar's own content is hidden rather than
   unmounted: Vue holds a reference to that subtree, and removing something Vue
   is holding is how you get a sidebar that never comes back. */
.crm-hist-host > :not(.crm-hist) { display: none !important; }

/* When the sidebar is not on screen at all - it is collapsible, and the owner
   works with it collapsed - the panel has no column to sit in, so it takes the
   place the platform's own mobile sheet takes: `fixed top-0 z-40`, the same
   values the sidebar itself uses under `md`.
   ONLY GEOMETRY BELONGS HERE. The surface, the edge and the shadow are added
   as the build's own classes when the panel goes loose - see LOOSE in the js.
   The first version of this rule carried a white background; stripping the
   colours out of this file took it with them, and a fixed panel with no
   background is not a subtle regression: it is a transparent hole, with the
   conversation reading straight through the list. */
.crm-hist--loose {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  z-index: 40;
  width: 360px;
  max-width: 92vw;
}

/* Belt and braces, and deliberately so. If `bg-n-surface-1` is ever renamed by
   an upgrade the panel must still be opaque - being unreadable is worse than
   being the wrong shade, and this is the one place where nothing else supplies
   a background. */
.crm-hist--loose { background: var(--n-surface-1, #ffffff); }
.dark .crm-hist--loose { background: var(--n-surface-1, #14171b); }

/* The menu rows' icons drawn from the icon set: same 14px as the platform's. */
.crm-menu-ic, .crm-menu-ic svg { width: 14px; height: 14px; font-size: 14px; }