/* ---- A community (pages/community.js) ----
   You are always in a room. From the top: the community itself, a row of
   its members to slide through, a row of its rooms to slide through, then
   the room. The phone draws the same: components/pages/CommunityPage.tsx.

   A community wears its own colour (--space, set inline from the colour its
   owner picked; the theme's accent when they picked none) on whatever theme
   the person is in: the lit room, the ring on who is here, the unread marks,
   the send button. The lit room and the buttons sit on a lip and the names
   are in the arcade's rounded face (games.css), so the place has the same
   hand as Games without borrowing its candy colours. */
/* The colour's defaults, wherever a piece of a community is drawn — its page, or a sheet over it. */
.cmx, .panel-body {
  --space: var(--accent);
  --space-ink: var(--on-accent, var(--bg));
  --space-lip: color-mix(in srgb, var(--space) 70%, #000);
  --space-soft: color-mix(in srgb, var(--space) 14%, transparent);
  --cmx-font: var(--arc-font, ui-rounded, "SF Pro Rounded", system-ui, sans-serif);
}
/* A sheet about a community wears its colour too (set inline on .cmx-about / .cmx-front): the wash follows it. */
.cmx-about, .cmx-front, .cm-hold { --space-soft: color-mix(in srgb, var(--space) 14%, transparent); }
.cmx { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }

/* The very top: the community. */
.cmx-top { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; flex: none; min-width: 0; }
.cmx-ic {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-solid, var(--surface)); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: transform 90ms ease-out, background 120ms; -webkit-tap-highlight-color: transparent;
}
.cmx-ic:active { transform: scale(0.92); }
.cmx-ic:focus-visible, .cmx-id:focus-visible, .cmx-room:focus-visible, .cmx-face:focus-visible, .cmx-face-more:focus-visible, .cmx-act:focus-visible, .cmx-try:focus-visible { outline: 2px solid var(--space); outline-offset: 2px; }
.cmx-ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 36; }
.cmx-ic.sm { width: 36px; height: 36px; }
.cmx-ic.sm svg { width: 16px; height: 16px; }
.cmx-ic.on { background: var(--space); color: var(--space-ink); border-color: transparent; }
.cmx-ic.danger { color: var(--danger); }
.cmx-ic:disabled { opacity: 0.35; cursor: default; }
.cmx-dot {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  background: var(--space); color: var(--space-ink); font: 800 10.5px/17px var(--cmx-font); text-align: center; box-shadow: 0 0 0 2px var(--bg);
}
.cmx-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 3px 6px 3px 3px; border-radius: 14px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cmx-id:hover { background: var(--space-soft); }
.cmx-id .cm-tile.sm { flex: none; width: 38px; height: 38px; border-radius: 12px; font-size: 20px; box-shadow: 0 3px 0 var(--space-lip); margin-bottom: 3px; }
.cmx-who { min-width: 0; flex: 1; }
.cmx-name { display: flex; align-items: center; gap: 5px; min-width: 0; font: 900 calc(16.5px * var(--name-scale, 1))/1.2 var(--cmx-font); letter-spacing: -0.1px; color: var(--ink); }
.cmx-name-text { min-width: 0; overflow-wrap: anywhere; }
.cmx-mark { flex: none; font-size: 12px; color: var(--ink-faint); display: inline-flex; }
.cmx-mark svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 44; }
.cmx-line { font-size: 12.5px; line-height: 1.3; color: var(--ink-muted); }
.cmx-here-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success, #2E9E6B); margin-right: 5px; vertical-align: 1px; }

