/* ============================================================================
 * Future Island Intelligence Suite — v1.6.0-rc.1
 * Design-token foundation (Phase 1 of the UI/UX overhaul).
 * ----------------------------------------------------------------------------
 * One canonical, minimal / modern scale — type · spacing · controls · radius —
 * plus named surface tokens for the navigation rail vs. the work canvas. Loaded
 * LAST so it sits on top of the rc.17 SaaS palette WITHOUT editing it. Scoped to
 * .ves-wrap.fi-shell (no global :root). Flat solid fills only (the FI identity).
 *
 * v1.6.0-rc.2 makes the rail/canvas distinction clear: white rail (dark-text-safe)
 * + a divider + the work canvas cooled to the on-brand FI canvas, light-suite-scoped.
 * Also styles the Phase 2 "Chats" rail list. The deeper shell rebuild continues in
 * later phases on top of these tokens.
 * ========================================================================== */

.ves-wrap.fi-shell {
    /* ---- Type scale (minimal, modern, rem-based) ---- */
    --fi-fs-xs: 0.75rem;      /* 12px */
    --fi-fs-sm: 0.8125rem;    /* 13px */
    --fi-fs-base: 0.875rem;   /* 14px */
    --fi-fs-md: 1rem;         /* 16px */
    --fi-fs-lg: 1.125rem;     /* 18px */
    --fi-fs-xl: 1.375rem;     /* 22px */
    --fi-fs-2xl: 1.75rem;     /* 28px */
    --fi-lh-tight: 1.25;
    --fi-lh-normal: 1.5;
    --fi-fw-medium: 500;
    --fi-fw-semibold: 600;
    --fi-fw-bold: 700;

    /* ---- Spacing scale (4px base) ---- */
    --fi-space-1: 4px;
    --fi-space-2: 8px;
    --fi-space-3: 12px;
    --fi-space-4: 16px;
    --fi-space-5: 24px;
    --fi-space-6: 32px;
    --fi-space-8: 48px;

    /* ---- Radius scale (extends the rc.17 --fi-radius: 12px) ---- */
    --fi-radius-xs: 6px;
    --fi-radius-sm: 8px;
    --fi-radius-md: 12px;
    --fi-radius-lg: 16px;
    --fi-radius-pill: 999px;

    /* ---- Control sizing (buttons / inputs) — comfortable, minimal ---- */
    --fi-control-h-sm: 32px;
    --fi-control-h: 40px;
    --fi-control-h-lg: 48px;
    --fi-control-pad-x: 14px;

    /* ---- Surface vocabulary: navigation rail vs. work canvas ----
       Both stay light by default (text contrast preserved). Phase 2's shell
       rebuild assigns and verifies the final rail colour through these tokens;
       Phase 1 only defines them and draws the divider below. */
    --fi-main-bg: var(--fi-canvas);       /* work canvas */
    --fi-sidebar-bg: var(--fi-surface);   /* navigation rail */
    --fi-rail-divider: var(--fi-line);    /* crisp seam between the two */
}

/* Rail/canvas differentiation. In the active light suite the rail is white with
   dark text while the work canvas was a near-white grey (#F3F4F6) — so the two
   barely differed. Keep the white, dark-text-safe rail + a crisp divider, and cool
   the work canvas to the on-brand FI canvas so the surfaces read as clearly
   distinct (the Semrush pattern: white rail, tinted canvas). The canvas recolour
   is light-suite-scoped so the dark theme (dark rail, light text) is untouched. */
.ves-wrap.fi-shell .ves-sidebar.fi-sidebar {
    border-right: 1px solid var(--fi-rail-divider);
}
.ves-wrap.fi-shell.ves-light-suite .ves-main-col,
.ves-wrap.fi-shell.ves-light-suite .ves-page-body {
    background-color: var(--fi-main-bg) !important;
}

/* Tablet + mobile: the rail becomes a floating drawer, so swap the shared seam
   for a soft elevation instead of an edge that no longer touches the canvas. */
@media (max-width: 900px) {
    .ves-wrap.fi-shell .ves-sidebar.fi-sidebar {
        box-shadow: var(--fi-shadow-md);
    }
}
@media (max-width: 560px) {
    .ves-wrap.fi-shell .ves-sidebar.fi-sidebar {
        border-right: 0;
    }
}

/* Phase 2 — the "Chats" list (resumable conversations), rendered in the thread.
   Flat, minimal, tokenized, scoped. No background-image. */
.ves-wrap.fi-shell .fiis-chats {
    display: flex;
    flex-direction: column;
    gap: var(--fi-space-1);
    margin-top: var(--fi-space-2);
}
.ves-wrap.fi-shell .fiis-chat-item-row {
    display: flex;
    align-items: stretch;
    gap: var(--fi-space-1);
}
.ves-wrap.fi-shell .fiis-chat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fi-space-3);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--fi-space-2) var(--fi-space-3);
    background: var(--fi-surface);
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-sm);
    color: var(--fi-ink);
    font-size: var(--fi-fs-sm);
    text-align: left;
    cursor: pointer;
}
.ves-wrap.fi-shell .fiis-chat-item:hover {
    border-color: var(--fi-primary);
    background: var(--fi-primary-050);
}
.ves-wrap.fi-shell .fiis-chat-title {
    font-weight: var(--fi-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ves-wrap.fi-shell .fiis-chat-meta {
    color: var(--fi-muted);
    font-size: var(--fi-fs-xs);
    flex: none;
}
.ves-wrap.fi-shell .fiis-chat-mini {
    flex: none;
    width: var(--fi-control-h-sm);
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-sm);
    background: var(--fi-surface);
    color: var(--fi-slate);
    font-size: var(--fi-fs-sm);
    cursor: pointer;
}
.ves-wrap.fi-shell .fiis-chat-mini:hover {
    border-color: var(--fi-primary);
    color: var(--fi-primary);
    background: var(--fi-primary-050);
}

/* Phase 3 — the "Secciones" bridge (jump to any workspace section). Flat, tokenized. */
.ves-wrap.fi-shell .fiis-sections {
    display: flex;
    flex-direction: column;
    gap: var(--fi-space-3);
    margin-top: var(--fi-space-2);
}
.ves-wrap.fi-shell .fiis-section-group-label {
    font-size: var(--fi-fs-xs);
    font-weight: var(--fi-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fi-muted);
    margin-bottom: var(--fi-space-1);
}
.ves-wrap.fi-shell .fiis-section-link {
    display: inline-block;
    margin: 0 var(--fi-space-1) var(--fi-space-1) 0;
    padding: var(--fi-space-1) var(--fi-space-3);
    background: var(--fi-surface);
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-pill);
    color: var(--fi-ink);
    font-size: var(--fi-fs-sm);
    cursor: pointer;
}
.ves-wrap.fi-shell .fiis-section-link:hover {
    border-color: var(--fi-primary);
    color: var(--fi-primary);
    background: var(--fi-primary-050);
}

/* Phase 3 (rc.4) — chats in the shell's left rail. Injected into .ves-sidebar-nav,
   reusing the shell nav classes; rail text inherits the rail's own colour so it
   works on the white light-suite rail and any dark theme. Flat solid fills only. */
.ves-wrap.fi-shell .fiis-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fi-space-2);
}
.ves-wrap.fi-shell .fiis-rail-new {
    flex: none;
    width: 20px;
    height: 20px;
    line-height: 1;
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .7;
}
.ves-wrap.fi-shell .fiis-rail-new:hover {
    opacity: 1;
    border-color: var(--fi-primary);
    color: var(--fi-primary);
}
.ves-wrap.fi-shell .fiis-rail-chats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--fi-space-1);
}
.ves-wrap.fi-shell .fiis-rail-chat {
    display: block;
    width: 100%;
    padding: var(--fi-space-1) var(--fi-space-2);
    border: 0;
    border-radius: var(--fi-radius-sm);
    background: transparent;
    color: inherit;
    font-size: var(--fi-fs-sm);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    opacity: .85;
}
.ves-wrap.fi-shell .fiis-rail-chat:hover {
    background: rgba(30, 91, 168, .10);
    opacity: 1;
}
.ves-wrap.fi-shell .fiis-rail-chat.is-active {
    background: rgba(30, 91, 168, .14);
    opacity: 1;
    font-weight: var(--fi-fw-medium);
}
.ves-wrap.fi-shell .fiis-rail-empty {
    padding: var(--fi-space-1) var(--fi-space-2);
    font-size: var(--fi-fs-xs);
    color: var(--fi-muted);
    opacity: .8;
}

/* Phase 4 (rc.6) — the multi-AI council result: per-model opinions + a synthesis.
   Flat, tokenized, solid fills only. */
