/* 栗栗熊 AI 助教 · 浮窗 + 内嵌反馈点
   视觉延续全站「手工纸感」:硬描边 + 硬阴影 + 暖色纸张。
   所有类名以 va- 前缀,避免和各页面自身样式冲突。 */

.va-root {
  --va-paper:#efe6d3; --va-card:#fbf6e9; --va-ink:#2c2722; --va-ink2:#6b6253;
  --va-blue:#3a6ea5; --va-green:#4a7c3f; --va-yellow:#c79320; --va-orange:#c45a26; --va-red:#b03a2e;
  font-family:-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}

/* ---- 浮动按钮 ---- */
.va-fab {
  position:fixed; right:20px; bottom:20px; z-index:9000;
  width:62px; height:62px; border-radius:50%;
  background:var(--va-yellow); border:3px solid var(--va-ink);
  box-shadow:4px 4px 0 var(--va-ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; transition:transform .1s;
}
.va-fab:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--va-ink); }
.va-fab:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--va-ink); }
.va-fab .va-fab-tip {
  position:absolute; right:72px; bottom:14px; white-space:nowrap;
  background:var(--va-ink); color:var(--va-paper); font-size:13px; font-weight:800;
  padding:5px 10px; border:2px solid var(--va-ink); box-shadow:2px 2px 0 var(--va-ink);
}
.va-hidden { display:none !important; }

/* ---- 聊天面板 ---- */
.va-panel {
  position:fixed; right:20px; bottom:20px; z-index:9001;
  width:374px; max-width:calc(100vw - 28px);
  height:74vh; max-height:620px;
  background:var(--va-paper); border:3px solid var(--va-ink);
  box-shadow:6px 6px 0 var(--va-ink);
  display:flex; flex-direction:column; overflow:hidden;
}
.va-head {
  background:var(--va-ink); color:var(--va-paper);
  padding:11px 14px; display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.va-head .va-title { font-weight:800; font-size:15px; }
.va-head .va-sub { font-weight:400; font-size:12px; opacity:.6; }
.va-head .va-x {
  margin-left:auto; cursor:pointer; font-size:20px; font-weight:800;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--va-paper); border-radius:50%; line-height:1;
}
.va-head .va-x:hover { background:var(--va-paper); color:var(--va-ink); }

/* 访谈练习横幅 */
.va-banner {
  background:var(--va-orange); color:#fff; font-size:12.5px; font-weight:700;
  padding:7px 14px; display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.va-banner button {
  margin-left:auto; font-family:inherit; font-size:11px; font-weight:800; cursor:pointer;
  background:#fff; color:var(--va-ink); border:2px solid var(--va-ink); padding:2px 8px;
}

/* 消息区 */
.va-msgs { flex:1; overflow-y:auto; padding:14px; }
.va-msg { margin:10px 0; display:flex; }
.va-msg .va-bubble {
  max-width:88%; font-size:14.5px; line-height:1.7; padding:9px 12px;
  border:2px solid var(--va-ink); white-space:pre-wrap; word-break:break-word;
}
.va-msg.you { justify-content:flex-end; }
.va-msg.you .va-bubble { background:var(--va-blue); color:#fff; }
.va-msg.ai .va-bubble { background:var(--va-card); color:var(--va-ink); }
.va-msg.ai .va-bubble.va-err { background:#fff3cd; border-color:var(--va-red); color:var(--va-ink); }
.va-quick { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; }
.va-quick button {
  font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;
  background:var(--va-card); color:var(--va-ink); border:2px solid var(--va-ink); padding:5px 9px;
}
.va-quick button:hover { background:var(--va-paper); }
.va-cursor { display:inline-block; width:7px; }

/* 输入区 */
.va-input-row {
  flex-shrink:0; border-top:3px solid var(--va-ink); background:var(--va-card);
  padding:9px; display:flex; gap:8px; align-items:flex-end;
}
.va-input-row textarea {
  flex:1; font-family:inherit; font-size:14px; line-height:1.5;
  border:2px solid var(--va-ink); background:#fff; padding:7px 9px;
  resize:none; max-height:96px; min-height:38px;
}
.va-send {
  font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
  background:var(--va-yellow); color:var(--va-ink); border:2px solid var(--va-ink);
  padding:0 14px; height:38px; flex-shrink:0;
}
.va-send:disabled { background:#d8cfbb; color:var(--va-ink2); cursor:not-allowed; }
.va-foot { flex-shrink:0; background:var(--va-card); padding:0 9px 7px;
  font-size:11px; color:var(--va-ink2); text-align:center; }

/* ---- 内嵌「即时反馈点」---- */
.va-fb {
  background:var(--va-card); border:2.5px solid var(--va-ink);
  box-shadow:3px 3px 0 var(--va-ink); padding:13px 15px; margin:16px 0;
}
.va-fb .va-fb-hd { font-size:13px; font-weight:800; color:var(--va-orange); margin-bottom:8px; }
.va-fb textarea.va-fb-extra {
  width:100%; font-family:inherit; font-size:14px; line-height:1.6;
  border:2px solid var(--va-ink); background:#fff; padding:8px; resize:vertical;
  min-height:62px; margin-bottom:9px;
}
.va-fb-btn {
  font-family:inherit; font-size:14.5px; font-weight:800; cursor:pointer;
  background:var(--va-yellow); color:var(--va-ink); border:2.5px solid var(--va-ink);
  box-shadow:2px 2px 0 var(--va-ink); padding:9px 16px; transition:transform .08s;
}
.va-fb-btn:hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--va-ink); }
.va-fb-btn:disabled { background:#d8cfbb; color:var(--va-ink2); cursor:not-allowed; box-shadow:none; }
.va-fb-tip { font-size:12.5px; color:var(--va-ink2); margin-top:7px; }
.va-fb-out {
  margin-top:11px; background:#fff; border:2px solid var(--va-ink);
  padding:11px 13px; font-size:14px; line-height:1.75;
  white-space:pre-wrap; word-break:break-word;
}
.va-fb-out.va-err { background:#fff3cd; border-color:var(--va-red); }
.va-fb-foot { font-size:11px; color:var(--va-ink2); margin-top:6px; }
.va-fb-redo {
  font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;
  background:var(--va-paper); color:var(--va-ink); border:2px solid var(--va-ink);
  padding:4px 10px; margin-top:8px;
}

/* ---- 栗栗熊头像图(替代原 🐼 emoji)---- */
.va-fab-img { width:44px; height:auto; display:block; pointer-events:none; }
.va-head .va-title { display:flex; align-items:center; gap:5px; }
.va-title-img { height:22px; width:auto; }
.va-fb-btn .va-fb-icon { height:1.45em; width:auto; vertical-align:-0.42em; margin-right:5px; }

@media (max-width:600px) {
  .va-panel { right:0; bottom:0; width:100vw; max-width:100vw; height:86vh; max-height:none; }
  .va-fab { right:14px; bottom:14px; }
}