/* ============================================================
 * wp-opt / AI 摘要卡片 增强样式 v1.1
 * 适配：
 *  - 系统 prefers-color-scheme 暗黑模式自动切换
 *  - 响应式细节优化（<500px）
 *  - 硬编码色全量改为 CSS 变量
 *  - 标题/正文/按钮 增加微动效与更舒服的层次
 *  - 头像 5 套动效：呼吸 / 脉冲光环 / 错峰眨眼 / 思考点头 / hover 反馈
 *
 * 加载方式：Plugin.php addAISummaryTool() 通过 wp_footer 注入
 * 说明：因 min.js 把样式以 createElement('style') 注入 head，
 *       本文件使用更高优先级的选择器 + !important 覆盖。
 * ============================================================ */

/* ---------- 1. 默认（亮色）变量 ---------- */
#wpopt-ai-summary {
    /* 卡片外层背景 */
    --wpopt-main-bg: #f3f4f6;
    /* 内容卡片背景 */
    --wpopt-card-bg: #ffffff;
    /* 内容卡片边框 */
    --wpopt-card-border: rgba(15, 23, 42, 0.04);
    /* 主文字色 */
    --wpopt-text: #1f2937;
    /* 副文字色 */
    --wpopt-sub-text: #6b7280;
    /* 头像外环背景 */
    --wpopt-avatar-bg: #ffffff;
    /* 头像内胆填充（与外环形成层次）—— 莫兰迪蓝绿 */
    --wpopt-avatar-inner: #dfecea;
    /* 头像外环描边色（让头像从背景"拎"出来）—— 莫兰迪蓝绿 */
    --wpopt-ring-color: #7ba3a8;
    /* 头像眼睛色（白天=深色，不再被白底吞掉） */
    --wpopt-eye-color: #0f172a;
    /* 头像内阴影色（眼睛下方的那道）—— 莫兰迪蓝绿半透明 */
    --wpopt-avatar-shadow: rgba(123, 163, 168, 0.18);
    /* 状态指示点（橙色 = AI 正在工作的暖色调） */
    --wpopt-status-color: #f59e0b;
    /* 状态指示点描边（亮=白色让橙点跳出；暗=同外环色） */
    --wpopt-status-stroke: #ffffff;
    /* 接驳带（头像与下方摘要的视觉连线）—— 莫兰迪蓝绿半透明 */
    --wpopt-connector-color: rgba(123, 163, 168, 0.5);
    /* 主按钮（换个难题）背景 */
    --wpopt-btn-bg: #1f2937;
    --wpopt-btn-text: #ffffff;
    --wpopt-btn-bg-hover: #111827;
    /* 主题强调色（链接/小图标）—— 莫兰迪蓝绿 */
    --wpopt-accent: #5a9499;
    /* 阴影 */
    --wpopt-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04),
                         0 4px 16px rgba(15, 23, 42, 0.04);
    --wpopt-shadow-avatar: 0 6px 18px rgba(15, 23, 42, 0.08);

    margin-top: 24px;
    margin-bottom: 16px;
}

/* ---------- 2. 暗黑模式（系统级） ---------- */
@media (prefers-color-scheme: dark) {
    #wpopt-ai-summary {
        --wpopt-main-bg: #1f2937;
        --wpopt-card-bg: #111827;
        --wpopt-card-border: rgba(255, 255, 255, 0.06);
        --wpopt-text: #e5e7eb;
        --wpopt-sub-text: #9ca3af;
        /* 外环用中深莫兰迪蓝绿（底），内胆用中亮色从外环中"浮出来" */
        --wpopt-avatar-bg: #233835;
        --wpopt-avatar-inner: #4a6b66;
        --wpopt-ring-color: #8fbdb5;
        --wpopt-eye-color: #f9fafb;
        /* 内阴影加深一点，增强内胆"凹陷"立体感 */
        --wpopt-avatar-shadow: rgba(40, 70, 65, 0.45);
        --wpopt-status-color: #fb923c;
        --wpopt-status-stroke: #334155;
        --wpopt-connector-color: rgba(143, 189, 181, 0.55);
        --wpopt-btn-bg: #e5e7eb;
        --wpopt-btn-text: #111827;
        --wpopt-btn-bg-hover: #ffffff;
        --wpopt-accent: #8fbdb5;
        --wpopt-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3),
                             0 4px 16px rgba(0, 0, 0, 0.25);
        --wpopt-shadow-avatar: 0 6px 18px rgba(0, 0, 0, 0.4);
    }
}