/* Who is here: faces to slide through. It folds away while you read back. */
.cmx-faces {
  display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px; overflow-x: auto; overflow-y: hidden; flex: none; scrollbar-width: none;
  max-height: 52px; transition: max-height 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms, padding 220ms; -webkit-overflow-scrolling: touch;
}
.cmx-faces::-webkit-scrollbar, .cmx-rooms::-webkit-scrollbar { display: none; }
.cmx.folded .cmx-faces { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
.cmx-face { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; background: none; padding: 1px; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.cmx-face-pic { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 14px; }
.cmx-face:not(.here) .cmx-face-pic { opacity: 0.62; filter: saturate(0.7); }
.cmx-face.here { border-color: var(--space); }
.cmx-face:active { transform: scale(0.92); }
.cmx-face-role { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--space); color: var(--space-ink); font-size: 9px; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.cmx-face-add { border: 1.5px dashed var(--border-strong, var(--ink-faint)); color: var(--ink-muted); }
.cmx-face-add svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 40; }
.cmx-face-more { flex: none; height: 36px; min-width: 40px; padding: 0 11px; border-radius: 17px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface)); color: var(--ink-muted); font: 800 12.5px/1 var(--cmx-font); cursor: pointer; }

/* The rooms: a row to slide through, the one you are in lit on its lip. */
.cmx-rooms-wrap { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0 2px 12px; flex: none; border-bottom: 1px solid var(--border); min-width: 0; }
.cmx-rooms { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 0 12px 7px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cmx-room {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 13px; border-radius: 18px;
  border: 1px solid var(--border); background: var(--surface-solid, var(--surface)); color: var(--ink-muted); font: 800 13.5px/1 var(--cmx-font);
  cursor: pointer; white-space: nowrap; transition: transform 90ms ease-out, background 140ms, color 140ms, box-shadow 140ms; -webkit-tap-highlight-color: transparent;
}
.cmx-room-glyph { color: var(--ink-muted); font-weight: 900; }
.cmx-room-name { white-space: nowrap; }
.cmx-room.unread { color: var(--ink); }
.cmx-room.on { background: var(--space); color: var(--space-ink); border-color: transparent; box-shadow: 0 3px 0 var(--space-lip); }
.cmx-room.on .cmx-room-glyph { color: inherit; opacity: 0.75; }
.cmx-room:active { transform: translateY(2px); }
.cmx-room.on:active { box-shadow: 0 1px 0 var(--space-lip); }
.cmx-room-n { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--space); color: var(--space-ink); font: 800 11px/18px var(--cmx-font); text-align: center; }
.cmx-room.add { width: 36px; padding: 0; justify-content: center; border-style: dashed; }
.cmx-room.add svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 44; }

/* In place of the faces and the rooms while a thread, a search or the settings has the page. */
.cmx-sub { display: flex; align-items: center; gap: 8px; padding: 4px 12px 8px; flex: none; border-bottom: 1px solid var(--border); min-width: 0; }
.cmx-sub-title { flex: 1; min-width: 0; font: 800 15px/1.2 var(--cmx-font); color: var(--ink); overflow-wrap: anywhere; }
.cmx-sub .cmx-search { width: 100%; box-sizing: border-box; }

