/*
 * octa 前端样式。规范见 docs/ui-design.md（对标 Arco Design / Ant Design）。
 * 颜色、字号、间距、圆角、控件高度、阴影、层级、动效全部走 :root 里的令牌；
 * 明暗两套，默认跟随系统，顶栏按钮可手动切换。除令牌定义块外，这个文件里不得再出现颜色字面量。
 *
 * 色阶用途：无后缀 = 填充 / 图标 / 边框 / 状态点；-text = 文字；-bg = 浅底；
 * 实心按钮另有 -solid 令牌（白字需 ≥ 4.5:1）。
 */

:root {
  color-scheme: light;

  /* 品牌 */
  --primary: #165dff;
  --primary-hover: #4080ff;        /* 链接、描边悬停；白字实心底上只有 3.65:1，不用于实心按钮 */
  --primary-solid-hover: #0e42d2;  /* 实心主按钮悬停，白字 7.70:1 */
  --primary-solid-active: #072ca6; /* 实心主按钮按下，白字 10.94:1 */
  --primary-text: #165dff;         /* 蓝色文字与链接 */
  --primary-bg: #e8f3ff;           /* 选中底、信息条、用户气泡 */
  --primary-border: #bedaff;       /* 提示条的边框 */
  --primary-fg: #ffffff;           /* 实心主按钮上的字 */
  --primary-ring: rgba(22, 93, 255, 0.2);
  --danger-ring: rgba(245, 63, 63, 0.2);
  --on-solid: #ffffff;

  /* 功能色 */
  --success: #00b42a;
  --success-text: #008026;
  --success-bg: #e8ffea;
  --success-border: #aff0b5;
  --warn: #ff7d00;
  --warn-text: #a64500;
  --warn-bg: #fff7e8;
  --warn-border: #ffe4ba;
  --danger: #f53f3f;
  --danger-text: #cb272d;
  --danger-bg: #ffece8;
  --danger-border: #fdcdc5;
  --danger-solid: #cb272d;         /* 实心危险按钮，白字 5.43:1 */
  --danger-solid-hover: #a1161b;

  /* 中性 */
  --text: #1d2129;
  --muted: #4e5969;
  --placeholder: #86909c;          /* 3.24:1，只用于占位符，不得承载必读信息 */
  --disabled: #c9cdd4;             /* P1 的禁用态使用 */
  --bg: #f2f3f5;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --popup: #ffffff;                /* 对话框、下拉面板、提示 */
  --fill-active: #e5e6eb;          /* P1 的骨架屏、进度条轨道使用 */
  --fill-hover: #f2f3f5;           /* 表格行悬停（Arco gray-2） */
  --border: #e5e6eb;
  --border-strong: #c9cdd4;
  --code-bg: var(--panel-2);
  --user-bubble: var(--primary-bg);
  --tooltip-bg: #1d2129;            /* 文字提示：深底白字（Arco gray-10）；暗色下换成更亮一级的底 */
  --tooltip-fg: #ffffff;

  /* 字体与字号 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --fs-caption: 12px;
  --fs-body: 14px;
  --fs-code: 13px;
  --fs-title-3: 16px;
  --fs-title-2: 20px;
  --fs-title-1: 24px;
  --fs-chat: 15px;                 /* 对话正文：阅读型内容比操作界面大一档 */
  --fs-chat-h3: 18px;              /* 对话里 Markdown 的三级标题（二级 20、四级 16） */
  --lh-body: 1.5715;
  --lh-chat: 1.7;

  /* 间距（4px 栅格，2 / 6 / 10 仅用于微调） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* 圆角 */
  --radius-xs: 2px;                /* 标签、行内代码 */
  --radius-sm: 4px;                /* 按钮、输入、下拉、菜单项 */
  --radius-md: 8px;                /* 卡片、弹层、对话框 */
  --radius-lg: 12px;               /* 仅对话气泡与输入框 */
  --radius-pill: 999px;           /* 仅开关 */

  /* 控件高度；< 768 时整体上调一档（触控），见文件末尾 */
  --h-sm: 24px;
  --h-md: 32px;
  --h-lg: 40px;
  --topbar-h: 56px;

  /* 阴影、层级、动效 */
  --shadow-1: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.1);
  --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.1);
  --mask: rgba(0, 0, 0, 0.45);
  --z-drawer: 20;
  --z-popup: 30;
  --z-tooltip: 40;
  --z-modal: 90;
  --z-message: 100;
  --t-fast: 100ms;
  --t-base: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #17171a;
    --panel: #232324;
    --panel-2: #2a2a2b;
    --popup: #313132;
    --fill-active: #373739;
    --fill-hover: #2a2a2b;
    --tooltip-bg: #373739;
    --border: #333335;
    --border-strong: #48484a;
    --text: rgba(255, 255, 255, 0.9);
    --muted: rgba(255, 255, 255, 0.7);
    --placeholder: rgba(255, 255, 255, 0.5);
    --disabled: rgba(255, 255, 255, 0.3);
    --primary: #4080ff;
    --primary-hover: #6b9bff;
    --primary-solid-hover: #6b9bff;
    --primary-solid-active: #8bb0ff;
    --primary-text: #6b9bff;
    --primary-bg: #1b2a47;
    --primary-border: rgba(107, 155, 255, 0.35);
    --primary-fg: #0b1220;
    --primary-ring: rgba(64, 128, 255, 0.35);
    --danger-ring: rgba(247, 101, 96, 0.35);
    --success: #23c343;
    --success-text: #6fdc9e;
    --success-bg: #12301f;
    --success-border: rgba(111, 220, 158, 0.35);
    --warn: #ff9a2e;
    --warn-text: #ffc069;
    --warn-bg: #3a2c12;
    --warn-border: rgba(255, 192, 105, 0.35);
    --danger: #f76560;
    --danger-text: #ff8a80;
    --danger-bg: #3a1c1a;
    --danger-border: rgba(255, 138, 128, 0.35);
    --shadow-1: 0 2px 5px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.4);
    --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5);
    --mask: rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17171a;
  --panel: #232324;
  --panel-2: #2a2a2b;
  --popup: #313132;
  --fill-active: #373739;
  --fill-hover: #2a2a2b;
  --tooltip-bg: #373739;
  --border: #333335;
  --border-strong: #48484a;
  --text: rgba(255, 255, 255, 0.9);
  --muted: rgba(255, 255, 255, 0.7);
  --placeholder: rgba(255, 255, 255, 0.5);
  --disabled: rgba(255, 255, 255, 0.3);
  --primary: #4080ff;
  --primary-hover: #6b9bff;
  --primary-solid-hover: #6b9bff;
  --primary-solid-active: #8bb0ff;
  --primary-text: #6b9bff;
  --primary-bg: #1b2a47;
  --primary-border: rgba(107, 155, 255, 0.35);
  --primary-fg: #0b1220;
  --primary-ring: rgba(64, 128, 255, 0.35);
  --danger-ring: rgba(247, 101, 96, 0.35);
  --success: #23c343;
  --success-text: #6fdc9e;
  --success-bg: #12301f;
  --success-border: rgba(111, 220, 158, 0.35);
  --warn: #ff9a2e;
  --warn-text: #ffc069;
  --warn-bg: #3a2c12;
  --warn-border: rgba(255, 192, 105, 0.35);
  --danger: #f76560;
  --danger-text: #ff8a80;
  --danger-bg: #3a1c1a;
  --danger-border: rgba(255, 138, 128, 0.35);
  --shadow-1: 0 2px 5px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5);
  --mask: rgba(0, 0, 0, 0.6);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.boot {
  margin: auto;
  color: var(--muted);
}

