/**
 * 提示词模板编辑页面样式
 */

.prompt-new-page {
  --primary-color: var(--color-primary, #00684a);
  --primary-hover: var(--color-primary-hover, #005a40);
  --primary-light: rgba(0, 104, 74, 0.1);
  --success-color: var(--color-success, #52c41a);
  --warning-color: var(--color-warning, #faad14);
  --error-color: var(--color-error, #ff4d4f);
  --text-color: rgba(0, 0, 0, 0.85);
  --text-secondary: rgba(0, 0, 0, 0.45);
  --border-color: #f0f0f0;
  --bg-gray: #f5f5f5;
}

/* 页面头部 */
.prompt-new-page .page-header {
  @apply flex justify-between items-center mb-4;
}

.prompt-new-page .page-title {
  @apply text-xl font-medium;
}

/* 表单样式 */
.prompt-new-page .form-group {
  @apply mb-5;
}

.prompt-new-page .form-label {
  @apply block mb-1.5 text-sm font-medium text-gray-800;
}

.prompt-new-page .form-input,
.prompt-new-page .form-select,
.prompt-new-page .form-textarea {
  @apply w-full px-3 py-2 text-sm border border-gray-300 rounded transition-all duration-300;
}

.prompt-new-page .form-input:focus,
.prompt-new-page .form-select:focus,
.prompt-new-page .form-textarea:focus,
.prompt-new-page .form-code-editor:focus {
  @apply outline-none border-[var(--primary-color)] shadow-[0_0_0_2px_rgba(0,104,74,0.2)];
}

.prompt-new-page .form-textarea {
  @apply min-h-[80px];
  resize: vertical;
}

.prompt-new-page .form-code-editor {
  @apply font-mono text-sm p-3 min-h-[300px] rounded border border-gray-300 w-full whitespace-pre-wrap;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  line-height: 1.5;
}

.prompt-new-page .help-text {
  @apply text-[var(--text-secondary)] text-xs mt-1;
}

/* 只读字段 */
.prompt-new-page .read-only-field {
  @apply bg-[var(--bg-gray)] cursor-not-allowed;
}

/* 变量相关样式 */
.prompt-new-page .var-container {
  @apply flex flex-wrap gap-2 mt-2;
}

.prompt-new-page .var-badge {
  @apply inline-flex items-center px-2 py-1 rounded-full bg-[var(--primary-light)] text-[var(--primary-color)] text-xs mr-1.5 mb-1.5;
}

.prompt-new-page .var-badge i {
  @apply text-sm ml-1 cursor-pointer;
}

.prompt-new-page .example-section {
  @apply mt-2 border border-[var(--border-color)] rounded p-3;
}

.prompt-new-page .example-header {
  @apply font-medium mb-2 text-sm;
}

.prompt-new-page .var-input-group {
  @apply flex gap-2 mb-2;
}

.prompt-new-page .var-input-group .form-input {
  @apply flex-1 mb-0;
}

/* 开关样式 */
.prompt-new-page .switch {
  @apply relative inline-block w-11 h-[22px];
}

.prompt-new-page .switch input {
  @apply opacity-0 w-0 h-0;
}

.prompt-new-page .slider {
  @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-400 rounded-full transition-all duration-300;
}

.prompt-new-page .slider:before {
  content: "";
  @apply absolute h-[18px] w-[18px] left-[3px] bottom-[2px] bg-white rounded-full transition-all duration-300;
}

.prompt-new-page input:checked + .slider {
  @apply bg-[var(--primary-color)];
}

.prompt-new-page input:focus + .slider {
  @apply shadow-[0_0_1px_var(--primary-color)];
}

.prompt-new-page input:checked + .slider:before {
  @apply transform translate-x-5;
}

/* 警告框样式 */
.prompt-new-page .alert {
  @apply p-3 rounded mb-4 flex items-start;
}

.prompt-new-page .alert i {
  @apply mr-2 mt-0.5;
}

.prompt-new-page .alert-info {
  @apply bg-[#e6f7ff] border border-[#91d5ff] text-[#1890ff];
}

.prompt-new-page .alert-warning {
  @apply bg-[#fffbe6] border border-[#ffe58f] text-[#faad14];
}

/* 类型标签 */
.prompt-new-page .type-tag {
  @apply inline-flex items-center px-2 py-1 rounded text-xs mb-2;
}

.prompt-new-page .type-common {
  @apply bg-[var(--primary-light)] text-[var(--primary-color)];
}

.prompt-new-page .type-extraction {
  @apply bg-[rgba(82,196,26,0.1)] text-[var(--success-color)];
}

.prompt-new-page .type-evaluation {
  @apply bg-[rgba(250,173,20,0.1)] text-[var(--warning-color)];
}

.prompt-new-page .type-summary {
  @apply bg-[rgba(24,144,255,0.1)] text-[#1890ff];
}

/* 代码块样式 */
.prompt-new-page code {
  @apply bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-sm font-mono;
}

/* 文本颜色 */
.prompt-new-page .text-error {
  @apply text-[var(--error-color)];
}

.prompt-new-page .text-secondary {
  @apply text-[var(--text-secondary)];
}

.prompt-new-page .text-primary {
  @apply text-[var(--primary-color)];
}

/* 卡片样式 */
.prompt-new-page .ant-card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 mb-4;
}

.prompt-new-page .ant-card-header {
  @apply px-4 py-3 border-b border-gray-100 font-medium;
}

.prompt-new-page .ant-card-body {
  @apply p-4;
}