#right-icons-container {
position: fixed;
  top: 5%;
  right: 5px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 1000;
  border-radius: 10px;
  padding: 10px;
}

#left-icons-container {
  position: fixed;
  top: 5%;
  left: 5px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 1000;
  border-radius: 10px;
  padding: 10px;
}


#left-icons-container img,
#right-icons-container img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

#left-icons-container i,
#right-icons-container i {
  font-size: 20px;
  cursor: pointer;
}


#left-icons-container img:hover,
#right-icons-container img:hover,
#left-icons-container i:hover,
#right-icons-container i:hover {
  transform: scale(1.2);
}

/* Tooltip styles for icons */
#left-icons-container img[title],
#right-icons-container img[title],
#left-icons-container i[title],
#right-icons-container i[title],
#left-icons-container a[title],
#right-icons-container a[title] {
  position: relative;
}

#left-icons-container img[title]:hover::after,
#right-icons-container img[title]:hover::after,
#left-icons-container i[title]:hover::after,
#right-icons-container i[title]:hover::after,
#left-icons-container a[title]:hover::after,
#right-icons-container a[title]:hover::after {
  content: attr(title);
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  color: #c59655;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10000;
  border: 1px solid #c59655;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* Left side tooltips appear to the right */
#left-icons-container img[title]:hover::after,
#left-icons-container i[title]:hover::after,
#left-icons-container a[title]:hover::after {
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}

/* Right side tooltips appear to the left */
#right-icons-container img[title]:hover::after,
#right-icons-container i[title]:hover::after,
#right-icons-container a[title]:hover::after {
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}

/* Vision toggle state styles */
#vision {
  transition: opacity 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

#vision:hover {
  transform: scale(1.2);
}

/* When AI responses are hidden */
#vision[style*="opacity: 0.5"] {
  filter: grayscale(100%);
}

/* Visual indicator for hidden AI responses */
.ai-responses-hidden .ai-response-container,
.ai-responses-hidden .ai-text,
.ai-responses-hidden [class*="ai"],
.ai-responses-hidden [class*="chatgpt"] {
  display: none !important;
  opacity: 0 !important;
}