/* ============================================================================
   全局悬浮 AI 助手（待命精灵）
   —— 完全主题变量驱动：跟随 [data-theme="dark"|"light"] 自动切换
   —— 关键：为 <select> 声明 color-scheme，否则原生下拉弹层用浏览器默认浅底，
      叠加继承的浅色文字会出现「白底白字」不可读问题。
   ============================================================================ */

/* ---------- 1. 设计令牌（深色为默认） ---------- */
.fab-assistant {
    /* 面板分层底色：提高不透明度，保证正文在任何页面内容上都可读 */
    --fab-bg: hsla(230 19% 13% / 0.94);
    --fab-bg-2: hsla(230 19% 17% / 0.9);
    --fab-bg-3: hsla(0 0% 100% / 0.06);
    --fab-border: hsla(0 0% 100% / 0.10);
    --fab-border-strong: hsla(189 100% 50% / 0.32);
    --fab-text: hsl(0 0% 100%);
    --fab-text-soft: hsla(0 0% 100% / 0.62);
    --fab-hover: hsla(0 0% 100% / 0.08);
    --fab-bubble-ai: hsla(0 0% 100% / 0.07);
    --fab-shadow: 0 18px 50px hsla(0 0% 0% / 0.55);
    --fab-inset: inset 0 1px 0 hsla(0 0% 100% / 0.07);
    /* 对齐全局 --on-primary，保持单一来源（深色主题青底深字 11.38:1） */
    --fab-on-primary: var(--on-primary, hsl(170 60% 8%));
    /* 下拉弹层底色（深色下必须与浅色文字反差） */
    --fab-opt-bg: hsl(230 19% 17%);
    --fab-scrim: hsla(0 0% 100% / 0.16);
    --fab-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe3e1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    /* 原生下拉/滚动条跟随深色 */
    color-scheme: dark;
}

/* ---------- 2. 浅色主题覆盖 ---------- */
[data-theme="light"] .fab-assistant {
    --fab-bg: hsla(0 0% 100% / 0.97);
    --fab-bg-2: hsla(210 28% 97% / 0.98);
    --fab-bg-3: hsla(222 20% 20% / 0.04);
    --fab-border: hsla(222 20% 20% / 0.14);
    --fab-border-strong: hsla(191 95% 38% / 0.30);
    --fab-text: hsl(222 30% 14%);
    --fab-text-soft: hsla(222 20% 20% / 0.72);
    --fab-hover: hsla(222 20% 20% / 0.06);
    --fab-bubble-ai: hsla(210 24% 94% / 1);
    --fab-shadow: 0 18px 48px hsla(222 30% 20% / 0.18);
    --fab-inset: inset 0 1px 0 hsla(0 0% 100% / 0.9);
    /* 浅色青底(hsl(191 95% 38%))配白字仅 3.26:1，故沿用全局 --on-primary 深色文字（5.94:1），
       与深色主题「青底深字」的处理保持一致。 */
    --fab-on-primary: var(--on-primary, hsl(170 60% 8%));
    --fab-opt-bg: hsl(0 0% 100%);
    --fab-scrim: hsla(222 20% 20% / 0.28);
    --fab-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23425a63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: light;
}

/* ---------- 3. 容器与悬浮按钮 ---------- */
.fab-assistant { position: fixed; left: 20px; bottom: 20px; z-index: 400; }

.fab-btn {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: none; padding: 0;
    background: linear-gradient(135deg, var(--c-primary-fill), var(--c-accent));
    color: var(--fab-on-primary);
    cursor: pointer;
    box-shadow: 0 10px 26px hsla(0 0% 0% / 0.32), var(--glow-sm);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.fab-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px hsla(0 0% 0% / 0.38), var(--glow); }
.fab-btn:active { transform: translateY(0) scale(.96); }
.fab-btn.is-active { transform: scale(.94); filter: saturate(1.15); }
.fab-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.fab-sprite { width: 28px; height: 28px; }

/* ---------- 4. 面板外壳 ---------- */
.fab-panel {
    position: absolute; left: 0; bottom: 72px;
    width: 380px; max-width: calc(100vw - 40px);
    display: flex; flex-direction: column;
    max-height: min(70vh, 640px);
    background: var(--fab-bg);
    border: 1px solid var(--fab-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--fab-shadow), var(--fab-inset);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    animation: fab-in .2s cubic-bezier(.2, .8, .3, 1);
}
.fab-panel[hidden] { display: none; }
.fab-panel.is-dragover { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary), var(--fab-shadow); }

