/**
 * 智能客服 — 前台浮窗样式
 *
 * 约束（项目红线）：
 *   1. 只用核心已定义的 --mn-* 变量，不自造变量名（不存在的名字 → 整条声明失效）。
 *   2. 圆角一律走 var(--mn-radius / -sm / -lg)，不写裸 px 值。
 *   3. 类名统一 fh-ais-* 前缀，避免与核心原子类同权重互相压制。
 *   4. [hidden] 必须显式 display:none —— 否则 display:flex 会覆盖 UA 默认样式，面板永远关不掉。
 *
 * @file plugins/ai_support/assets/style.css
 * @version 0.5.0
 */

/* 定位：左下角，**叠在聊天室浮窗（chat_room）的正上方**。
 * 右侧有「返回顶部 / 签到 / ai_bubble」等浮动按钮，左侧只有 chat_room 一个，
 * 所以避让它即可：聊天室 bottom 20px + 按钮 48px = 顶部 68px，这里从 80px 起 → 12px 间隙。
 * ⚠️ 若停用 chat_room，把 bottom 改回 calc(24px + env(safe-area-inset-bottom, 0px))。 */
.fh-ais {
    position: fixed;
    left: 20px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 9500;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
}

.fh-ais *,
.fh-ais *::before,
.fh-ais *::after {
    box-sizing: border-box;
}

/* ---------- 启动按钮 ---------- */

.fh-ais-launcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    cursor: pointer;
    border-radius: var(--mn-radius-lg, 12px);
    background: var(--mn-primary);
    color: var(--mn-text-inverse, #fff);
    font-size: 14px;
    font-family: inherit;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.fh-ais-launcher:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.fh-ais-launcher:focus-visible {
    outline: 2px solid var(--mn-primary);
    outline-offset: 2px;
}

.fh-ais-launcher-icon {
    flex: 0 0 auto;
    display: block;
}

.fh-ais-launcher-text {
    white-space: nowrap;
}

/* ---------- 面板 ---------- */

.fh-ais-panel {
    position: absolute;
    left: 0;
    right: auto;
    bottom: calc(100% + 12px);
    width: 360px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius-lg, 12px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.fh-ais-panel[hidden] {
    display: none;
}

.fh-ais-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mn-divider);
    background: var(--mn-bg);
}

.fh-ais-title {
    font-weight: 500;
    color: var(--mn-text);
}

.fh-ais-close {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0 4px;
    font-size: 20px;
    line-height: 1;
    color: var(--mn-text-muted);
    font-family: inherit;
}

.fh-ais-close:hover {
    color: var(--mn-text);
}

/* ---------- 消息区 ---------- */

.fh-ais-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
    min-height: 120px;
    max-height: 46vh;
    background: var(--mn-bg-card, #fff);
}

.fh-ais-welcome {
    margin: 0;
    color: var(--mn-text-muted);
    font-size: 13px;
}

.fh-ais-msg {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: var(--mn-radius, 8px);
    white-space: pre-wrap;
    word-break: break-word;
}

.fh-ais-msg-user {
    background: var(--mn-primary-subtle);
    color: var(--mn-text);
    margin-left: 32px;
}

.fh-ais-msg-bot {
    background: var(--mn-bg);
    color: var(--mn-text);
    margin-right: 32px;
}

.fh-ais-msg-bot.is-error {
    background: var(--mn-alert-error-bg);
    color: var(--mn-error);
}

/* ---------- 输入区 ---------- */

.fh-ais-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--mn-divider);
    background: var(--mn-bg);
}

