/* Styles for the landing page */
body.landing {
    align-items: center;
    background-color: var(--chat-bg-color);
    color: var(--chat-text-color);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
}

.landing-box {
    max-width: 750px;
}

#join-room-form {
    display: flex;
    gap: 0.5rem;
}

.input-wrapper {
    flex-grow: 1;
}

#room-name-input {
    width: 100%;
}

/* Ensure the Go button has the exact same height as the input */
#join-room-form button[type="submit"] {
    align-items: center;
    display: flex;
    flex-shrink: 0; /* Prevent the button from shrinking */
    /* Use the exact same calculation Pico.css uses for form element heights */
    height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
    justify-content: center;
    padding: 0;
    width: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
}