#service-chat-widget {
  position: fixed;
  z-index: 1000;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  font: inherit;
}

body:has(.live-layout--web) #service-chat-widget {
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 80px);
}

html[data-storefront-channel="web"] #service-chat-widget {
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 80px);
}

.service-chat-launcher {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #155eef;
  box-shadow: 0 8px 24px #155eef55;
  cursor: pointer;
  isolation: isolate;
}

.service-chat-launcher-icon { position: relative; z-index: 1; width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-chat-launcher::before,.service-chat-launcher::after { position: absolute; z-index: 0; inset: -4px; border: 2px solid color-mix(in srgb, #155eef 68%, transparent); border-radius: inherit; content: ""; pointer-events: none; animation: service-chat-pulse 2.2s ease-out infinite; }
.service-chat-launcher::after { animation-delay: 1.2s; }
.service-chat-launcher--pulse-outline { color: #155eef; background: #fff; box-shadow: 0 5px 18px #1018281f; }
.service-chat-launcher--pulse-outline::before,.service-chat-launcher--pulse-outline::after { border-color: #155eef80; }
.service-chat-launcher--pulse-gradient { background: linear-gradient(135deg,#155eef,#7f56d9); box-shadow: 0 8px 24px #6941c655; }
.service-chat-launcher--pulse-gradient::before,.service-chat-launcher--pulse-gradient::after { border-color: #6941c680; }
@media (max-width: 560px) {
  html[data-storefront-channel="h5"] #service-chat-widget { right: max(24px, env(safe-area-inset-right)); bottom: calc(max(24px, env(safe-area-inset-bottom)) + 40px); }
  html[data-storefront-channel="h5"] #service-chat-widget > .service-chat-launcher { width: 41px; height: 41px; }
  html[data-storefront-channel="h5"] #service-chat-widget > .service-chat-launcher .service-chat-launcher-icon { width: 18px; height: 18px; }
  html[data-storefront-channel="h5"] #service-chat-widget > .service-chat-launcher::before,
  html[data-storefront-channel="h5"] #service-chat-widget > .service-chat-launcher::after { inset: -3px; border-width: 1.5px; }
}
@keyframes service-chat-pulse { 0% { opacity: .8; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes service-chat-pulse-reduced { 0% { opacity: .72; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .service-chat-launcher::before,.service-chat-launcher::after { animation: service-chat-pulse-reduced 3s ease-out infinite; } }

.service-chat-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  display: grid;
  width: min(360px, calc(100vw - 32px));
  height: min(500px, calc(100vh - 120px));
  grid-template-rows: 52px minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 48px #10182833;
}

.service-chat-panel[hidden] { display: none; }
#service-chat-widget .service-chat-panel > header { position: static; inset: auto; order: 0; z-index: auto; display: flex; width: 100%; min-width: 0; height: 52px; min-height: 52px; flex: 0 0 52px; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; overflow: hidden; border: 0; border-radius: 0; color: #fff; background: #172b4d; box-shadow: none; }
.service-chat-panel > header strong { min-width: 0; flex: 1 1 auto; overflow: hidden; font-size: 14px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.service-chat-panel > header button { display: grid; width: 32px; min-width: 32px; height: 32px; flex: 0 0 32px; place-items: center; margin: 0; padding: 0; border: 0; color: inherit; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; }
#service-chat-messages { display: flex; flex-direction: column; gap: 12px; overflow: auto; padding: 14px; background: #f5f7fb; scrollbar-width: none; -ms-overflow-style: none; }
#service-chat-messages::-webkit-scrollbar { display: none; width: 0; height: 0; }
.service-chat-message-row { display: flex; width: 100%; align-items: flex-end; gap: 8px; }
.service-chat-message-row--customer { justify-content: flex-end; }
.service-chat-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 30px; overflow: hidden; place-items: center; border-radius: 50%; color: #475467; background: #e4e7ec; font-size: 11px; }
.service-chat-avatar--customer { color: #155eef; background: #e7f0ff; }
.service-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.service-chat-avatar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-chat-message-stack { display: grid; min-width: 0; max-width: calc(100% - 38px); gap: 4px; }
.service-chat-message-row--customer .service-chat-message-stack { justify-items: end; }
.service-chat-message-stack time { color: #98a2b3; font-size: 10px; line-height: 1.2; }
.service-chat-message { max-width: 100%; padding: 9px 11px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px #10182812; }
.service-chat-message--customer { color: #fff; background: #155eef; }
.service-chat-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.service-chat-welcome { align-self: flex-start; max-width: 90%; margin: auto 0; padding: 12px; border-radius: 12px; color: #475467; background: #fff; }
#service-chat-form { display: block; padding: 10px; border-top: 1px solid #eaecf0; }
.service-chat-composer { position: relative; min-width: 0; display: grid; gap: 6px; padding: 8px 9px 6px; border: 1px solid #d0d5dd; border-radius: 12px; background: #fff; }
#service-chat-form textarea { display: block; width: 100%; min-width: 0; min-height: 62px; max-height: 110px; padding: 4px 2px; border: 0; outline: 0; background: transparent; resize: vertical; }
.service-chat-toolbar { display: flex; min-height: 34px; align-items: center; gap: 7px; }
.service-chat-tool { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; padding: 0; border: 0; border-radius: 8px; color: #475467; background: transparent; font-size: 23px; cursor: pointer; }
.service-chat-tool:hover { color: #155eef; background: #f2f4f7; }
.service-chat-image-input { display: none; }
.service-chat-toolbar #service-chat-status { flex: 1; min-width: 0; }
.service-chat-toolbar .primary.service-chat-send { display: grid; width: 38px; min-width: 38px; height: 34px; place-items: center; padding: 0; border-radius: 8px; color: #fff; background: #155eef; }
.service-chat-toolbar .primary.service-chat-send:disabled { border-color: transparent; color: #98a2b3; background: transparent; box-shadow: none; cursor: not-allowed; }
.service-chat-send .diy-icon { width: 18px; height: 18px; fill: currentColor; }
.service-chat-tool .diy-icon { width: 19px; height: 19px; fill: currentColor; }
.service-chat-emoji-picker { position: absolute; z-index: 5; bottom: calc(100% + 7px); left: 8px; display: grid; grid-template-columns: repeat(6, 34px); gap: 2px; padding: 7px; border: 1px solid #eaecf0; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px #10182822; }
.service-chat-emoji-picker[hidden] { display: none; }
.service-chat-emoji-picker button { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; font-size: 20px; cursor: pointer; }
.service-chat-emoji-picker button:hover { background: #f2f4f7; }
#service-chat-file-name { overflow-wrap: anywhere; color: #475467; font-size: 11px; }
.service-chat-image-preview { display: flex; align-items: center; gap: 8px; }
.service-chat-image-preview img { width: 44px; height: 44px; flex: none; border-radius: 6px; object-fit: cover; }
.service-chat-image-preview button { margin-left: auto; padding: 0; border: 0; color: #155eef; background: transparent; cursor: pointer; }
#service-chat-status { min-height: 0; color: #667085; font-size: 11px; }
#service-chat-status:not(:empty) { min-height: 16px; }
.service-chat-message img { display: block; max-width: 220px; max-height: 200px; object-fit: contain; margin-bottom: 6px; border-radius: 6px; }

@media (max-width: 420px) {
  .service-chat-panel { right: -8px; width: min(360px, calc(100vw - 24px)); height: min(520px, calc(100dvh - 110px)); }
  .service-chat-toolbar { gap: 4px; }
}

.auth-modal-overlay { z-index: 1100; }