.surge-chat {
  --chat-blue: #0866ff;
  --chat-right: max(24px, env(safe-area-inset-right, 0px));
  --chat-bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--surge-chat-bottom-offset, 0px));
  --chat-size: 60px;
  font-family: inherit;
}
.surge-chat button, .surge-chat input { font: inherit; }
.surge-chat button { cursor: pointer; }
.surge-chat button:focus-visible, .surge-chat input:focus-visible, .surge-chat a:focus-visible {
  outline: 3px solid var(--chat-blue);
  outline-offset: 4px;
}
.surge-chat-launch {
  position: fixed;
  z-index: 71;
  right: var(--chat-right);
  bottom: var(--chat-bottom);
  width: var(--chat-size);
  height: var(--chat-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--chat-blue);
  box-shadow: 0 6px 22px #071a3c38, 0 1px 4px #071a3c24;
  animation: surge-chat-float 4.5s ease-in-out infinite;
}
.surge-chat-launch[hidden] { display: none; }
.surge-chat-symbol { display: grid; place-items: center; }
.surge-chat-symbol svg { display: block; width: 39px; height: 39px; }
.surge-chat-launch:hover { background: #0059e8; box-shadow: 0 8px 28px #071a3c50; }
.surge-chat-launch:hover,
.surge-chat-launch:focus-visible,
.surge-chat-launch[aria-expanded="true"] { animation-play-state: paused; }
.surge-chat-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  padding: 8px 12px;
  border-radius: 6px;
  color: #fff;
  background: #151c25;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.surge-chat-launch[aria-expanded="false"]:hover .surge-chat-tooltip,
.surge-chat-launch[aria-expanded="false"]:focus-visible .surge-chat-tooltip { opacity: 1; }
.surge-chat-panel {
  position: fixed;
  inset: auto var(--chat-right) calc(var(--chat-bottom) + var(--chat-size) + 14px) auto;
  z-index: 70;
  width: min(392px, calc(100% - 32px));
  max-height: min(600px, calc(100dvh - var(--chat-bottom) - var(--chat-size) - 34px));
  margin: 0;
  padding: 0;
  border: 1px solid #d8dee4;
  border-radius: 16px;
  color: #111820;
  background: #fff;
  box-shadow: 0 18px 70px #071a3c30, 0 2px 10px #071a3c14;
  overflow: hidden;
}
.surge-chat-panel[open] { display: flex; flex-direction: column; }
.surge-chat-head { display: flex; align-items: center; gap: 12px; flex: none; padding: 16px 18px; color: #fff; background: #151c25; }
.surge-chat-head-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--chat-blue); }
.surge-chat-head-mark svg { width: 27px; height: 27px; }
.surge-chat-head h2 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.surge-chat-head p { margin: 2px 0 0; color: #c5ced6; font-size: 12px; line-height: 1.4; }
.surge-chat-close { width: 36px; height: 36px; flex: none; margin-left: auto; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #fff; font-size: 26px !important; line-height: 1; }
.surge-chat-close:hover { background: #ffffff1a; }
.surge-chat-body { min-height: 0; padding: 22px 20px 18px; overflow-y: auto; overscroll-behavior: contain; }
.surge-chat-intro { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
.surge-chat-help { margin: 8px 0 0; color: #3f4b56; font-size: 14px; line-height: 1.5; }
.surge-chat-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0; }
.surge-chat-suggestions button { min-height: 38px; padding: 8px 10px; border: 1px solid #d8dee4; border-radius: 20px; color: #263448; background: #f3f5f7; font-size: 12px; }
.surge-chat-suggestions button:hover { color: #0754ce; border-color: #0866ff; background: #f1f6ff; }
.surge-chat-form label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; }
.surge-chat-input-row { display: flex; align-items: center; gap: 8px; }
.surge-chat-input-row input { width: 100%; min-width: 0; height: 46px; padding: 11px 12px; border: 1px solid #c7d0db; border-radius: 8px; color: #111820; background: #fff; font-size: 16px; }
.surge-chat-input-row input::placeholder { color: #6b7680; font-size: 13px; }
.surge-chat-input-row button { display: grid; place-items: center; width: 46px; height: 46px; flex: none; padding: 0; border: 0; border-radius: 8px; color: #fff; background: var(--chat-blue); }
.surge-chat-input-row button:hover { background: #0059e8; }
.surge-chat-input-row svg { width: 23px; height: 23px; }
.surge-chat-answer:not(:empty) { margin-top: 20px; padding: 16px; border: 1px solid #dce7f9; border-radius: 10px; background: #f4f8ff; }
.surge-chat-answer p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.surge-chat-answer p:first-child { font-weight: 700; }
.surge-chat-answer a { display: inline-block; margin: 3px 12px 0 0; color: #0754ce; font-size: 13px; font-weight: 650; text-underline-offset: 3px; overflow-wrap: anywhere; }
.surge-chat-privacy { margin: 18px 0 0; color: #6b7680; font-size: 11px; line-height: 1.55; }
@keyframes surge-chat-float { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
@media (max-width: 480px) {
  .surge-chat { --chat-right: max(16px, env(safe-area-inset-right, 0px)); --chat-bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--surge-chat-bottom-offset, 0px)); --chat-size: 56px; }
  .surge-chat-symbol svg { width: 36px; height: 36px; }
  .surge-chat-body { padding: 20px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .surge-chat-launch { animation: none; }
  .surge-chat-tooltip { transition: none; }
}
