/* Seven Lead Qualification - v1.3.0 */
:root{ --slq-primary:#0ea5e9; --slq-bot-bg:#eef2f7; --slq-user-bg:#0ea5e9; --slq-z:999999; --slq-shadow:0 10px 30px rgba(2,6,23,.18) }
.slq-hidden{display:none!important}

/* teaser */
.slq-teaser{ position:fixed; z-index:var(--slq-z); }
.slq-teaser__bubble{ background:#fff; border:1px solid #e7ebf0; box-shadow:var(--slq-shadow); border-radius:14px; padding:12px 16px; max-width:360px; line-height:1.35; position:relative; }
.slq-teaser__bubble::after{ content:""; position:absolute; right:-8px; top:50%; transform:translateY(-50%); border-left:8px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.05)); }
.slq-teaser__text{font-size:15px; color:#111827}
.slq-pos-br.slq-teaser{ right:88px; bottom:30px } .slq-pos-tr.slq-teaser{ right:88px; top:30px }
.slq-pos-bl.slq-teaser{ left:88px; bottom:30px } .slq-pos-tl.slq-teaser{ left:88px; top:30px }
.slq-pos-bl .slq-teaser__bubble::after, .slq-pos-tl .slq-teaser__bubble::after{ right:auto; left:-8px; border-left:none; border-right:8px solid #fff; }

/* Floating avatar (FAB) */
.slq-fab{ position:fixed; width:58px;height:58px;border-radius:50%; box-shadow:var(--slq-shadow); background:#fff; z-index:var(--slq-z); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.slq-fab img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.slq-fab__dot{position:absolute; right:5px; bottom:5px; width:12px; height:12px; background:#10b981; border:2px solid #fff; border-radius:50%}
.slq-pos-br.slq-fab{ right:18px; bottom:18px } .slq-pos-bl.slq-fab{ left:18px; bottom:18px } .slq-pos-tr.slq-fab{ right:18px; top:18px } .slq-pos-tl.slq-fab{ left:18px; top:18px }

/* chat (flutuante) */
.slq-chat{ position:fixed; width:560px; max-width:100vw; background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--slq-shadow); z-index:var(--slq-z); display:flex; flex-direction:column }
.slq-pos-br.slq-chat{ right:18px; bottom:18px } .slq-pos-bl.slq-chat{ left:18px; bottom:18px } .slq-pos-tr.slq-chat{ right:18px; top:18px } .slq-pos-tl.slq-chat{ left:18px; top:18px }

/* chat (embed inline via shortcode) */
.slq-chat--inline{ position:relative; width:100%; border-radius:18px; overflow:hidden; box-shadow:var(--slq-shadow); }

.slq-chat__header{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--slq-primary); color:#fff }
.slq-chat__avatar{ width:36px;height:36px;border-radius:50%;object-fit:cover;background:#fff }
.slq-chat__title{ font-weight:700 } .slq-chat__subtitle{ font-size:12px; opacity:.95 } .slq-close{ margin-left:auto; cursor:pointer; font-size:18px }
.slq-chat__body{ padding:14px; background:#f6f8fb; height:420px; overflow:auto }
.slq-row{ display:flex; gap:10px; margin:10px 0; align-items:flex-start }
.slq-row--bot{ justify-content:flex-start } .slq-row--user{ justify-content:flex-end }
.slq-bubble{ padding:10px 14px; border-radius:16px; line-height:1.4; box-shadow:0 1px 0 rgba(0,0,0,.04); max-width:75% }
.slq-row--bot .slq-bubble{ background:var(--slq-bot-bg); color:#111827 } .slq-row--user .slq-bubble{ background:var(--slq-user-bg); color:#fff }
.slq-typing{ background:var(--slq-bot-bg); display:inline-flex; gap:6px; align-items:center; padding:10px 12px; border-radius:16px }
.slq-dot{ width:6px;height:6px;border-radius:50%;background:#cbd5e1;opacity:.6;animation:blink 1.1s infinite }
.slq-dot:nth-child(2){animation-delay:.15s}.slq-dot:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
.slq-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
.slq-btn{ appearance:none; border:none; background:#2ea7ff; color:#fff; border-radius:999px; padding:10px 16px; cursor:pointer; font-weight:700 }
.slq-inputbar{ display:flex; gap:8px; padding:10px; border-top:1px solid #e5e7eb; background:#fff }
.slq-input{ flex:1; border:1px solid #d1d5db; border-radius:12px; padding:10px 12px; outline:none }
.slq-send{ appearance:none; border:none; background:#22c55e; color:#fff; border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:700 }

}

/* overlay + modal do exit-intent */
.slq-exit-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:999998;display:none}

/* CENTRALIZADO no meio da tela e menor */
.slq-exit-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  max-width: 92vw;
  max-height: 80vh;
  overflow: auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 60px rgba(2,6,23,.25);
  z-index:999999;
  padding:18px;
}

@media(max-width:340px){
  .slq-exit-modal{
    width: 80vw;
    height: 80vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    transform: transform: translate(-50%, -50%);
    left: 50%; top: 50%;
  }
}

.slq-exit-title{font-weight:800;font-size:18px;color:#0f172a;margin-bottom:6px}
.slq-exit-sub{color:#475569;margin-bottom:14px}
.slq-exit-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.slq-exit-btn{appearance:none;border:none;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.slq-exit-btn--ghost{background:#eef2f7;color:#0f172a}
.slq-exit-btn--primary{background:var(--slq-user-bg,#0ea5e9);color:#fff}

/* --- MOBILE/GERAL: corpo flex e inputbar colada embaixo --- */
.slq-chat{ display:flex; flex-direction:column; }
.slq-chat__body{
  flex: 1;
  height: auto !important;      /* cancela o 420px/112px */
  overflow: auto;
}

/* Barra de entrada sempre visível no rodapé do chat */
.slq-inputbar{
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 2;
}

/* Safe-area (iPhone com notch) */
@supports (padding: max(0px)) {
  .slq-inputbar{
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* ----- CHAT FLEX: corpo ocupa o espaço e a barra fica sempre visível ----- */
.slq-chat{ display:flex; flex-direction:column; }
.slq-chat__body{
  flex: 1;
  height: auto !important;     /* remove alturas fixas */
  overflow: auto;
}

/* Barra de digitação sempre embaixo dentro do chat (shortcode e flutuante) */
.slq-inputbar{
  position: sticky;
  bottom: 0;
  display: flex !important;
  background: #fff;
  z-index: 2;
}

/* Garante que o wrapper inline (shortcode) não esconda a barra */
.slq-chat--inline{ overflow: hidden; }


/* === FIX: Shortcode (inline) no mobile: input sempre visível === */

/* Layout em coluna no inline (desktop e mobile) */
.slq-chat--inline{
  display: flex;
  flex-direction: column;
}

/* Mobile: usar altura real do viewport (dvh/svh) e fallback */
@media (max-width: 780px){
  .slq-chat--inline{
    position: center !important;
    width: 100% !important;
    max-width: auto !important;
    height: 840px !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    z-index: 1 !important;
  }

  .slq-chat--inline{ position:relative; width:100%; border-radius:18px; overflow:hidden; box-shadow:var(--slq-shadow); }

  }

  /* Corpo ocupa o espaço restante (entre header e input) */
  .slq-chat--inline .slq-chat__body{
    flex: 1 1 auto;
    height: auto !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  /* Barra de entrada sempre visível no rodapé do container */
  .slq-chat--inline .slq-inputbar{
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* Se algum wrapper limitar a altura do shortcode */
.slq-embed, .slq-chat--inline{
  min-height: 420px;
}
/* === OVERRIDE: Shortcode [seven_lead_chat] === */
/* Desktop: fullscreen */
.slq-chat--inline{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  border-radius: 0 !important;
  z-index: 999999 !important;

  display: flex !important;
  flex-direction: column !important;
}

/* Corpo do chat ocupa o meio da tela no desktop */
.slq-chat--inline .slq-chat__body{
  flex: 1 1 auto !important;
  height: calc(100vh - 112px) !important; /* 112px ≈ header + inputbar */
  overflow: auto !important;
}

/* Mobile: 90% de largura, 400px de altura, centralizado */
@media (max-width: 640px){
  .slq-chat--inline{
    position: relative !important;
    inset: auto !important;
    width: 90vw !important;
    height: 600px !important;
    max-width: 90vw !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    z-index: 1 !important;
  }

  .slq-chat--inline .slq-chat__body{
    flex: 1 1 auto !important;
    height: calc(600px - 112px) !important; /* altura total - header - input */
    overflow: auto !important;
  }
}
/* Oculta FAB e teaser quando o chat estiver no shortcode */
.slq-chat--inline ~ .slq-fab,
.slq-chat--inline ~ .slq-teaser,
.slq-embed .slq-fab,
.slq-embed .slq-teaser {
    display: none !important;
}

/* Garante que nada fique acima do chat inline */
.slq-chat--inline {
    z-index: 999999 !important;
}

.slq-chat--inline * {
    z-index: 999999 !important;
}
/* ===== AJUSTE SOMENTE DO CHAT FLUTUANTE (avatar) ===== */

/* aumenta largura e altura do chat flutuante */
.slq-chat:not(.slq-chat--inline){
  width: 420px;        /* largura do chat flutuante */
  height: 540px;       /* altura do chat flutuante */
  max-width: 95vw;
}

/* deixa o corpo ocupar a nova altura */
.slq-chat:not(.slq-chat--inline) .slq-chat__body{
  height: calc(540px - 112px); /* 112px = header + inputbar */
  overflow-y: auto;
}

/* ajuste opcional somente para mobile */
@media (max-width: 640px){
  .slq-chat:not(.slq-chat--inline){
    width: 100vw;
    height: 80vh;   /* ajuste aqui se quiser maior ou menor */
  }
  .slq-chat:not(.slq-chat--inline) .slq-chat__body{
    height: calc(80vh - 112px);
  }
}