/* Connect as a chat. Report 212 (ADE-284).

   SOURCE: `planning/design/connect-handoff/` — "Adealia Connect.dc.html"
   (markup and inline sizes) and "Adealia Connect Rules.dc.html" (the 17
   rules and SIZES). The markup is `templates/connect/`. Loaded last.

     1. The frame: list | chat | pane, and the phone's one-at-a-time
     2. The channel list (280 at ≥1280, 248 below; rows 34, 44 on a phone)
     3. The channel header (64, 56 on a phone)
     4. Messages (avatar 36, name 15/600, time 13, text 15/1.5)
     5. Day pills, New messages, Jump to latest
     6. Hover actions and the More menu
     7. The composer (text 44 up to 6 lines; bar 40; Send 36 copper)
     8. The right-hand pane (400 docked ≥1240, 440 over the chat below,
        full screen on a phone)
     9. The rail's Connect icon: red count for mentions, copper dot
*/

.cx {
  --cx-navy: #1A2547;
  --cx-copper: #A85A22;
  --cx-link: #94501E;
  --cx-line: #E4DFD5;
  --cx-line-2: #EEEAE2;
  --cx-muted: #616B78;
  --cx-label: #55677D;
  --cx-soft: #F2EEE6;
  --cx-chip: #EFEBE2;
  --cx-list-bg: #FBFAF6;
  --cx-red: #D93A2B;
  --cx-me-bg: #FDF8F1;
  --cx-me-chip: #FAEBDA;
  --cx-me-ink: #7A3D10;
  --cx-pad: 24px;
}

/* ── 1. The frame ─────────────────────────────────────────────────── */
.shell-col > .of-t.cx {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #fff;
  color: var(--cx-navy);
}
.cx .ms { font-size: 20px; line-height: 1; }
.cx [hidden] { display: none !important; }
/* A chat fills the window to the composer, as the assistant's chat does;
   the page foot (the two marks) would sit under the composer. */
body.cx-body .ui-page--foot { display: none; }

.cx-list {
  flex: 0 0 248px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--cx-list-bg);
  border-right: 1px solid var(--cx-line);
}
@media (min-width: 1280px) { .cx-list { flex-basis: 280px; } }

.cx-chat {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
}

