#chat-trigger, #chatbot{
    position: fixed; right: 15px; z-index: 1000;
    background-color: var(--color-1);
    box-shadow: rgba(0,0,0,.3) 0 3px 6px;
    border-radius: 20px;
}

#chatbot{
    --box-p: 15px;
    --box-g: 15px;
    --box-rad: 10px;
    --inputs-col: 1fr 60px;
    --inputs-g: var(--box-g);
    --input-h: 40px;
    --input-rad: var(--box-rad);
    --profil-s: 40px;
    --payl-rad: 5px;
    --payl-s: 14px;
    --message-s: 16px;
    --payl-p: var(--payl-rad);
    --box-item-g: var(--box-g);
    --svg-w: 20px;

    display: none;
    position: fixed; bottom: 90px; right: 15px; z-index: 1000;
    width: 100%; max-width: 360px;
    min-height: 200px; padding: 20px;
    grid-template-rows: 1fr 40px; gap: 15px;
}
#chatbot.show{display: grid;}
#chatbot #cb-input{display: grid; grid-template-columns: var(--inputs-col); gap: var(--inputs-g);}
#chatbot #cb-input input{min-height: var(--input-h); border-radius: var(--input-rad); border: none; outline: 0;}
#chatbot #cb-input button{border: none; outline: 0; border-radius: var(--input-rad); background-color: var(--color-2)}
#chatbot #cb-input button[disabled]{background-color: #ccc;}
#chatbot #cb-box{
    background-color: white;padding: var(--box-p);border-radius: var(--box-rad);
    display: grid; grid-template-columns: 1fr; gap: var(--box-g);
    max-height: 60vh; overflow-y: auto;
}
#chatbot #cb-box *{line-height: 1.2em;}
#chatbot #cb-box .bot,#chatbot #cb-box .human{display: grid; gap: var(--box-item-g)}
#chatbot #cb-box .human > div:first-of-type{grid-column: 2/3;grid-row: 1/2;}
#chatbot #cb-box .human > div:last-of-type{grid-column: 1/2;grid-row: 1/2;}
#chatbot #cb-box .bot{grid-template-columns: var(--profil-s) 1fr;}
#chatbot #cb-box .human{text-align: right;grid-template-columns: 1fr var(--profil-s);}
#chatbot #cb-box .profil{
    width: var(--profil-s); height: var(--profil-s);
    border-radius: 50%;
    background-color: var(--color-1);
    display: flex; justify-content: center; align-items: center;
}
#chatbot #cb-box .message{font-size: var(--message-s);}
#chatbot #cb-box .human .profil{background-color: var(--color-2);}
#chatbot #cb-box .profil, #chatbot #cb-box .profil *{color: white;}

#chatbot .payloads > div{
    background-color: var(--color-2); color: white;
    border-radius: var(--payl-rad); font-size: var(--payl-s); padding: var(--payl-p);
    cursor: pointer; font-weight: 500;
    max-width: max-content;
}
#chatbot .payloads > div:not(:last-of-type){margin-bottom: 5px;}
#chatbot svg{width: var(--svg-w); height: auto;}

#chat-trigger{
    --svg-w: 30px;
    bottom: 15px; width: 60px; height: auto; aspect-ratio: 1;
    display: flex; justify-content: center; align-items: center;
    border-radius: 50%; cursor: pointer;
    transition: background-color .3s ease; will-change: background-color;
}
#chat-trigger:hover{background-color: var(--color-2);}

#chat-trigger svg{width: var(--svg-w); height: auto;}
#chat-trigger svg path, #chatbot svg path{fill: white;}

@media (max-width: 1920px) {
    #chatbot{
        --box-p: calc(100vw * 15 / var(--bkpt));
        --box-g: calc(100vw * 15 / var(--bkpt));
        --box-rad: calc(100vw * 10 / var(--bkpt));
        --inputs-col: 1fr calc(100vw * 60 / var(--bkpt));
        --input-h: calc(100vw * 40 / var(--bkpt));
        --profil-s: calc(100vw * 40 / var(--bkpt));
        --payl-rad: calc(100vw * 5 / var(--bkpt));
        --payl-s: calc(100vw * 14 / var(--bkpt));
        --message-s: calc(100vw * 16 / var(--bkpt));
        --svg-w: calc(100vw * 20 / var(--bkpt));

        bottom: calc(100vw * 90 / var(--bkpt)); right: calc(100vw * 15 / var(--bkpt));
        width: 100%; max-width: calc(100vw * 360 / var(--bkpt));
        min-height: calc(100vw * 200 / var(--bkpt)); padding: calc(100vw * 20 / var(--bkpt));
        grid-template-rows: 1fr calc(100vw * 40 / var(--bkpt)); gap: calc(100vw * 15 / var(--bkpt));
    }

    #chat-trigger {
        --svg-w: calc(100vw * 30 / var(--bkpt));
        bottom: calc(100vw * 15 / var(--bkpt));
        width: calc(100vw * 60 / var(--bkpt));
    }

    #chat-trigger, #chatbot{border-radius: calc(100vw * 20 / var(--bkpt));}
}

@media (max-width: 768px) {
    #chatbot, #chat-trigger {--bkpt: 768;}
}

@media (max-width: 600px) {
    #chatbot{max-width: 80vw;}
}

@media (max-width: 480px) {
    #chatbot{
        --box-p: 15px;
        --box-g: 15px;
        --box-rad: 5px;
        --inputs-col: 1fr 50px;
        --input-h: 30px;
        --profil-s: 30px;
        --payl-rad: 5px;
        --payl-s: 12px;
        --message-s: 14px;
        --svg-w: 15px;

        bottom: 90px; right: 15px;
        width: 100%; max-width: calc(100vw - 30px);
        min-height: 200px; padding: 15px;
        grid-template-rows: 1fr 30px; gap: 15px;
    }

    #chat-trigger{
        --svg-w: 30px;
        bottom: 15px; width: 60px;
        border-radius: 50%;
    }
}