/* ============================================================
   ArityFlow 公益站 H5 —— 全部样式（手写 CSS，对照 Vue 版 Tailwind 类）
   设计令牌（暗色，:root 默认值）：
     brand #5b8def / brand-violet #8b5cf6
     dark-bg #131313 / dark-surface #1c1c1e / dark-raised #262628 / dark-input #2a2a2c
     user-bubble #33517e / 根背景 #0a0a0a / 主文本 #e8e8ea
   主题：:root 为暗色；:root[data-theme='light'] 覆盖同一组变量实现亮色，
   data-theme 由 js/store/settings.js 按用户偏好（跟随系统/白天/黑夜）设置。
   ============================================================ */

:root {
  color-scheme: dark;
  --brand: #5b8def;
  --brand-violet: #8b5cf6;
  --dark-bg: #131313;
  --dark-surface: #1c1c1e;
  --dark-raised: #262628;
  --dark-input: #2a2a2c;
  --user-bubble: #33517e;
  --user-bubble-text: #ffffff;
  --text: #e8e8ea;
  --muted: #9e9ea3;
  --placeholder: #7a7a80;
  --border: #3a3a3e;
  --border-soft: #2c2c2e;
  --danger: #f26d6d;
  --bg-root: #0a0a0a;
  --hover: rgba(255, 255, 255, 0.05);
  --toggle-off: #4a4a4e;
  --toast-bg: #333336;
  --toast-border: transparent;
  --spinner-track: rgba(255, 255, 255, 0.2);
  --send-disabled-bg: #5a5a5e;
  --send-disabled-color: #2a2a2c;
  --send-active-bg: #ffffff;
  --send-active-color: #000000;
  --md-code-bg: rgba(255, 255, 255, 0.09);
  --md-pre-bg: #101012;
  --md-quote: #b9b9c0;
  --md-link: #7aa5f5;
  /* 阴影梯度 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  /* 品牌色弱底（激活态 / 胶囊） */
  --brand-soft: rgba(91, 141, 239, 0.15);
  /* 浮层毛玻璃底 */
  --glass-surface: rgba(28, 28, 30, 0.85);
  --glass-raised: rgba(38, 38, 40, 0.88);
}

/* 亮色主题：data-theme 由 js/store/settings.js 按用户偏好 / 系统主题设置 */
:root[data-theme='light'] {
  color-scheme: light;
  --dark-bg: #f5f5f7;
  --dark-surface: #ffffff;
  --dark-raised: #f0f0f2;
  --dark-input: #ececee;
  --user-bubble: #dbe7fd;
  --user-bubble-text: #1a1a1c;
  --text: #1a1a1c;
  --muted: #6b6b70;
  --placeholder: #9a9aa0;
  --border: #d8d8dc;
  --border-soft: #e6e6ea;
  --bg-root: #ffffff;
  --hover: rgba(0, 0, 0, 0.05);
  --toggle-off: #d1d1d6;
  --toast-bg: #ffffff;
  --toast-border: #d8d8dc;
  --spinner-track: rgba(0, 0, 0, 0.15);
  --send-disabled-bg: #c8c8cc;
  --send-disabled-color: #ffffff;
  --send-active-bg: #1a1a1c;
  --send-active-color: #ffffff;
  --md-code-bg: rgba(0, 0, 0, 0.06);
  --md-pre-bg: #f3f3f5;
  --md-quote: #55555a;
  --md-link: #3b6fd4;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);
  --brand-soft: rgba(91, 141, 239, 0.12);
  --glass-surface: rgba(255, 255, 255, 0.85);
  --glass-raised: rgba(255, 255, 255, 0.92);
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  background: var(--bg-root);
  /* 防止下拉刷新 / 弹性回弹把滚动串到页面级 */
  overscroll-behavior: none;
}

body {
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
  padding: 0;
}

input,
textarea {
  font-family: inherit;
}

