/* Coze 风格主题 - 基于 Semi Design */
/* 支持亮色/暗色模式 */

:root {
  /* 品牌色 */
  --coz-brand-0: 241, 242, 253;
  --coz-brand-1: 217, 220, 250;
  --coz-brand-2: 180, 186, 246;
  --coz-brand-3: 145, 151, 241;
  --coz-brand-4: 110, 117, 237;
  --coz-brand-5: 77, 83, 232;
  --coz-brand-6: 59, 62, 196;
  --coz-brand-7: 44, 44, 161;
  --coz-brand-8: 31, 30, 125;
  --coz-brand-9: 21, 19, 89;

  /* 灰色 */
  --coz-grey-0: 247, 247, 250;
  --coz-grey-1: 240, 240, 245;
  --coz-grey-2: 211, 211, 216;
  --coz-grey-3: 186, 186, 194;
  --coz-grey-4: 162, 162, 171;
  --coz-grey-5: 139, 139, 149;
  --coz-grey-6: 116, 116, 129;
  --coz-grey-7: 95, 94, 108;
  --coz-grey-8: 75, 74, 88;
  --coz-grey-9: 56, 55, 67;

  /* 功能色 */
  --coz-red-5: 255, 68, 30;
  --coz-green-5: 62, 194, 84;
  --coz-orange-5: 255, 150, 0;
  --coz-blue-5: 0, 117, 255;

  /* 语义色 - 亮色模式 */
  --coz-bg-0: #ffffff;
  --coz-bg-1: #ffffff;
  --coz-bg-2: #ffffff;
  --coz-bg-3: rgba(var(--coz-grey-8), 0.04);
  --coz-bg-max: #ffffff;

  --coz-fg-primary: rgba(var(--coz-grey-9), 1);
  --coz-fg-secondary: rgba(var(--coz-grey-9), 0.8);
  --coz-fg-tertiary: rgba(var(--coz-grey-9), 0.6);
  --coz-fg-dim: rgba(var(--coz-grey-9), 0.35);

  --coz-border: rgba(var(--coz-grey-9), 0.08);
  --coz-border-1: rgba(var(--coz-grey-9), 0.12);
  --coz-border-2: rgba(var(--coz-grey-9), 0.16);

  --coz-primary: rgba(var(--coz-brand-5), 1);
  --coz-primary-hover: rgba(var(--coz-brand-6), 1);
  --coz-primary-active: rgba(var(--coz-brand-7), 1);
  --coz-primary-light: rgba(var(--coz-brand-0), 1);

  --coz-success: rgba(var(--coz-green-5), 1);
  --coz-warning: rgba(var(--coz-orange-5), 1);
  --coz-danger: rgba(var(--coz-red-5), 1);

  /* 阴影 */
  --coz-shadow-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.16);
  --coz-shadow-2: 0px 4px 14px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
  --coz-shadow-elevated: 0px 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 4px 14px 0px rgba(0, 0, 0, 0.1);

  /* 圆角 */
  --coz-radius-xs: 4px;
  --coz-radius-sm: 8px;
  --coz-radius-md: 12px;
  --coz-radius-lg: 16px;
  --coz-radius-full: 9999px;

  /* 间距 */
  --coz-spacing-xs: 4px;
  --coz-spacing-sm: 8px;
  --coz-spacing-md: 12px;
  --coz-spacing-lg: 16px;
  --coz-spacing-xl: 20px;

  /* 字体 */
  --coz-font-family: "PingFang SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --coz-font-size-xs: 11px;
  --coz-font-size-sm: 12px;
  --coz-font-size-md: 14px;
  --coz-font-size-lg: 16px;
  --coz-font-size-xl: 18px;

  /* 动画 */
  --coz-transition-fast: 180ms;
  --coz-transition-normal: 300ms;
  --coz-transition-slow: 500ms;
}

/* 暗色模式 */
[data-theme="dark"],
.dark {
  --coz-bg-0: #16161a;
  --coz-bg-1: #232429;
  --coz-bg-2: #35363c;
  --coz-bg-3: #43444a;
  --coz-bg-max: #ffffff;

  --coz-fg-primary: rgba(255, 255, 255, 1);
  --coz-fg-secondary: rgba(255, 255, 255, 0.8);
  --coz-fg-tertiary: rgba(255, 255, 255, 0.6);
  --coz-fg-dim: rgba(255, 255, 255, 0.35);

  --coz-border: rgba(255, 255, 255, 0.08);
  --coz-border-1: rgba(255, 255, 255, 0.12);
  --coz-border-2: rgba(255, 255, 255, 0.16);

  --coz-primary: rgba(var(--coz-brand-5), 1);
  --coz-primary-hover: rgba(var(--coz-brand-6), 1);
  --coz-primary-light: rgba(var(--coz-brand-0), 0.2);

  --coz-shadow-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.3), 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
  --coz-shadow-2: 0px 4px 14px 0px rgba(0, 0, 0, 0.3), 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
}

