v7.9.0 键盘触发逻辑修复 & 更多交互体验增强
   ============================================================ */

/* ---------- 1. 键盘触发逻辑修复 ---------- */
/* 
   问题：:focus-within 会导致点击任何可聚焦元素都触发上移
   修复：移除 :focus-within 的键盘位移触发，完全依赖 JS 检测真实键盘状态
   只有当 visualViewport 检测到键盘真正弹出时，才添加 .keyboard-open 类
*/

/* 覆盖 v7.8.9 中 :focus-within 的键盘位移样式，使其失效 */
@media (max-width: 768px) {

    .input-area:focus-within~.chat-container .welcome-screen,
    #chatPage:focus-within .welcome-screen {
        transform: translateY(0) !important;
    }

    .input-area:focus-within~.chat-container .mode-switch,
    #chatPage:focus-within .mode-switch {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    .input-area:focus-within~.chat-container .welcome-title,
    #chatPage:focus-within .welcome-title {
        transform: translateY(0) scale(1) !important;
        opacity: 1 !important;
    }

    .input-area:focus-within~.chat-container .welcome-logo,
    #chatPage:focus-within .welcome-logo {
        transform: translateY(0) scale(1) !important;
        opacity: 1 !important;
        box-shadow: var(--shadow-lg) !important;
    }

    .input-area:focus-within~.chat-container .welcome-subtitle,
    #chatPage:focus-within .welcome-subtitle {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    .input-area:focus-within~.chat-container .suggestion-cards,
    #chatPage:focus-within .suggestion-cards {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
}

