/* 承远导购聊天挂件 —— 复用站点设计令牌（--teal 等），亮色，自挂载。 */
.cy-daogou{
  --cy-teal:var(--teal,#18776f);
  --cy-teal-dark:var(--teal-dark,#0f504b);
  --cy-ink:var(--ink,#1f2933);
  --cy-muted:var(--muted,#65717c);
  --cy-surface:var(--surface,#fff);
  --cy-soft:var(--surface-soft,#eef3ef);
  --cy-line:var(--line,#d9e0dc);
  --cy-amber:var(--amber,#b46b19);
  --cy-shadow:0 18px 42px rgba(31,41,51,.18);
  position:fixed; z-index:60;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
/* 悬浮按钮 */
.cy-fab{
  position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:50%;
  background:var(--cy-teal); color:#fff; border:none; cursor:pointer;
  box-shadow:var(--cy-shadow); display:flex; align-items:center; justify-content:center;
  font-size:24px; transition:transform .18s ease, background .18s ease;
}
.cy-fab:hover{ transform:translateY(-2px); background:var(--cy-teal-dark); }
.cy-fab .cy-badge{ position:absolute; top:-4px; right:-4px; background:var(--cy-amber); color:#fff;
  font-size:11px; padding:1px 6px; border-radius:10px; font-weight:700; white-space:nowrap; }

/* 面板 */
.cy-panel{
  position:fixed; right:20px; bottom:20px; width:min(384px,calc(100vw - 32px)); height:min(600px,calc(100vh - 40px));
  background:var(--cy-surface); border:1px solid var(--cy-line); border-radius:16px;
  box-shadow:var(--cy-shadow); display:none; flex-direction:column; overflow:hidden;
}
.cy-daogou[data-open="1"] .cy-panel{ display:flex; }
.cy-daogou[data-open="1"] .cy-fab{ display:none; }

.cy-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--cy-teal); color:#fff; }
.cy-head .cy-avatar{ width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:18px; }
.cy-head .cy-t{ font-weight:700; font-size:15px; line-height:1.2; }
.cy-head .cy-s{ font-size:11px; opacity:.85; }
.cy-head .cy-x{ margin-left:auto; background:transparent; border:none; color:#fff; font-size:20px; cursor:pointer; opacity:.85; padding:4px; }
.cy-head .cy-x:hover{ opacity:1; }

.cy-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--cy-soft); }
.cy-msg{ max-width:85%; padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.cy-msg.bot{ align-self:flex-start; background:var(--cy-surface); color:var(--cy-ink); border:1px solid var(--cy-line); border-bottom-left-radius:4px; }
.cy-msg.user{ align-self:flex-end; background:var(--cy-teal); color:#fff; border-bottom-right-radius:4px; }
.cy-tool{ align-self:flex-start; font-size:12px; color:var(--cy-muted); display:flex; align-items:center; gap:6px; padding:2px 4px; }
.cy-tool .cy-dot{ width:6px; height:6px; border-radius:50%; background:var(--cy-teal); animation:cy-pulse 1s infinite; }
@keyframes cy-pulse{ 0%,100%{opacity:.3} 50%{opacity:1} }

/* 购买卡 */
.cy-buy{ align-self:stretch; background:var(--cy-surface); border:1px solid var(--cy-line); border-radius:12px; padding:14px; box-shadow:0 4px 14px rgba(31,41,51,.08); }
.cy-buy .cy-bt{ font-weight:700; font-size:14px; color:var(--cy-ink); margin-bottom:4px; }
.cy-buy .cy-bp{ font-size:12px; color:var(--cy-muted); margin-bottom:10px; }
.cy-buy .cy-brow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cy-buy .cy-price{ font-size:22px; font-weight:800; color:var(--cy-amber); }
.cy-buy .cy-go{ background:var(--cy-teal); color:#fff; text-decoration:none; padding:9px 18px; border-radius:8px; font-size:14px; font-weight:700; white-space:nowrap; }
.cy-buy .cy-go:hover{ background:var(--cy-teal-dark); }

.cy-foot{ padding:10px 12px; border-top:1px solid var(--cy-line); background:var(--cy-surface); display:flex; gap:8px; }
.cy-foot textarea{ flex:1; resize:none; border:1px solid var(--cy-line); border-radius:20px; padding:9px 14px; font:inherit; font-size:14px; max-height:100px; outline:none; color:var(--cy-ink); background:var(--cy-surface); }
.cy-foot textarea:focus{ border-color:var(--cy-teal); }
.cy-foot .cy-send{ width:40px; height:40px; flex:0 0 auto; border-radius:50%; border:none; background:var(--cy-teal); color:#fff; cursor:pointer; font-size:16px; }
.cy-foot .cy-send:disabled{ opacity:.5; cursor:default; }

@media (max-width:540px){
  .cy-panel{ right:0; bottom:0; width:100vw; height:88vh; border-radius:16px 16px 0 0; }
}
@media (prefers-reduced-motion:reduce){ .cy-fab,.cy-dot{ transition:none; animation:none; } }