/* =====================================================================
   app-shell.css — start-up spinner, "Reconnecting…" pill, error bar,
   install banner and "Back online" note. Loaded last in App.razor.
   ===================================================================== */

/* ── Start-up (until the live connection is ready) ── */
.ace-boot {
    position: fixed;
    inset: 0;
    z-index: 2900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4F5F7;
}

.ace-boot-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #E0DEF0;
    border-top-color: #3f3590;
    border-radius: 50%;
    animation: ace-spin .8s linear infinite;
}

@keyframes ace-spin { to { transform: rotate(360deg); } }

/* ── Connection drops (Blazor adds components-reconnect-show / -failed / -rejected / -hide) ── */
.ace-reconnect {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    cursor: progress;
}

    .ace-reconnect.components-reconnect-show,
    .ace-reconnect.components-reconnect-failed,
    .ace-reconnect.components-reconnect-rejected,
    .ace-reconnect.ace-reloading { display: block; }

.ace-reconnect-pill {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #1B2430;
    color: #fff;
    font: 500 13px Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    white-space: nowrap;
    opacity: 0;
    animation: ace-pill-in .25s ease 5s forwards;   /* only if a drop lasts over 5 s */
}

.components-reconnect-failed .ace-reconnect-pill,
.components-reconnect-rejected .ace-reconnect-pill,
.ace-reloading .ace-reconnect-pill { animation-delay: 0s; }

@keyframes ace-pill-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.ace-reconnect-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ace-spin .8s linear infinite;
}

.ace-msg-reconnecting, .ace-msg-failed, .ace-msg-reloading, .ace-reconnect-btn { display: none; }
.components-reconnect-show .ace-msg-reconnecting { display: inline; }
.components-reconnect-failed .ace-msg-failed { display: inline; }
.components-reconnect-failed .ace-reconnect-btn { display: inline-block; }
.components-reconnect-rejected .ace-msg-reloading,
.ace-reloading .ace-msg-reloading { display: inline; }
.ace-reloading .ace-msg-reconnecting,
.ace-reloading .ace-msg-failed,
.ace-reloading .ace-reconnect-btn { display: none !important; }

.ace-reconnect-btn {
    background: #fff;
    color: #1B2430;
    border: none;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* ── "Something went wrong — Reload" (Blazor shows #blazor-error-ui) ── */
.ace-error-ui {
    display: none;
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 3200;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #C62828;
    color: #fff;
    font: 500 14px Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    white-space: nowrap;
}

    .ace-error-ui .ace-error-reload { color: #fff; font-weight: 700; text-decoration: underline; }

/* ── Install banner (js/ace-app.js) ── */
.ace-install {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 2500;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #1B2430;
    color: #fff;
    font: 13.5px Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    max-width: 520px;
    margin: 0 auto;
}

    .ace-install img { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 40px; }
    .ace-install .ace-install-text { flex: 1 1 auto; line-height: 1.3; }
    .ace-install .ace-install-text b { display: block; font-size: 14px; }

    .ace-install button {
        border: none;
        border-radius: 999px;
        padding: 8px 14px;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .ace-install .ace-install-yes { background: #fff; color: #1B2430; }
    .ace-install .ace-install-no { background: transparent; color: rgba(255,255,255,.7); padding: 8px 6px; }

/* ── "Back online" ── */
.ace-online {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 3100;
    padding: 8px 16px;
    border-radius: 999px;
    background: #1E9E5A;
    color: #fff;
    font: 600 13px Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}