:root{
--chat-primary:#655BFF;
--chat-secondary:#4D8CFF;
--chat-gradient:linear-gradient(135deg,#655BFF 0%,#4D8CFF 100%);
--chat-bg:#FFFFFF;
--chat-bg-soft:#F7F8FF;
--chat-border:rgba(101,91,255,.08);
--chat-shadow:0 30px 70px rgba(79,99,255,.18),0 10px 25px rgba(0,0,0,.08);
--chat-text:#21242D;
--chat-light:#6D7485;
--chat-radius:28px;
--chat-transition:.35s cubic-bezier(.22,1,.36,1);
--chat-font:"Inter","Poppins","Segoe UI",sans-serif;
}

.swal2-container,
.swal2-backdrop,
.swal2-popup {
    z-index: 2147483647 !important;
}

#chat-container,
#chat-container *,
#open-chat-btn,
#open-chat-btn *{

box-sizing:border-box;
font-family:var(--chat-font);
}
#open-chat-btn{
    position:fixed;
    right:20px;
    bottom:20px;
    width:65px;
    height:65px;
    border:none;
    outline:none;
    border-radius:50%;
    background:#f6f6f6;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    overflow:visible; 
    box-shadow:0 20px 45px rgba(88,92,255,.22);
    z-index:9998;
}

#open-chat-btn::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:50%;
    border:2px solid rgba(108,99,255,.8);
    animation:ringPulse 2.2s ease-out infinite;
}

#open-chat-btn::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:50%;
    border:2px solid rgba(108,99,255,.45);
    animation:ringPulse 2.2s ease-out infinite .8s;
}

#open-chat-btn img{
    width:42px;
    height:42px;
    object-fit:contain;
    animation:logoFloat 2.2s ease-in-out infinite;
}

#open-chat-btn:hover{
transform:translateY(-5px) scale(1.05);
box-shadow:0 30px 60px rgba(89,97,255,.35);
}

@keyframes logoFloat{
    0%{
        transform: translateY(2px) scale(.92);
    }

    25%{
        transform: translateY(-1px) scale(1);
    }

    50%{
        transform: translateY(-2px) scale(1.08);
    }

    75%{
        transform: translateY(0) scale(1);
    }

    100%{
        transform: translateY(2px) scale(.92);
    }
}

@keyframes ringPulse{
    0%{
        transform: scale(1);
        opacity: .7;
    }

    50%{
        transform: scale(1.28);
        opacity: .35;
    }

    100%{
        transform: scale(1.55);
        opacity: 0;
    }
}


#open-chat-btn.hide{
opacity:0;
visibility:hidden;
transform:scale(.75);
}

#chat-icon{
width:58px;
height:58px;
object-fit:contain;
position:relative;
z-index:2;
animation:launcherFloat 3s ease-in-out infinite;
}

.chat-box{
position:fixed!important;
right:25px!important;
bottom:50px!important;
left:auto!important;
top:auto!important;
width:min(410px,calc(100vw - 40px))!important;
min-width:0!important;
max-width:calc(100vw - 40px)!important;
height:min(610px,calc(100dvh - 40px))!important;
min-height:0!important;
max-height:calc(100dvh - 40px)!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
background:rgba(255,255,255,.96)!important;
border-radius:30px!important;
border:1px solid rgba(255,255,255,.5)!important;
backdrop-filter:blur(22px)!important;
box-shadow:0 40px 90px rgba(84,92,255,.18)!important;
z-index:999999!important;
opacity:0;
visibility:hidden;
transform:translateY(30px) scale(.95);
transition:.35s;
}

.chat-box.show{
opacity:1!important;
visibility:visible!important;
transform:none!important;
}

#open-chat-btn.hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.chat-box::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:160px;
background:linear-gradient(180deg,rgba(101,91,255,.08),transparent);
pointer-events:none;
}

