/* ============================================================
   Nexa IA · chat widget UI
   Pattern visual: AI-Native UI (neutral + single accent).
   Hereda typography + patrones base de Flowcore Health DS v2
   (Geist Sans, feature settings, tabular-nums, focus ring,
    scrollbars, brand-halo, skeleton, chip, glass).

   PERO · el chat widget es AI-native, NO dashboard institucional.
   Por eso:
     · Accent: indigo #6366F1 (no navy azul Flowcore)
     · Bubbles: user bubble azul-claro + AI bubble neutro
     · Minimal chrome, streaming text, context cards

   Referencia: UI Pro Max "AI-Native UI" style pattern.
   ============================================================ */

@import "/static/tokens-flowcore.css";

/* ---------- Overrides chat-widget · AI-Native tokens ----------
   Sobreescribimos los aliases que llegan de tokens-flowcore.css
   para que el WIDGET use paleta AI-native (indigo) mientras el
   admin_v2 mantiene Flowcore institucional (azul médico). */
:root {
    /* AI-Native accent (Nexa chat) · indigo-500/600 */
    --accent:           #6366f1;               /* AI-Native accent */
    --accent-hover:     #4f46e5;               /* indigo-600 */
    --accent-soft:      #eef2ff;               /* indigo-50 */
    --accent-ink:       #312e81;               /* indigo-900 */

    /* Bubble colors · pattern AI-Native (chat widget) */
    --bubble-user-bg:       #4f46e5;           /* indigo-600 user */
    --bubble-user-text:     #ffffff;
    --bubble-ai-bg:         hsl(var(--surface));
    --bubble-ai-border:     hsl(var(--border-subtle));
    --bubble-ai-text:       hsl(var(--ink-primary));

    /* Layout · chat-specific */
    --radius:           var(--radius-lg);       /* 10px */
    --radius-xs:        var(--radius-sm);       /* 6px */
    --font:             var(--font-sans);
    --border-soft:      hsl(var(--border-subtle));
    --message-gap:      16px;
    --input-height:     48px;
    --typing-dot-size:  8px;

    /* Composer · caja destacada sin ser intrusiva */
    --composer-bg:      hsl(var(--surface));
    --composer-border:  hsl(var(--border));
    --composer-ring:    color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Dark mode del widget · bubble AI se adapta a surface oscuro */
:root.dark,
:root[data-theme="dark"],
html.dark,
html[data-theme="dark"] {
    --accent:           #818cf8;               /* indigo-400 para dark contraste */
    --accent-hover:     #a5b4fc;               /* indigo-300 */
    --accent-soft:      #1e1b4b;               /* indigo-950 */
    --accent-ink:       #c7d2fe;               /* indigo-200 */

    --bubble-user-bg:   #6366f1;               /* indigo-500 (más saturado en dark) */
    --bubble-user-text: #ffffff;
    --bubble-ai-bg:     hsl(var(--elevated));
    --bubble-ai-border: hsl(var(--border-subtle));
    --bubble-ai-text:   hsl(var(--ink-primary));

    --composer-bg:      hsl(var(--surface));
    --composer-border:  hsl(var(--border));
    --composer-ring:    color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not(.light) {
        --accent:           #818cf8;
        --accent-hover:     #a5b4fc;
        --accent-soft:      #1e1b4b;
        --accent-ink:       #c7d2fe;
        --bubble-user-bg:   #6366f1;
        --bubble-ai-bg:     hsl(var(--elevated));
        --bubble-ai-border: hsl(var(--border-subtle));
        --bubble-ai-text:   hsl(var(--ink-primary));
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; height: 100%;
    background: var(--bg); color: var(--text);
    font-family: var(--font); font-size: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Contenedor general
   ============================================================ */
.nia-chat {
    display: flex; flex-direction: column;
    height: 100%; max-height: 100%; width: 100%;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}
.nia-chat[data-embed="true"] { border: none; border-radius: 0; }

/* ============================================================
   Sidebar de historial
   ============================================================ */
.nia-sidebar {
    position: absolute; inset: 0;
    background: var(--panel);
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border);
}
.nia-sidebar.open { transform: translateX(0); }

.nia-sidebar-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
}
.nia-sidebar-title { font-weight: 600; flex: 1; font-size: 14px; }

.nia-sidebar-search {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
}
.nia-sidebar-search input {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    outline: none;
}
.nia-sidebar-search input:focus { border-color: var(--accent); }

.nia-sidebar-list {
    flex: 1; overflow-y: auto;
    padding: 8px;
    display: flex; flex-direction: column;
    gap: 2px;
}
.nia-session-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
    min-width: 0;
}
.nia-session-item:hover    { background: var(--panel-2); }
.nia-session-item.active   { background: var(--panel-2); border-color: var(--border); }
.nia-session-main          { flex: 1; min-width: 0; }
.nia-session-title         {
    font-size: 13px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
.nia-session-sub           {
    font-size: 11px; color: var(--text-muted);
    margin-top: 1px;
}
.nia-session-actions       {
    display: flex; gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
}
.nia-session-item:hover .nia-session-actions,
.nia-session-item:focus-within .nia-session-actions { opacity: 1; }

.nia-sidebar-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--border-soft);
    display: flex; gap: 8px;
}
.nia-new-chat-btn {
    flex: 1;
    background: var(--accent); color: #fff;
    border: none; padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-weight: 600; font-size: 13px; cursor: pointer;
}
.nia-new-chat-btn:hover { background: var(--accent-hover); }

.nia-sidebar-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12.5px;
}

/* ============================================================
   Header
   ============================================================ */
.nia-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
    flex-shrink: 0;
    min-height: 54px;
}
.nia-avatar {
    /* Fallback si por algún motivo no carga el <img> de Nexa.
       Solo gradient brand (indigo-600 → indigo-900 del DS). Sin azul
       cielo #7dd3fc — prohibido por design system. */
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 600; font-size: 13px;
    letter-spacing: 0.5px; flex-shrink: 0;
    overflow: hidden;
}
.nia-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.nia-title-group { flex: 1; min-width: 0; }
.nia-title       { font-weight: 600; font-size: 14px; }
.nia-subtitle    {
    font-size: 11.5px; color: var(--text-dim);
    display: flex; align-items: center; gap: 6px;
}

/* Selector de sucursal · ahora más ancho para mostrar nombres reales
   + chevron indicador de que es clickeable */
.nia-sucursal-select {
    background: transparent;
    border: none;
    color: var(--text);                /* nombre legible no va muted */
    font: inherit; font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 20px 2px 4px;
    border-radius: var(--radius-xs);
    max-width: 220px;
    overflow: hidden; text-overflow: ellipsis;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0b4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 10px;
}
.nia-sucursal-select:hover {
    background-color: var(--panel-3);
    color: var(--text);
}
.nia-sucursal-select:focus {
    outline: 1px solid var(--accent);
    outline-offset: 1px;
}
/* Las options del native <select> usan el rendering del OS · no lo podemos
   estilar demasiado, pero ajustamos lo que sí funciona cross-browser */
.nia-sucursal-select option {
    background: var(--panel);
    color: var(--text);
    font-weight: 400;
}
.nia-sucursal-select optgroup {
    background: var(--panel);
    color: var(--text-dim);
    font-weight: 600;
    font-style: normal;
}

.nia-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--text-dim);
}
.nia-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted);
}
.nia-status-dot.ok      { background: var(--ok); }
.nia-status-dot.error   { background: var(--danger); }
.nia-status-dot.working { background: var(--warn); animation: nia-pulse 1s infinite; }
@keyframes nia-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.nia-header-actions { display: flex; gap: 4px; }
.nia-icon-btn {
    border: none; background: transparent; color: var(--text-dim);
    cursor: pointer; font-size: 16px; line-height: 1;
    padding: 6px 8px; border-radius: var(--radius-xs);
    transition: background 0.15s, color 0.15s;
    min-width: 32px; min-height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
}
.nia-icon-btn:hover   { background: var(--border); color: var(--text); }
.nia-icon-btn:active  { transform: scale(0.95); }
.nia-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nia-icon-btn svg { width: 16px; height: 16px; }

/* ============================================================
   Lista de mensajes
   ============================================================ */
.nia-messages {
    flex: 1; overflow-y: auto;
    padding: 16px;
    display: flex; flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
    position: relative;
}

.nia-message-wrap { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.nia-message-wrap.user      { align-items: flex-end; }
.nia-message-wrap.assistant { align-items: flex-start; }
.nia-message-wrap.system    { align-items: center; }

/* AI-Native bubbles · v3 flat style
   Inspiración: claude.ai / ChatGPT actual · el assistant SIN burbuja
   para dar protagonismo al contenido (tablas y respuestas largas respiran
   mucho mejor). Usuario mantiene burbuja pero más sutil (solo bg, sin
   shadow ni rounded asimétrico). Divider hairline entre turnos lo
   maneja .nia-message-wrap + .nia-message-wrap. */
.nia-message {
    max-width: 85%;
    padding: 11px 15px;
    border-radius: var(--radius);
    word-wrap: break-word;
    font-size: 13.5px;
    line-height: 1.6;
    position: relative;
}
.nia-message.user {
    background: var(--bubble-user-bg);
    color: var(--bubble-user-text);
    border-radius: 16px;
    box-shadow: none;
    padding: 9px 14px;
}
.nia-message.assistant {
    background: transparent;
    color: var(--bubble-ai-text);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 2px 0 0;
    max-width: 100%;
}
/* Divider hairline entre turnos consecutivos para mantener separación visual */
.nia-message-wrap + .nia-message-wrap {
    margin-top: 14px;
    position: relative;
}
.nia-message-wrap + .nia-message-wrap.assistant::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 36px;
    right: 0;
    height: 1px;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--border) 80%, transparent) 0%,
        transparent 60%);
    pointer-events: none;
}
.nia-message.system {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-dim);
    font-size: 12px;
    max-width: 95%;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