.ves-wrap.fi-shell .fiis-council {
    display: flex;
    flex-direction: column;
    gap: var(--fi-space-3);
    margin-top: var(--fi-space-2);
}
.ves-wrap.fi-shell .fiis-council-op {
    border: 1px solid var(--fi-line);
    border-left: 3px solid var(--fi-slate);
    border-radius: var(--fi-radius-sm);
    padding: var(--fi-space-2) var(--fi-space-3);
    background: var(--fi-surface);
}
.ves-wrap.fi-shell .fiis-council-op-head {
    font-size: var(--fi-fs-xs);
    font-weight: var(--fi-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fi-muted);
    margin-bottom: var(--fi-space-1);
}
.ves-wrap.fi-shell .fiis-council-op-body { font-size: var(--fi-fs-sm); }
.ves-wrap.fi-shell .fiis-council-synth {
    border: 1px solid var(--fi-primary-100);
    border-left: 3px solid var(--fi-primary);
    border-radius: var(--fi-radius-sm);
    padding: var(--fi-space-3);
    background: var(--fi-primary-050);
}
.ves-wrap.fi-shell .fiis-council-synth-head {
    font-size: var(--fi-fs-sm);
    font-weight: var(--fi-fw-bold);
    color: var(--fi-primary);
    margin-bottom: var(--fi-space-1);
}
.ves-wrap.fi-shell .fiis-council-caveats {
    margin: var(--fi-space-1) 0 0;
    padding-left: var(--fi-space-4);
    color: var(--fi-muted);
    font-size: var(--fi-fs-xs);
}
.ves-wrap.fi-shell .fiis-council-ask {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fi-space-1);
    margin-top: var(--fi-space-2);
}

/* v1.6.0-rc.10 — external-MCP "señales externas recibidas" panel (solid fills only). */
.ves-wrap.fi-shell .fiis-ext-signals {
    margin-top: var(--fi-space-2);
    padding: var(--fi-space-3);
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-sm);
    background: var(--fi-surface);
}
.ves-wrap.fi-shell .fiis-ext-head {
    font-weight: var(--fi-fw-semibold);
    margin-bottom: var(--fi-space-2);
}
.ves-wrap.fi-shell .fiis-ext-note {
    font-weight: 400;
    font-size: var(--fi-fs-xs);
    color: var(--fi-muted);
}
.ves-wrap.fi-shell .fiis-ext-sub {
    margin-top: var(--fi-space-2);
    font-size: var(--fi-fs-xs);
    color: var(--fi-muted);
}
.ves-wrap.fi-shell .fiis-ext-receipts,
.ves-wrap.fi-shell .fiis-ext-rows {
    margin: var(--fi-space-1) 0 0;
    padding-left: var(--fi-space-4);
    font-size: var(--fi-fs-sm);
}
.ves-wrap.fi-shell .fiis-ext-topic { font-weight: var(--fi-fw-semibold); }
.ves-wrap.fi-shell .fiis-ext-when { color: var(--fi-muted); }

/* v1.6.0-rc.11 — ambient unread badge on the Señales action (solid fill only). */
.ves-wrap.fi-shell .fiis-badge {
    display: inline-block;
    min-width: 1.1em;
    margin-left: var(--fi-space-1);
    padding: 0 .4em;
    border-radius: var(--fi-radius-pill, 999px);
    background: var(--fi-primary);
    color: #fff;
    font-size: var(--fi-fs-xs);
    line-height: 1.5;
    text-align: center;
}
.ves-wrap.fi-shell .fiis-badge[hidden] { display: none; }

/* ===========================================================================
 * v1.6.0-rc.14 — intelligence uplift UI: council opinion grid, agreement strip,
 * and an accessibility/motion polish pass. Solid fills only.
 * ======================================================================== */

/* Council opinions read as a responsive card grid on wider canvases. */
.ves-wrap.fi-shell .fiis-council-ops {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fi-space-2);
}
@media (min-width: 900px) {
    .ves-wrap.fi-shell .fiis-council-ops {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* "Coinciden en:" lexical-overlap strip + term tags. */
.ves-wrap.fi-shell .fiis-council-agree {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fi-space-1);
    margin-top: var(--fi-space-2);
    font-size: var(--fi-fs-xs);
}
.ves-wrap.fi-shell .fiis-council-agree-label {
    font-weight: var(--fi-fw-semibold);
    color: var(--fi-muted);
}
.ves-wrap.fi-shell .fiis-tag {
    display: inline-block;
    padding: .1em .5em;
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-pill, 999px);
    background: var(--fi-surface);
    font-size: var(--fi-fs-xs);
}

/* Accessibility: a clear keyboard focus ring on every interactive control. */
.ves-wrap.fi-shell .fiis-navbtn:focus-visible,
.ves-wrap.fi-shell .fiis-convo-ghost:focus-visible,
.ves-wrap.fi-shell .fiis-chip:focus-visible,
.ves-wrap.fi-shell .fiis-section-link:focus-visible,
.ves-wrap.fi-shell .fiis-platform:focus-visible,
.ves-wrap.fi-shell .fiis-send:focus-visible,
.ves-wrap.fi-shell .fiis-mic:focus-visible {
    outline: 2px solid var(--fi-primary);
    outline-offset: 2px;
}

/* Subtle, consistent hover/active feedback (solid colors only). */
.ves-wrap.fi-shell .fiis-navbtn,
.ves-wrap.fi-shell .fiis-convo-ghost,
.ves-wrap.fi-shell .fiis-chip,
.ves-wrap.fi-shell .fiis-section-link {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Respect users who prefer reduced motion — disable the transitions above. */
@media (prefers-reduced-motion: reduce) {
    .ves-wrap.fi-shell .fiis-navbtn,
    .ves-wrap.fi-shell .fiis-convo-ghost,
    .ves-wrap.fi-shell .fiis-chip,
    .ves-wrap.fi-shell .fiis-section-link {
        transition: none;
    }
}

/* v1.6.0-rc.15 — memory browser: filter chips + record actions (solid fills). */
.ves-wrap.fi-shell .fiis-mem-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fi-space-1);
    margin: var(--fi-space-2) 0;
}
.ves-wrap.fi-shell .fiis-mem-filter {
    padding: .2em .7em;
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-pill, 999px);
    background: var(--fi-surface);
    font-size: var(--fi-fs-xs);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.ves-wrap.fi-shell .fiis-mem-filter.is-active {
    background: var(--fi-primary);
    border-color: var(--fi-primary);
    color: #fff;
}
.ves-wrap.fi-shell .fiis-mem-n { opacity: .7; }
.ves-wrap.fi-shell .fiis-record--verdict { border-left: 3px solid var(--fi-primary); }
.ves-wrap.fi-shell .fiis-record-actions { margin-top: var(--fi-space-1); }
.ves-wrap.fi-shell .fiis-mem-empty { color: var(--fi-muted); font-size: var(--fi-fs-sm); }
@media (prefers-reduced-motion: reduce) {
    .ves-wrap.fi-shell .fiis-mem-filter { transition: none; }
}

/* ===========================================================================
 * v1.6.0-rc.16 — complete UI/UX refresh.
 * A cohesive visual pass over the whole shell, layered last so it refines the
 * base SaaS styles without editing them. Solid fills + soft elevation only;
 * every motion is disabled under prefers-reduced-motion. Scoped to .fi-shell.
 * ======================================================================== */

/* Refined, modern elevation + motion tokens (cascade to every component that
 * reads them). Soft, low-contrast shadows read as "lifted paper", not boxes. */
.ves-wrap.fi-shell {
    --fi-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
    --fi-shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
    --fi-shadow-lg: 0 16px 40px rgba(16, 24, 40, .14);
    --fi-ease: cubic-bezier(.2, .7, .3, 1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Crisp text selection in the suite's own accent. */
.ves-wrap.fi-shell ::selection { background: var(--fi-primary-100); color: var(--fi-ink); }

/* ---- Conversation thread: comfortable reading column + quiet scrollbar ---- */
.ves-wrap.fi-shell .fiis-convo-thread {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--fi-line-2) transparent;
}
.ves-wrap.fi-shell .fiis-convo-thread::-webkit-scrollbar { width: 10px; }
.ves-wrap.fi-shell .fiis-convo-thread::-webkit-scrollbar-thumb {
    background: var(--fi-line-2);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--fi-radius-pill);
}
.ves-wrap.fi-shell .fiis-convo-thread::-webkit-scrollbar-thumb:hover { background: var(--fi-muted); }

/* ---- Message rows: clear authorship, readable measure, soft elevation ---- */
.ves-wrap.fi-shell .fiis-msg {
    display: flex;
    gap: var(--fi-space-3);
    align-items: flex-start;
    margin: var(--fi-space-3) 0;
}
.ves-wrap.fi-shell .fiis-msg.is-user { flex-direction: row-reverse; }
.ves-wrap.fi-shell .fiis-msg-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--fi-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fi-fs-xs);
    font-weight: var(--fi-fw-bold);
    background: var(--fi-surface-2);
    color: var(--fi-ink-2);
    border: 1px solid var(--fi-line);
}
.ves-wrap.fi-shell .fiis-msg.is-assistant .fiis-msg-avatar { background: var(--fi-navy-900); color: var(--fi-white); border-color: var(--fi-navy-900); }
.ves-wrap.fi-shell .fiis-msg.is-user .fiis-msg-avatar { background: var(--fi-primary); color: var(--fi-white); border-color: var(--fi-primary); }
.ves-wrap.fi-shell .fiis-msg-bubble {
    position: relative;
    max-width: min(80%, 720px);
    padding: var(--fi-space-3) var(--fi-space-4);
    border-radius: var(--fi-radius-lg);
    line-height: var(--fi-lh-normal);
    font-size: var(--fi-fs-base);
    border: 1px solid var(--fi-line);
}
.ves-wrap.fi-shell .fiis-msg.is-assistant .fiis-msg-bubble {
    background: var(--fi-surface);
    color: var(--fi-ink);
    box-shadow: var(--fi-shadow-sm);
    border-top-left-radius: var(--fi-radius-xs);
}
.ves-wrap.fi-shell .fiis-msg.is-user .fiis-msg-bubble {
    background: var(--fi-primary-050);
    color: var(--fi-ink);
    border-color: var(--fi-primary-100);
    border-top-right-radius: var(--fi-radius-xs);
}
.ves-wrap.fi-shell .fiis-msg-bubble > :first-child { margin-top: 0; }
.ves-wrap.fi-shell .fiis-msg-bubble > :last-child { margin-bottom: 0; }
.ves-wrap.fi-shell .fiis-msg-bubble strong { font-weight: var(--fi-fw-semibold); }
.ves-wrap.fi-shell .fiis-msg-meta {
    margin-top: var(--fi-space-2);
    font-size: var(--fi-fs-xs);
    color: var(--fi-muted);
}
.ves-wrap.fi-shell .fiis-em { color: var(--fi-primary); font-style: normal; font-weight: var(--fi-fw-semibold); }

