v7.8.9 移动端键盘平滑过渡 & 全局微交互增强
   ============================================================ */

/* ---------- 1. 键盘唤起平滑过渡（核心功能） ---------- */

/* 
   实现思路：
   - 纯CSS方案：使用 :focus-within 检测输入框聚焦状态
   - 使用 transform: translateY() 实现GPU加速的平滑位移
   - 避免使用 top/margin 等触发重排的属性，保证60fps流畅度
   - 仅在移动端（小屏幕）生效，桌面端不受影响
*/

/* 欢迎页容器 - 键盘唤起时整体上移 */
@media (max-width: 768px) {
    .welcome-screen {
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    /* 当输入区域获得焦点时，欢迎页元素平滑上移避让键盘 */
    .input-area:focus-within~.chat-container .welcome-screen,
    #chatPage:focus-within .welcome-screen {
        transform: translateY(-60px);
    }

    /* Mode Switch 单独控制 - 更精细的位移 */
    .input-area:focus-within~.chat-container .mode-switch,
    #chatPage:focus-within .mode-switch {
        transform: translateY(-3px);
        opacity: 0.85;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.35s ease;
    }

    /* 欢迎标题 - 轻微缩小并上移 */
    .input-area:focus-within~.chat-container .welcome-title,
    #chatPage:focus-within .welcome-title {
        transform: translateY(-4px) scale(0.97);
        opacity: 0.9;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.35s ease;
    }

    /* 欢迎Logo - 轻微缩小 */
    .input-area:focus-within~.chat-container .welcome-logo,
    #chatPage:focus-within .welcome-logo {
        transform: translateY(-6px) scale(0.95);
        opacity: 0.85;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.35s ease,
            box-shadow 0.35s ease;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    /* 欢迎副标题 - 淡出更多 */
    .input-area:focus-within~.chat-container .welcome-subtitle,
    #chatPage:focus-within .welcome-subtitle {
        transform: translateY(-3px);
        opacity: 0.7;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.35s ease;
    }

    /* 建议卡片 - 轻微上移 */
    .input-area:focus-within~.chat-container .suggestion-cards,
    #chatPage:focus-within .suggestion-cards {
        transform: translateY(-5px);
        opacity: 0.9;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.35s ease;
    }
}

/* ---------- 2. 欢迎页进场动画（Staggered Animation） ---------- */

/* 
   理由：欢迎页是用户第一印象，错落有致的进场动画能显著提升精致感
   元素依次从下方淡入，形成流畅的视觉引导
*/

.welcome-logo {
    animation: welcomeLogoIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.welcome-title {
    animation: welcomeItemIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

.welcome-subtitle {
    animation: welcomeItemIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.mode-switch {
    animation: welcomeItemIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

.mode-desc {
    animation: welcomeItemIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

.suggestion-cards {
    animation: welcomeItemIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

.suggestion-card:nth-child(1) {
    animation: cardStaggerIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.55s both;
}

.suggestion-card:nth-child(2) {
    animation: cardStaggerIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.65s both;
}

.suggestion-card:nth-child(3) {
    animation: cardStaggerIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.75s both;
}

.suggestion-card:nth-child(4) {
    animation: cardStaggerIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.85s both;
}

@keyframes welcomeLogoIn {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }

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

@keyframes welcomeItemIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes cardStaggerIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

/* ---------- 3. 模式切换增强动画 ---------- */

/* 
   理由：模式切换是核心交互，增强反馈能提升操作愉悦感
   - 滑块增加弹性效果
   - 图标增加缩放动画
   - 文字颜色过渡更柔和
*/

.mode-slider {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease;
}

.mode-btn {
    position: relative;
    overflow: hidden;
}

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

.mode-btn:active::before {
    width: 100%;
    height: 100%;
}

.mode-btn .mode-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.2s ease,
        color 0.2s ease;
}

.mode-btn.active .mode-icon {
    transform: scale(1.15);
}

/* 模式描述淡入淡出 */
.mode-desc {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

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

/* ---------- 4. 建议卡片增强交互 ---------- */

/* 
   理由：建议卡片是用户常用入口，增强hover/active反馈
   - 悬浮时轻微上浮+阴影加深
   - 点击时按压效果
   - 增加微妙的光泽扫过效果
*/

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

.suggestion-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transition: left 0.6s ease;
}

.suggestion-card:hover::after {
    left: 100%;
}

.suggestion-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--border-color);
}

.suggestion-card:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition-duration: 0.1s;
}

/* ---------- 5. 按钮通用微交互 ---------- */

/* 
   理由：统一所有按钮的交互反馈，形成一致的体验语言
   - hover: 轻微上浮+阴影
   - active: 按压效果
   - focus: 焦点环（无障碍）
*/

.btn-primary,
.btn-secondary,
.new-chat-btn,
.send-btn,
.action-btn,
.cropper-actions button,
.voice-stop-btn,
.lover-modal-btn {
    position: relative;
    overflow: hidden;
}

/* 按钮点击波纹效果 */
.btn-primary::after,
.btn-secondary::after,
.send-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}

.btn-primary:active::after,
.btn-secondary:active::after,
.send-btn:active::after {
    width: 200%;
    height: 200%;
    opacity: 1;
    transition: width 0s, height 0s, opacity 0s;
}

/* 主按钮悬浮增强 */
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(77, 91, 255, 0.3);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(77, 91, 255, 0.2);
}

