/* ---------- AI 助手聊天（紧凑面板 + 全屏会话） ---------- */
/* 面板位置由 JS 贴着悬浮球计算（优先球的上方，靠边自动换边），这里不再写死方位 */
#aiChatPanel {
    position: fixed;
    width: 356px;
    max-width: calc(100vw - 32px);
    height: min(640px, 80vh);
    display: none;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(238, 240, 243, .9);
    box-shadow: 0 20px 54px rgba(15, 23, 42, .16);
    overflow: hidden;
    z-index: 88
}

/* 只有点击悬浮球后（ai-chat-panel-open）才显示面板 */
html.ai-chat-panel-open #aiChatPanel { display: flex }

/* 全屏会话：毛玻璃铺满，页面在底下虚化；头部只保留关闭 */
html.ai-chat-full #aiChatPanel {
    display: flex;
    inset: 0;
    right: 0;
    top: 0;
    transform: none;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
    background: rgba(236, 241, 248, .68);
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    box-shadow: none
}

/* 悬浮球：常显、可拖拽（touch-action 关掉，避免拖动时页面滚动）。
   不定宽高、不定圆角：只留热区内边距（透明不显示），图标按自身形状显示 */
#aiChatFab {
    display: flex;
    position: fixed;
    right: 24px;
    bottom: 30px;
    padding: 14px;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #3b82f6;
    background: transparent;
    z-index: 89;
    cursor: pointer;
    transition: transform .2s ease;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none
}

#aiChatFab:hover { transform: scale(1.1) }
/* lulu 悬浮图标：默认第一行待机（站立→眨眼→抱臂），悬停第五行兴奋（5 帧），原始尺寸 192x208 */
#aiChatFab .lulu-anim {
    width: 96px;
    height: 104px;
    background-image: url('lulu-idle.png?v=2');
    background-repeat: no-repeat;
    background-size: 300% 100%;
    animation: luluIdle 1.2s steps(3) infinite
}
#aiChatFab:hover .lulu-anim {
    background-image: url('lulu-hover.png?v=2');
    background-size: 500% 100%;
    animation: luluHover 1.2s steps(5) infinite
}
@keyframes luluIdle {
    from { background-position-x: 0 }
    to { background-position-x: -288px }
}
@keyframes luluHover {
    from { background-position-x: 0 }
    to { background-position-x: -480px }
}
@media (prefers-reduced-motion: reduce) {
    #aiChatFab .lulu-anim { animation: none }
}
#aiChatFab.dragging { transition: none; transform: scale(1.08); opacity: .92; cursor: grabbing }

