/* ===== 右侧悬浮 AI 助手 =====
   单独一个文件，index.html 已经一百多 KB 了，这块不再往里塞。
   配色沿用页面的 --brand 系列，登录层还盖着时整块不出现。 */

/* 页面全局给 button 定了 height:34px 和左右 14px 内边距，圆按钮会被挤扁、图标只剩一条线。
   这里逐个摘干净，选择器一律保持单类，谁都不要比下面各自那条更具体，否则又压回去 */
.ai-ball,.ai-new,.ai-fill{height:auto}
.ai-ico,.ai-send{padding:0}
.ai-ico svg,.ai-send svg,.ai-new svg,.ai-fill svg{flex:none}

.ai-ball{
  /* 层级压在预览弹窗（1500）和提示弹窗（1600）之下，弹窗一开就该盖住它 */
  position:fixed;right:20px;top:50%;margin-top:-6px;z-index:1450;
  width:84px;border:0;padding:0;background:none;cursor:pointer;line-height:0;
  filter:drop-shadow(0 8px 18px rgba(29,78,216,.32));
  transition:transform .3s cubic-bezier(.32,.72,.3,1),opacity .22s;
}
/* AI.png 是 500×426，高度交给图片自己算，别拿方框把它压扁。
   上下浮动挪到图片上，按钮的 transform 留给缩进和悬停用 */
.ai-ball img{
  width:100%;height:auto;display:block;pointer-events:none;
  animation:ai-float 3.4s ease-in-out infinite;
}
.ai-ball:hover{transform:scale(1.07)}
.ai-ball:active{transform:scale(.97)}
.ai-ball.hide{display:none}
/* 缩进右侧：球往屏幕外滑走，位置让给那颗半圆把手 */
.ai-ball.tuck{transform:translateX(118px);opacity:0;pointer-events:none}
@keyframes ai-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

/* 缩进后贴在右边缘的半圆把手，点一下球再出来 */
.ai-tab{
  position:fixed;right:0;top:50%;margin-top:5px;z-index:1450;
  width:24px;height:50px;padding:0;border:0;border-radius:25px 0 0 25px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:-3px 4px 14px rgba(29,78,216,.3);
  transform:translateX(100%);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.32,.72,.3,1),opacity .22s,width .15s;
}
.ai-tab.on{transform:none;opacity:1;pointer-events:auto}
/* 颜色必须自己再钉一遍：页面全局的 button:hover 会把字色刷成蓝的，
   蓝底配蓝箭头等于箭头没了 */
