/* =============================================================================
   Agon chat — shared design tokens and keyframes (PB-10024, design option 2a).

   Loaded as a plain static asset by the web portal and the MAUI hybrid host so
   the scoped .razor.css of every Agon component can read the same custom
   properties and reuse the same keyframes (Blazor rewrites keyframes declared
   inside scoped files, so shared ones must live in a global sheet).

   Every colour is derived from a Design System token (var(--dt-*)); the four
   design values without a DS token are mixed from tokens so tenant re-theming
   still applies. No hex anywhere in this file.
   ============================================================================= */

.agon-surface {
    --agon-line: var(--dt-palette-gray-200);                     /* dividers, card borders */
    --agon-line-strong: color-mix(in srgb, var(--dt-palette-gray-500) 45%, var(--dt-palette-gray-200)); /* inputs */
    --agon-canvas: var(--dt-palette-gray-100);                   /* workbench / threads column ground, row dividers */
    --agon-brand-tint: color-mix(in srgb, var(--dt-color-brand) 16%, var(--dt-palette-white)); /* reference chips */
    --agon-brand-hover: color-mix(in srgb, var(--dt-color-brand) 78%, var(--dt-palette-black)); /* link hover */
    --agon-success: var(--dt-color-success);
    --agon-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --agon-ease: cubic-bezier(.2, .7, .2, 1);
    --agon-fast: 120ms;
    --agon-normal: 220ms;
}

/* Older WebViews without color-mix(): fall back to the nearest tokens. */
@supports not (color: color-mix(in srgb, red 50%, white)) {
    .agon-surface {
        --agon-line-strong: var(--dt-palette-gray-300);
        --agon-brand-tint: var(--dt-palette-gray-100);
        --agon-brand-hover: var(--dt-color-brand);
    }
}

/* Three pulsing dots on the status line while a turn is running. */
@keyframes agon-pulse {
    0%, 100% { opacity: .25; }
    50% { opacity: 1; }
}

/* Work-log rows and streamed blocks slide in as they arrive. */
@keyframes agon-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .agon-surface * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}