.fh-ais-input {
    flex: 1 1 auto;
    min-width: 0;
    resize: vertical;
    padding: 8px 10px;
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius-sm, 6px);
    background: var(--mn-bg-input, #fff);
    color: var(--mn-text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
}

.fh-ais-input:focus {
    outline: none;
    border-color: var(--mn-primary);
}

.fh-ais-send {
    flex: 0 0 auto;
    padding: 9px 16px;
    border: none;
    cursor: pointer;
    border-radius: var(--mn-radius-sm, 6px);
    background: var(--mn-primary);
    color: var(--mn-text-inverse, #fff);
    font-size: 14px;
    font-family: inherit;
}

.fh-ais-send:disabled {
    opacity: 0.6;
    cursor: default;
}

.fh-ais-tip {
    margin: 0;
    padding: 0 12px 10px;
    font-size: 12px;
    color: var(--mn-text-muted);
    min-height: 0;
    background: var(--mn-bg);
}

.fh-ais-tip:empty {
    display: none;
}

/* ---------- 无障碍 ---------- */

.fh-ais-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 窄屏 ---------- */

/* ≤860px：断点必须与 chat_room 对齐 —— 它在这里把按钮降到 bottom 64px + 44px 高
   （顶部 108px）。客服若仍用桌面档的 80px，641~860 这段会正好压在聊天室按钮上。 */
@media (max-width: 860px) {
    .fh-ais {
        left: 12px;
        bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 640px) {
    .fh-ais-launcher {
        padding: 10px 12px;
    }

    .fh-ais-launcher-text {
        display: none;
    }

    /* 窄屏面板改为全宽 fixed，仍贴在按钮**上方**：
       按钮底部 120px + 高 42px = 顶部 162px，留 12px 间隙 → 174px。
       max-height 用 min() 兜住小屏（568px 高时 68vh 会顶出视口）。

       ⚠️⚠️ 这里的 174px 只是**没有键盘时**的基准值。position:fixed 的基准是
          **布局视口**，虚拟键盘弹出时布局视口不变、可视视口变小 → 面板纹丝不动，
          底部输入区被键盘盖住（实测现象：只露出标题和欢迎语）。
          键盘遮挡高度由 script.js 实时写进 --fh-ais-kb，见下方「键盘弹出态」。 */
    .fh-ais-panel {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(174px + var(--fh-ais-kb, 0px));
        top: auto;
        width: auto;
        max-height: min(68vh, calc(100vh - 190px - var(--fh-ais-kb, 0px)));
    }
}

/* ---------- 键盘弹出态（与屏宽无关，故意放在所有 @media 之外） ---------- */

/* ⚠️⚠️ 这一段**不能**塞进 @media (max-width:640px)：
 *   一旦设备上报的布局视口宽 > 640（横屏手机、平板、某些 WebView 不给
 *   width=device-width 而报 980px），媒体查询不命中 → 键盘样式全部失效，
 *   而 JS 算出来的 --fh-ais-kb 无人使用 → 表现为「改了一点反应都没有」。
 *   放在外面后：不管当前走哪一档布局，只要 is-keyboard 在，面板就一律
 *   改成 fixed 全宽、贴键盘上沿。顺带把 641~860px（横屏手机）也一起覆盖了。
 *
 * 特异性 (0,3,0) > 基础规则与窄屏规则 (0,1,0)，无需 !important。 */
.fh-ais.is-keyboard .fh-ais-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    top: auto;
    bottom: calc(8px + var(--fh-ais-kb, 0px));
    width: auto;
    max-height: calc(var(--fh-ais-vvh, 100vh) - 16px);
}

/* 键盘弹出期间启动按钮让位：真机键盘 250~350px，按钮（bottom 120px）本来就被
 * 埋住了；但 80~250px 这一档（第三方输入法候选栏）会露出来并被面板压住。
 * 面板里自带关闭按钮，不损失操作入口。 */
.fh-ais.is-keyboard .fh-ais-launcher {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .fh-ais-launcher {
        transition: none;
    }

    .fh-ais-launcher:hover {
        transform: none;
    }
}

/* ---------- 与聊天室浮窗共存 ---------- */

/* chat_room 的面板向上展开（bottom 78px 起、最高 320px），会压住客服按钮所在的
 * 80~122px；而客服 z-index 9500 > 聊天室 990，按钮会「浮在聊天列表上面」。
 * 所以面板展开期间让客服按钮让位，关掉即恢复。
 * ⚠️ 不支持 :has() 的浏览器整段忽略 → 退化为「按钮仍在」，不影响可用性。 */
body:has(.cr-fab-panel:not([hidden])) .fh-ais-launcher {
    opacity: 0;
    pointer-events: none;
}