/* ============================================================
   Agent Platform Design System
   Based on Bingo Design System, adapted for Agent Platform
   ============================================================ */

/* --- Design Tokens ---
   色彩/尺度对齐 docs/UI-DESIGN-SPEC.md（Open WebUI 定制版规范）：
   - primary = Ant Daybreak Blue (#1890ff 体系)
   - 灰阶 = 规范自定义中性灰（非 Tailwind slate 默认）
   - 圆角阶梯 / 扁平+选择性阴影 / 语义色 *-500/20 配方
*/
:root {
  --ap-primary: #1890ff;        /* primary-500 主色 */
  --ap-primary-hover: #096dd9;  /* primary-600 按钮悬浮 */
  --ap-primary-active: #0050b3; /* primary-700 按下 */
  --ap-radius-sm: 4px;          /* rounded-sm 复选框/徽标 */
  --ap-radius-md: 8px;          /* rounded-lg 输入/按钮/卡片/下拉（最常用） */
  --ap-radius-lg: 12px;         /* rounded-xl 交互项/聊天/Toast */
  --ap-radius-xl: 16px;         /* rounded-2xl 模态/大容器 */
  --ap-radius-full: 9999px;     /* rounded-full 胶囊/头像 */
  --ap-space-xs: 4px;
  --ap-space-sm: 8px;
  --ap-space-md: 12px;
  --ap-space-lg: 16px;
  --ap-space-xl: 24px;
  --ap-space-2xl: 32px;
  --ap-font-xs: 11px;           /* 次级元数据 */
  --ap-font-sm: 12px;           /* 标签/徽标/元数据（高频） */
  --ap-font-base: 14px;         /* 默认正文/输入/按钮（text-sm） */
  --ap-font-md: 14px;
  --ap-font-lg: 16px;           /* 分区标题 */
  --ap-font-xl: 18px;           /* 模态/页面标题 */
  --ap-font-2xl: 22px;
  --ap-height-sm: 32px;
  --ap-height-md: 40px;
  --ap-height-lg: 48px;
  --ap-sidebar-width: 260px;    /* 规范 §6.1 桌面侧栏 260px */
  --ap-sidebar-collapsed-width: 72px;  /* 收起态图标轨宽度 */
  --ap-topbar-height: 56px;
  --ap-transition-fast: .15s ease;
  --ap-transition-base: .25s ease;
  --ap-z-modal: 1050;
  --ap-z-tooltip: 1070;
}

/* --- Light Theme ---  表面/文本/边框映射见规范 §2.4-2.5 */
[data-theme=light] {
  --ap-bg: #ffffff;            /* 卡片/容器 */
  --ap-bg-secondary: #f9f9f9;  /* 页面背景 (gray-50) */
  --ap-bg-tertiary: #ececec;   /* 抬升面 hover/激活 (gray-100) */
  --ap-bg-primary: #ffffff;    /* 顶栏/下拉等容器表面（= 卡片面） */
  --ap-input-bg: #f9f9f9;      /* 输入框背景 (gray-50) */
  --ap-text: #171717;          /* 主要文本 (gray-900) */
  --ap-text-secondary: #4e4e4e;/* 次级文本 (gray-700) */
  --ap-text-muted: #9b9b9b;    /* 弱化文本 (gray-500) */
  --ap-placeholder: #cdcdcd;   /* 占位符 (gray-300) */
  --ap-border: #ececec;        /* 默认边框 (gray-100) */
  --ap-border-hover: #cdcdcd;  /* 强边框 (gray-300) */
  --ap-primary-light: #e6f7ff; /* 主色最浅底/悬浮高亮 (primary-50) */
  --ap-success: #389e0d;       /* 绿文字 (green-700) */
  --ap-success-strong: #52c41a;/* 绿锚点 (green-500) */
  --ap-success-light: #f6ffed; /* 绿底 */
  --ap-warning: #d48806;       /* 金文字 */
  --ap-warning-strong: #faad14;/* 金锚点 */
  --ap-warning-light: #fffbe6;
  --ap-danger: #cf1322;        /* 红文字 (red-700) */
  --ap-danger-strong: #f5222d; /* 红锚点 */
  --ap-danger-light: #fff1f0;
  --ap-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --ap-shadow-md: 0 4px 6px -1px rgba(0,0,0,.08);
  --ap-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);
  --ap-shadow-3xl: 0 25px 50px -12px rgba(0,0,0,.22);
  --ap-scrollbar-thumb: rgba(120,120,120,.4);
  --ap-scrollbar-thumb-active: rgba(80,80,80,.8);
}

