.auto-timeline{--timeline-muted:var(--muted,#697386);--timeline-border:var(--line,#d4dde7);font-size:14px;line-height:1.65;overflow-wrap:anywhere;}
/* Rows off screen are not laid out until they come near, as the desktop apps do; each keeps the
   height it had the last time it was drawn, so scrolling does not jump. */
.auto-timeline>.timeline-message,.auto-timeline>.timeline-group,.auto-timeline>.timeline-relay{content-visibility:auto;contain-intrinsic-block-size:auto 96px;}
.auto-timeline .timeline-message{margin:18px 0 24px;padding:0;background:none;border:0;max-width:100%;white-space:normal;}
.auto-timeline .timeline-message.user{margin-left:auto;width:fit-content;max-width:88%;padding:11px 16px;border:1px solid var(--timeline-border);border-radius:18px;background:rgba(255,255,255,.45);}
.auto-timeline .timeline-text{white-space:pre-wrap;}
.auto-timeline .timeline-role{display:block;margin-bottom:7px;font-size:11px;color:var(--timeline-muted);}
.auto-timeline .timeline-commentary .timeline-role{display:none;}
.auto-timeline .timeline-pending{display:block;margin-top:5px;font-size:11px;color:var(--timeline-muted);}
.auto-timeline .timeline-attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.auto-timeline .timeline-attachment{margin:0;max-width:190px;padding:6px 9px;border:1px solid var(--timeline-border);border-radius:10px;font-size:12px;background:rgba(255,255,255,.35);}
.auto-timeline .timeline-attachment img{display:block;width:auto;max-width:170px;height:auto;max-height:120px;object-fit:contain;border-radius:5px;margin-bottom:5px;}
.auto-timeline .timeline-attachment figcaption{overflow-wrap:anywhere;color:var(--timeline-muted);}
.auto-timeline .timeline-group{margin:8px 0 18px;border:0;background:none;}
.auto-timeline .timeline-summary{width:fit-content;list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;min-height:28px;font-size:13px;color:var(--timeline-muted);user-select:none;}
.auto-timeline .timeline-summary::-webkit-details-marker{display:none;}
.auto-timeline .timeline-summary::after{content:'⌄';font-size:13px;transform:rotate(-90deg);transition:transform .12s ease;}
.auto-timeline details[open]>.timeline-summary::after{transform:rotate(0);}
.auto-timeline .timeline-summary:focus-visible{outline:2px solid #647baf;outline-offset:3px;border-radius:3px;}
.auto-timeline .timeline-group-body{padding:6px 0 0;}
.auto-timeline .timeline-group-body>.timeline-message{margin:8px 0 15px;}
.auto-timeline .timeline-work{margin:2px 0;border:0;background:none;}
.auto-timeline .timeline-work>.timeline-summary{font-size:13px;}
.auto-timeline .timeline-work>.timeline-summary::before{content:'▣';font-size:12px;opacity:.8;}
.auto-timeline .timeline-work-output{margin:4px 0 12px;padding:10px 12px;border-left:2px solid var(--timeline-border);border-radius:0;background:rgba(255,255,255,.3);font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;max-height:320px;overflow:auto;user-select:text;}
.auto-timeline .timeline-status{font-size:12px;color:var(--timeline-muted);margin:8px 0 14px;}
.auto-timeline .timeline-empty{margin:80px auto;text-align:center;color:var(--timeline-muted);}
.auto-timeline [hidden]{display:none!important;}
@media(prefers-reduced-motion:reduce){.auto-timeline .timeline-summary::after{transition:none;}}
/* Tool steps: one quiet line each, state at a glance, output only on demand. */
.auto-timeline .timeline-group-body{border-left:1px solid var(--theme-line,#2a2a2a);margin-left:6px;padding:4px 0 2px 12px}
.auto-timeline .timeline-work>.timeline-summary{width:100%;max-width:100%;min-height:26px;gap:8px}
.auto-timeline .timeline-group>.timeline-summary{max-width:100%}
.auto-timeline .timeline-work>.timeline-summary::before{content:none}
.auto-timeline .timeline-work.is-empty>.timeline-summary{cursor:default}
.auto-timeline .timeline-work.is-empty>.timeline-summary::after{content:none}
.auto-timeline .timeline-tool-name{color:var(--theme-text,#eee);font-weight:500;white-space:nowrap}
.auto-timeline .timeline-tool-detail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;opacity:.75}
/* The status dot of a tool line; div.timeline-status is a turn's status line. */
.auto-timeline .timeline-summary>.timeline-status{flex:none;width:12px;height:12px;display:inline-grid;place-items:center;font-size:10px;line-height:1}
.auto-timeline .timeline-status[data-state=done],.auto-timeline .timeline-status[data-state=stopped]{display:none}
/* While a tool runs, a quiet pulsing dot, as in Claude Code; a finished line has no mark. */
.auto-timeline .timeline-status[data-state=running]{width:6px;height:6px;margin:0 3px;border-radius:50%;background:currentColor;animation:timeline-pulse 1.2s ease-in-out infinite}
.auto-timeline .timeline-status[data-state=error]:before{content:'✕';color:#e59a8a}
.auto-timeline .timeline-group.is-active>.timeline-summary::before{content:'';flex:none;width:6px;height:6px;margin:0 3px;border-radius:50%;background:var(--accent,currentColor);animation:timeline-pulse 1.2s ease-in-out infinite}
.auto-timeline .timeline-group>.timeline-summary .timeline-tool-detail{flex:0 1 auto}
.auto-timeline .timeline-work-output{max-height:320px;overflow:auto;background:var(--theme-raised,rgba(255,255,255,.04));border-left-color:var(--theme-border,#333);border-radius:6px}
.auto-timeline details[open]>.timeline-group-body,.auto-timeline details[open]>.timeline-work-output{animation:timeline-reveal .16s ease-out}
@keyframes timeline-spin{to{transform:rotate(360deg)}}
@keyframes timeline-pulse{50%{opacity:.25}}
@keyframes timeline-reveal{from{opacity:0;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.auto-timeline .timeline-group.is-active>.timeline-summary::before,.auto-timeline .timeline-status[data-state=running],.auto-timeline details[open]>.timeline-group-body,.auto-timeline details[open]>.timeline-work-output{animation:none}}
.auto-timeline .timeline-work-output{color:var(--theme-muted,#aaa)}
/* Messages between chats and routine runs: one line, «Mensaje recibido de <chat> ▸», that unfolds. */
.timeline-relay{margin:4px 0;max-width:var(--chat-column,740px)}
.timeline-relay-summary{display:flex;align-items:center;gap:8px;min-width:0;list-style:none;cursor:pointer;color:var(--text-200);font:400 14px/22px var(--font-sans)}
.timeline-relay-summary::-webkit-details-marker{display:none}
.timeline-relay-summary:hover .timeline-relay-name{color:var(--text-000)}
.timeline-relay-label{flex:none}
.timeline-relay-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--border-300);text-underline-offset:3px}
.timeline-relay-summary::after{content:"";flex:none;width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;opacity:.7;transition:transform .15s ease-out}
.timeline-relay[open]>.timeline-relay-summary::after{transform:rotate(90deg)}
.timeline-relay-body{margin:6px 0 8px;padding:8px 12px;border-left:2px solid var(--border-100);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-000);font:400 var(--chat-font-size,15px)/1.6 var(--font-sans)}