/* Chat in the redesign (Hallmark: Rami approved the mockup on 2 November 2026, review/hallmark/chat-rethink.html; built 3 November 2026).
   public/chat.js (the bar, the list, Mentions, Updates, Settings) and the conversation it opens (public/work.js chat, its Chat-page header).
   Only the look moves: every message, mention, upload, permission and automation works as before. Everything is under #chatPage (the
   Hub's Chat page, Circle Chat at /chat and the pop-out window), so a client page's own chat is not touched. Cadence tokens only, so
   light and dark follow by themselves; a phone of 400px has no sideways scroll; Arabic mirrors (logical properties). */

/* ---------- the page: edge to edge under the top bar on a computer (the rail against the menu, the list, the conversation) ---------- */
@media (min-width:861px){
  html:not(.chatapp):not(.pop) body:has(#p-ch.on) main:not(#_):not(#_){padding-bottom:0!important}
  html:not(.chatapp):not(.pop) body #p-ch.on:not(#_){margin:-14px -22px 0}
  html:not(.chatapp):not(.pop) body #chatPage .cx:not(#_):not(#_){height:calc(calc(var(--vh, 100vh) / var(--z, 1)) - 60px);min-height:520px;gap:0}
  html body #chatPage .cx.cx-railed:not(#_):not(#_){grid-template-columns:72px minmax(300px,380px) minmax(0,1fr)}
  html body #chatPage .cx-rail:not(#_):not(#_){border-radius:0;padding:14px 8px;background:var(--c-bg);box-shadow:inset -1px 0 0 var(--border)}
  html[dir="rtl"] body #chatPage .cx-rail:not(#_):not(#_){box-shadow:inset 1px 0 0 var(--border)}
  html body #chatPage .cx-rail .cx-tabbar button:not(#_):not(#_){padding:9px 2px 7px;border-radius:12px;font-size:10.5px;font-weight:700;color:var(--ink-subtle)}
  html body #chatPage .cx-rail .cx-tabbar button.on:not(#_):not(#_){background:var(--surface);color:var(--c-ink);box-shadow:var(--shadow-raised),0 0 0 1px var(--border)}
  html body #chatPage .cx-rail .cx-tabbar svg:not(#_):not(#_){width:22px;height:22px;stroke-width:1.7}
  html body #chatPage .cx-list:not(#_):not(#_){border-radius:0;padding:18px 0 0;background:var(--surface)!important;box-shadow:inset -1px 0 0 var(--border)}
  html[dir="rtl"] body #chatPage .cx-list:not(#_):not(#_){box-shadow:inset 1px 0 0 var(--border)}
  html body #chatPage .cx-main:not(#_):not(#_){border-radius:0;padding:0;background:var(--chat-wall)!important}
}
/* the Ask Kasper button sits above the message box, not on it */
@media (min-width:861px){html body:has(#chatPage.has-room) .pal:not(#_):not(#_):not(#_):not(#_){bottom:96px}}

/* ---------- the bar's counts: purple, as the unread marks ---------- */
html body #chatPage .cx-tabbar i:not(#_):not(#_){background:var(--chat-mine);color:var(--chat-mine-ink)}

/* ---------- the list ---------- */
html body #chatPage .cx-list .cx-top:not(#_){padding:0 18px 12px;gap:8px}
html body #chatPage .cx-list .cx-top .h1:not(#_):not(#_){font-size:28px;font-weight:700;letter-spacing:-.02em;flex:1 1 auto;min-width:0}
html body #chatPage .cx-topb:not(#_){display:inline-flex;align-items:center;gap:8px;flex:none}
html body #chatPage .cx-popi:not(#_):not(#_){width:38px;height:38px;min-height:38px;padding:0;border:0;background:transparent;box-shadow:none;display:inline-grid;place-items:center;color:var(--ink-muted);border-radius:10px}
html body #chatPage .cx-popi:hover:not(#_):not(#_){background:var(--surface-hover);color:var(--c-ink)}
html body #chatPage .cx-popi svg:not(#_),html body #chatPage .cx-newd svg:not(#_){width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html body #chatPage .cx-vh:not(#_){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html body #chatPage .cx-newd:not(#_):not(#_){height:38px;min-height:38px;padding:0 14px 0 12px;display:inline-flex;align-items:center;gap:6px;border-radius:10px;font-weight:600;background:var(--c-ink);color:var(--surface);border:0}
html body #chatPage .cx-newd:hover:not(#_):not(#_){background:var(--ink-muted)}
html body #chatPage .cx-list input.cx-q:not(#_):not(#_){margin:0 18px 12px;height:40px;border-radius:999px!important;border:1px solid transparent!important;background-color:var(--c-bg)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23858a93' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:13px 50%!important;background-size:15px!important;padding-inline:36px 14px;box-shadow:none}
html[dir="rtl"] body #chatPage .cx-list input.cx-q:not(#_):not(#_){background-position:calc(100% - 13px) 50%!important}
html body #chatPage .cx-list input.cx-q:focus:not(#_):not(#_){border-color:var(--focus)!important;background-color:var(--surface)!important}
html body #chatPage .cx-top.cx-qrow .cx-q:not(#_):not(#_){margin:0}
html body #chatPage .cx-scroll:not(#_){padding-bottom:16px}
/* the chips: no border, the chosen one lavender */
html body #chatPage .cx-list .mk-strip:not(#_):not(#_){padding:0 18px 12px;gap:6px;margin:0}
html body #chatPage .cx-list .mk-strip .mk-pill:not(#_):not(#_){min-height:32px;padding:0 13px;border:0;border-radius:999px;background:var(--c-bg);color:var(--ink-muted);font-size:13px;font-weight:600;box-shadow:none}
html body #chatPage .cx-list .mk-strip .mk-pill i:not(#_):not(#_){font-style:normal;font-weight:700;color:var(--ink-subtle);background:none;padding:0;margin-inline-start:6px}
html body #chatPage .cx-list .mk-strip .mk-pill.on:not(#_):not(#_){background:var(--accent-violet-pastel);color:#2e1a5c}
html body #chatPage .cx-list .mk-strip .mk-pill.on i:not(#_):not(#_){color:#2e1a5c}
/* Online now: the faces, big, with a green dot */
html body #chatPage .cx-online:not(#_):not(#_){padding:0 18px 10px;border:0;margin:0}
html body #chatPage .cx-online>small:not(#_):not(#_){display:block;padding:0 0 8px;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink-subtle)}
html body #chatPage .cx-online>div:not(#_):not(#_){display:flex;gap:12px;overflow-x:auto;scrollbar-width:none}
html body #chatPage .cx-op:not(#_):not(#_){display:flex;flex-direction:column;align-items:center;gap:4px;width:54px;padding:0;border:0;background:none;font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-muted);cursor:pointer}
html body #chatPage .cx-op>span:last-child:not(#_){max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body #chatPage .cx-op .cx-ic:not(#_):not(#_){width:48px;height:48px;font-size:16px}
/* everyone's picture in the list, Mentions and Updates: their own colour (the hue their messages use); a client's is a rounded square,
   a channel's grey with # (a lock when private) */
html body #chatPage .cx-ic:not(#_):not(#_){position:relative;overflow:visible;font-weight:700;letter-spacing:0}
html body #chatPage .cx-ic[style*="--h"]:not(#_):not(#_){background:hsl(var(--h) 70% 86%);color:hsl(var(--h) 45% 26%)}
html body #chatPage .cx-ic.k-group:not(#_):not(#_){background:var(--surface-sunken);color:var(--ink-muted);border-radius:50%;font-size:20px;font-weight:500}
html body #chatPage .cx-ic img:not(#_){border-radius:inherit}
html body #chatPage .cx-ic.cx-live:not(#_)::after{content:"";position:absolute;inset-inline-end:0;bottom:0;width:12px;height:12px;border-radius:50%;background:var(--accent-green);box-shadow:0 0 0 2px var(--surface)}
/* the archived line */
html body #chatPage .cx-arch:not(#_):not(#_){padding:10px 18px;border-radius:0;font-size:14.5px;color:var(--ink-muted)}
html body #chatPage .cx-arch svg:not(#_):not(#_){width:20px}
html body #chatPage .cx-arch i:not(#_):not(#_){background:none;color:var(--ink-subtle);font-size:13px;font-weight:600}
/* the rows: edge to edge, a 48px picture, the name with a client's status as a dot and its word, the last line, the time and the count */
html body #chatPage .cx-prows:not(#_){display:block}
html body #chatPage .cx-rw:not(#_):not(#_){border-radius:0}
html body #chatPage .cx-rw .cx-row:not(#_):not(#_){gap:12px;padding:10px 18px;border-radius:0;align-items:center;background:transparent}
html body #chatPage .cx-rw .cx-row:hover:not(#_):not(#_){background:var(--surface-hover)}
html body #chatPage .cx-rw.on .cx-row:not(#_):not(#_),html body #chatPage .cx-rw.menu .cx-row:not(#_):not(#_){background:var(--surface-sunken)}
html body #chatPage .cx-row .cx-ic:not(#_):not(#_){width:48px;height:48px;font-size:16px}
html body #chatPage .cx-row .cx-ic.k-client:not(#_):not(#_){border-radius:14px}
html body #chatPage .cx-row .cx-ic.k-client img:not(#_){border-radius:14px}
html body #chatPage .cx-t:not(#_):not(#_){gap:3px}
html body #chatPage .cx-nl:not(#_){display:flex;align-items:center;gap:8px;min-width:0}
html body #chatPage .cx-nl b:not(#_):not(#_){font-size:15px;font-weight:600;min-width:0}
html body #chatPage .cx-row.new .cx-nl b:not(#_):not(#_){font-weight:700}
html body #chatPage .cx-t small:not(#_):not(#_){font-size:13.5px;color:var(--ink-subtle)}
html body #chatPage .cx-row.new .cx-t small:not(#_):not(#_){color:var(--ink-muted)}
html body #chatPage .cx-st:not(#_):not(#_){flex:none;display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;border-radius:0;background:none;color:var(--c-ink);font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap}
html body #chatPage .cx-st i:not(#_){width:7px;height:7px;border-radius:50%;background:var(--accent-green);flex:none}
html body #chatPage .cx-st.s-onboarding i:not(#_){background:var(--accent-orange)}
html body #chatPage .cx-st.s-hold i:not(#_){background:var(--ink-subtle)}
html body #chatPage .cx-m:not(#_):not(#_){align-self:center;gap:6px}
html body #chatPage .cx-time:not(#_):not(#_){font-size:12px;color:var(--ink-subtle)}
html body #chatPage .cx-row.new .cx-time:not(#_):not(#_){color:var(--chat-mine);font-weight:700}
html body #chatPage .cx-m i.cx-pill:not(#_):not(#_){min-width:20px;height:20px;line-height:20px;border-radius:999px;font-size:11.5px;padding:0 6px}
html body #chatPage .cx-more:not(#_):not(#_){inset-inline-end:12px;top:50%;margin-top:-15px;background:var(--surface-sunken);box-shadow:none}
html body #chatPage .cx-menu:not(#_):not(#_){inset-inline-end:14px;border-radius:12px;box-shadow:var(--shadow-menu),0 0 0 1px var(--border)}
html body #chatPage .cx-note:not(#_):not(#_){margin:0 18px 10px}
html body #chatPage .cx-pgrp>.mk-none:not(#_),html body #chatPage .cx-pgrp>.cx-padd:not(#_){margin-inline:18px}
html body #chatPage .cx-sh:not(#_):not(#_){padding:12px 18px 4px;font-size:12px;letter-spacing:0;text-transform:none}
html body #chatPage .cx-top.cx-sub:not(#_):not(#_){padding:0 18px 12px}
html body #chatPage .cx-top.cx-sub .h1:not(#_):not(#_){font-size:28px;font-weight:700;letter-spacing:-.02em}

/* ---------- Mentions and Updates ---------- */
html body #chatPage .cx-ments:not(#_):not(#_),html body #chatPage .cx-upds:not(#_):not(#_){padding:0 18px 24px;gap:10px}
html body #chatPage .cx-ments:not(#_):not(#_){gap:0}
html body #chatPage .cx-ment:not(#_):not(#_){border-radius:0;padding:12px 22px 12px 0;border-bottom:1px solid var(--border)}
html[dir="rtl"] body #chatPage .cx-ment:not(#_):not(#_){padding:12px 0 12px 22px}
html body #chatPage .cx-ment:hover:not(#_):not(#_){background:none}
html body #chatPage .cx-ment:hover .cx-stw b:not(#_){text-decoration:underline;text-underline-offset:.2em}
html body #chatPage .cx-ment .cx-ic:not(#_):not(#_){width:40px;height:40px;font-size:13px}
html body #chatPage .cx-ment .cx-udot:not(#_):not(#_){inset-inline-end:4px}
html body #chatPage .cx-upd:not(#_):not(#_){gap:4px;padding:12px 14px;border-radius:12px;box-shadow:none;background:color-mix(in srgb,var(--accent-violet-pastel) 32%,var(--surface))}
html body #chatPage .cx-upd.k-ann:not(#_):not(#_){background:color-mix(in srgb,#ffe08a 38%,var(--surface))}
html body #chatPage .cx-upd.new:not(#_):not(#_){box-shadow:inset 0 0 0 1.5px var(--chat-mine)}
html body #chatPage .cx-uk:not(#_):not(#_){font-size:12px;font-weight:600;color:var(--ink-muted)}
html body #chatPage .cx-uk span:first-child:not(#_):not(#_){font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink-muted)}
html body #chatPage .cx-upd b:not(#_):not(#_){font-size:14.5px}
html body #chatPage .cx-upd p:not(#_):not(#_){font-size:13px;color:var(--ink-muted)}
html body #chatPage .cx-uopen:not(#_):not(#_){display:inline-flex;align-items:center;gap:8px;min-height:30px;height:30px;padding:0 11px;margin-top:6px;border:0;border-radius:8px;font-size:12.5px;font-weight:700;background:color-mix(in srgb,var(--accent-violet-pastel) 38%,var(--surface));color:#2e1a5c;box-shadow:inset 0 0 0 1.5px var(--accent-violet-pastel);text-decoration:none}
html body #chatPage .cx-upd.k-ann .cx-uopen:not(#_):not(#_){background:color-mix(in srgb,#ffe08a 38%,var(--surface));color:#5a4300;box-shadow:inset 0 0 0 1.5px #ffe08a}
html body #chatPage .cx-uopen:not(#_)::after{content:"\2192";font-weight:700}
html[dir="rtl"] body #chatPage .cx-uopen:not(#_)::after{content:"\2190"}
html body #chatPage .cx-nh:not(#_):not(#_){padding:10px 0 0;font-size:14px;letter-spacing:0;text-transform:none;color:var(--c-ink)}
html body #chatPage .cx-readall:not(#_):not(#_){color:var(--c-ink);font-weight:600}

/* ---------- Settings: a heading over each group, each row its own card with › ---------- */
html body #chatPage .cx-sets:not(#_):not(#_){padding:0 18px 24px;gap:10px}
html body #chatPage .cx-set:not(#_):not(#_){display:grid;gap:6px;background:none;border-radius:0;padding:0;box-shadow:none;overflow:visible}
html body #chatPage .cx-set h3:not(#_):not(#_){margin:6px 2px 0;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink-subtle)}
html body #chatPage .cx-srow:not(#_):not(#_),html body #chatPage .cx-me:not(#_):not(#_),html body #chatPage .cx-dev .me-srow:not(#_):not(#_){min-height:0;padding:12px 14px;border-radius:12px;background:var(--c-bg);box-shadow:none}
html body #chatPage .cx-srow:hover:not(#_):not(#_),html body #chatPage .cx-me:hover:not(#_):not(#_){background:var(--surface-hover)}
html body #chatPage .cx-sl:not(#_):not(#_){font-weight:600;font-size:14.5px}
html body #chatPage .cx-sl small:not(#_):not(#_){font-weight:400}
html body #chatPage .cx-set.cx-me:not(#_):not(#_){display:flex;align-items:center;gap:14px}
html body #chatPage .cx-me .cx-ic:not(#_):not(#_){width:44px;height:44px;font-size:15px}
html body #chatPage .cx-me b:not(#_):not(#_){font-size:15px}
html body #chatPage .cx-si:not(#_):not(#_){color:var(--ink-muted)}

/* ---------- the conversation ---------- */
html body #p-ch .cx-head:not(#_):not(#_){padding:10px 16px;margin:0;gap:12px;min-height:62px;box-sizing:border-box;background:var(--surface);border-bottom:1px solid var(--border)}
html body #p-ch .cx-hav:not(#_):not(#_){width:40px;height:40px;font-size:14px;font-weight:700}
html body #p-ch .cx-hav.k-client:not(#_):not(#_){border-radius:12px}
html body #p-ch .cx-hav[style*="--h"]:not(#_):not(#_){background:hsl(var(--h) 70% 86%);color:hsl(var(--h) 45% 26%)}
html body #p-ch .cx-hav.k-group:not(#_):not(#_){background:var(--surface-sunken);color:var(--ink-muted);border-radius:50%}
html body #p-ch .cx-ht b:not(#_):not(#_){font-size:15.5px;font-weight:700}
html body #p-ch .cx-ht small:not(#_):not(#_){font-size:12.5px;color:var(--ink-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #p-ch .cx-tool:not(#_):not(#_){border-radius:10px;color:var(--ink-muted)}
html body #p-ch .cx-tool:hover:not(#_):not(#_){background:var(--surface-hover);color:var(--c-ink)}
html body #p-ch .cx-tool.on:not(#_):not(#_){background:var(--c-ink);color:var(--surface)}
/* Client page →: a pale block that opens where it is */
html body #p-ch .cx-cpage>span:not(#_){display:none}
@media (min-width:501px){
  html body #p-ch .cx-cpage:not(#_):not(#_){width:auto;height:36px;padding:0 12px;margin-inline-start:4px;display:inline-flex;align-items:center;gap:8px;border-radius:8px;font-size:13.5px;font-weight:700;white-space:nowrap;background:color-mix(in srgb,var(--accent-green-pastel) 38%,var(--surface));color:#0b3d24;box-shadow:inset 0 0 0 1.5px var(--accent-green-pastel)}
  html body #p-ch .cx-cpage:hover:not(#_):not(#_){background:var(--accent-green-pastel);color:#0b3d24}
  html body #p-ch .cx-cpage>svg:not(#_){display:none}
  html body #p-ch .cx-cpage>span:not(#_){display:inline}
  html body #p-ch .cx-cpage:not(#_)::after{content:"\2192";font-weight:700}
  html[dir="rtl"] body #p-ch .cx-cpage:not(#_)::after{content:"\2190"}
}
/* the pinned line: a white strip under the header */
html body #p-ch .wk-chat:not(#_):not(#_){gap:0;padding:0;border-radius:0;background:transparent}
html body #p-ch .ch-pins:not(#_):not(#_){margin:0;padding:8px 16px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:var(--surface);font-size:13px}
html body #p-ch .ch-pins summary b:not(#_){white-space:nowrap}
html body #p-ch .ch-pins summary svg:not(#_){width:15px;height:15px;color:var(--accent-rose)}
html body #p-ch .ch-pins summary span:not(#_){color:var(--ink-muted)}
/* the wall and the bubbles */
@media (min-width:861px){html body #p-ch .wk-msgs:not(#_):not(#_):not(#_){padding:18px 6% 18px;gap:12px;background:var(--chat-wall)}}
html body #p-ch .wk-day span:not(#_):not(#_){font-size:12px;font-weight:700;color:var(--ink-muted);border-radius:8px;padding:4px 12px}
html body #p-ch .wk-msg:not(#_):not(#_){box-shadow:0 1px 1px rgba(20,20,40,.08)}
html body #p-ch .wk-msg.kasper:not(#_):not(#_){box-shadow:0 0 0 1.5px var(--accent-violet-pastel),0 1px 1px rgba(20,20,40,.08)}
html body #p-ch .wk-by b:not(#_):not(#_){font-weight:700}
html body #p-ch .ch-po:not(#_):not(#_){border-radius:8px}
/* the box to write in: a round white field with + inside, the microphone and send purple */
html body #p-ch .ch-write:not(#_):not(#_){padding:10px 16px 14px;background:var(--chat-wall)}
html body #p-ch .ch-box textarea.find:not(#_):not(#_):not(#_):not(#_){min-height:46px;padding:12px 18px!important;border-radius:24px!important;background:var(--surface)!important;border:1px solid transparent!important;box-shadow:0 1px 1px rgba(20,20,40,.08)!important}
html body #p-ch .ch-box textarea.find:focus:not(#_):not(#_):not(#_):not(#_){border-color:var(--focus)!important}
html body #p-ch .ch-box .ch-add:not(#_):not(#_){width:42px;height:42px;background:transparent;box-shadow:none;color:var(--ink-muted)}
html body #p-ch .ch-box .ch-add:hover:not(#_):not(#_){background:var(--surface-hover);color:var(--c-ink)}
html body #p-ch .ch-box .ch-barr:not(#_):not(#_){margin-bottom:0}
html body #p-ch .ch-box :is(.ch-mic,.ch-send):not(#_):not(#_){width:46px;height:46px;background:var(--chat-mine)!important;color:var(--chat-mine-ink)!important}
html body #p-ch .ch-box .ch-mic svg:not(#_):not(#_){width:20px;height:20px}

/* ---------- a phone ---------- */
@media (max-width:860px){
  /* inside the Hub: Chats, Mentions, Updates and Settings as a row of words, the open one dark */
  html:not(.chatapp):not(.pop) body #p-ch.on:not(#_){margin-inline:-16px}
  html body #chatPage .cx-tabbar.cx-at-top:not(#_):not(#_){gap:4px;padding:0 0 12px;margin:0;background:none;border:0;border-radius:0}
  html body #chatPage .cx-tabbar.cx-at-top button:not(#_):not(#_){flex:1 1 0;min-width:0;padding:8px 0;border-radius:10px;background:var(--c-bg);color:var(--ink-muted);font-size:12.5px;font-weight:700}
  html body #chatPage .cx-tabbar.cx-at-top button svg:not(#_):not(#_){display:none}
  html body #chatPage .cx-tabbar.cx-at-top button.on:not(#_):not(#_){background:var(--c-ink);color:var(--surface)}
  html body #chatPage .cx-tabbar.cx-at-top i:not(#_):not(#_){top:-6px;inset-inline-start:auto;inset-inline-end:4px}
  html body #chatPage .cx-tabbar.cx-at-top i.cx-tdot:not(#_):not(#_){top:-3px;inset-inline-end:8px}
  html body #chatPage .cx-list.cx-phone:not(#_):not(#_){background:var(--surface)!important;padding:12px 0 0}
  html body #chatPage .cx-list.cx-phone>.cx-tabbar.cx-at-top:not(#_):not(#_){padding-inline:16px}
  html body #chatPage .cx-list.cx-phone .cx-top:not(#_):not(#_){padding-inline:16px}
  html body #chatPage .cx-list.cx-phone .cx-q:not(#_):not(#_){margin-inline:16px}
  html body #chatPage .cx-list.cx-phone .mk-strip:not(#_):not(#_),html body #chatPage .cx-list.cx-phone .cx-online:not(#_):not(#_){padding-inline:16px}
  html body #chatPage .cx-list.cx-phone .cx-rw .cx-row:not(#_):not(#_),html body #chatPage .cx-list.cx-phone .cx-arch:not(#_):not(#_){padding-inline:16px}
  html body #chatPage .cx-list.cx-phone :is(.cx-ments,.cx-upds,.cx-sets):not(#_):not(#_){padding-inline:16px}
  html body #chatPage .cx-list.cx-phone .cx-top.cx-sub:not(#_):not(#_){padding-inline:16px}
  /* + for a new chat: purple, a rounded square */
  html body #chatPage .cx-list.cx-phone .mk-fab:not(#_):not(#_){background:var(--chat-mine);border-radius:18px;padding:0}
  html body #chatPage .cx-list.cx-phone .mk-fab>*:not(#_):not(#_){width:56px;height:56px;border-radius:18px;color:#fff}
  /* the conversation */
  html body #p-ch .cx-head:not(#_):not(#_){padding:calc(env(safe-area-inset-top,0px) + 8px) 10px 8px;gap:6px}
  html body #p-ch .cx-hav:not(#_):not(#_){width:36px;height:36px;font-size:13px}
  html body #p-ch .wk-chat:not(#_):not(#_){padding:0}
  html body #p-ch .wk-msgs:not(#_):not(#_):not(#_){margin:0;padding:14px 10px;background:var(--chat-wall)}
  html body #p-ch .ch-write:not(#_):not(#_){padding:8px 10px max(8px,calc(env(safe-area-inset-bottom,0px) - 6px))}
}
/* an open conversation on a phone has the whole screen: the top bar's bell (Hallmark's phone header) waits behind it, as Kasper does */
@media (max-width:860px){html body:has(#chatPage.has-room) .tb-bell:not(#_){display:none!important}}
/* dark: the pale blocks keep their colour as an edge, the words in the page's ink */
:root[data-theme="dark"] body #chatPage .cx-uopen:not(#_):not(#_),:root[data-theme="dark"] body #chatPage .cx-upd.k-ann .cx-uopen:not(#_):not(#_){background:var(--surface);color:var(--c-ink)}
:root[data-theme="dark"] body #chatPage .cx-upd:not(#_):not(#_){background:color-mix(in srgb,var(--accent-violet-pastel) 16%,var(--surface))}
:root[data-theme="dark"] body #chatPage .cx-upd.k-ann:not(#_):not(#_){background:color-mix(in srgb,#ffe08a 16%,var(--surface))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body #chatPage .cx-uopen:not(#_):not(#_),:root:not([data-theme="light"]) body #chatPage .cx-upd.k-ann .cx-uopen:not(#_):not(#_){background:var(--surface);color:var(--c-ink)}
  :root:not([data-theme="light"]) body #chatPage .cx-upd:not(#_):not(#_){background:color-mix(in srgb,var(--accent-violet-pastel) 16%,var(--surface))}
  :root:not([data-theme="light"]) body #chatPage .cx-upd.k-ann:not(#_):not(#_){background:color-mix(in srgb,#ffe08a 16%,var(--surface))}
}
/* (Client page in words is for a computer and wider phones only; a narrow phone keeps the plain icon) */
@media (min-width:501px){:root[data-theme="dark"] body #p-ch .cx-cpage:not(#_):not(#_),:root[data-theme="dark"] body #p-ch .cx-cpage:hover:not(#_):not(#_){background:color-mix(in srgb,var(--accent-green-pastel) 18%,var(--surface));color:var(--c-ink)}}
@media (min-width:501px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) body #p-ch .cx-cpage:not(#_):not(#_),:root:not([data-theme="light"]) body #p-ch .cx-cpage:hover:not(#_):not(#_){background:color-mix(in srgb,var(--accent-green-pastel) 18%,var(--surface));color:var(--c-ink)}}