/* The room. A room picked from the row comes in from the side it sits on. */
.cmx-roombody { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.cmx-roombody.in-r { animation: cmx-in-r 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.cmx-roombody.in-l { animation: cmx-in-l 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes cmx-in-r { from { transform: translateX(44px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cmx-in-l { from { transform: translateX(-44px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cmx-roombody.in-r, .cmx-roombody.in-l { animation: cmx-fade 140ms both; }
  .cmx-faces { transition: none; }
}
@keyframes cmx-fade { from { opacity: 0; } to { opacity: 1; } }
.cmx-room-about { font-size: 13px; color: var(--ink-muted); margin: 0 2px 8px; }
.cmx .cm-scroll { overflow-x: hidden; }
.cmx .cm-toolbar { flex-wrap: wrap; }
.cmx .cm-toolbar .cm-newpost { margin-left: auto; }
.cmx .cm-toolbar .cm-chips { flex: 1 1 100%; }
.cmx .cm-joinbar { margin: 6px 12px 8px; flex: none; }
.cmx .cm-pinned-strip { background: var(--space-soft); flex: none; }
.cmx .cm-pinned-head { color: var(--ink-muted); }
.cmx .cm-chat-empty .cm-tile.lg { color: #fff; font-family: var(--cmx-font); font-weight: 900; }
.cmx .cm-chat-empty-title { font-family: var(--cmx-font); }
.cmx .empty + .btn { display: block; margin: 0 auto; }
/* On a finger the line itself is what you hold (a hold opens its sheet): the row of little icons under every line is a mouse's.
   And the hold is ours: no text selection, no callout bubble — "Copy text" is in the sheet. */
@media (hover: none) {
  .cmx .cm-msg .cm-hover { display: none; }
  .cmx .cm-msg { flex-wrap: nowrap; }
  .cmx .cm-msg, .cmx .cm-post, .cmx .cm-full, .cmx .cm-reply { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .cmx .cm-msg.pressing, .cmx .cm-reply.pressing { background: var(--surface); }
  .cmx .cm-post.pressing, .cmx .cm-full.pressing { transform: scale(0.99); }
}
.cm-member.here .cm-member-name::after { content: 'here'; margin-left: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; color: var(--success, #2E9E6B); text-transform: uppercase; }

/* A room on its way. */
.cmx-skel { display: flex; flex-direction: column; gap: 18px; padding: 14px 6px; }
.cmx-skel-row { display: flex; gap: 12px; align-items: flex-start; }
.cmx-skel-row .grow { display: flex; flex-direction: column; gap: 7px; }
.cmx-skel i { display: block; height: 11px; border-radius: 6px; background: var(--border); animation: cmx-pulse 1.1s ease-in-out infinite alternate; }
.cmx-skel i.cmx-skel-face { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.cmx-skel.board .cmx-skel-row { padding: 14px; border: 1px solid var(--border); border-radius: 14px; }
@keyframes cmx-pulse { from { opacity: 0.45; } to { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .cmx-skel i { animation: none; opacity: 0.6; } }

/* The front of a community (an invite link, or one not yours to read), and what it is about (a press on its name). */
.cmx-front-wrap { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; padding: 16px; }
.cmx-front, .cmx-about { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 420px; margin: 0 auto; width: 100%; }
.cmx-front .cm-tile.xl, .cmx-about .cm-tile.xl { box-shadow: 0 5px 0 var(--space-lip); margin-bottom: 6px; }
.cmx-front-name { font: 900 24px/1.15 var(--arc-font, system-ui); letter-spacing: -0.3px; color: var(--ink); overflow-wrap: anywhere; }
.cmx-front-line { font-size: 15px; line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere; }
.cmx-front-count { font-size: 13px; color: var(--ink-muted); }
.cmx-front-rules { align-self: stretch; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 14px; background: var(--space-soft); font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmx-front-rules b { font: 900 11.5px/1.2 var(--arc-font, system-ui); letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-muted); }
.cmx-front-join { align-self: stretch; margin-top: 8px; white-space: normal; }
.cmx-front-join span { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.cmx-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: 8px 0 4px; }
.cmx-act { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 72px; border: 0; background: none; color: var(--ink-muted); font: 700 12px/1.2 inherit; cursor: pointer; padding: 4px 0; border-radius: 12px; }
.cmx-act-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); border-bottom-width: 3px; color: var(--ink); }
.cmx-act-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 36; }
.cmx-act:active .cmx-act-ic { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 2px; }
.cmx-leave { border: 0; background: none; color: var(--danger); font: 700 14px/1 inherit; padding: 12px; cursor: pointer; margin-top: 4px; }

/* The list, the first time: only Shmangus is there yet. */
.cmx-hello { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 16px 16px; margin: 12px 0 4px; border-radius: 24px; border: 1px solid var(--border); border-bottom-width: 5px; background: var(--surface-solid, var(--surface)); }
.cmx-hello-art { display: flex; gap: 0; }
.cmx-hello-art span { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: color-mix(in srgb, var(--arc-grape, #8B5CF6) 18%, transparent); box-shadow: 0 0 0 3px var(--surface-solid, var(--bg)); }
.cmx-hello-art span:nth-child(1) { background: color-mix(in srgb, var(--arc-mint, #1FC98F) 22%, var(--surface-solid, var(--bg))); transform: rotate(-8deg) translateX(6px); }
.cmx-hello-art span:nth-child(2) { background: color-mix(in srgb, var(--arc-grape, #8B5CF6) 22%, var(--surface-solid, var(--bg))); transform: translateY(-5px); z-index: 1; }
.cmx-hello-art span:nth-child(3) { background: color-mix(in srgb, var(--arc-sky, #3BA7FF) 22%, var(--surface-solid, var(--bg))); transform: rotate(8deg) translateX(-6px); }
.cmx-hello-title { font: 900 22px/1.15 var(--arc-font, system-ui); letter-spacing: -0.2px; color: var(--ink); }
.cmx-hello-line { font-size: 14.5px; line-height: 1.4; color: var(--ink-muted); max-width: 340px; }
.cmx-hello .arc-candy { margin-top: 6px; }

/* The settings, in place of the room; the assistant's box under them is theirs while they are open. */
.cmx-settings { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 12px; }
.cmx-settings > * { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; box-sizing: border-box; flex: none; }
.cmx-set-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface)); }
.cmx-set-card .cm-sub:first-child { margin-top: 0; }
.cmx-set-card .input { width: 100%; box-sizing: border-box; min-width: 0; }
.cmx-set-card .input.cmx-set-emoji { width: 64px; flex: none; text-align: center; }
.cmx-set-rooms { display: flex; flex-direction: column; }
.cmx-set-room { display: flex; align-items: center; gap: 6px; padding: 6px 0; min-width: 0; }
.cmx-set-room + .cmx-set-room { border-top: 1px solid var(--border); }
.cmx-set-room .cmx-room-glyph { width: 20px; text-align: center; flex: none; }
.cmx-set-room-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cmx-ask { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 18px; background: var(--space-soft); border: 1px solid color-mix(in srgb, var(--space) 30%, transparent); }
.cmx-ask-head { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 14px; line-height: 1.3; color: var(--ink); }
.cmx-ask-head b { font: 900 15px/1.2 var(--cmx-font); }
.cmx-ask-head svg, .cmx-ask-line svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 36; color: var(--ink); }
.cmx-ask-head .faint { color: var(--ink-muted); }
.cmx-ask-tries { display: flex; flex-wrap: wrap; gap: 6px; }
.cmx-try { border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface)); color: var(--ink); border-radius: 14px; padding: 7px 11px 6px; font: 700 13px/1.2 inherit; cursor: pointer; text-align: left; }
.cmx-try:active { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 2px; }
.cmx-ask-line { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 12px; background: var(--surface-solid, var(--surface)); font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.cmx-ask-line[hidden] { display: none; }

/* Room to spare: the stream keeps to a column. */
.cmx.wide .cmx-top { padding: 12px 18px 6px; }
.cmx.wide .cmx-faces { padding-left: 20px; padding-right: 20px; }
.cmx.wide .cmx-rooms-wrap { padding-left: 20px; }
.cmx.wide .cmx-sub { padding-left: 20px; padding-right: 20px; }
.cmx.wide .cm-scroll.chat { padding: 8px 20px 16px; }
.cmx.wide .cm-scroll.board { padding: 12px 24px 24px; }
.cmx.wide .cm-scroll.board > * { max-width: 880px; margin-left: auto; margin-right: auto; }
.cmx.wide .cmx-room { max-width: 280px; }

/* The members' sheet: a name never shares its line with three buttons. */
.cm-member .cm-member-name { overflow-wrap: anywhere; }
/* While the box is the settings', its shortcut to Apps steps aside on a phone so the words fit. */
@media (max-width: 480px) { body.cm-ask .cmd-bar .cmd-icon[title='Apps'] { display: none; } }
@media (max-width: 480px) { body.cm-ask .cmd-bar input::placeholder { font-size: 15px; } }
.cmx-set-card .cm-seg { align-self: flex-start; }
/* The statuses on a board slide in their own row rather than stacking into two. */
.cmx .cm-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cmx .cm-chips::-webkit-scrollbar { display: none; }
.cmx .cm-chips .cm-chip { flex: none; }
/* The narrowest phones: the buttons at the top give the name their slack. */
@media (max-width: 360px) {
  .cmx-top { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .cmx-top .cmx-ic { width: 36px; height: 36px; }
  .cmx-id { gap: 7px; padding-right: 2px; }
  .cmx-id .cm-tile.sm { width: 34px; height: 34px; font-size: 18px; }
  .cmx-name { font-size: calc(15.5px * var(--name-scale, 1)); }
  .cmx-line { font-size: 12px; }
}
/* The row of rooms fades at its ends, so a room sliding out from under the search button is not cut by a line. */
.cmx-rooms { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 14px), transparent 100%); padding-left: 4px; }
.cmx-rooms-wrap { gap: 2px; }
/* Small words that have to be read, at the ink that reads: labels, links under a reply, counts. */
.cmx .cm-sub, .panel-body .cm-sub, .cmx .cm-linkbtn, .cmx .cm-results-head, .panel-body .cm-blurb.faint, .cmx .cm-reply-head, .cmx .cm-meta-replies.faint { color: var(--ink-muted); }
.cmx .cm-badge, .panel-body .cm-badge { font-size: 11px; }
/* A thumb's worth: the colours to pick from, the statuses to filter by, the links under a reply. */
.cmx .cm-swatch { width: 34px; height: 34px; }
.cmx .cm-chips .cm-chip { min-height: 34px; }
.cmx .cm-reply-acts .cm-linkbtn { padding: 8px 6px; margin: -4px -2px; }
.cmx-set-card .small.faint { color: var(--ink-muted); }
/* On a phone a room's name in the settings takes a second line rather than losing its end to the four buttons. */
@media (max-width: 480px) { .cmx-set-room-name { white-space: normal; overflow-wrap: anywhere; } .cmx-set-room { gap: 4px; } }
.cmx-front .cm-linkbtn { padding: 12px 16px; color: var(--ink-muted); }
.cm-list .cm-row-time.faint { color: var(--ink-muted); }

/* ---- 21 Oct 2026: holding a message, answering a line, the New line, the way back down ---- */

/* The sheet a held message opens (holdSheet / holdReply; the phone's CommunityHold.tsx). */
.cm-hold { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
.cm-hold-who { text-align: center; font-family: var(--cmx-font, inherit); font-weight: 900; font-size: 13px; color: var(--ink-muted); margin: 2px 0 2px; }
.cm-hold { max-width: 480px; margin: 0 auto; width: 100%; box-sizing: border-box; }
/* A sheet on a wide window keeps a phone's width, at the foot, centred (not 1100 px of rows). */
.panel-card:has(> .panel-body > .cm-hold) { max-width: 520px; margin: 0 auto; }
/* Two rows of four, each a thumb's size (48) on any phone. */
.cm-hold-reacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 10px; justify-items: center; }
.cm-hold-react {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface));
  font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.cm-hold-react:active { transform: translateY(2px); border-bottom-width: 1px; }
.cm-hold-react.on { border-color: var(--space, var(--accent)); border-bottom-color: var(--space-lip, var(--accent)); background: var(--space-soft, var(--accent-soft)); }
.cm-hold-card { border-radius: 18px; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface)); overflow: hidden; display: flex; flex-direction: column; }
.cm-hold-row {
  display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 10px 16px; border: 0; background: none;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer;
}
.cm-hold-row + .cm-hold-row { border-top: 1px solid var(--border); }
.cm-hold-row:hover, .cm-hold-row:focus-visible { background: var(--accent-soft); }
.cm-hold-row svg { width: 21px; height: 21px; flex: none; stroke: currentColor; fill: none; stroke-width: 32; }
.cm-hold-row.danger { color: var(--danger); }
@media (max-width: 360px) { .cm-hold-react { width: 48px; height: 48px; } }
/* Who gave each reaction. */
.cm-reactors-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px; color: var(--ink-muted); font-weight: 800; }
.cm-reactors-emoji { font-size: 22px; }
.cm-reactors .cm-hold-row { gap: 12px; }
/* A long name over a line starts at the left like any name, and its time stays one piece. */
.cm-msg-head .cm-name { text-align: left; }
.cm-msg-head .cm-msg-when { white-space: nowrap; }

/* An answer's quote: who it answers and the start of what they said, one line — a tap goes to the line. */
.cm-quote {
  display: flex; align-items: center; gap: 7px; max-width: 100%; margin: -3px 0 0; padding: 5px 8px 5px 9px; border: 0; background: none;
  font: inherit; font-size: 13.5px; line-height: 18px; color: var(--ink-muted); cursor: pointer; text-align: left; min-height: 30px; position: relative;
}
/* The bar is drawn inside the padding, so the tap area can be taller than the line. */
.cm-quote::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--space, var(--accent)); }
.cm-quote b { color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }
/* The name whole on its own line; only the words under it are cut, two lines at most. */
.cm-quote-body { min-width: 0; display: flex; flex-direction: column; }
.cm-quote-name { overflow-wrap: anywhere; }
.cm-quote-words { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; /* preview: the start of the line it answers — a click goes to the whole line */ }
.cm-quote.gone { cursor: default; }
.cm-quote.gone::before { background: var(--border); }
.cm-edited { font-size: 12px; margin-left: 4px; }
.cm-msg.flash { background: var(--space-soft, var(--accent-soft)); transition: background 0.3s; }

/* Where what you have not read starts. */
.cm-new { display: flex; align-items: center; margin: 12px 0 2px; }
.cm-new::before { content: ''; flex: 1; height: 1px; background: var(--space, var(--accent)); }
.cm-new span { background: var(--space, var(--accent)); color: var(--space-ink, #fff); font-family: var(--cmx-font, inherit); font-weight: 900; font-size: 11.5px; letter-spacing: 0.04em; border-radius: 8px; padding: 2px 8px; }

/* Read back up a chat: the round key down to the newest line. */
.cm-stream-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cm-jump {
  position: absolute; right: 14px; bottom: 12px; min-width: 44px; height: 44px; padding: 0 13px; border-radius: 22px;
  display: none; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface)); color: var(--ink);
  font-family: var(--cmx-font, inherit); font-weight: 900; font-size: 13.5px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.cm-jump.up { display: inline-flex; animation: cmx-fade 160ms both; }
.cm-jump.has { background: var(--space, var(--accent)); color: var(--space-ink, #fff); border-color: var(--space-lip, var(--accent)); }
.cm-jump svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 44; }

/* The room's box is the app's own line since 21 Oct 2026 (barSides.js: the profile, the box, the microphone — a
   conversation's in pages/messages.js is the same), with "Replying to Ana" over it. */
.cm-dock { flex: none; background: var(--bg); }
.cm-replybar { display: flex; align-items: center; gap: 8px; margin: 6px 12px 0; padding: 3px 4px 3px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface)); font-size: 13.5px; color: var(--ink-muted); }
.cm-replybar[hidden] { display: none; }
.cm-replybar > svg { width: 16px; height: 16px; flex: none; stroke: var(--space, var(--accent)); fill: none; stroke-width: 36; }
.cm-replybar b { color: var(--ink); font-weight: 800; }
.cm-reply-x { width: 44px; height: 44px; flex: none; border-radius: 22px; border: 0; background: none; color: var(--ink-muted); display: grid; place-items: center; cursor: pointer; }
.cm-reply-x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 40; }
.cmx.wide .cm-replybar { margin-left: 20px; margin-right: 20px; }

/* A long name under a board post starts at the left beside its face and wraps; the time and the count follow it. */
.cm-meta .cm-name { text-align: left; overflow-wrap: anywhere; flex: 1 1 0; min-width: 0; }
.cm-meta .cm-meta-when { flex: none; }
/* Who said the last line in a community, whole, over the words (which are the cut preview). */
.cm-row-by { font-size: 13px; color: var(--ink-muted); margin-top: 2px; overflow-wrap: anywhere; }
.cm-space-row.unread .cm-row-by { color: var(--ink); }
/* A bare link in a post's preview breaks where it must instead of running off sideways. */
.cm-snippet { overflow-wrap: anywhere; }
/* A long name over a line: the time drops under it, as in Mail. */
.cm-msg-head { flex-wrap: wrap; row-gap: 0; }