/* ---- Header + primary nav: sticky, with a clear active indicator ---- */
.ves-wrap.fi-shell .fiis-convo-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: color-mix(in srgb, var(--fi-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--fi-line);
}
.ves-wrap.fi-shell .fiis-convo-mark {
    border-radius: var(--fi-radius-sm);
    background: var(--fi-navy-900);
    color: var(--fi-white);
    font-weight: var(--fi-fw-bold);
}
.ves-wrap.fi-shell .fiis-navbtn {
    position: relative;
    border-radius: var(--fi-radius-sm);
    color: var(--fi-ink-2);
    transition: color .15s var(--fi-ease), background-color .15s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-navbtn:hover { background: var(--fi-surface-2); color: var(--fi-ink); }
.ves-wrap.fi-shell .fiis-navbtn.is-active { color: var(--fi-primary); }
.ves-wrap.fi-shell .fiis-navbtn.is-active::after {
    content: "";
    position: absolute;
    left: var(--fi-space-3);
    right: var(--fi-space-3);
    bottom: -1px;
    height: 2px;
    border-radius: var(--fi-radius-pill);
    background: var(--fi-primary);
}
.ves-wrap.fi-shell .fiis-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--fi-radius-pill);
    background: var(--fi-green);
    animation: fiis-pulse 2s var(--fi-ease) infinite;
}
@keyframes fiis-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- Buttons + chips: pill geometry, gentle hover lift, honest press ---- */
.ves-wrap.fi-shell .fiis-convo-ghost,
.ves-wrap.fi-shell .fiis-chip,
.ves-wrap.fi-shell .fiis-platform {
    border-radius: var(--fi-radius-pill);
    transition: transform .12s var(--fi-ease), box-shadow .15s var(--fi-ease), background-color .15s var(--fi-ease), border-color .15s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-convo-ghost:hover,
.ves-wrap.fi-shell .fiis-chip:hover,
.ves-wrap.fi-shell .fiis-platform:hover { transform: translateY(-1px); box-shadow: var(--fi-shadow-sm); }
.ves-wrap.fi-shell .fiis-convo-ghost:active,
.ves-wrap.fi-shell .fiis-chip:active { transform: translateY(0); box-shadow: none; }
.ves-wrap.fi-shell .fiis-convo-ghost.is-primary { background: var(--fi-primary); border-color: var(--fi-primary); color: var(--fi-white); }
.ves-wrap.fi-shell .fiis-convo-ghost.is-primary:hover { background: var(--fi-primary-hover); }

/* ---- Composer: an elevated, rounded input bar with a clear focus state ---- */
.ves-wrap.fi-shell .fiis-composer {
    border-top: 1px solid var(--fi-line);
    background: var(--fi-surface);
}
.ves-wrap.fi-shell .fiis-composer-row {
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-lg);
    background: var(--fi-surface);
    box-shadow: var(--fi-shadow-sm);
    transition: border-color .15s var(--fi-ease), box-shadow .15s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-composer-row:focus-within {
    border-color: var(--fi-primary);
    box-shadow: 0 0 0 3px var(--fi-primary-100);
}
.ves-wrap.fi-shell .fiis-composer-input { background: transparent; border: 0; }
.ves-wrap.fi-shell .fiis-send {
    border-radius: var(--fi-radius-pill);
    background: var(--fi-primary);
    color: var(--fi-white);
    transition: transform .12s var(--fi-ease), background-color .15s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-send:hover { transform: scale(1.06); background: var(--fi-primary-hover); }
.ves-wrap.fi-shell .fiis-send:active { transform: scale(.96); }

/* ---- Card surfaces (council / records / signals) share one hover behaviour --- */
.ves-wrap.fi-shell .fiis-council-op,
.ves-wrap.fi-shell .fiis-record,
.ves-wrap.fi-shell .fiis-ext-signals {
    transition: box-shadow .15s var(--fi-ease), border-color .15s var(--fi-ease), transform .12s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-council-op:hover,
.ves-wrap.fi-shell .fiis-record:hover {
    box-shadow: var(--fi-shadow-md);
    border-color: var(--fi-primary-100);
    transform: translateY(-1px);
}

/* ---- Confidence badges read as quiet status pills ---- */
.ves-wrap.fi-shell .fiis-conf {
    display: inline-block;
    padding: .1em .6em;
    border-radius: var(--fi-radius-pill);
    font-size: var(--fi-fs-xs);
    font-weight: var(--fi-fw-semibold);
    background: var(--fi-surface-2);
    color: var(--fi-ink-2);
}
.ves-wrap.fi-shell .fiis-conf--low { background: var(--fi-slate-050); color: var(--fi-slate); }
.ves-wrap.fi-shell .fiis-conf--medium { background: var(--fi-primary-050); color: var(--fi-primary); }

/* ---- Respect reduced-motion across the whole refresh ---- */
@media (prefers-reduced-motion: reduce) {
    .ves-wrap.fi-shell .fiis-convo-thread { scroll-behavior: auto; }
    .ves-wrap.fi-shell .fiis-live-dot { animation: none; }
    .ves-wrap.fi-shell .fiis-convo-ghost,
    .ves-wrap.fi-shell .fiis-chip,
    .ves-wrap.fi-shell .fiis-platform,
    .ves-wrap.fi-shell .fiis-send,
    .ves-wrap.fi-shell .fiis-navbtn,
    .ves-wrap.fi-shell .fiis-council-op,
    .ves-wrap.fi-shell .fiis-record,
    .ves-wrap.fi-shell .fiis-composer-row {
        transition: none;
    }
    .ves-wrap.fi-shell .fiis-convo-ghost:hover,
    .ves-wrap.fi-shell .fiis-chip:hover,
    .ves-wrap.fi-shell .fiis-platform:hover,
    .ves-wrap.fi-shell .fiis-send:hover,
    .ves-wrap.fi-shell .fiis-council-op:hover,
    .ves-wrap.fi-shell .fiis-record:hover { transform: none; }
}

/* ===========================================================================
 * v1.6.0-rc.17 — UI/UX deepening: responsive, motion micro-interactions, and
 * the evidence-card surface. Continues the rc.16 refresh in the same token
 * layer. Solid fills only; every motion is reduced-motion aware. Scoped.
 * ======================================================================== */

/* ---- Evidence cards (scan results): one consistent, liftable card surface --- */
.ves-wrap.fi-shell .fiis-examples {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fi-space-3);
    margin-top: var(--fi-space-3);
}
@media (min-width: 760px) {
    .ves-wrap.fi-shell .fiis-examples {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}
.ves-wrap.fi-shell .fiis-example {
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-lg);
    background: var(--fi-surface);
    box-shadow: var(--fi-shadow-sm);
    overflow: hidden;
    transition: box-shadow .15s var(--fi-ease), border-color .15s var(--fi-ease), transform .12s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-example:hover {
    box-shadow: var(--fi-shadow-md);
    border-color: var(--fi-primary-100);
    transform: translateY(-2px);
}
.ves-wrap.fi-shell .fiis-example.is-picked {
    border-color: var(--fi-primary);
    box-shadow: 0 0 0 3px var(--fi-primary-100);
}
.ves-wrap.fi-shell .fiis-example-body { padding: var(--fi-space-3); display: flex; flex-direction: column; gap: var(--fi-space-2); }
.ves-wrap.fi-shell .fiis-example-toprow { display: flex; align-items: center; justify-content: space-between; gap: var(--fi-space-2); }
.ves-wrap.fi-shell .fiis-example-platform { font-size: var(--fi-fs-xs); color: var(--fi-muted); text-transform: uppercase; letter-spacing: .04em; }
.ves-wrap.fi-shell .fiis-example-author { font-weight: var(--fi-fw-semibold); }
.ves-wrap.fi-shell .fiis-example-stats { display: flex; gap: var(--fi-space-3); font-size: var(--fi-fs-xs); color: var(--fi-ink-2); }
.ves-wrap.fi-shell .fiis-example-cap { color: var(--fi-ink-2); font-size: var(--fi-fs-sm); }
.ves-wrap.fi-shell .fiis-example-explain { font-size: var(--fi-fs-sm); color: var(--fi-muted); }
.ves-wrap.fi-shell .fiis-evidence-tag {
    display: inline-block;
    padding: .1em .55em;
    border-radius: var(--fi-radius-pill);
    font-size: var(--fi-fs-xs);
    font-weight: var(--fi-fw-semibold);
    background: var(--fi-surface-2);
    color: var(--fi-ink-2);
}
.ves-wrap.fi-shell .fiis-example-actions { display: flex; flex-wrap: wrap; gap: var(--fi-space-1); margin-top: var(--fi-space-1); }
.ves-wrap.fi-shell .fiis-mini {
    border-radius: var(--fi-radius-pill);
    transition: transform .12s var(--fi-ease), box-shadow .15s var(--fi-ease), background-color .15s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-mini:hover { transform: translateY(-1px); box-shadow: var(--fi-shadow-sm); }
.ves-wrap.fi-shell .fiis-mini.is-primary { background: var(--fi-primary); border-color: var(--fi-primary); color: var(--fi-white); }

/* ---- Composer mode chips: a quiet, evenly-spaced row ---- */
.ves-wrap.fi-shell .fiis-composer-modes { display: flex; flex-wrap: wrap; gap: var(--fi-space-1); margin-bottom: var(--fi-space-2); }

/* ---- Typing indicator: three breathing dots (motion-safe) ---- */
.ves-wrap.fi-shell .fiis-typing { display: inline-flex; gap: 4px; align-items: center; }
.ves-wrap.fi-shell .fiis-typing span {
    width: 6px; height: 6px;
    border-radius: var(--fi-radius-pill);
    background: var(--fi-muted);
    animation: fiis-typing-bounce 1.2s var(--fi-ease) infinite;
}
.ves-wrap.fi-shell .fiis-typing span:nth-child(2) { animation-delay: .15s; }
.ves-wrap.fi-shell .fiis-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes fiis-typing-bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---- Streaming caret: a soft blink while text arrives ---- */
.ves-wrap.fi-shell .fiis-caret {
    display: inline-block;
    width: 2px; height: 1.05em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: var(--fi-primary);
    border-radius: 1px;
    animation: fiis-caret-blink 1s steps(2, start) infinite;
}
@keyframes fiis-caret-blink { 50% { opacity: 0; } }

/* ---- Responsive: tablet (the rail becomes a drawer) ---- */
@media (max-width: 900px) {
    .ves-wrap.fi-shell .fiis-appnav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ves-wrap.fi-shell .fiis-appnav::-webkit-scrollbar { display: none; }
    .ves-wrap.fi-shell .fiis-msg-bubble { max-width: 88%; }
}

/* ---- Responsive: phone — denser header, roomier bubbles, calmer avatars ---- */
@media (max-width: 560px) {
    .ves-wrap.fi-shell .fiis-convo-head { flex-wrap: wrap; gap: var(--fi-space-2); }
    .ves-wrap.fi-shell .fiis-convo-head-actions { width: 100%; justify-content: space-between; }
    .ves-wrap.fi-shell .fiis-msg { gap: var(--fi-space-2); }
    .ves-wrap.fi-shell .fiis-msg-bubble { max-width: 92%; }
    .ves-wrap.fi-shell .fiis-msg-avatar { width: 26px; height: 26px; }
    .ves-wrap.fi-shell .fiis-composer-hint { font-size: var(--fi-fs-xs); }
    .ves-wrap.fi-shell .fiis-council-ops { grid-template-columns: 1fr; }
}

/* ---- Reduced-motion: still the calm baseline for the rc.17 additions ---- */
@media (prefers-reduced-motion: reduce) {
    .ves-wrap.fi-shell .fiis-typing span,
    .ves-wrap.fi-shell .fiis-caret { animation: none; }
    .ves-wrap.fi-shell .fiis-example,
    .ves-wrap.fi-shell .fiis-mini { transition: none; }
    .ves-wrap.fi-shell .fiis-example:hover,
    .ves-wrap.fi-shell .fiis-mini:hover { transform: none; }
}

/* ===========================================================================
 * v1.6.0-rc.18 — density preference: "Cómodo" (default) vs "Compacto".
 * Toggled from the header; persisted in localStorage and applied as
 * data-fiis-density on .fiis-convo. Compact tightens rhythm for power users
 * without changing any color or behaviour. Solid fills only.
 * ======================================================================== */
.ves-wrap.fi-shell .fiis-convo[data-fiis-density="compact"] .fiis-msg { margin: var(--fi-space-2) 0; gap: var(--fi-space-2); }
.ves-wrap.fi-shell .fiis-convo[data-fiis-density="compact"] .fiis-msg-bubble {
    padding: var(--fi-space-2) var(--fi-space-3);
    font-size: var(--fi-fs-sm);
    border-radius: var(--fi-radius-md);
}
.ves-wrap.fi-shell .fiis-convo[data-fiis-density="compact"] .fiis-msg-avatar { width: 24px; height: 24px; }
.ves-wrap.fi-shell .fiis-convo[data-fiis-density="compact"] .fiis-msg-meta { margin-top: var(--fi-space-1); }
.ves-wrap.fi-shell .fiis-convo[data-fiis-density="compact"] .fiis-council,
.ves-wrap.fi-shell .fiis-convo[data-fiis-density="compact"] .fiis-council-ops,
.ves-wrap.fi-shell .fiis-convo[data-fiis-density="compact"] .fiis-examples { gap: var(--fi-space-2); }
.ves-wrap.fi-shell .fiis-convo[data-fiis-density="compact"] .fiis-council-op,
.ves-wrap.fi-shell .fiis-convo[data-fiis-density="compact"] .fiis-example-body { padding: var(--fi-space-2); }
.ves-wrap.fi-shell .fiis-convo[data-fiis-density="compact"] .fiis-composer-row { border-radius: var(--fi-radius-md); }
.ves-wrap.fi-shell .fiis-convo[data-fiis-density="compact"] .fiis-composer-modes { margin-bottom: var(--fi-space-1); }

/* ===========================================================================
 * v1.6.0-rc.20 — analysis-card cleanup + low-sample guardrail.
 * The structured "Mi lectura del lote" cards (.fiis-card) are the dominant
 * surface of a result; refine them into one calm, scannable card system and
 * quiet the repeated per-card action chips so CONTENT leads, not buttons.
 * Layered last so it refines fiis-conversation.css. Solid fills only.
 * ======================================================================== */
.ves-wrap.fi-shell .fiis-card {
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-lg);
    background: var(--fi-surface);
    box-shadow: var(--fi-shadow-sm);
    padding: var(--fi-space-3) var(--fi-space-4);
    transition: box-shadow .15s var(--fi-ease), border-color .15s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-card:hover { box-shadow: var(--fi-shadow-md); border-color: var(--fi-primary-100); }
.ves-wrap.fi-shell .fiis-card--evidence { border-left: 3px solid var(--fi-primary); }
.ves-wrap.fi-shell .fiis-card--hypothesis { border-left: 3px solid var(--fi-slate); }
.ves-wrap.fi-shell .fiis-card--cannot { border-left: 3px solid var(--fi-muted); }
/* v1.6.0-rc.25 — senior strategic lens: the read leads with a stronger accent. */
.ves-wrap.fi-shell .fiis-card--strategic { border-left: 3px solid var(--fi-ink); }
.ves-wrap.fi-shell .fiis-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fi-space-2);
    margin-bottom: var(--fi-space-2);
}
.ves-wrap.fi-shell .fiis-card-kind {
    font-size: var(--fi-fs-xs);
    font-weight: var(--fi-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fi-muted);
}
.ves-wrap.fi-shell .fiis-card-badge {
    font-size: var(--fi-fs-xs);
    font-weight: var(--fi-fw-semibold);
    padding: .1em .5em;
    border-radius: var(--fi-radius-pill);
    background: var(--fi-surface-2);
    color: var(--fi-ink-2);
}
.ves-wrap.fi-shell .fiis-card-badge.is-limited { background: var(--fi-danger-050); color: var(--fi-danger); }
.ves-wrap.fi-shell .fiis-card-title { font-weight: var(--fi-fw-semibold); margin-bottom: var(--fi-space-1); }
.ves-wrap.fi-shell .fiis-card-lead { font-size: var(--fi-fs-sm); line-height: var(--fi-lh-normal); }
.ves-wrap.fi-shell .fiis-card-list { margin: 0; padding-left: var(--fi-space-4); font-size: var(--fi-fs-sm); line-height: var(--fi-lh-normal); }
.ves-wrap.fi-shell .fiis-card-list li { margin-bottom: var(--fi-space-1); }
/* Quiet the repeated 4 actions: small, secondary, separated by a hairline. */
.ves-wrap.fi-shell .fiis-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fi-space-1);
    margin-top: var(--fi-space-3);
    padding-top: var(--fi-space-2);
    border-top: 1px solid var(--fi-line);
}
.ves-wrap.fi-shell .fiis-card-act {
    font-size: var(--fi-fs-xs);
    padding: .25em .6em;
    border-radius: var(--fi-radius-pill);
    border: 1px solid var(--fi-line);
    background: transparent;
    color: var(--fi-ink-2);
    cursor: pointer;
    transition: background-color .15s var(--fi-ease), border-color .15s var(--fi-ease), color .15s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-card-act:hover { background: var(--fi-surface-2); border-color: var(--fi-primary); color: var(--fi-ink); }
.ves-wrap.fi-shell .fiis-card.is-in-brief { border-color: var(--fi-primary); box-shadow: 0 0 0 2px var(--fi-primary-100); }

/* Low-sample honesty banner: a calm warning, not an error. */
.ves-wrap.fi-shell .fiis-lowsample {
    padding: var(--fi-space-3);
    border: 1px solid var(--fi-danger-050);
    border-left: 3px solid var(--fi-danger);
    border-radius: var(--fi-radius-md);
    background: var(--fi-danger-050);
    color: var(--fi-ink);
    font-size: var(--fi-fs-sm);
    line-height: var(--fi-lh-normal);
}

@media (prefers-reduced-motion: reduce) {
    .ves-wrap.fi-shell .fiis-card,
    .ves-wrap.fi-shell .fiis-card-act { transition: none; }
}

/* v1.6.0-rc.26 — pre-scan multiple-choice clarifier (calm, flat solid fills only). */
.ves-wrap.fi-shell .fiis-clarify {
    display: flex;
    flex-direction: column;
    gap: var(--fi-space-3);
    padding: var(--fi-space-3) var(--fi-space-4);
    border: 1px solid var(--fi-border);
    border-radius: var(--fi-radius-md);
    background: var(--fi-surface);
}
.ves-wrap.fi-shell .fiis-clar-lead { color: var(--fi-slate); font-size: var(--fi-text-sm); }
.ves-wrap.fi-shell .fiis-clar-row { display: flex; flex-direction: column; gap: var(--fi-space-2); }
.ves-wrap.fi-shell .fiis-clar-q { font-size: var(--fi-text-xs); font-weight: 600; color: var(--fi-muted); text-transform: uppercase; letter-spacing: .04em; }
.ves-wrap.fi-shell .fiis-clar-opts { display: flex; flex-wrap: wrap; gap: var(--fi-space-2); }
.ves-wrap.fi-shell .fiis-clar-opt {
    border: 1px solid var(--fi-border);
    background: var(--fi-bg);
    color: var(--fi-ink);
    border-radius: var(--fi-radius-pill, 999px);
    padding: 4px 12px;
    font-size: var(--fi-text-sm);
    cursor: pointer;
    transition: border-color .15s var(--fi-ease), background .15s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-clar-opt:hover { border-color: var(--fi-primary); }
.ves-wrap.fi-shell .fiis-clar-opt.is-on { background: var(--fi-primary); color: #fff; border-color: var(--fi-primary); }
.ves-wrap.fi-shell .fiis-clar-go { display: flex; flex-wrap: wrap; gap: var(--fi-space-2); margin-top: var(--fi-space-1); }
@media (prefers-reduced-motion: reduce) {
    .ves-wrap.fi-shell .fiis-clar-opt { transition: none; }
}

/* v1.6.0-rc.27 — parallel AI search panel (GPT · Gemini · Claude). Flat fills only. */
.ves-wrap.fi-shell .fiis-parallel {
    border: 1px solid var(--fi-border);
    border-left: 3px solid var(--fi-slate);
    border-radius: var(--fi-radius-md);
    background: var(--fi-surface);
    padding: var(--fi-space-3) var(--fi-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--fi-space-2);
}
.ves-wrap.fi-shell .fiis-parallel.is-off { border-left-color: var(--fi-muted); color: var(--fi-slate); font-size: var(--fi-text-sm); }
.ves-wrap.fi-shell .fiis-parallel-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fi-space-2); }
.ves-wrap.fi-shell .fiis-parallel-models { color: var(--fi-muted); font-size: var(--fi-text-xs); font-weight: 600; letter-spacing: .02em; }
.ves-wrap.fi-shell .fiis-parallel-syn { color: var(--fi-ink); font-size: var(--fi-text-sm); line-height: 1.5; }
.ves-wrap.fi-shell .fiis-parallel-op { display: flex; flex-direction: column; gap: 2px; padding-top: var(--fi-space-2); border-top: 1px dashed var(--fi-border); }
.ves-wrap.fi-shell .fiis-parallel-model { font-size: var(--fi-text-xs); font-weight: 700; color: var(--fi-slate); text-transform: uppercase; letter-spacing: .04em; }
.ves-wrap.fi-shell .fiis-parallel-text { font-size: var(--fi-text-sm); color: var(--fi-ink); }
.ves-wrap.fi-shell .fiis-parallel-caveat { font-size: var(--fi-text-xs); color: var(--fi-muted); }

/* ============================================================================
 * v1.6.0-rc.28 — unified shell: wider work column + one cohesive header band.
 * Last-loaded overrides only (the rc.17 saas strings the tests pin are untouched).
 * Flat solid fills only.
 * ========================================================================== */
.ves-wrap.fi-shell { --fi-headbar-h: 60px; }

/* 1) Wider center: the work column was capped at 1040px and read narrow on wide
   screens. Use more of the canvas and let the breathing room come from the rail. */
.ves-wrap.fi-shell .ves-page[data-page="social"] .ves-page-inner {
    max-width: 1360px;
    padding-left: var(--fi-space-5);
    padding-right: var(--fi-space-5);
}

/* 2) One cohesive header band: the global topbar is 60px, so align the sidebar
   header and the center (Signal Room) header to the same height, surface and
   hairline — they now read as a single continuous bar across the shell. */
.ves-wrap.fi-shell .ves-sidebar-head,
.ves-wrap.fi-shell .fiis-convo-head {
    min-height: var(--fi-headbar-h);
    box-sizing: border-box;
    align-items: center;
    background: var(--fi-surface);
    border-bottom: 1px solid var(--fi-border);
}
.ves-wrap.fi-shell .fiis-convo-head {
    padding-top: var(--fi-space-2);
    padding-bottom: var(--fi-space-2);
}

/* 3) The work card sits flush under the unified band (less "floating card",
   more app surface) so the header continues the rail/topbar line. */
.ves-wrap.fi-shell .fiis-convo {
    border-radius: var(--fi-radius-lg);
    box-shadow: var(--fi-shadow-sm);
}

@media (max-width: 860px) {
    .ves-wrap.fi-shell .ves-page[data-page="social"] .ves-page-inner {
        padding-left: var(--fi-space-3);
        padding-right: var(--fi-space-3);
    }
}

/* v1.6.0-rc.30 — header overflow menu (declutter: one primary + a dropdown). Flat fills only. */
.ves-wrap.fi-shell .fiis-menu { position: relative; display: inline-flex; }
.ves-wrap.fi-shell .fiis-menu-toggle { white-space: nowrap; }
.ves-wrap.fi-shell .fiis-menu-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--fi-space-1);
    background: var(--fi-surface);
    border: 1px solid var(--fi-border);
    border-radius: var(--fi-radius-md);
    box-shadow: var(--fi-shadow-md);
}
.ves-wrap.fi-shell .fiis-menu-pop[hidden] { display: none; }
.ves-wrap.fi-shell .fiis-menu-item {
    display: flex;
    align-items: center;
    gap: var(--fi-space-2);
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--fi-ink);
    font-size: var(--fi-text-sm);
    padding: var(--fi-space-2) var(--fi-space-3);
    border-radius: var(--fi-radius-sm);
    cursor: pointer;
}
.ves-wrap.fi-shell .fiis-menu-item:hover { background: var(--fi-primary-050); color: var(--fi-primary); }
.ves-wrap.fi-shell .fiis-menu-sep { height: 1px; background: var(--fi-border); margin: var(--fi-space-1) 0; }

