.chat{position:fixed;inset:auto 3.2em 3.2em auto;z-index:999;display:inline-flex;flex-flow:column nowrap;align-items:flex-end;align-content:normal;justify-content:flex-end;gap:1.6em}@media only screen and (max-width: 768px){.chat{inset:auto .8em .8em auto}}.chat--open{width:calc(100% - 1.6em);max-width:425px}@media only screen and (max-width: 425px){.chat--open{top:calc(var(--nav-height) + .8em);right:.8em;bottom:.8em;left:.8em}}.chat__container{position:relative;height:60dvb;background-color:#38457199;-webkit-backdrop-filter:blur(.8em);backdrop-filter:blur(.8em);display:grid;grid-template-rows:minmax(1.6em,1fr) auto;align-items:flex-end;align-content:flex-start;justify-content:flex-end;grid-gap:1.6em;gap:1.6em;border:.4em solid hsla(216,43%,44%,.3);border-radius:m;border-radius:.8em;padding:.8em}@media only screen and (max-width: 425px){.chat__container{height:100%}}.chat__close{--icon-scale: 1;position:absolute;inset:0 0 auto auto;display:grid;align-items:center;justify-items:center;place-items:center;aspect-ratio:1;padding:0;background-color:#0000;border-color:#0000;color:#fff;translate:-20% 20%;cursor:pointer}@media (hover: hover){.chat__close:hover{--icon-scale: 1.1}}.chat__close>.icon{--icon-size: 2.4em;scale:var(--icon-scale);transition:scale .25s ease-out}.chat__input{position:relative;width:100%;background-color:#384571;z-index:2;display:flex;flex-flow:row nowrap;align-items:stretch;align-content:normal;justify-content:flex-end;gap:.8em;border-radius:s;border-radius:.4em;padding:.4em}.chat__input:has(input:focus-visible){outline:-webkit-focus-ring-color auto 1px;outline-offset:-2px}.chat__input>input{flex-grow:1;max-height:320px;background-color:#0000;border-color:#0000;font-size:16px;color:#fff;border-radius:s;border-radius:.4em}.chat__input>input:focus-visible{outline:none}.chat__input>button{--send-btn-icon_color: currentColor;border-radius:circle;border-radius:50%;position:relative;display:block;width:2rem;min-width:2rem;height:2rem;padding:0;background-color:#44afe4;background-color:var(--send-btn_bg, hsl(200, 75%, 58%));border-color:#0000;color:#fff;transition:background-color .15s ease-out;cursor:pointer}@media (hover: hover){.chat__input>button:hover{--send-btn_bg: hsl(200, 75%, 53%)}}.chat__input>button[disabled]{--send-btn_bg: hsl(0, 0%, 90%);--send-btn-icon_color: hsl(90, 2%, 50%);pointer-events:none}.chat__input>button>.icon{--icon-size: 1rem;--icon-color: var(--send-btn-icon_color);position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%);transition:translate .15s ease-out}.messages{position:relative;display:grid;align-items:flex-end;height:100%;overflow:auto;overscroll-behavior:contain;-webkit-mask:linear-gradient(hsla(0,0%,0%,0),hsl(0,0%,100%) 30%);mask:linear-gradient(hsla(0,0%,0%,0),hsl(0,0%,100%) 30%)}.messages::-webkit-scrollbar{display:none}.messages__wrapper{display:flex;flex-flow:column nowrap;align-items:stretch;align-content:normal;justify-content:flex-end;gap:1.6em}.message{display:flex;flex-flow:var(--message_flex-flow) nowrap;align-items:flex-start;align-content:normal;justify-content:flex-start;gap:1.6em}.message:has(.message__content:empty){display:none}.message--user{--message_flex-flow: row-reverse;--message_bg-color: hsl(216, 43%, 44%);--message-arrow_left: auto;--message-arrow_right: 0;--message-arrow_translate-x: 25%;--message-avatar_bg-color: hsl(200, 75%, 58%);--message-avatar_bg-image: none}.message--bot{--message_flex-flow: row;--message_bg-color: hsl(226, 34%, 33%);--message-arrow_left: 0;--message-arrow_right: auto;--message-arrow_translate-x: -25%;--message-avatar_bg-color: hsl(209, 100%, 89%);--message-avatar_bg-image: url(/images/illustration/bot-avatar.png)}.message__icon{display:grid;align-items:center;justify-items:center;place-items:center;height:3.2em;aspect-ratio:1;background-image:var(--message-avatar_bg-image);background-repeat:no-repeat;background-position:center;background-size:70%;background-color:var(--message-avatar_bg-color);border-radius:circle;border-radius:50%}.message__icon>.icon{--icon-color: hsl(0, 0%, 100%);--icon-size: 1.6em}.message__content{position:relative;max-width:70%;background-color:var(--message_bg-color);color:#fff;padding:.8em;border-radius:s;border-radius:.4em}.message__content:after{position:absolute;top:0;right:var(--message-arrow_right);bottom:auto;left:var(--message-arrow_left);content:attr(data-letter);height:1.6em;aspect-ratio:1;background-color:inherit;border-radius:.2em;color:#000;translate:var(--message-arrow_translate-x) .4em;rotate:45deg;transform:skew(-20deg,-20deg);z-index:-1}
