@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* O fundo so se aplica a pagina de demonstracao do popup. */
body.survey-preview{
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: #081b29;
}

/* Estilos isolados para permitir o uso junto do site e do chatbot. */
.survey-widget{
  --survey-bg: #081b29;
  --survey-blue: #1e90ff;
  --survey-light: #82c5ff;
  --survey-edge: 24px;
  --survey-bottom: max(var(--survey-edge), env(safe-area-inset-bottom, 0px));
  --survey-size: 56px;
  position: fixed;
  right: max(var(--survey-edge), env(safe-area-inset-right, 0px));
  bottom: var(--survey-bottom);
  width: var(--survey-size);
  height: var(--survey-size);
  z-index: 9998;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  text-align: left;
  pointer-events: none;
}

.survey-widget, .survey-widget *, .survey-widget *::before, .survey-widget *::after{ box-sizing: border-box; }
.survey-widget [hidden]{ display: none !important; }
.survey-widget button, .survey-widget a{ font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.survey-widget svg{ display: block; flex-shrink: 0; width: 24px; height: 24px; }
.survey-widget :focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }

.survey-widget .survey-toggle{
  position: relative;
  display: grid;
  place-items: center;
  width: var(--survey-size);
  height: var(--survey-size);
  padding: 0;
  border: 1px solid var(--survey-blue);
  border-radius: 50%;
  background: linear-gradient(145deg, #1e90ff, #0758a3);
  color: #fff;
  box-shadow: 0 5px 22px #0005, 0 0 18px #1e90ff38;
  pointer-events: auto;
  transition: transform .2s ease, box-shadow .2s ease;
}

.survey-toggle > svg{ position: absolute; width: 25px; height: 25px; transition: opacity .18s ease, transform .25s ease; }
.survey-toggle .survey-toggle-close{ opacity: 0; transform: rotate(-90deg) scale(.6); }
.survey-widget[data-open="true"] .survey-toggle-icon{ opacity: 0; transform: rotate(90deg) scale(.6); }
.survey-widget[data-open="true"] .survey-toggle-close{ opacity: 1; transform: rotate(0) scale(1); }
.survey-tooltip{
  position: absolute;
  right: calc(100% + 12px);
  padding: 8px 12px;
  border: 1px solid #1e90ff60;
  border-radius: 8px;
  background: var(--survey-bg);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.survey-widget .survey-panel{
  position: absolute;
  right: 0;
  bottom: calc(var(--survey-size) + 16px);
  width: min(390px, calc(100vw - 2 * var(--survey-edge) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100vh - var(--survey-bottom) - var(--survey-size) - 32px);
  max-height: calc(100dvh - var(--survey-bottom) - var(--survey-size) - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  isolation: isolate;
  padding: 0;
  border: 2px solid var(--survey-blue);
  border-radius: 16px;
  background: linear-gradient(135deg, #081b29 45%, #0b3659);
  color: #fff;
  box-shadow: 0 0 25px #1e90ff40, 0 20px 60px #0006;
  transform-origin: bottom right;
  scrollbar-width: thin;
  scrollbar-color: var(--survey-blue) var(--survey-bg);
  pointer-events: auto;
}

.survey-panel::before{
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 56%;
  height: 250px;
  background: linear-gradient(45deg, #081b29, #1e90ff55);
  border-left: 1px solid #1e90ff55;
  transform: skewY(35deg);
  transform-origin: top right;
  pointer-events: none;
}

.survey-panel-top{ display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 12px 0 28px; }
.survey-brand{ font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--survey-light); }
.survey-widget .survey-close{ display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #ffffff0a; color: #fff; transition: background .2s ease; }
.survey-content{ padding: 4px 28px 28px; }
.survey-symbol{ display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 24px; border: 1px solid var(--survey-blue); border-radius: 50%; color: var(--survey-light); background: #1e90ff12; }
.survey-symbol svg{ width: 28px; height: 28px; }
.survey-widget .survey-eyebrow{ margin: 0 0 12px; font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--survey-light); }
.survey-widget .survey-content h2{ margin: 0; font-family: inherit; font-size: clamp(24px, 5vw, 29px); font-weight: 600; line-height: 1.25; letter-spacing: -.025em; color: #fff; }
.survey-content h2 span{ color: var(--survey-blue); }
.survey-widget .survey-description{ margin: 18px 0 24px; padding: 0; font-size: 14px; line-height: 1.7; color: #d6e4f0; }
.survey-widget .survey-action{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 48px;
  padding: 12px 16px;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid var(--survey-blue);
  border-radius: 40px;
  background: var(--survey-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}
.survey-action::before{ content: ''; position: absolute; z-index: -1; inset: -100% 0; background: linear-gradient(var(--survey-bg), #0758a3, var(--survey-bg), #0758a3); transition: transform .45s ease; }
.survey-action span{ flex-shrink: 0; transition: transform .2s ease; }
.survey-widget .survey-note{ margin: 14px 0 0; font-size: 11px; line-height: 1.6; text-align: center; color: #b5c8da; }
.survey-widget .survey-fallback{ position: absolute; right: 0; bottom: 0; width: max-content; max-width: calc(100vw - 48px); padding: 12px 20px; background: var(--survey-bg); border: 1px solid var(--survey-blue); border-radius: 28px; color: #fff; text-decoration: none; pointer-events: auto; }

/* Posicao alternativa para nao ocupar o canto do chatbot. */
.survey-widget[data-position="left"]{ left: max(var(--survey-edge), env(safe-area-inset-left, 0px)); right: auto; }
.survey-widget[data-position="left"] .survey-panel{ left: 0; right: auto; transform-origin: bottom left; }
.survey-widget[data-position="left"] .survey-tooltip{ left: calc(100% + 12px); right: auto; }
.survey-widget[data-position="left"] .survey-fallback{ left: 0; right: auto; }

.survey-widget:not([data-open="true"]) .survey-toggle:focus-visible .survey-tooltip{ opacity: 1; visibility: visible; transform: translateX(0); }
@media (hover: hover) and (pointer: fine){
  .survey-toggle:hover{ transform: translateY(-3px); box-shadow: 0 7px 26px #0006, 0 0 22px #1e90ff66; }
  .survey-widget:not([data-open="true"]) .survey-toggle:hover .survey-tooltip{ opacity: 1; visibility: visible; transform: translateX(0); }
  .survey-widget .survey-close:hover{ background: #ffffff18; }
  .survey-action:hover::before{ transform: translateY(25%); }
  .survey-action:hover span{ transform: translate(2px, -2px); }
}

@media (max-width: 480px){
  .survey-widget{ --survey-edge: 16px; }
  .survey-panel-top{ padding-left: 22px; }
  .survey-content{ padding: 4px 22px 24px; }
  .survey-symbol{ width: 48px; height: 48px; margin-bottom: 20px; }
  .survey-widget .survey-description{ font-size: 13px; }
  .survey-widget .survey-action{ font-size: 13px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce){
  .survey-widget *, .survey-widget *::before, .survey-widget *::after{ animation: none !important; transition: none !important; }
  .survey-toggle:hover, .survey-action:hover span, .survey-action:hover::before{ transform: none; }
}