/* v1.6.0-rc.31 — collapsible sidebar nav groups (IA declutter). Flat fills only. */
.ves-wrap.fi-shell .ves-nav-group-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fi-space-2);
    border: 0;
    background: transparent;
    cursor: pointer;
}
.ves-wrap.fi-shell .ves-nav-group-toggle:hover .ves-nav-group-title { color: var(--fi-ink); }
.ves-wrap.fi-shell .ves-nav-group-toggle:hover .ves-nav-group-chevron { color: var(--fi-ink); }
.ves-wrap.fi-shell .ves-nav-group-toggle .ves-nav-group-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.ves-wrap.fi-shell .ves-nav-group-chevron {
    flex: 0 0 auto;
    color: var(--fi-muted);
    transition: transform .16s ease, color .16s ease;
}
.ves-wrap.fi-shell .ves-nav-group.is-collapsed .ves-nav-group-chevron { transform: rotate(-90deg); }
.ves-wrap.fi-shell .ves-nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.ves-wrap.fi-shell .ves-nav-group.is-collapsed .ves-nav-group-items { display: none; }
/* Collapsed sidebar (icon-rail) keeps every item reachable — never hide items there. */
.ves-wrap.fi-shell.is-sidebar-collapsed .ves-nav-group.is-collapsed .ves-nav-group-items { display: flex; }
.ves-wrap.fi-shell.is-sidebar-collapsed .ves-nav-group-chevron { display: none; }

