/* ============================================================
   纳慧老师 · 全局浮动助手组件 v1.0
   每个页面右下角浮动气泡，点击展开聊天面板
   自动适配深色/浅色主题（复用CSS变量）
   ============================================================ */

/* —— 浮动气泡按钮 —— */
.nahui-fab {
  position: fixed; right: 28px; bottom: 28px; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nahui-fab:hover { transform: translateY(-3px) scale(1.03); }
.nahui-fab:active { transform: scale(0.96); }

/* 提示标签 */
.nahui-fab .fab-label {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff; font-size: 14px; font-weight: 700;
  padding: 9px 16px; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.45);
  white-space: nowrap;
  opacity: 0; transform: translateX(12px);
  transition: all 0.35s ease;
  pointer-events: none;
}
.nahui-fab:hover .fab-label,
.nahui-fab.notice .fab-label {
  opacity: 1; transform: translateX(0);
}

/* 圆形按钮 */
.nahui-fab .fab-btn {
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #00e5ff 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.5), 0 0 0 4px rgba(168, 85, 247, 0.15);
  position: relative;
  animation: nahui-pulse 2.5s ease-in-out infinite;
}
.nahui-fab.open .fab-btn { animation: none; }

/* 在线状态绿点 */
.nahui-fab .fab-btn::after {
  content: ""; position: absolute; right: 3px; bottom: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #22c55e; border: 2.5px solid var(--bg0, #040A16);
}

/* 通知小红点 */
.nahui-fab .fab-dot {
  position: absolute; top: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg0, #040A16);
  animation: nahui-bounce 1.2s ease-in-out infinite;
}

@keyframes nahui-pulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(124, 58, 237, 0.5), 0 0 0 4px rgba(168, 85, 247, 0.15); }
  50% { box-shadow: 0 8px 40px rgba(124, 58, 237, 0.7), 0 0 0 10px rgba(168, 85, 247, 0.08); }
}
@keyframes nahui-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* —— 聊天面板 —— */
.nahui-panel {
  position: fixed; left: auto; top: auto; right: 28px; bottom: 104px; z-index: 9998;
  width: 420px; max-width: calc(100vw - 40px);
  height: 640px; max-height: calc(100vh - 140px);
  min-width: 320px; min-height: 380px;
  background: var(--card-solid, #0C1A30);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(124, 58, 237, 0.15);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(20px) scale(0.95); pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s;
  backdrop-filter: blur(20px);
}
.nahui-panel.open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
/* 拖动后（JS 设置了 left/top 或加 .dragged）：去掉位移/缩放过渡，避免回弹打架 */
.nahui-panel.dragged { transition: opacity 0.2s, box-shadow 0.2s; }
.nahui-panel.dragging { box-shadow: 0 28px 80px rgba(0,0,0,0.6), 0 0 50px rgba(124,58,237,0.3); user-select: none; }

/* 面板头部（可按住拖动） */
.nahui-header {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 60%, #6366f1 100%);
  padding: 16px 18px; display: flex; align-items: center; gap: 12px;
  color: #fff; cursor: grab; flex-shrink: 0;
}
.nahui-header:active { cursor: grabbing; }
/* 头部里的按钮不可触发拖动 */
.nahui-header button, .nahui-header .avatar { cursor: pointer; }
.nahui-header .reset-pos {
  margin-right: 6px; border: none; background: rgba(255,255,255,0.12); color: #fff;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1;
  display: none; align-items: center; justify-content: center;
}
.nahui-header .reset-pos:hover { background: rgba(255,255,255,0.28); }
.nahui-panel.dragged .reset-pos { display: flex; }

/* 右下角自定义缩放手柄（比浏览器原生 resize 角更贴合深色UI） */
.nahui-resize {
  position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px;
  cursor: nwse-resize; z-index: 6; opacity: 0.55;
  background:
    linear-gradient(135deg, transparent 50%, rgba(168,85,247,0.9) 50%, rgba(168,85,247,0.9) 60%, transparent 60%, transparent 72%, rgba(168,85,247,0.9) 72%, rgba(168,85,247,0.9) 82%, transparent 82%);
}
.nahui-resize:hover { opacity: 1; }
.nahui-header .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.3);
}
.nahui-header .info { flex: 1; min-width: 0; }
.nahui-header .name { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.nahui-header .status { font-size: 12.5px; opacity: 0.85; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.nahui-header .status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80; display: inline-block;
  box-shadow: 0 0 6px #4ade80;
}
.nahui-header .close-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.nahui-header .close-btn:hover { background: rgba(255,255,255,0.3); }

/* 消息区域 */
.nahui-messages {
  flex: 1; overflow-y: auto; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}
.nahui-messages::-webkit-scrollbar { width: 5px; }
.nahui-messages::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.3); border-radius: 3px; }

