/* PhraseFlip — styling for translated sentences */

.pf-flipped {
  /* Subtle warm underline so the reader notices the flip */
  text-decoration: underline;
  text-decoration-color: rgba(255, 160, 40, 0.6);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: help;
  position: relative;
}

@media (hover: hover) {
  .pf-flipped:hover {
    background-color: rgba(255, 160, 40, 0.1);
  }
}

/* Tooltip showing the original English on hover */
#pf-tooltip {
  position: fixed;
  background: rgba(20, 20, 20, 0.95);
  color: #f0f0f0;
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 10000;
  pointer-events: none;
  max-width: 320px;
  width: max-content;
  word-break: break-word;
  text-align: left;
  
  /* Initial state */
  opacity: 0;
  transition: opacity 0.15s ease;
  
  /* Small arrow - we'll handle this with a pseudo-element on the tooltip itself */
}

#pf-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(20, 20, 20, 0.95);
}

#pf-tooltip.visible {
  opacity: 1;
}