.realtime-indicator{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:500;transition:all .3s ease}.realtime-indicator.clickable{cursor:pointer}.realtime-indicator.clickable:hover{transform:scale(1.05)}.realtime-indicator.connected{background:#22c55e1a;color:#16a34a}.realtime-indicator.disconnected{background:#ef44441a;color:#dc2626}.realtime-indicator.connecting{background:#3b82f61a;color:#2563eb}.realtime-indicator.reconnecting{background:#f59e0b1a;color:#d97706}.realtime-indicator.error{background:#ef444426;color:#dc2626}.indicator-dot{width:8px;height:8px;border-radius:50%;transition:background-color .3s ease;position:relative;display:flex;align-items:center;justify-content:center}.indicator-icon{font-size:6px;font-weight:700;color:#fff}.realtime-indicator.connected .indicator-dot{background:#22c55e;animation:pulse-green 2s infinite}.realtime-indicator.disconnected .indicator-dot{background:#ef4444}.realtime-indicator.connecting .indicator-dot{background:#3b82f6;animation:pulse-blue 1s infinite}.realtime-indicator.reconnecting .indicator-dot{background:#f59e0b;animation:pulse-yellow 1s infinite}.realtime-indicator.error .indicator-dot{background:#dc2626;animation:shake .5s ease-in-out}@keyframes pulse-green{0%,to{box-shadow:0 0 #22c55e66}50%{box-shadow:0 0 0 4px #22c55e00}}@keyframes pulse-blue{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 4px #3b82f600}}@keyframes pulse-yellow{0%,to{box-shadow:0 0 #f59e0b66}50%{box-shadow:0 0 0 4px #f59e0b00}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.indicator-text{text-transform:uppercase;letter-spacing:.5px}[data-theme=dark] .realtime-indicator.connected,.dark .realtime-indicator.connected{background:#22c55e33}[data-theme=dark] .realtime-indicator.disconnected,.dark .realtime-indicator.disconnected{background:#ef444433}[data-theme=dark] .realtime-indicator.connecting,.dark .realtime-indicator.connecting{background:#3b82f633}[data-theme=dark] .realtime-indicator.reconnecting,.dark .realtime-indicator.reconnecting{background:#f59e0b33}[data-theme=dark] .realtime-indicator.error,.dark .realtime-indicator.error{background:#ef444440}@media(prefers-color-scheme:dark){.realtime-indicator.connected{background:#22c55e33}.realtime-indicator.disconnected{background:#ef444433}.realtime-indicator.connecting{background:#3b82f633}.realtime-indicator.reconnecting{background:#f59e0b33}.realtime-indicator.error{background:#ef444440}}