/* ============================================================================
   雷布斯顾问 / 马斯克顾问 —— 老板板块 · 子页样式
   ----------------------------------------------------------------------------
   独立 css，在 index.html 里排在 style.css 与 coach.css 之后加载，
   靠「同特异性 → 后出现者胜出」覆盖，零改 style.css。

   设计要点（这三点是「高级感」的来源，改的时候别丢）：
     ① **两套主题只靠 CSS 变量**：顶层两个选择器各定义一组 --ad-* 变量，
        下面所有组件只引用变量。加第三位顾问 = 加一段变量，不用动组件。
     ② **### 小标题渲染成带色条的标签块**（.ad-bubble h4）——
        顾问的输出是结构化的（先看势 / 卡在哪个字 / 这一刀砍在哪…），
        把这些标题做成视觉锚点，用户扫一眼就知道这段在讲什么。
        这是纯 CSS 实现的（advisor.js 的 mdToHtml 把 ### 变成 <h4>），零额外 JS。
     ③ **人物卡不做成大头像**：用「徽标字 + 思维框架 chips」代替。
        既避开了真人肖像权，也比一个圆头像信息量大 —— 用户进来先看到方法论。

   ⚠️ 本文件里凡带绝对定位装饰（.ad-hero-glow / .ad-frame-dot）的容器，
     必须自带 position: relative，否则手机上装饰物会按 right:-30% 溢出撑宽整页。
   ⚠️ CSS 注释里禁止出现「星号 斜杠」序列（会提前结束注释吞掉规则）。
   ============================================================================ */

/* ===================== ① 主题变量（两套，只换这里） ===================== */
/* 雷布斯顾问：暖橙 —— 与站点品牌橙同源，不引入新主色 */
#sub-advisor[data-brain="leibus"] {
  --ad-c1: #ff9a4d;
  --ad-c2: #f95901;
  --ad-c3: #c23c00;
  --ad-soft: #fff6ee;
  --ad-soft2: #fffdfa;
  --ad-line: #f7e3d0;
  --ad-ink: #a8541a;
  --ad-ink2: #c07a45;
  --ad-glow: rgba(249, 89, 1, .30);
  --ad-bubble: #fff;
  --ad-on: #fff;
}
/* 马斯克顾问：深空蓝 —— 与老板板块的暖色形成对照，一眼分得清在跟谁说话 */
#sub-advisor[data-brain="musk"] {
  --ad-c1: #5b8def;
  --ad-c2: #2f5fd0;
  --ad-c3: #1b3a86;
  --ad-soft: #f2f6ff;
  --ad-soft2: #fbfcff;
  --ad-line: #dde7fb;
  --ad-ink: #2b4c9b;
  --ad-ink2: #6b86bd;
  --ad-glow: rgba(47, 95, 208, .30);
  --ad-bubble: #fff;
  --ad-on: #fff;
}

#sub-advisor { padding-bottom: 8px; }

/* ===================== ② 人物卡 ===================== */
.ad-hero {
  position: relative;               /* 装饰物定位的锚 */
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  padding: 16px 16px 14px;
  margin-bottom: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--ad-c1) 0%, var(--ad-c2) 58%, var(--ad-c3) 100%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 10px 24px -12px var(--ad-glow);
}
/* 右上光斑：廉价感与高级感的分界线就在这道光的柔度上 */
.ad-hero-glow {
  position: absolute; top: -52px; right: -36px; width: 168px; height: 168px;
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 68%);
}
.ad-hero-top { display: flex; align-items: center; gap: 12px; }

/* 徽标字：替代真人头像（避肖像权，且信息量更大） */
.ad-badge {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; letter-spacing: 0;
  background: rgba(255, 255, 255, .20);
  border: 1px solid rgba(255, 255, 255, .38);
  backdrop-filter: blur(2px);
}
.ad-hero-body { min-width: 0; flex: 1 1 auto; }
.ad-hero-name { font-size: 17px; font-weight: 800; letter-spacing: .3px; }
.ad-hero-slogan {
  font-size: 11.5px; margin-top: 4px; line-height: 1.5;
  color: rgba(255, 255, 255, .92); letter-spacing: .2px;
}
.ad-swap {
  flex: 0 0 auto; font-family: inherit; cursor: pointer;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: #fff; background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .40);
  padding: 6px 10px; border-radius: 10px;
}
.ad-swap:active { transform: scale(.95); }

/* 思维框架 chips —— 让用户一进来就看到「他用什么方法」 */
.ad-frames { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ad-frame {
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .96);
}

/* 免责说明：用真人姓名做产品必须写明（提示词里也锁死了不许自称本人） */
.ad-disc {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 10.5px; line-height: 1.55; color: rgba(255, 255, 255, .80);
}

