/* chatbot-followups.css — Carrusel de preguntas de seguimiento del chat.
 * Extraído de chatbot-chat.css (2026-09-05) al cruzar el umbral 🔴 del
 * auditor Anti-Monolith. Estilos de FollowUpChips.jsx: carrusel real (una
 * pregunta a la vez, flechas + puntos de navegación) + confirmación de
 * envío inline. */

/* ── Follow-up Question Carousel (rediseño 2026-09-05) ── */
.chat-follow-up-strip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: flex-start;
    width: 100%;
    max-width: 92%;
    animation: msgPop 0.3s ease forwards;
}
.chat-follow-up-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--text-dim);
    padding: 0 2px;
    opacity: 0.7;
}
/* Carrusel real (v2, fix 2026-09-05): UNA sola tarjeta visible por vez +
   flechas de navegación a los costados. La v1 (fila con scroll horizontal
   mostrando las 3 a la vez, cortadas) no se leía bien — feedback directo
   del owner. Avance automático cada 10s manejado en JS (FollowUpChips.jsx). */
.chat-follow-up-carousel {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
}
.chat-follow-up-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    border-radius: 8px;
    border: 1px solid rgba(124, 77, 255, 0.25);
    background: rgba(124, 77, 255, 0.06);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
}
.chat-follow-up-nav:hover {
    background: rgba(124, 77, 255, 0.16);
    color: var(--text-main);
}
.chat-follow-up-chip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    background: rgba(124, 77, 255, 0.06);
    border: 1px solid rgba(124, 77, 255, 0.2);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, border-color 0.2s;
    flex: 1 1 auto;
    min-width: 0;
}
.chat-follow-up-chip:hover {
    background: rgba(124, 77, 255, 0.14);
    border-color: rgba(124, 77, 255, 0.45);
}
.chat-follow-up-chip.is-confirming {
    background: rgba(124, 77, 255, 0.16);
    border-color: rgba(124, 77, 255, 0.55);
    cursor: default;
}
.chat-follow-up-q {
    font-size: 0.875rem;
    color: var(--text-main);
    font-weight: 500;
    line-height: 1.4;
}
.chat-follow-up-ctx {
    font-size: 0.72rem;
    color: var(--accent);
    opacity: 0.75;
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* Puntos de posición — click salta directo a esa pregunta y pausa el
   avance automático (igual que las flechas). */
.chat-follow-up-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 2px 0;
}
.chat-follow-up-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: rgba(124, 77, 255, 0.25);
    cursor: pointer;
    transition: all 0.15s;
}
.chat-follow-up-dot:hover {
    background: rgba(124, 77, 255, 0.5);
}
.chat-follow-up-dot.is-active {
    background: var(--accent);
    width: 16px;
    border-radius: 3px;
}
/* Confirmación inline — vive DENTRO del mismo control, nunca como overlay
   de pantalla completa (pedido explícito del owner). */
.chat-follow-up-confirm {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(124, 77, 255, 0.2);
}
.chat-follow-up-confirm-label {
    font-size: 0.75rem;
    color: var(--text-dim);
}
.chat-follow-up-confirm-actions {
    display: flex;
    gap: 6px;
}
.chat-follow-up-confirm-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 5px 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.chat-follow-up-confirm-yes {
    background: var(--accent);
    color: #fff;
}
.chat-follow-up-confirm-yes:hover {
    filter: brightness(1.1);
}
.chat-follow-up-confirm-cancel {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-dim);
}
.chat-follow-up-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
}