/* --- Dark Theme --- */
[data-theme=dark] {
  --ap-bg: #171717;            /* 卡片/容器 (gray-900) */
  --ap-bg-secondary: #0d0d0d;  /* 页面背景 (gray-950) */
  --ap-bg-tertiary: #333;      /* 抬升面 hover/激活 (gray-800) */
  --ap-bg-primary: #171717;    /* 顶栏/下拉等容器表面 */
  --ap-input-bg: #262626;      /* 输入框背景 (gray-850) */
  --ap-text: #ececec;          /* 主要文本 (gray-100) */
  --ap-text-secondary: #cdcdcd;/* 次级文本 (gray-300) */
  --ap-text-muted: #9b9b9b;    /* 弱化文本 (gray-500) */
  --ap-placeholder: #4e4e4e;   /* 占位符 (gray-700) */
  --ap-border: #262626;        /* 默认边框 (gray-850) */
  --ap-border-hover: #676767;  /* 强边框 (gray-600) */
  --ap-primary-light: #0d2538; /* 主色深底 (primary 暗变体) */
  --ap-success: #73d13d;       /* 绿文字 (green-200) */
  --ap-success-strong: #52c41a;
  --ap-success-light: #162312;
  --ap-warning: #d48806;       /* 金文字 */
  --ap-warning-strong: #faad14;
  --ap-warning-light: #2b2611;
  --ap-danger: #ff7875;        /* 红文字 (red-200) */
  --ap-danger-strong: #f5222d;
  --ap-danger-light: #2a1212;
  --ap-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --ap-shadow-md: 0 4px 6px -1px rgba(0,0,0,.4);
  --ap-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5);
  --ap-shadow-3xl: 0 25px 50px -12px rgba(0,0,0,.6);
  --ap-scrollbar-thumb: rgba(160,160,160,.3);
  --ap-scrollbar-thumb-active: rgba(200,200,200,.7);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--ap-font-base); }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ap-text);
  background: var(--ap-bg);
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--ap-primary); text-decoration: none; }
a:hover { color: var(--ap-primary-hover); }

/* --- Layout --- */
.ap-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.ap-sidebar {
  width: var(--ap-sidebar-width);
  background: var(--ap-bg-secondary);
  border-right: 1px solid var(--ap-border);
  display: flex;
  flex-direction: column;
  transition: width var(--ap-transition-base);
  overflow: hidden;
}
.ap-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Sidebar --- */
.ap-sidebar-header {
  padding: var(--ap-space-lg);
  border-bottom: 1px solid var(--ap-border);
  display: flex;
  align-items: center;
  gap: var(--ap-space-sm);
}
.ap-sidebar-logo {
  font-size: var(--ap-font-2xl);
  font-weight: 700;
  color: var(--ap-primary);
}
.ap-sidebar-title {
  font-size: var(--ap-font-lg);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.ap-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ap-space-sm);
}
.ap-sidebar-body a {
  transition: background var(--ap-transition-fast), color var(--ap-transition-fast);
}
.ap-sidebar-body a:hover {
  background: var(--ap-bg-tertiary);
}
/* 侧边栏分组标题（感知/理解/决策/执行/自反馈进化/系统配置） */
.ap-nav-group {
  font-size: var(--ap-font-xs);
  font-weight: 500;
  color: var(--ap-text-muted);
  padding: 0 12px;
  margin-top: 14px;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
}
.ap-nav-group:first-child { margin-top: 4px; }
.ap-sidebar-footer {
  padding: var(--ap-space-md);
  border-top: 1px solid var(--ap-border);
}
/* 收起/展开切换按钮 */
.ap-sidebar-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ap-text-secondary);
  border-radius: var(--ap-radius-md);
  cursor: pointer;
  transition: background var(--ap-transition-fast), color var(--ap-transition-fast);
}
.ap-sidebar-toggle:hover { background: var(--ap-bg-tertiary); color: var(--ap-text); }