a {
  color: var(--primary-text);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

[hidden] {
  display: none !important;
}

.muted {
  color: var(--muted);
}

/* ------------------------------------------------------------ 按钮与表单 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h-md);
  padding: 0 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.btn:hover:not(:disabled) {
  background: var(--panel-2);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-solid-hover);
  border-color: var(--primary-solid-hover);
}

.btn-primary:active:not(:disabled) {
  background: var(--primary-solid-active);
  border-color: var(--primary-solid-active);
}

.btn-danger {
  background: var(--danger-solid);
  border-color: var(--danger-solid);
  color: var(--on-solid);
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-solid-hover);
  border-color: var(--danger-solid-hover);
}

.btn-small {
  height: var(--h-sm);
  padding: 0 7px;
}

.btn-block {
  width: 100%;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-md);
  height: var(--h-md);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--muted);
}

.icon-btn:hover {
  background: var(--panel-2);
  color: var(--text);
}

.icon {
  flex: none;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.form-row label {
  color: var(--text);
}

.form-row-check {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.form-hint {
  font-size: var(--fs-caption);
  line-height: 20px;
  color: var(--muted);
}

/* 必填星号与字段下方的行内错误；出错的字段整行标红边框 */
.req {
  margin-left: 2px;
  color: var(--danger-text);
}

.form-error-text {
  font-size: var(--fs-caption);
  line-height: 20px;
  color: var(--danger-text);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
input:not([type]),
select,
textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

/* 输入框与下拉框同高；文本域按内容撑高 */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
input:not([type]),
select {
  height: var(--h-md);
  padding: 0 11px;
}

textarea {
  padding: 5px 11px;
}

:where(input, select, textarea):hover:not(:disabled) {
  border-color: var(--primary-hover);
}

/* 聚焦：主色边框 + 2px 主色外环（边框本身对白底 / 暗底都 ≥ 3:1）。放在全局 :focus-visible 之后。 */
:where(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-ring);
}

::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

/* 出错状态要压过悬停与聚焦（它们的选择器权重相同，靠写在后面取胜） */
.has-error :where(input, select, textarea):not(:disabled) {
  border-color: var(--danger);
}

.has-error :where(input, select, textarea):focus-visible {
  box-shadow: 0 0 0 2px var(--danger-ring);
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}


/* ------------------------------------------------------------ 徽标与提示 */

.badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--fs-caption);
  line-height: 20px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}

