/* 小伴对话坞（mascot-v5-talk）样式 —— 修复 app.html/子页面 404，与全局浅色外壳统一。
   视觉母题：紫青渐变头部 + 浅紫-白玻璃面板，与产品外壳一致。
   覆盖 JS 动态生成的全部结构：#xbTalkDock 及其 .xbtd-* 子元素。 */

:root {
  --xb-purple: #6D5EFC;
  --xb-teal:   #28C2C8;
  --xb-grad:   linear-gradient(135deg, #6D5EFC 0%, #28C2C8 100%);
  --xb-panel:  rgba(255, 255, 255, 0.96);
  --xb-panel-2: #f8f7fc;
  --xb-line:   rgba(120, 120, 180, 0.22);
  --xb-ink:    #1d2140;
  --xb-ink-2:  #4a4e6a;
  --xb-ink-3:  #7b7f9e;
  --xb-bubble: #eef0fb;
  --xb-shadow: 0 18px 50px -16px rgba(60, 50, 160, 0.35);
}

#xbTalkDock {
  position: fixed;
  right: 22px;
  bottom: 262px;                /* 抬高，避免遮住右下角 230px 小伴公仔 */
  width: 340px;
  max-width: calc(100vw - 28px);
  height: 520px;
  max-height: calc(100vh - 282px); /* 保证不顶出视口顶部 */
  display: none;                /* 默认收起，.open 才展开 */
  flex-direction: column;
  background: var(--xb-panel);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--xb-line);
  border-radius: 18px;
  box-shadow: var(--xb-shadow);
  color: var(--xb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  z-index: 2147483000;
}
#xbTalkDock.open {
  display: flex;
  animation: xbtd-in .22s ease both;
}
@keyframes xbtd-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 头部 */
.xbtd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--xb-grad);
  color: #fff;
  flex: none;
}
.xbtd-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.xbtd-title::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.28);
}
.xbtd-x {
  flex: none;
  width: 26px; height: 26px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.xbtd-x:hover { background: rgba(255,255,255,.3); }

/* 阶段进度条 */
.xbtd-stages {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  background: linear-gradient(135deg, #f4f1ff, #e8fbff);
  border-bottom: 1px solid var(--xb-line);
  scrollbar-width: none;
  flex: none;
}
.xbtd-stages::-webkit-scrollbar { display: none; }
#xbTalkDock.coach-on .xbtd-stages { display: flex; }
.xbtd-stage {
  position: relative;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: #8b86b8;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(120,120,180,.22);
  white-space: nowrap;
  transition: .18s;
}
.xbtd-stage::after {
  content: "";
  position: absolute;
  right: -6px; top: 50%;
  width: 4px; height: 1.5px;
  background: rgba(120,120,180,.28);
  transform: translateY(-50%);
}
.xbtd-stage:last-child::after { display: none; }
.xbtd-stage.done { color: var(--xb-purple); border-color: rgba(109,94,252,.35); }
.xbtd-stage.active {
  color: #fff;
  background: var(--xb-grad);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(109,94,252,.3);
}

/* 消息区 */
.xbtd-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.xbtd-msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 14px;
  word-break: break-word;
  position: relative;
  font-size: 13px;
  line-height: 1.5;
  animation: xbMsg .18s ease-out;
}
@keyframes xbMsg {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.xbtd-me {
  align-self: flex-end;
  background: var(--xb-grad);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.xbtd-xb {
  align-self: flex-start;
  background: var(--xb-bubble);
  color: var(--xb-ink);
  border: 1px solid var(--xb-line);
  border-bottom-left-radius: 4px;
}
.xbtd-stagetag {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--xb-purple);
  margin: -1px 0 3px;
  letter-spacing: .3px;
}
.xbtd-text { display: block; }

/* 状态行 */
.xbtd-status {
  flex: none;
  min-height: 18px;
  padding: 4px 14px;
  font-size: 11px;
  color: var(--xb-ink-3);
  background: var(--xb-panel-2);
  border-top: 1px solid var(--xb-line);
}

/* 音量条 */
.xbtd-vu {
  flex: none;
  height: 4px;
  background: rgba(109,94,252,.08);
  overflow: hidden;
}
.xbtd-vu i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--xb-grad);
  transition: width .08s linear;
}

/* 输入区 */
.xbtd-composer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--xb-panel-2);
  border-top: 1px solid var(--xb-line);
}
#xbtdInput {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--xb-line);
  background: #fff;
  color: var(--xb-ink);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#xbtdInput::placeholder { color: var(--xb-ink-3); }
#xbtdInput:focus {
  border-color: var(--xb-purple);
  box-shadow: 0 0 0 3px rgba(109,94,252,.12);
}
.xbtd-send,
.xbtd-mic {
  flex: none;
  width: 38px; height: 38px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s, filter .15s;
}
.xbtd-send {
  background: var(--xb-grad);
  color: #fff;
}
.xbtd-send:hover { filter: brightness(1.08); }
.xbtd-send:active,
.xbtd-mic:active { transform: scale(.93); }
.xbtd-mic {
  background: var(--xb-bubble);
  border: 1px solid var(--xb-line);
  color: var(--xb-ink-2);
}
.xbtd-mic.on {
  background: var(--xb-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(40,194,200,.16);
}

/* 陪学模式：顶部加一道强调描边 */
#xbTalkDock.coach-on {
  border-color: transparent;
  box-shadow: var(--xb-shadow), 0 0 0 2px rgba(109,94,252,.35);
}
#xbTalkDock.coach-on .xbtd-head {
  background: linear-gradient(135deg, #8a5cff 0%, #2bd0c8 100%);
}

/* 平板/移动端隐藏（与 app.html 内联样式对齐） */
@media (max-width: 1024px) {
  #xbTalkDock { display: none !important; }
}

/* 窄屏适配 */
@media (max-width: 480px) {
  #xbTalkDock {
    right: 10px; left: 10px;
    width: auto;
    bottom: 90px;
    height: 70vh;
    max-height: calc(100vh - 110px);
  }
}