/* Interfaz de agente al estilo Claude Code / Codex: conversaciones, chat y panel del proyecto. Mismo grafito y el violeta
   de siempre; el color de cada agente solo marca su avatar y su punto. */

.agent { --side-width: 268px; --panel-width: 460px; }
body.is-resizing { cursor: col-resize; user-select: none; }
body.is-resizing iframe { pointer-events: none; }

/* Botones de icono */
.icon-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover:not(:disabled) { background: rgba(var(--fg-rgb), .07); color: var(--ink); }
.icon-btn:focus-visible { outline: 3px solid rgba(122, 90, 248, .55); outline-offset: 1px; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.is-small { width: 28px; height: 28px; border-radius: 8px; }
.icon-btn.is-small svg { width: 15px; height: 15px; }
.icon-btn.is-on { background: rgba(122, 90, 248, .16); color: var(--violet-soft); }
.icon-btn.is-armed { background: var(--danger-bg); color: var(--danger-ink); }
.icon-btn.is-play { color: var(--ok-ink); }
.icon-btn.is-play svg { fill: currentColor; stroke-width: 1; }
.icon-btn.is-stop { color: var(--danger-soft); }
.icon-btn.is-stop svg { fill: currentColor; }

/* Estructura: barra superior + tres columnas */
.agent .work-top { height: 52px; gap: 10px; padding: 0 10px; }
.agent .work-side-toggle { display: none; }
.agent .work-body { grid-template-columns: var(--side-width) minmax(0, 1fr); }
.agent.has-panel .work-body { grid-template-columns: var(--side-width) minmax(0, 1fr) 6px var(--panel-width); }
.agent.side-collapsed .work-body { grid-template-columns: 0 minmax(0, 1fr); }
.agent.side-collapsed.has-panel .work-body { grid-template-columns: 0 minmax(0, 1fr) 6px var(--panel-width); }
.agent.side-collapsed .work-side { visibility: hidden; padding: 0; border: 0; }
.agent .work-side { display: flex; flex-direction: column; gap: 10px; padding: 12px 10px; background: var(--raised); border-right: 1px solid var(--line); overflow: hidden; }
.panel-resizer { display: none; cursor: col-resize; background: transparent; position: relative; }
.panel-resizer::after { content: ''; position: absolute; inset: 0 2px; border-radius: 3px; transition: background-color .15s ease; }
.panel-resizer:hover::after, body.is-resizing .panel-resizer::after { background: rgba(122, 90, 248, .45); }
.agent.has-panel .panel-resizer { display: block; }

/* Conversaciones */
.side-new { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 11px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.side-new:hover { border-color: rgba(var(--fg-rgb), .3); background: var(--panel-hover); }
.side-new svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.side-new kbd { margin-left: auto; color: var(--placeholder); font: 500 11px var(--mono); }
.side-search { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.side-search:focus { border-color: var(--violet); }
.chat-groups { flex: 1 1 auto; min-height: 120px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: rgba(var(--fg-rgb), .14) transparent; }
.chat-group h3 { margin: 12px 8px 4px; color: var(--placeholder); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.chat-item { position: relative; display: flex; align-items: center; border-radius: 9px; }
.chat-item:hover, .chat-item.is-active { background: rgba(var(--fg-rgb), .06); }
.chat-item.is-active { background: rgba(122, 90, 248, .14); }
.chat-item-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 9px; }
.chat-item-open:focus-visible { outline: 2px solid rgba(122, 90, 248, .6); }
.chat-item-main { min-width: 0; display: grid; }
.chat-item-title { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.chat-item.is-unread .chat-item-title { font-weight: 600; }
.chat-item.is-unread .chat-item-title::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--violet-soft); vertical-align: middle; }
.chat-item-sub { overflow: hidden; color: var(--placeholder); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-actions { display: none; padding-right: 4px; }
.chat-item:hover .chat-item-actions, .chat-item:focus-within .chat-item-actions { display: inline-flex; }
.chat-item-edit { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--violet); border-radius: 8px; background: var(--sunken); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.agent-dot { flex: none; display: inline-grid; place-items: center; width: 10px; height: 10px; border-radius: 50%; background: var(--agent, var(--violet)); color: #fff; font-size: 11px; font-weight: 700; }
.agent-dot.is-busy { animation: dot-pulse 1.2s ease-in-out infinite; }
.agent-dot.is-big { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
.agent-dot.is-huge { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }
.side-tickets { flex: none; max-height: 42%; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 8px; scrollbar-width: thin; }
.side-tickets summary { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; list-style: none; }
.side-tickets summary::-webkit-details-marker { display: none; }
.side-tickets .work-badge { position: static; }
.side-tickets .side-groups { padding-top: 4px; }

/* Cabecera del chat */
.agent .work-chat { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; position: relative; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px clamp(12px, 3vw, 24px); border-bottom: 1px solid var(--line); }
.chat-title { min-width: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.chat-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--placeholder); stroke-width: 1.8; opacity: 0; transition: opacity .15s ease; }
.chat-title:hover { background: rgba(var(--fg-rgb), .05); }
.chat-title:hover svg { opacity: 1; }
.chat-title-edit { flex: 0 1 360px; height: 34px; padding: 0 10px; border: 1px solid var(--violet); border-radius: 8px; background: var(--sunken); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; outline: none; }
.project-pick { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 10px; border: 1px solid var(--hairline); border-radius: 10px; color: var(--muted); font-size: 13px; cursor: pointer; }
.project-pick:hover { border-color: rgba(var(--fg-rgb), .3); color: var(--ink); }
.project-pick:focus-within { border-color: var(--violet); }
.project-pick svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.project-select { max-width: 220px; padding: 0 2px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; outline: none; appearance: none; cursor: pointer; }
.project-select option, .project-select optgroup { background: var(--ground-lift); color: var(--ink); }

/* Mensajes */
.agent .chat-list { gap: 18px; width: min(820px, 100%); padding-top: 24px; }
.msg { display: flex; gap: 12px; min-width: 0; }
.msg.is-new { animation: chat-in .3s var(--ease-out) both; }
.msg-user { justify-content: flex-end; }
.msg-user-body { display: grid; justify-items: end; gap: 6px; max-width: min(620px, 88%); }
.msg-bubble { padding: 10px 14px; border-radius: 16px 16px 6px 16px; background: var(--bubble-mine); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-user time, .msg-meta time { color: var(--placeholder); font-size: 11px; }
.msg-avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; border-radius: 9px; background: var(--agent, var(--violet)); color: #fff; font-size: 13px; font-weight: 700; }
.msg-avatar.is-pulsing { animation: dot-pulse 1.4s ease-in-out infinite; }
.msg-agent-body { flex: 1; min-width: 0; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; font-size: 13px; }
.msg-meta b { font-weight: 600; }
.msg-cost { color: var(--placeholder); font-size: 11px; font-variant-numeric: tabular-nums; }
.msg-writing { color: var(--violet-soft); font-size: 12px; }
.msg-actions { display: flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity .15s ease; }
.msg-agent:hover .msg-actions, .msg-actions:focus-within { opacity: 1; }
.msg-action { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--placeholder); cursor: pointer; }
.msg-action:hover { background: rgba(var(--fg-rgb), .07); color: var(--ink); }
.msg-action svg, .md-copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.msg-action.is-done, .md-copy.is-done { color: var(--ok-ink); }
.msg-card, .msg-notice { padding-left: 40px; }
.msg-card { display: block; }
.msg-typing-body { display: flex; align-items: center; gap: 10px; min-height: 30px; color: var(--muted); font-size: 13px; }
.msg-typing .chat-dots { padding: 9px 12px; }
.msg-elapsed { color: var(--placeholder); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Bloques de herramienta */
.msg-tool { display: block; margin: -8px 0 -8px 40px; border-left: 2px solid var(--line); }
.msg-tool summary { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 10px; color: var(--muted); font-size: 12.5px; cursor: pointer; list-style: none; border-radius: 0 8px 8px 0; }
.msg-tool summary::-webkit-details-marker { display: none; }
.msg-tool summary:hover { background: rgba(var(--fg-rgb), .04); color: var(--ink); }
.msg-tool summary svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.msg-tool-name { flex: none; padding: 1px 6px; border-radius: 6px; background: rgba(var(--fg-rgb), .06); color: var(--muted); font: 500 11px var(--mono); }
.msg-tool-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-tool-detail { margin: 2px 0 6px 10px; padding: 8px 10px; max-height: 260px; overflow: auto; border-radius: 8px; background: var(--sunken); color: var(--muted); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-tool-detail.is-empty { font-family: inherit; }

/* Adjuntos en mensajes y en la caja */
.msg-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.msg-thumb { display: block; width: 120px; height: 90px; overflow: hidden; border: 1px solid var(--hairline); border-radius: 10px; }
.msg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.msg-audio { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--panel); font-size: 12px; color: var(--muted); }
.msg-audio audio { height: 34px; max-width: 280px; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; height: 34px; padding: 0 6px 0 10px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--panel); color: var(--ink); font-size: 12.5px; text-decoration: none; }
a.file-chip:hover { border-color: rgba(var(--fg-rgb), .3); }
.file-chip svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.file-chip-thumb { flex: none; width: 24px; height: 24px; margin-left: -4px; border-radius: 6px; object-fit: cover; }
.file-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip-size { flex: none; color: var(--placeholder); font-size: 11px; }
.file-chip.is-uploading { opacity: .7; }
.file-chip.is-uploading .file-chip-size { color: var(--violet-soft); }
.file-chip.is-error { border-color: var(--danger-line); }
.file-chip-remove, .file-chip-action { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--placeholder); cursor: pointer; }
.file-chip-remove:hover, .file-chip-action:hover { background: rgba(var(--fg-rgb), .08); color: var(--ink); }
.file-chip-remove svg, .file-chip-action svg { width: 13px; height: 13px; }

/* Markdown */
.md { color: var(--ink); overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md-p { margin: 0 0 10px; }
.md-h { margin: 16px 0 8px; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
h3.md-h { font-size: 17px; }
.md-list { margin: 0 0 10px; padding-left: 22px; }
.md-list li { margin: 3px 0; }
.md-list li::marker { color: var(--placeholder); }
.md-task { list-style: none; margin-left: -20px !important; display: flex; gap: 8px; align-items: baseline; }
.md-check { flex: none; width: 13px; height: 13px; border: 1.5px solid var(--placeholder); border-radius: 4px; }
.md-check.is-done { border-color: var(--violet); background: var(--violet); }
.md-quote { margin: 0 0 10px; padding: 2px 0 2px 14px; border-left: 3px solid rgba(122, 90, 248, .6); color: var(--muted); }
.md-hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.md a { color: var(--violet-soft); text-underline-offset: 2px; }
.md-code { padding: 1px 6px; border-radius: 6px; background: rgba(var(--fg-rgb), .08); font: .88em var(--mono); }
.md-pre { margin: 0 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); }
.md-pre figcaption { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line); color: var(--placeholder); font: 500 11.5px var(--mono); }
.md-copy { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--placeholder); cursor: pointer; }
.md-copy:hover { background: rgba(var(--fg-rgb), .07); color: var(--ink); }
.md-pre pre { margin: 0; padding: 12px 14px; overflow-x: auto; font: 12.8px/1.6 var(--mono); scrollbar-width: thin; }
.md-table { margin: 0 0 12px; overflow-x: auto; }
.md-table table { border-collapse: collapse; font-size: 13.5px; }
.md-table th, .md-table td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; }
.md-table th { background: rgba(var(--fg-rgb), .04); font-weight: 600; }
.tok-comment { color: var(--tok-comment); font-style: italic; }
.tok-string { color: var(--tok-string); }
.tok-number { color: var(--tok-number); }
.tok-keyword { color: var(--tok-keyword); }
.tok-type { color: var(--tok-type); }
.tok-tag { color: var(--tok-tag); }
.tok-punct { color: var(--muted); }

/* Vacío */
.agent .chat-empty { gap: 14px; }
.chat-empty-avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--agent, var(--violet)); color: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.chat-empty-avatar svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.agent .chat-example { display: flex; align-items: center; gap: 10px; }
.agent .chat-example svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--violet-soft); stroke-width: 1.7; stroke-linejoin: round; }

