/**
 * Japanese Word Tooltip Styles
 */

/* Make jp-word spans have default cursor */
.jp-word[data-en-translation] {
    position: relative;
}

/* Underline highlight when tooltip is active */
span.jp-word.jp-word-active {
    border-bottom: 2px solid rgba(0, 0, 0, 0.8) !important;
    padding-bottom: 1px !important;
}

/* Tooltip container */
.jp-word-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    max-width: 300px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    word-wrap: break-word;
}

/* Visible state */
.jp-word-tooltip.visible {
    opacity: 1;
}

/* Arrow pointing to the word (when tooltip is above) */
.jp-word-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.9);
}

/* Arrow pointing up (when tooltip is below) */
.jp-word-tooltip.below::after {
    bottom: auto;
    top: -6px;
    border-top: none;
    border-bottom: 6px solid rgba(0, 0, 0, 0.9);
}

/* Multiple translations layout */
.jp-word-tooltip .translation-item {
    padding: 2px 0;
}

.jp-word-tooltip .translation-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 4px;
    margin-bottom: 4px;
}

/* Light mode alternative (optional - uncomment if you prefer) */
/*
.jp-word-tooltip {
    background-color: rgba(255, 255, 255, 0.95);
    color: #333333;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.jp-word-tooltip::after {
    border-top-color: rgba(255, 255, 255, 0.95);
}

.jp-word-tooltip.below::after {
    border-bottom-color: rgba(255, 255, 255, 0.95);
}

.jp-word-tooltip .translation-item:not(:last-child) {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}
*/