body.chat-open {
  overflow: hidden;
}

#pos-chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#pos-chat-toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #096DF2;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, background 0.3s ease;
  color: white;
}

#pos-chat-toggle::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'><path d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/></svg>") no-repeat center;
  background-size: contain;
}

#pos-chat-toggle.opened::before {
  background: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z' fill='%23ffffff'/></svg>") no-repeat center;
  background-size: contain;
  width: 24px;
  height: 24px;
}

#pos-chat-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 15px 30px rgba(0,0,0,0.35); 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#pos-chat-box {
  width: 400px;
  max-height: 75vh;      
  height: 0;           
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 16px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease;
}

#pos-chat-box.opened {
  height: 75vh;        
  opacity: 1;
  transform: scale(1);
}


#pos-chat-header {
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
  color: white;
  padding: 12px 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

#pos-chat-header .brand { font-weight: 600; font-size: 16px; color: #000;}

#pos-chat-header .close-btn {
  cursor: pointer;
  font-size: 25px;
  color: rgb(108, 111, 116);
  width: 32px;             
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;       
  transition: background 0.2s ease;
}

#pos-chat-header .close-btn:hover {
  background: rgb(245, 245, 245); 
}

#pos-chat-messages { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }

.chat-bot { background: rgb(245, 245, 245); color: rgb(20, 22, 26); padding: 12px 16px; border-radius: 20px 20px 20px 4px; max-width: 80%; }
.chat-user { background: #fff; font-size: 14px; color: rgb(20, 22, 26); padding: 12px 16px; border-radius: 20px; align-self: flex-end; max-width: 80%; box-shadow: rgb(237, 237, 237) 0px 0px 0px 1px inset;}

#pos-chat-options{
  padding:16px;
  border-top:1px solid #eee;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}

#pos-chat-options button{
  color: rgb(77, 77, 77);
  padding:10px 14px;
  border-radius:999px;
  border:none;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  width:auto;
  white-space:nowrap;
  box-shadow: rgba(9, 14, 21, 0.06) 0px 4px 28px 0px, rgba(9, 14, 21, 0.06) 0px 1px 4px 0px;
  transition:all .2s ease;
}

#pos-chat-options button:hover{
  background:#f5f5f5;
  transform:translateY(-1px);
}

#pos-chat-options button.primary { background: #096DF2; color: white; border: none; }
#pos-chat-options input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #ddd; }

@media(max-width:600px){
  #pos-chat-box { width:90vw; height:70vh; }
}

.chat-typing {
  background: #f3f4f6;
  padding: 10px 14px;
  border-radius: 12px;
  width: fit-content;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

@keyframes chatTyping {
  0%, 80%, 100% { transform: scale(0.6); opacity:0.5; }
  40% { transform: scale(1); opacity:1; }
}

.chat-typing span {
  width: 6px;
  height: 6px;
  background: #9ca3af;
  border-radius: 50%;
  animation: chatTyping 2s infinite; 
}

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

.chat-options-show{
  opacity:0;
  transform:translateY(8px);
  animation:chatOptionsFade 0.35s ease forwards;
}

@keyframes chatOptionsFade{
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.chat-message-in {
  opacity: 0;
  transform: translateY(12px);
  animation: chatMessageIn 0.5s ease forwards; 
}

@keyframes chatMessageIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#chat-name-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}

#chat-name {
  width: 100%;
  padding: 10px 50px 10px 14px; 
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  box-sizing: border-box;
  height: 40px; 
}

#chat-name-arrow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;       
  width: 40px;
  background: rgb(229, 229, 229);
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  border-radius: 0 8px 8px 0;
  box-sizing: border-box; 
}
#chat-name-arrow:hover {
  background: rgb(200, 200, 200);         
  transition: background 0.2s ease, color 0.2s ease; 
}

#chat-email-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}

#chat-email {
  width: 100%;
  padding: 10px 50px 10px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  box-sizing: border-box;
  height: 40px;
}

#chat-email-arrow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;       
  width: 40px;
  background: rgb(229, 229, 229);
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  border-radius: 0 8px 8px 0;
  box-sizing: border-box; 
}

#chat-email-arrow:hover {
  background: rgb(200, 200, 200);
  transition: background 0.2s ease, color 0.2s ease;
}

#chat-name:focus,
#chat-email:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

@media (max-width:480px){

  #pos-chat-widget{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999;


    width: 0;
    height: 0;

    pointer-events: none;
  }

  #pos-chat-toggle{
    position: fixed;
    bottom: 24px;
    right: 24px;
    pointer-events: auto;
  }

  #pos-chat-box{
    pointer-events: none;
  }

  #pos-chat-box.opened{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    pointer-events: auto;
  }

}




.chat-submit-error{
  display:flex;
  align-items:center;
  padding:10px 14px;
  margin-top:8px;
  border-radius:6px;
  background:#fde8e8;
  border:1px solid #f5c2c2;
}

.chat-submit-error__message{
  font-size:13px;
  color:#b42318;
  line-height:1.4;
}

#chat-phone-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}

#chat-phone {
  width: 100%;
  padding: 10px 50px 10px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  box-sizing: border-box;
  height: 40px;
}

#chat-phone-arrow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: rgb(229, 229, 229);
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  border-radius: 0 8px 8px 0;
  box-sizing: border-box;
}

#chat-phone-arrow:hover {
  background: rgb(200, 200, 200);
  transition: background 0.2s ease, color 0.2s ease;
}

#chat-phone:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}