/**
 * 文件: front.css
 * 插件: WLB AI Opt - WordPress AI 智能摘要插件
 * 用途: 前端页面中 AI 摘要组件的样式定义
 *
 * 整体结构:
 *   - 机器人头像（居中悬浮于容器顶部，带眨眼和打字动画）
 *   - 标题栏（显示 AI 摘要标题与来源标识）
 *   - 摘要正文（白色内容卡片，支持打字光标动画）
 *   - 底部栏（免责声明与"了解更多"按钮）
 *
 * 设计风格: 圆角卡片 + 柔和阴影 + 品牌紫色点缀 (#667eea)
 */

/* ========== 根容器 ========== */
/* AI 摘要最外层挂载点，控制与上下文的间距 */
#wlb-ai-opt-ai-summary {
    margin-top: 45px;
    margin-bottom: 20px;
}

/* ========== 主容器 ========== */
/* 灰色背景的圆角卡片，所有子元素的定位基准 */
.wlb-ai-opt-summary-wrap {
    padding: 0 20px 12px;
    border-radius: 12px;
    background-color: #f7f7f9;
    position: relative;
    margin-bottom: 8px;
}

/* ========== 机器人头像（居中悬浮在顶部） ========== */
/* 通过 absolute + translate 实现头像垂直居中于卡片顶部边缘的视觉效果 */
.wlb-ai-opt-bot-avatar {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* 头像主体：显示机器人 logo，内阴影增加立体感 */
.wlb-ai-opt-bot-avatar .bot-avatar-main {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    box-shadow: inset 0 -1px 6px 2px rgba(126, 134, 153, 0.15);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* ========== 眼睛（覆盖在 logo 上） ========== */
/* 两个白色圆形小眼睛，通过 transition 实现平滑的眨眼和打字动画 */
.wlb-ai-opt-bot-avatar .bot-eye {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    z-index: 11;
    top: 26px;
    transition: height 0.15s ease, transform 0.3s ease;
}

/* 左眼定位 */
.wlb-ai-opt-bot-avatar .bot-eye.eye-left {
    left: 14px;
}

/* 右眼定位 */
.wlb-ai-opt-bot-avatar .bot-eye.eye-right {
    right: 14px;
}

/* 眨眼效果：将眼睛高度压缩为 1px，模拟闭眼 */
.wlb-ai-opt-bot-avatar .bot-eye.eye-blink {
    height: 1px;
}

/* 打字时眼睛左右移动：激活后眼睛跟随打字节奏左右摆动，并略微放大 */
.wlb-ai-opt-bot-avatar.typing-active .bot-eye {
    animation: wlb-ai-opt-eye-move 1.2s infinite ease-in-out;
    transform: scale(1.1);
}

/* 眼睛左右摆动的关键帧动画 */
@keyframes wlb-ai-opt-eye-move {
    0%, 100% { transform: translateX(0) scale(1.1); }
    25% { transform: translateX(-2px) scale(1.1); }
    75% { transform: translateX(2px) scale(1.1); }
}

/* ========== 标题栏 ========== */
/* 标题栏采用 flex 布局，左侧标题与右侧来源标识左右对齐 */
.wlb-ai-opt-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
}

/* AI 摘要标题文字样式 */
.wlb-ai-opt-summary-header .ai-title {
    font-weight: 600;
    font-size: 14px;
    color: #262626;
}

/* 来源标识（badge）：灰色小字，悬停时变为品牌紫色，提供可点击暗示 */
.wlb-ai-opt-summary-header .ai-badge {
    font-size: 10px;
    color: #828a9d;
    text-decoration: none;
    transition: color 0.2s;
}

.wlb-ai-opt-summary-header .ai-badge:hover {
    color: #667eea;
}

/* ========== 摘要正文 ========== */
/* 白色内容卡片，使用 pre-wrap 保留 AI 生成文本中的换行格式 */
.wlb-ai-opt-summary-body {
    padding: 10px;
    background-color: #fff;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.8;
    color: #262626;
    border-radius: 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

/* 打字光标：品牌紫色竖线，通过闪烁动画模拟终端打字效果 */
.wlb-ai-opt-summary-body .typing-cursor {
    display: inline-block;
    width: 0.5em;
    margin-left: 2px;
    background: #667eea;
    vertical-align: text-bottom;
    animation: wlb-ai-opt-cursor-blink 1s infinite;
}

/* ========== 底部栏 ========== */
/* 底部栏同样使用 flex 布局，左侧免责声明与右侧按钮左右分布 */
.wlb-ai-opt-summary-bottom {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 免责声明文字：灰色小字，提示内容由 AI 生成 */
.wlb-ai-opt-summary-bottom .ai-disclaimer {
    font-size: 12px;
    color: #828a9d;
}

/* "了解更多"按钮：深色圆角胶囊形按钮，悬停时降低透明度以提供反馈 */
.wlb-ai-opt-summary-bottom .more-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    padding: 2px 10px;
    border-radius: 15px;
    background: #272c38;
    transition: opacity 0.2s;
}

.wlb-ai-opt-summary-bottom .more-btn:hover {
    color: #fff;
    opacity: 0.85;
}

/* 打字光标闪烁的关键帧动画：在透明与不透明之间切换 */
@keyframes wlb-ai-opt-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ========== 深色主题 (.wlb-dark) ========== */
/* 当页面祖先元素包含 .wlb-dark 类时，切换为深色主题配色 */
/* 配色参考 WLBWeibo 主题夜间模式 */

/* 主容器：深色背景（参考 --wlb-bg） */
.wlb-dark .wlb-ai-opt-summary-wrap {
    background-color: #1d1d1d;
}

/* 机器人头像：保持白色背景（PNG透明图需要白色底衬） */
.wlb-dark .wlb-ai-opt-bot-avatar {
    background: #fff;
}

/* 标题文字：浅色（参考 --wlb-text-primary） */
.wlb-dark .wlb-ai-opt-summary-header .ai-title {
    color: #e8e8e8;
}

/* badge：弱化灰，悬停时品牌色（参考 --wlb-text-muted 和 --wlb-primary） */
.wlb-dark .wlb-ai-opt-summary-header .ai-badge {
    color: #777;
}

.wlb-dark .wlb-ai-opt-summary-header .ai-badge:hover {
    color: #ff6b00;
}

/* 摘要正文：深色卡片 + 浅色文字（参考 --wlb-bg-white 和 --wlb-text-primary） */
.wlb-dark .wlb-ai-opt-summary-body {
    background-color: #262626;
    color: #e8e8e8;
}

/* 打字光标：品牌色（参考 --wlb-primary） */
.wlb-dark .wlb-ai-opt-summary-body .typing-cursor {
    background: #ff6b00;
}

/* 免责声明：弱化灰（参考 --wlb-text-muted） */
.wlb-dark .wlb-ai-opt-summary-bottom .ai-disclaimer {
    color: #777;
}

/* "了解更多"按钮：浅深色底 + 浅色文字（参考 --wlb-border-light） */
.wlb-dark .wlb-ai-opt-summary-bottom .more-btn {
    background: #333;
    color: #e8e8e8;
}

.wlb-dark .wlb-ai-opt-summary-bottom .more-btn:hover {
    color: #e8e8e8;
    opacity: 0.9;
}