/* msg-clock.css — the strip above the conversation list, and the panel it
 * opens. The strip must read as part of the list header, not as a banner
 * somebody pasted on top: one line, the list's own width, the list's own
 * hairline underneath it.
 */
.crm-clock {
  --clk-ink: #1d1b1c;
  --clk-muted: #55606c;
  --clk-line: #e8ebe4;
  --clk-soft: #fbfcf9;
  --clk-blue: var(--crm-ink);
  --clk-warn: var(--crm-alert-ink, #c8243b);

  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--clk-line);
  background: var(--clk-soft);
  color: var(--clk-ink);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.crm-clock:hover { background: color-mix(in srgb, var(--clk-blue) 5%, var(--clk-soft)); }

:root.dark .crm-clock, .dark .crm-clock, [data-theme="dark"] .crm-clock {
  --clk-ink: #e8eaed;
  --clk-muted: #9aa3af;
  --clk-line: #2c3138;
  --clk-soft: #1b1e23;
  /* Dark mode's accent is the platform's own lime (#d4fb08), not the light
     mode blue: the dashboard around these screens turns lime in the dark,
     and a blue control inside it reads as a foreign screen. */
  --clk-blue: #d4fb08;
  --clk-warn: var(--crm-alert-ink, #c8243b);
}

.crm-clock .crm-clock__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; margin: 0;
  border: 1px solid color-mix(in srgb, var(--clk-blue) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--clk-blue) 10%, transparent);
  color: var(--clk-blue);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.crm-clock__caret { font-size: 9px; }
.crm-clock__n { white-space: nowrap; }
.crm-clock__n strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-clock__w { color: var(--clk-muted); }
.crm-clock__n.is-warn strong, .crm-clock__n.is-warn .crm-clock__w { color: var(--clk-warn); }
.crm-clock__dot { color: var(--clk-line); }
.crm-clock__dim { color: var(--clk-muted); }
.crm-clock__more { margin-inline-start: auto; color: var(--clk-muted); font-size: 13px; }

/* ------------------------------------------------------------------ panel */

.crm-clockp {
  --clk-ink: #1d1b1c;
  --clk-muted: #55606c;
  --clk-line: #e8ebe4;
  --clk-card: #ffffff;
  --clk-soft: #f6f7f3;
  --clk-blue: var(--crm-ink);
  --clk-warn: var(--crm-alert-ink, #c8243b);
  /* Where the person came from, two colours the owner picked. They are their
     OWN tokens rather than --clk-blue, because --clk-blue turns lime in the
     dark to follow the dashboard's accent - an "ad" chip that changed colour
     with the theme would stop meaning one thing. */
  --clk-ad: #2563eb;
  --clk-direct: #7c3aed;
  --clk-bad: #b3261e;

  position: fixed;
  z-index: 70;
  overflow: auto;
  padding: 14px 18px 18px;
  border-inline-start: 1px solid var(--clk-line);
  background: var(--clk-soft);
  color: var(--clk-ink);
  font-size: 13px;
  text-align: start;
}

:root.dark .crm-clockp, .dark .crm-clockp, [data-theme="dark"] .crm-clockp {
  --clk-ink: #e8eaed;
  --clk-muted: #9aa3af;
  /* Lifted, not inverted: the same two hues, bright enough to read on the
     dark card they sit on. */
  --clk-ad: #6aa6ff;
  --clk-direct: #b291ff;
  --clk-bad: #ef6f61;
  --clk-line: #2c3138;
  --clk-card: #1b1e23;
  --clk-soft: #15181c;
  /* Dark mode's accent is the platform's own lime (#d4fb08), not the light
     mode blue: the dashboard around these screens turns lime in the dark,
     and a blue control inside it reads as a foreign screen. */
  --clk-blue: #d4fb08;
  --clk-warn: var(--crm-alert-ink, #c8243b);
}

.crm-clockp * { box-sizing: border-box; }
.crm-clockp button, .crm-clockp a, .crm-clockp input, .crm-clockp select { font: inherit; }

.crm-clockp__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.crm-clockp__title { font-size: 15px; font-weight: 700; }
.crm-clockp__sub { font-size: 12px; color: var(--clk-muted); }
/* THE GLYPH HAD NOTHING CENTRING IT. A 26px button with a text ✕ inside and
   no layout of its own puts the character on the text baseline with the
   browser's default button padding around it - so it sat low and off to one
   side. A flex box with the padding zeroed puts it in the middle of the
   square, at any font size. */
.crm-clockp .crm-clockp__x {
  margin-inline-start: auto; width: 26px; height: 26px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; font: inherit; font-size: 13px; line-height: 1;
  border: 1px solid var(--clk-line); border-radius: 8px;
  background: var(--clk-card); color: var(--clk-muted); cursor: pointer;
}
.crm-clockp .crm-clockp__x:hover { color: var(--clk-ink); border-color: var(--clk-blue); }

.crm-clockp__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.crm-clockp .crm-clockp__chip {
  padding: 5px 12px; border: 1px solid var(--clk-line); border-radius: 999px;
  background: var(--clk-card); color: var(--clk-muted); cursor: pointer;
  font-size: 12px; white-space: nowrap;
}
.crm-clockp .crm-clockp__chip:hover { border-color: var(--clk-blue); color: var(--clk-blue); }
.crm-clockp .crm-clockp__chip.is-on {
  border-color: color-mix(in srgb, var(--clk-blue) 40%, transparent);
  background: color-mix(in srgb, var(--clk-blue) 10%, transparent);
  color: var(--clk-blue); font-weight: 600;
}

.crm-clockp__custom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.crm-clockp__lbl { font-size: 12px; color: var(--clk-muted); }
/* The dashboard stretches every `input[type]` through a selector with a dozen
   :not() clauses; `.reset-base` is that selector's own escape hatch. */
.crm-clockp .crm-clockp__in {
  width: auto; flex: 0 0 auto; height: 32px; margin: 0; padding: 4px 9px;
  border: 1px solid var(--clk-line); border-radius: 8px;
  background: var(--clk-card); color: var(--clk-ink); font-size: 12.5px;
}
.crm-clockp select.crm-clockp__in { margin-inline-start: auto; max-width: 200px; }

/* THREE OVER THREE, at the owner's word. `auto-fit` packed as many as would
   fit on a line, so six tiles came out four-and-two on a wide panel and the
   row read as two unrelated groups. A fixed three-column grid makes the six a
   block, and the pairs that belong together sit under each other. */
.crm-clockp__tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px;
}
@media (max-width: 640px) {
  .crm-clockp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .crm-clockp__tiles { grid-template-columns: minmax(0, 1fr); }
}
.crm-clockp__tile {
  padding: 10px 12px; border: 1px solid var(--clk-line); border-radius: 8px; background: var(--clk-card);
}
.crm-clockp__v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.crm-clockp__l { font-size: 11.5px; color: var(--clk-muted); margin-top: 2px; }
.crm-clockp__tile.is-warn .crm-clockp__v { color: var(--clk-warn); }
.crm-clockp__tile.is-bad .crm-clockp__v { color: var(--clk-bad); }
.crm-clockp .crm-clockp__tile.is-bad.is-on {
  border-color: var(--clk-bad); box-shadow: inset 0 0 0 1px var(--clk-bad);
}

/* A TILE THAT NARROWS THE LIST HAS TO LOOK LIKE ONE, and the two that cannot
   have to look like they cannot. "messages in" and "people" count messages
   and senders, not conversations, so there is no list behind them - they stay
   flat while the other three lift and take a pointer. */
.crm-clockp button.crm-clockp__tile {
  font: inherit; color: inherit; text-align: inherit; cursor: pointer; width: 100%;
  transition: border-color .12s, transform .12s;
}
.crm-clockp button.crm-clockp__tile:hover { border-color: var(--clk-accent, var(--clk-warn)); transform: translateY(-1px); }
.crm-clockp button.crm-clockp__tile:focus-visible { outline: 2px solid var(--clk-warn); outline-offset: 2px; }
.crm-clockp .crm-clockp__tile.is-on {
  border-color: var(--clk-warn);
  box-shadow: inset 0 0 0 1px var(--clk-warn);
}

/* The line between the counts and the list: what the list is showing, and the
   button that hands exactly that over as a file. */
/* The row now carries three lines, so it stops being vertically centred and
   the marks column keeps its own top alignment. */
.crm-clockp .crm-clockp__row { align-items: flex-start; }
.crm-clockp__left { min-width: 0; flex: 1 1 auto; }
.crm-clockp__nameline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crm-clockp__nameline .crm-clockp__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* WHERE THEY CAME FROM, as a mark rather than a word in the meta line: an ad
   is the one worth picking out of sixty rows, so it carries the colour and
   "direct" stays quiet. */
.crm-clockp .crm-clockp__src {
  flex: 0 0 auto; font-size: 10px; font-weight: 600; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 5px; line-height: 1.6;
  color: var(--clk-direct);
  border: 1px solid color-mix(in srgb, var(--clk-direct) 45%, transparent);
  background: color-mix(in srgb, var(--clk-direct) 12%, transparent);
}
.crm-clockp .crm-clockp__src.is-ad {
  color: var(--clk-ad);
  border-color: color-mix(in srgb, var(--clk-ad) 45%, transparent);
  background: color-mix(in srgb, var(--clk-ad) 12%, transparent);
}

/* What they said. One line, cut by the box so a wider panel shows more. */
.crm-clockp__said {
  font-size: 11.5px; color: var(--clk-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

.crm-clockp .crm-clockp__tag.is-bad {
  color: var(--clk-bad);
  border-color: color-mix(in srgb, var(--clk-bad) 45%, transparent);
  background: color-mix(in srgb, var(--clk-bad) 12%, transparent);
}

.crm-clockp__bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 8px; min-height: 28px;
}
.crm-clockp__barsays { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.crm-clockp .crm-clockp__clear {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 11.5px; color: var(--clk-muted); text-decoration: underline;
}
.crm-clockp .crm-clockp__clear:hover { color: var(--clk-ink); }
.crm-clockp .crm-clockp__csv {
  flex: 0 0 auto; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--clk-line); background: var(--clk-card); color: var(--clk-ink);
}
.crm-clockp .crm-clockp__csv:hover:not(:disabled) { border-color: var(--clk-warn); }
.crm-clockp .crm-clockp__csv:disabled { opacity: .55; cursor: default; }
.crm-clockp .crm-clockp__csv:focus-visible { outline: 2px solid var(--clk-warn); outline-offset: 2px; }

.crm-clockp__list { display: grid; gap: 6px; }
.crm-clockp .crm-clockp__row {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 8px 11px; border: 1px solid var(--clk-line); border-radius: 8px;
  background: var(--clk-card); color: inherit; text-decoration: none;
}
.crm-clockp .crm-clockp__row:hover { border-color: var(--clk-blue); }
.crm-clockp__name { font-size: 13px; font-weight: 600; unicode-bidi: plaintext; }
.crm-clockp__meta { font-size: 11px; color: var(--clk-muted); margin-top: 2px; }
.crm-clockp__marks { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.crm-clockp__tag {
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--clk-line);
  font-size: 10.5px; color: var(--clk-muted); white-space: nowrap;
}
.crm-clockp__tag.is-warn { border-color: var(--clk-warn); color: var(--clk-warn); }

.crm-clockp__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-top: 14px; }
.crm-clockp .crm-clockp__link { color: var(--clk-blue); text-decoration: underline; text-underline-offset: 2px; font-size: 12.5px; }
.crm-clockp__note { font-size: 11.5px; color: var(--clk-muted); }
.crm-clockp__dim { font-size: 12.5px; color: var(--clk-muted); padding: 6px 0; }

/* ------------------------------------------ the strip, tidied (2026-09-30)
   One quiet line in the list's own tokens: a hairline dropdown for the
   period, the counts beside it, never wider than the list (the owner saw
   "35 waitin" cut off on a laptop). Below 380px the words "messages" and
   "people" become their Iconsax icons (the title still says them) and the dots go. */
.crm-clock {
  container-type: inline-size;
  min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box;
  gap: 8px; height: 36px; padding: 0 12px;
  background: #fff; border-bottom-color: rgba(53, 60, 69, .16);
  color: #282e34;
}
.crm-clock:hover { background: #f7f8f9; }
.crm-clock .crm-clock__chip {
  height: 24px; padding: 0 8px 0 10px; gap: 5px; border-radius: 8px;
  border: 1px solid rgba(53, 60, 69, .16); background: #fff; color: #282e34;
  font-weight: 500; flex: 0 0 auto;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1);
}
.crm-clock .crm-clock__chip:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.crm-clock__caret { font-size: 9px; opacity: .7; }
.crm-clock__n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #282e34; }
.crm-clock__w { color: #626f7f; }
.crm-clock__dot { color: rgba(53, 60, 69, .3); }
.crm-clock__more { flex: 0 0 auto; color: #626f7f; }
.crm-clock__n .crm-clock__ic {
  display: none; align-items: center; margin-inline-end: 4px;
  font-size: 14px; line-height: 1; color: #626f7f; vertical-align: -2px;
}
.crm-clock__n .crm-clock__ic svg { width: 14px; height: 14px; }

@container (max-width: 380px) {
  .crm-clock__dot { display: none; }
  .crm-clock__n.is-msg .crm-clock__w, .crm-clock__n.is-ppl .crm-clock__w { display: none; }
  .crm-clock__n .crm-clock__ic { display: inline-flex; }
}
:root.dark .crm-clock, .dark .crm-clock, [data-theme="dark"] .crm-clock { background: var(--clk-soft); color: var(--clk-ink); border-bottom-color: var(--clk-line); }
:root.dark .crm-clock .crm-clock__chip, .dark .crm-clock .crm-clock__chip { background: transparent; color: var(--clk-ink); border-color: var(--clk-line); }
:root.dark .crm-clock__n, .dark .crm-clock__n { color: var(--clk-ink); }

/* The panel's list never pushes past the panel: a grid item's minimum is its
   content, so one long line (a row of dashes) widened every row. */
.crm-clockp { overflow-x: hidden; }
.crm-clockp__list { grid-template-columns: minmax(0, 1fr); }
.crm-clockp .crm-clockp__row { min-width: 0; }
.crm-clockp__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-clockp .crm-clockp__chip, .crm-clockp .crm-clockp__in, .crm-clockp .crm-clockp__csv, .crm-clockp .crm-clockp__tile, .crm-clockp .crm-clockp__row {
  border-color: rgba(53, 60, 69, .16);
}
.crm-clockp .crm-clockp__chip { height: 32px; padding: 0 12px; border-radius: 8px; color: #282e34; }
.crm-clockp .crm-clockp__chip.is-on { background: #282e34; border-color: #282e34; color: #fff; }
.crm-clockp .crm-clockp__chip:hover:not(.is-on) { background: #1877f2; border-color: #1877f2; color: #fff; }
.crm-clockp .crm-clockp__csv { height: 32px; padding: 0 12px; }
.crm-clockp .crm-clockp__csv:hover:not(:disabled) { background: #1877f2; border-color: #1877f2; color: #fff; }
:root.dark .crm-clockp .crm-clockp__chip, .dark .crm-clockp .crm-clockp__chip { color: var(--clk-ink); border-color: var(--clk-line); }
:root.dark .crm-clockp .crm-clockp__chip.is-on, .dark .crm-clockp .crm-clockp__chip.is-on { background: #d4fb08; border-color: #d4fb08; color: #000; }

/* ------------------------------------------ Unreplied (2026-09-30)
   No period chip any more: the icons carry the two counts at every width,
   the words move to their titles, and the switch takes the end of the line. */
.crm-clock__n .crm-clock__w, .crm-clock__dot { display: none; }
.crm-clock__n .crm-clock__ic { display: inline-flex; }
.crm-clock__n .crm-clock__ic, .crm-clock__n .crm-clock__ic svg { width: 16px; height: 16px; font-size: 16px; }
.crm-clock { gap: 14px; }
.crm-clock .crm-clock__unr {
  display: inline-flex; align-items: center; gap: 7px; margin-inline-start: auto;
  font-size: 12.5px; color: #282e34; cursor: pointer; white-space: nowrap;
}
.crm-clock__unr-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-clock__unr-n.is-warn { color: var(--clk-warn); }
.crm-clock__more { margin-inline-start: 0; }
:root.dark .crm-clock .crm-clock__unr, .dark .crm-clock .crm-clock__unr { color: var(--clk-ink); }

/* On, the platform's list steps aside and ours takes its place. */
body.crm-unr-on .conversations-list-wrap > .conversations-list { display: none !important; }
/* The platform's "There are no active conversations in this group" is its own
   block beside the list, not inside it: it stayed under ours, saying the
   opposite of what the list above it showed. */
body.crm-unr-on .conversations-list-wrap > div.text-center { display: none !important; }
.crm-unr {
  flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 4px 8px 16px;
  background: #fff; color: #282e34; font-size: 13px;
}
.crm-unr__sec + .crm-unr__sec { margin-top: 10px; }
.crm-unr__head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 6px 6px; background: #fff; font-size: 12px; font-weight: 600; color: #626f7f;
}
.crm-unr__head strong { padding: 0 7px; border-radius: 999px; font-size: 11px; line-height: 18px; }
.crm-unr__head.is-never strong { background: color-mix(in srgb, #b3261e 12%, transparent); color: #b3261e; }
.crm-unr__head.is-waiting strong { background: var(--crm-alert-bg, #fff1f2); color: var(--crm-alert-ink, #c8243b); }
.crm-unr .crm-unr__row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 8px; margin: 0;
  border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.crm-unr .crm-unr__row:hover { background: #f5f6f7; }
.crm-unr .crm-unr__row.is-active { background: #f4fbd3; }
.crm-unr__face {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef0f3; color: #626f7f; font-size: 12px; font-weight: 600;
}
.crm-unr__face img { width: 100%; height: 100%; object-fit: cover; }
.crm-unr__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.crm-unr__top { display: flex; align-items: baseline; gap: 8px; }
.crm-unr__name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.crm-unr__ago { flex: 0 0 auto; font-size: 11.5px; color: #626f7f; font-variant-numeric: tabular-nums; }
.crm-unr__said { color: #626f7f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-unr__foot { display: flex; align-items: center; gap: 8px; }
.crm-unr__inbox { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: #626f7f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-unr__tag { flex: 0 0 auto; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 18px; }
.crm-unr__tag.is-bad { background: color-mix(in srgb, #b3261e 12%, transparent); color: #b3261e; }
.crm-unr__tag.is-warn { background: var(--crm-alert-bg, #fff1f2); color: var(--crm-alert-ink, #c8243b); }
.crm-unr__none { padding: 8px 6px 12px; font-size: 12px; color: #626f7f; }
:root.dark .crm-unr, .dark .crm-unr, :root.dark .crm-unr__head, .dark .crm-unr__head { background: #1b1e23; color: #e8eaed; }
:root.dark .crm-unr .crm-unr__row:hover, .dark .crm-unr .crm-unr__row:hover { background: #23272d; }
:root.dark .crm-unr .crm-unr__row.is-active, .dark .crm-unr .crm-unr__row.is-active { background: #2a3212; }
:root.dark .crm-unr__face, .dark .crm-unr__face { background: #2c3138; color: #9aa3af; }
.crm-clock__more { display: inline-flex; align-items: center; }
.crm-clock__more i, .crm-clock__more svg { width: 16px; height: 16px; font-size: 16px; }

/* The row carries what the list's own card does: label chips, and the
   channel mark beside the inbox name. */
.crm-unr__labels { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-unr .crm-unr__label {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 20px; padding: 0 7px;
  border: 1px solid rgba(53, 60, 69, .16); border-radius: 6px; font-size: 11.5px; color: #282e34; background: #fff;
}
.crm-unr__label .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-unr__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; }
.crm-unr__inbox { display: inline-flex; align-items: center; gap: 5px; }
.crm-unr__inbox-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-unr .crm-unr__mark { display: inline-block; flex: none; width: 1em; height: 1em; border-radius: 50%; }
:root.dark .crm-unr .crm-unr__label, .dark .crm-unr .crm-unr__label { background: transparent; color: #e8eaed; border-color: #2c3138; }

/* The same channel badge the list's cards carry on the photo. */
.crm-unr__avatar { position: relative; flex: 0 0 auto; display: inline-flex; }

/* The strip never gives up its height. In a flex column every item shrinks
   by default, so a long Unreplied list (account 3, 118 people) squeezed it to
   4px and it vanished under the tabs. Only the list scrolls. */
.crm-clock { flex: 0 0 auto; }

/* The section headings fold their section away. */
.crm-unr .crm-unr__head {
  width: 100%; border: 0; margin: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  gap: 6px; justify-content: flex-start; border-radius: 6px;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.crm-unr .crm-unr__head:hover { background: #f5f6f7; }
.crm-unr__title { flex: 1 1 auto; text-align: start; }
.crm-unr__fold, .crm-unr__fold svg { width: 14px; height: 14px; font-size: 14px; flex: 0 0 auto; }
.crm-unr__sec.is-folded + .crm-unr__sec { margin-top: 2px; }
:root.dark .crm-unr .crm-unr__head:hover, .dark .crm-unr .crm-unr__head:hover { background: #23272d; }

/* The name beside the photo whatever language it is in, as on the list's own
   cards (owner, 2026-09-29); the words keep their own direction. */
.crm-unr[dir="ltr"] .crm-unr__name { text-align: left; }
.crm-unr[dir="rtl"] .crm-unr__name { text-align: right; }
.crm-unr__nobody, .crm-unr__nobody svg { width: 18px; height: 18px; font-size: 18px; }
/* The sticky section heading stays above everything scrolling under it -
   the photo's channel badge (z-index 2) was riding over it. */
.crm-unr .crm-unr__head { z-index: 5; }
/* No gap above the sticky heading: the list's top padding let a sliver of the
   row under it show through. */
.crm-unr { padding-top: 0; }