/* Pi Chatbot — progress card: the "analyzing"/"searching"/"fact check" tiers JOINED in
   the SAME card (Claude-style), plus the typing-dots indicator shown before any tier
   exists yet. Content is the REAL intent/keywords/results of the request (see
   class-rest.php trace + chatbot-ui.js renderStepRow/finishStep). The whole card shares
   1 avatar with the answer bubble below it (beginBotTurn() in chatbot.js) — not 3
   separate "chat messages", no separate icon per row (1 svg avatar icon is enough).
   Each row is a <details> that opens in an "…ing" state with 3 bouncing dots FIRST,
   holds for a beat, then finalizes the real label + collapses. Still reopenable after
   completion (correct a11y invariant: no aria-hidden on the whole row, only the 3
   decorative dots get aria-hidden). */
/* Compacted 2026-07-26 to read as a single tight line per step (icon-row + chevron),
   matching the reference density of Claude's own "Thought for Xs"/"Searched N sources"
   collapsible rows — instead of the previous 2-line-per-step layout (fixed category on
   its own line, result on the line below). The category and result are still 2 separate
   spans in the DOM (renderStepRow() in chatbot-ui.js is untouched — this is a CSS-only
   change) so the customer still sees WHICH tier they're looking at, just inline on the
   same line as the result rather than stacked above it. No card background/border left
   — a flat, quiet strip that recedes behind the answer bubble it's introducing, rather
   than a boxed panel competing with it for attention. */
#pi-chatbot-panel .pi-cb-progress {
    font-size: 11px;
    color: var(--cb-text-muted);
}
#pi-chatbot-panel .pi-cb-step-row + .pi-cb-step-row {
    border-top: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
}
#pi-chatbot-panel .pi-cb-step-row summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 2px;
    font-weight: 500;
    transition: color 0.2s ease;
}
#pi-chatbot-panel .pi-cb-step-row summary::-webkit-details-marker { display: none; }
/* Chevron placed LAST in paint order (::after, not ::before) so it lands at the far
   right of the row — matching the reference UI, where the expand arrow sits after the
   "...trong Xs" text, not before the label. Follows .pi-cb-step-time in the DOM, so it
   naturally sits to the right of the elapsed-time text rather than at the start of the
   row (an earlier ::before placement put it on the wrong side). */
#pi-chatbot-panel .pi-cb-step-row summary::after {
    content: "";
    flex-shrink: 0;
    align-self: center;
    margin-left: 4px;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--cb-text-muted);
    border-bottom: 1.5px solid var(--cb-text-muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.6;
}
#pi-chatbot-panel .pi-cb-step-row[open] summary::after {
    transform: rotate(-135deg);
}
#pi-chatbot-panel .pi-cb-step-row summary:hover {
    color: var(--cb-text);
}
/* One line: fixed category + real result inline, wrapping together as a unit rather than
   stacking — this is the actual "gọn lại" (compact) change, everything else here is
   spacing/weight only. */
#pi-chatbot-panel .pi-cb-step-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 0;
}
#pi-chatbot-panel .pi-cb-agent-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: color-mix(in srgb, var(--cb-accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--cb-accent) 28%, transparent);
    color: var(--cb-accent);
    margin-right: 4px;
}
#pi-chatbot-panel .pi-cb-agent-badge svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
}
#pi-chatbot-panel .pi-cb-step-eyebrow {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cb-accent);
    opacity: 0.85;
    flex-shrink: 0;
}

/* Per-tier eyebrow colour.
   Until 2026-08-09 all four tiers rendered their eyebrow in the same
   var(--cb-accent), because the rows only carried two `kind` values between
   them ('thinking' for tiers 1-2, 'search' for tiers 3-4) — so the card read
   as one flat block and the stages were not distinguishable at a glance.
   Each tier now has its own kind, and the colour is derived from the theme's
   own tokens via color-mix rather than any literal hex, so a theme that
   restyles --cb-accent / --cb-online restyles this too.
   Only the HUE changes: size, weight, tracking and spacing stay identical
   across all four, so the rows still read as one consistent family — the
   earlier complaint was that one tier was styled differently in SHAPE, and
   that stays fixed. */
#pi-chatbot-panel .pi-cb-step-row--reading .pi-cb-step-eyebrow {
    /* Intake. Deliberately the quietest — nothing has been decided yet. */
    color: var(--cb-text-muted);
    opacity: 1;
}
#pi-chatbot-panel .pi-cb-step-row--identify .pi-cb-step-eyebrow {
    /* The routing decision — the most consequential tier, so full accent. */
    color: var(--cb-accent);
    opacity: 1;
}
#pi-chatbot-panel .pi-cb-step-row--search .pi-cb-step-eyebrow {
    /* Retrieval: accent pulled toward the panel text so it reads as a
       different stage without introducing a colour the theme never defined. */
    color: color-mix(in srgb, var(--cb-accent) 55%, var(--cb-text));
    opacity: 1;
}
#pi-chatbot-panel .pi-cb-step-row--verify .pi-cb-step-eyebrow {
    /* Fact check — the success token, the same green used by the online dot. */
    color: color-mix(in srgb, var(--cb-online) 80%, var(--cb-text));
    opacity: 1;
}
#pi-chatbot-panel .pi-cb-step-label-text {
    min-width: 0;
    color: var(--cb-text-muted);
}
#pi-chatbot-panel .pi-cb-step-row[open] .pi-cb-step-label-text {
    color: var(--cb-text);
}
/* The REAL elapsed seconds shown for that row (measured with performance.now(), see
   chatbot-ui.js finishStep) — tabular-nums so the layout doesn't jump when the number
   changes, dimmer than the main label since it's a secondary detail, similar to how
   Claude shows "Thought for Xs". */
#pi-chatbot-panel .pi-cb-step-time {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 6px;
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
    color: var(--cb-text-muted);
    opacity: 0.6;
}
/* Inline bouncing dots — reuses the exact same pi-cb-bounce animation as the typing
   dots, only differing in size/color, so there aren't 2 different "processing" styles
   defined in the same widget. */
#pi-chatbot-panel .pi-cb-step-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: auto;
}
#pi-chatbot-panel .pi-cb-step-dots .dot {
    width: 3.5px;
    height: 3.5px;
    background-color: var(--cb-accent);
    border-radius: 50%;
    animation: pi-cb-bounce 1.4s infinite ease-in-out both;
}
#pi-chatbot-panel .pi-cb-step-dots .dot:nth-child(1) { animation-delay: -0.32s; }
#pi-chatbot-panel .pi-cb-step-dots .dot:nth-child(2) { animation-delay: -0.16s; }
#pi-chatbot-panel .pi-cb-step-body {
    padding: 0 2px 8px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#pi-chatbot-panel .pi-cb-step-body:empty {
    display: none;
}
/* A row with nothing to expand must not show an expand affordance — otherwise clicking
   it looks broken (e.g. a rule-based "contact question" never runs a real data lookup,
   so its row has zero detail lines; showing a chevron there invites a click that reveals
   nothing). General rule keyed off the body's actual emptiness, not the step's kind, so
   it covers every current and future step type the same way. */
#pi-chatbot-panel .pi-cb-step-row:has(.pi-cb-step-body:empty) summary {
    cursor: default;
}
#pi-chatbot-panel .pi-cb-step-row:has(.pi-cb-step-body:empty) summary::after {
    display: none;
}
#pi-chatbot-panel .pi-cb-step-line {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--cb-text-muted);
}

#pi-chatbot-panel .pi-cb-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 18px;
    min-height: 24px;
}

#pi-chatbot-panel .pi-cb-typing .dot {
    width: 6px;
    height: 6px;
    background-color: var(--cb-text-muted);
    border-radius: 50%;
    animation: pi-cb-bounce 1.4s infinite ease-in-out both;
}

#pi-chatbot-panel .pi-cb-typing .dot:nth-child(1) { animation-delay: -0.32s; }
#pi-chatbot-panel .pi-cb-typing .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes pi-cb-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}