@import url('@vaadin/react-components/css/Lumo.css');
@import url('@vaadin/react-components/css/lumo/Typography.css');
@import url('@vaadin/react-components/css/lumo/Utility.module.css');

.ai-patterns-ui {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;

    header {
        padding: var(--lumo-space-m);
        border-bottom: 1px solid var(--lumo-contrast-20pct);
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    main {
        flex-grow: 1;
        display: flex;
        min-height: 0;
        overflow: hidden;

        blockquote {
            margin-left: 0.5em;
            padding: 0.1em 0.1em 0.1em 0.5em;
            background-color: var(--lumo-primary-color-10pct);
            font-style: italic;
        }

        .settings {
            width: 470px;
            display: flex;
            flex-direction: column;
            gap: var(--lumo-space-s);
            padding: var(--lumo-space-m);
            border-right: 1px solid var(--lumo-contrast-20pct);
            flex-shrink: 1;
            overflow-y: auto;

            .side-by-side-checkboxes {
                display: flex; /* Make the container a flexbox */
                gap: var(--lumo-space-m); /* Add some space between the checkboxes */
                align-items: center; /* Align the checkboxes vertically */
            }
            .side-by-side-comboboxes {
                display: flex; /* Make the container a flexbox */
                gap: var(--lumo-space-m); /* Add some space between the checkboxes */
                align-items: center; /* Align the checkboxes vertically */
            }
            .vertical-checkboxes {
                display: flex;
                flex-direction: column;
            }

            .space {
                flex-grow: 1;
            }

            .built-with {
                font-size: var(--lumo-font-size-s);
                font-weight: bold;
                /*color: blue;*/

                a {
                    color: var(--lumo-body-text-color);
                    text-decoration: none;
                    font-weight: bold;
                    color: blue;
                }
            }
        }

        .vaadin-chat-component {
            flex: 1;
            min-height: 0;
            height: 100%;
            overflow: hidden;

            .hidden {
                display: none;
            }

            h4 {
                cursor: pointer;
                user-select: none;
            }

            h4::after {
                content: " ⏶";
            }

            h4.expanded::after  {
                content: " ⏷";
            }

            /* Initially hide all ul elements that are next to an h4 */
            h4 + ul {
                display: none;
            }

            /* When the h4 is clicked, show the next ul */
            h4.expanded + ul {
                display: block;
            }

            h4 + ul strong + ol li, h4 + ul p + ol li {
                list-style: none;
                border-left: 2px solid var(--lumo-success-color);
                margin: 0.5em 0.5em 0.5em 0;
                padding: 0.5em;
                color: var(--lumo-body-text-color);
                background-color: var(--lumo-success-color-10pct);
            }

            .scroller {
                overflow-y: auto;
                max-height: 500px;
            }
        }
    }
}