/* v1.6.0-rc.32 — scan explainer disclosure (declutter the form top). Flat fills only. */
.ves-wrap.fi-shell .fiis-scan-explainer {
    border: 1px solid var(--fi-border);
    border-radius: var(--fi-radius-md);
    background: var(--fi-surface);
    margin-bottom: var(--fi-space-3);
}
.ves-wrap.fi-shell .fiis-scan-explainer-summary {
    display: flex;
    align-items: center;
    gap: var(--fi-space-2);
    list-style: none;
    cursor: pointer;
    padding: var(--fi-space-3) var(--fi-space-4);
    user-select: none;
}
.ves-wrap.fi-shell .fiis-scan-explainer-summary::-webkit-details-marker { display: none; }
.ves-wrap.fi-shell .fiis-scan-explainer-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fi-text-sm);
    font-weight: 600;
    color: var(--fi-ink);
}
.ves-wrap.fi-shell .fiis-scan-explainer-chevron {
    flex: 0 0 auto;
    color: var(--fi-muted);
    transition: transform .16s ease;
}
.ves-wrap.fi-shell .fiis-scan-explainer[open] .fiis-scan-explainer-chevron { transform: rotate(180deg); }
.ves-wrap.fi-shell .fiis-scan-explainer-body {
    padding: 0 var(--fi-space-4) var(--fi-space-4);
    border-top: 1px solid var(--fi-border);
}

