/* =====================================================================
   ITF IA Agent — estilos del widget de chat
   Basado en el sistema de diseño Dormio · Italfarmaco
   ===================================================================== */

/* ─── Variables ───────────────────────────────────────────────────────── */
#itf-ia-agent {
    --night:        #154160;
    --night-2:      #0e2f48;
    --night-light:  #c5cbe8;
    --indigo:       #3b4bd8;
    --indigo-soft:  #6b78f0;
    --accent:       #0083ad;
    --accent-alt:   #2bbdab;
    --ink:          #6B727A;
    --muted:        #6a7396;
    --line:         #e4e7f4;
    --bg:           #f6f7fc;
    --card:         #ffffff;
    --warn:         #e8623d;

    /* Canales RGB para uso en rgba() */
    --accent-rgb:   0, 131, 173;
    --night-rgb:    21, 65, 96;
    --indigo-rgb:   59, 75, 216;
    --warn-rgb:     232, 98, 61;
    --shadow-rgb:   15, 21, 53;

    --gradient-night:  linear-gradient(135deg, var(--night), var(--night-2));
    --gradient-accent: linear-gradient(135deg, var(--indigo), var(--indigo-soft));
    --gradient-cta:    linear-gradient(135deg, var(--accent), var(--accent-alt));

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-base: 16px;

    --fs-xs:   calc(var(--font-base) * 0.75);
    --fs-sm:   calc(var(--font-base) * 0.875);
    --fs-base: var(--font-base);
    --fs-lg:   calc(var(--font-base) * 1.125);

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;

    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-full: 9999px;

    --shadow-accent: 0 10px 30px -8px rgba(var(--accent-rgb), 0.5);
    --shadow-chat:   0 18px 50px rgba(var(--shadow-rgb), 0.28);

    --t-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);

    --z-widget: 9995;
    --z-toggle: 9998;

    --btn-size:    84px;
    --widget-w:    420px;
    --header-h:    64px;

    font-family: var(--font-sans);
    box-sizing: border-box;
}

#itf-ia-agent *, #itf-ia-agent *::before, #itf-ia-agent *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

/* ─── Utilidad ────────────────────────────────────────────────────────── */
#itf-ia-agent.itf-ia-hidden  { display: none !important; }
#itf-ia-agent .itf-ia-hidden { display: none !important; }

/* ─── Bocadillo teaser ────────────────────────────────────────────────── */
#itf-ia-teaser {
    position: fixed;
    right: 24px;
    bottom: calc(24px + var(--btn-size) + 14px);
    width: 280px;
    max-width: calc(100vw - 48px);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 30px rgba(var(--shadow-rgb), 0.16);
    padding: var(--sp-4) var(--sp-5);
    z-index: var(--z-toggle);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity var(--t-normal), transform var(--t-normal);
}
#itf-ia-teaser.itf-ia-show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
#itf-ia-teaser::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: var(--card);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transform: rotate(45deg);
}
#itf-ia-teaser-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--night-2);
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: var(--r-full);
    transition: background var(--t-fast), color var(--t-fast);
}
#itf-ia-teaser-close:hover { background: var(--line); color: var(--night); }
#itf-ia-teaser-close svg { width: 13px; height: 13px; }
.itf-ia-teaser-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--night);
    margin-bottom: var(--sp-2) !important;
}
#itf-ia-teaser-text {
    font-size: var(--fs-sm);
    color: var(--ink);
    line-height: 1.4;
    padding-right: var(--sp-4);
}

/* ─── Botón flotante ──────────────────────────────────────────────────── */
#itf-ia-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: var(--btn-size);
    height: var(--btn-size);
    border-radius: var(--r-full);
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-accent);
    z-index: var(--z-toggle);
    transition: transform var(--t-normal), box-shadow var(--t-normal);
}
#itf-ia-toggle:hover { transform: scale(1.06); }
#itf-ia-toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-full);
    animation: itf-ia-pulse 2.6s infinite;
}
@keyframes itf-ia-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(var(--accent-rgb), 0.5); }
    70%  { box-shadow: 0 0 0 26px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0    rgba(var(--accent-rgb), 0); }
}
.itf-ia-toggle-icon,
#itf-ia-toggle .itf-ia-icon-chat { width: 50px; height: 50px; object-fit: contain; }

/* Badge */
#itf-ia-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: var(--r-full);
    background: var(--warn);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    display: none;
    place-items: center;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(var(--warn-rgb), 0.45);
}
#itf-ia-toggle.itf-ia-has-notification #itf-ia-badge {
    display: grid;
    animation: itf-ia-badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes itf-ia-badge-pop {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}

