.hint-button {
  position: fixed;
  bottom: 87px;
  right: 32px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #007bff;
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  transform: translateY(-5%);
}

.hint-button:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}

.hint-sidebar {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 999;
  transition: right 0.3s ease, background-color 0.3s ease;
  padding: 20px;
  overflow-y: auto;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.hint-sidebar.active {
  right: 0;
}

.hint-sidebar:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.hint-sidebar.transparent {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
}

.hint-sidebar.transparent:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.hint-sidebar.transparent .hint-item {
  background-color: rgba(248, 249, 250, 0.6);
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
}

.hint-sidebar.transparent .hint-item:hover {
  background-color: rgba(233, 236, 239, 0.8);
}

.hint-sidebar.transparent .hint-item h3 {
  color: #007bff;
  font-weight: 600;
}

.hint-sidebar.transparent .hint-item p {
  color: #495057;
  font-weight: 500;
}

/* Transparency toggle button */
.hint-transparency-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0, 123, 255, 0.8);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 1001;
}

.hint-transparency-toggle:hover {
  background-color: rgba(0, 123, 255, 1);
  transform: scale(1.1);
}

.hint-transparency-toggle i {
  font-size: 10px;
}

.hint-tour-restart {
  position: absolute;
  top: 10px;
  right: 90px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(249, 115, 22, 0.9);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 1001;
}

.hint-tour-restart.visible {
  display: flex;
}

.hint-tour-restart:hover {
  background-color: rgba(249, 115, 22, 1);
  transform: scale(1.1);
}

.hint-tour-restart i {
  font-size: 12px;
}

/* Tooltips toggle button */
.hint-tooltips-toggle {
  position: absolute;
  top: 10px;
  right: 50px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(40, 167, 69, 0.8);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 1001;
}

.hint-tooltips-toggle:hover {
  background-color: rgba(40, 167, 69, 1);
  transform: scale(1.1);
}

.hint-tooltips-toggle.disabled {
  background-color: rgba(220, 53, 69, 0.8);
}

.hint-tooltips-toggle.disabled:hover {
  background-color: rgba(220, 53, 69, 1);
}

.hint-tooltips-toggle i {
  font-size: 10px;
}

