@keyframes fox-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: .15; } 100% { opacity: 1; } }
    /* ── Botón flotante: squircle de Fox (.hero-back-btn) con sombra proyectada ──
       No lleva el relieve de doble luz de los botones de Fox porque flota
       sobre el contenido: una luz clara arriba a la izquierda se vería rara
       sobre otras tarjetas. */
    .chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; padding: 0; border: none; cursor: pointer; background: var(--surface-card); color: var(--text-body); box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .55); transition: transform var(--dur-fast) var(--ease-press), box-shadow var(--dur-fast) var(--ease-press), opacity var(--dur-fast); }
    .chat-fab .cd-glaze svg { width: 18px; height: 18px; }
    .chat-fab:active { transform: scale(.96); }
    .chat-fab:focus-visible, .chat-panel button:focus-visible, .chat-panel select:focus-visible { outline: 2px solid var(--signal-cyan); outline-offset: 2px; }
    .chat-fab.away { opacity: 0; pointer-events: none; transform: scale(.7); transition: transform 160ms ease-in, opacity 120ms ease-in; }
    .chat-fab.pop { animation: chat-fab-pop 420ms var(--chat-spring) 160ms backwards; }
    .chat-panel, .chat-fab { --chat-spring: cubic-bezier(.34, 1.35, .64, 1); }
    @keyframes chat-fab-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
    /* Al abrir, cada bloque del panel entra con un pequeño retraso, de arriba abajo.
       fill-mode backwards: solo aplica el estado inicial durante el retraso, así los
       estilos normales (p. ej. el desenfoque del historial) siguen mandando después. */
    @keyframes chat-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .chat-panel:not(.closed) > .chat-top { animation: chat-rise 300ms var(--ease-out) 90ms backwards; }
    .chat-panel:not(.closed) > .chat-sub { animation: chat-rise 300ms var(--ease-out) 130ms backwards; }
    .chat-panel:not(.closed) > .chat-conv-view { animation: chat-rise 320ms var(--ease-out) 170ms backwards; }
    .chat-panel:not(.closed) > .chat-input-area { animation: chat-rise 320ms var(--ease-out) 210ms backwards; }
    .cd-neon { position: absolute; top: 50%; left: 50%; width: 58%; height: 58%; transform: translate(-50%, -50%); border-radius: 999px; background: var(--text-muted); box-shadow: 0 0 8px 2px var(--text-muted); opacity: .3; pointer-events: none; transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
    .chat-fab:hover .cd-neon, .chat-sq:hover:not(:disabled) .cd-neon { background: var(--neon-blue); box-shadow: 0 0 10px 2px var(--neon-blue-glow); opacity: .7; }
    .cd-glaze { position: absolute; inset: 6px; border-radius: 11px; background: var(--glass-fill); backdrop-filter: blur(6px) saturate(160%); -webkit-backdrop-filter: blur(6px) saturate(160%); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); display: grid; place-items: center; pointer-events: none; }
    .cd-glaze svg { position: relative; z-index: 2; }
    .chat-fab-live { position: absolute; top: -3px; right: -3px; z-index: 3; width: 10px; height: 10px; border-radius: 50%; background: var(--signal-cyan); box-shadow: 0 0 10px 2px var(--neon-teal-glow); }
    .chat-fab-live[hidden] { display: none; }

    /* Squircles del compositor (imagen y enviar): mismo .hero-back-btn a 40px, con relieve. */
    .chat-sq { position: relative; width: 40px; height: 40px; flex-shrink: 0; align-self: flex-end; border-radius: 12px; display: grid; place-items: center; padding: 0; border: none; cursor: pointer; background: var(--surface-card); color: var(--text-body); box-shadow: var(--nu-raise-1); transition: box-shadow var(--dur-fast) var(--ease-press), transform var(--dur-fast) var(--ease-press); }
    .chat-sq:active:not(:disabled) { box-shadow: var(--nu-inset-1); transform: scale(.96); }
    .chat-sq:disabled { opacity: .45; cursor: not-allowed; }
    .chat-sq .cd-glaze { inset: 5px; border-radius: 9px; }
    .chat-sq.primary .cd-neon { background: var(--neon-orange); box-shadow: 0 0 10px 2px var(--neon-orange-glow); opacity: .7; }
    .chat-sq.primary:hover:not(:disabled) .cd-neon { opacity: 1; }

    /* ── Panel de cristal plano (receta de .glass-modal-box), sin base oscura ── */
    .chat-panel { position: fixed; right: 24px; bottom: 24px; z-index: 61; width: var(--pw, 420px); height: var(--ph, 640px); max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-3xl); background: var(--glass-fill); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--glass-border); box-shadow: 0 28px 64px -14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1); color: var(--text-body); font-family: var(--font-core); transform-origin: calc(100% - 28px) calc(100% - 28px); opacity: 1; visibility: visible; transform: none; transition: transform 380ms var(--chat-spring), opacity 180ms var(--ease-out), visibility 0s linear 0s; }
    .chat-panel.closed { opacity: 0; visibility: hidden; transform: scale(.35); transition: transform 240ms cubic-bezier(.5, 0, .9, .4), opacity 170ms ease-in 50ms, visibility 0s linear 240ms; }
    .chat-panel.dragging { transition: none; user-select: none; }
    .chat-rs { position: absolute; z-index: 5; touch-action: none; }
    .chat-rs-t { top: 0; left: 24px; right: 24px; height: 9px; cursor: ns-resize; }
    .chat-rs-l { left: 0; top: 24px; bottom: 24px; width: 9px; cursor: ew-resize; }
    .chat-rs-c { top: 0; left: 0; width: 24px; height: 24px; cursor: nwse-resize; }
    .chat-rs-t::after { content: ""; position: absolute; top: 3px; left: 50%; width: 38px; height: 3px; margin-left: -19px; border-radius: 3px; background: var(--text-faint); opacity: 0; transition: opacity var(--dur-fast); }
    .chat-rs-t:hover::after, .chat-rs-t:focus-visible::after, .chat-panel.dragging .chat-rs-t::after { opacity: .7; }
    .chat-grab { display: none; }

    .chat-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px 16px; flex-shrink: 0; }
    .chat-agent-icons { display: flex; gap: 6px; }
    .chat-agent-btn, .chat-tool { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: none; cursor: pointer; background: none; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--line-hair); transition: color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
    .chat-tool { box-shadow: none; }
    .chat-agent-btn:hover, .chat-tool:hover { color: var(--signal-cyan-dim); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal-cyan) 55%, transparent); }
    .chat-agent-btn.active, .chat-tool[aria-pressed="true"] { color: var(--signal-cyan-dim); background: color-mix(in srgb, var(--signal-cyan) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal-cyan) 55%, transparent); }
    .chat-agent-btn[hidden] { display: none; }
    .chat-tools { display: flex; gap: 6px; }
    .chat-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 2px 16px 12px; flex-shrink: 0; border-bottom: 1px solid var(--line-soft); }
    .chat-sub > div:first-child { min-width: 0; }
    .active-agent-badge { margin: 0 0 6px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal-cyan-dim); }
    .chat-title { margin: 0; font: var(--fw-semibold) 16px/1.25 var(--font-core); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-model-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .chat-model-status { font: 500 11px/1 var(--font-core); color: var(--signal-cyan-dim); white-space: nowrap; opacity: 0; transition: opacity var(--dur-fast); }
    .chat-model-status.visible { opacity: 1; }
    .chat-model-status.error { color: var(--signal-red); }
    .chat-model-select { appearance: none; -webkit-appearance: none; max-width: 160px; padding: 8px 28px 8px 14px; border: none; border-radius: var(--r-pill); font: 500 12px/1 var(--font-core); color: var(--text-body); cursor: pointer; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393A0AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; box-shadow: inset 0 0 0 1px var(--line-hair); transition: color var(--dur-fast), box-shadow var(--dur-fast); }
    .chat-model-select:hover { color: var(--signal-cyan-dim); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal-cyan) 55%, transparent); }
    .chat-model-select option { background: var(--surface-card); color: var(--text-body); }

    .chat-conv-view { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
    .chat-sub, .chat-conv-view, .chat-input-area { transition: filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
    /* El blur anidado dentro del panel no se aplica de forma fiable: se desenfoca directamente lo que queda detrás del historial. */
    .chat-panel.has-drawer .chat-sub, .chat-panel.has-drawer .chat-conv-view, .chat-panel.has-drawer .chat-input-area { filter: blur(14px); opacity: .35; pointer-events: none; user-select: none; }

    .messages-pane { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
    .messages-pane::before { content: ""; flex: 1 1 0; }
    .bubble { max-width: 86%; padding: 9px 13px; border-radius: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; color: var(--text-body); }
    .msg-assistant .bubble { background: var(--line-soft); box-shadow: inset 0 0 0 1px var(--line-soft); border-bottom-left-radius: 5px; }
    .msg-user .bubble { background: var(--line-hair); color: var(--text-strong); border-bottom-right-radius: 5px; }
    .streaming::after { content: '▋'; animation: fox-blink 1s step-start infinite; margin-left: 2px; color: var(--signal-cyan); }

    .chat-input-area { flex-shrink: 0; padding: 12px 14px 14px; border-top: 1px solid var(--line-soft); display: flex; align-items: flex-end; gap: 8px; }
    #chat-input { flex: 1; min-width: 0; max-height: 120px; min-height: 40px; resize: none; border: 0; border-radius: 14px; padding: 10px 14px; background: color-mix(in srgb, var(--surface-sunken) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--text-strong); font: 400 14px/1.45 var(--font-core); transition: var(--t-surface); }
    #chat-input::placeholder { color: var(--text-faint); }
    #chat-input:focus { outline: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal-cyan) 55%, transparent), 0 0 0 3px color-mix(in srgb, var(--signal-cyan) 18%, transparent); }

    /* Historial: cajón dentro del panel */
    .chat-drawer { position: absolute; left: 0; right: 0; top: 60px; bottom: 0; z-index: 6; display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface-base) 62%, transparent); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border-top: 1px solid var(--line-soft); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); }
    .chat-drawer.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .chat-drawer-search { margin: 14px 16px 10px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--surface-sunken) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--text-faint); }
    .chat-drawer-search:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal-cyan) 55%, transparent); }
    .chat-drawer-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text-strong); font: 400 14px var(--font-core); }
    .chat-drawer-search input:focus { outline: none; }
    .chat-chips { display: flex; gap: 6px; padding: 0 16px 8px; flex-wrap: wrap; }
    .chat-chip { padding: 5px 11px; border: none; background: none; cursor: pointer; border-radius: var(--r-pill); font: 600 12px/1 var(--font-core); color: var(--text-muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-muted) 45%, transparent); transition: color var(--dur-fast), box-shadow var(--dur-fast); }
    .chat-chip:hover { color: var(--text-strong); }
    .chat-chip[aria-pressed="true"] { color: var(--signal-cyan-dim); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal-cyan) 55%, transparent); }
    .chat-session-list { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 12px; }
    .chat-session-group { padding: 12px 16px 4px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
    .chat-session-item { display: flex; align-items: center; gap: 10px; margin: 0 8px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; color: var(--text-body); transition: background var(--dur-fast); }
    .chat-session-item:hover { background: var(--line-soft); }
    .chat-session-item.active { background: var(--line-hair); box-shadow: inset 0 0 0 1px var(--line-soft); }
    .chat-session-ico { color: var(--text-muted); flex-shrink: 0; display: grid; }
    .chat-session-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
    .chat-session-title.untitled { color: var(--text-muted); font-style: italic; }
    .chat-session-rename-input { flex: 1; min-width: 0; background: color-mix(in srgb, var(--surface-sunken) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft); border: none; border-radius: var(--r-xs); color: var(--text-body); font: inherit; padding: 1px 4px; outline: none; }
    .chat-session-time { font: 400 11px/1 var(--font-mono); color: var(--text-faint); flex-shrink: 0; font-variant-numeric: tabular-nums; }
    .chat-session-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 8px; flex-shrink: 0; display: none; }
    .chat-session-item:hover .chat-session-time { display: none; }
    .chat-session-item:hover .chat-session-delete, .chat-session-delete.confirm, .chat-session-delete:focus-visible { display: grid; }
    .chat-session-delete:hover, .chat-session-delete.confirm { color: var(--signal-red); }
    .chat-list-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 28px 16px; margin: 0; }

    /* ── Píldora del pomodoro (FOX-P173): a la izquierda del botón del chat,
       misma altura, radio, superficie y sombra; se aparta con él al abrir el panel. ── */
    .pomo-pill { position: fixed; right: calc(24px + 56px + 12px); bottom: 24px; z-index: 60; height: 56px; max-width: min(340px, calc(100vw - 24px - 56px - 12px - 24px)); border-radius: 16px; display: flex; align-items: center; gap: 2px; padding: 0 8px 0 6px; background: var(--surface-card); color: var(--text-body); box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .55); font-family: var(--font-core); transition: transform var(--dur-fast) var(--ease-press), opacity var(--dur-fast); }
    .pomo-pill[hidden] { display: none; }
    .chat-fab.away ~ .pomo-pill { opacity: 0; pointer-events: none; transform: scale(.85); transition: transform 160ms ease-in, opacity 120ms ease-in; }
    .pomo-pill-body { display: flex; align-items: center; gap: 10px; min-width: 0; height: 44px; padding: 0 10px 0 8px; border-radius: 12px; color: inherit; text-decoration: none; }
    .pomo-pill-body:hover { background: color-mix(in srgb, var(--text-body) 6%, transparent); }
    .pomo-pill-dot { position: relative; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--neon-red); box-shadow: 0 0 10px 2px var(--neon-red-glow); }
    .pomo-pill[data-state="paused"] .pomo-pill-dot { background: var(--signal-orange); box-shadow: 0 0 10px 2px var(--neon-orange-glow); }
    .pomo-pill[data-state="notice"] .pomo-pill-dot { background: var(--signal-cyan); box-shadow: 0 0 10px 2px var(--neon-teal-glow); }
    .pomo-pill[data-state="ended"] .pomo-pill-dot { background: var(--neon-green); box-shadow: 0 0 10px 2px var(--neon-green-glow); }
    .pomo-pill-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
    .pomo-pill-time { font-size: 17px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
    .pomo-pill-title { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
    .pomo-pill-btn { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; padding: 0; border: none; background: none; color: var(--text-body); cursor: pointer; }
    .pomo-pill-btn:hover { background: color-mix(in srgb, var(--text-body) 8%, transparent); }
    .pomo-pill-btn:active { transform: scale(.94); }
    .pomo-pill-btn[hidden] { display: none; }
    .pomo-pill-btn:focus-visible, .pomo-pill-body:focus-visible { outline: 2px solid var(--signal-cyan); outline-offset: 2px; }
    .pomo-pill.ding { animation: pomo-ding 900ms var(--ease-out) 2; }
    @keyframes pomo-ding { 0%, 100% { transform: none; } 20% { transform: translateY(-6px); } 40% { transform: none; } 60% { transform: translateY(-3px); } }
    .pomo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    /* Móvil: hoja casi a pantalla completa */
    @media (max-width: 640px) {
      .chat-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
      .pomo-pill { right: calc(16px + 56px + 10px); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 16px - 56px - 10px - 16px); }
      .pomo-pill-title { max-width: 120px; }
      .chat-panel { left: 0; right: 0; bottom: 0; top: 10px; width: auto; height: auto; max-width: none; max-height: none; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
      .chat-panel { transform-origin: 50% 100%; }
      .chat-panel.closed { transform: translateY(100%); transition: transform 280ms cubic-bezier(.5, 0, .9, .4), opacity 200ms ease-in 40ms, visibility 0s linear 280ms; }
      .chat-rs { display: none; }
      .chat-grab { display: block; position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 7; touch-action: none; cursor: grab; }
      .chat-grab::after { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--text-faint); opacity: .6; }
      .chat-top { padding-top: 26px; }
      .chat-drawer { top: 88px; }
      #chat-input { font-size: 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .chat-panel, .chat-drawer, .chat-fab, .pomo-pill { transition-duration: .01s !important; }
      .chat-panel > *, .chat-fab, .pomo-pill { animation: none !important; }
    }

    #messages-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
    .messages-pane { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
    .messages-pane.hidden { display: none; }
    .msg-empty { color: var(--text-muted); text-align: center; margin-top: var(--sp-7); font-size: var(--fs-small); }
    .msg { display: flex; }
    .msg-user { justify-content: flex-end; }
    .msg-assistant { justify-content: flex-start; flex-wrap: wrap; }
    /* FOX-P150 — opciones y valoración debajo de la burbuja, no a su lado.
       La valoración solo aparece al pasar el ratón o al tocar la respuesta
       (móvil): sin feedback se asume que encajaba. */
    .msg-assistant .chat-options, .msg-assistant .chat-rating { flex-basis: 100%; }
    .msg-assistant .chat-rating { opacity: 0; transition: opacity .15s; }
    .msg-assistant:hover .chat-rating, .msg-assistant:focus-within .chat-rating, .msg-assistant.show-rating .chat-rating { opacity: .75; }

    /* Diálogo de revisión de prompt (FOX-P143/US2) — cristal plano como
       .glass-modal-box (feedback de Emilio, 2026-09-24: todas las modales
       con el estilo de "Añadir evento"), textarea plano con hairline. */
    .image-prompt-overlay[hidden] { display: none; }
    .image-prompt-dialog { max-width: 100%; background: var(--glass-fill); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border: 1px solid var(--glass-border); box-shadow: var(--elev-card); border-radius: var(--r-3xl); width: min(480px, 92vw); padding: 26px 24px; animation: ql-scale-in var(--dur-slow) var(--ease-out); }
    .image-prompt-dialog h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-lead); font-weight: var(--fw-semibold); color: var(--text-body); }
    .image-prompt-hint { margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--text-muted); }
    #image-prompt-textarea { width: 100%; min-height: 100px; background: none; box-shadow: none; border: none; border-bottom: 1px solid var(--line-hair); border-radius: 0; padding: 0 0 10px; color: var(--text-body); font-size: var(--fs-small); font-family: inherit; resize: vertical; outline: none; box-sizing: border-box; transition: var(--t-surface); }
    #image-prompt-textarea:focus { box-shadow: var(--elev-field), var(--glow-accent); }
    #image-prompt-textarea:disabled { opacity: 0.6; }
    .image-prompt-error { color: var(--signal-red); font-size: var(--fs-small); margin: var(--sp-3) 0 0; }
    .image-prompt-error[hidden] { display: none; }
    .image-prompt-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-4); }

    /* Aviso de empate ambiguo del clasificador de skills (FOX-P136) — mismo
       lenguaje visual que la modal "Añadir evento" del Inbox (cristal +
       elementos planos), pero SIN difuminado del fondo: es un aviso
       ocasional y de baja fricción, no una tarea que exija apartar la
       atención de golpe del resto de la pantalla (feedback de Emilio,
       2026-09-24). Reusa .glass-modal-box tal cual para el propio panel —
       ese sí conserva su blur, es lo que lo hace "cristal". */
    .skill-feedback-overlay, .image-prompt-overlay { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: inherit; background: color-mix(in srgb, var(--surface-base) 40%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: ql-fade-in var(--dur-base) var(--ease-out); }
    .skill-feedback-overlay[hidden] { display: none; }
    /* Selector privado (⌘⇧I, N) — mismo lenguaje que el aviso de skills. No
       aparece en ningún menú: solo se abre con el atajo. */
    .private-agent-overlay { position: fixed; inset: 0; background: var(--surface-overlay); z-index: 1100; display: flex; align-items: center; justify-content: center; animation: ql-fade-in var(--dur-base) var(--ease-out); }
    .private-agent-overlay[hidden] { display: none; }
    .private-agent-box { width: min(320px, 92vw); display: flex; flex-direction: column; gap: 10px; }
    .skill-feedback-box { width: 100%; max-width: 360px; animation: ql-scale-in var(--dur-slow) var(--ease-out); }
    .skill-feedback-box h3 { margin: 0 0 8px; }
    .skill-feedback-hint { margin: 0 0 18px; font: 400 13px/1.4 var(--font-core); color: var(--text-muted); }
    .skill-feedback-candidates { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
    .skill-feedback-candidate { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; border-radius: var(--r-lg); background: var(--glass-fill); border: 1px solid var(--glass-border); color: var(--text-body); font: 500 13px var(--font-core); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
    .skill-feedback-candidate:hover, .skill-feedback-candidate:focus-visible { background: color-mix(in srgb, var(--signal-cyan) 12%, var(--glass-fill)); border-color: var(--signal-cyan-dim); outline: none; }
    .skill-feedback-candidate-prob { font: 500 10px/1 var(--font-mono); letter-spacing: var(--ls-mono); color: var(--text-faint); }

    /* Bubble de imagen generada — vive dentro de .msg-assistant .bubble,
       mismo contenedor que un mensaje de texto normal (renderResponseText),
       así que hereda su estilo base; solo se anula el padding cuando ya
       contiene la imagen para que el PNG llegue hasta el borde. */
    .bubble.image-gen-pending { color: var(--text-muted); font-style: italic; }
    .bubble.image-gen-error { color: var(--signal-red); }
    .bubble:has(.chat-generated-image) { padding: 6px; }
    .chat-generated-image { display: block; max-width: 100%; border-radius: var(--r-sm); }


    
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-core); font-size: 0.8rem; font-weight: var(--fw-medium); padding: 7px 18px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; transition: var(--t-press); white-space: nowrap; line-height: 1.4; background: var(--surface-base); box-shadow: var(--elev-control); color: var(--text-body); }
    .btn:focus-visible { outline: 1px solid var(--signal-cyan); outline-offset: 2px; }
    .btn:disabled { opacity: 0.42; cursor: not-allowed; }
    .btn:not(:disabled):active { box-shadow: var(--elev-control-pressed); }
    /* Estado "en curso" (Guardando…/Descartando…) — el botón sigue legible
       mientras espera la respuesta en vez de apagarse como un disabled. */
    .btn[aria-busy="true"]:disabled { opacity: 0.85; cursor: progress; }
    .btn-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: btn-spin 700ms linear infinite; flex-shrink: 0; }
    @keyframes btn-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .btn-spin { animation-duration: 2s; } }
    .btn-primary, .btn-teal, .btn-purple, .btn-red { position: relative; z-index: 0; overflow: hidden; background: var(--surface-base); color: var(--btn-ink); box-shadow: var(--nu-raise-2); --mx: 0; --my: 0; }
    .btn-primary::before, .btn-teal::before, .btn-purple::before, .btn-red::before { content: ""; position: absolute; z-index: -2; inset: 12%; border-radius: inherit; filter: blur(9px); opacity: .9; }
    .btn-primary::after, .btn-teal::after, .btn-purple::after, .btn-red::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--glass-fill); backdrop-filter: blur(7px) saturate(160%); -webkit-backdrop-filter: blur(7px) saturate(160%); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
    .btn-primary::before { background: var(--signal-orange); }
    .btn-primary:not(:disabled):hover::before { opacity: 1; filter: blur(11px); }
    .btn-teal::before { background: var(--signal-cyan-dim); }
    .btn-teal:not(:disabled):hover::before { opacity: 1; filter: blur(11px); }
    .btn-purple::before { background: var(--signal-violet); }
    .btn-purple:not(:disabled):hover::before { opacity: 1; filter: blur(11px); }
    /* CTA crítico — acento sólido rojo (FOX-P124, artifact exhibit 07
       ".btn-filled.tone-red", ej. "Eliminar workspace"), distinto de
       .btn-danger (hairline/tinted, ya existente): mismo tratamiento vidrio
       +neón que .btn-primary/.btn-teal/.btn-purple, reservado para la
       acción destructiva de máxima severidad de una vista cuando el
       hairline de .btn-danger no basta como advertencia. */
    .btn-red::before { background: var(--neon-red); }
    .btn-red:not(:disabled):hover::before { opacity: 1; filter: blur(11px); }
    /* Hover reactivo al cursor (FOX-P124, artifact exhibit 07 + iteración
       final del CTA: "¿y si reacciona al cursor? como si presionas un
       envoltorio de plástico, que se amolda a la presión"). --mx/--my las
       actualiza BUTTON_HOVER_SCRIPT por mousemove/mouseleave (-1..1 desde
       el centro del botón, delegado en document — ver más abajo en este
       fichero). El artifact anima 3 capas (.neon-under + sus propios
       ::before/::after) con fuerza decreciente 16%/12%/9%; aquí solo hay UNA
       capa de neón real (el ::before del botón, ver comentario de la receta
       "pseudo-elemento" más arriba) porque un pseudo-elemento no puede tener
       sus propios pseudo-elementos anidados — se aplica el tirón más fuerte
       (16%) a esa única capa en vez de repartirlo en tres. */
    .btn-primary::before, .btn-teal::before, .btn-purple::before, .btn-red::before { transition: transform 260ms cubic-bezier(.34,1.56,.64,1), opacity 130ms ease, filter 130ms ease; }
    .btn-primary:not(:disabled):hover::before, .btn-teal:not(:disabled):hover::before, .btn-purple:not(:disabled):hover::before, .btn-red:not(:disabled):hover::before { transform: translate(calc(var(--mx, 0) * 16%), calc(var(--my, 0) * 16%)); }
    .btn-primary:not(:disabled):active, .btn-teal:not(:disabled):active, .btn-purple:not(:disabled):active, .btn-red:not(:disabled):active { box-shadow: var(--elev-control-pressed); }
    /* btn-ghost/btn-danger (FOX-P122, ya existían — auditados contra el
       artifact def89764 exhibit 07 en FOX-P124, no reescritos desde cero).
       Único delta real: el hover leía --signal-cyan-dim/--red (los acentos
       heredados) en vez de los --neon-* nuevos de FOX-T937 — mismo tono
       conceptual (teal/rojo) pero valor hex distinto. El hairline pill del
       artifact usa box-shadow:inset 0 0 0 1px, aquí se mantiene la
       implementación real vía border-color (heredado de .btn) — visualmente
       equivalente, sin motivo para tocarlo. */
    .btn-ghost { background: transparent; box-shadow: none; color: var(--text-body); border-color: var(--line-hair); }
    .btn-ghost:not(:disabled):hover { color: var(--neon-teal); border-color: var(--neon-teal); }
    .btn-danger { background: color-mix(in srgb, var(--neon-red) 14%, transparent); box-shadow: none; color: var(--neon-red); border-color: color-mix(in srgb, var(--neon-red) 40%, transparent); }
    .btn-danger:not(:disabled):hover { background: var(--neon-red); color: var(--btn-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 16px 2px var(--neon-red-glow); }
    /* btn-tinted/btn-plain (FOX-P124, artifact def89764 exhibit 07) — no
       existían en producción, se introducen aquí por primera vez (no hay
       clase real previa que "no renombrar", como sí pasaba con .btn-primary/
       .btn-filled). Valores traducidos a los tokens reales de producción:
       --field-deep del artifact es --surface-sunken aquí (mismo valor
       literal, ver FOX-T937); --neon-orange ya existe desde esa misma tarea.
       Comentario original del artifact tras feedback de Emilio: "algunos de
       los botones no tienen efectos de hover... puedes revisarlo?" — ambos
       solo tenían :active, sin :hover previo que marcara el estado de
       reposo. */
    .btn-tinted { background: transparent; box-shadow: none; color: var(--text-body); padding: 13px 12px; border-radius: var(--r-xl); transition: transform 130ms ease, opacity 130ms ease, background 160ms ease; }
    .btn-tinted:not(:disabled):hover { background: var(--surface-sunken); }
    .btn-tinted:not(:disabled):active { transform: scale(.97); opacity: .6; }
    .btn-plain { background: none; box-shadow: none; color: var(--neon-orange); padding: 13px 6px; transition: opacity 160ms ease; }
    .btn-plain:not(:disabled):hover { opacity: .75; }
    .btn-plain:not(:disabled):active { opacity: .55; }
    .btn-sm { font-size: 0.74rem; padding: 4px 14px; }
    .fx-badge-solid { position: relative; z-index: 0; overflow: hidden; }
    .fx-badge-solid::before { content: ""; position: absolute; z-index: -2; inset: 10%; border-radius: inherit; background: var(--tone-color); filter: blur(6px); opacity: .9; }
    .fx-badge-solid::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--glass-fill); backdrop-filter: blur(5px) saturate(160%); -webkit-backdrop-filter: blur(5px) saturate(160%); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }



    
  .av-list { display: flex; flex-direction: column; gap: 12px; }
  .av-card { position: relative; padding: 16px 18px; border-radius: var(--r-2xl, 20px); background: var(--surface-base); box-shadow: var(--nu-raise-1); display: flex; flex-direction: column; gap: 8px; }
  .av-card.is-new { box-shadow: var(--nu-raise-2, var(--nu-raise-1)); }
  .av-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
  .av-meta .av-agent-name { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
  .av-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
  .av-new { color: var(--signal-cyan); font-weight: 700; }
  .av-crit { color: var(--signal-orange); font-weight: 700; }
  .av-title { margin: 0; font: 600 14.5px/1.35 var(--font-core); color: var(--text-strong); overflow-wrap: anywhere; }
  .av-body { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-body); white-space: pre-line; overflow-wrap: anywhere; }
  .av-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
  .av-actions a.btn { text-decoration: none; }
  .av-archive { margin-left: auto; }
  .av-empty { padding: 36px 8px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
  .av-more { align-self: center; margin-top: 8px; }
  .av-full { align-self: flex-start; }
  @media (max-width: 640px) { .av-card { padding: 14px 14px; } }

    /* ── Botón: 64×56 (antes 56×56), icono 3 px a la izquierda para compensar el peso de las hendiduras ── */
    .chat-fab { width: 64px; }
    .chat-fab .cd-neon { width: 46%; }
    .chat-fab .cd-glaze svg { transform: translateX(-3px); }
    .chat-fab-slots { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
    .chat-fab-slot { width: 8px; height: 6px; border-radius: 3px; background: var(--slot-off, color-mix(in srgb, var(--text-faint) 30%, transparent)); box-shadow: inset 1px 1px 2px color-mix(in srgb, var(--text-strong) 24%, transparent), inset -1px -1px 1px color-mix(in srgb, var(--text-strong) 8%, transparent); transition: background .24s ease, box-shadow .24s ease; }
    .chat-fab-slot.on { background: var(--dot-c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 7px 1px color-mix(in srgb, var(--dot-c) 60%, transparent); }
    .chat-fab-slot[data-agent="mulder"], .chat-agent-dot[data-agent="mulder"] { --dot-c: var(--signal-orange); }
    .chat-fab-slot[data-agent="scully"], .chat-agent-dot[data-agent="scully"] { --dot-c: var(--signal-cyan-dim); }
    .chat-fab-slot[data-agent="skinner"], .chat-agent-dot[data-agent="skinner"] { --dot-c: var(--neon-pink); }
    .chat-fab-slot[data-agent="byers"], .chat-agent-dot[data-agent="byers"] { --dot-c: var(--neon-blue); }
    .chat-fab-slot[data-agent="langly"], .chat-agent-dot[data-agent="langly"] { --dot-c: var(--neon-violet); }
    /* ── Punto de aviso en el icono de cada agente de la cabecera ── */
    .chat-agent-btn { position: relative; }
    .chat-agent-dot { position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--dot-c); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--dot-c) 60%, transparent); pointer-events: none; }
    .chat-agent-dot[hidden] { display: none; }
    /* Algo urgente pendiente: rojo, venga de donde venga el color del agente. */
    .chat-fab-slot.urgent[data-agent], .chat-agent-dot.urgent[data-agent], .chat-ch-n.urgent { --dot-c: var(--signal-red, #ff4a41); }
    /* ── Canales del agente ── */
    .chat-channels { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 10px; flex-shrink: 0; border-bottom: 1px solid var(--line-soft); scrollbar-width: none; }
    .chat-channels::-webkit-scrollbar { display: none; }
    .chat-channels[hidden] { display: none; }
    .chat-ch { appearance: none; border: none; cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); background: none; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--line-hair); font: 600 10px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; transition: color var(--dur-fast), box-shadow var(--dur-fast); }
    .chat-ch:hover { color: var(--text-strong); }
    .chat-ch[aria-selected="true"] { color: var(--text-strong); background: color-mix(in srgb, var(--signal-cyan) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal-cyan) 55%, transparent); }
    .chat-ch-n { min-width: 16px; padding: 3px 5px; border-radius: var(--r-pill); background: var(--dot-c, var(--signal-cyan)); color: #0b0e14; font: 700 9.5px/1 var(--font-mono); text-align: center; }
    .chat-ch-n[hidden] { display: none; }
    /* ── Vista de avisos: sustituye a la conversación y al compositor mientras hay un canal abierto ── */
    .chat-avisos-view { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; display: none; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
    .chat-panel[data-view="avisos"] > .chat-conv-view, .chat-panel[data-view="avisos"] > .chat-input-area { display: none; }
    .chat-panel[data-view="avisos"] > .chat-avisos-view { display: flex; }
    .chat-avisos-view .av-list { gap: 10px; }
    .chat-avisos-view .av-card { padding: 12px 14px; }
    .chat-avisos-view .av-body { white-space: normal; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .chat-avisos-all { align-self: center; font: 600 10.5px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; padding: 8px 4px; }
    .chat-avisos-all:hover { color: var(--text-strong); }
    @media (prefers-reduced-motion: reduce) { .chat-fab-slot { transition: none; } }