/* Full-page layout with centered content */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: hsl(0, 0%, 10%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center tables and content*/
table {
    margin: auto;
}

dialog {
    justify-content: center;
    align-content: center;;
}


/* Small inputs */
#notebookDialog {
    input {
        width: 40px;
    }

    #notebookPassword:user-valid {
        background-color: green;
    }

    #notebookPassword:user-invalid {
        background-color: red;
    }
}


#room {
    width: 100%;
    height: 100%;
}

#room {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    /* Optional: for any empty space */
}

#room svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* or 'cover' to fill the screen */
}


/* Chatbot container styling */
.chatbot-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

/* Chatbot image styling */
#chatbot_image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
}

/* Chatbot greeting text styling */
.chatbot-greeting {
    color: #333;
    margin: 0;
}

#chatbot_image {
    transition: transform 0s; /* Reset any prior transitions */
}

.spin-once {
    animation: spinOnce 1s linear forwards;
}

@keyframes spinOnce {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

dialog#welcomeDialog{
    width: 70%;
}