/* CustomGPT Embed */

:root {

    /* colours */
    --cl-background: #f6f6f6;
    --cl-box: #FFFFFF;
    --cl-primary: #0778BC;
    --cl-primary-overlay: #ffffff98;
    --cl-primary-burn: #00439b;
    --cl-secondary: #181818;
    --cl-secondary-overlay: #363636;
    --cl-hero-box: #181818cc;
    --cl-text-primary: #000000;
    --cl-text-secondary: #FFFFFF;
    --cl-link-text: #0778BC;
    --cl-link-overlay: #9cd9ff7e;
    /* --cl-link-overlay-alt: #daf1ffa9; */
    --cl-link-overlay-alt: #004f80a9;

    --g-button-fx: linear-gradient(90deg, transparent, transparent, var(--cl-primary-overlay), transparent, transparent); /*gradient for the button flash effect on hover*/
    --g-ai-fx: linear-gradient(45deg, magenta, cyan); /*gradient CustomGPT border*/

    /*spacing*/
    --spc-small: 1rem;
    --spc-med: 2rem;
    --spc-large: 4rem;

    --nav-height: 4rem; /*default height of the navigation bar. Different on mobile*/
}

#customgpt_chat {
    background-color: var(--cl-secondary);
    position: fixed;
    width: min(50vw, 500px);
    min-width: 250px;
    height: max(50svh, 400px);
    bottom: 4rem;
    right: var(--spc-small);
    padding-top: 1rem;

    border-radius: var(--spc-med);
    border: 2px solid var(--cl-secondary);
    box-shadow: 3px 5px 5px rgba(0,0,0,0.25);
    overflow: hidden;
    z-index: 100;

    transform: scaleY(0);
    transform-origin: bottom;
    transition: 200ms;
}

#chatbot-toggle {
    display: none;
}

.chat-controller {
    --chat-controller-height: 5rem;

    box-shadow: 3px 5px 5px rgba(0,0,0,0.25);
    position: fixed;
    height: var(--chat-controller-height);
    width: var(--chat-controller-height);
    right: var(--spc-small);
    bottom: var(--spc-small);
    z-index: 200;

    /* background-image: var(--g-ai-fx); */
    background-color: var(--cl-box);
    border-radius: var(--spc-small);

    overflow: hidden;
    transition: width 200ms;
}

/* .chat-controller::after {
    --border-size: calc(100% - 4px);
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: var(--border-size);
    height: var(--border-size);
    background-color: var(--cl-box);

    border-radius: calc(var(--spc-small) * 0.9);
    z-index: -1;
} */

.chat-icon {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    height: 100%;
}

.chatbox-button h3{
    color: transparent;
    position: absolute;
    left: 0;
    padding: 1.5em;
    text-align: left;
    align-self: center;
    width: 15rem;
}

.chatbox-label-content {

    width: 100%;
    justify-items: center;
    align-content: center;
    align-items: center;
}

#chatbot-toggle:checked ~ #customgpt_chat {
    transform: scaleY(1);
    transition: 200ms;
}

#chatbot-toggle:checked ~ .chat-controller,
.chat-controller:hover {
    background-color: var(--cl-primary);
}

.chat-controller:hover h3 {
    color: var(--cl-box);
}

/* #chatbot-toggle:checked ~ .chat-controller .chat-icon,
.chat-controller:hover .chat-icon {
    filter: brightness(100);
} */

.chat-controller:hover {
    width: calc(var(--chat-controller-height) * 3.5);
    transition: width 200ms, background-position 400ms ease-in;
    background-position: right;
}

.chat-open {
    display: none;
}

#chatbot-toggle:checked ~ .chat-controller .chat-open {
    display: inline;
}

#chatbot-toggle:checked ~ .chat-controller .chat-closed {
    display: none;
}

@media (max-width: 650px) {

    :root {
        --fs-body: 1rem;
        --fs-title: 2rem;
        --fs-subtitle: 1.4rem;
        --fs-highlight: 1.2rem;
        --fs-nav: 1.1rem;

        --spc-small: 0.75rem;
        --spc-med: 1.25rem;
        --spc-large: 2rem;

        --nav-height: 5rem;
    }

    .chat-closed, .chat-open {
        display: none;
    }

    #chatbot-toggle:checked ~ .chat-controller .chat-open,
    #chatbot-toggle:checked ~ .chat-controller .chat-closed {
        display: none;
    }

    .chat-controller:hover {
        width: calc(var(--chat-controller-height) * 1);
    }

}