/* =========================================================
   🎨 GLOBAL STYLES
========================================================= */
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    width: 100%;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    /* CSS var set by JS on mobile (visualViewport) */
    --appH: 100vh;
}

#bs-chat-root {
    height: 100%;
    /* Antes auto/100% */
    min-height: 100%;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* =========================================================
   🪟 MAIN CONTAINER (Adjusted for Iframe)
========================================================= */
#card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
    background: #fffbff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    /* Evitar parpadeo (brinco) al refrescar */
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

#card.ready {
    opacity: 1;
}

#card,
#card * {
    box-sizing: border-box;
}

/* =========================================================
   🧭 TOP BAR
========================================================= */
.topBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #2b2b2b, #0d0d0d);
    color: #fff;
    flex-shrink: 0;
}

.logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #d72009;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    width: 24px;
    height: 24px;
}

.topTitle {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

.topActions {
    display: flex;
    gap: 8px;
}

.topIconBtn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.bs-icon-white {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

/* 🔴 ICON HOVER — ROJO #d72009 (TOP BAR) */
#chatHomeBtn:hover img,
#chatCloseBtn:hover img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(90%) saturate(6054%) hue-rotate(356deg) brightness(96%) contrast(115%) !important;
}

/* =========================================================
   👋 ONBOARDING
========================================================= */
#onboarding {
    flex: 1;
    overflow-y: hidden;
    /* Ocultamos durante la transición para que no afecte al ancho */
    display: flex;
    flex-direction: column;
}

@media (max-width: 480px) {
    #onboarding {
        overflow-y: auto;
    }
}

#onboarding.hidden {
    display: none;
}

/* Menos aire arriba/abajo para que el greeting no se sienta tan alto */
.greetBox {
    padding: 15px 18px 8px;
    /* Unificado 16px lateral */
}

.greetHi {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 2px;
    /* antes 4px */
}

.greetSub {
    font-size: 13px;
    /* un punto más pequeño */
    color: #6b6b6b;
}

/* =========================================================
   ▶️ ACTIONS
========================================================= */
.actionRow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 18px 14px;
    /* menos alto, menos ancho */
}

.startBtn {
    flex: 0 0 auto;
    /* ya no ocupa todo el ancho */
    border-radius: 999px;
    padding: 10px 38px;
    font-size: 14px;
    font-weight: 600;
    background: #0f0f0f;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    /* evita salto de línea en el texto */
}

.startBtn:hover {
    background: #d72009;
}

.attachBtns {
    display: flex;
    gap: 10px;
    margin-left: auto;
    /* empuja los iconos completamente a la derecha */
}

.attachBtns button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.bs-icon-svg {
    width: 22px;
    height: 22px;
    opacity: 0.7;
}

/* =========================================================
   🧩 CARDS
========================================================= */
.cardsBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 8px;
    /* separación vertical */
    column-gap: 18px;
    /* 👉 8px + ~10px extra entre columnas */
    padding: 5px 16px 16px;
    margin-top: 3px;
}

.card {
    border-radius: 14px;
    padding: 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    min-height: 78px;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
}

.cardHeader {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    width: 100%;
    justify-content: center;
}

.cardEmoji {
    font-size: 13px;
}

.cardTitle {
    font-size: 13px;
    font-weight: 600;
}

.cardSub {
    font-size: 10.5px;
    line-height: 1.25;
    color: #555;
}

/* CARD COLORS */
.publishing {
    background: #fdf2f2
}

.stages {
    background: #e9f5f5
}

.submission {
    background: #fef7e9
}

.editing {
    background: #f2f8fd
}

.design {
    background: #fcf2fd
}

.duration {
    background: #e8effd
}

.formats {
    background: #fdf2f8
}

.isbn {
    background: #fef7e9
}

.pricing {
    background: #e9f7ff
}

.rights {
    background: #fff3f7
}

.availability {
    background: #f3ffe9
}

.royalties {
    background: #f4f0ff
}

/* =========================================================
   💬 CHAT VIEW
========================================================= */
#chatView {
    display: none;
    flex: 1;
    flex-direction: column;
    height: 0;
    /* Permite que el flex-grow funcione correctamente en contenedores flex */
    min-height: 0;
}