/* Caja de escribir */
.composer-host { position: relative; padding: 0 clamp(12px, 3vw, 24px) clamp(12px, 2vh, 20px); }
.composer { position: relative; display: grid; gap: 6px; width: min(820px, 100%); margin: 0 auto; padding: 10px 10px 8px 14px; border: 1px solid rgba(var(--fg-rgb), .16); border-radius: 18px; background: var(--composer); box-shadow: 0 16px 50px rgba(0, 0, 0, .3); transition: border-color .15s ease, box-shadow .15s ease; }
.composer:focus-within { border-color: rgba(122, 90, 248, .8); box-shadow: 0 0 0 3px rgba(122, 90, 248, .2), 0 16px 50px rgba(0, 0, 0, .3); }
.composer.is-recording { border-color: #b8505a; }
.composer textarea { width: 100%; min-height: 26px; max-height: 240px; margin: 0; padding: 4px 0; border: 0; background: transparent; color: var(--ink); caret-color: var(--violet); font: inherit; line-height: 1.5; resize: none; outline: none; scrollbar-width: thin; }
.composer textarea::placeholder { color: var(--placeholder); }
.composer-files { display: flex; flex-wrap: wrap; gap: 6px; }
.composer-bar { display: flex; align-items: center; gap: 4px; margin-left: -6px; }
.composer-tool { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.composer-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.composer-tool:hover:not(:disabled) { background: rgba(var(--fg-rgb), .07); color: var(--ink); }
.composer-tool:disabled { opacity: .35; cursor: not-allowed; }
.composer-tool.is-recording { background: #b8505a; color: #fff; }
.composer-tool.is-busy svg { animation: dot-pulse 1s ease-in-out infinite; }
.composer-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.composer-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.composer-pill:hover, .composer-pill[aria-expanded='true'] { background: rgba(var(--fg-rgb), .07); color: var(--ink); }
.composer-pill.is-on { color: var(--violet-soft); }
.composer-pill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.composer-spacer { flex: 1; }
.composer-hint { color: var(--placeholder); font-size: 12px; white-space: nowrap; }
.composer-send { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 11px; background: var(--violet); color: #fff; cursor: pointer; transition: background-color .15s ease, opacity .15s ease; }
.composer-send svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.composer-send:hover:not(:disabled) { background: var(--violet-hover); }
.composer-send:disabled { opacity: .3; cursor: default; }
.composer-send.is-stop { background: var(--ink); color: var(--ground); }
.composer-send.is-stop svg { fill: currentColor; stroke-width: 1; }
.composer-rec { display: flex; align-items: center; gap: 10px; padding: 4px 0; color: var(--muted); font-size: 13px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5606b; animation: dot-pulse 1s ease-in-out infinite; }
.rec-time { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.rec-level { --level: 0; display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.rec-level i { width: 3px; height: calc(4px + var(--level) * 18px); border-radius: 2px; background: #e5606b; transition: height .08s linear; }
.rec-level i:nth-child(2), .rec-level i:nth-child(4) { height: calc(4px + var(--level) * 12px); }
.rec-level i:nth-child(1), .rec-level i:nth-child(5) { height: calc(3px + var(--level) * 7px); }
.rec-label { flex: 1; }
.composer-rec .btn { height: 30px; }
.composer-drop { position: absolute; inset: 8px; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 10px; border: 2px dashed rgba(122, 90, 248, .8); border-radius: 18px; background: var(--overlay); color: var(--violet-soft); font-size: 15px; font-weight: 600; pointer-events: none; }
.composer-drop svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Ventanas emergentes del composer */
.composer-pop { position: absolute; left: 8px; bottom: calc(100% + 8px); z-index: 40; width: min(440px, calc(100vw - 32px)); max-height: min(460px, 60vh); display: grid; overflow: hidden; border: 1px solid var(--hairline); border-radius: 14px; background: var(--pop); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: chat-in .2s var(--ease-out) both; }
.composer-pop > div { min-height: 0; display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden; }
.composer-pop-palette { width: min(520px, calc(100vw - 32px)); }
.composer-pop-palette > .pop-list { max-height: 320px; }
.pop-title { margin: 0; padding: 10px 14px 6px; color: var(--placeholder); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pop-search { margin: 0 10px 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--sunken); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.pop-search:focus { border-color: var(--violet); }
.pop-list { min-height: 0; overflow-y: auto; padding: 4px; scrollbar-width: thin; }
.pop-item { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pop-item:hover, .pop-item.is-active { background: rgba(var(--fg-rgb), .07); }
.pop-item.is-selected { background: rgba(122, 90, 248, .14); }
.pop-item-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pop-item-name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.pop-item-desc { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pop-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pop-item-tags span { padding: 1px 6px; border-radius: 6px; background: rgba(var(--fg-rgb), .06); color: var(--placeholder); font-size: 11px; }
.pop-badge { padding: 1px 7px; border-radius: 6px; background: rgba(122, 90, 248, .2); color: var(--violet-soft); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.pop-badge.is-quiet { background: rgba(var(--fg-rgb), .06); color: var(--placeholder); }
.pop-check { flex: none; width: 16px; height: 16px; margin-top: 6px; fill: none; stroke: var(--violet-soft); stroke-width: 2.2; }
.pop-check-item input { flex: none; margin-top: 3px; accent-color: var(--violet); }
.pop-cmd { align-items: baseline; }
.pop-cmd-label { flex: none; min-width: 120px; font: 600 12.5px var(--mono); color: var(--violet-soft); }
.pop-cmd .pop-item-desc { -webkit-line-clamp: 1; }
.pop-footer { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pop-footer:hover { background: rgba(var(--fg-rgb), .05); color: var(--ink); }
.pop-footer svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pop-empty { margin: 0; padding: 12px; color: var(--placeholder); font-size: 13px; }

/* Panel derecho */
.work-panel { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; overflow: hidden; background: var(--raised); border-left: 1px solid var(--line); }
.panel-tabs { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.panel-tab { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.panel-tab svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.panel-tab:hover { background: rgba(var(--fg-rgb), .06); color: var(--ink); }
.panel-tab.is-active { background: rgba(var(--fg-rgb), .09); color: var(--ink); }
.panel-close { position: sticky; right: 0; margin-left: auto; background: var(--raised); }
.panel-body { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.panel-section { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.panel-head { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.panel-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.panel-title svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.panel-sub { flex: 1 1 120px; min-width: 0; overflow: hidden; color: var(--placeholder); font: 11.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.panel-label { margin: 14px 0 6px; color: var(--placeholder); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.panel-empty { margin: 0; padding: 14px; color: var(--placeholder); font-size: 13px; text-wrap: pretty; }
.panel-empty.is-centered { margin: auto; max-width: 300px; text-align: center; }
.panel-head .panel-empty { flex-basis: 100%; padding: 6px 0 0; }

/* Archivos */
.files-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(140px, 1fr); }
.files-split:has(.files-viewer:not([hidden])) { grid-template-rows: minmax(120px, 38%) minmax(0, 1fr); }
.files-tree-wrap { min-height: 0; display: flex; flex-direction: column; }
.files-filter { flex: none; margin: 8px 10px 4px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); color: var(--ink); font: inherit; font-size: 12.5px; outline: none; }
.files-filter:focus { border-color: var(--violet); }
.files-tree { flex: 1; min-height: 0; overflow: auto; padding: 4px 6px 10px; scrollbar-width: thin; }
.tree-row { width: 100%; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 6px 0 calc(6px + var(--depth, 0) * 14px); border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; }
.tree-row:hover { background: rgba(var(--fg-rgb), .05); color: var(--ink); }
.tree-row.is-selected { background: rgba(122, 90, 248, .16); color: var(--ink); }
.tree-row svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tree-caret { width: 12px; height: 12px; transition: rotate .15s ease; }
.tree-caret.is-open { rotate: 90deg; }
.tree-caret-space { flex: none; width: 12px; }
.tree-icon { width: 15px; height: 15px; }
.tree-icon.is-dir { stroke: var(--folder); }
.tree-icon.ext-ts, .tree-icon.ext-tsx { stroke: #6aa8e8; }
.tree-icon.ext-js, .tree-icon.ext-mjs, .tree-icon.ext-json { stroke: #e3c75e; }
.tree-icon.ext-css, .tree-icon.ext-scss { stroke: #c98be8; }
.tree-icon.ext-html, .tree-icon.ext-php { stroke: #e8866a; }
.tree-icon.ext-md { stroke: #9ad0a8; }
.tree-name { overflow: hidden; text-overflow: ellipsis; }
.files-viewer { min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--sunken); }
.viewer-head { flex: none; display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line); }
.viewer-path { min-width: 0; flex: 1; overflow: hidden; font: 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.viewer-meta { flex: none; margin-right: 4px; color: var(--placeholder); font-size: 11px; }
.viewer-code { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; overflow: auto; scrollbar-width: thin; }
.viewer-gutter, .viewer-text { margin: 0; padding: 10px 0; font: 12.5px/1.6 var(--mono); }
.viewer-gutter { position: sticky; left: 0; padding: 10px 10px 10px 12px; background: var(--sunken); color: var(--gutter); text-align: right; user-select: none; border-right: 1px solid var(--line); }
.viewer-text { padding-left: 12px; padding-right: 16px; white-space: pre; tab-size: 2; }
.viewer-code > .panel-empty { grid-column: 1 / -1; }
.viewer-image { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px; overflow: auto; background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 50% / 16px 16px; }
.viewer-image img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Servidor */
.proc-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; overflow: hidden; }
.proc-split:has(.console-wrap:not([hidden])) { grid-template-rows: minmax(150px, 42%) minmax(0, 1fr); }
.proc-body { min-height: 0; overflow-y: auto; padding: 0 12px 12px; scrollbar-width: thin; }
.proc-scripts, .proc-list { display: grid; gap: 4px; }
.proc-script { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 6px 4px 10px; border: 1px solid var(--line); border-radius: 10px; }
.proc-script.is-apache { border-style: dashed; }
.proc-script-name { flex: none; min-width: 64px; font-size: 13px; font-weight: 600; }
.proc-script-cmd { flex: 1; min-width: 0; overflow: hidden; color: var(--placeholder); font: 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.proc-pill { flex: none; padding: 2px 8px; border-radius: 8px; background: rgba(63, 178, 127, .16); color: var(--ok-ink); font-size: 11.5px; font-weight: 600; }
.proc-custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 4px 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); }
.proc-custom:focus-within { border-color: var(--violet); }
.proc-custom svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--placeholder); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.proc-input { flex: 1; min-width: 0; height: 30px; border: 0; background: transparent; color: var(--ink); font: 12.5px var(--mono); outline: none; }
.proc-custom .btn { height: 30px; }
.proc-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 10px; }
.proc-item.is-selected { border-color: rgba(122, 90, 248, .6); background: rgba(122, 90, 248, .08); }
.proc-item-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 2px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.proc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #6b6772; }
.proc-item[data-status='running'] .proc-dot { background: #3fb27f; box-shadow: 0 0 0 4px rgba(63, 178, 127, .18); }
.proc-item[data-status='starting'] .proc-dot { background: #e0a33a; animation: dot-pulse 1s ease-in-out infinite; }
.proc-item[data-status='failed'] .proc-dot { background: #e5606b; }
.proc-item-main { min-width: 0; display: grid; }
.proc-item-name { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.proc-item-sub { color: var(--placeholder); font-size: 11.5px; }
.proc-url { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 1px solid rgba(63, 178, 127, .4); border-radius: 8px; background: rgba(63, 178, 127, .1); color: var(--ok-ink); font: 12px var(--mono); cursor: pointer; }
.proc-url:hover { background: rgba(63, 178, 127, .2); }
.proc-url svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.console-wrap { min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--sunken); }
.console-head { flex: none; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line); }
.console-title { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; font: 12px var(--mono); white-space: nowrap; }
.console-title span { overflow: hidden; text-overflow: ellipsis; }
.console-title svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.console-filter { width: 110px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; outline: none; }
.console-follow { display: inline-flex; align-items: center; gap: 4px; color: var(--placeholder); font-size: 12px; cursor: pointer; }
.console-follow input { accent-color: var(--violet); }
.console { flex: 1; min-height: 0; margin: 0; padding: 10px 12px; overflow: auto; color: var(--console-ink); font: 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; outline: none; }
.console-line.is-error { color: var(--danger-soft); }
.console-line.is-warn { color: var(--warn-ink); }
.console-line.is-cmd { color: var(--violet-soft); font-weight: 600; }

/* Navegador */
.browser-bar { flex: none; display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 6px; border-bottom: 1px solid var(--line); }
.browser-lock { display: grid; place-items: center; width: 26px; color: var(--placeholder); }
.browser-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.browser-url { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--sunken); color: var(--ink); font: 12.5px var(--mono); outline: none; }
.browser-url:focus { border-color: var(--violet); }
.browser-stage { flex: 1; min-height: 0; display: grid; }
.browser-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.browser-empty { display: grid; align-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; }
.browser-empty-icon { width: 40px; height: 40px; fill: none; stroke: var(--violet-soft); stroke-width: 1.4; }
.browser-empty-title { margin: 0; font-size: 15px; font-weight: 600; }
.browser-suggest { display: grid; gap: 6px; width: min(360px, 100%); margin-top: 6px; }
.browser-suggest .chat-example { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.browser-suggest svg { width: 13px; height: 13px; fill: var(--ok-ink); stroke: none; }

/* Ticket dentro del panel */
.agent .work-panel .work-detail { position: static; width: auto; height: 100%; border-left: 0; box-shadow: none; animation: none; }
.panel-section[data-tab-panel='ticket'] { display: flex; }
.panel-section[data-tab-panel='ticket'][hidden] { display: none !important; }

/* Diálogos: agentes y carpetas */
.agents-dialog { width: min(980px, 100% - 24px); max-height: min(820px, 100% - 24px); }
.agents-body { min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); overflow: hidden; }
.agents-list { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 2px; padding: 12px; border-right: 1px solid var(--line); }
.agents-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.agents-item:hover { background: rgba(var(--fg-rgb), .05); }
.agents-item.is-active { background: rgba(122, 90, 248, .16); }
.agents-item.is-new { color: var(--muted); font-size: 13px; }
.agents-item.is-new svg { width: 30px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.agents-item-main { min-width: 0; display: grid; }
.agents-item-name { font-size: 13.5px; font-weight: 600; }
.agents-item-sub { overflow: hidden; color: var(--placeholder); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.agents-form { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 12px; padding: 18px 22px 22px; scrollbar-width: thin; }
.agent-hero { display: flex; align-items: flex-end; gap: 14px; }
.agent-hero-main { flex: 1; display: grid; gap: 8px; }
.agent-colors { display: flex; gap: 6px; }
.agent-swatch { width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--agent); cursor: pointer; }
.agent-swatch.is-active { border-color: #fff; }
.agent-field { display: grid; gap: 5px; min-width: 0; }
.agent-field-label { color: var(--muted); font-size: 12px; font-weight: 500; }
.agent-field-note { color: var(--placeholder); font-size: 12px; }
.agent-field .ticket-input, .agent-field .settings-select { width: 100%; }
.agent-field textarea.ticket-input { min-height: 140px; padding: 10px 12px; font: 12.5px/1.55 var(--mono); resize: vertical; }
.agent-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.agent-traits { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.agent-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.agent-toggle, .agent-skill { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.agent-toggle:hover, .agent-skill:hover { border-color: rgba(var(--fg-rgb), .22); }
.agent-toggle input, .agent-skill input { flex: none; margin-top: 3px; accent-color: var(--violet); }
.agent-toggle span, .agent-skill span { display: grid; gap: 2px; min-width: 0; }
.agent-toggle b, .agent-skill b { font-size: 13px; font-weight: 600; }
.agent-toggle small, .agent-skill small { overflow: hidden; color: var(--placeholder); font-size: 12px; text-overflow: ellipsis; }
.agent-toggle.is-disabled { opacity: .5; cursor: default; }
.agent-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.agent-skill small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.agent-actions { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.folder-path { display: flex; gap: 6px; }
.folder-path .ticket-input { flex: 1; font-family: var(--mono); font-size: 12.5px; }
.folder-list { max-height: 340px; overflow-y: auto; display: grid; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); scrollbar-width: thin; }
.folder-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.folder-item:hover { background: rgba(var(--fg-rgb), .06); }
.folder-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-item svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--folder); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.folder-item svg:last-child { stroke: var(--placeholder); width: 13px; }

@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Pantallas medianas: el panel flota sobre el chat. */
@media (max-width: 1180px) {
  .agent.has-panel .work-body, .agent.side-collapsed.has-panel .work-body { grid-template-columns: var(--side-width) minmax(0, 1fr); }
  .agent.side-collapsed.has-panel .work-body { grid-template-columns: 0 minmax(0, 1fr); }
  .agent.has-panel .panel-resizer { display: none; }
  .agent .work-panel { position: fixed; top: 52px; right: 0; bottom: 0; z-index: 25; width: min(var(--panel-width), 100%); box-shadow: -30px 0 60px rgba(0, 0, 0, .5); }
}
/* Móvil: las conversaciones se abren con su botón y el panel ocupa la pantalla. */
@media (max-width: 820px) {
  .agent .work-body, .agent.has-panel .work-body, .agent.side-collapsed .work-body { grid-template-columns: minmax(0, 1fr); }
  .agent .work-side { position: fixed; top: 52px; left: 0; bottom: 0; z-index: 30; width: min(300px, 86%); visibility: visible; padding: 12px 10px; border-right: 1px solid var(--line); translate: -100% 0; transition: translate .3s var(--ease-out); }
  .agent.has-side .work-side { translate: 0 0; box-shadow: 30px 0 60px rgba(0, 0, 0, .5); }
  .agent .work-panel { width: 100%; }
  .agent .work-user .btn { padding: 0 10px; }
  .agent .msg-card, .agent .msg-notice { padding-left: 0; }
  .msg-tool { margin-left: 0; }
  .composer-hint { display: none; }
  .project-select { max-width: 130px; }
}
@media (max-width: 520px) {
  .agent #logout { display: none; }
  .agents-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .agents-list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-head { padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-dot.is-busy, .msg-avatar.is-pulsing, .rec-dot, .proc-item[data-status='starting'] .proc-dot { animation: none; }
}

/* ───── Segunda capa: control del agente, banco de trabajo y comodidad ───── */
.btn.is-small { height: 28px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; }
.btn.is-small svg, .btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn kbd { margin-left: 4px; padding: 1px 5px; border-radius: 5px; background: rgba(var(--fg-rgb), .14); font: 500 10.5px var(--mono); opacity: .8; }
.agent-dot.is-waiting { box-shadow: 0 0 0 3px rgba(224, 163, 58, .35); background: #e0a33a; animation: dot-pulse 1s ease-in-out infinite; }

/* Permisos */
.msg-permissions { display: grid; gap: 10px; padding-left: 40px; }
.perm-card { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(224, 163, 58, .55); border-radius: 14px; background: linear-gradient(180deg, rgba(224, 163, 58, .08), transparent 60%), var(--raised); outline: none; animation: chat-in .25s var(--ease-out) both; }
.perm-card:focus-visible { box-shadow: 0 0 0 3px rgba(224, 163, 58, .35); }
.perm-head { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.perm-head svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #e0a33a; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.perm-summary { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.perm-detail { max-height: 220px; margin: 0; padding: 10px 12px; overflow: auto; border-radius: 9px; background: var(--sunken); color: var(--console-ink); font: 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.perm-detail .is-add { color: var(--ok-ink); }
.perm-detail .is-del { color: var(--danger-soft); }
.perm-note { height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.perm-note:focus { border-color: var(--violet); }
.perm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-typing.is-waiting .msg-activity { color: #e0a33a; font-weight: 600; }

/* Plan, cambios y acciones de mensaje */
.msg-agent.is-plan .md { padding: 12px 14px; border: 1px solid rgba(122, 90, 248, .35); border-radius: 12px; background: rgba(122, 90, 248, .06); }
.plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.plan-note { color: var(--placeholder); font-size: 12px; }
.msg-changes { padding-left: 40px; }
.changes-card { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--raised); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease; }
.changes-card:hover { border-color: rgba(122, 90, 248, .6); }
.changes-card > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--violet-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.changes-card > svg:last-child { width: 14px; stroke: var(--placeholder); }
.changes-card-main { flex: 1; display: grid; gap: 2px; font-size: 13.5px; }
.changes-card-stats, .changes-total, .change-stats { display: inline-flex; gap: 8px; font: 600 12px var(--mono); }
.is-add { color: var(--ok-ink); }
.is-del { color: var(--danger-soft); }
.changes-card-cta { color: var(--violet-soft); font-size: 12.5px; font-weight: 600; }
.msg-user-foot { display: flex; align-items: center; gap: 6px; }
.msg-actions.is-user { opacity: 0; }
.msg-user:hover .msg-actions.is-user, .msg-actions.is-user:focus-within { opacity: 1; }
.msg-user-body.is-editing { width: min(620px, 100%); justify-items: stretch; }
.msg-edit { width: 100%; padding: 10px 12px; border: 1px solid var(--violet); border-radius: 14px; background: var(--field); color: var(--ink); font: inherit; resize: vertical; outline: none; }
.msg-edit-note { margin: 0; color: var(--placeholder); font-size: 12px; }
.msg-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.chat-example-label { flex: none; color: var(--violet-soft); font: 600 12px var(--mono); }

/* Caja: modo, uso, tareas, fijados y aviso de contexto */
.composer-pill[data-mode="auto"] { color: #e0a33a; }
.composer-pill[data-mode="plan"] { color: var(--violet-soft); }
.composer-usage { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 8px; color: var(--placeholder); font: 500 11.5px var(--mono); cursor: help; }
.composer-usage:hover { background: rgba(var(--fg-rgb), .06); color: var(--ink); }
.usage-ring { --ratio: 0; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--violet) calc(var(--ratio) * 360deg), rgba(var(--fg-rgb), .14) 0); -webkit-mask: radial-gradient(circle, transparent 3.5px, #000 4px); mask: radial-gradient(circle, transparent 3.5px, #000 4px); }
.usage-ring.is-mid { background: conic-gradient(#e0a33a calc(var(--ratio) * 360deg), rgba(var(--fg-rgb), .14) 0); }
.usage-ring.is-high { background: conic-gradient(#e5606b calc(var(--ratio) * 360deg), rgba(var(--fg-rgb), .14) 0); }
.composer-todos, .composer-warn { width: min(820px, 100%); margin: 0 auto 8px; }
.composer-todos { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.todos-head { width: 100%; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.todos-head svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.todos-head b { font-variant-numeric: tabular-nums; }
.todos-current { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.todos-bar { --progress: 0; flex: none; width: 70px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--violet) calc(var(--progress) * 100%), rgba(var(--fg-rgb), .12) 0); }
.todos-list { display: grid; gap: 4px; margin: 0; padding: 4px 12px 12px 38px; list-style: none; font-size: 13px; }
.todos-list li { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); }
.todos-list li.is-in_progress { color: var(--ink); font-weight: 600; }
.todos-list li.is-completed span:last-child { text-decoration: line-through; opacity: .7; }
.todos-mark { flex: none; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 2px; border: 1.5px solid var(--placeholder); border-radius: 50%; }
.is-in_progress .todos-mark { border-color: var(--violet); box-shadow: inset 0 0 0 3px var(--raised); background: var(--violet); }
.is-completed .todos-mark { border-color: var(--violet); background: var(--violet); }
.todos-mark svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 3; }
.composer-warn { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border: 1px solid rgba(224, 163, 58, .5); border-radius: 12px; background: rgba(224, 163, 58, .08); color: var(--ink); font-size: 13px; }
.composer-warn > svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #e0a33a; stroke-width: 1.9; }
.composer-warn span { flex: 1; }
.composer-pinned { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 4px 0 8px; border: 1px solid rgba(122, 90, 248, .35); border-radius: 8px; background: rgba(122, 90, 248, .08); color: var(--violet-soft); font: 500 12px var(--mono); }
.pin-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pin-chip button { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; }
.pin-chip button:hover { background: rgba(122, 90, 248, .2); }
.pop-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pop-rules { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; border-top: 1px solid var(--line); }
.pop-rules .pop-title { flex-basis: 100%; padding-left: 0; }

/* Pestaña Cambios y diff */
.changes-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(120px, 1fr); }
.changes-split:has(.changes-view:not([hidden])) { grid-template-rows: minmax(110px, 32%) minmax(0, 1fr); }
.changes-list { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 3px; padding: 8px; scrollbar-width: thin; }
.change-row { display: flex; align-items: center; gap: 2px; border-radius: 9px; }
.change-row:hover, .change-row.is-selected { background: rgba(var(--fg-rgb), .05); }
.change-row.is-selected { background: rgba(122, 90, 248, .12); }
.change-row[data-status="reverted"] { opacity: .55; }
.change-row[data-status="reverted"] .change-path { text-decoration: line-through; }
.change-open, .change-other { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 9px; }
.change-kind { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(122, 90, 248, .16); color: var(--violet-soft); font: 700 11px var(--mono); }
.change-row[data-status="accepted"] .change-kind { background: rgba(63, 178, 127, .16); color: var(--ok-ink); }
.change-kind.is-git { background: rgba(var(--fg-rgb), .08); color: var(--muted); }
.change-main { flex: 1; min-width: 0; display: grid; }
.change-path { overflow: hidden; font: 12.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.change-sub { color: var(--placeholder); font-size: 11.5px; }
.icon-btn.is-accept { color: var(--ok-ink); }
.changes-view { min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--sunken); }
.diff { flex: 1; min-height: 0; overflow: auto; padding: 4px 0 12px; font: 12.3px/1.55 var(--mono); scrollbar-width: thin; }
.diff-line { display: grid; grid-template-columns: 42px 42px 18px minmax(0, 1fr); min-width: max-content; }
.diff-line.is-add { background: rgba(63, 178, 127, .12); }
.diff-line.is-del { background: rgba(229, 96, 107, .12); }
.diff-num { padding-right: 8px; color: var(--gutter); text-align: right; user-select: none; }
.diff-sign { color: var(--placeholder); user-select: none; }
.is-add .diff-sign { color: var(--ok-ink); }
.is-del .diff-sign { color: var(--danger-soft); }
.diff-text { white-space: pre; padding-right: 16px; }
.diff-gap { margin: 4px 0; padding: 3px 12px; background: rgba(var(--fg-rgb), .04); color: var(--placeholder); font-size: 11.5px; }

/* Terminal */
.term-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--sunken); }
.term-output { flex: 1; min-height: 0; }
.term-form { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; border-top: 1px solid var(--line); font: 12.5px var(--mono); }
.term-prompt { flex: none; max-width: 45%; overflow: hidden; color: var(--violet-soft); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.term-input { flex: 1; min-width: 0; height: 30px; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; caret-color: var(--violet); }
.term-input:disabled { opacity: .5; }

/* Explorador: editar, fijados y cambiados */
.tree-mark { flex: none; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #e0a33a; }
.tree-row .tree-pin { width: 12px; height: 12px; margin-left: auto; stroke: var(--violet-soft); }
.tree-mark + .tree-pin { margin-left: 4px; }
.editor { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--sunken); }
.editor-layer, .editor-input { position: absolute; inset: 0; margin: 0; padding: 12px 14px; font: 12.5px/1.6 var(--mono); tab-size: 2; white-space: pre; overflow: auto; }
.editor-layer { pointer-events: none; color: var(--ink); scrollbar-width: none; }
.editor-layer::-webkit-scrollbar { display: none; }
.editor-input { width: 100%; height: 100%; border: 0; background: transparent; color: transparent; caret-color: var(--violet); resize: none; outline: none; scrollbar-width: thin; }
.editor-input::selection { background: rgba(122, 90, 248, .35); color: transparent; }

/* Navegador: herramientas y tamaños */
.browser-tools { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; border-bottom: 1px solid var(--line); }
.browser-sizes { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(var(--fg-rgb), .05); }
.browser-size { display: grid; place-items: center; width: 28px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--placeholder); cursor: pointer; }
.browser-size svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.browser-size.is-active { background: var(--raised); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.browser-stage { --device-width: 100%; position: relative; overflow: auto; }
.browser-device { width: var(--device-width); max-width: 100%; height: 100%; margin: 0 auto; }
.browser-stage:not([data-size="desktop"]) { background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 50% / 16px 16px; }
.browser-stage:not([data-size="desktop"]) .browser-device { box-shadow: 0 0 0 1px var(--hairline), 0 10px 40px rgba(0, 0, 0, .3); }
.browser-stage .browser-empty { position: absolute; inset: 0; background: var(--raised); }
.browser-stage .browser-empty[hidden] { display: none; }

/* Paleta Ctrl+K */
.palette { width: min(640px, 100% - 24px); max-height: min(560px, 100% - 80px); margin-top: 12vh; padding: 0; border: 1px solid var(--hairline); border-radius: 16px; background: var(--pop); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); overflow: hidden; }
.palette[open] { display: grid; grid-template-rows: auto 1fr; animation: chat-in .2s var(--ease-out) both; }
.palette::backdrop { background: var(--overlay); }
.palette-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.palette-search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--placeholder); stroke-width: 1.9; }
.palette-search kbd { padding: 2px 6px; border-radius: 6px; background: rgba(var(--fg-rgb), .08); color: var(--placeholder); font: 500 11px var(--mono); }
.palette-input { flex: 1; height: 52px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; outline: none; }
.palette-list { min-height: 0; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.palette-group { margin: 8px 10px 4px; color: var(--placeholder); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.palette-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.palette-item.is-active { background: rgba(122, 90, 248, .16); }
.palette-item svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.palette-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-hint { margin-left: auto; max-width: 45%; overflow: hidden; color: var(--placeholder); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* Plantillas en el editor de agentes */
.agent-templates { display: grid; gap: 8px; justify-items: start; }
.agent-template { width: 100%; display: grid; grid-template-columns: auto 160px minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.agent-template-slash { padding-top: 8px; color: var(--violet-soft); font: 700 13px var(--mono); }
.agent-template textarea { min-height: 38px; padding: 8px 10px; resize: vertical; }

/* Tema claro: retoques que no salen solos de los tokens */
:root[data-theme="light"] .agent .work-side { background: #f0eff4; }
:root[data-theme="light"] .composer, :root[data-theme="light"] .composer-pop, :root[data-theme="light"] .palette { box-shadow: 0 16px 50px rgba(28, 24, 38, .12); }
:root[data-theme="light"] .settings { box-shadow: 0 30px 70px rgba(28, 24, 38, .18); }
:root[data-theme="light"] .chat-empty-avatar { box-shadow: 0 16px 40px rgba(122, 90, 248, .25); }
:root[data-theme="light"] .browser-size.is-active { box-shadow: 0 1px 3px rgba(28, 24, 38, .15); }

@media (max-width: 820px) {
  .msg-permissions, .msg-changes { padding-left: 0; }
  .agent-template { grid-template-columns: auto minmax(0, 1fr) auto; }
  .agent-template textarea { grid-column: 2 / 4; }
  .browser-tools .btn span { display: none; }
}

/* Chat estrecho (panel muy ancho): los botones de la caja se quedan en icono y no se parten en dos líneas. */
.agent .work-chat { container-type: inline-size; container-name: chat; }
.composer-pill span, .composer-hint, .usage-text { white-space: nowrap; }
@container chat (max-width: 560px) {
  .composer-pill > span:not(.agent-dot) { display: none; }
  .composer-pill { padding: 0 6px; }
  .composer-hint, .usage-text { display: none; }
  .chat-head .project-select { max-width: 120px; }
}