@keyframes fab-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* ---------- 5. 头部 ---------- */
.fab-panel__head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--fab-border);
    background: var(--fab-bg-3);
}
.fab-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--c-primary-fill), var(--c-accent));
    color: var(--fab-on-primary);
    box-shadow: var(--glow-sm);
}
.fab-avatar .fab-sprite { width: 18px; height: 18px; }
.fab-panel__title { font-weight: 700; font-size: 14px; flex: 1; color: var(--fab-text); }

.fab-panel__clear, .fab-panel__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border: none; border-radius: 8px;
    background: transparent; color: var(--fab-text-soft);
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.fab-panel__clear { width: auto; padding: 0 8px; font-size: 12px; font-family: inherit; }
.fab-panel__clear:hover, .fab-panel__close:hover { background: var(--fab-hover); color: var(--fab-text); }
.fab-panel__close { font-size: 20px; line-height: 1; }
.fab-panel__close:hover { color: var(--c-danger); }
.fab-panel__clear:focus-visible, .fab-panel__close:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }

/* ---------- 6. 场景切换（分段胶囊） ---------- */
.fab-panel__scenes {
    display: flex; gap: 6px; padding: 10px 12px;
    border-bottom: 1px solid var(--fab-border);
    flex-wrap: wrap;
}
.fab-panel__scenes button {
    border: 1px solid var(--fab-border);
    background: transparent;
    color: var(--fab-text-soft);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px; font-family: inherit;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fab-panel__scenes button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.fab-panel__scenes button.is-active {
    background: var(--c-primary-fill);
    color: var(--fab-on-primary);
    border-color: var(--c-primary-fill);
    font-weight: 600;
}
.fab-panel__scenes button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ---------- 7. 消息区 ---------- */
.fab-panel__log {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    padding: 14px; display: flex; flex-direction: column; gap: 12px;
    min-height: 180px;
    scrollbar-width: thin; scrollbar-color: var(--fab-scrim) transparent;
}
.fab-panel__log::-webkit-scrollbar { width: 8px; }
.fab-panel__log::-webkit-scrollbar-thumb { background: var(--fab-scrim); border-radius: 999px; }
.fab-panel__log::-webkit-scrollbar-track { background: transparent; }

.fab-msg { display: flex; flex-direction: column; max-width: 88%; }
.fab-msg--user { align-self: flex-end; align-items: flex-end; }
.fab-msg--assistant { align-self: flex-start; }
.fab-bubble {
    padding: 10px 13px;
    border-radius: 14px;
    line-height: 1.6; font-size: 13.5px;
    color: var(--fab-text);
    word-break: break-word; white-space: pre-wrap;
}
.fab-msg--user .fab-bubble {
    background: var(--c-primary-fill);
    color: var(--fab-on-primary);
    font-weight: 500;
    border-bottom-right-radius: 5px;
}
.fab-msg--assistant .fab-bubble {
    background: var(--fab-bubble-ai);
    border: 1px solid var(--fab-border);
    border-bottom-left-radius: 5px;
}
.fab-meta { font-size: 11px; color: var(--fab-text-soft); margin-top: 4px; padding: 0 4px; }
.fab-bubble.muted { color: var(--fab-text-soft); }

.fab-imgs { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.fab-img img {
    width: 60px; height: 60px; object-fit: cover; display: block;
    border-radius: 10px; border: 1px solid var(--fab-border);
}

/* 打字指示器 */
.fab-bubble--typing { display: flex; gap: 5px; align-items: center; padding: 13px; }
.fab-bubble--typing i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-primary-fill); display: inline-block;
    animation: fab-blink 1.2s infinite both;
}
.fab-bubble--typing i:nth-child(2) { animation-delay: .2s; }
.fab-bubble--typing i:nth-child(3) { animation-delay: .4s; }
@keyframes fab-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- 8. 图片预览 ---------- */
.fab-panel__images { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 8px; }
.fab-panel__images:empty { display: none; }
.fab-thumb {
    position: relative; width: 48px; height: 48px;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--fab-border);
    background: var(--fab-bg-2);
}
.fab-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fab-thumb__del {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px; line-height: 16px; text-align: center;
    border: none; border-radius: 50%; padding: 0;
    background: hsla(0 0% 0% / 0.62); color: #fff;
    font-size: 12px; cursor: pointer;
    transition: background .15s ease;
}
.fab-thumb__del:hover { background: var(--c-danger); }

