/*
 * [INPUT]: 依赖 base.css 的 CSS 变量（主题色、字体、安全区域）
 * [OUTPUT]: #chat-fab + #chat-panel 全部样式 + 响应式断点
 * [POS]: AI 对话浮窗专属样式，被 index.html / resume.html 引入
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

/* ╔══════════════════════════════════════════════════════════╗
   ║ 1 · FAB 悬浮按钮 — 像素终端风                            ║
   ║   - inline SVG，currentColor 跟随主题                    ║
   ║   - 内嵌闪烁光标 _ 呼应 intro bash 美学                  ║
   ║   - 圆角方形（非圆形）跟 Bento Grid 同构                 ║
   ╚══════════════════════════════════════════════════════════╝ */
#chat-fab {
    position: fixed;
    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    right:  calc(32px + env(safe-area-inset-right, 0px));
    z-index: 10000;

    width: 56px;
    height: 56px;
    border-radius: 16px;          /* 方圆同构 Bento card */
    border: none;
    cursor: pointer;

    background: var(--fab-bg, var(--c2-bg));
    color: var(--fab-fg, var(--c2-text));
    box-shadow:
        0 6px 24px var(--fab-shadow, rgba(0,0,0,0.18)),
        0 1px 3px  rgba(0,0,0,0.08);

    display: flex;
    align-items: center;
    justify-content: center;

    /* 默认可见，不依赖 intro-done */
    opacity: 1;
    pointer-events: auto;
    transition:
        transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.2s ease,
        box-shadow 0.25s ease,
        opacity 0.4s ease,
        border-radius 0.3s ease;
}

#chat-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 10px 32px rgba(0,0,0,0.24),
        0 2px 6px   rgba(0,0,0,0.1);
}

#chat-fab:active {
    transform: translateY(0) scale(0.96);
    transition-duration: 0.1s;
}

#chat-fab.active {
    transform: rotate(90deg);
    border-radius: 50%;
}

/* SVG 图标尺寸交给 viewBox 控制；切换显隐 */
#chat-fab svg { display: block; }
#chat-fab .icon-close { display: none; }
#chat-fab.active .icon-open  { display: none; }
#chat-fab.active .icon-close { display: block; }

/* 像素小人 · 眨眼动画 —— 每 5s 眨一次 */
/* 像素小人 · 眼睛与嘴以“宿主背景色”挑空
   - 在 FAB 上，宿主 = var(--c2-bg)
   - 在头像容器上，宿主 = var(--c3-bg)
   用上下文继承的背景色变量，避免分支 */
.chat-pixel .px-eye,
.chat-pixel .px-mouth {
    fill: var(--chat-pixel-bg, var(--c2-bg));
}

#chat-fab     { --chat-pixel-bg: var(--fab-bg, var(--c2-bg)); }
.chat-avatar  { --chat-pixel-bg: var(--avatar-bg, var(--c3-bg)); }

/* 眨眼 · 4.5s 周期 */
.chat-pixel .px-eye {
    transform-origin: center;
    transform-box: fill-box;
    animation: chat-blink 4.5s infinite;
}
@keyframes chat-blink {
    0%, 92%, 100% { transform: scaleY(1);    }
    95%, 97%      { transform: scaleY(0.15); }
}

/* hover 时嘴角上扬一像素 —— 微笑反馈 */
.chat-pixel .px-mouth {
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.2s ease;
}
#chat-fab:hover .chat-pixel .px-mouth {
    transform: translateY(-1px);
}

/* 呼吸光环：未打开时柔和扩散 */
#chat-fab:not(.active)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--fab-bg, var(--c2-bg));
    opacity: 0.35;
    z-index: -1;
    animation: chat-pulse 2.6s ease-out infinite;
}
@keyframes chat-pulse {
    0%   { transform: scale(1);    opacity: 0.35; }
    70%  { transform: scale(1.55); opacity: 0;    }
    100% { transform: scale(1.55); opacity: 0;    }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║ 2 · 聊天面板                                              ║
   ╚══════════════════════════════════════════════════════════╝ */
#chat-panel {
    position: fixed;
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    right:  calc(32px  + env(safe-area-inset-right, 0px));
    z-index: 10001;

    width: 380px;
    max-width: calc(100vw - 48px);
    height: 540px;
    max-height: calc(100vh - 160px);

    border-radius: 20px;
    background: var(--c1-bg);
    box-shadow:
        0 12px 48px rgba(0,0,0,0.16),
        0 2px 8px   rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    opacity: 0;
    transform: translateY(16px) scale(0.96);
    pointer-events: none;
    transform-origin: bottom right;
    transition:
        opacity 0.25s ease,
        transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}

#chat-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║ 3 · 面板头部                                              ║
   ╚══════════════════════════════════════════════════════════╝ */
#chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--c3-border);
    background: var(--c1-bg);
    flex-shrink: 0;
}