#chatView.active {
    display: flex;
}

.chatBody {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fffbff;
}

/* FILA MENSAJE + AVATAR */
.msgRow {
    display: flex;
    align-items: center;
    /* avatar centrado verticalmente respecto a la burbuja */
    gap: 10px;
}

.msgRow.user {
    justify-content: flex-end;
}

/* BURBUJAS */
.chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
}

.userBubble {
    background: #000;
    color: #fff;
    border-bottom-right-radius: 4px;
    margin-left: auto;
    /* empuja la burbuja del usuario hacia la derecha */
}

.botBubble {
    background: #f1f1f1;
    color: #000;
    border-bottom-left-radius: 4px;
    margin-right: auto;
    /* mantiene la del bot hacia la izquierda */
}

/* AVATARES BASADOS EN IMG */
.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: 0 0 26px;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.avatar-user {
    /* fallback por si la imagen no carga */
    background: #f4d36b;
}

.avatar-bot {
    background: #000;
}

/* =========================================================
   📝 FOOTER
========================================================= */

/* 🔴 ICON HOVER — ROJO #d72009 (FOOTER + ACTIONS) */
#micBtn:hover img,
#chatImgBtn:hover img,
#chatFileBtn:hover img,
#sendBtn:hover img,
#onboardingImgBtn:hover img,
#onboardingFileBtn:hover img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(90%) saturate(6054%) hue-rotate(356deg) brightness(96%) contrast(115%) !important;
    transform: scale(1.1);
}

/* =========================================================
   📝 FOOTER
========================================================= */
.chatFooter {
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

.inputArea {
    display: flex;
    align-items: center;
    /* ⬅️ antes flex-end: ahora mic centrado verticalmente */
    gap: 8px;
    background: #f8f8f8;
    border-radius: 20px;
    padding: 8px 12px;
    margin-bottom: 8px;
}

#chatInput {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    resize: none;
    min-height: 34px;
    /* ⬅️ altura inicial */
    max-height: 180px;
    /* ⬅️ tope (1–7 líneas aprox.) */
    overflow-y: auto;
    /* ⬅️ scroll cuando llegue al tope */
    outline: none;
    padding: 4px 0;
}

.micBtn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
}

.micBtn img {
    width: 20px;
    height: 20px;
}

.footerActions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leftActions {
    display: flex;
    gap: 12px;
}

.iconBtn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.iconBtn img {
    width: 22px;
    height: 22px;
    opacity: 0.6;
}

.sendBtn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.sendBtn img {
    width: 28px;
    height: 28px;
}

/* =========================================================
   ✨ ANIMATIONS
========================================================= */
button:hover,
.card:hover {
    filter: brightness(0.95);
}

button:active,
.card:active {
    transform: scale(0.97);
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de entrada para secciones (Crossfade-like) */
.section-fade-in {
    animation: sectionFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes sectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   🛈 TOOLTIP (IFRAME SAFE)
========================================================= */
.bs-tooltip {
    position: absolute;
    z-index: 9999;
    background: #E55451;
    color: #fff;
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 6px;
    max-width: 220px;
    line-height: 1.3;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity .15s ease, transform .15s ease;
}

.bs-tooltip.visible {
    opacity: 1;
    transform: scale(1);
}


/* =========================================================
   📱 MOBILE VIEWPORT FIX (IFRAME + iOS)
   - No afecta Desktop.
   - Usa --appH calculado por JS (visualViewport) para altura real.
========================================================= */
@media (max-width: 768px) {
    /* 📱 iOS: PREVENT INPUT AUTO-ZOOM (must be >=16px) */
    #chatInput { font-size: 16px !important; }

    html, body, #bs-chat-root {
        height: var(--appH, 100vh);
        min-height: var(--appH, 100vh);
    }

    #card {
        height: var(--appH, 100vh);
        min-height: var(--appH, 100vh);
    }

    #onboarding {
        overflow: hidden;
    }

    /* ChatView debe llenar la altura disponible (evita quedar en 0 en iOS) */
    #chatView {
        height: 100%;
        min-height: 0;
    }

    .chatBody {
        -webkit-overflow-scrolling: touch;
    }
}