/* 也支持 .dark / .wp-dark 这类手动主题类（部分主题会加 html.dark） */
html.dark #wpopt-ai-summary,
html[data-theme="dark"] #wpopt-ai-summary,
body.dark #wpopt-ai-summary {
    --wpopt-main-bg: #1f2937;
    --wpopt-card-bg: #111827;
    --wpopt-card-border: rgba(255, 255, 255, 0.06);
    --wpopt-text: #e5e7eb;
    --wpopt-sub-text: #9ca3af;
    --wpopt-avatar-bg: #233835;
    --wpopt-avatar-inner: #4a6b66;
    --wpopt-ring-color: #8fbdb5;
    --wpopt-eye-color: #e5e7eb;
    --wpopt-avatar-shadow: rgba(40, 70, 65, 0.45);
    --wpopt-status-color: #4ade80;
    --wpopt-status-stroke: #334155;
    --wpopt-connector-color: rgba(143, 189, 181, 0.55);
    --wpopt-btn-bg: #e5e7eb;
    --wpopt-btn-text: #111827;
    --wpopt-btn-bg-hover: #ffffff;
    --wpopt-accent: #8fbdb5;
    --wpopt-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3),
                         0 4px 16px rgba(0, 0, 0, 0.25);
    --wpopt-shadow-avatar: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* ---------- 3. 覆盖原内嵌样式的硬编码色（!important 兜底） ---------- */

/* 卡片外层 */
#wpopt-ai-summary .wpopt-ai-summary {
    padding: 24px 22px 14px !important;
    border-radius: 16px !important;
    background-color: var(--wpopt-main-bg) !important;
    box-shadow: var(--wpopt-shadow-card) !important;
    border: 1px solid var(--wpopt-card-border) !important;
    transition: background-color .25s ease, border-color .25s ease,
                box-shadow .25s ease !important;
}

/* 头像外环（80→64 缩小，视觉更轻） */
#wpopt-ai-summary .wpopt-bot-avatar {
    width: 64px !important;
    height: 64px !important;
    background: var(--wpopt-avatar-bg) !important;
    /* 1px 主题色描边，让头像在白/黑两种背景上都"拎"得出来 */
    box-shadow: var(--wpopt-shadow-avatar),
                0 0 0 1px var(--wpopt-ring-color) !important;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                background .25s ease, box-shadow .25s ease !important;
}
#wpopt-ai-summary .wpopt-bot-avatar:hover {
    transform: translate(-50%, -50%) scale(1.04) !important;
    box-shadow: var(--wpopt-shadow-avatar),
                0 0 0 1px var(--wpopt-ring-color),
                0 0 0 4px rgba(123, 163, 168, 0.12) !important;
}

/* 头像内胆（70→56） */
#wpopt-ai-summary .wpopt-bot-avatar .bot-avatar-main {
    width: 56px !important;
    height: 56px !important;
    background: var(--wpopt-avatar-inner) !important;
    box-shadow: inset 0 -1px 6px 2px var(--wpopt-avatar-shadow) !important;
    transition: background .25s ease, box-shadow .25s ease !important;
}

/* bot.svg 随内胆缩放：65x55 → 52x44 */
#wpopt-ai-summary .bot-img {
    width: 52px !important;
    height: auto !important;
    max-width: 100% !important;
    position: relative;
    top: 4px !important;
}

/* 眼睛：白色（跟深灰对话框形成对比，两种模式都清晰）+ 位置对齐原 svg 眼位 */
#wpopt-ai-summary .wpopt-bot-avatar .bot-eye {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    transition: transform .3s ease, height .15s ease !important;
}
#wpopt-ai-summary .wpopt-bot-avatar .bot-eye.eye-left {
    left: 20px !important;
}
#wpopt-ai-summary .wpopt-bot-avatar .bot-eye.eye-right {
    right: 20px !important;
}

