/* Academy Connect (connect.html + connect-app.js): the chat fills the app's content area.
   Left: channels, Online now, direct messages. Right: the conversation and the composer.
   Phones show one side at a time (html.cn-in = a conversation is open). */
.cn-page #taaBanner, .cn-page .site-banner { display: none !important; }
html.taa-app body.cn-page.as-on { overflow: hidden; }
.cn {
  --cn-bg: #070d1c; --cn-panel: #0a1226; --cn-line: rgba(255, 255, 255, 0.08); --cn-mute: #8b93ad; --cn-act: #38b6ff; --cn-ok: #34d399;
  position: fixed; top: var(--as-top, 56px); left: var(--as-w, 252px); right: 0; bottom: 0; margin: 0; padding: 0; max-width: none;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); transition: left 0.2s ease; color: #e8ecf8; font-family: var(--font-body, Inter, sans-serif); background: var(--cn-bg);
}
.cn-side { display: flex; flex-direction: column; min-height: 0; background: var(--cn-panel); border-right: 1px solid var(--cn-line); }
.cn-brand { display: flex; align-items: center; gap: 11px; padding: 16px 16px 12px; }
.cn-logo { display: block; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(135deg, #1f7bff, #38b6ff) center / 20px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"), linear-gradient(135deg, #1f7bff, #38b6ff); }
.cn-brand span { display: flex; flex-direction: column; line-height: 1.25; }
/* The Connect logo (2026-10-11): an inline SVG in connect.html replaces the old flat chat icon; the online dot breathes. */
.cn-brand .cn-logo { width: 42px; height: 42px; border-radius: 13px; background: none; filter: drop-shadow(0 6px 14px rgba(31, 107, 255, 0.35)); }
.cn-logo svg { display: block; width: 100%; height: 100%; }
.cn-logo-dot { animation: cnLogoDot 2.8s ease-in-out infinite; transform-origin: 36.5px 11.5px; }
@keyframes cnLogoDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.75; transform: scale(0.82); } }
@media (prefers-reduced-motion: reduce) { .cn-logo-dot { animation: none; } }
.cn-brand strong { letter-spacing: -0.01em; }
.cn-wm { font-style: normal; background: linear-gradient(90deg, #4cc3ff, #8b7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cn-brand strong { font-family: var(--font-head, inherit); font-size: 1rem; }
.cn-brand small { font-size: 0.74rem; color: var(--cn-mute); }
.cn-actions { display: flex; gap: 8px; padding: 0 14px 10px; }
.cn-act { flex: 1; height: 36px; border-radius: 9px; font: inherit; font-size: 0.84rem; font-weight: 600; color: #e8ecf8; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--cn-line); cursor: pointer; }
.cn-act.is-main { color: #fff; border-color: transparent; background: linear-gradient(135deg, #1f7bff, #38b6ff); }
.cn-act[hidden] { display: none; }
.cn-find { padding: 0 14px 8px; }
.cn-find input, .cn-in { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; border-radius: 9px; font: inherit; font-size: 0.86rem; color: #fff; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--cn-line); }
textarea.cn-in { height: auto; padding: 10px 12px; resize: vertical; }
.cn-find input:focus, .cn-in:focus { outline: none; border-color: var(--cn-act); box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.18); }
.cn-lists { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
.cn-h { margin: 12px 8px 6px; font-size: 0.72rem; font-weight: 700; color: var(--cn-mute); }
.cn-h-row { display: flex; align-items: center; justify-content: space-between; }
.cn-plus { width: 36px; height: 36px; margin: -6px -6px -6px 0; padding: 0; border: 0; border-radius: 8px; font-size: 1.3rem; line-height: 1; color: var(--cn-mute); background: transparent; cursor: pointer; }
.cn-plus:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.cn-list { display: flex; flex-direction: column; gap: 2px; }
.cn-item, .cn-dm { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: 0.88rem; text-align: left; color: #c3cae0; background: transparent; cursor: pointer; }
.cn-item:hover, .cn-dm:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.cn-item.is-on, .cn-dm.is-on { color: #fff; background: rgba(56, 182, 255, 0.12); border-color: rgba(56, 182, 255, 0.35); }
.cn-item.is-unread .cn-name, .cn-dm.is-unread strong { color: #fff; font-weight: 700; }
.cn-hash { display: inline-grid; color: var(--cn-mute); }
.cn-hash svg { width: 15px; height: 15px; }
.cn-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-badge { min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; line-height: 17px; text-align: center; color: #fff; background: #ef4444; }
.cn-badge.is-at { background: #f59e0b; color: #1a1200; }
.cn-online { margin: 12px 2px 4px; padding: 10px 10px 8px; border-radius: 12px; background: rgba(52, 211, 153, 0.05); border: 1px solid rgba(52, 211, 153, 0.25); }
.cn-on-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 0.74rem; font-weight: 700; color: var(--cn-ok); }
.cn-on-n { margin-left: auto; padding: 0 8px; border-radius: 999px; font-size: 0.72rem; line-height: 18px; color: var(--cn-ok); background: rgba(52, 211, 153, 0.14); }
.cn-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--cn-ok); box-shadow: 0 0 6px var(--cn-ok); }
.cn-on-p { display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 4px; border: 0; border-radius: 8px; font: inherit; font-size: 0.84rem; text-align: left; color: #dbe1f2; background: transparent; cursor: pointer; }
.cn-on-p:hover { background: rgba(255, 255, 255, 0.05); }
.cn-on-p > span:not(.cn-av) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-on-p .cn-av { width: 24px; height: 24px; font-size: 0.6rem; }
.cn-on-empty { margin: 2px 0 4px; font-size: 0.8rem; color: var(--cn-mute); }
.cn-on-more { width: 100%; margin-top: 4px; padding: 4px; border: 0; font: inherit; font-size: 0.8rem; color: var(--cn-ok); background: none; cursor: pointer; }
.cn-av { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; font-size: 0.74rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1f7bff, #38b6ff); }
.cn-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cn-av.is-team { background: #0f1a33; box-shadow: 0 0 0 2px #f59e0b; }
.cn-av-on { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--cn-ok); box-shadow: 0 0 0 2px var(--cn-panel); }
.cn-dm-tx { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.cn-dm-tx strong { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-dm-tx small { font-size: 0.76rem; color: var(--cn-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-dm-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cn-dm-side small { font-size: 0.7rem; color: var(--cn-mute); }
.cn-empty { margin: 4px 8px; font-size: 0.8rem; color: var(--cn-mute); }
.cn-reports { width: calc(100% - 4px); margin: 14px 2px 0; height: 34px; border-radius: 9px; font: inherit; font-size: 0.82rem; font-weight: 600; color: #fbbf24; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); cursor: pointer; }
.cn-reports[hidden] { display: none; }

/* Conversation */
.cn-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cn-head { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 20px; border-bottom: 1px solid var(--cn-line); background: rgba(10, 18, 38, 0.6); }
.cn-back { display: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--cn-line); border-radius: 9px; color: #e8ecf8; background: transparent; cursor: pointer; }
.cn-back svg { width: 18px; height: 18px; }
.cn-title-w { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cn-title-dm { flex-direction: row; align-items: center; gap: 11px; }
.cn-title-dm > div { display: flex; flex-direction: column; min-width: 0; }
.cn-title { display: flex; align-items: center; gap: 6px; font-family: var(--font-head, inherit); font-size: 1.05rem; }
.cn-title-w small { font-size: 0.8rem; color: var(--cn-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-head-btn { margin-left: auto; height: 32px; padding: 0 12px; border-radius: 8px; font: inherit; font-size: 0.78rem; color: #fca5a5; background: transparent; border: 1px solid rgba(239, 68, 68, 0.35); cursor: pointer; }
.cn-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 0 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
.cn-msgs { max-width: none; } /* full width: your messages sit at the right edge on wide screens too (founder 2026-10-10: "the founder or sender chat is always at the middle") */
.cn-loading { padding: 30px 24px; color: var(--cn-mute); }
.cn-welcome { display: flex; flex-direction: column; gap: 4px; margin: 20px 24px 10px; padding: 18px 20px; border-radius: 14px; background: rgba(56, 182, 255, 0.06); border: 1px solid rgba(56, 182, 255, 0.2); }
.cn-welcome strong { font-family: var(--font-head, inherit); font-size: 1.1rem; }
.cn-welcome span { color: #b4bcd6; font-size: 0.9rem; }
.cn-older { display: block; margin: 8px auto; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 0.8rem; color: #c3cae0; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--cn-line); cursor: pointer; }
.cn-day, .cn-new { display: flex; align-items: center; gap: 12px; margin: 16px 24px 8px; font-size: 0.76rem; font-weight: 600; color: #c3cae0; }
.cn-day::before, .cn-day::after, .cn-new::before, .cn-new::after { content: ""; flex: 1; height: 1px; background: var(--cn-line); }
.cn-day span { padding: 4px 12px; border-radius: 999px; background: #0f1a33; border: 1px solid rgba(56, 182, 255, 0.25); }
.cn-new { color: #f87171; margin: 6px 24px; } .cn-new::before, .cn-new::after { background: rgba(239, 68, 68, 0.45); }
.cn-msg.is-flash { background: rgba(56, 182, 255, 0.14); transition: background 0.4s ease; }
.cn-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.cn-who { font-size: 0.9rem; color: #7cc4ff; }
.cn-team { padding: 0 7px; border-radius: 5px; font-size: 0.66rem; font-weight: 700; line-height: 17px; color: #1a1200; background: #fbbf24; }
.cn-ctry { font-size: 0.72rem; color: #6f789a; }
.cn-meta time { font-size: 0.72rem; color: #6f789a; }
.cn-text a { color: #7cc4ff; text-decoration: underline; text-underline-offset: 2px; }
.cn-at { padding: 0 3px; border-radius: 4px; color: #93c5fd; background: rgba(56, 182, 255, 0.14); font-weight: 600; }
.cn-at.is-me { color: #1a1200; background: #fbbf24; }
.cn-quote strong { font-size: 0.76rem; color: #7cc4ff; }
.cn-quote span { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cn-tools button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; color: #b4bcd6; background: transparent; cursor: pointer; }
.cn-tools button:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.cn-tools svg { width: 15px; height: 15px; }
.cn-jump { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); padding: 7px 14px; border: 0; border-radius: 999px; font: inherit; font-size: 0.8rem; font-weight: 700; color: #fff; background: #1f7bff; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.9); cursor: pointer; }
.cn-jump[hidden] { display: none; }

/* Messages, Teams-style: others on the left (photo + name), yours on the right; a time on every bubble */
.cn-msg { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 6px 24px 2px; }
.cn-msg.is-grouped { padding-top: 2px; }
.cn-msg.is-mine { justify-content: flex-end; }
.cn-msg .cn-av, .cn-av-gap { width: 34px; height: 34px; flex-shrink: 0; margin-top: 20px; }
.cn-msg.is-grouped .cn-av-gap { margin-top: 0; height: 1px; }
.cn-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(72%, 640px); }
.cn-msg.is-mine .cn-body { align-items: flex-end; }
.cn-meta { margin: 0 0 4px 2px; }
.cn-bubble { position: relative; min-width: 96px; max-width: 100%; padding: 8px 12px 6px; border-radius: 4px 14px 14px 14px; background: var(--cn-bub, #16213f); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.cn-msg.is-grouped .cn-bubble { border-top-left-radius: 14px; }
.cn-msg.is-mine .cn-bubble { border-radius: 14px 4px 14px 14px; background: var(--cn-mine, linear-gradient(135deg, #1d4ed8, #1f7bff)); border-color: transparent; }
.cn-msg.is-mine.is-grouped .cn-bubble { border-top-right-radius: 14px; }
.cn-msg.is-mention .cn-bubble { box-shadow: 0 0 0 2px #f59e0b; }
.cn-bubble.is-gone { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.18); }
.cn-msg.is-mine .cn-bubble.is-gone { background: transparent; border-color: rgba(124, 196, 255, 0.35); }
.cn-text { font-size: 0.93rem; line-height: 1.5; color: #e8ecf8; white-space: pre-wrap; overflow-wrap: anywhere; }
.cn-msg.is-mine .cn-text { color: #fff; }
.cn-bubble.is-gone .cn-text { font-style: italic; color: #8b93ad; }
.cn-msg.is-mine .cn-text a { color: #fff; }
.cn-msg.is-mine .cn-at { color: #fff; background: rgba(255, 255, 255, 0.2); }
.cn-stamp { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 3px; font-size: 0.68rem; line-height: 1.2; color: #8b93ad; white-space: nowrap; }
.cn-msg.is-mine .cn-stamp { color: rgba(255, 255, 255, 0.75); }
.cn-edited { font-style: italic; }
.cn-quote { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; max-width: 520px; margin: 0 0 6px; padding: 5px 10px; border: 0; border-left: 3px solid rgba(56, 182, 255, 0.7); border-radius: 0 8px 8px 0; font: inherit; text-align: left; color: #b4bcd6; background: rgba(0, 0, 0, 0.22); cursor: pointer; }
.cn-msg.is-mine .cn-quote { border-left-color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.85); }
.cn-msg.is-mine .cn-quote strong { color: #fff; }
.cn-tools { position: absolute; top: -10px; right: 24px; display: none; gap: 2px; padding: 3px; border-radius: 9px; background: #111c38; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.8); z-index: 2; }
.cn-msg.is-theirs .cn-tools { left: 68px; right: auto; }

/* Composer */
.cn-compose { padding: 0 20px 14px; }
.cn-bar { display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin-bottom: -1px; border-radius: 12px 12px 0 0; font-size: 0.8rem; background: #0f1a33; border: 1px solid rgba(56, 182, 255, 0.3); border-bottom: 0; }
.cn-bar[hidden] { display: none; }
.cn-bar div { display: flex; gap: 8px; min-width: 0; flex: 1; }
.cn-bar strong { color: #7cc4ff; white-space: nowrap; }
.cn-bar span { color: #8b93ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-bar-x { padding: 2px 8px; border: 0; border-radius: 6px; font: inherit; font-size: 0.76rem; color: #c3cae0; background: rgba(255, 255, 255, 0.06); cursor: pointer; }
.cn-box { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 14px; background: #0c1428; border: 1px solid rgba(255, 255, 255, 0.14); }
.cn-bar:not([hidden]) + .cn-box { border-top-left-radius: 0; border-top-right-radius: 0; }
.cn-box:focus-within { border-color: var(--cn-act); box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.15); }
.cn-box textarea { flex: 1; min-height: 24px; max-height: 180px; padding: 7px 0; border: 0; font: inherit; font-size: 0.95rem; line-height: 1.45; color: #fff; background: transparent; resize: none; outline: none; }
.cn-box textarea::placeholder { color: #5d6684; }
.cn-send { display: inline-grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #1f7bff, #38b6ff); cursor: pointer; }
.cn-send:disabled { opacity: 0.5; }
.cn-send svg { width: 18px; height: 18px; }
.cn-hint { margin: 6px 4px 0; font-size: 0.72rem; color: #5d6684; }
.cn-mention { position: absolute; left: 8px; bottom: calc(100% + 6px); width: min(320px, calc(100% - 16px)); padding: 5px; border-radius: 12px; background: #111c38; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.9); }
.cn-mention[hidden] { display: none; }
.cn-mention-h { padding: 7px 8px 3px; font-size: 0.72rem; color: #9aa8c7; }
.cn-pageic { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: #7cc4ff; background: rgba(56, 182, 255, 0.12); }
.cn-pageic svg { width: 15px; height: 15px; }
.cn-mention button > span.cn-pageic { flex: none; }
.cn-text a.cn-pagetag { color: #93c5fd; text-decoration: none; cursor: pointer; }
.cn-text a.cn-pagetag:hover { text-decoration: underline; }
.cn-msg.is-mine .cn-text a.cn-pagetag { color: #fff; }
.cn-mention button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; font: inherit; font-size: 0.86rem; text-align: left; color: #dbe1f2; background: transparent; cursor: pointer; }
.cn-mention button.is-on, .cn-mention button:hover { background: rgba(56, 182, 255, 0.14); }
.cn-mention .cn-av { width: 24px; height: 24px; font-size: 0.6rem; }
/* The page icon is excluded too, not only the avatar. Line 162 sets .cn-pageic to flex:none but has
   the SAME specificity as this rule and comes before it, so without the second :not() this won it and
   stretched the little icon tile across the row. */
.cn-mention button > span:not(.cn-av):not(.cn-pageic) { flex: 1; }

/* Dialogs */
.cn-dlg-back { position: fixed; inset: 0; z-index: 1250; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 18, 0.66); }
.cn-dlg { width: min(460px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 16px; background: #0c1428; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); color: #e8ecf8; font-family: var(--font-body, Inter, sans-serif); }
.cn-dlg-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--cn-line, rgba(255, 255, 255, 0.08)); }
.cn-dlg-h h2 { margin: 0; font-family: var(--font-head, inherit); font-size: 1.05rem; }
.cn-dlg-x { padding: 4px 10px; border: 0; border-radius: 7px; font: inherit; font-size: 0.8rem; color: #8b93ad; background: rgba(255, 255, 255, 0.05); cursor: pointer; }
.cn-dlg-b { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; overflow-y: auto; }
.cn-sub { margin: 0; font-size: 0.82rem; color: #8b93ad; }
.cn-people { display: flex; flex-direction: column; gap: 2px; min-height: 120px; }
.cn-person { display: flex; align-items: center; gap: 11px; padding: 8px; border: 0; border-radius: 10px; font: inherit; text-align: left; color: #e8ecf8; background: transparent; cursor: pointer; }
.cn-person:hover { background: rgba(56, 182, 255, 0.1); }
.cn-person span { display: flex; flex-direction: column; }
.cn-person small { font-size: 0.76rem; color: #8b93ad; }
.cn-btn { height: 38px; padding: 0 14px; border: 0; border-radius: 9px; font: inherit; font-size: 0.86rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1f7bff, #38b6ff); cursor: pointer; }
.cn-btn.is-danger { background: #dc2626; }
.cn-rep { padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
.cn-rep-t { margin: 0 0 6px; font-size: 0.9rem; white-space: pre-wrap; }
.cn-rep small { font-size: 0.76rem; color: #8b93ad; }
.cn-rep-a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cn-rep-a .cn-btn { height: 30px; padding: 0 10px; font-size: 0.76rem; }
.cn-rep-a .cn-btn:not(.is-danger) { background: rgba(255, 255, 255, 0.07); color: #e8ecf8; }
.cn-toast { position: fixed; z-index: 1300; left: 50%; bottom: 24px; transform: translate(-50%, 16px); padding: 10px 16px; border-radius: 10px; font-size: 0.86rem; font-weight: 600; color: #04120b; background: #34d399; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.cn-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cn-toast.is-bad { color: #fff; background: #dc2626; }
.cn button:focus-visible, .cn-dlg button:focus-visible { outline: 2px solid #38b6ff; outline-offset: 2px; }

html.as-rail .cn { left: var(--as-rail, 70px); }
@media (max-width: 1023px) { .cn, html.as-rail .cn { left: 0; } }
/* Phones: one side at a time */
@media (max-width: 860px) {
  .cn { grid-template-columns: minmax(0, 1fr); }
  .cn-main { display: none; }
  html.cn-in .cn-side { display: none; }
  html.cn-in .cn-main { display: flex; }
  .cn-back { display: inline-grid; }
  .cn-head { padding: 8px 12px; min-height: 54px; }
  .cn-day, .cn-new { margin-left: 12px; margin-right: 12px; }
  .cn-msg { padding: 5px 10px 2px; gap: 8px; }
  .cn-msg .cn-av, .cn-av-gap { width: 30px; height: 30px; }
  .cn-body { max-width: 82%; }
  .cn-tools { right: 10px; }
  .cn-msg.is-theirs .cn-tools { left: 48px; }
  .cn-compose { padding: 0 10px 10px; }
  .cn-hint { display: none; }
  .cn-welcome { margin: 14px 12px 8px; }
}
@media (hover: none) { .cn-msg.is-touch .cn-tools { display: flex; } }
@media (prefers-reduced-motion: reduce) { .cn-toast, .cn-msg.is-flash { transition: none; } }

/* ===== Teams-style polish (2026-10-03): hover bar with reactions, reaction chips, Seen, typing,
   photos, formatting toolbar, search, lightbox ===== */
.cn-scroll { background: var(--cn-art, none), radial-gradient(1200px 600px at 100% 0%, rgba(31, 123, 255, 0.05), transparent 60%), var(--cn-bg); }
/* --cn-art is the theme's artwork: a pattern tile and a wash, layered over the base colour
   (connect-theme.js). Deliberately NOT animated. Something moving behind a paragraph of text is
   the fastest way to make it hard to read, and this is a chat people read all day. */
.cn-bubble { padding: 9px 13px 7px; background: #172243; border-color: rgba(255, 255, 255, 0.06); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 4px 14px -8px rgba(0, 0, 0, 0.6); }
.cn-msg.is-mine .cn-bubble { background: linear-gradient(160deg, #3b6cf6, #1f5fe0); box-shadow: 0 6px 18px -10px rgba(31, 95, 224, 0.9); }
.cn-msg:hover .cn-bubble { filter: brightness(1.06); }
.cn-who { font-size: 0.84rem; }
/* Hover bar */
.cn-tools { display: flex; visibility: hidden; opacity: 0; top: -16px; align-items: center; gap: 1px; padding: 3px 4px; border-radius: 999px; background: #121d3a; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.9); transition: opacity 0.12s ease; }
.cn-msg:hover .cn-tools, .cn-msg:focus-within .cn-tools, .cn-msg.is-touch .cn-tools, .cn-tools:has(.cn-menu) { visibility: visible; opacity: 1; }
.cn-msg.is-mine .cn-tools { right: 28px; }
.cn-tools button { width: 30px; height: 30px; border-radius: 999px; }
.cn-tr svg { width: 18px; height: 18px; transition: transform 0.12s ease; }
.cn-tr:hover svg { transform: scale(1.25) translateY(-1px); }
.cn-tsep { width: 1px; height: 18px; margin: 0 3px; background: rgba(255, 255, 255, 0.14); }
.cn-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 190px; padding: 5px; border-radius: 12px; background: #121d3a; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.9); }
.cn-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 0.85rem; color: #dbe1f2; text-align: left; }
.cn-menu button svg { width: 15px; height: 15px; flex-shrink: 0; }
.cn-menu button:hover, .cn-menu button:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }
.cn-menu button.is-danger { color: #fca5a5; }
/* Reactions under a bubble */
.cn-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -6px; padding: 0 8px; position: relative; z-index: 1; }
.cn-rchip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 6px; border-radius: 999px; font: inherit; font-size: 0.74rem; font-weight: 700; color: #dbe1f2; background: #0f1830; border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.cn-rchip svg { width: 15px; height: 15px; }
.cn-rchip.is-me { border-color: #60a5fa; background: #13254a; color: #fff; }
.cn-rchip:hover { border-color: rgba(255, 255, 255, 0.35); }
/* Seen / Sent */
.cn-seen { display: inline-flex; align-items: center; gap: 4px; margin: 3px 4px 0; font-size: 0.7rem; color: #6f789a; }
.cn-seen svg { width: 13px; height: 13px; }
.cn-seen.is-seen { color: #7cc4ff; }
/* Rich text */
.cn-text strong { font-weight: 700; } .cn-text em { font-style: italic; }
.cn-code { padding: 1px 6px; border-radius: 5px; font: 0.86em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); }
.cn-pre { margin: 6px 0; padding: 10px 12px; border-radius: 8px; overflow-x: auto; font: 0.84rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); }
/* Photos */
.cn-bubble.has-img { padding: 5px 5px 6px; }
.cn-bubble.has-img .cn-text, .cn-bubble.has-img .cn-quote { margin-left: 7px; margin-right: 7px; }
.cn-bubble.has-img .cn-stamp { margin-right: 8px; }
.cn-img { display: block; width: fit-content; max-width: 340px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.3); cursor: zoom-in; }
.cn-img img { display: block; width: auto; height: auto; max-width: 340px; max-height: 320px; object-fit: cover; }
.cn-bubble.has-img { max-width: 352px; }
/* The welcome's signature photo: small, bottom left, under his name (connect-app.js). It keeps the
   bubble's normal width - `has-img` is not used for it - so a long letter is not squeezed to 352px
   for the sake of a 64px portrait. */
.cn-img.is-sig { max-width: 64px; border-radius: 8px; cursor: zoom-in; }
.cn-img.is-sig img { width: 64px; height: 64px; max-width: 64px; max-height: 64px; object-fit: cover; }
.cn-bubble.has-sig .cn-img.is-sig { margin: 10px 0 2px; }
.cn-sp-top input::-webkit-search-cancel-button { display: none; }
.cn-bubble.has-img .cn-text { margin-top: 6px; }
.cn-lb { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 30px; background: rgba(2, 6, 18, 0.92); }
.cn-lb img { max-width: 100%; max-height: calc(100dvh - 90px); border-radius: 10px; box-shadow: 0 30px 80px -20px #000; }
.cn-lb-x { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.12); cursor: pointer; }
.cn-lb-x svg { width: 20px; height: 20px; }
.cn-lb-open { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 0.84rem; color: #c3cae0; }
/* Save photo, beside "Open full size" in the viewer (founder 2026-11-02: a photo could be looked at
   but not kept). The two sit side by side, so neither moves from where it was. */
.cn-lb-open { left: calc(50% - 76px); }
.cn-lb-save {
  position: absolute; bottom: 18px; left: calc(50% + 76px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 600; color: #eaf1ff;
  padding: 9px 16px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1);
}
.cn-lb-save:hover { background: rgba(255,255,255,.2); border-color: rgba(124,208,255,.6); }
.cn-lb-save svg { width: 16px; height: 16px; }

/* Moving between the photos in a chat, and zooming into one (founder 2026-11-02). */
.cn-lb-stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.cn-lb-stage img { max-width: 92vw; max-height: 78vh; transform-origin: center center; transition: transform .12s ease-out; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.cn-lb.is-zoomed .cn-lb-stage img { cursor: grab; transition: none; }
.cn-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; place-items: center; width: 46px; height: 46px; cursor: pointer;
  color: #eaf1ff; background: rgba(6, 12, 30, .66); border: 1px solid rgba(255, 255, 255, .22);
}
.cn-lb-nav:hover { background: rgba(6, 12, 30, .9); border-color: rgba(124, 208, 255, .6); }
.cn-lb-nav svg { width: 20px; height: 20px; }
.cn-lb-prev { left: 14px; }
.cn-lb-next { right: 14px; }
.cn-lb-next svg { transform: rotate(180deg); }
.cn-lb-count { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: 0.82rem; color: #c3cae0; background: rgba(6, 12, 30, .6); padding: 5px 12px; }

/* Choosing several messages at once (founder 2026-11-02). Only while choosing: with the mode off
   none of this applies and a message looks and behaves exactly as it always did. */
html.cn-selecting #cnMsgs .cn-msg { cursor: pointer; position: relative; }
html.cn-selecting #cnMsgs .cn-msg::after {
  content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, .34); background: rgba(6, 12, 30, .5);
  border-radius: 50%; pointer-events: none;
}
html.cn-selecting #cnMsgs .cn-msg.is-picked::after {
  border-color: #38b6ff; background: #1f7bff;
  box-shadow: inset 0 0 0 3px rgba(6, 12, 30, .55);
}
html.cn-selecting #cnMsgs .cn-msg { padding-left: 34px; }
html.cn-selecting #cnMsgs .cn-msg.is-picked { background: rgba(31, 123, 255, .1); }
html.cn-selecting #cnMsgs .cn-msg .cn-acts, html.cn-selecting #cnMsgs .cn-msg .cn-react-row { pointer-events: none; opacity: .4; }

.cn-selbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 24px); padding: 9px 12px;
  background: rgba(8, 15, 36, .97); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .95);
}
.cn-selbar-n { font-size: 0.86rem; font-weight: 700; color: #eaf1ff; padding: 0 8px 0 4px; white-space: nowrap; }
.cn-selbar-b, .cn-selbar-x {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 600; color: #dbe1f2;
  padding: 8px 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.cn-selbar-b:hover, .cn-selbar-x:hover { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(124, 208, 255, .5); }
.cn-selbar-b svg, .cn-selbar-x svg { width: 15px; height: 15px; }
.cn-selbar-x { padding: 8px 10px; }
@media (max-width: 560px) {
  .cn-selbar { bottom: 10px; gap: 4px; padding: 8px; }
  .cn-selbar-b { padding: 7px 9px; font-size: 0.78rem; }
  .cn-selbar-b span { display: none; }
  .cn-selbar-n { font-size: 0.8rem; padding: 0 4px; }
}
@media (max-width: 560px) {
  .cn-lb-nav { width: 40px; height: 40px; }
  .cn-lb-prev { left: 6px; } .cn-lb-next { right: 6px; }
  .cn-lb-stage img { max-width: 100vw; max-height: 62vh; }
}
@media (max-width: 560px) {
  .cn-lb-open { left: 50%; bottom: 66px; }
  .cn-lb-save { left: 50%; }
}
/* Header icon button */
.cn-head-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: auto; padding: 0; border-radius: 9px; color: #c3cae0; background: transparent; border: 1px solid var(--cn-line); cursor: pointer; }
.cn-head-btn + .cn-head-ic { margin-left: 8px; }
.cn-head-ic:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.cn-head-ic svg { width: 17px; height: 17px; }
/* Typing */
.cn-typing { display: flex; align-items: center; gap: 8px; height: 22px; margin: 0 4px 4px; font-size: 0.78rem; color: #8b93ad; }
.cn-typing[hidden] { display: none; }
.cn-dots { display: inline-flex; gap: 3px; }
.cn-dots i { width: 6px; height: 6px; border-radius: 50%; background: #7cc4ff; animation: cnDot 1.2s infinite ease-in-out; }
.cn-dots i:nth-child(2) { animation-delay: 0.15s; } .cn-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cnDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
/* Photo waiting to be sent */
.cn-attach { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 8px; border-radius: 12px; background: #0f1a33; border: 1px solid rgba(56, 182, 255, 0.3); }
.cn-attach[hidden] { display: none; }
.cn-att-row { display: flex; gap: 8px; min-width: 0; flex: 0 1 auto; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.cn-att-item { position: relative; flex: none; width: 56px; height: 56px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
.cn-att-item img { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.cn-att-item.is-busy { animation: cn-att-pulse 1s ease-in-out infinite alternate; }
@keyframes cn-att-pulse { to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .cn-att-item.is-busy { animation: none; } }
.cn-att-item.is-file { display: flex; align-items: center; gap: 8px; width: 172px; padding: 0 28px 0 10px; box-sizing: border-box; }
.cn-att-ic { flex: none; width: 22px; height: 22px; color: #8fd0ff; }
.cn-att-ic svg { display: block; width: 100%; height: 100%; }
.cn-att-tx, .cn-att-say { display: flex; flex-direction: column; min-width: 0; }
.cn-att-tx strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.cn-att-tx small, .cn-att-say small { font-size: 0.74rem; color: #8b93ad; }
.cn-att-say { flex: 1 0 auto; }
.cn-att-say strong { font-size: 0.86rem; }
.cn-att-x { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; color: #fff; background: rgba(5, 9, 20, 0.72); cursor: pointer; }
@media (max-width: 560px) { .cn-att-say { display: none; } .cn-att-row { flex: 1 1 auto; } }
.cn-att-x svg { width: 13px; height: 13px; }
/* Toolbar under the box */
.cn-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cn-tbs { display: flex; gap: 2px; }
.cn-tb { display: inline-grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 0; border-radius: 7px; color: #8b93ad; background: transparent; cursor: pointer; }
.cn-tb:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.cn-tb svg { width: 16px; height: 16px; }
.cn-toolbar .cn-hint { margin: 0 0 0 auto; text-align: right; }
.cn-main.is-drop::after { content: "Drop the photo to share it"; position: absolute; inset: 10px; z-index: 6; display: grid; place-items: center; border: 2px dashed #38b6ff; border-radius: 16px; font-weight: 700; color: #fff; background: rgba(15, 26, 51, 0.88); pointer-events: none; }
/* Search panel */
.cn-sp { position: absolute; top: 62px; right: 16px; z-index: 7; width: min(460px, calc(100% - 32px)); max-height: calc(100% - 90px); display: flex; flex-direction: column; border-radius: 14px; background: #0f1830; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9); }
.cn-sp-top { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #8b93ad; }
.cn-sp-top svg { width: 16px; height: 16px; flex-shrink: 0; }
.cn-sp-top input { flex: 1; height: 34px; border: 0; font: inherit; font-size: 0.9rem; color: #fff; background: transparent; outline: none; }
.cn-sp-x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; color: #8b93ad; background: transparent; cursor: pointer; }
.cn-sp-x svg { width: 15px; height: 15px; }
.cn-sp-list { overflow-y: auto; padding: 6px; }
.cn-sp-list .cn-sub { padding: 14px 10px; }
.cn-sp-r { display: flex; gap: 10px; width: 100%; padding: 9px; border: 0; border-radius: 10px; font: inherit; text-align: left; color: inherit; background: transparent; cursor: pointer; }
.cn-sp-r:hover { background: rgba(56, 182, 255, 0.08); }
.cn-sp-r .cn-av { width: 30px; height: 30px; font-size: 0.66rem; }
.cn-sp-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-sp-h { display: flex; gap: 8px; align-items: baseline; }
.cn-sp-h strong { font-size: 0.84rem; } .cn-sp-h small { font-size: 0.72rem; color: #8b93ad; }
.cn-sp-b { font-size: 0.84rem; color: #c3cae0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cn-sp-b mark { padding: 0 2px; border-radius: 3px; color: #1a1200; background: #fbbf24; }
@media (max-width: 860px) {
  .cn-toolbar .cn-hint { display: none; }
  .cn-img, .cn-img img { max-width: 62vw; } .cn-img img { max-height: 260px; } .cn-bubble.has-img { max-width: calc(62vw + 12px); }
  .cn-sp { top: 56px; right: 8px; width: calc(100% - 16px); }
  .cn-tools { gap: 0; } .cn-tools button { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .cn-dots i { animation: none; opacity: 0.8; } .cn-tr svg { transition: none; } }

/* People: who is online and offline (connect-app.js membersDialog, header button in channels) */
.cn-head-people { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 600; color: #c3cae0; background: transparent; border: 1px solid var(--cn-line); }
.cn-head-people:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.cn-head-people .cn-dot { flex: none; }
.cn-head-people + .cn-head-ic, .cn-head-btn + .cn-head-people { margin-left: 8px; }
.cn-members { max-height: min(60vh, 520px); overflow-y: auto; }
.cn-members .cn-sec { margin: 12px 4px 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #8b93ad; }
.cn-person.is-off .cn-av { opacity: 0.65; filter: grayscale(0.35); }
.cn-person[disabled] { cursor: default; opacity: 0.85; }
.cn-you { margin-left: auto; font-size: 0.72rem; color: #8b93ad; }
/* 2026-10-08 (founder: "well organized and neat"): the Remove channel button carries a bin icon and is icon-only on phones,
   and the channel topic hides on phones, so the header never overlaps. */
.cn-head-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cn-head-btn svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .cn-head-btn { width: 32px; padding: 0; justify-content: center; }
  .cn-head-btn span { display: none; }
  .cn-title-w:not(.cn-title-dm) small { display: none; }
  .cn-title { font-size: 1rem; }
  .cn-head-people { padding: 0 10px; }
}

/* ===== Microsoft Teams-style chat (founder 2026-10-08: "Remove the rectangular box from the chat and design that chat
   interface like Microsoft Teams chat box. Only the chat interface"). Scoped to the message list and the composer; the
   sidebar and the header are unchanged. Rounded corners are restored here on purpose (square.css makes everything square,
   which turned every message into a box); these rules win because square.css uses zero-specificity :where(). ===== */
#cnScroll { background: #0b1020; }
.cn-msg { gap: 12px; padding: 10px 24px 0; }
.cn-msg.is-grouped { padding-top: 2px; }
.cn-msg .cn-av, .cn-av-gap { width: 32px; height: 32px; margin-top: 0; }
.cn-body { max-width: min(68%, 620px); }
/* the header line: name, label and time above the bubble (yours: the time only, on the right) */
.cn-meta { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.cn-meta.is-mine { justify-content: flex-end; }
.cn-who { font-size: 0.8rem; font-weight: 600; color: #d6dbea; }
.cn-ctry { font-size: 0.72rem; color: #8b93ad; }
.cn-htime { font-size: 0.72rem; color: #8b93ad; }
.cn-team { border-radius: 4px !important; }
/* bubbles: soft corners, no borders, no shadow; grey for others, brand blue for yours */
.cn-bubble { min-width: 0; padding: 8px 12px; border: 0 !important; box-shadow: none; border-radius: 8px !important; background: var(--cn-bub, #252a3d); }
.cn-msg.is-mine .cn-bubble { background: var(--cn-mine, #2b3f8f); border-radius: 8px !important; }
.cn-msg.is-mention .cn-bubble { box-shadow: inset 3px 0 0 #f59e0b; }
.cn-bubble.is-gone { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.18) !important; }
.cn-text { font-size: 0.92rem; line-height: 1.45; color: #e6e9f2; }
.cn-msg.is-mine .cn-text { color: #fff; }
/* the time now sits in the header line; a grouped message shows its time inside the bubble only on hover */
.cn-stamp { margin-top: 2px; }
.cn-msg:not(.is-grouped) .cn-stamp time { display: none; }
.cn-msg:not(.is-grouped) .cn-stamp:not(:has(.cn-edited)) { display: none; }
.cn-msg.is-grouped .cn-stamp time { opacity: 0; transition: opacity 0.15s; }
.cn-msg.is-grouped:hover .cn-stamp time, .cn-msg.is-grouped.is-touch .cn-stamp time { opacity: 1; }
.cn-msg:hover { background: rgba(255, 255, 255, 0.025); }
.cn-quote { border-radius: 4px !important; background: rgba(0, 0, 0, 0.18); }
.cn-img, .cn-img img { border-radius: 6px !important; }
.cn-reacts button, .cn-rchip { border-radius: 999px !important; }
.cn-tools { border-radius: 6px !important; background: #1b2033; }
/* day dividers: plain text between two thin lines, no box */
.cn-day span { padding: 0; border: 0; background: transparent; color: #8b93ad; font-weight: 600; font-size: 0.74rem; }
/* composer: a rounded box with the brand line under it when you type, like Teams */
.cn-box { border-radius: 6px !important; background: #1b2033; border: 1px solid transparent; border-bottom: 2px solid transparent; }
.cn-box:focus-within { border-color: transparent; border-bottom-color: #4f7cff; box-shadow: none; }
.cn-box textarea, .cn-box textarea:focus, .cn-box textarea:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }
.cn-bar { border-radius: 6px 6px 0 0 !important; }
@media (max-width: 640px) { .cn-msg { padding: 8px 12px 0; } .cn-body { max-width: 82%; } }

/* Pinned, Saved and Forward (from Nova Connect, 2026-10-08) */
.cn-pinned { display: inline-flex; align-items: center; gap: 3px; font-size: 0.7rem; font-weight: 600; color: #fbbf24; }
.cn-pinned svg { width: 12px; height: 12px; }
.cn-head-pin { position: relative; }
.cn-head-people + .cn-head-pin, .cn-head-btn + .cn-head-pin { margin-left: 8px; }
.cn-head-pin + .cn-head-ic { margin-left: 8px; }
.cn-head-pin.has-pins { color: #fbbf24; }
.cn-pin-n { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px !important; font-size: 0.62rem; font-weight: 700; line-height: 16px; color: #1a1200; background: #fbbf24; }
.cn-pin-n:empty { display: none; }
.cn-sp-title { flex: 1; font-size: 0.95rem; color: #e6e9f2; }
.cn-fwd { margin: 0 0 6px; padding: 6px 10px; border-left: 3px solid #8b93ad; border-radius: 4px !important; background: rgba(0, 0, 0, 0.18); }
.cn-fwd-h { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-size: 0.72rem; font-style: italic; color: #b4bcd6; }
.cn-fwd-h svg { width: 12px; height: 12px; }
.cn-fwd-t { font-size: 0.88rem; line-height: 1.45; color: #e6e9f2; white-space: pre-wrap; overflow-wrap: anywhere; }
.cn-fwd-img { display: block; max-width: 260px; max-height: 220px; margin-top: 4px; border-radius: 6px !important; cursor: zoom-in; }
.cn-msg.is-mine .cn-fwd { border-left-color: rgba(255, 255, 255, 0.7); }
.cn-fwd-dlg { display: flex; flex-direction: column; gap: 10px; }
.cn-fwd-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.cn-fwd-to { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 6px !important; font: inherit; color: #e6e9f2; background: rgba(255, 255, 255, 0.04); cursor: pointer; text-align: left; }
.cn-fwd-to:hover { background: rgba(255, 255, 255, 0.09); }
.cn-fwd-to > span:not(.cn-av):not(.cn-hash) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-fwd-to em { font-style: normal; font-size: 0.78rem; font-weight: 700; color: #7cc4ff; }
.cn-fwd-to .cn-av { width: 28px; height: 28px; font-size: 0.62rem; }
.cn-saved { display: block; width: calc(100% - 24px); margin: 8px 12px 0; padding: 9px; border: 1px solid rgba(255, 255, 255, 0.12); font: inherit; font-size: 0.82rem; font-weight: 600; color: #c3cae0; background: transparent; cursor: pointer; }
.cn-saved:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }

/* ---------- Every chat, filters, pinned, muted, drafts, Mentions & replies (founder 2026-10-10) ---------- */
.cn-activity { display: flex; align-items: center; gap: 10px; width: calc(100% - 28px); margin: 2px 14px 6px; padding: 9px 12px; border: 1px solid rgba(245, 158, 11, 0.28); border-radius: 10px !important; font: inherit; font-size: 0.85rem; font-weight: 600; color: #f3e8c8; background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.03)); cursor: pointer; text-align: left; }
.cn-activity svg { width: 16px; height: 16px; flex: none; color: #fbbf24; }
.cn-activity span:not(.cn-badge) { flex: 1; }
.cn-activity:hover { color: #fff; border-color: rgba(245, 158, 11, 0.55); }
.cn-activity .cn-badge[hidden] { display: none; }
.cn-dmf { display: flex; align-items: center; gap: 4px; margin: 0 6px 6px; flex-wrap: wrap; }
.cn-dmf-b { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px !important; font: inherit; font-size: 0.76rem; font-weight: 600; color: var(--cn-mute, #8b93ad); background: transparent; cursor: pointer; }
.cn-dmf-b b { font-size: 0.7rem; color: #c3cae0; }
.cn-dmf-b:hover { color: #fff; }
.cn-dmf-b.is-on { color: #fff; border-color: rgba(56, 182, 255, 0.55); background: rgba(56, 182, 255, 0.16); }
.cn-dmf-b.is-on b { color: #8fd0ff; }
.cn-dmf-all { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border: 0; border-radius: 8px !important; font: inherit; font-size: 0.74rem; font-weight: 600; color: #8fd0ff; background: transparent; cursor: pointer; }
.cn-dmf-all svg { width: 14px; height: 14px; }
.cn-dmf-all:hover:not([disabled]) { background: rgba(56, 182, 255, 0.1); color: #fff; }
.cn-dmf-all[disabled] { opacity: 0.4; cursor: default; }
.cn-dm-more { display: block; width: calc(100% - 12px); margin: 6px 6px 2px; padding: 8px; border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: 10px !important; font: inherit; font-size: 0.8rem; font-weight: 600; color: #8fd0ff; background: transparent; cursor: pointer; }
.cn-dm-more:hover { background: rgba(56, 182, 255, 0.08); border-color: rgba(56, 182, 255, 0.4); }
.cn-quiet-ic { display: inline-flex; margin-left: 6px; color: var(--cn-mute, #8b93ad); vertical-align: -2px; }
.cn-quiet-ic svg { width: 13px; height: 13px; }
.cn-item.is-quiet .cn-name, .cn-dm.is-quiet strong { opacity: 0.75; }
.cn-badge.is-quiet { background: rgba(255, 255, 255, 0.16); color: #c3cae0; }
.cn-draft { color: #fca5a5 !important; }
.cn-draft b { font-weight: 700; }
.cn-head-star { display: inline-flex; align-items: center; color: #8fd0ff; margin-left: 2px; }
.cn-head-star svg { width: 15px; height: 15px; }
.cn-menu.cn-chat-menu { z-index: 2147483000; min-width: 230px; }
.cn-menu.cn-chat-menu button { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 38px; cursor: pointer; }
.cn-menu.cn-chat-menu button:hover, .cn-menu.cn-chat-menu button:focus-visible { background: rgba(255, 255, 255, 0.08) !important; color: #fff; }
.cn-menu.cn-chat-menu button svg { width: 16px; height: 16px; color: #8fd0ff; }

/* WhatsApp-style ticks in direct messages (connect-app.js, 2026-10-10) */
.cn-tick { display: inline-flex; align-items: center; margin-left: 4px; color: #6f789a; vertical-align: middle; }
.cn-tick svg { width: 15px; height: 13px; }
.cn-tick.is-seen svg { width: 18px; }
.cn-tick.is-seen { color: #4fb8ff; filter: drop-shadow(0 0 4px rgba(79, 184, 255, 0.45)); }
.cn-tick.is-new svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: cn-tick-draw 0.5s ease-out forwards; }
.cn-tick.is-new svg path + path { animation-delay: 0.18s; }
.cn-tick.is-new { animation: cn-tick-pop 0.5s cubic-bezier(0.2, 0.9, 0.2, 1.4); }
@keyframes cn-tick-draw { to { stroke-dashoffset: 0; } }
@keyframes cn-tick-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cn-tick.is-new, .cn-tick.is-new svg path { animation: none; stroke-dashoffset: 0; } }

/* Reaction bar beside the bubble, Teams / Telegram style (connect-app.js puts it inside .cn-body; 2026-10-11) */
.cn-body { position: relative; }
.cn-msg .cn-body > .cn-tools { top: 16px; bottom: auto; }
.cn-msg.is-theirs .cn-body > .cn-tools { left: calc(100% + 8px) !important; right: auto !important; }
.cn-msg.is-mine .cn-body > .cn-tools { right: calc(100% + 8px) !important; left: auto !important; }
.cn-msg.is-grouped .cn-body > .cn-tools { top: -2px; }
.cn-msg.is-theirs .cn-body > .cn-tools.is-tight { top: -14px; left: 0 !important; right: auto !important; }
.cn-msg.is-mine .cn-body > .cn-tools.is-tight { top: -14px; right: 0 !important; left: auto !important; }
.cn-msg .cn-body > .cn-tools { z-index: 6; transition: opacity 0.15s ease, transform 0.15s ease; transform: translateY(2px); }
.cn-msg:hover .cn-body > .cn-tools, .cn-msg.is-touch .cn-body > .cn-tools, .cn-msg:focus-within .cn-body > .cn-tools { transform: none; }

/* Phones: the app's bottom menu (.as-tabs, 62 px) covered the bottom of Connect: the toolbar under the message box
   (format, photo, file, poll, send later, quick replies). Connect now ends just above it (2026-10-11). */
@media (max-width: 760px) { html.as-has-tabs .cn { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } }


/* ---------- Pinned bar at the top of the chat, like Telegram / Teams (founder 2026-10-12) ---------- */
/* position + z-index: above connect-fx.css .kx-sky, like the header, messages and composer */
.cn-pinbar { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 6px; padding: 6px 12px 6px 14px; border-bottom: 1px solid var(--cn-line); background: rgba(251, 191, 36, 0.07); }
.cn-pinbar[hidden] { display: none; }
.cn-pinbar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 6px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.cn-pinbar-main:hover { background: rgba(255, 255, 255, 0.05); }
.cn-pinbar-main:focus-visible, .cn-pinbar-btn:focus-visible, .cn-pinbar-x:focus-visible { outline: 2px solid #38b6ff; outline-offset: 1px; }
.cn-pinbar-rail { display: flex; flex-direction: column; gap: 2px; align-self: stretch; width: 3px; flex: none; }
.cn-pinbar-rail i { flex: 1; min-height: 6px; border-radius: 2px; background: rgba(251, 191, 36, 0.3); }
.cn-pinbar-rail i.is-on { background: #fbbf24; }
.cn-pinbar-ic { display: grid; place-items: center; flex: none; color: #fbbf24; }
.cn-pinbar-ic svg { width: 18px; height: 18px; }
.cn-pinbar-tx { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cn-pinbar-tx strong { font-size: 0.78rem; font-weight: 700; color: #fbbf24; }
.cn-pinbar-tx span { font-size: 0.86rem; color: var(--cn-text, #e5ecf7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-pinbar-btn { flex: none; align-self: center; border: 1px solid rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.1); color: #fde68a; border-radius: 99px; padding: 5px 11px; font: 600 0.78rem inherit; cursor: pointer; }
.cn-pinbar-btn:hover { background: rgba(251, 191, 36, 0.2); }
.cn-pinbar-x { flex: none; align-self: center; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: #94a3b8; cursor: pointer; }
.cn-pinbar-x:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.cn-pinbar-x svg { width: 16px; height: 16px; }
@media (max-width: 700px) { .cn-pinbar { padding: 4px 8px 4px 10px; } .cn-pinbar-tx span { font-size: 0.82rem; } }
/* Phones (2026-10-12): with the call, AI, pin and search buttons the channel name spilled over "49 online". The name now
   ends with "..." in its own space and the people button shows only its dot and icon. */
@media (max-width: 640px) {
  .cn-title-w { min-width: 0; overflow: hidden; }
  .cn-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cn-head-people { flex: none; }
  .cn-head-people .cn-hp-n { display: none; }
}

/* Phones (founder 2026-10-12): a panel opened from the main list (Questions, Study partner, Calls, Scheduled...) lives in the
   chat side, which phones hide until a chat is open, so those buttons looked dead. While a panel is open, show it full width. */
@media (max-width: 860px) {
  html:not(.cn-in) .cn-main:has(> .cn-sp) { display: flex; }
  html:not(.cn-in) .cn:has(.cn-main > .cn-sp) .cn-side { display: none; }
  html:not(.cn-in) .cn-main > .cn-sp { top: 12px; left: 12px; right: 12px; width: auto; max-height: calc(100% - 24px); }
  html:not(.cn-in) .cn-main:has(> .cn-sp) > :not(.cn-sp) { visibility: hidden; } /* no chat is open behind it */
}
/* Phones (founder 2026-10-12, iPhone 15 Pro Max: "No horizontal scroll bar should be required in the connect page"): the
   message bar (reactions, Reply, More) waits beside each bubble, hidden, and on a phone that spot is past the screen's
   edge, so the chat scrolled sideways by about 180px at every phone width. A chat never scrolls sideways now; when the bar
   shows, fitTools() (connect-app.js) puts it on the bubble's top corner, inside the screen. */
.cn-scroll { overflow-x: hidden; }
.cn-msgs { max-width: 100%; }
/* iPhone: no zoom when a box is tapped (founder 2026-10-12: "Just as the homepage is responsive and doesn't use side
   scroll bar in mobile, do the same with the connect chat page"). Safari on iPhone zooms the page in when a text box with
   text smaller than 16px gets the cursor (the message box was 15.2px, Find 13.8px) and leaves it zoomed, so the chat is
   wider than the screen and pans sideways. Every box in Connect (message, Find, thread reply, dialogs, the menu's search)
   is 16px on phones; pinch zoom still works. */
@media (max-width: 760px), (pointer: coarse) {
  .cn-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  .cn-page textarea, .cn-page select { font-size: 16px !important; }
}
/* Phones: the message bar always waits on the bubble's top corner (the spot fitTools() picks when there is no room
   beside it), so nothing in a chat is wider than the screen, even hidden: Safari can still slide an overflow-hidden chat
   sideways when it brings a focused box into view. */
@media (max-width: 760px) {
  .cn-msg.is-theirs .cn-body > .cn-tools { top: -14px; left: 0 !important; right: auto !important; }
  .cn-msg.is-mine .cn-body > .cn-tools { top: -14px; right: 0 !important; left: auto !important; }
}
/* Phones: the chat header adapts to the screen (founder 2026-10-12, same request): the buttons kept desktop sizes and
   spacing, so the channel or person's name shrank to 73px on a 393px iPhone, 40px at 360px and nothing at 320px. Below
   480px the buttons are a little smaller and closer together and the name takes the space that is left. */
@media (max-width: 480px) {
  .cn-head { gap: 6px; padding: 8px 10px; }
  .cn-head > .cn-head-ic, .cn-head > .cn-head-pin, .cn-head > .cn-head-people, .cn-head > .cn-head-btn { margin-left: 0 !important; }
  .cn-head-ic { width: 34px; height: 34px; flex: none; }
  .cn-head-people { padding: 0 8px; }
}
@media (max-width: 360px) {
  .cn-head { gap: 4px; padding: 8px; }
  .cn-head-ic { width: 32px; height: 32px; }
  .cn-head-people { padding: 0 6px; }
}

/* Seen counts on channel and group messages, like Telegram's views (connect-app.js paintViews, 2026-10-13). */
.cn-views { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.cn-views[hidden] { display: none; }
.cn-views svg { width: 13px; height: 13px; opacity: 0.85; }
/* The first message of a run hides its time row (the time is next to the name): the row stays for the seen count. */
.cn-msg:not(.is-grouped) .cn-stamp:has(.cn-views:not([hidden])) { display: flex; }

/* A message waiting for a connection (connect-app.js queue). Deliberately quiet: it is not an
   error, it is a message that has not gone yet and will go by itself. */
.cn-msg.is-waiting .cn-bubble { opacity: .6; background: var(--cn-bub, #252a3d) !important; border: 1px dashed rgba(255,255,255,.28); }
.cn-wait { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .72rem; color: var(--cn-muted, #9aa3bd); }
.cn-wait svg { width: 13px; height: 13px; flex: none; }

/* Chat themes (connect-theme.js). The chat already drove its look from custom properties on .cn,
   so a theme only has to change those; these two were the last hardcoded colours. */
.cnt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.cnt-opt { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px;
  cursor: pointer; font: inherit; font-size: .86rem; font-weight: 600; color: #e8ecf8;
  background: rgba(255,255,255,.04); border: 1px solid var(--cn-line); transition: border-color .2s, background .2s; }
.cnt-opt:hover { border-color: var(--cn-act); }
.cnt-opt.is-on { border-color: var(--cn-act); background: rgba(56,182,255,.12); }
.cnt-dot { width: 20px; height: 20px; border-radius: 7px; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.cnt-note { margin: 0 0 12px; font-size: .86rem; color: var(--cn-mute); }
/* Theme swatch: the artwork underneath, the bubble gradient as a corner chip over it. */
.cnt-dot { position: relative; overflow: hidden; }
.cnt-art { position: absolute; inset: 0; border-radius: inherit; background-size: cover; }
.cnt-opt .cnt-dot::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px;
  border-radius: 5px; background: inherit; box-shadow: 0 0 0 2px var(--cn-panel); }

/* ---- Composer pickers and the link row (2026-11-05) ----
   #channel tags, your own websites inside the @ list, :emoji typeahead, and an inline link box
   in place of window.prompt. */
.cn-mention .cn-emo { font-size: 1.15rem; line-height: 1; flex: none; width: 24px; text-align: center; }
.cn-mention-sub { display: block; font-size: 0.72rem; color: #9aa8c7; }
/* A channel in a message reads like a mention and opens that channel. */
.cn-chantag { cursor: pointer; text-decoration: none; }
.cn-chantag:hover { text-decoration: underline; }

.cn-linkbox { display: flex; align-items: center; gap: 7px; margin: 7px 8px 0; flex-wrap: wrap; }
.cn-linkin { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 0.86rem; padding: 8px 10px;
  border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.3); color: #dbe1f2; }
.cn-linkin:focus { outline: 2px solid rgba(56, 182, 255, 0.5); outline-offset: 1px; }
.cn-linkin.is-bad { border-color: #ff8f8f; }
.cn-linkadd, .cn-linkno { font: inherit; font-size: 0.82rem; padding: 7px 13px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); color: #dbe1f2; }
.cn-linkadd { background: rgba(56, 182, 255, 0.22); border-color: rgba(56, 182, 255, 0.45); }
.cn-linkadd:hover, .cn-linkno:hover { filter: brightness(1.15); }