/* ========== 全局基础样式 ========== */
body {
  font-family: var(--coz-font-family);
  font-size: var(--coz-font-size-md);
  line-height: 1.6;
  color: var(--coz-fg-primary);
  background: var(--coz-bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== 智能体卡片样式 ========== */
.agent-card {
  background: var(--coz-bg-0);
  border: 1px solid var(--coz-border);
  border-radius: var(--coz-radius-md);
  padding: var(--coz-spacing-lg);
  transition: all var(--coz-transition-fast) ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.agent-card:hover {
  border-color: var(--coz-primary);
  box-shadow: var(--coz-shadow-1);
  transform: translateY(-2px);
}

.agent-card-header {
  display: flex;
  align-items: center;
  gap: var(--coz-spacing-md);
  margin-bottom: var(--coz-spacing-md);
}

.agent-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--coz-radius-sm);
  background: var(--coz-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.agent-card-info {
  flex: 1;
  min-width: 0;
}

.agent-card-name {
  font-size: var(--coz-font-size-lg);
  font-weight: 600;
  color: var(--coz-fg-primary);
  margin: 0 0 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-card-desc {
  font-size: var(--coz-font-size-sm);
  color: var(--coz-fg-tertiary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.agent-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--coz-spacing-md);
  padding-top: var(--coz-spacing-md);
  border-top: 1px solid var(--coz-border);
}

.agent-card-time {
  font-size: var(--coz-font-size-xs);
  color: var(--coz-fg-dim);
}

.agent-card-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--coz-radius-full);
  font-size: var(--coz-font-size-xs);
  font-weight: 500;
}

.agent-card-status.published {
  background: rgba(var(--coz-green-5), 0.1);
  color: var(--coz-success);
}

.agent-card-status.draft {
  background: rgba(var(--coz-grey-5), 0.1);
  color: var(--coz-fg-tertiary);
}

/* ========== 编辑器布局样式 ========== */
.agent-editor {
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  background: var(--coz-bg-3);
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--coz-spacing-md) var(--coz-spacing-xl);
  background: var(--coz-bg-0);
  border-bottom: 1px solid var(--coz-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--coz-spacing-md);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--coz-spacing-sm);
}

.auto-save-hint {
  color: var(--coz-fg-dim);
  font-size: var(--coz-font-size-xs);
}

.editor-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.config-panel {
  width: 55%;
  padding: var(--coz-spacing-lg);
  overflow-y: auto;
  background: var(--coz-bg-0);
}

.preview-panel {
  width: 45%;
  display: flex;
  flex-direction: column;
  background: var(--coz-bg-1);
  border-left: 1px solid var(--coz-border);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--coz-spacing-md) var(--coz-spacing-lg);
  background: var(--coz-bg-0);
  border-bottom: 1px solid var(--coz-border);
}

.preview-chat {
  flex: 1;
  overflow: hidden;
}

/* ========== 配置面板样式 ========== */
.config-section {
  padding: var(--coz-spacing-sm) 0;
}

.config-section .ant-form-item {
  margin-bottom: var(--coz-spacing-sm);
}

.config-panel .ant-collapse {
  background: transparent;
  border: none;
}

.config-panel .ant-collapse-item {
  margin-bottom: var(--coz-spacing-sm);
  border: 1px solid var(--coz-border);
  border-radius: var(--coz-radius-md) !important;
  overflow: hidden;
}

.config-panel .ant-collapse-header {
  background: var(--coz-bg-0);
  font-weight: 600;
  padding: var(--coz-spacing-md) var(--coz-spacing-lg) !important;
}

.config-panel .ant-collapse-content {
  border-top: 1px solid var(--coz-border);
}

.config-panel .ant-collapse-content-box {
  padding: var(--coz-spacing-lg) !important;
}

.flow-info {
  display: flex;
  align-items: center;
  padding: var(--coz-spacing-md);
  background: var(--coz-bg-3);
  border-radius: var(--coz-radius-sm);
  gap: var(--coz-spacing-sm);
}

.variable-item {
  display: flex;
  gap: var(--coz-spacing-sm);
  margin-bottom: var(--coz-spacing-sm);
  align-items: center;
}

.slider-value {
  margin-left: var(--coz-spacing-sm);
  color: var(--coz-primary);
  font-size: var(--coz-font-size-sm);
  min-width: 40px;
}

/* ========== 聊天预览样式 ========== */
.preview-chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--coz-bg-0);
}

.message-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--coz-spacing-lg);
  scroll-behavior: smooth;
}

.message {
  display: flex;
  margin-bottom: var(--coz-spacing-lg);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  flex-shrink: 0;
}

.message-content {
  max-width: 75%;
  margin: 0 var(--coz-spacing-md);
}

.message.user .message-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.message-bubble {
  padding: var(--coz-spacing-md);
  border-radius: var(--coz-radius-md);
  background: var(--coz-bg-3);
  word-break: break-word;
  line-height: 1.7;
  font-size: var(--coz-font-size-md);
}

.message.user .message-bubble {
  background: var(--coz-primary);
  color: #fff;
  border-bottom-right-radius: var(--coz-radius-xs);
}

.message.assistant .message-bubble {
  border-bottom-left-radius: var(--coz-radius-xs);
}

