/**
 * 标题信息行「安全检测通过」盾牌：动画、悬停提示、暗色模式（inc/template-av-shield.php）
 * 颜色与隐藏状态在 PHP 内联样式里，这里覆盖时要带 !important。
 * 特效不跟随系统「减少动画」（根规则第 9 条），不要加 prefers-reduced-motion。
 */

/* 页面打开：盾牌弹出 + 扫一道光，只播一次（::after）。
   悬停重扫用另一个伪元素（::before）：若改 ::after 的 animation，移开鼠标时会把开场动画再播一遍 */
.xy-avs-pill::before,
.xy-avs-pill::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    transform: translateX(-160%) skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    pointer-events: none;
}

.xy-avs-pill::after {
    animation: xy-avs-sheen 1.1s cubic-bezier(.4, 0, .2, 1) .5s 1 both;
}

.xy-avs:hover .xy-avs-pill::before,
.xy-avs:focus .xy-avs-pill::before {
    animation: xy-avs-sheen .9s cubic-bezier(.4, 0, .2, 1) 0s 1 both;
}

.xy-avs-icon {
    animation: xy-avs-pop .55s cubic-bezier(.3, 1.6, .5, 1) .2s 1 both;
}

@keyframes xy-avs-sheen {
    from { transform: translateX(-160%) skewX(-20deg); }
    to { transform: translateX(380%) skewX(-20deg); }
}

@keyframes xy-avs-pop {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 悬停提示：左对齐胶囊，避免信息行换行后胶囊在行首时提示伸出屏幕左边 */
.xy-avs-tip {
    top: calc(100% + 9px);
    left: -6px;
    width: 250px;
    max-width: calc(100vw - 32px);
    transform: translateY(4px);
    transition: opacity .16s, transform .16s, visibility .16s;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    color: #4b5563;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    cursor: default;
}

.xy-avs-tip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 22px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: inherit;
    border-left: inherit;
    border-top: inherit;
}

.xy-avs:hover .xy-avs-tip,
.xy-avs:focus .xy-avs-tip,
.xy-avs:focus-within .xy-avs-tip {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0);
}

.xy-avs-tip-hd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #15803d;
    font-size: 13px;
    font-weight: 600;
}

.xy-avs-tip-li {
    display: flex;
    gap: 6px;
    color: #1f2937;
}

.xy-avs-tip-p {
    display: block;
    margin-top: 6px;
}

/* 暗色模式：.dark-open 挂在 <body> 上 */
.dark-open .xy-avs-pill {
    background: rgba(34, 197, 94, .12) !important;
    border-color: rgba(74, 222, 128, .32) !important;
    color: #4ade80 !important;
}

.dark-open .xy-avs-pill::before,
.dark-open .xy-avs-pill::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
}

.dark-open .xy-avs-tip {
    background: #273044;
    border-color: #344057;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    color: #c3cad5;
}

.dark-open .xy-avs-tip-hd {
    color: #4ade80;
}

.dark-open .xy-avs-tip-li {
    color: #e5e7eb;
}