/* 回答里的链接单独一档橙。
   直接用 --accent-o 在浅色气泡底上只有 2.9:1，13px 正文要 4.5:1。
   #9C5A04 色相 34°（还在橙黄带里，不到 26° 那种发棕），气泡底上 4.80:1。
   深色模式底本来就深，--accent-o 已经 9.2:1，不用换。 */
:root{--hp-link:#9C5A04}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--hp-link:var(--accent-o)}
}
:root[data-theme="dark"]{--hp-link:var(--accent-o)}

/* ══ 右下角「帮助」浮窗 ══
   和反馈共用 .fb 容器和 .fb-tab 外观（滑出、贴边、触屏常驻那套都直接继承），
   这里只写问答面板自己的部分。配色照站内的橙/灰，不引第四种颜色。 */
.hp-panel{
  box-sizing:border-box;
  width:min(360px,calc(100vw - 2 * var(--fb-gap,clamp(16px,3vw,32px))));
  max-height:min(70vh,520px);
  margin-right:var(--fb-gap,clamp(16px,3vw,32px));
  border:1px solid var(--hair-2);border-radius:14px;background:var(--card);
  box-shadow:0 18px 46px rgba(0,0,0,.16);
  display:flex;flex-direction:column;overflow:hidden}
/* 作者样式盖过 UA 的 [hidden]{display:none}，得自己收回来 */
.hp-panel[hidden]{display:none}
.hp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px 11px;border-bottom:1px solid var(--hair)}
.hp-head b{font-size:14px;color:var(--ink-hi);font-weight:650}
.hp-head em{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-left:7px}

/* 对话区。默认贴底，新消息进来自动滚到底部 */
.hp-log{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;
  display:flex;flex-direction:column;gap:10px;
  font-size:13px;line-height:1.75;color:var(--ink-2)}
.hp-msg{max-width:100%;word-break:break-word}
/* 自己说的那条：橙色只做底色的浅淡染，文字仍用正文墨色。
   实心橙 + 白字在深色模式下只有 1.7:1（深色下 --accent-o 会变亮橙），
   13px 正文要 4.5:1，读不了；染底两套主题都自动够。 */
.hp-msg.is-me{align-self:flex-end;max-width:82%;
  background:color-mix(in srgb, var(--accent-o) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-o) 30%, transparent);
  color:var(--ink);
  padding:7px 11px;border-radius:12px 12px 3px 12px}
.hp-msg.is-ai{align-self:flex-start;
  background:var(--inset);padding:8px 11px;border-radius:12px 12px 12px 3px}
.hp-msg.is-err{align-self:flex-start;color:var(--err,#C0392B);font-size:12.5px}
.hp-msg a{color:var(--hp-link);text-decoration:underline;text-underline-offset:2px}
.hp-msg.is-me a{color:var(--hp-link)}

/* 开场白 + 三个例子，点一下直接当问题发出去 */
.hp-tip{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.hp-eg{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.hp-eg button{appearance:none;-webkit-appearance:none;
  border:1px solid var(--hair-2);border-radius:999px;background:var(--card);
  color:var(--ink-2);font:inherit;font-size:12px;line-height:1;
  padding:6px 10px;cursor:pointer}
.hp-eg button:hover{color:var(--ink-hi);border-color:var(--accent-o)}

/* 等回答时的三个点 */
.hp-dots{display:inline-flex;gap:4px;align-items:center;height:18px}
.hp-dots i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);
  animation:hp-blink 1.1s infinite ease-in-out}
.hp-dots i:nth-child(2){animation-delay:.18s}
.hp-dots i:nth-child(3){animation-delay:.36s}
@keyframes hp-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hp-dots i{animation:none;opacity:.55}}

.hp-foot{display:flex;align-items:flex-end;gap:8px;
  padding:10px 12px 11px;border-top:1px solid var(--hair)}
.hp-t{flex:1;min-width:0;height:36px;max-height:96px;resize:none;box-sizing:border-box;
  border:1px solid var(--hair);border-radius:9px;background:var(--bg);
  padding:8px 10px;font:inherit;font-size:13px;line-height:1.5;color:var(--ink)}
.hp-t:focus{outline:none;border-color:var(--accent-o)}
.hp-send{appearance:none;-webkit-appearance:none;flex:none;
  border:1px solid var(--accent-o);border-radius:8px;
  background:var(--accent-o);color:#fff;font:inherit;font-size:12.5px;font-weight:650;
  height:36px;padding:0 14px;cursor:pointer;white-space:nowrap}
.hp-send:disabled{opacity:.5;cursor:default}