.components-reconnect-first-attempt-visible,
 .components-reconnect-repeated-attempt-visible,
 .components-reconnect-failed-visible,
 .components-pause-visible,
 .components-resume-failed-visible,
 .components-rejoining-animation {
     display: none;
 }

 #components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
 #components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
 #components-reconnect-modal.components-reconnect-paused .components-pause-visible,
 #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
 #components-reconnect-modal.components-reconnect-retrying,
 #components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
 #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
 #components-reconnect-modal.components-reconnect-failed,
 #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
     display: block;
 }

 /* Override display type for flex elements */
 #components-reconnect-modal .rcm-visual,
 #components-reconnect-modal .rcm-bars,
 #components-reconnect-modal .rcm-status-icon,
 #components-reconnect-modal .rcm-quote {
     display: none;
 }

 #components-reconnect-modal.components-reconnect-show .rcm-visual,
 #components-reconnect-modal.components-reconnect-retrying .rcm-visual,
 #components-reconnect-modal.components-reconnect-show .rcm-bars,
 #components-reconnect-modal.components-reconnect-retrying .rcm-bars {
     display: flex;
 }

 #components-reconnect-modal.components-reconnect-show .rcm-quote,
 #components-reconnect-modal.components-reconnect-retrying .rcm-quote {
     display: block;
 }

 #components-reconnect-modal.components-reconnect-failed .rcm-status-icon--error,
 #components-reconnect-modal.components-reconnect-paused .rcm-status-icon--warn {
     display: flex;
 }


 /* ── 2. Design tokens — state-driven active color ──────────────────── */

 #components-reconnect-modal {
     --rcm-active: #2b9fe8;
     --rcm-active-glow: rgba(43, 159, 232, 0.3);
 }

 #components-reconnect-modal.components-reconnect-retrying {
     --rcm-active: #f57c00;
     --rcm-active-glow: rgba(245, 124, 0, 0.3);
 }

 #components-reconnect-modal.components-reconnect-failed,
 #components-reconnect-modal.components-reconnect-resume-failed {
     --rcm-active: #e53935;
     --rcm-active-glow: rgba(229, 57, 53, 0.32);
 }

 #components-reconnect-modal.components-reconnect-paused {
     --rcm-active: #f57c00;
     --rcm-active-glow: rgba(245, 124, 0, 0.3);
 }

 /* Light mode surface tokens */
 #components-reconnect-modal {
     --rcm-bg: rgba(246, 249, 255, 0.98);
     --rcm-border: rgba(43, 159, 232, 0.2);
     --rcm-text: #1a2540;
     --rcm-muted: rgba(55, 80, 125, 0.6);
     --rcm-error: #e53935;
     --rcm-warn: #f57c00;
 }

 /* Dark mode surface tokens */
 .dark-style #components-reconnect-modal,
 html.dark-style #components-reconnect-modal {
     --rcm-bg: rgba(10, 13, 28, 0.97);
     --rcm-border: rgba(79, 175, 235, 0.16);
     --rcm-text: #eef3fc;
     --rcm-muted: rgba(190, 215, 245, 0.82);
 }

 /* ── 3. Dialog base ────────────────────────────────────────────────── */

 #components-reconnect-modal {
     position: fixed;
     inset: 0;
     margin: auto;
     width: min(340px, 92vw);
     height: fit-content;
     padding: 2rem 1.75rem 1.75rem;
     background: var(--rcm-bg);
     color: var(--rcm-text);
     border: 1px solid var(--rcm-border);
     border-radius: 22px;
     box-shadow:
         0 0 0 1px rgba(255, 255, 255, 0.07) inset,
         0 10px 48px rgba(0, 0, 0, 0.11),
         0 0 0 5px rgba(43, 159, 232, 0.05);
     overflow: hidden;
     opacity: 0;
     animation: rcm-fade-out 0.3s both;
     z-index: 99999;
 }

 /* Top accent streak */
 #components-reconnect-modal::before {
     content: '';
     position: absolute;
     top: 0;
     left: 15%;
     right: 15%;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--rcm-active) 50%, transparent);
     opacity: 0.65;
     pointer-events: none;
     transition: background 0.5s ease;
 }

 /* Bottom ambient glow */
 #components-reconnect-modal::after {
     content: '';
     position: absolute;
     bottom: -55px;
     left: 50%;
     transform: translateX(-50%);
     width: 200px;
     height: 100px;
     background: radial-gradient(ellipse, var(--rcm-active-glow) 0%, transparent 70%);
     pointer-events: none;
     transition: background 0.5s ease;
 }

 #components-reconnect-modal[open] {
     animation: rcm-enter 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
 }

 .dark-style #components-reconnect-modal,
 html.dark-style #components-reconnect-modal {
     box-shadow:
         0 0 0 1px rgba(255, 255, 255, 0.04) inset,
         0 12px 60px rgba(0, 0, 0, 0.55),
         0 0 80px rgba(43, 159, 232, 0.05) inset;
 }

 #components-reconnect-modal::backdrop {
     background: rgba(0, 0, 0, 0.38);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     animation: rcm-fade-in 0.35s ease both;
 }

 .dark-style #components-reconnect-modal::backdrop,
 html.dark-style #components-reconnect-modal::backdrop {
     background: radial-gradient(ellipse at 40% 35%,
             rgba(18, 12, 45, 0.65) 0%,
             rgba(0, 0, 0, 0.78) 100%);
 }

 /* ── 4. Animations ─────────────────────────────────────────────────── */

 @keyframes rcm-enter {
     from {
         opacity: 0;
         transform: translateY(22px) scale(0.97);
     }

     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 @keyframes rcm-fade-in {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes rcm-fade-out {
     from {
         opacity: 1;
     }

     to {
         opacity: 0;
     }
 }

 /* ── 5. Container ──────────────────────────────────────────────────── */

 .components-reconnect-container {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.85rem;
 }

 /* Horizontal scan-line sweep */
 .components-reconnect-container::after {
     content: '';
     position: absolute;
     left: -1.75rem;
     right: -1.75rem;
     top: 0;
     height: 1.5px;
     background: linear-gradient(90deg, transparent, var(--rcm-active) 50%, transparent);
     opacity: 0;
     animation: rcm-scan 3.5s ease-in-out infinite;
     pointer-events: none;
 }

 @keyframes rcm-scan {
     0% {
         top: -2rem;
         opacity: 0;
     }

     5% {
         opacity: 0.22;
     }

     92% {
         opacity: 0.22;
     }

     100% {
         top: calc(100% + 2rem);
         opacity: 0;
     }
 }

 /* ── 6. Orbital animation ──────────────────────────────────────────── */

 .rcm-visual {
     width: 124px;
     height: 124px;
     align-items: center;
     justify-content: center;
     perspective: 360px;
 }

 .rcm-orbit-scene {
     width: 100%;
     height: 100%;
     position: relative;
     transform-style: preserve-3d;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .rcm-ring {
     position: absolute;
     width: 104px;
     height: 104px;
     border-radius: 50%;
     border: 1.5px solid rgba(43, 159, 232, 0.22);
     transition: border-color 0.5s ease;
 }

 .dark-style .rcm-ring,
 html.dark-style .rcm-ring {
     border-color: rgba(79, 195, 247, 0.18);
 }

 #components-reconnect-modal.components-reconnect-retrying .rcm-ring {
     border-color: rgba(245, 124, 0, 0.2);
 }

 .rcm-ring-1 {
     animation: rcm-spin-1 3.2s linear infinite;
 }

 .rcm-ring-2 {
     animation: rcm-spin-2 4.4s linear infinite;
 }

 .rcm-ring-3 {
     animation: rcm-spin-3 5.8s linear infinite;
 }

 @keyframes rcm-spin-1 {
     from {
         transform: rotateX(72deg) rotateZ(0deg);
     }

     to {
         transform: rotateX(72deg) rotateZ(360deg);
     }
 }

 @keyframes rcm-spin-2 {
     from {
         transform: rotateX(72deg) rotateZ(60deg);
     }

     to {
         transform: rotateX(72deg) rotateZ(420deg);
     }
 }

 @keyframes rcm-spin-3 {
     from {
         transform: rotateX(72deg) rotateZ(120deg);
     }

     to {
         transform: rotateX(72deg) rotateZ(480deg);
     }
 }

 /* Travelling particle */
 .rcm-dot {
     position: absolute;
     top: -5px;
     left: calc(50% - 5px);
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--rcm-active);
     box-shadow: 0 0 10px 2px var(--rcm-active-glow);
     transition: background 0.5s ease, box-shadow 0.5s ease;
 }

 /* Core node */
 .rcm-core {
     position: absolute;
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: var(--rcm-bg);
     border: 1.5px solid var(--rcm-border);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     transition: border-color 0.5s ease;
 }

 .rcm-pulse-ring {
     position: absolute;
     inset: -3px;
     border-radius: 50%;
     border: 1.5px solid var(--rcm-active);
     animation: rcm-pulse 2.4s ease-out infinite;
     transition: border-color 0.5s ease;
 }

 .rcm-pulse-ring--delay {
     animation-delay: -1.2s;
 }

 @keyframes rcm-pulse {
     0% {
         transform: scale(0.88);
         opacity: 0.75;
     }

     100% {
         transform: scale(2.1);
         opacity: 0;
     }
 }

 .rcm-core-icon {
     color: var(--rcm-active);
     display: flex;
     animation: rcm-breathe 2.4s ease-in-out infinite;
     transition: color 0.5s ease;
 }

 @keyframes rcm-breathe {

     0%,
     100% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.55;
         transform: scale(0.9);
     }
 }

 /* ── 7. Status icons (failed / paused) ─────────────────────────────── */

 .rcm-status-icon {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     align-items: center;
     justify-content: center;
     animation: rcm-icon-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }

 @keyframes rcm-icon-pop {
     from {
         transform: scale(0.55);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 .rcm-status-icon--error {
     background: rgba(229, 57, 53, 0.09);
     border: 1px solid rgba(229, 57, 53, 0.28);
     color: var(--rcm-error);
     box-shadow: 0 0 32px rgba(229, 57, 53, 0.3);
 }

 .rcm-status-icon--warn {
     background: rgba(245, 124, 0, 0.09);
     border: 1px solid rgba(245, 124, 0, 0.28);
     color: var(--rcm-warn);
     box-shadow: 0 0 32px rgba(245, 124, 0, 0.28);
 }

 /* ── 8. Text ───────────────────────────────────────────────────────── */

 #components-reconnect-modal p {
     margin: 0;
     text-align: center;
     font-family: inherit;
 }

 .rcm-title {
     font-size: 0.9375rem;
     font-weight: 600;
     color: var(--rcm-text);
     letter-spacing: 0.01em;
 }

 .rcm-title--error {
     color: var(--rcm-error);
 }

 .rcm-title--warn {
     color: var(--rcm-warn);
 }

 .rcm-sub {
     font-size: 0.8rem;
     color: var(--rcm-muted);
     line-height: 1.55;
 }

 .rcm-countdown {
     font-variant-numeric: tabular-nums;
     font-weight: 700;
     color: var(--rcm-active);
     transition: color 0.5s ease;
 }

 /* ── 9. Signal equalizer bars ──────────────────────────────────────── */

 .rcm-bars {
     gap: 3px;
     align-items: flex-end;
     height: 18px;
 }

 .rcm-bars span {
     width: 4px;
     border-radius: 2px;
     background: var(--rcm-active);
     animation: rcm-bar 1.15s ease-in-out infinite;
     transform-origin: bottom;
     transition: background 0.5s ease;
 }

 .rcm-bars span:nth-child(1) {
     height: 6px;
     animation-delay: 0s;
 }

 .rcm-bars span:nth-child(2) {
     height: 11px;
     animation-delay: 0.11s;
 }

 .rcm-bars span:nth-child(3) {
     height: 17px;
     animation-delay: 0.22s;
 }

 .rcm-bars span:nth-child(4) {
     height: 11px;
     animation-delay: 0.33s;
 }

 .rcm-bars span:nth-child(5) {
     height: 6px;
     animation-delay: 0.44s;
 }

 @keyframes rcm-bar {

     0%,
     100% {
         opacity: 0.22;
         transform: scaleY(0.32);
     }

     50% {
         opacity: 1;
         transform: scaleY(1);
     }
 }

 /* ── 10. Rotating quote ────────────────────────────────────────────── */

 .rcm-quote {
     text-align: center;
     font-size: 0.75rem;
     font-style: italic;
     color: var(--rcm-muted);
     line-height: 1.6;
     max-width: 240px;
     min-height: 2.6em;
     /* prevent layout shift between quotes   */
     padding: 0.55rem 0.75rem;
     border-top: 1px solid var(--rcm-border);
     width: 100%;

     /* Fade transition driven by .rcm-quote--out class */
     opacity: 1;
     transform: translateY(0);
     transition: opacity 0.38s ease, transform 0.38s ease;
 }

 .rcm-quote--out {
     opacity: 0;
     transform: translateY(5px);
 }

 /* Appear animation on first show */
 #components-reconnect-modal[open] .rcm-quote {
     animation: rcm-quote-appear 0.6s ease 0.7s both;
 }

 @keyframes rcm-quote-appear {
     from {
         opacity: 0;
         transform: translateY(8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }