/* v1.1.40 — Qwen 3 thinking indicator. Shown while hidden reasoning
   tokens stream but no content has arrived yet (typically 10–60s on
   tool-call prompts). Calm, italic, low-contrast — not a loading
   spinner; we want the chat to feel patient, not anxious. */
.cadeo-chat-message-ai .cadeo-chat-thinking-indicator {
    display: inline-block;
    color: var(--text-tertiary);
    font-style: italic;
    font-size: var(--font-size-sm);
    opacity: 0.6;
    animation: cadeo-chat-thinking-pulse 1.4s ease-in-out infinite;
}
@keyframes cadeo-chat-thinking-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
    .cadeo-chat-thinking-indicator { animation: none; opacity: 0.6; }
}

/* v1.1.44 — Slim disclosure chip for the reasoning trace.
   Replaces v1.1.43's bordered card. Reasoning is META — it should
   defer to the answer, earning weight only on hover and when expanded.
   Head is a real <button> for native a11y + keyboard support. */
.cadeo-chat-thinking-trace {
    margin: 2px 0 8px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    transition: background var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-thinking-trace-open {
    background: var(--bg-secondary);
    padding: 8px 12px 10px;
}

.cadeo-chat-thinking-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-in-out),
                color var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-thinking-trace:not(.cadeo-chat-thinking-trace-open)
  .cadeo-chat-thinking-head:hover {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.cadeo-chat-thinking-head:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.cadeo-chat-thinking-chevron {
    color: var(--text-tertiary);
    font-size: var(--font-size-2xs);
    line-height: 1;
    width: 10px;
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-thinking-trace-open .cadeo-chat-thinking-chevron {
    transform: rotate(90deg);
}

.cadeo-chat-thinking-label {
    font-style: normal;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Pulsing primary-blue dot — calmer than the v1.1.43 italic label fade.
   Lives only while reasoning tokens are flowing; the chip stays visible
   after stream end but without the dot. */
.cadeo-chat-thinking-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: #4A90D9;
    flex-shrink: 0;
    animation: cadeo-chat-thinking-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .cadeo-chat-thinking-dot { animation: none; opacity: 0.7; }
    .cadeo-chat-thinking-chevron { transition: none; }
}

.cadeo-chat-thinking-preview {
    color: var(--text-tertiary);
    font-style: italic;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cadeo-chat-thinking-toggle {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    flex-shrink: 0;
    padding-left: 8px;
}
.cadeo-chat-thinking-head:hover .cadeo-chat-thinking-toggle {
    color: #4A90D9;
}

.cadeo-chat-thinking-body {
    margin-top: 6px;
    padding: 8px 4px 4px;
    color: var(--text-secondary);
    font-style: normal;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 280px;
    overflow-y: auto;
    cursor: text;
    user-select: text;
}
/* While still streaming, cap the expanded body lower so the in-flight
   answer below isn't pushed off-screen. */
.cadeo-chat-thinking-trace-live .cadeo-chat-thinking-body {
    max-height: 140px;
}

.cadeo-chat-thinking-utils {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}
.cadeo-chat-thinking-util {
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-thinking-util:hover {
    background: var(--bg-tertiary);
    color: #4A90D9;
}

/* ── v1.1.53 Phase strip ──────────────────────────────────────────────
   One consolidated activity surface per AI turn — thinking + read-tool
   phases as a calm vertical log. Replaces v1.1.43/44's standalone
   reasoning-trace disclosure (one row inside the strip now) and the
   v1.1.35 .cadeo-chat-tool-trace siblings (each read = a row). Write
   cards are untouched and continue to render as separate entries below.

   The strip is visually subordinate to the answer: tertiary text colour,
   no card background while expanded, no indent. Only the single active
   row carries any weight — the breathing 8px blue dot is the one warm
   point in the strip. */

.cadeo-chat-phases {
    margin: 2px 0 8px;
}
.cadeo-chat-phases-collapsed {
    margin-bottom: 6px;
}

/* Vertical row list (expanded form). Append-only by design — finished
   rows stay put so the strip never reflows above the active row. */
.cadeo-chat-phase-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cadeo-chat-phase-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    padding: 2px 4px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    line-height: 1.4;
    background: transparent;
    border: 0;
    text-align: left;
    width: 100%;
    /* Gentle fade-in on append — 220ms slide is the largest motion in
       the strip and stays under the v1.1.45 200ms timing budget for
       lightweight transitions. Respect reduced-motion below. */
    animation: cadeo-chat-phase-in var(--duration-normal) var(--ease-in-out);
}
.cadeo-chat-phase-row-expandable {
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-phase-row-expandable:hover {
    background: var(--bg-secondary);
}
.cadeo-chat-phase-row-expandable:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

/* The 8×8 dot box. The glyph inside swaps per state so colorblind
   users don't lose the signal — queued/active draw via ::before,
   done/failed render an SVG payload. */
.cadeo-chat-phase-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.cadeo-chat-phase-dot-queued::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: var(--radius-circle);
    border: 1.5px solid var(--text-tertiary);
    opacity: 0.5;
}
.cadeo-chat-phase-dot-active::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: var(--radius-circle);
    background: #4A90D9;
    animation: cadeo-chat-phase-breathe 1.6s ease-in-out infinite;
}
.cadeo-chat-phase-dot-done svg {
    width: 10px; height: 10px;
    color: #4A90D9;
    opacity: 0.7;
}
.cadeo-chat-phase-dot-failed svg {
    width: 10px; height: 10px;
    color: var(--color-amber-text);
}

/* Tense + tone per row state. */
.cadeo-chat-phase-row[data-state="queued"] .cadeo-chat-phase-name {
    opacity: 0.55;
}
.cadeo-chat-phase-row[data-state="active"] .cadeo-chat-phase-name {
    color: var(--text-secondary);
    font-weight: 500;
}
.cadeo-chat-phase-row[data-state="failed"] .cadeo-chat-phase-name {
    color: var(--color-amber-text);
}
.cadeo-chat-phase-name {
    flex-shrink: 0;
}
.cadeo-chat-phase-meta {
    color: var(--text-tertiary);
    opacity: 0.75;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style: italic;
    flex: 1 1 auto;
    min-width: 0;
}
.cadeo-chat-phase-row[data-state="done"] .cadeo-chat-phase-meta {
    font-style: normal;
}
.cadeo-chat-phase-row[data-state="failed"] .cadeo-chat-phase-meta {
    font-style: normal;
    color: var(--color-amber-text);
    opacity: 0.85;
}

/* Thinking-row affordance — chevron rotates when reasoning is open. */
.cadeo-chat-phase-chevron {
    color: var(--text-tertiary);
    font-size: var(--font-size-2xs);
    line-height: 1;
    width: 10px;
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-phase-row-expandable[aria-expanded="true"] .cadeo-chat-phase-chevron {
    transform: rotate(90deg);
}
.cadeo-chat-phase-toggle {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    flex-shrink: 0;
    padding-left: 8px;
}
.cadeo-chat-phase-row-expandable:hover .cadeo-chat-phase-toggle {
    color: #4A90D9;
}

/* Expanded thinking row needs to drop the body below itself, so we
   wrap the row + body in a column container. The body reuses the
   v1.1.43/44 .cadeo-chat-thinking-body / -utils CSS unchanged. */
.cadeo-chat-phase-row-with-body {
    display: flex;
    flex-direction: column;
}

/* Collapsed summary — one button, "✓ 3 steps · Show". */
.cadeo-chat-phases-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    font: inherit;
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-in-out),
                color var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-phases-summary:hover {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.cadeo-chat-phases-summary:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}
.cadeo-chat-phases-summary-label {
    font-weight: 500;
}
.cadeo-chat-phases-summary-meta-failed {
    color: var(--color-amber-text);
}
.cadeo-chat-phases-summary-toggle {
    color: var(--text-tertiary);
    font-weight: 500;
}
.cadeo-chat-phases-summary:hover .cadeo-chat-phases-summary-toggle {
    color: #4A90D9;
}

/* Trailing "Hide" affordance when the strip is expanded after the turn
   ends. During streaming the strip stays open with no toggle — the
   live state is reassurance, not chrome. */
.cadeo-chat-phases-toggle {
    display: inline-block;
    margin: 4px 0 0 8px;
    padding: 2px 8px;
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-in-out),
                color var(--duration-fast) var(--ease-in-out);
}
.cadeo-chat-phases-toggle:hover {
    background: var(--bg-secondary);
    color: #4A90D9;
}

/* Breathing pulse for the active dot — slower (1.6s) than the v1.1.43
   thinking-pulse 1.4s for a calmer cadence. GPU-friendly (transform +
   opacity), one 8px composited layer. */
@keyframes cadeo-chat-phase-breathe {
    0%, 100% { transform: scale(1);    opacity: 0.55; }
    50%      { transform: scale(1.25); opacity: 1; }
}
@keyframes cadeo-chat-phase-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cadeo-chat-phase-row { animation: none; }
    .cadeo-chat-phase-dot-active::before {
        animation: none;
        opacity: 1;
    }
    .cadeo-chat-phase-chevron { transition: none; }
}