/* ============================================================
 * Fish Ai UI v2 · 主题换肤层(2026-09 深渊极光 · 悬浮舱重构)
 * 设计体系:Abyssal Aurora(深渊极光):深空蓝黑 + 青→靛→紫霓虹
 * · 令牌在 index.css 文件头(双主题完整令牌块),本层一律引用
 *   var(--*),不定义任何令牌、不写死主题色。
 * · 结构与组件基础形态在 index.css(悬浮舱侧栏/顶栏/Hero/Bento/
 *   命令条),本层只做皮肤细化:侧栏内衬光线、导航彩片、历史辉光、
 *   欢迎页氛围光晕、消息/输入微调、跨层表面令牌化、错误卡。
 * · 语义强调色(琥珀=警示、玫红=错误)与遮罩深蓝(2,6,23)为计划
 *   允许的例外;代码终端底色归 index.css(#0b1020)。
 * ============================================================ */

html { background: var(--bg); }
body {
  background: var(--bg);
  letter-spacing: -.006em;
  transition: background-color .28s ease, color .28s ease;
}
/* 画布氛围由 body 内 .fx-stage(index-ui-v3.css)提供,此处不再叠加 */
.app { position: relative; z-index: 1; }
::selection { background: var(--primary); color: rgba(255, 255, 255, .97); }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: rgba(var(--glow), .25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--glow), .45); }

/* ===== Sidebar:悬浮玻璃舱内衬 ===== */
/* 舱体顶部渐变高光,强化"悬浮舱"体积感(结构壳在 index.css) */
.sidebar::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  pointer-events: none;
  z-index: 1;
}
html[data-theme="light"] .sidebar::before { opacity: .6; }
.sidebar-header { padding: 15px 14px 8px; }
.logo { gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.5px; }
.logo-icon { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 7px 18px rgba(var(--glow), .3), 0 0 18px rgba(var(--glow), .45); }
.logo .logo-text { background: var(--grad-brand); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.new-chat-btn {
  border-radius: 13px;
  box-shadow: var(--glow-shadow), inset 0 1px rgba(255, 255, 255, .25);
}
.new-chat-btn:hover { box-shadow: 0 13px 30px rgba(var(--glow), .35), var(--glow-shadow); }

/* 扁平彩色芯片导航:深色下压暗 HTML 内联浅色贴片,浅色还原 */
.nav-ico { filter: saturate(1.3) brightness(.9); }
html[data-theme="light"] .nav-ico { filter: none; }
.nav-item:hover .nav-ico { box-shadow: 0 0 12px rgba(var(--glow), .35); }

/* 兑换面板令牌化 */
.redeem-panel { color: var(--text); }
.redeem-form label { color: var(--text-secondary); }
.redeem-input-wrap input { color: var(--text); background: var(--bg-soft); border-color: var(--border); }
.redeem-note { color: var(--text-secondary); background: var(--bg-soft); border-color: var(--border); }

/* ===== 历史记录区微调 ===== */
.history-item:hover { box-shadow: inset 0 0 0 1px var(--border-soft); }
.history-empty .he-icon { box-shadow: inset 0 0 0 1px var(--border-soft); }

/* ===== Header / 模型选择微调(基础形态在 index.css) ===== */
.main { background: transparent; }
.chat-title { color: var(--text-secondary); font-size: 13px; font-weight: 650; letter-spacing: .02em; }
.md-tabs { border-color: var(--border-soft); }

/* ===== Welcome:极光首屏氛围光晕 ===== */
.chat-body { position: relative; }
.welcome { padding: 28px 28px 24px; }
.welcome::before, .welcome::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(1px); }
.welcome::before { width: min(48vw, 620px); height: min(48vw, 620px); left: 19%; top: -28%; background: radial-gradient(circle, rgba(var(--glow-cyan), .13), transparent 67%); }
.welcome::after { width: min(42vw, 540px); height: min(42vw, 540px); right: 2%; bottom: -28%; background: radial-gradient(circle, rgba(var(--glow-violet), .13), transparent 67%); }
html[data-theme="light"] .welcome-logo { box-shadow: 0 0 0 6px rgba(var(--glow), .05), 0 18px 45px rgba(var(--glow), .18), 0 0 62px rgba(var(--glow), .2); }
html[data-theme="light"] .wb-chip { background: var(--surface-raised); }
/* Bento 卡:浅色下顶部反光加强 */
html[data-theme="light"] .suggest-card { box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .6); }
.suggest-card:hover { background: var(--surface-raised); }