.badge-internal {
  color: var(--success-text);
  background: var(--success-bg);
  border-color: transparent;
}

.badge-external {
  color: var(--warn-text);
  background: var(--warn-bg);
  border-color: transparent;
}

.badge-admin {
  color: var(--primary-text);
  background: var(--primary-bg);
  border-color: transparent;
}

/* 状态类徽标：不可用（被管理员禁用）与待确认 */
.badge-blocked {
  color: var(--danger-text);
  background: var(--danger-bg);
  border-color: transparent;
}

.badge-pending {
  color: var(--warn-text);
  background: transparent;
  border-color: var(--warn);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--fs-caption);
  line-height: 20px;
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
}

.chip-ok {
  background: var(--success-bg);
  color: var(--success-text);
}

.chip-failed,
.chip-timeout,
.chip-denied {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.chip-running {
  background: var(--primary-bg);
  color: var(--primary-text);
}

/* 状态点：圆点 + 文字，用于"启用 / 停用 / 正常"这类状态；标签（.badge）用于分类与范围 */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.status-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--placeholder);
}

.status-success .status-dot { background: var(--success); }
.status-warn .status-dot { background: var(--warn); }
.status-danger .status-dot { background: var(--danger); }
.status-info .status-dot { background: var(--primary); }

/* 提示条（Alert）：浅底 + 同色边框 + 状态色图标；文字一律用正文色，对比度才有保证。
   外边距由所在的容器决定（对话框与登录卡片里留 12px，对话区里由 .turn 的间距管） */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}

.alert .icon {
  flex: none;
  margin-top: 2px;
}

.alert-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.alert-title {
  font-weight: 600;
}

.alert-title + .alert-text {
  margin-top: var(--space-1);
}

.alert-text:empty {
  display: none;
}

.alert-info { background: var(--primary-bg); border-color: var(--primary-border); }
.alert-info .icon { color: var(--primary); }
.alert-success { background: var(--success-bg); border-color: var(--success-border); }
.alert-success .icon { color: var(--success); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-border); }
.alert-warn .icon { color: var(--warn); }
.alert-error { background: var(--danger-bg); border-color: var(--danger-border); }
.alert-error .icon { color: var(--danger); }

.modal .alert,
.login-card .alert {
  margin: 0 0 var(--space-3);
}

/* 顶部居中的消息：图标 + 文字，错误带关闭键；宿主不拦截点击，只有消息本身可交互 */
.toast-host {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-message);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  max-width: min(480px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--popup);
  box-shadow: var(--shadow-2);
  animation: toast-in var(--t-base) ease-out;
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-base), transform var(--t-base);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
}

.toast .icon {
  margin-top: 2px;
}

.toast-success .icon { color: var(--success); }
.toast-error .icon { color: var(--danger); }
.toast-info .icon { color: var(--primary); }

.toast-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 -4px 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.toast-close:hover {
  background: var(--panel-2);
  color: var(--text);
}