/* 收起态：宽度收窄、仅留图标（class 加在 <html> 上，首屏同步生效避免宽度动画闪烁） */
html.ap-sidebar-collapsed .ap-sidebar { width: var(--ap-sidebar-collapsed-width); }
html.ap-sidebar-collapsed .ap-sidebar-header { padding: var(--ap-space-md) var(--ap-space-xs); justify-content: center; }
html.ap-sidebar-collapsed .ap-sidebar-title { display: none; }
html.ap-sidebar-collapsed .ap-sidebar-body a { text-align: center; }
html.ap-sidebar-collapsed .ap-nav-label { display: none; }
html.ap-sidebar-collapsed .ap-nav-group { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ap-sidebar { transition: none; }
}


/* --- Buttons --- */
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ap-space-xs);
  height: var(--ap-height-md);
  padding: 0 var(--ap-space-lg);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-md);
  background: var(--ap-bg);
  color: var(--ap-text);
  font-size: var(--ap-font-md);
  cursor: pointer;
  transition: all var(--ap-transition-fast);
  white-space: nowrap;
}
.ap-btn:hover { border-color: var(--ap-border-hover); background: var(--ap-bg-secondary); }
.ap-btn-primary {
  background: var(--ap-primary);
  color: #fff;
  border-color: var(--ap-primary);
}
.ap-btn-primary:hover { background: var(--ap-primary-hover); }
.ap-btn-danger { color: var(--ap-danger); border-color: var(--ap-danger); }
.ap-btn-danger:hover { background: var(--ap-danger-light); }
.ap-btn-sm { height: var(--ap-height-sm); padding: 0 var(--ap-space-md); font-size: var(--ap-font-sm); }
.ap-btn-block { width: 100%; }

/* --- Form --- */
.ap-input {
  width: 100%;
  height: var(--ap-height-md);
  padding: 0 var(--ap-space-md);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-md);
  background: var(--ap-input-bg);
  color: var(--ap-text);
  font-size: var(--ap-font-md);
  outline: none;
  transition: border-color var(--ap-transition-fast), box-shadow var(--ap-transition-fast);
}
.ap-input::placeholder { color: var(--ap-placeholder); }
.ap-input:focus { border-color: var(--ap-primary); box-shadow: 0 0 0 3px var(--ap-primary-light); }
.ap-textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--ap-space-md);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-md);
  background: var(--ap-input-bg);
  color: var(--ap-text);
  font-size: var(--ap-font-md);
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: border-color var(--ap-transition-fast), box-shadow var(--ap-transition-fast);
}
.ap-textarea::placeholder { color: var(--ap-placeholder); }
.ap-textarea:focus { border-color: var(--ap-primary); box-shadow: 0 0 0 3px var(--ap-primary-light); }

/* --- Cards ---  扁平设计，默认无阴影（规范 §1/§5.2） */
.ap-card {
  background: var(--ap-bg);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
}
.ap-card-header {
  padding: var(--ap-space-lg);
  border-bottom: 1px solid var(--ap-border);
  font-weight: 600;
}
.ap-card-body { padding: var(--ap-space-lg); }

/* --- Tags --- */
.ap-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ap-radius-full);
  font-size: var(--ap-font-sm);
  font-weight: 500;
}
.ap-tag-primary { background: var(--ap-primary-light); color: var(--ap-primary); }
.ap-tag-success { background: var(--ap-success-light); color: var(--ap-success); }
.ap-tag-warning { background: var(--ap-warning-light); color: var(--ap-warning); }
.ap-tag-danger { background: var(--ap-danger-light); color: var(--ap-danger); }

