/* The Messages LAYER (F47, the comms integration law L6 — "Messages is
   a layer, not a page"): the slide-over shell on every non-hub page and
   the P10 density pass over the hub's own components rendered inside
   it. Tokens come from django.css (--bg-surface, --border-default, …);
   the hub's classes (.cl-hub__main / .cl-hub__pane / .cl-home / .cl-act
   / .cl-msg / .cl-pane) are the SAME rules the full page uses — this
   file only sizes them for 420px (Slack/Linear density: header ≤40px,
   one 28px strip, 13px bodies, 20px avatars, 4/8px rhythm).

   The layer OVERLAYS (fixed, right, below the 50px topbar) — a layer,
   not a column: the page never reflows, ⌘J/Esc toggle it, the discuss
   drawer (a column, INV-487) stays the in-place datum surface. */

:root { --cl-msgs-w: 420px; }

.cl-msgs {
  position: fixed; top: 50px; right: 0; bottom: 0;
  width: var(--cl-msgs-w); max-width: 100vw; z-index: 45;
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: -12px 0 32px rgb(0 0 0 / 0.10);
  outline: none;
}
.cl-msgs[hidden] { display: none; }
[data-theme='dark'] .cl-msgs, .dark .cl-msgs { box-shadow: -12px 0 32px rgb(0 0 0 / 0.45); }
@media (max-width: 560px) { .cl-msgs { width: 100vw; } }

/* ── Header (≤40px) ──────────────────────────────────────────────── */
.cl-msgs__head {
  display: flex; align-items: center; gap: 6px; height: 40px; flex: none;
  padding: 0 6px 0 10px; border-bottom: 1px solid var(--border-default); background: var(--bg-surface);
}
.cl-msgs__glyph {
  display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 6px; background: var(--accent-brief-soft); color: var(--accent-brief);
}
.cl-msgs__title {
  min-width: 0; font: 600 12.5px/1.2 var(--font-sans, system-ui); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-msgs__btn {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 7px; color: var(--text-muted); background: none; border: 0; cursor: pointer;
}
.cl-msgs__btn:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.cl-msgs__btn:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: 1px; }
.cl-msgs__back { display: none; }
.cl-msgs.cl-hub--pane-open .cl-msgs__back { display: inline-grid; }

