/* WePost Emerald Theme & Markdown Preview Styles */

/* ==========================================================================
   1. 语义色彩 RGB 变量 (供 Tailwind CSS 动态计算任何透明度修饰符 /20, /30, /80)
   ========================================================================== */

/* 亮色模式 (清新雅致的现代浅灰/白底高对比质感) */
:root {
  --color-background: 248, 250, 252;             /* #f8fafc */
  --color-surface: 255, 255, 255;                /* #ffffff */
  --color-surface-dim: 241, 245, 249;            /* #f1f5f9 */
  --color-surface-bright: 255, 255, 255;         /* #ffffff */
  --color-surface-container-lowest: 255, 255, 255;/* #ffffff */
  --color-surface-container-low: 255, 255, 255;   /* #ffffff */
  --color-surface-container: 255, 255, 255;       /* #ffffff */
  --color-surface-container-high: 241, 245, 249;  /* #f1f5f9 */
  --color-surface-container-highest: 226, 232, 240;/* #e2e8f0 */
  --color-on-surface: 15, 23, 42;                /* #0f172a */
  --color-on-surface-variant: 71, 85, 105;       /* #475569 */
  --color-outline: 148, 163, 184;               /* #94a3b8 */
  --color-outline-variant: 203, 213, 225;        /* #cbd5e1 */
  --color-primary: 5, 150, 105;                  /* #059669 Emerald */
  --color-on-primary: 255, 255, 255;             /* #ffffff */
  --color-primary-container: 16, 185, 129;       /* #10b981 */
  --color-on-primary-container: 255, 255, 255;   /* #ffffff */
  --color-secondary: 13, 148, 136;               /* #0d9488 Teal */
  --color-on-secondary: 255, 255, 255;           /* #ffffff */
  --color-secondary-container: 204, 251, 241;     /* #ccfbf1 */
  --color-on-secondary-container: 15, 118, 110;   /* #0f766e */
  --color-tertiary: 4, 120, 87;                  /* #047857 */
  --color-error: 239, 68, 68;                    /* #ef4444 */
  --color-error-container: 254, 226, 226;        /* #fee2e2 */
  --color-on-error: 153, 27, 27;                 /* #991b1b */
  --color-on-error-container: 153, 27, 27;       /* #991b1b */

  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
}

/* 暗色模式 (100% 精确对应原汁原味 Emerald Studio 十六进制调色盘) */
html.dark {
  --color-background: 16, 20, 24;                /* #101418 */
  --color-surface: 16, 20, 24;                   /* #101418 */
  --color-surface-dim: 16, 20, 24;               /* #101418 */
  --color-surface-bright: 54, 58, 62;            /* #363a3e */
  --color-surface-container-lowest: 11, 15, 19;   /* #0b0f13 */
  --color-surface-container-low: 24, 28, 32;      /* #181c20 */
  --color-surface-container: 28, 32, 36;          /* #1c2024 */
  --color-surface-container-high: 38, 42, 47;     /* #262a2f */
  --color-surface-container-highest: 49, 53, 58;  /* #31353a */
  --color-on-surface: 224, 227, 232;             /* #e0e3e8 */
  --color-on-surface-variant: 188, 202, 192;     /* #bccac0 */
  --color-outline: 135, 148, 139;                /* #87948b */
  --color-outline-variant: 61, 74, 66;           /* #3d4a42 */
  --color-primary: 104, 219, 169;                /* #68dba9 */
  --color-on-primary: 0, 56, 37;                 /* #003825 */
  --color-primary-container: 37, 164, 117;       /* #25a475 */
  --color-on-primary-container: 0, 49, 31;       /* #00311f */
  --color-secondary: 78, 222, 163;               /* #4edea3 */
  --color-on-secondary: 0, 56, 36;               /* #003824 */
  --color-secondary-container: 0, 165, 114;      /* #00a572 */
  --color-on-secondary-container: 0, 49, 31;     /* #00311f */
  --color-tertiary: 69, 223, 164;                /* #45dfa4 */
  --color-error: 255, 180, 171;                  /* #ffb4ab */
  --color-error-container: 147, 0, 10;           /* #93000a */
  --color-on-error: 105, 0, 5;                   /* #690005 */
  --color-on-error-container: 255, 218, 214;     /* #ffdad6 */

  --scrollbar-track: #101418;
  --scrollbar-thumb: #262a2f;
  --scrollbar-thumb-hover: #363a3e;
}

