.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,.auto-timeline>.timeline-opener{content-visibility:auto;contain-intrinsic-block-size:auto 96px;}
/* The last rows are always laid out: a new row with its 96 px estimate threw the end of the thread, and with it the scroll, off by a hundred pixels for one frame. */
.auto-timeline>:nth-last-child(-n+6){content-visibility:visible;}
.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:'';flex:none;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;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;}
/* A failure in its place: plain text in the page, never over anything. */
.inline-failure{display:inline-block;margin:4px 8px;font:500 12.5px/18px var(--font-sans);color:#f2b8ae;white-space:normal;overflow-wrap:anywhere}
.chat>.inline-failure{display:block;width:100%;max-width:var(--chat-column,740px);margin:4px auto}
.history-notice .history-retry{margin-left:6px;padding:0;border:0;background:none;color:#8dbbff;font:600 inherit;cursor:pointer}
@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-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)}
/* Pictures a step showed or an answer made, as Claude shows them: a thumbnail at the right of the
   step, up to three on a folded group's heading, and the picture itself under the answer. */
.auto-timeline .timeline-thumbs{order:10;margin-left:auto;display:inline-flex;gap:6px;padding-left:12px;flex:none}
.auto-timeline .timeline-thumbs[hidden],.auto-timeline .timeline-pictures[hidden]{display:none}
.auto-timeline .timeline-group:has(>.timeline-summary .timeline-thumbs:not([hidden]))>.timeline-summary{width:100%}
.auto-timeline .timeline-group[open]>.timeline-summary .timeline-thumbs{display:none}
.auto-timeline .timeline-thumb{display:block;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:6px;overflow:hidden;background:#111;cursor:zoom-in;width:64px;height:40px;flex:none}
.auto-timeline .timeline-group>.timeline-summary .timeline-thumb{width:62px;height:38px}
.auto-timeline .timeline-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.auto-timeline .timeline-thumb:hover{border-color:rgba(255,255,255,.35)}
.auto-timeline .timeline-thumb:focus-visible,.auto-timeline .timeline-picture:focus-visible{outline:2px solid #647baf;outline-offset:2px}
.auto-timeline .timeline-work.is-empty.has-images>.timeline-summary{cursor:default}
.auto-timeline .timeline-pictures{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.auto-timeline .timeline-picture{display:block;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;background:repeating-conic-gradient(#1c1c1c 0 25%,#232323 0 50%) 0 0/16px 16px;cursor:zoom-in;max-width:min(100%,360px)}
.auto-timeline .timeline-picture img{display:block;max-width:100%;max-height:320px;width:auto;height:auto;object-fit:contain}
.timeline-image-viewer{width:fit-content;height:fit-content;padding:0;border:0;background:transparent;max-width:92vw;max-height:92vh;overflow:hidden;cursor:zoom-out}
.timeline-image-viewer::backdrop{background:rgba(0,0,0,.78)}
.timeline-image-viewer img{display:block;width:auto;height:auto;max-width:92vw;max-height:92vh;object-fit:contain;border-radius:8px}
/* Audio and video an answer named: the browser's own player, with the file's name under it. */
.auto-timeline .timeline-player{margin:0;display:flex;flex-direction:column;gap:6px;max-width:min(100%,520px)}
.auto-timeline .timeline-player.is-audio{width:min(100%,420px)}
.auto-timeline .timeline-player audio{width:100%;height:40px}
.auto-timeline .timeline-player video{display:block;width:100%;max-height:360px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#000}
.auto-timeline .timeline-player figcaption{font-size:12px;color:rgba(255,255,255,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auto-timeline .timeline-player.is-missing figcaption{color:rgba(255,255,255,.45);font-style:italic}
/* The person's files sit above their text, at the right, as in Claude and ChatGPT. */
.auto-timeline .timeline-message.user>.timeline-attachments{margin:0 0 8px;justify-content:flex-end}
/* An answer's file where it is cited: right after its paragraph or list item. */
.auto-timeline .auto-md-media{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 14px}
.auto-timeline li>.auto-md-media{margin:8px 0}
.auto-timeline .auto-md-media-line{display:none}
.auto-timeline .auto-md-viz{display:block;margin:12px 0 16px}
.auto-timeline .timeline-message:has(.auto-viz.is-wide),.auto-timeline .timeline-message.has-expanded-viz{content-visibility:visible;contain:none}
.auto-viz{position:relative;width:100%}
.auto-viz.is-wide{width:min(1024px,var(--viz-available,100%));margin-left:calc((100% - min(1024px,var(--viz-available,100%)))/2)}
.auto-viz-frame{display:block;width:1px;min-width:100%;height:120px;border:0;background:transparent;color-scheme:dark}
.auto-viz.is-loading .auto-viz-frame{min-height:120px;border-radius:10px;background:var(--bg-100,#191918)}
.auto-viz-expand{position:absolute;top:6px;right:6px;width:30px;height:30px;padding:0;display:grid;place-items:center;border:1px solid var(--border-100,#343432);border-radius:8px;background:var(--surface-raised,#272726);color:var(--text-000,#F2F1EE);font-size:15px;line-height:1;opacity:.82}
.auto-viz-expand:hover{opacity:1}
.auto-viz.is-expanded{position:fixed;inset:24px;width:auto;height:auto;margin:0;padding:18px;overflow:auto;color:inherit;border:1px solid var(--border-100,#343432);border-radius:16px;background:var(--bg-000,#1F1F1E);box-shadow:0 18px 60px rgba(0,0,0,.6)}
.auto-viz-error{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:8px 12px;border:1px solid var(--border-100,#343432);border-radius:10px;color:var(--danger,#FF8F80);font-size:13px}
.auto-viz-error[hidden]{display:none}
.auto-viz-missing{margin:0;padding:10px 12px;border:1px dashed var(--border-100,#343432);border-radius:10px;color:var(--text-200,#B6B4AE);font-size:13px}
.auto-viz-dialog{width:min(560px,92vw);padding:20px;border:1px solid var(--border-100,#343432);border-radius:16px;background:var(--bg-100,#191918);color:var(--text-000,#F2F1EE)}
.auto-viz-dialog::backdrop{background:var(--overlay,rgba(0,0,0,.56))}
.auto-viz-dialog-title{margin:0 0 6px;font-size:16px;font-weight:600;line-height:22px}
.auto-viz-dialog-note{margin:0 0 12px;color:var(--text-200,#B6B4AE);font-size:13px}
.auto-viz-dialog-url{margin:0 0 12px;padding:8px 10px;max-height:120px;overflow:auto;border:1px solid var(--border-100,#343432);border-radius:8px;font-family:var(--font-mono,monospace);font-size:13px;word-break:break-all}
.auto-viz-dialog-text{display:block;width:100%;min-height:120px;margin:0 0 14px;resize:vertical}
.auto-viz-dialog-foot{display:flex;justify-content:flex-end;gap:8px}

/* The person's message keeps air around it: it never sits under another sender's heading. */
.auto-timeline .timeline-relay+.timeline-message.user,.auto-timeline .timeline-message.user+.timeline-relay{margin-top:22px}
/* A user bubble with a picture fits the picture: no empty band beside it. */
.auto-timeline .timeline-message.user:has(>.timeline-attachments:not([hidden])){display:flex;flex-direction:column;align-items:flex-end}
.auto-timeline .timeline-message.user>.timeline-attachments .timeline-attachment{padding:0;border:0;background:none;max-width:300px}
.auto-timeline .timeline-message.user>.timeline-attachments .timeline-attachment img{max-width:300px;max-height:220px;border-radius:12px;margin:0}
.auto-timeline .timeline-message.user>.timeline-attachments .timeline-attachment:has(img) figcaption{display:none}
/* The running group's clock; the stopped mark; the button to go on. */
.auto-timeline .timeline-elapsed{font-variant-numeric:tabular-nums;color:var(--text-400);font-size:12.5px}
.auto-timeline .timeline-elapsed::before{content:'·';margin-right:6px;opacity:.6}
.auto-timeline .timeline-group.is-stopped>.timeline-summary,.auto-timeline .timeline-group.is-stopping>.timeline-summary{color:color-mix(in srgb,var(--danger) 70%,var(--text-000))}
.auto-timeline .timeline-group.is-stopped>.timeline-summary::before{content:'';flex:none;width:8px;height:8px;border-radius:2px;background:var(--danger);margin:0 2px}
.auto-timeline .timeline-resume{margin:4px 0 18px}
.auto-timeline .timeline-resume-button{height:30px;padding:0 12px;border-radius:8px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border-100));background:color-mix(in srgb,var(--accent) 12%,transparent);color:color-mix(in srgb,var(--accent) 60%,var(--text-000));font:500 13px/18px var(--font-sans);cursor:pointer}
.auto-timeline .timeline-resume-button:disabled{opacity:.6;cursor:default}
/* The way back to the end: a round arrow above the composer. */
.timeline-jump{position:absolute;left:50%;margin-left:-18px;z-index:5;width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-300);background:var(--surface-raised,var(--bg-200));color:var(--text-000);box-shadow:0 6px 20px rgba(0,0,0,.45);cursor:pointer}
.timeline-jump[hidden]{display:none}
/* Pressing a button moves it (button:active in the theme): this one stays put. */
.timeline-jump:hover,.timeline-jump:active:enabled{transform:none}
/* Narrow window: the browser takes the whole area and the thread is hidden, its arrow with it. */
@media(max-width:900px){.chat.with-browser .timeline-jump{visibility:hidden}}


/* Design fidelity (chat UX 0343). The live row: orb, «Trabajando», clock and the step it is on. */
.auto-timeline .timeline-live-orb{display:none}
.auto-timeline .timeline-group.is-live>.timeline-summary{gap:10px;height:40px;min-height:40px;padding:0 14px 0 10px;border-radius:12px;background:var(--bg-200,#232322);border:1px solid var(--border-100,#30302e);color:var(--text-200,#d9d7d2);font:500 13.5px/18px var(--font-sans);white-space:nowrap;max-width:100%}
.auto-timeline .timeline-group.is-live>.timeline-summary::before{content:none}
.auto-timeline .timeline-group.is-live .timeline-group-label{font-weight:600;color:var(--text-000,#f2f1ee)}
.auto-timeline .timeline-group.is-live .timeline-elapsed{font-size:13.5px}
.auto-timeline .timeline-group.is-live .timeline-elapsed::before{content:none}
.auto-timeline .timeline-group.is-live>.timeline-summary .timeline-tool-detail.is-text{font:500 13.5px/18px var(--font-sans);opacity:1;color:var(--text-200,#d9d7d2)}
.auto-timeline .timeline-group.is-live>.timeline-summary .timeline-tool-detail.is-text::before{content:'·';margin-right:8px;color:#75736d}
.auto-timeline .timeline-group.is-live>.timeline-summary::after{transform:none}
.auto-timeline .timeline-group.is-live[open]>.timeline-summary::after{transform:rotate(180deg)}
/* Stopping: the same row, red, with a ring. */
.auto-timeline .timeline-group.is-live.is-stopping>.timeline-summary{background:#2a1d1b;border-color:#4a2a26}
.auto-timeline .timeline-group.is-live.is-stopping .timeline-group-label{color:#f2b8ae}
/* The stopped mark: a red stop square, then the label. */
.auto-timeline .timeline-group.is-stopped>.timeline-summary{color:#f2b8ae}
.auto-timeline .timeline-group.is-stopped>.timeline-summary::before{content:"";width:16px;height:16px;margin:0;border-radius:4px;background:#3a1e1b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5h7v7h-7z' fill='none' stroke='%23FF8F80' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.auto-timeline .timeline-group.is-stopped>.timeline-group-body{border-left-color:#3a2422}
/* Steps: only their text, with the blue dot on the running one. A step that failed or was cut says so in its words. */
.auto-timeline .timeline-group-body .timeline-status[data-state=done],.auto-timeline .timeline-group-body .timeline-status[data-state=stopped]{display:inline-grid}
.auto-timeline .timeline-group-body .timeline-status[data-state=running]{background:#8dbbff}
.auto-timeline .timeline-work[data-state=cut]>.timeline-summary .timeline-tool-name,.auto-timeline .timeline-work[data-state=error]>.timeline-summary .timeline-tool-name{color:#f2b8ae}
/* Go on, or run the turn again. */
.auto-timeline .timeline-resume{display:flex;gap:8px}
.auto-timeline .timeline-resume-button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:10px;border:1px solid #2f3a4c;background:#1b2a44;color:#cfe1ff;font:500 13.5px/18px var(--font-sans)}
.auto-timeline .timeline-resume-button.is-plain{border-color:var(--border-300,#343432);background:none;color:var(--text-200,#d9d7d2)}
.auto-timeline .timeline-resume-button[hidden]{display:none}
/* The header's «…»: rare chat actions in a small menu. */
.header-actions{position:relative}
#chat-more{width:32px;height:32px;padding:0;display:inline-grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--text-300,#b6b4ae);cursor:pointer}
#chat-more:hover,#chat-more[aria-expanded=true]{background:var(--bg-200,#2b2b29);color:var(--text-000,#f2f1ee)}
#chat-more[hidden]{display:none}
.chat-more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:200px;display:flex;flex-direction:column;padding:6px;border-radius:12px;border:1px solid var(--border-300,#3a3a38);background:var(--bg-100,#232322);box-shadow:0 12px 32px rgba(0,0,0,.45)}
.chat-more-menu[hidden]{display:none}
.chat-more-menu>button{display:flex;align-items:center;height:34px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--text-100,#e6e4df);font:500 13.5px/18px var(--font-sans);text-align:left;cursor:pointer;width:100%}
.chat-more-menu>button:hover:enabled{background:var(--bg-200,#2b2b29)}
.chat-more-menu>button:disabled{opacity:.45;cursor:default}
.chat-more-menu>button[hidden]{display:none}
/* Top of a chat; news since the last visit. */
.history-top{display:flex;justify-content:center;align-items:center;gap:8px;margin:14px 0 4px;font:500 12.5px/16px var(--font-sans);color:#8f8d87}
.history-top[hidden]{display:none}
.history-top.is-loading::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid #4a4946;border-top-color:#8dbbff;animation:timeline-spin .9s linear infinite}
.auto-timeline .timeline-new{display:flex;align-items:center;gap:10px;margin:14px 0;font:600 11.5px/16px var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:#8dbbff}
.auto-timeline .timeline-new::before,.auto-timeline .timeline-new::after{content:"";flex:1;height:1px;background:#2f3a4c}

/* A picture still uploading inside its bubble: a ring over it, nothing else. */
.auto-timeline .timeline-attachment.is-uploading{position:relative}
.auto-timeline .timeline-attachment.is-uploading::after{content:"";position:absolute;inset:0;border-radius:12px;background:rgba(10,12,16,.38) no-repeat center/36px;}
.auto-timeline .timeline-attachment.is-uploading::before{content:"";position:absolute;z-index:1;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;border:3px solid #ffffff33;border-top-color:#fff;animation:timeline-spin .9s linear infinite}

/* A message Auto refused stays in the thread and says so. */
.auto-timeline .timeline-refused{margin-top:6px;text-align:right;font:500 12px/16px var(--font-sans);color:#f2b8ae}
.auto-timeline .timeline-refused button{padding:0;border:0;background:none;color:#8dbbff;font:600 12px/16px var(--font-sans);cursor:pointer}
.auto-timeline .timeline-unread{margin-top:6px;text-align:right;font:500 12px/16px var(--font-sans);color:var(--text-warning,#e8c27a)}
/* The account changed at its limit mid-turn: one discreet line between the steps («Siguió con…»). */
.auto-timeline .timeline-note{display:flex;align-items:center;gap:6px;margin:6px 0 10px;max-width:var(--chat-column,740px);font:400 13px/18px var(--font-sans);color:var(--text-200,#a3a3a0)}
.auto-timeline .timeline-note .timeline-icon{flex:none}
.auto-timeline .timeline-note-text{min-width:0;overflow-wrap:anywhere}
.auto-timeline .timeline-note.is-wait{color:var(--text-000)}
/* Messages with other chats are steps of the work: an arrow, «Mensaje a» / «Respuesta de», the chat, and the text when it unfolds. */
.auto-timeline .timeline-relay.is-step{margin:0;max-width:100%}
.auto-timeline .timeline-relay.is-step>.timeline-relay-summary{gap:8px;min-height:30px;font:400 13px/18px var(--font-sans);color:var(--text-200)}
.auto-timeline .timeline-relay.is-step .timeline-relay-icon{flex:none;color:var(--text-400,#a3a19b)}
.auto-timeline .timeline-relay.is-step .timeline-relay-name{color:var(--text-000);font-weight:500}
.auto-timeline .timeline-relay.is-step>.timeline-relay-body{margin:0 0 6px 24px;padding:8px 12px;font:400 14px/22px var(--font-sans);color:var(--text-200)}
/* The message from another chat that opened the turn: its cause, on top, as a short quote (four lines; a click shows it all). */
.auto-timeline .timeline-opener{display:flex;flex-direction:column;gap:4px;max-width:var(--chat-column,740px);margin:18px 0 10px;padding:0 0 0 12px;border-left:2px solid var(--border-300,#75736d);cursor:pointer}
.auto-timeline .timeline-opener-from{font:500 12px/16px var(--font-sans);color:var(--text-400,#a3a19b)}
.auto-timeline .timeline-opener-from b{font-weight:600;color:var(--text-200)}
.auto-timeline .timeline-opener-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;font:400 14px/22px var(--font-sans);color:var(--text-200)}
.auto-timeline .timeline-opener.is-open .timeline-opener-text{display:block;-webkit-line-clamp:unset}
.auto-timeline .timeline-opener:first-child{margin-top:0}
/* A folded work is one line: a long chat name ends in an ellipsis; the whole summary is its tooltip. */
.auto-timeline .timeline-group:not(.is-live)>.timeline-summary .timeline-group-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The working row carries the person's own orb (18 px): it breathes, and a 1 px halo in its color comes and goes with each breath. Nothing spins. */
.auto-timeline .timeline-group.is-live .timeline-live-orb{display:inline-block;position:relative;flex:none;width:18px;height:18px}
.auto-timeline .timeline-group.is-live .timeline-live-orb auto-orb{--orb-size:18px;width:18px;height:18px;animation:timeline-breathe 3.2s ease-in-out infinite}
.auto-timeline .timeline-group.is-live .timeline-live-orb::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 1px var(--orb-line,rgba(139,189,255,.4));opacity:0;animation:timeline-halo 3.2s ease-in-out infinite;pointer-events:none}
.auto-timeline .timeline-group.is-live.is-stopping .timeline-live-orb auto-orb{animation:none;filter:saturate(.3) brightness(.6)}
.auto-timeline .timeline-group.is-live.is-stopping .timeline-live-orb::after{content:none}
@keyframes timeline-breathe{0%,100%{transform:scale(.97);filter:brightness(1)}50%{transform:scale(1.03);filter:brightness(1.1)}}
@keyframes timeline-halo{0%,100%{opacity:0;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.auto-timeline .timeline-group.is-live .timeline-live-orb auto-orb,.auto-timeline .timeline-group.is-live .timeline-live-orb::after{animation:none}}
/* The orb's states (shared by the PC and the Remoto): breathing while it thinks or works; still and dimmed, with a badge, while it waits, after a failure or when stopped. */
.orb-state{position:relative;display:inline-block;flex:none;vertical-align:middle}
.orb-state[data-state=think] auto-orb,.orb-state[data-state=work] auto-orb{animation:timeline-breathe 3.2s ease-in-out infinite}
.orb-state[data-state=wait] auto-orb{filter:saturate(.45) brightness(.7)}
.orb-state[data-state=fail] auto-orb,.orb-state[data-state=stop] auto-orb{filter:saturate(.3) brightness(.6)}
.orb-state[data-state=wait]::after,.orb-state[data-state=fail]::after,.orb-state[data-state=stop]::after{content:"";position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;border-radius:50%;background:var(--bg-100,#222221) center/10px no-repeat;box-shadow:0 0 0 2px var(--bg-100,#222221);opacity:1;animation:none}
.orb-state[data-state=wait]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 6.5V10l2.5 1.5' fill='none' stroke='%23E9B862' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.orb-state[data-state=fail]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.5l7 12.5H3zM10 8.5v3' fill='none' stroke='%23FF8F80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='14' r='1.3' fill='%23FF8F80'/%3E%3C/svg%3E")}
.orb-state[data-state=stop]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='6' y='6' width='8' height='8' rx='1.5' fill='%23B8B6B0'/%3E%3C/svg%3E")}
.auto-timeline .timeline-group.is-stopped .timeline-live-orb{display:inline-block;position:relative;flex:none;width:18px;height:18px}
.auto-timeline .timeline-group.is-stopped .timeline-live-orb auto-orb{--orb-size:18px}
.auto-timeline .timeline-group.is-stopped>.timeline-summary::before{content:none}
.auto-timeline .timeline-note .timeline-wait-orb{display:none}
.auto-timeline .timeline-note.is-wait .timeline-wait-orb{display:inline-block;margin-right:4px}
.auto-timeline .timeline-note.is-wait .timeline-wait-orb auto-orb{--orb-size:18px}
.auto-timeline .timeline-note.is-wait>svg,.auto-timeline .timeline-note.is-wait>.timeline-icon{display:none}
.auto-timeline .timeline-status>.orb-state{margin-right:8px}
.auto-timeline .timeline-status>.orb-state auto-orb{--orb-size:16px}
@media(prefers-reduced-motion:reduce){.orb-state auto-orb{animation:none!important}}

/* Proposal fidelity (experiencia visual, B2/B3). The work is one block: while it runs, a box in the
   person's orb color with the steps inside; each step its icon, its verb and its object; stopped and
   failed are boxes too. Done, it folds to one quiet line. Shared by the PC and the Remoto. */
.auto-timeline .timeline-group.is-live,.auto-timeline .timeline-group.is-stopped,.auto-timeline .timeline-group.is-failed{border:1px solid var(--border-100,#343432);border-radius:12px;background:var(--bg-100,#222221);overflow:hidden;max-width:100%}
.auto-timeline .timeline-group.is-live{border-color:var(--orb-line,rgba(139,189,255,.4));background:linear-gradient(180deg,color-mix(in srgb,var(--orb,#8BBDFF) 6%,var(--bg-100,#222221)),var(--bg-100,#222221) 72px)}
.auto-timeline .timeline-group.is-stopped{border-color:color-mix(in srgb,var(--danger,#FF8F80) 30%,transparent)}
.auto-timeline .timeline-group.is-live>.timeline-summary{width:auto;max-width:none;border:0;border-radius:0;background:none;padding:0 10px;gap:10px}
.auto-timeline .timeline-group.is-live>.timeline-summary>.timeline-tool-detail{order:3;flex:1 1 auto;min-width:0}
.auto-timeline .timeline-group.is-live>.timeline-summary>.timeline-elapsed{order:4;margin-left:auto;font:500 12px/16px var(--font-sans);color:var(--text-400,#8C8A84)}
.auto-timeline .timeline-group.is-live>.timeline-summary>.timeline-thumbs{order:5}
.auto-timeline .timeline-group.is-live>.timeline-summary::after{order:6}
.auto-timeline .timeline-group.is-stopped>.timeline-summary,.auto-timeline .timeline-group.is-failed>.timeline-summary{width:auto;max-width:none;min-height:36px;padding:0 10px;gap:10px;color:var(--text-200,#B8B6B0)}
/* Folded, the box is as wide as what it says (orb, label, activity, clock): it takes the column only when it opens to show its steps. */
.auto-timeline .timeline-group.is-live:not([open]),.auto-timeline .timeline-group.is-stopped:not([open]),.auto-timeline .timeline-group.is-failed:not([open]){width:fit-content}
.auto-timeline .timeline-group.is-stopped .timeline-group-label{color:var(--text-200,#B8B6B0)}
.auto-timeline .timeline-group.is-failed .timeline-live-orb{display:inline-block;position:relative;flex:none;width:18px;height:18px}
.auto-timeline .timeline-group.is-failed .timeline-live-orb auto-orb{--orb-size:18px}
.auto-timeline .timeline-fail-mark{flex:none;font-weight:600;color:var(--danger,#FF8F80)}
.auto-timeline .timeline-group.is-live>.timeline-group-body,.auto-timeline .timeline-group.is-stopped>.timeline-group-body,.auto-timeline .timeline-group.is-failed>.timeline-group-body{margin:0;padding:2px 8px 8px;border-left:0;border-top:1px solid var(--border-100,#343432)}
/* Done: the steps under the line, no rail. */
.auto-timeline .timeline-group>.timeline-group-body{margin-left:0;padding:0 0 4px;border-left:0}
/* A step: a 16 px column for the running dot, its icon, the verb and, in mono, what it acted on. */
.auto-timeline .timeline-group-body .timeline-work>.timeline-summary{min-height:28px;gap:10px;padding:0 6px;border-radius:6px;font:400 13px/18px var(--font-sans);color:var(--text-200,#B8B6B0)}
.auto-timeline .timeline-group-body .timeline-summary>.timeline-status{width:16px;height:16px;margin:0;background:none;animation:none;display:inline-grid}
.auto-timeline .timeline-group-body .timeline-summary>.timeline-status[data-state=running]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent,#8DBBFF);animation:timeline-pulse 1.2s ease-in-out infinite}
.auto-timeline .timeline-step-icon{flex:none;display:inline-grid;place-items:center;width:16px;height:16px;color:var(--text-400,#8C8A84)}
.auto-timeline .timeline-step-icon:empty{display:none}
.auto-timeline .timeline-group-body .timeline-tool-name{flex:none;font-weight:400;color:var(--text-200,#B8B6B0)}
.auto-timeline .timeline-group-body .timeline-work[data-state=running] .timeline-tool-name{color:var(--text-000,#F2F1EE)}
.auto-timeline .timeline-group-body .timeline-tool-detail{font:400 12.5px/18px var(--font-mono);color:var(--text-400,#8C8A84);opacity:1}
.auto-timeline .timeline-group-body .timeline-tool-detail.is-text{font:400 13px/18px var(--font-sans)}
/* A message to or from another chat: the same column, its arrow, and a chevron that opens the text. */
.auto-timeline .timeline-relay.is-step>.timeline-relay-summary{min-height:30px;gap:10px;padding:0 6px}
.auto-timeline .timeline-relay.is-step>.timeline-relay-summary::before{content:"";flex:none;width:16px;height:16px;order:-1}
.auto-timeline .timeline-relay.is-step>.timeline-relay-summary::after{width:12px;height:12px;border:0;background:currentColor;opacity:.8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:none}
.auto-timeline .timeline-relay.is-step[open]>.timeline-relay-summary::after{transform:rotate(180deg)}
.auto-timeline .timeline-relay.is-step .timeline-relay-icon{color:var(--text-400,#8C8A84)}
.auto-timeline .timeline-relay.is-step>.timeline-relay-body{margin:0 0 6px 58px;padding:8px 12px;border-left:2px solid var(--border-100,#343432)}
/* After the person's Stop: neutral buttons, as in B3 («Seguir donde quedó»). */
.auto-timeline .timeline-resume-button{border-color:var(--border-100,#343432);background:var(--surface-raised,#2B2B29);color:var(--text-000,#F2F1EE)}
/* The message from another chat that opened the turn: its arrow, «Mensaje de <chat>», two lines of what it
   said; a click on it shows it all. */
.auto-timeline .timeline-opener{flex-direction:row;align-items:flex-start;gap:10px;padding:0;border-left:0}
.auto-timeline .timeline-opener-icon{flex:none;margin-top:1px;color:var(--text-400,#8C8A84)}
.auto-timeline .timeline-opener-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.auto-timeline .timeline-opener-name{font-weight:600;color:var(--text-200,#B8B6B0);text-decoration:none}
.auto-timeline a.timeline-opener-name{text-decoration:underline;text-decoration-color:var(--border-300,#75736D);text-underline-offset:3px;cursor:pointer}
.auto-timeline a.timeline-opener-name:hover{color:var(--text-000,#F2F1EE)}
.auto-timeline .timeline-opener-text{-webkit-line-clamp:2}

/* A message to another chat that did not arrive: «No llegó a <chat>» in red, and why after a dot. */
.auto-timeline .timeline-relay.is-failed .timeline-relay-label{color:var(--danger,#FF8F80)}
.auto-timeline .timeline-relay.is-failed .timeline-relay-icon{color:var(--danger,#FF8F80)}
.auto-timeline .timeline-relay-reason{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-400,#8C8A84)}
.auto-timeline .timeline-relay-reason::before{content:'·';margin-right:8px;opacity:.6}
.auto-timeline .timeline-relay-reason[hidden]{display:none}
/* A line of intent between tools: a quiet step, never an answer. */
.auto-timeline .timeline-work[data-kind=narration] .timeline-tool-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* «Auto es la única app que necesitas»: a file a message names is a card with its viewer (FileTile of
   the design system auto-3), right where it is cited. The path never shows; the card names the file. */
.auto-timeline .timeline-file{display:flex;flex-direction:column;width:min(100%,560px);margin:8px 0;border:1px solid var(--border-subtle,rgba(255,255,255,.09));border-radius:12px;background:var(--surface-2,#222221);overflow:hidden;color:var(--text-primary,#F2F1EE)}
.auto-timeline .timeline-file-head{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 8px 8px 12px}
.auto-timeline .timeline-file-kind{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface-popover,#2B2B29);color:var(--text-secondary,#B8B6B0)}
.auto-timeline .timeline-file-name{flex:1;min-width:0;display:flex;flex-direction:column}
.auto-timeline .timeline-file-name b{font:500 14px/20px var(--font-sans,Manrope,system-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auto-timeline .timeline-file-name small{font:400 12px/16px var(--font-sans,Manrope,system-ui);color:var(--text-muted,#8C8A84)}
.auto-timeline .timeline-file-open{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--border-line,rgba(255,255,255,.14));background:var(--surface-1,#1B1B1A);color:var(--text-primary,#F2F1EE);font:500 13px/18px var(--font-sans,Manrope,system-ui);cursor:pointer}
.auto-timeline .timeline-file-action{flex:none;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary,#B8B6B0);cursor:pointer}
.auto-timeline .timeline-file-action:hover,.auto-timeline .timeline-file-open:hover{background:var(--fill-ghost-hover,rgba(255,255,255,.07));color:var(--text-primary,#F2F1EE)}
.auto-timeline .timeline-file-body{position:relative;border-top:1px solid var(--border-subtle,rgba(255,255,255,.09));background:var(--surface-0,#141413);max-height:300px;overflow:hidden}
.auto-timeline .timeline-file-frame{display:block;width:100%;height:300px;border:0;background:#525659}
.auto-timeline .timeline-file.is-page .timeline-file-frame{background:#fff}
.auto-timeline .timeline-file-text{padding:12px 16px 16px;max-height:220px;overflow:hidden;font:400 14px/22px var(--font-sans,Manrope,system-ui);color:var(--text-secondary,#B8B6B0)}
.auto-timeline .timeline-file-text pre{margin:0;white-space:pre-wrap;font:12.5px/19px var(--font-mono,'JetBrains Mono',monospace)}
.auto-timeline .timeline-file-fade{position:absolute;left:0;right:0;bottom:0;height:28px;background:linear-gradient(transparent,var(--surface-0,#141413))}
.auto-timeline .timeline-file-list{padding:4px 0;background:var(--surface-2,#222221)}
.auto-timeline .timeline-file-row{display:flex;align-items:center;gap:10px;height:32px;padding:0 12px;font:400 13px/18px var(--font-sans,Manrope,system-ui);color:var(--text-secondary,#B8B6B0)}
.auto-timeline .timeline-file-row span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auto-timeline .timeline-file-row span:last-child{color:var(--text-muted,#8C8A84);font-size:12px}
.auto-timeline .timeline-file-row.is-more{color:var(--text-muted,#8C8A84)}
.auto-timeline .timeline-file-table{border-collapse:collapse;width:100%;font:400 12.5px/18px var(--font-sans,Manrope,system-ui)}
.auto-timeline .timeline-file-table th,.auto-timeline .timeline-file-table td{padding:6px 10px;border-bottom:1px solid var(--border-subtle,rgba(255,255,255,.09));text-align:left;color:var(--text-secondary,#B8B6B0);white-space:nowrap}
.auto-timeline .timeline-file-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0 12px 12px 50px;font:400 13px/18px var(--font-sans,Manrope,system-ui);color:var(--text-secondary,#B8B6B0)}
.auto-timeline .timeline-file.is-outside .timeline-file-kind{color:var(--text-warning,#E6B450)}
.auto-timeline .timeline-file.is-gone,.auto-timeline .timeline-file.is-changed{opacity:.8}
.auto-timeline .timeline-picture-wrap{position:relative;display:inline-block;max-width:100%}
.auto-timeline .timeline-file-hover{position:absolute;top:8px;right:8px;display:flex;gap:2px;padding:2px;border-radius:8px;background:rgba(20,20,19,.82);opacity:0;transition:opacity 80ms}
.auto-timeline .timeline-picture-wrap:hover .timeline-file-hover,.auto-timeline .timeline-picture-wrap:focus-within .timeline-file-hover{opacity:1}
.auto-timeline .timeline-file-hover .timeline-file-action{color:#F2F1EE}
.auto-timeline .timeline-files-more{display:inline-flex;align-items:center;height:32px;margin:6px 0;padding:0 12px;border-radius:8px;border:1px dashed var(--border-line,rgba(255,255,255,.14));background:transparent;color:var(--text-secondary,#B8B6B0);font:500 13px/18px var(--font-sans,Manrope,system-ui);cursor:pointer}
.auto-md-file{display:inline;padding:0 6px;border:0;border-radius:6px;background:var(--fill-field,rgba(255,255,255,.06));color:var(--accent,#8DBBFF);font:inherit;font-weight:500;cursor:pointer}
.auto-md-file:hover{text-decoration:underline}
.auto-timeline .timeline-relay-files .timeline-file{width:100%;max-width:520px}.auto-timeline .timeline-relay-files{padding:0 0 4px}
/* «Anotar»: la anotación enviada, con su captura y sus marcas (PC y Remoto) */
.timeline-attachment.is-annotation{display:flex;flex-direction:column;gap:8px;width:420px;max-width:100%;padding:8px;border-radius:12px;background:#222221;border:1px solid #343432}
.timeline-attachment.is-annotation img{display:block;width:100%;max-height:260px;object-fit:cover;object-position:top left;border-radius:6px;background:#08090b}
.timeline-attachment.is-annotation figcaption{display:flex;flex-direction:column;gap:6px;font:400 13px/19px var(--font-sans,system-ui,sans-serif);color:#b8b6b0}
.timeline-attachment.is-annotation figcaption>b{color:#f2f1ee;font-weight:600}
.annotation-marks{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.annotation-marks li{display:flex;gap:8px;align-items:flex-start}
.annotation-marks b{color:#f2f1ee;font-weight:500}
.annotation-pin{flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:#8dbbff;color:#0e1a2e;font:700 10.5px/1 var(--font-sans,system-ui,sans-serif)}
.annotation-pin[data-color=red]{background:#ff8f80}.annotation-pin[data-color=yellow]{background:#e9b862}.annotation-pin[data-color=green]{background:#6fcf9b}

/* Avisos en el chat del coordinador. El turno que abre otro chat o una rutina es una línea:
   marca, quién y la hora; la de una rutina, también lo que dijo. Abierta enseña el mensaje completo
   y los pasos de su turno. Mide lo que su contenido, no la columna. */
.auto-timeline>.timeline-notice,.auto-timeline>.timeline-notices{content-visibility:auto;contain-intrinsic-block-size:auto 32px}
.timeline-notice{max-width:var(--chat-column,740px);margin:12px 0}
.timeline-notice+.timeline-notice{margin-top:-10px}
.timeline-notice-summary{display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;min-width:0;min-height:30px;list-style:none;cursor:pointer;color:var(--text-200,#B8B6B0);font:400 14px/20px var(--font-sans)}
.timeline-notice-summary::-webkit-details-marker{display:none}
.timeline-notice-summary::after{content:"";flex:none;width:12px;height:12px;background:var(--text-400,#8C8A84);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 6l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 6l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .14s ease-out}
.timeline-notice[open]>.timeline-notice-summary::after{transform:rotate(90deg)}
.timeline-notice-summary:focus-visible{outline:2px solid var(--focus-ring,#8DBBFF);outline-offset:3px;border-radius:3px}
.timeline-notice-mark{flex:none;display:inline-grid;place-items:center;width:16px;height:16px;color:var(--text-400,#8C8A84)}
.timeline-notice-mark svg{display:block;width:16px;height:16px}
/* Lo que pide algo de la persona lleva su marca: rombo si hay una pregunta, archivo si hay algo que ver, alerta si falló. */
.timeline-notice[data-mark=decision]>.timeline-notice-summary>.timeline-notice-mark::before{content:"";width:8px;height:8px;border-radius:1.5px;background:var(--warning,#E9B862);transform:rotate(45deg)}
.timeline-notice[data-mark=file]>.timeline-notice-summary>.timeline-notice-mark{color:var(--text-000,#F2F1EE)}
.timeline-notice[data-mark=fail]>.timeline-notice-summary>.timeline-notice-mark{color:var(--danger,#FF8F80)}
.timeline-notice[data-mark=live]>.timeline-notice-summary>.timeline-notice-mark::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orb,var(--accent,#8DBBFF));box-shadow:0 0 0 4px var(--orb-soft,rgba(139,189,255,.16))}
.timeline-notice-name{flex:none;max-width:min(26em,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--text-000,#F2F1EE);text-decoration:none}
/* Turno sin publicación: who gave the notice for seen and why, what was written and not published, and the person's correction. */
.timeline-notice-seen{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;color:var(--text-200,#B8B6B0);font:400 13px/19px var(--font-sans)}
.timeline-notice-seen>svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--text-400,#8C8A84)}
.timeline-notice-unpublished{margin-top:10px;font:400 13px/19px var(--font-sans);color:var(--text-300,#A3A19B)}
.timeline-notice-unpublished>b{display:block;margin-bottom:2px;font:500 12px/16px var(--font-sans);color:var(--text-400,#8C8A84)}
.timeline-notice-unpublished>div{white-space:pre-wrap;overflow-wrap:anywhere}
.timeline-notice-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.timeline-notice-actions:empty{display:none}
.timeline-notice-interest{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.timeline-notice-interest-btn{padding:0;border:0;background:none;cursor:pointer;color:var(--text-000,#F2F1EE);font:500 12px/16px var(--font-sans)}
.timeline-notice-interest-btn:hover{text-decoration:underline;text-decoration-color:var(--border-300,#75736D);text-underline-offset:3px}
.timeline-notice-interest-btn:focus-visible{outline:2px solid var(--focus-ring,#8DBBFF);outline-offset:3px;border-radius:3px}
.timeline-notice-interest-done{display:inline-flex;align-items:center;gap:6px;color:var(--text-200,#B8B6B0);font:400 12px/16px var(--font-sans)}
.timeline-notice-interest-done>svg{color:var(--success,#86DFC5)}
.timeline-notice-open{display:inline-block;margin-top:10px;color:var(--text-200,#B8B6B0);font:500 12px/16px var(--font-sans);text-decoration:none}
.timeline-notice-open:hover{color:var(--text-000,#F2F1EE);text-decoration:underline;text-decoration-color:var(--border-300,#75736D);text-underline-offset:3px}
.timeline-notice-open:focus-visible{outline:2px solid var(--focus-ring,#8DBBFF);outline-offset:3px;border-radius:3px}
.timeline-notice-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timeline-notice[data-mark=decision]>.timeline-notice-summary>.timeline-notice-text,.timeline-notice[data-mark=file]>.timeline-notice-summary>.timeline-notice-text,.timeline-notice[data-mark=fail]>.timeline-notice-summary>.timeline-notice-text,.timeline-notice[open]>.timeline-notice-summary>.timeline-notice-text{color:var(--text-000,#F2F1EE)}
.timeline-notice-time,.timeline-notice-summary>.timeline-elapsed{flex:none;font:400 12px/16px var(--font-sans);color:var(--text-400,#8C8A84);font-variant-numeric:tabular-nums}
.timeline-notice-working{flex:none;font-weight:500;color:var(--orb,var(--accent,#8DBBFF))}
.timeline-notice.is-live>.timeline-notice-summary>.timeline-notice-time{display:none}
.timeline-notice-body{margin:6px 0 10px 24px;padding:12px 14px;border-radius:12px;background:var(--bg-100,#222221)}
.timeline-notice-message{padding-left:12px;border-left:2px solid var(--border-300,#75736D);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-200,#B8B6B0);font:400 14px/22px var(--font-sans)}
.timeline-notice-steps:not(:empty){margin-top:10px}
.timeline-notice-body>.timeline-relay-files:not([hidden]){margin-top:10px}
/* Dos o más avisos de encargos seguidos: un bloque. Plegado deja ver su cabecera y la línea que pide algo. */
.timeline-notices{max-width:var(--chat-column,740px);margin:12px 0}
.timeline-notices-summary{display:flex;align-items:center;gap:8px;min-height:30px;padding:0;border:0;background:none;cursor:pointer;color:var(--text-200,#B8B6B0);font:500 14px/20px var(--font-sans)}
.timeline-notices-summary::before{content:"";flex:none;width:16px;height:12px;background:var(--text-400,#8C8A84);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .14s ease-out}
.timeline-notices.is-folded>.timeline-notices-summary::before{transform:rotate(-90deg)}
.timeline-notices-summary:focus-visible{outline:2px solid var(--focus-ring,#8DBBFF);outline-offset:3px;border-radius:3px}
.timeline-notices-body>.timeline-notice{margin:0 0 0 24px}
.timeline-notices.is-folded>.timeline-notices-body>.timeline-notice:not([data-mark=decision]):not([data-mark=file]):not([data-mark=fail]):not([data-mark=live]){display:none}
@media(prefers-reduced-motion:reduce){.timeline-notice-summary::after,.timeline-notices-summary::before{transition:none}}
/* En el teléfono, dos renglones: quién y la hora arriba, lo que dijo abajo. */
@media(max-width:520px){
.timeline-notice-summary{display:grid;grid-template-columns:16px minmax(0,1fr) auto 12px;column-gap:8px;row-gap:0;align-content:center;width:auto;min-height:46px}
.timeline-notice-name{grid-column:2;grid-row:1;max-width:none}
.timeline-notice-time,.timeline-notice-summary>.timeline-elapsed{grid-column:3;grid-row:1}
.timeline-notice-summary::after{grid-column:4;grid-row:1}
.timeline-notice-text{grid-column:2/5;grid-row:2;font-size:13px;line-height:18px}
.timeline-notice-working{display:none}
.timeline-notice+.timeline-notice{margin-top:-6px}
.timeline-notices-body>.timeline-notice+.timeline-notice{margin-top:0}
.timeline-notice-body,.timeline-notices-body>.timeline-notice{margin-left:0}
}
/* A guion's step, open: one line per call it made (same words as a direct call) and its code, folded. */
.auto-timeline .timeline-guion{margin:2px 0 8px 26px;padding:2px 0 2px 12px;border-left:1px solid var(--border-100,rgba(255,255,255,.12))}
.auto-timeline .timeline-guion-calls{list-style:none;margin:0;padding:0}
.auto-timeline .timeline-guion-call{display:flex;align-items:center;gap:6px;min-height:28px;font:400 13px/18px var(--font-sans);color:var(--text-200,#b8b6b0);min-width:0}
.auto-timeline .timeline-guion-icon{flex:none;display:inline-grid;place-items:center;width:16px;height:16px;color:var(--text-400,#8C8A84)}
.auto-timeline .timeline-guion-verb{flex:none}
.auto-timeline .timeline-guion-object{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-100,#f2f1ee)}
.auto-timeline .timeline-guion-time{flex:none;font:400 12px/16px var(--font-mono);color:var(--text-400,#8C8A84)}
.auto-timeline .timeline-guion-call[data-state=error] .timeline-guion-verb{color:var(--text-danger,#ff8f80)}
.auto-timeline .timeline-guion-call[data-state=error] .timeline-guion-object{font-family:var(--font-mono);font-size:12px;color:var(--text-400,#8C8A84)}
.auto-timeline .timeline-guion-note{margin:4px 0 0;font:400 13px/18px var(--font-sans);color:var(--text-400,#8C8A84)}
.auto-timeline .timeline-guion-code{margin:4px 0 0}
.auto-timeline .timeline-guion-code>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;min-height:28px;font:500 13px/18px var(--font-sans);color:var(--text-200,#b8b6b0)}
.auto-timeline .timeline-guion-code>summary::-webkit-details-marker{display:none}
.auto-timeline .timeline-guion-code>summary::before{content:'›';display:inline-block;width:14px;transition:transform .14s}
.auto-timeline .timeline-guion-code[open]>summary::before{transform:rotate(90deg)}
.auto-timeline .timeline-guion-code>pre{margin:4px 0 0;padding:10px 12px;max-height:320px;overflow:auto;border-radius:8px;background:var(--code-bg,rgba(255,255,255,.04));font:400 12px/18px var(--font-mono);white-space:pre}
@media(max-width:560px){.auto-timeline .timeline-guion{margin-left:8px;padding-left:8px}.auto-timeline .timeline-guion-call{min-height:32px}}
.auto-timeline .timeline-guion-call[data-kind=write] .timeline-guion-verb{color:var(--text-100,#f2f1ee);font-weight:500}
.auto-timeline .timeline-guion-call[data-kind=write] .timeline-guion-icon{color:var(--text-200,#b8b6b0)}
.auto-timeline .timeline-guion-said{margin:-2px 0 4px 22px;padding-left:8px;border-left:2px solid var(--border-100,rgba(255,255,255,.12));font:400 13px/18px var(--font-sans);color:var(--text-200,#b8b6b0);white-space:pre-wrap;overflow-wrap:anywhere}