/* ============================================================
   NETWORK STATUS BANNER  —  frontend/css/network.css
   Fixed at top of viewport. Slides in from above.
   Respects iOS safe-area-inset-top for PWA standalone mode.
   Uses existing app CSS vars where possible.
   ============================================================ */

.znb {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    /* Push content below the status bar on iOS PWA */
    padding-top:    calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 7px);
    padding-bottom: 7px;
    padding-left:   1rem;
    padding-right:  1rem;

    display: flex;
    align-items: center;
    gap: 0.6rem;

    font-family: var(--font-body, system-ui, sans-serif);
    font-size:   0.82rem;
    color: #fff;
    line-height: 1.4;

    /* Hidden by default — slides in from above */
    transform: translateY(-110%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Banner should not receive pointer events while hidden */
    pointer-events: none;
}

.znb--visible {
    transform: translateY(0);
    pointer-events: auto;
}

/* ── State colours ──────────────────────────────────── */

.znb--retrying  { background: rgba(180, 100, 30,  0.96); }  /* amber  */
.znb--offline   { background: rgba(55,  35,  20,  0.97); }  /* dark brown-black */
.znb--failed    { background: rgba(140, 28,  28,  0.97); }  /* deep red */
.znb--recovered { background: rgba(35,  100, 55,  0.96); }  /* dark green */

/* ── Layout pieces ──────────────────────────────────── */

.znb-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
    line-height: 1;
}

.znb-msg {
    flex: 1;
    min-width: 0;
}

/* ── Spinner (retrying state) ───────────────────────── */

.znb-spinner {
    display: inline-block;
    width:  14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: znb-spin 0.7s linear infinite;
    flex-shrink: 0;
}

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

/* ── Dismiss button (failed state only) ─────────────── */

.znb-dismiss {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: var(--radius-sm, 6px);
    padding: 3px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
    transition: background 0.15s;
    font-family: inherit;
}

.znb-dismiss:hover,
.znb-dismiss:active {
    background: rgba(255, 255, 255, 0.28);
}