/* ── The view strip (28px) ───────────────────────────────────────── */
.cl-msgs__tabs {
  display: flex; align-items: flex-end; gap: 2px; height: 28px; flex: none;
  padding: 0 6px; border-bottom: 1px solid var(--border-default); background: var(--bg-surface);
}
.cl-msgs__tab {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px;
  border-radius: 6px 6px 0 0; font-size: 11.5px; font-weight: 500; color: var(--text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cl-msgs__tab:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.cl-msgs__tab--on { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--accent-brief); }
.cl-msgs__count {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent-brief); color: var(--text-on-accent-brief, #fff);
  font: 600 9.5px/1 var(--font-mono, ui-monospace);
}
.cl-msgs__count.hidden { display: none; }

/* ── The body: the hub's centre, or the pane as a drill-in ───────── */
.cl-msgs__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cl-msgs__body > .cl-hub__main { flex: 1; min-height: 0; }
.cl-msgs__body > .cl-hub__pane { display: none; }
.cl-msgs.cl-hub--pane-open .cl-msgs__body > .cl-hub__main { display: none; }
/* Beats django.css's ≤1100px fixed-pane rule (.cl-hub--pane-open .cl-hub__pane). */
.cl-msgs.cl-hub--pane-open .cl-msgs__body > .cl-hub__pane {
  display: block; flex: 1; min-height: 0; position: static; width: auto; border-left: 0; box-shadow: none; z-index: auto;
}
.cl-msgs__loading { padding: 18px 12px; font-size: 11.5px; color: var(--text-muted); }
.cl-msgs .cl-hub__main[aria-busy='true'] { opacity: 0.6; }

/* ── P10 density over the hub's components ───────────────────────── */
.cl-msgs .cl-hub__crumbs { display: none; }
.cl-msgs .cl-hub__head { padding: 6px 10px; gap: 8px; align-items: center; }
.cl-msgs .cl-hub__head--conv { padding: 6px 10px; }
.cl-msgs .cl-hub__title { font-size: 14px; line-height: 1.2; }
.cl-msgs .cl-hub__title--conv { font-size: 13.5px; }
.cl-msgs .cl-hub__head .text-\[10\.5px\] { display: none; } /* the one-line view blurbs — the strip already names the view */
.cl-msgs .cl-hub__subline { font-size: 10.5px; }
.cl-msgs .cl-hub__intro { padding: 12px 10px 8px; gap: 8px; }
.cl-msgs .cl-hub__intro-glyph { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
.cl-msgs .cl-hub__tabs .cl-hub__tab { padding: 2px 8px; font-size: 10.5px; }

/* The strip already names the list views — their inner h1 goes; the
   head row keeps its ACTIONS (New message, the filters, Mark all read). */
.cl-msgs [data-hub-view='home'] .cl-hub__head > .min-w-0 > .cl-hub__title,
.cl-msgs [data-hub-view='activity'] .cl-hub__head > .min-w-0 > .cl-hub__title,
.cl-msgs [data-hub-view='threads'] .cl-hub__head > .min-w-0 > .cl-hub__title,
.cl-msgs [data-hub-view='tasks'] .cl-hub__head > .min-w-0 > .cl-hub__title,
.cl-msgs [data-hub-view='saved'] .cl-hub__head > .min-w-0 > .cl-hub__title { display: none; }
.cl-msgs [data-hub-view='home'] .cl-hub__head, .cl-msgs [data-hub-view='threads'] .cl-hub__head { padding: 4px 8px; min-height: 0; }
.cl-msgs [data-hub-view='threads'] .cl-hub__head { display: none; }

/* F62: the hub does NOT re-lay-out the composer at all — not while it
   is idle, not by two pixels. A focus-keyed fold here gave the island a
   second silhouette (a pill with its verbs hidden, which became a card
   the moment the caret landed), and the 2px foot trim that outlived it
   made the hub's card a different card from the dock's. The composer is
   ONE shape on every mount (INV-654): the island owns its states and its
   measurements; the hub only sets the rhythm around it. */

/* Home — one column, tight rows */
.cl-msgs .cl-home { padding: 6px 8px 14px; max-width: none; }
.cl-msgs .cl-home__section { margin-bottom: 10px; }
.cl-msgs .cl-home__label { padding: 0 2px 4px; }
.cl-msgs .cl-home__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cl-msgs .cl-home__row { padding: 4px 6px; gap: 8px; border-radius: 8px; }
.cl-msgs .cl-home__row-glyph { width: 24px; height: 24px; border-radius: 7px; }
.cl-msgs .cl-home__row .cl-avatar--lg { width: 24px; height: 24px; font-size: 9px; }
.cl-msgs .cl-home__row-head { font-size: 12px; }
.cl-msgs .cl-home__row-line { font-size: 11px; }
.cl-msgs .cl-home__clear { padding: 8px 10px; font-size: 11.5px; border-radius: 8px; }
.cl-msgs .cl-home__doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cl-msgs .cl-home__doorcard { padding: 6px 8px; gap: 6px; border-radius: 8px; }
.cl-msgs .cl-home__doorcard small { display: none; }

/* Activity groups */
.cl-msgs .cl-act { padding: 5px 8px; border-radius: 8px; }
.cl-msgs .cl-act__line { gap: 6px; }
.cl-msgs .cl-act__who, .cl-msgs .cl-act__snippet { font-size: 11.5px; }
.cl-msgs .cl-act__meta { font-size: 10px; padding-left: 24px; }
.cl-msgs .cl-hub__cols { grid-template-columns: minmax(0, 1fr); padding: 6px 8px 16px; gap: 8px; }
.cl-msgs .cl-hub__side { display: none; } /* the asks rails ride Home / Threads at 420px */

/* The pane head at 420px: title + quote clamp to two lines; the pane's
   own ✕ hides (the layer header's ← is the one back door). */
.cl-msgs .cl-pane__head [data-pane-close] { display: none; }
.cl-msgs .cl-pane__title, .cl-msgs .cl-pane__quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cl-msgs .cl-pane__trail { font-size: 10.5px; }

/* Messages + the pane */
.cl-msgs .cl-msg { padding: 4px 10px; gap: 8px; contain-intrinsic-size: 0 44px; }
.cl-msgs .cl-msg > .cl-avatar--lg { width: 20px; height: 20px; font-size: 8px; margin-top: 1px; }
.cl-msgs .cl-msg__body { font-size: 12.5px; line-height: 1.4; }
.cl-msgs .cl-msg__name { font-size: 12px; }
.cl-msgs .cl-pane__head { padding: 6px 10px; gap: 8px; }
.cl-msgs .cl-pane__title { font-size: 13px; }
.cl-msgs .cl-pane__quote { font-size: 11px; }
.cl-msgs .cl-pane__foot { padding: 6px 8px 8px; }
.cl-msgs .cl-hub__composer { padding: 6px 8px 8px; }
.cl-msgs .cl-hub__pins { padding: 4px 10px; }
.cl-msgs .cl-hub__empty { padding: 18px 12px; }
.cl-msgs .cl-hub__empty-art { font-size: 20px; }
.cl-msgs .cl-hub__more, .cl-msgs .cl-hub__earlier { padding: 6px; }

/* Streams + scope + thread cards at 420px */
.cl-msgs .cl-scope-tabs { padding: 4px 8px; gap: 3px; }
.cl-msgs .cl-scope-tab { font-size: 10.5px; padding: 2px 7px; }
.cl-msgs .cl-stream-row { padding-left: 0; padding-right: 0; }
.cl-msgs .cl-stream-row__foot { padding-left: 38px; font-size: 11px; }
.cl-msgs .cl-tcard { margin: 6px 8px; }
.cl-msgs .cl-tcard__head, .cl-msgs .cl-tcard__foot { padding: 6px 8px; }

/* The hub-page-side door (L9b): ⇤ back to the origin page. */
[data-hub-collapse].hidden { display: none; }