/* ============================================================
   共享样式底座 — AlipayHK 视觉语言

   设计依据（实测，非凭印象）：
   · 主色取自 AlipayHK 官网样式：青蓝 #00a0e9 / #009ce8
   · 品牌绿 #00d084（官网同源），用作"在线/成功"语义色
   · 品牌主调偏向紫色系，提取为强调色，只用于高亮与焦点，不抢主色
   · 版式特征：大圆角（16-22px）、白底卡片、极淡投影、充足留白、克制图标

   命名约定：brand = 主色阶，accent = 强调色，ink = 中性色阶
   ============================================================ */

:root {
  /* ---- 主色阶：青蓝 ---- */
  --brand-50: #e8f7fe;
  --brand-100: #c9edfc;
  --brand-200: #96daf8;
  --brand-300: #5cc3f2;
  --brand-400: #22aeee;
  --brand-500: #009ce8;
  --brand-600: #00a0e9;
  --brand-700: #0084c2;
  --brand-800: #00699b;
  --brand-900: #064f75;

  /* ---- 强调色：品牌紫，克制使用 ---- */
  --accent-100: #f1e9ff;
  --accent-300: #c4a6f5;
  --accent-500: #8b5cf6;
  --accent-600: #7c3aed;
  --accent-700: #6d28d9;

  /* ---- 语义色 ---- */
  --ok: #00d084;
  --ok-soft: #e6fbf4;
  --warn: #f5a623;
  --warn-soft: #fff6e6;
  --danger: #f4442e;
  --danger-soft: #ffecea;

  /* ---- 中性色阶 ---- */
  --ink-900: #0d1b26;
  --ink-800: #16293a;
  --ink-700: #21384c;
  --ink-600: #334c63;
  --ink-500: #526a80;
  --ink-400: #7b8fa3;
  --ink-300: #a8b8c7;
  --ink-200: #cfdae4;
  --ink-100: #e7eef4;
  --ink-50: #f5f9fc;

  /* ---- 形状：AlipayHK 的圆角偏大 ---- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- 投影：极淡、大范围，不用硬边 ---- */
  --shadow-sm: 0 1px 3px rgba(13, 27, 38, 0.06);
  --shadow: 0 4px 16px rgba(13, 27, 38, 0.08);
  --shadow-lg: 0 12px 36px rgba(13, 27, 38, 0.12);
  --shadow-brand: 0 6px 20px rgba(0, 156, 232, 0.24);

  --font-ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* 客服工作台：同一套色系，但底色压深、密度提高 */
:root[data-theme="workbench"] {
  --ink-900: #0b1a26;
  --ink-800: #102433;
  --ink-700: #17303f;
  --ink-600: #1f3d4f;
  --ink-500: #3a5a70;
  --ink-400: #5b7c93;
  --ink-300: #8aa4b8;
  --ink-200: #b6c9d8;
  --ink-100: #dbe6ee;
  --ink-50: #f0f6fa;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--ink-50);
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---------------------------------------------------------- 通用组件 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--ink-100);
  color: var(--ink-700);
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.12s ease, background 0.18s ease, opacity 0.18s ease;
  white-space: nowrap;
}
.btn:active {
  transform: scale(0.97);
}
.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--ink-200);
}
.btn-sm {
  padding: 6px 13px;
  font-size: 13px;
}

.field {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-200);
  background: #fff;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-50);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-300);
  flex: none;
}
.dot.online {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(0, 208, 132, 0.2);
}

/* 吐司提示 */
.toast-wrap {
  position: fixed;
  left: 50%;
  top: calc(14px + var(--safe-t));
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  padding: 10px 18px;
  border-radius: var(--radius);
  background: rgba(13, 27, 38, 0.92);
  color: #fff;
  font-size: 13.5px;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  backdrop-filter: blur(8px);
  max-width: 86vw;
  text-align: center;
}
.toast.warn {
  background: rgba(245, 166, 35, 0.96);
  color: #3d2a04;
}
.toast.err {
  background: rgba(244, 68, 46, 0.96);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
}

/* 头像：统一走主色渐变，与品牌色一致 */
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  flex: none;
  user-select: none;
}
.avatar.agent {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
}
.avatar.visitor {
  background: linear-gradient(135deg, var(--ink-400), var(--ink-600));
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(123, 143, 163, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(123, 143, 163, 0.5);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* 连接状态条 */
.conn-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 6px 12px;
  background: var(--warn);
  color: #3d2a04;
  font-weight: 600;
}
.conn-bar[hidden] {
  display: none;
}
.conn-bar.err {
  background: var(--danger);
  color: #fff;
}
.spin {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}