/* ============================================================
   UNEBOT CHAT – Frontend styles v0.3.0
   ============================================================ */

.unebot-fab-img {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 120px;
    height: auto;
    cursor: pointer;
    z-index: 99998;
    transition: transform 0.2s ease, filter 0.2s ease;
    background: transparent;
    border: none;
    outline: none;
}
.unebot-fab-img:hover,
.unebot-fab-img:focus,
.unebot-fab-img:active { outline: none; box-shadow: none; }

/* ---- Loading spinner ---- */
.unebot-loading { background: transparent; border: none; }
.typing { display: flex; gap: 5px; padding: 10px; }
.typing span {
    width: 8px; height: 8px;
    background: #4f8cff; border-radius: 50%;
    animation: bounce 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40%            { transform: scale(1);   opacity: 1;   }
}

/* ---- Modal ---- */
.unebot-modal {
    position: fixed; inset: 0;
    background: rgba(10,20,40,0.35);
    display: none; align-items: flex-end; justify-content: flex-end;
    padding: 24px; z-index: 99999;
}
.unebot-modal.is-open { display: flex; }

/* ---- Chat window ---- */
.unebot-chat {
    width: 100%; max-width: 520px; height: 650px;
    display: flex; flex-direction: column;
    border: 1px solid #d9e2f2; border-radius: 20px;
    background: #fff; overflow: hidden;
    box-shadow: 0 24px 60px rgba(16,24,40,0.22);
}
.unebot-chat--embedded { max-width: 760px; }

.unebot-avatar {
    width: 70px; height: 70px; border-radius: 50%;
    object-fit: cover; box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.unebot-chat__header {
    padding: 18px;
    background: linear-gradient(135deg, #4f8cff, #6ea8ff);
    color: #fff; display: flex; align-items: center; gap: 12px;
    backdrop-filter: blur(10px); position: relative;
}
.unebot-chat__title   { font-size: 18px; font-weight: 700; }
.unebot-chat__subtitle{ font-size: 12px; opacity: 0.92; margin-top: 4px; }

.unebot-chat__messages {
    flex: 1; overflow-y: auto; padding: 16px;
    background: linear-gradient(to bottom, #f5f8ff, #eef3ff);
}

.unebot-chat__composer {
    display: flex; gap: 10px; padding: 12px; background: #fff;
}
.unebot-chat__composer textarea {
    flex: 1; border-radius: 20px; padding: 12px 16px;
    border: 1px solid #dbe4ff; background: #f9fbff;
    resize: none; font-family: inherit; font-size: 14px;
}
.unebot-chat__composer button {
    border-radius: 20px; padding: 12px 18px;
    background: linear-gradient(135deg, #4f8cff, #6ea8ff);
    color: white; font-weight: bold; border: none; cursor: pointer;
}
.unebot-chat__close {
    border: 0; border-radius: 14px; padding: 12px 16px;
    cursor: pointer; background: rgba(255,255,255,0.16);
    color: #fff; position: absolute; right: 12px; top: 12px;
}

/* ---- Messages ---- */
.unebot-msg {
    margin: 8px 0; padding: 12px 16px; border-radius: 18px;
    font-size: 14px; max-width: 75%; line-height: 1.4;
    animation: fadeIn 0.2s ease;
}
.unebot-msg > strong:first-child { display: block; margin-bottom: 6px; font-size: 12px; opacity: 0.85; }
.unebot-msg--assistant {
    background: #ffffff; border: 1px solid #e4ecff; border-bottom-left-radius: 6px;
}
.unebot-msg--user {
    background: linear-gradient(135deg, #4f8cff, #6ea8ff);
    color: white; margin-left: auto; border-bottom-right-radius: 6px;
}
.unebot-msg--error {
    background: #fff3f2; border: 1px solid #f3c7c2; color: #9b1c1c;
}
.unebot-error-details {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed #e8a7a0; font-size: 12px; white-space: pre-wrap;
}

/* ============================================================
   MARKDOWN – estilos para el contenido renderizado del bot
   ============================================================ */

.unebot-msg-body { line-height: 1.55; }

.unebot-msg--assistant .unebot-h {
    font-size: 14px;
    font-weight: 700;
    margin: 10px 0 4px;
    color: #1a3a8f;
    border-bottom: 1px solid #dbe6ff;
    padding-bottom: 3px;
}

.unebot-msg--assistant .unebot-link {
    color: #2563eb;
    text-decoration: underline;
    word-break: break-word;
    font-weight: 500;
    transition: color 0.15s;
}
.unebot-msg--assistant .unebot-link:hover { color: #1d4ed8; }

.unebot-msg--assistant .unebot-code {
    background: #eef3ff;
    border: 1px solid #c5d5ff;
    border-radius: 5px;
    padding: 1px 6px;
    font-family: 'Courier New', monospace;
    font-size: 12.5px;
    color: #2a3f9d;
}

.unebot-msg--assistant .unebot-ul,
.unebot-msg--assistant .unebot-ol {
    margin: 6px 0 6px 18px;
    padding: 0;
    font-size: 13.5px;
}
.unebot-msg--assistant .unebot-ul li,
.unebot-msg--assistant .unebot-ol li {
    margin-bottom: 3px;
    line-height: 1.45;
}
.unebot-msg--assistant .unebot-ul { list-style-type: disc; }
.unebot-msg--assistant .unebot-ol { list-style-type: decimal; }

/* El <strong> del nombre del bot sigue siendo el label superior */
.unebot-msg--assistant > strong:first-child {
    display: block;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.85;
    margin-bottom: 6px;
}
/* Los <strong> dentro del cuerpo del mensaje son negritas normales */
.unebot-msg-body strong {
    display: inline;
    font-size: inherit;
    opacity: 1;
    margin: 0;
    font-weight: 700;
}

/* ============================================================
   QUICK REPLIES – Módulos y subpreguntas
   ============================================================ */

.unebot-quick-replies {
    padding: 8px 0 4px;
    animation: fadeIn 0.3s ease;
}

.unebot-quick-replies__label {
    font-size: 12px;
    color: #6b7aaa;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Módulos (fila de botones principales) */
.unebot-qr-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 4px;
}

.unebot-qr-module-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border: 1.5px solid #c5d5ff;
    border-radius: 20px;
    background: #fff;
    color: #3060d0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    white-space: nowrap;
}
.unebot-qr-module-btn:hover,
.unebot-qr-module-btn.is-active {
    background: linear-gradient(135deg, #4f8cff, #6ea8ff);
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79,140,255,0.3);
}

/* Subpreguntas (aparecen debajo del módulo activo) */
.unebot-qr-subitems {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 12px;
    background: #f0f5ff;
    border-radius: 14px;
    border: 1px solid #dbe6ff;
    animation: fadeIn 0.2s ease;
}
.unebot-qr-subitems.is-visible {
    display: flex;
}

.unebot-qr-item-btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1.5px solid #b8ceff;
    border-radius: 14px;
    background: #fff;
    color: #1a4ab0;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    white-space: nowrap;
}
.unebot-qr-item-btn:hover {
    background: #2c5de5;
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
}

/* ---- Animations ---- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .unebot-modal { padding: 12px; }
    .unebot-chat  { max-width: 100%; }
    .unebot-chat__messages { height: 62vh; }
    .unebot-qr-module-btn { font-size: 12px; padding: 6px 11px; }
    .unebot-qr-item-btn   { font-size: 12px; }
}