/* 状态指示点：::before 在头像右上角的小圆点，提示 AI 状态（10→8） */
#wpopt-ai-summary .wpopt-bot-avatar::before {
    content: '' !important;
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--wpopt-status-color) !important;
    border: 1.5px solid var(--wpopt-status-stroke) !important;
    z-index: 20 !important;
    box-shadow: 0 0 0 0 var(--wpopt-status-color) !important;
    /* 在线呼吸：2.4s 循环 */
    animation: wpoptStatusPulse 2.4s ease-out infinite !important;
    pointer-events: none !important;
}
@keyframes wpoptStatusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);    }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);      }
}
@media (prefers-color-scheme: dark) {
    #wpopt-ai-summary .wpopt-bot-avatar::before {
        animation: wpoptStatusPulseDark 2.4s ease-out infinite !important;
    }
}
@keyframes wpoptStatusPulseDark {
    0%   { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.6);  }
    70%  { box-shadow: 0 0 0 6px rgba(251, 146, 60, 0);   }
    100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0);     }
}

/* 思考中：状态点保持橙色，跳动变快（不再变色） */
#wpopt-ai-summary .wpopt-bot-avatar.typing-active::before {
    background: var(--wpopt-status-color) !important;
    animation: wpoptStatusThinking .9s ease-in-out infinite !important;
}
@keyframes wpoptStatusThinking {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(245, 158, 11, 0.55); }
    50%      { transform: scale(1.2); box-shadow: 0 0 0 5px rgba(245, 158, 11, 0);    }
}

/* 标题 */
#wpopt-ai-summary .summary-header .summary-title {
    color: var(--wpopt-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    transition: color .25s ease !important;
}

/* 副标题/描述 */
#wpopt-ai-summary .summary-header .summary-desc {
    color: var(--wpopt-sub-text) !important;
    font-size: 12.5px !important;
    margin-top: 6px !important;
    line-height: 1.5 !important;
    transition: color .25s ease !important;
}

/* 右上角"知峰社"等小链接 */
#wpopt-ai-summary .summary-link-a {
    color: var(--wpopt-sub-text) !important;
    transition: color .2s ease !important;
}
#wpopt-ai-summary .summary-link-a:hover {
    color: var(--wpopt-accent) !important;
}

/* 内容卡片（白底） */
#wpopt-ai-summary .summary-content {
    background-color: var(--wpopt-card-bg) !important;
    color: var(--wpopt-text) !important;
    border: 1px solid var(--wpopt-card-border) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    line-height: 1.75 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 1px 0 var(--wpopt-card-border) !important;
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease !important;
}

/* "换个瞧瞧" 按钮（padding 4x10 + 字号 11.5 + 箭头 10，给文字上下留点空间） */
#wpopt-ai-summary .read-more {
    background: var(--wpopt-btn-bg) !important;
    color: var(--wpopt-btn-text) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color .2s ease, transform .2s ease,
                box-shadow .2s ease, color .2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
#wpopt-ai-summary .read-more img {
    width: auto !important;
    height: 10px !important;
}
#wpopt-ai-summary .read-more:hover {
    background: var(--wpopt-btn-bg-hover) !important;
    color: var(--wpopt-btn-text) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
#wpopt-ai-summary .read-more:active {
    transform: translateY(0) !important;
}

/* ---------- 4. 移动端响应式（< 500px） ---------- */
@media (max-width: 500px) {
    #wpopt-ai-summary {
        margin-top: 16px;
        margin-bottom: 12px;
    }
    #wpopt-ai-summary .wpopt-ai-summary {
        padding: 20px 16px 12px !important;
        border-radius: 14px !important;
    }
    #wpopt-ai-summary .wpopt-bot-avatar {
        width: 64px !important;
        height: 64px !important;
    }
    #wpopt-ai-summary .wpopt-bot-avatar .bot-avatar-main {
        width: 56px !important;
        height: 56px !important;
    }
    #wpopt-ai-summary .summary-content {
        padding: 12px 14px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
    #wpopt-ai-summary .summary-header .summary-title {
        font-size: 14.5px !important;
    }
    #wpopt-ai-summary .summary-header .summary-desc {
        font-size: 12px !important;
    }
}

