/* Agentes: avatar, botón del chat, pantalla completa, hojas y neuronas */
.bot-av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; color: #fff; font-weight: 700; line-height: 1; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 10px color-mix(in srgb, var(--c) 40%, transparent); }
.bot-av.auto { background: conic-gradient(from 200deg, #7c5cff, #22c1c3, #f5a524, #ec4899, #7c5cff); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

/* Botón pequeño en el chat */
.ag-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; max-width: 150px; padding: 0 10px 0 6px; border-radius: 999px; cursor: pointer;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text, #ececf4);
  background: color-mix(in srgb, var(--c, #8b8fa3) 14%, rgba(255,255,255,.04)); border: 1px solid color-mix(in srgb, var(--c, #8b8fa3) 40%, rgba(255,255,255,.08)); transition: background .2s, transform .15s; }
.ag-pill:hover { background: color-mix(in srgb, var(--c, #8b8fa3) 24%, rgba(255,255,255,.05)); }
.ag-pill:active { transform: scale(.95); }
.ag-pill-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-pill-ch { color: #a78bfa; font-weight: 500; white-space: nowrap; }

/*IOS*/
/* Nombre del agente en cada respuesta */
.msg-head .bot-av { margin-right: 6px; vertical-align: -5px; }
.msg-head .bot-name { color: color-mix(in srgb, var(--c) 70%, #fff); }

/* ---------- Neuronas ---------- */
.nr { position: relative; margin: 2px 0 8px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, rgba(18,18,28,.9)), rgba(18,18,28,.85));
  border: 1px solid color-mix(in srgb, var(--c) 30%, rgba(255,255,255,.06)); }
.nr-live { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent), 0 8px 30px color-mix(in srgb, var(--c) 18%, transparent); }
.nr-live::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 60%, var(--c), transparent 85%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: nr-spin 2.4s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes nr-spin { to { --a: 360deg; } }
.nr-canvas { display: block; width: 100%; height: 56px; }
.nr-done .nr-canvas { height: 34px; opacity: .55; }
.nr-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px 9px; border: 0; background: none; color: #d9d6ff; font: 600 12.5px system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; text-align: left; }
.nr-orb { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.nr-live .nr-orb { animation: nr-pulse 1.1s ease-in-out infinite; }
@keyframes nr-pulse { 50% { transform: scale(1.5); opacity: .6; } }
.nr-label { flex: 1; }
.nr-chev { width: 8px; height: 8px; border-right: 2px solid #a8a3d6; border-bottom: 2px solid #a8a3d6; transform: rotate(45deg); transition: transform .25s; margin-right: 4px; }
.nr.open .nr-chev { transform: rotate(-135deg); }
.nr-body { display: none; max-height: 220px; overflow: auto; padding: 8px 14px 12px; color: #b9b6d8; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; border-top: 1px solid rgba(255,255,255,.05); }
.nr.open .nr-body { display: block; }

/* Neuronas en Bar Live */
.live-overlay .nr { width: min(calc(100% - 40px), 320px); margin: 4px auto 0; }

@media (prefers-reduced-motion: reduce) { .ag-screen, .ag-sheet, .ag-pop, .nr-live::before, .nr-live .nr-orb { animation: none !important; } }

/* Botón «Agente»: desplegable con el Agente del navegador y tus agentes */
#agent-btn { gap: 6px; max-width: 150px; }
#agent-btn > span:not(.am-av):not(.am-caret) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#agent-btn.has-agent > svg { display: none; }
#agent-btn.has-agent { border-color: color-mix(in srgb, var(--c) 55%, transparent) !important; }
#agent-btn .am-av { display: inline-flex; }
#agent-btn .am-caret { font-size: 10px; opacity: .6; margin-left: 1px; }
#model-menu[data-kind="agent"] { padding: 6px; }
#model-menu .am-item, #model-menu .am-mode, #model-menu .am-manage { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px; width: 100%; min-height: 0 !important; padding: 9px 10px !important; border-radius: 12px; text-align: left !important; }
#model-menu .am-item > *, #model-menu .am-mode > *, #model-menu .am-manage > * { margin: 0 !important; }
#model-menu .am-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
#model-menu .am-t b { font-size: 14px; font-weight: 600; }
#model-menu .am-t small { font-size: 12px; opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#model-menu .am-item.sel { background: color-mix(in srgb, #0a84ff 14%, transparent); }
#model-menu .am-check { display: inline-flex; color: #0a84ff; }
#model-menu .am-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #8b6cff, #6a4dea); }
#model-menu .am-manage .am-ico { background: linear-gradient(135deg, #0a84ff, #0060df); }
#model-menu .am-manage b { color: #0a84ff; }
#model-menu .am-mode { margin-bottom: 2px; }
#model-menu[data-kind="agent"] h5 { margin: 8px 10px 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; opacity: .55; }
#model-menu .am-manage { margin-top: 4px; border-top: .5px solid rgba(128,128,140,.25); border-radius: 0 0 12px 12px; padding-top: 11px; }
.am-switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: rgba(120,120,128,.32); transition: background .25s; }
.am-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.32,.72,0,1); }
.am-switch.on { background: #30d158; }
.am-switch.on::after { transform: translateX(18px); }

/* Barra de botones del chat: ningún botón se corta ni se parte en dos líneas */
html body .composer-tools { flex-wrap: nowrap; gap: 6px; }
html body .composer-tools .model-btn, html body .composer-tools #agent-btn { flex: 0 0 auto !important; max-width: none !important; white-space: nowrap; }
html body .composer-tools .model-text strong, html body #agent-btn > span:not(.am-av):not(.am-caret) { overflow: visible; text-overflow: clip; white-space: nowrap; }
html body .composer-tools .model-text small { display: none; }
html body .composer-tools .spacer { flex: 1 1 0; min-width: 0; }
html body .composer-tools #live-btn { flex: none; white-space: nowrap; line-height: 1; }
html body .composer-tools .tool-icon { flex: none; }
/* Panel estrecho: Bar Live solo con su icono y el agente sin flecha, para que quepa todo en una fila */
@media (max-width: 440px) {
  html:not(.cb-full) .composer-tools #live-btn { padding: 0; width: 34px; height: 34px; justify-content: center; border-radius: 50%; }
  html:not(.cb-full) .composer-tools #live-btn span { display: none; }
  html:not(.cb-full) #agent-btn .am-caret, html:not(.cb-full) .composer-tools .model-btn .caret { display: none; }
  html:not(.cb-full) .composer-tools .model-btn, html:not(.cb-full) .composer-tools #agent-btn { padding: 5px 10px !important; }
}

/* Herramientas en uso (GitHub, API, MCP) dentro de la respuesta */
.tool-runs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.tool-run { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(10,132,255,.14); color: #64b5ff; border: 1px solid rgba(10,132,255,.28); }
.tool-run.run { animation: tool-pulse 1.2s ease-in-out infinite; }
.tool-run.ok { background: rgba(48,209,88,.12); color: #5fe08a; border-color: rgba(48,209,88,.3); }
.tool-run.err { background: rgba(255,69,58,.12); color: #ff8a82; border-color: rgba(255,69,58,.3); }
.tool-run.denied { background: rgba(142,142,147,.14); color: #b6b6bd; border-color: rgba(142,142,147,.3); }
@keyframes tool-pulse { 50% { opacity: .55; } }