.chat-header{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:14px;
padding:18px 20px;
background: radial-gradient(circle at right top, rgba(210, 235, 255, 0.45) 0%, rgba(210, 235, 255, 0.12) 28%, rgba(210, 235, 255, 0) 50%), radial-gradient(circle at left top, rgba(210, 235, 255, 0.45) 0%, rgba(210, 235, 255, 0.12) 28%, rgba(210, 235, 255, 0) 50%), linear-gradient(rgb(249, 251, 239) 0%, rgb(232, 238, 236) 100%);
border-bottom:1px solid rgba(101,91,255,.08);
position:relative;
z-index:5;
user-select: none;
}

.profile{
display:grid;
grid-template-columns:54px 1fr;
align-items:center;
gap:10px;
}

.chat-logo{
width:70px;
height:60px;
border-radius:18px;
object-fit:contain;
}

.details{
display:flex;
flex-direction:column;
justify-content:center;
}

.details .name{
font-size:13px;
font-weight:600;
color:var(--chat-text);
line-height:1.2;
}

.status{
display:flex;
align-items:center;
gap:6px;
margin-top:4px;
font-size:12px;
font-weight:500;
color:var(--chat-light);
}

.online-dot{
width:8px;
height:8px;
border-radius:50%;
background:#22C55E;
box-shadow:0 0 10px #22C55E;
animation:onlinePulse 3s infinite;
}

.chat-header-buttons{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
}

.chat-header-buttons button{
width:40px;
height:40px;
border:none;
outline:none;
border-radius:14px;
background:#FFF;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:18px;
color:#555;
box-shadow:0 8px 20px rgba(101,91,255,.12);
transition:all .25s ease;
}

.chat-header-buttons button:hover{
background:var(--chat-gradient);
color:#FFF;
transform:translateY(-2px);
}

.chat-header-buttons button:active{
transform:scale(.95);
}

@keyframes launcherFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-5px);}
}

@keyframes launcherGlow{
0%,100%{opacity:.35;}
50%{opacity:1;}
}

@keyframes onlinePulse{
0%{transform:scale(1);opacity:1;}
70%{transform:scale(1.7);opacity:0;}
100%{transform:scale(1);opacity:1;}
}

.chat-messages{
flex:1;
display:flex;
flex-direction:column;
gap:16px;
padding:22px;
overflow-y:auto;
overflow-x:hidden;
background:linear-gradient(180deg,#fbfbff 0%,#ffffff 100%);
scroll-behavior:smooth;
scrollbar-width:thin;
scrollbar-color:rgba(101,91,255,.25) transparent;
position:relative;
}

.chat-messages::-webkit-scrollbar{
width:6px;
}

.chat-messages::-webkit-scrollbar-track{
background:transparent;
}

.chat-messages::-webkit-scrollbar-thumb{
background:rgba(101,91,255,.22);
border-radius:20px;
}

.chat-messages::-webkit-scrollbar-thumb:hover{
background:rgba(101,91,255,.45);
}

.message{
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 82%;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    word-break: break-word;
    white-space: pre-wrap;

    /* Card Style */
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);

    transition: all 0.35s ease;
    animation: messageIn .35s ease;
}

.message:hover,.option-buttons:hover{
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.05);
}

.message-row{
    display:flex;
    align-items:flex-end;
    gap:10px;
    margin-bottom:12px;
}

.message-row.user{
    justify-content:flex-end;
}

.message-row.bot{
    justify-content:flex-start;
}

.avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:18px;
    color:#fff;
    box-shadow:0 6px 15px rgba(0,0,0,.12);
}

.bot-avatar{
    background:#fff;
    color:#655BFF;
    border:2px solid #655BFF;
}

