/* ================= v3.321 幕布式 AI 问答侧栏 =================
   业主口径：「我要的是像幕布这样的 AI」。
   右侧常驻面板：跟当前这一篇对话、选中原文带过来问、多轮追问。
   颜色全走站点已有变量（--bg/--panel/--line/--tx/--sub/--acc/--hov），深色主题自动跟着变。 */

#aipane{
  position:fixed;top:0;right:0;bottom:0;width:372px;max-width:94vw;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:var(--bg);border-left:1px solid var(--line);
  box-shadow:-10px 0 28px rgba(0,0,0,.10);
  z-index:900;
}
#aipane.hide{display:none!important}

/* ---- 头部 ---- */
.ai-hd{
  display:flex;align-items:center;gap:8px;
  padding:11px 12px;border-bottom:1px solid var(--line);
  background:var(--panel);flex:0 0 auto;
}
.ai-hd b{font-size:14px;color:var(--tx)}
.ai-doc{
  flex:1;min-width:0;font-size:12px;color:var(--sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ai-x{
  width:28px;height:28px;border:0;border-radius:8px;background:transparent;
  color:var(--sub);font-size:19px;line-height:1;cursor:pointer;flex:0 0 auto;
}
.ai-x:hover{background:var(--hov);color:var(--tx)}

/* ---- 消息区 ---- */
.ai-msgs{flex:1 1 auto;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.ai-tip{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;font-size:12.5px;line-height:1.85;color:var(--sub);
}
.ai-ask{display:flex;flex-wrap:wrap;gap:6px;margin-top:-2px}
.ai-chip{
  font-size:12px;color:var(--tx);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer;
}
.ai-chip:hover{background:var(--hov);border-color:var(--acc);color:var(--acc)}

.ai-msg{display:flex;gap:7px;align-items:flex-start}
.ai-msg.ai-u{justify-content:flex-end}
.ai-av{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:2px;
}
.ai-bub{
  max-width:88%;font-size:13.5px;line-height:1.9;
  padding:8px 11px;border-radius:11px;word-break:break-word;
  background:var(--panel);border:1px solid var(--line);color:var(--tx);
}
.ai-msg.ai-u .ai-bub{
  background:var(--hov);border-color:var(--line);color:var(--tx);
  border-bottom-right-radius:4px;white-space:pre-wrap;
}
.ai-msg.ai-a .ai-bub{border-bottom-left-radius:4px}

/* 思考中 */
.ai-think{color:var(--sub)}
.ai-think i{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--sub);margin-left:3px;vertical-align:middle;
  animation:aibl 1.1s infinite;
}
.ai-think i:nth-child(2){animation-delay:.15s}
.ai-think i:nth-child(3){animation-delay:.3s}
@keyframes aibl{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* ---- 底部输入 ---- */
.ai-ft{
  flex:0 0 auto;border-top:1px solid var(--line);background:var(--panel);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
}
.ai-quote{
  display:flex;align-items:flex-start;gap:6px;
  background:var(--hov);border-left:3px solid var(--acc);border-radius:6px;
  padding:6px 8px;margin-bottom:7px;font-size:12px;line-height:1.7;color:var(--sub);
}
.ai-quote.hide{display:none!important}
.ai-qt{flex:1;min-width:0}
.ai-qx{cursor:pointer;color:var(--sub);font-size:15px;line-height:1;padding:0 2px;flex:0 0 auto}
.ai-qx:hover{color:var(--danger)}

.ai-in{
  display:flex;align-items:flex-end;gap:8px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);
  padding:5px 5px 5px 10px;
}
.ai-in:focus-within{border-color:var(--acc)}
#ai-q{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  color:var(--tx);font:inherit;font-size:13.5px;line-height:1.65;
  resize:none;max-height:110px;padding:5px 0;
}
#ai-q::placeholder{color:var(--sub)}
#ai-send{
  flex:0 0 auto;width:30px;height:30px;border:0;border-radius:9px;
  background:var(--acc);color:#fff;font-size:15px;line-height:1;cursor:pointer;
}
#ai-send:hover{filter:brightness(1.08)}
#ai-send:disabled{opacity:.45;cursor:default}

/* PC：面板打开时把整站往左让，别压住正文 */
@media (min-width:821px){
  body.aipane-on #app{padding-right:372px;box-sizing:border-box}
}

/* 手机 / 窄屏：全屏抽屉 */
@media (max-width:820px){
  #aipane{width:100vw;max-width:100vw;border-left:0;box-shadow:none;z-index:999}
  body.aipane-on{overflow:hidden}
  body.aipane-on #app{padding-right:0}
  .ai-bub{max-width:92%;font-size:14px}
}

/* 阅读浮条本来 z-index:75，会被 v3.321 的 AI 面板（900）压住，抬到面板之上 */
#rdbar{z-index:950}

/* ---- 右下角常驻入口（v3.321b：入口不能藏，业主找不到就等于没做） ---- */
#aiFab{
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));
  width:48px;height:48px;border-radius:50%;
  background:var(--acc);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;line-height:1;cursor:pointer;user-select:none;
  box-shadow:0 6px 20px rgba(51,112,255,.42);
  z-index:880;transition:transform .15s ease;
}
#aiFab:hover{transform:scale(1.07)}
body.aipane-on #aiFab{display:none}
@media (max-width:820px){
  #aiFab{width:44px;height:44px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));font-size:19px}
}

/* ---- AI 回答下面的动作按钮（能动手） ---- */
.ai-act{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 2px 29px}
.ai-btn{
  font-size:12px;padding:5px 10px;border-radius:8px;cursor:pointer;
  background:var(--acc);color:#fff;border:1px solid var(--acc);
}
.ai-btn:hover{filter:brightness(1.08)}
.ai-btn.ghost{background:transparent;color:var(--tx);border-color:var(--line)}
.ai-btn.ghost:hover{background:var(--hov)}