/* ---------------- 根容器 / 屏幕 ---------------- */

#app {
  display: flex;
  justify-content: center;
}

.af-screen {
  width: 100%;
  max-width: 480px;
  height: 100%;
  background: var(--dark-bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 640px) {
  .af-screen {
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
  }
}

/* ---------------- 全局 Toast ---------------- */

#af-toast-host {
  pointer-events: none;
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
}

.af-toast {
  background: var(--toast-bg);
  border: 1px solid var(--toast-border);
  color: var(--text);
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 9999px;
  box-shadow: var(--shadow-md);
  max-width: 90vw;
  animation: af-toast-in 0.22s ease;
}

@keyframes af-toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------- 加载圈 ---------------- */

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

.af-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--spinner-track);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: af-spin 0.8s linear infinite;
}

.af-spinner-lg {
  width: 28px;
  height: 28px;
  border-width: 3px;
  border-color: var(--spinner-track);
  border-top-color: var(--brand);
}

.af-spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
  border-color: var(--spinner-track);
  border-top-color: var(--brand);
}

.af-spinner-xs {
  width: 20px;
  height: 20px;
  border-width: 2px;
  border-color: var(--spinner-track);
  border-top-color: var(--brand);
}

/* ---------------- 通用 ---------------- */

.af-flex-1 { flex: 1; min-width: 0; }
.af-min-0 { min-width: 0; }
.af-shrink-0 { flex-shrink: 0; }
.af-select-text { user-select: text; }
.af-muted { color: var(--muted); }
.af-accent { accent-color: var(--brand); }
.af-divider { height: 1px; background: var(--border-soft); flex-shrink: 0; }
.af-my-16 { margin-top: 16px; margin-bottom: 16px; }
.af-mt-8 { margin-top: 8px; }
.af-mt-12 { margin-top: 12px; }
.af-mt-14 { margin-top: 14px; }
.af-mt-16 { margin-top: 16px; }
.af-center-py { display: flex; justify-content: center; padding: 32px 0; }
.af-danger { color: var(--danger); }
.af-primary { color: var(--brand); }

.af-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.1s;
}
.af-icon-btn:active {
  transform: scale(0.88);
}
.af-icon-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.af-icon-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------------- 启动页 ---------------- */