/* ─── Overlay ─────────────────────────────────────────────────────────── */
#itf-ia-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--night-rgb), 0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-normal);
    z-index: calc(var(--z-widget) - 1);
}
#itf-ia-overlay.itf-ia-active {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Widget ──────────────────────────────────────────────────────────── */
#itf-ia-widget {
    position: fixed;
    background: var(--card);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-chat);
    z-index: var(--z-widget);
    transition: opacity var(--t-normal), transform var(--t-normal);
}

/* Vista modal (desktop) */
#itf-ia-widget.view-full {
    inset: 0;
    margin: auto;
    width: min(var(--widget-max-w, 992px), 94vw);
    height: min(700px, 92vh);
    border-radius: var(--r-lg);
    transform: scale(0.98);
}
#itf-ia-widget.view-full.itf-ia-hidden {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    display: flex !important;
}

/* Vista lateral */
#itf-ia-widget.view-side {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--widget-w);
    max-width: 96vw;
    border-radius: 0;
    transform: translateX(24px);
}
#itf-ia-widget.view-side.itf-ia-hidden {
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
    display: flex !important;
}

/* Widget visible (ambos modos) */
#itf-ia-widget:not(.itf-ia-hidden).view-full { transform: scale(1); }
#itf-ia-widget:not(.itf-ia-hidden).view-side { transform: translateX(0); }

/* ─── Toggle — iconos ─────────────────────────────────────────────────── */
#itf-ia-toggle .itf-ia-icon-chat,
#itf-ia-toggle .itf-ia-icon-close {
    transition: opacity var(--t-fast), transform var(--t-fast);
}
#itf-ia-toggle .itf-ia-icon-close {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
    width: 28px;
    height: 28px;
}
#itf-ia-toggle.active .itf-ia-icon-chat {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}
#itf-ia-toggle.active .itf-ia-icon-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}
#itf-ia-toggle.active.in-side { display: none; }

/* ─── Cabecera ────────────────────────────────────────────────────────── */
#itf-ia-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--header-h);
    padding: 0 var(--sp-4);
    background: var(--gradient-night);
    color: #fff;
    flex: 0 0 auto;
}
#itf-ia-header-info { 
    flex: 1;
    min-width: 0;
    padding: 1rem 0;
}
#itf-ia-agent-name {
    display: block;
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .8rem;
}
#itf-ia-agent-tagline {
    font-size: var(--fs-xs);
    color: var(--night-light);
    line-height: 1.5;
}
#itf-ia-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
#itf-ia-header-actions button:not(#itf-ia-panel-btn) {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--t-fast);
}
#itf-ia-header-actions button:not(#itf-ia-panel-btn):hover { background: rgba(255,255,255,0.14); }
#itf-ia-header-actions button:not(#itf-ia-panel-btn) svg { width: 18px; height: 18px; }
#itf-ia-panel-btn { margin-right: var(--sp-2); }

/* ─── Mensajes ────────────────────────────────────────────────────────── */
#itf-ia-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    background: var(--bg);
    scroll-behavior: smooth;
}
#itf-ia-messages::-webkit-scrollbar { width: 5px; }
#itf-ia-messages::-webkit-scrollbar-track { background: transparent; }
#itf-ia-messages::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }

#itf-ia-agent .itf-ia-bubble {
    max-width: 88%;
    padding: 11px 15px;
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    line-height: 1.55;
    word-wrap: break-word;
}
#itf-ia-agent .itf-ia-agent {
    background: var(--card);
    border: 1px solid var(--line);
    border-top-left-radius: 4px;
    color: var(--ink);
    align-self: flex-start;
}
#itf-ia-agent .itf-ia-agent p { margin: 0 0 0.5em; }
#itf-ia-agent .itf-ia-agent p:last-child { margin-bottom: 0; }
#itf-ia-agent .itf-ia-agent ol { margin: 0 0 0.5em; padding-left: 1.4em; }
#itf-ia-agent .itf-ia-agent ol:last-child { margin-bottom: 0; }
#itf-ia-agent .itf-ia-agent li { margin-bottom: 0.25em; }
#itf-ia-agent .itf-ia-agent strong { font-weight: 600; color: var(--night); }
#itf-ia-agent .itf-ia-user {
    background: var(--gradient-accent);
    color: #fff;
    border-top-right-radius: 4px;
    align-self: flex-end;
}

