/* =========================================================================
   NVC 陪伴页 UI 2.0（nvc-companion-v2.css）
   ---------------------------------------------------------------------------
   只挂在 /companion/。加载顺序：style.css → nvc-glass.css → nvc-buttons.css → 本文件
   · 修正引擎类名与旧样式的错位（.cmp-msg.cmp-bot / .cmp-msg.cmp-user 才是引擎真实类名）
   · 重新设计深浅两层气泡、输入区、快捷话题、顶栏开关
   · 深度思考（本地大模型）整套界面：开关、思考过程面板、流式气泡、元信息、降级提示
   ========================================================================= */

:root {
  --cmp-max: 780px;
  --cmp-line: rgba(47, 107, 117, 0.12);
  --cmp-line-strong: rgba(47, 107, 117, 0.2);
  --cmp-ink: #3d3d3d;
  --cmp-ink-soft: #6b6b6b;
  --cmp-ink-faint: #97918a;
  --cmp-bot-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.86));
  --cmp-user-bg: linear-gradient(135deg, #66aeb6 0%, #35767f 100%);
  --cmp-gold: #f2c078;
  --cmp-gold-deep: #8f6412;
  --cmp-gold-ink: #6f4e0e;
  --cmp-shadow-bot: 0 10px 26px -18px rgba(47, 107, 117, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --cmp-shadow-user: 0 12px 28px -14px rgba(47, 107, 117, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ------------------------------------------------------------------ 页面外壳 */
/* 高度 = 视口 - 站点导航（--nvc-hdr 由 nvc-deep.js 实测写入；无 JS 时退回 130px） */
.nv-cmp-page, .cmp-page {
  min-height: calc(100dvh - var(--nvc-hdr, 130px));
  height: calc(100dvh - var(--nvc-hdr, 130px));
  padding: clamp(8px, 1.8vh, 22px) clamp(10px, 2vw, 22px) calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
}
.nv-cmp-shell {
  max-width: var(--cmp-max);
  width: 100%;
  height: 100%;
  max-height: 920px;
  min-height: 0;
  border-radius: 32px;
  transition: box-shadow 0.6s ease, border-color 0.6s ease;
}
#cmpPage.is-deep-mode .nv-cmp-shell {
  box-shadow: 0 54px 110px -52px rgba(143, 100, 18, 0.55), 0 0 0 1px rgba(242, 192, 120, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
@media (max-width: 760px) {
  .nv-cmp-shell { border-radius: 24px; }
}

/* --------------------------------------------------------------- 顶栏与开关 */
.nv-cmp-topbar {
  gap: 10px 12px;
  padding: 13px 16px;
  flex-wrap: wrap;
}
.cmp-back.nv-cmp-back,
.cmp-back {
  border-radius: 999px;
  min-height: 38px;
}
.cmp-identity { gap: 11px; }
.cmp-id-avatar {
  width: 42px;
  height: 42px;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}
#cmpPage.is-deep-mode .cmp-id-avatar {
  box-shadow: 0 0 0 3px rgba(242, 192, 120, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: rotate(-3deg);
}
.cmp-wtitle { font-size: 1.1rem; }
.cmp-wsub { max-width: 34ch; }

/* 顶栏按钮统一的语言：药丸形 + 玻璃底 + 44px 触控 */
.cmp-topbar .nv-cmp-web,
.cmp-topbar .cmp-web-toggle,
.nv-cmp-deep,
.cmp-deep-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  color: var(--g-teal-deep, #2f6b75);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 16px -10px rgba(47, 107, 117, 0.4);
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease,
    border-color 0.22s ease;
}
.cmp-topbar .nv-cmp-web:hover,
.cmp-topbar .cmp-web-toggle:hover,
.nv-cmp-deep:hover,
.cmp-deep-toggle:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 22px -12px rgba(47, 107, 117, 0.5);
}
.cmp-topbar .nv-cmp-web.web-on,
.cmp-topbar .cmp-web-toggle.web-on {
  color: #fff;
  background: linear-gradient(135deg, #66aeb6, #2f6b75);
  border-color: rgba(47, 107, 117, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 22px -10px rgba(47, 107, 117, 0.6);
}

/* 深度思考开关：关闭时安静，开启时琥珀光 */
.nv-cmp-deep svg,
.cmp-deep-toggle svg {
  transition: transform 0.5s ease;
}
.nv-cmp-deep:hover svg,
.cmp-deep-toggle:hover svg {
  transform: rotate(18deg) scale(1.06);
}
.nv-cmp-deep.is-on,
.cmp-deep-toggle.is-on {
  color: var(--cmp-gold-ink);
  background: linear-gradient(135deg, rgba(246, 205, 141, 0.92), rgba(255, 248, 235, 0.96));
  border-color: rgba(201, 143, 43, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 3px rgba(242, 192, 120, 0.28),
    0 12px 26px -12px rgba(143, 100, 18, 0.55);
}
.nv-cmp-deep.is-on svg,
.cmp-deep-toggle.is-on svg {
  color: #a9701a;
  animation: cmpDeepSpin 9s linear infinite;
}
.nv-cmp-deep.is-pending,
.cmp-deep-toggle.is-pending {
  opacity: 0.65;
  cursor: progress;
}
.nv-cmp-deep.is-pending::after,
.cmp-deep-toggle.is-pending::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(143, 100, 18, 0.3);
  border-top-color: var(--cmp-gold-deep);
  animation: cmpSpin 0.8s linear infinite;
}
.nv-cmp-deep .cmp-deep-label,
.cmp-deep-toggle .cmp-deep-label {
  white-space: nowrap;
}
@keyframes cmpDeepSpin {
  to { transform: rotate(360deg); }
}
@keyframes cmpSpin {
  to { transform: rotate(360deg); }
}

.cmp-clear.nv-cmp-clear,
.cmp-clear {
  min-width: 38px;
  min-height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}
.cmp-clear:hover { transform: rotate(180deg); }

/* 顶栏按钮：一律单行，避免窄屏把中文折成竖排 */
.nv-cmp-topbar .cmp-back,
.nv-cmp-topbar .nv-cmp-clear,
.nv-cmp-topbar .cmp-clear,
.nv-cmp-topbar .nv-cmp-web,
.nv-cmp-topbar .cmp-web-toggle,
.nv-cmp-topbar .nv-cmp-deep,
.nv-cmp-topbar .cmp-deep-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}
.nv-cmp-topbar .cmp-identity { min-width: 0; }

/* ------------------------------------------------------------------ 消息区 */
.nv-cmp-thread-wrap {
  flex: 1;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.46));
}
.cmp-thread {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px clamp(14px, 3.2vw, 30px) 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 107, 117, 0.22) transparent;
}
.cmp-thread::-webkit-scrollbar { width: 7px; }
.cmp-thread::-webkit-scrollbar-thumb {
  background: rgba(47, 107, 117, 0.2);
  border-radius: 999px;
}
.cmp-thread::-webkit-scrollbar-thumb:hover { background: rgba(47, 107, 117, 0.34); }

.cmp-msg {
  display: flex;
  gap: 10px;
  max-width: 100%;
  align-items: flex-start;
  animation: cmpMsgIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes cmpMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 引擎真实类名是 cmp-user / cmp-bot（旧样式写成 .user / .bot，这里修正） */
.cmp-msg.cmp-user,
.cmp-msg.user {
  align-self: flex-end;
  justify-content: flex-end;
  max-width: min(82%, 620px);
}
.cmp-msg.cmp-bot,
.cmp-msg.bot {
  align-self: flex-start;
  flex-wrap: wrap;
  max-width: min(88%, 700px);
}
.cmp-msg .cmp-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  margin-top: 3px;
  background: linear-gradient(150deg, rgba(242, 192, 120, 0.72), rgba(91, 158, 166, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px -9px rgba(47, 107, 117, 0.5);
}

.cmp-msg .cmp-bubble {
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 0.95rem;
  line-height: 1.82;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
}
.cmp-msg.cmp-bot .cmp-bubble,
.cmp-msg.bot .cmp-bubble {
  color: var(--cmp-ink);
  background: var(--cmp-bot-bg);
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-bottom-left-radius: 6px;
  box-shadow: var(--cmp-shadow-bot);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cmp-msg.cmp-user .cmp-bubble,
.cmp-msg.user .cmp-bubble {
  color: #fff;
  background: var(--cmp-user-bg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom-right-radius: 6px;
  box-shadow: var(--cmp-shadow-user);
  max-width: 100%;
}
.cmp-msg.cmp-user .cmp-bubble a,
.cmp-msg.user .cmp-bubble a { color: #fff; text-decoration: underline; }
.cmp-msg .cmp-bubble strong { font-weight: 700; }

/* 气泡工具条（复制）：换行到气泡下方，不再挤在气泡右侧 */
.cmp-msg .cmp-msg-tools {
  flex: 0 0 100%;
  order: 9;
  display: flex;
  gap: 6px;
  margin-top: -4px;
  padding-left: 44px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cmp-msg.cmp-bot:hover .cmp-msg-tools,
.cmp-msg.cmp-bot:focus-within .cmp-msg-tools { opacity: 1; }
.cmp-copy {
  border: 1px solid rgba(47, 107, 117, 0.14);
  background: rgba(255, 255, 255, 0.85);
  color: var(--cmp-ink-faint);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cmp-copy:hover {
  color: var(--g-teal-deep, #2f6b75);
  border-color: rgba(47, 107, 117, 0.32);
  transform: translateY(-1px);
}
.cmp-copy.ok { color: #2e7d5b; border-color: rgba(46, 125, 91, 0.4); }

.cmp-dots i { background: #c8a45f; }
.cmp-typing-txt { color: var(--cmp-ink-faint); }

/* -------------------------------------------------- 深度思考：思考过程面板 */
.cmp-deep-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.cmp-deep-stack > .cmp-deep-trace { align-self: stretch; }
.cmp-deep-stack > .cmp-bubble {
  align-self: flex-start;
  max-width: min(100%, 640px);
}
.cmp-deep-stack > .cmp-msg-tools {
  flex: 0 0 auto;
  padding-left: 2px;
  margin-top: 0;
}
.cmp-msg.cmp-bot.cmp-msg--deep {
  align-items: flex-start;
  width: 100%;
  max-width: min(90%, 700px);
}

.cmp-deep-trace {
  display: none;
  border-radius: 16px;
  border: 1px solid rgba(242, 192, 120, 0.55);
  background: linear-gradient(160deg, rgba(255, 250, 240, 0.96), rgba(255, 246, 233, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 24px -18px rgba(143, 100, 18, 0.55);
  padding: 10px 13px 11px;
  font-size: 0.8rem;
  color: var(--cmp-gold-ink);
  animation: cmpTraceIn 0.3s ease both;
}
.cmp-deep-trace.is-streaming,
.cmp-deep-trace.has-trace { display: block; }
@keyframes cmpTraceIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cmp-deep-trace-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--cmp-gold-deep);
}
.cmp-deep-spark {
  display: inline-flex;
  color: #c98f2b;
  animation: cmpDeepSpin 7s linear infinite;
}
.cmp-deep-trace-title { white-space: nowrap; }
.cmp-deep-trace-state {
  margin-left: auto;
  font-weight: 500;
  font-size: 0.72rem;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-deep-trace-body {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(143, 100, 18, 0.22);
}
.cmp-deep-trace.has-trace .cmp-deep-trace-body { display: flex; }
.cmp-trace-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.62;
}
/* 入场动画只给"新加的行"播一次；流式更新已有行时不再重播（旧版每帧重建 innerHTML 导致频闪） */
.cmp-trace-row.is-new {
  animation: cmpTraceRowIn 0.28s ease both;
}
@keyframes cmpTraceRowIn {
  from { opacity: 0; transform: translateX(-3px); }
  to { opacity: 1; transform: translateX(0); }
}
.cmp-trace-k {
  flex: none;
  min-width: 3.1em;
  font-size: 0.69rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--cmp-gold-deep);
  background: rgba(242, 192, 120, 0.32);
  border-radius: 999px;
  padding: 0 8px;
  text-align: center;
}
.cmp-trace-v { color: #5f4a24; }

/* 深度气泡本体 */
.cmp-msg--deep.is-streaming .cmp-deep-bubble {
  position: relative;
  border-color: rgba(242, 192, 120, 0.6);
}
.cmp-msg--deep.is-streaming .cmp-deep-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(242, 192, 120, 0.14);
  animation: cmpDeepHalo 2.2s ease-in-out infinite;
}
@keyframes cmpDeepHalo {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.cmp-msg--deep-done .cmp-deep-bubble { border-color: rgba(242, 192, 120, 0.45); }
.cmp-deep-skeleton {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
}
.cmp-deep-skeleton i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9a54a;
  animation: cmpDeepBounce 1.25s ease-in-out infinite;
}
.cmp-deep-skeleton i:nth-child(2) { animation-delay: 0.16s; }
.cmp-deep-skeleton i:nth-child(3) { animation-delay: 0.32s; }
@keyframes cmpDeepBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.cmp-deep-caret {
  display: inline-block;
  width: 2px;
  height: 1.02em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--g-teal, #5b9ea6);
  border-radius: 1px;
  animation: cmpCaret 1s steps(2, start) infinite;
}
@keyframes cmpCaret {
  50% { opacity: 0; }
}
.cmp-deep-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #a08c63;
  margin-top: 1px;
  letter-spacing: 0.01em;
}
.cmp-deep-meta-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c9a45c;
  box-shadow: 0 0 0 2px rgba(201, 164, 92, 0.18);
}
.cmp-deep-note {
  align-self: flex-start;
  font-size: 0.72rem;
  color: #8a857c;
  margin-top: 2px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px dashed rgba(47, 107, 117, 0.22);
}
.cmp-msg--deep-fallback .cmp-deep-trace { display: none !important; }

/* --------------------------------------------------------- 快捷话题 / 输入区 */
.nv-cmp-chips,
.cmp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px clamp(14px, 3vw, 22px) 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  flex: none;
}
.nv-cmp-chips .cmp-chip,
.cmp-chips .cmp-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  font-size: 0.79rem;
}

.nv-cmp-composer,
.cmp-composer {
  position: relative;
  align-items: flex-end;
  gap: 10px;
  padding: 12px clamp(14px, 3vw, 22px) 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.86));
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}
.nv-cmp-composer textarea,
.cmp-composer textarea {
  flex: 1;
  min-height: 48px;
  max-height: 160px;
  padding: 13px 18px;
  border-radius: 22px;
  border: 1.5px solid rgba(47, 107, 117, 0.16);
  background: rgba(255, 255, 255, 0.94);
  color: var(--cmp-ink);
  font-size: 0.95rem;
  line-height: 1.6;
  font-family: inherit;
  resize: none;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px -16px rgba(47, 107, 117, 0.5);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.nv-cmp-composer textarea:focus,
.cmp-composer textarea:focus {
  background: #fff;
  border-color: rgba(91, 158, 166, 0.6);
  box-shadow: 0 0 0 4px rgba(91, 158, 166, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.nv-cmp-send,
.cmp-send {
  width: auto;
  height: 48px;
  min-width: 48px;
  padding: 0 18px;
  gap: 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, #74b8bf, #2f6b75);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 14px 28px -12px rgba(47, 107, 117, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.nv-cmp-send:not(:disabled):hover,
.cmp-send:not(:disabled):hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 34px -12px rgba(47, 107, 117, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.nv-cmp-send:disabled,
.cmp-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: linear-gradient(135deg, #a9c6c6, #7d9a9d);
  box-shadow: none;
}
/* 引擎会在按钮里塞“发送”文字，窄屏只留图标 */
@media (max-width: 520px) {
  .nv-cmp-send .cmp-send-txt,
  .cmp-send .cmp-send-txt { display: none; }
  .nv-cmp-send,
  .cmp-send { width: 46px; height: 46px; min-width: 46px; padding: 0; }
}
.nv-cmp-count,
#cmp-count {
  position: absolute;
  right: 122px;
  bottom: 27px;
  font-size: 0.68rem;
  color: var(--cmp-ink-faint);
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.nv-cmp-count.is-max { color: #9c4a40; opacity: 1; font-weight: 600; }

/* 深度模式角标（由 nvc-deep.js 注入到输入区） */
.cmp-deep-badge {
  position: absolute;
  top: -13px;
  left: clamp(18px, 3.4vw, 26px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cmp-gold-ink);
  background: linear-gradient(135deg, rgba(246, 205, 141, 0.96), rgba(255, 250, 240, 0.98));
  border: 1px solid rgba(201, 143, 43, 0.5);
  box-shadow: 0 8px 18px -10px rgba(143, 100, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 3;
  pointer-events: none;
  animation: cmpBadgeIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.cmp-deep-badge[hidden] { display: none; }
@keyframes cmpBadgeIn {
  from { opacity: 0; transform: translateY(4px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cmp-deep-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c98f2b;
  animation: cmpBadgePulse 1.8s ease-in-out infinite;
}
@keyframes cmpBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 143, 43, 0.45); }
  50% { box-shadow: 0 0 0 4px rgba(201, 143, 43, 0); }
}

/* 页脚提示 */
.nv-cmp-foot-note,
.cmp-foot-note {
  padding: 0 clamp(16px, 3vw, 24px) 13px;
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--cmp-ink-faint);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.92));
  text-align: center;
}

/* --------------------------------------------------------------- 提示与无障碍 */
.cmp-deep-toast {
  position: fixed;
  left: 50%;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  pointer-events: none;
  z-index: 10000;
  max-width: min(88vw, 460px);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  background: rgba(47, 107, 117, 0.94);
  box-shadow: 0 18px 36px -16px rgba(24, 48, 52, 0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cmp-deep-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cmp-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nv-cmp-deep:focus-visible,
.cmp-deep-toggle:focus-visible,
.cmp-copy:focus-visible,
.nv-cmp-send:focus-visible,
.cmp-send:focus-visible,
.cmp-topbar .nv-cmp-web:focus-visible {
  outline: 2px solid var(--g-teal-deep, #2f6b75);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------- 开场画面 */
.cmp-intro {
  cursor: pointer;
  background:
    radial-gradient(52rem 34rem at 18% 8%, rgba(242, 192, 120, 0.24), transparent 62%),
    radial-gradient(46rem 32rem at 88% 92%, rgba(91, 158, 166, 0.22), transparent 60%),
    #fdfaf6;
}
.cmp-intro-inner {
  padding: clamp(30px, 6vw, 46px) clamp(24px, 5vw, 40px);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 34px 80px -40px rgba(47, 107, 117, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  animation: cmpIntroIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes cmpIntroIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cmp-intro-giraffe svg { filter: drop-shadow(0 10px 18px rgba(143, 100, 18, 0.18)); }
.cmp-intro-title { font-size: clamp(1.3rem, 2.6vw, 1.55rem); }
.cmp-intro-hint {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(47, 107, 117, 0.14);
}

/* -------------------------------------------------------------------- 移动端 */
@media (max-width: 760px) {
  .nv-cmp-page,
  .cmp-page { padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .nv-cmp-shell {
    border-radius: 22px;
    height: 100%;
    max-height: none;
    min-height: 0;
  }
  .nv-cmp-topbar { padding: 10px 12px; gap: 8px; }
  .cmp-identity { flex-basis: 100%; order: 3; }
  .cmp-back { order: 1; }
  .cmp-clear { order: 2; margin-left: auto; }
  .cmp-topbar .nv-cmp-web,
  .cmp-topbar .cmp-web-toggle { order: 4; }
  .nv-cmp-deep,
  .cmp-deep-toggle { order: 5; }
  .cmp-wsub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
  .nv-cmp-thread-wrap { }
  .cmp-thread { padding: 16px 13px 12px; gap: 12px; }
  .cmp-msg .cmp-bubble { font-size: 0.93rem; padding: 11px 14px; }
  .cmp-deep-stack { max-width: 92%; }
  .cmp-trace-k { min-width: 3em; font-size: 0.67rem; }
  .cmp-deep-trace { font-size: 0.77rem; padding: 9px 11px 10px; }
  .nv-cmp-chips,
  .cmp-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 9px 13px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nv-cmp-chips::-webkit-scrollbar,
  .cmp-chips::-webkit-scrollbar { display: none; }
  .nv-cmp-chips .cmp-chip,
  .cmp-chips .cmp-chip { flex: none; min-height: 40px; }
  .nv-cmp-composer,
  .cmp-composer { padding: 10px 13px calc(12px + env(safe-area-inset-bottom, 0px) * 0.4); gap: 8px; }
  .nv-cmp-count,
  #cmp-count { display: none; }
  .nv-cmp-foot-note,
  .cmp-foot-note { font-size: 0.66rem; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .cmp-msg .cmp-msg-tools { opacity: 1; padding-left: 42px; }
  .cmp-deep-badge { top: -12px; left: 14px; }
}

@media (max-width: 400px) {
  .cmp-topbar .cmp-web-label,
  .nv-cmp-deep .cmp-deep-label,
  .cmp-deep-toggle .cmp-deep-label { display: none; }
  .cmp-topbar .nv-cmp-web,
  .nv-cmp-deep,
  .cmp-deep-toggle { padding: 10px; min-width: 40px; justify-content: center; }
}

/* 减弱动效 / 高对比 */
@media (prefers-reduced-motion: reduce) {
  .cmp-msg,
  .cmp-deep-trace,
  .cmp-trace-row,
  .cmp-deep-badge,
  .cmp-intro-inner { animation: none !important; }
  .cmp-deep-spark,
  .nv-cmp-deep.is-on svg,
  .cmp-deep-toggle.is-on svg,
  .cmp-deep-skeleton i,
  .cmp-deep-caret,
  .cmp-msg--deep.is-streaming .cmp-deep-bubble::after { animation: none !important; }
  .cmp-thread { scroll-behavior: auto; }
  .cmp-msg--deep.is-streaming .cmp-deep-bubble::after { opacity: 0.7; }
}

@media (prefers-contrast: more) {
  .cmp-msg.cmp-bot .cmp-bubble,
  .cmp-msg.bot .cmp-bubble { border-color: rgba(47, 107, 117, 0.4); }
  .cmp-deep-trace { border-color: rgba(143, 100, 18, 0.75); }
  .cmp-trace-v { color: #4a3a1a; }
}