.message-actions {
  margin-top: var(--coz-spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--coz-spacing-sm);
  opacity: 0;
  transition: opacity var(--coz-transition-fast);
}

.message:hover .message-actions {
  opacity: 1;
}

.message-meta {
  font-size: var(--coz-font-size-xs);
  color: var(--coz-fg-dim);
  margin-left: auto;
}

.input-area {
  padding: var(--coz-spacing-md) var(--coz-spacing-lg);
  border-top: 1px solid var(--coz-border);
  background: var(--coz-bg-0);
}

.input-wrapper {
  display: flex;
  gap: var(--coz-spacing-sm);
  align-items: flex-end;
  background: var(--coz-bg-3);
  border-radius: var(--coz-radius-md);
  padding: var(--coz-spacing-sm);
  border: 1px solid var(--coz-border);
  transition: border-color var(--coz-transition-fast);
}

.input-wrapper:focus-within {
  border-color: var(--coz-primary);
}

.input-wrapper .ant-input {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
}

.input-wrapper .ant-input:focus {
  box-shadow: none;
}

/* ========== 列表页样式 ========== */
.agent-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--coz-spacing-lg);
}

.agent-list-title {
  font-size: var(--coz-font-size-xl);
  font-weight: 600;
  color: var(--coz-fg-primary);
}

.agent-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--coz-spacing-lg);
}

.agent-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--coz-fg-tertiary);
}

.agent-list-empty-icon {
  font-size: 64px;
  margin-bottom: var(--coz-spacing-lg);
  opacity: 0.5;
}

/* ========== 按钮样式增强 ========== */
.coz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--coz-spacing-xs);
  padding: var(--coz-spacing-sm) var(--coz-spacing-lg);
  border-radius: var(--coz-radius-sm);
  font-size: var(--coz-font-size-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--coz-transition-fast);
  border: none;
  outline: none;
}

.coz-btn-primary {
  background: var(--coz-primary);
  color: #fff;
}

.coz-btn-primary:hover {
  background: var(--coz-primary-hover);
}

.coz-btn-default {
  background: var(--coz-bg-0);
  color: var(--coz-fg-primary);
  border: 1px solid var(--coz-border-1);
}

.coz-btn-default:hover {
  border-color: var(--coz-primary);
  color: var(--coz-primary);
}

.coz-btn-dashed {
  background: transparent;
  color: var(--coz-fg-secondary);
  border: 1px dashed var(--coz-border-1);
}

.coz-btn-dashed:hover {
  border-color: var(--coz-primary);
  color: var(--coz-primary);
}

/* ========== 标签样式 ========== */
.coz-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--coz-radius-full);
  font-size: var(--coz-font-size-xs);
  font-weight: 500;
}

.coz-tag-success {
  background: rgba(var(--coz-green-5), 0.1);
  color: var(--coz-success);
}

.coz-tag-default {
  background: var(--coz-bg-3);
  color: var(--coz-fg-tertiary);
}

/* ========== 滚动条样式 ========== */
.coz-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.coz-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.coz-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(var(--coz-grey-6), 0.3);
  border-radius: 3px;
}

.coz-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--coz-grey-6), 0.5);
}

/* ========== 加载动画 ========== */
.coz-loading-dots {
  display: flex;
  gap: 4px;
}

.coz-loading-dots span {
  width: 6px;
  height: 6px;
  background: var(--coz-primary);
  border-radius: 50%;
  animation: loadingDot 1.4s infinite ease-in-out both;
}

.coz-loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.coz-loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loadingDot {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* ========== AntDesign 按钮圆角样式 ========== */
.ant-btn {
  border-radius: var(--coz-radius-sm) !important;
}

.ant-btn-sm {
  border-radius: var(--coz-radius-xs) !important;
}

.ant-btn-lg {
  border-radius: var(--coz-radius-md) !important;
}

.ant-btn-circle {
  border-radius: 50% !important;
}

.ant-btn-round {
  border-radius: var(--coz-radius-full) !important;
}

/* Input 圆角 */
.ant-input,
.ant-input-affix-wrapper,
.ant-select-selector,
.ant-picker {
  border-radius: var(--coz-radius-sm) !important;
}

/* Card 圆角 */
.ant-card {
  border-radius: var(--coz-radius-md) !important;
}

/* Modal 圆角 */
.ant-modal-content {
  border-radius: var(--coz-radius-md) !important;
}

/* Dropdown 圆角 */
.ant-dropdown-menu {
  border-radius: var(--coz-radius-sm) !important;
}

/* ========== 响应式适配 ========== */
@media (max-width: 1024px) {
  .editor-body {
    flex-direction: column;
  }

  .config-panel,
  .preview-panel {
    width: 100%;
    height: 50%;
  }

  .preview-panel {
    border-left: none;
    border-top: 1px solid var(--coz-border);
  }
}

@media (max-width: 768px) {
  .agent-list-grid {
    grid-template-columns: 1fr;
  }
  
  .editor-header {
    flex-wrap: wrap;
    gap: var(--coz-spacing-sm);
  }
  
  .header-left,
  .header-right {
    width: 100%;
    justify-content: space-between;
  }
}