/* Контейнер для описания + хинта */
.hint-container {
  position: relative;
  cursor: pointer;
  overflow: visible;
  text-transform: uppercase;
  font-size: 9px;
  font-family: Verdana;
}

/* Сам хинт */
.hint {
  position: absolute;
  top: 5em;
  left: 0;
  transform: translateX(-10px);
  background: #3f56ae;
  color: snow;
  font-size: 12px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  z-index: 9200;
  max-height: 500px;      /* ограничиваем высоту */
  overflow-y: auto;       /* скроллим содержимое */
  width: 350px;           /* примерная ширина */
  pointer-events: auto;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  white-space: pre-wrap;
  word-wrap: break-word;
  transition: opacity 0.3s ease;
}

/* Настраиваем цвет выделенного текста */
.hint::selection,
.hint *::selection {
  background: #f0f0f0;
  color: #000;
}
.hint::-moz-selection,
.hint *::-moz-selection {
  background: #f0f0f0;
  color: #000;
}

/* Блок кнопок внутри хинта */
.hint-btns-container {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #3f56ae;
  padding: 5px; 
  display: flex;
  gap: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.hint-btn-copy,
.hint-btn-similar,
.hint-btn-other {
/*  background-color: #52a15f; */
background-color: #609512;
  color: snow;
  border: 1px solid #ccc;
  padding: 3px;
  margin-left: 3px;
  margin-top: 5px;
  cursor: pointer;
  border-radius: 3px;
  height: 40px;
  width: 100px;
  transition: transform 0.2s, background-color 0.2s;
}

.hint-btn-copy:active,
.hint-btn-similar:active,
.hint-btn-other:active {
  transform: scale(0.95);
  background-color: #609512;
}

/* Вспомогательная анимация */
.flash {
  animation: flash 0.2s;
}

@keyframes flash {
  0% {
    background-color: #ffffff;
  }
  50% {
    background-color: #52a15f;
  }
  100% {
    background-color: #3e8148;
  }
}

/* Общий блок с текстом внутри хинта */
.hint-text {
  margin-top: 5px;
  white-space: pre-wrap;
  padding: 20px;
}

/* Ховер-эффект для кнопок */
.hint-btn-copy:hover,
.hint-btn-similar:hover,
.hint-btn-other:hover {
  filter: brightness(0.9);
}





#global-hint-container {
  position: absolute;
  background: #3f56ae !important;
  color: snow;
  font-size: 12px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  z-index: 4000;
  max-height: 500px;
  overflow-y: auto;
  width: 350px;
  pointer-events: auto;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  white-space: pre-wrap;
  word-wrap: break-word;
  transition: opacity 0.3s ease;
}



#global-hint-container .hint-btns-container {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #3f56ae;
  padding: 5px;
  display: flex;
  gap: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}