.user-avatar{
    background:linear-gradient(135deg,#5A49F8,#6C63FF);
}

.message{
    position:relative;
    max-width:75%;
    padding:12px 16px;
}

.message p{
margin:0;
}

.message strong{
font-weight:700;
}

.message a{
color:#4D8CFF;
font-weight:600;
text-decoration:none;
transition:.25s;
}

.message a:hover{
text-decoration:underline;
}

.msg-content-wrapper{
position:relative;
display:flex;
flex-direction:column;
width:100%;
padding-right:42px;
min-width:0;
color:inherit;
word-break:break-word;
}

.msg-content ul{
margin-top:8px;
padding-left:18px;
}

.msg-content li{
margin-bottom:6px;
}

.msg-content code{
padding:2px 6px;
border-radius:6px;
background:#EEF1FF;
font-size:13px;
}

.msg-content pre{
margin-top:10px;
padding:14px;
border-radius:14px;
background:#1E1F29;
color:#FFF;
overflow:auto;
font-size:13px;
}

.copy-btn{
position:absolute;
top:8px;
right:8px;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:none;
background:#F6F7FF;
border-radius:10px;
cursor:pointer;
transition:.25s;
opacity:1;
z-index:2;
}

.copy-btn .copied-label{
position:absolute;
right:38px;
top:10%;
transform:translateY(-50%);
font-size:11px;
font-weight:700;
color:#1f9d6a;
background:rgba(31,157,106,.12);
padding:4px 8px;
border-radius:999px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:.2s ease;
}

.copy-btn.copied .copied-label{
opacity:1;
}

.message.bot:hover .copy-btn,
.message.bot:focus-within .copy-btn{
opacity:1;
}

.copy-btn:hover{
background:var(--chat-gradient);
transform:translateY(-2px);
}

.copy-btn:hover .copy-icon{
filter:brightness(0) invert(1);
}

.copy-btn:active{
transform:scale(.94);
}

.copy-icon{
width:16px;
height:16px;
opacity:.75;
transition:.25s;
object-fit:contain;
}

.link-button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 18px;
margin-top:10px;
background:var(--chat-gradient);
color:#FFF;
font-size:14px;
font-weight:600;
text-decoration:none;
border-radius:14px;
transition:.3s;
box-shadow:0 12px 26px rgba(101,91,255,.18);
}

.link-button:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(101,91,255,.25);
}

.typing-indicator{
display:flex;
align-items:center;
gap:5px;
padding:14px 18px;
background:#FFF;
border-radius:20px 20px 20px 6px;
width:72px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.typing-indicator span{
width:8px;
height:8px;
border-radius:50%;
background:#655BFF;
animation:typing 1.3s infinite;
}

.typing-indicator span:nth-child(2){
animation-delay:.2s;
}

.typing-indicator span:nth-child(3){
animation-delay:.4s;
}

.message-time{
margin-top:6px;
font-size:11px;
opacity:.55;
}

.message.user .message-time{
color:#FFF;
}

.message.bot .message-time{
color:#666;
}

@keyframes messageIn{
0%{
opacity:0;
transform:translateY(16px);
}
100%{
opacity:1;
transform:none;
}
}

@keyframes typing{
0%,80%,100%{
transform:scale(.5);
opacity:.35;
}
40%{
transform:scale(1);
opacity:1;
}
}

/*==========================
CHAT ANIMATIONS
==========================*/

@keyframes chatFadeUp{
0%{
opacity:0;
transform:translateY(40px) scale(.92);
}
100%{
opacity:1;
transform:translateY(0) scale(1);
}
}

@keyframes chatFadeDown{
0%{
opacity:1;
transform:translateY(0) scale(1);
}
100%{
opacity:0;
transform:translateY(20px) scale(.95);
}
}

@keyframes floating{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
}

@keyframes pulseGlow{
0%{
box-shadow:0 0 0 rgba(90,73,248,.4);
}
50%{
box-shadow:0 0 30px rgba(90,73,248,.5);
}
100%{
box-shadow:0 0 0 rgba(90,73,248,.4);
}
}

@keyframes typingDots{
0%{
transform:translateY(0);
opacity:.3;
}
50%{
transform:translateY(-4px);
opacity:1;
}
100%{
transform:translateY(0);
opacity:.3;
}
}

.typing{
display:flex;
align-items:center;
gap:5px;
padding:14px 18px;
background:#fff;
border:1px solid rgba(90,73,248,.08);
border-radius:18px;
width:max-content;
box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.typing span{
width:8px;
height:8px;
border-radius:50%;
background:#5A49F8;
animation:typingDots 1s infinite;
}

.typing span:nth-child(2){
animation-delay:.15s;
}

.typing span:nth-child(3){
animation-delay:.3s;
}

/*==========================
SCROLLBAR
==========================*/

.chat-messages::-webkit-scrollbar{
width:7px;
}

.chat-messages::-webkit-scrollbar-track{
background:transparent;
}

.chat-messages::-webkit-scrollbar-thumb{
background:rgba(90,73,248,.25);
border-radius:30px;
}

.chat-messages::-webkit-scrollbar-thumb:hover{
background:#5A49F8;
}

.input-field::-webkit-scrollbar{
width:5px;
}

.input-field::-webkit-scrollbar-thumb{
background:#5A49F8;
border-radius:20px;
}


.message{
animation:chatFadeUp .35s ease;
}

.message.user{
animation:chatFadeUp .25s ease;
}

.message.bot{
animation:chatFadeUp .35s ease;
}


.message a{
color:#5A49F8;
font-weight:600;
text-decoration:none;
}

.message a:hover{
text-decoration:underline;
}

.message ul{
margin-top:10px;
padding-left:20px;
}

.message li{
margin-bottom:6px;
}

.message pre{
background:#1E1E2F;
color:#fff;
padding:15px;
border-radius:14px;
overflow:auto;
margin-top:12px;
font-size:13px;
}

.message code{
font-family:Consolas,monospace;
}

.message table{
width:100%;
border-collapse:collapse;
margin-top:12px;
font-size:14px;
}

.message table td,
.message table th{
padding:10px;
border:1px solid rgba(0,0,0,.08);
}

.message table th{
background:#F7F7FB;
}

.message img{
max-width:100%;
border-radius:14px;
margin-top:10px;
}


.option-buttons{
display:grid;
gap:12px;
margin-top:16px;
transition: all 0.35s ease;
background:#fff;
    border:1px solid rgba(101,91,255,.12);
    border-radius:18px;
    padding:10px;
    box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.option-button{
display:flex;
background:transparent;
border:none;
align-items:center;
justify-content:space-between;
border-radius:16px;
font-size:15px;
font-weight:600;
color:#2E2E48;
cursor:pointer;
transition:.3s;
}

.option-button:hover{
transform:translateX(8px);
background: transparent;
}

.option-button:active{
transform:scale(.98);
}

.option-button::after{
content:"→";
font-size:18px;
color:#5A49F8;
}



.copy-btn{
position:absolute;
top:8px;
right:8px;
width:32px;
height:32px;
border:none;
border-radius:10px;
background:#F6F6FB;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.25s;
opacity:1;
z-index:2;
}

.message.bot:hover .copy-btn,
.message.bot:focus-within .copy-btn{
opacity:1;
}

.copy-btn:hover{
background:#5A49F8;
}

.copy-btn:hover img{
filter:brightness(0) invert(1);
}

.copy-btn img{
width:18px;
height:18px;
margin:0px;
transition:.25s;
}


.chat-empty{
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:40px;
}

.chat-empty img{
width:90px;
margin-bottom:25px;
}

.chat-empty h3{
font-size:24px;
color:#25233A;
margin-bottom:12px;
}

.chat-empty p{
font-size:15px;
line-height:1.7;
color:#767A90;
max-width:280px;
}

.welcome-card{
background:linear-gradient(135deg,#5A49F8,#7466FF);
padding:24px;
border-radius:24px;
color:#fff;
margin-bottom:22px;
box-shadow:0 25px 50px rgba(90,73,248,.22);
}

.welcome-card h2{
font-size:22px;
font-weight:700;
margin-bottom:10px;
}

.welcome-card p{
font-size:15px;
line-height:1.7;
opacity:.95;
}

.input-area{
display:grid;
grid-template-columns:1fr 52px;
align-items:center;
gap:14px;
padding:18px 20px;
background: radial-gradient(circle at right top, rgba(210, 235, 255, 0.45) 0%, rgba(210, 235, 255, 0.12) 28%, rgba(210, 235, 255, 0) 50%), radial-gradient(circle at left top, rgba(210, 235, 255, 0.45) 0%, rgba(210, 235, 255, 0.12) 28%, rgba(210, 235, 255, 0) 50%), linear-gradient(rgb(249, 251, 239) 0%, rgb(232, 238, 236) 100%);
border-top:1px solid rgba(90,73,248,.08);
flex-shrink:0;
}

.input-field{
width:100%;
min-height:40px;
max-height:120px;
padding:13px;
border:1px solid rgba(90,73,248,.12);
border-radius:16px;
background:#F8F9FD;
font-size:15px;
font-family:inherit;
line-height:1.6;
color:#2E2E48;
resize:none;
overflow-y:auto;
transition:.25s;
}

.input-field:focus{
outline:none;
border-color:#5A49F8;
background:#fff;
box-shadow:0 0 0 4px rgba(90,73,248,.08);
}

.input-field::placeholder{
color:#9A9EB3;
}

.send-btn{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
border:none;
border-radius:16px;
background:linear-gradient(135deg,#5A49F8,#6C63FF);
color:#fff;
font-size:20px;
cursor:pointer;
transition:.25s;
box-shadow:0 12px 28px rgba(90,73,248,.25);
}

.send-btn:hover{
transform:translateY(-2px);
box-shadow:0 18px 35px rgba(90,73,248,.35);
}

.send-btn:active{
transform:scale(.95);
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}
.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.btn-submit,
.btn-cancel {
    padding: 8px 15px;
    border: 1px solid #6C63FF;
    border-radius: 8px;
    background: transparent;
    color: #6C63FF;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-submit:hover {
    background: linear-gradient(135deg, rgb(90, 73, 248), rgb(108, 99, 255));
    border-color: rgb(108, 99, 255);
    color: #fff;
}

/* Cancel */
.btn-cancel {
    border-color: #dc3545;
    color: #dc3545;
}

.btn-cancel:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.btn-submit:focus,
.btn-cancel:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(108, 99, 255, 0.25);
}

.btn-submit:active,
.btn-cancel:active {
    transform: scale(0.98);
}

@media(max-width:1400px){

.chat-box{
width:min(380px,calc(100vw - 56px))!important;
max-width:calc(100vw - 56px)!important;
height:min(640px,calc(100dvh - 123px))!important;
max-height:calc(100dvh - 123px)!important;
right:28px!important;
bottom:95px!important;
}

#open-chat-btn{
right:28px;
bottom:28px;
}

.chat-header{
padding:18px;
}

.chat-messages{
padding:20px;
}

.input-area{
padding:16px;
}

.message{
max-width:90%;
}

.option-buttons{
gap:10px;
}


}

@media(max-width:768px){

.chat-box{
width:calc(100vw - 24px)!important;
max-width:420px!important;
height:min(680px,calc(100dvh - 110px))!important;
max-height:calc(100dvh - 110px)!important;
right:20px!important;
left:20px!important;
margin-left: auto;
bottom:12px!important;
border-radius:24px;
}

#open-chat-btn{
width:64px;
height:64px;
right:18px;
bottom:18px;
}

#chat-icon{
width:58px;
height:58px;
}

.chat-header{
padding:16px;
}


.chat-logo{
width:46px;
height:46px;
}

.status{
font-size:12px;
}

.chat-header-buttons{
gap:8px;
}

.chat-header-buttons button{
width:40px;
height:40px;
}

.chat-messages{
padding:18px;
gap:14px;
}

.message{
max-width:94%;
font-size:14px;
padding:14px 16px;
}

.option-buttons{
display:grid;
grid-template-columns:1fr;
gap:10px;
}

.option-button{
font-size:14px;
}

.input-area{
grid-template-columns:1fr 48px;
gap:12px;
padding:14px;
}

.input-field{
font-size:15px;
min-height:46px;
}

.send-btn{
width:48px;
height:48px;
font-size:18px;
}

.copy-btn{
opacity:1;
}

}

@media (max-width: 480px) {

  .chat-box {
    width: calc(100vw - 24px)!important;
    max-width: 340px!important;

    height: min(500px, calc(90dvh - 100px))!important;
    max-height: calc(90dvh - 100px)!important;

    left: auto!important;
    right: 2px!important;
    bottom: 12px!important;

    border-radius: 22px;

    animation: chatFadeUp .3s ease;
  }

  .chat-header {
    padding: 15px;
    border-radius: 22px 22px 0 0;
  }

  .profile {
    padding: 0;
  }

  .chat-logo {
    width: 42px;
    height: 42px;
  }

  .details .name {
    font-size: 12px;
  }

  .status {
    font-size: 11px;
  }

  .chat-header-buttons button {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    gap: 12px;
  }

  .message {
    max-width: 92%;
    font-size: 14px;
    padding: 12px 14px;
  }

  .option-buttons {
    gap: 10px;
  }

  .option-button {
    font-size: 14px;
  }

  .input-area {
    grid-template-columns: 1fr 46px;
    padding: 12px;
    gap: 10px;
  }

  .input-field {
    min-height: 44px;
    max-height: 110px;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 14px;
  }

  .send-btn {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 18px;
  }

  #open-chat-btn {
    width: 60px;
    height: 60px;
    right: 16px;
    bottom: 16px;
  }

  #chat-icon {
    width: 48px;
    height: 48px;
  }

  .welcome-card {
    padding: 18px;
    border-radius: 18px;
  }

  .welcome-card h2 {
    font-size: 20px;
  }

  .welcome-card p {
    font-size: 14px;
  }

  .copy-btn {
    opacity: 1;
    width: 30px;
    height: 30px;
  }
}


