@import url('gold.css');
@import url('https://fonts.googleapis.com/css2?family=National+Park&family=Sigmar+One&display=swap');


:root {
    --primary: #ffffff;
    --secondary: #cccccc;
    --bg-primary: #666666;
    --bg-secondary: #333333;
    --bg-2: hsl(from var(--bg-secondary) h s 60);
    --bg-3: hsl(from var(--bg-secondary) h s 70);

    &:has(main[pnj]) {
        --primary: #b5d6cc;
        --secondary: #dfc07b;
        --bg-primary: #9dbe9c;
        --bg-secondary: #80caa6;
        --bg-2: hsl(from var(--bg-secondary) h s 60);
        --bg-3: hsl(from var(--bg-secondary) h s 70);
    }

    &:has(main[ceo]) {
        --primary: #dfc07b;
        --secondary: #b5d6cc;
        --bg-primary: #80caa6;
        --bg-secondary: #9dbe9c;
        --bg-2: hsl(from var(--bg-secondary) h s 60);
        --bg-3: hsl(from var(--bg-secondary) h s 70);
    }

    &:has(main[and]) {
        --primary: #f5d6b3;
        --secondary: #e6b17a;
        --bg-primary: #f8c8a9;
        --bg-secondary: #e6a17a;
        --bg-2: hsl(from var(--bg-secondary) h s 60);
        --bg-3: hsl(from var(--bg-secondary) h s 70);
    }

    &:has(main[ben]) {
        --primary: #a8c4d9;
        --secondary: #7ba4c0;
        --bg-primary: #5b8aa8;
        --bg-secondary: #3d6b8a;
        --bg-2: hsl(from var(--bg-secondary) h s 60);
        --bg-3: hsl(from var(--bg-secondary) h s 70);
    }

    &:has(main[guy]) {
        --primary: #ffd700;
        --secondary: #ffeb99;
        --bg-primary: #ffecb3;
        --bg-secondary: #ffeb99;
        --bg-2: hsl(from var(--bg-secondary) h s 60);
        --bg-3: hsl(from var(--bg-secondary) h s 70);
    }

    &:has(main[cat]) {
        --primary: #ffffff;
        --secondary: #cccccc;
        --bg-primary: #666666;
        --bg-secondary: #333333;
        --bg-2: hsl(from var(--bg-secondary) h s 60);
        --bg-3: hsl(from var(--bg-secondary) h s 70);
    }
    &:has(main[cul]) {
        --primary: #e6e6fa;
        --secondary: #d8bfd8;
        --bg-primary: #9370db;
        --bg-secondary: #8a2be2;
        --bg-2: hsl(from var(--bg-secondary) h s 60);
        --bg-3: hsl(from var(--bg-secondary) h s 70);
    }
    &:has(main[jhn]) {
        --primary: #ff9494;
        --secondary: #ffe0e0;
        --bg-primary: #ffffff;
        --bg-secondary: #EBF5FC;
        --bg-2: hsl(from var(--bg-secondary) h s 80);
        --bg-3: hsl(from var(--bg-secondary) h s 90);
    }
}

html {
    font-size: 1.5rem;
    font-family: "National Park", sans-serif;
    font-optical-sizing: auto;
}

body {
    color: midnightblue;
    background: linear-gradient(45deg, var(--bg-primary), var(--bg-secondary));
    background-size: 400% 400%;
    animation: animateBackground 10s ease infinite;
}

@keyframes animateBackground {
    50% { background-size: 100% 100%; }
}

.material-icons {
    font-size: unset !important;
    vertical-align: middle;
}

/* components */

main {
    display: grid;
    height: 100dvh;
    grid-template-rows: 1fr auto;
}

#answer {
    display: grid;
    gap: .5rem;
    overflow-y: auto;
    margin: .5rem;
    padding: .5rem;
    background: var(--secondary);
    border: 5px solid var(--primary);
    border-radius: 1.5rem;
    
    @media (min-width: 768px) {
        width: 80vw;
    }
    &::-webkit-scrollbar {
        display: none;
    }

    div {
        font-size: 1rem;
        width: fit-content;
        height: fit-content;
        padding: .5rem;
        border-radius: 1rem;
        &[system] {
            display: none;
        }
        &[user] {
            background: var(--bg-2);
            justify-self: flex-end;
            margin-left: 1rem;
        }
        &[assistant] {
            display: grid;
            gap: .5rem;
            background: var(--bg-3);
            margin-right: 1rem;
        }
        &:hover {
            filter: drop-shadow(0px 0px 2px white);
        }
    }
}

#chatbar {
    display: grid;
    grid-template-columns: auto 1fr;
    justify-items: stretch;
    padding-inline: .5rem;
    overflow: hidden;

    @media (min-width: 768px) {
        gap: 1rem;
    }
}

input {
    background: var(--secondary);
    width: -webkit-fill-available;
    padding: .5rem;
    border: 5px solid var(--primary);
    border-radius: 1rem;
    &[disabled] {
        background: var(--bg-secondary);
    }
}

#wp-icon {
    max-height: 9rem;
    border: .2rem solid var(--secondary);
    border-radius: 50%;
    margin: .2rem;
    cursor: pointer;
    filter: drop-shadow(2px 2px 6px var(--secondary));
    backdrop-filter: brightness(.9);
    animation: bg-animate 6s infinite linear;
    &:hover {
        filter: drop-shadow(-2px -2px 6px var(--primary));
    }
}

@keyframes bg-animate {
    50% {backdrop-filter: brightness(.8);}
}

#answer, input {
    filter: drop-shadow(2px 2px 2px black);
}

#char-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 1;
    place-content: center;
    @media screen and (max-width: 768px) {
        overflow: auto;
        padding: 1rem;
    }
}

.char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 9rem);
    gap: 2rem;
    padding-inline: 1rem;
    width: 100%;
}

.char-grid img {
    width: 10rem;
    border: 10px solid var(--secondary);
    border-radius: 50%;
    padding: .2rem;
    cursor: pointer;
    filter: drop-shadow(2px 2px 6px var(--secondary));
    backdrop-filter: brightness(.9);
    transition: all 0.1s ease;
}

.char-grid img:hover {
    transform: scale(1.1);
    filter: drop-shadow(-2px -2px 6px var(--primary));
}