/* --- Modal --- */
.ap-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--ap-z-modal);
}
.ap-modal {
  background: var(--ap-bg);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-xl);
  box-shadow: var(--ap-shadow-3xl);
  width: 90%;
  max-width: 520px;
  max-height: 80vh;
  overflow-y: auto;
}
.ap-modal-header {
  padding: var(--ap-space-lg);
  border-bottom: 1px solid var(--ap-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ap-modal-body { padding: var(--ap-space-lg); }
.ap-modal-footer {
  padding: var(--ap-space-lg);
  border-top: 1px solid var(--ap-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--ap-space-sm);
}

/* --- Toast Message --- */
.ap-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: var(--ap-radius-lg);
  font-size: var(--ap-font-md);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: var(--ap-z-tooltip);
  animation: ap-slide-down .3s ease;
}
.ap-message.success { background: var(--ap-success-light); color: var(--ap-success); }
.ap-message.error { background: var(--ap-danger-light); color: var(--ap-danger); }
.ap-message.warning { background: var(--ap-warning-light); color: var(--ap-warning); }
@keyframes ap-slide-down {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --- Chat layout（中栏会话列表 + 右栏聊天） --- */
.ap-chat-layout { display: flex; height: 100%; overflow: hidden; }
.ap-chat-layout > .ap-chat-container { flex: 1; min-width: 0; }

/* 中栏：会话列表 */
.ap-conv-list {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--ap-border);
  background: var(--ap-bg-secondary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ap-conv-list-header { padding: var(--ap-space-md); border-bottom: 1px solid var(--ap-border); }
.ap-agent-picker { position: relative; }
.ap-agent-picker-current {
  display: flex; align-items: center; gap: var(--ap-space-sm);
  padding: var(--ap-space-sm) var(--ap-space-md);
  background: var(--ap-bg);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-md);
  cursor: pointer;
}
.ap-agent-picker-current:hover { border-color: var(--ap-border-hover); }
.ap-agent-picker-current .ap-agent-name { font-weight: 600; font-size: var(--ap-font-md); }
.ap-agent-picker-current .ap-agent-caret { margin-left: auto; color: var(--ap-text-muted); font-size: var(--ap-font-sm); }
.ap-agent-picker-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--ap-bg); border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-md); box-shadow: var(--ap-shadow-lg);
  max-height: 280px; overflow-y: auto; z-index: 50; padding: 4px;
}
.ap-agent-picker-item {
  display: block; width: 100%; text-align: left;
  padding: var(--ap-space-sm) var(--ap-space-md);
  background: none; border: none; cursor: pointer; color: inherit;
  border-radius: var(--ap-radius-sm); font-size: var(--ap-font-sm);
}
.ap-agent-picker-item:hover { background: var(--ap-bg-tertiary); }
.ap-agent-picker-item.active { background: var(--ap-primary-light); color: var(--ap-primary); font-weight: 600; }
.ap-conv-new {
  display: flex; align-items: center; justify-content: center; gap: var(--ap-space-sm);
  width: 100%; margin-top: var(--ap-space-sm);
}
.ap-conv-items { flex: 1; overflow-y: auto; padding: var(--ap-space-sm); }
.ap-conv-item {
  position: relative;
  padding: var(--ap-space-sm) var(--ap-space-md);
  border-radius: var(--ap-radius-md);
  cursor: pointer; margin-bottom: 2px;
}
.ap-conv-item:hover { background: var(--ap-bg-tertiary); }
.ap-conv-item.active { background: var(--ap-primary-light); }
.ap-conv-item-title { font-size: var(--ap-font-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 22px; }
.ap-conv-item.active .ap-conv-item-title { color: var(--ap-primary); }
.ap-conv-item-meta { font-size: var(--ap-font-sm); color: var(--ap-text-muted); margin-top: 2px; display: flex; gap: var(--ap-space-sm); }
.ap-conv-del { position: absolute; top: 4px; right: 4px; background: none; border: none; cursor: pointer; padding: 4px; color: var(--ap-text-muted); font-size: var(--ap-font-sm); border-radius: var(--ap-radius-sm); opacity: 0; transition: opacity .15s; }
.ap-conv-item:hover .ap-conv-del { opacity: .7; }
.ap-conv-del:hover { opacity: 1; color: var(--ap-danger); }

/* --- Chat Specific --- */
.ap-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ap-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--ap-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-lg);
  scrollbar-width: none; /* 隐藏滚动条：使消息内容右边距与下方发送按钮对齐 */
}
.ap-chat-messages::-webkit-scrollbar { display: none; } /* WebKit/Chrome */
.ap-chat-msg {
  display: flex;
  gap: var(--ap-space-md);
  max-width: 85%;
}
.ap-chat-msg.user { align-self: flex-end; flex-direction: row-reverse; margin-left: auto; }
.ap-chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--ap-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ap-font-md);
  font-weight: 600;
  flex-shrink: 0;
}
.ap-chat-msg.user .ap-chat-msg-avatar { background: var(--ap-primary); color: #fff; }
.ap-chat-msg.assistant .ap-chat-msg-avatar { background: var(--ap-success-light); color: var(--ap-success); }
.ap-chat-msg-body {
  padding: var(--ap-space-md);
  border-radius: var(--ap-radius-lg);
  line-height: 1.6;
}
.ap-chat-msg.user .ap-chat-msg-body {
  background: var(--ap-primary);
  color: #fff;
  border-bottom-right-radius: var(--ap-radius-sm);
}
.ap-chat-msg.assistant .ap-chat-msg-body {
  background: var(--ap-bg-secondary);
  border-bottom-left-radius: var(--ap-radius-sm);
}
.ap-chat-input-area {
  padding: var(--ap-space-lg);
  border-top: 1px solid var(--ap-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-space-sm);
  align-items: flex-end;
}
.ap-chat-input-area .ap-textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 200px;
  resize: none;
}