/* v1.6.0-rc.33 — overflow-menu keyboard navigation: a clear focus ring + highlight
   on the roving menu item, so keyboard users always see where they are. Flat. */
.ves-wrap.fi-shell .fiis-menu-item:focus-visible {
    outline: 2px solid var(--fi-primary);
    outline-offset: -2px;
    background: var(--fi-primary-050);
    color: var(--fi-primary);
}

/* v1.6.0-rc.34 — UX deepening. Flat fills only.
   (a) A forward scan-progress stepper, (b) keyboard focus-visible for the rc.31/
   rc.32 disclosure controls. */
.ves-wrap.fi-shell .fiis-scan-progress {
    list-style: none;
    margin: var(--fi-space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ves-wrap.fi-shell .fiis-scan-step {
    display: flex;
    align-items: center;
    gap: var(--fi-space-2);
    font-size: var(--fi-text-xs);
    color: var(--fi-muted);
    line-height: 1.5;
    opacity: .6;
    transition: opacity .16s ease, color .16s ease;
}
.ves-wrap.fi-shell .fiis-scan-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fi-border);
}
.ves-wrap.fi-shell .fiis-scan-step.is-done { opacity: 1; color: var(--fi-ink); }
.ves-wrap.fi-shell .fiis-scan-step.is-done .fiis-scan-dot { background: var(--fi-primary); }
.ves-wrap.fi-shell .fiis-scan-step.is-active { opacity: 1; color: var(--fi-ink); font-weight: 600; }
.ves-wrap.fi-shell .fiis-scan-step.is-active .fiis-scan-dot {
    background: var(--fi-primary);
    animation: fiis-scan-pulse 1s ease-in-out infinite;
}
@keyframes fiis-scan-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .ves-wrap.fi-shell .fiis-scan-step { transition: none; }
    .ves-wrap.fi-shell .fiis-scan-step.is-active .fiis-scan-dot { animation: none; }
}
/* Keyboard focus ring for the disclosure controls added in rc.31 / rc.32. */
.ves-wrap.fi-shell .ves-nav-group-toggle:focus-visible,
.ves-wrap.fi-shell .fiis-scan-explainer-summary:focus-visible {
    outline: 2px solid var(--fi-primary);
    outline-offset: 2px;
    border-radius: var(--fi-radius-sm);
}

/* v1.6.0-rc.35 — Stop control. While busy the send button becomes a stop button
   (neutral/danger tint) so the long wait is always cancellable. Flat fills only. */
.ves-wrap.fi-shell .fiis-send[data-busy] {
    background: var(--fi-danger);
    color: var(--fi-white);
}
.ves-wrap.fi-shell .fiis-send[data-busy]:hover { background: var(--fi-danger); filter: brightness(1.05); }

/* v1.6.0-rc.37 — readable AI markdown (headings/rules) + safe textarea content. */
.ves-wrap.fi-shell .fiis-md-h {
    display: block;
    margin: var(--fi-space-3) 0 var(--fi-space-1);
    font-size: var(--fi-text-sm);
    font-weight: 700;
    color: var(--fi-ink);
    letter-spacing: -.01em;
}
.ves-wrap.fi-shell .fiis-md-h:first-child { margin-top: 0; }
.ves-wrap.fi-shell .ves-textarea { padding-top: 10px; overflow-y: auto; }

/* v1.6.0-rc.38 — Signal Room reading polish. Now that AI markdown RENDERS (rc.37),
   tune it so long, multi-section analyses read crisply: clear section dividers +
   rhythm on headings, no redundant blank line after a heading, and a comfortable
   line-height for long prose. Flat fills only. */
.ves-wrap.fi-shell .fiis-msg.is-assistant .fiis-msg-bubble { line-height: 1.62; }
.ves-wrap.fi-shell .fiis-md-h {
    border-top: 1px solid var(--fi-border);
    padding-top: var(--fi-space-3);
    margin: var(--fi-space-3) 0 var(--fi-space-2);
}
.ves-wrap.fi-shell .fiis-md-h:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ves-wrap.fi-shell .fiis-md-h + br { display: none; } /* the heading owns its spacing */
.ves-wrap.fi-shell .fiis-card-body { line-height: 1.55; }

/* ===========================================================================
 * v1.6.0-rc.39 — empty-state guidance + card/header polish.
 * 1. The results-region empties were a bare grey line; now they guide the eye
 *    icon → message → CTA in one centred column, so an un-run page invites the
 *    next action instead of just stating emptiness.
 * 2. Analysis/result cards gain a calm hover lift (on top of the existing
 *    shadow/border emphasis) for a touch more depth — motion-safe.
 * 3. Workspace page heads get a tighter eyebrow → title → sub cadence with the
 *    action row aligned to the title. Flat fills only; scoped to .fi-shell.
 * ======================================================================== */
.ves-wrap.fi-shell .fiis-region-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fi-space-3);
    padding: var(--fi-space-8) var(--fi-space-4);
}
/* The region icon is a bare glyph (not the boxed library icon) — reset the
   earlier .fiis-empty-ico box treatment when it sits inside a region empty. */
.ves-wrap.fi-shell .fiis-region-empty .fiis-empty-ico {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    color: var(--fi-primary);
    opacity: .6;
}
.ves-wrap.fi-shell .fiis-empty-text {
    margin: 0;
    max-width: 46ch;
    font-size: var(--fi-fs-sm);
    line-height: var(--fi-lh-normal);
    color: var(--fi-muted);
}
.ves-wrap.fi-shell .fiis-empty-cta {
    margin-top: var(--fi-space-1);
    display: inline-flex;
    align-items: center;
    gap: var(--fi-space-1);
}

