body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    overflow: hidden;
}
.grecaptcha-badge {
    visibility: hidden;
}
.chat {
    height: 100svh;
    display: flex;
    flex-direction: column;
    > .state {
        display: none;
        flex-grow: 1;
        overflow: hidden;
        &.show {
            display: flex;
            flex-direction: column;
        }
    }
    > #getstart.show, > #resume_chat.show {
        display: flex;
        > div {
            margin: auto;
            overflow: hidden auto;
            text-align: center;
            padding: 10px;
            max-width: 350px;
            > h1 {
                all: unset;
                display: block;
                font-size: 1.5em;
                margin-bottom: 10px;
            }
            > form {
                text-align: left;
                display: flex;
                flex-direction: column;
                > input {
                    all: unset;
                    padding: 7.5px 10px;
                    border: solid 1px #777;
                    font-size: 0.9em;
                }
                > span {
                    font-size: 0.8em;
                    margin-top: 10px;
                }
                > #connect_error {
                    border: solid 1px #a00;
                    padding: 7.5px 10px;
                    margin: 10px 0 0;
                    font-size: 0.9em;
                    background: #fee;
                    color: #a00;
                    display: none;
                    &.show {
                        display: block;
                    }
                }
                > button {
                    all: unset;
                    margin-top: 10px;
                    padding: 7.5px 15px;
                    background: #0e68f7;
                    color: #fff;
                    margin-left: auto;
                    border-radius: 2.5px;
                    font-size: 0.9em;
                    cursor: pointer;
                    &:hover {
                        background: #0048d7;
                    }
                }
                &.center {
                    > button {
                        margin-inline: auto;
                    }
                }
            }
            > .or {
                margin-top: 20px;
                padding-top: 10px;
                border-top: solid 1px #aaa;
                font-size: 0.9em;
                > button {
                    all: unset;
                    text-decoration: underline;
                    color: #0e68f7;
                    cursor: pointer;
                    &:hover {
                        color: #0048d7;
                    }
                }
            }
        }
    }
    > #loading {
        &.done {
            display: none;
        }
        display: flex;
        position: fixed;
        background: #f0f0f0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        > div {
            display: flex;
            flex-direction: column;
            margin: auto;
            > .loading {
                display: flex;
                gap: 0.5em;
                margin: 0 auto;
                > div {
                    animation: loading cubic-bezier(0.37, 0, 0.63, 1) 2.5s infinite;
                    width: 1em;
                    height: 1em;
                    background: #777;
                    border-radius: 50%;
                    &:nth-child(2) {
                        animation-delay: 0.25s;
                    }
                    &:nth-child(3) {
                        animation-delay: 0.5s;
                    }
                }
            }
            > span {
                display: block;
                font-size: 1.3em;
                color: #555;
                text-align: center;
                margin-top: 2em;
            }
        }
    }
    > header {
        background: #f3f3f3;
        color: #333;
        padding: 15px 20px;
    }
    > #connected {
        > #chat_history {
            overflow: hidden auto;
            flex-grow: 1;
            padding: 20px;
            > .msg {
                display: flex;
                max-width: 90%;
                gap: 10px;
                margin-top: 15px;
                &.from_user {
                    margin-left: auto;
                    > .content {
                        margin-left: auto;
                        > .balloon {
                            margin-right: unset;
                            margin-left: auto;
                        }
                    }
                }
                &:first-child {
                    margin-top: 0;
                }
                > .icon {
                    > img {
                        position: sticky;
                        top: 0;
                        border: solid 2px #eee;
                        border-radius: 50%;
                        width: 35px;
                        height: 35px;
                    }
                }
                > .content {
                    display: flex;
                    flex-direction: column;
                    > .username {
                        font-size: 0.85em;
                        color: #444;
                        margin-bottom: 2px;
                    }
                    > .balloon {
                        padding: 10px 12.5px;
                        background: #f0f0f0;
                        border-radius: 5px;
                        box-sizing: border-box;
                        color: #111;
                        font-size: 0.9em;
                        margin-right: auto;
                        overflow-wrap: anywhere;
                        &.typing {
                            display: flex;
                            gap: 0.25em;
                            padding: 15px 12.5px;
                            > div {
                                animation: typing cubic-bezier(0.36, 0, 0.66, -0.56) 1s infinite;
                                width: 0.8em;
                                height: 0.8em;
                                background: #777;
                                border-radius: 50%;
                                &:nth-child(2) {
                                    animation-delay: 0.1s;
                                }
                                &:nth-child(3) {
                                    animation-delay: 0.2s;
                                }
                            }
                        }
                        &.sending {
                            opacity: 0.5;
                        }
                    }
                    > .card {
                        --primary-background-color: #111; /* ヘッダーとかボタンの背景の色 */
                        --primary-background-hover-color: #000; /* ボタンとかにホバーしたときの色 */
                        --primary-text-color: #fff; /* ヘッダーとかボタンの文字の色 */
                        --background-color: #262626; /* カードそのものの背景の色 */
                        --text-color: #fff; /* カードそのものの文字の色 */
                        border-radius: 7.5px;
                        color: var(--text-color);
                        background: var(--background-color);
                        overflow: hidden;
                        max-width: 310px;
                        &.warning {
                            --primary-background-color: #ca0;
                            --primary-background-hover-color: #b90;
                            --primary-text-color: #fff;
                            --background-color: #fff2cc;
                            --text-color: #7f6000;
                        }
                        &.info {
                            --primary-background-color: #15c;
                            --primary-background-hover-color: #04b;
                            --primary-text-color: #fff;
                            --background-color: #c9daf8;
                            --text-color: #1c4587;
                        }
                        > .title {
                            padding: 10px 15px;
                            background: var(--primary-background-color);
                            color: var(--primary-text-color);
                            font-weight: bold;
    /*                        font-size: 1.1em;*/
                        }
                        > .content {
                            padding: 15px;
                            font-weight: bold;
                            display: flex;
                            flex-direction: column;
                            gap: 10px;
                            > .text {
                                font-size: 0.9em;
                            }
                            > .buttons {
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                                font-size: 0.9em;
                                > .button {
                                    display: block;
                                    text-align: center;
                                    padding: 10px 15px;
                                    background: var(--primary-background-color);
                                    color: var(--primary-text-color);
                                    border-radius: 5px;
                                    font-weight: bold;
                                    text-decoration: none;
                                    &:hover {
                                        background: var(--primary-background-hover-color);
                                    }
                                }
                            }
                        }
                    }
                    > .balloon, > .card {
                        margin-bottom: 5px;
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
        > #user_input {
            margin: 0;
            display: flex;
            position: relative;
            background: #f3f3f3;
            padding: 15px 20px;
            gap: 10px;
            > #chat_input {
                all: unset;
                font-size: 0.9em;
                background: #fff;
                flex-grow: 1;
                border-radius: 5px;
                padding: 8.5px 20px;
            }
            > #chat_send {
                all: unset;
                font-size: 0.9em;
                cursor: pointer;
                background: #0e68f7;
                color: #fff;
                border-radius: 5px;
                padding: 8.5px 20px;
            }
            > .notifications {
                position: absolute;
                bottom: 100%;
                > .notification {}
            }
        }
    }
}
footer {
    background: #f3f3f3;
    color: #333;
    padding: 7.5px 15px;
    text-align: center;
}
@keyframes typing {
    0% {
        transform: translateY(0em);
        background: #777;
    }
    20% {
        transform: translateY(-0.3em);
        background: #555;
    }
    40% {
        transform: translateY(0.25em);
        background: #555;
    }
    50%,100% {
        transform: translateY(0em);
        background: #777;
    }
}
@keyframes loading {
    0% {
        transform: translateY(0em);
    }
    50% {
        transform: translateY(1.5em);
    }
    100% {
        transform: translateY(0em);
    }
}
@media (max-width: 768px) {
    .chat {
        > #chat_history {
            padding: 20px 10px;
            > .msg {
                max-width: 95%;
            }
        }
        > .user_input {
            padding: 10px;
        }
    }
}