:root {
    --backend-safe-top: env(safe-area-inset-top, 0px);
    --backend-shell-height: 0px;
    --backend-bar-height: 5px;
    --backend-body-top-gap: 8px;
    --backend-message-gap: 8px;
}

.backend-status-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--backend-shell-height);
    padding: 0;
    box-sizing: border-box;
    z-index: 2601;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    background: #2563eb;
    transition: background-color .2s ease, color .2s ease;
}

.backend-status-shell.state-local {
    background: #16a34a;
}

.backend-status-shell.state-remote {
    background: #2563eb;
}

.backend-status-shell.state-bridge-offline {
    background: #dc2626;
}

.backend-status-shell.state-all-offline {
    background: #7f1d1d;
}

.backend-status-bar {
    position: fixed;
    top: var(--backend-shell-height);
    left: 0;
    right: 0;
    height: var(--backend-bar-height);
    z-index: 2600;
    pointer-events: none;
    background: #2563eb;
}

.backend-status-bar.state-local {
    background: #16a34a;
}

.backend-status-bar.state-remote {
    background: #2563eb;
}

.backend-status-bar.state-bridge-offline {
    background: #dc2626;
}

.backend-status-bar.state-all-offline {
    background: #7f1d1d;
}

@media (orientation: portrait) {
    :root {
        --backend-shell-height: var(--backend-safe-top);
        --backend-bar-height: 0px;
        --backend-body-top-gap: 6px;
        --backend-message-gap: 4px;
    }

    .backend-status-bar {
        display: none;
    }
}