/* ------------------------------------------------------------ 气泡确认 */

.popconfirm {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-popup);
  width: min(280px, calc(100vw - 16px));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--popup);
  box-shadow: var(--shadow-2);
  animation: pop-in var(--t-base) ease-out;
}

@keyframes pop-in {
  from { opacity: 0; }
}

/* 小箭头：旋转 45° 的方块，只保留朝向触发按钮的两条边框 */
.popconfirm-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--popup);
  border: 1px solid var(--border);
  transform: rotate(45deg);
}

.popconfirm[data-side="bottom"] .popconfirm-arrow {
  top: -6px;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.popconfirm[data-side="top"] .popconfirm-arrow {
  bottom: -6px;
  border-left-color: transparent;
  border-top-color: transparent;
}

.popconfirm-body {
  display: flex;
  gap: var(--space-2);
}

.popconfirm-body .icon {
  flex: none;
  margin-top: 2px;
  color: var(--warn);
}

.popconfirm-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.popconfirm-msg {
  margin-top: var(--space-1);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.popconfirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ------------------------------------------------------------ 文字提示 */

.tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-tooltip);
  max-width: 280px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: var(--fs-caption);
  line-height: 20px;
  overflow-wrap: anywhere;
  pointer-events: none; /* 不挡住鼠标，也就不会因为自己盖住按钮而闪烁 */
  animation: pop-in var(--t-fast) ease-out;
}

.tooltip-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--tooltip-bg);
  transform: rotate(45deg);
}

.tooltip[data-side="top"] .tooltip-arrow { bottom: -4px; }
.tooltip[data-side="bottom"] .tooltip-arrow { top: -4px; }

/* ------------------------------------------------------------ 开关 */

/* 整行可点（标签文字也是点击区域）；窄屏下行高随控件上调一档 */
.switch-row {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--h-md);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.switch {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--placeholder); /* 关：灰（对白底 3.24:1，达到组件边界的 3:1） */
  cursor: pointer;
  transition: background var(--t-base);
}

.switch[aria-checked="true"] {
  background: var(--primary);
}

.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--on-solid);
  transition: transform var(--t-base);
}

.switch[aria-checked="true"] .switch-knob {
  transform: translateX(18px);
}

.switch:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.switch.is-loading {
  cursor: progress;
}

/* ------------------------------------------------------------ 对话框 */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--mask);
}

.modal {
  width: min(400px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--popup);
  box-shadow: var(--shadow-3);
}

.modal-wide {
  width: min(520px, 100%);
}

.modal-body {
  margin: 0 0 var(--space-4);
  color: var(--muted);
}

.modal-body p {
  margin: 0 0 var(--space-2);
}

.modal-body ul {
  margin: var(--space-2) 0 0;
  padding-left: 20px;
}

.modal-body li + li {
  margin-top: var(--space-1);
}

/* 管理页"模型"顶部的外部模型策略卡 */
.policy-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
}

.policy-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}

.policy-card p {
  margin: var(--space-1) 0 0;
}

.modal h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-title-3);
  line-height: 24px;
  font-weight: 600;
}

.modal p {
  margin: 0 0 var(--space-4);
  color: var(--muted);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ------------------------------------------------------------ 外壳 */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--topbar-h);
  padding: 0 var(--space-4);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex: none;
}

.brand {
  font-weight: 700;
  font-size: var(--fs-title-2);
  text-decoration: none;
  color: var(--text);
  letter-spacing: 0.5px;
}

.topnav {
  display: flex;
  gap: var(--space-1);
  flex: 1;
  overflow-x: auto;
}

.topnav a {
  display: inline-flex;
  align-items: center;
  height: var(--h-md);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
}

.topnav a:hover {
  background: var(--panel-2);
  color: var(--text);
}

.topnav a.active {
  background: var(--primary-bg);
  color: var(--primary-text);
  font-weight: 600;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.userbox {
  position: relative;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--h-md);
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.user-menu-btn:hover,
.user-menu-btn[aria-expanded="true"] {
  background: var(--panel-2);
}

.user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-popup);
  min-width: 200px;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--popup);
  box-shadow: var(--shadow-2);
}

.user-menu-head {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-1);
}

.user-menu-name {
  font-weight: 600;
}

.user-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: var(--h-md);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.user-menu-item:hover {
  background: var(--panel-2);
}

.view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------ 页脚（版本号与备案号） */

