/* Vivi: atendimento guiado, consistente em todas as páginas. */
.chat-widget {
  position: fixed !important;
  right: 28px !important;
  bottom: 26px !important;
  z-index: 9999 !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
}
.vivi-launcher {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 5px 13px 5px 5px;
  border-radius: 999px;
  background: #fff;
  color: #d94c00;
  box-shadow: 0 12px 30px rgba(103,37,0,.24);
  cursor: pointer;
  transition: transform .24s ease, box-shadow .24s ease;
}
.vivi-launcher:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(103,37,0,.32); }
.vivi-launcher img { display: block; width: 54px; height: 54px; object-fit: cover; object-position: center; border-radius: 50%; background: #ff720f; border: 2px solid #ff720f; }
.vivi-launcher span { font-size: .84rem; font-weight: 800; white-space: nowrap; }
.vivi-launcher::after { content: ''; position: absolute; width: 11px; height: 11px; right: 7px; top: 5px; border-radius: 50%; background: #35b76e; border: 2px solid #fff; }

.vivi-panel {
  position: absolute;
  right: 0;
  bottom: 78px;
  width: 382px;
  overflow: hidden;
  border: 1px solid rgba(224,81,0,.14);
  border-radius: 20px;
  background: #fff;
  color: #4b2c19;
  box-shadow: 0 24px 70px rgba(72,24,0,.25);
  transform: translateY(16px) scale(.98);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
}
.vivi-panel.is-open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.vivi-top { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid #f7e8dd; background: #fffaf7; }
.vivi-top img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; background: #ff720f; border: 2px solid #ff720f; }
.vivi-title { flex: 1; min-width: 0; }
.vivi-title strong { display: block; color: #762c00; font-size: 1rem; line-height: 1.25; }
.vivi-title span { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: #71816f; font-size: .76rem; }
.vivi-title span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #35b76e; }
.vivi-close { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: #9a5c36; cursor: pointer; font-size: 1.35rem; line-height: 1; }
.vivi-close:hover { background: #fff0e7; color: #d94c00; }
.vivi-body { padding: 17px 18px 15px; }
.vivi-greeting { margin: 0 0 14px; color: #5e3924; font-size: .91rem; line-height: 1.46; }
.vivi-greeting strong { color: #d94c00; }
.vivi-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.vivi-option { display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 9px 10px; border: 1px solid #f3d8c6; border-radius: 11px; background: #fff; color: #6e3517; text-align: left; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.vivi-option i { width: 15px; color: #ed5a00; font-size: .9rem; text-align: center; }
.vivi-option:hover { border-color: #ff8a42; background: #fff5ef; transform: translateY(-1px); }
.vivi-chat { display: none; max-height: 166px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #f4e7de; overflow-y: auto; }
.vivi-chat.is-active { display: block; }
.vivi-line { display: flex; margin: 0 0 10px; }
.vivi-line.user { justify-content: flex-end; }
.vivi-bubble { max-width: 88%; padding: 9px 11px; border-radius: 12px 12px 12px 3px; background: #fff3ec; color: #63351d; font-size: .82rem; line-height: 1.4; }
.vivi-line.user .vivi-bubble { border-radius: 12px 12px 3px 12px; background: #ff6505; color: #fff; }
.vivi-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: #ff6505; color: #fff; font: inherit; font-size: .77rem; font-weight: 800; cursor: pointer; }
.vivi-cta:hover { background: #de4e00; }
.vivi-form { display: flex; gap: 8px; padding: 11px 18px 15px; border-top: 1px solid #f4e7de; background: #fff; }
.vivi-form input { min-width: 0; flex: 1; height: 38px; padding: 0 11px; border: 1px solid #efd7c5; border-radius: 9px; outline: 0; color: #5a331e; font: inherit; font-size: .82rem; }
.vivi-form input:focus { border-color: #ff7a28; box-shadow: 0 0 0 3px rgba(255,99,0,.10); }
.vivi-send { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 0; border-radius: 9px; background: #ff6505; color: #fff; cursor: pointer; }
.vivi-send:hover { background: #db4d00; }
@media (max-width: 600px) {
  .chat-widget { right: 16px !important; bottom: 16px !important; }
  .vivi-launcher { padding: 4px; }
  .vivi-launcher img { width: 54px; height: 54px; }
  .vivi-launcher span { display: none; }
  .vivi-panel { right: -2px; bottom: 72px; width: min(382px, calc(100vw - 28px)); }
}

/* V2 — concierge digital Savnet: contraste premium e acabamento tecnológico. */
.vivi-launcher {
  gap: 9px;
  padding: 5px 15px 5px 5px;
  background: linear-gradient(135deg, #2c170c, #4b220b) !important;
  color: #fff4eb !important;
  border: 1px solid rgba(255,180,104,.45) !important;
  box-shadow: 0 16px 36px rgba(63,23,0,.34), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.vivi-launcher::before { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(255,143,55,.22); border-radius: inherit; pointer-events: none; }
.vivi-launcher::after { right: 8px; top: 6px; border-color: #2d190d; box-shadow: 0 0 0 3px rgba(53,183,110,.11); }
.vivi-launcher img { width: 56px; height: 56px; border: 2px solid #ff9a46; box-shadow: 0 0 0 4px rgba(255,118,20,.18); }
.vivi-launcher span { font-size: .8rem; letter-spacing: .01em; }

.vivi-panel {
  width: 370px;
  border: 1px solid rgba(255,176,100,.26) !important;
  border-radius: 24px !important;
  background: linear-gradient(150deg, #351909 0%, #21130e 52%, #17100d 100%) !important;
  color: #fff4eb !important;
  box-shadow: 0 28px 76px rgba(47,17,0,.45), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.vivi-panel::before { content: ''; position: absolute; width: 220px; height: 220px; right: -90px; top: -105px; border-radius: 50%; background: radial-gradient(circle, rgba(255,119,22,.34), transparent 68%); pointer-events: none; }
.vivi-panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.07), transparent 24%, transparent 74%, rgba(255,255,255,.03)); }
.vivi-top, .vivi-body, .vivi-form { position: relative; z-index: 1; }
.vivi-top { padding: 18px 19px 15px !important; border-bottom: 1px solid rgba(255,214,179,.13) !important; background: transparent !important; }
.vivi-top img { width: 50px; height: 50px; border-color: #ff9e4d; box-shadow: 0 0 0 4px rgba(255,120,22,.17); }
.vivi-title strong { color: #fff8f2 !important; font-size: .99rem !important; letter-spacing: -.01em; }
.vivi-title span { color: rgba(255,235,220,.68) !important; font-size: .73rem !important; }
.vivi-title span::before { background: #62d291 !important; box-shadow: 0 0 10px rgba(98,210,145,.75); }
.vivi-close { color: rgba(255,235,220,.7) !important; }
.vivi-close:hover { background: rgba(255,255,255,.09) !important; color: #fff !important; }
.vivi-body { padding: 17px 19px 14px !important; }
.vivi-greeting { color: rgba(255,241,232,.88) !important; font-size: .88rem !important; line-height: 1.52 !important; }
.vivi-greeting strong { color: #ffad65 !important; }
.vivi-options { gap: 9px !important; }
.vivi-option { min-height: 48px !important; padding: 10px 11px !important; border: 1px solid rgba(255,214,179,.16) !important; border-radius: 12px !important; background: rgba(255,255,255,.055) !important; color: rgba(255,245,238,.94) !important; font-size: .77rem !important; }
.vivi-option i { display: grid; place-items: center; width: 20px !important; height: 20px; border-radius: 6px; background: rgba(255,119,22,.17); color: #ffad65 !important; font-size: .72rem !important; }
.vivi-option:hover { border-color: rgba(255,174,98,.6) !important; background: rgba(255,120,22,.14) !important; transform: translateY(-2px) !important; }
.vivi-chat { border-top-color: rgba(255,214,179,.13) !important; }
.vivi-bubble { background: rgba(255,255,255,.09) !important; color: rgba(255,245,238,.94) !important; }
.vivi-line.user .vivi-bubble { background: linear-gradient(135deg, #f85c00, #ff8b37) !important; }
.vivi-cta { background: #fff4eb !important; color: #9b3900 !important; }
.vivi-cta:hover { background: #fff !important; }
.vivi-form { padding: 12px 19px 17px !important; border-top-color: rgba(255,214,179,.13) !important; background: transparent !important; }
.vivi-form input { border-color: rgba(255,214,179,.24) !important; background: rgba(255,255,255,.075) !important; color: #fff7f1 !important; }
.vivi-form input::placeholder { color: rgba(255,235,220,.54); }
.vivi-form input:focus { border-color: #ff9d53 !important; box-shadow: 0 0 0 3px rgba(255,119,22,.15) !important; }
.vivi-send { background: linear-gradient(135deg, #ff6505, #ff963f) !important; box-shadow: 0 7px 18px rgba(255,93,0,.25); }
.vivi-send:hover { background: linear-gradient(135deg, #ff7b21, #ffad65) !important; }
@media (max-width: 600px) { .vivi-panel { width: min(370px, calc(100vw - 28px)); } }

/* V3 — interface clara, com convite apenas ao passar o mouse. */
.vivi-launcher {
  position: relative;
  width: 66px;
  height: 66px;
  padding: 4px;
  justify-content: center;
  border-radius: 50%;
  background: #fff !important;
  border: 2px solid #ff8a36 !important;
  box-shadow: 0 12px 28px rgba(103,37,0,.22) !important;
}
.vivi-launcher::before {
  content: 'Oi, precisa de ajuda?';
  position: absolute;
  inset: auto 76px auto auto;
  top: 50%;
  width: max-content;
  max-width: 210px;
  padding: 10px 13px;
  border: 1px solid #f0d7c6;
  border-radius: 11px;
  background: #fff;
  color: #803600;
  box-shadow: 0 10px 24px rgba(96,34,0,.17);
  font-size: .8rem;
  font-weight: 750;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.vivi-launcher:hover::before, .vivi-launcher:focus-visible::before { opacity: 1; transform: translateY(-50%) translateX(0); }
.vivi-launcher::after { right: 1px; top: 1px; border-color: #fff; }
.vivi-launcher img { width: 54px; height: 54px; border-color: #ff7b21; box-shadow: none; }
.vivi-launcher span { display: none; }

.vivi-panel {
  border-color: #efd8c7 !important;
  background: #fff !important;
  color: #4d2b18 !important;
  box-shadow: 0 26px 66px rgba(76,24,0,.24) !important;
}
.vivi-panel::before, .vivi-panel::after { display: none; }
.vivi-top { border-bottom-color: #f4e5da !important; background: linear-gradient(135deg, #fffaf6, #fff) !important; }
.vivi-top img { border-color: #ff7b21; box-shadow: 0 0 0 4px rgba(255,119,22,.12); }
.vivi-title strong { color: #722d00 !important; }
.vivi-title span { color: #6d806e !important; }
.vivi-close { color: #99603c !important; }
.vivi-close:hover { background: #fff1e7 !important; color: #d94c00 !important; }
.vivi-greeting { color: #5c3824 !important; }
.vivi-greeting strong { color: #de5100 !important; }
.vivi-option { border-color: #efd8c7 !important; background: #fff !important; color: #66351b !important; }
.vivi-option i { background: #fff0e6 !important; color: #e55700 !important; }
.vivi-option:hover { border-color: #ff984f !important; background: #fff7f1 !important; }
.vivi-chat { border-top-color: #f3e5db !important; }
.vivi-bubble { background: #fff2e9 !important; color: #63351d !important; }
.vivi-line.user .vivi-bubble { background: linear-gradient(135deg, #ff6505, #ff8c36) !important; }
.vivi-form { border-top-color: #f3e5db !important; background: #fff !important; }
.vivi-form input { border-color: #ecd3c1 !important; background: #fff !important; color: #54311e !important; }
.vivi-form input::placeholder { color: #9d897d; }
.vivi-form input:focus { border-color: #ff7b21 !important; box-shadow: 0 0 0 3px rgba(255,99,0,.10) !important; }
.vivi-send { background: linear-gradient(135deg, #ff6505, #ff8d37) !important; box-shadow: none !important; }
@media (max-width: 600px) { .vivi-launcher::before { display: none; } }