/* ---------- 5. 进入动画（不影响 typing 动画） ---------- */
@keyframes wpoptCardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#wpopt-ai-summary .wpopt-ai-summary {
    animation: wpoptCardIn .45s cubic-bezier(.4, 0, .2, 1) both !important;
}

/* 减少动画偏好（无障碍） */
@media (prefers-reduced-motion: reduce) {
    #wpopt-ai-summary .wpopt-ai-summary,
    #wpopt-ai-summary .wpopt-bot-avatar,
    #wpopt-ai-summary .read-more,
    #wpopt-ai-summary .wpopt-bot-avatar::before,
    #wpopt-ai-summary .wpopt-bot-avatar::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
 * 6. 头像动效 v1.1（5 套动画，叠在原版眼动基础上）
 *    呼吸 / 脉冲光环 / 错峰眨眼 / 思考点头 / hover 反馈
 * ============================================================ */

/* 6.1 头像呼吸：空闲时整体轻微缩放，2.6s 循环 */
#wpopt-ai-summary .wpopt-bot-avatar {
    animation: wpoptBreath 2.6s ease-in-out infinite !important;
    transform-origin: center !important;
}
@keyframes wpoptBreath {
    0%, 100% { transform: translate(-50%, -50%) scale(1);     }
    50%      { transform: translate(-50%, -50%) scale(1.035); }
}

/* 6.2 外圈脉冲光环：用 ::after 伪元素做扩散环 */
#wpopt-ai-summary .wpopt-bot-avatar::after {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 50% !important;
    border: 1px solid var(--wpopt-ring-color) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    animation: wpoptRingPulse 2.6s ease-out infinite !important;
}
@keyframes wpoptRingPulse {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.35); opacity: 0;    }
    100% { transform: scale(1.35); opacity: 0;    }
}

/* 6.3 眼睛自然错峰眨眼：左右眼错开 2.6s，模拟真人 */
#wpopt-ai-summary .wpopt-bot-avatar:not(.typing-active) .bot-eye {
    animation: wpoptEyeBlink 5.2s infinite !important;
    transform-origin: center !important;
}
#wpopt-ai-summary .wpopt-bot-avatar:not(.typing-active) .bot-eye.eye-right {
    animation-delay: 2.6s !important;
}
@keyframes wpoptEyeBlink {
    0%, 90%, 100% { transform: scaleY(1)    !important; }
    93%, 96%      { transform: scaleY(0.08) !important; }
}

/* 6.4 思考点头：typing 时整圈头像左右小幅度摇摆（叠加原版眼睛眼动） */
#wpopt-ai-summary .wpopt-bot-avatar.typing-active {
    animation: wpoptThinkNod 1.2s ease-in-out infinite !important;
}
@keyframes wpoptThinkNod {
    0%, 100% { transform: translate(-50%, -50%) rotate(-4deg) scale(1.04); }
    50%      { transform: translate(-50%, -50%) rotate( 4deg) scale(1.04); }
}

/* 6.5 鼠标悬停：暂停呼吸、放大、眼珠上抬 */
#wpopt-ai-summary .wpopt-bot-avatar:hover {
    animation-play-state: paused !important;
    transform: translate(-50%, -50%) scale(1.08) !important;
}
#wpopt-ai-summary .wpopt-bot-avatar:hover .bot-eye {
    transform: translateY(-2px) !important;
    transition: transform .25s ease !important;
}

/* 6.6 暗黑模式：光环用主题色（已是浅蓝），并加发光避免融入深色背景 */
@media (prefers-color-scheme: dark) {
    #wpopt-ai-summary .wpopt-bot-avatar::after {
        box-shadow: 0 0 12px rgba(143, 189, 181, 0.4) !important;
    }
}