/* 版本号靠左，备案号居中；::after 与版本号等宽占位，让备案号真正居中。 */
.site-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--panel);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.site-foot::after {
  content: '';
  flex: 1 1 0;
}

.site-foot-ver {
  flex: 1 1 0;
  white-space: nowrap;
}

.site-foot-icp {
  flex: 0 1 auto;
  text-align: center;
  color: var(--muted);
  text-decoration: none;
}

.site-foot-icp:hover {
  color: var(--primary-text);
  text-decoration: underline;
}

/* ------------------------------------------------------------ 登录 */

.login-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.login-card {
  width: min(380px, 100%);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}

/* 登录页是整个产品的第一印象：输入框与主按钮用大号（40px） */
.login-card input,
.login-card .btn {
  height: var(--h-lg);
}

.login-title {
  margin: 0;
  font-size: var(--fs-title-1);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 1px;
}

.login-sub {
  margin: 0 0 var(--space-5);
  color: var(--muted);
}

/* ------------------------------------------------------------ 对话页 */

.chat-layout {
  flex: 1;
  min-height: 0;
  display: flex;
}

.sidebar {
  width: 260px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-right: 1px solid var(--border);
  background: var(--panel);
  overflow: hidden;
}

.new-chat {
  width: 100%;
}

.chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.chat-list-empty {
  padding: var(--space-4) var(--space-2);
  color: var(--muted);
  text-align: center;
}

.chat-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
}

.chat-item:hover {
  background: var(--panel-2);
}

.chat-item.active {
  background: var(--primary-bg);
}

.chat-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-time {
  font-size: var(--fs-caption);
  color: var(--muted);
}

.chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.menu-btn {
  display: none;
}

.chat-title {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  font-size: var(--fs-title-3);
  font-weight: 600;
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-title:hover:not(:disabled) {
  border-color: var(--border);
}

.chat-title:disabled {
  cursor: default;
  opacity: 1;
}

.title-input {
  flex: 1;
  font-size: var(--fs-title-3);
  font-weight: 600;
}

.model-slot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* 允许收缩：窄屏上模型名较长、再带两个状态徽标时，让名称或下拉框让出空间，徽标始终完整显示 */
  flex: 0 1 auto;
  min-width: 0;
}

.model-slot .badge {
  flex: none;
}

.model-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.model-select {
  width: auto;
  min-width: 0;
  max-width: 220px;
  padding: 0 var(--space-2);
  text-overflow: ellipsis;
}

/* 对话区是阅读型内容：正文比操作界面大一档（15px / 1.7）；区内的卡片、元信息各自写死字号。 */
.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-4) var(--space-2);
  scroll-behavior: auto;
  font-size: var(--fs-chat);
  line-height: var(--lh-chat);
}

.messages > * {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--muted);
  padding: var(--space-7) 0;
}

.empty {
  text-align: center;
  padding: 10vh var(--space-4) 0;
}

