app-connection-status{align-items:center;display:inline-flex;position:relative}app-connection-status .conn{border:1.5px solid var(--border-color,#7f7f7f33);background:var(--bg-input,transparent);box-sizing:border-box;cursor:pointer;height:38px;transition:background-color var(--transition-fast,.15s ease),border-color var(--transition-fast,.15s ease);border-radius:20px;justify-content:center;align-items:center;gap:.45rem;padding:0 .55rem;display:inline-flex}app-connection-status .conn:hover{background:var(--bg-card-hover,#7f7f7f1f)}app-connection-status .conn:has(.conn__label){width:auto;padding:0 .75rem 0 .55rem}app-connection-status .conn__indicator{justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex;position:relative}app-connection-status .conn__icon{width:18px;height:18px;stroke:var(--conn-color,#9aa0a6);flex-shrink:0;transition:stroke .2s}app-connection-status .conn__label{white-space:nowrap;color:var(--conn-color,#9aa0a6);font-size:.75rem;font-weight:500}app-connection-status .conn__dot{background:var(--conn-color,#9aa0a6);width:6px;height:6px;box-shadow:0 0 0 1.5px var(--bg-card,#fff);border-radius:999px;transition:background-color .2s;position:absolute;bottom:-1px;right:-2px}app-connection-status .conn.is-online{--conn-color:var(--color-success)}app-connection-status .conn.is-partial,app-connection-status .conn.is-connecting{--conn-color:var(--color-warning)}app-connection-status .conn.is-offline{--conn-color:var(--color-error)}app-connection-status .conn.is-connecting .conn__dot,app-connection-status .conn.is-connecting .conn__icon{animation:1.4s ease-in-out infinite conn-pulse}app-connection-status .conn.is-offline .conn__dot{animation:2s ease-in-out infinite conn-pulse-slow}@keyframes conn-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.92)}}@keyframes conn-pulse-slow{0%,to{opacity:1}50%{opacity:.45}}app-connection-status .conn-menu{background:var(--bg-card);border:1px solid var(--border-color);z-index:30;border-radius:.75rem;min-width:12rem;padding:.75rem;position:absolute;top:calc(100% + .5rem);right:0;box-shadow:0 8px 24px #0000001f}app-connection-status .conn-menu__title{opacity:.7;margin:0 0 .5rem;font-size:.75rem;font-weight:600}app-connection-status .conn-menu__list{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}app-connection-status .conn-menu__item{align-items:center;gap:.5rem;font-size:.85rem;display:flex}app-connection-status .conn-menu__name{flex:1;min-width:0}app-connection-status .conn-menu__state{color:var(--color-error);white-space:nowrap;flex:none;font-size:.72rem}app-connection-status .conn-menu__state.is-connected,app-connection-status .conn-menu__state.is-leaked{color:var(--tone-green)}app-connection-status .conn-menu__state.is-inactive{color:var(--text-muted)}app-connection-status .conn-menu__dot{background:var(--color-error);border-radius:999px;flex:none;width:.4rem;height:.4rem}app-connection-status .conn-menu__dot.is-connected,app-connection-status .conn-menu__dot.is-leaked{background:var(--color-success)}app-connection-status .conn-menu__dot.is-reconnecting{background:var(--color-warning)}app-connection-status .conn-menu__dot.is-inactive{background:var(--text-muted)}app-connection-status .conn-menu__retry{margin-top:.6rem}