@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    color: rgba(0, 0, 0, 255);
    margin: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* Estilos generales del contenedor del chat */
#chat-container {
    width: 900px;
    height: 800px;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Configuración del área de mensajes */
#messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 5px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/* Estilos de mensajes */
#my-message,
#other-message {
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 255);
    max-width: 70%;
    word-wrap: break-word;
}

#my-message {
    align-self: flex-end;
    text-align: right;
}

#other-message {
    align-self: flex-start;
    text-align: left;
}

/* Contenedor de entrada de mensaje */
#input-container {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

/* Input de texto */
#message-input {
    flex: 1;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 255);
    border-radius: 10px;
}

/* Estilos generales de los botones */
button {
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 255);
}

/* Efecto hover en botones */
button:hover {
    background-color: #ff59b1;
}

/* Tema claro */
body[data-theme="light"] {
    background-color: #f0f0f0;
    color: black;
}

body[data-theme="light"] #chat-container {
    background-color: white;
    border: 1px solid #ccc;
}

body[data-theme="light"] #my-message {
    background-color: #ffa6d5;
    color: black;
}

body[data-theme="light"] #other-message {
    background-color: #d2d8de;
    color: black;
}

body[data-theme="light"] button {
    background-color: #ffa6d5;
    color: white;
    border: none;
}

/* Tema oscuro */
body[data-theme="dark"] {
    background-color: #121212;
    color: white;
}

body[data-theme="dark"] #chat-container {
    background-color: #1E1E1E;
    border: 1px solid #333;
}

body[data-theme="dark"] #my-message {
    background-color: #ff59b1;
    color: black;
}

body[data-theme="dark"] #other-message {
    background-color: #555b61;
    color: white;
}

body[data-theme="dark"] button {
    background-color: #ff59b1;
    color: white;
    border: none;
}