.empty h1 {
  font-size: var(--fs-title-1);
  line-height: 32px;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

.empty p {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* 建议问题：2×2 的卡片，窄屏单列 */
.suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 640px;
  margin: 0 auto;
}

.suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.suggestion .icon {
  color: var(--placeholder);
}

.suggestion:hover {
  background: var(--fill-hover);
  border-color: var(--border-strong);
}

.suggestion:hover .icon {
  color: var(--primary-text);
}

@media (max-width: 767px) {
  .suggestions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.msg-user {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}

.bubble {
  max-width: 85%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  background: var(--user-bubble);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.turn {
  margin-bottom: var(--space-5);
}

.turn > * + * {
  margin-top: var(--space-2);
}

.typing {
  display: flex;
  gap: var(--space-1);
  padding: 6px 0;
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: blink 1.2s infinite ease-in-out;
}

.typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* 推理过程：默认折叠，浅灰底 + 实线边框；标题左边的箭头展开时转 90°；进行中时标题后面有一个呼吸的圆点 */
.reasoning {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.reasoning summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.reasoning summary::-webkit-details-marker {
  display: none;
}

.reasoning summary .icon {
  transition: transform var(--t-fast);
}

.reasoning[open] summary .icon {
  transform: rotate(90deg);
}

.reasoning.thinking summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: breathe 1.2s infinite ease-in-out;
}

@keyframes breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

.reasoning-text {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 260px;
  overflow-y: auto;
}

.tool-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* 失败 / 超时 / 已拒绝：卡片左侧加 3px 危险色条，一眼能从一串成功的卡片里找出来 */
.tool-card[data-status="failed"],
.tool-card[data-status="timeout"],
.tool-card[data-status="denied"] {
  border-left: 3px solid var(--danger);
}

.chip .spin {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

.tool-card summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.tool-card summary::-webkit-details-marker {
  display: none;
}

.tool-name {
  font-family: var(--mono);
  font-size: var(--fs-code);
  font-weight: 600;
}

.tool-meta {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.tool-meta + .chip {
  margin-left: 0;
}

.tool-card summary .chip {
  margin-left: auto;
}

.tool-card summary .tool-meta + .chip {
  margin-left: var(--space-1);
}

.tool-body {
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid var(--border);
}

.tool-body .label {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.tool-body pre {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 240px;
  overflow: auto;
}

.turn-error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.turn-error-title {
  color: var(--danger-text);
  font-weight: 600;
}

.turn-error-hint {
  margin-top: var(--space-1);
  color: var(--text);
}

.turn-error-actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
}

.turn-meta {
  font-size: var(--fs-caption);
  line-height: 20px;
  color: var(--muted);
}

/* 回答末尾一行：左边用量等元信息，右边操作栏（复制、重新生成）。操作栏在鼠标悬停或键盘聚焦这一轮时才显示；触屏没有悬停，一直显示 */
.turn-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--h-sm);
}

.turn-actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--t-fast);
}

.turn:hover .turn-actions,
.turn:focus-within .turn-actions {
  opacity: 1;
}

@media (hover: none) {
  .turn-actions {
    opacity: 1;
  }
}

.turn-action {
  width: var(--h-sm);
  height: var(--h-sm);
}

.composer {
  flex: none;
  padding: var(--space-2) var(--space-4) var(--space-3);
}

.composer-box {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.composer-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-ring);
}

/* 会话绑定的外部模型被管理员禁用后，输入区上方的说明 */
.composer-blocked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 820px;
  margin: 0 auto var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--danger-text);
}

.composer-blocked[hidden] {
  display: none;
}

.composer-box.is-blocked {
  opacity: 0.6;
}

.composer-input,
.composer-input:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.composer-input {
  flex: 1;
  resize: none;
  padding: 6px 0;
  background: transparent;
  max-height: 200px;
  font-size: var(--fs-chat);
  line-height: var(--lh-chat);
}

.send-btn {
  width: var(--h-md);
  height: var(--h-md);
  padding: 0;
}

.send-btn.is-stop {
  background: var(--danger-solid);
  border-color: var(--danger-solid);
  color: var(--on-solid);
}

.composer-hint {
  max-width: 820px;
  margin: var(--space-2) auto 0;
  font-size: var(--fs-caption);
  line-height: 20px;
  color: var(--muted);
  text-align: center;
}

/* ------------------------------------------------------------ Markdown */

.md > :first-child {
  margin-top: 0;
}

.md > :last-child {
  margin-bottom: 0;
}

.md p {
  margin: 0 0 var(--space-3);
  overflow-wrap: anywhere;
}

.md-h {
  margin: var(--space-4) 0 var(--space-2);
  line-height: 1.4;
}

h2.md-h { font-size: var(--fs-title-2); }
h3.md-h { font-size: var(--fs-chat-h3); }
h4.md-h { font-size: var(--fs-title-3); }
h5.md-h, h6.md-h { font-size: var(--fs-chat); }

.md ul,
.md ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.5em;
}

.md li > p {
  margin-bottom: var(--space-1);
}

.md blockquote {
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-left: 3px solid var(--border-strong);
  color: var(--muted);
}

.md hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0;
}

/* 行内代码跟随所在上下文的字号（对话 15px、表格 14px），所以用 em，是字号令牌之外的唯一例外 */
.md-inline-code {
  padding: 1px var(--space-1);
  border-radius: var(--radius-xs);
  background: var(--code-bg);
  font-family: var(--mono);
  font-size: 0.9em;
}

.md-code {
  margin: 0 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--code-bg);
}

.md-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.md-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-caption);
}

.md-copy:hover {
  background: var(--panel);
  color: var(--text);
}

.md-code pre {
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--fs-code);
  line-height: 20px;
}

