.dns-answer {
    position: relative;
    width: fit-content;
    max-width: 100%;
    padding: 1px 5px;
    margin-left: -5px;
    border-radius: 4px;
    cursor: copy;
    transition:
        background 120ms ease-out,
        color 120ms ease-out;
}

.dns-answer:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.dns-answer::after {
    content: "Copied";
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    padding: 2px 6px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--success);
    font-size: 0.72rem;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 120ms ease-out;
}

.dns-answer.copied::after {
    opacity: 1;
}

.dns-error {
    color: #f85149;
}