/* backend-seed-compatible ambient synchronization indicator */
.sync-badge {
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom));
    right: max(20px, env(safe-area-inset-right));
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border, rgba(15,23,42,.14));
    opacity: .38;
    transition: opacity .3s ease, box-shadow .3s ease;
    pointer-events: auto;
    cursor: default;
}
.sync-badge--syncing,
.sync-badge--pending,
.sync-badge--conflict,
.sync-badge--offline {
    opacity: 1;
    box-shadow: 0 4px 16px rgba(15,23,42,.12);
}
.sync-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    white-space: nowrap;
    background: rgba(15,23,42,.88);
    color: #fff;
    font-size: 11px;
    line-height: 1.2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing: .04em;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease;
}
.sync-badge:hover::after { opacity: 1; transform: translateY(0); transition-delay: 2s; }
.sync-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .2s ease, box-shadow .2s ease;
}
.sync-dot.synced  { background: var(--green, #1ea672); box-shadow: 0 0 0 5px rgba(30,166,114,.08); }
.sync-dot.pending { background: var(--amber, #d9951e); animation: kb-sync-blink 1.2s infinite; box-shadow: 0 0 0 5px rgba(217,149,30,.08); }
.sync-dot.syncing { background: var(--blue, #10b8ee); animation: kb-sync-ring 1s linear infinite; }
.sync-dot.conflict{ background: var(--red, #de5b57); animation: kb-sync-blink .5s infinite; box-shadow: 0 0 0 5px rgba(222,91,87,.08); }
.sync-dot.offline { background: var(--muted2, #94a3b8); }
@keyframes kb-sync-blink { 0%,100% { opacity: 1; } 50% { opacity: .28; } }
@keyframes kb-sync-ring { 0% { box-shadow: 0 0 0 0 rgba(16,184,238,.35); } 100% { box-shadow: 0 0 0 6px rgba(16,184,238,0); } }
@media (prefers-reduced-motion: reduce) {
    .sync-dot.pending, .sync-dot.syncing, .sync-dot.conflict { animation: none; }
}
.sync-badge__panel{position:absolute;right:0;bottom:calc(100% + 10px);width:290px;max-width:calc(100vw - 32px);max-height:min(360px,calc(100vh - 72px));overflow:auto;box-sizing:border-box;padding:12px;background:#fff;color:#202124;border:1px solid rgba(15,23,42,.14);border-radius:10px;box-shadow:0 10px 28px rgba(15,23,42,.18);font-family:Arial,sans-serif;text-align:left;cursor:default}
.sync-badge__panel[hidden]{display:none!important}.sync-badge__panel strong{display:block;font-size:13px;line-height:1.35;margin-bottom:4px}.sync-badge__panel span{display:block;font-size:12px;line-height:1.45;color:#5f6368}.sync-badge__panel button{margin-top:10px;border:1px solid #6846b7;border-radius:6px;background:#fff;color:#6846b7;font:600 12px/1 Arial,sans-serif;padding:7px 9px;cursor:pointer}.sync-badge__panel button:hover{background:#f5f1ff}.sync-badge:focus-visible{outline:2px solid #6846b7;outline-offset:3px}

.kb-dashboard-footer__status.is-offline .kb-dashboard-footer__dot{background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.14)}
.kb-dashboard-footer__status.is-degraded .kb-dashboard-footer__dot{background:#d9951e;box-shadow:0 0 0 3px rgba(217,149,30,.14)}