/* 头部：徽标 + 小标题 + 大问候语 + 操作钮 */
.ai-chat-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 8px }
.ai-chat-badge {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #3b82f6;
    background: transparent
}
.ai-chat-title-wrap { display: flex; flex-direction: column; flex: 1; min-width: 0 }
.ai-chat-title { font-size: 11.5px; font-weight: 600; color: #8a94a6; line-height: 1.2 }
.ai-chat-hero {
    font-size: 18px; font-weight: 800; color: #1a1a1a;
    line-height: 1.25; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.ai-chat-head-act { display: flex; gap: 6px; align-items: center }
.ai-chat-head-act a {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #5b6472; background: #f1f3f7; font-size: 15px
}
.ai-chat-head-act a:hover { color: #3b82f6; background: #eaf0ff }

/* 面板：头部只留全屏/关闭；全屏：新聊/收起挪到关闭左边，悬浮球隐藏 */
#aiChatNew, #aiChatMin { display: none }
html.ai-chat-full #aiChatNew, html.ai-chat-full #aiChatMin { display: flex }
html.ai-chat-full #aiChatExpand { display: none !important }
html.ai-chat-full #aiChatFab { display: none }
html.ai-chat-full .ai-chat-head { padding: 22px 34px 12px; align-items: flex-start }
html.ai-chat-full .ai-chat-title { font-size: 12px; color: #64748b }
html.ai-chat-full .ai-chat-hero { font-size: 24px }

/* 消息区：面板全宽；全屏居中 900px 列 */
.ai-chat-body { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 12px 14px 6px }
.ai-chat-msgs { display: flex; flex-direction: column; gap: 14px; width: 100% }
html.ai-chat-full .ai-chat-body { padding: 16px 34px 6px }
html.ai-chat-full .ai-chat-msgs { max-width: 900px }

.ai-msg { display: flex; gap: 9px }
.ai-msg.me { justify-content: flex-end }
.ai-msg-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100% }
.ai-msg.me .ai-msg-col { align-items: flex-end }
.ai-bubble { padding: 10px 13px; border-radius: 15px; font-size: 13.5px; line-height: 1.7; word-break: break-word }
.ai-msg.ai .ai-bubble { background: #fff; color: #333; box-shadow: 0 2px 10px rgba(15, 23, 42, .06) }
.ai-msg.me .ai-bubble { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; border-top-right-radius: 4px }
.ai-time { display: none; font-size: 10.5px; color: #a2abba; padding: 0 4px }
html.ai-chat-full .ai-time { display: block }

.ai-bubble p { margin: 0 0 6px }
.ai-bubble p:last-child { margin-bottom: 0 }
.ai-bubble ul, .ai-bubble ol { margin: 4px 0; padding-left: 18px }
.ai-bubble code { background: rgba(15, 23, 42, .07); padding: 1px 5px; border-radius: 4px; font-size: 12px }
.ai-bubble pre { background: #1e2430; color: #e6e6e6; padding: 10px 12px; border-radius: 10px; overflow-x: auto; margin: 6px 0 }
.ai-bubble pre code { background: none; color: inherit; padding: 0 }
.ai-bubble a { color: #3b82f6 }
.ai-msg.me .ai-bubble a { color: #fff }

.ai-typing { display: flex; gap: 4px; align-items: center; padding: 13px }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9aa3af; animation: aiBlink 1.2s infinite }
.ai-typing span:nth-child(2) { animation-delay: .2s }
.ai-typing span:nth-child(3) { animation-delay: .4s }

@keyframes aiBlink {
    0%, 60%, 100% { opacity: .3; transform: translateY(0) }
    30% { opacity: 1; transform: translateY(-3px) }
}



/* 输入区：浅灰圆角条 + 蓝色圆角方块发送按钮（白色纸飞机居中） */
.ai-chat-input {
    display: flex; gap: 8px; align-items: center;
    margin: 12px 14px 16px; padding: 9px 10px 9px 18px;
    background: #f5f6f8; border: none; border-radius: 14px
}
#aiChatText {
    flex: 1; resize: none; border: none; background: transparent;
    padding: 10px 0; font-size: 13.5px; line-height: 1.55; max-height: 110px;
    color: #333; outline: none; font-family: inherit
}
#aiChatText::placeholder { color: #b0b6c0 }
.ai-chat-send {
    flex: none; width: 40px; height: 40px; border: none; border-radius: 13px;
    background: #8fb2f8; color: #fff;
    font-size: 17px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; transition: background .2s ease, transform .15s ease
}
.ai-chat-send i {
    display: flex; align-items: center; justify-content: center;
    width: 1em; height: 1em; margin: 0
}
.ai-chat-send i:before { margin: 0 }
.ai-chat-send:hover { background: #6f97f7 }
.ai-chat-send:active { transform: scale(.94) }
.ai-chat-send:disabled { opacity: .5; cursor: default }

/* 全屏：输入条居中，样式与面板一致，发送按钮离右缘留出距离 */
html.ai-chat-full .ai-chat-input {
    max-width: 920px; width: calc(100% - 48px); margin: 0 auto;
    padding: 9px 18px 9px 22px
}
html.ai-chat-full #aiChatText { font-size: 14px }
html.ai-chat-full .ai-chat-send { width: 40px; height: 40px }

/* 免责说明：仅全屏显示，上下间距相等 */
.ai-chat-foot { display: none; text-align: center; font-size: 11px; color: #a2abba; padding: 13px 0 }
html.ai-chat-full .ai-chat-foot { display: block }

/* 暗色 */
.dark #aiChatPanel { background: rgba(20, 29, 46, .96); border-color: rgba(51, 65, 85, .8) }
html.ai-chat-full.dark #aiChatPanel { background: rgba(12, 18, 30, .62) }
.dark .ai-chat-title { color: #cbd5e1 }
.dark .ai-chat-hero { color: #e2e8f0 }
.dark .ai-chat-head-act a { color: #aebccd; background: rgba(30, 41, 59, .7) }
.dark .ai-chat-head-act a:hover { color: #8db4ff; background: rgba(40, 53, 77, .9) }
/* 图标背景透明后，暗色下用亮蓝保证默认图标可见 */
.dark #aiChatFab { color: #8db4ff }
.dark .ai-chat-badge { color: #8db4ff }
.dark .ai-msg.ai .ai-bubble { background: rgba(40, 53, 77, .9); color: #d7dee9; box-shadow: none }
.dark .ai-bubble code { background: rgba(255, 255, 255, .1) }
.dark .ai-time { color: #64748b }

.dark .ai-chat-input { background: #1a2434 }
.dark #aiChatText { background: transparent; color: #d7dee9 }
.dark .ai-chat-send { background: #8fb2f8; color: #fff }
.dark .ai-chat-send:hover { background: #6f97f7 }
.dark .ai-chat-send:active { transform: scale(.94) }