/* ===================== AI 智能体 ai.css ===================== */
.ai-banner {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  border-radius: 16px; margin-bottom: 14px;
  background: linear-gradient(120deg, #eef3ff 0%, #f5f0ff 55%, #eafaf3 100%);
  border: 1px solid #e2e8f5;
}
.ai-bico { font-size: 34px; line-height: 1; }
.ai-btxt h2 { margin: 0 0 4px; font-size: 20px; color: #16233d; }
.ai-btxt p { margin: 0; font-size: 13px; color: #5b6b86; }
.ai-btag {
  margin-left: auto; font-size: 12px; color: #2b6cff; background: #fff;
  border: 1px solid #cddcff; border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}

.ai-warn {
  background: #fff8e6; border: 1px solid #ffe1a8; color: #8a5a00;
  padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 12px;
}
.ai-ok {
  background: #eafaf0; border: 1px solid #b7e8cb; color: #0a6b3d;
  padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-top: 12px;
}
.ai-loading { color: #5b6b86; font-size: 13px; padding: 10px 2px; }

.ai-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ai-tab {
  border: 1px solid #dde5f2; background: #fff; color: #46536b;
  padding: 8px 16px; border-radius: 10px; font-size: 14px; cursor: pointer;
}
.ai-tab:hover { border-color: #b9cdf7; }
.ai-tab.on { background: #2b6cff; border-color: #2b6cff; color: #fff; font-weight: 600; }

/* 对话 */
.ai-chat {
  background: #fff; border: 1px solid #e6ecf6; border-radius: 14px;
  padding: 16px; height: 420px; overflow-y: auto; scroll-behavior: smooth;
}
.ai-row { display: flex; margin-bottom: 14px; }
.ai-row.me { justify-content: flex-end; }
.ai-row.ai { justify-content: flex-start; }
.ai-bubble {
  max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: 14px;
  line-height: 1.65; white-space: normal; word-break: break-word;
}
.ai-row.ai .ai-bubble { background: #f2f6ff; color: #1d2b45; border: 1px solid #e3ebfd; border-top-left-radius: 4px; }
.ai-row.me .ai-bubble { background: #2b6cff; color: #fff; border-top-right-radius: 4px; }
.ai-bubble.typing { display: flex; gap: 4px; align-items: center; }
.ai-bubble.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: #9db4e0; display: inline-block;
  animation: aiBlink 1.2s infinite ease-in-out;
}
.ai-bubble.typing i:nth-child(2) { animation-delay: .2s; }
.ai-bubble.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes aiBlink { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }

.ai-sug { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.ai-chip {
  border: 1px dashed #c3d3f5; background: #f7faff; color: #2b6cff;
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.ai-chip:hover { background: #eef4ff; border-style: solid; }

.ai-input { display: flex; gap: 10px; align-items: flex-end; }
.ai-input textarea {
  flex: 1; resize: none; font-family: inherit; font-size: 14px; line-height: 1.6;
  padding: 10px 12px; border: 1px solid #dde5f2; border-radius: 12px; outline: none;
}
.ai-input textarea:focus { border-color: #2b6cff; box-shadow: 0 0 0 3px rgba(43,108,255,.1); }
.ai-input .btn { height: 42px; padding: 0 22px; border-radius: 12px; }
.ai-tip { font-size: 12px; color: #93a1b8; margin-top: 8px; }

/* 搭建 */
.ai-build { background: #fff; border: 1px solid #e6ecf6; border-radius: 14px; padding: 18px; }
.ai-bhead h3 { margin: 0 0 6px; font-size: 17px; color: #16233d; }
.ai-bhead p { margin: 0 0 14px; font-size: 13px; color: #5b6b86; line-height: 1.6; }
.ai-build .field { margin-bottom: 12px; }
.ai-build .field label { display: block; font-size: 13px; color: #46536b; margin-bottom: 6px; }
.ai-build textarea.inp { width: 100%; resize: vertical; font-family: inherit; font-size: 14px; line-height: 1.6; }
.ai-ex { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; align-items: center; font-size: 12px; color: #93a1b8; }
.ai-go { width: 100%; height: 46px; border-radius: 12px; font-size: 15px; font-weight: 600; }
.ai-go:disabled { opacity: .6; cursor: default; }

/* 列表 */
.ai-apps { background: #fff; border: 1px solid #e6ecf6; border-radius: 14px; padding: 4px 0; }
.ai-cfg .ai-build { border: none; padding: 4px 0; }

@media (max-width: 720px) {
  .ai-chat { height: 340px; }
  .ai-bubble { max-width: 88%; }
  .ai-btag { display: none; }
}