@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@property --hue {
  syntax: '<number>';
  inherits: true;
  initial-value: 240;
}

@property --radius {
  syntax: '<length>';
  inherits: true;
  initial-value: calc(80px / 3);
}

@property --padding {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}
@property --pill-height {
  syntax: '<length>';
  inherits: true;
  initial-value: 60px;
}

@property --cbox-height {
  syntax: '<length>';
  inherits: true;
  initial-value: 84px;
}

@property --hbtn-height {
  syntax: '<length>';
  inherits: true;
  initial-value: 48px;
}

:root, ::backdrop{
    --font-head: "Atkinson Hyperlegible Next", sans-serif;
    --font-body: "Inter", sans-serif;

    --radius: calc(80px / 3); /* from --pill-height which was 72px, scaled down to 60px */
    --padding: 16px;

    --pill-height: 60px;
    --cbox-height: 84px;
    --hbtn-height: 48px;

    --font-size: 1rem;

    --hue: 240;
    animation: hue-rotate 2s ease-in-out infinite alternate;
    transition: --pill-height 300ms ease, --cbox-height 300ms ease, --hbtn-height 300ms ease, --radius 300ms ease, --padding 300ms ease;
}

@keyframes hue-rotate{
    from{--hue: 230;}
    to{--hue: 250;}
}

@media (prefers-reduced-motion: reduce) {
    :root, ::backdrop{
        animation: none;
    }
}

body{
    background-color: var(--background);
    margin: 0%;
    overflow-x: hidden;
    transition: all 500ms ease, transform 0 ease;
}

h1{
    font-family: var(--font-head);
    color: var(--orange);
}

.big{
    font-family: var(--font-body);
    font-size: var(--font-size);
    color: var(--onSurface);
}

.lit{
    color: var(--primary);
}

.nomargin{
    margin: 0px;
}

.textinput{
    font-family: var(--font-body);
    font-size: var(--font-size);
    color: var(--onSurface);
    width: calc(240px - var(--padding));

    border-color: var(--keyColor);
    border-width: 0px;
    border-style: solid;

    border-radius: var(--radius);

    padding: calc(var(--padding) / 2);

    background-color: var(--background);

    transition-duration: 500ms;
}

.chatinput{
    font-family: var(--font-body);
    font-size: var(--font-size);
    font-weight: 700;
    color: var(--onSurface);

    border-color: var(--keyColor);
    border-width: 0px;
    border-style: solid;

    border-radius: var(--radius);

    padding: calc(var(--padding) / 2);

    background-color: var(--surface);

    transition-duration: 500ms;
}

.dialog {
    background-color: var(--surface);
    border-radius: var(--radius);
    height: calc(var(--pill-height) * 2);
    width: 240px;
    text-align: center;
    padding: var(--padding);
    border-width: 0px;
    border-style: solid;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;

    display: none;
    opacity: 0;
    pointer-events: none;
    transition: all 300ms ease;
}

.dialog::backdrop {
    backdrop-filter: blur(4px);
    background-color: oklch(from var(--background) l c h / 0.5);
    transition: 300ms ease;
}

@starting-style{
    .dialog::backdrop{
        backdrop-filter: blur(0px);
        background-color: oklch(from var(--background) l c h / 0.0);
    }
}

.dialog:open{
    opacity: 1;
    pointer-events: auto;
    transition: all 300ms ease;
    display: grid;

    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}

.tempeditable{
    font-family: var(--font-body);
    font-size: var(--font-size);
    color: var(--onSurface);

    border-color: var(--keyColor);
    border-width: 4px;
    border-style: solid;

    border-radius: var(--radius);

    padding: calc(var(--padding) / 2);

    background-color: var(--background);

    transition-duration: 500ms;
}

.paintchipgrid{
    display: grid;

    grid-template-columns: repeat(11,1fr);
    grid-template-rows: repeat(2,1fr);

    height: 64px;
    width: min(704px,calc(100% - var(--padding)));

    overflow: hidden;

    /* transition-duration: 500ms; */
}

.paintchip{
    border-radius: 24px;

    border-color: rgba(0, 0, 0, 1);
    border-width: 0px;
    border-style: solid;

    cursor: pointer;
    transition-duration: 100ms;
}

.paintchip:hover{
    border-radius: 24px;

    border-color: rgba(255, 255, 255, 1);
    border-width: 4px;
    border-style: solid;

    transition-duration: 100ms;
}

.paintchip:active{
    border-radius: 24px;

    border-color: rgba(0, 0, 0, 1);
    border-width: 4px;
    border-style: solid;

    transition-duration: 100ms;
}

.layout{
    display: grid;
    grid-template-columns: 240px 1fr;
    height: 100vh;
    height: 100dvh;
    transition: grid-template-columns 300ms ease;
}

@media (max-width: 720px) {
    .layout {
        grid-template-columns: 0px 1fr;
        transition: grid-template-columns 300ms ease;
    }

    .sidebar {
        opacity: 0;
        transition: 300ms ease;
        pointer-events: none;
    }

    :root, ::backdrop{
        --radius: calc(80px / 3);
        --padding: 16px;
        --pill-height: 60px;
        --cbox-height: 84px;
        --hbtn-height: 48px;
    }
}

.layout.collapsed{
    grid-template-columns: 0px 1fr;
    transition: grid-template-columns 300ms ease;
}

.sidebar{
    overflow: hidden;
    background-color: var(--surface);
    color: var(--onSurface);
    padding: var(--padding);
    border-radius: 0px var(--radius) var(--radius) 0px;

    display: grid;
    grid-template-rows: var(--pill-height) 1fr var(--cbox-height);
    gap: var(--padding);
}