/* ===== Chat & composer 微调 ===== */
.messages { max-width: 900px; padding-top: 26px; }
.msg-content .role { font-weight: 750; }
.msg-bubble { line-height: 1.8; }
.input-box, .input-box :not(button):not(svg):not(path), #msgInput { cursor: text !important; }
.input-box button, .input-box button * { cursor: pointer !important; }
.input-box:focus-within { border-color: rgba(var(--glow), .65); box-shadow: 0 18px 48px rgba(var(--glow), .17), 0 0 0 4px rgba(var(--glow), .08), var(--glow-shadow); }
.tool-btn { transition: background .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out); }
.tool-btn:hover { background: var(--bg-hover); color: var(--text); }
.input-hint { margin-top: 9px; color: var(--text-muted); }

/* ===== Common floating surfaces ===== */
.modal-mask { background: rgba(2, 6, 23, .66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal { border: 1px solid var(--border); border-radius: 22px; background: var(--surface-raised); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-lg); }
.modal-head { background: transparent; border-color: var(--border-soft); }
.modal-body { background: transparent; }
.modal-close { border-radius: 10px; }
.login-field input, .captcha-box .captcha-input { background: var(--bg-soft); color: var(--text); border-color: var(--border); }
.login-field input:focus, .captcha-box .captcha-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--glow), .12); }
.auth-tab.active, .model-card, .points-card, .pay-method, .rs-card, .link-card, .share-btn, .qq-benefit { background: var(--surface-solid); }
/* 代码终端两主题统一深色(#0b1020 归 index.css),此处只做辉光描边 */
.code-wrap { border-color: rgba(var(--glow), .22); box-shadow: var(--shadow), 0 0 24px rgba(var(--glow), .1); }
.code-head, .code-foot { border-color: rgba(var(--glow), .18); }
.code-wrap pre { margin: 0; }
.msg-bubble code:not(pre code) { background: var(--bg-hover); }
.md-table-card { border-color: var(--border); background: var(--surface-solid); }
.md-table-toolbar { border-color: var(--border); background: var(--bg-soft); }
.md-table-card td { color: var(--text-secondary); background: var(--surface-solid); border-color: var(--border); }
.md-table-card th { color: var(--text); background: var(--bg-hover); border-color: var(--border); }
.md-table-card tbody tr:nth-child(even) td { background: var(--bg-soft); }
.md-table-card tbody tr:hover td { background: rgba(var(--glow), .07); }
.md-table-copy { color: var(--primary-strong); border-color: var(--border); background: var(--surface-raised); }
.md-table-toolbar > span { color: var(--text-secondary); }

