/* ════════════════════════════════════════════════
   青沐书笺 · AI 客服浮窗 + Agent 覆盖层样式
   ════════════════════════════════════════════════ */

/* ─── 浮窗触发按钮 ─── */
.cs-trigger {
  position: fixed; bottom: 24px; right: 24px;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(196,154,108,.25);
  overflow: hidden; padding: 0;
  background: #F5F1E8;
}
.cs-trigger img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cs-trigger:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(196,154,108,.35); }
.cs-trigger.active { display: none; }
.cs-trigger .cs-badge {
  position: absolute; top: -2px; right: -2px;
  width: 14px; height: 14px;
  background: #E84A5F; border-radius: 50%;
  border: 2px solid #FEFCF7; display: none;
}
.cs-trigger .cs-badge.show { display: block; }

/* ─── 浮窗面板 ─── */
.cs-panel {
  position: fixed; bottom: 90px; right: 24px;
  width: 380px; max-height: 560px;
  background: #FEFCF7; border-radius: 16px;
  z-index: 9999; display: none;
  flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 40px rgba(42,38,32,.12);
  border: 1px solid #E4DCC8;
}
.cs-panel.open { display: flex; }

/* ─── 浮窗头部 ─── */
.cs-header {
  background: linear-gradient(135deg, #F5EDE0 0%, #E8E3D8 100%);
  color: #2A2620; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; border-bottom: 1px solid #E4DCC8;
}
.cs-header-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cs-header-title .cs-dot { width: 8px; height: 8px; background: #7D9A6B; border-radius: 50%; }
.cs-header-close { background: none; border: none; color: #9C9587; font-size: 20px; cursor: pointer; padding: 4px; line-height: 1; }
.cs-header-close:hover { color: #2A2620; }
.cs-agent-btn { background: none; border: none; color: #2A2620; font-size: 13px; cursor: pointer; padding: 3px 8px; line-height: 1.3; font-weight: 500; background:linear-gradient(180deg,transparent 55%,rgba(244,215,88,.5) 55%); border-radius:3px; transition:transform .15s; }
.cs-agent-btn:hover { transform:scale(1.05); }

/* ─── 浮窗消息区 ─── */
.cs-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; max-height: 380px; background: #F5F1E8; }
.cs-msg { max-width: 82%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.6; word-break: break-word; animation: csFadeIn .2s ease-out; }
.cs-msg.bot { background: #FEFCF7; color: #2A2620; align-self: flex-start; border-bottom-left-radius: 4px; border: 1px solid #E4DCC8; }
.cs-msg.user { background: #C49A6C; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.cs-msg.system { background: #E8EDE0; color: #5C7A4C; align-self: center; font-size: 12px; border-radius: 8px; padding: 6px 12px; }
@keyframes csFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ─── 浮窗快捷问题 ─── */
.cs-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; background: #F5F1E8; }
.cs-quick-btn { font-size: 12px; padding: 5px 12px; border-radius: 14px; border: 1.5px solid #E4DCC8; background: #FEFCF7; color: #5C7A4C; cursor: pointer; transition: all .15s; }
.cs-quick-btn:hover { border-color: #C49A6C; color: #B8895A; background: #F5EDE0; }

/* ─── 浮窗输入区 ─── */
.cs-input-area { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #E4DCC8; background: #FEFCF7; flex-shrink: 0; }
.cs-input { flex: 1; border: 1.5px solid #E4DCC8; border-radius: 20px; padding: 9px 16px; font-size: 14px; outline: none; resize: none; max-height: 80px; font-family: inherit; background: #F5F1E8; color: #2A2620; }
.cs-input:focus { border-color: #C49A6C; }
.cs-input::placeholder { color: #9C9587; }
.cs-send-btn { width: 38px; height: 38px; border-radius: 50%; background: #C49A6C; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.cs-send-btn:hover { background: #B8895A; }
.cs-send-btn:active { transform: scale(.92); }
.cs-send-btn:disabled { background: #DDBF92; cursor: not-allowed; }
.cs-img-btn { width: 38px; height: 38px; border-radius: 50%; background: none; border: 1.5px solid #E4DCC8; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.cs-img-btn:hover { border-color: #C49A6C; background: #F5EDE0; }

/* ─── 浮窗打字动画 ─── */
.cs-typing { display: flex; gap: 4px; padding: 10px 14px; align-self: flex-start; }
.cs-typing span { width: 7px; height: 7px; background: #C49A6C; border-radius: 50%; animation: csBounce 1.2s infinite; }
.cs-typing span:nth-child(2) { animation-delay: .15s; }
.cs-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes csBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-6px); opacity: 1; } }

/* ══════════════════════════════════════════
   Agent 独立覆盖层
   ══════════════════════════════════════════ */
.cs-agent-overlay {
  position: fixed; top: 70px; bottom: 70px; left: 0; right: 0;
  z-index: 9980; display: none; background: transparent; justify-content: center;
}
.cs-agent-overlay.open { display: flex; }

.cs-agent-container { display: flex; width: 100%; max-width: 1440px; height: 100%; background: #F5F1E8; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 40px rgba(42,38,32,.15); }

/* Agent 侧栏 */
.cs-agent-sidebar { width: 240px; min-width: 240px; background: #F5F1E8; border-right: 1px solid rgba(26,23,20,.06); display: flex; flex-direction: column; }
.cs-agent-sidebar-new { padding: 16px 16px 12px; }
.cs-agent-sidebar-new button { width: 100%; padding: 10px 16px; border: 1px solid rgba(26,23,20,.12); background: #FDFBF6; color: #1A1714; font-family: inherit; font-size: 13px; font-weight: 500; border-radius: 12px; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; }
.cs-agent-sidebar-new button:hover { background: #F6EFE3; border-color: rgba(26,23,20,.2); }
.cs-agent-conv-list { flex: 1; overflow-y: auto; padding: 4px 12px; }
.cs-agent-sidebar-bottom { display: flex; flex-direction: column; gap: 6px; }
.cs-sidebar-btn { width: 100%; padding: 8px 12px; border: 1px solid rgba(26,23,20,.1); background: #FDFBF6; color: #1A1714; font-family: inherit; font-size: 12px; font-weight: 500; border-radius: 10px; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 8px; transition: all .15s; }
.cs-sidebar-btn:hover { background: #F6EFE3; border-color: rgba(26,23,20,.18); }
.cs-sidebar-btn.active { background: #E8E0D0; border-color: rgba(26,23,20,.2); }
.cs-sidebar-toolgrid { padding: 8px 12px; }
.cs-sidebar-toolbtn { width: 100%; aspect-ratio: 1; padding: 6px 4px; border: 1px solid rgba(26,23,20,.1); background: #FDFBF6; color: #1A1714; font-family: inherit; font-size: 11px; font-weight: 500; border-radius: 14px; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: all .15s; }
.cs-sidebar-toolbtn:hover { background: #F6EFE3; border-color: rgba(26,23,20,.18); transform: scale(1.04); }
.cs-sidebar-toolbtn:active { transform: scale(0.97); }
.cs-sidebar-toolbtn-disabled { cursor: default; opacity: 0.45; }
.cs-sidebar-toolbtn-disabled:hover { background: #FDFBF6; border-color: rgba(26,23,20,.1); transform: none; }
.cs-agent-conv-item { padding: 10px 14px; border-radius: 12px; cursor: pointer; margin-bottom: 2px; font-size: 13px; }
.cs-agent-conv-item:hover { background: #EBE3D6; }
.cs-agent-conv-item.active { background: #E4DCC8; }
.cs-agent-conv-item .cs-agent-conv-title { font-weight: 500; font-size: 13.5px; color: #1A1714; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
.cs-agent-conv-item .cs-agent-conv-preview { font-size: 12px; color: #9C9587; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-agent-conv-item .cs-agent-del-btn { background: none; border: none; color: #9C9587; cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 4px; opacity: 0; transition: all .15s; line-height: 1; }
.cs-agent-conv-item:hover .cs-agent-del-btn { opacity: 1; }
.cs-agent-conv-item .cs-agent-del-btn:hover { color: #E84A5F; background: rgba(232,74,95,.08); }

/* Agent 主区域 */
.cs-agent-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cs-agent-main.gallery-mode .cs-agent-input-area { display: none; }
.cs-agent-main.gallery-mode .cs-agent-messages { padding: 10px; }
.cs-agent-main.gallery-mode .cs-agent-msg-wrap { max-width: 100%; }
.cs-agent-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; border-bottom: 1px solid rgba(26,23,20,.06); flex-shrink: 0; }
.cs-agent-header span { font-size: 14px; font-weight: 500; color: #5C4A3A; }
.cs-hl-text { background:linear-gradient(180deg,transparent 55%,rgba(244,215,88,.5) 55%); padding:0 4px; border-radius:2px; }
.cs-agent-close { background: none; border: none; color: #9C9587; font-size: 20px; cursor: pointer; padding: 4px 8px; line-height: 1; }
.cs-agent-close:hover { color: #1A1714; }

/* Agent 消息 */
.cs-agent-messages { flex: 1; overflow-y: auto; padding: 24px 28px; display: flex; flex-direction: column; align-items: center; }
.cs-agent-msg-wrap { width: 100%; max-width: 680px; display: flex; flex-direction: column; }
.cs-agent-msg { max-width: 70%; padding: 9px 13px 6px; font-size: 13.5px; line-height: 1.55; border-radius: 14px; margin-bottom: 6px; word-break: break-word; }
.cs-agent-msg.user { background: #1A1714; color: #F3EDE4; align-self: flex-end; border-bottom-right-radius: 4px; }
.cs-agent-msg.bot { background: #FDFBF6; color: #1A1714; border-bottom-left-radius: 4px; border: 1px solid rgba(26,23,20,.06); }
.cs-agent-msg.system { background: transparent; color: #9C9587; font-size: 11px; align-self: center; padding: 4px 8px; max-width: 100%; }

/* Agent 输入区 */
.cs-agent-input-area { flex-shrink: 0; padding: 0 28px 20px; display: flex; flex-direction: column; align-items: center; }
.cs-agent-input-wrap-outer { width: 100%; max-width: 680px; background: #FDFBF6; border: 1px solid rgba(26,23,20,.08); border-radius: 20px; padding: 14px 18px; box-shadow: 0 2px 12px rgba(26,23,20,.04); }

/* 上行：上传框 + 预览 + 输入 */
.cs-agent-top-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.cs-agent-upload-box { width: 44px; height: 58px; background: #F6EFE3; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #9C9587; font-size: 22px; cursor: pointer; flex-shrink: 0; transform: rotate(-4deg); transition: all .2s; }
.cs-agent-upload-box:hover { background: #EBE3D6; transform: rotate(-4deg) scale(1.05); }
.cs-agent-previews { display: flex; gap: 6px; }
.cs-agent-preview { width: 44px; height: 50px; border-radius: 6px; background-size: cover; background-position: center; flex-shrink: 0; border: 1px solid rgba(26,23,20,.08); position: relative; }
.cs-agent-preview:hover { opacity: .9; }
.cs-agent-preview-del { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: #E84A5F; color: #fff; border: none; font-size: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.cs-agent-input { flex: 1; border: none; outline: none; resize: none; font-size: 14px; line-height: 1.6; color: #1A1714; min-height: 58px; max-height: 140px; font-family: inherit; background: transparent; padding: 2px 0; }
.cs-agent-input::placeholder { color: #9C9587; }

/* 下行：工具栏 */
.cs-agent-bottom-row { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; }
.cs-agent-left-tools { display: flex; align-items: center; gap: 10px; }
.cs-agent-right-tools { display: flex; align-items: center; gap: 8px; }

.cs-agent-tool-wrap { position: relative; flex-shrink: 0; }
.cs-agent-tool-btn { padding: 6px 12px; border-radius: 14px; border: 1px solid rgba(26,23,20,.1); background: transparent; color: #5C4A3A; font-size: 12px; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.cs-agent-tool-btn:hover { border-color: rgba(26,23,20,.2); background: #F6EFE3; }
.cs-agent-tool-btn.active { background: #1A1714; color: #F3EDE4; border-color: #1A1714; }
.cs-agent-tool-btn:disabled { opacity: .35; cursor: not-allowed; }
.cs-agent-tool-btn .arrow { font-size: 9px; margin-left: 2px; opacity: .6; }

/* 下拉菜单 */
.cs-agent-drop {
  position: absolute; bottom: calc(100% + 4px); left: 0;
  background: #FDFBF6; border: 1px solid rgba(26,23,20,.12);
  border-radius: 12px; box-shadow: 0 8px 30px rgba(26,23,20,.15);
  min-width: 150px; max-height: 200px; overflow-y: auto;
  z-index: 9999; display: none;
}
.cs-agent-drop.open { display: block; }
.cs-agent-drop-item { padding: 9px 14px; font-size: 12.5px; color: #1A1714; cursor: pointer; }
.cs-agent-drop-item:hover { background: #F6EFE3; }
.cs-agent-drop-item.active { color: #C49A6C; font-weight: 500; }

/* 模型选择器 */
.cs-agent-model-sel { display: flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(26,23,20,.1); background: transparent; color: #5C4A3A; font-size: 12px; font-family: inherit; cursor: pointer; white-space: nowrap; position: relative; }
.cs-agent-model-sel:hover { border-color: rgba(26,23,20,.2); background: #F6EFE3; }
.cs-agent-model-sel .arrow { font-size: 9px; margin-left: 2px; opacity: .6; }
.cs-agent-model-drop {
  position: absolute; bottom: calc(100% + 4px); right: 0;
  background: #FDFBF6; border: 1px solid rgba(26,23,20,.12);
  border-radius: 12px; box-shadow: 0 8px 30px rgba(26,23,20,.15);
  min-width: 180px; max-height: 240px; overflow-y: auto;
  z-index: 9999; display: none;
}
.cs-agent-model-drop.open { display: block; }
.cs-agent-model-opt { padding: 10px 14px; font-size: 13px; color: #1A1714; cursor: pointer; }
.cs-agent-model-opt:hover { background: #F6EFE3; }
.cs-agent-model-opt.active { color: #C49A6C; font-weight: 500; }

/* 发送按钮 */
.cs-agent-send { width: 32px; height: 32px; border-radius: 50%; background: rgba(26,23,20,.1); color: #fff; border: none; cursor: pointer; flex-shrink: 0; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.cs-agent-send:hover { background: #3D3529; }
.cs-agent-send.active { background: #1A1714; cursor: pointer; }

/* Agent 打字动画 */
.cs-agent-typing { display: flex; gap: 4px; padding: 9px 13px; }
.cs-agent-typing span { width: 6px; height: 6px; background: #9C9587; border-radius: 50%; animation: csBounce 1.2s infinite; }
.cs-agent-typing span:nth-child(2) { animation-delay: .15s; }
.cs-agent-typing span:nth-child(3) { animation-delay: .3s; }

@media (max-width: 768px) {
  .cs-agent-overlay { top: 12px; bottom: 70px; }
  .cs-agent-container { max-width: 100%; margin: 0 8px; border-radius: 12px; }
}

@media (max-width: 480px) {
  .cs-panel { right: 8px; left: 8px; width: auto; bottom: calc(env(safe-area-inset-bottom,0px) + 8px); max-height: calc(100vh - 100px); }
  .cs-trigger { right: 16px; bottom: calc(env(safe-area-inset-bottom,0px) + 76px); width: 64px; height: 64px; }
}

/* ─── 图片工具模式 ─── */
.cs-agent-main.tool-mode .cs-agent-msg-wrap {
  overflow-y: auto;
  padding: 0;
  display: block;
}
.cs-agent-main.tool-mode .goimg-plaza,
.cs-agent-main.tool-mode .goimg-tool-wrap {
  padding: 12px;
}
.cs-agent-main.tool-mode .goimg-plaza-header h1 {
  font-size: 18px;
}
.cs-agent-main.tool-mode .goimg-plaza-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}