/* Messages (apps/chat): the Messages page, conversation panes and the Discuss panel.
   Colours come from the admin theme (light and dark), falling back to derp.css's on working pages. */

/* Message text: --chat-text when someone has pinched it bigger or smaller (chat.js, kept per
   device), else the screen's own size. Everything in a message is sized from it. */
:root { --chat-text-default: 14px; }
.chat-messages { font-size: var(--chat-text, var(--chat-text-default)); }
.chat-msg, .chat-more, .chat-empty, .chat-body li { font-size: 1em; }  /* not the admin's fixed 13px for every li */
.chat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.chat-page #content { padding-bottom: 0; }
/* The page fits the window, under the header (--header-h, backoffice.js) and breadcrumbs: only the
   messages scroll, and the message box stays in view. */
.chat-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0;
  height: calc((100vh - var(--header-h, 58px)) * var(--text-unzoom, 1) - 73px); min-height: 420px;
  border: 1px solid var(--hairline-color, var(--border, #e3e2dc)); border-radius: 10px; overflow: hidden; background: var(--body-bg, var(--surface, #fff)); }
@media (max-width: 800px) { .chat-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .chat-side { max-height: 40vh; } }

.chat-side { background: var(--darkened-bg, var(--head-row, #f7f7f5)); padding: 10px 8px; overflow-y: auto; border-right: 1px solid var(--hairline-color, var(--border, #e3e2dc)); }
.chat-side h2 { display: flex; justify-content: space-between; align-items: center; margin: 16px 8px 4px; padding: 0;
  background: none; color: var(--body-quiet-color, var(--muted, #6b6b66)); font-size: 12px; font-weight: 500; }
.chat-side-add { text-decoration: none; font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.chat-side-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; color: var(--body-fg, var(--text, #1d1d1b));
  text-decoration: none; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-side-item:hover { background: var(--selected-bg, rgba(0,0,0,.06)); text-decoration: none; }
.chat-side-item.current { background: color-mix(in srgb, var(--link-fg, var(--accent, #2f5d50)) 14%, transparent);
  color: var(--body-fg, var(--text, #1d1d1b)); font-weight: 500; }
.chat-side-item.unread { font-weight: 600; }
.chat-side-empty { margin: 4px 8px; font-size: 12px; color: var(--body-quiet-color, var(--muted, #6b6b66)); }
.chat-count { margin-left: auto; font-size: 11px; font-weight: 600; }
.chat-count:not(:empty) { background: #d64545; color: #fff; border-radius: 999px; padding: 1px 6px; }

.presence { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--body-quiet-color, var(--muted, #6b6b66)); flex: none; }
.presence.online { background: #2fb36b; border-color: #2fb36b; }

.chat-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.chat-inbox { padding: 16px 20px; }
.chat-inbox h1 { margin-top: 0; }
.chat-inbox h2 { background: none; padding: 0; margin: 18px 0 6px; color: var(--body-fg, var(--text, #1d1d1b)); font-size: 14px; }
.chat-inbox-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 10px; border-bottom: 1px solid var(--hairline-color, var(--border, #e3e2dc));
  color: var(--body-fg, var(--text, #1d1d1b)); text-decoration: none; }
.chat-inbox-row form { margin-left: auto; }
.chat-inbox-text { flex-basis: 100%; color: var(--body-quiet-color, var(--muted, #6b6b66)); font-size: 13px; }
.chat-new-channel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.chat-people { list-style: none; padding: 0; margin: 8px 0 14px; columns: 2 220px; }
.chat-people li { list-style: none; padding: 3px 0; }

/* a conversation */
.chat-pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-page .chat-pane { min-height: 0; }
.chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--hairline-color, var(--border, #e3e2dc)); }
.chat-back, .chat-head-more { display: none; }  /* a phone's */
.chat-head h1 { margin: 0; font-size: 18px; }
/* A private channel's lock, beside its name: small and quiet. */
:is(.chat-head h1, .chat-side-item, .chat-inbox-row) svg.i { width: 14px; height: 14px; vertical-align: -1px;
  color: var(--body-quiet-color, var(--muted, #6b6b66)); }
.chat-topic { margin: 2px 0 0; font-size: 13px; color: var(--body-quiet-color, var(--muted, #6b6b66)); }
.chat-head-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chat-head-tools form { margin: 0; }
.chat-members, .chat-react-pick { position: relative; }
.chat-members > summary, .chat-react-pick > summary { cursor: pointer; list-style: none; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--hairline-color, var(--border, #e3e2dc)); font-size: 13px; }
.chat-members > summary::-webkit-details-marker, .chat-react-pick > summary::-webkit-details-marker { display: none; }
.chat-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--body-bg, var(--surface, #fff)); border: 1px solid var(--hairline-color, var(--border, #e3e2dc));
  border-radius: 8px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 220px; }
.chat-pop ul { list-style: none; margin: 0 0 6px; padding: 0; }
.chat-pop li { list-style: none; display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.chat-pop li a { margin-left: auto; text-decoration: none; }
.chat-invite { position: relative; }
.chat-invite input { width: 100%; box-sizing: border-box; }

.chat-scroll { flex: 1; overflow-y: auto; padding: 8px 16px; min-height: 120px; }
.chat-messages { list-style: none; margin: 0; padding: 0; }
.chat-messages > li { list-style: none; }
.chat-more { text-align: center; padding: 6px; }
.chat-msg { position: relative; padding: 6px 8px; border-radius: 8px; margin: 2px 0; }
.chat-msg:hover { background: var(--darkened-bg, var(--head-row, #f7f7f5)); }
.chat-msg.new { box-shadow: inset 3px 0 0 #d64545; }
.chat-msg-head { font-size: .93em; }
.chat-msg-head time, .chat-edited { color: var(--body-quiet-color, var(--muted, #6b6b66)); font-size: .85em; margin-left: 4px; }
.chat-body { font-size: 1em; line-height: 1.5; overflow-wrap: anywhere; }
.chat-body > :first-child { margin-top: 0; } .chat-body > :last-child { margin-bottom: 0; }
.chat-body p { margin: 0 0 6px; padding: 0; }
.chat-body ul, .chat-body ol { margin: 4px 0 6px 1.4em; padding: 0; }
.chat-body ul li { list-style: disc; } .chat-body ol li { list-style: decimal; }
.chat-body blockquote { margin: 4px 0; padding-left: 10px; border-left: 3px solid var(--hairline-color, var(--border, #e3e2dc)); color: var(--body-quiet-color, var(--muted, #6b6b66)); }
.chat-body code { font-size: .9em; background: var(--darkened-bg, var(--head-row, #f7f7f5)); padding: 1px 4px; border-radius: 4px; }
.chat-body pre { background: var(--darkened-bg, var(--head-row, #f7f7f5)); padding: 8px; border-radius: 6px; overflow-x: auto; }
.mention { background: color-mix(in srgb, var(--link-fg, var(--accent, #2f5d50)) 14%, transparent); color: var(--link-fg, var(--accent, #2f5d50)); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.mention[data-user] { white-space: nowrap; }
.record-link { font-weight: 600; }
.chat-event { text-align: center; font-size: .86em; color: var(--body-quiet-color, var(--muted, #6b6b66)); padding: 4px 0; }
.chat-files { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chat-files li { list-style: none; }
.chat-files img { max-width: 220px; max-height: 160px; border-radius: 6px; display: block; }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-reactions:empty { display: none; }
.chat-reaction { border: 1px solid var(--hairline-color, var(--border, #e3e2dc)); background: var(--body-bg, var(--surface, #fff)); color: var(--body-fg, var(--text, #1d1d1b)); border-radius: 999px;
  padding: 1px 8px; font-size: .86em; cursor: pointer; }
.chat-reaction.mine { border-color: var(--primary, var(--accent, #2f5d50));
  background: color-mix(in srgb, var(--link-fg, var(--accent, #2f5d50)) 14%, transparent); }
.chat-msg-tools { position: absolute; top: 2px; right: 6px; display: none; gap: 2px; align-items: center; }
.chat-msg:hover .chat-msg-tools, .chat-msg:focus-within .chat-msg-tools { display: flex; }
.chat-msg-tools > button, .chat-react-pick > summary { background: var(--body-bg, var(--surface, #fff)); border: 1px solid var(--hairline-color, var(--border, #e3e2dc));
  border-radius: 6px; padding: 2px 6px; cursor: pointer; font-size: 12px; color: var(--body-fg, var(--text, #1d1d1b)); }
.chat-react-pick .chat-pop { display: flex; gap: 2px; min-width: 0; padding: 4px; }
.chat-reaction-pick { border: 0; background: none; font-size: 18px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.chat-reaction-pick:hover { background: var(--darkened-bg, var(--head-row, #f7f7f5)); }
.chat-edit-box textarea { width: 100%; box-sizing: border-box; }
.chat-typing { min-height: 18px; margin: 0; padding: 0 16px; font-size: 12px; color: var(--body-quiet-color, var(--muted, #6b6b66)); font-style: italic; }
.chat-readonly { padding: 12px 16px; color: var(--body-quiet-color, var(--muted, #6b6b66)); }

/* the composer: formatting buttons, then the box with Attach on its left and Send on its right */
.chat-composer { border-top: 1px solid var(--hairline-color, var(--border, #e3e2dc)); padding: 8px 16px 10px; }
.chat-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.chat-toolbar button { border: 1px solid var(--hairline-color, var(--border, #e3e2dc)); background: var(--body-bg, var(--surface, #fff)); color: var(--body-fg, var(--text, #1d1d1b));
  border-radius: 4px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.chat-picked { margin: 0 0 6px; font-size: 12px; }
/* the emoji picker (chat.js 4), over the messages above the composer; a phone's keyboard has its own */
.chat-composer { position: relative; }
.chat-toolbar .chat-emoji-button { font-size: 14px; line-height: 1; padding: 2px 6px; }
.chat-emoji { position: absolute; left: 12px; bottom: calc(100% - 2px); z-index: 40; display: flex; flex-direction: column; gap: 6px;
  width: 320px; max-width: calc(100% - 24px); box-sizing: border-box; padding: 8px; border-radius: 10px;
  background: var(--body-bg, var(--surface, #fff)); border: 1px solid var(--hairline-color, var(--border, #e3e2dc));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
.chat-emoji[hidden], .chat-emoji-tabs[hidden] { display: none; }
.chat-emoji .chat-emoji-search { width: 100%; box-sizing: border-box; margin: 0; }
.chat-emoji-tabs { display: flex; gap: 2px; }
.chat-emoji-tabs button { flex: 1; border: 0; background: none; font-size: 16px; padding: 4px 0; border-radius: 6px; cursor: pointer; }
.chat-emoji-list { position: relative; height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.chat-emoji .chat-emoji-list h3 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 6px 2px 4px; background: var(--body-bg, var(--surface, #fff));
  font-size: 12px; font-weight: 500; color: var(--body-quiet-color, var(--muted, #6b6b66)); }
.chat-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); }
.chat-emoji-grid button { border: 0; background: none; font-size: 22px; line-height: 1; padding: 5px 0; border-radius: 6px; cursor: pointer; }
.chat-emoji-tabs button:hover, .chat-emoji-grid button:hover, .chat-emoji-grid button:focus-visible {
  background: var(--darkened-bg, var(--head-row, #f7f7f5)); outline: none; }
.chat-emoji-none { margin: 12px 4px; font-size: 13px; color: var(--body-quiet-color, var(--muted, #6b6b66)); }
.chat-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-attach { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; cursor: pointer;
  color: var(--body-quiet-color, var(--muted, #6b6b66)); }
.chat-attach:hover { background: var(--darkened-bg, var(--head-row, #f7f7f5)); color: var(--body-fg, var(--text, #1d1d1b)); }
.chat-attach svg, .chat-send svg { width: 20px; height: 20px; }
.chat-input-wrap { position: relative; flex: 1; min-width: 0; }
.chat-composer textarea { display: block; width: 100%; box-sizing: border-box; resize: none; min-height: 38px; max-height: 240px;
  overflow-y: auto; margin: 0; font-size: 14px; line-height: 1.4; }
.chat-send { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 6px;
  background: var(--button-bg, var(--accent, #2f5d50)); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.chat-send:hover { background: var(--button-hover-bg, #244a40); }
.chat-hint { margin: 6px 0 0; font-size: 11px; }
.mention-menu { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 40; background: var(--body-bg, var(--surface, #fff)); border: 1px solid var(--hairline-color, var(--border, #e3e2dc));
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; min-width: 240px; }
.chat-invite .mention-menu, .chat-picker .mention-menu { bottom: auto; top: calc(100% + 4px); }
.mention-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--body-fg, var(--text, #1d1d1b)); padding: 6px 8px;
  border-radius: 6px; cursor: pointer; font-size: 13px; }
.mention-menu button span { color: var(--body-quiet-color, var(--muted, #6b6b66)); font-size: 12px; }
.mention-menu button.active, .mention-menu button:hover { background: var(--darkened-bg, var(--head-row, #f7f7f5)); }

/* the Discuss panel on record screens */
.chat-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 1000; background: var(--body-bg, var(--surface, #fff));
  border-left: 1px solid var(--hairline-color, var(--border, #e3e2dc)); box-shadow: -12px 0 32px rgba(0,0,0,.16); display: flex; flex-direction: column; }
.chat-drawer[hidden] { display: none; }
@media (min-width: 1300px) { body.chat-drawer-open #container { margin-right: 420px; } }
.chat-record { display: flex; flex-direction: column; height: 100%; }
.chat-record-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--hairline-color, var(--border, #e3e2dc)); }
.chat-record-head h2 { margin: 0 auto 0 0; background: none; padding: 0; color: var(--body-fg, var(--text, #1d1d1b)); font-size: 16px; }
.chat-record-head form { margin: 0; }
.chat-drawer-close { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--body-fg, var(--text, #1d1d1b)); }
.chat-record .chat-pane { flex: 1; }
.chat-record .chat-scroll { padding: 8px 12px; }
.chat-record .chat-composer { padding: 8px 12px 10px; }
.chat-record-open { margin: 0; padding: 6px 12px 10px; font-size: 12px; }
.chat-record-gone { margin: 0; padding: 16px 12px; color: var(--body-quiet-color, var(--muted, #666)); }
.chat-empty { padding: 20px 4px; font-size: 13px; }
.chat-discuss .chat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d64545; margin-left: 4px; vertical-align: middle; }

/* header: Messages link and its badge */
.chat-link { position: relative; }
.chat-badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #d64545;
  color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; }
.chat-badge[hidden] { display: none; }

/* search */
.chat-search { margin: 0 0 8px; }
.chat-search input { width: 100%; box-sizing: border-box; }
.chat-search-help code { font-size: 12px; }
.chat-result { display: block; padding: 10px 12px; border-bottom: 1px solid var(--hairline-color, var(--border, #e3e2dc)); color: var(--body-fg, var(--text, #1d1d1b)); text-decoration: none; }
.chat-result:hover { background: var(--darkened-bg, var(--head-row, #f7f7f5)); text-decoration: none; }
.chat-result-head { display: block; font-size: 12px; color: var(--body-quiet-color, var(--muted, #6b6b66)); }
.chat-result-head strong { color: var(--body-fg, var(--text, #1d1d1b)); }
.chat-result-text { display: block; font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }
.chat-result mark, .chat-msg:target { background: rgba(240, 196, 64, .35); color: inherit; border-radius: 3px; }
.chat-msg:target { box-shadow: inset 3px 0 0 #f0c440; }

/* ---- Phones, upright or on their side: as a phone's messaging app ----
   Messages is the list of conversations; a conversation fills the screen (no tab bar), with a
   back arrow, bubbles (yours on the right), and a round message box with Attach and Send that
   stays just above the keyboard (--chat-vh, chat.js). A tap on a bubble shows its actions;
   pinching sizes the text. */
:root { --chat-mine-bg: var(--button-bg, #2f5d50); --chat-mine-fg: #fff; --chat-other-bg: #eceee9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chat-other-bg: #2a2d2b; } }
html[data-theme="dark"] { --chat-other-bg: #2a2d2b; }

/* The Discuss panel isn't in the page's content: its messages take the text size (My settings) here. */
.chat-drawer { --chat-text-default: calc(14px * var(--text-zoom, 1)); }

@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* A conversation fills the screen at its own size; its messages take the text size instead. */
  :root, .chat-drawer { --chat-text-default: calc(16px * var(--text-zoom, 1)); }
  .chat-thread .chat-main > .chat-pane { zoom: var(--text-unzoom, 1); }

  /* Messages: the conversations, as a list */
  .chat-page .chat-layout { display: block; height: auto; min-height: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
  .chat-page:not(.chat-home) .chat-side { display: none; }  /* a conversation, Channels, Search: their own screen */
  .chat-home .chat-side { max-height: none; padding: 0; overflow: visible; background: none; border: 0; }
  .chat-home .chat-side-activity { display: none; }  /* this screen */
  .chat-search input { min-height: 44px; padding: 0 16px; border: 1px solid var(--hairline-color, var(--border, #e3e2dc));
    border-radius: 22px; background: var(--darkened-bg, var(--surface, #f7f7f5)); font-size: 16px; }
  .chat-home .chat-side h2 { margin: 20px 4px 4px; font-size: 12px; }
  .chat-home .chat-side-item { min-height: 50px; padding: 10px 6px; gap: 10px; border-radius: 0; font-size: 16px;
    border-bottom: 1px solid var(--hairline-color, var(--border, #e3e2dc)); }
  .chat-home .chat-side-item.current { background: none; color: inherit; }
  .chat-count:not(:empty) { min-width: 22px; padding: 2px 7px; font-size: 12px; text-align: center; box-sizing: border-box; }
  .chat-side-add { font-size: 22px; padding: 0 8px; }
  .chat-home .chat-inbox { padding: 18px 0 8px; }
  .chat-inbox-row { min-height: 50px; padding: 10px 6px; }
  .chat-inbox-row:not(.mention-row):not(:has(form)) { flex-wrap: nowrap; }
  .chat-inbox-row:not(.mention-row) strong { flex: 1; min-width: 0; }
  .chat-inbox h1 { font-size: 20px; }

  /* A conversation fills what's visible of the screen, above the keyboard. */
  body.chat-page.chat-thread { overflow: hidden; padding-bottom: 0; }
  .chat-thread .app-nav { display: none !important; }
  .chat-thread .chat-main > .chat-pane { position: fixed; z-index: 950; left: 0; right: 0; top: var(--chat-top, 0);
    height: var(--chat-vh, 100dvh); background: var(--body-bg, var(--bg, #fff)); }
  .chat-drawer { top: var(--chat-top, 0); bottom: auto; height: var(--chat-vh, 100dvh); width: 100vw; border: 0; }
  .chat-record-head { padding-top: calc(10px + env(safe-area-inset-top)); }
  .chat-pane { position: relative; touch-action: pan-x pan-y; }  /* a pinch sizes the text (chat.js) */

  /* its bar: back, the title, and ⋮ for members and notifications */
  .chat-thread .chat-head { flex-wrap: wrap; align-items: center; gap: 0 2px; padding: calc(4px + env(safe-area-inset-top)) 4px 4px;
    background: var(--header-bg, #2f5d50); color: #fff; border: 0; }
  .chat-thread .chat-back, .chat-thread .chat-head-more { display: grid; place-items: center; flex: none; width: 44px; height: 44px;
    padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; }
  .chat-back svg { width: 26px; height: 26px; } .chat-head-more svg { width: 22px; height: 22px; }
  .chat-thread .chat-head-title { flex: 1; min-width: 0; }
  .chat-thread #content .chat-head h1 { margin: 0; overflow: hidden; color: #fff; font-size: 17px; font-weight: 600; line-height: 22px;
    white-space: nowrap; text-overflow: ellipsis; }
  .chat-thread .chat-topic { overflow: hidden; color: rgba(255, 255, 255, .78); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
  .chat-thread .chat-topic a { color: #fff; }
  .chat-thread .chat-head-tools { display: none; flex-basis: 100%; margin: 4px 4px 2px; padding: 8px; border-radius: 12px;
    background: var(--body-bg, var(--bg, #fff)); color: var(--body-fg, var(--text, #1d1d1b)); }
  .chat-thread .chat-pane.head-open .chat-head-tools { display: flex; }
  .chat-head-tools select, .chat-head-tools .button { min-height: 40px; font-size: 15px; }
  .chat-members > summary { padding: 9px 12px; font-size: 15px; }

  /* bubbles: theirs on the left with their name, yours on the right; a run joins up */
  .chat-scroll { padding: 8px 10px 10px; overscroll-behavior: contain; }
  .chat-messages { display: flex; flex-direction: column; }
  .chat-msg { align-self: flex-start; max-width: 84%; box-sizing: border-box; margin: 8px 0 0; padding: 6px 12px 8px;
    border-radius: 18px 18px 18px 6px; background: var(--chat-other-bg); }
  .chat-msg:hover { background: var(--chat-other-bg); }
  .chat-msg.follows { margin-top: 2px; border-top-left-radius: 6px; }
  .chat-msg.follows .chat-msg-head { display: none; }
  .chat-msg-head strong { color: var(--link-fg, var(--accent, #2f5d50)); font-size: .92em; }
  .chat-msg-head time { margin-left: 6px; }
  .chat-msg.mine { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--chat-mine-bg); color: var(--chat-mine-fg); }
  .chat-msg.mine:hover { background: var(--chat-mine-bg); }
  .chat-msg.mine.follows { border-top-right-radius: 6px; border-top-left-radius: 18px; }
  .chat-msg.mine .chat-msg-head { text-align: right; }
  .chat-msg.mine .chat-msg-head strong { display: none; }
  .chat-msg.mine .chat-msg-head time, .chat-msg.mine .chat-edited, .chat-msg.mine .muted { color: rgba(255, 255, 255, .75); }
  .chat-msg.mine a, .chat-msg.mine .record-link { color: #fff; }
  .chat-msg.mine .mention { background: rgba(255, 255, 255, .22); color: #fff; }
  .chat-msg.mine :is(code, pre) { background: rgba(0, 0, 0, .2); }
  .chat-msg.mine blockquote { border-color: rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .85); }
  .chat-msg.new { box-shadow: 0 0 0 2px rgba(214, 69, 69, .55); }
  .chat-body { line-height: 1.4; }
  .chat-files img { max-width: 100%; }
  .chat-event { margin: 10px 12px 2px; }
  .chat-reactions { margin-top: 6px; }
  .chat-reaction { padding: 3px 9px; color: var(--body-fg, var(--text, #1d1d1b)); }
  /* a tapped bubble shows its actions under it */
  .chat-msg .chat-msg-tools, .chat-msg:hover .chat-msg-tools, .chat-msg:focus-within .chat-msg-tools { display: none; }
  .chat-msg.tools-open .chat-msg-tools { position: static; display: flex; gap: 6px; margin-top: 8px; }
  .chat-msg-tools > button, .chat-react-pick > summary { padding: 6px 12px; font-size: 16px; }
  .chat-react-pick .chat-pop { right: auto; left: 0; }
  .chat-msg.mine .chat-react-pick .chat-pop { right: 0; left: auto; }
  .chat-reaction-pick { font-size: 24px; padding: 4px 6px; }
  .chat-typing { padding: 0 14px; }

  /* the message box: Attach, a round box that grows, and Send */
  .chat-composer { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--body-bg, var(--bg, #fff)); }
  .chat-toolbar, .chat-hint { display: none; }
  .chat-picked { margin: 2px 0 6px 50px; }
  .chat-compose-row { gap: 4px; }
  .chat-attach { width: 44px; height: 44px; border-radius: 50%; }
  .chat-attach svg { width: 24px; height: 24px; }
  .chat-composer textarea { min-height: 44px; max-height: 40vh; padding: 10px 16px; border-radius: 22px; line-height: 1.35;
    font-size: max(16px, var(--chat-text, 16px)); }  /* 16px at least, or iPhones zoom in */
  .chat-send { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .chat-send svg { width: 22px; height: 22px; margin-left: 2px; }
  .chat-send-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .chat-record .chat-composer { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .chat-record-open { display: none; }

  /* the text size, briefly, while pinching */
  .chat-text-size { position: absolute; z-index: 5; top: 35%; left: 50%; transform: translateX(-50%); padding: 6px 14px;
    border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 14px; font-weight: 600; opacity: 0;
    transition: opacity .2s; pointer-events: none; }
  .chat-text-size.shown { opacity: 1; }
}

/* Following: threads on finished records are left out until "Show n finished" (views.sidebar);
   shown, they're quieter. */
.chat-side-finished { margin: 0; }
.chat-side-finished button { padding: 0 4px; border: 0; background: none; color: var(--link-fg, var(--accent, #2f5d50));
                             font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
                             cursor: pointer; }
.chat-side-finished button:hover { text-decoration: underline; }
.chat-side-item.finished:not(.current) { color: var(--body-quiet-color, var(--muted, #6b6b66)); }