/* Academy Connect, more features (connect-plus.js, founder 2026-10-10). square.css squares every corner, so radii need !important. */
.cnp-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 14px 8px; }
.cnp-tool { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px !important; font: inherit; font-size: 0.78rem; font-weight: 600; color: #c3cae0; background: rgba(255, 255, 255, 0.03); cursor: pointer; text-align: left; }
.cnp-tool svg { width: 15px; height: 15px; flex: none; color: #8fd0ff; }
.cnp-tool:hover { color: #fff; border-color: rgba(56, 182, 255, 0.45); background: rgba(56, 182, 255, 0.08); }
.cnp-tool[hidden] { display: none; }
.cnp-tool.cnp-bc { grid-column: 1 / -1; color: #fde68a; border-color: rgba(251, 191, 36, 0.3); background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.02)); }
.cnp-tool.cnp-bc svg { color: #fbbf24; }
.cnp-tool.cnp-push.is-on { color: #bbf7d0; border-color: rgba(52, 211, 153, 0.35); }
.cnp-tool.cnp-push.is-on svg { color: #34d399; }
.cnp-groups { margin-top: 4px; }
.cnp-gav { display: inline-grid !important; place-items: center; color: #c4b5fd; background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(56, 182, 255, 0.25)) !important; }
.cnp-gav svg { width: 16px; height: 16px; }

/* Inside messages */
.cnp-solved { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-bottom: 6px; padding: 2px 9px 2px 6px; border-radius: 999px !important; font-size: 0.72rem; font-weight: 700; color: #04140d; background: linear-gradient(135deg, #6ee7b7, #10b981); }
.cnp-solved svg { width: 12px; height: 12px; }
.cnp-file { display: flex; align-items: center; gap: 12px; min-width: min(300px, 70vw); margin: 4px 0; padding: 10px 12px; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.18); color: inherit; text-decoration: none; }
.cnp-file:hover { border-color: rgba(56, 182, 255, 0.55); background: rgba(56, 182, 255, 0.1); }
.cnp-file-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px !important; color: #fff; background: linear-gradient(135deg, #64748b, #334155); }
.cnp-file-ic.is-pdf { background: linear-gradient(135deg, #f87171, #dc2626); }
.cnp-file-ic.is-zip { background: linear-gradient(135deg, #fbbf24, #d97706); }
.cnp-file-ic.is-doc, .cnp-file-ic.is-docx { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.cnp-file-ic.is-xls, .cnp-file-ic.is-xlsx, .cnp-file-ic.is-csv { background: linear-gradient(135deg, #34d399, #059669); }
.cnp-file-ic.is-ppt, .cnp-file-ic.is-pptx { background: linear-gradient(135deg, #fb923c, #ea580c); }
.cnp-file-ic.is-code { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.cnp-file-ic svg { width: 20px; height: 20px; }
.cnp-file-tx { min-width: 0; flex: 1; }
.cnp-file-tx strong { display: block; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnp-file-tx small { display: block; margin-top: 2px; font-size: 0.72rem; opacity: 0.75; }
.cnp-file-dl { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50% !important; background: rgba(255, 255, 255, 0.1); }
.cnp-file-dl svg { width: 15px; height: 15px; }
.cnp-poll { min-width: min(320px, 72vw); margin: 4px 0; padding: 12px; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.2); }
.cnp-poll-h { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.cnp-poll-h svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #38b6ff; }
.cnp-poll-h strong { font-size: 0.92rem; line-height: 1.35; }
.cnp-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 6px; padding: 8px 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px !important; font: inherit; font-size: 0.84rem; color: inherit; background: rgba(255, 255, 255, 0.03); cursor: pointer; text-align: left; }
.cnp-opt::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: linear-gradient(90deg, rgba(56, 182, 255, 0.35), rgba(56, 182, 255, 0.12)); transition: width 0.4s ease; }
.cnp-opt.is-mine { border-color: rgba(56, 182, 255, 0.7); }
.cnp-opt.is-mine::before { background: linear-gradient(90deg, rgba(52, 211, 153, 0.45), rgba(52, 211, 153, 0.15)); }
.cnp-opt:disabled { cursor: default; }
.cnp-opt > span { position: relative; }
.cnp-opt-t { display: flex; align-items: center; gap: 8px; }
.cnp-tick { width: 14px; height: 14px; flex: none; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50% !important; }
.cnp-tick.is-box { border-radius: 4px !important; }
.cnp-opt.is-mine .cnp-tick { border-color: #34d399; background: #34d399; box-shadow: inset 0 0 0 2px #0b1430; }
.cnp-opt-n { font-weight: 700; font-size: 0.78rem; }
.cnp-poll-f { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 0.72rem; opacity: 0.8; }
.cnp-link { padding: 0; border: 0; font: inherit; font-size: 0.78rem; font-weight: 700; color: #8fd0ff; background: none; cursor: pointer; }
.cnp-link:hover { text-decoration: underline; }
.cnp-link.is-danger { color: #fca5a5; }
.cnp-thread { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px !important; font: inherit; font-size: 0.74rem; font-weight: 700; color: #cfe6ff; background: rgba(56, 182, 255, 0.1); cursor: pointer; }
.cnp-thread svg { width: 13px; height: 13px; }
.cnp-thread:hover { border-color: rgba(56, 182, 255, 0.6); }
.cn-team.is-bot { color: #ddd6fe; background: linear-gradient(135deg, rgba(139, 92, 246, 0.45), rgba(56, 182, 255, 0.35)); }

/* Composer */
.cn-compose.cnp-ro .cn-box { opacity: 0.6; }
.cnp-quick { position: absolute; left: 16px; bottom: calc(100% - 6px); z-index: 30; width: min(420px, calc(100% - 32px)); max-height: 340px; display: flex; flex-direction: column; padding: 10px; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.14); background: #0f1a33; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9); }
.cnp-quick-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 0.86rem; }
.cnp-quick-l { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.cnp-qr { display: flex; align-items: center; gap: 6px; }
.cnp-qr-t { flex: 1; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px !important; font: inherit; font-size: 0.82rem; color: #dbe1f2; background: rgba(255, 255, 255, 0.03); cursor: pointer; text-align: left; white-space: pre-wrap; max-height: 64px; overflow: hidden; }
.cnp-qr-t:hover { border-color: rgba(56, 182, 255, 0.5); color: #fff; }
.cnp-x { width: 28px; height: 28px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px !important; color: #8b93ad; background: transparent; cursor: pointer; }
.cnp-x svg { width: 14px; height: 14px; }
.cnp-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.cn-compose { position: relative; }

/* Dialogs */
.cnp-dlg .cn-in { height: auto; min-height: 38px; padding: 8px 12px; }
.cnp-dlg textarea.cn-in { resize: vertical; line-height: 1.5; }
.cnp-lbl { margin: 6px 0 -2px; font-size: 0.78rem; font-weight: 700; color: #c3cae0; }
.cnp-check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; color: #dbe1f2; cursor: pointer; line-height: 1.4; }
.cnp-check input { margin-top: 2px; accent-color: #38b6ff; }
.cnp-opts { display: flex; flex-direction: column; gap: 6px; }
.cnp-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cnp-when .cn-in { width: auto; flex: 1 1 200px; color-scheme: dark; }
.cnp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px !important; font: inherit; font-size: 0.86rem; font-weight: 700; color: #dbe1f2; background: rgba(255, 255, 255, 0.05); cursor: pointer; }
.cnp-btn svg { width: 16px; height: 16px; }
.cnp-btn.is-main { border-color: transparent; color: #fff; background: linear-gradient(135deg, #38b6ff, #1f7bff); }
.cnp-btn.is-danger { color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }
.cnp-btn:disabled { opacity: 0.6; cursor: progress; }
.cnp-row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.cnp-row2 .cnp-btn { flex: 1 1 auto; }
.cnp-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.cnp-pchip { padding: 4px 10px; border: 1px solid rgba(56, 182, 255, 0.45); border-radius: 999px !important; font: inherit; font-size: 0.78rem; color: #cfe6ff; background: rgba(56, 182, 255, 0.12); cursor: pointer; }
.cnp-pick, .cnp-mlist { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.cnp-pr { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 9px !important; font: inherit; font-size: 0.86rem; color: #dbe1f2; background: transparent; text-align: left; }
button.cnp-pr { cursor: pointer; }
button.cnp-pr:hover { background: rgba(255, 255, 255, 0.06); }
.cnp-pr > span:not(.cn-av) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnp-pr small { font-size: 0.72rem; color: #8b93ad; }
.cnp-own { color: #fbbf24 !important; }
.cnp-hist { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 4px; }

/* Side panels */
.cnp-tabs { display: flex; gap: 4px; padding: 8px 12px 0; }
.cnp-tab { flex: 1; height: 32px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px !important; font: inherit; font-size: 0.8rem; font-weight: 700; color: #8b93ad; background: transparent; cursor: pointer; }
.cnp-tab.is-on { color: #fff; border-color: rgba(56, 182, 255, 0.55); background: rgba(56, 182, 255, 0.15); }
.cnp-row .cn-sp-b.is-full { white-space: pre-wrap; display: block; -webkit-line-clamp: unset; overflow: visible; }
.cnp-chips { display: flex; gap: 6px; margin-top: 6px; align-self: flex-start; justify-content: flex-start; }
.cnp-chip { padding: 1px 8px; border-radius: 999px !important; font-size: 0.7rem; font-weight: 700; color: #cfe6ff; background: rgba(56, 182, 255, 0.14); }
.cnp-chip.is-ok { color: #04140d; background: #34d399; }
.cnp-chip.is-warn { color: #1a1204; background: #fbbf24; }
.cnp-th-sep { margin: 6px 12px; font-size: 0.74rem; font-weight: 700; color: #8b93ad; text-transform: uppercase; letter-spacing: 0.06em; }
.cnp-th-reply { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cnp-th-reply textarea { flex: 1 1 auto; width: auto; min-width: 0; height: auto; min-height: 44px; padding: 8px 10px; resize: none; }
.cnp-th-reply .cnp-btn { flex: none; width: auto; }
.cnp-members svg { width: 14px; height: 14px; }

/* Search filters (connect-app.js) */
.cn-sp-f { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.cn-sp-chip { padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px !important; font: inherit; font-size: 0.76rem; font-weight: 600; color: #c3cae0; background: transparent; cursor: pointer; }
.cn-sp-chip.is-on { color: #fff; border-color: rgba(56, 182, 255, 0.6); background: rgba(56, 182, 255, 0.16); }
.cn-sp-f2 { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px; flex-wrap: wrap; }
.cn-sp-from { max-width: 200px; height: 32px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px !important; font: inherit; font-size: 0.8rem; color: #dbe1f2; background: #0c1428; }
.cn-sp-here { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #c3cae0; cursor: pointer; }
@media (max-width: 640px) { .cnp-tools { grid-template-columns: 1fr 1fr; } .cnp-file, .cnp-poll { min-width: 0; } }

/* Groups, round 2 (founder 2026-10-10: "Add all the 12 featuers") */
.cn-sys { display: flex; justify-content: center; margin: 10px 24px; }
.cn-sys span { max-width: 80%; padding: 4px 12px; border-radius: 999px !important; font-size: 0.74rem; color: #aab4cc; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); text-align: center; }
.cnp-seen { display: inline-flex; align-items: center; gap: 5px; align-self: flex-end; margin-top: 6px; padding: 2px 8px; border: 0; border-radius: 999px !important; font: inherit; font-size: 0.7rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.12); cursor: pointer; }
.cnp-seen svg { width: 12px; height: 12px; }
.cnp-disc { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 6px; padding: 2px 8px; border: 1px solid rgba(56, 182, 255, 0.35); border-radius: 999px !important; font: inherit; font-size: 0.7rem; font-weight: 700; color: #8fd0ff; background: rgba(56, 182, 255, 0.08); cursor: pointer; }
.cnp-disc svg { width: 12px; height: 12px; }
.cnp-tool.cnp-ag[hidden] { display: none; }
.cnp-gav img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cnp-gtabs { padding: 0 0 6px; }
.cnp-pane { display: flex; flex-direction: column; gap: 10px; }
.cnp-pane[hidden] { display: none; }
.cnp-gtop { display: flex; align-items: center; gap: 14px; }
.cnp-gphoto { width: 64px; height: 64px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 18px !important; color: #c4b5fd; background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(56, 182, 255, 0.25)); }
.cnp-gphoto img { width: 100%; height: 100%; object-fit: cover; }
.cnp-gphoto svg { width: 28px; height: 28px; }
.cnp-gname { display: block; font-size: 1.05rem; color: #fff; }
.cnp-gtop small { display: block; margin-top: 3px; font-size: 0.78rem; color: #8b93ad; }
.cnp-gdesc { margin: 0; font-size: 0.86rem; color: #dbe1f2; line-height: 1.5; white-space: pre-wrap; }
.cnp-inv { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cnp-inv .cn-in { flex: 1 1 200px; font-size: 0.78rem; }
.cnp-mlist-tall { max-height: 320px; }
.cnp-adm { color: #8fd0ff !important; }
.cnp-pr.is-dim { opacity: 0.6; }
.cnp-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.cnp-mthumb { aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 10px !important; background: #0b1430; cursor: pointer; }
.cnp-mthumb img { width: 100%; height: 100%; object-fit: cover; }
.cnp-mrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px !important; color: #dbe1f2; text-decoration: none; font-size: 0.84rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
.cnp-mrow svg { width: 16px; height: 16px; flex: none; color: #8fd0ff; }

/* A video or an audio file plays in the chat (founder 2026-11-02). The file row underneath is
   untouched, so saving it is still one tap. */
.cnp-play { display: block; width: 100%; margin-bottom: 8px; background: #050c1e; }
.cnp-play-video { max-height: 58vh; aspect-ratio: 16 / 9; object-fit: contain; }
.cnp-play-audio { height: 40px; }

/* Save this chat / Save all photos, at the top of Shared media (founder 2026-11-02). */
.cnp-mkeep { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.cnp-mkeep-b {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: #dbe1f2;
  padding: 9px 13px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
}
.cnp-mkeep-b:hover { color: #fff; background: rgba(255, 255, 255, .11); border-color: rgba(124, 208, 255, .5); }
.cnp-mkeep-b[disabled] { opacity: .6; cursor: progress; }
.cnp-mkeep-b svg { width: 15px; height: 15px; color: #8fd0ff; }
@media (max-width: 560px) { .cnp-play-video { max-height: 44vh; } }

/* Saving from Shared media (founder 2026-11-02: a photo could be seen but not kept). The thumbnail
   still goes to the message; the small tray in its corner keeps the file. */
.cnp-mphoto { position: relative; }
.cnp-mphoto .cnp-mthumb { width: 100%; display: block; }
.cnp-mdl {
  position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center;
  width: 26px; height: 26px; color: #eaf1ff; background: rgba(6, 12, 30, .72);
  border: 1px solid rgba(255, 255, 255, .22); opacity: 0; transition: opacity .15s ease;
}
.cnp-mphoto:hover .cnp-mdl, .cnp-mdl:focus-visible { opacity: 1; }
.cnp-mdl svg { width: 14px; height: 14px; color: #eaf1ff; }
/* On a touch screen there is no hover, so it is always there. */
@media (hover: none) { .cnp-mdl { opacity: 1; } }

/* A voice note in the panel: go to it, play it here, or keep it. */
.cnp-mvoice { flex-wrap: wrap; gap: 8px 10px; }
.cnp-mvgo {
  display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 0.84rem; color: #dbe1f2; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.cnp-mvgo:hover { color: #fff; }
.cnp-mvoice audio { flex: 1 1 180px; min-width: 0; height: 32px; }
.cnp-mvoice .cnp-mdl { position: static; opacity: 1; flex: none; }
.cnp-mrow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnp-mrow small { color: #8b93ad; }
.cnp-mrow:hover { border-color: rgba(56, 182, 255, 0.45); }
.cnp-gcard { align-items: center; }
.cnp-gcard .cnp-btn { flex: none; min-height: 34px; padding: 0 12px; font-size: 0.8rem; }
.cnp-gacts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.cnp-search { margin: 10px 12px 0; width: auto !important; }

/* Questions: search box (founder 2026-10-12) */
.cnp-qfind { display: block; flex: none; min-height: 40px; box-sizing: border-box; width: calc(100% - 28px); margin: 4px 14px 8px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line, rgba(148,163,184,.25)); background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: .92rem; }
.cnp-qfind:focus { outline: 2px solid #1f7bff; outline-offset: 1px; }