@media (max-height:900px){

.chat-box{
height:min(610px,calc(100dvh - 40px)) !important;
}

.chat-messages{
padding:18px;
}

.input-area{
padding:14px 18px;
}

}

@media (max-height:820px){

.chat-box{
height:calc(100dvh - 24px) !important;
bottom:12px!important;
}

.chat-header{
padding:16px 18px;
}

.chat-messages{
padding:16px;
gap:12px;
}

.input-area{
padding:14px 16px;
}

.message{
font-size:13px;
padding:12px 15px;
}

}

@media (max-height:760px){

.chat-box{
width:min(390px,calc(100vw - 24px))!important;
max-width:calc(100vw - 24px)!important;
height:calc(100dvh - 20px) !important;
right:12px!important;
bottom:10px!important;
border-radius:24px;
}

.chat-header{
padding:14px 16px;
}

.chat-logo{
width:46px;
height:46px;
}


.status{
font-size:11px;
}

.chat-messages{
padding:14px;
}

.input-area{
padding:12px 14px;
}

.send-btn{
width:48px;
height:48px;
}

}

@media (max-height:700px){

.chat-box{
width:min(370px,calc(100vw - 16px))!important;
max-width:calc(100vw - 16px)!important;
height:calc(100dvh - 16px)!important;
right:8px!important;
bottom:8px!important;
}

.chat-header{
padding:12px 14px;
}

.chat-logo{
width:42px;
height:42px;
}

.chat-header-buttons button{
width:36px;
height:36px;
font-size:16px;
}

.message{
font-size:13px;
line-height:1.55;
}

.chat-messages{
padding:12px;
gap:10px;
}

.input-field{
min-height:44px;
font-size:14px;
}

.send-btn{
width:44px;
height:44px;
font-size:18px;
}

}

@media (max-height:620px){

.chat-box{
width:min(360px,calc(100vw - 12px))!important;
max-width:calc(100vw - 12px)!important;
height:calc(100dvh - 12px)!important;
right:6px!important;
bottom:6px!important;
border-radius:20px;
}

.chat-header{
padding:10px 12px;
}

.chat-messages{
padding:10px;
}

.input-area{
padding:10px 12px;
gap:10px;
}

.message{
padding:10px 13px;
font-size:13px;
}

}