/* Zone 1: Definición de Fuente */
@font-face {
    font-family: 'Vazir';
    src: url('/wp-content/uploads/fonts/Vazir-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Zone 3: Contenedor Principal del Chatbot */
#robocaros-cnt1 { display: none; }
body.elementor-editor-active #robocaros-cnt1 { display: block !important; }

#espanolia-chatbot {
    font-family: 'Vazir', sans-serif;
    background: #0a0a0a;
    padding: 20px;
    border-radius: 5px;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 255, 252, 0.5);
    position: relative;
    direction: ltr;
    max-width: 600px;
    box-sizing: border-box;
}
@media (max-width: 768px) { 
    #espanolia-chatbot { width: 90%; }
}

/* Zone 5: Área de la Caja de Chat */
.cyber-chatbox {
    border: 1px solid #00fffc;
    padding: 10px;
    height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
    background: #111;
    border-radius: 5px;
    box-shadow: 0 0 15px #00fffc;
    box-sizing: border-box;
}
.cyber-chatbox::-webkit-scrollbar { width: 8px; }
.cyber-chatbox::-webkit-scrollbar-thumb { background: #00fffc; border-radius: 4px; }

/* Zone 7: Mensajes */
/* Section 7.1: Diseño de Mensajes */
.message { display: flex; align-items: flex-start; margin: 15px 0; width: 100%; box-sizing: border-box; }
.message.user { flex-direction: row; }
.message.bot { flex-direction: row; }

/* Section 7.2: Estilos de Avatar */
.message .avatar { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.message.user .avatar { background: #00fffc; } /* Placeholder para avatar de usuario si es necesario */
.message.bot .avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Section 7.3: Estilos de Texto */
.message .text { max-width: 80%; padding: 12px; border-radius: 10px; border: 1px solid; word-break: break-word; text-align: justify; line-height: 1.6; font-size: 14px; position: relative; box-sizing: border-box; }
.message.user .text { background: #1a1a2e; border-color: #00fffc; color: #00fffc; }
.message.bot .text { background: #2e1a4a; border-color: #ff00ff; color: #ffffff; }
.message.bot .text p { margin: 8px 0; line-height: 1.8; font-size: 14px; }
.message.bot .text strong { font-weight: bold; }

/* Section 7.4: Estilos de Mensajes Responsivos */
@media (max-width: 768px) {
    .message .avatar { margin: 0 5px; }
    .message.bot { position: relative; flex-direction: column; align-items: flex-start; }
    .message.bot .avatar { position: absolute; top: 48px; left: calc(50% - 22.5px); transform: translateX(-50%) translateY(-50%); z-index: 1; }
    .message.bot .text { max-width: 100%; border-top-width: 55px; margin-top: 20px; }
}
@media (min-width: 769px) {
    .message .avatar { margin: 0 10px; }
    .message.bot { flex-direction: row; }
    .message.bot .avatar { position: static; transform: none; }
    .message.bot .text { border-width: 1px; max-width: 80%; }
}

/* Zone 9: Área de Entrada y Controles */
/* Section 9.1: Mensaje Temporal */
.temp-message { margin-bottom: 10px; padding: 10px; background: #1a1a2e; border: 1px solid #ff00ff; border-radius: 5px; color: #00fffc; text-align: center; display: none; }

/* Section 9.2: Contenedor de Entrada */
.input-container { display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; }

/* Section 9.3: Área de Texto */
#user-message { width: 100%; padding: 10px; background: #111; border: 1px solid #00fffc; color: #00fffc; border-radius: 5px; font-family: 'Vazir', sans-serif; resize: vertical; min-height: 60px; max-height: 100px; overflow-y: auto; direction: ltr; box-sizing: border-box; }
#user-message::-webkit-scrollbar { width: 8px; }
#user-message::-webkit-scrollbar-thumb { background: #00fffc; border-radius: 4px; }

/* Section 9.4: Botones */
.button-container { display: flex; flex-direction: row; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
#cyber-send, #clear-chat, #toggle-robot-btn, #edit-yarbot-btn { padding: 10px 20px; background: #00fffc; color: #0a0a0a; border: none; border-radius: 5px; cursor: pointer; font-family: 'Vazir', sans-serif; box-shadow: 0 0 10px #00fffc; transition: all 0.3s ease; }
#cyber-send:hover, #clear-chat:hover, #toggle-robot-btn:hover, #edit-yarbot-btn:hover { box-shadow: 0 0 15px #00fffc; }

/* Section 9.5: Botones de Retroalimentación */
.feedback-buttons { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-start; align-items: center; }
.feedback-button { padding: 8px 12px; border: none; border-radius: 5px; cursor: pointer; font-family: 'Vazir', sans-serif; font-size: 18px; transition: all 0.3s ease; }
.feedback-button.like { background: #00ff00; color: #0a0a0a; }
.feedback-button.dislike { background: #ff0000; color: #ffffff; }
.feedback-button:hover { opacity: 0.8; }
.feedback-button.disabled { opacity: 0.5; cursor: not-allowed; }

/* Section 9.6: Interruptor de Longitud de Respuesta */
.response-length-switch { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 10px; }
.switch { position: relative; display: inline-block; width: 60px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #2e1a4a; border: 1px solid #ff00ff; border-radius: 28px; transition: 0.3s; box-shadow: 0 0 5px #ff00ff; }
.switch-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: #00fffc; border-radius: 50%; transition: 0.3s; box-shadow: 0 0 5px #00fffc; }
input:checked + .switch-slider { background-color: #1a1a2e; border-color: #00fffc; box-shadow: 0 0 5px #00fffc; }
input:checked + .switch-slider:before { transform: translateX(32px); }
.switch-label-short, .switch-label-long { font-family: 'Vazir', sans-serif; font-size: 14px; color: #00fffc; text-shadow: 0 0 5px #00fffc; }

/* Zone 12: Estilos del Encabezado del Chat Yar-Bot */
.yaarbot-current-bot-header {
    max-width: 600px; /* Igual al ancho del chatbot */
    margin: 0 auto 40px auto; /* Centrado, con 40px de espacio debajo */
    text-align: center;
    padding: 25px;
    background: rgba(10, 2, 26, 0.7);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

.yaarbot-header-title {
    color: #00e5ff;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 0 20px 0;
}

.yaarbot-bot-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.yaarbot-bot-avatar {
    width: 100px; /* Un poco más grande para destacar */
    height: 100px;
    border-radius: 50%;
    padding: 4px;
    
    /* Efecto de borde neón */
    border: 4px solid #00fffc;
    box-shadow: 
        0 0 8px #00fffc,
        0 0 20px #00fffc,
        inset 0 0 10px rgba(0, 255, 252, 0.6);
    
    background-color: #000;
}

.yaarbot-bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.yaarbot-bot-name {
    color: #ffffff;
    font-size: 1.7rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 252, 0.7);
    margin: 0;
}