/* ---------- Edit mode ---------- */
.nia-edit-wrap {
    max-width: 85%;
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.nia-edit-textarea {
    width: 100%;
    resize: vertical;
    min-height: 60px; max-height: 200px;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 8px 10px;
    font: inherit; font-size: 13.5px;
    outline: none;
}
.nia-edit-textarea:focus { border-color: var(--accent); }
.nia-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }
.nia-edit-actions button {
    padding: 6px 12px;
    font-size: 12.5px; font-weight: 500;
    border-radius: var(--radius-xs);
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
}
.nia-edit-actions button.primary {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.nia-edit-actions button.primary:hover { background: var(--accent-hover); }

/* ---------- Markdown rendering ---------- */
.nia-message.assistant p          { margin: 0 0 8px; }
.nia-message.assistant p:last-child { margin-bottom: 0; }
.nia-message.assistant ul,
.nia-message.assistant ol         { margin: 0 0 8px; padding-left: 20px; }
.nia-message.assistant li         { margin-bottom: 2px; }
.nia-message.assistant strong     { color: var(--text); font-weight: 600; }
.nia-message.assistant em         { color: var(--text-dim); }
.nia-message.assistant h2, h3, h4 { margin: 8px 0 4px; font-weight: 600; }
.nia-message.assistant a          { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.nia-message.assistant a:hover    { color: var(--accent-hover); }
.nia-message.assistant code       {
    font-family: var(--font-mono); font-size: 12.5px;
    background: var(--panel-3); padding: 1px 6px; border-radius: 4px;
}

/* ---------- Code blocks ---------- */
.nia-code-block {
    position: relative;
    margin: 8px 0;
    border-radius: var(--radius-sm);
    background: var(--code-bg);
    border: 1px solid var(--border);
    overflow: hidden;
}
.nia-code-block pre {
    margin: 0; padding: 12px 14px;
    overflow-x: auto;
    font-family: var(--font-mono); font-size: 12.5px;
    line-height: 1.55; color: #d7dbe8;
}
[data-theme="light"] .nia-code-block pre { color: #e2e8f0; }
.nia-code-lang {
    position: absolute; top: 6px; left: 10px;
    font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted);
}
.nia-code-copy {
    position: absolute; top: 6px; right: 6px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 3px 8px; font-size: 10.5px;
    border-radius: var(--radius-xs);
    cursor: pointer; opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.nia-code-block:hover .nia-code-copy { opacity: 1; }
.nia-code-copy:hover { color: var(--text); }

/* ---------- Citations inline (Perplexity-style) ---------- */
.nia-cite {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--accent-soft); color: var(--accent-ink);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font-mono); font-size: 10px;
    margin: 0 2px;
    cursor: pointer; text-decoration: none;
    vertical-align: baseline;
    line-height: 1;
    font-weight: 600;
}
.nia-cite:hover { background: var(--accent); color: #fff; }

.nia-sources {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 6px;
}
.nia-source-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    background: var(--panel-3); border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 4px;
    font-size: 11.5px;
    cursor: pointer; text-decoration: none;
    max-width: 260px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.nia-source-chip:hover { border-color: var(--accent); color: var(--text); }
.nia-source-idx {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    color: var(--accent-ink);
    background: var(--accent-soft);
    padding: 0 4px; border-radius: 3px;
    flex-shrink: 0;
}

/* ---------- Cursor ---------- */
.nia-cursor {
    display: inline-block; width: 8px; height: 14px;
    background: var(--accent); vertical-align: -2px;
    margin-left: 2px; animation: nia-blink 1s infinite;
    border-radius: 2px;
}
@keyframes nia-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ---------- Meta tags ---------- */
.nia-meta {
    display: flex; gap: 6px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--text-muted);
}
.nia-tag {
    background: var(--accent-soft); color: var(--accent-ink);
    padding: 2px 7px; border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    display: inline-flex; align-items: center; gap: 4px;
}
.nia-tag.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.nia-tag.ok   { background: var(--ok-soft);   color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.nia-tag.freshness {
    background: var(--panel-3); color: var(--text-dim); border-color: var(--border);
}

/* ---------- Tool steps ---------- */
.nia-tool-steps {
    display: flex; flex-direction: column; gap: 4px;
    max-width: 85%; margin-bottom: 2px;
}
.nia-tool-step {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--panel-3); border: 1px solid var(--border);
    padding: 6px 10px; border-radius: var(--radius-xs);
    font-size: 12px; color: var(--text-dim);
    width: fit-content;
    animation: nia-step-in 0.25s ease;
}
.nia-tool-step.running .nia-tool-icon { animation: nia-spin 1s linear infinite; }
.nia-tool-step.ok        { color: var(--text); }
.nia-tool-step.ok .nia-tool-icon { color: var(--ok); }
.nia-tool-step.fail      { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.nia-tool-step.fail .nia-tool-icon { color: var(--danger); }
.nia-tool-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; font-size: 12px; flex-shrink: 0;
}
.nia-tool-name    { font-family: var(--font-mono); font-size: 11px; }
.nia-tool-latency { color: var(--text-muted); font-size: 10.5px; }

@keyframes nia-step-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes nia-spin { to { transform: rotate(360deg); } }

/* ---------- Hover actions ---------- */
.nia-actions {
    display: flex; gap: 4px; opacity: 0;
    transition: opacity 0.15s; margin-top: 2px;
}
.nia-message-wrap:hover .nia-actions,
.nia-message-wrap:focus-within .nia-actions { opacity: 1; }
.nia-action {
    border: none; background: transparent;
    color: var(--text-muted);
    width: 26px; height: 26px;
    padding: 0; border-radius: var(--radius-xs);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.nia-action:hover          { background: var(--panel-3); color: var(--text); }
.nia-action.active         { color: var(--accent); }
.nia-action.active.down    { color: var(--danger); }
.nia-action svg            { width: 14px; height: 14px; }
.nia-action:focus-visible  { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Typing + skeleton ---------- */
.nia-typing {
    align-self: flex-start;
    display: inline-flex; gap: 4px;
    padding: 10px 14px;
    background: var(--panel-2); border: 1px solid var(--border);
    border-radius: var(--radius); border-bottom-left-radius: 4px;
}
.nia-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-dim);
    animation: nia-bounce 1.1s infinite;
}
.nia-typing span:nth-child(2) { animation-delay: 0.12s; }
.nia-typing span:nth-child(3) { animation-delay: 0.24s; }
@keyframes nia-bounce {
    0%, 80%, 100% { transform: translateY(0);   opacity: 0.4; }
    40%           { transform: translateY(-5px); opacity: 1;   }
}

.nia-skeleton {
    align-self: flex-start; max-width: 80%;
    padding: 12px 14px;
    background: var(--panel-2); border: 1px solid var(--border);
    border-radius: var(--radius); border-bottom-left-radius: 4px;
    display: flex; flex-direction: column; gap: 7px;
}
.nia-skeleton-line {
    height: 9px; border-radius: 3px;
    background: linear-gradient(90deg, var(--panel-3) 0%, var(--border) 50%, var(--panel-3) 100%);
    background-size: 200% 100%;
    animation: nia-shimmer 1.4s linear infinite;
}
.nia-skeleton-line:nth-child(1) { width: 72%; }
.nia-skeleton-line:nth-child(2) { width: 90%; }
.nia-skeleton-line:nth-child(3) { width: 58%; }
@keyframes nia-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Error con retry ---------- */
.nia-error-card {
    align-self: flex-start;
    max-width: 90%;
    padding: 12px 14px;
    background: var(--danger-soft);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
    border-radius: var(--radius); border-bottom-left-radius: 4px;
    color: var(--danger);
}
.nia-error-title  { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.nia-error-msg    { font-size: 12.5px; opacity: 0.9; margin-bottom: 10px; }
.nia-error-retry  {
    background: var(--danger); color: #fff; border: none;
    padding: 6px 12px; font-size: 12.5px; font-weight: 500;
    border-radius: var(--radius-xs); cursor: pointer;
}
.nia-error-retry:hover { opacity: 0.9; }

/* ============================================================
   Persona Nexa · avatar component
   ============================================================
   Base para TODOS los avatares del chat (header, mini en mensajes,
   empty state, thinking). Ver docs/md/20260418_persona_nexa.md.

   Comportamiento:
   · <div class="nia-nexa-avatar" style="width:Xpx;height:Xpx"><img/></div>
   · Si la img falla a cargar, el JS agrega .nia-avatar-fallback y usa
     data-initials como fallback (rueda con la inicial).
   ============================================================ */
.nia-nexa-avatar {
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--panel-2);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.nia-nexa-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Fallback a iniciales si la imagen no carga */
.nia-nexa-avatar.nia-avatar-fallback::after {
    content: attr(data-initials);
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #7dd3fc));
    color: white; font-weight: 600;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: calc(50% + 6px);
}

/* Mini-avatar al costado de cada mensaje del asistente.
   Layout: grid con avatar izquierda + bubble derecha; los demás
   elementos (steps, meta, actions) se alinean con el bubble. */
.nia-message-wrap.assistant {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 8px;
    align-items: flex-start;
}
.nia-message-wrap.assistant > .nia-message-avatar {
    grid-row: 1;
    grid-column: 1;
    margin-top: 2px;
}
.nia-message-wrap.assistant > *:not(.nia-message-avatar) {
    grid-column: 2;
}
/* Mensajes del usuario: sin avatar (como WhatsApp, Slack, etc.) */
.nia-message-wrap.user > .nia-message-avatar { display: none; }

/* ============================================================
   Thinking indicator · "Nexa está pensando…"
   Reemplaza al skeleton genérico. Tres dots rebotan con staggered.
   ============================================================ */
.nia-skeleton.nia-thinking {
    flex-direction: row;
    align-items: center;
    background: transparent;
    border: none;
    padding: 2px 0;
    gap: 10px;
    max-width: none;
}
.nia-thinking-content {
    display: flex; align-items: center; gap: 8px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-bottom-left-radius: 4px;
    padding: 10px 14px;
    font-size: 13px; color: var(--text-dim);
    /* Sin itálico · se leía como "nota de sistema" en vez de
       "persona pensando". Más humano sin decoración. */
}
.nia-thinking-text::after {
    /* Puntos suspensivos decorativos alineados con las dots animadas */
    content: "";
}
.nia-thinking-dots {
    display: inline-flex; gap: 4px;
}
.nia-thinking-dots i {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    animation: nia-thinking-bounce 1.3s infinite ease-in-out;
}
.nia-thinking-dots i:nth-child(2) { animation-delay: 0.15s; }
.nia-thinking-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes nia-thinking-bounce {
    0%, 80%, 100% { opacity: 0.35; transform: scale(0.8); }
    40%           { opacity: 1;    transform: scale(1.1); }
}

/* ============================================================
   Empty state · AI-Native · avatar + greeting + starters
   ============================================================
   Sin margin auto — eso hacía que cuando el contenido (briefing cards
   + hints + chips) excedía el alto del messages container, el scroll
   se rompía porque el margin intentaba centrar. Ahora el empty-state
   fluye naturalmente dentro del scroll del container, padding arriba
   y abajo para respiro visual.
   ============================================================ */
.nia-empty-state {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;                      /* centra horizontal, no vertical */
    text-align: center;
    padding: 32px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    /* Permite que el contenido empuje el scroll del container padre */
    flex-shrink: 0;
}
/* Avatar 88px · más compacto · AI-Native widget · evita que el empty-state
   desborde cuando hay briefing cards + hints + chips arriba. */
.nia-empty-avatar {
    width: 88px !important;
    height: 88px !important;
    margin: 0 auto 14px;
    border: 3px solid var(--surface, var(--panel));
    box-shadow: 0 0 0 1px var(--border),
                0 6px 20px -8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.nia-empty-avatar.nia-avatar-fallback::after {
    font-size: 34px;
}
.nia-empty-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    color: var(--text);
}
.nia-empty-subtitle {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 0 0 18px;
    max-width: 280px;
}

/* ============================================================
   Chip system unificado
   ============================================================
   Un único componente para starters, followups y alert-chips. El DS
   dice botones = 10px radius. Antes había tres estilos distintos (8px,
   14px, 999px) y el widget se sentía construido por gente distinta.
   ============================================================ */
/* Chip unificado · AI-Native · context cards con border-left accent */
.nia-chip,
.nia-starter,
.nia-followup,
.nia-alert-chip {
    border: 1px solid var(--border);
    background: var(--panel-2);               /* elevated · más contraste vs canvas */
    color: var(--text);
    padding: 10px 14px;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    transition: border-color var(--duration-fast) var(--ease-expo-out),
                background var(--duration-fast) var(--ease-expo-out),
                transform var(--duration-fast) var(--ease-expo-out),
                box-shadow var(--duration-fast) var(--ease-expo-out);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.nia-chip:hover,
.nia-starter:hover,
.nia-followup:hover,
.nia-alert-chip:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
    color: var(--text);
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.nia-chip:active,
.nia-starter:active,
.nia-followup:active,
.nia-alert-chip:active {
    transform: scale(0.98);
}

/* Layout de empty state starters · stack vertical, AI-Native gap.
   · Título pequeño "Preguntas rápidas" arriba da contexto
   · Chips compactas (no cards grandes) · iconos a la izq, texto a derecha
   · Máximo 3 chips · el briefing ya dio la info importante */
.nia-starters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}
.nia-starters::before {
    content: "Preguntas rápidas";
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
    padding-left: 4px;
    margin-bottom: 2px;
}
/* Si el container está vacío tras dedup, ocultar el header también */
.nia-starters:not(:has(.nia-starter))::before { display: none; }
.nia-starters .nia-starter {
    width: 100%;
    justify-content: flex-start;
    padding: 9px 12px;
    font-size: 13px;
    border-left: 3px solid transparent;
    transition: border-color var(--duration-fast) var(--ease-expo-out),
                background var(--duration-fast) var(--ease-expo-out);
}
.nia-starters .nia-starter:hover {
    border-left-color: var(--accent);
}
/* Variante alerta crítica */
.nia-starters .nia-starter.is-alert {
    border-left-color: var(--danger);
}
.nia-starters .nia-starter.is-warn {
    border-left-color: var(--warn);
}

/* ============================================================
   Empty state · grid 2x2 cards (v3)
   ============================================================
   4 cards con icon + título + descripción. Más descubribilidad que
   chips planos · cada card vende su valor en 1 línea. En mobile cae
   a 1 columna. Si _fetchDynamicSuggestions inyecta chips, el container
   pasa a .nia-starters (stack vertical chips). */
.nia-starter-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    margin: 4px auto 0;
}
.nia-starter-card {
    appearance: none;
    cursor: pointer;
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 14px 12px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: left;
    color: var(--text);
    transition: border-color var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                background var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                transform var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                box-shadow var(--duration-fast, 150ms) var(--ease-expo-out, ease-out);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.nia-starter-card:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 30%, transparent);
    transform: translateY(-1px);
}
.nia-starter-card:active { transform: translateY(0) scale(0.99); }
.nia-starter-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.nia-starter-card-icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 4px;
}
.nia-starter-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
}
.nia-starter-card-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* F3.1 · línea con datos vivos en cards (poblada async por liveProbe) */
.nia-starter-card-live {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent);
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    align-self: flex-start;
    animation: nia-fade-in 240ms var(--ease-expo-out, ease-out);
}
@keyframes nia-fade-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 520px) {
    .nia-starter-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .nia-starter-card { padding: 12px 14px 10px; }
}

/* Followups · pills más compactas debajo de respuestas */
.nia-followups {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 4px;
}
.nia-followups .nia-followup {
    padding: 5px 10px;
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 500;
}
.nia-followups .nia-followup:hover {
    color: var(--text);
}

/* ============================================================
   Rich cards (Intercom-style, para futuro messaging.prepare)
   ============================================================ */
.nia-card {
    align-self: flex-start;
    max-width: 85%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.nia-card-header {
    padding: 10px 14px;
    background: var(--panel-3);
    border-bottom: 1px solid var(--border);
    font-weight: 600; font-size: 13px;
    display: flex; align-items: center; gap: 8px;
}
.nia-card-body {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text);
    display: flex; flex-direction: column; gap: 8px;
}
.nia-card-kv {
    display: flex; gap: 8px; font-size: 12.5px;
}
.nia-card-kv dt { color: var(--text-muted); min-width: 96px; }
.nia-card-kv dd { margin: 0; color: var(--text); }
.nia-card-actions {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--panel);
    display: flex; gap: 8px; flex-wrap: wrap;
}
.nia-card-btn {
    padding: 8px 14px;
    border-radius: var(--radius-xs);
    font-weight: 500; font-size: 12.5px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    transition: all 0.15s;
    font: inherit;
}
.nia-card-btn:hover { border-color: var(--accent); }

/* ── Operations snapshot · tarjetas por sucursal (reemplaza la tabla ancha
   que requería scroll lateral en el widget angosto) ───────────────────── */
.nia-ops-card { max-width: 100%; width: 100%; }
.nia-ops-summary {
    padding: 8px 14px;
    font-size: 12px; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.nia-ops-company { padding: 8px 10px 2px; }
.nia-ops-company-name {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-muted);
    padding: 4px 4px 6px;
}
.nia-ops-branch {
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 8px 10px; margin-bottom: 6px;
    background: var(--panel);
}
.nia-ops-branch.crit { border-left-color: #ef4444; }
.nia-ops-branch.warn { border-left-color: #f59e0b; }
.nia-ops-branch.ok   { border-left-color: #10b981; }
.nia-ops-branch.idle { border-left-color: var(--border); opacity: .7; }
.nia-ops-branch-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
}
.nia-ops-branch-name { font-weight: 600; font-size: 13px; color: var(--text); }
.nia-ops-badge {
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.nia-ops-badge.crit { background: rgba(239,68,68,.14); color: #ef4444; }
.nia-ops-badge.warn { background: rgba(245,158,11,.16); color: #d97706; }
.nia-ops-badge.ok   { background: rgba(16,185,129,.14); color: #059669; }
.nia-ops-badge.idle { background: var(--panel-3); color: var(--text-muted); }
.nia-ops-metrics {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    font-size: 12px; color: var(--text-muted);
}
.nia-ops-metrics b { color: var(--text); font-weight: 600; }
.nia-card-btn.primary {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.nia-card-btn.primary:hover { background: var(--accent-hover); }
.nia-card-btn.danger {
    background: var(--danger); color: #fff; border-color: var(--danger);
}

/* ============================================================
   Jump pill + composer + footnote + banner
   ============================================================ */
.nia-jump {
    position: absolute; right: 16px; bottom: 110px;
    background: var(--accent); color: white;
    border: none; padding: 6px 12px;
    border-radius: 14px; cursor: pointer;
    font-size: 12px; font-weight: 500;
    box-shadow: var(--shadow);
    display: none; align-items: center; gap: 4px;
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.15s, transform 0.15s;
    z-index: 5;
}
.nia-jump.visible { display: inline-flex; opacity: 1; transform: translateY(0); }
.nia-jump:hover   { background: var(--accent-hover); }

/* Composer · v3 · gradient fade-up arriba del composer para que el
   último mensaje "se hunda" suavemente bajo el input y se sienta como
   herramienta (no como formulario). El gradient es decorativo y vive
   sobre el composer con un pseudo-element. */
.nia-composer {
    border-top: 1px solid var(--border);
    padding: 12px 14px 14px;
    background: var(--panel-2);
    flex-shrink: 0;
    position: relative;
}
.nia-composer::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -24px;
    height: 24px;
    background: linear-gradient(to bottom,
        transparent 0%,
        color-mix(in srgb, var(--panel-2) 0%, transparent) 0%,
        color-mix(in srgb, var(--panel-2) 70%, transparent) 60%,
        var(--panel-2) 100%);
    pointer-events: none;
    z-index: 1;
}
.nia-composer-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: var(--composer-bg);
    border: 1px solid var(--composer-border);
    border-radius: var(--radius);
    padding: 6px 6px 6px 12px;
    transition: border-color var(--duration-fast) var(--ease-expo-out),
                box-shadow var(--duration-fast) var(--ease-expo-out);
}
.nia-composer-row:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.nia-textarea {
    flex: 1;
    resize: none;
    background: transparent;
    color: var(--text);
    border: none;
    padding: 8px 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    min-height: 32px;
    max-height: 140px;
}
.nia-textarea::placeholder { color: var(--text-muted); }

/* Send button · v3 protagonista
   · Empty state: ghost (border accent, sin fill) · sutil
   · With text: solid accent · llamativo
   · Loading/stop: variante danger
   · Hover: brillito + leve scale up */
.nia-send-btn {
    background: var(--accent);
    color: white;
    border: 1px solid var(--accent);
    border-radius: calc(var(--radius) - 2px);
    padding: 9px 14px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    min-width: 72px;
    min-height: 36px;
    transition: background var(--duration-fast) var(--ease-expo-out),
                transform var(--duration-fast) var(--ease-expo-out),
                box-shadow var(--duration-fast) var(--ease-expo-out),
                border-color var(--duration-fast) var(--ease-expo-out),
                color var(--duration-fast) var(--ease-expo-out);
    flex-shrink: 0;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.nia-send-btn:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 50%, transparent);
    transform: translateY(-1px);
}
.nia-send-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.nia-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}
/* Empty composer (sin texto) · ghost subtle */
.nia-composer-row:not(.has-text) .nia-send-btn:not(.stop) {
    background: transparent;
    color: var(--text-dim);
    border-color: var(--border);
    box-shadow: none;
}
.nia-composer-row:not(.has-text) .nia-send-btn:not(.stop):hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    transform: none;
}
.nia-send-btn.stop           { background: var(--danger); border-color: var(--danger); box-shadow: none; }
.nia-send-btn.stop:hover     { background: color-mix(in srgb, var(--danger) 85%, #000); }

.nia-footnote {
    margin-top: 6px;
    text-align: center;
    font-size: 10.5px;
    color: var(--text-muted);
}

.nia-banner {
    margin: 12px 16px 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    border: 1px solid;
}
.nia-banner.warn  { background: var(--warn-soft);   color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.nia-banner.error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* ============================================================
   Standalone / embed layouts
   ============================================================ */
body.nia-standalone {
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
body.nia-standalone .nia-chat {
    max-width: 720px;
    height: calc(100vh - 48px);
    box-shadow: var(--shadow);
}

body.nia-embed { background: transparent; }
body.nia-embed .nia-chat {
    height: 100vh; border-radius: 0; border: none;
}

/* ============================================================
   Tanda 3: slash commands / artifacts panel / export / compact
   ============================================================ */

/* ---------- Slash commands dropdown ---------- */
.nia-slash-menu {
    position: absolute;
    left: 12px; right: 12px;
    bottom: calc(100% + 4px);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    max-height: 240px;
    overflow-y: auto;
    z-index: 12;
    display: none;
    padding: 4px;
}
.nia-slash-menu.open { display: block; }
.nia-composer { position: relative; }
.nia-slash-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: var(--radius-xs);
    color: var(--text);
    font-size: 13px;
}
.nia-slash-item:hover,
.nia-slash-item.active { background: var(--panel-2); }
.nia-slash-cmd {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-ink);
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    min-width: 64px; text-align: center;
}
.nia-slash-desc {
    color: var(--text-dim);
    font-size: 12px;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Export menu (dropdown en header) ---------- */
.nia-popover {
    position: absolute;
    top: calc(100% + 4px);
    right: 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    z-index: 15;
    display: none;
    padding: 4px;
    min-width: 200px;
}
.nia-popover.open { display: block; }
.nia-popover-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: var(--radius-xs);
    color: var(--text);
    font-size: 13px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.nia-popover-item:hover { background: var(--panel-2); }
.nia-popover-item svg { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; }
.nia-popover-divider {
    height: 1px; background: var(--border-soft);
    margin: 4px 0;
}

.nia-header { position: relative; }

/* ---------- Open in panel button ---------- */
.nia-open-panel {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--panel-3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    font-size: 11.5px;
    cursor: pointer;
    margin-top: 6px;
    font-family: inherit;
    transition: all 0.15s;
}
.nia-open-panel:hover {
    border-color: var(--accent);
    color: var(--accent-ink);
}
.nia-open-panel svg { width: 12px; height: 12px; }

/* ---------- Artifacts panel lateral ---------- */
.nia-artifact-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 55%; min-width: 320px; max-width: 640px;
    background: var(--panel);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 18;
    display: flex; flex-direction: column;
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.2);
}
.nia-artifact-panel.open { transform: translateX(0); }

.nia-artifact-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
    min-height: 48px;
}
.nia-artifact-title { flex: 1; font-size: 13px; font-weight: 600; }
.nia-artifact-badge {
    font-family: var(--font-mono); font-size: 10px;
    padding: 2px 6px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nia-artifact-body {
    flex: 1; overflow: auto;
    padding: 14px 16px;
    background: var(--panel);
}
.nia-artifact-body .nia-code-block { margin: 0; }
.nia-artifact-body pre {
    font-size: 13px;
    white-space: pre;
}
.nia-artifact-body table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}
.nia-artifact-body th, .nia-artifact-body td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
}
.nia-artifact-body th {
    background: var(--panel-2);
    font-weight: 600;
}

/* ---------- Compact mode (< 420px de ancho útil) ---------- */
@media (max-width: 420px) {
    .nia-chat { border-radius: 0; }
    .nia-subtitle        { display: none; }
    .nia-header          { padding: 10px 8px; gap: 6px; }
    .nia-avatar          { width: 28px; height: 28px; font-size: 12px; }
    .nia-title           { font-size: 13px; }
    .nia-status-label    { display: none; }
    .nia-icon-btn        { padding: 4px 6px; min-width: 28px; min-height: 28px; }
    .nia-messages        { padding: 10px; gap: 10px; }
    .nia-message         { max-width: 92%; padding: 9px 12px; font-size: 13px; }
    .nia-composer        { padding: 8px 10px 10px; }
    .nia-send-btn        { min-width: 56px; padding: 10px 10px; font-size: 13px; }
    .nia-textarea        { font-size: 14px; /* evita zoom iOS */ }
    .nia-footnote        { display: none; }
    .nia-artifact-panel  { width: 100%; min-width: 0; max-width: none; }
    .nia-sidebar         { width: 100%; }
}

/* ============================================================
   Alerts · Fase 2 · badge + inline alerts (sin banners)
   ============================================================
   Los banners slide-in desaparecieron (molestaban). Ahora:
   · Crítica/high → Nexa la trae como mensaje proactivo inline
     (ver `.nia-message-wrap.is-proactive` + `.nia-inline-alert`)
   · Warn/info → solo el badge del header
   ============================================================ */

.nia-alert-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nia-alert-badge-count {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 14px; height: 14px;
    padding: 0 3px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 7px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border: 1.5px solid var(--panel-2);
    /* Clickeable · abre la bandeja lateral de alertas */
    cursor: pointer;
    animation: nia-badge-pulse 2s ease-in-out infinite;
    transition: transform 0.1s;
}
.nia-alert-badge-count:hover { transform: scale(1.2); }
.nia-alert-badge-count:active { transform: scale(0.95); }
@keyframes nia-badge-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* ---------- Mensaje proactivo de Nexa (alerta inline) ----------
   Usa la misma estructura que un mensaje del asistente (avatar + bubble)
   pero con pequeñas señales visuales que indican que Nexa "trajo" esto:
   · header corto en itálica ("Vi algo que querés revisar:")
   · card interna con color por severity
   · chips de acción (no llena el textarea, ejecuta directo)
*/
.nia-message-wrap.is-proactive .nia-message.assistant {
    padding-top: 10px;
}
.nia-proactive-greeting {
    font-size: 12px;
    font-style: italic;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.nia-inline-alert {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--panel-2);
}
.nia-inline-alert.is-critical {
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    background: var(--danger-soft);
}
.nia-inline-alert.is-high {
    border-color: color-mix(in srgb, var(--warn) 45%, transparent);
    background: var(--warn-soft);
}
.nia-inline-alert.is-warn {
    border-color: color-mix(in srgb, var(--warn) 35%, transparent);
    background: color-mix(in srgb, var(--warn-soft) 65%, var(--panel-2));
}

.nia-inline-alert-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.nia-inline-alert-icon {
    font-size: 15px;
    flex-shrink: 0;
}
.nia-inline-alert-title {
    font-weight: 600; font-size: 13px;
    color: var(--text);
    line-height: 1.3;
}
.nia-inline-alert-msg {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.4;
    margin-top: 2px;
}

.nia-inline-alert-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
}
/* Alert-chip · hereda del chip unificado, solo override de contexto */
.nia-alert-chip {
    background: var(--panel);   /* más brillante que panel-2 para contrastar con card de alerta */
    padding: 6px 10px;
    font-size: 12px;
}
.nia-alert-chip.is-dismiss {
    background: transparent;
    color: var(--text-dim);
    border-color: transparent;
}
.nia-alert-chip.is-dismiss:hover {
    color: var(--text);
    background: var(--panel-3, var(--panel-2));
    border-color: transparent;
}

