/* AI 聊天页面（独立路由版）安全区域与视口适配 */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.app-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--b2);
}

/* 使用更可靠的视口单位，避免地址栏遮挡 */
@supports (height: 100dvh) {
  .app-page { min-height: 100dvh; }
}
@supports (height: 100svh) {
  .app-page { min-height: 100svh; }
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: max(0.75rem, var(--safe-top));
}

.app-content {
  flex: 1;
  min-height: 0; /* 允许子元素滚动 */
}

#ai-messages {
  min-height: 0;
}

.app-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding-bottom: var(--safe-bottom);
}

/* 提升输入框的文字可读性与对比度 */
#ai-input {
  color: hsl(var(--bc)); /* 使用主题内容色，深色主题为白色，浅色为黑色 */
  font-weight: 600;
  caret-color: hsl(var(--bc));
}

#ai-input::placeholder {
  color: hsl(var(--bc));
  opacity: 0.6; /* 占位提示降低亮度但保持可读 */
}

/* 深色模式：进一步提升可读性 */
[data-theme="dark"] #ai-input,
[data-theme="black"] #ai-input {
  color: #ffffff !important;
  caret-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  font-size: 0.95rem !important;
}

[data-theme="dark"] #ai-input::placeholder,
[data-theme="black"] #ai-input::placeholder {
  color: #ffffff !important;
  opacity: 0.85 !important;
}

#ai-input:focus {
  outline: none;
  border-color: hsl(var(--pc));
  box-shadow: 0 0 0 2px hsl(var(--pc) / 0.3);
}

/* Safari 字体填充颜色兼容 */
[data-theme="dark"] #ai-input,
[data-theme="black"] #ai-input {
  -webkit-text-fill-color: #ffffff;
}

/* 浅色模式：增强对比度与可读性 */
[data-theme="light"] #ai-input {
  color: #111827 !important; /* 深灰文字 */
  caret-color: #111827 !important;
  background-color: #FFFFFF !important; /* 纯白背景 */
  border-color: rgba(17, 24, 39, 0.15) !important; /* 深灰边框 */
  font-size: 1rem !important; /* 略增字号 */
}

[data-theme="light"] #ai-input::placeholder {
  color: #4B5563 !important; /* 中灰占位符，提升可读 */
  opacity: 0.95 !important; /* 提高亮度但保持区分 */
}