.cc-conn-wrap{z-index:2000;pointer-events:none;justify-content:center;padding:0 16px;display:flex;position:fixed;top:70px;left:0;right:0}@media (max-width:480px){.cc-conn-wrap{top:20px}}.cc-conn{color:var(--surface);font-family:var(--font-inter), Inter, sans-serif;white-space:nowrap;box-shadow:0 4px 6px -1px var(--shadow-color-md), 0 2px 4px -2px var(--shadow-color-md);border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-size:14px;font-weight:600;line-height:20px;animation:.25s cubic-bezier(.21,1.02,.73,1) cc-conn-in;display:inline-flex}.cc-conn--leaving{animation:.2s forwards cc-conn-out}.cc-conn--unstable{background:var(--event-amber-500)}.cc-conn--offline{background:var(--status-danger)}.cc-conn--reconnecting{background:var(--event-blue)}.cc-conn--online{background:var(--status-success)}.cc-conn-icon{flex-shrink:0;display:flex}.cc-conn-spin{animation:.9s linear infinite cc-conn-spin}@keyframes cc-conn-spin{to{transform:rotate(360deg)}}@keyframes cc-conn-in{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes cc-conn-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-16px)}}