/* --- Tool Call Card --- */
.ap-tool-call {
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-md);
  overflow: hidden;
  margin: var(--ap-space-sm) 0;
}
.ap-tool-call-header {
  padding: var(--ap-space-sm) var(--ap-space-md);
  background: var(--ap-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: var(--ap-font-sm);
  font-weight: 500;
}
.ap-tool-call-body {
  padding: var(--ap-space-md);
  font-size: var(--ap-font-sm);
  max-height: 400px;
  overflow-y: auto;
}
.ap-tool-call-body pre {
  margin: 0;
  padding: var(--ap-space-md);
  background: var(--ap-bg-tertiary);
  border-radius: var(--ap-radius-md);
  overflow-x: auto;
  font-size: var(--ap-font-sm);
}

/* --- Login Page --- */
.ap-login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ap-bg-secondary);
}
.ap-login-card {
  width: 380px;
  padding: var(--ap-space-2xl);
  background: var(--ap-bg);
  border-radius: var(--ap-radius-lg);
  box-shadow: var(--ap-shadow-lg);
}
.ap-login-card h1 {
  text-align: center;
  margin-bottom: var(--ap-space-xl);
  color: var(--ap-primary);
}
.ap-login-card .ap-input { margin-bottom: var(--ap-space-md); }

/* --- Scrollbar ---  规范 §10：0.6rem 宽、透明轨道、圆角 thumb、明暗分色 */
::-webkit-scrollbar { width: 10px; height: 13px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ap-scrollbar-thumb);
  border-radius: var(--ap-radius-full);
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background: var(--ap-scrollbar-thumb-active); }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--ap-scrollbar-thumb) transparent; }

/* 工具类：弱化（仅 hover/active 明显）/ 完全隐藏 */
.scrollbar-hidden::-webkit-scrollbar-thumb { background: transparent; }
.scrollbar-hidden:hover::-webkit-scrollbar-thumb,
.scrollbar-hidden:focus-within::-webkit-scrollbar-thumb { background: var(--ap-scrollbar-thumb); }
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }