/* Academy Connect, round 3 (connect-more.js): translate, catch me up, voice note text, helpful + top helpers, website and
   event cards, study partners, voice rooms. Radii carry !important because the app's square.css squares everything else. */
.cnx-link { border: 0; background: none; padding: 0; font: inherit; font-size: 0.74rem; font-weight: 600; color: #7cc8ff; cursor: pointer; }
.cnx-link:hover { text-decoration: underline; }
.cnx-h { margin: 16px 0 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8b93ad; }
.cnx-sub { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.45; color: #aeb7d0; }
.cnx-empty { margin: 10px 0; font-size: 0.86rem; line-height: 1.45; color: #8b93ad; }
.cnx-foot { margin: 18px 0 4px; font-size: 0.72rem; color: #6f7894; }
.cnx-in { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px !important; font: inherit; font-size: 0.9rem; color: #fff; background: #0a1226; outline: none; resize: vertical; }
.cnx-in:focus { border-color: #38b6ff; box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.18); }
.cnx-in[type="datetime-local"] { color-scheme: dark; }
.cnx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px !important; font: inherit; font-size: 0.88rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1f7bff, #38b6ff); cursor: pointer; text-decoration: none; white-space: nowrap; }
.cnx-btn:hover { filter: brightness(1.08); }
.cnx-btn:disabled { opacity: 0.55; cursor: default; filter: none; }
.cnx-btn.is-sm { min-height: 32px; padding: 0 12px; font-size: 0.8rem; }
.cnx-dlg { display: flex; flex-direction: column; gap: 12px; min-width: min(460px, 86vw); }
.cnx-f { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; font-weight: 600; color: #aeb7d0; }
.cnx-seg { display: flex; gap: 4px; padding: 4px; margin: 0 0 4px; border-radius: 10px !important; background: rgba(255, 255, 255, 0.05); }
.cnx-sp > .cnx-seg { margin: 10px 14px 0; }
.cnx-seg-b { flex: 1; min-height: 32px; border: 0; border-radius: 7px !important; font: inherit; font-size: 0.78rem; font-weight: 600; color: #aeb7d0; background: transparent; cursor: pointer; }
.cnx-seg-b.is-on { color: #fff; background: rgba(56, 182, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(56, 182, 255, 0.5); }
.cnx-sp .cn-sp-title { display: flex; align-items: center; gap: 8px; color: #fff; }
.cnx-sp .cn-sp-title svg { color: #8fd0ff; }
.cnx-sp .cn-sp-list { padding: 4px 16px 16px; overflow: auto; }

/* 1. Translation under a message */
.cnx-tr { margin-top: 8px; padding: 9px 11px; border-left: 3px solid #7c5cff; border-radius: 8px !important; background: rgba(124, 92, 255, 0.1); }
.cnx-tr.is-busy { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #b9adff; }
.cnx-tr svg { width: 14px; height: 14px; flex: none; color: #b9adff; }
.cnx-tr-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.72rem; font-weight: 600; color: #b9adff; }
.cnx-tr-sel { padding: 2px 6px; border: 1px solid rgba(185, 173, 255, 0.35); border-radius: 6px !important; font: inherit; font-size: 0.72rem; color: #e4ddff; background: #151a38; color-scheme: dark; }
.cnx-tr-h .cnx-link { margin-left: auto; color: #b9adff; }
.cnx-tr-t { margin-top: 6px; white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; line-height: 1.45; color: #ece8ff; }

/* 2. Catch me up */
.cnx-cu-btn svg { color: #ffd166; }
.cnx-cu-head { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 4px; }
.cnx-cu-head strong { font-size: 1rem; color: #fff; }
.cnx-cu-head small { font-size: 0.78rem; color: #8b93ad; }
.cnx-cu-people { display: flex; align-items: center; gap: 4px; margin: 8px 0 2px; font-size: 0.76rem; color: #aeb7d0; }
.cnx-cu-people .cn-av { width: 24px; height: 24px; font-size: 0.6rem; margin-right: -6px; box-shadow: 0 0 0 2px #0f1830; }
.cnx-cu-people span { margin-left: 12px; }
.cnx-cu-list { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 8px; }
.cnx-cu-list li { position: relative; padding-left: 18px; font-size: 0.9rem; line-height: 1.45; color: #dfe5f5; }
.cnx-cu-list li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 7px; height: 7px; border-radius: 50% !important; background: linear-gradient(135deg, #38b6ff, #8b7bff); }
.cnx-cu-q { display: flex; gap: 10px; width: 100%; padding: 9px 10px; margin-bottom: 6px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px !important; font: inherit; text-align: left; color: inherit; background: rgba(255, 255, 255, 0.03); cursor: pointer; }
div.cnx-cu-q { cursor: default; }
.cnx-cu-q:hover { border-color: rgba(56, 182, 255, 0.4); }
.cnx-cu-qi { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50% !important; color: #ffd166; background: rgba(255, 209, 102, 0.14); }
.cnx-cu-q.is-done .cnx-cu-qi { color: #34d399; background: rgba(52, 211, 153, 0.14); }
.cnx-cu-qi svg { width: 14px; height: 14px; }
.cnx-cu-qt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnx-cu-qt strong { font-size: 0.86rem; color: #fff; }
.cnx-cu-qt small { font-size: 0.76rem; line-height: 1.4; color: #9aa3bd; }
.cnx-cu-link { display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px !important; color: inherit; text-decoration: none; background: rgba(56, 182, 255, 0.06); }
.cnx-cu-link:hover { background: rgba(56, 182, 255, 0.13); }
.cnx-cu-link svg { width: 16px; height: 16px; flex: none; color: #7cc8ff; }
.cnx-cu-link span { display: flex; flex-direction: column; min-width: 0; }
.cnx-cu-link strong { font-size: 0.82rem; color: #cfe8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnx-cu-link small { font-size: 0.72rem; color: #8b93ad; }
.cn-msg.cnx-flash .cn-bubble { animation: cnxFlash 1.8s ease; }
@keyframes cnxFlash { 0%, 60% { box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.8); } 100% { box-shadow: none; } }

/* 3. Voice note text */
.cnx-txt { margin-top: 8px; padding: 8px 10px; border-radius: 8px !important; background: rgba(255, 255, 255, 0.05); }
.cnx-txt-h { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #8b93ad; }
.cnx-txt-h svg { width: 13px; height: 13px; }
.cnx-txt-t { margin-top: 4px; font-size: 0.88rem; line-height: 1.45; color: #dfe5f5; white-space: pre-wrap; word-break: break-word; }

/* 4. Helpful + Top helpers */
.cnx-helpful { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 9px; border: 1px solid rgba(52, 211, 153, 0.35); border-radius: 999px !important; font: inherit; font-size: 0.74rem; font-weight: 700; color: #6ee7b7; background: rgba(52, 211, 153, 0.08); cursor: pointer; }
.cnx-helpful svg { width: 13px; height: 13px; }
.cnx-helpful.is-on { color: #04140e; background: #34d399; border-color: #34d399; }
.cnx-helpful:disabled { cursor: default; opacity: 0.9; }
.cnx-help-intro { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 4px; padding: 12px; border-radius: 12px !important; background: linear-gradient(135deg, rgba(52, 211, 153, 0.14), rgba(56, 182, 255, 0.1)); border: 1px solid rgba(52, 211, 153, 0.25); }
.cnx-help-intro strong { font-size: 0.92rem; color: #fff; }
.cnx-help-intro span { font-size: 0.8rem; line-height: 1.45; color: #c9d3ea; }
.cnx-help-intro small { margin-top: 4px; font-size: 0.76rem; font-weight: 700; color: #6ee7b7; }
.cnx-help-r { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px !important; }
.cnx-help-r:hover { background: rgba(255, 255, 255, 0.04); }
.cnx-help-n { width: 22px; text-align: center; font-size: 0.82rem; font-weight: 800; color: #8b93ad; }
.cnx-help-r.is-1 .cnx-help-n { color: #ffd166; } .cnx-help-r.is-2 .cnx-help-n { color: #d6dde9; } .cnx-help-r.is-3 .cnx-help-n { color: #e8a26a; }
.cnx-help-tx { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cnx-help-tx strong { font-size: 0.88rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnx-badge { padding: 1px 7px; border-radius: 999px !important; font-style: normal; font-size: 0.64rem; font-weight: 800; color: #04140e; background: #34d399; }
.cnx-help-c { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 700; color: #6ee7b7; }
.cnx-help-c svg { width: 14px; height: 14px; }

/* Sidebar tools */
.cnx-tool { position: relative; }
.cnx-tool-n { margin-left: auto; white-space: nowrap; padding: 1px 6px; border-radius: 999px !important; font-style: normal; font-size: 0.62rem; font-weight: 800; color: #04140e; background: #34d399; }
.cnx-tool-n[hidden] { display: none; }
.cnx-tool.is-live svg { color: #34d399; animation: cnxPulse 1.6s ease-in-out infinite; }
@keyframes cnxPulse { 50% { opacity: 0.45; } }

/* 5. Website card */
.cn-bubble.cnx-has-card { min-width: min(320px, 70vw); }
.cnx-proj { display: flex; flex-direction: column; margin: 2px 0 8px; overflow: hidden; border: 1px solid rgba(56, 182, 255, 0.28); border-radius: 12px !important; color: inherit; text-decoration: none; background: #0b1530; max-width: 360px; }
.cnx-proj:hover { border-color: #38b6ff; }
.cnx-proj-cov { position: relative; display: block; aspect-ratio: 1200 / 630; background: #0a1226; overflow: hidden; }
.cnx-proj-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cnx-proj-cov.is-blank { background: radial-gradient(120% 120% at 0% 0%, #1f6bff 0%, #0e1e4d 45%, #070d1c 100%); }
.cnx-proj-cov.is-blank::after { content: ""; position: absolute; inset: 22% 30%; border: 2px solid rgba(255, 255, 255, 0.18); border-radius: 10px !important; background: linear-gradient(rgba(255, 255, 255, 0.18) 0 14%, transparent 14%); }
.cnx-proj-tag { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px !important; font-size: 0.68rem; font-weight: 700; color: #fff; background: rgba(4, 12, 30, 0.75); backdrop-filter: blur(4px); }
.cnx-proj-tag svg { width: 12px; height: 12px; color: #34d399; }
.cnx-proj-tx { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 4px; }
.cnx-proj-tx strong { font-size: 0.95rem; color: #fff; }
.cnx-proj-tx small { font-size: 0.76rem; color: #7cc8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnx-proj-go { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 6px 12px 12px; padding: 6px 12px; border-radius: 8px !important; font-size: 0.8rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1f7bff, #38b6ff); }
.cnx-proj-go svg { width: 13px; height: 13px; }
.cnx-sites { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.cnx-site { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px !important; font: inherit; text-align: left; color: inherit; background: rgba(255, 255, 255, 0.03); cursor: pointer; }
.cnx-site:hover { border-color: #38b6ff; background: rgba(56, 182, 255, 0.08); }
.cnx-site-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px !important; color: #34d399; background: rgba(52, 211, 153, 0.12); }
.cnx-site-ic svg { width: 18px; height: 18px; }
.cnx-site-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cnx-site-tx strong { font-size: 0.88rem; color: #fff; }
.cnx-site-tx small { font-size: 0.74rem; color: #8b93ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnx-site-go { font-size: 0.78rem; font-weight: 700; color: #7cc8ff; }

/* 6. Event card */
.cnx-ev { display: flex; gap: 12px; margin: 2px 0 8px; padding: 12px; border: 1px solid rgba(255, 209, 102, 0.3); border-radius: 12px !important; background: linear-gradient(135deg, rgba(255, 209, 102, 0.1), rgba(124, 92, 255, 0.08)); max-width: 420px; }
.cnx-ev.is-live { border-color: #f43f5e; background: linear-gradient(135deg, rgba(244, 63, 94, 0.16), rgba(124, 92, 255, 0.08)); }
.cnx-ev.is-over { opacity: 0.7; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); }
.cnx-ev-date { align-self: flex-start; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; flex: none; padding: 6px 0; border-radius: 10px !important; background: #fff; color: #0b1530; }
.cnx-ev-date small { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; color: #e11d48; }
.cnx-ev-date small:last-child { color: #55607a; letter-spacing: 0; font-weight: 600; }
.cnx-ev-date strong { font-size: 1.5rem; line-height: 1.1; font-weight: 800; }
.cnx-ev-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cnx-ev-k { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ffd166; }
.cnx-ev.is-live .cnx-ev-k { color: #fb7185; }
.cnx-ev-k svg { width: 12px; height: 12px; }
.cnx-ev-t { font-size: 1rem; line-height: 1.3; color: #fff; }
.cnx-ev-when { font-size: 0.8rem; color: #c9d3ea; }
.cnx-ev-d { margin: 4px 0 0; font-size: 0.84rem; line-height: 1.4; color: #dfe5f5; white-space: pre-wrap; }
.cnx-ev-cd { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px !important; font-size: 0.72rem; font-weight: 700; color: #ffd166; background: rgba(255, 209, 102, 0.12); }
.cnx-ev.is-live .cnx-ev-cd { color: #fff; background: #e11d48; }
.cnx-ev-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cnx-ev-go { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 12px; border: 1px solid rgba(52, 211, 153, 0.5); border-radius: 8px !important; font: inherit; font-size: 0.78rem; font-weight: 700; color: #6ee7b7; background: transparent; cursor: pointer; }
.cnx-ev-go svg { width: 13px; height: 13px; }
.cnx-ev-go.is-on { color: #04140e; background: #34d399; border-color: #34d399; }
.cnx-ev-join { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 8px !important; font-size: 0.78rem; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.1); }
.cnx-ev-join.is-live { background: #e11d48; }
.cnx-ev-ppl { display: inline-flex; align-items: center; margin-left: auto; font-size: 0.74rem; color: #aeb7d0; }
.cnx-ev-ppl .cn-av { width: 22px; height: 22px; font-size: 0.55rem; margin-right: -6px; box-shadow: 0 0 0 2px #121a33; }
.cnx-ev-ppl span { margin-left: 10px; }

/* 7. Study partners */
.cnx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cnx-chip { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px !important; font: inherit; font-size: 0.8rem; font-weight: 600; color: #c9d3ea; background: transparent; cursor: pointer; }
.cnx-chip.is-on { color: #fff; border-color: #38b6ff; background: rgba(56, 182, 255, 0.2); }
.cnx-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.84rem; color: #c9d3ea; cursor: pointer; }
.cnx-check input { width: 16px; height: 16px; accent-color: #38b6ff; }
.cnx-sp .cn-sp-list > .cnx-btn { margin-top: 16px; width: 100%; }
.cnx-sp-me { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px !important; font-size: 0.8rem; color: #c9d3ea; background: rgba(56, 182, 255, 0.08); }
.cnx-sp-me .cnx-link { margin-left: auto; }
.cnx-mate { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 6px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px !important; background: rgba(255, 255, 255, 0.03); }
.cnx-mate .cn-av { width: 40px; height: 40px; flex: none; }
.cnx-mate .cn-av.is-online { box-shadow: 0 0 0 2px #0f1830, 0 0 0 4px #34d399; }
.cnx-mate-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnx-mate-tx strong { font-size: 0.9rem; color: #fff; }
.cnx-mate-tx strong small { font-weight: 500; color: #8b93ad; }
.cnx-mate-t { font-size: 0.78rem; color: #7cc8ff; }
.cnx-mate-tx > small { font-size: 0.74rem; color: #8b93ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 8. Voice rooms */
.cnx-room-list { display: grid; gap: 8px; max-height: 340px; overflow: auto; }
.cnx-room { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(52, 211, 153, 0.25); border-radius: 12px !important; background: rgba(52, 211, 153, 0.06); }
.cnx-room-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px !important; color: #04140e; background: linear-gradient(135deg, #34d399, #38b6ff); }
.cnx-room-ic svg { width: 20px; height: 20px; }
.cnx-room-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cnx-room-tx strong { font-size: 0.92rem; color: #fff; }
.cnx-room-tx small { font-size: 0.74rem; color: #9aa3bd; }
.cnx-room-ppl { display: flex; margin-top: 2px; }
.cnx-room-ppl .cn-av { width: 22px; height: 22px; font-size: 0.55rem; margin-right: -6px; box-shadow: 0 0 0 2px #0f1830; }
.cnx-room-new { display: flex; gap: 8px; }
.cnx-room-new .cnx-in { flex: 1; }
.cnx-bar { position: fixed; right: 18px; bottom: 18px; z-index: 2147482000; width: min(360px, calc(100vw - 24px)); padding: 12px; border: 1px solid rgba(52, 211, 153, 0.4); border-radius: 16px !important; color: #e8ecf8; background: rgba(9, 16, 36, 0.96); backdrop-filter: blur(10px); box-shadow: 0 22px 60px -12px rgba(0, 0, 0, 0.85); font-family: var(--font-body, Inter, sans-serif); }
.cnx-bar-h { display: flex; align-items: center; gap: 10px; }
.cnx-bar-live { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px !important; color: #04140e; background: linear-gradient(135deg, #34d399, #38b6ff); }
.cnx-bar-live svg { width: 18px; height: 18px; animation: cnxPulse 1.6s ease-in-out infinite; }
.cnx-bar-t { display: flex; flex-direction: column; min-width: 0; }
.cnx-bar-t strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnx-bar-t small { font-size: 0.72rem; color: #6ee7b7; }
.cnx-bar-ppl { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.cnx-bar-p { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; font-size: 0.68rem; color: #c9d3ea; text-align: center; }
.cnx-bar-p .cn-av { width: 40px; height: 40px; transition: box-shadow 0.15s ease; }
.cnx-bar-p.is-talking .cn-av { box-shadow: 0 0 0 3px #34d399, 0 0 18px rgba(52, 211, 153, 0.7); }
.cnx-bar-p.is-weak .cn-av { opacity: 0.5; }
.cnx-bar-p span { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnx-bar-mi { position: absolute; top: 26px; right: 6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50% !important; color: #fff; background: #e11d48; }
.cnx-bar-mi svg { width: 11px; height: 11px; }
.cnx-bar-c { display: flex; gap: 8px; }
.cnx-bar-b { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px !important; font: inherit; font-size: 0.8rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.06); cursor: pointer; }
.cnx-bar-b svg { width: 16px; height: 16px; }
.cnx-bar-b.is-off { color: #fff; background: #e11d48; border-color: #e11d48; }
.cnx-bar-b.is-leave { border-color: transparent; background: #e11d48; }
@media (max-width: 760px) { .cnx-bar { right: 12px; left: 12px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .cnx-tool.is-live svg, .cnx-bar-live svg, .cn-msg.cnx-flash .cn-bubble { animation: none; } }

/* Study partner: call buttons on a match (founder 2026-10-12) */
.cnx-btn.cnx-call { display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; margin-left: 6px; color: #bbf7d0; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); }
.cnx-btn.cnx-call svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .cnx-mate { flex-wrap: wrap; } .cnx-mate-tx { flex: 1 1 calc(100% - 60px); min-width: 0; } .cnx-mate > .cnx-btn:not(.cnx-call) { margin-left: 52px; } }

/* ---------- Group video calls (founder 2026-10-12) ---------- */
.cnx-gc { position: relative; z-index: 6; display: flex; align-items: center; gap: 10px; margin: 8px 16px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.1); }
.cnx-gc-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #bbf7d0; background: rgba(34, 197, 94, 0.2); flex: none; }
.cnx-gc-ic svg { width: 18px; height: 18px; }
.cnx-gc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cnx-gc-tx small { color: #9fb0c8; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnx-gc-ppl { display: flex; } .cnx-gc-ppl > * { width: 26px; height: 26px; margin-left: -6px; border: 2px solid #0f1830; border-radius: 50%; font-size: 0.6rem; }
@media (max-width: 560px) { .cnx-gc-ppl { display: none; } .cnx-gc { margin: 6px 10px 0; } }
.cnx-call { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; background: radial-gradient(1200px 700px at 50% -10%, #12224a 0%, #060a16 60%); color: #fff; }
.cnx-call-top { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 16px 10px; }
.cnx-call-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cnx-call-t strong { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnx-call-t small { color: #9fb0c8; font-size: 0.8rem; }
.cnx-call-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.cnx-call-ic svg { width: 18px; height: 18px; }
.cnx-tiles { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 0 12px; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.cnx-tiles[data-n="2"] { grid-template-columns: 1fr 1fr; }
.cnx-tiles[data-n="3"], .cnx-tiles[data-n="4"] { grid-template-columns: 1fr 1fr; }
.cnx-tiles[data-n="5"], .cnx-tiles[data-n="6"] { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) and (orientation: portrait) {
  .cnx-tiles[data-n="2"] { grid-template-columns: 1fr; }
  .cnx-tiles[data-n="5"], .cnx-tiles[data-n="6"] { grid-template-columns: 1fr 1fr; }
}
.cnx-tile { position: relative; min-height: 0; overflow: hidden; border-radius: 16px; background: #0d1530; border: 2px solid rgba(255,255,255,.06); transition: border-color .2s ease; }
.cnx-tile.is-talking { border-color: #22c55e; }
.cnx-tile.is-weak { opacity: .75; }
.cnx-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0d1530; }
.cnx-tile video.is-mirror { transform: scaleX(-1); }
.cnx-tile-av { position: absolute; inset: 0; display: none; place-items: center; }
.cnx-tile-av > * { width: 84px !important; height: 84px !important; font-size: 1.6rem !important; }
.cnx-tile.no-video video { visibility: hidden; }
.cnx-tile.no-video .cnx-tile-av { display: grid; }
.cnx-tile-n { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: rgba(0,0,0,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnx-tile-n.is-muted::after { content: " · muted"; color: #fca5a5; }
.cnx-call-c { display: flex; justify-content: center; gap: 14px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
.cnx-call-b { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 0; color: #fff; background: rgba(255,255,255,.12); cursor: pointer; }
.cnx-call-b svg { width: 22px; height: 22px; }
.cnx-call-b.is-off { background: #fff; color: #0b1020; }
.cnx-call-b.is-leave { background: #e11d48; }
.cnx-call-b:focus-visible, .cnx-call-ic:focus-visible { outline: 2px solid #38b6ff; outline-offset: 2px; }
/* Minimised: a small window in the corner; tap it to come back */
.cnx-call.is-min { inset: auto 16px calc(170px + env(safe-area-inset-bottom)) auto; width: 200px; height: 150px; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px -10px rgba(0,0,0,.8); cursor: pointer; }
.cnx-call.is-min .cnx-call-top, .cnx-call.is-min .cnx-call-c { display: none; }
.cnx-call.is-min .cnx-tiles { padding: 0; gap: 2px; }
.cnx-call.is-min .cnx-tile { border-radius: 0; border: 0; }
.cnx-call.is-min .cnx-tile-n { display: none; }
html.cnx-in-call body { overflow: hidden; }
@media (max-width: 700px) { .cnx-call.is-min { bottom: calc(210px + env(safe-area-inset-bottom)); width: 150px; height: 200px; } }