.wasb {
  --wasb-ink: #172033;
  --wasb-muted: #687083;
  --wasb-paper: #ffffff;
  --wasb-brand: #4f46e5;
  --wasb-brand-dark: #3730a3;
	--wasb-link: #2563eb;
  --wasb-line: #e5e7eb;
  position: fixed;
  z-index: 999999;
  right: var(--wasb-side, 22px);
  bottom: var(--wasb-bottom, 22px);
  color: var(--wasb-ink);
  font: var(--wasb-font-size, 15px)/1.45 var(--wasb-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.wasb[data-position="left"] { right: auto; left: var(--wasb-side, 22px); }

.wasb *, .wasb *::before, .wasb *::after { box-sizing: border-box; }

.wasb__launcher {
  float: right;
  display: grid;
  width: var(--wasb-launcher, 58px);
  height: var(--wasb-launcher, 58px);
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--wasb-brand), var(--wasb-brand-dark));
  box-shadow: 0 12px 28px rgba(42, 35, 126, .28);
  cursor: pointer;
  font-size: 25px;
}

.wasb[data-position="left"] .wasb__launcher { float: left; }

.wasb__launcher:hover { transform: translateY(-1px); }
.wasb__launcher:focus-visible, .wasb button:focus-visible, .wasb input:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }

.wasb__panel {
  display: flex;
  overflow: hidden;
  width: min(var(--wasb-width, 380px), calc(100vw - 28px));
  height: min(var(--wasb-height, 610px), calc(100vh - 112px));
  margin-bottom: calc(var(--wasb-launcher, 58px) + 16px);
  flex-direction: column;
  border: 1px solid rgba(23, 32, 51, .08);
  border-radius: var(--wasb-radius, 20px);
  background: var(--wasb-paper, #f7f8fc);
  box-shadow: 0 24px 70px rgba(23, 32, 51, .22);
}

.wasb__panel[hidden] { display: none; }

.wasb__header {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 14px 19px;
  color: var(--wasb-header-text, #fff);
  background: linear-gradient(135deg, var(--wasb-brand), var(--wasb-brand-dark));
}

.wasb__title { font-size: 17px; }
.wasb__identity { display: flex; min-width: 0; align-items: center; gap: 10px; }
.wasb__identity > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.wasb__avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 700; }
.wasb__bot-name { overflow: hidden; max-width: 240px; opacity: .82; text-overflow: ellipsis; white-space: nowrap; }
.wasb__close { border: 0; color: inherit; background: transparent; cursor: pointer; font-size: 29px; line-height: 1; }

.wasb__messages {
  display: flex;
  overflow-y: auto;
  min-height: 0;
  padding: 18px;
  flex: 1;
  flex-direction: column;
  gap: 11px;
  background: var(--wasb-paper, #f7f8fc);
  scroll-behavior: smooth;
}

.wasb__message {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 15px;
  white-space: pre-wrap;
  word-break: break-word;
}

.wasb__message--assistant { align-self: flex-start; border: 1px solid var(--wasb-line); border-bottom-left-radius: 4px; background: var(--wasb-assistant, #fff); }
.wasb__message--user { align-self: flex-end; border-bottom-right-radius: 4px; color: #fff; background: var(--wasb-user, var(--wasb-brand)); }
.wasb__message--assistant a { color: var(--wasb-link, #2563eb); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.wasb__message--assistant a:visited { color: var(--wasb-link, #2563eb); }
.wasb__message--typing { min-width: 52px; padding: 13px 15px; }
.wasb__typing-dots { display: flex; align-items: center; gap: 5px; }
.wasb__typing-dots > span { width: 7px; height: 7px; border-radius: 50%; background: var(--wasb-muted); animation: wasb-typing-dot 1.15s infinite ease-in-out; }
.wasb__typing-dots > span:nth-child(2) { animation-delay: .16s; }
.wasb__typing-dots > span:nth-child(3) { animation-delay: .32s; }

@keyframes wasb-typing-dot {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

.wasb__actions {
  display: flex;
  overflow-x: auto;
  min-height: 48px;
  padding: 7px 12px;
  gap: 7px;
  border-top: 1px solid var(--wasb-line);
  background: var(--wasb-surface, #fff);
}

.wasb__actions:empty { display: none; }

.wasb__action {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid var(--wasb-brand);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.wasb__action--primary { color: #fff; background: var(--wasb-brand); }
.wasb__action--secondary { color: var(--wasb-brand-dark); background: var(--wasb-surface, #fff); }
.wasb__action--coupon { border-color: #15803d; color: #fff; background: #15803d; font-weight: 700; letter-spacing: .02em; }
.wasb__action--coupon:hover, .wasb__action--coupon.is-copied { border-color: #166534; background: #166534; }

.wasb__form { display: flex; min-height: 58px; padding: 9px 10px; gap: 8px; border-top: 1px solid var(--wasb-line); background: var(--wasb-surface, #fff); }
.wasb__form #wasb-input { min-width: 0; flex: 1; padding: 8px 11px; border: 1px solid #cbd0dc; border-radius: 10px; color: var(--wasb-ink); background: var(--wasb-surface, #fff); font: inherit; }
.wasb__form button { padding: 8px 14px; border: 0; border-radius: 10px; color: #fff; background: var(--wasb-brand); cursor: pointer; font: inherit; font-weight: 650; }
.wasb__form button:disabled, .wasb__form input:disabled { opacity: .62; cursor: wait; }
.wasb__privacy { min-height: 27px; margin: 0; padding: 4px 13px 7px; color: var(--wasb-muted); background: var(--wasb-surface, #fff); font-size: 10px; line-height: 1.3; }
.wasb .screen-reader-text { position: absolute !important; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 520px), (max-height: 520px) and (pointer: coarse) {
  .wasb {
    --wasb-mobile-side: min(var(--wasb-side, 14px), 14px);
    --wasb-mobile-bottom: min(var(--wasb-bottom, 14px), 14px);
    --wasb-mobile-launcher: calc(var(--wasb-launcher, 58px) * .6666667);
    right: calc(var(--wasb-mobile-side) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--wasb-mobile-bottom) + env(safe-area-inset-bottom, 0px));
  }

  .wasb[data-position="left"] {
    right: auto;
    left: calc(var(--wasb-mobile-side) + env(safe-area-inset-left, 0px));
  }

  .wasb__launcher {
    width: var(--wasb-mobile-launcher);
    height: var(--wasb-mobile-launcher);
    font-size: clamp(16px, calc(var(--wasb-launcher, 58px) * .3), 22px);
  }

  .wasb__panel {
    width: min(
      var(--wasb-width, 380px),
      calc(100vw - var(--wasb-mobile-side) - var(--wasb-mobile-side) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
    );
    height: min(
      var(--wasb-height, 610px),
      calc(100vh - var(--wasb-mobile-bottom) - var(--wasb-mobile-launcher) - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
    );
    margin-bottom: calc(var(--wasb-mobile-launcher) + 8px);
    border-radius: min(var(--wasb-radius, 20px), 16px);
  }

  @supports (width: 100dvw) {
    .wasb__panel {
      width: min(
        var(--wasb-width, 380px),
        calc(100dvw - var(--wasb-mobile-side) - var(--wasb-mobile-side) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
      );
      height: min(
        var(--wasb-height, 610px),
        calc(100dvh - var(--wasb-mobile-bottom) - var(--wasb-mobile-launcher) - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
      );
    }
  }

  .wasb__header { min-height: 54px; padding: 10px 11px 10px 14px; }
  .wasb__messages { padding: 12px; gap: 9px; overscroll-behavior: contain; }
  .wasb__message { max-width: 90%; padding: 9px 11px; }
  .wasb__actions { min-height: 44px; padding: 6px 9px; }
  .wasb__form { min-height: 52px; padding: 7px 8px; gap: 6px; }
  .wasb__form #wasb-input { padding: 7px 9px; font-size: 16px; }
  .wasb__form button { padding: 7px 10px; }
  .wasb__privacy { min-height: 23px; padding: 3px 10px 5px; }

  html.wasb-chat-open,
  html.wasb-chat-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .wasb[data-state="open"] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    box-sizing: border-box;
    background: var(--wasb-paper, #f7f8fc);
  }

  .wasb[data-state="open"] .wasb__launcher { display: none; }

  .wasb[data-state="open"] .wasb__panel {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  @supports (height: 100dvh) {
    .wasb[data-state="open"] {
      width: 100dvw;
      height: 100dvh;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wasb__messages { scroll-behavior: auto; }
  .wasb__launcher:hover { transform: none; }
	.wasb__typing-dots > span { opacity: .65; animation: none; }
}