/* ===== 跨层表面令牌化(原 dark-only 覆盖段收敛为双主题令牌) ===== */
.copy-btn-bottom,
.msg.user .user-copy-btn,
.assistant-copy-btn,
.md-table-copy { color: var(--text-secondary); border-color: var(--border); background: var(--surface-raised); transition: background .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out); }
.copy-btn-bottom:hover,
.msg.user .user-copy-btn:hover,
.assistant-copy-btn:hover { color: var(--text); border-color: rgba(var(--glow), .35); background: var(--bg-hover); }
.modal.modal-profile .modal-head,
.modal.modal-profile .modal-body { background: transparent; }
.modal.modal-api-logs .modal-head { color: var(--text); border-color: var(--border-soft); background: transparent; }
.modal.modal-api-logs .modal-body { background: transparent; }
.announce-box { background: var(--surface-solid); }
.announce-body { background: linear-gradient(to bottom, var(--bg-soft), var(--surface-solid)); }
.announce-section { background: var(--surface-solid); border-color: var(--border); }
.announce-section-title { color: var(--text); }
.announce-section-desc,
.announce-highlights li { color: var(--text-secondary); }
.announce-section-highlight { background: rgba(var(--glow-violet), .1); }
.announce-section-warn { background: rgba(244, 63, 94, .08); }
.announce-footer { color: var(--text-secondary); background: var(--bg-soft); border-color: var(--border); }
.announce-checkbox { color: var(--text-secondary); }
.fish-use-section { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .26); }
.fish-use-section .announce-section-title { color: rgba(252, 211, 77, .95); }
.fish-use-steps { color: var(--text-secondary); }
.fish-hero { background: rgba(var(--glow-cyan), .08); border-color: rgba(var(--glow-cyan), .25); }
.fish-hero .announce-section-title { color: var(--accent); }
.fish-skip-btn { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.fish-skip-btn:hover { background: var(--bg-hover); color: var(--text); }
.profile-hero,
.points-head,
.referral-banner,
.qq-hero { color: var(--text); border-color: rgba(var(--glow), .25); background: linear-gradient(135deg, rgba(var(--glow), .16), rgba(var(--glow-violet), .12)); }
.profile-name,
.profile-points-card,
.points-head-title,
.points-section-title strong,
.pay-method-title strong,
.rb-title,
.qq-hero h4,
.pl-title,
.rules-title { color: var(--text); }
.profile-id,
.ppc-label,
.ppc-hint,
.points-head-sub,
.rb-sub,
.qq-hero p,
.rules-list li { color: var(--text-secondary); }
.points-purchase { background: linear-gradient(180deg, var(--bg-soft) 0, var(--bg) 190px); }
.points-card,
.pay-method,
.rs-card,
.link-card,
.rules-card,
.share-btn,
.profile-logs,
.qq-benefit { color: var(--text); border-color: var(--border); background: var(--surface-solid); }
.points-card.active { border-color: rgba(var(--glow), .5); background: linear-gradient(145deg, rgba(var(--glow), .14), rgba(var(--glow-violet), .1)), var(--surface-solid); }
.pay-method.active.wxpay { background: linear-gradient(135deg, rgba(var(--glow-cyan), .14), var(--surface-solid)); }
.pay-method.active.alipay { background: linear-gradient(135deg, rgba(var(--glow), .14), var(--surface-solid)); }
.link-card-highlight,
.rules-card { background: linear-gradient(135deg, var(--bg-soft), rgba(var(--glow-violet), .08)); }
.link-input-wrap { color: var(--text); background: var(--surface-raised) !important; border-color: var(--border); }
.link-row input { color: var(--text); }
/* API 日志控制台(两主题固定深色终端,主体皮肤归 index-modals.css;此处仅叠加双主题安全的辉光细节) */
.api-console { border: 1px solid rgba(var(--glow), .14); }
.api-console-hero,
.api-console-copy strong,
.api-list-toolbar strong { text-shadow: 0 0 16px rgba(var(--glow), .3); }
.api-stat-card,
.api-logs-table,
.api-log-toggle,
.api-formula,
.api-logs-pagination button { border-color: rgba(var(--glow), .14); transition: border-color .18s var(--ease-out), background .18s var(--ease-out); }
.api-stat-value,
.api-log-key strong,
.api-detail-grid code,
.api-detail-grid b,
.api-detail-head { text-shadow: 0 0 14px rgba(var(--glow-cyan), .28); }
.api-logs-head,
.api-log-detail { border-color: rgba(var(--glow), .12); }
.api-log-entry { border-color: rgba(var(--glow), .14); }
.api-log-entry:hover > .api-log-row,
.api-log-entry.open > .api-log-row { background: rgba(var(--glow), .09); }
.api-date-filter,
.api-date-presets { border-color: rgba(var(--glow), .14); }
.api-date-filter-title strong { text-shadow: 0 0 14px rgba(var(--glow), .25); }
.api-date-fields input { color-scheme: dark; border-color: rgba(var(--glow), .14); }
.api-date-reset { background: transparent; border-color: rgba(var(--glow), .14); }
.api-skel-row { border-color: rgba(var(--glow), .1); }
.api-skel-row i { background: linear-gradient(100deg, rgba(var(--glow), .07) 30%, rgba(var(--glow), .18) 50%, rgba(var(--glow), .07) 70%); background-size: 200% 100%; }
.api-logs-loading, .api-logs-empty { border-color: rgba(var(--glow), .14); }
.api-log-cell { text-shadow: 0 0 12px rgba(var(--glow), .16); }
.api-model-pill { border-color: rgba(var(--glow-cyan), .32); }
.pl-seg { background: var(--bg-soft); border-color: var(--border); }
.pl-filter.active { background: var(--surface-raised); color: var(--primary); }
.pl-row { background: var(--surface-solid); border-color: var(--border-soft); }
.pl-row:hover { background: var(--bg-hover); border-color: var(--border); }
.pl-page-btn { background: var(--bg-soft); border-color: var(--border); }
.pc-points { color: var(--text); }
.pc-pricing { border-color: var(--border); }
.pc-price { color: var(--primary); }
.ptb-item { background: var(--surface-solid); border-color: var(--border); color: var(--text-secondary); }
.mc-tag-mini { background: var(--bg-hover); color: var(--text-muted); }
.nm-tag { background: var(--bg-hover); color: var(--text-muted); }
.auth-tab.active { background: var(--surface-raised); color: var(--primary); }
.send-code-btn { border-color: var(--border); }
.captcha-img-wrap { border-color: var(--border); }
.captcha-refresh { border-color: var(--border); }
.remember-me input, .auth-agreement input { background: var(--bg-soft); border-color: var(--border); }
.mp-leg-item { background: var(--bg-soft); }
.price-error { background: rgba(244, 63, 94, .1); border-color: rgba(244, 63, 94, .3); color: rgba(252, 165, 165, .95); }
.preview-file { background: var(--bg-soft); }
.preview-file .pf-remove:hover { color: rgba(244, 63, 94, .9); }
.points-recharge-alert { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); color: rgba(252, 211, 77, .95); }
.re-icon-ring { background: rgba(var(--glow-cyan), .12); }
.re-title { color: var(--text); }
.announce-qq { background: rgba(244, 63, 94, .1); border-color: rgba(244, 63, 94, .28); color: rgba(252, 165, 165, .95) !important; }
.link-card .lc-label small { color: var(--primary); }
.output-limit-warning { color: rgba(252, 211, 77, .95); background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); }
.image-warning { color: rgba(252, 211, 77, .95); background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); }
.msg-stopped-tag { color: rgba(252, 165, 165, .95); background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .3); }
.stream-image-prompt { color: var(--text-secondary); }
.msg.assistant.msg-error .msg-bubble { background: rgba(244, 63, 94, .09); border-color: rgba(244, 63, 94, .3); color: var(--text); }
.msg.assistant.msg-error .msg-bubble p { color: var(--text); }
.msg.assistant.msg-error .msg-bubble code:not(pre code) { background: rgba(244, 63, 94, .16); color: var(--text); }
.msg.assistant.msg-error .msg-bubble strong { color: var(--text); }
.msg.assistant.msg-error .assistant-copy-btn { background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .3); color: var(--text-secondary); }
.assistant-copy-btn.copied { background: rgba(var(--glow-cyan), .16); border-color: rgba(var(--glow-cyan), .4); color: var(--accent); }
.copy-btn-bottom.copied, .copy-btn.copied { background: var(--accent) !important; color: var(--surface-solid) !important; }
.seo-footer { color: var(--text-muted); }
/* 浅色主题:警示/错误强调文字换深色版保证对比度 */
html[data-theme="light"] .output-limit-warning,
html[data-theme="light"] .image-warning,
html[data-theme="light"] .points-recharge-alert,
html[data-theme="light"] .fish-use-section .announce-section-title,
html[data-theme="light"] .ec-actions small,
html[data-theme="light"] .ec-warn .ec-title b { color: rgba(180, 83, 9, .95); }
html[data-theme="light"] .msg-stopped-tag,
html[data-theme="light"] .announce-qq,
html[data-theme="light"] .price-error,
html[data-theme="light"] .ec-title b { color: rgba(159, 18, 57, .95); }

