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

/* A traveling edge on the reply, a quieter stationary breath below the composer. */
@property --reply-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.agent-card:not(.done):not(.error)::after {
    content: '';
    background: conic-gradient(from var(--reply-angle), transparent 0deg 250deg,
        color-mix(in srgb, var(--accent) 15%, transparent) 285deg,
        color-mix(in srgb, var(--accent) 65%, transparent) 325deg, 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;
    animation: reply-orbit 7s linear infinite;
}
#sidebar:has(.agent-card:not(.done):not(.error)) #chat-input-row::after {
    content: '';
    background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent) 48%, transparent), transparent 72%);
    filter: blur(3px);
    transform-origin: center bottom;
    animation: composer-breathe 4.6s ease-in-out infinite;
}
@keyframes reply-orbit { to { --reply-angle: 360deg; } }
@keyframes composer-breathe {
    0%, 100% { opacity: .45; transform: scaleX(.82); }
    50% { opacity: .9; transform: scaleX(1); }
}
body.motion-paused .agent-card::after,
body.motion-paused #chat-input-row::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .agent-card:not(.done):not(.error)::after { animation: none; background: var(--accent-border); }
    #sidebar:has(.agent-card:not(.done):not(.error)) #chat-input-row::after { animation: none; opacity: .5; }
}

@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); }
}