/* TaniX Chat, desktop layout (founder 2026-11-04: "like Signal, Teams", then "Make the design very advance").
   Every rule except the last block is under html.cpr, which connect-pro.js sets only in the TaniX Chat desktop
   app above 860px wide. Connect inside TaniX and the phone apps never see it.

   THE IDEA. The palette is the logo's: a midnight frame, signal blue from the robot's glow for whatever is yours
   or selected, and the tassel's gold used sparingly for mentions and the Academy's own people. One thing glows,
   the way the logo does: the message box while you type, and the conversation you have open. Everything else is
   quiet. Headings and names in Space Grotesk (the TaniX face), messages in Inter. Corners stay square
   (square.css, founder 2026-10-06); only bubbles and photos are round.
   Colours are set through Connect's own --cn-* properties, so a chat theme chosen in Theme still wins. */
html.cpr .cn {
  --cn-bg: #111a2e; --cn-panel: #0c1324; --cn-line: rgba(140, 170, 255, 0.1); --cn-mute: #8d9ab8; --cn-act: #2f8bff;
  --cn-bub: #17223b; --cn-mine: #2a74f0;
  --cpr-frame: #070b18; --cpr-gold: #f2b33d; --cpr-text: #e8eefb;
  --cpr-hover: rgba(140, 170, 255, 0.07); --cpr-on: rgba(47, 139, 255, 0.13); --cpr-glow: rgba(47, 139, 255, 0.42);
  --cpr-head: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  grid-template-columns: 92px 312px minmax(0, 1fr);
  color: var(--cpr-text);
}
html.cpr .cn .kx-sky { display: none; }
html.cpr .cn :where(*) { scrollbar-width: thin; scrollbar-color: rgba(140, 170, 255, 0.18) transparent; }
html.cpr .cn ::-webkit-scrollbar { width: 10px; height: 10px; }
html.cpr .cn ::-webkit-scrollbar-thumb { background: rgba(140, 170, 255, 0.16); border: 3px solid transparent; background-clip: padding-box; }
html.cpr .cn ::-webkit-scrollbar-track { background: transparent; }

