/* [2026-10] หน้าจอเชื่อมต่อใหม่ภาษาไทย — แทนหน้าจอเริ่มต้นของ Blazor (#components-reconnect-modal ใน App.razor)
   Blazor (.NET 8) สลับ class เองตามสถานะ: components-reconnect-show (กำลังต่อใหม่) / -failed (ลองครบแล้ว) / -rejected (circuit หมดอายุ) / -hide */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483000;            /* เหนือ popup / overlay ทุกตัวของแอป */
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .38);
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}
/* หลุดสั้นๆ (ต่อกลับได้ใน ~1 วิ) ไม่ให้กระพริบ: บังการกดทันที แต่ค่อยแสดงหลัง 0.8 วิ */
#components-reconnect-modal.components-reconnect-show {
    animation: mrc-fade .25s ease .8s both;
}
@keyframes mrc-fade { from { opacity: 0; } to { opacity: 1; } }

.mrc-card {
    width: min(400px, 100%);
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e4e8ec;
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .45);
    padding: 22px 22px 18px;
    text-align: center;
    color: #14213d;
}
.mrc-icon {
    width: 44px; height: 44px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: #E7F5F4; color: #0B7A75;
}
.mrc-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.mrc-text { font-size: 13.5px; color: #5c666f; margin: 0; line-height: 1.6; }
.mrc-spinner {
    width: 22px; height: 22px; margin: 14px auto 0;
    border: 3px solid #DDEFED; border-top-color: #0B7A75;
    border-radius: 50%;
    animation: mrc-spin .8s linear infinite;
}
@keyframes mrc-spin { to { transform: rotate(360deg); } }
.mrc-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.mrc-btn {
    min-width: 120px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    border: 1px solid #B9E0DC;
    background: #fff; color: #0B7A75;
    font-family: inherit;
}
.mrc-btn:hover { background: #E7F5F4; }
.mrc-btn.primary { background: #0B7A75; border-color: #0B7A75; color: #fff; }
.mrc-btn.primary:hover { background: #095E5A; }

/* แสดงเฉพาะส่วนของสถานะปัจจุบัน */
.mrc-state { display: none; }
#components-reconnect-modal.components-reconnect-show .mrc-state.show,
#components-reconnect-modal.components-reconnect-failed .mrc-state.failed,
#components-reconnect-modal.components-reconnect-rejected .mrc-state.rejected { display: block; }
#components-reconnect-modal.components-reconnect-rejected .mrc-icon { background: #fff4e5; color: #c2410c; }

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal.components-reconnect-show { animation: none; }
    .mrc-spinner { animation-duration: 2s; }
}