/* ============================================================
 * 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-shadow: rgba(126, 134, 153, 0.15);
    /* 主按钮（换个难题）背景 */
    --wpopt-btn-bg: #1f2937;
    --wpopt-btn-text: #ffffff;
    --wpopt-btn-bg-hover: #111827;
    /* 主题强调色（链接/小图标） */
    --wpopt-accent: #2563eb;
    /* 阴影 */
    --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: #1f2937;
        --wpopt-avatar-shadow: rgba(0, 0, 0, 0.5);
        --wpopt-btn-bg: #e5e7eb;
        --wpopt-btn-text: #111827;
        --wpopt-btn-bg-hover: #ffffff;
        --wpopt-accent: #60a5fa;
        --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: #1f2937;
    --wpopt-avatar-shadow: rgba(0, 0, 0, 0.5);
    --wpopt-btn-bg: #e5e7eb;
    --wpopt-btn-text: #111827;
    --wpopt-btn-bg-hover: #ffffff;
    --wpopt-accent: #60a5fa;
    --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;
}

/* 头像外环 */
#wpopt-ai-summary .wpopt-bot-avatar {
    background: var(--wpopt-avatar-bg) !important;
    box-shadow: var(--wpopt-shadow-avatar) !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;
}

/* 头像内圈阴影色 */
#wpopt-ai-summary .wpopt-bot-avatar .bot-avatar-main {
    box-shadow: inset 0 -1px 6px 2px var(--wpopt-avatar-shadow) !important;
    transition: box-shadow .25s ease !important;
}

/* 标题 */
#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;
}

/* "换个难题" 按钮 */
#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: 6px 14px !important;
    font-size: 12.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !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: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 {
        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: 2px solid var(--wpopt-accent) !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(96, 165, 250, 0.4) !important;
    }
}