/* Simplified ↔ Traditional Chinese Converter
   ------------------------------------------------------------------ */

.stc-input {
    font-size: 1.1rem;
    line-height: 1.7;
    resize: vertical;
}

/* --- Converted output --- */
.stc-output {
    font-size: 1.35rem;
    line-height: 2;
    word-break: break-word;
    user-select: text;
}

/* Changed characters: highlighted, original form on hover via the title attr. */
.stc-output .stc-diff {
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 14%, transparent);
    color: inherit;
    padding: 0 .08em;
    border-radius: 4px;
    cursor: help;
    text-decoration: underline dotted color-mix(in srgb, var(--bs-primary, #0d6efd) 55%, transparent);
    text-underline-offset: .22em;
}

.stc-output .stc-diff:hover {
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 24%, transparent);
}

/* Azure-converted characters: cloud badge after the highlight (::after stays out
   of textContent, so the Copy button never picks it up). */
.stc-output .stc-azure::after {
    content: "\f0c2";
    font-family: 'FontAwesome';
    font-size: .5em;
    vertical-align: super;
    margin-left: .12em;
    opacity: .6;
}

/* --- Dark mode --- */
[data-bs-theme="dark"] .stc-output .stc-diff {
    background: color-mix(in srgb, var(--bs-primary, #4d8bfd) 22%, transparent);
}

[data-bs-theme="dark"] .stc-output .stc-diff:hover {
    background: color-mix(in srgb, var(--bs-primary, #4d8bfd) 32%, transparent);
}