@media (max-width: 768px) {
  .user-points-box { max-width: 108px; }
  .up-copy b { display: block; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-item { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .nav-menu { flex: 0 0 auto; padding-top: 7px; }
  .history-label { padding-top: 12px; }
  .history-list { min-height: 90px; padding-bottom: 6px; }
  .history-item { min-height: 39px; }
  .new-chat-btn { min-height: 46px; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== 对话内错误卡片(余额不足 / 请求失败 / 连接中断) ===== */
.msg-error-card .ec-card { max-width: min(620px, 100%); }
.ec-card {
  border-radius: 16px; padding: 14px 16px 15px;
  border: 1px solid rgba(244, 63, 94, .3);
  background: linear-gradient(150deg, rgba(244, 63, 94, .14), transparent 70%), var(--surface);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: ecIn .25s var(--ease-out);
}
@keyframes ecIn { from { opacity: 0; transform: translateY(6px); } }
.ec-card.ec-warn {
  border-color: rgba(245, 158, 11, .3);
  background: linear-gradient(150deg, rgba(245, 158, 11, .14), transparent 70%), var(--surface);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.ec-head { display: flex; align-items: center; gap: 11px; }
.ec-icon {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 12px;
  color: rgba(255, 255, 255, .97); background: linear-gradient(135deg, rgba(244, 63, 94, .95), rgba(190, 18, 60, .95));
  box-shadow: 0 6px 16px rgba(244, 63, 94, .32);
}
.ec-warn .ec-icon { background: linear-gradient(135deg, rgba(251, 191, 36, .95), rgba(217, 119, 6, .95)); box-shadow: 0 6px 16px rgba(217, 119, 6, .32); }
.ec-icon svg { width: 20px; height: 20px; }
.ec-title b { display: block; font-size: 14.5px; font-weight: 800; color: rgba(253, 164, 175, .98); letter-spacing: -.01em; }
.ec-title small { display: block; margin-top: 1px; font: 700 8.5px Consolas, monospace; letter-spacing: .16em; color: rgba(244, 63, 94, .8); opacity: .75; }
.ec-warn .ec-title b { color: rgba(252, 211, 77, .98); }
.ec-warn .ec-title small { color: rgba(217, 119, 6, .85); }
.ec-detail {
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid rgba(244, 63, 94, .22); background: rgba(244, 63, 94, .07);
  color: var(--text-secondary); font-size: 12.5px; line-height: 1.65; word-break: break-word;
}
.ec-warn .ec-detail { border-color: rgba(245, 158, 11, .22); background: rgba(245, 158, 11, .07); color: var(--text-secondary); }
.ec-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: 9px; color: var(--text-muted); font-size: 11px; }
.ec-hint svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }
.ec-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px dashed rgba(245, 158, 11, .28); flex-wrap: wrap; }
.ec-btn {
  padding: 9px 20px; border: none; border-radius: 999px; cursor: pointer;
  color: rgba(255, 255, 255, .97); font-size: 12.5px; font-weight: 800;
  background: linear-gradient(135deg, rgba(245, 158, 11, .95), rgba(249, 115, 22, .95));
  box-shadow: 0 5px 14px rgba(245, 158, 11, .35);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.ec-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245, 158, 11, .45); }
.ec-actions small { color: rgba(252, 211, 77, .95); font-size: 10.5px; }
/* 浅色主题:错误卡玻璃底加实,文字加深 */
html[data-theme="light"] .ec-card { background: linear-gradient(150deg, rgba(244, 63, 94, .07), transparent 70%), var(--surface-solid); }
html[data-theme="light"] .ec-card.ec-warn { background: linear-gradient(150deg, rgba(245, 158, 11, .08), transparent 70%), var(--surface-solid); }
html[data-theme="light"] .ec-detail { color: var(--text-secondary); }