/* Typing indicator */
#itf-ia-agent #itf-ia-typing {
    display: flex !important;
    gap: 5px;
    align-items: center;
    padding: 12px 16px;
}
#itf-ia-typing span {
    width: 7px;
    height: 7px;
    border-radius: var(--r-full);
    background: var(--indigo-soft);
    animation: itf-ia-typing 1.3s infinite ease-in-out;
}
#itf-ia-typing span:nth-child(2) { animation-delay: 0.18s; }
#itf-ia-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes itf-ia-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%            { transform: translateY(-5px); opacity: 1; }
}

/* ─── Disclaimer ──────────────────────────────────────────────────────── */
#itf-ia-disclaimer {
    padding: 8px var(--sp-4) 10px;
    background: var(--card);
    font-size: 11px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    line-height: 1.4;
}

/* ─── Input ───────────────────────────────────────────────────────────── */
#itf-ia-input-area {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--card);
    border-top: 1px solid var(--line);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin: var(--sp-3) var(--sp-4);
    padding: 6px 6px 6px 14px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
#itf-ia-input-area:focus-within {
    border-color: var(--indigo-soft);
    box-shadow: 0 0 0 3px rgba(var(--indigo-rgb), 0.12);
}
#itf-ia-input {
    flex: 1;
    border: none;
    background: transparent;
    resize: none;
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--ink);
    max-height: 120px;
    padding: 7px 0;
    overflow-y: auto;
}
#itf-ia-input:focus { outline: none; }
#itf-ia-input::placeholder { color: var(--muted); }
#itf-ia-send {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    border: none;
    background: var(--gradient-cta);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    transition: transform var(--t-fast), opacity var(--t-fast);
}
#itf-ia-send:hover { transform: scale(1.05); }
#itf-ia-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
#itf-ia-send svg { width: 18px; height: 18px; }

/* ─── Modal de consent ────────────────────────────────────────────────── */
#itf-ia-consent-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 320px;
    max-width: calc(100vw - 48px);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.28);
    padding: var(--sp-5);
    z-index: var(--z-toggle);
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
    pointer-events: none;
    transition: opacity var(--t-normal), transform var(--t-normal);
}
#itf-ia-consent-modal.itf-ia-show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
#itf-ia-consent-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: var(--r-full);
    transition: background var(--t-fast), color var(--t-fast);
}
#itf-ia-consent-close:hover { background: var(--line); color: var(--night); }
#itf-ia-consent-close svg { width: 13px; height: 13px; }
#itf-ia-consent-title {
    font-size: var(--fs-sm);
    color: var(--night);
    margin-bottom: var(--sp-3) !important;
    padding-right: var(--sp-4);
}
#itf-ia-consent-modal > p:not(#itf-ia-consent-title) {
    font-size: var(--fs-sm);
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: var(--sp-4) !important;
}
#itf-ia-consent-cta {
    display: block;
    width: 100%;
    padding: 10px var(--sp-4);
    background: var(--gradient-cta);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: opacity var(--t-fast), transform var(--t-fast);
}
#itf-ia-consent-cta:hover { opacity: 0.9; transform: scale(1.01); }

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
    #itf-ia-widget.view-full,
    #itf-ia-widget.view-side {
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        border-radius: 0;
        inset: 0;
        margin: 0;
        transform: translateY(20px);
    }
    #itf-ia-widget.view-full.itf-ia-hidden,
    #itf-ia-widget.view-side.itf-ia-hidden {
        transform: translateY(20px);
    }
    #itf-ia-widget:not(.itf-ia-hidden).view-full,
    #itf-ia-widget:not(.itf-ia-hidden).view-side {
        transform: translateY(0);
    }
    #itf-ia-toggle {
        bottom: 16px;
        right: 16px;
        --btn-size: 70px;
    }
    #itf-ia-toggle.active { display: none; }
    #itf-ia-widget { z-index: 99999; }
    .itf-ia-toggle-icon,
    #itf-ia-toggle .itf-ia-icon-chat { width: 42px; height: 42px; }
}


/* ─── Cuerpo del widget (chat + panel) ───────────────────────────────── */
#itf-ia-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
#itf-ia-chat {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

/* ─── Panel lateral de estado ────────────────────────────────────────── */
#itf-ia-panel {
    width: 240px;
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    border-left: 1px solid var(--line);
    background: var(--bg);
    overflow-y: auto;
    padding: var(--sp-4);
}
#itf-ia-panel::-webkit-scrollbar { width: 4px; }
#itf-ia-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }

/* Ocultar panel en vista lateral y en mobile */
#itf-ia-widget.view-side #itf-ia-panel { display: none; }

#itf-ia-panel-heading {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
#itf-ia-panel-phase {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
}
#itf-ia-panel-phase::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--r-full);
    background: var(--accent);
    flex-shrink: 0;
}

/* Tarjeta de puntuación */
#itf-ia-score-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.itf-ia-score-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.itf-ia-score-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
#itf-ia-score-number {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--class-color, var(--night));
}
.itf-ia-score-max {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--muted);
}
#itf-ia-score-class {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--class-color, var(--night));
}
.itf-ia-score-bar {
    height: 6px;
    border-radius: var(--r-full);
    background: var(--line);
    overflow: hidden;
}
#itf-ia-score-fill {
    height: 100%;
    border-radius: var(--r-full);
    background: var(--class-color, var(--accent));
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#itf-ia-score-pending {
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.4;
}
#itf-ia-score-number:empty::before { content: '—'; }

/* Colores según clasificación */
#itf-ia-panel[data-class="Bajo"]     { --class-color: var(--warn); }
#itf-ia-panel[data-class="Moderado"] { --class-color: #e6a020; }
#itf-ia-panel[data-class="Bueno"]    { --class-color: #2e9e5e; }
#itf-ia-panel[data-class="Óptimo"]   { --class-color: #1a7a48; }

/* Sección de recomendaciones */
#itf-ia-recs-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.itf-ia-recs-heading {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.itf-ia-recs-heading svg { width: 14px; height: 14px; flex: 0 0 auto; }
#itf-ia-recs-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
#itf-ia-recs-list li {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#itf-ia-recs-list .itf-ia-rec-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--night);
}
#itf-ia-recs-list .itf-ia-rec-text {
    font-size: var(--fs-xs);
    color: var(--ink);
    line-height: 1.45;
}

/* ─── Panel estrecho (itf-ia-narrow): bottom sheet ───────────────────────── */

/* Botón "Tu sueño" en header — solo en narrow, solo cuando hay datos */
#itf-ia-panel-btn {
    display: none !important;
    align-items: center;
    gap: 5px;
    padding: 5px 11px 5px 8px;
    border-radius: var(--r-full);
    background: rgba(255,255,255,0.15);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #fff;
    transition: background var(--t-fast);
}
#itf-ia-panel-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
#itf-ia-panel-btn:hover { background: rgba(255,255,255,0.25); }
#itf-ia-widget.itf-ia-narrow #itf-ia-panel-btn:not(.itf-ia-hidden) { display: flex !important; }

/* Handle y botón de cierre — solo visibles en narrow */
.itf-ia-sheet-handle { display: none; }
#itf-ia-panel-close  { display: none; }

/* Overlay de fondo */
#itf-ia-sheet-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--night-rgb), 0.45);
    backdrop-filter: blur(3px);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-normal);
    border-radius: inherit;
    display: none;
}
#itf-ia-widget.itf-ia-narrow #itf-ia-sheet-overlay { display: block; }
#itf-ia-widget.itf-ia-narrow.panel-open #itf-ia-sheet-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Panel como bottom sheet */
#itf-ia-widget.itf-ia-narrow #itf-ia-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    flex: none;
    max-height: 80vh;
    overflow-y: auto;
    border-left: none;
    border-top: none;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -6px 30px rgba(var(--shadow-rgb), 0.18);
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) * 2);
    transform: translateY(105%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 6;
}
#itf-ia-widget.itf-ia-narrow.panel-open #itf-ia-panel { transform: translateY(0); }

/* Handle y close visibles en narrow */
#itf-ia-widget.itf-ia-narrow .itf-ia-sheet-handle {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
    margin: 0 auto var(--sp-3);
    flex-shrink: 0;
}
#itf-ia-widget.itf-ia-narrow #itf-ia-panel-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 34px;
    height: 34px;
    border: none;
    background: var(--line);
    cursor: pointer;
    color: var(--night-2);
    border-radius: var(--r-full);
    transition: background var(--t-fast);
}
#itf-ia-widget.itf-ia-narrow #itf-ia-panel-close:hover { background: rgba(var(--night-rgb), 0.15); }
#itf-ia-widget.itf-ia-narrow #itf-ia-panel-close svg { width: 18px; height: 18px; }