.main{
    display: grid;
    grid-template-rows: calc(var(--pill-height) * 2 + var(--padding)) 1fr var(--cbox-height);
    gap: var(--padding);

    background-color: var(--background);
    color: var(--onSurface);
    padding: var(--padding);

    width: calc(100% - var(--padding) * 2);
    max-width: 720px;
    margin: 0px auto;
}

.top{
    background-color: var(--surface);
    border-radius: var(--radius);
    padding: var(--padding);
}

.chat{
    background-color: var(--surface);
    border-radius: var(--radius);
    padding: var(--padding);
    max-height: calc(100vh - (var(--pill-height) * 2 + var(--padding)) - var(--cbox-height) - var(--padding) * 6);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;

    scrollbar-width: auto;
    scrollbar-color: var(--primary) transparent;

    display: flex;
    flex-direction: column;
    gap: var(--padding);
}

.chatbotmessage{
    font-size: var(--font-size);
    font-weight: 500;
    font-family: var(--font-body);

    line-height: 1.5;

    color: var(--onBackground);

    margin: 0px;

    padding: var(--padding);
    align-self: flex-start;

    transition: transform 300ms ease, opacity 300ms ease;
}

.usermessage{
    min-height: calc(var(--pill-height) - var(--padding) * 2);
    border-radius: var(--radius);
    
    background-color: var(--primary);
    color: var(--onPrimary);

    line-height: 1.5;

    font-size: var(--font-size);
    font-weight: 700;
    font-family: var(--font-body);

    display: grid;
    align-content: center;
    justify-items: center;
    cursor: pointer;

    border-width: 0px;
    border-style: solid;

    width: fit-content;
    padding: var(--padding);
    align-self: flex-end;

    transition: opacity 700ms ease,
                transform 700ms ease,
                box-shadow 700ms ease,
                filter 700ms ease,
                color 0s ease,
                background-color 0s ease;
}

.removing {
    animation: removing 1400ms ease forwards;
}

@keyframes removing{
    from{
        opacity: 1;
        box-shadow: inset 0 0 0 0px var(--surface);
        transform: translateY(0px) scale(1);
        filter: blur(0px);
        min-height: calc(var(--pill-height) - var(--padding) * 2);
        max-height: fit-content;
        padding: var(--padding);
        overflow: hidden;
    }
    50%{
        opacity: 0;
        transform: translateY(20px) scale(1.1);
        filter: blur(8px);
        min-height: calc(var(--pill-height) - var(--padding) * 2);
        max-height: fit-content;
        padding: 0px;
        margin-bottom: 0px;
        overflow: hidden;
    }
    to{
        opacity: 0;
        filter: none;
        min-height: 0px;
        max-height: 0px;
        padding: 0px;
        margin-bottom: calc(var(--padding) * -1);
        overflow: hidden;
    }
}

@starting-style{
    .usermessage{
        opacity: 0;
        transform: translateY(20px) scale(1.1);
        box-shadow: inset 0 0 0 var(--pill-height) var(--surface);
        filter: blur(4px);
    }
    .chatbotmessage{
        opacity: 0;
        transform: translateY(-20px);
    }
}

.bottom{
    background-color: var(--surface);
    border-radius: var(--radius);
    padding: calc(var(--padding));

    display: grid;
    align-items: center;
    grid-template-columns: var(--hbtn-height) 1fr var(--hbtn-height);
    gap: calc(var(--padding));

}

@property --active-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.pill,
.invpill,
.litpill,
.pill96,
.placeholder60
{
    width: 100%;
    max-width: 100%;
    height: var(--pill-height);
    border-radius: var(--radius);
    font-size: var(--font-size);
    font-weight: 700;
    font-family: var(--font-body);
    display: grid;
    align-content: center;
    justify-items: center;
    cursor: pointer;
    border-width: 0px;
    border-color: var(--keyColor);
    border-style: solid;

    --active-opacity: 1;
    background-color: oklch(from var(--bg-base) l c h / var(--active-opacity));

    filter: drop-shadow(0px 0px 0px var(--background));
    transition: scale 500ms ease, --active-opacity 500ms ease, box-shadow 500ms ease, filter 500ms ease;
}

.pill:hover,
.invpill:hover,
.litpill:hover,
.pill96:hover,
.placeholder60:hover{
    z-index: 2;
    position: relative;

    --active-opacity: 1;

    backdrop-filter: blur(0px);

    box-shadow: inset 0 0 0 5px oklch(from var(--onBackground) l c h / 0.2);
    filter: drop-shadow(0px 0px 2px var(--background));

    scale: 1.05;

    transition: scale 800ms ease, --active-opacity 800ms ease, box-shadow 800ms ease, filter 800ms ease;
}

.pill:active,
.invpill:active,
.litpill:active,
.pill96:active,
.placeholder60:active{
    scale: 1.1;

    --active-opacity: 0.5; 

    backdrop-filter: blur(8px);

    box-shadow: inset 0 0 0 5px var(--onBackground);
    filter: drop-shadow(0px 0px 10px var(--primary));

    z-index: 5;
    position: relative;

    transition: scale 0ms ease, --active-opacity 0ms ease, box-shadow 0ms ease, filter 0ms ease;
}

.pill    { --bg-base: var(--surface);    color: var(--onSurface); }
.invpill { --bg-base: var(--background); color: var(--onBackground); }
.litpill { --bg-base: var(--primary);    color: var(--onPrimary); }

.pill96{
    height: var(--cbox-height) !important;
}

.placeholder60{
    width: var(--hbtn-height);
    height: var(--hbtn-height);
}

.chatlist{
    background-color: var(--background);

    border-radius: var(--radius);
}