/* ---------- 6. 侧边栏菜单项动画 ---------- */

/* 
   理由：侧边栏打开时，菜单项依次滑入，形成层次感
   - 侧边栏打开后，菜单项staggered进场
   - 删除按钮的出现更优雅
*/

.sidebar.open .sidebar-user {
    animation: sidebarItemIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

.sidebar.open .new-chat-btn {
    animation: sidebarItemIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

.sidebar.open .history-section-title {
    animation: sidebarItemIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.sidebar.open .history-item {
    animation: sidebarItemIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.sidebar.open .history-item:nth-child(1) {
    animation-delay: 0.25s;
}

.sidebar.open .history-item:nth-child(2) {
    animation-delay: 0.3s;
}

.sidebar.open .history-item:nth-child(3) {
    animation-delay: 0.35s;
}

.sidebar.open .history-item:nth-child(4) {
    animation-delay: 0.4s;
}

.sidebar.open .history-item:nth-child(5) {
    animation-delay: 0.45s;
}

.sidebar.open .history-item:nth-child(6) {
    animation-delay: 0.5s;
}

.sidebar.open .history-item:nth-child(7) {
    animation-delay: 0.55s;
}

.sidebar.open .history-item:nth-child(8) {
    animation-delay: 0.6s;
}

.sidebar.open .sidebar-footer-btn {
    animation: sidebarItemIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.sidebar.open .sidebar-footer-btn:nth-child(1) {
    animation-delay: 0.65s;
}

.sidebar.open .sidebar-footer-btn:nth-child(2) {
    animation-delay: 0.7s;
}

.sidebar.open .sidebar-footer-btn:nth-child(3) {
    animation-delay: 0.75s;
}

@keyframes sidebarItemIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

/* 历史项删除按钮优雅出现 */
.history-item .delete-btn {
    transform: translateY(-50%) scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

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

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

/* ---------- 7. 设置页面列表动画 ---------- */

/* 
   理由：设置页面项增加悬浮和点击反馈，提升操作质感
*/

.settings-item {
    position: relative;
    overflow: hidden;
}

.settings-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--accent-color);
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.settings-item:hover::before {
    transform: scaleY(1);
}

.settings-item:hover {
    transform: translateX(4px);
}

.settings-item:active {
    transform: translateX(2px) scale(0.99);
}

/* 统计卡片悬浮效果 */
.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, transparent, rgba(77, 91, 255, 0.05));
    border-radius: 0 0 0 100%;
    transition: width 0.3s ease, height 0.3s ease;
}

.stat-card:hover::after {
    width: 100px;
    height: 100px;
}

.stat-card:hover .stat-card-value {
    transform: scale(1.05);
}

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

/* ---------- 8. 消息气泡优化 ---------- */

/* 
   理由：消息是核心内容，优化出现动画和交互
   - 用户消息从右侧滑入
   - AI消息从左侧滑入
   - 增加微妙的悬停效果
*/

.message.user {
    animation: userMessageIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.message.assistant {
    animation: assistantMessageIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes userMessageIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes assistantMessageIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

/* 消息操作按钮优雅出现 */
.message-actions {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.message:hover .message-actions {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .message-actions {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 9. 输入区域增强 ---------- */

/* 
   理由：输入框是最高频交互区域，增强聚焦反馈
   - 聚焦时边框发光效果
   - 发送按钮呼吸动画（有内容时）
*/

.input-container {
    transition: border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.input-container:focus-within {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(77, 91, 255, 0.15);
}

/* 发送按钮有内容时的呼吸效果 */
.send-btn:not(:disabled) {
    animation: sendBtnPulse 2s ease-in-out infinite;
}

@keyframes sendBtnPulse {

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

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

/* 输入工具按钮增强 */
.input-tool-btn {
    position: relative;
    overflow: hidden;
}

.input-tool-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.4s ease;
}

.input-tool-btn:hover::after {
    left: 100%;
}

/* ---------- 10. Toast 通知增强 ---------- */

/* 
   理由：Toast通知需要更优雅的出现和消失动画
   - 增加轻微的缩放效果
   - 不同类型有不同的强调色
*/

.app-toast {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.app-toast.app-toast-success {
    border-left: 3px solid #22c55e;
    background: linear-gradient(135deg, var(--bg-primary), rgba(34, 197, 94, 0.05));
}

.app-toast.app-toast-error {
    border-left: 3px solid #ef4444;
    background: linear-gradient(135deg, var(--bg-primary), rgba(239, 68, 68, 0.05));
}

.app-toast.app-toast-warning {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(135deg, var(--bg-primary), rgba(245, 158, 11, 0.05));
}

.app-toast.app-toast-info {
    border-left: 3px solid #3b82f6;
    background: linear-gradient(135deg, var(--bg-primary), rgba(59, 130, 246, 0.05));
}

/* ---------- 11. 模态框增强 ---------- */

/* 
   理由：模态框增加更精致的入场动画和背景效果
*/

.cropper-container,
.lover-modal-content,
.voice-call-modal-content {
    animation: modalBounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modalBounceIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

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

/* 遮罩层渐变 */
.cropper-modal::before,
.lover-modal-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
}

/* ---------- 12. 头像交互增强 ---------- */

/* 
   理由：头像增加悬浮和点击反馈
*/

.sidebar-avatar,
.profile-avatar,
.message-avatar {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
}

.sidebar-avatar:hover,
.profile-avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.sidebar-avatar:active,
.profile-avatar:active {
    transform: scale(1.02);
}

/* ---------- 13. 主题切换动画 ---------- */

/* 
   理由：主题切换时增加平滑的过渡效果
*/

.theme-option {
    position: relative;
    overflow: hidden;
}

.theme-option.active {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ---------- 14. 滚动条美化 ---------- */

/* 
   理由：精致的滚动条能显著提升整体质感
*/

.chat-container::-webkit-scrollbar-thumb,
.sidebar-history::-webkit-scrollbar-thumb,
.profile-page::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.chat-container::-webkit-scrollbar-thumb:hover,
.sidebar-history::-webkit-scrollbar-thumb:hover,
.profile-page::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* ---------- 15. 减少动画偏好（无障碍） ---------- */

/* 
   理由：尊重用户的无障碍偏好，对动效敏感的用户可关闭动画
*/

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .welcome-logo,
    .welcome-title,
    .welcome-subtitle,
    .mode-switch,
    .mode-desc,
    .suggestion-cards,
    .suggestion-card,
    .message,
    .sidebar.open .history-item,
    .sidebar.open .sidebar-footer-btn {
        animation: none !important;
    }
}

/* ---------- 16. 键盘高度适配 JS 辅助类 ---------- */

/* 
   JS 可通过 visualViewport API 动态设置 --keyboard-height 变量
   实现更精确的键盘避让，以下为预留CSS变量接口
*/

:root {
    --keyboard-height: 0px;
}

@media (max-width: 768px) {
    .keyboard-open .welcome-screen {
        transform: translateY(calc(-1 * min(var(--keyboard-height, 0px) * 0.15, 80px)));
    }

    .keyboard-open .welcome-logo {
        transform: scale(0.95);
        opacity: 0.85;
    }

    .keyboard-open .welcome-title {
        transform: scale(0.97);
        opacity: 0.9;
    }

    .keyboard-open .mode-switch {
        transform: translateY(-5px);
        opacity: 0.9;
    }
}

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