/* ── 2. The channel list ──────────────────────────────────────────── */
.cx-list__head { flex: none; padding: 18px 12px 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.cx-list__title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.cx-list__title:focus { outline: none; }
.cx-find {
  height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: #fff; border: 1px solid var(--cx-line); border-radius: 10px; box-sizing: border-box;
  color: var(--cx-muted);
}
.cx-find input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--cx-navy); }
.cx-find input:focus { outline: none; }
.cx-find:focus-within { border-color: var(--cx-navy); }
.cx-list__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 16px; }
.cx-sec { padding-top: 12px; }
.cx-sec:first-child { padding-top: 0; }
.cx-sec__title {
  display: flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0 10px;
  color: var(--cx-label); font-size: 13px; font-weight: 600;
}
.cx-sec__n { font-weight: 500; }
.cx-row {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
  border-radius: 8px; color: var(--cx-navy); font-size: 15px; font-weight: 400;
  text-decoration: none; box-sizing: border-box;
}
.cx-row:hover { background: var(--cx-soft); color: var(--cx-navy); }
.cx-row.is-unread { font-weight: 600; }
.cx-row.is-open, .cx-row.is-open:hover { background: var(--cx-navy); color: #fff; }
.cx-row__ico { flex: none; width: 22px; text-align: center; font-size: 19px !important; }
.cx-row__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-row__badge { flex: none; display: inline-flex; }
.cx-badge {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  background: var(--cx-line); color: var(--cx-navy); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center;
}
.cx-row.is-open .cx-badge { background: #2E3A6E; color: #fff; }
.cx-badge--at, .cx-row.is-open .cx-badge--at { background: var(--cx-red); color: #fff; padding: 0 7px; }
.cx-more {
  width: 100%; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
  border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  color: var(--cx-link); font: inherit; font-size: 14px; font-weight: 500; text-align: left;
}
.cx-more .ms { width: 22px; text-align: center; font-size: 19px; }
.cx-more:hover { background: var(--cx-soft); }
.cx-list__none { padding: 24px 10px 0; margin: 0; font-size: 14px; color: var(--cx-muted); }
.cx-list__note { padding: 20px 10px 0; margin: 0; font-size: 13px; color: var(--cx-muted); text-wrap: pretty; }

/* ── 3. The channel header ────────────────────────────────────────── */
.cx-head {
  flex: none; height: 64px; display: flex; align-items: center; gap: 8px;
  padding: 0 var(--cx-pad); border-bottom: 1px solid var(--cx-line-2); box-sizing: border-box;
}
.cx-head .cx-back { display: none; }
.cx-head__main { flex: 1; min-width: 0; color: var(--cx-navy); text-decoration: none; }
.cx-head__main:hover { color: var(--cx-navy); }
.cx-head__line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cx-head__ico { flex: none; color: var(--cx-label); }
.cx-head__name { margin: 0; min-width: 0; font-size: 18px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-head__why { display: block; font-size: 13.5px; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-pill {
  flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  background: var(--cx-chip); color: var(--cx-label); font-size: 12.5px; font-weight: 500;
}
.cx-headbtn {
  flex: none; height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 6px;
  border: 1px solid var(--cx-line); background: #fff; border-radius: 10px; color: var(--cx-navy);
  font-size: 14px; font-weight: 500; text-decoration: none; box-sizing: border-box;
}
.cx-headbtn--wide { padding: 0 12px 0 10px; }
.cx-headbtn:hover { border-color: var(--cx-navy); color: var(--cx-navy); }
.cx-faces { display: inline-flex; }
.cx-face {
  width: 24px; height: 24px; margin-left: -8px; border-radius: 50%; background: var(--cx-chip);
  border: 2px solid #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; box-sizing: border-box; color: var(--cx-navy);
}
.cx-face:first-child { margin-left: 0; }
.cx-iconbtn {
  flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--cx-navy); text-decoration: none;
}
.cx-iconbtn:hover { background: var(--cx-soft); color: var(--cx-navy); }
.cx-iconbtn .ms { font-size: 24px; }

/* ── 4. Messages ─────────────────────────────────────────────────── */
.cx-scroll { flex: 1; min-height: 0; overflow-y: auto; position: relative; overscroll-behavior: contain; }
.cx-feed { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 0 12px; box-sizing: border-box; }
.cx-intro { padding: 8px var(--cx-pad) 16px; display: flex; flex-direction: column; gap: 6px; }
.cx-intro__ico { width: 48px; height: 48px; border-radius: 12px; background: var(--cx-soft); display: flex; align-items: center; justify-content: center; }
.cx-intro__ico .ms { font-size: 26px; }
.cx-intro__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; }
.cx-intro__text { margin: 0; font-size: 15px; color: var(--cx-muted); max-width: 560px; text-wrap: pretty; }
.cx-intro__event { margin: 6px 0 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 640px; }
.cx-intro__off { margin: 6px 0 0; font-size: 14px; color: var(--cx-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-pill--off { background: #FBEDEA; color: #9A2E1F; }
.cx-empty { margin: 4px var(--cx-pad) 8px; padding: 28px 20px; border: 1px dashed #C9C1B2; border-radius: 14px; text-align: center; }
.cx-empty .ms { font-size: 28px; color: var(--cx-label); }
.cx-empty__title { margin: 6px 0 0; font-weight: 600; }
.cx-empty__text { margin: 2px 0 0; font-size: 14px; color: var(--cx-muted); }

.cx-msg { position: relative; display: flex; gap: 12px; padding: 2px var(--cx-pad) 4px; }
.cx-msg--head { padding-top: 8px; padding-bottom: 6px; }
.cx-msg:hover, .cx-msg.is-tapped { background: var(--cx-list-bg); }
.cx-msg--me, .cx-msg--me:hover { background: var(--cx-me-bg); }
.cx-msg.is-target { background: #FDF4EA; }
.cx-msg__side { width: 36px; flex: none; }
.cx-msg__gutter { display: block; visibility: hidden; padding-top: 3px; font-size: 11.5px; color: var(--cx-muted); white-space: nowrap; text-align: right; }
.cx-msg:hover .cx-msg__gutter { visibility: visible; }
.cx-av {
  width: 36px; height: 36px; border-radius: 50%; background: var(--cx-chip); color: var(--cx-navy);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none;
}
.cx-av--me { background: var(--cx-navy); color: #fff; }
.cx-av--sm { width: 32px; height: 32px; font-size: 11px; }
.cx-msg__main { flex: 1; min-width: 0; }
.cx-msg__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; line-height: 1.35; }
.cx-msg__by { font-size: 15px; font-weight: 600; }
.cx-msg__time { font-size: 13px; color: var(--cx-muted); }
.cx-msg__title { margin: 2px 0 0; font-size: 16px; font-weight: 600; text-wrap: pretty; }
.cx-msg__text { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cx-msg__text a { color: var(--cx-link); text-decoration: underline; }
.cx-msg__gone { margin: 0; font-size: 15px; color: var(--cx-muted); font-style: italic; display: flex; align-items: center; gap: 6px; }
.cx-msg__gone .ms { font-size: 18px; }
.cx-mention { padding: 0 3px; border-radius: 5px; background: var(--cx-chip); color: var(--cx-navy); font-weight: 500; }
.cx-mention--me { background: var(--cx-me-chip); color: var(--cx-me-ink); }
.cx-threadlink {
  margin: 6px 0 0 -6px; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; height: 32px;
  padding: 0 8px 0 6px; border: 1px solid transparent; border-radius: 10px; color: var(--cx-navy);
  font-size: 14px; text-decoration: none; box-sizing: border-box;
}
.cx-threadlink:hover { background: #fff; border-color: var(--cx-line); color: var(--cx-navy); }
.cx-threadlink .cx-face { width: 22px; height: 22px; font-size: 8.5px; }
.cx-threadlink__n { font-weight: 600; color: var(--cx-link); white-space: nowrap; }
.cx-threadlink__last { color: var(--cx-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 5. Day pills, New messages, Jump to latest ───────────────────── */
.cx-day { display: flex; align-items: center; gap: 12px; padding: 14px var(--cx-pad) 6px; }
.cx-day::before, .cx-day::after { content: ""; flex: 1; height: 1px; background: var(--cx-line-2); }
.cx-day span {
  flex: none; height: 26px; display: inline-flex; align-items: center; padding: 0 12px;
  border: 1px solid var(--cx-line); border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--cx-label); background: #fff; box-sizing: border-box;
}
.cx-new { display: flex; align-items: center; gap: 10px; padding: 6px var(--cx-pad); }
.cx-new::before { content: ""; flex: 1; height: 1px; background: var(--cx-red); }
.cx-new span { flex: none; font-size: 12.5px; font-weight: 600; color: #B23324; }
.cx-jump {
  position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 8;
  height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border: 0;
  background: var(--cx-navy); color: #fff; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: 0 6px 18px rgba(17, 23, 58, .24); white-space: nowrap;
}
.cx-jump .ms { font-size: 18px; }

/* ── 6. Hover actions and the More menu ───────────────────────────── */
.cx-acts {
  position: absolute; top: -14px; right: var(--cx-pad); z-index: 5; display: none; gap: 2px; padding: 3px;
  background: #fff; border: 1px solid var(--cx-line); border-radius: 10px; box-shadow: 0 4px 12px rgba(17, 23, 58, .08);
}
.cx-msg:hover .cx-acts, .cx-msg:focus-within .cx-acts, .cx-msg.is-tapped .cx-acts { display: flex; }
.cx-msg--head .cx-acts { top: -10px; }
.cx-act {
  width: 32px; height: 32px; border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  color: var(--cx-navy); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0;
}
.cx-act:hover { background: var(--cx-soft); color: var(--cx-navy); }
.cx-menu {
  position: absolute; top: 40px; right: 0; z-index: 6; width: 240px; padding: 6px; background: #fff;
  border: 1px solid var(--cx-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(17, 23, 58, .14); box-sizing: border-box;
}
.cx-menu form { margin: 0; }
.cx-menu__item {
  width: 100%; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border: 0;
  background: transparent; border-radius: 8px; cursor: pointer; font: inherit; font-size: 15px; color: var(--cx-navy); text-align: left;
}
.cx-menu__item:hover { background: #F7F5F0; }
.cx-menu__item--danger { color: #9A2E1F; }
.cx-menu__item--danger:hover { background: #FBEDEA; }
.cx-confirm { padding: 8px 10px; }
.cx-confirm__title { margin: 0; font-size: 15px; font-weight: 600; }
.cx-confirm__text { margin: 2px 0 0; font-size: 13.5px; color: var(--cx-muted); }
.cx-confirm__btns { display: flex; gap: 6px; padding: 8px 0 0; justify-content: flex-end; }
.cx-confirm__btns button {
  height: 36px; padding: 0 12px; border: 1px solid #C9C1B2; background: #fff; border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--cx-navy); cursor: pointer;
}
.cx-confirm__btns .cx-confirm__yes { border: 0; background: #9A2E1F; color: #fff; font-weight: 600; }

/* ── 7. The composer ──────────────────────────────────────────────── */
.cx-compose { flex: none; position: relative; margin: 0; padding: 4px var(--cx-pad) 20px; }
.cx-box { border: 1px solid #918D86; border-radius: 12px; background: #fff; overflow: hidden; }
.cx-box:focus-within { border-color: var(--cx-navy); box-shadow: 0 0 0 1px var(--cx-navy); }
.cx-box__title {
  display: block; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--cx-line-2);
  padding: 12px 14px 10px; font: inherit; font-size: 16px; font-weight: 600; color: var(--cx-navy); background: transparent;
}
.cx-box__text {
  display: block; width: 100%; box-sizing: border-box; border: 0; resize: none; padding: 12px 14px 4px;
  font: inherit; font-size: 15px; line-height: 1.5; color: var(--cx-navy); background: transparent;
  min-height: 44px; max-height: calc(6 * 1.5em + 16px); overflow-y: auto;
}
.cx-box__title:focus, .cx-box__text:focus { outline: none; box-shadow: none; }
.cx-box__bar { height: 40px; display: flex; align-items: center; gap: 2px; padding: 0 6px 4px; }
.cx-tool {
  flex: none; width: 32px; height: 32px; border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  color: var(--cx-label); display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.cx-tool:hover { background: var(--cx-soft); color: var(--cx-navy); }
.cx-titlebtn {
  flex: none; height: 28px; margin-left: 4px; padding: 0 10px; border: 1px solid #C9C1B2; background: #fff;
  color: var(--cx-navy); border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap;
}
.cx-titlebtn[aria-pressed="true"] { background: var(--cx-navy); color: #fff; border-color: var(--cx-navy); }
.cx-box__hint { flex: 1; min-width: 0; text-align: right; padding-right: 10px; font-size: 12.5px; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-send {
  flex: none; width: 36px; height: 36px; border: 0; background: var(--cx-copper); color: #fff; border-radius: 10px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.cx-send:disabled { background: #C9C1B2; cursor: default; }
.cx-compose__err { margin: 6px 2px 0; font-size: 13.5px; color: #9A2E1F; }
.cx-readonly {
  flex: none; margin: 4px var(--cx-pad) 20px; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--cx-line); border-radius: 12px; background: var(--cx-list-bg);
}
.cx-readonly .ms { font-size: 22px; color: var(--cx-label); }
.cx-readonly__title { margin: 0; font-size: 15px; font-weight: 600; }
.cx-readonly__text { margin: 0; font-size: 14px; color: var(--cx-muted); }

/* The @ picker (menus 240–320; 44px items for pickers). */
.cx-picker {
  position: absolute; left: var(--cx-pad); bottom: calc(100% - 4px); z-index: 10; width: min(380px, calc(100% - 2 * var(--cx-pad)));
  max-height: 280px; overflow-y: auto; padding: 6px; background: #fff; border: 1px solid var(--cx-line);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(17, 23, 58, .14); box-sizing: border-box;
}
.cx-picker__head { padding: 6px 10px 4px; font-size: 13px; font-weight: 600; color: var(--cx-label); }
.cx-picker__opt {
  width: 100%; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; border: 0;
  background: transparent; border-radius: 8px; cursor: pointer; text-align: left; color: var(--cx-navy); font: inherit;
}
.cx-picker__opt[aria-selected="true"], .cx-picker__opt:hover { background: #F7F5F0; }
.cx-picker__opt .cx-av { width: 28px; height: 28px; font-size: 10.5px; }
.cx-picker__name { font-size: 15px; font-weight: 500; white-space: nowrap; }
.cx-picker__sub { font-size: 13px; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cx-picker__none { padding: 10px; font-size: 14px; color: var(--cx-muted); margin: 0; }

/* ── 8. The right-hand pane ───────────────────────────────────────── */
.cx-pane {
  position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; z-index: 25;
  background: #fff; border-left: 1px solid var(--cx-line); box-shadow: -12px 0 32px rgba(17, 23, 58, .12);
  display: flex; flex-direction: column;
}
.cx-scrim { position: absolute; inset: 0; z-index: 24; background: rgba(17, 23, 58, .28); }
@media (min-width: 1240px) {
  .cx-pane { position: relative; flex: 0 0 400px; width: 400px; box-shadow: none; }
  .cx-scrim { display: none !important; }
}
.cx-pane__in { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cx-pane__head {
  flex: none; height: 64px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--cx-line-2); box-sizing: border-box;
}
.cx-pane__head .cx-pane__back { display: none; }
.cx-pane__words { flex: 1; min-width: 0; }
.cx-pane__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; }
.cx-pane__sub { margin: 0; font-size: 13px; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-pane__close { width: 36px; height: 36px; }
.cx-pane__close .ms { font-size: 22px; }
.cx-pane__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 0 8px; }
.cx-pane__count { display: flex; align-items: center; gap: 10px; padding: 0 20px 6px; font-size: 13px; font-weight: 600; color: var(--cx-label); }
.cx-pane__count::after { content: ""; flex: 1; height: 1px; background: var(--cx-line-2); }
.cx-pane__none { padding: 12px 20px; margin: 0; font-size: 14px; color: var(--cx-muted); }
.cx-pane__note { padding: 0 20px 16px; margin: 0 0 4px; border-bottom: 1px solid var(--cx-line-2); font-size: 14px; color: var(--cx-label); text-wrap: pretty; }
.cx-pane .cx-compose { padding: 8px 16px 20px; }
.cx-pane .cx-picker { left: 16px; width: calc(100% - 32px); }
.cx-reply { position: relative; display: flex; gap: 12px; padding: 10px 20px; }
.cx-pane__root .cx-reply { padding-top: 0; padding-bottom: 14px; }
.cx-pane__root .cx-av--sm { width: 36px; height: 36px; font-size: 12px; }
.cx-reply__main { flex: 1; min-width: 0; }
.cx-reply__del { position: absolute; top: 6px; right: 12px; margin: 0; display: none; }
.cx-reply:hover .cx-reply__del, .cx-reply:focus-within .cx-reply__del { display: block; }
.cx-people { list-style: none; margin: 0; padding: 0; }
.cx-person { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--cx-soft); }
.cx-person__words { flex: 1; min-width: 0; }
.cx-person__name { display: block; font-size: 15px; font-weight: 500; }
.cx-person__sub { display: block; font-size: 13px; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── The phone: one thing at a time (rule 16) ─────────────────────── */
@media (max-width: 759.98px) {
  .cx { --cx-pad: 16px; }
  .cx-list { flex: 1 1 auto; border-right: 0; background: #fff; }
  .cx-list__head { padding: 20px 16px 12px; }
  .cx-list__title { font-size: 26px; }
  .cx-row, .cx-more { height: 44px; }
  /* The list is the screen: no channel is open beside it. */
  .cx[data-view="list"] .cx-row.is-open { background: transparent; color: var(--cx-navy); }
  .cx[data-view="list"] .cx-row.is-open .cx-badge { background: var(--cx-line); color: var(--cx-navy); }
  .cx[data-view="list"] .cx-row.is-open .cx-badge--at { background: var(--cx-red); color: #fff; }
  .cx-chat { display: none; }
  .cx-pane { position: absolute; inset: 0; width: 100%; border-left: 0; box-shadow: none; z-index: 30; }
  .cx-scrim { display: none !important; }
  .cx[data-view="channel"] .cx-list,
  .cx[data-view="thread"] .cx-list,
  .cx[data-view="members"] .cx-list { display: none; }
  .cx[data-view="channel"] .cx-chat,
  .cx[data-view="thread"] .cx-chat,
  .cx[data-view="members"] .cx-chat { display: flex; }
  .cx-head { height: 56px; padding: 0 16px 0 8px; }
  .cx-head__name { font-size: 17px; }
  .cx-head .cx-back, .cx-pane__head .cx-pane__back { display: inline-flex; }
  .cx-pane__head .cx-pane__close { display: none; }
  .cx-pane__head { height: 56px; padding: 0 12px 0 8px; }
  .cx-headbtn:not(.cx-headbtn--wide) .cx-faces { display: none; }
  .cx-headbtn--wide span:last-child { display: none; }
  .cx-headbtn--wide { padding: 0 8px; }
  .cx-compose { padding-bottom: 12px; }
  .cx-readonly { margin-bottom: 12px; }
  .cx-box__hint { display: none; }
  .cx-box__bar { justify-content: space-between; }
  .cx-acts { right: 16px; }
  .cx-jump { bottom: 100px; }
  /* The top bar is hidden inside a channel (SIZES: "Top bar … hidden on the
     phone inside a channel"); the channel's own back arrow leads out. */
  body.cx-body--channel .shell-top,
  body.cx-body--thread .shell-top,
  body.cx-body--members .shell-top { display: none; }
}

/* ── 9. The rail's Connect icon ───────────────────────────────────── */
/* A red count for mentions is the rail's own `.nav-item__count`. The copper
   dot, for unread with no mention, is this. `nav.js` copies the class. */
.shell-rail .nav-item.nav-item--dot::after {
  content: ""; position: absolute; top: 9px; left: 29px; width: 8px; height: 8px; border-radius: 50%;
  background: #E08A45; border: 2px solid var(--of-rail-bg, #11173A);
}

/* Report 239. Staff's "New channel" link under the list title. */
.cx-newchan { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 13.5px; font-weight: 500; color: var(--cx-navy); text-decoration: none; padding: 4px 8px 4px 4px; border-radius: 6px; }
.cx-newchan:hover { background: rgba(0,0,0,0.05); }
.cx-newchan .ms { font-size: 18px; }