/* Tailwind CSS 导入 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Font size settings */
html {
  /* Default font size, corresponds to 'medium' */
  font-size: 15px;
}

html.font-size-x-small {
  font-size: 13px;
}

html.font-size-small {
  font-size: 14px;
}

html.font-size-medium {
  font-size: 15px;
}

html.font-size-large {
  font-size: 16px;
}

html.font-size-x-large {
  font-size: 17px;
}

/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: hsl(var(--ct-text-base-hsl)); /* Mapped to theme's base text */
  --vt-c-text-light-2: hsl(var(--ct-text-secondary-hsl)); /* Mapped to theme's secondary text */
  --vt-c-text-dark-1: hsl(var(--ct-text-base-hsl)); /* Mapped to theme's base text (auto-adapts in dark) */
  --vt-c-text-dark-2: hsl(var(--ct-text-secondary-hsl)); /* Mapped to theme's secondary text (auto-adapts in dark) */
}

/* semantic color variables for this project */
:root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: hsl(var(--ct-text-base-hsl));
  --color-text: hsl(var(--ct-text-base-hsl));

  --section-gap: 160px;

  /* ComfyTavern Semantic Colors */
  --ct-bg-base: #ffffff;
  --ct-bg-subtle: #f9fafb; /* 更柔和的背景 */
  --ct-bg-active: #e5e7eb;
  --ct-bg-hover: #f3f4f6;

  --ct-text-base: #111827;
  --ct-text-muted: #6b7280; /* 柔和的文本 */
  --ct-text-accent: #1d4ed8;

  --ct-border-color: #d1d5db;
  --ct-border-color-light: #e5e7eb;

  --ct-accent-color: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: hsl(var(--ct-text-base-hsl));
    --color-text: hsl(var(--ct-text-secondary-hsl));
  }
}

/* 手动设置的暗色模式 */
.dark {
  --color-background: var(--vt-c-black);
  --color-background-soft: var(--vt-c-black-soft);
  --color-background-mute: var(--vt-c-black-mute);

  --color-border: var(--vt-c-divider-dark-2);
  --color-border-hover: var(--vt-c-divider-dark-1);

  --color-heading: hsl(var(--ct-text-base-hsl));
  --color-text: hsl(var(--ct-text-secondary-hsl));

  /* ComfyTavern Semantic Colors - Dark Mode */
  --ct-bg-base: #111827; /* 深蓝灰色背景 */
  --ct-bg-subtle: #1f2937; /* 稍亮的背景 */
  --ct-bg-active: #374151;
  --ct-bg-hover: #4b5563;

  --ct-text-base: #f9fafb; /* 接近白色的文本 */
  --ct-text-muted: #9ca3af; /* 提高对比度的柔和文本 */
  --ct-text-accent: #60a5fa; /* 亮蓝色强调 */

  --ct-border-color: #4b5563; /* 更亮的边框 */
  --ct-border-color-light: #374151; /* 更亮的次级边框 */

  --ct-accent-color: #3b82f6;
}

/* 手动设置的亮色模式 */
.light {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: hsl(var(--ct-text-base-hsl));
  --color-text: hsl(var(--ct-text-base-hsl));

  /* ComfyTavern Semantic Colors - Light Mode (already defined in :root) */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}
/* Themed Form Control Styles */
/* Provides a base style for native form elements to ensure they align with the application theme. */

/* Text inputs, Textareas, Selects */
input[type='text']:not(.node-input),
input[type='password']:not(.node-input),
input[type='email']:not(.node-input),
input[type='number']:not(.node-input),
input[type='url']:not(.node-input),
input[type='search']:not(.node-input),
textarea:not(.node-input),
select:not(.node-input) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: hsl(var(--ct-background-surface-hsl));
  border: 1px solid hsl(var(--ct-border-base-hsl));
  color: hsl(var(--ct-text-base-hsl));
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem; /* Corresponds to Tailwind's rounded-md */
  transition: border-color 0.2s, box-shadow 0.2s;
  font-size: 1rem;
}

textarea {
  min-height: 80px;
}

select {
  /* Custom arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

html.dark select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

input[type='text']:not(.node-input):focus,
input[type='password']:not(.node-input):focus,
input[type='email']:not(.node-input):focus,
input[type='number']:not(.node-input):focus,
input[type='url']:not(.node-input):focus,
input[type='search']:not(.node-input):focus,
textarea:not(.node-input):focus,
select:not(.node-input):focus {
  outline: none;
  border-color: hsl(var(--ct-primary-hsl));
  box-shadow: 0 0 0 2px hsl(var(--ct-primary-hsl) / var(--ct-focus-ring-opacity, 0.5));
}

input:not(.node-input)::placeholder,
textarea:not(.node-input)::placeholder {
  color: hsl(var(--ct-text-muted-hsl));
  opacity: 1;
}

input:not(.node-input):disabled,
textarea:not(.node-input):disabled,
select:not(.node-input):disabled,
button:not(.node-input):disabled {
  background-color: hsl(var(--ct-background-base-hsl));
  color: hsl(var(--ct-text-muted-hsl));
  cursor: not-allowed;
  opacity: var(--ct-disabled-opacity, 0.7);
  border-color: hsl(var(--ct-border-base-hsl));
}

/* Custom Checkboxes and Radios */
input[type='checkbox'],
input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  height: 1.15em;
  width: 1.15em;
  background-color: hsl(var(--ct-background-surface-hsl));
  border: 1px solid hsl(var(--ct-border-base-hsl));
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  color-adjust: exact;
}

