/* connect-neat.js (founder 2026-11-04, "Add all"): a neater, calmer Connect in every view. */

/* 1. Calmer badges: a dot for a busy channel, grey for one nobody can post in. */
.cn-lists .cn-item .cn-badge.cnn-dot { font-size: 0; min-width: 0; width: 9px; height: 9px; padding: 0; border-radius: 50% !important; box-shadow: 0 0 0 3px rgba(47, 139, 255, 0.18); }
.cn-lists .cn-item.cnn-ro .cn-badge.cnn-dot { background: #56617f; box-shadow: none; }
.cn-lists .cn-item.cnn-ro .cn-name { opacity: 0.78; font-weight: 500; }

/* 2. TaniX AI's new-website posts as one card. */
.cn-msg.cnn-hide { display: none !important; }
.cnn-dg { max-width: 540px; background: #121c33; border: 1px solid rgba(140, 170, 255, 0.16); }
.cnn-dg-h { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 14px; font-size: 0.86rem; font-weight: 600; color: #e8eefb; border-bottom: 1px solid rgba(140, 170, 255, 0.12); }
.cnn-dg-h svg { width: 15px; height: 15px; flex: none; color: #f2b33d; }
.cnn-dg-h span { flex: 1; }
.cnn-dg-tog { padding: 3px 9px; border: 0; font: inherit; font-size: 0.74rem; font-weight: 600; color: #8fb8ff; background: rgba(47, 139, 255, 0.1); cursor: pointer; }
.cnn-dg-tog:hover { color: #fff; background: rgba(47, 139, 255, 0.2); }
.cnn-dg-r { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(140, 170, 255, 0.08); }
.cnn-dg-r:last-child { border-bottom: 0; }
.cnn-dg-pic { display: block; width: 88px; height: 46px; overflow: hidden; background: #0b1226; border: 1px solid rgba(245, 184, 46, 0.35); }
.cnn-dg-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cnn-dg-tx { min-width: 0; }
.cnn-dg-tx b { display: block; font-size: 0.9rem; font-weight: 600; color: #f2f6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnn-dg-tx small { display: block; margin-top: 2px; font-size: 0.76rem; color: #8e9bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnn-dg-tx small a { color: #f2b33d; text-decoration: none; }
.cnn-dg-tx small a:hover { text-decoration: underline; }
.cnn-dg-love { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border: 0; font: inherit; font-size: 0.74rem; font-weight: 700; color: #9fb0d6; background: transparent; cursor: pointer; }
.cnn-dg-love svg { width: 17px; height: 17px; }
.cnn-dg-love:hover, .cnn-dg-love.is-on { color: #f87171; }
.cnn-dg-go { padding: 6px 12px; font-size: 0.76rem; font-weight: 600; color: #fff; background: #2f8bff; text-decoration: none; }
.cnn-dg-go:hover { background: #1f7bff; }
@media (max-width: 560px) { .cnn-dg-r { grid-template-columns: 64px minmax(0, 1fr) auto; } .cnn-dg-pic { width: 64px; height: 34px; } .cnn-dg-love { display: none; } }

/* 3. Link previews with a picture: picture left, words right. */
.lp-card:has(.lp-pic) { flex-direction: row !important; max-width: 460px !important; align-items: stretch !important; }
.lp-card .lp-pic { flex: 0 0 128px !important; width: 128px !important; max-width: 128px !important; height: auto !important; max-height: none !important; min-height: 84px; aspect-ratio: auto !important; overflow: hidden; }
.lp-card .lp-pic img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; }
.lp-card:has(.lp-pic) .lp-tx { flex: 1 1 0 !important; min-width: 0 !important; padding: 10px 12px !important; }
.lp-card:has(.lp-pic) .lp-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The desktop app's "Visit website" on a student website's card (connect-pro.css ::after) goes on its own line. */
.lp-card:has(.lp-pic) { flex-wrap: wrap !important; }
html.cpr .lp-card:has(.lp-pic)[href*=".tanix.app"]::after { flex: 1 0 100%; justify-content: center; margin: 0 12px 12px; }
@media (max-width: 560px) { .lp-card .lp-pic { flex-basis: 96px !important; width: 96px !important; max-width: 96px !important; min-height: 72px; } }

/* 4. Long messages fold. */
.cn-text.cnn-folded { max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.cnn-more { display: inline-flex; margin: 6px 0 2px; padding: 4px 10px; border: 0; font: inherit; font-size: 0.78rem; font-weight: 600; color: #8fb8ff; background: rgba(47, 139, 255, 0.1); cursor: pointer; }
.cnn-more:hover { color: #fff; background: rgba(47, 139, 255, 0.2); }
.cn-bubble.has-img .cnn-more { margin-left: 7px; }

/* 5. No country word beside names. */
.cn-meta .cn-ctry { display: none !important; }

/* 6. "New messages": Connect's own line, in coral. */
#cnMsgs .cn-new { color: #ff7a6b; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
#cnMsgs .cn-new::before, #cnMsgs .cn-new::after { background: #ff7a6b; opacity: 0.85; }
#cnMsgs .cn-new::after { flex: 0 0 18px; }

/* 7. The date stays at the top while you scroll: a chip, no rule across the messages. */
#cnMsgs .cn-day { position: sticky; top: 8px; z-index: 3; pointer-events: none; }
#cnMsgs .cn-day::before, #cnMsgs .cn-day::after { visibility: hidden; }
#cnMsgs .cn-day span { padding: 4px 12px; color: #aab4cf; background: #111a2e; border: 1px solid rgba(140, 170, 255, 0.18); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.7); }

/* 9. Loading shapes. */
.cn-loading.cnn-skel { display: block; margin: 0; padding: 6px 0; font-size: 0; }
.cnn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cnn-skel-r { display: flex; gap: 12px; padding: 12px 24px; }
.cnn-skel-r i { flex: none; width: 40px; height: 40px; border-radius: 50% !important; background: #1a2440; }
.cnn-skel-r > span { flex: 1; display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.cnn-skel-r b { display: block; height: 10px; background: linear-gradient(90deg, #18213a, #243154 50%, #18213a); background-size: 200% 100%; animation: cnnShine 1.4s ease-in-out infinite; }
@keyframes cnnShine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .cnn-skel-r b { animation: none; } }

/* 10. The arrow to the newest message (it replaces the "New messages" pill). */
#cnJump { display: none !important; }
.cnn-down { position: absolute; right: 24px; bottom: 128px; z-index: 6; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; color: #fff; background: #2f8bff; box-shadow: 0 14px 30px -10px rgba(47, 139, 255, 0.7); cursor: pointer; }
.cnn-down[hidden] { display: none; }
.cnn-down svg { width: 22px; height: 22px; }
.cnn-down em { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 0.7rem; font-style: normal; font-weight: 700; line-height: 20px; text-align: center; color: #fff; background: #ff7a6b; border-radius: 999px !important; box-shadow: 0 0 0 2px #0b1020; }
.cnn-down em[hidden] { display: none; }
.cnn-down:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cnq-at { bottom: 186px; right: 24px; }
@media (max-width: 760px) { .cnn-down { right: 12px; bottom: 118px; width: 44px; height: 44px; } .cnq-at { right: 14px; bottom: 170px; } }

/* 11. Keyboard shortcuts. */
.cnn-keys { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(3, 6, 14, 0.6); }
.cnn-keys-p { width: 520px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: #0f172b; border: 1px solid rgba(140, 170, 255, 0.18); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9); }
.cnn-keys-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(140, 170, 255, 0.12); }
.cnn-keys-h strong { font-size: 1.02rem; color: #fff; }
.cnn-keys-x { padding: 4px 10px; border: 0; font: inherit; font-size: 0.78rem; font-weight: 600; color: #c9d3ea; background: rgba(255, 255, 255, 0.06); cursor: pointer; }
.cnn-keys-g { padding: 4px 18px 16px; }
.cnn-keys-g h4 { margin: 14px 0 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7d89a8; }
.cnn-keys-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 0.88rem; color: #d6def0; border-bottom: 1px solid rgba(140, 170, 255, 0.07); }
.cnn-keys-k { display: flex; gap: 4px; flex: none; }
.cnn-keys-k kbd { min-width: 24px; padding: 3px 7px; font: inherit; font-size: 0.74rem; font-weight: 600; text-align: center; color: #e8eefb; background: #1a2440; border: 1px solid rgba(140, 170, 255, 0.22); border-bottom-width: 2px; }

/* 12. Text size. */
html.cnn-ts-s #cnMsgs .cn-text { font-size: 0.86rem !important; line-height: 1.45 !important; }
html.cnn-ts-l #cnMsgs .cn-text { font-size: 1.14rem !important; line-height: 1.58 !important; }
html.cnn-ts-l #cnMsgs .cn-who { font-size: 1rem !important; }
.cnn-ts { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 0.84rem; color: #c9d3ea; }
.cnn-ts.is-dlg { padding: 12px 18px 16px; border-top: 1px solid rgba(140, 170, 255, 0.12); }
.cnn-ts-seg { display: flex; border: 1px solid rgba(140, 170, 255, 0.22); }
.cnn-ts-seg button { padding: 5px 10px; border: 0; font: inherit; font-size: 0.76rem; font-weight: 600; color: #9fb0d6; background: transparent; cursor: pointer; }
.cnn-ts-seg button + button { border-left: 1px solid rgba(140, 170, 255, 0.22); }
.cnn-ts-seg button.is-on { color: #fff; background: #2f8bff; }

/* The desktop app's light theme (connect-pro.css cpr-light). */
html.cpr.cpr-light .cnn-dg { background: #ffffff; border-color: rgba(20, 33, 61, 0.14); }
html.cpr.cpr-light .cnn-dg-h { color: #14213d; border-color: rgba(20, 33, 61, 0.1); }
html.cpr.cpr-light .cnn-dg-r { border-color: rgba(20, 33, 61, 0.07); }
html.cpr.cpr-light .cnn-dg-tx b { color: #14213d; }
html.cpr.cpr-light .cnn-dg-tx small { color: #5b6785; }
html.cpr.cpr-light .cnn-dg-tx small a { color: #a86a00; }
html.cpr.cpr-light #cnMsgs .cn-day span { color: #4a5675; background: #ffffff; border-color: rgba(20, 33, 61, 0.14); box-shadow: 0 6px 16px -10px rgba(20, 33, 61, 0.45); }
html.cpr.cpr-light .cnn-skel-r i { background: #e3e8f2; }
html.cpr.cpr-light .cnn-skel-r b { background: linear-gradient(90deg, #e6ebf4, #f3f6fb 50%, #e6ebf4); background-size: 200% 100%; }
html.cpr.cpr-light .cnn-keys-p { background: #ffffff; border-color: rgba(20, 33, 61, 0.14); }
html.cpr.cpr-light .cnn-keys-h strong, html.cpr.cpr-light .cnn-keys-r { color: #14213d; }
html.cpr.cpr-light .cnn-keys-k kbd { color: #14213d; background: #f1f4fa; border-color: rgba(20, 33, 61, 0.2); }
html.cpr.cpr-light .cnn-ts { color: #2c3a58; }
html.cpr.cpr-light .cnn-ts-seg button { color: #4a5675; }
html.cpr.cpr-light .cnn-ts-seg button.is-on { color: #fff; }