/* 划词翻译浮层样式（选中台词即弹，右键不接管）
   配色沿用全站主题：深蓝 #1f3a63 / #2c5588 + 琥珀金 #ffc93c 点缀 */

.wl-card {
    position: fixed;
    z-index: 9999;
    width: 350px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e3eaf3;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(31, 58, 99, 0.22);
    padding: 14px 16px 16px;
    font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #2c3e50;
    animation: wl-pop 0.14s ease-out;
    text-align: left;
}

@keyframes wl-pop {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 侧栏滚动条 */
.wl-card::-webkit-scrollbar {
    width: 8px;
}

.wl-card::-webkit-scrollbar-thumb {
    background: #d5dde8;
    border-radius: 4px;
}

/* ===== 词头 ===== */

.wl-head {
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f8;
}

.wl-title {
    display: inline-block;
    font-size: 19px;
    font-weight: 700;
    color: #1f3a63;
    letter-spacing: 0.2px;
    word-break: break-word;
}

/* 选中的是一整句或跨了好几行时，标题用小一号、不加粗得那么狠，
   免得一屏全是标题；行高放松，读起来像原文而不像标签 */
.wl-title-long {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
}

.wl-proto {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 20px;
    background: #eef4fb;
    color: #5b7ba6;
    font-size: 11.5px;
    vertical-align: 2px;
}

/* 音标 + 发音按钮 */
.wl-phon {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.wl-speak {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: #f4f8fd;
    border: 1px solid #e3eaf3;
    border-radius: 20px;
    font-family: inherit;
    font-size: 12.5px;
    color: #5b7ba6;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.wl-speak:hover {
    background: #e8f2fd;
    border-color: #2c5588;
    transform: translateY(-1px);
}

.wl-speak::before {
    content: "🔊";
    font-size: 11px;
}

.wl-speak-label {
    font-weight: 700;
    color: #2c5588;
}

.wl-speak-phone {
    letter-spacing: 0.3px;
}

/* ===== 释义 ===== */

.wl-defs {
    list-style: none;
    margin: 11px 0 0;
    padding: 0;
}

.wl-defs li {
    position: relative;
    padding: 3px 0 3px 15px;
    color: #34495e;
}

.wl-defs li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffc93c;
}

/* ===== 词形变化 ===== */

.wl-forms {
    margin-top: 9px;
    font-size: 12.5px;
    color: #7b8a9c;
}

.wl-section-label {
    display: inline-block;
    margin-right: 7px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #eef2f8;
    color: #5b7ba6;
    font-size: 11px;
}

/* ===== 例句 ===== */

.wl-example {
    margin-top: 8px;
    padding: 8px 11px;
    background: #f7fafd;
    border-left: 3px solid #d5dde8;
    border-radius: 0 8px 8px 0;
}

.wl-example-en {
    color: #34495e;
}

.wl-example-zh {
    margin-top: 2px;
    font-size: 13px;
    color: #8fa0b4;
}

/* ===== 本行译文 ===== */

.wl-sentence {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px dashed #e3eaf3;
}

.wl-sentence-label {
    margin-bottom: 3px;
}

.wl-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    background: #fff5da;
    color: #b7791f;
    font-size: 11px;
    font-weight: 700;
}

.wl-sentence-text {
    color: #4a5568;
}

/* ===== 加载 / 提示状态 ===== */

.wl-message {
    margin-top: 11px;
    color: #8fa0b4;
    font-size: 13.5px;
}

.wl-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wl-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid #dbe5f0;
    border-top-color: #2c5588;
    border-radius: 50%;
    animation: wl-spin 0.7s linear infinite;
}

@keyframes wl-spin {
    to {
        transform: rotate(360deg);
    }
}

.wl-empty,
.wl-error {
    padding: 8px 11px;
    border-radius: 8px;
    background: #f7fafd;
}

.wl-error {
    background: #fff5f5;
    color: #c05656;
}