/* 欢迎消息 */
.nahui-welcome {
  text-align: center; padding: 10px 0 4px;
}
.nahui-welcome .hi { font-size: 36px; margin-bottom: 8px; }
.nahui-welcome h4 { font-size: 16px; color: var(--ink, #EAF4FF); margin-bottom: 6px; }
.nahui-welcome p { font-size: 13.5px; color: var(--ink-2, #8FA8C8); line-height: 1.7; }

/* 消息气泡 */
.nahui-msg { display: flex; gap: 10px; max-width: 92%; }
.nahui-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.nahui-msg .msg-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.nahui-msg.bot .msg-avatar { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.nahui-msg.user .msg-avatar { background: linear-gradient(135deg, #0070CC, #00A0E9); }
.nahui-msg .msg-bubble {
  padding: 11px 15px; border-radius: 14px; font-size: 14px; line-height: 1.75;
  word-break: break-word;
}
.nahui-msg.bot .msg-bubble {
  background: var(--soft-bg, rgba(10,26,50,0.5));
  border: 1px solid var(--line, rgba(0,229,255,0.14));
  color: var(--ink, #EAF4FF);
  border-top-left-radius: 4px;
}
.nahui-msg.user .msg-bubble {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  border-top-right-radius: 4px;
}
.nahui-msg .msg-bubble code {
  background: rgba(0,0,0,0.25); padding: 2px 6px; border-radius: 4px;
  font-size: 12.5px; font-family: "SF Mono", Consolas, monospace;
}
.nahui-msg .msg-bubble pre {
  background: rgba(0,0,0,0.35); padding: 10px 12px; border-radius: 8px;
  overflow-x: auto; margin: 8px 0; font-size: 12.5px; line-height: 1.6;
}
.nahui-msg .msg-bubble pre code { background: none; padding: 0; }

/* 打字指示器 */
.nahui-typing { display: flex; gap: 10px; }
.nahui-typing .msg-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
}
.nahui-typing .typing-bubble {
  padding: 14px 18px; border-radius: 14px; border-top-left-radius: 4px;
  background: var(--soft-bg, rgba(10,26,50,0.5));
  border: 1px solid var(--line, rgba(0,229,255,0.14));
  display: flex; gap: 5px; align-items: center;
}
.nahui-typing .typing-bubble span {
  width: 7px; height: 7px; border-radius: 50%; background: #a855f7;
  animation: nahui-dot 1.4s infinite;
}
.nahui-typing .typing-bubble span:nth-child(2) { animation-delay: 0.2s; }
.nahui-typing .typing-bubble span:nth-child(3) { animation-delay: 0.4s; }
@keyframes nahui-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* 快捷问题 */
.nahui-quick {
  padding: 10px 16px; display: flex; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--line, rgba(0,229,255,0.14));
}
.nahui-quick button {
  background: var(--soft-bg, rgba(10,26,50,0.5));
  border: 1px solid rgba(168,85,247,0.3);
  color: var(--ink-2, #8FA8C8); font-size: 12.5px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.nahui-quick button:hover {
  border-color: #a855f7; color: #a855f7; background: rgba(168,85,247,0.1);
}

/* 输入区域 */
.nahui-input-area {
  padding: 12px 16px 16px; display: flex; gap: 10px; align-items: flex-end;
  border-top: 1px solid var(--line, rgba(0,229,255,0.14));
}
.nahui-input-area textarea {
  flex: 1; resize: none; border-radius: 12px;
  padding: 10px 14px; font-size: 14px; font-family: inherit;
  background: var(--soft-bg, rgba(10,26,50,0.5));
  border: 1px solid var(--line, rgba(0,229,255,0.14));
  color: var(--ink, #EAF4FF);
  outline: none; line-height: 1.5;
  max-height: 160px; min-height: 56px;
  transition: border-color 0.2s;
}
.nahui-input-area textarea:focus { border-color: rgba(168,85,247,0.5); }
.nahui-input-area textarea::placeholder { color: var(--ink-2, #8FA8C8); opacity: 0.6; }
.nahui-send {
  width: 42px; height: 42px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.nahui-send:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(168,85,247,0.4); }
.nahui-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* 错误消息 */
.nahui-msg.bot.error .msg-bubble {
  border-color: rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.08);
  color: #f87171;
}

/* 浅色主题微调 */
body.theme-light .nahui-fab .fab-btn::after,
body.theme-light .nahui-fab .fab-dot { border-color: #F2F6FA; }
body.theme-light .nahui-panel { background: #fff; }

/* —— 多模态：附件按钮 —— */
.nahui-attach {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--soft-bg, rgba(10,26,50,0.5));
  border: 1px solid var(--line, rgba(0,229,255,0.14));
  color: var(--ink-2, #8FA8C8); font-size: 19px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.nahui-attach:hover { color: #a855f7; border-color: rgba(168,85,247,0.5); background: rgba(168,85,247,0.1); }
.nahui-attach:disabled { opacity: 0.5; cursor: not-allowed; }

/* —— 待发附件预览条 —— */
.nahui-attach-preview {
  display: none; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px 0; max-height: 110px; overflow-y: auto;
}
.nahui-chip {
  position: relative; display: flex; align-items: center; gap: 6px;
  background: var(--soft-bg, rgba(10,26,50,0.5));
  border: 1px solid rgba(168,85,247,0.35); border-radius: 10px;
  padding: 4px 8px 4px 6px; max-width: 100%;
}
.nahui-chip.image img {
  width: 38px; height: 38px; object-fit: cover; border-radius: 7px; display: block;
}
.nahui-chip .chip-icon { font-size: 20px; }
.nahui-chip .chip-name {
  font-size: 12px; color: var(--ink, #EAF4FF);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nahui-chip .chip-name em { color: var(--ink-2, #8FA8C8); font-style: normal; font-size: 11px; }
.nahui-chip .chip-x {
  border: none; background: rgba(239,68,68,0.85); color: #fff;
  width: 17px; height: 17px; border-radius: 50%; cursor: pointer;
  font-size: 10px; line-height: 1; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nahui-chip .chip-x:hover { background: #ef4444; }

/* —— 用户气泡内的附件展示 —— */
.nahui-msg.user .msg-bubble .msg-text { margin-top: 6px; }
.msg-attach-img { margin-bottom: 6px; }
.msg-attach-img img {
  max-width: 200px; max-height: 150px; border-radius: 9px;
  display: block; border: 1px solid rgba(255,255,255,0.25); cursor: zoom-in;
}
.msg-attach-file {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.18); border-radius: 8px;
  padding: 6px 10px; font-size: 12.5px; margin-bottom: 6px;
}

/* —— 未登录引导条（独立系统提醒，不伪装成纳慧老师回复）—— */
.nahui-authbar {
  display: none; align-items: center; gap: 10px;
  margin: 10px 16px 0; padding: 11px 13px;
  border-radius: 12px;
  background: rgba(168,85,247,0.10);
  border: 1px solid rgba(168,85,247,0.35);
}
.nahui-authbar.show { display: flex; }
.nahui-authbar .nahui-auth-ico { font-size: 18px; flex-shrink: 0; }
.nahui-authbar .nahui-auth-text { flex: 1; min-width: 0; line-height: 1.35; }
.nahui-authbar .nahui-auth-title { font-size: 13px; font-weight: 700; color: var(--ink, #EAF4FF); }
.nahui-authbar .nahui-auth-sub { font-size: 11.5px; color: var(--ink-2, #8FA8C8); margin-top: 2px; }
.nahui-authbar .nahui-auth-btn {
  flex-shrink: 0; text-decoration: none; font-size: 12.5px; font-weight: 700;
  color: #fff; padding: 7px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 3px 12px rgba(124,58,237,0.4);
}
.nahui-authbar .nahui-auth-btn:hover { filter: brightness(1.08); }
/* 未登录时输入区给明确的禁用视觉 */
.nahui-input-area textarea:disabled { opacity: 0.55; cursor: not-allowed; }

/* —— 拖拽悬停高亮 —— */
.nahui-panel.drag-over { outline: 2px dashed #a855f7; outline-offset: -4px; }
.nahui-panel.drag-over::after {
  content: "松开以上传图片/文档";
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,58,237,0.18); color: #fff;
  font-size: 15px; font-weight: 700; pointer-events: none;
  backdrop-filter: blur(2px);
}