/*
|--------------------------------------------------------------------------
| ESSAYDEW PWA STATUS UI
|--------------------------------------------------------------------------
| Lightweight global styles for:
| - offline indicator
| - back-online indicator
| - future PWA connection states
|--------------------------------------------------------------------------
*/

#essaydew-network-status[hidden] {
    display: none !important;
}

.essaydew-network-status {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 999999;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    max-width: calc(100vw - 24px);
    min-height: 38px;

    padding: 8px 13px;

    border-radius: 999px;

    background: rgba(7, 17, 31, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #ffffff;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;

    text-align: center;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.24);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transform: translateX(-50%);

    pointer-events: none;

    contain: layout style paint;
}

.essaydew-network-status__dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: currentColor;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.05);
}

.essaydew-network-status__text {
    display: block;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

/*
|--------------------------------------------------------------------------
| OFFLINE
|--------------------------------------------------------------------------
*/

.essaydew-network-status.is-offline {
    color: #ffd36a;

    border-color: rgba(255, 211, 106, 0.18);

    background:
        linear-gradient(
            180deg,
            rgba(20, 24, 31, 0.97),
            rgba(8, 15, 26, 0.97)
        );
}

.essaydew-network-status.is-offline
.essaydew-network-status__dot {
    box-shadow:
        0 0 0 3px rgba(255, 211, 106, 0.10),
        0 0 12px rgba(255, 211, 106, 0.20);
}

/*
|--------------------------------------------------------------------------
| BACK ONLINE
|--------------------------------------------------------------------------
*/

.essaydew-network-status.is-online {
    color: #8ef0b5;

    border-color: rgba(142, 240, 181, 0.18);

    background:
        linear-gradient(
            180deg,
            rgba(13, 32, 26, 0.97),
            rgba(7, 18, 21, 0.97)
        );
}

.essaydew-network-status.is-online
.essaydew-network-status__dot {
    box-shadow:
        0 0 0 3px rgba(142, 240, 181, 0.10),
        0 0 12px rgba(142, 240, 181, 0.18);
}

/*
|--------------------------------------------------------------------------
| VERIFYING
|--------------------------------------------------------------------------
| Normally hidden from the user.
| Kept here for future controlled use.
|--------------------------------------------------------------------------
*/

.essaydew-network-status.is-checking {
    color: #9eb8ff;
}

/*
|--------------------------------------------------------------------------
| SMALL PHONES
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {
    .essaydew-network-status {
        max-width: calc(100vw - 16px);

        min-height: 36px;

        padding: 7px 11px;

        font-size: 12.5px;
    }
}

/*
|--------------------------------------------------------------------------
| LANDSCAPE / SHORT SCREENS
|--------------------------------------------------------------------------
*/

@media (max-height: 500px) {
    .essaydew-network-status {
        bottom: max(8px, env(safe-area-inset-bottom));

        min-height: 34px;

        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/*
|--------------------------------------------------------------------------
| REDUCED MOTION
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .essaydew-network-status {
        transition: none !important;
        animation: none !important;
    }
}