.hint-item {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 5px;
  background-color: rgba(248, 249, 250, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.hint-item:hover {
  background-color: rgba(233, 236, 239, 0.9);
}

.hint-item h3 {
  margin: 0 0 5px 0;
  color: #007bff;
  font-size: 16px;
}

.hint-item p {
  margin: 0;
  color: #6c757d;
  font-size: 14px;
}

.hint-popup {
  position: fixed;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 12px 16px;
  max-width: 280px;
  min-width: 200px;
  z-index: 50000; /* Very high z-index to ensure it's above all other elements */
  display: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  /* Add smooth transition for better UX */
  transition: opacity 0.2s ease, transform 0.2s ease;
  /* Ensure tooltip doesn't interfere with pointer events */
  pointer-events: none;
}

.hint-popup h3 {
  margin: 0 0 5px 0;
  color: #007bff;
  font-size: 14px;
}

.hint-popup p {
  margin: 0;
  color: #6c757d;
  font-size: 12px;
}

.highlight-hint {
  animation: highlight 2s ease;
}

@keyframes highlight {
  0% {
    background-color: rgba(0, 123, 255, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

/* Dark mode styles for hints */
[data-theme="dark"] .hint-button,
.hint-button.dark-mode {
  background-color: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .hint-button:hover,
.hint-button.dark-mode:hover {
  background-color: #1e40af !important;
}

[data-theme="dark"] .hint-sidebar,
.hint-sidebar.dark-mode {
  background-color: rgba(35, 38, 47, 0.4) !important;
  color: #e5e7eb !important;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .hint-sidebar:hover,
.hint-sidebar.dark-mode:hover {
  background-color: rgba(35, 38, 47, 0.6) !important;
}

[data-theme="dark"] .hint-sidebar.transparent,
.hint-sidebar.dark-mode.transparent {
  background-color: rgba(35, 38, 47, 0.15) !important;
}

[data-theme="dark"] .hint-sidebar.transparent:hover,
.hint-sidebar.dark-mode.transparent:hover {
  background-color: rgba(35, 38, 47, 0.25) !important;
}

[data-theme="dark"] .hint-sidebar.transparent .hint-item,
.hint-sidebar.dark-mode.transparent .hint-item {
  background-color: rgba(24, 26, 32, 0.6) !important;
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
}

[data-theme="dark"] .hint-sidebar.transparent .hint-item:hover,
.hint-sidebar.dark-mode.transparent .hint-item:hover {
  background-color: rgba(42, 45, 58, 0.8) !important;
}

[data-theme="dark"] .hint-sidebar.transparent .hint-item h3,
.hint-sidebar.dark-mode.transparent .hint-item h3 {
  color: #60a5fa !important;
  font-weight: 600;
}

[data-theme="dark"] .hint-sidebar.transparent .hint-item p,
.hint-sidebar.dark-mode.transparent .hint-item p {
  color: #e5e7eb !important;
  font-weight: 500;
}

/* Dark mode styles for transparency toggle */
[data-theme="dark"] .hint-transparency-toggle,
.hint-transparency-toggle.dark-mode {
  background-color: rgba(96, 165, 250, 0.8) !important;
  color: #fff !important;
}

[data-theme="dark"] .hint-transparency-toggle:hover,
.hint-transparency-toggle.dark-mode:hover {
  background-color: rgba(96, 165, 250, 1) !important;
}

[data-theme="dark"] .hint-tooltips-toggle,
.hint-tooltips-toggle.dark-mode {
  background-color: rgba(40, 167, 69, 0.8) !important;
  color: #fff !important;
}

[data-theme="dark"] .hint-tour-restart,
.hint-tour-restart.dark-mode {
  background-color: rgba(251, 146, 60, 0.9) !important;
  color: #fff !important;
}

[data-theme="dark"] .hint-tour-restart:hover,
.hint-tour-restart.dark-mode:hover {
  background-color: rgba(251, 146, 60, 1) !important;
}

[data-theme="dark"] .hint-tooltips-toggle:hover,
.hint-tooltips-toggle.dark-mode:hover {
  background-color: rgba(40, 167, 69, 1) !important;
}

[data-theme="dark"] .hint-tooltips-toggle.disabled,
.hint-tooltips-toggle.dark-mode.disabled {
  background-color: rgba(220, 53, 69, 0.8) !important;
}

[data-theme="dark"] .hint-tooltips-toggle.disabled:hover,
.hint-tooltips-toggle.dark-mode.disabled:hover {
  background-color: rgba(220, 53, 69, 1) !important;
}

[data-theme="dark"] .hint-item,
.hint-item.dark-mode {
  background-color: rgba(24, 26, 32, 0.8) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .hint-item:hover,
.hint-item.dark-mode:hover {
  background-color: rgba(42, 45, 58, 0.9) !important;
}

[data-theme="dark"] .hint-item h3,
.hint-item.dark-mode h3 {
  color: #60a5fa !important;
}

[data-theme="dark"] .hint-item p,
.hint-item.dark-mode p {
  color: #9ca3af !important;
}

[data-theme="dark"] .hint-popup,
.hint-popup.dark-mode {
  background-color: #23262f !important;
  color: #e5e7eb !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #2a2d3a !important;
}

[data-theme="dark"] .hint-popup h3,
.hint-popup.dark-mode h3 {
  color: #60a5fa !important;
}

[data-theme="dark"] .hint-popup p,
.hint-popup.dark-mode p {
  color: #9ca3af !important;
}

/* Enhanced tooltip positioning and animations */
.hint-popup.showing {
  opacity: 1;
  transform: scale(1);
}

.hint-popup.hiding {
  opacity: 0;
  transform: scale(0.95);
}

/* Add arrow indicator for better visual connection */
.hint-popup::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  pointer-events: none;
}

/* Arrow pointing to cursor (default: pointing left) */
.hint-popup::before {
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: white;
  border-left: none;
}

/* Arrow pointing right when tooltip is on the left */
.hint-popup.arrow-right::before {
  left: auto;
  right: -12px;
  border-left-color: white;
  border-right: none;
}

/* Arrow pointing down when tooltip is above */
.hint-popup.arrow-down::before {
  left: 50%;
  top: auto;
  bottom: -12px;
  transform: translateX(-50%);
  border-top-color: white;
  border-bottom: none;
}

/* Arrow pointing up when tooltip is below */
.hint-popup.arrow-up::before {
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  border-bottom-color: white;
  border-top: none;
}

/* Dark mode arrow colors */
[data-theme="dark"] .hint-popup::before,
.hint-popup.dark-mode::before {
  border-right-color: #23262f;
}

[data-theme="dark"] .hint-popup.arrow-right::before,
.hint-popup.dark-mode.arrow-right::before {
  border-left-color: #23262f;
}

[data-theme="dark"] .hint-popup.arrow-down::before,
.hint-popup.dark-mode.arrow-down::before {
  border-top-color: #23262f;
}

[data-theme="dark"] .hint-popup.arrow-up::before,
.hint-popup.dark-mode.arrow-up::before {
  border-bottom-color: #23262f;
}

/* Mobile responsive styles for hint popup */
@media (max-width: 768px) {
  .hint-popup {
    max-width: 250px;
    min-width: 180px;
    padding: 10px 12px;
    font-size: 13px;
    /* Adjust arrow size for mobile */
  }

  .hint-popup::before {
    border-width: 4px;
  }

  .hint-popup.arrow-right::before {
    right: -8px;
  }

  .hint-popup.arrow-down::before {
    bottom: -8px;
  }

  .hint-popup.arrow-up::before {
    top: -8px;
  }

  .hint-popup h3 {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .hint-popup p {
    font-size: 12px;
    line-height: 1.4;
  }
}

/* Dark mode highlight animation */
[data-theme="dark"] .highlight-hint {
  animation: highlightDark 2s ease;
}

@keyframes highlightDark {
  0% {
    background-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

/* Assistance Reminder Shimmer Animation */
.assistance-shimmer {
  animation: shimmerPulse 1.5s ease-in-out infinite;
  position: relative;
}

.assistance-shimmer::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: shimmerSweep 2s linear infinite;
  pointer-events: none;
  z-index: -1;
  /* Garantir que não afeta o layout do elemento pai */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes shimmerPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.6);
  }
}

/* Animação específica para hint-button - NÃO usa scale para evitar deslocamento */
/* Usa apenas box-shadow expandido para criar o efeito visual */
@keyframes shimmerPulseHint {
  0%,
  100% {
    transform: translateY(-5%) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 123, 255, 0);
  }
  50% {
    transform: translateY(-5%) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2),
      0 0 25px 10px rgba(0, 123, 255, 0.7);
  }
}

@keyframes shimmerSweep {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Dark mode shimmer */
[data-theme="dark"] .assistance-shimmer,
.assistance-shimmer.dark-mode {
  animation: shimmerPulseDark 1.5s ease-in-out infinite;
}

[data-theme="dark"] .assistance-shimmer::before,
.assistance-shimmer.dark-mode::before {
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(96, 165, 250, 0.6) 50%,
    transparent 70%
  );
}

@keyframes shimmerPulseDark {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 4px 15px rgba(96, 165, 250, 0.8);
  }
}

/* Animação dark mode específica para hint-button - sem scale */
@keyframes shimmerPulseDarkHint {
  0%,
  100% {
    transform: translateY(-5%) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(96, 165, 250, 0);
  }
  50% {
    transform: translateY(-5%) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4),
      0 0 25px 10px rgba(96, 165, 250, 0.9);
  }
}

/* Shimmer para o botão do assistant */
#walaka-chatbot-toggle.assistance-shimmer {
  animation: shimmerPulse 1.5s ease-in-out infinite;
}

[data-theme="dark"] #walaka-chatbot-toggle.assistance-shimmer {
  animation: shimmerPulseDark 1.5s ease-in-out infinite;
}

/* Shimmer para o botão de hints - preserva o translateY original SEM usar scale */
#hint-button.assistance-shimmer {
  animation: shimmerPulseHint 1.5s ease-in-out infinite;
  /* Preservar o transform original - NÃO usar scale */
  transform: translateY(-5%) !important;
  transform-origin: center center !important;
  /* Forçar preservação da posição original */
  position: fixed !important;
  bottom: 87px !important;
  right: 32px !important;
  /* Evitar que qualquer outro CSS interfira */
  will-change: box-shadow;
  /* Garantir que não há overflow que cause deslocamento */
  overflow: visible;
  box-sizing: border-box;
}

/* Garantir que o pseudo-elemento do hint-button não cause problemas de layout */
#hint-button.assistance-shimmer::before {
  position: absolute !important;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[data-theme="dark"] #hint-button.assistance-shimmer {
  animation: shimmerPulseDarkHint 1.5s ease-in-out infinite;
  transform: translateY(-5%) !important;
  transform-origin: center center !important;
  position: fixed !important;
  bottom: 87px !important;
  right: 32px !important;
  will-change: box-shadow;
  overflow: visible;
  box-sizing: border-box;
}

[data-theme="dark"] #hint-button.assistance-shimmer::before {
  position: absolute !important;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}