/* 在线客服聊天窗口：颜色跟随四个前端模板（读取模板自己的 --ng-* 变量，星空宇宙用下方兜底色） */
.lc-root, .lc-entry {
  --lc-accent: var(--ng-accent, #8b7cf6);
  --lc-accent-2: var(--ng-accent-2, #c56cf0);
  --lc-page: var(--ng-page, #14122a);
  --lc-panel: var(--ng-panel-solid, #1f1c3d);
  --lc-ink: var(--ng-ink, #efeafd);
  --lc-muted: var(--ng-muted, #a49fc4);
  --lc-line: var(--ng-line, #34305c);
  --lc-on-accent: #17131f; /* 深色模式下模板强调色偏亮，用深色字 */
}
html[data-view-palette="light"] .lc-root, html[data-view-palette="light"] .lc-entry { --lc-on-accent: #ffffff; }
html[data-view-managed-skin="cosmic"] .lc-root, html[data-view-managed-skin="cosmic"] .lc-entry { --lc-on-accent: #ffffff; }
html[data-view-managed-skin="cosmic"] .lc-root, html[data-view-managed-skin="cosmic"] .lc-entry {
  --lc-accent: #8b7cf6; --lc-accent-2: #c56cf0; --lc-page: #14122a; --lc-panel: #1f1c3d; --lc-ink: #efeafd; --lc-muted: #a49fc4; --lc-line: #34305c;
}
html[data-view-managed-skin="cosmic"][data-view-palette="light"] .lc-root, html[data-view-managed-skin="cosmic"][data-view-palette="light"] .lc-entry {
  --lc-accent: #6550ce; --lc-accent-2: #8b5cf6; --lc-page: #f5f3fc; --lc-panel: #ffffff; --lc-ink: #292443; --lc-muted: #69617e; --lc-line: #dfd9ef;
}

/* 入口沿用站点“客服渠道”行样式（ng-support-channel），这里只补按钮元素的默认差异 */
.lc-entry { width: 100%; font: inherit; text-align: left; cursor: pointer; }

.lc-root {
  position: fixed; z-index: 2147483000; right: 18px; bottom: 18px; width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100vh - 36px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: var(--lc-page); color: var(--lc-ink); border: 1px solid var(--lc-line);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35); font: 14px/1.55 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.lc-root[hidden] { display: none; }
.lc-root .lc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 12px 14px; color: var(--lc-on-accent);
  background: linear-gradient(135deg, var(--lc-accent), var(--lc-accent-2)) !important; border: 0; border-radius: 0; box-shadow: none; position: static; backdrop-filter: none; }
.lc-title { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.lc-title strong { font-size: 16px; }
.lc-title small { grid-column: 2; opacity: .85; font-size: 12px; }
.lc-dot { width: 9px; height: 9px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 0 3px rgba(62, 224, 143, .25); }
.lc-root .lc-close { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .18); color: var(--lc-on-accent); box-shadow: none; font-size: 22px; line-height: 1; cursor: pointer; }
.lc-list { flex: 1; margin: 0; padding: 14px; overflow-y: auto; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lc-msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; word-break: break-word; white-space: pre-wrap; }
.lc-msg p { margin: 0; }
.lc-msg time { display: block; margin-top: 2px; font-size: 11px; opacity: .7; text-align: right; }
.lc-agent { align-self: flex-start; background: var(--lc-panel); border: 1px solid var(--lc-line); border-bottom-left-radius: 4px; }
.lc-me { align-self: flex-end; color: var(--lc-on-accent); background: var(--lc-accent); border-bottom-right-radius: 4px; }
.lc-local { opacity: .92; }
.lc-status { min-height: 18px; margin: 0; padding: 0 14px; color: var(--lc-muted); font-size: 12px; }
.lc-form { padding: 10px 12px 12px; border-top: 1px solid var(--lc-line); background: var(--lc-panel); }
.lc-name { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--lc-muted); font-size: 12px; }
.lc-name[hidden] { display: none; }
.lc-name input { flex: 1; min-width: 0; }
.lc-row { display: flex; gap: 8px; align-items: flex-end; }
.lc-name input, .lc-input { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--lc-line); background: var(--lc-page); color: var(--lc-ink); font: inherit; }
.lc-input { flex: 1; min-width: 0; resize: none; }
.lc-root .lc-send { flex: none; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--lc-accent); color: var(--lc-on-accent); box-shadow: none; font: inherit; font-weight: 600; cursor: pointer; }
.lc-send:disabled { opacity: .6; cursor: wait; }
.lc-badge { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: #ff4d4f; border: 2px solid #fff; }

@media (max-width: 520px) {
  .lc-root { inset: auto 0 0 0; width: 100vw; height: min(78vh, 620px); border-radius: 18px 18px 0 0; }
}