:root {
  --sxy-xa-accent: var(--theme-color, #6f5bd8);
}

/* ===== 面板基础（Live2D 与 Safe Mode 共用） ===== */
.sxy-xa-panel {
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 36px));
  max-height: 68vh;
  background: var(--main-bg-color, #fff);
  border: 1px solid var(--main-border-color, #e5e5e5);
  border-radius: var(--main-radius, 12px);
  box-shadow: var(--main-shadow, 0 8px 30px rgba(0,0,0,.12));
  overflow: hidden;
  z-index: 99999;
  font-size: 14px;
}

/* Live2D 场景：面板悬浮在页面右下 */
#sxy-xa-panel {
  position: fixed;
  right: 18px;
  bottom: 150px;
  transform-origin: bottom right;
  animation: sxy-xa-pop .18s ease;
}

/* ===== Safe Mode：自带悬浮球 + 面板 ===== */
.sxy-xa-safe {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.sxy-xa-fab {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  color: #fff;
  background: var(--sxy-xa-accent);
  box-shadow: var(--main-shadow, 0 8px 24px rgba(0,0,0,.18));
  cursor: pointer;
}
.sxy-xa-safe .sxy-xa-panel {
  width: min(360px, calc(100vw - 36px));
  display: none;
  transform-origin: bottom right;
}
.sxy-xa-safe.sxy-xa-open .sxy-xa-panel {
  display: flex;
  animation: sxy-xa-pop .18s ease;
}

@keyframes sxy-xa-pop {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.sxy-xa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  color: #fff;
  background: linear-gradient(120deg, var(--sxy-xa-accent), color-mix(in srgb, var(--sxy-xa-accent) 60%, #b06be0));
}
.sxy-xa-head b { font-size: 14px; }
.sxy-xa-close {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.sxy-xa-body {
  padding: 10px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sxy-xa-msg { display: flex; gap: 8px; max-width: 100%; }
.sxy-xa-msg.sxy-xa-user { justify-content: flex-end; }
.sxy-xa-bubble {
  max-width: 82%;
  padding: 8px 11px;
  border-radius: 12px;
  background: var(--muted-bg-color, #f4f4f4);
  color: var(--key-color, #222);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.sxy-xa-msg.sxy-xa-user .sxy-xa-bubble { background: var(--sxy-xa-accent); color: #fff; }
.sxy-xa-error { color: #e74c3c; }
.sxy-xa-login { color: var(--theme-color, #6f5bd8); text-decoration: underline; cursor: pointer; }

.sxy-xa-typing { display: inline-flex; gap: 4px; align-items: center; }
.sxy-xa-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-color, #999);
  animation: sxy-xa-blink 1s infinite;
}
.sxy-xa-typing i:nth-child(2) { animation-delay: .15s; }
.sxy-xa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sxy-xa-blink { 0%,80%,100% {opacity:.25} 40% {opacity:1} }

.sxy-xa-panel.sxy-xa-loading { opacity: .6; }

.sxy-xa-cards { display: flex; flex-direction: column; gap: 8px; }
.sxy-xa-card {
  display: flex; gap: 10px; align-items: stretch;
  border: 1px solid var(--main-border-color, #eee);
  border-radius: 10px; overflow: hidden;
  background: var(--muted-bg-color, #fafafa);
  text-decoration: none;
}
.sxy-xa-card img { width: 64px; height: 64px; object-fit: cover; flex-shrink: 0; background: #eee; }
.sxy-xa-card .sxy-xa-card-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sxy-xa-card-title { font-weight: 600; font-size: 13px; color: var(--key-color, #222); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sxy-xa-card-desc { font-size: 12px; color: var(--muted-color, #777); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sxy-xa-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sxy-xa-price { font-size: 12px; color: var(--focus-color, #f56c6c); font-weight: 600; }
.sxy-xa-price.sxy-xa-free { color: var(--theme-color, #22b573); }
.sxy-xa-price.sxy-xa-vip { color: var(--c-purple, #b06be0); }
.sxy-xa-view { border: 0; border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; color: #fff; background: var(--sxy-xa-accent); }

.sxy-xa-foot { font-size: 11px; color: var(--muted-color, #999); text-align: center; padding: 6px 10px; border-top: 1px solid var(--main-border-color, #eee); }

/* ===== 输入区（Live2D 接管 + Safe Mode） ===== */
.sxy-xa-input-wrap {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-top: 1px solid var(--main-border-color, #eee);
}
.sxy-xa-input {
  flex: 1; border: 1px solid var(--main-border-color, #ddd); border-radius: 10px;
  padding: 8px 10px; font-size: 13px;
  background: var(--muted-bg-color, #fff); color: var(--key-color, #222); resize: none;
}
.sxy-xa-send { border: 0; border-radius: 10px; padding: 9px 14px; color: #fff; background: var(--sxy-xa-accent); cursor: pointer; font-size: 13px; }
.sxy-xa-send:disabled { opacity: .5; cursor: not-allowed; }