/* ---------- The slim bar: one frame with the rail ---------- */
html.cpr .as-dm, html.cpr .as-fs, html.cpr .as-pts { display: none !important; }
html.cpr .as-top { background: var(--cpr-frame, #070b18) !important; border-bottom: 1px solid rgba(140, 170, 255, 0.1) !important; box-shadow: none !important; }
html.cpr .as-right .as-bell { background: transparent !important; border: 1px solid rgba(140, 170, 255, 0.16) !important; box-shadow: none !important; }
html.cpr .as-right .as-bell:hover { background: rgba(140, 170, 255, 0.08) !important; }
html.cpr .as-title { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.01em; color: #e8eefb; }

/* ---------- The rail ---------- */
html.cpr .cpr-rail {
  grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 0;
  padding: 10px 0; background: var(--cpr-frame); border-right: 1px solid var(--cn-line); overflow-y: auto; scrollbar-width: none;
}
html.cpr .cpr-rail::-webkit-scrollbar { display: none; }
html.cpr .cpr-top, html.cpr .cpr-bottom { display: flex; flex-direction: column; align-items: center; gap: 2px; }
html.cpr .cpr-bottom { padding-top: 10px; }
html.cpr .cpr-rail .cpr-it {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 68px; min-height: 56px; height: auto; margin: 0; padding: 7px 2px; border: 0; background: transparent; color: #6f7c99;
  font: inherit; font-size: 0; cursor: pointer; box-shadow: none; transition: color 0.15s, background 0.15s;
}
/* font-size 0 hides a label that is a bare text node (Theme); the short label and the badge set their own size. */
html.cpr .cpr-rail .cpr-it[hidden] { display: none; }
html.cpr .cpr-rail .cpr-it:hover { color: var(--cpr-text); background: var(--cpr-hover); }
html.cpr .cpr-rail .cpr-it:focus-visible { outline: 2px solid var(--cn-act); outline-offset: -2px; }
html.cpr .cpr-rail .cpr-it.is-on { color: #fff; }
html.cpr .cpr-rail .cpr-it.is-on svg { color: var(--cn-act) !important; filter: drop-shadow(0 0 6px var(--cpr-glow)); }
html.cpr .cpr-rail .cpr-it.is-on::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--cn-act); box-shadow: 0 0 12px 1px var(--cpr-glow); }
html.cpr .cpr-rail .cpr-it svg { order: 1; width: 22px; height: 22px; flex: none; color: inherit !important; }
html.cpr .cpr-rail .cpr-it svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
html.cpr .cpr-rail .cpr-it svg [fill]:not([fill="none"]) { fill: currentColor !important; }
html.cpr .cpr-rail .cpr-it > span { display: none; }
html.cpr .cpr-rail .cpr-l { order: 2; display: block; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--cpr-head); font-size: 0.68rem; font-weight: 500; line-height: 1.1; }
html.cpr .cpr-rail .cpr-it .cn-badge, html.cpr .cpr-rail .cpr-it em {
  position: absolute; top: 5px; left: 38px; min-width: 17px; height: 17px; padding: 0 5px; margin: 0;
  font-size: 0.64rem; font-style: normal; font-weight: 700; line-height: 17px; text-align: center; color: #1a1203;
  background: var(--cpr-gold); border-radius: 999px; box-shadow: 0 0 0 2px var(--cpr-frame);
}
html.cpr .cpr-rail .cpr-it .cn-badge[hidden], html.cpr .cpr-rail .cpr-it em[hidden], html.cpr .cpr-rail .cpr-it em:empty { display: none; }
html.cpr .cpr-rail .cpr-it[data-tip]:hover::after, html.cpr .cpr-rail .cpr-logo[data-tip]:hover::after {
  content: attr(data-tip); position: fixed; left: 96px; z-index: 90; padding: 6px 10px; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  color: #fff; background: #1a2440; border: 1px solid rgba(140, 170, 255, 0.18); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); pointer-events: none;
}

/* ---------- Monogram tiles (connect-pro.js) ---------- */
html.cpr .cpr-tile {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; margin: 0;
  font-family: var(--cpr-head); font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  color: var(--h); background: color-mix(in srgb, var(--h) 15%, #0c1324); border: 1px solid color-mix(in srgb, var(--h) 40%, transparent);
}
html.cpr .cpr-htile { width: 40px; height: 40px; font-size: 0.88rem; }
html.cpr .cn-item:has(.cpr-tile) .cn-hash, html.cpr .cn-head:has(.cpr-htile) .cn-title .cn-hash { display: none; }

/* ---------- The list of chats ---------- */
html.cpr .cn-side { grid-column: 2; background: var(--cn-panel); }
html.cpr .cn-brand, html.cpr #cnpTools { display: none; }
html.cpr .cpr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 12px; }
html.cpr .cpr-h { margin: 0; font-family: var(--cpr-head); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
html.cpr .cpr-head .cn-actions { display: flex; gap: 6px; padding: 0; margin: 0; flex: none; }
html.cpr .cpr-head .cn-act { flex: none; height: 32px; padding: 0 12px; font-size: 0.8rem; font-weight: 600; color: var(--cpr-text); background: transparent; border: 1px solid var(--cn-line); }
html.cpr .cpr-head .cn-act.is-main { color: #fff; background: var(--cn-act); border-color: transparent; box-shadow: 0 6px 18px -8px var(--cpr-glow); }
html.cpr .cpr-head .cn-act:hover { filter: brightness(1.1); }
html.cpr .cn-find { padding: 0 18px 12px; }
html.cpr .cn-find input {
  height: 36px; padding-left: 36px; font-size: 0.86rem; color: var(--cpr-text); background: rgba(140, 170, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d9ab8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 12px 50% no-repeat;
  border: 1px solid transparent;
}
html.cpr .cn-find input::placeholder { color: #6f7c99; }
html.cpr .cn-find input:focus { border-color: rgba(47, 139, 255, 0.55); box-shadow: 0 0 0 3px rgba(47, 139, 255, 0.14); background-color: rgba(140, 170, 255, 0.08); }
html.cpr .cn-lists { padding: 0 10px 10px; }
/* Section names in sentence case, set like small headings rather than shouted labels. */
html.cpr .cn-h { margin: 16px 8px 6px; font-family: var(--cpr-head); font-size: 0.8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cn-mute); }
html.cpr .cn-item { gap: 11px; min-height: 44px; padding: 6px 10px; border: 0; background: transparent; box-shadow: none; transition: background 0.12s; }
html.cpr .cn-item:hover { background: var(--cpr-hover); }
html.cpr .cn-item.is-on { background: var(--cpr-on); box-shadow: inset 2px 0 0 var(--cn-act), inset 14px 0 18px -14px var(--cpr-glow); }
html.cpr .cn-item .cn-name { font-size: 0.9rem; font-weight: 500; color: #c9d3ea; }
html.cpr .cn-item.is-unread .cn-name, html.cpr .cn-item.is-on .cn-name { font-weight: 600; color: #fff; }
html.cpr .cn-lists .cn-badge { min-width: 22px; height: 20px; padding: 0 7px; font-size: 0.7rem; font-weight: 700; line-height: 20px; color: #fff; background: var(--cn-act); border-radius: 999px; }
html.cpr .cn-lists .cn-badge.is-at { color: #1a1203; background: var(--cpr-gold); }
html.cpr .cn-online { margin: 12px 0; padding: 8px 8px 6px; background: transparent; border: 0; border-top: 1px solid var(--cn-line); border-bottom: 1px solid var(--cn-line); box-shadow: none; }
html.cpr .cn-on-h { font-family: var(--cpr-head); font-size: 0.8rem; }
html.cpr .cn-on-p:hover { background: var(--cpr-hover); }
html.cpr .cn-top-b { background: transparent; border: 1px solid color-mix(in srgb, var(--cpr-gold) 40%, transparent); box-shadow: none; }
html.cpr .cn-dmf-b { border-radius: 0 !important; }
html.cpr .cn-saved { margin: 12px 8px 4px; background: transparent; border: 1px solid var(--cn-line); }
html.cpr .cns { order: 99; margin: 0; padding: 8px 12px; border-top: 1px solid var(--cn-line); background: var(--cn-panel); }
html.cpr .cns-btn { height: 40px; background: transparent; border: 0; }
html.cpr .cns-btn:hover { background: var(--cpr-hover); }
html.cpr .cns-menu { bottom: calc(100% + 4px); top: auto; }

/* ---------- The conversation ---------- */
html.cpr .cn-main { grid-column: 3; background: var(--cn-bg); }
html.cpr .cn-head { gap: 14px; min-height: 66px; padding: 10px 24px; background: #0e1629; border-bottom: 1px solid var(--cn-line); backdrop-filter: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
html.cpr .cn-title { font-family: var(--cpr-head); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
html.cpr .cn-title-w small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--cn-mute); }
html.cpr .cn-head-ic { width: 36px; height: 36px; background: transparent; border: 0; color: var(--cn-mute); }
html.cpr .cn-head-ic:hover { background: var(--cpr-hover); color: #fff; }
html.cpr .cn-head-people { height: 32px; padding: 0 12px; background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.25); color: #b6f0d8; }
html.cpr .cn-scroll { background: var(--cn-art, none), var(--cn-bg); }
html.cpr .cn-msgs { padding-bottom: 8px; }
html.cpr .cn-msg { padding: 3px 32px 1px; gap: 12px; }
html.cpr .cn-msg:not(.is-grouped) { padding-top: 14px; }
html.cpr .cn-msg:hover { background: rgba(140, 170, 255, 0.025); }
html.cpr .cn-msg .cn-av, html.cpr .cn-av-gap { width: 38px; height: 38px; margin-top: 22px; }
html.cpr .cn-body { max-width: min(70%, 700px); }
html.cpr .cn-meta { gap: 8px; margin-bottom: 4px; }
html.cpr .cn-who { font-family: var(--cpr-head); font-size: 0.9rem; font-weight: 600; color: #fff; }
html.cpr .cn-team { padding: 1px 7px; font-size: 0.68rem; font-weight: 700; color: var(--cpr-gold); background: rgba(242, 179, 61, 0.12); border: 1px solid rgba(242, 179, 61, 0.35); }
html.cpr .cn-htime { font-size: 0.72rem; color: #6f7c99; }
html.cpr .cn-bubble { padding: 10px 14px 7px; background: var(--cn-bub); border: 1px solid rgba(140, 170, 255, 0.08); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
html.cpr .cn-msg.is-mine .cn-bubble { background: var(--cn-mine); border-color: transparent; box-shadow: 0 8px 24px -14px var(--cpr-glow); }
html.cpr .cn-msg.is-mention .cn-bubble { box-shadow: 0 0 0 1px var(--cpr-gold), 0 0 18px -6px rgba(242, 179, 61, 0.5); }
html.cpr .cn-text { font-size: 0.95rem; line-height: 1.58; color: #e2e9f8; }
html.cpr .cn-msg.is-mine .cn-text { color: #fff; }
html.cpr .cn-text a { color: #8cc4ff; }
html.cpr .cn-stamp { opacity: 0.75; }
html.cpr .cn-quote { border-left: 2px solid var(--cn-act); background: rgba(47, 139, 255, 0.08); }
html.cpr .lp-card { border-left-color: var(--cn-act) !important; background: #0f182c; }
/* Days: a quiet rule with the date in the middle. */
html.cpr .cn-day { display: flex; align-items: center; gap: 14px; margin: 22px 32px 6px; background: none; }
html.cpr .cn-day::before, html.cpr .cn-day::after { content: ""; flex: 1; height: 1px; background: var(--cn-line); }
html.cpr .cn-day span { padding: 3px 12px; font-family: var(--cpr-head); font-size: 0.74rem; font-weight: 600; color: var(--cn-mute); background: var(--cn-bg); border: 1px solid var(--cn-line); }
/* The hover bar for reactions and replies floats like a small toolbar. */
html.cpr .cn-tools { background: #0c1324; border: 1px solid rgba(140, 170, 255, 0.16); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6); }
html.cpr .cn-jump { background: var(--cn-act); color: #fff; box-shadow: 0 10px 28px -8px var(--cpr-glow); }

/* ---------- The message box: the one thing that glows ---------- */
html.cpr .cn-compose { padding: 12px 32px 20px; background: var(--cn-bg); border-top: 0; }
html.cpr .cn-box, html.cpr .cn-toolbar { background: #0c1324; border: 1px solid rgba(140, 170, 255, 0.14); transition: border-color 0.2s, box-shadow 0.2s; }
html.cpr .cn-box { border-bottom-color: rgba(140, 170, 255, 0.06); box-shadow: none; }
html.cpr .cn-toolbar { margin: 0; padding: 5px 8px; border-top: 0; }
html.cpr .cn-compose:focus-within .cn-box, html.cpr .cn-compose:focus-within .cn-toolbar { border-color: rgba(47, 139, 255, 0.6); }
html.cpr .cn-compose:focus-within .cn-box { box-shadow: 0 -10px 34px -16px var(--cpr-glow), -10px 0 30px -22px var(--cpr-glow), 10px 0 30px -22px var(--cpr-glow); }
html.cpr .cn-compose:focus-within .cn-toolbar { box-shadow: 0 14px 34px -18px var(--cpr-glow); }
html.cpr .cn-box textarea { font-size: 0.95rem; color: #fff; }
html.cpr .cn-tb { width: 30px; height: 28px; color: #6f7c99; background: transparent; }
html.cpr .cn-tb:hover { color: #fff; background: var(--cpr-hover); }
html.cpr .cn-hint { font-size: 0.72rem; color: #5f6b86; }
html.cpr .cn-send { background: var(--cn-act); color: #fff; }
html.cpr .cn-compose:focus-within .cn-send { box-shadow: 0 0 18px -2px var(--cpr-glow); }

/* ---------- Panels that slide over the conversation (Calls, Rooms, Questions...) ---------- */
html.cpr .cn-sp { background: #0c1324; border-left: 1px solid rgba(140, 170, 255, 0.14); box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.7); }

@media (prefers-reduced-motion: reduce) {
  html.cpr .cpr-rail .cpr-it, html.cpr .cn-item, html.cpr .cn-box, html.cpr .cn-toolbar { transition: none; }
}

/* The TaniX Chat logo beside the name in the chat app's slim bar (founder 2026-11-04: "Use this as the logo
   instead"). html.as-solo, not html.cpr: every TaniX Chat window shows it, the phone apps and narrow windows too.
   Connect inside TaniX is never as-solo, so it keeps its own title. */
html.as-solo .as-title { display: flex; align-items: center; gap: 10px; }
html.as-solo .as-title::before { content: ""; width: 30px; height: 30px; flex: none; background: url(/assets/tanix-chat-logo-96.webp) center / cover no-repeat; }

/* =====================================================================================================
   Cleanup round (founder 2026-11-04): the top bar folds into the rail, the list holds only conversations,
   the message box is compact, the header buttons are named and grouped with Details, link cards are capped,
   and empty lists say what to do. Every element named here is created or moved by connect-pro.js.
   ===================================================================================================== */
/* The top bar is gone; its bell and account button sit at the foot of the rail, the logo at its head. */
html.cpr.taa-app { --as-top: 0px; }
html.cpr .as-top { display: none !important; }
html.cpr .cn { top: 0; }
html.cpr .cpr-rail { padding-top: 0; }
html.cpr .cpr-logo { display: grid; place-items: center; width: 100%; height: 96px; flex: none; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--cn-line); margin-bottom: 8px; cursor: pointer; position: relative; }
html.cpr .cpr-logo:hover img { transform: rotate(-8deg); }
html.cpr .cpr-logo img { transition: transform 0.2s ease; }
html.cpr .cpr-logo:focus-visible { outline: 2px solid #2F8BFF; outline-offset: -2px; }
html.cpr .cpr-logo img { width: 76px; height: 76px; display: block; }
html.cpr .cpr-rail { justify-content: flex-start; }
html.cpr .cpr-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; }
html.cpr .cpr-me { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 10px 0 4px; margin-top: 8px; border-top: 1px solid var(--cn-line); }
html.cpr .cpr-me .cpr-me-b {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  background: transparent !important; border: 0 !important; box-shadow: none !important; color: #8d9ab8;
}
html.cpr .cpr-me .cpr-me-b:hover { background: var(--cpr-hover) !important; color: #fff; }
html.cpr .cpr-me .cpr-me-b svg { width: 22px; height: 22px; }
html.cpr .cpr-me .as-badge { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 0.62rem; line-height: 17px; color: #fff; background: #e5484d; box-shadow: 0 0 0 2px var(--cpr-frame); }
html.cpr .cpr-me .as-solo-av { width: 32px; height: 32px; font-size: 0.74rem; box-shadow: 0 0 0 2px rgba(47, 139, 255, 0.5); }
/* The notifications panel opens beside the rail, from the bottom, where the bell now is. */
html.cpr .as-np { top: auto; right: auto; left: 100px; bottom: 12px; max-height: calc(100vh - 24px); background: #0c1324; border: 1px solid rgba(140, 170, 255, 0.16); }

/* People: Online now and Top builders, in a fly-out from the rail. */
html.cpr .cpr-rail .cpr-it em.is-ok { color: #052e1f; background: #34d399; }
html.cpr .cpr-fly {
  position: fixed; z-index: 1160; left: 100px; width: 300px; max-height: calc(100vh - 16px); overflow: auto;
  background: #0c1324; border: 1px solid rgba(140, 170, 255, 0.16); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.8);
}
html.cpr .cpr-fly[hidden] { display: none; }
html.cpr .cpr-fly .cn-online { margin: 0; padding: 12px; border: 0; }

/* Direct messages: one filter button in the heading; the chips and Mark all read live in its menu. */
html.cpr .cn-dmf { display: none !important; }
html.cpr .cn-h-row { display: flex; align-items: center; gap: 4px; }
html.cpr .cn-h-row > span:first-child { flex: 1; }
html.cpr .cpr-filt { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 7px; margin: -4px 0; border: 0; background: transparent; color: var(--cn-mute); font: inherit; font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
html.cpr .cpr-filt svg { width: 15px; height: 15px; }
html.cpr .cpr-filt:hover { background: var(--cpr-hover); color: #fff; }
html.cpr .cpr-filt.is-set { color: var(--cn-act); background: rgba(47, 139, 255, 0.12); }
html.cpr .cpr-filt span:empty { display: none; }

/* Menus (filter, "+"). */
html.cpr .cpr-menu {
  position: fixed; z-index: 1200; min-width: 230px; padding: 6px; background: #0f1830; border: 1px solid rgba(140, 170, 255, 0.18);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85); font-family: 'Inter', sans-serif;
}
html.cpr .cpr-menu-it { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; background: transparent; color: #dbe3f5; font: inherit; font-size: 0.86rem; text-align: left; cursor: pointer; }
html.cpr .cpr-menu-it svg { width: 17px; height: 17px; flex: none; color: #8d9ab8; }
html.cpr .cpr-menu-it span { flex: 1; }
html.cpr .cpr-menu-it em { font-style: normal; font-size: 0.74rem; color: var(--cn-mute); }
html.cpr .cpr-menu-it:hover, html.cpr .cpr-menu-it:focus-visible { background: rgba(140, 170, 255, 0.08); color: #fff; outline: none; }
html.cpr .cpr-menu-it.is-on { color: #fff; box-shadow: inset 2px 0 0 var(--cn-act); }
html.cpr .cpr-menu-it[disabled] { opacity: 0.45; cursor: default; }
html.cpr .cpr-menu-sep { display: block; height: 1px; margin: 5px 4px; background: rgba(140, 170, 255, 0.12); }

/* The message box: one line with "+", "Aa", emoji, voice and send. The formatting row shows on "Aa". */
html.cpr:not(.cpr-fmt) .cn-toolbar { display: none; }
html.cpr .cn-toolbar .cn-hint, html.cpr #cnTools > :nth-child(n+6) { display: none; }
html.cpr:not(.cpr-fmt) .cn-box { border-bottom-color: rgba(140, 170, 255, 0.14); }
html.cpr:not(.cpr-fmt) .cn-compose:focus-within .cn-box { border-color: rgba(47, 139, 255, 0.6); box-shadow: 0 0 0 1px rgba(47, 139, 255, 0.25), 0 12px 40px -14px var(--cpr-glow); }
html.cpr .cpr-cb { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; color: #8d9ab8; }
html.cpr .cpr-cb svg { width: 20px; height: 20px; }
html.cpr .cpr-cb[aria-pressed="true"] { color: var(--cn-act); background: rgba(47, 139, 255, 0.12); }
html.cpr .cpr-cb[data-tip]:hover::after, html.cpr .cpr-filt[data-tip]:hover::after, html.cpr #cnHead > [data-tip]:hover::after {
  content: attr(data-tip); position: absolute; z-index: 60; padding: 5px 9px; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  color: #fff; background: #1a2440; border: 1px solid rgba(140, 170, 255, 0.18); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); pointer-events: none;
}
html.cpr .cpr-cb[data-tip]:hover::after { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
html.cpr .cpr-filt[data-tip]:hover::after { top: calc(100% + 6px); right: 0; }

/* The header: Connect rebuilds it for every conversation, so its icon buttons are joined into one group where
   they stand (each named on hover from its own title), with Details at the end. */
html.cpr #cnHead { overflow: visible; }
html.cpr #cnHead > .cn-head-ic { position: relative; width: 38px; height: 36px; margin: 0; border: 1px solid var(--cn-line); border-left-width: 0; background: rgba(140, 170, 255, 0.03); }
html.cpr #cnHead > .cn-head-people + .cn-head-ic, html.cpr #cnHead > .cn-title-w + .cn-head-ic { margin-left: 6px; border-left-width: 1px; }
html.cpr #cnHead > .cn-head-ic:hover { background: rgba(140, 170, 255, 0.09); }
html.cpr #cnHead > [data-tip]:hover::after { top: calc(100% + 8px); right: 0; }
html.cpr #cnHead > .cpr-info[aria-pressed="true"] { color: var(--cn-act); background: rgba(47, 139, 255, 0.12); }
html.cpr .cpr-info svg { width: 19px; height: 19px; }
html.cpr .cpr-stash { display: none !important; }
html.cpr .cpr-rail .cpr-it em:not(:empty) { min-width: 0; }

/* Details: a panel on the right of the conversation. */
html.cpr .cn-main { position: relative; }
html.cpr .cpr-det {
  position: absolute; z-index: 40; top: 67px; right: 0; bottom: 0; width: 340px; display: flex; flex-direction: column;
  background: #0c1324; border-left: 1px solid rgba(140, 170, 255, 0.14); box-shadow: -24px 0 60px -24px rgba(0, 0, 0, 0.75);
}
html.cpr .cpr-det[hidden] { display: none; }
html.cpr .cpr-det-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--cn-line); }
html.cpr .cpr-det-h strong { font-family: var(--cpr-head); font-size: 1rem; font-weight: 600; }
html.cpr .cpr-det-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: var(--cn-mute); cursor: pointer; }
html.cpr .cpr-det-x:hover { background: var(--cpr-hover); color: #fff; }
html.cpr .cpr-det-x svg { width: 18px; height: 18px; }
html.cpr .cpr-det-b { flex: 1; overflow: auto; padding: 16px; }
html.cpr .cpr-det-top { display: flex; gap: 12px; align-items: flex-start; }
html.cpr .cpr-dtile { width: 48px; height: 48px; font-size: 1rem; }
html.cpr .cpr-det-top h3 { margin: 2px 0 4px; font-family: var(--cpr-head); font-size: 1.05rem; font-weight: 600; color: #fff; }
html.cpr .cpr-det-top p { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--cn-mute); }
html.cpr .cpr-det-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0 6px; }
html.cpr .cpr-det-a { height: 34px; border: 1px solid var(--cn-line); background: rgba(140, 170, 255, 0.04); color: #dbe3f5; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
html.cpr .cpr-det-a:hover { border-color: rgba(47, 139, 255, 0.5); color: #fff; }
html.cpr .cpr-det-s { margin-top: 18px; }
html.cpr .cpr-det-s h4 { margin: 0 0 8px; font-family: var(--cpr-head); font-size: 0.84rem; font-weight: 600; color: var(--cn-mute); }
html.cpr .cpr-det-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
html.cpr .cpr-det-ph { padding: 0; border: 0; aspect-ratio: 1; overflow: hidden; background: #111a2e; cursor: pointer; }
html.cpr .cpr-det-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.cpr .cpr-det-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; color: inherit; text-decoration: none; }
html.cpr .cpr-det-row:hover { background: var(--cpr-hover); }
html.cpr .cpr-det-row svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--cn-act); }
html.cpr .cpr-det-row span { display: flex; flex-direction: column; min-width: 0; }
html.cpr .cpr-det-row b { font-size: 0.84rem; font-weight: 600; color: #e2e9f8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cpr .cpr-det-row small { font-size: 0.74rem; color: var(--cn-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cpr .cpr-det-none, html.cpr .cpr-det-note { margin: 0; font-size: 0.8rem; color: #6f7c99; }
html.cpr .cpr-det-note { margin-top: 20px; }

/* Link previews stay a card, not half the screen. */
html.cpr .lp-card { max-width: 380px; }
html.cpr .lp-pic { max-height: 150px; overflow: hidden; }
html.cpr .lp-pic img { width: 100%; height: 150px; object-fit: cover; }

/* Empty lists say what to do, with the button that does it. */
html.cpr .cpr-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 4px 8px 6px; font-size: 0.82rem; color: var(--cn-mute); }
html.cpr .cpr-empty-b { height: 30px; padding: 0 12px; border: 1px solid rgba(47, 139, 255, 0.5); background: rgba(47, 139, 255, 0.08); color: #cfe0ff; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
html.cpr .cpr-empty-b:hover { background: rgba(47, 139, 255, 0.16); color: #fff; }
html.cpr #cnHead > .cn-head-ic + .cn-head-ic { margin-left: -14px; }

/* =====================================================================================================
   Features round (founder 2026-11-04): quick switcher, code blocks, drafts, website cards, compact view,
   light theme. Everything is created by connect-pro.js; all of it is under html.cpr.
   ===================================================================================================== */
/* ---- Quick switcher (Ctrl+K) ---- */
html.cpr .cpr-qs { position: fixed; inset: 0; z-index: 1300; display: flex; justify-content: center; align-items: flex-start; padding-top: 14vh; background: rgba(3, 6, 14, 0.55); }
html.cpr .cpr-qs-box { width: min(600px, 92vw); background: #0f1830; border: 1px solid rgba(140, 170, 255, 0.2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(47, 139, 255, 0.15); font-family: 'Inter', sans-serif; }
html.cpr .cpr-qs-box input { width: 100%; height: 56px; padding: 0 20px; border: 0; border-bottom: 1px solid rgba(140, 170, 255, 0.14); background: transparent; color: #fff; font: inherit; font-size: 1.05rem; outline: none; }
html.cpr .cpr-qs-box input::placeholder { color: #6f7c99; }
html.cpr .cpr-qs-l { max-height: 52vh; overflow: auto; padding: 6px; }
html.cpr .cpr-qs-it { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 7px 12px; border: 0; background: transparent; color: #dbe3f5; font: inherit; text-align: left; cursor: pointer; }
html.cpr .cpr-qs-it.is-on { background: rgba(47, 139, 255, 0.14); box-shadow: inset 2px 0 0 var(--cn-act, #2f8bff); color: #fff; }
html.cpr .cpr-qs-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html.cpr .cpr-qs-tx b { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; }
html.cpr .cpr-qs-tx small { font-size: 0.76rem; color: #8d9ab8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cpr .cpr-qs-it em { font-style: normal; font-size: 0.7rem; font-weight: 700; min-width: 22px; height: 20px; line-height: 20px; padding: 0 7px; text-align: center; color: #fff; background: #2f8bff; border-radius: 999px; }
html.cpr .cpr-qs-it .cpr-tile.is-dm { border-radius: 50% !important; }
html.cpr .cpr-qs-none { margin: 0; padding: 18px 14px; color: #8d9ab8; font-size: 0.9rem; }
html.cpr .cpr-qs-k { margin: 0; padding: 9px 14px; border-top: 1px solid rgba(140, 170, 255, 0.1); font-size: 0.74rem; color: #6f7c99; }
html.cpr .cpr-qs-k kbd { display: inline-block; min-width: 20px; padding: 1px 5px; margin: 0 2px; font: inherit; font-size: 0.7rem; text-align: center; color: #c9d3ea; background: rgba(140, 170, 255, 0.1); border: 1px solid rgba(140, 170, 255, 0.18); }

/* ---- Code blocks ---- */
html.cpr pre.cpr-code { padding: 0 !important; background: #0a1020 !important; border: 1px solid rgba(140, 170, 255, 0.14); overflow: hidden; }
html.cpr pre.cpr-code > code { display: block; padding: 12px 14px; overflow-x: auto; font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; font-size: 0.84rem; line-height: 1.6; color: #dbe3f5; white-space: pre; }
html.cpr .cpr-code-bar { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; background: rgba(140, 170, 255, 0.06); border-bottom: 1px solid rgba(140, 170, 255, 0.1); font-family: 'Inter', sans-serif; white-space: normal; }
html.cpr .cpr-code-lang { flex: 1; font-size: 0.72rem; font-weight: 700; color: #8d9ab8; }
html.cpr .cpr-code-b { height: 26px; padding: 0 10px; border: 1px solid rgba(140, 170, 255, 0.18); background: transparent; color: #c9d3ea; font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
html.cpr .cpr-code-b:hover { color: #fff; border-color: rgba(140, 170, 255, 0.4); }
html.cpr .cpr-code-b.is-go { color: #fff; background: #2f8bff; border-color: transparent; }
html.cpr .cpr-code-b.is-go:hover { filter: brightness(1.1); }
html.cpr .cpr-code-b.is-done { color: #052e1f; background: #34d399; border-color: transparent; }
html.cpr .cpr-tc { color: #6b7a99; font-style: italic; }
html.cpr .cpr-ts { color: #9fe0a8; }
html.cpr .cpr-tk { color: #8fb4ff; }
html.cpr .cpr-tn { color: #f2b33d; }

/* ---- Drafts on channel rows ---- */
html.cpr .cpr-draft { margin-left: auto; padding: 1px 7px; font-style: normal; font-size: 0.68rem; font-weight: 700; color: #f2b33d; background: rgba(242, 179, 61, 0.12); border: 1px solid rgba(242, 179, 61, 0.3); }
html.cpr .cn-draft b { color: #f2b33d; }

/* ---- Website cards: a clear way in ---- */
html.cpr .lp-card[href*=".tanix.app"]::after { content: "Visit website"; display: inline-flex; align-items: center; height: 28px; margin: 0 12px 12px; padding: 0 12px; font-size: 0.78rem; font-weight: 700; color: #fff; background: var(--cn-act, #2f8bff); }

/* ---- Compact view ---- */
html.cpr.cpr-compact .cn-msg { padding: 1px 28px 0; gap: 10px; }
html.cpr.cpr-compact .cn-msg:not(.is-grouped) { padding-top: 8px; }
html.cpr.cpr-compact .cn-msg .cn-av, html.cpr.cpr-compact .cn-av-gap { width: 30px; height: 30px; margin-top: 18px; }
html.cpr.cpr-compact .cn-bubble { padding: 6px 11px 4px; }
html.cpr.cpr-compact .cn-text { font-size: 0.89rem; line-height: 1.45; }
html.cpr.cpr-compact .cn-meta { margin-bottom: 2px; }
html.cpr.cpr-compact .cn-item { min-height: 36px; padding: 4px 10px; }
html.cpr.cpr-compact .cn-lists .cpr-tile { width: 24px; height: 24px; font-size: 0.62rem; }
html.cpr.cpr-compact .cn-day { margin: 14px 28px 4px; }

/* ---- Light theme: the same structure on paper white, with the logo's blue and gold kept ---- */
html.cpr.cpr-light .cn {
  --cn-bg: #f4f6fb; --cn-panel: #ffffff; --cn-line: rgba(20, 33, 61, 0.1); --cn-mute: #5b6785; --cn-act: #1f6feb;
  --cn-bub: #ffffff; --cn-mine: #2563eb; --cpr-frame: #eaeef6; --cpr-text: #14213d; --cpr-gold: #c98a12;
  --cpr-hover: rgba(20, 33, 61, 0.05); --cpr-on: rgba(31, 111, 235, 0.1); --cpr-glow: rgba(31, 111, 235, 0.28);
  color: #14213d;
}
html.cpr.cpr-light .cpr-rail { background: #eaeef6; }
html.cpr.cpr-light .cpr-rail .cpr-it { color: #5b6785; }
html.cpr.cpr-light .cpr-rail .cpr-it:hover, html.cpr.cpr-light .cpr-rail .cpr-it.is-on { color: #14213d; }
html.cpr.cpr-light .cpr-me .cpr-me-b { color: #5b6785; }
html.cpr.cpr-light .cpr-h, html.cpr.cpr-light .cn-title, html.cpr.cpr-light .cn-who, html.cpr.cpr-light .cpr-det-top h3 { color: #14213d; }
html.cpr.cpr-light .cn-item .cn-name { color: #2c3a58; }
html.cpr.cpr-light .cn-item.is-unread .cn-name, html.cpr.cpr-light .cn-item.is-on .cn-name { color: #0b1630; }
html.cpr.cpr-light .cn-text { color: #1c2742; }
html.cpr.cpr-light .cn-msg.is-mine .cn-text, html.cpr.cpr-light .cn-msg.is-mine .cn-text a { color: #fff; }
html.cpr.cpr-light .cn-text a { color: #1f5fd6; }
html.cpr.cpr-light .cn-bubble { border-color: rgba(20, 33, 61, 0.1); box-shadow: 0 1px 2px rgba(20, 33, 61, 0.06); }
html.cpr.cpr-light .cn-head { background: #ffffff; box-shadow: none; }
html.cpr.cpr-light .cn-head-ic, html.cpr.cpr-light .cpr-filt { color: #5b6785; }
html.cpr.cpr-light #cnHead > .cn-head-ic { background: #fff; }
html.cpr.cpr-light #cnHead > .cn-head-ic:hover, html.cpr.cpr-light .cn-head-ic:hover, html.cpr.cpr-light .cpr-filt:hover { color: #14213d; background: rgba(20, 33, 61, 0.05); }
html.cpr.cpr-light .cn-head-people { color: #0f6b47; background: rgba(16, 150, 100, 0.08); }
html.cpr.cpr-light .cn-find input { color: #14213d; background-color: rgba(20, 33, 61, 0.05); }
html.cpr.cpr-light .cn-find input::placeholder { color: #7c87a3; }
html.cpr.cpr-light .cn-day span { color: #5b6785; }
html.cpr.cpr-light .cn-box, html.cpr.cpr-light .cn-toolbar { background: #ffffff; border-color: rgba(20, 33, 61, 0.14); }
html.cpr.cpr-light .cn-box textarea { color: #14213d; }
html.cpr.cpr-light .cn-tb, html.cpr.cpr-light .cpr-cb { color: #5b6785; }
html.cpr.cpr-light .cn-tb:hover { color: #14213d; background: rgba(20, 33, 61, 0.05); }
html.cpr.cpr-light .lp-card { background: #f7f9fd; }
html.cpr.cpr-light .lp-title { color: #14213d; }
html.cpr.cpr-light .cn-quote { background: rgba(31, 111, 235, 0.06); }
html.cpr.cpr-light .cn-tools { background: #ffffff; border-color: rgba(20, 33, 61, 0.14); box-shadow: 0 10px 24px -12px rgba(20, 33, 61, 0.35); }
html.cpr.cpr-light .cn-team { color: #9a6408; background: rgba(201, 138, 18, 0.1); border-color: rgba(201, 138, 18, 0.35); }
html.cpr.cpr-light .cpr-head .cn-act { color: #14213d; }
html.cpr.cpr-light .cpr-head .cn-act.is-main { color: #fff; }
html.cpr.cpr-light .cpr-empty-b { color: #1f5fd6; background: rgba(31, 111, 235, 0.06); }
html.cpr.cpr-light .cns-btn, html.cpr.cpr-light .cn-on-p span, html.cpr.cpr-light .cn-saved { color: #14213d; }
html.cpr.cpr-light .cpr-menu, html.cpr.cpr-light .cpr-fly, html.cpr.cpr-light .cpr-det { background: #ffffff; border-color: rgba(20, 33, 61, 0.14); box-shadow: 0 24px 60px -24px rgba(20, 33, 61, 0.35); }
html.cpr.cpr-light .cpr-menu-it { color: #2c3a58; }
html.cpr.cpr-light .cpr-menu-it:hover, html.cpr.cpr-light .cpr-menu-it:focus-visible { color: #0b1630; background: rgba(20, 33, 61, 0.05); }
html.cpr.cpr-light .cpr-det-row b { color: #1c2742; }
html.cpr.cpr-light .cpr-det-a { color: #14213d; background: #f4f6fb; }
html.cpr.cpr-light .cpr-tile { background: color-mix(in srgb, var(--h) 12%, #ffffff); color: color-mix(in srgb, var(--h) 75%, #0b1630); }
html.cpr.cpr-light .cn-scroll, html.cpr.cpr-light #cnScroll { background: var(--cn-art, none), #f4f6fb; }

/* Country flags (connect-flags.js): a dark outline on the light theme. */
html.cpr.cpr-light img.cn-flag { box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.16); }
@media (prefers-reduced-motion: reduce) { html.cpr .cpr-logo img { transition: none; } }
/* Light theme: the pieces other modules paint dark (reactions, status, voice button, status menu). */
html.cpr.cpr-light .cn-rchip { color: #2c3a58; background: #ffffff; border-color: rgba(20, 33, 61, 0.16); box-shadow: 0 1px 3px rgba(20, 33, 61, 0.12); }
html.cpr.cpr-light .cn-rchip.is-me { color: #0b3a8a; background: #e6efff; border-color: #2F8BFF; }
html.cpr.cpr-light .cns-btn, html.cpr.cpr-light .cns-btn * { color: #14213d; }
html.cpr.cpr-light .cns-btn { background: rgba(20, 33, 61, 0.03); border-color: rgba(20, 33, 61, 0.12); }
html.cpr.cpr-light .cns-txt small { color: #5b6785; }
html.cpr.cpr-light .cns-menu { background: #ffffff; border-color: rgba(20, 33, 61, 0.14); box-shadow: 0 18px 40px -10px rgba(20, 33, 61, 0.3); }
html.cpr.cpr-light .cns-opt { color: #14213d; }
html.cpr.cpr-light .cv-micbtn { color: #3a4766; background: #f4f6fb; border-color: rgba(20, 33, 61, 0.16); }

/* ---------- Channel rows: last message and time (connect-pro.js rows(), founder 2026-11-04) ---------- */
html.cpr .cn-item:has(.cpr-ch) { min-height: 54px; }
html.cpr .cn-item .cpr-ch { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; text-align: left; }
html.cpr .cn-item .cpr-ch .cn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cpr .cn-item .cpr-pv { font-size: 0.76rem; line-height: 1.3; color: #7d89a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cpr .cn-item .cpr-pv:empty { display: none; }
html.cpr .cn-item.is-unread .cpr-pv { color: #b3bed9; }
html.cpr .cn-item .cpr-pv b { font-weight: 600; color: var(--cpr-gold, #f2b33d); }
html.cpr .cn-item .cpr-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; flex: none; margin-left: auto; min-height: 36px; }
html.cpr .cn-item .cpr-side .cn-badge { margin: 0; }
html.cpr .cn-item .cpr-side .cn-quiet-ic { margin: 0; }
html.cpr .cn-item .cpr-at { font-size: 0.7rem; font-weight: 500; color: #7d89a8; white-space: nowrap; }
html.cpr .cn-item .cpr-at:empty { display: none; }
html.cpr .cn-item.is-unread .cpr-at { color: #2F8BFF; }
html.cpr.cpr-compact .cn-item:has(.cpr-ch) { min-height: 36px; }
html.cpr.cpr-compact .cn-item .cpr-pv { display: none; }
html.cpr.cpr-compact .cn-item .cpr-side { flex-direction: row; align-items: center; gap: 8px; min-height: 0; }
html.cpr.cpr-light .cn-item .cpr-pv, html.cpr.cpr-light .cn-item .cpr-at { color: #6a7592; }
html.cpr.cpr-light .cn-item.is-unread .cpr-pv { color: #2c3a58; }
html.cpr.cpr-light .cn-item.is-unread .cpr-at { color: #1f5fd6; }
html.cpr.cpr-light .cn-item .cpr-pv b { color: #a86a00; }

/* The header's hover labels (founder 2026-11-04: "the buttons are hidden under the containers covering them").
   #cnHead and #cnScroll are both position:relative with z-index 1, and the message list comes later, so it was
   painted over the labels that hang below the header. While the pointer or keyboard focus is in the header, the
   header goes above it. Only then, so nothing else in the chat moves up a layer. */
html.cpr #cnHead:hover, html.cpr #cnHead:focus-within { z-index: 30; }