/* AgentTimelineBlock — Claude-style progress UI for the chat tab.
   Tokens and keyframes mirror claude.ai bundle (c6a992d55-BrJMKEbe.css). */

.agent-timeline {
    --atl-text-500: hsl(51 3.1% 43.7%);
    --atl-text-300: hsl(60 2.5% 23.3%);
    --atl-bg-100:   hsl(48 33.3% 97.1%);
    --atl-bg-200:   hsl(48 25% 92.2%);
    --atl-border:   hsl(51 16.5% 84.5% / .6);
    --atl-accent:   hsl(16 81% 52%);
    --atl-success:  #22c55e;
    --atl-error:    #dc2626;
    --atl-rail-left: 15px;
    --atl-row-left: 40px;

    position: relative;
    padding: 4px 0 8px;
    font-family: "Source Serif 4", "Tiempos", "Noto Serif", Georgia, serif;
    color: var(--atl-text-300);

    /* Block-level entrance */
    opacity: 0;
    transform: translateY(6px);
    animation: atl-enter .25s ease-out forwards;
}
@keyframes atl-enter {
    to { opacity: 1; transform: translateY(0); }
}

/* Left rail (timeline vertical line) — only when at least one row exists */
.agent-timeline.has-rows::before {
    content: "";
    position: absolute;
    left: var(--atl-rail-left);
    top: 32px;
    bottom: 12px;
    width: 1px;
    background: var(--atl-border);
}

/* Generic row */
.atl-row {
    position: relative;
    padding: 6px var(--atl-row-left) 6px var(--atl-row-left);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    opacity: 0;
    transform: translateY(4px);
    animation: atl-row-enter .18s ease-out forwards;
}
@keyframes atl-row-enter {
    to { opacity: 1; transform: translateY(0); }
}

.atl-row__icon {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 16px; height: 16px;
    color: var(--atl-text-500);
}
.atl-row__text  { flex: 1; color: var(--atl-text-500); min-width: 0; }
.atl-row__text.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-row__aux   { color: var(--atl-text-500); font-size: 13px; flex-shrink: 0; }

/* Thinking-summary row (toggle button) */
.atl-thinking {
    cursor: pointer;
    user-select: none;
}
.atl-thinking:hover .atl-row__text { color: var(--atl-text-300); }
.atl-thinking__chevron {
    display: inline-block;
    transition: transform .2s;
    transform: rotate(-90deg);
}
.atl-thinking.expanded .atl-thinking__chevron { transform: rotate(0); }
.atl-thinking__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease-out;
    padding-left: var(--atl-row-left);
}
.atl-thinking.expanded .atl-thinking__body { grid-template-rows: 1fr; }
.atl-thinking__body > div { overflow: hidden; min-width: 0; }
.atl-thinking__body p { margin: 6px 0; color: var(--atl-text-500); font-size: 13px; line-height: 1.55; }

/* Text label pulse while thinking — still useful for drawing eye to the
 * "第一步推理中…" message; paired with the A-bloom character spinner. */
.atl-thinking .atl-row__text {
    animation: atl-text-pulse 1.8s ease-in-out infinite;
}
@keyframes atl-text-pulse {
    0%, 100% { opacity: 1;    }
    50%      { opacity: 0.6; }
}

/* Character spinner — shared style for thinking (A-bloom) and tool-row (B-breath).
 * Replaces legacy SVG sparkle + CSS circle. Cyan matches Terminal tab. */
.atl-row__spinner-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0369A1;
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
    font-size: 14px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .atl-row__spinner-text {
    color: #7dd3fc;               /* mirrors terminal --cc-cyan on dark */
}

/* Check / cross remain colour-coded on completion. */
.atl-check { color: var(--atl-success); }
.atl-cross { color: var(--atl-error); }

/* Tool row status swap uses CSS class; no DOM reshuffling */
.atl-tool-row .atl-row__icon-wrap { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; }

/* Search result card */
.atl-result-card {
    margin: 4px 0 8px var(--atl-row-left);
    background: #fff;
    border: 1px solid var(--atl-border);
    border-radius: 12px;
    overflow: hidden;
}
.atl-result-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--atl-border);
    font-size: 13px;
}
.atl-result-row:first-child { border-top: none; }
.atl-result-row:hover { background: var(--atl-bg-100); }
.atl-result-row__fav {
    width: 20px; height: 20px; border-radius: 4px;
    background: var(--atl-bg-200);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: var(--atl-text-500);
    flex-shrink: 0;
}
.atl-result-row__title { flex: 1; color: var(--atl-text-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.atl-result-row__domain { color: var(--atl-text-500); flex-shrink: 0; }

/* Block-level exit (Claude bundle keyframes verbatim) */
@keyframes timeline-fade-out { 0%{opacity:1} to{opacity:0} }
@keyframes timeline-collapse {
    0%   { grid-template-rows: 1fr; opacity: 1; }
    100% { grid-template-rows: 0fr; opacity: 0; }
}
.agent-timeline.exiting {
    display: grid;
    overflow: hidden;
    animation: timeline-collapse .35s ease-out forwards;
}
.agent-timeline.exiting > div { min-height: 0; overflow: hidden; }