/* Contenedor principal del chat */
#ka-cesaas-chat {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Área de mensajes del chat */
#ka-cesaas-messages {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
}

/* Estilo para los títulos del formulario */
.ka-cesaas-form-title {
    font-size: 1.2em;
    margin-bottom: 5px;
}

/* Selector de tono y área de texto para el contexto y prompt */
#ka-cesaas-tone,
#ka-cesaas-context,
#ka-cesaas-prompt {
    width: 100%;
    margin-bottom: 10px;
}

/* Botón de Enviar (azul) */
#ka-cesaas-submit {
    width: fit-content;
    padding: 10px 15px;
    font-size: 1em;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 5px;
}

#ka-cesaas-submit:hover {
    background-color: #005177;
}

/* Botón de Reiniciar (rojo) */
#ka-cesaas-reset {
    width: fit-content;
    padding: 10px 15px;
    font-size: 1em;
    background-color: #d9534f;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#ka-cesaas-reset:hover {
    background-color: #c9302c;
}

/* Mensaje de estado (respuesta del asistente) */
#ka-cesaas-response {
    font-style: italic;
    color: gray;
    margin-top: 10px;
}

/* Estilo para los mensajes del usuario (alineado a la derecha) */
.user-message {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0;
}

.user-message div {
    background-color: #d1ecf1;
    color: #0c5460;
    padding: 10px;
    border-radius: 10px;
    max-width: 80%;
    white-space: pre-wrap;
    text-align: left;
}

/* Estilo para los mensajes del asistente (alineado a la izquierda) */
.assistant-message {
    display: flex;
    justify-content: flex-start;
    margin: 10px 0;
}

.assistant-message div {
    background-color: #e2f5e8;
    color: #155724;
    padding: 10px;
    border-radius: 10px;
    max-width: 80%;
    white-space: pre-wrap;
    text-align: left;
}

/* Ajustes específicos para botones en el chat */
#ka-cesaas-submit,
#ka-cesaas-reset {
    margin-top: 10px;
    margin-right: 5px;
}


/* Estilo para el formulario de configuración de usuario */
#ka-cesaas-user-settings-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#ka-cesaas-user-settings-form h3 {
    margin-bottom: 15px;
    font-size: 1.5em;
}

#ka-cesaas-user-settings-form label {
    font-weight: bold;
    margin-bottom: 5px;
}

#ka-cesaas-user-settings-form select,
#ka-cesaas-user-settings-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

#ka-cesaas-user-settings-form button {
    width: fit-content;
    padding: 10px 15px;
    font-size: 1em;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#ka-cesaas-user-settings-form button:hover {
    background-color: #005177;
}

/* Mensaje de respuesta del formulario */
#ka-cesaas-user-settings-message {
    margin-top: 10px;
    font-style: italic;
    color: gray;
}

/* Estilo para los botones de like y dislike */
.like-btn, .dislike-btn {
    border: none;
    background: transparent;
    font-size: 1.2em;
    cursor: pointer;
    margin: 0 5px;
    padding: 5px;
    color: gray;
}

.like-btn:hover, .dislike-btn:hover {
    color: #0073aa;
}

/* Lista de threads */
#ka-cesaas-thread-list {
    margin-top: 20px;
}

#ka-cesaas-thread-list h4 {
    margin-bottom: 10px;
}

#ka-cesaas-thread-list ul {
    list-style-type: none;
    padding: 0;
}

#ka-cesaas-thread-list li {
    margin: 5px 0;
}

#ka-cesaas-thread-list li a {
    text-decoration: none;
    color: #0073aa;
}

#ka-cesaas-thread-list li a:hover {
    text-decoration: underline;
}

/* Botón para eliminar un thread específico */
.delete-thread-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1em;
    color: #d9534f;
    margin-left: 5px;
}

.delete-thread-btn:hover {
    color: #c9302c;
}

/* Botón para eliminar todos los threads */
#delete-all-threads-btn {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 1em;
    background-color: #d9534f;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#delete-all-threads-btn:hover {
    background-color: #c9302c;
}

/* Contenedor principal para todos los threads */
.ka-cesaas-all-threads {
    margin-top: 20px;
}

/* Botón de despliegue para cada thread */
.ka-cesaas-thread-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background-color: #0073aa;
    color: white;
    padding: 10px;
    font-size: 1em;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 5px;
}

.ka-cesaas-thread-toggle:hover {
    background-color: #005177;
}

/* Contenido del thread desplegable */
.ka-cesaas-thread-content {
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}