.af-splash {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.af-splash-icon {
  width: 88px;
  height: 88px;
  border-radius: 22px;
}
.af-splash .af-spinner-lg {
  margin-top: 24px;
}

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

.af-login {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  overflow-y: auto;
}
.af-login-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}
.af-login-icon {
  width: 96px;
  height: 96px;
  border-radius: 24px;
}
.af-login-title {
  margin: 20px 0 0;
  font-size: 26px;
  font-weight: 700;
}
.af-login-fields {
  width: 100%;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.af-login-error {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--danger);
}
.af-login-btn {
  margin-top: 28px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.af-login-btn:disabled {
  opacity: 0.4;
}

/* ---------------- 输入框（登录 / 搜索） ---------------- */

.af-field {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  padding: 0 16px;
  height: 56px;
  transition: border-color 0.15s;
}
.af-field:focus-within {
  border-color: var(--brand);
}
.af-field-sm {
  height: 44px;
  padding: 0 14px;
  gap: 10px;
}
.af-field-icon {
  color: var(--muted);
  flex-shrink: 0;
  display: inline-flex;
}
.af-field-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
}
.af-field-input::placeholder {
  color: var(--placeholder);
}
.af-field-sm .af-field-input {
  font-size: 14px;
}
.af-eye-btn {
  color: var(--muted);
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.af-eye-btn:hover {
  color: var(--text);
}

/* ---------------- 主界面（底部 Tab） ---------------- */

.af-main {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.af-main-page {
  flex: 1;
  min-height: 0;
}
.af-tabbar {
  flex-shrink: 0;
  background: var(--dark-surface);
  border-top: 1px solid var(--border-soft);
  display: flex;
  /* iPhone 底部横条安全区 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.af-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.af-tab-active {
  color: var(--brand);
}
.af-tab-icon {
  padding: 2px 16px;
  border-radius: 9999px;
  display: inline-flex;
}
.af-tab-icon-active {
  background: var(--brand-soft);
}
.af-tab-label {
  font-size: 12px;
}

/* ---------------- 聊天页 ---------------- */

.af-chat {
  position: relative;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.af-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.af-chat-bar {
  display: flex;
  align-items: center;
  padding: 6px 4px;
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  flex-shrink: 0;
}
.af-chat-menu-btn {
  color: var(--text);
}
.af-chat-title {
  flex: 1;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-chat-bar-spacer {
  width: 44px;
  flex-shrink: 0;
}

.af-msg-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  overscroll-behavior: contain;
}
.af-chat-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 64px;
}
.af-chat-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}
.af-chat-empty-text {
  margin-top: 20px;
  font-size: 18px;
}

/* ---------------- 消息气泡 ---------------- */

.af-msg {
  display: flex;
  padding: 6px 12px;
}
.af-msg-user {
  justify-content: flex-end;
}
.af-msg-avatar {
  margin-top: 2px;
}
.af-msg-gap {
  width: 8px;
  flex-shrink: 0;
}
.af-msg-body {
  max-width: 85%;
  min-width: 0;
}

.af-reasoning {
  margin-bottom: 4px;
  border-radius: 10px;
  background: var(--hover);
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
}
.af-reasoning-header {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.af-reasoning-chevron {
  display: inline-flex;
}
.af-reasoning-detail {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  white-space: pre-wrap;
  user-select: text;
}

.af-user-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.af-msg-image-single {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 14px;
  cursor: zoom-in;
}
.af-msg-image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.af-msg-image-thumb {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
}
.af-user-bubble {
  background: var(--user-bubble);
  color: var(--user-bubble-text);
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 18px;
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
  user-select: text;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
}
.af-error-bubble {
  font-size: 14px;
  color: var(--danger);
  background: rgba(242, 109, 109, 0.1);
  border-radius: 12px;
  padding: 8px 12px;
  user-select: text;
}

.af-msg-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}
.af-msg-actions-user {
  justify-content: flex-end;
}
.af-msg-action {
  padding: 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  transition: background-color 0.15s, color 0.15s;
}
.af-msg-action:hover {
  color: var(--text);
  background: var(--hover);
}
.af-msg-action-danger:hover {
  color: var(--danger);
}

/* 流式生成中 */
.af-stream-reasoning {
  margin-bottom: 4px;
  border-radius: 10px;
  background: var(--hover);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  white-space: pre-wrap;
}
.af-stream-content {
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------- 待发送图片 ---------------- */

.af-pending {
  display: flex;
  gap: 8px;
  padding-bottom: 8px;
  overflow-x: auto;
}
.af-pending-item {
  position: relative;
  flex-shrink: 0;
}
.af-pending-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.af-pending-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------------- 输入区 ---------------- */

.af-composer {
  flex-shrink: 0;
  padding: 0 12px;
}
.af-composer-box {
  background: var(--dark-input);
  border-radius: 24px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.af-composer-row {
  display: flex;
  align-items: flex-end;
  padding: 6px 8px 0 16px;
}
.af-composer-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-size: 15px;
  color: var(--text);
  padding: 8px 0;
  max-height: 140px;
}
.af-composer-input::placeholder {
  color: var(--placeholder);
}
.af-send-btn {
  margin-bottom: 6px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--send-disabled-bg);
  color: var(--send-disabled-color);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.1s;
}
.af-send-btn:active {
  transform: scale(0.88);
}
.af-send-btn-active {
  background: var(--send-active-bg);
  color: var(--send-active-color);
}
.af-composer-tools {
  display: flex;
  align-items: center;
  padding: 0 10px 6px 6px;
}
.af-attach {
  position: relative;
}
.af-attach-menu {
  position: absolute;
  bottom: 48px;
  left: 0;
  min-width: 140px;
  background: var(--glass-raised);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  padding: 4px 0;
  z-index: 30;
}
.af-attach-close {
  position: fixed;
  inset: 0;
  z-index: 20;
}
.af-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.af-menu-item:hover {
  background: var(--hover);
}
.af-menu-item-icon svg {
  color: var(--muted);
}
.af-token {
  display: flex;
  align-items: center;
  color: var(--muted);
  margin-left: 2px;
}
.af-token-count {
  font-size: 12px;
}
.af-model-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border: none;
  border-radius: 9999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
  max-width: 45%;
  cursor: pointer;
  transition: transform 0.1s;
}
.af-model-pill:active {
  transform: scale(0.95);
}
.af-model-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-model-pill svg {
  flex-shrink: 0;
}
.af-disclaimer {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.85;
  padding: 6px 0;
}

/* ---------------- 抽屉 ---------------- */

@keyframes af-drawer-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes af-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.af-drawer-wrap {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  animation: af-fade-in 0.18s ease;
}
.af-drawer {
  height: 100%;
  width: 300px;
  background: var(--glass-surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-soft);
  border-radius: 0 18px 18px 0;
  box-shadow: var(--shadow-lg);
  animation: af-drawer-in 0.2s ease;
}
.af-drawer-dim {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
}
.af-drawer-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
}
.af-drawer-header .af-icon-btn {
  padding: 8px;
}
.af-drawer-title {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
}
.af-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  overscroll-behavior: contain;
}
.af-drawer-item {
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s;
  margin-bottom: 2px;
}
.af-drawer-item:hover {
  background: var(--hover);
}
.af-drawer-item-active,
.af-drawer-item-active:hover {
  background: var(--brand-soft);
}
.af-drawer-item-active .af-drawer-item-title {
  color: var(--brand);
  font-weight: 600;
}
.af-drawer-item-title {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-drawer-item-sub {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.af-drawer-empty {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 32px 0;
}

/* 抽屉：搜索栏 */
.af-drawer-search {
  padding: 0 12px 8px;
}
.af-drawer-search .af-field-sm {
  height: 38px;
  border-radius: 10px;
  background: var(--dark-input);
  border-color: transparent;
}
.af-search-clear {
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.af-search-clear:hover {
  color: var(--text);
}

/* 抽屉：分组小节（置顶 / 分类 / 未分类 / 搜索结果分组） */
.af-drawer-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 5px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  margin-top: 4px;
}
.af-drawer-section:first-child {
  margin-top: 0;
}
.af-drawer-section:hover {
  background: var(--hover);
}
.af-drawer-section-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.af-drawer-section-label {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-drawer-section-count {
  font-size: 11px;
  background: var(--dark-input);
  border-radius: 9999px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.af-drawer-section-chevron {
  display: inline-flex;
  flex-shrink: 0;
  transform: rotate(-90deg);
  transition: transform 0.15s;
}
.af-drawer-section-open {
  transform: none;
}
.af-drawer-section-static {
  cursor: default;
  font-weight: 600;
}
.af-drawer-section-static:hover {
  background: transparent;
}
.af-drawer-section-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 14px 10px 34px;
}

/* 抽屉：对话项标题内的置顶标记 */
.af-drawer-pin {
  display: inline-flex;
  color: var(--brand);
  margin-right: 4px;
  vertical-align: -2px;
}

/* 抽屉：底部新建分类 */
.af-drawer-footer {
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-soft);
}
.af-drawer-newfolder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 0;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.af-drawer-newfolder:hover {
  color: var(--brand);
  border-color: var(--brand);
}

/* 底部弹层：列表项（移动到分类等） */
.af-sheet-list {
  display: flex;
  flex-direction: column;
}
.af-sheet-item {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
}
.af-sheet-item:hover {
  background: var(--hover);
}

/* 菜单项：危险操作的图标跟随文字颜色 */
.af-menu-item.af-danger svg {
  color: var(--danger);
}

/* 对话框：批量导出等高内容体 */
.af-dialog-tall-body {
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  min-height: 0;
}

/* 对话设置：摘要管理 */
.af-summary-box {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--dark-input);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 140px;
  overflow-y: auto;
}
.af-summary-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ---------------- 列表项菜单 ---------------- */

.af-menu-root {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.af-menu {
  position: absolute;
  min-width: 120px;
  background: var(--glass-raised);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  padding: 4px 0;
}

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

.af-dialog-root {
  position: fixed;
  inset: 0;
  z-index: 65; /* 高于菜单层 60，菜单内弹出的对话框不被遮挡 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.af-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  animation: af-fade-in 0.18s ease;
}
.af-dialog {
  position: relative;
  width: 320px;
  max-width: calc(100vw - 48px);
  background: var(--glass-surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg);
  animation: af-dialog-in 0.2s ease;
}

@keyframes af-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.af-dialog-tall {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.af-dialog-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}
.af-dialog-msg {
  font-size: 14px;
  color: var(--muted);
}
.af-dialog-sub {
  font-size: 12px;
  color: var(--muted);
  margin: -4px 0 12px;
}
.af-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.af-btn-text {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
}
.af-btn-text:hover {
  color: var(--text);
}
.af-btn-text.af-primary {
  color: var(--brand);
  font-weight: 500;
}
.af-btn-text.af-primary:hover {
  color: var(--brand);
}
.af-btn-text.af-danger {
  color: var(--danger);
  font-weight: 500;
}
.af-btn-text.af-danger:hover {
  color: var(--danger);
}
.af-btn-text:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.af-dialog-input,
.af-dialog-textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.af-dialog-input:focus,
.af-dialog-textarea:focus {
  border-color: var(--brand);
}
.af-dialog-textarea {
  resize: none;
}
.af-edit-images {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.af-edit-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  opacity: 0.7;
}

/* 批量导出 */
.af-export-list {
  flex: 1;
  overflow-y: auto;
  margin-top: 4px;
  min-height: 0;
}
.af-export-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.af-export-item:hover {
  background: var(--hover);
}
.af-export-item-title {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-export-count {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

/* 图片全屏预览 */
.af-image-preview {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.af-image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---------------- 底部弹层 ---------------- */

.af-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.af-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--glass-surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px 24px 0 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: af-sheet-up 0.24s ease;
}

@keyframes af-sheet-up {
  from {
    transform: translateY(32px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.af-sheet-grip {
  padding: 12px 0 4px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.af-sheet-grip-bar {
  width: 32px;
  height: 4px;
  border-radius: 9999px;
  background: var(--toggle-off);
}
.af-sheet-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 12px;
  flex-shrink: 0;
}
.af-sheet-body {
  overflow-y: auto;
  padding: 0 20px 24px;
  overscroll-behavior: contain;
}
.af-sheet-section-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 8px;
}

/* ---------------- 模型选择 ---------------- */

.af-group-list {
  border-radius: 12px;
  background: var(--hover);
  overflow: hidden;
}
.af-group-item {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
}
.af-group-item:hover {
  background: var(--hover);
}
.af-group-item-bordered {
  border-top: 1px solid var(--border-soft);
}
.af-group-name {
  font-size: 15px;
}
.af-group-name-active {
  color: var(--brand);
  font-weight: 700;
}
.af-group-desc {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-group-empty {
  font-size: 14px;
  color: var(--muted);
  padding: 16px;
}
.af-check {
  color: var(--brand);
  flex-shrink: 0;
  display: inline-flex;
}
.af-model-list {
  margin-top: 8px;
  min-height: 120px;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.af-model-item {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.af-model-item:hover {
  background: var(--hover);
}
.af-model-name {
  flex: 1;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-model-empty {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  padding: 32px 0;
}

/* ---------------- 对话设置 ---------------- */

.af-row-between {
  display: flex;
  align-items: center;
}
.af-setting-label {
  font-size: 15px;
}
.af-setting-value {
  color: var(--brand);
  font-weight: 700;
  font-size: 14px;
  margin-left: auto;
}
.af-setting-sub {
  font-size: 12px;
  color: var(--muted);
}
.af-range {
  width: 100%;
  accent-color: var(--brand);
}
.af-range:disabled {
  opacity: 0.4;
}
.af-toggle {
  width: 44px;
  height: 24px;
  border: none;
  border-radius: 9999px;
  background: var(--toggle-off);
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s;
  flex-shrink: 0;
}
.af-toggle-on {
  background: var(--brand);
}
.af-toggle-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}
.af-toggle-dot-on {
  left: 22px;
}

/* 分段选择器（主题切换） */
.af-segment {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9999px;
  background: var(--dark-input);
}
.af-segment-item {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.af-segment-item-active {
  background: var(--brand);
  color: #fff;
}
.af-prompt-input {
  margin-top: 6px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  resize: none;
  transition: border-color 0.15s;
}
.af-prompt-input::placeholder {
  color: var(--placeholder);
}
.af-prompt-input:focus {
  border-color: var(--brand);
}
.af-avatar-row {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.af-btn-outline {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
}
.af-btn-outline:hover {
  border-color: var(--brand);
}
.af-section-title {
  font-size: 16px;
  font-weight: 700;
}
.af-btn-primary {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.af-btn-primary:disabled {
  opacity: 0.5;
}

/* ---------------- 「我的」页 ---------------- */

.af-profile {
  height: 100%;
  overflow-y: auto;
  padding: 0 24px;
  overscroll-behavior: contain;
}
.af-profile-inner {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.af-profile-bar {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 12px 0;
}
.af-profile-bar-title {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
}
.af-profile-avatar {
  position: relative;
  margin-top: 24px;
  cursor: pointer;
}
.af-profile-avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 9999px;
}
.af-profile-name {
  margin-top: 16px;
  font-size: 22px;
  font-weight: 700;
}
.af-profile-id {
  font-size: 13px;
  color: var(--muted);
}
.af-profile-card {
  width: 100%;
  margin-top: 28px;
  border-radius: 16px;
  background: var(--hover);
  padding: 16px 20px;
}
.af-profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 12px;
}
.af-profile-row:last-child {
  margin-bottom: 0;
}
.af-profile-balance {
  width: 100%;
  margin-top: 14px;
  border-radius: 16px;
  background: var(--hover);
  border: 1px solid var(--border-soft);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.af-profile-balance-label {
  font-size: 13px;
  color: var(--muted);
}
.af-profile-balance-value {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 700;
  color: var(--brand);
}
.af-logout-btn {
  margin-top: 32px;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: rgba(242, 109, 109, 0.15);
  color: var(--danger);
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

/* ---------------- 激励视频条幅（我的页） ---------------- */

.af-ad-host {
  width: 100%;
}
/* 与上方余额卡同材质（--hover 面 + 细边），品牌蓝仅作点缀，融入整体审美 */
.af-ad-banner {
  width: 100%;
  margin-top: 14px;
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--hover);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  transition: transform 0.1s;
}
.af-ad-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.af-ad-texts {
  flex: 1;
  min-width: 0;
}
.af-ad-title {
  font-size: 14px;
  font-weight: 600;
}
.af-ad-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.af-ad-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border: none;
  border-radius: 9999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}
.af-ad-btn:active:not(:disabled) {
  transform: scale(0.93);
}
.af-ad-btn:disabled {
  background: var(--toggle-off);
  color: var(--muted);
  opacity: 1;
  cursor: default;
}

/* ---------------- 头像 ---------------- */

.af-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.af-avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  user-select: none;
}

/* ---------------- 聊天气泡内 markdown 的基础排版 ---------------- */

.af-md {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  word-break: break-word;
}
.af-md > :first-child { margin-top: 0; }
.af-md > :last-child { margin-bottom: 0; }
.af-md p { margin: 0.4em 0; }
.af-md h1, .af-md h2, .af-md h3, .af-md h4 { margin: 0.7em 0 0.4em; font-weight: 700; }
.af-md h1 { font-size: 1.35em; }
.af-md h2 { font-size: 1.2em; }
.af-md h3 { font-size: 1.1em; }
.af-md ul, .af-md ol { margin: 0.4em 0; padding-left: 1.4em; }
.af-md li { margin: 0.15em 0; }
.af-md code {
  background: var(--md-code-bg);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.88em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.af-md pre {
  background: var(--md-pre-bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px;
  overflow-x: auto;
  margin: 0.5em 0;
}
.af-md pre code { background: transparent; padding: 0; font-size: 13px; }
.af-md blockquote {
  border-left: 3px solid var(--brand);
  margin: 0.5em 0;
  padding: 2px 0 2px 12px;
  color: var(--md-quote);
}
.af-md a { color: var(--md-link); }
.af-md table { border-collapse: collapse; margin: 0.5em 0; }
.af-md th, .af-md td { border: 1px solid var(--border); padding: 5px 10px; font-size: 0.92em; }
.af-md th { background: var(--dark-raised); }
.af-md hr { border: none; border-top: 1px solid var(--border); margin: 0.8em 0; }
.af-md img { max-width: 100%; border-radius: 8px; }

/* ---------------- 滚动条 ---------------- */

.af-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.af-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.af-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 触摸按压反馈 ---------------- */

.af-msg-action,
.af-tab,
.af-btn-text,
.af-btn-outline,
.af-segment-item,
.af-drawer-newfolder {
  transition: transform 0.1s, background-color 0.15s, color 0.15s, border-color 0.15s;
}
.af-msg-action:active,
.af-tab:active,
.af-btn-text:active,
.af-btn-outline:active,
.af-segment-item:active,
.af-drawer-newfolder:active,
.af-menu-item:active,
.af-sheet-item:active,
.af-export-item:active {
  transform: scale(0.96);
}
.af-toggle {
  transition: background-color 0.2s, transform 0.1s;
}
.af-toggle:active {
  transform: scale(0.92);
}

/* ---------------- 触屏设备：禁用 hover「粘住」，交给 :active 反馈 ---------------- */

@media (hover: none) {
  .af-icon-btn:hover,
  .af-search-clear:hover,
  .af-eye-btn:hover {
    background: transparent;
    color: var(--muted);
  }
  /* 顶栏菜单按钮本身是 --text 色，hover 重置不能把它变灰 */
  .af-chat-menu-btn:hover {
    color: var(--text);
  }
  .af-msg-action:hover,
  .af-msg-action-danger:hover {
    background: transparent;
    color: var(--muted);
  }
  .af-menu-item:hover,
  .af-sheet-item:hover,
  .af-drawer-item:hover,
  .af-drawer-section:hover,
  .af-export-item:hover,
  .af-model-item:hover,
  .af-group-item:hover {
    background: transparent;
  }
  .af-drawer-item-active:hover {
    background: var(--brand-soft);
  }
  .af-btn-text:hover {
    color: var(--muted);
  }
  .af-btn-text.af-primary:hover {
    color: var(--brand);
  }
  .af-btn-text.af-danger:hover {
    color: var(--danger);
  }
  .af-btn-outline:hover {
    border-color: var(--border);
  }
  .af-drawer-newfolder:hover {
    color: var(--muted);
    border-color: var(--border);
  }
}