/* Card hover: a subtle lift in addition to the rc.20 shadow/border emphasis. */
.ves-wrap.fi-shell .fiis-card {
    transition: box-shadow .15s var(--fi-ease), border-color .15s var(--fi-ease), transform .15s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-card:hover { transform: translateY(-1px); }

/* Page-head rhythm: tighter title leading + a clear eyebrow → title → sub
   cadence, with the action row aligned to the title row (not stretched). */
.ves-wrap.fi-shell .ves-page-title { line-height: 1.2; }
.ves-wrap.fi-shell .ves-page-title[data-eyebrow]::before { color: var(--fi-primary); }
.ves-wrap.fi-shell .ves-page-sub { line-height: var(--fi-lh-normal); margin-top: var(--fi-space-1); }
.ves-wrap.fi-shell .ves-page-head-actions { align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
    .ves-wrap.fi-shell .fiis-card:hover { transform: none; }
}

/* ===========================================================================
 * v1.6.0-rc.40 — Signal Room width: less gutter, more canvas.
 * The work column was capped at 1360px and still read narrow on wide screens —
 * the center box floated with big empty gutters either side, out of proportion
 * with the full-height rail. Widen the cap so the room uses most of the canvas
 * (on common large screens the side gutter collapses to the column padding,
 * and the breathing room comes from the rail), with a sane upper bound so line
 * lengths stay reasonable on ultra-wide displays. Last-loaded override (the
 * rc.28 `max-width: 1360px` string the test pins is left intact above); the
 * fluid `min()` lets the column fill the canvas until the cap. Flat fills only.
 * ======================================================================== */
.ves-wrap.fi-shell .ves-page[data-page="social"] .ves-page-inner {
    max-width: min(100%, 1760px);
}

/* ===========================================================================
 * v1.6.0-rc.41 — Signal Room: fully fluid, fit to the monitor.
 * rc.40 capped the work column at 1760px; on very large monitors that still
 * left a gutter. Drop the cap so the column fills the canvas at ANY monitor
 * size (true fit-to-monitor), and let the side gutter scale proportionally with
 * the viewport so it stays a thin, consistent margin at every size. The phone
 * full-bleed (≤560px, padding 0) is left untouched — the proportional gutter
 * only applies from 561px up. Last-loaded override (the rc.40 `min(100%, 1760px)`
 * string the test pins is left intact above). Flat fills only.
 * ======================================================================== */
.ves-wrap.fi-shell .ves-page[data-page="social"] .ves-page-inner {
    max-width: none;
}
@media (min-width: 561px) {
    .ves-wrap.fi-shell .ves-page[data-page="social"] .ves-page-inner {
        padding-left: clamp(var(--fi-space-4), 1.6vw, var(--fi-space-6));
        padding-right: clamp(var(--fi-space-4), 1.6vw, var(--fi-space-6));
    }
}

/* ===========================================================================
 * v1.6.0-rc.42 — top breathing room, a real profile, and a calm "live" feel.
 *   1) TOP SPACING: the sidebar header sat flush against the very top edge (and
 *      read taller than the topbar band, so it clipped). Grow the shared top band
 *      a little and add real top padding so nothing hugs the screen edge —
 *      especially in the rail. (The rc.28 `--fi-headbar-h: 60px` token + the
 *      `min-height: var(--fi-headbar-h)` band string are left intact; these are
 *      later overrides.)
 *   2) PROFILE: the avatar can now show a real picture (gravatar/host avatar)
 *      with the initials as a graceful fallback, plus a compact profile row in
 *      the rail foot (avatar · name · "online").
 *   3) LIVE + GENTLE MOTION: the presence dots breathe, and the shell rises in
 *      softly on load. All motion is disabled under prefers-reduced-motion.
 * Last-loaded token layer; flat fills only; scoped to .fi-shell.
 * ======================================================================== */

/* 1) Top breathing room — a slightly taller, aligned top band + rail top pad. */
.ves-wrap.fi-shell .ves-topbar { height: 68px; }
.ves-wrap.fi-shell .ves-sidebar-head {
    min-height: 68px;
    padding-top: var(--fi-space-4);
    padding-bottom: var(--fi-space-3);
    align-items: center;
}
.ves-wrap.fi-shell .ves-sidebar-nav { padding-top: var(--fi-space-3); }

/* 2) Profile picture — image layered over the initials fallback. */
.ves-wrap.fi-shell .ves-user-avatar,
.ves-wrap.fi-shell .ves-avatar { position: relative; overflow: visible; }
.ves-wrap.fi-shell .ves-user-avatar-img,
.ves-wrap.fi-shell .ves-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
    background: var(--fi-surface);
}
/* The presence dot: a small "online" mark on the avatar. */
.ves-wrap.fi-shell .ves-avatar-presence {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: var(--fi-radius-pill);
    background: #22C55E;
    border: 2px solid var(--fi-surface);
    z-index: 2;
}

/* The rail profile row (avatar · name · online). */
.ves-wrap.fi-shell .ves-sidebar-profile {
    display: flex;
    align-items: center;
    gap: var(--fi-space-3);
    margin-bottom: var(--fi-space-2);
    padding: var(--fi-space-2);
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-md);
    background: var(--fi-surface);
    color: var(--fi-ink);
    text-decoration: none;
    transition: border-color .15s var(--fi-ease), background-color .15s var(--fi-ease);
}
.ves-wrap.fi-shell .ves-sidebar-profile:hover { border-color: var(--fi-primary); background: var(--fi-primary-050); }
.ves-wrap.fi-shell .ves-sidebar-profile-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--fi-radius-pill);
    background: var(--fi-ink);
    color: var(--fi-white);
    display: grid;
    place-items: center;
    font-size: var(--fi-fs-xs);
    font-weight: var(--fi-fw-bold);
}
.ves-wrap.fi-shell .ves-sidebar-profile-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ves-wrap.fi-shell .ves-sidebar-profile-name {
    font-size: var(--fi-fs-sm);
    font-weight: var(--fi-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ves-wrap.fi-shell .ves-sidebar-profile-meta {
    font-size: var(--fi-fs-xs);
    color: var(--fi-muted);
    display: flex;
    align-items: center;
    gap: var(--fi-space-1);
}
.ves-wrap.fi-shell .ves-sidebar-profile-meta::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--fi-radius-pill);
    background: #22C55E;
    flex: 0 0 auto;
}
.ves-wrap.fi-shell.is-sidebar-collapsed .ves-sidebar-profile-id { display: none; }

/* 3) Live + gentle motion — presence breathes, the shell rises in softly. */
.ves-wrap.fi-shell .ves-workspace-status-dot,
.ves-wrap.fi-shell .ves-avatar-presence,
.ves-wrap.fi-shell .ves-sidebar-profile-meta::before {
    animation: ves-presence-pulse 2.4s var(--fi-ease) infinite;
}
@keyframes ves-presence-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
    70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.ves-wrap.fi-shell .ves-sidebar,
.ves-wrap.fi-shell .ves-main-col {
    animation: ves-shell-rise .5s var(--fi-ease) both;
}
.ves-wrap.fi-shell .ves-main-col { animation-delay: .06s; }
@keyframes ves-shell-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ves-wrap.fi-shell .ves-workspace-status-dot,
    .ves-wrap.fi-shell .ves-avatar-presence,
    .ves-wrap.fi-shell .ves-sidebar-profile-meta::before,
    .ves-wrap.fi-shell .ves-sidebar,
    .ves-wrap.fi-shell .ves-main-col { animation: none; }
}

/* ===========================================================================
 * v1.6.0-rc.43 — sidebar nav clarity + a calmer Signal Room action cluster.
 *   1) NAV: the active item read washed-out — a dark-theme rule (white text on a
 *      faint white bg, from the legacy frontend layer) and an ink-wash rule were
 *      fighting in the light suite, so the active label lost contrast. Define ONE
 *      definitive, high-contrast, on-brand active state here (last layer wins):
 *      a pale-primary fill + full-contrast ink label + primary icon. Soon items
 *      stay readable; the collapsed rail gets a clear active pill.
 *   2) SIGNAL ROOM: the per-answer action buttons were a dense, flat wall. Give
 *      the cluster a hairline + breathing room, quiet the secondary actions so the
 *      primary ones lead, and set the follow-up suggestions apart.
 * Last-loaded token layer; flat fills only; scoped to .fi-shell.
 * ======================================================================== */

/* 1) Sidebar nav — one clear active state (beats the conflicting earlier layers). */
.ves-wrap.fi-shell .ves-nav-item.is-active {
    background: var(--fi-primary-050) !important;
    color: var(--fi-ink) !important;
    font-weight: var(--fi-fw-semibold) !important;
    border-left: 0 !important;
}
.ves-wrap.fi-shell .ves-nav-item.is-active .ves-nav-label {
    color: var(--fi-ink) !important;
    opacity: 1 !important;
}
.ves-wrap.fi-shell .ves-nav-item.is-active .ves-nav-ico-wrap,
.ves-wrap.fi-shell .ves-nav-item.is-active .ves-nav-ico {
    color: var(--fi-primary) !important;
    opacity: 1 !important;
}
/* "Próximamente" items keep their label readable even when active/hovered. */
.ves-wrap.fi-shell .ves-nav-item.is-soon .ves-nav-label { color: var(--fi-ink-2) !important; opacity: 1 !important; }
.ves-wrap.fi-shell .ves-nav-item.is-soon.is-active .ves-nav-label { color: var(--fi-ink) !important; }
/* Hover stays distinct from active (neutral wash, not the primary tint). */
.ves-wrap.fi-shell .ves-nav-item:not(.is-active):hover { background: var(--fi-surface-2) !important; color: var(--fi-ink) !important; }
/* Collapsed rail: a clear active pill on the icon. */
.ves-wrap.fi-shell.is-sidebar-collapsed .ves-nav-item.is-active { background: var(--fi-primary-050) !important; }
/* A touch of rhythm between nav groups. */
.ves-wrap.fi-shell .ves-nav-group + .ves-nav-group { margin-top: var(--fi-space-2); }

/* 2) Signal Room — calmer, clearer action cluster under each answer. */
.ves-wrap.fi-shell .fiis-batch-actions {
    gap: var(--fi-space-2);
    margin-top: var(--fi-space-4);
    padding-top: var(--fi-space-3);
    border-top: 1px solid var(--fi-line);
}
/* Secondary actions recede so the primary ones lead. */
.ves-wrap.fi-shell .fiis-act {
    background: var(--fi-surface-2);
    border-color: var(--fi-line);
    color: var(--fi-ink-2);
}
.ves-wrap.fi-shell .fiis-act:hover { background: var(--fi-white); border-color: var(--fi-primary); color: var(--fi-primary); }
.ves-wrap.fi-shell .fiis-act.is-primary { background: var(--fi-primary); border-color: var(--fi-primary); color: var(--fi-white); }
.ves-wrap.fi-shell .fiis-act.is-primary:hover { background: var(--fi-primary-hover); border-color: var(--fi-primary-hover); color: var(--fi-white); }
/* Follow-up suggestion chips read as a distinct, quieter row. */
.ves-wrap.fi-shell .fiis-followups { display: flex; flex-wrap: wrap; gap: var(--fi-space-1); margin-top: var(--fi-space-3); }