input[type='checkbox'] {
  border-radius: 0.25rem;
}

input[type='radio'] {
  border-radius: 50%;
}

input[type='checkbox']:focus,
input[type='radio']:focus {
  outline: none;
  border-color: hsl(var(--ct-primary-hsl));
  box-shadow: 0 0 0 2px hsl(var(--ct-primary-hsl) / var(--ct-focus-ring-opacity, 0.5));
}

input[type='checkbox']:checked,
input[type='radio']:checked {
  background-color: hsl(var(--ct-primary-hsl));
  border-color: hsl(var(--ct-primary-hsl));
}

input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

input[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

input[type='checkbox']:disabled,
input[type='radio']:disabled {
  background-color: hsl(var(--ct-background-base-hsl));
  opacity: var(--ct-disabled-opacity, 0.7);
}

body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 1rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global Markdown Styles (for content within .markdown-content) */
.markdown-content p {
  margin: 0.5em 0;
}
.markdown-content p:first-child {
  margin-top: 0;
}
.markdown-content p:last-child {
  margin-bottom: 0;
}

.markdown-content a {
  color: #60a5fa; /* Consider using a CSS variable if available */
  text-decoration: underline;
}
.markdown-content a:hover {
  color: #3b82f6; /* Consider using a CSS variable if available */
}

/* Inline code - Default (Dark theme oriented) */
.markdown-content code {
  background-color: rgba(110, 118, 129, 0.4); /* Dark gray background */
  padding: 0.2em 0.4em;
  margin: 0 0.1em;
  font-size: 85%;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15); /* Light border */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #c9d1d9; /* Light gray text */
}

/* Inline code - Light theme override */
:root:not(.dark) .markdown-content code,
.light .markdown-content code {
  background-color: transparent;
  color: #2c3e50; /* Dark text (match body text) */
  text-shadow: 0 0.5px 1px hsl(var(--ct-text-base-hsl) / 0.2);
}


/* Code block container */
.markdown-content pre {
  background-color: hsl(var(--ct-background-base-hsl));
  padding: 0.8em;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.8em 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 90%;
  line-height: 1.4;
  color: var(--color-text); /* Use theme variable */
  border: 1px solid var(--color-border); /* Add border for contrast */
}

/* Code inside pre */
.markdown-content pre code {
  padding: 0;
  margin: 0;
  font-size: inherit;
  background-color: transparent;
  border-radius: 0;
  border: none; /* Remove border for code inside pre */
  color: inherit;
  font-family: inherit;
}

.markdown-content ul,
.markdown-content ol {
  padding-left: 1.8em; /* Ensure enough space for markers */
  margin: 0.5em 0;
}

.markdown-content li {
  margin-bottom: 0.2em;
}

/* Explicitly set list styles to override resets */
.markdown-content ul li {
    list-style-type: disc;
    list-style-position: outside;
}
.markdown-content ol li {
    list-style-type: decimal;
    list-style-position: outside;
}


.markdown-content blockquote {
  margin: 0.5em 0;
  padding-left: 1em;
  border-left: 0.25em solid var(--color-border-hover); /* Use theme variable */
  color: var(--color-text); /* Use theme variable */
  opacity: 0.8;
}

.markdown-content hr {
  border: none;
  border-top: 1px solid var(--color-border); /* Use theme variable */
  margin: 1em 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
  color: var(--color-heading); /* Use theme variable */
  border-bottom: 1px solid var(--color-border); /* Add subtle separator */
  padding-bottom: 0.3em;
}
.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child,
.markdown-content h4:first-child,
.markdown-content h5:first-child,
.markdown-content h6:first-child {
    margin-top: 0; /* Remove top margin if heading is the first element */
}


.markdown-content h1 { font-size: 1.5em; }
.markdown-content h2 { font-size: 1.3em; }
.markdown-content h3 { font-size: 1.2em; }
.markdown-content h4 { font-size: 1.1em; }
.markdown-content h5 { font-size: 1em; }
.markdown-content h6 { font-size: 0.9em; }

.markdown-content strong { font-weight: 600; }
.markdown-content em { font-style: italic; }
.markdown-content del { text-decoration: line-through; }

.markdown-content table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
  border: 1px solid var(--color-border); /* Use theme variable */
}

.markdown-content th,
.markdown-content td {
  border: 1px solid var(--color-border); /* Use theme variable */
  padding: 0.5em;
  text-align: left;
}

.markdown-content th {
  background-color: var(--color-background-soft); /* Use theme variable */
  font-weight: 600;
}

.markdown-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5em 0;
  border-radius: 4px; /* Add slight rounding to images */
}
