:root {
  --sv-chat-red: #de1f26;
  --sv-chat-text: #0d0d0d;
  --sv-chat-bg: #efefef;
  --sv-chat-border: #bdbdbd;
  --sv-chat-placeholder: #8f8f93;
  --sv-chat-error: #d3322f;
}

.sv-chat-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  border: 0;
  border-radius: 999px;
  background: var(--sv-chat-red);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 14px 20px;
  box-shadow: 0 14px 34px rgb(0 0 0 / 28%);
}

.sv-chat-launcher:hover {
  filter: brightness(0.95);
}

.sv-chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  background: rgb(0 0 0 / 34%);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.sv-chat-backdrop[data-open="true"] {
  display: flex;
}

.sv-chat-panel {
  width: min(820px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  border-radius: 24px;
  background: var(--sv-chat-bg);
  padding: 28px 28px 22px;
  position: relative;
}

.sv-chat-panel-inline {
  width: 100%;
  max-height: none;
}

.sv-native-quote-inline .sv-chat-panel {
  box-shadow: 0 18px 50px rgb(0 0 0 / 10%);
}

.sv-chat-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #2b2b2b;
}

.sv-chat-title {
  margin: 0 44px 16px 0;
  font-family: Montserrat, sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 0.94;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--sv-chat-red);
  text-transform: uppercase;
}

.sv-chat-form {
  display: grid;
  gap: 14px;
}

.sv-chat-field {
  display: grid;
  gap: 6px;
}

.sv-chat-label {
  font-family: Montserrat, sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1;
  font-weight: 900;
  color: var(--sv-chat-text);
}

.sv-chat-input,
.sv-chat-textarea {
  width: 100%;
  border: 1px solid var(--sv-chat-border);
  border-radius: 12px;
  background: #fff;
  color: var(--sv-chat-text);
  font-family: Open Sans, sans-serif;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  padding: 12px 16px;
}

.sv-chat-input {
  min-height: 62px;
}

.sv-chat-textarea {
  min-height: 96px;
  resize: vertical;
}

.sv-chat-input::placeholder,
.sv-chat-textarea::placeholder {
  color: var(--sv-chat-placeholder);
}

.sv-chat-error {
  margin: 0;
  min-height: 1.2em;
  font-family: Open Sans, sans-serif;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 400;
  color: var(--sv-chat-error);
}

.sv-chat-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}

.sv-chat-consent input[type="checkbox"] {
  margin-top: 6px;
  width: 28px;
  height: 28px;
}

.sv-chat-consent label {
  margin: 0;
  color: var(--sv-chat-text);
  font-family: Montserrat, sans-serif;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.22;
  font-weight: 800;
}

.sv-chat-consent a {
  color: #2f59f5;
  text-decoration: underline;
}

.sv-chat-submit {
  margin-top: 6px;
  min-height: 72px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--sv-chat-red);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.sv-chat-submit:disabled {
  opacity: 0.7;
}

.sv-chat-actions {
  margin-top: 6px;
}

.sv-chat-call {
  display: none;
  min-height: 72px;
  width: 100%;
  border: 2px solid var(--sv-chat-red);
  border-radius: 12px;
  background: #fff;
  color: var(--sv-chat-red);
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.sv-chat-success {
  margin: 0;
  font-family: Open Sans, sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  color: #177245;
  display: none;
}

.sv-chat-success[data-open="true"] {
  display: block;
}

@media (min-width: 901px) {
  .sv-chat-backdrop {
    background:
      radial-gradient(900px 460px at 8% 14%, rgb(34 197 246 / 14%), transparent 60%),
      radial-gradient(860px 420px at 92% 88%, rgb(222 31 38 / 16%), transparent 62%),
      rgb(7 10 20 / 54%);
    backdrop-filter: blur(2px);
  }

  .sv-chat-panel {
    background: linear-gradient(150deg, rgb(255 255 255 / 78%), rgb(247 248 252 / 70%));
    border: 1px solid rgb(255 255 255 / 66%);
    box-shadow:
      0 52px 120px rgb(3 8 24 / 44%),
      0 0 0 1px rgb(255 255 255 / 36%) inset,
      0 0 98px rgb(58 134 255 / 26%),
      0 0 42px rgb(222 31 38 / 18%);
    backdrop-filter: blur(16px) saturate(125%);
    animation: sv-float 7.2s ease-in-out infinite;
    transform: translateZ(0);
    will-change: transform, box-shadow;
  }

  .sv-chat-backdrop[data-open="true"] .sv-chat-panel {
    animation:
      sv-pop-out 320ms cubic-bezier(0.2, 0.85, 0.25, 1),
      sv-float 7.2s ease-in-out 320ms infinite;
  }

  .sv-chat-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(130deg, rgb(56 189 248 / 12%), transparent 46%, rgb(239 68 68 / 10%));
    pointer-events: none;
  }

  .sv-chat-panel::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgb(255 255 255 / 44%);
    pointer-events: none;
  }

  .sv-chat-panel:hover {
    box-shadow:
      0 62px 128px rgb(3 8 24 / 48%),
      0 0 0 1px rgb(255 255 255 / 40%) inset,
      0 0 110px rgb(56 189 248 / 30%),
      0 0 54px rgb(222 31 38 / 22%);
  }

  .sv-chat-title {
    text-shadow:
      0 6px 22px rgb(222 31 38 / 24%),
      0 0 1px rgb(0 0 0 / 18%);
  }

  .sv-chat-input,
  .sv-chat-textarea {
    background: rgb(255 255 255 / 78%);
    border-color: rgb(166 176 190 / 52%);
    box-shadow: 0 8px 24px rgb(15 23 42 / 7%);
  }

  .sv-chat-input:focus,
  .sv-chat-textarea:focus {
    outline: none;
    border-color: rgb(56 189 248 / 85%);
    box-shadow:
      0 0 0 3px rgb(56 189 248 / 17%),
      0 12px 26px rgb(56 189 248 / 18%);
  }
}

@keyframes sv-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes sv-pop-out {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.955);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.012);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .sv-chat-panel {
    border-radius: 14px;
    padding: 14px 12px 12px;
  }

  .sv-native-quote-inline .sv-chat-panel {
    box-shadow: none;
  }

  .sv-chat-title {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .sv-chat-form {
    gap: 8px;
  }

  .sv-chat-label {
    font-size: 13px;
  }

  .sv-chat-input {
    min-height: 44px;
    font-size: 16px;
    padding: 8px 12px;
  }

  .sv-chat-textarea {
    min-height: 70px;
    font-size: 16px;
    padding: 8px 12px;
  }

  .sv-chat-consent {
    gap: 10px;
  }

  .sv-chat-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }

  .sv-chat-consent label {
    font-size: 12px;
    line-height: 1.3;
  }

  .sv-chat-error {
    font-size: 12px;
    min-height: 0;
  }

  .sv-chat-submit {
    margin-top: 0;
    min-height: 50px;
    font-size: 20px;
  }

  .sv-chat-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .sv-chat-call {
    display: block;
    min-height: 50px;
    font-size: 15px;
  }
}