.md-table-wrap {
  margin: 0 0 var(--space-3);
  overflow-x: auto;
}

.md table {
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.md th,
.md td {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  text-align: left;
}

.md th {
  background: var(--panel-2);
}

/* ------------------------------------------------------------ 管理页 */

.page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-5) var(--space-7);
}

.page > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.page-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.page-head h1 {
  flex: 1;
  margin: 0;
  font-size: var(--fs-title-2);
  line-height: 28px;
  font-weight: 600;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.toolbar .form-row {
  margin: 0;
  min-width: 140px;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  overflow: hidden;
}

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 9px var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.table th {
  background: var(--panel-2);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.table tr:last-child td {
  border-bottom: 0;
}

/* 行悬停：只在有鼠标的设备上生效（触屏上"悬停"会粘在最后点过的那一行）；骨架行与空态行不高亮 */
.table td {
  transition: background var(--t-fast);
}

@media (hover: hover) {
  .table tbody tr:not(.skeleton-row):hover > td:not(.empty-row) {
    background: var(--fill-hover);
  }
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table .actions {
  white-space: nowrap;
  text-align: right;
}

.table .actions .btn {
  margin-left: var(--space-1);
}

.table .muted-row td {
  color: var(--muted);
}

.empty-row {
  padding: var(--space-6);
  text-align: center;
  color: var(--muted);
}

/* 里面放了 .empty-state 的空表格行：内边距由空态自己管 */
.empty-row-rich {
  padding: 0;
}

/* ------------------------------------------------------------ 空态、骨架屏、加载中 */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--muted);
}

.empty-state .icon {
  color: var(--placeholder);
  stroke-width: 1.5;
}

.empty-state-title {
  color: var(--text);
  font-weight: 600;
}

.empty-state-action {
  margin-top: var(--space-2);
}

.skeleton {
  display: block;
  height: 14px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--fill-active) 25%, var(--panel-2) 37%, var(--fill-active) 63%);
  background-size: 400% 100%;
  animation: skeleton 1.5s ease infinite;
}

@keyframes skeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.skeleton-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.skeleton-row td {
  padding-top: 13px;
  padding-bottom: 13px;
}

.spin {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn.is-loading {
  cursor: progress;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.stat {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.stat .stat-label {
  font-size: var(--fs-caption);
  line-height: 20px;
  color: var(--muted);
}

.stat .stat-value {
  font-size: var(--fs-title-1);
  line-height: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--mono);
  font-size: var(--fs-caption);
}

.kv {
  margin: 0;
  padding: var(--space-2) 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
}

.kv dt {
  color: var(--muted);
}

.kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pager {
  display: flex;
  justify-content: center;
  padding: var(--space-4);
}

.tool-admin-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tool-admin {
  padding: var(--space-4);
}

.tool-admin-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.tool-admin-head .spacer {
  flex: 1;
}

.tool-admin-desc {
  margin: var(--space-2) 0;
  color: var(--muted);
}

.muted-row td {
  color: var(--muted);
}

.table .nowrap {
  white-space: nowrap;
}

/* ------------------------------------------------------------ 窄屏（< 768px） */

@media (max-width: 767px) {
  /* 触控：控件整体上调一档（32 → 40，24 → 32） */
  :root {
    --h-sm: 32px;
    --h-md: 40px;
    --h-lg: 48px;
  }

  .policy-card {
    flex-direction: column;
    align-items: stretch;
  }

  .sidebar {
    position: absolute;
    z-index: var(--z-drawer);
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform var(--t-base);
    box-shadow: var(--shadow-3);
  }

  .chat-layout {
    position: relative;
  }

  .chat-layout.sidebar-open .sidebar {
    transform: none;
  }

  .menu-btn {
    display: inline-flex;
  }

  /* 触控按钮变大后标题会被挤没：收紧顶栏间距，并限制模型名与徽标最多占 40% 宽 */
  .chat-head {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .model-slot {
    max-width: 40%;
  }

  /* 窄屏只留头像图标，名称与徽标收进菜单里。 */
  .user-menu-btn .user-name,
  .user-menu-btn .badge {
    display: none;
  }

  .page {
    padding: var(--space-4) var(--space-3) var(--space-6);
  }

  .bubble {
    max-width: 94%;
  }

  /* 触屏没有 Shift+Enter 的概念，快捷键提示只在桌面显示。 */
  .hint-keys {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}