/* State-driven accents; layout remains in workspace.css. */
cograph-orb { display: inline-flex; width: 22px; height: 22px; flex: 0 0 22px; color: var(--accent); }
cograph-orb canvas { display: block; width: 22px; height: 22px; }
.agent-card-status.motion-status { min-height: 37px; padding-block: 7px; }

.nav-indicator {
    position: absolute; z-index: -1; pointer-events: none; border-radius: 13px;
    background: var(--accent-soft); border: 1px solid var(--accent-border);
    box-shadow: inset 0 1px 0 #ffffff10, 0 2px 8px #007aff06;
}
#bottom-nav.has-motion .bottom-nav-item.active { background: transparent; box-shadow: none; }
#bottom-nav .bottom-nav-item { position: relative; }

@property --publish-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
#preview-panel::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    pointer-events: none; z-index: 6; opacity: 0;
    background: conic-gradient(from var(--publish-angle), transparent 0deg 235deg,
        color-mix(in srgb, var(--accent) 12%, transparent) 265deg,
        color-mix(in srgb, var(--accent) 65%, transparent) 310deg, transparent 355deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    transition: opacity .3s ease;
}
#preview-panel[data-deploying="true"]::after { opacity: 1; animation: publish-orbit 3.6s linear infinite; }
#preview-status[data-deploying="true"]::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#preview-status[data-deployment="failed"]::before,
#preview-status[data-deployment="setup_required"]::before { background: var(--danger); box-shadow: none; }
@keyframes publish-orbit { to { --publish-angle: 360deg; } }
body.motion-paused #preview-panel::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    #preview-panel::after { animation: none !important; transition: none; }
    #preview-panel[data-deploying="true"]::after { background: var(--accent-border); }
}