.reconnect-dialog { align-items: center; bottom: 0; contain: strict; display: flex; font-family: var(--font-ui); justify-content: center; left: 0; opacity: 0; padding: var(--space-6); pointer-events: none; position: fixed; right: 0; top: 0; visibility: hidden; z-index: var(--z-max); }
.reconnect-dialog__backdrop { background: var(--backdrop); bottom: 0; left: 0; position: absolute; right: 0; top: 0; }
.reconnect-dialog__content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-strong); color: var(--text); max-width: 360px; padding: var(--space-6); position: relative; text-align: center; width: 100%; }
.reconnect-dialog__animation { display: flex; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-4); }
.reconnect-dialog__animation div { animation: reconnect-pulse 1.4s ease-in-out infinite; background: var(--accent); border-radius: var(--radius-full); height: var(--size-2xs); width: var(--size-2xs); }
.reconnect-dialog__animation div:nth-child(2) { animation-delay: 0.2s; }
.reconnect-dialog__title { font-size: var(--text-lg); font-weight: var(--font-semibold); margin: 0 0 var(--space-3); }
.reconnect-dialog__text { color: var(--text); font-size: var(--text-base); line-height: 1.5; margin: 0 0 var(--space-3); }
.reconnect-dialog__text span { color: var(--accent); font-weight: var(--font-semibold); }
.reconnect-dialog .btn { margin-top: var(--space-2); min-width: 120px; }
.reconnect-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-2); }
.reconnect-dialog__actions .btn { margin-top: 0; }
.reconnect-resume,
.reconnect-reload { display: none; }
.reconnect-state { display: none; }
.reconnect-dialog.components-reconnect-show,
.reconnect-dialog.components-reconnect-failed,
.reconnect-dialog.components-reconnect-rejected,
.reconnect-dialog.components-reconnect-paused,
.reconnect-dialog.components-reconnect-resume-failed { opacity: 1; pointer-events: auto; visibility: visible; }
.reconnect-dialog.components-reconnect-show:not(.components-reconnect-retrying) .reconnect-state--connecting { display: block; }
.reconnect-dialog.components-reconnect-show.components-reconnect-retrying .reconnect-state--retrying { display: block; }
.reconnect-dialog.components-reconnect-show .reconnect-state--attempts { color: var(--text-muted); display: block; font-size: var(--text-sm); }
.reconnect-dialog.components-reconnect-paused .reconnect-state--paused,
.reconnect-dialog.components-reconnect-failed .reconnect-state--failed,
.reconnect-dialog.components-reconnect-rejected .reconnect-state--rejected,
.reconnect-dialog.components-reconnect-resume-failed .reconnect-state--resume-failed { display: block; }
.reconnect-dialog.components-reconnect-paused .reconnect-dialog__animation,
.reconnect-dialog.components-reconnect-failed .reconnect-dialog__animation,
.reconnect-dialog.components-reconnect-rejected .reconnect-dialog__animation,
.reconnect-dialog.components-reconnect-resume-failed .reconnect-dialog__animation { display: none; }
.reconnect-dialog.components-reconnect-show .reconnect-reload { display: inline-block; }
.reconnect-dialog.components-reconnect-paused .reconnect-resume,
.reconnect-dialog.components-reconnect-paused .reconnect-reload { display: inline-block; }
.reconnect-dialog.components-reconnect-failed .reconnect-reload,
.reconnect-dialog.components-reconnect-rejected .reconnect-reload,
.reconnect-dialog.components-reconnect-resume-failed .reconnect-reload { display: inline-block; }
@keyframes reconnect-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .reconnect-dialog__animation div { animation: none; } }
@supports (-webkit-touch-callout: none) {
.reconnect-dialog { top: 0; bottom: auto; height: var(--vvh); }
}