/* FARTECNET CHAT V2.4 — painel isolado do CSS geral do site */
.farbot-web-fab,
.farbot-chat,
.farbot-chat *{
  box-sizing:border-box;
}

.farbot-web-fab{
  position:fixed;
  right:max(22px,env(safe-area-inset-right));
  bottom:94px;
  z-index:1990;
  width:58px;
  height:58px;
  border:0;
  border-radius:18px;
  background:linear-gradient(145deg,#2563eb,#1d4ed8);
  color:#fff;
  font-size:1.45rem;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 18px 42px rgba(37,99,235,.38);
  transition:transform .2s ease,box-shadow .2s ease;
}
.farbot-web-fab:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(37,99,235,.46);
}
.farbot-web-fab::after{
  content:'Atendimento online';
  position:absolute;
  right:70px;
  top:50%;
  transform:translate(8px,-50%);
  padding:8px 11px;
  border-radius:10px;
  background:#0f172a;
  color:#fff;
  font-size:.72rem;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
}
.farbot-web-fab:hover::after{
  opacity:1;
  transform:translate(0,-50%);
}

.farbot-chat{
  --fb-blue:#2563eb;
  --fb-blue-dark:#1e3a8a;
  --fb-ink:#0f172a;
  --fb-muted:#64748b;
  --fb-line:#e2e8f0;
  position:fixed;
  z-index:2000;
  right:20px;
  bottom:20px;
  width:400px;
  max-width:calc(100vw - 32px);
  height:630px;
  max-height:calc(100dvh - 104px);
  display:flex;
  flex-direction:column;
  min-height:420px;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.35);
  border-radius:24px;
  background:#fff;
  color:var(--fb-ink);
  font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;
  line-height:1.45;
  box-shadow:0 30px 90px rgba(15,23,42,.30),0 8px 28px rgba(15,23,42,.14);
  transform:translateY(22px) scale(.975);
  transform-origin:bottom right;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.farbot-chat.open{
  transform:none;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.farbot-chat-header{
  position:relative;
  flex:0 0 auto;
  min-height:78px;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:13px 14px 13px 15px;
  background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.14),transparent 26%),
    linear-gradient(135deg,#1d4ed8 0%,#1e40af 58%,#172554 100%);
  color:#fff;
  border:0;
}
.farbot-chat-avatar{
  flex:0 0 46px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:15px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:1.22rem;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.farbot-chat-heading{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.farbot-chat-heading strong{
  display:block;
  margin:0;
  color:#fff;
  font-size:.98rem;
  line-height:1.25;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.farbot-chat-heading small{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:5px;
  color:#dbeafe;
  font-size:.72rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.farbot-chat-status-dot{
  flex:0 0 8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 0 3px rgba(74,222,128,.16);
}
.farbot-chat-close{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:1.45rem;
  line-height:1;
  font-weight:400;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.farbot-chat-close:hover{
  background:rgba(255,255,255,.22);
  transform:scale(1.04);
}

.farbot-chat-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px 15px 22px;
  background:
    radial-gradient(circle at 10px 10px,rgba(37,99,235,.035) 1.2px,transparent 1.3px) 0 0/24px 24px,
    linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
  scroll-behavior:smooth;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}
.farbot-chat-body::-webkit-scrollbar{width:7px}
.farbot-chat-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.farbot-chat-body::-webkit-scrollbar-track{background:transparent}

.farbot-chat-intro{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 15px;
  padding:11px 12px;
  border:1px solid #dbeafe;
  border-radius:16px;
  background:rgba(239,246,255,.9);
  color:#1e3a8a;
}
.farbot-chat-intro>span{
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#dbeafe;
  font-size:.95rem;
}
.farbot-chat-intro>div{min-width:0}
.farbot-chat-intro strong{
  display:block;
  margin:0 0 2px;
  font-size:.82rem;
}
.farbot-chat-intro small{
  display:block;
  color:#475569;
  font-size:.72rem;
  line-height:1.4;
}

.farbot-message{
  position:relative;
  width:fit-content;
  max-width:84%;
  margin:0 0 10px;
  padding:10px 12px;
  border-radius:15px;
  font-size:.87rem;
  line-height:1.48;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:normal;
  box-shadow:0 4px 13px rgba(15,23,42,.065);
}
.farbot-message a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:750;
}
.farbot-message.bot{
  margin-right:auto;
  border:1px solid #e2e8f0;
  border-bottom-left-radius:5px;
  background:#fff;
  color:#172033;
}
.farbot-message.user{
  margin-left:auto;
  border:1px solid #bfdbfe;
  border-bottom-right-radius:5px;
  background:linear-gradient(135deg,#dbeafe,#eff6ff);
  color:#1e3a8a;
}
.farbot-message.error{
  margin-right:auto;
  border:1px solid #fecaca;
  border-bottom-left-radius:5px;
  background:#fff1f2;
  color:#9f1239;
}
.farbot-typing{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:0 0 10px;
  padding:11px 13px;
  border:1px solid #e2e8f0;
  border-radius:15px 15px 15px 5px;
  background:#fff;
  box-shadow:0 4px 13px rgba(15,23,42,.06);
}
.farbot-typing i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#94a3b8;
  animation:farbot-bounce 1s infinite ease-in-out;
}
.farbot-typing i:nth-child(2){animation-delay:.14s}
.farbot-typing i:nth-child(3){animation-delay:.28s}
@keyframes farbot-bounce{50%{transform:translateY(-4px)}}

/* Usa DIV no HTML V2.4, mas mantém !important para neutralizar CSS antigo caso o arquivo seja footer. */
.farbot-chat-footer{
  flex:0 0 auto !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  align-items:stretch !important;
  justify-content:initial !important;
  gap:0 !important;
  border:0 !important;
  border-top:1px solid var(--fb-line) !important;
  background:#fff !important;
  color:var(--fb-ink) !important;
}
.farbot-quick{
  display:flex;
  width:100%;
  gap:7px;
  overflow-x:auto;
  overflow-y:hidden;
  margin:0;
  padding:10px 12px 4px;
  background:#fff;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:#dbeafe transparent;
}
.farbot-quick:empty{display:none}
.farbot-quick::-webkit-scrollbar{height:5px}
.farbot-quick::-webkit-scrollbar-thumb{background:#dbeafe;border-radius:999px}
.farbot-quick button{
  flex:0 0 auto;
  max-width:235px;
  min-height:36px;
  margin:0;
  padding:8px 12px;
  border:1px solid #bfdbfe;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font:inherit;
  font-size:.75rem;
  line-height:1.25;
  font-weight:800;
  white-space:normal;
  text-align:left;
  cursor:pointer;
  scroll-snap-align:start;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.farbot-quick button:hover{
  background:#dbeafe;
  border-color:#93c5fd;
  transform:translateY(-1px);
}
.farbot-chat-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-width:0;
  gap:8px;
  margin:0;
  padding:7px 12px 0;
}
.farbot-chat-tools button{
  margin:0;
  border:0;
  border-radius:9px;
  padding:6px 9px;
  background:transparent;
  font:inherit;
  font-size:.68rem;
  line-height:1.2;
  font-weight:800;
  cursor:pointer;
}
.farbot-chat-end{color:#be123c}
.farbot-chat-end:hover{background:#fff1f2}
.farbot-chat-retry{color:#1d4ed8}
.farbot-chat-retry:hover{background:#eff6ff}
.farbot-chat-form{
  display:flex;
  align-items:flex-end;
  width:100%;
  min-width:0;
  gap:8px;
  margin:0;
  padding:8px 11px 8px;
}
.farbot-chat-form textarea{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  min-height:44px;
  max-height:108px;
  margin:0;
  padding:11px 13px;
  resize:none;
  overflow-y:auto;
  border:1px solid #cbd5e1;
  border-radius:14px;
  outline:none;
  background:#f8fafc;
  color:#0f172a;
  font:inherit;
  font-size:.86rem;
  line-height:1.35;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.farbot-chat-form textarea:focus{
  border-color:#60a5fa;
  background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.farbot-chat-form textarea::placeholder{color:#94a3b8}
.farbot-chat-form button{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:0;
  border-radius:14px;
  background:linear-gradient(145deg,#2563eb,#1d4ed8);
  color:#fff;
  font:inherit;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 7px 18px rgba(37,99,235,.24);
  transition:transform .16s ease,opacity .16s ease;
}
.farbot-chat-form button:hover{transform:translateY(-1px)}
.farbot-chat-form button:disabled,
.farbot-chat-tools button:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}
.farbot-chat-note{
  display:block;
  margin:0;
  padding:0 13px 9px;
  color:#94a3b8;
  font-size:.62rem;
  line-height:1.35;
  text-align:center;
}
.farbot-online-button{
  border-color:#2563eb!important;
  background:#2563eb!important;
  color:#fff!important;
}

@media(max-width:600px){
  body.farbot-chat-open{overflow:hidden}
  .farbot-chat{
    inset:0;
    width:100%;
    max-width:none;
    height:100dvh;
    max-height:none;
    min-height:0;
    border:0;
    border-radius:0;
    transform:translateY(18px);
  }
  .farbot-chat-header{
    min-height:72px;
    padding-top:max(12px,env(safe-area-inset-top));
  }
  .farbot-chat-body{padding:14px 12px 20px}
  .farbot-message{max-width:90%;font-size:.88rem}
  .farbot-web-fab{right:16px;bottom:84px}
  .farbot-web-fab::after{display:none}
  .farbot-chat-form{padding-bottom:max(9px,env(safe-area-inset-bottom))}
  .farbot-chat-note{display:none}
}

@media(max-width:380px){
  .farbot-chat-heading small{max-width:185px}
  .farbot-chat-avatar{flex-basis:42px;width:42px;height:42px}
  .farbot-chat-close{flex-basis:36px;width:36px;height:36px}
}

@media(prefers-reduced-motion:reduce){
  .farbot-chat,.farbot-web-fab,.farbot-chat-close,.farbot-quick button,.farbot-chat-form button{transition:none}
  .farbot-typing i{animation:none}
}