/* ===========================================================================
 * v1.6.0-rc.44 — tool intake forms + Command Room (the remaining surfaces).
 *   1) FORMS: the "Mejorar" (AI-refine) button floated as a detached row right
 *      under each field (a grid `justify-self:end` from the legacy layer), which
 *      read disconnected and noisy. Pin it INSIDE the field at the bottom-right
 *      as one quiet, self-contained affordance; give the field room for it.
 *   2) COMMAND ROOM: flatten the welcome hero (the FI identity is flat fills, but
 *      it carried a soft radial tint) into a clean surface + a calm primary accent,
 *      and make the stat cards feel alive/interactive (hover lift, motion-safe).
 * Last-loaded token layer; flat fills only; scoped to .fi-shell.
 * ======================================================================== */

/* 1) Tool forms — the AI-refine affordance lives inside the field. */
.ves-wrap.fi-shell .ves-input-assist-wrap {
    position: relative !important;
    display: block !important;
    gap: 0 !important;
}
.ves-wrap.fi-shell .ves-input-assist-wrap .ves-textarea { width: 100%; padding-bottom: 36px; }
.ves-wrap.fi-shell .ves-input-assist-wrap .ves-ai-refine-button {
    position: absolute !important;
    right: var(--fi-space-2) !important;
    bottom: var(--fi-space-2) !important;
    justify-self: auto !important;
    min-height: 0 !important;
    padding: var(--fi-space-1) var(--fi-space-3) !important;
    border-radius: var(--fi-radius-pill) !important;
    border: 1px solid var(--fi-line) !important;
    background: var(--fi-surface) !important;
    color: var(--fi-primary) !important;
    font-size: var(--fi-fs-xs) !important;
    font-weight: var(--fi-fw-semibold) !important;
    box-shadow: var(--fi-shadow-sm) !important;
}
.ves-wrap.fi-shell .ves-input-assist-wrap .ves-ai-refine-button:hover {
    border-color: var(--fi-primary) !important;
    background: var(--fi-primary-050) !important;
}

/* 2) Command Room — flat hero + alive stat cards. */
.ves-wrap.fi-shell .ves-dash-hero {
    background: var(--fi-surface);
    border: 1px solid var(--fi-line);
    border-left: 3px solid var(--fi-primary);
}
.ves-wrap.fi-shell .ves-stat-card {
    transition: border-color .15s var(--fi-ease), box-shadow .15s var(--fi-ease), transform .15s var(--fi-ease);
}
.ves-wrap.fi-shell .ves-stat-card:hover {
    border-color: var(--fi-primary);
    box-shadow: var(--fi-shadow-sm);
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
    .ves-wrap.fi-shell .ves-stat-card:hover,
    .ves-wrap.fi-shell .ves-tool-card:hover { transform: none; }
}

/* ===========================================================================
 * v1.6.0-rc.45 — richer output: visual data + a progressive reveal.
 *   1) DATA CHART: when a batch carries numbers, the read now leads with a flat
 *      mini bar chart (top signals by views) so it's easier to grasp than text.
 *   2) PROGRESSIVE REVEAL: the structured answer no longer "dumps" all at once —
 *      the chart fades in, then the analysis cards rise in with a gentle stagger,
 *      then the actions — so a long answer reads as it builds, not a copy-paste.
 * All motion is disabled under prefers-reduced-motion. Flat fills only; scoped.
 * ======================================================================== */

/* 1) Compact, flat data chart (top signals by views). */
.ves-wrap.fi-shell .fiis-chart {
    margin: var(--fi-space-3) 0;
    padding: var(--fi-space-3) var(--fi-space-4);
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-md);
    background: var(--fi-surface);
}
.ves-wrap.fi-shell .fiis-chart-head {
    font-size: var(--fi-fs-xs);
    font-weight: var(--fi-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fi-muted);
    margin-bottom: var(--fi-space-2);
}
.ves-wrap.fi-shell .fiis-chart-row {
    display: grid;
    grid-template-columns: minmax(0, 9rem) 1fr auto;
    align-items: center;
    gap: var(--fi-space-3);
    padding: 3px 0;
}
.ves-wrap.fi-shell .fiis-chart-label {
    font-size: var(--fi-fs-sm);
    color: var(--fi-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ves-wrap.fi-shell .fiis-chart-track {
    height: 8px;
    border-radius: var(--fi-radius-pill);
    background: var(--fi-surface-2);
    overflow: hidden;
}
.ves-wrap.fi-shell .fiis-chart-bar {
    display: block;
    height: 100%;
    border-radius: var(--fi-radius-pill);
    background: var(--fi-primary);
    transform-origin: left center;
    animation: fiis-bar-grow .55s var(--fi-ease) both;
}
.ves-wrap.fi-shell .fiis-chart-val {
    font-size: var(--fi-fs-xs);
    font-weight: var(--fi-fw-semibold);
    color: var(--fi-ink-2);
    font-variant-numeric: tabular-nums;
}
@keyframes fiis-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 2) Progressive reveal of the structured answer (chart -> cards -> actions). */
.ves-wrap.fi-shell .fiis-chart { animation: fiis-block-in .42s var(--fi-ease) both; }
.ves-wrap.fi-shell .fiis-analysis-cards > * { animation: fiis-block-in .42s var(--fi-ease) both; }
.ves-wrap.fi-shell .fiis-analysis-cards > *:nth-child(1) { animation-delay: .06s; }
.ves-wrap.fi-shell .fiis-analysis-cards > *:nth-child(2) { animation-delay: .14s; }
.ves-wrap.fi-shell .fiis-analysis-cards > *:nth-child(3) { animation-delay: .22s; }
.ves-wrap.fi-shell .fiis-analysis-cards > *:nth-child(4) { animation-delay: .30s; }
.ves-wrap.fi-shell .fiis-analysis-cards > *:nth-child(5) { animation-delay: .38s; }
.ves-wrap.fi-shell .fiis-analysis-cards > *:nth-child(n+6) { animation-delay: .44s; }
.ves-wrap.fi-shell .fiis-batch-actions { animation: fiis-block-in .42s var(--fi-ease) both; animation-delay: .34s; }
@keyframes fiis-block-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .ves-wrap.fi-shell .fiis-chart-bar,
    .ves-wrap.fi-shell .fiis-chart,
    .ves-wrap.fi-shell .fiis-analysis-cards > *,
    .ves-wrap.fi-shell .fiis-batch-actions { animation: none; }
}

/* ===========================================================================
 * v1.6.0-rc.46 — expanded data charts (a compact in-answer dashboard).
 * rc.45 drew one bar chart (views). This expands it into: a summary strip
 * (batch totals + avg engagement rate) and TWO leaderboards — volume (views)
 * and resonance (engagement rate, distinct slate bars). Reuses the rc.45
 * row/track/bar primitives; flat fills only; reduced-motion already covers the
 * shared .fiis-chart-bar grow + reveal. Scoped to .fi-shell.
 * ======================================================================== */
.ves-wrap.fi-shell .fiis-chart-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fi-space-2);
    margin-bottom: var(--fi-space-3);
}
.ves-wrap.fi-shell .fiis-chart-stat {
    flex: 1 1 0;
    min-width: 84px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--fi-space-2) var(--fi-space-3);
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-sm);
    background: var(--fi-surface-2);
}
.ves-wrap.fi-shell .fiis-chart-stat-v {
    font-size: var(--fi-fs-md);
    font-weight: var(--fi-fw-bold);
    color: var(--fi-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ves-wrap.fi-shell .fiis-chart-stat-k {
    font-size: var(--fi-fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fi-muted);
}
/* Two stacked leaderboards inside one chart card, separated by a hairline. */
.ves-wrap.fi-shell .fiis-chart-block + .fiis-chart-block {
    margin-top: var(--fi-space-3);
    padding-top: var(--fi-space-3);
    border-top: 1px solid var(--fi-line);
}
/* Resonance bars read as a distinct (slate) series vs. the primary volume bars. */
.ves-wrap.fi-shell .fiis-chart-block--er .fiis-chart-bar { background: var(--fi-slate); }

/* ===========================================================================
 * v1.6.0-rc.47 — interactive charts: a metric switcher.
 * rc.46 stacked two leaderboards (views + ER). This makes the dashboard
 * explorable: one ranking, switchable across Views / Likes / Comentarios / ER
 * via flat pill tabs (CSS-only visuals; a tiny delegated handler toggles panes).
 * Flat fills only; scoped to .fi-shell.
 * ======================================================================== */
.ves-wrap.fi-shell .fiis-chart-switch {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fi-space-1);
    margin-bottom: var(--fi-space-3);
}
.ves-wrap.fi-shell .fiis-chart-tab {
    padding: var(--fi-space-1) var(--fi-space-3);
    border: 1px solid var(--fi-line);
    border-radius: var(--fi-radius-pill);
    background: var(--fi-surface);
    color: var(--fi-ink-2);
    font-size: var(--fi-fs-xs);
    font-weight: var(--fi-fw-semibold);
    cursor: pointer;
    transition: background-color .15s var(--fi-ease), border-color .15s var(--fi-ease), color .15s var(--fi-ease);
}
.ves-wrap.fi-shell .fiis-chart-tab:hover { border-color: var(--fi-primary); color: var(--fi-primary); }
.ves-wrap.fi-shell .fiis-chart-tab.is-active {
    background: var(--fi-primary);
    border-color: var(--fi-primary);
    color: var(--fi-white);
}
.ves-wrap.fi-shell .fiis-chart-pane[hidden] { display: none; }