/* ─── Ocultar elementos incompatibles mientras el chat está abierto ──────── */
body.itf-ia-open                        { overflow: hidden !important; }
body.itf-ia-open .cl-consent-settings  { opacity: 0 !important; pointer-events: none !important; }
body.itf-ia-open #itf-ia-consent-modal { display: none !important; }

/* ─── Wrappers de mensaje ────────────────────────────────────────────────── */
.itf-ia-msg-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    max-width: 88%;
}
.itf-ia-agent-wrap { align-self: flex-start; }
.itf-ia-user-wrap  { align-self: flex-end; }

/* Quitar max-width y align-self de las burbujas (ahora en el wrapper) */
#itf-ia-agent .itf-ia-bubble     { max-width: none; }
#itf-ia-agent .itf-ia-agent      { align-self: auto; }
#itf-ia-agent .itf-ia-user       { align-self: auto; }

/* ─── Botones de input (confirm / likert / chips) ────────────────────────── */
#itf-ia-input-buttons {
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

#itf-ia-agent .itf-ia-btn-confirm {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 11px var(--sp-5);
    background: var(--gradient-cta);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: opacity var(--t-fast), transform var(--t-fast);
}
@media (hover: hover) {
    #itf-ia-agent .itf-ia-btn-confirm:hover { opacity: 0.9; transform: scale(1.01); }
}

#itf-ia-agent .itf-ia-input-counter {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: 600;
    margin-bottom: var(--sp-1);
}
#itf-ia-agent .itf-ia-btns-likert {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
#itf-ia-agent .itf-ia-btn-likert {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 7px 14px;
    background: var(--card);
    border: 1px solid rgba(var(--indigo-rgb), 0.35);
    border-radius: var(--r-full);
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
#itf-ia-agent .itf-ia-btn-likert-num {
    font-weight: 700;
    color: var(--night);
}
#itf-ia-agent .itf-ia-btn-sep {
    margin: 0 5px;
    color: var(--muted);
}

#itf-ia-agent .itf-ia-btns-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
#itf-ia-agent .itf-ia-btn-chip {
    padding: 7px var(--sp-3);
    background: var(--card);
    border: 1px solid rgba(var(--indigo-rgb), 0.35);
    border-radius: var(--r-full);
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--night);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}

@media (hover: hover) {
    #itf-ia-agent .itf-ia-btn-likert:hover { border-color: var(--indigo); background: rgba(var(--indigo-rgb), 0.06); color: var(--indigo); }
    #itf-ia-agent .itf-ia-btn-chip:hover   { border-color: var(--indigo); background: rgba(var(--indigo-rgb), 0.06); color: var(--indigo); }
}

/* ─── Feedback (👍/👎) ───────────────────────────────────────────────────── */
#itf-ia-agent .itf-ia-feedback-btns {
    display: flex;
    gap: var(--sp-1);
}
#itf-ia-agent .itf-ia-feedback-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    padding: 0;
    font-family: inherit;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
#itf-ia-agent .itf-ia-feedback-btn:hover       { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
#itf-ia-agent .itf-ia-feedback-btn.active-up   { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
#itf-ia-agent .itf-ia-feedback-btn.active-down { border-color: var(--warn);   color: var(--warn);   background: rgba(var(--warn-rgb), 0.1); }

#itf-ia-agent .itf-ia-feedback-comment {
    margin-top: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
#itf-ia-agent .itf-ia-feedback-comment textarea {
    width: 100%;
    font-size: var(--fs-xs);
    font-family: inherit;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--sp-2);
    resize: none;
    background: var(--bg);
    color: var(--ink);
    box-sizing: border-box;
}
#itf-ia-agent .itf-ia-feedback-comment-send {
    align-self: flex-end;
    font-size: var(--fs-xs);
    font-family: inherit;
    padding: 4px var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
#itf-ia-agent .itf-ia-feedback-comment-send:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.06);
}
#itf-ia-agent .itf-ia-feedback-comment-send:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ─── Barras de progreso (panel) ─────────────────────────────────────────── */
#itf-ia-progress {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.itf-ia-progress-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.itf-ia-progress-label {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
    min-width: 72px;
}
.itf-ia-progress-bar-wrap {
    flex: 1;
    height: 5px;
    border-radius: var(--r-full);
    background: var(--line);
    overflow: hidden;
}
.itf-ia-progress-fill {
    height: 100%;
    border-radius: var(--r-full);
    background: var(--accent);
    width: 0%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.itf-ia-progress-count {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: right;
}
#itf-ia-widget.itf-ia-narrow #itf-ia-progress { display: none; }