/**
 * 暗号卡片 / 链接复制条 / 跳转按钮 —— 参考 Manus Copy & Button Pro V3.1 移植。
 * 强调色改用主题自己的 --wpnav-theme-color 变量，跟站内配色保持统一，
 * 不再是原插件写死的紫色。
 */
:root {
    --wpnav-copy-glass-bg: rgba(255, 255, 255, 0.05);
    --wpnav-copy-glass-border: rgba(255, 255, 255, 0.1);
    --wpnav-copy-success: #28a745;
}

/* 暗号卡片 */
.wpnav-copy-card {
    width: 100%; max-width: 340px; padding: 28px;
    background: var(--wpnav-copy-glass-bg);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--wpnav-copy-glass-border);
    border-radius: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    text-align: center; margin: 25px 0;
    transition: transform 0.3s ease;
}
.wpnav-copy-card:hover { transform: translateY(-5px); }
.wpnav-copy-card-title { color: rgba(128,128,128,0.7); font-size: 12px; margin-bottom: 18px; text-align: left; letter-spacing: 2px; }
.wpnav-copy-card-code {
    width: 100%; padding: 20px 0; font-size: 36px; font-weight: 800;
    color: var(--wpnav-theme-color, #f1404b);
    background: rgba(120, 120, 120, 0.08);
    border: 1.5px dashed rgba(120, 120, 120, 0.3); border-radius: 16px;
    margin-bottom: 24px; letter-spacing: 3px; word-break: break-all;
}
.wpnav-copy-btn {
    width: 100%; height: 52px; background: var(--wpnav-theme-color, #f1404b); color: #fff; border: none;
    font-size: 16px; font-weight: 600; cursor: pointer; border-radius: 14px;
    transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.wpnav-copy-btn.is-success { background: var(--wpnav-copy-success) !important; }

/* 链接复制条 */
.wpnav-copy-link-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--wpnav-copy-glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--wpnav-copy-glass-border); border-radius: 12px;
    padding: 10px 16px; margin: 15px 0; position: relative; overflow: hidden;
}
.wpnav-copy-link-text { font-size: 14px; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; margin-right: 12px; }
.wpnav-copy-link-btn {
    background: var(--wpnav-theme-color, #f1404b); color: #fff; border: none;
    padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
    cursor: pointer; flex-shrink: 0;
    /* 默认淡出、不占额外空间地藏起来，鼠标移到整条上才浮现。
       用 opacity + visibility 而不是 display:none，是为了保留过渡动画，
       而且按钮宽度始终占位——否则显示的瞬间链接文字会被挤得跳一下。 */
    opacity: 0;
    visibility: hidden;
    transform: translateX(4px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background .3s ease;
}
.wpnav-copy-link-bar:hover .wpnav-copy-link-btn,
/* 键盘 Tab 聚焦到按钮时也要显示，否则只用键盘的人永远够不到它 */
.wpnav-copy-link-btn:focus-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
/* 复制成功后强制保持可见：点完鼠标经常会马上移开，
   如果这时按钮跟着消失，"已复制"的反馈就白给了。 */
.wpnav-copy-link-btn.is-success {
    background: var(--wpnav-copy-success) !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
/* 触屏设备没有 hover，按钮会永远藏着点不到——这类设备直接常驻显示。 */
@media (hover: none) {
    .wpnav-copy-link-btn {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* 跳转按钮 —— 视觉上跟详情页"访问网站"按钮（App.css 里的 .animated-button）
   保持完全一致：同样的高度、圆角、描边、字号、悬停发光和圆点扩散动画，
   只是类名不同（这个是编辑器插入正文用的 <a>）。 */
.wpnav-jump-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    box-sizing: border-box;
    border: none;
    font-size: 15px;
    background-color: var(--wpnav-surface, rgba(255, 255, 255, 0.05));
    border-radius: 100px;
    font-weight: 600;
    color: var(--wpnav-text, #ebebeb);
    box-shadow: 0 0 0 2px var(--wpnav-border, #ffffff20);
    cursor: pointer;
    overflow: hidden;
    text-decoration: none !important;
    vertical-align: middle;
    /* 跟"访问网站"唯一的差别：这个按钮是插在正文里的，同一行可能并排好几个。
       悬停时的发光会往外扩 5px，按钮之间没有间距的话会互相压住，所以留了外边距。 */
    margin: 6px 10px 6px 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}
.wpnav-jump-btn span:last-child {
    /* 扩散层铺满整个按钮，用 clip-path 从中间"擦开"。
       .animated-button 那边是放一个 150px 的小圆再放大，圆要盖满矩形，
       直径必须大于对角线——那边的按钮文字短（"下载"/"访问网站"）所以够用，
       而正文里的跳转按钮文字往往长得多，同样写 150px 就会盖不住两端、
       四周露出底色。改用 clip-path 后不管按钮多宽都一定擦满，
       扩散速度也只由 transition 决定，跟按钮宽度无关。 */
    position: absolute;
    inset: 0;
    background-color: var(--wpnav-accent-a, #2196F3);
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 0.8s cubic-bezier(0.23, 1, 0.320, 1);
}
.wpnav-jump-btn span:first-child {
    position: relative;
    z-index: 1;
}
.wpnav-jump-btn:hover {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--wpnav-accent-a, #2196F3) 40%, transparent);
    color: #fff !important;
}
.wpnav-jump-btn:active { scale: 0.95; }
.wpnav-jump-btn:hover span:last-child {
    clip-path: circle(120% at 50% 50%);
}

/* 手机端：跳转按钮整行铺满，比一排小按钮好点得多 */
@media (max-width: 560px) {
    .wpnav-jump-btn {
        display: flex;
        width: 100%;
        margin: 8px 0;
    }
}
}