/* IMPORTANT: honor the hidden attribute */
#uwe-chat-menu[hidden],
#uwe-chat-panel[hidden],
#uwe-callback-modal[hidden]{
  display: none !important;
}


/* Base reset for widget only */
#uwe-chat-root, #uwe-chat-root * { box-sizing: border-box; }

#uwe-chat-root{
  position: fixed;
  z-index: 1000000;
  bottom: 16px;
  left: 16px;
  right: auto;

  /* sizing vars */
  --uwe-gap: 16px;
  --uwe-panel-w: 360px;
  --uwe-panel-h: 520px;

  /* iOS viewport fallback (set by JS) */
  --uwe-vh: 1vh;
}

/* Side control (JS sets one of these) */
#uwe-chat-root.uwe-side-right{
  left: auto;
  right: 16px;
}
#uwe-chat-root.uwe-side-left{
  left: 16px;
  right: auto;
}

/* FAB */
#uwe-chat-fab{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 700;
  background: #0b8f2f; /* ваш зелений */
  color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
#uwe-chat-fab:focus{ outline: 2px solid rgba(11,143,47,.35); outline-offset: 2px; }
.uwe-chat-fab__icon{ font-size: 16px; line-height: 1; }

/* Pulse animation every 7 seconds (triggered by JS adding .uwe-pulse) */
#uwe-chat-fab.uwe-pulse{
  animation: uwePulse 900ms ease-out 1;
}
@keyframes uwePulse{
  0%   { box-shadow: 0 0 0 0 rgba(11,143,47,.35), 0 10px 26px rgba(0,0,0,.18); }
  100% { box-shadow: 0 0 0 18px rgba(11,143,47,0), 0 10px 26px rgba(0,0,0,.18); }
}
@media (prefers-reduced-motion: reduce){
  #uwe-chat-fab.uwe-pulse{ animation: none; }
}

/* Menu */
#uwe-chat-menu{
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  right: auto;
  width: min(260px, calc(100vw - 32px));
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  padding: 8px;
}

#uwe-chat-root.uwe-side-right #uwe-chat-menu{
  left: auto;
  right: 0;
}

.uwe-chat-item{
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 12px;
  color: #1b1b1b;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.uwe-chat-item:hover{ background: rgba(11,143,47,.08); }
.uwe-chat-item--primary{
  background: rgba(11,143,47,.10);
  color: #0b8f2f;
}
.uwe-chat-item--primary:hover{ background: rgba(11,143,47,.16); }

/* Chat panel */
#uwe-chat-panel{
  position: fixed;
  z-index: 1000001;

  /* Desktop-like default */
  width: min(var(--uwe-panel-w), calc(100vw - 32px));
  height: var(--uwe-panel-h);

  bottom: 16px;
  left: 16px;
  right: auto;

  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* hard safety */
  max-width: calc(100vw - 32px);
}

#uwe-chat-root.uwe-side-right ~ #uwe-chat-panel{ /* not used; panel is inside root */
}

/* Side: align panel with FAB */
#uwe-chat-root.uwe-side-right #uwe-chat-panel{
  left: auto;
  right: 16px;
}

/* Header */
#uwe-chat-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
#uwe-chat-title{ font-weight: 800; }
#uwe-chat-close{
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* Messages */
#uwe-chat-messages{
  flex: 1;
  overflow: auto;
  padding: 14px;
  background: #fff;
}

/* Bubbles */
.uwe-msg{
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 14px;
  margin: 8px 0;
  border: 1px solid rgba(0,0,0,.08);
  background: #f8f8f8;
  color: #1b1b1b;
  word-wrap: break-word;
}
.uwe-msg--me{
  margin-left: auto;
  background: rgba(11,143,47,.10);
  border-color: rgba(11,143,47,.18);
}
.uwe-msg--bot{
  margin-right: auto;
  background: #fff;
}

/* Input */
#uwe-chat-form{
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;
}
#uwe-chat-input{
  flex: 1;
  border: 1px solid rgba(0,0,0,.20);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
}
#uwe-chat-send{
  width: 46px;
  border: 0;
  border-radius: 12px;
  background: #0b8f2f;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

/* Callback modal */
#uwe-callback-modal{
  position: fixed;
  inset: 0;
  z-index: 1000002;
}
.uwe-callback-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}
.uwe-callback-dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 24px));
  max-height: calc((var(--uwe-vh) * 100) - 24px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.uwe-callback-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.uwe-callback-title{ font-weight: 800; }
.uwe-callback-close{
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}
.uwe-callback-body{
  padding: 14px;
  overflow: auto;
}

/* Mobile: panel fits viewport properly (no top flying away) */
@media (max-width: 520px){
  #uwe-chat-panel{
    /* Fullscreen card with safe insets */
    top: calc(12px + env(safe-area-inset-top, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: auto;

    width: auto;
    height: auto;
    max-height: calc((var(--uwe-vh) * 100) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  #uwe-chat-root.uwe-side-right #uwe-chat-panel{
    left: auto;
    right: 12px;
  }
}

.uwe-chat-item { display:flex; align-items:center; gap:8px; }

.uwe-chat-ico{
  width:18px; height:18px; display:inline-block;
  background-repeat:no-repeat;
  background-size:contain;
  flex:0 0 18px;
}

.uwe-chat-ico--telegram{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath fill='%230088cc' d='M120 0C53.7 0 0 53.7 0 120s53.7 120 120 120 120-53.7 120-120S186.3 0 120 0z'/%3E%3Cpath fill='%23fff' d='M179.9 73.6 156.6 184c-1.8 7.8-6.6 9.7-13.3 6l-36.8-27.1-17.8 17.1c-2 2-3.6 3.6-7.3 3.6l2.6-37.2 67.7-61.2c2.9-2.6-.6-4.1-4.5-1.5l-83.6 52.6-36-11.2c-7.8-2.4-7.9-7.8 1.6-11.5l140.7-54.2c6.5-2.4 12.2 1.6 10 10z'/%3E%3C/svg%3E");
}

/* Make items align with icon + text */
#uwe-chat-menu .uwe-chat-item{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* було center — з іконками краще left */
  gap:10px;
}

/* Icon base */
.uwe-chat-ico{
  width:18px;
  height:18px;
  display:inline-block;
  background-repeat:no-repeat;
  background-size:contain;
  flex:0 0 18px;
}

/* Telegram */
.uwe-chat-ico--telegram{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath fill='%230088cc' d='M120 0C53.7 0 0 53.7 0 120s53.7 120 120 120 120-53.7 120-120S186.3 0 120 0z'/%3E%3Cpath fill='%23fff' d='M179.9 73.6 156.6 184c-1.8 7.8-6.6 9.7-13.3 6l-36.8-27.1-17.8 17.1c-2 2-3.6 3.6-7.3 3.6l2.6-37.2 67.7-61.2c2.9-2.6-.6-4.1-4.5-1.5l-83.6 52.6-36-11.2c-7.8-2.4-7.9-7.8 1.6-11.5l140.7-54.2c6.5-2.4 12.2 1.6 10 10z'/%3E%3C/svg%3E");
}

/* Viber */
.uwe-chat-ico--viber{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%237a4de8' d='M128 14C64.1 14 12 66.1 12 130c0 28.2 10.2 55.4 28.7 76.7l-8.6 31.5c-1 3.7 2.4 7.1 6.1 6.1l33.4-9.2C91.8 243.3 109.7 246 128 246c63.9 0 116-52.1 116-116S191.9 14 128 14z'/%3E%3Cpath fill='%23fff' d='M176.2 150.8c-4.3-2.6-10.2-5.5-14.6-3.8-3.4 1.3-5.5 6.7-7.7 9.4-1.6 2-3.2 2.3-5.9.8-19.8-11.2-33-29.1-41.8-50.1-1.5-3.7.7-5.7 3.2-7.9 2.3-2 5.2-4.7 5.8-7.8.7-3.6-1.6-8.8-3.1-12.1-2-4.2-4.6-10-9.6-10.6-5.4-.7-10.6 2.7-13.9 6.9-8.2 10.3-6 24.4-1.9 35.6 9.9 27.2 28.6 54.7 55 67.1 10.4 4.9 24.1 7.8 33-1.1 4.5-4.4 7.4-11.3 4.5-17.6-2-4.4-7.5-6.7-11-8.8z'/%3E%3C/svg%3E");
}

/* WhatsApp */
.uwe-chat-ico--whatsapp{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2325D366' d='M128 20c-59.6 0-108 48.4-108 108 0 19 5 37.5 14.5 53.8L24 236l56.6-10.2c14.9 8.2 31.7 12.2 47.4 12.2 59.6 0 108-48.4 108-108S187.6 20 128 20z'/%3E%3Cpath fill='%23fff' d='M175.5 150.7c-2.5-1.3-14.8-7.3-17.1-8.1-2.3-.9-4-1.3-5.7 1.3-1.7 2.5-6.6 8.1-8.1 9.8-1.5 1.7-3 1.9-5.5.6-2.5-1.3-10.6-3.9-20.2-12.5-7.5-6.7-12.6-15-14.1-17.6-1.5-2.5-.2-3.9 1.1-5.2 1.2-1.2 2.5-3 3.8-4.5 1.3-1.5 1.7-2.5 2.5-4.2.8-1.7.4-3.2-.2-4.5-.6-1.3-5.7-13.8-7.8-18.9-2.1-5-4.2-4.3-5.7-4.3-1.5 0-3.2-.2-4.9-.2-1.7 0-4.5.6-6.9 3.2-2.3 2.5-9 8.8-9 21.5 0 12.7 9.2 25 10.5 26.7 1.3 1.7 18.1 27.6 43.8 38.7 6.1 2.6 10.8 4.2 14.5 5.3 6.1 1.9 11.6 1.6 16 1 4.9-.7 14.8-6 16.9-11.8 2.1-5.8 2.1-10.8 1.5-11.8-.6-1-2.3-1.6-4.8-2.9z'/%3E%3C/svg%3E");
}

/* Safety: never create horizontal overflow */
#uwe-chat-panel, #uwe-chat-menu{ max-width: calc(100vw - 24px); }