/* Estados · cuando se acciona o se descarta */
.nia-message-wrap.is-proactive.is-handled .nia-inline-alert-actions {
    opacity: 0.5; pointer-events: none;
}
.nia-message-wrap.is-proactive.is-dismissed {
    opacity: 0;
    transition: opacity 0.2s;
}

/* ============================================================
   UI mode: botón "Ver detalles" (modo hybrid)
   ============================================================ */
.nia-details-toggle {
    margin-top: 2px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 10.5px;
    cursor: pointer;
    padding: 2px 6px;
    font-family: var(--font-mono);
    border-radius: 4px;
    align-self: flex-start;
    transition: color 0.15s, background 0.15s;
}
.nia-details-toggle:hover { color: var(--text); background: var(--panel-3); }
.nia-details-toggle.open  { color: var(--accent-ink); }

html[data-ui-mode="conversational"] .nia-footnote { display: none; }

/* ============================================================
   Fase 4: knowledge upload (📎)
   ============================================================ */

.nia-attach-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    padding: 10px 10px;
    cursor: pointer;
    font-size: 13.5px;
    min-width: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.nia-attach-btn:hover { border-color: var(--accent); color: var(--accent); }
.nia-attach-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nia-attach-btn svg { width: 16px; height: 16px; }
.nia-attach-btn.loading svg { animation: nia-spin 1s linear infinite; }
.nia-attach-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.nia-hidden-file-input { display: none; }

.nia-doc-banner {
    margin: 8px 12px 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    display: flex; gap: 10px; align-items: center;
    animation: nia-slide-in 0.2s ease;
}
.nia-doc-banner.ok     { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.nia-doc-banner.error  { border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
.nia-doc-banner-icon   { flex-shrink: 0; width: 18px; height: 18px; color: var(--text-dim); }
.nia-doc-banner.ok    .nia-doc-banner-icon { color: var(--ok); }
.nia-doc-banner.error .nia-doc-banner-icon { color: var(--danger); }
.nia-doc-banner-body   { flex: 1; min-width: 0; }
.nia-doc-banner-title  { font-weight: 600; font-size: 13px; }
.nia-doc-banner-sub    { font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
.nia-doc-progress {
    height: 4px; border-radius: 2px;
    background: var(--panel-3); overflow: hidden;
    margin-top: 6px;
}
.nia-doc-progress > span {
    display: block; height: 100%;
    background: var(--accent);
    transition: width 0.2s;
    width: 30%;
    animation: nia-indeterminate 1.3s linear infinite;
}
@keyframes nia-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(330%); }
}
.nia-doc-banner.ok .nia-doc-progress,
.nia-doc-banner.error .nia-doc-progress { display: none; }
.nia-doc-banner-close {
    background: transparent; border: none; cursor: pointer;
    color: currentColor; font-size: 16px; opacity: 0.6;
}
.nia-doc-banner-close:hover { opacity: 1; }

/* ---------- Kbd hint badges ---------- */
.nia-kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--panel-3);
    color: var(--text-muted);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
    margin-left: auto;
}

/* Scrollbar */
.nia-messages::-webkit-scrollbar,
.nia-sidebar-list::-webkit-scrollbar,
.nia-slash-menu::-webkit-scrollbar,
.nia-artifact-body::-webkit-scrollbar { width: 8px; }
.nia-messages::-webkit-scrollbar-thumb,
.nia-sidebar-list::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 4px;
}
.nia-messages::-webkit-scrollbar-thumb:hover,
.nia-sidebar-list::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--border) 50%, var(--text-muted)); }

/* A11y: visually-hidden para labels */
.nia-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Fase 3 · quick-tool card (respuesta inline sin LLM)
   ============================================================
   Cuando un chip de alerta ejecuta una tool directa (kind=tool), el
   resultado se renderiza como una mini-card debajo de la alerta.
   Sin costo de tokens, respuesta instantánea.
   ============================================================ */
.nia-quick-card {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--panel-1, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    animation: nia-fade-in 0.2s ease;
}
.nia-quick-card.is-loading {
    opacity: 0.7;
    font-style: italic;
    color: var(--text-dim);
}
.nia-quick-card.is-error {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    color: var(--danger);
}
.nia-quick-card-title {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 6px;
    color: var(--text);
}
.nia-quick-card-body {
    color: var(--text);
    line-height: 1.4;
}
.nia-quick-kv {
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}
.nia-quick-kv-header {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    margin-bottom: 2px;
}
.nia-quick-kv-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    border-bottom: 1px dashed var(--line-soft, var(--border));
}
.nia-quick-kv-row:last-child { border-bottom: none; }
.nia-quick-kv-row dt {
    color: var(--text-dim);
    font-weight: 400;
}
.nia-quick-kv-row dd {
    margin: 0;
    font-weight: 500;
    color: var(--text);
    text-align: right;
}

@keyframes nia-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Fase 3 · bandeja lateral de alertas activas
   ============================================================
   Reutiliza `.nia-artifact-panel` (panel lateral existente) con
   `data-tray="alerts"` para distinguir. Cada item tiene las mismas
   chips que un mensaje inline.
   ============================================================ */
.nia-tray-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
}

.nia-tray-item {
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--panel-2);
    transition: opacity 0.18s;
}
.nia-tray-item.is-critical {
    border-left-color: var(--danger);
    background: var(--danger-soft);
}
.nia-tray-item.is-high {
    border-left-color: var(--warn);
    background: var(--warn-soft);
}
.nia-tray-item.is-warn {
    border-left-color: var(--warn);
}

.nia-tray-item-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.nia-tray-item-icon { font-size: 14px; flex-shrink: 0; }
.nia-tray-item-title {
    flex: 1;
    font-weight: 600; font-size: 13px;
    color: var(--text);
    line-height: 1.3;
}
.nia-tray-item-close {
    background: transparent; border: none;
    color: var(--text-dim); cursor: pointer;
    padding: 0 4px; font-size: 16px; line-height: 1;
    opacity: 0.5;
}
.nia-tray-item-close:hover { opacity: 1; color: var(--text); }

.nia-tray-item-msg {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.4;
    margin-bottom: 8px;
}
.nia-tray-item-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
}

/* Footer de la quick card · freshness o nota del top issue */
.nia-quick-kv-footer {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--line-soft, var(--border));
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
}

/* Lista para resultados de knowledge_search */
.nia-quick-list {
    margin: 0; padding: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: 8px;
}
.nia-quick-list li {
    padding: 8px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
}
.nia-quick-list-title {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 2px;
    color: var(--text);
}
.nia-quick-list-snippet {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* ============================================================
   Briefing · cards al abrir el chat (panorama operativo)
   ============================================================
   Migrado desde briefing.js (hardcoded dark-only, azul sky prohibido).
   Ahora usa tokens del DS y funciona en ambos temas.
   ============================================================ */
.nia-briefing {
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
    padding: 12px 16px 10px;
    max-height: 280px;
    overflow-y: auto;
    flex-shrink: 0;
}
.nia-briefing-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.nia-briefing-title { font-weight: 600; }
.nia-briefing-refresh {
    background: none; border: none;
    color: var(--text-dim);
    cursor: pointer; font-size: 14px;
    padding: 2px 6px; border-radius: var(--radius-xs);
    transition: background 0.12s, color 0.12s;
}
.nia-briefing-refresh:hover {
    background: var(--panel-3, var(--border-soft));
    color: var(--text);
}
.nia-briefing-cards { display: flex; flex-direction: column; gap: 6px; }
.nia-briefing-loading {
    color: var(--text-dim); font-size: 12px; padding: 8px 0;
}
.nia-briefing-card {
    display: flex; gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    background: var(--panel);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.nia-briefing-card:hover {
    background: var(--panel-3, var(--panel-2));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.nia-briefing-card.sev-info     { border-left-color: var(--accent); }
.nia-briefing-card.sev-warning  { border-left-color: var(--warn); }
.nia-briefing-card.sev-critical {
    border-left-color: var(--danger);
    background: var(--danger-soft);
}
.nia-briefing-card.sev-success  { border-left-color: var(--ok); }
.nia-briefing-card .nia-card-body { flex: 1; min-width: 0; }
.nia-briefing-card .nia-card-title {
    font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 2px;
}
.nia-briefing-card .nia-card-badge {
    font-size: 10px; padding: 2px 6px; border-radius: 10px;
    background: var(--panel-2);
    color: var(--text-dim);
    border: 1px solid var(--border);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}
.nia-briefing-card .nia-card-text {
    color: var(--text-dim); font-size: 12.5px;
}
.nia-briefing-card .nia-card-text strong { color: var(--text); }
.nia-briefing-card .nia-card-action {
    font-size: 11px;
    color: var(--accent);
    margin-top: 4px;
    font-weight: 500;
}
.nia-briefing-empty {
    color: var(--text-dim); font-size: 12px;
    padding: 10px; text-align: center;
}

/* ============================================================
   Provenance row · freshness + tools usadas (siempre visible)
   ============================================================
   Genera confianza · el supervisor ve "datos hace 2min · 📊 Cola"
   debajo de cada respuesta, sin tener que entrar a modo rich.
   ============================================================ */
.nia-provenance {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
}
.nia-prov-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--text-dim);
    border: 1px solid var(--border-soft, var(--border));
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
.nia-prov-chip.is-stale {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 45%, transparent);
    background: var(--warn-soft);
}

/* ============================================================
   Privacy badge · en subtitle del header
   ============================================================
   Señal institucional: "tu conversación queda en tu organización".
   Importante para supervisores de clínicas que la primera vez
   prueban el chat y desconfían de "dónde van mis datos".
   ============================================================ */
.nia-privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ok-soft);
    color: var(--ok);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
    cursor: help;
    line-height: 1;
}
.nia-privacy-badge svg {
    width: 10px;
    height: 10px;
}
/* Tooltip nativo más legible · soportamos `data-tooltip` además del `title`
   nativo, que es lento y feo. El badge tiene cursor:help ya configurado. */
.nia-privacy-badge[data-tooltip] { position: relative; }
.nia-privacy-badge[data-tooltip]:hover::after,
.nia-privacy-badge[data-tooltip]:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-2, #0d0f14);
    color: var(--fg, #fff);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    z-index: 30;
    text-align: left;
    cursor: default;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
    animation: fadeIn .15s ease;
}
/* Esconder en anchos muy angostos (iframe móvil) para no romper el header */
@media (max-width: 360px) {
    .nia-privacy-badge span { display: none; }
}

/* Char count en el footer del composer · sólo aparece >200 chars */
.nia-char-count {
    margin-left: 10px;
    font-size: 10px;
    color: var(--muted, #888);
    font-variant-numeric: tabular-nums;
}
.nia-char-count.is-warn { color: var(--warn, #d4a72c); }
.nia-char-count.is-over { color: var(--negative, #d9534f); font-weight: 600; }

/* G · Stop button icon · mini cuadrado blanco visible dentro del btn "Detener" */
.nia-stop-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 1px;
    margin-right: 6px;
    vertical-align: middle;
}

/* K · Blockquotes y footnotes del LLM */
.md-quote {
    margin: 6px 0;
    padding: 6px 12px;
    border-left: 3px solid var(--accent, #6366f1);
    background: var(--bg-2, rgba(255,255,255,0.02));
    color: var(--muted, #aaa);
    font-style: italic;
    border-radius: 2px;
}
.md-fn {
    color: var(--accent, #6366f1);
    font-weight: 600;
    cursor: help;
    margin: 0 1px;
}

/* H · Dashboard link chip · "Ver en dashboard →" después del bubble */
.nia-dashboard-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0 4px 36px;
    padding: 5px 11px;
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--accent, #6366f1);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.nia-dashboard-link:hover {
    background: var(--surface-2);
    transform: translateX(2px);
}

/* N · Sparkline inline arriba de las tablas · SVG simple */
.nia-sparkline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 -4px;
    padding: 4px 6px;
    background: rgba(255,255,255,0.015);
    border-radius: 4px;
}
.nia-sparkline svg {
    flex-shrink: 0;
}
.nia-spark-label {
    font-size: 10px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* L · theme btn "auto" indicator · sutil outline pulsante */
.nia-theme-btn.is-auto {
    box-shadow: inset 0 0 0 1px var(--accent, #6366f1);
    border-radius: 999px;
}

/* Tool step contador "× 3" · cuando el LLM repite la misma tool */
.nia-tool-count {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: var(--muted);
    background: var(--bg-2);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
/* Freshness stale · texto rojizo + tooltip al hover */
.nia-tool-latency.is-stale,
.nia-tag.freshness.is-stale {
    color: var(--negative, #d9534f);
    font-weight: 500;
}

/* Timestamps relativos al lado de cada mensaje · pequeño, gris, monoespaciado */
.nia-msg-ts {
    font-size: 10px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin: 0 8px;
    align-self: center;
    opacity: 0.65;
    transition: opacity 0.2s;
}
.nia-message-wrap:hover .nia-msg-ts { opacity: 1; }

/* Chip starter en modo "empty hint" · KB vacío · opacidad sutil + dashed */
.nia-starter.is-disabled-hint {
    opacity: 0.72;
    border-style: dashed;
}
.nia-starter.is-disabled-hint:hover { opacity: 1; }

/* Markdown rich · respuestas LLM · tablas con scroll horizontal en mobile,
   bordes legibles, header contrastado. Usa `!important` porque hay reset
   global que pone `border: 0` a tablas con menor especificidad pero más
   prioridad por orden de carga. */
.nia-message.assistant table,
.nia-bubble table,
.nia-msg .bubble table {
    border-collapse: collapse !important;
    width: max-content;
    max-width: 100%;
    font-size: 12.5px;
    margin: 8px 0;
}
.nia-message.assistant table th,
.nia-message.assistant table td,
.nia-bubble table th,
.nia-bubble table td,
.nia-msg .bubble table th,
.nia-msg .bubble table td {
    border: 1px solid var(--border, #2a2f3a) !important;
    padding: 5px 8px !important;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.nia-message.assistant table th,
.nia-bubble table th,
.nia-msg .bubble table th {
    background: var(--bg-2, #14171f) !important;
    font-weight: 600;
    color: var(--fg, #fff);
}
.nia-message.assistant table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}
/* Wrapper de scroll horizontal para tablas largas · evita romper el bubble */
.nia-message.assistant .md-table-wrap,
.nia-bubble .md-table-wrap,
.nia-msg .bubble .md-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ============================================================
   Connection pill · feedback sutil de estado de SSE
   ============================================================
   Aparece solo cuando hay algo que comunicar (reconectando, offline,
   recovered). En estado estable queda invisible — no ensucia el chrome.
   ============================================================ */
.nia-conn-pill {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    z-index: 15;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: var(--shadow);
    animation: nia-conn-pill-in 0.18s ease;
}
@keyframes nia-conn-pill-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.nia-conn-pill.is-reconnecting {
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.nia-conn-pill.is-reconnecting::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--warn);
    margin-right: 6px;
    animation: nia-pulse 1.1s infinite;
    vertical-align: middle;
}
.nia-conn-pill.is-offline {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}
.nia-conn-pill.is-offline::before {
    content: "⚠ ";
}
.nia-conn-pill.is-recovered {
    background: var(--ok-soft);
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
    animation: nia-conn-pill-in 0.18s ease, nia-conn-pill-out 0.3s ease 1.9s forwards;
}
@keyframes nia-conn-pill-out {
    to { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}
.nia-conn-pill.is-recovered::before {
    content: "✓ ";
    font-weight: 700;
}

/* ============================================================
   Micro-celebration · cuando la respuesta llega con datos
   ============================================================
   Signature moment sutil: un pulse suave en la provenance row
   cuando Nexa trajo datos reales (al menos 1 tool usada). No es
   una fanfare — es un "✓" silencioso que confirma que cerró bien.
   ============================================================ */
.nia-message-wrap.is-completed-with-data .nia-provenance {
    animation: nia-celebrate-provenance 1.2s ease;
}
@keyframes nia-celebrate-provenance {
    0%   { background: transparent; }
    20%  {
        background: color-mix(in srgb, var(--ok) 15%, transparent);
        border-radius: 8px;
    }
    100% { background: transparent; }
}
.nia-message-wrap.is-completed-with-data .nia-prov-chip:not(.is-stale) {
    animation: nia-celebrate-chip 0.9s ease;
}
@keyframes nia-celebrate-chip {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.03); }
}

/* ============================================================
   Trust · provenance chips clickeables
   ============================================================ */
.nia-prov-chip.is-clickable {
    cursor: pointer;
    border: 1px solid var(--border-soft, var(--border));
    background: var(--panel-2);
    color: var(--text-dim);
    font: inherit;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 500;
    line-height: 1.3;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
}
.nia-prov-chip.is-clickable:hover {
    background: var(--panel-3, var(--panel-2));
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.nia-prov-chip.is-clickable:active { transform: scale(0.97); }

/* Stale ámbar · warning moderado */
.nia-prov-chip.is-clickable.is-stale {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 40%, transparent);
    background: var(--warn-soft);
}
/* Very stale (>10min) · rojo + prominente */
.nia-prov-chip.is-clickable.is-very-stale {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 50%, transparent);
    background: var(--danger-soft);
    font-weight: 600;
    animation: nia-stale-pulse 2.5s ease-in-out infinite;
}
@keyframes nia-stale-pulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
}

/* ============================================================
   Trust · modal de detalle de fuente
   ============================================================ */
.nia-prov-modal-backdrop {
    position: fixed; inset: 0;
    background: color-mix(in srgb, var(--bg) 60%, transparent);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    animation: nia-prov-fade 0.18s ease;
    padding: 20px;
}
@keyframes nia-prov-fade { from { opacity: 0; } to { opacity: 1; } }

.nia-prov-modal {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 440px;
    width: 100%;
    max-height: 80vh;
    display: flex; flex-direction: column;
    animation: nia-prov-slide 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes nia-prov-slide {
    from { transform: translateY(12px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.nia-prov-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--border);
}
.nia-prov-modal-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}
.nia-prov-modal-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
}
.nia-prov-modal-close:hover { background: var(--panel-2); color: var(--text); }

.nia-prov-modal-body {
    padding: 14px 18px 18px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
    font-size: 13px;
}

.nia-prov-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--panel-2);
}
.nia-prov-section.is-warning {
    border-color: color-mix(in srgb, var(--warn) 50%, transparent);
    background: var(--warn-soft);
}
.nia-prov-section-title {
    font-weight: 600;
    font-size: 12px;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.nia-prov-section-body {
    color: var(--text-dim);
    line-height: 1.5;
    font-size: 12.5px;
}
.nia-prov-section-body > div { margin-top: 2px; }
.nia-prov-warning-msg {
    color: var(--warn);
    font-weight: 500;
    margin-top: 6px !important;
}

.nia-prov-tool {
    padding: 8px 10px;
    margin-top: 8px;
    background: var(--panel);
    border: 1px solid var(--border-soft, var(--border));
    border-radius: var(--radius-xs);
}
.nia-prov-tool.is-focused {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.nia-prov-tool-header {
    display: flex; align-items: center; gap: 10px;
}
.nia-prov-tool-icon { font-size: 16px; }
.nia-prov-tool-title { flex: 1; }
.nia-prov-tool-title > div:first-child {
    font-weight: 600; color: var(--text); font-size: 12.5px;
}
.nia-prov-tool-sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted, var(--text-dim));
    margin-top: 2px;
}
.nia-prov-tool-latency {
    font-size: 10.5px;
    color: var(--text-dim);
    background: var(--panel-2);
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.nia-prov-tool-details {
    margin-top: 6px;
    font-size: 11.5px;
}
.nia-prov-tool-details summary {
    cursor: pointer;
    color: var(--text-dim);
    padding: 2px 0;
}
.nia-prov-tool-details summary:hover { color: var(--text); }
.nia-prov-tool-details pre {
    margin: 4px 0 0;
    padding: 8px;
    background: var(--code-bg);
    color: var(--text);
    border-radius: var(--radius-xs);
    font-size: 10.5px;
    overflow-x: auto;
    line-height: 1.4;
}
.nia-prov-tool-error {
    margin-top: 4px;
    color: var(--danger);
    font-size: 11px;
    font-weight: 500;
}

.nia-prov-modal-footer {
    font-size: 11px;
    color: var(--text-muted, var(--text-dim));
    padding: 10px;
    border: 1px dashed var(--border-soft, var(--border));
    border-radius: var(--radius-xs);
    text-align: center;
    font-family: var(--font-mono);
    margin-top: 4px;
}

/* ============================================================
   Compliance · session expiry banner
   ============================================================
   Banner sutil entre header y messages · no bloquea interacción.
   Warning 2min antes + expirado cuando llega el tiempo.
   ============================================================ */
.nia-session-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    animation: nia-session-slide 0.22s ease;
}
@keyframes nia-session-slide {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.nia-session-banner.is-warning {
    background: var(--warn-soft);
    color: var(--warn);
    border-bottom-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
.nia-session-banner.is-expired {
    background: var(--danger-soft);
    color: var(--danger);
    border-bottom-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.nia-session-banner-text { flex: 1; }
.nia-session-banner-action {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 4px 10px;
    border-radius: 999px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.nia-session-banner-action:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.nia-session-banner-close {
    background: transparent; border: none;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
    opacity: 0.6;
}
.nia-session-banner-close:hover { opacity: 1; }

/* ============================================================
   Export PDF button · action con peso extra (feature diferenciador)
   ============================================================
   Se muestra solo en respuestas con datos (tools_called > 0).
   Mantiene consistencia con otras nia-action pero con borde brand
   sutil para invitar al click.
   ============================================================ */
.nia-action.nia-action-pdf {
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    opacity: 0.85;
    transition: background 0.15s, opacity 0.15s, transform 0.08s;
}
.nia-message-wrap:hover .nia-action.nia-action-pdf,
.nia-message-wrap:focus-within .nia-action.nia-action-pdf {
    opacity: 1;
}
.nia-action.nia-action-pdf:hover {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}
.nia-action.nia-action-pdf:active { transform: scale(0.95); }
.nia-action.nia-action-pdf.is-loading {
    opacity: 0.7;
    animation: nia-pdf-spin 1s linear infinite;
}
@keyframes nia-pdf-spin {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
.nia-action.nia-action-pdf.active {
    background: var(--ok-soft);
    border-color: color-mix(in srgb, var(--ok) 55%, transparent);
    color: var(--ok);
}
.nia-action.nia-action-pdf.is-error {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
    color: var(--danger);
}

/* ============================================================
   Briefing cards · resumen vivo al abrir el chat
   ============================================================
   Se insertan al tope del empty state ANTES del avatar/greeting.
   Cada card tiene border-left por severity, hover con accent,
   click ejecuta el prompt asociado para profundizar.
   ============================================================ */
.nia-briefing-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 20px;
    align-self: stretch;
}
.nia-briefing-cards::before {
    content: "Panorama al abrir";
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
    padding-left: 4px;
    margin-bottom: 2px;
    text-align: left;
}
.nia-briefing-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--panel-2);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color var(--duration-fast) var(--ease-expo-out),
                background var(--duration-fast) var(--ease-expo-out),
                transform var(--duration-fast) var(--ease-expo-out);
}
.nia-briefing-card:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    transform: translateX(2px);
}
.nia-briefing-card:active { transform: scale(0.99); }

/* Severity · border-left color */
.nia-briefing-card.is-alert,
.nia-briefing-card.is-critical { border-left-color: var(--danger); }
.nia-briefing-card.is-warn     { border-left-color: var(--warn); }
.nia-briefing-card.is-ok,
.nia-briefing-card.is-success  { border-left-color: var(--ok); }
.nia-briefing-card.is-info     { border-left-color: var(--accent); }
.nia-briefing-card.is-muted    { border-left-color: var(--border-strong, var(--border)); }

.nia-briefing-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nia-briefing-card-icon {
    font-size: 14px;
    flex-shrink: 0;
    width: 18px;
}
.nia-briefing-card-title {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: -0.005em;
    color: var(--text);
}
.nia-briefing-card-body {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.4;
    padding-left: 26px;
}

/* ============================================================
   #7 Optimistic UI · estado del mensaje user
   ============================================================ */
.nia-user-status {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    min-height: 14px;
}
.nia-user-status-icon {
    display: inline-block;
    width: 10px; height: 10px;
}
/* Pending · spinner sutil */
.nia-message-wrap.user.is-pending .nia-user-status-icon {
    border: 1.5px solid color-mix(in srgb, var(--text-dim) 50%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: nia-user-spin 0.8s linear infinite;
}
@keyframes nia-user-spin { to { transform: rotate(360deg); } }
/* Delivered · tick */
.nia-message-wrap.user.is-delivered .nia-user-status-icon::before {
    content: "✓";
    color: var(--ok);
    font-size: 12px;
    line-height: 1;
}
.nia-message-wrap.user.is-sent .nia-user-status-icon::before {
    content: "✓";
    color: var(--text-dim);
    font-size: 12px; line-height: 1;
}
/* Failed · rojo + retry implícito */
.nia-message-wrap.user.is-failed {
    opacity: 0.75;
}
.nia-message-wrap.user.is-failed .nia-user-status-icon::before {
    content: "!";
    color: var(--danger);
    font-weight: 700;
    font-size: 12px; line-height: 1;
}
.nia-message-wrap.user.is-failed .nia-user-status-text {
    color: var(--danger);
}

/* ============================================================
   #10 Keyboard shortcuts overlay
   ============================================================
   Se activa con `?` (Shift + /) · muestra lista de atajos.
   ============================================================ */
.nia-shortcuts-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    animation: nia-prov-fade 0.18s ease;
    padding: 20px;
}
.nia-shortcuts-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-elevation);
    padding: 20px 24px;
    max-width: 380px;
    width: 100%;
}
.nia-shortcuts-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 14px;
    color: var(--text);
}
.nia-shortcuts-list {
    display: flex; flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
}
.nia-shortcuts-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dim);
}
.nia-shortcuts-row kbd {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    padding: 2px 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text);
    margin-left: 4px;
}
.nia-shortcuts-close {
    margin-top: 14px;
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    color: var(--text-dim);
    font: inherit; font-size: 12px;
    cursor: pointer;
}
.nia-shortcuts-close:hover { background: var(--panel-2); color: var(--text); }

/* ============================================================
   #4 Learning loop · feedback prompt post-👎
   ============================================================ */
.nia-feedback-prompt {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-md, 8px);
    background: var(--panel-2);
    animation: nia-prov-fade 0.2s ease;
}
.nia-feedback-prompt.is-closing { opacity: 0; transition: opacity 0.2s; }
.nia-feedback-label {
    display: block;
    font-size: 11.5px;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.nia-feedback-row {
    display: flex;
    gap: 6px;
}
.nia-feedback-input {
    flex: 1;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font: inherit;
    font-size: 12.5px;
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-expo-out);
}
.nia-feedback-input:focus { border-color: var(--accent); }
.nia-feedback-submit {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-expo-out);
}
.nia-feedback-submit:hover { background: var(--accent-hover); }
.nia-feedback-skip {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
    padding: 0 8px;
    cursor: pointer;
}
.nia-feedback-skip:hover { color: var(--text); }
.nia-feedback-thanks {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--ok);
    animation: nia-prov-fade 0.2s ease;
}

/* ============================================================
   #3 Share · botón + popover
   ============================================================ */
.nia-action.nia-action-share {
    /* Comportamiento de nia-action base */
    transition: color var(--duration-fast) var(--ease-expo-out),
                background var(--duration-fast) var(--ease-expo-out);
}
.nia-action.nia-action-share:hover {
    color: var(--accent);
}
.nia-action.nia-action-share.is-loading {
    opacity: 0.6;
    animation: nia-user-spin 0.8s linear infinite;
}
.nia-action.nia-action-share.is-error {
    color: var(--danger);
}

.nia-share-popover {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-elevation);
    padding: 12px;
    min-width: 280px;
    max-width: 360px;
    animation: nia-prov-fade 0.15s ease;
}
.nia-share-popover-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ok);
    margin-bottom: 8px;
}
.nia-share-popover-url {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    font-size: 11.5px;
    font-family: var(--font-mono, monospace);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    outline: none;
}
.nia-share-popover-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.nia-share-popover-copy {
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font: inherit; font-size: 11.5px;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-expo-out),
                color var(--duration-fast) var(--ease-expo-out);
}
.nia-share-popover-copy:hover { border-color: var(--accent); color: var(--text); }
.nia-share-popover-open {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.nia-share-popover-open:hover { text-decoration: underline; }

/* ============================================================
   #6 ROI · stats del user en el popover del header
   ============================================================ */
.nia-popover-roi {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    margin: 4px;
}
.nia-popover-roi-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 4px;
}
.nia-popover-roi-body {
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   #5 + #1 · Automation hints + trend watch
   ============================================================ */
.nia-automation-hints {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    margin: 22px auto 0;
    border-top: 1px dashed var(--border);
    padding-top: 20px;
}
.nia-automation-hints-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
    text-align: left;
    padding-left: 4px;
}
.nia-automation-hint {
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color var(--duration-fast) var(--ease-expo-out),
                background var(--duration-fast) var(--ease-expo-out);
}
.nia-automation-hint:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
}
.nia-automation-hint-head {
    display: flex; align-items: center; gap: 8px;
}
.nia-automation-hint-icon { font-size: 14px; }
.nia-automation-hint-title {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text);
}
.nia-automation-hint-body {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.45;
    padding-left: 22px;
}
.nia-automation-hint-cta {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent);
    padding-left: 22px;
    margin-top: 2px;
}

/* ============================================================
   Q · Pin de mensaje
   ============================================================ */
/* Botón pin · usa el patrón base .nia-action y agrega un fill cuando
   está activo para que se note claramente que el mensaje quedó marcado. */
.nia-action.nia-action-pin.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.nia-action.nia-action-pin.active svg path {
    fill: currentColor;
}

/* ============================================================
   V · Search empty state
   ============================================================ */
.nia-search-empty {
    padding: 14px 16px;
    color: var(--text-dim);
    font-size: 12.5px;
    text-align: center;
    font-style: italic;
}

/* ============================================================
   X · Onboarding tour
   ============================================================ */
/* Backdrop con dimming pero el spotlight deja ver el target. El truco
   visual es el spotlight con box-shadow gigante invertido que rellena
   toda la pantalla menos el ring del elemento destacado. */
.nia-tour-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: auto;
    animation: nia-tour-fade-in 200ms var(--ease-expo-out, ease-out);
}
@keyframes nia-tour-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.nia-tour-spotlight {
    position: fixed;
    border-radius: 12px;
    pointer-events: none;
    box-shadow:
        0 0 0 9999px rgba(7, 8, 12, 0.78),
        0 0 0 2px var(--accent),
        0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
    transition: top 200ms var(--ease-expo-out, ease-out),
                left 200ms var(--ease-expo-out, ease-out),
                width 200ms var(--ease-expo-out, ease-out),
                height 200ms var(--ease-expo-out, ease-out);
}
.nia-tour-tooltip {
    position: fixed;
    z-index: 9991;
    max-width: 340px;
    min-width: 240px;
    padding: 16px 18px 14px;
    background: var(--panel-1, #14171f);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    font-size: 13px;
    line-height: 1.5;
    pointer-events: auto;
    animation: nia-tour-slide-up 240ms var(--ease-expo-out, ease-out);
}
@keyframes nia-tour-slide-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nia-tour-step {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 8px;
}
.nia-tour-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.3;
}
.nia-tour-body {
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.55;
}
.nia-tour-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
}
.nia-tour-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 14px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                border-color var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                color var(--duration-fast, 150ms) var(--ease-expo-out, ease-out);
}
.nia-tour-btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border-color: var(--border);
}
.nia-tour-btn-ghost:hover {
    color: var(--text);
    border-color: var(--text-dim);
}
.nia-tour-btn-primary {
    background: var(--accent);
    color: var(--accent-contrast, #07080c);
    border-color: var(--accent);
}
.nia-tour-btn-primary:hover {
    filter: brightness(1.08);
}
.nia-tour-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Mobile · tooltip ocupa más ancho del viewport */
@media (max-width: 640px) {
    .nia-tour-tooltip {
        max-width: calc(100vw - 24px);
        min-width: 0;
    }
}

/* ============================================================
   v3 visual polish · status overlay, skeleton shimmer,
   table scroll hint, sticky compact header
   ============================================================ */

/* 4 · Avatar header con status dot overlay
   ============================================================
   El status del SSE/JWT se refleja como dot pequeño abajo-derecha del
   avatar del header — más vivo que el dot suelto al lado del título.
   Mantiene el .nia-status original (label "Conectado") visible solo
   en desktop · en mobile el overlay basta. */
.nia-header .nia-avatar { position: relative; }
.nia-header .nia-avatar::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 0 2px var(--panel-2);
    transition: background 200ms var(--ease-expo-out, ease-out);
    pointer-events: none;
}
body[data-nia-status="ok"]      .nia-header .nia-avatar::after { background: var(--ok, #22c55e); }
body[data-nia-status="working"] .nia-header .nia-avatar::after {
    background: var(--warn, #f59e0b);
    animation: nia-pulse-dot 1.2s ease-in-out infinite;
}
body[data-nia-status="error"]   .nia-header .nia-avatar::after { background: var(--danger, #ef4444); }
@keyframes nia-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 0 color-mix(in srgb, var(--warn) 60%, transparent); }
    50%      { box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 6px color-mix(in srgb, var(--warn) 0%, transparent); }
}

/* 5 · Skeleton shimmer mejorado para el thinking
   ============================================================
   Mientras espera el primer delta, además del "Pensando…" mostramos
   3 lineas shimmer abajo para dar sensación de "ya estoy escribiendo".
   El skeleton se reemplaza cuando llega el primer chunk de texto. */
.nia-thinking-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 220px;
}
.nia-thinking-row {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
}
.nia-thinking-shimmer {
    display: flex; flex-direction: column; gap: 7px;
    width: 100%;
    padding-top: 4px;
}
.nia-thinking-shimmer-line {
    height: 9px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        var(--panel-3) 0%,
        color-mix(in srgb, var(--accent) 12%, var(--border)) 50%,
        var(--panel-3) 100%);
    background-size: 200% 100%;
    animation: nia-shimmer 1.6s linear infinite;
}
.nia-thinking-shimmer-line:nth-child(1) { width: 78%; }
.nia-thinking-shimmer-line:nth-child(2) { width: 92%; animation-delay: 0.1s; }
.nia-thinking-shimmer-line:nth-child(3) { width: 64%; animation-delay: 0.2s; }

/* 6 · Tablas anchas · gradient scroll hint
   ============================================================
   Cuando una tabla tiene scroll horizontal, el wrap muestra un
   gradient sutil en los bordes laterales para indicar "hay más". Se
   apaga solo si el scroll está en el extremo (con :hover y un par
   de gradients overlay). */
.nia-message.assistant .md-table-wrap,
.nia-bubble .md-table-wrap,
.nia-msg .bubble .md-table-wrap {
    position: relative;
    border-radius: 8px;
}
.nia-message.assistant .md-table-wrap::before,
.nia-message.assistant .md-table-wrap::after,
.nia-bubble .md-table-wrap::before,
.nia-bubble .md-table-wrap::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 2;
    opacity: 0.85;
    transition: opacity 200ms var(--ease-expo-out, ease-out);
}
.nia-message.assistant .md-table-wrap::before,
.nia-bubble .md-table-wrap::before {
    left: 0;
    background: linear-gradient(to right,
        var(--bg, var(--canvas, var(--panel))) 0%,
        transparent 100%);
}
.nia-message.assistant .md-table-wrap::after,
.nia-bubble .md-table-wrap::after {
    right: 0;
    background: linear-gradient(to left,
        var(--bg, var(--canvas, var(--panel))) 0%,
        transparent 100%);
}
/* Cuando NO hay scroll horizontal (scroll-snap-stop hack), ocultar */
.nia-message.assistant .md-table-wrap[data-scroll="none"]::before,
.nia-message.assistant .md-table-wrap[data-scroll="none"]::after,
.nia-message.assistant .md-table-wrap[data-scroll="start"]::before,
.nia-message.assistant .md-table-wrap[data-scroll="end"]::after {
    opacity: 0;
}

/* 7 · Header sticky compacto al scroll
   ============================================================
   Cuando el container .nia-messages scrollea > 80px, el header se
   compacta: avatar baja a 28px, subtitle oculto, padding reducido.
   Esto se controla con la clase `is-scrolled` que el JS añade al
   <body> al cruzar el umbral. */
body.is-scrolled .nia-header {
    padding-top: 6px;
    padding-bottom: 6px;
    transition: padding 200ms var(--ease-expo-out, ease-out);
}
body.is-scrolled .nia-header .nia-avatar {
    width: 28px !important;
    height: 28px !important;
    transition: width 200ms var(--ease-expo-out, ease-out),
                height 200ms var(--ease-expo-out, ease-out);
}
body.is-scrolled .nia-subtitle {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 200ms var(--ease-expo-out, ease-out),
                opacity 150ms var(--ease-expo-out, ease-out);
}
.nia-subtitle {
    max-height: 60px;
    transition: max-height 200ms var(--ease-expo-out, ease-out),
                opacity 200ms var(--ease-expo-out, ease-out);
}
body.is-scrolled .nia-title {
    font-size: 13.5px;
    transition: font-size 200ms var(--ease-expo-out, ease-out);
}

/* ============================================================
   Light theme polish · más contraste y elevación visible
   ============================================================
   En el tokens-flowcore default, --elevated (96%) y --base (97%)
   están casi idénticos · cards y panels se "perdían" sobre el bg.
   Lo bajamos +3% y reforzamos border +6% para que la jerarquía
   visual sea legible. También agregamos shadow-elevation un poco
   más visible (sombra real, no solo blur). Scope: solo light-mode.

   IMPORTANTE: `body.nx-app` (clase del design-system Aurora) hardcodea
   `background: var(--nx-bg-0)` = #07080c (siempre dark). Sin override
   el toggle a light deja el body negro. Forzamos `--bg` (que sí
   responde al theme) tanto en body como en `.nia-chat`. */
body.nx-app {
    background: var(--bg) !important;
    color: var(--text);
}
body.nx-app.nia-standalone .nia-chat,
body.nx-app.nia-embed .nia-chat {
    background: var(--panel);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not(.dark) {
        --elevated:        220 18% 93%;
        --border:          220 16% 80%;
        --border-subtle:   220 14% 88%;
        --shadow-elevation:
            0 1px 2px 0 rgb(15 23 42 / 0.07),
            0 6px 16px -6px rgb(15 23 42 / 0.10);
    }
}
:root[data-theme="light"],
html[data-theme="light"],
:root.light,
html.light {
    --elevated:        220 18% 93%;
    --border:          220 16% 80%;
    --border-subtle:   220 14% 88%;
    --shadow-elevation:
        0 1px 2px 0 rgb(15 23 42 / 0.07),
        0 6px 16px -6px rgb(15 23 42 / 0.10);
}

/* Light mode · refuerzos visuales puntuales para evitar "todo se
   ve igual" tras el switch desde dark. Si dark mode aplica, estos
   no corren (porque vamos por var() que cambia con el theme). */
:root[data-theme="light"] .nia-starter-card,
html[data-theme="light"] .nia-starter-card,
:root.light .nia-starter-card,
html.light .nia-starter-card {
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.06),
                0 4px 12px -4px rgb(15 23 42 / 0.08);
}
:root[data-theme="light"] .nia-popover,
html[data-theme="light"] .nia-popover,
:root.light .nia-popover,
html.light .nia-popover {
    box-shadow: 0 4px 12px -2px rgb(15 23 42 / 0.10),
                0 16px 40px -10px rgb(15 23 42 / 0.18);
}
:root[data-theme="light"] .nia-message.user,
html[data-theme="light"] .nia-message.user,
:root.light .nia-message.user,
html.light .nia-message.user {
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not(.dark) .nia-starter-card {
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.06),
                    0 4px 12px -4px rgb(15 23 42 / 0.08);
    }
    :root:not([data-theme="dark"]):not(.dark) .nia-popover {
        box-shadow: 0 4px 12px -2px rgb(15 23 42 / 0.10),
                    0 16px 40px -10px rgb(15 23 42 / 0.18);
    }
    :root:not([data-theme="dark"]):not(.dark) .nia-message.user {
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
    }
}

/* ============================================================
   Popover · backdrop sutil cuando está abierto
   ============================================================
   Antes el popover quedaba "flotando" sobre las cards sin indicar
   que el resto del UI está inactivo · usuario veía superposición
   confusa. Ahora cuando .nia-popover.open existe, oscurecemos
   sutil el resto del chat con un overlay invisible-pero-clickable
   que cierra el popover. Pseudo-element en el .nia-chat. */
.nia-chat:has(.nia-popover.open) {
    position: relative;
}
.nia-chat:has(.nia-popover.open)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.06);
    pointer-events: none;
    z-index: 14;
    animation: nia-popover-scrim-in 120ms var(--ease-expo-out, ease-out);
}
@keyframes nia-popover-scrim-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Subir z-index del popover y session banner sobre el scrim */
.nia-popover { z-index: 16; }
.nia-session-banner { position: relative; z-index: 17; }

/* ============================================================
   Dev · Paste JWT prompt
   ============================================================
   Aparece bajo el header cuando falta JWT y no hay host embebido
   que lo inyecte. Input password + botón "Aplicar" + feedback.
   El estilo reusa `.nia-banner.warn` (tonos ámbar) y agrega
   layout vertical específico para esta UI compuesta. */