/* ---------- 9. 输入区 ---------- */
.fab-panel__input {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--fab-border);
    background: var(--fab-bg-3);
}
.fab-attach {
    flex: none; width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fab-bg-2);
    color: var(--c-primary);
    border: 1px solid var(--fab-border);
    border-radius: 11px; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.fab-attach:hover { background: var(--fab-hover); border-color: var(--c-primary); }
.fab-attach:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.fab-attach .icon { width: 18px; height: 18px; }

.fab-panel__input textarea {
    flex: 1; min-height: 38px; max-height: 120px; resize: none;
    padding: 9px 12px;
    font-family: inherit; font-size: 13.5px; line-height: 1.5;
    border-radius: 11px;
    border: 1px solid var(--fab-border);
    background: var(--fab-bg-2);
    color: var(--fab-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fab-panel__input textarea::placeholder { color: var(--fab-text-soft); }
.fab-panel__input textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-soft);
}

.fab-send {
    flex: none; height: 38px; padding: 0 16px;
    border: none; border-radius: 11px;
    background: var(--c-primary-fill); color: var(--fab-on-primary);
    font-weight: 600; font-size: 13px; font-family: inherit;
    cursor: pointer;
    transition: filter .15s ease, opacity .15s ease;
}
.fab-send:hover:not(:disabled) { filter: brightness(1.08); }
.fab-send:disabled { opacity: .5; cursor: not-allowed; }
.fab-send:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ---------- 10. 底部（模型选择 + 提示） ---------- */
.fab-panel__foot {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-top: 1px solid var(--fab-border);
}
.fab-model {
    flex: none; max-width: 158px;
    padding: 7px 30px 7px 10px;
    font-size: 12px; font-family: inherit;
    border-radius: 9px;
    border: 1px solid var(--fab-border);
    background-color: var(--fab-bg-2);
    background-image: var(--fab-chevron);
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 15px 15px;
    color: var(--fab-text);
    cursor: pointer;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    /* 兜底：原生弹层跟随主题，避免深色下白底白字 */
    color-scheme: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fab-model:hover { border-color: var(--c-primary); }
.fab-model:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
/* 下拉列表项显式着色（Chrome/Edge/Firefox 生效） */
.fab-model option { background: var(--fab-opt-bg); color: var(--fab-text); }
.fab-hint {
    font-size: 11px; color: var(--fab-text-soft);
    flex: 1; text-align: right; line-height: 1.4;
}

/* ---------- 11. 敏感操作确认卡片 ---------- */
.fab-confirm {
    padding: 12px 13px; border-radius: 14px;
    background: var(--fab-bg-2);
    border: 1px solid var(--c-warning);
    box-shadow: 0 6px 18px hsla(0 0% 0% / 0.18);
}
.fab-confirm__title {
    display: flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: 13px;
    color: var(--c-warning);
}
.fab-confirm__title .icon { width: 16px; height: 16px; flex: none; }
.fab-confirm__desc { margin: 8px 0; font-size: 13px; line-height: 1.6; color: var(--fab-text); }
.fab-confirm__list { margin: 0 0 10px 18px; font-size: 12.5px; color: var(--fab-text); }
.fab-confirm__list li { margin: 3px 0; }
.fab-confirm__acts { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- 12. 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .fab-panel { animation: none; }
    .fab-btn, .fab-attach, .fab-send, .fab-panel__scenes button { transition: none; }
    .fab-btn:hover { transform: none; }
    .fab-bubble--typing i { animation: none; opacity: .6; }
}

/* ---------- 13. 小屏适配 ---------- */
@media (max-width: 480px) {
    .fab-assistant { left: 12px; bottom: 12px; }
    .fab-panel { width: calc(100vw - 24px); bottom: 68px; max-height: 76vh; }
    /* 移动端触控目标 ≥44px，输入字号 ≥16px 防 iOS 自动缩放 */
    .fab-attach, .fab-send { height: 44px; }
    .fab-attach { width: 44px; }
    .fab-send { padding: 0 18px; font-size: 14px; }
    .fab-panel__input textarea { font-size: 16px; min-height: 44px; }
    .fab-panel__scenes button { padding: 7px 13px; }
    .fab-hint { display: none; }
    .fab-model { max-width: none; flex: 1; }
}