/* 聊天页、接入客户端页共用的那一小部分：配色变量（跟着系统浅色/深色走）、基础重置、
   选中/聚焦样式、品牌小图标、几个通用动画。每个页面只加载 base.css + 自己的那一份
   （chat.css / connect.css），不靠后写的规则去盖别的页面的样式。管理面板已迁到 zane-admin，
   admin.html 只剩一个跳转。

   这里不写任何布局，也不写裸的 header / main / footer 之类的元素选择器。 */

/* 配色：浅色默认 + 靛蓝主色，跟着系统的浅色/深色偏好自动切换（媒体查询，不用
   JS，也没有手动切换按钮——没人要求要手动切，先不做这个复杂度）。故意不再跟
   zanexie.top 首页那套暖色木质风统一了，两个产品各自的调性不用绑在一起。同样
   没有引入首页自建的 Instrument Serif/Sans 字体文件（避免两个仓库各存一份字体
   资源），标题用 ui-serif/Georgia 兜底，只是神似，不是像素级还原。*/
:root {
  --ground: #ffffff;
  --ground-2: #f4f5f7;
  --surface: #ffffff;
  --surface-hover: #eef0f3;
  --hairline: #e2e4e9;
  --hairline-soft: rgba(226, 228, 233, 0.7);
  --ink: #14161a;
  --ink-dim: #565b66;
  --ink-faint: #8b909c;
  /* --violet 是实心填充用的（按钮背景、用户消息气泡），配的是白字，所以选偏亮
     一点也行；--violet-strong 是直接当文字颜色用的（链接、图标），要压在白色
     页面背景上自己撑对比度，得比 --violet 更深，不是更浅——深色主题下关系反过来
     （浅色文字在深底上更醒目），两套主题各自算，不是简单复用同一个亮度关系。 */
  --violet: #4f46e5;
  --violet-strong: #4338ca;
  --violet-soft: rgba(79, 70, 229, 0.1);
  --violet-line: rgba(79, 70, 229, 0.35);
  --amber: #f59e0b;
  --amber-strong: #d97706;
  --amber-soft: rgba(245, 158, 11, 0.12);
  --error: #dc2626;
  --error-soft: rgba(220, 38, 38, 0.1);
  --error-line: rgba(220, 38, 38, 0.35);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-lift: 0 18px 40px -20px rgba(20, 22, 26, 0.18);
  --scrim: rgba(10, 10, 14, 0.5);
  /* 每个上游渠道一个辨识色：聊天页的模型圆点、管理面板的卡片和头像、接入页的模型卡
     都经 providerColor.js 从这里取，这是唯一登记颜色的地方。新增渠道要在这里和下面
     深色主题里各加一个（web/tests/providerColor.test.mjs 会检查）。 */
  --provider-gemini: #2f6feb;
  --provider-groq: #ea580c;
  --provider-openrouter: #9333ea;
  --provider-zhipu: #0d9488;
  --provider-deepseek: #0891b2;
  /* Cloudflare 的品牌橙跟 Groq 撞色，用黄色系区分 */
  --provider-cloudflare: #ca8a04;
  /* Codex 订阅：OpenAI 的墨绿 */
  --provider-codex: #10a37f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0e0f13;
    --ground-2: #14151b;
    --surface: #1a1c24;
    --surface-hover: #21232d;
    --hairline: #2b2d38;
    --hairline-soft: rgba(43, 45, 56, 0.6);
    --ink: #f1f2f5;
    --ink-dim: #9a9daa;
    --ink-faint: #6d707d;
    --violet: #6366f1;
    --violet-strong: #818cf8;
    --violet-soft: rgba(99, 102, 241, 0.18);
    --violet-line: rgba(99, 102, 241, 0.4);
    --amber: #fbbf24;
    --amber-strong: #fcd34d;
    --amber-soft: rgba(251, 191, 36, 0.14);
    --error: #f87171;
    --error-soft: rgba(248, 113, 113, 0.12);
    --error-line: rgba(248, 113, 113, 0.4);
    --shadow-lift: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
    --scrim: rgba(4, 4, 7, 0.65);
    --provider-gemini: #7aa8ff;
    --provider-groq: #ff9d5c;
    --provider-openrouter: #c792ea;
    --provider-zhipu: #5fd6a8;
    --provider-deepseek: #5cc9e0;
    --provider-cloudflare: #f2c94c;
    --provider-codex: #4fd1a5;
  }
}

* {
  box-sizing: border-box;
  /* 去掉移动端浏览器默认的点按高亮（一块跟这套暗色主题完全不搭的半透明灰/蓝色
     闪一下）——按钮/可点元素自己的 :hover、:active 状态已经够给反馈了。 */
  -webkit-tap-highlight-color: transparent;
}

/* 避免触屏上快速点两下被误判成双指缩放手势。`.conversation-switch`/
   `.provider-switch`/`.model-trigger`/`.model-option` 现在都是真 <button>，
   已经在这条选择器里了，不用单独列。 */
button {
  touch-action: manipulation;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 浅色主题下参考图（Qwen/DeepSeek 那种）都是纯平背景，没有这种柔光晕染——留着
   只会显得脏，所以浅色下不画。深色主题里当背景大面积纯色的时候还是太素，保留
   这团柔光当点缀，透明度和位置见下面 prefers-color-scheme 覆盖块。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  body::before {
    background:
      radial-gradient(560px circle at 12% -6%, var(--violet-soft), transparent 60%),
      radial-gradient(480px circle at 92% 18%, var(--amber-soft), transparent 60%);
  }
}

/* 上面那团柔光是 position: fixed + z-index: 0 的伪元素：每个页面最外层的内容容器要自己
   position: relative + z-index: 1 盖在它上面（聊天页的顶栏/消息区/输入区/侧栏、管理台的
   .adm、接入页的 .cn）。 */

/* 屏幕阅读器能读到、视觉上不占位置——给那些"占位符已经说明白了，但占位符不是
   可靠的可访问名字来源"的输入框补一个真正的 <label>，不改变现在的视觉布局。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: var(--violet-soft);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.brand-mark {
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(155deg, var(--violet-soft), var(--amber-soft));
  color: var(--violet-strong);
  flex-shrink: 0;
  /* 只在页面刚打开时"呼吸"两下当个打招呼，不是 infinite——这东西在侧边栏里
     常驻可见，一直闪一整个会话是骚扰，不是精致。 */
  animation: glow-pulse 3.2s ease-in-out 2;
}

@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.25);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(79, 70, 229, 0);
  }
}

.brand-mark svg {
  width: 15px;
  height: 15px;
}

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

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* iOS Safari 有个特性：聚焦一个 font-size 小于 16px 的输入框会把整个页面强行放大，
   松手也不一定弹回去。桌面端刻意用小一点的字号换取信息密度；手机、平板（pointer:
   coarse，含宽屏的 iPad）上三个页面所有能打字的框一律 16px。以前只列了聊天页的几个，
   侧栏搜索框、欢迎页的 token 框、管理页的输入框都漏了。各页面的样式表里有按 id 设
   字号的规则，优先级比这里高，所以用 !important——这是平台兼容，不是样式偏好。 */
@media (max-width: 900px), (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}