.chat-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;          /* 同 FAB 方圆同构 */
    /* 底色/主身色/描边 全部语义变量化，三主题各自注入 */
    background: var(--avatar-bg, var(--c3-bg));
    color:      var(--avatar-fg, var(--c2-bg));
    border: 1px solid var(--avatar-border, var(--c3-border));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-family: var(--font-mono);
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}

.chat-header-info { flex: 1; min-width: 0; }

.chat-header-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--c1-text);
    line-height: 1.2;
}

.chat-header-status {
    font-size: 0.72rem;
    color: var(--c1-sub);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.chat-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
    animation: chat-dot-pulse 2s ease-out infinite;
}
@keyframes chat-dot-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(34,197,94,0.5); }
    70%  { box-shadow: 0 0 0 6px  rgba(34,197,94,0);   }
    100% { box-shadow: 0 0 0 0    rgba(34,197,94,0);   }
}

#chat-close {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: var(--bg-body);
    color: var(--c1-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
#chat-close:hover {
    background: var(--c3-border);
    color: var(--c1-text);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║ 4 · 消息区                                                ║
   ╚══════════════════════════════════════════════════════════╝ */
#chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-messages::-webkit-scrollbar-thumb {
    background: var(--c3-border);
    border-radius: 2px;
}

.chat-msg {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.855rem;
    line-height: 1.6;
    word-break: break-word;
    animation: chat-msg-in 0.22s ease;
}
@keyframes chat-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.chat-msg--user {
    align-self: flex-end;
    background: var(--c2-bg);
    color: var(--c2-text);
    border-bottom-right-radius: 4px;
}

.chat-msg--assistant {
    align-self: flex-start;
    background: var(--c3-bg);
    color: var(--c3-text);
    border-bottom-left-radius: 4px;
}

.chat-msg code {
    font-family: var(--font-mono);
    font-size: 0.8em;
    background: rgba(0,0,0,0.08);
    padding: 1px 5px;
    border-radius: 4px;
}
.chat-msg--user code {
    background: rgba(255,255,255,0.18);
}

.chat-msg.loading::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23888'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1s' begin='0s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='14' cy='4' r='3' fill='%23888'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1s' begin='0.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='24' cy='4' r='3' fill='%23888'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1s' begin='0.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
    vertical-align: middle;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║ 5 · 输入区                                                ║
   ╚══════════════════════════════════════════════════════════╝ */
#chat-footer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--c3-border);
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: var(--c1-bg);
    flex-shrink: 0;
}

#chat-input {
    flex: 1;
    border: 1.5px solid var(--c3-border);
    border-radius: 12px;
    padding: 9px 13px;
    font-size: 0.855rem;
    font-family: inherit;
    background: var(--bg-body);
    color: var(--c1-text);
    resize: none;
    min-height: 38px;
    max-height: 120px;
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.5;
}
#chat-input:focus       { border-color: var(--c2-bg); }
#chat-input::placeholder { color: var(--c1-sub); }

#chat-send {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: none;
    background: var(--c2-bg);
    color: var(--c2-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.15s;
}
#chat-send:hover:not(:disabled) {
    opacity: 0.9;
    transform: scale(1.06);
}
#chat-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║ 6 · 响应式分层 — 5 断点 + 横屏 + 触屏 + 动效偏好          ║
   ║                                                          ║
   ║   ≥1024  桌面：默认尺寸                                  ║
   ║   768—1023 平板：FAB 略缩，面板宽度稍降                  ║
   ║   481—767 大手机：FAB 贴近边缘，面板贴满宽度              ║
   ║   ≤480  小手机：底部抽屉式 sheet，圆角仅上方              ║
   ║   landscape & 短屏：尺寸再压                              ║
   ╚══════════════════════════════════════════════════════════╝ */

/* —— 平板 —— */
@media (max-width: 1023px) {
    #chat-fab {
        width: 52px;
        height: 52px;
        bottom: calc(28px + env(safe-area-inset-bottom, 0px));
        right:  calc(28px + env(safe-area-inset-right, 0px));
    }
    #chat-panel {
        width: 360px;
        height: 500px;
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        right:  calc(28px + env(safe-area-inset-right, 0px));
    }
}

/* —— 大手机 —— */
@media (max-width: 767px) {
    #chat-fab {
        width: 48px;
        height: 48px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        right:  calc(20px + env(safe-area-inset-right, 0px));
        border-radius: 14px;
    }
    #chat-panel {
        width: calc(100vw - 32px);
        height: calc(100vh - 120px);
        max-height: 620px;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        right:  calc(16px + env(safe-area-inset-right, 0px));
        left:   calc(16px + env(safe-area-inset-left, 0px));
    }
}

