/**
 * ai-test-deaj.css — Asistente IA con identidad DEAJ y layout responsivo
 * con altura calculada (header strip + navbar + footer DEAJ + paddings).
 *
 * Variables de altura usadas en el layout:
 *  --ai-chrome     ≈ alto consumido por strip + navbar + cinta + paddings
 *  --ai-chat-h     ≈ altura del card de chat (clamp para no estirarse en monitores grandes)
 */

:root {
    /* ~strip (32) + navbar (66) + cinta (4) + padding section (12) + márgenes
       seguros (16) + footer DEAJ visible parcial (160px reserved). */
    --ai-chrome-mobile: 100px;   /* sin footer en mobile (sticky form) */
    --ai-chrome-desk:   140px;   /* deja respirar en desktop */
}

/* ── Shell del módulo ────────────────────────────────────────────────── */
.ai-shell {
    /* En desktop dejamos un padding inferior chico para que la card de chat
       quede pegada al footer y no haya doble scroll. */
    padding-bottom: .5rem;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.ai-sidebar-inner {
    position: sticky;
    top: 1rem;   /* compensa navbar sticky */
}

.eyebrow-deaj {
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--deaj-secondary-deep, #39a44c);
    font-weight: 600;
}

/* Tabs del sidebar */
.ai-tabs {
    background: #f7faff;
    border: 1px solid rgba(3, 62, 117, .08);
    border-radius: 12px;
    padding: .25rem;
    gap: .15rem;
    flex-wrap: nowrap;
}
.ai-tabs .nav-link {
    font-size: .78rem;
    padding: .35rem .65rem;
    border-radius: 8px;
    color: #6b7280;
    flex: 1;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
}
.ai-tabs .nav-link:hover { color: var(--deaj-primary, #033e75); background: rgba(3, 62, 117, .04); }
.ai-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--deaj-primary, #033e75), var(--deaj-primary-bright, #2680eb));
    box-shadow: 0 3px 8px -3px rgba(3, 62, 117, .4);
}

.ai-pane {
    padding: .5rem;
    max-height: clamp(280px, 55vh, 520px);
    overflow-y: auto;
    border: 1px solid rgba(3, 62, 117, .1);
    border-radius: 12px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: rgba(3, 62, 117, .2) transparent;
}
.ai-pane::-webkit-scrollbar { width: 6px; }
.ai-pane::-webkit-scrollbar-thumb { background: rgba(3, 62, 117, .2); border-radius: 3px; }

/* ── Chat card ───────────────────────────────────────────────────────── */
.ai-chat-card {
    background: #fff;
    border: 1px solid rgba(3, 62, 117, .1);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px -12px rgba(3, 62, 117, .15);
    /* Altura responsiva con clamp: nunca menos de 480px, nunca más de 80vh. */
    height: clamp(480px, calc(100dvh - var(--ai-chrome-desk)), 80vh);
}
@media (max-width: 991.98px) {
    .ai-chat-card {
        height: clamp(420px, calc(100dvh - var(--ai-chrome-mobile)), 75dvh);
    }
}

/* Header del chat */
.ai-chat-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: linear-gradient(180deg, #f7faff 0%, #fff 100%);
    border-bottom: 1px solid rgba(3, 62, 117, .08);
    flex-shrink: 0;
    position: relative;
}
.ai-chat-header::after {
    content: ""; position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--deaj-yellow, #fdb611), var(--deaj-secondary, #71ce82), var(--deaj-primary-bright, #2680eb));
    opacity: .55;
}
.ai-model-name {
    color: var(--deaj-primary, #033e75);
    font-weight: 700;
    font-size: .92rem;
    display: block;
    line-height: 1.15;
}
.ai-model-desc {
    color: #6b7280;
    font-size: .78rem;
    margin-left: .35rem;
}
.ai-stat {
    color: #6b7280;
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    letter-spacing: .04em;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

/* Wrap del chat (feed + composer) */
.chat-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;   /* CRÍTICO: permite que chat-feed haga scroll */
    overflow: hidden;
}

/* Feed scrolleable */
.chat-feed {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1rem .5rem;
    background: linear-gradient(180deg, #fafbfc 0%, #f6f8fb 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(3, 62, 117, .25) transparent;
}
.chat-feed::-webkit-scrollbar { width: 8px; }
.chat-feed::-webkit-scrollbar-thumb { background: rgba(3, 62, 117, .2); border-radius: 4px; }
.chat-feed::-webkit-scrollbar-thumb:hover { background: rgba(3, 62, 117, .4); }

/* ── Mensajes ────────────────────────────────────────────────────────── */
.msg {
    display: flex;
    gap: .65rem;
    margin-bottom: 1rem;
    animation: msgIn .3s ease-out backwards;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.msg .avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: .9rem;
    box-shadow: 0 2px 6px rgba(3, 62, 117, .2);
}
.msg.user .avatar { background: linear-gradient(135deg, #1e5c2a, var(--deaj-secondary-deep, #39a44c)); }
.msg.bot  .avatar { background: linear-gradient(135deg, var(--deaj-primary, #033e75), var(--deaj-primary-bright, #2680eb)); }

.msg .bubble {
    background: #fff;
    padding: .7rem 1rem;
    border-radius: 14px;
    max-width: 92%;
    box-shadow: 0 2px 6px rgba(3, 62, 117, .07);
    /* IMPORTANTE: NO usar pre-wrap aquí — el markdown ya genera <br> y <p>.
       Para usuario (texto plano) usamos pre-wrap específico abajo. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
    color: #1f2937;
    line-height: 1.55;
}
.msg.user .bubble {
    background: #e7f1ff;
    border: 1px solid #cfe2ff;
    white-space: pre-wrap;       /* texto del usuario respeta saltos */
    border-radius: 14px 4px 14px 14px;
}
.msg.bot .bubble.md-rendered {
    background: #fff;
    border: 1px solid rgba(3, 62, 117, .1);
    border-radius: 4px 14px 14px 14px;
}

.msg .meta {
    font-size: .68rem;
    color: #9ca3af;
    margin-top: .25rem;
    font-family: 'JetBrains Mono', monospace;
}

/* Botón copiar */
.msg-copy {
    background: transparent;
    border: 0;
    color: #9ca3af;
    cursor: pointer;
    padding: .2rem .45rem;
    border-radius: 6px;
    transition: all .15s;
    font-size: .75rem;
    margin-top: .15rem;
}
.msg-copy:hover {
    color: var(--deaj-primary, #033e75);
    background: rgba(3, 62, 117, .07);
}

/* Typing dots */
.typing-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--deaj-primary-bright, #2680eb);
    display: inline-block;
    animation: typing 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── Welcome state ────────────────────────────────────────────────────── */
.ai-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem 1rem;
    height: 100%;
}
.ai-welcome-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--deaj-primary, #033e75), var(--deaj-primary-bright, #2680eb));
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.85rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 22px -8px rgba(3, 62, 117, .45);
    position: relative;
}
.ai-welcome-icon::after {
    content: ""; position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(253, 182, 17, .25), rgba(38, 128, 235, .25));
    z-index: -1;
    opacity: .6;
    animation: pulse 2.6s infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.08); opacity: .25; } }
.ai-welcome-title {
    color: var(--deaj-primary, #033e75);
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: .5rem;
    letter-spacing: -.01em;
}
.ai-welcome-sub {
    color: #6b7280;
    max-width: 52ch;
    font-size: .9rem;
    margin-bottom: 1.5rem;
}
.ai-suggestions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .65rem;
    width: 100%;
    max-width: 720px;
}
.ai-suggestion {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: #fff;
    border: 1px solid rgba(3, 62, 117, .12);
    border-radius: 12px;
    padding: .8rem .9rem;
    text-align: left;
    cursor: pointer;
    transition: all .18s;
    font-size: .85rem;
    color: #374151;
    width: 100%;
}
.ai-suggestion:hover {
    border-color: var(--deaj-primary-bright, #2680eb);
    background: linear-gradient(180deg, #fff, #f0f7ff);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -6px rgba(3, 62, 117, .25);
}
.ai-suggestion i {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(3, 62, 117, .07);
    color: var(--deaj-primary, #033e75);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: .9rem;
    transition: all .18s;
}
.ai-suggestion:hover i {
    background: linear-gradient(135deg, var(--deaj-primary, #033e75), var(--deaj-primary-bright, #2680eb));
    color: #fff;
}
.ai-suggestion span { font-weight: 500; line-height: 1.3; }

/* ── Composer ────────────────────────────────────────────────────────── */
.composer {
    flex-shrink: 0;
    padding: .65rem .85rem .8rem;
    background: #fff;
    border-top: 1px solid rgba(3, 62, 117, .08);
}
.composer-inner {
    display: flex;
    align-items: end;
    gap: .5rem;
    background: #fafbfc;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: .35rem .55rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.composer-inner:focus-within {
    border-color: var(--deaj-primary-bright, #2680eb);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(38, 128, 235, .12);
}
.composer-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    resize: none;
    flex: 1;
    min-height: 38px;
    max-height: 180px;
    padding: .45rem .35rem;
    font-size: .92rem;
    line-height: 1.5;
    color: #1f2937;
}
.composer-input:focus { outline: 0; box-shadow: none !important; }

.composer-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .15rem;
}
.composer-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    letter-spacing: .04em;
    color: #9ca3af;
    white-space: nowrap;
}
.composer-send {
    border: 0;
    background: linear-gradient(135deg, var(--deaj-primary, #033e75), var(--deaj-primary-bright, #2680eb));
    color: #fff;
    border-radius: 10px;
    padding: .55rem .9rem;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 10px -3px rgba(3, 62, 117, .4);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}
.composer-send:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -3px rgba(3, 62, 117, .55); }
.composer-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.composer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .5rem;
    padding: 0 .25rem;
    font-size: .68rem;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: .03em;
    color: #9ca3af;
}
.composer-counter.is-warn { color: #b8830b; }
.composer-counter.is-over { color: #b03d36; font-weight: 600; }
.composer-disclaimer { font-style: italic; opacity: .8; }

/* ── Modelos en sidebar ──────────────────────────────────────────────── */
.model-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: .55rem .75rem;
    cursor: pointer;
    transition: all .15s;
    background: #fff;
    margin-bottom: .35rem;
}
.model-card:hover { border-color: var(--deaj-primary-bright, #2680eb); background: #f7faff; }
.model-card.active {
    border-color: var(--deaj-primary, #033e75);
    background: linear-gradient(135deg, rgba(3, 62, 117, .06), rgba(38, 128, 235, .04));
    box-shadow: 0 0 0 2px rgba(3, 62, 117, .12);
}

/* Bench table */
.bench-table { font-size: .78rem; }
.bench-table th, .bench-table td { padding: .35rem .55rem; }
.bench-table thead th {
    background: rgba(3, 62, 117, .06);
    color: var(--deaj-primary, #033e75);
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ── Markdown renderizado en bubbles del bot ────────────────────────── */
.bubble.md-rendered { padding: .85rem 1.05rem; line-height: 1.55; }
.bubble.md-rendered > *:first-child { margin-top: 0; }
.bubble.md-rendered > *:last-child  { margin-bottom: 0; }

.md-p { margin: .45rem 0; color: #1f2937; }
.md-h { color: var(--deaj-primary, #033e75); font-weight: 700; line-height: 1.25; margin: .8rem 0 .35rem; letter-spacing: -.01em; }
.md-h.md-h1 { font-size: 1.18rem; }
.md-h.md-h2 { font-size: 1.05rem; }
.md-h.md-h3 { font-size: .98rem; }
.md-h.md-h4, .md-h.md-h5, .md-h.md-h6 { font-size: .9rem; color: var(--deaj-primary-digital, #144f9c); }

.md-list { padding-left: 1.4rem; margin: .5rem 0; }
.md-list li { margin: .2rem 0; color: #1f2937; }

.md-code {
    background: rgba(3, 62, 117, .08);
    color: var(--deaj-primary, #033e75);
    padding: .12rem .4rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .82em;
    word-break: break-word;
}

.md-pre {
    background: #021b3a;
    color: #e6edf3;
    padding: .85rem 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: .65rem 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    line-height: 1.5;
    border-left: 3px solid var(--deaj-yellow, #fdb611);
    position: relative;
}
.md-pre[data-lang]::before {
    content: attr(data-lang);
    position: absolute; top: .35rem; right: .65rem;
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--deaj-yellow, #fdb611);
    opacity: .72;
    font-weight: 600;
}
.md-pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; }

.md-quote {
    border-left: 3px solid var(--deaj-secondary, #71ce82);
    background: rgba(57, 164, 76, .06);
    padding: .55rem .85rem;
    margin: .5rem 0;
    color: #4b5563;
    font-style: italic;
    border-radius: 4px;
}

.md-hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(3, 62, 117, .2), transparent); margin: 1rem 0; }

.md-table-wrap {
    margin: .65rem 0;
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid rgba(3, 62, 117, .12);
}
.md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    background: #fff;
}
.md-table thead th {
    background: linear-gradient(135deg, var(--deaj-primary, #033e75), var(--deaj-primary-bright, #2680eb));
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: .55rem .85rem;
    font-size: .8rem;
    border: 0;
}
.md-table tbody td {
    padding: .5rem .85rem;
    border-bottom: 1px solid rgba(3, 62, 117, .08);
    color: #1f2937;
    vertical-align: top;
}
.md-table tbody tr:nth-child(even) { background: rgba(3, 62, 117, .025); }
.md-table tbody tr:hover { background: rgba(38, 128, 235, .05); }
.md-table tbody tr:last-child td { border-bottom: 0; }

.md-rendered a {
    color: var(--deaj-primary-bright, #2680eb);
    text-decoration: underline;
    text-decoration-color: rgba(38, 128, 235, .4);
    text-underline-offset: 2px;
    word-break: break-word;
}
.md-rendered a:hover { text-decoration-color: var(--deaj-primary-bright, #2680eb); }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ai-sidebar-inner { position: static; }
    .ai-pane { max-height: 240px; }
    .ai-welcome { padding: 1.2rem .5rem; }
    .ai-welcome-icon { width: 56px; height: 56px; font-size: 1.5rem; }
    .ai-welcome-title { font-size: 1.15rem; }
    .ai-welcome-sub { font-size: .85rem; }
    .ai-suggestions { grid-template-columns: 1fr; gap: .5rem; }
    .composer-meta .composer-disclaimer { display: none; }
    .ai-stat { font-size: .65rem; }
}

@media (max-width: 575.98px) {
    .msg .bubble { max-width: 95%; padding: .55rem .85rem; }
    .msg .avatar { width: 30px; height: 30px; font-size: .8rem; }
    .composer-input { font-size: .88rem; }
    .ai-chat-card { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .msg, .ai-suggestion, .ai-welcome-icon::after { animation: none !important; transition: none !important; }
}