/* 增强 .keyboard-open 类的样式 - 只有真实键盘弹出时才触发 */
@media (max-width: 768px) {
    .keyboard-open .welcome-screen {
        transform: translateY(calc(-1 * min(var(--keyboard-height, 0px) * 0.15, 80px)));
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .keyboard-open .welcome-logo {
        transform: translateY(-6px) scale(0.95);
        opacity: 0.85;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.4s ease,
            box-shadow 0.4s ease;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .keyboard-open .welcome-title {
        transform: translateY(-4px) scale(0.97);
        opacity: 0.9;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.4s ease;
    }

    .keyboard-open .mode-switch {
        transform: translateY(-5px);
        opacity: 0.9;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.4s ease;
    }

    .keyboard-open .welcome-subtitle {
        transform: translateY(-3px);
        opacity: 0.7;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.4s ease;
    }

    .keyboard-open .suggestion-cards {
        transform: translateY(-5px);
        opacity: 0.9;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.4s ease;
    }

    /* 键盘弹出时，输入区域也轻微上移 */
    .keyboard-open .input-area {
        transform: translateY(-2px);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ---------- 2. 输入工具按钮增强动画 ---------- */
/* 
   理由：深度思考、联网、图片上传等工具按钮是高频交互
   - 增加点击波纹效果
   - 激活状态增加发光效果
   - hover时图标轻微跳动
*/

.input-tool-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-tool-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(66, 110, 254, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.input-tool-btn:active::before {
    width: 150%;
    height: 150%;
    transition: width 0s, height 0s;
}

.input-tool-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.input-tool-btn:active {
    transform: translateY(0) scale(0.96);
    transition-duration: 0.1s;
}

/* 激活状态发光效果 */
.input-tool-btn.active {
    animation: toolBtnGlow 2s ease-in-out infinite;
}

@keyframes toolBtnGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(66, 110, 254, 0.3);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(66, 110, 254, 0);
    }
}

/* 工具按钮图标跳动效果 */
.input-tool-btn svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.input-tool-btn:hover svg {
    transform: scale(1.15) rotate(-5deg);
}

.input-tool-btn:active svg {
    transform: scale(0.9);
}

/* ---------- 3. 模式切换内容过渡动画 ---------- */
/* 
   理由：切换模式时，建议卡片和描述文字有平滑的过渡效果
*/

.suggestion-cards {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.suggestion-cards.switching {
    opacity: 0;
    transform: translateY(10px);
}

.mode-desc {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mode-desc.switching {
    opacity: 0;
    transform: translateY(5px);
}

/* ---------- 4. 建议卡片点击涟漪效果 ---------- */
/* 
   理由：点击建议卡片时有明显的视觉反馈
*/

.suggestion-card {
    position: relative;
    overflow: hidden;
}

.suggestion-card .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(77, 91, 255, 0.2);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ---------- 5. 发送按钮发送中动画 ---------- */
/* 
   理由：发送消息时发送按钮有加载状态，提供明确的反馈
*/

.send-btn.sending {
    pointer-events: none;
    animation: none;
}

.send-btn.sending svg {
    animation: sendSpin 1s linear infinite;
}

@keyframes sendSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ---------- 6. 侧边栏菜单图标动画 ---------- */
/* 
   理由：侧边栏菜单项hover时图标有动画效果
*/

.sidebar-footer-btn svg,
.sidebar-user svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar-footer-btn:hover svg,
.sidebar-user:hover svg {
    transform: scale(1.2) rotate(5deg);
}

.sidebar-footer-btn:active svg,
.sidebar-user:active svg {
    transform: scale(0.9);
}

/* ---------- 7. 新建聊天按钮增强 ---------- */
/* 
   理由：新建聊天是高频操作，增加更丰富的交互反馈
*/

.new-chat-btn {
    position: relative;
    overflow: hidden;
}

.new-chat-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(77, 91, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.new-chat-btn:hover::before {
    left: 100%;
}

.new-chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(77, 91, 255, 0.15);
    border-color: var(--accent-color);
}

.new-chat-btn:active {
    transform: translateY(0) scale(0.98);
}

.new-chat-btn svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.new-chat-btn:hover svg {
    transform: rotate(90deg) scale(1.1);
}

/* ---------- 8. 历史项滑动删除效果 ---------- */
/* 
   理由：移动端历史项支持左滑显示删除按钮
*/

.history-item {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.history-item.swiped {
    transform: translateX(-60px);
}

.history-item .delete-btn {
    position: absolute;
    right: -60px;
    top: 0;
    width: 60px;
    height: 100%;
    opacity: 1;
    background: #ef4444;
    color: white;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    transition: none;
}

/* 桌面端保持原有的hover显示效果 */
@media (min-width: 769px) {
    .history-item.swiped {
        transform: none;
    }

    .history-item .delete-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%) scale(0.8);
        width: 24px;
        height: 24px;
        opacity: 0;
        background-color: var(--bg-tertiary);
        color: var(--text-secondary);
        border-radius: 4px;
        transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    }

    .history-item:hover .delete-btn {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    .history-item .delete-btn:hover {
        background-color: #fee2e2;
        color: #ef4444;
        transform: translateY(-50%) scale(1.1);
    }
}

/* ---------- 9. 统计卡片数字跳动效果 ---------- */
/* 
   理由：统计数字变化时有跳动动画，更有活力
*/

.stat-card-value {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.3s ease;
}

.stat-card:hover .stat-card-value {
    transform: scale(1.08);
    color: var(--accent-color);
}

/* ---------- 10. 设置项开关动画增强 ---------- */
/* 
   理由：设置项的开关和选择有更丰富的动画
*/

.settings-item {
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.settings-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    background: rgba(77, 91, 255, 0.05);
    border-radius: 50%;
    transform: translate(50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.settings-item:hover::after {
    width: 200px;
    height: 200px;
}

.settings-value svg {
    transition: transform 0.3s ease;
}

.settings-item:hover .settings-value svg {
    transform: translateX(3px);
}

/* ---------- 11. 主题切换按钮增强 ---------- */
/* 
   理由：主题切换按钮有更精致的交互效果
*/


/* 修复：确保主题切换按钮层级高于hover扩散效果，不被遮挡点击 */
.theme-toggle {
    position: relative;
    z-index: 1;
}

.theme-option {
    position: relative;
    z-index: 1;
}

.theme-option {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-option:hover {
    transform: scale(1.05);
}

.theme-option.active {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(77, 91, 255, 0.2);
}

.theme-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.theme-option:hover::before {
    transform: translateX(100%);
}

/* ---------- 12. 头像边框呼吸效果 ---------- */
/* 
   理由：用户头像增加微妙的呼吸边框效果，更有生命力
*/

.profile-avatar::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), #8B5CF6);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: avatarBorderPulse 3s ease-in-out infinite;
}

.profile-avatar:hover::before {
    opacity: 1;
}

@keyframes avatarBorderPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.4;
    }
}

/* ---------- 13. 消息气泡悬停效果增强 ---------- */
/* 
   理由：消息气泡hover时有微妙的效果，增加质感
*/

.message-bubble {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.message:hover .message-bubble {
    transform: translateY(-1px);
}

.message.user:hover .message-bubble {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.message.assistant:hover .message-bubble {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ---------- 14. 输入框光标动画 ---------- */
/* 
   理由：输入框聚焦时光标有呼吸效果
*/

textarea {
    caret-color: var(--accent-color);
}

/* ---------- 15. 加载状态骨架屏动画 ---------- */
/* 
   理由：加载状态时有骨架屏闪烁效果，比单纯的转圈更友好
*/

.skeleton {
    background: linear-gradient(90deg,
            var(--bg-secondary) 25%,
            var(--bg-tertiary) 50%,
            var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}

@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ---------- 16. 按钮成功状态动画 ---------- */
/* 
   理由：操作成功时按钮有成功反馈动画
*/

.btn-success {
    background: #22c55e !important;
    animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes successPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* ---------- 17. 通知徽章弹跳动画 ---------- */
/* 
   理由：如果有未读消息或通知，徽章有弹跳效果
*/

.notification-badge {
    animation: badgeBounce 1s ease-in-out infinite;
}

@keyframes badgeBounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* ---------- 18. 页面切换过渡动画 ---------- */
/* 
   理由：页面之间切换有平滑的过渡效果
*/

.page-transition {
    animation: pageFadeIn 0.3s ease;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- 19. 输入区域工具按钮组错落进场 ---------- */
/* 
   理由：输入工具按钮依次进场，形成层次感
*/

.input-tools .input-tool-btn:nth-child(1) {
    animation: toolBtnIn 0.3s ease 0.1s both;
}

.input-tools .input-tool-btn:nth-child(2) {
    animation: toolBtnIn 0.3s ease 0.15s both;
}

.input-tools .input-tool-btn:nth-child(3) {
    animation: toolBtnIn 0.3s ease 0.2s both;
}

.input-tools .input-tool-btn:nth-child(4) {
    animation: toolBtnIn 0.3s ease 0.25s both;
}

@keyframes toolBtnIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- 20. 减少动画偏好适配 ---------- */
/* 
   理由：尊重用户的无障碍偏好
*/

@media (prefers-reduced-motion: reduce) {

    .input-tool-btn:hover svg,
    .new-chat-btn:hover svg,
    .sidebar-footer-btn:hover svg,
    .stat-card:hover .stat-card-value,
    .theme-option:hover,
    .theme-option.active,
    .profile-avatar::before {
        animation: none !important;
        transform: none !important;
    }

    .input-tool-btn.active,
    .send-btn:not(:disabled),
    .notification-badge {
        animation: none !important;
    }
}

/* ============================================================
   v7.9.0 增强结束
   ============================================================ */
/* ============================================================