/* ===================== ③ 分析流程条 ===================== */
.ad-flow {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--ad-soft);
  border: 1px solid var(--ad-line); border-radius: 14px;
  font-size: 11.5px;
}
.ad-flow-label { color: var(--ad-ink2); font-weight: 700; margin-right: 2px; }
.ad-flow-step {
  color: var(--ad-ink); background: #fff; border: 1px solid var(--ad-line);
  padding: 2px 8px; border-radius: 7px; white-space: nowrap;
}
.ad-flow-arrow { color: var(--ad-line); font-style: normal; }

/* ===================== ④ 对话区 ===================== */
.ad-body { display: flex; flex-direction: column; gap: 13px; padding-bottom: 8px; }

.ad-msg { display: flex; gap: 9px; align-items: flex-start; }
.ad-msg-badge {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--ad-c2) 0%, var(--ad-c3) 100%);
}
.ad-bubble {
  max-width: calc(100% - 44px);
  padding: 12px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.75;
  word-break: break-word; overflow-wrap: anywhere;
  background: var(--ad-bubble);
  border: 1px solid var(--ad-line);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(20, 20, 40, .03);
}
/* AI 气泡：左侧一道主题色细条 + 淡淡的顶部渐变，比纯白有层次 */
.ad-msg.ai .ad-bubble {
  border-left: 3px solid var(--ad-c1);
  background: linear-gradient(180deg, var(--ad-soft2) 0%, var(--ad-bubble) 90px);
}
.ad-msg.me { justify-content: flex-end; }
.ad-msg.me .ad-bubble {
  background: linear-gradient(135deg, var(--ad-c1) 0%, var(--ad-c2) 100%);
  border-color: transparent; color: var(--ad-on);
  box-shadow: 0 4px 12px -6px var(--ad-glow);
}

.ad-bubble p { margin: 0 0 8px; }
.ad-bubble p:last-child { margin-bottom: 0; }
.ad-bubble strong { font-weight: 800; color: var(--ad-ink); }
.ad-msg.me .ad-bubble strong { color: #fff; }

/* ★ 关键：### 小标题 → 带色条的标签块。
   顾问的输出是固定骨架（先看势 / 卡在哪个字 / 这一刀砍在哪 / 本周做这一件事 / 什么情况下我改判），
   用视觉锚点把段落分开，用户扫一眼就抓住结构。 */
.ad-bubble h4 {
  margin: 14px 0 8px; padding: 5px 10px 5px 9px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .2px;
  color: var(--ad-ink);
  background: var(--ad-soft);
  border-left: 3px solid var(--ad-c2);
  border-radius: 3px 9px 9px 3px;
  line-height: 1.5;
}
.ad-bubble h4:first-child { margin-top: 0; }

/* 引用块 —— 提示词用它承载两处最值钱的内容：开头的「一句话判断」、结尾的「这套方法里的一句话」。
   顾问是先给结论再讲理由，所以这个块在整篇里必须是最醒目的那个：
   底色比 h4 的色条更浅（不抢标题的锚点作用），但靠加粗 + 左竖线把它顶出来。 */
.ad-bubble .ad-quote {
  margin: 12px 0; padding: 10px 13px;
  background: linear-gradient(135deg, var(--ad-soft) 0%, var(--ad-soft2) 55%, var(--ad-bubble) 100%);
  border-left: 3px solid var(--ad-c2);
  border-radius: 3px 12px 12px 3px;
  color: var(--ad-ink); font-weight: 700; line-height: 1.62;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.ad-bubble .ad-quote:first-child { margin-top: 0; }
.ad-bubble .ad-quote:last-child { margin-bottom: 0; }
.ad-bubble .ad-quote strong { color: var(--ad-c3); }
.ad-bubble ul, .ad-bubble ol { margin: 0 0 9px; padding-left: 19px; }
.ad-bubble li { margin-bottom: 5px; }
.ad-bubble li:last-child { margin-bottom: 0; }
.ad-bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; padding: 1px 5px; border-radius: 5px;
  background: var(--ad-soft); color: var(--ad-ink);
}
.ad-msg.me .ad-bubble code { background: rgba(255, 255, 255, .22); color: #fff; }
.ad-bubble hr { border: 0; border-top: 1px solid var(--ad-line); margin: 12px 0; }

/* 思考中三点 */
.ad-dots { display: inline-flex; gap: 4px; align-items: center; padding: 3px 0; }
.ad-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ad-c1); opacity: .5;
  animation: adBounce 1.1s infinite ease-in-out;
}
.ad-dots i:nth-child(2) { animation-delay: .16s; }
.ad-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes adBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .45; }
  40% { transform: translateY(-5px); opacity: 1; }
}
.ad-caret {
  display: inline-block; width: 2px; height: 15px;
  vertical-align: text-bottom; margin-left: 2px;
  background: var(--ad-c2); animation: adBlink .9s steps(1) infinite;
}
@keyframes adBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.ad-welcome { color: var(--text); }