.ai-tab.on:hover{width:29px;color:#fff}
.ai-tab svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* 不占满整屏高：右侧一张悬浮卡片，最高 620px，屏幕矮的时候再自己收 */
.ai-panel{
  position:fixed;top:50%;right:18px;width:396px;max-width:calc(100vw - 24px);
  height:min(620px,calc(100vh - 48px));z-index:1550;
  background:#fff;border-radius:18px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 18px 50px rgba(20,50,110,.22);
  transform:translate(calc(100% + 26px),-50%);
  transition:transform .28s cubic-bezier(.32,.72,.3,1);
}
.ai-panel.on{transform:translate(0,-50%)}
/* 拖走之后改成按 left/top 定位，右侧那套和位移都得让开；
   关的时候就地淡出，别先跳回右边再收 */
.ai-panel.free{right:auto;transform:none;transition:opacity .18s linear}
.ai-panel.free.off{opacity:0}
/* 淡出收干净之后要把位置复位，那一下必须无动画，否则能看见它往右滑一段再消失 */
.ai-panel.mute{transition:none}

/* ---------- 头部 ---------- */
/* 整条头部就是拖动把手，按钮上按下不算拖 */
.ai-head{
  display:flex;align-items:center;gap:8px;padding:13px 15px 10px;
  cursor:grab;user-select:none;touch-action:none;
}
.ai-panel.drag .ai-head{cursor:grabbing}
/* 标题和标语竖着排，横向留给「新建对话」那颗胶囊按钮 */
.ai-head .tt{flex:1;min-width:0}
.ai-head h3{margin:0;font-size:18px;font-weight:800;letter-spacing:.5px;white-space:nowrap}
.ai-head .slogan{
  font-size:11.5px;font-weight:700;color:#8a95a6;line-height:1.5;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 新建对话：左边一句文字，右边一颗圆按钮，整块都能点 */
.ai-new{
  display:flex;align-items:center;gap:7px;flex:none;cursor:pointer;
  border:0;background:none;color:#5b6b85;font-size:12.5px;font-weight:700;white-space:nowrap;
  transition:color .15s;
}
.ai-new .ic{
  width:30px;height:30px;border-radius:50%;background:#f1f5fb;color:#6b7d99;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,transform .15s;
}
.ai-new:hover{color:var(--brand)}
.ai-new:hover .ic{background:#e4ecf9;color:var(--brand)}
.ai-new:active .ic{transform:scale(.94)}
.ai-new svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ai-ico{
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;background:#f1f5fb;color:#6b7d99;
  transition:background .15s,color .15s,transform .15s;
}
.ai-ico:hover{background:#e4ecf9;color:var(--brand)}
.ai-ico:active{transform:scale(.94)}
.ai-ico.close{background:var(--brand2);color:#fff}
.ai-ico.close:hover{background:var(--brand)}
.ai-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- 对话区 ---------- */
.ai-body{flex:1;min-height:0;overflow-y:auto;padding:8px 15px 4px}
.ai-body::-webkit-scrollbar{width:6px}
.ai-body::-webkit-scrollbar-thumb{background:#dbe4f0;border-radius:3px}

/* 开场那块往下坐一截。标语缩到 28.5px 后占两行 74px，上边距的极限是 180px，
   这里留 20px 余量取 160px，换个字体时也不至于冒出滚动条 */
.ai-empty{padding-top:160px}
/* jqr.gif 是 738×861 的竖图，只给宽度，高度让它自己算 */
.ai-hi{display:block;width:46px;height:auto;margin:0}
/* 头像下面 15px 起一句大字标语：28.5px 加粗 */
.ai-slogan{
  margin:10px 0 14px;font-size:20px;font-weight:800;line-height:1.3;
  letter-spacing:.5px;color:#1f2d45;
}
.ai-intro{margin:0;font-size:13.5px;line-height:1.9;color:#2b3a52}

/* ---------- 气泡 ---------- */
.ai-turn{display:flex;gap:9px;margin:12px 0}
.ai-turn.me{justify-content:flex-end}
.ai-turn img.av{width:26px;height:auto;flex:none;align-self:flex-start;margin-top:2px}
.ai-bub{
  max-width:80%;padding:9px 13px;font-size:13.5px;line-height:1.85;
  word-break:break-word;white-space:pre-wrap;
}
.ai-turn.it .ai-bub{
  background:#eef4ff;border:1px solid #dbe7ff;color:#16233a;
  border-radius:14px 14px 14px 4px;
}
.ai-turn.me .ai-bub{
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  border-radius:14px 14px 4px 14px;
}
.ai-bub b{font-weight:700}
.ai-note{display:block;margin-top:6px;font-size:12px;color:#8a95a6}
/* 气泡末尾那颗「一键填入」 */
.ai-fill{
  display:flex;align-items:center;gap:6px;margin:10px 0 2px;cursor:pointer;
  padding:7px 12px;border-radius:10px;border:0;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;font-size:12.5px;font-weight:700;font-family:inherit;line-height:1.4;
  box-shadow:0 3px 10px rgba(37,99,235,.28);
  transition:filter .15s,transform .15s;
}
/* 字色得自己钉住：页面全局的 button:hover 会把它刷成蓝的，蓝底蓝字就看不见了 */
.ai-fill:hover{filter:brightness(1.07);color:#fff}
.ai-fill:active{transform:scale(.97)}
.ai-fill.done{
  background:linear-gradient(135deg,#2f7d4f,#3f9e63);color:#fff;
  box-shadow:none;cursor:default;opacity:1;
}
.ai-fill svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ai-turn.err .ai-bub{background:#fef2f2;border-color:#fecaca;color:#b91c1c}

/* ---------- 等待动画（Uiverse.io by JkHuger，改成蓝色） ---------- */
@keyframes loader_5191{
  from{opacity:0}
  to{opacity:1}
}
/* 等这一下就只有方块在跳，不套气泡 */
.ai-wait{position:relative;height:46px;margin:10px 0 4px}
.ai-load{position:absolute;left:22px;top:0;width:44px;height:44px}
.square{
  background:var(--brand2);width:10px;height:10px;position:absolute;top:50%;left:50%;
  margin-top:-5px;margin-left:-5px;border-radius:2px;
}
#sq1{margin-top:-25px;margin-left:-25px;animation:loader_5191 675ms ease-in-out 0s infinite alternate}
#sq2{margin-top:-25px;animation:loader_5191 675ms ease-in-out 75ms infinite alternate}
#sq3{margin-top:-25px;margin-left:15px;animation:loader_5191 675ms ease-in-out 150ms infinite}
#sq4{margin-left:-25px;animation:loader_5191 675ms ease-in-out 225ms infinite}
#sq5{animation:loader_5191 675ms ease-in-out 300ms infinite}
#sq6{margin-left:15px;animation:loader_5191 675ms ease-in-out 375ms infinite}
#sq7{margin-top:15px;margin-left:-25px;animation:loader_5191 675ms ease-in-out 450ms infinite}
#sq8{margin-top:15px;animation:loader_5191 675ms ease-in-out 525ms infinite}
#sq9{margin-top:15px;margin-left:15px;animation:loader_5191 675ms ease-in-out 600ms infinite}

/* ---------- 输入区 ---------- */
.ai-compose{
  position:relative;margin:6px 15px 0;padding:10px 12px 42px;flex:none;
  border:1px solid #e2e8f2;border-radius:14px;background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.ai-compose:focus-within{border-color:#bcd3fb;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.ai-compose textarea{
  width:100%;height:48px;border:0;outline:0;resize:none;background:none;
  font-family:inherit;font-size:13.5px;line-height:1.7;color:var(--text);
}
.ai-compose textarea::placeholder{color:#a9b4c5}
.ai-send{
  position:absolute;right:10px;bottom:10px;width:34px;height:34px;border:0;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(37,99,235,.34);transition:transform .15s,opacity .15s;
}
.ai-send:hover{transform:translateY(-1px);color:#fff}   /* 同上，别让全局 hover 把箭头刷成蓝的 */
.ai-send:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ai-send svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.ai-foot{text-align:center;font-size:11px;color:#8fb0f5;padding:7px 12px 10px;flex:none}

/* 登录层还盖着时不要露出来。登录成功那一下只摘掉 body 的 locked，所以盯这个类最准 */
body.locked .ai-ball,
body.locked .ai-tab,
body.locked .ai-panel{display:none}

@media (max-width:760px){
  .ai-panel{width:calc(100vw - 24px);height:calc(100vh - 32px);right:12px}
  .ai-ball{width:62px;margin-top:3px;right:12px}
}