.nia-jwt-prompt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    /* Hereda colores warn de .nia-banner.warn */
}
.nia-jwt-prompt-text {
    font-size: 12.5px;
    line-height: 1.45;
}
.nia-jwt-prompt-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.nia-jwt-prompt-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    line-height: 1.4;
    outline: none;
    transition: border-color var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                box-shadow var(--duration-fast, 150ms) var(--ease-expo-out, ease-out);
}
.nia-jwt-prompt-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.nia-jwt-prompt-input::placeholder {
    color: var(--text-muted, var(--text-dim));
    font-family: var(--font-mono, ui-monospace, monospace);
}
.nia-jwt-prompt-apply {
    background: var(--accent);
    color: white;
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 7px 16px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                transform var(--duration-fast, 150ms) var(--ease-expo-out, ease-out);
    flex-shrink: 0;
}
.nia-jwt-prompt-apply:hover { background: var(--accent-hover, var(--accent)); }
.nia-jwt-prompt-apply:active { transform: scale(0.97); }
.nia-jwt-prompt-feedback {
    font-size: 11.5px;
    line-height: 1.3;
    min-height: 0;
    transition: min-height 120ms ease;
}
.nia-jwt-prompt-feedback:not(:empty) { min-height: 14px; }
.nia-jwt-prompt-feedback.is-error {
    color: var(--danger, #d44040);
}

/* ============================================================
   F1.1 · Quick-answer badge + CTA "Pedirle a la IA"
   ============================================================
   Cuando un mensaje del usuario fue interceptado por el quick-answer
   detector (sin pasar por el LLM), mostramos un badge ⚡ encima de
   la respuesta y un CTA al pie para escalar al LLM si quiere más
   contexto. UX-críticamente honesto: que el usuario sepa que esa
   respuesta NO la armó el LLM. */
.nia-qa-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: flex-start;
}
.nia-qa-badge-sub {
    color: var(--text-dim);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.nia-qa-llm-cta {
    align-self: flex-start;
    margin-top: 6px;
    font: inherit;
    font-size: 12px;
    color: var(--accent);
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                border-color var(--duration-fast, 150ms) var(--ease-expo-out, ease-out);
}
.nia-qa-llm-cta:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-style: solid;
}
.nia-qa-llm-cta:disabled { opacity: 0.6; cursor: progress; }

/* ============================================================
   F3.2 · Mention autocomplete (@sucursal)
   ============================================================
   Dropdown que aparece encima del composer cuando el usuario escribe
   `@` seguido de letras. Items son sucursales del scope. Navega con
   ↑/↓, selecciona con Enter o click. */
.nia-mention-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 14px;
    right: 14px;
    max-width: 360px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.18);
    display: none;
    overflow: hidden;
    z-index: 20;
    animation: nia-fade-in 120ms var(--ease-expo-out, ease-out);
}
.nia-mention-menu.is-open { display: block; }
.nia-mention-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background 80ms ease;
}
.nia-mention-item:hover,
.nia-mention-item.is-selected {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--text);
}
.nia-mention-name { font-weight: 500; }
.nia-composer { position: relative; }

/* ============================================================
   Rich bubble enrichment · F-Design premium
   ============================================================
   Componentes que adornan respuestas del LLM con estructura visual:
     · .nia-bubble-hero · top-3 stats arriba del mensaje
     · .nia-bubble-limitation · banner ámbar "no puedo X"
     · .nia-bullet-rich · bullets con icon contextual
     · .nia-section-heading · headings con emoji prefix
     · .nia-bubble-cta · chip pill al pie con CTA del LLM
*/

/* Hero TL;DR · 3 stat cards en línea arriba del bubble */
.nia-bubble-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px;
    background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
    animation: nia-hero-in 320ms var(--ease-expo-out, ease-out);
}
@keyframes nia-hero-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nia-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 8px;
    border-left: 3px solid var(--accent);
}
.nia-hero-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.nia-hero-stat-unit {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* Limitation banner · cuando el LLM dice "no tengo/no puedo" */
.nia-bubble-limitation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 0 12px;
    background: var(--warn-soft, color-mix(in srgb, var(--warn, #f59e0b) 12%, transparent));
    border: 1px solid color-mix(in srgb, var(--warn, #f59e0b) 30%, transparent);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text);
    animation: nia-hero-in 240ms var(--ease-expo-out, ease-out);
}
.nia-bubble-limitation-icon { font-size: 14px; flex-shrink: 0; line-height: 1.3; }
.nia-bubble-limitation-text { flex: 1; }

/* Bullets enriched · LIs con icon contextual a la izquierda */
.nia-message.assistant ul li.nia-bullet-rich {
    list-style: none;
    margin-left: -16px;
    padding: 4px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.nia-bullet-icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
}

/* Heading enrichido (con emoji prefix) · section badge accent sutil */
.nia-message.assistant .nia-section-heading,
.nia-message.assistant .nia-section-heading-p {
    display: block;
    padding: 6px 12px 6px 10px;
    margin: 16px 0 8px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text);
}
/* El <p> wrapper · su <strong> hereda tipografía sin doblar */
.nia-message.assistant .nia-section-heading-p strong {
    font-weight: inherit !important;
}

/* HR sutil entre secciones · sustituye los "---" del LLM */
.nia-message.assistant .nia-bubble-hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        var(--border) 20%,
        var(--border) 80%,
        transparent 100%);
    margin: 16px 0;
    opacity: 0.6;
}

/* CTA group · botón principal (enviar ya) + botón secundario (editar) */
.nia-bubble-cta-group {
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
    margin: 10px 0 0;
}
.nia-bubble-cta {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    border-radius: 999px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                border-color var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                transform var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                color var(--duration-fast, 150ms) var(--ease-expo-out, ease-out);
}
.nia-bubble-cta.nia-bubble-cta-primary {
    border-style: dashed;
}
.nia-bubble-cta.nia-bubble-cta-primary:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    border-style: solid;
    transform: translateX(2px);
}
.nia-bubble-cta.nia-bubble-cta-edit {
    padding: 8px 10px;
    border-color: var(--border);
    color: var(--text-dim);
}
.nia-bubble-cta.nia-bubble-cta-edit:hover {
    color: var(--text);
    border-color: var(--text-dim);
    background: color-mix(in srgb, var(--text) 6%, transparent);
}
.nia-bubble-cta:active {
    transform: translateX(1px) scale(0.98);
}

/* Hero · sin animation cuando se re-inyecta durante stream */
.nia-bubble-hero.no-anim { animation: none; }

/* Sucursal chips · menciones inline clickeables, cross-link al QA */
.nia-message.assistant .nia-sucursal-chip {
    display: inline;
    cursor: pointer;
    padding: 1px 6px;
    margin: 0 1px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                border-color var(--duration-fast, 150ms) var(--ease-expo-out, ease-out);
    white-space: nowrap;
}
.nia-message.assistant .nia-sucursal-chip:hover,
.nia-message.assistant .nia-sucursal-chip:focus-visible {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    outline: none;
}
.nia-message.assistant .nia-sucursal-chip::after {
    content: "→";
    font-size: 10px;
    margin-left: 3px;
    opacity: 0.6;
}

/* ============================================================
   F-Design v3 · Tooltip preview en sucursal chips
   ============================================================
   Mini-card que aparece al hover (~350ms delay) con datos vivos
   de la sucursal. Posición arriba o abajo del chip según espacio.
*/
.nia-suc-tooltip {
    position: fixed;
    z-index: 100;
    min-width: 220px;
    max-width: 280px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.22),
                0 4px 12px -4px rgb(0 0 0 / 0.12);
    padding: 12px;
    pointer-events: none;
    animation: nia-suc-tip-in 140ms var(--ease-expo-out, ease-out);
}
@keyframes nia-suc-tip-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nia-suc-tooltip.is-top::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.nia-suc-tooltip.is-bottom::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: var(--panel);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
}
.nia-suc-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.nia-suc-tooltip-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.nia-suc-tooltip-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--text-dim);
    flex-shrink: 0;
}
.nia-suc-tooltip-dot.is-verde   { background: var(--ok, #22c55e); }
.nia-suc-tooltip-dot.is-amarillo { background: var(--warn, #f59e0b); }
.nia-suc-tooltip-dot.is-rojo    { background: var(--danger, #ef4444); }
.nia-suc-tooltip-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}
.nia-suc-tooltip-stat {
    text-align: center;
    padding: 6px 4px;
    border: 1px solid var(--border-subtle, var(--border));
    border-radius: 8px;
}
.nia-suc-tooltip-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.nia-suc-tooltip-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 3px;
}
.nia-suc-tooltip-hint {
    font-size: 10.5px;
    color: var(--text-dim);
    text-align: center;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    font-style: italic;
}

/* ============================================================
   F-Design v3 · Comparison row (X vs Y con delta visual)
   ============================================================
   Cuando el LLM escribe "N min vs M min" lo transformamos en
   una mini-card con 2 columnas y arrow + % de cambio al medio.
*/
.nia-cmp-host {
    list-style: none !important;
    margin-left: -16px;
    padding: 0;
}
.nia-cmp-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 8px 0;
}
.nia-cmp-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nia-cmp-side-secondary {
    text-align: right;
    align-items: flex-end;
}
.nia-cmp-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.nia-cmp-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.nia-cmp-unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
}
.nia-cmp-delta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--panel-3);
    font-variant-numeric: tabular-nums;
}
.nia-cmp-arrow {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.nia-cmp-pct {
    font-size: 11px;
    font-weight: 600;
}
.nia-cmp-row.is-up .nia-cmp-delta {
    background: color-mix(in srgb, var(--warn, #f59e0b) 18%, transparent);
    color: var(--warn, #f59e0b);
}
.nia-cmp-row.is-down .nia-cmp-delta {
    background: color-mix(in srgb, var(--ok, #22c55e) 18%, transparent);
    color: var(--ok, #22c55e);
}
.nia-cmp-row.is-flat .nia-cmp-delta {
    background: color-mix(in srgb, var(--text-dim) 18%, transparent);
    color: var(--text-dim);
}

/* ============================================================
   F-Design v3 · Auto-collapse listas largas (>5 items)
   ============================================================ */
.nia-message.assistant li.nia-list-collapsed {
    display: none;
}
.nia-list-expand {
    display: inline-block;
    margin: 6px 0 0;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    color: var(--accent);
    border: none;
    cursor: pointer;
    padding: 4px 0;
}
.nia-list-expand:hover {
    text-decoration: underline;
}

/* ============================================================
   F-Design v4 · Voice input button
   ============================================================ */
.nia-voice-btn {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                background var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                border-color var(--duration-fast, 150ms) var(--ease-expo-out, ease-out);
}
.nia-voice-btn svg { width: 16px; height: 16px; }
.nia-voice-btn:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.nia-voice-btn.is-recording {
    color: var(--danger, #ef4444);
    background: color-mix(in srgb, var(--danger, #ef4444) 14%, transparent);
    border-color: color-mix(in srgb, var(--danger, #ef4444) 35%, transparent);
    animation: nia-voice-pulse 1.2s ease-in-out infinite;
}
@keyframes nia-voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger, #ef4444) 35%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger, #ef4444) 0%, transparent); }
}

/* ============================================================
   F-Design v4 · Sparkline mini en comparison rows
   ============================================================ */
.nia-cmp-delta {
    /* Override del v3 · ahora tiene sparkline + texto stacked */
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
}
.nia-cmp-spark {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nia-cmp-delta-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   F-Design v4 · Pin button en hero stats
   ============================================================ */
.nia-hero-stat {
    position: relative;
}
.nia-hero-pin {
    position: absolute;
    top: 4px;
    right: 4px;
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-muted, var(--text-dim));
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                color var(--duration-fast, 150ms) var(--ease-expo-out, ease-out),
                background var(--duration-fast, 150ms) var(--ease-expo-out, ease-out);
}
.nia-hero-stat:hover .nia-hero-pin,
.nia-hero-pin.is-pinned {
    opacity: 1;
}
.nia-hero-pin:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.nia-hero-pin.is-pinned {
    color: #fbbf24;  /* amber-400 · star clásico */
}
.nia-hero-pin.is-pinned:hover {
    color: #f59e0b;
    background: color-mix(in srgb, #fbbf24 15%, transparent);
}