/* 快捷提问 chips */
.ad-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.ad-chip {
  font-family: inherit; cursor: pointer; text-align: left;
  font-size: 11.5px; line-height: 1.45;
  color: var(--ad-ink); background: var(--ad-soft);
  border: 1px solid var(--ad-line);
  padding: 6px 10px; border-radius: 10px;
  /* 让两个胶囊能并排（问题文案已统一压到 9 字以内，见 advisor.js 的 quick）——
     之前 12px/7px11px 时一条占一行，6 条堆成 6 行太散。 */
  flex: 0 1 auto;
}
.ad-chip:hover { border-color: var(--ad-c1); }
.ad-chip:active { transform: scale(.97); }

.ad-err {
  font-size: 12.5px; line-height: 1.6;
  color: #b3261e; background: #fff3f2;
  border: 1px solid #ffd9d6; border-radius: 12px;
  padding: 10px 12px;
}

/* ★ 对照按钮：回答完之后出现，一键把同一个问题丢给另一位顾问。
   这是两个顾问真正的价值所在 —— 同一个问题两副脑子，答案方向不同但都成立。 */
.ad-cross {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; cursor: pointer; align-self: flex-start;
  margin: -4px 0 2px 39px;
  font-size: 12px; font-weight: 700;
  color: var(--ad-ink); background: #fff;
  border: 1px dashed var(--ad-c1);
  padding: 7px 12px; border-radius: 11px;
}
.ad-cross:hover { background: var(--ad-soft); }
.ad-cross:active { transform: scale(.97); }

/* ===================== ⑤ 输入区 ===================== */
.ad-composer { margin-top: 14px; }
.ad-composer-row {
  display: flex; gap: 9px; align-items: flex-end;
  padding: 9px 9px 9px 13px;
  background: #fff; border: 1px solid var(--ad-line);
  border-radius: 16px;
  box-shadow: 0 3px 14px -10px rgba(20, 20, 40, .28);
}
.ad-input {
  flex: 1 1 auto; min-width: 0; resize: none;
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 14px; line-height: 1.6;
  color: var(--text); max-height: 132px; padding: 4px 0;
}
.ad-input::placeholder { color: #b6b3ae; }
.ad-send {
  flex: 0 0 auto; font-family: inherit; cursor: pointer;
  font-size: 13.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--ad-c1) 0%, var(--ad-c2) 100%);
  border: 0; padding: 9px 16px; border-radius: 12px;
  box-shadow: 0 5px 13px -8px var(--ad-glow);
}
.ad-send:disabled { opacity: .5; cursor: default; }
.ad-send:active:not(:disabled) { transform: scale(.96); }

.ad-tip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding: 0 3px;
  font-size: 11.5px; color: var(--text2);
}
.ad-reset {
  font-family: inherit; cursor: pointer; white-space: nowrap;
  font-size: 11.5px; font-weight: 700;
  color: var(--ad-ink); background: #fff;
  border: 1px solid var(--ad-line);
  padding: 5px 10px; border-radius: 9px;
}
.ad-reset:active { transform: scale(.96); }

/* hidden 会被 display:flex/grid 盖掉 → 显式补一条（全站已知坑） */
#sub-advisor [hidden] { display: none !important; }

/* ===================== ⑥ 老板板块的功能卡（两套配色） ===================== */
/* 复用 coach.css 的 .boss-entry 体系，只加配色变体 —— 卡片结构不变，
   所以「与大卡尺寸一致」那套断言（banner 高度基准）不受影响。 */
.combo-card.boss-entry.boss-entry-lb .boss-entry-ico {
  background: linear-gradient(135deg, #ff9a4d 0%, #f95901 100%);
}
.combo-card.boss-entry.boss-entry-lb .boss-entry-tag { color: #a8541a; background: #fff0e0; }
.combo-card.boss-entry.boss-entry-lb .boss-entry-flow { color: #a8541a; }
.combo-card.boss-entry.boss-entry-lb .boss-entry-flow span {
  background: #fff4ea; border-color: #f7dfc9;
}

.combo-card.boss-entry.boss-entry-mk .boss-entry-ico {
  background: linear-gradient(135deg, #5b8def 0%, #2f5fd0 100%);
  box-shadow: 0 6px 14px rgba(47, 95, 208, .32);
}
.combo-card.boss-entry.boss-entry-mk .boss-entry-tag { color: #2b4c9b; background: #eef3ff; }
.combo-card.boss-entry.boss-entry-mk .boss-entry-flow { color: #2b4c9b; }
.combo-card.boss-entry.boss-entry-mk .boss-entry-flow span {
  background: #f2f6ff; border-color: #dde7fb;
}

/* 桌面端稍微放大一档（与其它板块一致的做法） */
@media (min-width: 768px) {
  .ad-hero { padding: 20px 20px 17px; border-radius: 22px; }
  .ad-hero-name { font-size: 19px; }
  .ad-badge { width: 52px; height: 52px; font-size: 25px; border-radius: 17px; }
  .ad-bubble { font-size: 14.5px; }
}