*{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p{font-size:inherit;margin:0}body{font-family:Inter,system-ui;font-size:clamp(16px,3vw,18px);color:#000;display:grid;place-items:center;margin:0;min-height:100dvh;background-image:linear-gradient(0deg,#8ea4bc 40%,#cdd9e4)}.icon{width:30px;aspect-ratio:1}.chat{display:flex;flex-direction:column;height:100dvh;width:100%;background-color:#fff}@media (width >= 1024px){.chat{max-height:750px;max-width:560px}}.chat__header,.chat__body,.chat__footer{padding-right:max(env(safe-area-inset-right),25px);padding-left:max(env(safe-area-inset-left),25px)}.chat__header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;padding-block:25px;background-color:#7395d3;color:#fff;flex-shrink:0}@media (orientation: landscape) and (max-width: 1024px){.chat__header{padding-block:15px}}.chat__title{display:flex;align-items:center;column-gap:20px;font-size:clamp(18px,3vw,20px);font-weight:700;text-transform:uppercase}.chat__title:before{content:"";display:block;flex-shrink:0;width:6px;aspect-ratio:1;background-color:#fff;border-radius:50%}.chat__btn{padding:5px;border:none;background-color:transparent;color:#d6dff2;cursor:pointer;transition:color .3s ease-out}@media (hover: hover){.chat__btn:hover{color:#fff}}.chat__body{display:flex;flex-direction:column;row-gap:clamp(25px,6vw,37px);padding-block:35px;overflow-y:auto;flex-grow:1}.chat__day{display:flex;column-gap:14px;align-items:center;font-weight:500;color:#ccc;text-transform:uppercase}.chat__day:before,.chat__day:after{content:"";display:block;flex-grow:1;height:1px;background-color:#ccc}.chat__message{display:flex;flex-direction:column;row-gap:8px;align-self:flex-end}.chat__message--my{align-self:flex-start}.chat__message--my .chat__message-content{background-color:#e7edf5;border-top-left-radius:0}.chat__message--my .chat__message-content:before{content:"";position:absolute;top:0;left:-8px;border:0 solid transparent;border-top-width:0px;border-bottom-width:8px;border-right:8px solid #e7edf5}.chat__message--other .chat__time{text-align:right}.chat__message--other .chat__message-content{background-color:#f2f2f2;border-top-right-radius:0}.chat__message--other .chat__message-content:before{content:"";position:absolute;top:0;right:-8px;border:0 solid transparent;border-left-width:0px;border-right-width:8px;border-top:8px solid #f2f2f2}.chat__time{color:#999}.chat__message-content{position:relative;max-width:370px;width:fit-content;padding:14px;background-color:#f6c4c2;border-radius:4px}.chat__form{display:flex;align-items:center;justify-content:space-between;padding-block:25px;column-gap:30px;border-top:1px solid #ccc;flex-shrink:0}.chat__form-ta{resize:none;outline:none;border:none;flex-grow:1;padding:0}.chat__form-ta::placeholder{color:#999}.chat__form-btn{background-color:transparent;text-transform:uppercase;padding:0;border:none;font-size:clamp(18px,3vw,20px);font-weight:500;color:#7395d3;cursor:pointer}