/* ==========================================================================
   2. 细滚动条
   ========================================================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ==========================================================================
   3. 动画与过渡
   ========================================================================== */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.cursor-blink {
  animation: blink 1s infinite;
}

.view-section {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.view-section.active {
  display: block;
  opacity: 1;
}

/* ==========================================================================
   4. 亮色模式微调优化 (针对卡片阴影、边框对比度)
   ========================================================================== */
html:not(.dark) {
  color-scheme: light;
}

html:not(.dark) body {
  background-color: #f8fafc;
}

/* 解决 Tailwind /20, /30, /40 等低透明度导致浅色边框在浅色底上隐形的问题 */
html:not(.dark) [class*="border-surface-container-highest"] {
  border-color: #e2e8f0;
}

html:not(.dark) [class*="divide-surface-container-highest"] > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0;
}

/* 卡片容器专用强化样式：保证在亮色模式下具有清晰的 1px 边框与结构分离 */
html:not(.dark) .bg-surface-container,
html:not(.dark) .bg-surface-container-low,
html:not(.dark) .bg-surface-container-lowest {
  border-color: #e2e8f0;
}

/* 侧边栏与顶栏边界强化 */
html:not(.dark) aside {
  border-right-color: #e2e8f0;
  box-shadow: 1px 0 4px 0 rgba(15, 23, 42, 0.04);
}

html:not(.dark) header {
  border-bottom-color: #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.03);
}

/* 亮色模式卡片阴影：微量描边 + 柔和环境光，让卡片轮廓利落分明 */
html:not(.dark) .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.03);
}

html:not(.dark) .shadow-md {
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.07), 0 1px 2px -1px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.03);
}

html:not(.dark) .shadow-lg {
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.03);
}

html:not(.dark) #url-pane textarea {
  background-color: #ffffff;
}

/* 实时控制台终端在亮色模式下的边界与内部层次 */
html:not(.dark) #console-log-body {
  background-color: #f8fafc;
  color: #334155;
}

html:not(.dark) #console-log-body .text-outline\/60 {
  color: #64748b;
}

/* 实时流水线列表项边界优化 */
html:not(.dark) #monitor-items-waterfall > div {
  border-bottom-color: #e2e8f0;
}

html:not(.dark) #monitor-items-waterfall > div:last-child {
  border-bottom-color: transparent;
}

/* ==========================================================================
   5. Markdown 预览自适应
   ========================================================================== */
.markdown-body {
  color: rgb(var(--color-on-surface));
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.75;
}
.markdown-body h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: rgb(var(--color-on-surface));
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(var(--color-outline-variant), 0.5);
  padding-bottom: 0.5rem;
}
.markdown-body h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgb(var(--color-on-surface));
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--color-outline-variant), 0.5);
  padding-bottom: 0.25rem;
}
.markdown-body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(var(--color-on-surface));
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.markdown-body p {
  margin-bottom: 1rem;
}
.markdown-body a {
  color: rgb(var(--color-primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.markdown-body a:hover {
  filter: brightness(1.15);
}
.markdown-body ul, .markdown-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.markdown-body ul {
  list-style-type: disc;
}
.markdown-body ol {
  list-style-type: decimal;
}
.markdown-body blockquote {
  border-left: 4px solid rgb(var(--color-primary));
  padding-left: 1rem;
  color: rgb(var(--color-on-surface-variant));
  margin: 1rem 0;
  background: rgba(var(--color-primary), 0.08);
  border-radius: 0 4px 4px 0;
}
.markdown-body code {
  background: rgb(var(--color-surface-container));
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.875em;
  color: rgb(var(--color-primary));
}
.markdown-body pre {
  background: rgb(var(--color-surface-container-lowest));
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid rgba(var(--color-outline-variant), 0.5);
  margin: 1rem 0;
}
.markdown-body pre code {
  background: transparent;
  padding: 0;
  color: rgb(var(--color-on-surface));
}
.markdown-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem auto;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.markdown-body hr {
  border: 0;
  height: 1px;
  background: rgba(var(--color-outline-variant), 0.5);
  margin: 1.5rem 0;
}