/* Atlas connection pill (website only). States come from the backend; see cloud.js. */
.connection-pill{display:inline-flex;align-items:center;gap:7px;height:30px;margin-left:6px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.connection-pill:hover{background:var(--surface-hover);color:var(--ink)}
.connection-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.connection-pill i{width:8px;height:8px;border-radius:50%;background:var(--quiet);flex:none}
.connection-pill[data-state=connected] i{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.connection-pill[data-state=connected]{color:var(--ink)}
.connection-pill[data-state=offline] i,.connection-pill[data-state=inference_error] i{background:var(--danger)}
.connection-pill[data-state=connecting] i,.connection-pill[data-state=reconnecting] i{animation:connection-pulse 1.2s var(--ease) infinite}
.connection-pill[data-state=auth_required] i{background:transparent;border:1.5px solid var(--quiet)}
@keyframes connection-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.connection-pill i{animation:none!important}}
.connection-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0 0 12px}
.connection-facts dt{color:var(--quiet)}
.connection-facts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.connection-note{margin:0;color:var(--muted);font-size:13px}
@media (max-width:520px){.connection-pill span{display:none}.connection-pill{padding:0 9px}}