/* My status in Connect: Available, Away, Offline (connect-status.js, founder 2026-10-13). */
.cns { position: relative; padding: 0 14px 10px; }
.cns[hidden] { display: none; }
.cns-btn { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px; border-radius: 10px; font: inherit; color: #e8ecf8; text-align: left; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--cn-line, rgba(255, 255, 255, 0.08)); cursor: pointer; }
.cns-btn:hover, .cns.is-open .cns-btn { background: rgba(255, 255, 255, 0.07); }
.cns-btn:focus-visible, .cns-opt:focus-visible { outline: 2px solid var(--cn-act, #38b6ff); outline-offset: 2px; }
.cns-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.cns-txt small { font-size: 0.7rem; color: var(--cn-mute, #8b93ad); }
.cns-txt strong { font-size: 0.86rem; font-weight: 600; color: #fff; }
.cns-chev { display: inline-grid; color: var(--cn-mute, #8b93ad); transition: transform 0.15s; }
.cns-chev svg { width: 16px; height: 16px; }
.cns.is-open .cns-chev { transform: rotate(180deg); }

.cns-dot { flex: none; width: 10px; height: 10px; border-radius: 50% !important; box-sizing: border-box; }
.cns-dot.is-available { background: var(--cn-ok, #34d399); box-shadow: 0 0 6px var(--cn-ok, #34d399); }
.cns-dot.is-away { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.8); }
.cns-dot.is-offline { background: transparent; border: 2px solid #8b93ad; }

.cns-menu { position: absolute; z-index: 60; top: calc(100% - 4px); left: 14px; right: 14px; padding: 6px; border-radius: 12px; background: #0f1830; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.7); }
.cns-menu[hidden] { display: none; }
.cns-opt { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; font: inherit; color: #e8ecf8; text-align: left; background: none; border: 0; cursor: pointer; }
.cns-opt:hover, .cns-opt:focus-visible { background: rgba(255, 255, 255, 0.07); }
.cns-opt .cns-txt small { white-space: normal; }
.cns-check { flex: none; width: 18px; height: 18px; color: var(--cn-act, #38b6ff); }
.cns-check svg { width: 18px; height: 18px; }

/* Someone who is Away: their online dot turns yellow everywhere in Connect. */
.cn-av.is-away .cn-av-on { background: #fbbf24; }
.cn-dot.is-away { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.8); }
.cnx-mate .cn-av.is-online.is-away { box-shadow: 0 0 0 2px #0f1830, 0 0 0 4px #fbbf24; }
.cnp-on.is-away { background: #fbbf24; box-shadow: 0 0 0 4px #0b1328, 0 0 14px #fbbf24; }
.cnp-on.is-away::after { border-color: #fbbf24; }
.cnp-chip.is-live.is-away { color: #fde68a; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.35); }
.cnp-chip.is-live.is-away i { background: #fbbf24; }

@media (max-width: 640px) { .cns-btn { height: 48px; } .cns-opt { padding: 12px 10px; } }
@media (prefers-reduced-motion: reduce) { .cns-chev { transition: none; } }