/* —— 小手机：底部抽屉式 —— */
@media (max-width: 480px) {
    #chat-fab {
        width: 46px;
        height: 46px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        right:  calc(16px + env(safe-area-inset-right, 0px));
    }
    #chat-panel {
        /* 全宽贴底抽屉 */
        width: 100vw;
        max-width: 100vw;
        left: 0;
        right: 0;
        bottom: 0;
        height: 82vh;
        max-height: 82vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(24px);   /* 抽屉从下往上 */
        transform-origin: bottom center;
    }
    #chat-panel.open {
        transform: translateY(0);
    }
    /* FAB 打开后让位 */
    #chat-fab.active {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.4);
    }
    #chat-header   { padding: 14px 16px; }
    #chat-messages { padding: 14px; }
    .chat-msg      { max-width: 86%; font-size: 0.88rem; }
}

/* —— 超窄屏（折叠/极窄） —— */
@media (max-width: 360px) {
    #chat-fab { width: 44px; height: 44px; }
    #chat-header   { padding: 12px 14px; }
    .chat-avatar   { width: 30px; height: 30px; font-size: 13px; }
    .chat-header-name   { font-size: 0.82rem; }
    .chat-header-status { font-size: 0.68rem; }
}

/* —— 横屏 + 矮屏：避免面板顶天立地 —— */
@media (orientation: landscape) and (max-height: 500px) {
    #chat-fab {
        width: 42px;
        height: 42px;
        bottom: 14px;
        right:  14px;
    }
    #chat-panel {
        width: min(420px, calc(100vw - 32px));
        height: calc(100vh - 32px);
        max-height: calc(100vh - 32px);
        bottom: 14px;
        right:  14px;
        left:   auto;
        border-radius: 16px;
    }
    .chat-msg { font-size: 0.82rem; }
}

/* —— 触屏：去掉 hover 提升，强化按压反馈 —— */
@media (hover: none) and (pointer: coarse) {
    #chat-fab:hover {
        transform: none;
        box-shadow:
            0 6px 24px rgba(0,0,0,0.18),
            0 1px 3px  rgba(0,0,0,0.08);
    }
    #chat-send:hover:not(:disabled) {
        transform: none;
        opacity: 1;
    }
}

/* —— 偏好减少动效：关闭脉冲/眨眼 —— */
@media (prefers-reduced-motion: reduce) {
    #chat-fab:not(.active)::after,
    .chat-pixel .px-eye,
    .chat-status-dot {
        animation: none;
    }
    #chat-fab,
    #chat-panel,
    .chat-msg {
        transition-duration: 0.01ms;
    }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║ 7 · FAB 主题语义 — 让三主题人格分明                       ║
   ║   - Light：白卡反转，深青灰小人，温润浮起                  ║
   ║   - Orange：鲜橙底，暖白小人，高对比 CTA                   ║
   ║   - Dark：深青底，浅米小人，暗夜灯塔                       ║
   ╚══════════════════════════════════════════════════════════╝ */

/* —— Light（默认）：白卡反转，与 Dark 拉开差异 —— */
:root {
    --fab-bg:     #FFFFFF;          /* 纯白卡，与 Bento 白卡同源 */
    --fab-fg:     #213547;          /* 深青灰小人 */
    --fab-shadow: rgba(33,53,71,0.22);
}

/* —— Orange：保留鲜橙强调 —— */
[data-theme="orange"] {
    --fab-bg:     #E55A00;
    --fab-fg:     #FFFAF5;
    --fab-shadow: rgba(200,80,0,0.35);
}

/* —— Dark：深青底，比 Light 更暗、更克制 —— */
[data-theme="dark"] {
    --fab-bg:     #1E3A4A;
    --fab-fg:     #E8E0D8;
    --fab-shadow: rgba(0,0,0,0.5);
}

/* Light 模式下白卡需要一道极细描边，避免融化在浅色背景里 */
:root #chat-fab,
html:not([data-theme]) #chat-fab {
    box-shadow:
        0 6px 24px var(--fab-shadow),
        0 1px 3px  rgba(33,53,71,0.08),
        inset 0 0 0 1px rgba(33,53,71,0.06);
}
[data-theme="orange"] #chat-fab,
[data-theme="dark"]   #chat-fab {
    box-shadow:
        0 6px 24px var(--fab-shadow),
        0 1px 3px  rgba(0,0,0,0.08);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║ 8 · 头像主题语义 — 跟随主题亮起或融入                     ║
   ║   - Light：融入面板（暖白底 + 深青灰小人）                ║
   ║   - Orange：弱反差（米色底 + 鲜橙小人，与 FAB 同调）       ║
   ║   - Dark：反向亮起（浅米底 + 深青灰小人，与 FAB 反呼应）   ║
   ╚══════════════════════════════════════════════════════════╝ */

:root {
    --avatar-bg:     var(--c3-bg);
    --avatar-fg:     #213547;
    --avatar-border: var(--c3-border);
}

[data-theme="orange"] {
    --avatar-bg:     #FFF5EC;
    --avatar-fg:     #E55A00;
    --avatar-border: rgba(229,90,0,0.18);
}

[data-theme="dark"] {
    --avatar-bg:     #E8E0D8;          /* 浅米，与 FAB 前景色同色 */
    --avatar-fg:     #1E3A4A;          /* 深青灰小人 */
    --avatar-border: rgba(232,224,216,0.4);
}