/* ============================================================================
   live-usage.css — the live token / credit meter chip.

   ── Why it looks like this ──
   The meter appears inside three very different hosts: the Delphos Chat composer,
   the Delphos Design top bar, and the Delphos Code status bar. So every value
   here is derived from the APP's own tokens (--accent, --secondary-color,
   --border-color, --text-color …) rather than from any one product's palette.
   That is the same rule delphos-design.css follows, and it is why the chip
   inherits light mode for free and never reads as a foreign widget.

   Three states, and only three, because there are only three things worth saying:
     .is-live     a run is spending tokens right now
     .is-warn     the daily allowance is nearly gone
     .is-blocked  the allowance is gone and the run was stopped

   The chip is a <button> because in the blocked state it does something (opens
   the plans page). A thing that responds to a click must be focusable and
   keyboard-reachable, so it is a real button rather than a styled span.
   ========================================================================== */

.dlu-chip {
    --dlu-tone: var(--accent, #b7795c);
    --dlu-soft: var(--accent-soft, rgba(183, 121, 92, .14));

    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px;
    max-width: 100%;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--dlu-tone);
    background: var(--dlu-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: default;
    white-space: nowrap;
    transition:
        background-color 160ms var(--ui-ease, cubic-bezier(.22, .61, .36, 1)),
        color 160ms var(--ui-ease, cubic-bezier(.22, .61, .36, 1)),
        border-color 160ms var(--ui-ease, cubic-bezier(.22, .61, .36, 1));
}

.dlu-chip[hidden] { display: none !important; }

.dlu-chip .dlu-ico {
    font-family: 'Material Symbols Rounded', 'Material Icons';
    font-size: 15px;
    line-height: 1;
    flex: none;
    font-variation-settings: 'wght' 500, 'opsz' 20;
}

.dlu-count { flex: none; }

/* The allowance bar. Deliberately small and quiet: it is context for the number
   beside it, not the headline. */
.dlu-bar {
    position: relative;
    flex: none;
    width: 40px;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 22%, transparent);
    overflow: hidden;
}

/* color-mix is recent; this fallback keeps the track visible in older engines
   instead of leaving an invisible bar. */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
    .dlu-bar { background: rgba(255, 255, 255, .18); }
    body.light_mode .dlu-bar { background: rgba(0, 0, 0, .14); }
}

.dlu-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: currentColor;
    border-radius: 999px;
    transition: width 320ms var(--ui-ease, cubic-bezier(.22, .61, .36, 1));
}

.dlu-pct { flex: none; opacity: .72; font-weight: 500; }

/* ── live ─────────────────────────────────────────────────────────────────
   A slow pulse on the icon only. The number is already changing, so animating
   the whole chip would be noise competing with the answer being streamed. */
.dlu-chip.is-live .dlu-ico { animation: dlu-pulse 1.5s ease-in-out infinite; }

@keyframes dlu-pulse {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}

/* ── warn ────────────────────────────────────────────────────────────────── */
.dlu-chip.is-warn {
    --dlu-tone: #d29922;
    --dlu-soft: rgba(210, 153, 34, .14);
    border-color: rgba(210, 153, 34, .3);
}

/* ── blocked ──────────────────────────────────────────────────────────────
   This is the only state that is genuinely interactive, so it is the only one
   that gets a pointer, a hover and a lift. */
.dlu-chip.is-blocked {
    --dlu-tone: #f85149;
    --dlu-soft: rgba(248, 81, 73, .14);
    border-color: rgba(248, 81, 73, .38);
    cursor: pointer;
    animation: dlu-arrive 340ms var(--ui-ease, cubic-bezier(.22, .61, .36, 1));
}
.dlu-chip.is-blocked:hover { background: rgba(248, 81, 73, .22); }
.dlu-chip.is-blocked:active { transform: translateY(1px); }

@keyframes dlu-arrive {
    from { opacity: 0; transform: translateY(-4px) scale(.96); }
    to { opacity: 1; transform: none; }
}

.dlu-chip:focus-visible {
    outline: 2px solid var(--accent-ring, rgba(183, 121, 92, .4));
    outline-offset: 2px;
}

body.pref-reduce-motion .dlu-chip,
body.pref-reduce-motion .dlu-chip * {
    animation: none !important;
    transition: none !important;
}

/* ── the Chat dock ────────────────────────────────────────────────────────
   Chat has no chrome slot for a meter, so one is created above the composer.
   `pointer-events: none` on the dock with `auto` on the chip means the empty
   dock can never swallow a click aimed at the composer behind it. */
.dlu-dock {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 2px 6px;
    pointer-events: none;
}
.dlu-dock:empty { display: none; }
.dlu-dock > * { pointer-events: auto; }

.dlu-dock.is-floating {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: auto;
    padding: 0;
    z-index: 8000;
}

/* ── host-specific fitting ───────────────────────────────────────────────── */

/* Delphos Code's status bar is 26px tall with 11px type, so the chip shrinks to
   sit on that baseline instead of stretching the bar. */
.dcode-statusbar .dlu-chip {
    height: 18px;
    padding: 0 7px;
    font-size: 11px;
    border-radius: 999px;
}
.dcode-statusbar .dlu-chip .dlu-ico { font-size: 13px; }
.dcode-statusbar .dlu-bar { width: 32px; }

/* In the Delphos Design top bar the chip sits beside the design score chip, so
   it matches that chip's metrics exactly. */
.ddx-top .dlu-chip { height: 26px; font-size: 12px; }