:root {
  /* ===== M3 Color Roles - Purple Theme ===== */
  --primary: #6750A4;
  --on-primary: #FFFFFF;
  --primary-container: #EADDFF;
  --on-primary-container: #21005D;
  --secondary-container: #E8DEF8;
  --on-secondary-container: #1D192B;
  --tertiary-container: #FFD8E4;
  --on-tertiary-container: #31111D;
  --surface: #FEF7FF;
  --surface-container-low: #F7F2FA;
  --surface-container: #F3EDF7;
  --surface-container-high: #ECE6F0;
  --surface-container-highest: #E6E0E9;
  --on-surface: #1D1B20;
  --on-surface-variant: #49454F;
  --outline: #79747E;
  --outline-variant: #CAC4D0;
  --inverse-surface: #322F35;
  --inverse-on-surface: #F5EFF7;
  --inverse-primary: #D0BCFF;
  --error: #B3261E;
  --on-error: #FFFFFF;
  --error-container: #F9DEDC;
  --on-error-container: #410E0B;

  /* ===== Semantic mappings (保留旧变量名以兼容现有代码) ===== */
  --primary-hover: #5B3F96;
  --primary-light: var(--primary-container);
  --primary-glow: rgba(103,80,164,0.15);
  --sidebar-bg: var(--surface-container-high);
  --sidebar-hover: var(--surface-container-highest);
  --sidebar-active: var(--primary);
  --bg: var(--surface);
  --card-bg: var(--surface-container-low);
  --card-bg-solid: var(--surface-container-low);
  --border: var(--outline-variant);
  --text: var(--on-surface);
  --text-secondary: var(--on-surface-variant);
  --text-muted: #79747E;
  --success: #2E7D32;
  --success-light: #C8E6C9;
  --warning: #ED6C02;
  --warning-light: #FFE0B2;
  --danger: var(--error);
  --danger-light: var(--error-container);
  --info: #1565C0;
  --info-light: #BBDEFB;
  --purple: var(--primary);
  --purple-light: var(--primary-container);

  /* ===== M3 Expressive Shape ===== */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --radius-xl: 32px;

  /* ===== M3 Elevation ===== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --shadow-lg: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-fab: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12);

  /* ===== M3 Motion - standard ===== */
  --transition: 200ms cubic-bezier(0.2, 0, 0, 1);
  --transition-medium: 300ms cubic-bezier(0.2, 0, 0, 1);
  --transition-large: 500ms cubic-bezier(0.2, 0, 0, 1);
  --motion-emphasized: 500ms cubic-bezier(0.2, 0, 0, 1);
  --ripple-color: rgba(103, 80, 164, 0.12);
  --transition-long: 0.4s cubic-bezier(0.2, 0, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }
body {
  font-family: Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow: hidden;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* 按钮/导航保留「不可选中」（点着顺手、不会误选文字）；
   正文一律可选可复制 —— 之前 body 上写了 user-select:none，
   导致后台里没法用鼠标选中文字、双击也复制不了。 */
button, .btn, .quick-btn, .sidebar-nav a, .nav-label, .badge, .tab, .pill, .msg-status {
  -webkit-user-select: none;
  user-select: none;
}

input, textarea, select, code, pre {
  -webkit-user-select: text;
  user-select: text;
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-hover); }

/* ===================== LOADING SCREEN ===================== */
.loading-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading-text {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== LAYOUT ===================== */
.layout {
  display: flex;
  height: 100vh;
  min-height: 0;
}

/* ===================== SIDEBAR ===================== */
.sidebar {
  width: 80px;
  background: var(--surface-container);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 24px;
  flex-shrink: 0;
  z-index: 10;
  border-right: none;
  gap: 4px;
}

.sidebar-logo {
  width: 48px;
  height: 48px;
  background: var(--primary-container);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all var(--transition);
}
.sidebar-logo svg { fill: var(--on-primary-container) !important; width: 24px !important; height: 24px !important; }
.sidebar-logo:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow);
}

.sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--font-label-large);
  margin-bottom: 12px;
  cursor: pointer;
  position: relative;
  transition: all var(--transition);
}
.sidebar-avatar:hover { transform: scale(1.08); box-shadow: var(--shadow); }

.sidebar-avatar .online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--success);
  border-radius: 50%;
  border: 2px solid var(--sidebar-bg);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  align-items: center;
  width: 100%;
}

.sidebar-nav a {
  width: 56px;
  height: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-surface-variant);
  transition: all var(--transition);
  position: relative;
  margin: 4px 0;
  overflow: hidden;
}
.sidebar-nav a svg { width: 24px !important; height: 24px !important; transition: fill var(--transition); }
.sidebar-nav a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  border-radius: inherit;
  transition: opacity var(--transition);
  pointer-events: none;
}
.sidebar-nav a:hover::before { opacity: 0.08; }
.sidebar-nav a:active::before { opacity: 0.12; transform: scale(0.96); }
.sidebar-nav a:hover { color: var(--on-surface); }
.sidebar-nav a.active {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  box-shadow: none;
}
.sidebar-nav a.active svg { fill: var(--on-secondary-container); }


.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
}



/* ===================== MAIN AREA ===================== */
.main-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===================== TOPBAR ===================== */
.topbar {
  height: 64px;
  background: var(--surface);
  border-bottom: none;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
  flex-shrink: 0;
}

.topbar-title {
  font: var(--font-title-large);
  color: var(--on-surface);
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-title .icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.topbar-title .icon.blue { background: var(--info-light); color: var(--info); }

.topbar-spacer { flex: 1; }

.topbar-badge {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.topbar-badge.expiry {
  background: var(--warning-light);
  color: #b45309;
  border: 1px solid #fde68a;
}

.topbar-btn {
  padding: 7px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}
.topbar-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.topbar-btn.online { background: var(--success-light); border-color: var(--success); color: var(--success); }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.topbar-user:hover { background: #f8fafc; }

.topbar-user .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818cf8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.topbar-user .name { font-size: 15px; font-weight: 700; color: var(--text); }
.topbar-user .role { font-size: 11px; font-weight: 600; color: #fff; background: var(--primary, #6c5ce7); padding: 2px 8px; border-radius: 10px; margin-top: 2px; display: inline-block; line-height: 1.4; }

/* ===================== CONTENT ===================== */
.content {
  display: block;
  height: calc(100vh - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
/* 聊天页：填满区域，只让消息区滚动，导航和头部常驻 */
body.chat-open .content {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.page-chat-view {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===================== CARDS ===================== */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.card {
  transition: box-shadow var(--transition), transform var(--transition);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font: var(--font-title-medium);
  color: var(--on-surface);
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

/* ===================== STATS GRID ===================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: all var(--transition);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.06;
  transform: translate(20px, -20px);
}
.stat-card:nth-child(1)::after { background: var(--info); }
.stat-card:nth-child(2)::after { background: var(--success); }
.stat-card:nth-child(3)::after { background: var(--warning); }
.stat-card:nth-child(4)::after { background: var(--purple); }

.stat-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.stat-card .icon svg { width: 22px; height: 22px; }

.stat-card .icon.blue { background: var(--info-light); color: var(--info); }
.stat-card .icon.green { background: var(--success-light); color: var(--success); }
.stat-card .icon.orange { background: var(--warning-light); color: var(--warning); }
.stat-card .icon.purple { background: var(--purple-light); color: var(--purple); }

.stat-card .label { font: var(--font-label-large); color: var(--on-surface-variant); margin-bottom: 4px; }
.stat-card .value { font: var(--font-headline-medium); color: var(--on-surface); letter-spacing: -0.5px; }
.stat-card .extra { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ===================== BADGES ===================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font: var(--font-label-medium);
  gap: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.badge.success { background: var(--success-light); color: #059669; }
.badge.warning { background: var(--warning-light); color: #b45309; }
.badge.danger { background: var(--danger-light); color: #dc2626; }
.badge.info { background: var(--info-light); color: #2563eb; }
.badge.default { background: var(--surface-container-low); color: #64748b; }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 9999px;
  font: var(--font-label-large);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  outline: none;
}
.btn:active { transform: scale(0.98); }
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.btn:hover::after { opacity: 0.08; }
.btn:active::after { opacity: 0.12; }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
  border: none;
}
.btn-primary:hover { background: var(--primary); box-shadow: var(--shadow); }
.btn-primary:active { box-shadow: var(--shadow-sm); }

.btn-default {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border: none;
}
.btn-default:hover { background: var(--secondary-container); }

.btn-success { background: var(--tertiary-container); color: var(--on-tertiary-container); border: none; }
.btn-success:hover { background: var(--tertiary-container); }

.btn-danger { background: var(--error-container); color: var(--on-error-container); border: none; }
.btn-danger:hover { background: var(--error-container); }

.btn-text { background: transparent; color: var(--primary); height: 32px; padding: 0 12px; }
.btn-text:hover { background: transparent; }

.btn-sm { height: 32px; padding: 0 16px; font: var(--font-label-medium); border-radius: 9999px; }

/* ===================== FORMS ===================== */
.form-group { margin-bottom: 18px; }

.form-label {
  display: block;
  font: var(--font-label-large);
  color: var(--on-surface-variant);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--outline);
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  transition: all var(--transition);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
}
.form-input:focus {
  border-color: var(--primary);
  border-width: 2px;
  box-shadow: none;
}
.form-input::placeholder { color: var(--text-muted); }

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  /* 纵向不留内边距：下拉框文字由浏览器在内容区居中，
     否则「高度被写死（如工具栏 height:34px）+ 12px 上下内边距」会把文字裁掉 */
  padding: 0 32px 0 16px;
  min-height: 46px;
  line-height: normal;
  cursor: pointer;
}
/* 工具栏等紧凑控件：固定 34px 高，内边距改用左右方向 */
.form-input.compact { height: 34px; padding: 0 14px; line-height: normal; }
select.form-input.compact { padding: 0 30px 0 12px; min-height: 34px; }
.form-input.compact::placeholder { line-height: normal; }
select.form-input:hover {
  border-color: rgba(255,255,255,0.7);
  background-color: rgba(255,255,255,0.85);
}
select.form-input:focus {
  border-color: var(--primary);
  border-width: 2px;
  box-shadow: none;
}
select.form-input option {
  color: var(--inverse-surface);
  background: #ffffff;
  padding: 8px 10px;
}

/* ===================== TOGGLE ===================== */
.toggle {
  position: relative;
  width: 42px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
  position: absolute;
  inset: 0;
  background: rgba(203,213,225,0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 12px;
  transition: all var(--transition);
}
.toggle .slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: all var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle input:checked + .slider { background: var(--primary); }
.toggle input:checked + .slider::before { transform: translateX(18px); }

/* ===================== TABLE ===================== */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }

table th, table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
table th {
  background: rgba(248,250,252,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
}
table tr { transition: background var(--transition); }
table tbody tr:hover { background: #f8fafc; }

/* ===================== TABS ===================== */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: none;
  margin-bottom: 16px;
  background: var(--surface-container);
  border-radius: 9999px;
  padding: 4px;
}
.tab {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: none;
  margin-bottom: 0;
  color: var(--on-surface-variant);
  transition: all var(--transition);
  border-radius: 9999px;
  flex: 1;
  text-align: center;
}
.tab:hover { color: var(--text-secondary); }
.tab.active { color: var(--on-secondary-container); background: var(--secondary-container); font-weight: 600; }

/* ===================== SEARCH ===================== */
.search-bar { display: flex; align-items: center; gap: 8px; }

.search-input-wrapper {
  position: relative;
  flex: 1;
}
.search-input-wrapper .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}
.search-input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  transition: all var(--transition);
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ===================== CHAT LAYOUT ===================== */
.chat-layout {
  display: flex;
  height: 100%;
  gap: 0;
}
.chat-panel-left {
  width: 280px;
  border-right: none;
  display: flex;
  flex-direction: column;
  background: var(--surface-container-low);
}
.chat-panel-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  min-height: 0;
  overflow: hidden;
}
.chat-panel-right {
  width: 280px;
  border-left: none;
  background: var(--surface-container-low);
  display: flex;
  flex-direction: column;
}
#panel-replies {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Session list */
.session-list-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.session-list-header h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.session-list-header .sync-info {
  font-size: 12px;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 4px;
}

.session-tabs {
  display: flex;
  gap: 0;
  margin-top: 8px;
}
.session-tabs .tab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: none;
  border-radius: 6px;
}
.session-tabs .tab.active { background: var(--primary-light); color: var(--primary); }

.session-search {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}
.session-items {
  flex: 1;
  overflow-y: auto;
}
.session-item {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(241,245,249,0.6);
  transition: all var(--transition);
  position: relative;
}
.session-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--primary, #6c5ce7);
  transition: height 0.2s;
}
.session-item.has-unread::before {
  height: 60%;
  background: #ef4444;
}
.session-item.has-tags::before {
  height: 60%;
  background: #f59e0b;
}
.session-item.has-tags.has-unread::before {
  background: linear-gradient(to bottom, #ef4444 50%, #f59e0b 50%);
}
.session-item.blacklisted::before {
  height: 60%;
  background: #64748b;
}
.session-item:hover {
  background: var(--surface-container);
}
.session-item.active {
  background: var(--secondary-container);
  border-right: none;
  border-radius: 16px;
  margin: 0 8px;
}
.session-item.pinned {
  background: rgba(226,232,240,0.65);
}
.session-item.pinned:hover {
  background: rgba(226,232,240,0.85);
}
.session-item.pinned.active {
  background: rgba(79,110,247,0.12);
}

.session-item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: var(--info);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.session-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.offline-tag {
  position: absolute;
  top: -4px;
  right: -8px;
  background: var(--outline);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.2;
  white-space: nowrap;
}
.avatar-offline-tag {
  position: absolute;
  top: -4px;
  right: -8px;
  background: var(--outline);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.2;
  white-space: nowrap;
}
.session-item .info { flex: 1; min-width: 0; }
.session-item .name { font: var(--font-title-small); color: var(--on-surface); font-weight: 700; font-size: 14px; }
.session-item.has-unread .name { color: #ef4444; font-weight: 800; }
.session-item .name-line { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.session-item .session-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.session-item .last-msg {
  font: var(--font-body-medium);
  color: var(--on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.session-item .unread-badge {
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 6px;
  animation: badgePop 200ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes badgePop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===================== BINDING STATUS ===================== */
.bind-avatar-wrap { position: relative; flex-shrink: 0; }
.bind-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.bind-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s;
}
.bind-status-dot.online { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.bind-status-dot.offline { background: var(--outline-variant); }

/* ===================== EMPTY STATE ===================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state .icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--surface-container-highest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 16px;
}
.empty-state h3 { font: var(--font-title-medium); color: var(--on-surface-variant); margin-bottom: 8px; }
.empty-state p { font: var(--font-body-medium); color: var(--on-surface-variant); }

/* ===================== MESSAGES ===================== */
.messages-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  transition: opacity 0.15s ease;
  -webkit-overflow-scrolling: touch;
}
.date-separator {
  text-align: center;
  margin: 8px 0;
}
.date-separator span {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(241,245,249,0.8);
  padding: 3px 12px;
  border-radius: 10px;
}

.message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 75%;
}

.message.received { align-self: flex-start; }
.message.sent { align-self: flex-end; }

.message .avatar {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.message.received .avatar { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #3b82f6; }
.message.sent .avatar.me { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a; }

.msg-body {
  display: flex;
  flex-direction: column;
}

.message .bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font: var(--font-body-medium);
  line-height: 1.5;
  max-width: 100%;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
}
.message.received .bubble {
  background: var(--surface-container-highest);
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  border-top-left-radius: 2px;
  color: var(--text);
}
.message.sent .bubble {
  background: var(--primary);
  color: var(--on-primary);
  border-top-right-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.msg-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}
.message.sent .msg-footer { justify-content: flex-end; }

.msg-fail {
  position: absolute;
  left: -28px;
  top: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fa5151;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(250,81,81,0.4);
}
.msg-fail:hover { transform: scale(1.12); }
.message.sent .msg-body { position: relative; padding-left: 0; }

/* Message input */
.message-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,0.8);
  position: relative;
}
.emoji-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 6px;
  z-index: 50;
  width: 350px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  max-width: 340px;
}
.emoji-grid span {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
}
.emoji-grid span:hover { background: #f2f3f5; }
.emoji-grid img {
  width: 32px !important;
  height: 32px !important;
  display: block;
  object-fit: contain;
}
.wechat-emoji { width: 20px; height: 20px; vertical-align: -3px; display: inline-block; }
.mia-tools {
  display: flex;
  gap: 2px;
  padding: 0;
  position: relative;
}
.input-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.message-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--outline);
  border-radius: 28px;
  font-size: 14px;
  resize: none;
  outline: none;
  min-height: 44px;
  max-height: 120px;
  font-family: inherit;
  transition: all var(--transition);
  background: #f8fafc;
}
.message-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
  background: #fff;
}
.message-input::placeholder {
  color: var(--outline);
}
.send-btn-round {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: none;
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition);
  box-shadow: var(--shadow-fab);
  position: relative;
  overflow: hidden;
}
.send-btn-round::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
  border-radius: inherit;
}
.send-btn-round:hover::after { opacity: 0.08; }
.send-btn-round:active::after { opacity: 0.12; }
.send-btn-round:hover {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-lg);
}
.send-btn-round:active {
  transform: scale(0.98);
}

/* Quick replies panel */
.quick-replies-panel {
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}
.quick-replies-panel h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quick-reply-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.quick-reply-item:hover {
  border-color: var(--primary);
  background: #f6f8ff;
}
.quick-reply-item .num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef2ff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-reply-item .qr-text {
  flex: 1;
  min-width: 0;
}
.quick-reply-item .qr-text .title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 1px;
}
.quick-reply-item .qr-text .details {
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}
.quick-reply-item .arrow {
  flex-shrink: 0;
  color: #ccc;
  font-size: 16px;
  line-height: 1;
}

/* ==== 强制修复：快捷回复卡片窄屏适配 ==== */
#panel-replies {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
}


/* ===================== MODAL ===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.modal {
  background: var(--surface-container-high);
  border-radius: 28px;
  animation: m3DialogEnter 300ms cubic-bezier(0.2, 0, 0, 1);
  padding: 28px;
  width: 500px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.4);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes m3DialogEnter {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* ===================== LOGIN PAGE ===================== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #21005D 0%, #4A2C7A 50%, #21005D 100%);
  position: relative;
  overflow: hidden;
}
.login-page::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(103,80,164,0.3) 0%, transparent 70%);
  top: -150px;
  right: -150px;
  animation: float 8s ease-in-out infinite;
  filter: blur(40px);
}
.login-page::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(208,188,255,0.2) 0%, transparent 70%);
  bottom: -150px;
  left: -150px;
  animation: float 10s ease-in-out infinite reverse;
  filter: blur(40px);
}
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -30px); }
}

.login-card {
  background: var(--surface-container-high);
  border-radius: 28px;
  padding: 44px 40px;
  width: 420px;
  max-width: 90vw;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
  animation: slideUp 400ms cubic-bezier(0.2, 0, 0, 1);
}

.login-card h1 {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: -0.5px;
}

.login-card .subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 32px;
  font-size: 14px;
}

.login-card .btn {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius);
}

.login-footer {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ===================== RESPONSIVE ===================== */
/* 冗余 980px 断点已移除：仅隐藏right面板但未改layout为column，与下方完整断点冲突 */

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--outline); }

/* ===================== ANIMATIONS ===================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes m3PageEnter { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.fade-in { animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.fade-in-delay-1 { animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both; }
.fade-in-delay-2 { animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both; }
.fade-in-delay-3 { animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both; }
.page-enter { animation: m3PageEnter 350ms cubic-bezier(0.2, 0, 0, 1); }

/* ===================== TOAST ===================== */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 14px 24px;
  border-radius: 16px;
  color: white;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  animation: toastIn 300ms cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.info { background: var(--info); }

/* ===================== LIQUID GLASS ENHANCEMENT ===================== */
.sidebar {
  background: rgba(17,25,44,0.55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-right: 1px solid rgba(255,255,255,0.10);
  box-shadow: 4px 0 30px rgba(0,0,0,0.18);
}
.sidebar-logo {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  box-shadow: 0 6px 18px var(--primary-glow);
}
.sidebar-nav a {
  border-radius: 14px;
  color: rgba(255,255,255,0.62);
  backdrop-filter: blur(4px);
}
.sidebar-nav a:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  transform: translateX(3px);
}
.sidebar-nav a.active {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  color: #fff;
  box-shadow: 0 8px 20px var(--primary-glow);
}
.sidebar-avatar {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  box-shadow: 0 4px 14px var(--primary-glow);
}


.topbar {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.card, .stat-card {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: var(--shadow);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stat-card .icon { border-radius: 14px; box-shadow: var(--shadow-sm); }
.modal {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
}
.modal-overlay { background: rgba(15,23,42,0.35); backdrop-filter: blur(6px); }

/* Logo */
.logo-img { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; vertical-align: middle; }

/* ===================== TYPING + READ RECEIPT ===================== */
.typing-indicator {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-muted); padding: 4px 10px;
  height: 22px;
  flex-shrink: 0;
}
.typing-indicator .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); opacity: .5; }
.typing-indicator .dot:nth-child(2) { opacity: .7; }
.typing-indicator .dot:nth-child(3) { opacity: .9; }

.read-receipt { font-size: 11px; color: var(--success); margin-left: 6px; }
.message.sent .msg-footer { color: var(--text-muted); }
.msg-read-tick { color: var(--primary); font-size: 11px; }

/* ===================== CUSTOMIZE PAGE ===================== */
.cz-layout { display: flex; gap: 24px; align-items: flex-start; }
.cz-left { flex: 1; min-width: 0; max-width: 520px; }
.cz-right { width: 340px; flex-shrink: 0; }
.cz-body { padding: 18px 20px; }
.cz-section { font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--text-secondary); }
.cz-row { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; font-size: 13px; font-weight: 600; }
.cz-row input[type=range]{ flex: 1; margin-left: 10px; }
.cz-toggle { position: relative; width: 40px; height: 22px; }
.cz-toggle input { opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2; position: absolute; }
.cz-toggle::before { content:''; position:absolute; inset:0; background:var(--outline-variant); border-radius:12px; transition:.2s; }
.cz-toggle:has(input:checked)::before { background: var(--primary); }
.cz-toggle::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:.2s; }
.cz-toggle:has(input:checked)::after { left:21px; }
.cz-seg { display: flex; gap: 6px; margin: 6px 0 10px; }
.cz-seg span { flex:1; text-align:center; padding:8px; border:1px solid var(--border); border-radius:8px; font-size:13px; cursor:pointer; color:var(--text-secondary); }
.cz-seg span.active { background: var(--primary); color:#fff; border-color:transparent; }
.cz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cz-label { font-size: 12px; color: var(--text-muted); display:block; margin-bottom: 5px; font-weight: 600; }
.cz-color { display: flex; align-items: center; gap: 6px; border:1px solid var(--border); border-radius:8px; padding:4px 8px; }
.cz-color input[type=color]{ width:34px; height:26px; border:none; background:none; padding:0; cursor:pointer; }
.cz-hex { flex:1; border:none; outline:none; font-size:12px; background:transparent; min-width:0; }
.cz-logos { display:flex; gap:10px; flex-wrap:wrap; }
.cz-logo-item { position:relative; width:56px; height:56px; border:2px solid var(--border); border-radius:12px; padding:6px; cursor:pointer; }
.cz-logo-item.active { border-color: var(--primary); }
.cz-logo-item img { width:100%; height:100%; object-fit:contain; }
.cz-logo-rm { position:absolute; top:-6px; right:-6px; width:18px; height:18px; background:var(--danger); color:#fff; border-radius:50%; font-size:12px; line-height:18px; text-align:center; cursor:pointer; }
.cz-preview-card { background: rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.7); border-radius:16px; box-shadow: var(--shadow); padding:18px; text-align:center; position:sticky; top:0; }
.cz-preview-head { font-size:13px; font-weight:600; margin-bottom:10px; }
.cz-preview-badge { display:inline-block; font-size:12px; color:var(--primary); background:rgba(79,110,247,0.1); padding:3px 12px; border-radius:12px; margin-bottom:8px; }
.cz-preview-title { font-size:16px; font-weight:700; margin-bottom:12px; }
.cz-preview-qr { display:flex; align-items:center; justify-content:center; min-height:260px; }
.cz-preview-qr svg { border-radius:8px; }
.cz-preview-btn { margin:12px 0; background:#1677ff; color:#fff; padding:9px; border-radius:8px; font-weight:600; }
.cz-download { display:inline-flex; align-items:center; gap:6px; width:100%; justify-content:center; border:1px solid var(--border); background:rgba(255,255,255,0.8); border-radius:8px; padding:9px; font-size:13px; cursor:pointer; }

/* ===================== SESSION TAGS ===================== */
.name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.session-tags-line.inline { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.session-tags-line { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag-add-btn { font-size: 12px; cursor: pointer; opacity: 0.4; transition: opacity 0.15s; }
.tag-add-btn:hover { opacity: 1; }
.session-tag { font-size: 12px; color: #fff; padding: 2px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; height: 20px; line-height: 1; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.cust-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; line-height: 1.4; }
.cust-badge-new { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
.cust-badge-black { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
/* 客户侧连接已解除（改绑别家/解除连接）：橙色提示，区别于黑名单与"新消息" */
.cust-badge-lost { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
/* 该会话的客户已联系不上：末条消息淡一点，避免商户把未读当成"能回" */
.session-item.is-unreachable .last-msg { opacity: .72; }
.session-item.is-unreachable .name { color: #b45309; }
.add-tag-btn { font-size: 11px; color: var(--text-muted); border: 1px dashed var(--border); padding: 1px 8px; border-radius: 10px; cursor: pointer; }

.tag-picker-item { cursor: pointer; }
.picker-row { display: flex; flex-wrap: wrap; gap: 8px; }
.picker-row .session-tag { font-size: 13px; padding: 4px 12px; border-radius: 12px; }
.picker-add { border: 1px dashed var(--border); border-radius: 12px; padding: 4px 12px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }

/* ===================== QR SPINNER ===================== */
.qr-spinner { width: 38px; height: 38px; border: 4px solid rgba(0,0,0,0.1); border-top-color: var(--primary, #07c160); border-radius: 50%; animation: qrSpin 0.8s linear infinite; display: inline-block; }
@keyframes qrSpin { to { transform: rotate(360deg); } }

/* ===================== WC STYLE SEG (mini) ===================== */
.cz-seg-mini { display: flex; gap: 4px; }
.cz-seg-mini span { flex: 1; text-align: center; padding: 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; cursor: pointer; color: var(--text-secondary); }
.cz-seg-mini span.active { background: var(--primary); color: #fff; border-color: transparent; }

/* ===================== CUSTOMER PANEL ===================== */
.panel-tabs { display: flex; gap: 4px; }
.panel-tabs .ptab { flex: 1; text-align: center; padding: 7px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-muted); }
.panel-tabs .ptab.active { background: rgba(79,110,247,0.1); color: var(--primary); font-weight: 600; }
.prof-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.prof-row > span:first-child { color: var(--text-muted); flex-shrink: 0; }
.prof-row > span:last-child { color: var(--text); text-align: right; }
.pin-ico { font-size: 12px; }
.msg-footer { display: flex; align-items: center; gap: 4px; }

/* ===================== MEDIA BUBBLE ===================== */
.bubble { max-width: 100%; word-break: break-word; overflow: hidden; }
.bubble-img { padding: 4px; background: transparent; line-height: 0; }
.bubble-img img { max-width: 200px; max-height: 200px; border-radius: 8px; display: block; cursor: zoom-in; width: auto; height: auto; transition: transform 0.2s ease; }
.bubble-img img:hover { transform: scale(1.03); }
.bubble-voice { font-size: 14px; }

/* 语音播放器套壳 */
.voice-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-container-highest);
  border-radius: 20px;
  min-width: 140px;
  max-width: 220px;
  cursor: pointer;
  transition: var(--transition);
}
.voice-player:active { transform: scale(0.97); }
.voice-play-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.voice-play-btn:active { transform: scale(0.9); }
.voice-play-btn:hover { opacity: 0.85; }
.voice-wave-bar {
  flex: 1;
  height: 4px;
  background: rgba(0,0,0,0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.voice-wave-fill {
  height: 100%;
  background: var(--primary, #07c160);
  border-radius: 2px;
  transition: width 0.15s linear;
  width: 0%;
}
.voice-duration {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted, #999);
  min-width: 28px;
  text-align: right;
}
.sent .voice-player { background: rgba(255,255,255,0.15); }
.sent .voice-wave-bar { background: rgba(0,0,0,0.08); }

/* ===================== WECHAT ENTRY ===================== */
.wc-tabs { display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 20px; background: rgba(255,255,255,0.5); }
.wc-tab { flex: 1; padding: 14px 16px; cursor: pointer; text-align: center; transition: var(--transition); border-right: 1px solid var(--border); }
.wc-tab:last-child { border-right: none; }
.wc-tab.active { background: rgba(79,110,247,0.08); }
.wc-tab.active .wc-tab-title { color: var(--primary); font-weight: 700; }
.wc-tab-title { font-size: 15px; font-weight: 600; }
.wc-tab-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* 二维码页面整体布局：左侧主区域 + 右侧样式面板 */
.wc-page-layout { display: flex; gap: 24px; align-items: flex-start; }
.wc-main-area { flex: 2; min-width: 0; }
.wc-style-panel { flex: 1; min-width: 0; background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.7); border-radius: 16px; box-shadow: var(--shadow); padding: 20px; max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; }
.wc-style-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.wc-style-title { font-size: 16px; font-weight: 700; }
.wc-style-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.wc-style-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* 二维码大小滑块 */
.wc-size-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--primary) 0%, var(--primary) 40%, #e2e8f0 40%, #e2e8f0 100%); outline: none; cursor: pointer; transition: background 0.15s ease; }
.wc-size-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,0.15); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wc-size-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 3px 10px rgba(79,110,247,0.35); }
.wc-size-slider::-webkit-slider-thumb:active { transform: scale(1.05); }
.wc-size-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,0.15); cursor: pointer; transition: transform 0.15s ease; }
.wc-size-slider::-moz-range-thumb:hover { transform: scale(1.15); }
.wc-size-slider::-moz-range-track { height: 6px; border-radius: 3px; background: #e2e8f0; }
.wc-size-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--primary); }

/* 二维码区域布局：桌面左右排列，手机上下排列 */
.wc-layout { display: flex; gap: 24px; align-items: flex-start; }
.wc-controls { flex: 1; min-width: 0; }

@media (max-width: 768px) {
  .wc-page-layout { flex-direction: column; }
  .wc-main-area { width: 100%; }
  .wc-style-panel { width: auto; margin: 0 6px; max-height: none; overflow: visible; position: static; }
  .wc-layout { flex-direction: column; align-items: stretch; }
  .wc-qr-card { width: 100%; max-width: 360px; margin: 0 auto; }
  .wc-qr-img { height: 240px; max-width: 240px; }
  .wc-qr-img img { width: 240px; height: 240px; }
  .wc-controls { width: 100%; }
  .wc-link-row { flex-wrap: wrap; }
  .wc-link-box { width: 100%; flex: none; }
  .cz-grid { grid-template-columns: 1fr 1fr !important; }
}
.wc-qr-card { width: 320px; flex-shrink: 0; background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.7); border-radius: 16px; box-shadow: var(--shadow); padding: 24px; text-align: center; }
.wc-qr-badge { display: inline-block; font-size: 12px; color: var(--primary); background: rgba(79,110,247,0.1); padding: 3px 12px; border-radius: 12px; margin-bottom: 10px; }
.wc-qr-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.wc-qr-img { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 280px; height: 280px; margin: 0 auto; }
.wc-qr-img img { width: 280px; height: 280px; max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; animation: fadeInScale 0.35s ease; display: block; }
.anim-in-scale { animation: fadeInScale 0.35s ease; }
.qr-fade-out { opacity: 0; transform: scale(0.97); transition: opacity 0.2s ease, transform 0.2s ease; }
.wc-qr-footer { margin: 14px 0 12px; background: var(--primary); color: #fff; padding: 9px; border-radius: 8px; font-weight: 600; }
.wc-qr-download { display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; border: 1px solid var(--border); background: rgba(255,255,255,0.8); border-radius: 8px; padding: 9px; font-size: 13px; cursor: pointer; transition: var(--transition); color: var(--text); }
.wc-qr-download:hover { background: #fff; }
.wc-field { margin-bottom: 18px; }
.wc-field-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.wc-link-row { display: flex; gap: 8px; align-items: center; }
.wc-link-box { flex: 1; min-width: 0; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-copy-btn, .wc-reset-btn { white-space: nowrap; border: 1px solid var(--border); background: rgba(255,255,255,0.8); border-radius: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer; transition: var(--transition); }
.wc-copy-btn:hover, .wc-reset-btn:hover { background: #fff; }
.wc-countdown { font-size: 13px; color: var(--warning); }
.wc-ok { display: flex; align-items: center; gap: 8px; background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.3); color: var(--success); border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.wc-ok-ico { width: 18px; height: 18px; border-radius: 50%; background: var(--success); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.wc-mt { margin-top: 16px; }

/* ===================== CUSTOMER DETAIL ===================== */
.detail-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.detail-label { width: 96px; flex-shrink: 0; color: var(--text-muted); }
.detail-row > span:last-child { flex: 1; min-width: 0; word-break: break-word; }

/* ===================== VISITOR PANEL ===================== */
.visitor-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.visitor-filter { display: flex; gap: 8px; margin: 6px 0 14px; flex-wrap: wrap; }
.visitor-filter .tab { cursor: pointer; padding: 6px 14px; border-radius: 20px; background: rgba(255,255,255,0.6); border: 1px solid var(--border); font-size: 13px; transition: var(--transition); }
.visitor-filter .tab.active { background: linear-gradient(135deg, var(--primary), var(--purple)); color: #fff; border-color: transparent; }
.visitor-table .remark-edit { color: var(--primary); cursor: pointer; font-size: 12px; }
.visitor-table .blacklisted { color: var(--danger); }
.badge.danger { background: var(--danger-light); color: var(--danger); }
.tag-unanswered { display: inline-block; background: var(--warning-light); color: #b45309; font-size: 11px; padding: 1px 8px; border-radius: 10px; }

.chat-with-actions { display: flex; align-items: center; gap: 10px; }
.chat-with-actions .spacer { flex: 1; }
.mini-btn { border: none; background: transparent; border-radius: 8px; padding: 6px 8px; font-size: 16px; cursor: pointer; transition: all 0.15s; color: var(--text-muted); }
.mini-btn:hover { background: rgba(79,110,247,0.08); color: var(--primary); }
.mini-btn.danger { color: var(--danger); }

/* ===================== MOBILE RESPONSIVE ===================== */
/* 980px 以下统一移动端布局，完整规则见下方 @media (max-width: 980px) */
/* 聊天头部栏：不滚动，常驻 */
.chat-header-bar {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card-bg);
}
/* 桌面端隐藏手机资料按钮（右侧面板已有） */
.chat-info-btn {
  display: none !important;
  background: rgba(0,0,0,0.06) !important;
  border-radius: 50% !important;
  color: var(--text-secondary) !important;
  transition: all 0.2s !important;
}
.chat-info-btn:hover {
  background: rgba(0,0,0,0.12) !important;
}
.chat-info-btn:active {
  transform: scale(0.9);
}
/* 输入框区域：不滚动，常驻底部 */
.message-input-area {
  flex-shrink: 0;
}
/* 聊天活跃容器：flex填充，内部三段式布局，只有消息区可滚动 */
.chat-active-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 980px) {
  .chat-info-btn { display: flex !important; align-items: center; justify-content: center; }
  .layout { flex-direction: column; }
  :root { --safe-bottom: env(safe-area-inset-bottom, 0px); }
  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: calc(62px + var(--safe-bottom)); flex-direction: row;
    border-right: none; border-top: 1px solid rgba(255,255,255,0.12);
    z-index: 1000; padding: 0 6px calc(6px + var(--safe-bottom));
    background: var(--sidebar-bg, #1e293b);
    backdrop-filter: saturate(180%);
    -webkit-backdrop-filter: saturate(180%);
  }
  .sidebar-logo, .sidebar-bottom { display: none; }
  .sidebar-nav { flex-direction: row; justify-content: space-around; width: 100%; gap: 0; }
  .sidebar-nav a { margin: 0; width: 20%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; padding: 6px 0; border-radius: 10px; }
  .sidebar-nav a span.label { display: block; font-size: 10px; line-height: 1; opacity: 0.9; }
  .sidebar-nav a svg { width: 22px; height: 22px; }
  .sidebar-avatar { display: none; }
  .main-area { margin-left: 0; margin-bottom: calc(62px + var(--safe-bottom)); height: calc(100vh - 62px - var(--safe-bottom)); }
  .topbar { padding: 10px 14px; gap: 10px; }
  .topbar-title { font-size: 15px; }
  .topbar-title .icon { display: none; }
  .topbar-user .role, .topbar-user .name { font-size: 12px; }
  .topbar-user .avatar { width: 32px; height: 32px; }
  .topbar-btn { padding: 6px 10px; font-size: 12px; }
  .topbar-badge { padding: 3px 10px; font-size: 11px; }
  .topbar-badge.expiry { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; }
  .stat-card { padding: 14px; }
  .visitor-summary { grid-template-columns: repeat(2, 1fr); }
  .content { padding: 10px; height: calc(100vh - 60px - 62px - var(--safe-bottom)); overflow-y: scroll !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; }
  .card { border-radius: 14px; }
  .chat-layout { flex-direction: column; height: 100%; }
  .chat-panel-left, .chat-panel-right { width: 100%; }
  .chat-panel-right { display: none; }
  #page-chat { height: 100%; }
  /* 聊天模式下：输入框position:fixed钉底，不依赖flex高度链 */
  body.chat-open .chat-panel-center,
  #page-chat.chat-show .chat-panel-center { height: 100%; display: block !important; overflow: hidden; position: relative; }
  body.chat-open .chat-active-container,
  #page-chat.chat-show .chat-active-container { height: 100%; display: block !important; overflow: hidden; position: relative; }
  .chat-header-bar { position: sticky; top: 0; z-index: 10; background: var(--bg); }
  .messages-area { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(85px + 62px + var(--safe-bottom)) !important; box-sizing: border-box; }
  /* 输入框固定在底部导航栏上方，不被遮挡 */
  .message-input-area { 
    position: fixed !important; 
    bottom: calc(62px + var(--safe-bottom)) !important; 
    left: 0 !important; 
    right: 0 !important; 
    z-index: 100 !important; 
    background: var(--bg) !important;
    border-top: 1px solid var(--border) !important;
    min-height: 70px !important;
  }
  /* 非聊天状态隐藏固定输入框 */
  body:not(.chat-open) #page-chat:not(.chat-show) .message-input-area { display: none !important; }
  /* 移动端会话列表与聊天互斥 */
  body.chat-open .chat-panel-left { display: none !important; }
  body.chat-open .chat-panel-center { display: flex !important; }
  .chat-panel-left { display: flex; }
  .chat-panel-center { display: none; }
  #page-chat.chat-show .chat-panel-center { display: flex; }
  #page-chat.chat-show .chat-panel-left { display: none; }
  /* 聊天头部 */
  .chat-panel-center > div:first-child { padding: 10px 12px; gap: 8px; }
  .chat-panel-center #chatWithName { font-size: 15px; }
  .mobile-back { display: inline-flex !important; font-size: 15px; padding: 6px 8px; margin: 0; border-radius: 8px; background: var(--primary-light); }
  .table-wrapper { overflow-x: auto; }
  .messages-area { padding: 12px; gap: 8px; }
  .message { max-width: 82%; }
  .message .avatar { width: 30px; height: 30px; font-size: 12px; }
  .message .bubble { padding: 9px 12px; font-size: 14px; border-radius: 16px; }
  .bubble-img img { max-width: 160px; max-height: 160px; }
  .message-input-area { padding: 8px 10px calc(8px + var(--safe-bottom)); gap: 8px; }
  .mia-tools { gap: 4px; }
  .mia-tools .mini-btn { width: 38px; height: 38px; font-size: 15px; }
  .input-row { gap: 8px; }
  .message-input { padding: 10px 14px; min-height: 42px; font-size: 15px; border-radius: 20px; }
  .send-btn-round { width: 42px; height: 42px; }
  /* 会话列表 */
  .session-list-header { padding: 12px; }
  .session-list-header h3 { font-size: 15px; margin-bottom: 6px; }
  .session-search { padding: 8px 12px; }
  .session-search .search-input { height: 38px; font-size: 14px; border-radius: 19px; }
  .session-item { padding: 12px; gap: 10px; }
  .session-item .avatar { width: 44px; height: 44px; font-size: 16px; }
  .session-item .info .name { font-size: 14px; }
  .session-item .info .last-msg { font-size: 13px; }
  .session-item .unread-badge { min-width: 20px; height: 20px; font-size: 11px; }
  .session-tags-line .session-tag { font-size: 10px; max-width: 90px; }
}
.mobile-back { display: none; align-items: center; gap: 4px; margin-right: 8px; cursor: pointer; color: var(--primary); font-size: 14px; }
@media (min-width: 981px) { .mobile-back { display: none !important; } }

/* ===================== LOGIN / OPERATOR GLASS ===================== */
.login-page {
  background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 40%, #e0f2fe 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(80,60,120,0.18);
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
}
.login-card h1 { font-size: 24px; text-align: center; }

/* 聊天页面内嵌时的面板控制 */
.chat-typing .dot-typing {
  width: 5px; height: 5px; border-radius: 50%; background: #999;
  display: inline-block; margin-left: 2px; animation: typingBounce 1.2s infinite;
}
.chat-panel-left, .chat-panel-center, .chat-panel-right { min-height: 0; }
@media (min-width: 981px) {
  .chat-panel-left { width: 300px; flex-shrink: 0; }
  .chat-panel-right { width: 280px; flex-shrink: 0; }
  .chat-panel-center { flex: 1; min-width: 0; }
}

/* ===================== UNIVERSAL SWITCH ANIMATIONS ===================== */
/* 补全所有缺少 transition 的交互元素 */
.cz-seg span,
.cz-seg-mini span,
.panel-tabs .ptab,
.cz-logo-item,
.session-tag,
.add-tag-btn,
.picker-add,
.picker-row .session-tag,
.random-profiles-panel,
.quick-replies-panel {
  transition: var(--transition);
}
.cz-seg span:active,
.cz-seg-mini span:active,
.panel-tabs .ptab:active,
.cz-logo-item:active,
.wc-tab:active,
.visitor-filter .tab:active,
.sidebar-nav a:active,
.session-item:active,
.quick-reply-item:active,
.picker-row .session-tag:active,
.picker-add:active,
.tag-add-btn:active { transform: scale(0.95); }

/* 通用面板切入动画 */
@keyframes switchIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes switchInScale {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes switchInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.anim-in { animation: switchIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.anim-in-scale { animation: switchInScale 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.anim-in-left { animation: switchInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }

/* 内容替换动画 */
@keyframes contentReplace {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.content-anim { animation: contentReplace 0.25s ease !important; }

/* Modal 退出动画 */
@keyframes modalOut {
  to { opacity: 0; }
}
@keyframes modalSlideDown {
  to { opacity: 0; transform: translateY(16px) scale(0.97); }
}
.modal-overlay.modal-closing { animation: modalOut 0.2s ease forwards; }
.modal-overlay.modal-closing .modal { animation: modalSlideDown 0.2s ease forwards; }

/* Emoji 面板动画 */
.emoji-panel {
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: bottom left;
}
.emoji-panel.emoji-hidden {
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
}

/* Quick replies 面板动画 */
.quick-replies-panel {
  transition: opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Chat 切换动画 */
@keyframes chatSlideIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
.chat-anim-in { animation: chatSlideIn 0.25s ease; }

/* QR 图片切换动画 */
@keyframes qrFadeIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.qr-img-anim { animation: qrFadeIn 0.3s ease; }

/* Session 列表项动画 */
@keyframes sessionIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}


/* Binding 列表项动画 */
.binding-item { transition: var(--transition); }
.binding-item:active { transform: scale(0.97); }

/* 表格行 hover 动效 */
table tbody tr { transition: background var(--transition); }

/* 下拉选择框动效 */
select, .wc-link-box, .wc-copy-btn, .wc-reset-btn, .wc-qr-download {
  transition: var(--transition);
}
select:active, .wc-copy-btn:active, .wc-reset-btn:active, .wc-qr-download:active {
  transform: scale(0.97);
}

/* Loading state 切换动画 */
.loading-state { animation: switchIn 0.3s ease; }
/* ===== 落地页实时预览 ===== */
.landing-preview-phone{width:200px;margin:0 auto;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.12);border:1px solid #e5e7eb;}
.lp-status-bar{height:20px;background:#f9fafb;display:flex;align-items:center;justify-content:center;}
.lp-status-bar::after{content:'';width:40px;height:4px;background:#d1d5db;border-radius:2px;}
.lp-content{padding:16px 14px 20px;background:linear-gradient(180deg,#f0faf5 0%,#fff 40%);min-height:340px;}
.lp-brand{font-size:13px;font-weight:600;color:#374151;text-align:center;margin-bottom:6px;}
.lp-title{font-size:15px;font-weight:700;color:#111827;text-align:center;margin-bottom:4px;line-height:1.4;}
.lp-subtitle{font-size:11px;color:#6b7280;text-align:center;margin-bottom:10px;line-height:1.5;}
.lp-qr-wrap{display:flex;justify-content:center;margin:10px 0;}
.lp-qr{width:110px;height:110px;background:#fff;border:6px solid #fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:center;}
.lp-qr::after{content:'二维码';font-size:10px;color:#9ca3af;}
.lp-tip{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;padding:8px 10px;font-size:10px;color:#065f46;line-height:1.6;margin-bottom:10px;white-space:pre-wrap;}
.lp-steps{margin-bottom:12px;}
.lp-step{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.lp-step-num{width:18px;height:18px;border-radius:50%;background:#07c160;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:600;}
.lp-step-text{font-size:11px;color:#374151;line-height:1.4;}
.lp-btn{width:100%;padding:10px;border:none;border-radius:22px;background:#07c160;color:#fff;font-size:13px;font-weight:600;cursor:pointer;}
.lp-bottom{font-size:9px;color:#9ca3af;text-align:center;margin-top:10px;line-height:1.5;}

/* ===================== QQ 后台布局对齐（2026-09-21） ===================== */
/* 一、桌面侧边栏：图标 + 文字，分组标题，底部退出登录 */
.sidebar { width: 208px; align-items: stretch; padding: 14px 12px 16px; gap: 0; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px; }
.sidebar-brand .sidebar-logo { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 0; flex-shrink: 0; }
.sidebar-brand-text { min-width: 0; }
.sidebar-brand-text .brand-name { font-size: 14px; font-weight: 700; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-brand-text .brand-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.nav-label { font-size: 11px; color: var(--text-muted); letter-spacing: .06em; padding: 6px 8px; font-weight: 600; }
.sidebar-nav { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
.sidebar-nav a { width: 100%; height: 38px; justify-content: flex-start; gap: 10px; padding: 0 12px; border-radius: 10px; margin: 0; font-size: 13px; }
.sidebar-nav a svg { width: 20px !important; height: 20px !important; flex-shrink: 0; }
.sidebar-nav a .label { display: inline-block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav a .label-sm { display: none; }
.sidebar-bottom { flex-direction: column; gap: 10px; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.sidebar-logout { display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; border-radius: 10px; font-size: 13px; color: var(--on-surface-variant); transition: var(--transition); }
.sidebar-logout:hover { background: rgba(0,0,0,0.05); color: var(--danger); }
.sidebar-avatar { margin-bottom: 0; }

/* 二、顶栏：声音提醒按钮 + 面板 */
.sound-wrap { position: relative; }
.sound-btn { display: inline-flex; align-items: center; gap: 5px; }
.sound-btn.on { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.sound-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1200; width: 236px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,0.16); padding: 12px; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--on-surface); margin-bottom: 10px; }
.sp-row input[type=range] { width: 108px; accent-color: var(--primary); }
.switch { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.switch input { display: none; }
.switch-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 9999px; transition: .2s; }
.switch-slider::before { content: ''; position: absolute; width: 17px; height: 17px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.switch input:checked + .switch-slider { background: var(--primary); }
.switch input:checked + .switch-slider::before { transform: translateX(17px); }

/* 三、聊天头部操作按钮组 */
.chat-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.chat-actions .mini-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.chat-actions .mini-btn.active { color: var(--primary); background: var(--primary-light); }
.chat-actions .mini-btn.danger:hover { background: var(--danger-light); color: var(--danger); }

/* 四、输入框上方快捷回复 pill */
.quick-pills { display: flex; flex-wrap: nowrap; gap: 6px; padding: 0 2px 8px; overflow-x: auto; scrollbar-width: none; }
.quick-pills::-webkit-scrollbar { display: none; }
.quick-pill { flex-shrink: 0; max-width: 60%; border: 1px solid var(--border); background: var(--surface); color: var(--on-surface-variant); font-size: 12px; padding: 5px 12px; border-radius: 9999px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: var(--transition); }
.quick-pill:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* 五、消息一键复制 */
.msg-copy { font-size: 11px; color: var(--text-muted); cursor: pointer; opacity: .55; transition: opacity .15s; }
.msg-copy:hover { opacity: 1; color: var(--primary); }

/* 六、手机端（<=980px）：底部导航带文字、顶栏精简 */
@media (max-width: 980px) {
  .sidebar { width: 100%; left: 0; right: 0; }
  .sidebar-brand, .nav-label { display: none; }
  .sidebar-nav { flex-direction: row; align-items: center; }
  .sidebar-nav a { flex: 1 1 0; width: auto; min-width: 0; height: auto; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 2px; border-radius: 10px; }
  .sidebar-nav a .label { display: none !important; }
  .sidebar-nav a .label-sm { display: block; font-size: 10px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-nav a svg { width: 21px !important; height: 21px !important; }
  .sidebar-bottom { display: none; }
  .topbar-logout { display: inline-flex; }
  .topbar-user { display: none; }
  #wechatStatusBadge { display: none; }
  .topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-badge.expiry { display: inline-block; font-size: 10px; padding: 2px 8px; margin-right: 0; white-space: nowrap; }
  .sound-btn { padding: 6px 8px; }
  .sound-btn span { display: none; }
  .sound-panel { position: fixed; right: 8px; top: 54px; width: 240px; }
  .chat-actions .mini-btn { width: 30px; height: 30px; }
  .chat-actions .mini-btn.desk-only { display: none !important; }   /* 手机端把置顶/备注/拉黑/删除收进「客户资料」 */
  #chatWithName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
  .chat-header-bar > div:nth-child(3) { min-width: 0; }
  .quick-pills { padding-bottom: 6px; }
}

@media (min-width: 981px) {
  .topbar-logout { display: none !important; }
}

/* ===================== 商户后台改版样式（2026-09-22） =====================
   配套前端改版：线性 SVG 图标系统（.ico / data-icon）、新组件结构
   （会话头部 / 客户资料面板 / 趋势图 / 访客卡片 / 自动化条目 / 公告条目 / 设置页）
   —— 桌面与手机两端都覆盖。
   ======================================================================== */

/* ---------- 图标系统 ---------- */
.ico {
  width: 18px; height: 18px; flex: 0 0 auto;
  display: inline-block; vertical-align: -3px;
  pointer-events: none;
}
.ico-brand { width: 20px; height: 20px; }
span[data-icon], div[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
span[data-icon] > .ico, div[data-icon] > .ico { width: 18px; height: 18px; }
.btn .ico, .btn span[data-icon] > .ico { width: 16px; height: 16px; vertical-align: -3px; }
.btn-sm .ico, .btn-sm span[data-icon] > .ico { width: 15px; height: 15px; }
.mini-btn .ico, .mini-btn span[data-icon] > .ico { width: 17px; height: 17px; vertical-align: middle; }
.topbar-btn .ico, .topbar-btn span[data-icon] > .ico { width: 16px; height: 16px; }
.quick-btn .ico, .wc-reset-btn .ico, .wc-copy-btn .ico, .wc-qr-download .ico { width: 15px; height: 15px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-muted); pointer-events: none; }
.search-icon .ico { width: 16px; height: 16px; }
.session-search .search-input, .search-input-wrapper .search-input { padding-left: 36px; }
.site-logo-img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.pin-ico { display: inline-flex; align-items: center; color: var(--primary); }
.pin-ico .ico { width: 13px; height: 13px; }
.voice-play-icon, .voice-pause-icon { width: 20px; height: 20px; }
.file-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); word-break: break-all; }
.file-link .ico { width: 16px; height: 16px; }
.file-preview-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--surface-container-highest); display: grid; place-items: center; color: var(--text-muted); }
.file-preview-icon .ico, .file-preview-icon > span > .ico { width: 24px; height: 24px; }
.btn-spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; display: inline-block; vertical-align: -2px; margin-right: 4px; animation: spin .7s linear infinite; }

/* ---------- 通用小件 ---------- */
.page-view { animation: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.panel-title { font-size: 13px; font-weight: 600; color: var(--text); }
.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.6; }
.muted-note { font-size: 12px; color: var(--text-muted); }
.inline-error { font-size: 12.5px; color: var(--danger); padding: 10px 0; }
.form-input-readonly { background: var(--surface-container-low); color: var(--text-muted); cursor: not-allowed; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.text-success { color: var(--success); }
.danger-text { color: var(--danger); }
.ghost-danger { color: var(--danger); border: 1px solid var(--danger-light); background: transparent; }
.ghost-danger:hover { background: var(--danger-light); }
.empty-row td { padding: 0 !important; border: none !important; }
.empty-state .empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-container-highest); display: grid; place-items: center; margin-bottom: 14px; color: var(--text-muted); }
.empty-state .empty-icon .ico, .empty-state .empty-icon > span > .ico { width: 26px; height: 26px; }
.empty-state h3 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: 13px; line-height: 1.6; }
.empty-state.compact { padding: 24px 16px; }
.empty-actions { margin-top: 16px; display: flex; gap: 8px; justify-content: center; }

/* ---------- 仪表盘：趋势图 ---------- */
.chart-legend { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.chart-legend .dot.primary, .dot.primary { background: var(--primary); }
.chart-legend .dot.soft, .dot.soft { background: var(--secondary-container, #cbd5e1); }
.trend-chart, #tenantTrend { height: 160px; display: flex; align-items: flex-end; gap: 10px; padding: 4px 2px 0; }
.trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.trend-bars { display: flex; gap: 3px; align-items: flex-end; height: 100%; }
.trend-bar { width: 14px; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 2px; }
.trend-bar.soft { background: var(--secondary-container, #cbd5e1); }
.trend-date { font-size: 10px; color: var(--text-muted); }

/* ---------- 会话头部 / 客户资料面板 ---------- */
.chat-avatar-wrap { flex-shrink: 0; }
.chat-peer { flex: 1; min-width: 0; }
.chat-peer-name { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-peer-sub { font-size: 11px; color: var(--text-muted); }
.customer-panel { display: flex; flex-direction: column; }
.profile-hero { text-align: center; padding: 18px 0 12px; }
.profile-name { font-weight: 700; font-size: 15px; margin-top: 8px; }
.profile-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.prof-list { display: flex; flex-direction: column; }
.prof-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.prof-row:last-child { border-bottom: none; }
.prof-row > span:first-child { color: var(--text-muted); flex: 0 0 auto; }
.prof-row > span:last-child { text-align: right; word-break: break-all; }
.profile-actions { display: flex; flex-direction: column; gap: 8px; padding: 12px 2px 0; }
.profile-actions-row { display: flex; gap: 8px; }
.profile-actions-row .btn { flex: 1; justify-content: center; }
.history-item { padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; line-height: 1.6; }
.history-meta { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.history-text { word-break: break-word; }

/* ---------- 通话卡片 ---------- */
.bubble-call { display: flex; flex-direction: column; gap: 8px; min-width: 190px; }
.call-card-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.call-card-title .ico { width: 18px; height: 18px; }
.call-card-sub { font-size: 12px; opacity: .85; }
.call-card-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: inherit; padding: 5px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; transition: background .15s; }
.call-card-btn:hover { background: rgba(255,255,255,.28); }
.call-card-btn .ico { width: 14px; height: 14px; }
.call-kind { display: inline-flex; align-items: center; gap: 6px; }
.call-kind .ico { width: 15px; height: 15px; }

/* ---------- 访客 / 通话表格 ---------- */
.cell-user { display: inline-flex; align-items: center; gap: 8px; }
.cell-name { font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.cell-main { font-weight: 500; }
.cell-time { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.row-actions, .cell-actions > div { display: flex; gap: 6px; flex-wrap: wrap; }
.remark-edit { cursor: pointer; border-bottom: 1px dashed var(--border); }
.remark-edit:hover { color: var(--primary); border-color: var(--primary); }

/* ---------- 消息自动化 ---------- */
.tabs.segmented { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-container-low); border-radius: 12px; border-bottom: none; }
.tabs.segmented .tab { padding: 7px 14px; border-radius: 9px; font-size: 13px; color: var(--text-muted); cursor: pointer; transition: all .15s; white-space: nowrap; }
.tabs.segmented .tab.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.auto-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--surface); transition: box-shadow .15s, border-color .15s; }
.auto-item:hover { border-color: var(--primary-container); box-shadow: 0 2px 8px rgba(16,24,40,.06); }
.auto-item-main { flex: 1; min-width: 0; }
.auto-item-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; flex-wrap: wrap; }
.auto-type { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--primary-container); color: var(--on-primary-container); }
.auto-item-content { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auto-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.switch-label { font-size: 12px; color: var(--text-muted); }

/* ---------- 公告 ---------- */
.announce-item { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--surface); }
.announce-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.announce-icon { width: 28px; height: 28px; border-radius: 9px; background: var(--primary-container); color: var(--on-primary-container); display: grid; place-items: center; flex-shrink: 0; }
.announce-icon .ico { width: 15px; height: 15px; }
.announce-time { font-size: 11.5px; color: var(--text-muted); margin-left: auto; }
.announce-body { font-size: 13px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }

/* ---------- 个人设置 ---------- */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.call-display-card { }
.call-display-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.call-avatar-col { text-align: center; }
.call-avatar-preview { width: 88px; height: 88px; border-radius: 16px; background: var(--surface-container-low) center/cover no-repeat; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; overflow: hidden; }
.call-avatar-actions { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.call-avatar-form { flex: 1; min-width: 200px; }
.segmented { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-container-low); border-radius: 12px; }
.segmented > .tab, .segmented > button { padding: 7px 14px; border-radius: 9px; font-size: 13px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; }
.segmented > .tab.active, .segmented > button.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.switch input:checked + .switch-slider { background: var(--primary); }
.qr-logo-preview { width: 44px; height: 44px; border-radius: 10px; background: var(--surface-container-low) center/contain no-repeat; border: 1px solid var(--border); }
.binding-info { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.binding-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.binding-name { font-weight: 600; font-size: 13px; }
.binding-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; word-break: break-all; }

/* ---------- 手机端 ---------- */
@media (max-width: 980px) {
  .ico { width: 17px; height: 17px; }
  .settings-grid { grid-template-columns: 1fr; }
  .call-display-row { gap: 14px; }
  .trend-chart, #tenantTrend { height: 130px; gap: 6px; }
  .trend-bar { width: 10px; }
  .auto-item { flex-direction: column; gap: 10px; }
  .auto-item-actions { align-self: flex-start; }
  .empty-state { padding: 36px 16px; }
  .empty-state .empty-icon { width: 48px; height: 48px; }
  .bubble-call { min-width: 160px; }
  .call-card-btn { min-height: 34px; }
}

/* 访客表 / 通话记录表：手机上转卡片（thead 隐藏，用 data-label 做左侧标签） */
@media (max-width: 768px) {
  .visitor-table thead { display: none; }
  .visitor-table tbody tr { display: block; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; padding: 12px; background: var(--surface); }
  .visitor-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0 !important; border: none !important; white-space: normal !important; text-align: right; }
  .visitor-table tbody td::before { content: attr(data-label); font-size: 12px; color: var(--text-muted); flex: 0 0 auto; text-align: left; }
  .visitor-table tbody td.cell-main::before { display: none; }
  .visitor-table tbody td.cell-main { justify-content: flex-start; font-size: 14px; padding-bottom: 8px !important; }
  .visitor-table tbody td.cell-actions { justify-content: flex-end; padding-top: 8px !important; border-top: 1px dashed var(--border) !important; }
  .visitor-table tbody td.cell-actions::before { display: none; }
  .visitor-table tbody td[data-label="操作"]::before { display: none; }
  .row-actions { justify-content: flex-end; }
}

/* ---------- 会话头部（改版后去掉内联样式，这里补回布局） ---------- */
.chat-header-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card-bg, var(--surface));
}
.chat-header-bar .mobile-back { flex: 0 0 auto; }
.chat-header-bar > .chat-peer { flex: 1 1 auto; min-width: 0; }
.chat-header-bar .chat-actions { flex: 0 0 auto; }
.chat-peer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-peer-name > span { overflow: hidden; text-overflow: ellipsis; }
.session-tags-line { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* 手机端：头部保持单行，别被挤成三行 */
@media (max-width: 980px) {
  .chat-header-bar { flex-wrap: nowrap; gap: 6px; padding: 8px 10px; min-height: 54px; }
  .chat-header-bar .mobile-back { padding: 6px 8px; font-size: 14px; background: var(--primary-light); border-radius: 8px; color: var(--primary); }
  .chat-peer-name { font-size: 15px; max-width: none; }
  .chat-peer-sub { font-size: 11px; }
  .chat-avatar-wrap .avatar { width: 34px !important; height: 34px !important; font-size: 14px !important; }
  .chat-actions { gap: 2px !important; }
}

/* ===================== 商户后台布局重做（2026-09-22 第二轮） ===================== */

/* ---------- 统一对话框（替代原生弹窗） ---------- */
.modal.ui-dialog { max-width: 420px; width: calc(100vw - 32px); border-radius: 16px; padding: 20px 22px; }
.ui-dialog-title { font-size: 16px !important; font-weight: 700; margin-bottom: 10px; line-height: 1.4; }
.ui-dialog-body { font-size: 13.5px; line-height: 1.75; color: var(--text-secondary); word-break: break-word; }
.ui-dialog-input { margin-top: 14px; width: 100%; }
.modal.ui-dialog .modal-actions { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }
.modal.ui-dialog .modal-actions .btn { min-width: 88px; justify-content: center; }
.btn-danger { background: var(--danger) !important; border-color: transparent !important; color: #fff !important; }
.btn-danger:hover { filter: brightness(1.06); }

/* ---------- 会话头部：左（头像+名字）右（操作），始终单行 ---------- */
.chat-header-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; min-height: 62px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.chat-header-bar .mobile-back { flex: 0 0 auto; }
.chat-header-bar .chat-avatar-wrap { flex: 0 0 auto; }
.chat-header-bar .chat-peer { flex: 1 1 auto; min-width: 0; }
.chat-header-bar .chat-actions {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2px;
  padding-left: 8px; margin-left: 4px; border-left: 1px solid var(--border);
}
.chat-header-bar .chat-actions .mini-btn { width: 34px; height: 34px; border-radius: 10px; }
.chat-header-bar .chat-actions .mini-btn:hover { background: var(--primary-light); color: var(--primary); }
.chat-peer-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.chat-peer-name #chatWithName { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-peer-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* ---------- 会话列表 ---------- */
.session-list-header { padding: 14px 16px 10px; }
.session-list-header h3 { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.session-tabs { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-container-low); border-radius: 10px; }
.session-tabs .tab { padding: 5px 12px; border-radius: 8px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.session-tabs .tab.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.session-item { padding: 12px 14px; gap: 12px; align-items: flex-start; }
.session-item .info { min-width: 0; flex: 1; }
.session-item .info .name-line { display: flex; align-items: baseline; gap: 8px; }
.session-item .info .name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-time { font-size: 11px; color: var(--text-muted); margin-left: auto; flex: 0 0 auto; }
.session-item .last-msg { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-item .unread-badge { align-self: center; }
.session-item.active { background: var(--primary-light); }

/* ---------- 右侧客户资料面板 ---------- */
.quick-replies-panel.customer-panel { padding: 0 16px 16px; }
.profile-hero { text-align: center; padding: 20px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.profile-hero .avatar { margin: 0 auto; }
.profile-name { font-size: 15.5px; font-weight: 700; margin-top: 10px; }
.profile-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.profile-actions { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 0; }
.profile-actions .btn { justify-content: center; width: 100%; }
.profile-actions-row { display: flex; gap: 8px; }
.profile-actions-row .btn { flex: 1; justify-content: center; }
.profile-actions .btn-ghost-danger { color: var(--danger); border: 1px solid var(--border); background: var(--surface); }
.profile-actions .btn-ghost-danger:hover { background: var(--danger-light); border-color: var(--danger); }

/* ---------- 侧边栏底部：账号 + 退出 ---------- */
.sidebar-bottom {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  margin-top: auto; padding: 12px; border-top: 1px solid var(--border);
}
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px 4px; min-width: 0; }
.sidebar-user .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-weight: 600; flex: 0 0 auto; }
.sidebar-user .who { min-width: 0; }
.sidebar-user .who .n { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .who .r { font-size: 11px; color: var(--text-muted); }
.sidebar-logout {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; border-radius: 10px; font-size: 13px; color: var(--text-secondary);
  border: 1px solid var(--border); background: var(--surface); transition: all .15s;
}
.sidebar-logout:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-light); }
.sidebar-logout .ico { width: 16px; height: 16px; }

/* ---------- 群发页 ---------- */
.broadcast-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
.broadcast-preview { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface-container-low); }
.broadcast-preview .bp-title { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.broadcast-preview .bp-body { font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; min-height: 60px; }
.broadcast-targets { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.broadcast-targets label { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.broadcast-targets label:last-child { border-bottom: none; }
.broadcast-targets label:hover { background: var(--surface-container-low); }
.broadcast-bar { height: 8px; border-radius: 9999px; background: var(--surface-container-highest); overflow: hidden; }
.broadcast-bar > i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s; }

/* ---------- 聊天气泡：连续消息折叠头像 ---------- */
.message.grouped { margin-top: -6px; }
.message.grouped .avatar { visibility: hidden; }
.message .bubble { box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.msg-footer { opacity: .85; }

/* ---------- 手机端 ---------- */
@media (max-width: 980px) {
  /* 手机上：侧边栏变成底部导航，账号区与桌面内边距都要让位 */
  .sidebar { padding: 0 6px calc(6px + var(--safe-bottom, 0px)); align-items: center; }
  .sidebar-bottom { display: none !important; }
  .sidebar-nav { width: 100%; }
  .chat-header-bar { padding: 8px 10px; min-height: 56px; gap: 8px; }
  .chat-header-bar .chat-actions { padding-left: 6px; gap: 0; }
  .chat-header-bar .chat-actions .mini-btn { width: 32px; height: 32px; }
  .chat-peer-name { font-size: 15px; }
  .chat-peer-name #chatWithName { max-width: 34vw; }
  .session-item { padding: 12px; }
  .broadcast-grid { grid-template-columns: 1fr; }
  .broadcast-targets { max-height: 240px; }
  .sidebar-user { display: none; }
}

/* ==========================================================================
   商户后台 · 全新布局（2026-09-22 第三轮）
   只作用于 body.app-tenant，不影响客户聊天页与登录页。
   侧边栏 240px（白底/分组/文字标签）→ 顶部工具条 → 内容卡片 → 三栏聊天
   ========================================================================== */

body.app-tenant {
  --t-bg: #f6f7fb;
  --t-surface: #ffffff;
  --t-border: #e7e9ef;
  --t-text: #121828;
  --t-muted: #6b7280;
  --t-radius: 14px;
  --t-radius-sm: 10px;
  --t-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .10);
  background: var(--t-bg);
  color: var(--t-text);
}
body.app-tenant .layout { background: var(--t-bg); }

/* ---------- 侧边栏（240px，白底） ---------- */
body.app-tenant .sidebar {
  width: 240px; padding: 18px 14px 16px; gap: 0;
  background: var(--t-surface); border-right: 1px solid var(--t-border);
  align-items: stretch; display: flex; flex-direction: column;
}
body.app-tenant .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 16px; }
body.app-tenant .sidebar-brand .sidebar-logo {
  width: 38px; height: 38px; border-radius: 12px; margin: 0; flex-shrink: 0;
  background: var(--primary, #6750a4); display: grid; place-items: center;
}
body.app-tenant .sidebar-brand .sidebar-logo svg { fill: #fff !important; width: 20px !important; height: 20px !important; }
body.app-tenant .sidebar-brand-text { min-width: 0; }
body.app-tenant .sidebar-brand-text .brand-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--t-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-tenant .sidebar-brand-text .brand-sub { font-size: 11.5px; color: var(--t-muted); white-space: nowrap; }
body.app-tenant .nav-label {
  display: block; font-size: 11px; font-weight: 600; color: #98a2b3;
  letter-spacing: .08em; padding: 6px 8px 8px; text-transform: uppercase;
}
body.app-tenant .sidebar-nav {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  width: 100%; flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-bottom: 8px;
}
body.app-tenant .sidebar-nav a {
  position: relative; width: 100%; height: 40px; margin: 0; padding: 0 12px;
  border-radius: var(--t-radius-sm); display: flex; align-items: center; gap: 10px;
  color: #475467; font-size: 13.5px; font-weight: 500;
}
body.app-tenant .sidebar-nav a::before { display: none; }
body.app-tenant .sidebar-nav a svg { width: 18px !important; height: 18px !important; flex: 0 0 auto; }
body.app-tenant .sidebar-nav a .label { display: inline-block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.app-tenant .sidebar-nav a .label-sm { display: none !important; }
body.app-tenant .sidebar-nav a:hover { background: #f2f4f7; color: var(--t-text); }
body.app-tenant .sidebar-nav a.active {
  background: color-mix(in srgb, var(--primary, #6750a4) 12%, #fff);
  color: var(--primary, #6750a4); font-weight: 600;
}
body.app-tenant .sidebar-nav a.active::after {
  content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--primary, #6750a4);
}
body.app-tenant .sidebar-nav a.active svg { fill: currentColor; }

/* 侧边栏底部：账号卡片 + 退出 */
body.app-tenant .sidebar-bottom {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  margin-top: auto; padding: 12px 4px 0; border-top: 1px solid var(--t-border);
}
body.app-tenant .sidebar-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.app-tenant .sidebar-user .avatar {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--primary, #6750a4) 14%, #fff);
  color: var(--primary, #6750a4); font-weight: 700; display: grid; place-items: center; position: relative;
}

body.app-tenant .sidebar-user .who { min-width: 0; }
body.app-tenant .sidebar-user .who .n { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-tenant .sidebar-user .who .r { font-size: 11px; color: var(--t-muted); }
body.app-tenant .sidebar-logout {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px;
  border: 1px solid var(--t-border); border-radius: var(--t-radius-sm);
  font-size: 13px; color: #475467; background: #fff;
}
body.app-tenant .sidebar-logout:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-light); }

/* ---------- 顶部工具条 ---------- */
body.app-tenant .topbar {
  height: 64px; padding: 0 24px; background: var(--t-surface);
  border-bottom: 1px solid var(--t-border); gap: 12px;
}
body.app-tenant .topbar-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
body.app-tenant .topbar-badge {
  border-radius: 999px !important; padding: 5px 12px !important; font-size: 11.5px !important;
  display: inline-flex; align-items: center; gap: 6px;
}
body.app-tenant .topbar-badge.expiry { background: #fff5e6 !important; color: #b54708 !important; }
body.app-tenant .sound-btn, body.app-tenant .topbar-logout { height: 34px; border-radius: 999px; }
body.app-tenant .topbar-user .avatar { width: 34px; height: 34px; border-radius: 10px; }

/* ---------- 内容与卡片 ---------- */
body.app-tenant .content { padding: 20px 24px 32px; background: var(--t-bg); }
body.app-tenant .card {
  background: var(--t-surface) !important; border: 1px solid var(--t-border) !important;
  border-radius: var(--t-radius) !important; box-shadow: var(--t-shadow) !important; overflow: hidden;
}
body.app-tenant .card-header { padding: 16px 20px !important; border-bottom: 1px solid var(--t-border); gap: 12px; flex-wrap: wrap; }
body.app-tenant .card-title { font-size: 15.5px !important; font-weight: 700 !important; }
body.app-tenant .card-body { padding: 20px !important; }
body.app-tenant .stat-card {
  background: var(--t-surface) !important; border: 1px solid var(--t-border) !important;
  border-radius: var(--t-radius) !important; box-shadow: none !important; padding: 18px 20px !important;
}
body.app-tenant .stat-card::after { display: none; }
body.app-tenant .stat-card .icon { width: 38px !important; height: 38px !important; border-radius: 11px !important; }
body.app-tenant .stat-card .value { font-size: 26px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
body.app-tenant .stat-card .label { font-size: 12.5px !important; color: var(--t-muted) !important; }

/* ---------- 聊天三栏 ---------- */
body.app-tenant .chat-layout { height: 100%; background: var(--t-surface); }
body.app-tenant .chat-panel-left { width: 300px; border-right: 1px solid var(--t-border); background: var(--t-surface); }
body.app-tenant .chat-panel-center { background: #fafbfc; }
body.app-tenant .chat-panel-right { width: 300px; border-left: 1px solid var(--t-border); background: var(--t-surface); }

body.app-tenant .session-list-header { padding: 14px 16px 10px; border-bottom: none; }
body.app-tenant .session-list-header h3 { font-size: 14.5px; font-weight: 700; }
body.app-tenant .session-tabs { display: inline-flex; gap: 4px; padding: 3px; background: #f2f4f7; border-radius: 10px; }
body.app-tenant .session-tabs .tab { padding: 5px 12px; border-radius: 8px; font-size: 12.5px; color: var(--t-muted); cursor: pointer; }
body.app-tenant .session-tabs .tab.active { background: #fff; color: var(--t-text); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
body.app-tenant .session-search { padding: 6px 14px 12px; border-bottom: 1px solid var(--t-border); }
body.app-tenant .search-input { height: 36px; border-radius: 10px; border: 1px solid var(--t-border); background: #f9fafb; font-size: 13px; }
body.app-tenant .search-input:focus { background: #fff; border-color: var(--primary); }
body.app-tenant .session-item {
  padding: 12px 14px; gap: 12px; align-items: flex-start;
  border-bottom: 1px solid #f1f3f7; border-left: none;
  border-radius: 0; margin: 0;
}
/* 左侧状态条统一走 ::before：所有行都占位，只有状态色不同，避免「一行一个样」
   只保留三种状态色：未读=红、当前选中=主色、已拉黑=灰。
   标签/置顶不再着色（标签有药丸、置顶有徽章，避免多个黄色侧边） */
body.app-tenant .session-item::before {
  top: 0; bottom: 0; height: auto; transform: none; border-radius: 0;
  width: 3px; background: transparent;
}
body.app-tenant .session-item:hover { background: #f9fafb; }
body.app-tenant .session-item.pinned { background: transparent; }
body.app-tenant .session-item.pinned:hover { background: #f9fafb; }
body.app-tenant .session-item.has-tags::before,
body.app-tenant .session-item.has-tags.has-unread::before,
body.app-tenant .session-item.pinned::before,
body.app-tenant .session-item.pinned.has-tags::before { background: transparent; }
body.app-tenant .session-item.active {
  background: color-mix(in srgb, var(--primary, #6750a4) 8%, #fff);
}
body.app-tenant .session-item.active::before { background: var(--primary, #6750a4); }
body.app-tenant .session-item.has-unread::before { background: #ef4444; }
body.app-tenant .session-item.blacklisted::before { background: #94a3b8; }
body.app-tenant .session-item .info .name { font-size: 14px; font-weight: 600; }
body.app-tenant .session-item .last-msg { font-size: 12.5px; color: var(--t-muted); margin-top: 3px; }
body.app-tenant .session-time { font-size: 11px; color: #98a2b3; }
body.app-tenant .unread-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--primary, #6750a4); color: #fff !important; font-size: 11px; font-weight: 600;
  display: grid; place-items: center; align-self: center;
}
body.app-tenant .pin-badge {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 4px;
  padding: 1px 7px; border-radius: 999px; background: #fff5e6; color: #b54708;
  font-size: 10.5px; font-weight: 600; vertical-align: 1px;
}
body.app-tenant .session-tag { border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 500; color: #fff; }

/* 聊天头部 */
body.app-tenant .chat-header-bar {
  min-height: 64px; padding: 10px 16px; gap: 12px;
  background: var(--t-surface); border-bottom: 1px solid var(--t-border);
}
body.app-tenant .chat-peer-name { font-size: 15.5px; font-weight: 700; }
body.app-tenant .chat-actions { border-left: 1px solid var(--t-border); padding-left: 10px; gap: 4px; }
body.app-tenant .chat-actions .mini-btn { width: 34px; height: 34px; border-radius: 10px; color: #667085; }
body.app-tenant .chat-actions .mini-btn.active { background: color-mix(in srgb, var(--primary, #6750a4) 12%, #fff); color: var(--primary); }
body.app-tenant .chat-actions .mini-btn.danger:hover { background: var(--danger-light); color: var(--danger); }

/* 状态下拉 */
body.app-tenant .tag-dd { position: relative; }
body.app-tenant .tag-dd-btn { width: auto !important; padding: 0 10px !important; gap: 6px; border: 1px solid var(--t-border); }
body.app-tenant .tag-dd-btn .tag-dd-label { font-size: 12.5px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-tenant .tag-dd-btn.has-tag { border-color: var(--tag-color, var(--primary)); color: var(--tag-color, var(--primary)); background: color-mix(in srgb, var(--tag-color, #6750a4) 10%, #fff); }
body.app-tenant .tag-dd-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 236px; padding: 6px;
  background: #fff; border: 1px solid var(--t-border); border-radius: 12px;
  box-shadow: 0 12px 32px -12px rgba(16,24,40,.28);
}
body.app-tenant .tag-dd-item {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: none;
  background: transparent; border-radius: 9px; font-size: 13px; color: var(--t-text); cursor: pointer; text-align: left;
}
body.app-tenant .tag-dd-item:hover { background: #f2f4f7; }
body.app-tenant .tag-dd-item.active { background: #f2f4f7; font-weight: 600; }
body.app-tenant .tag-dd-item .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
body.app-tenant .tag-dd-item .tick { margin-left: auto; font-size: 11px; color: var(--primary); font-weight: 600; }
body.app-tenant .tag-dd-item.clear { color: var(--t-muted); justify-content: center; border-top: 1px solid var(--t-border); border-radius: 0 0 9px 9px; }
body.app-tenant .tag-dd-empty { padding: 16px 12px; font-size: 12.5px; color: var(--t-muted); text-align: center; }
body.app-tenant .tag-dd-empty .sub { font-size: 11px; color: #98a2b3; margin-top: 4px; }

/* 消息区 */
body.app-tenant .messages-area { padding: 18px 20px; gap: 10px; background: #fafbfc; }
body.app-tenant .message .bubble { border-radius: 16px; padding: 10px 14px; font-size: 13.5px; line-height: 1.6; box-shadow: none; }
body.app-tenant .message.received .bubble { background: #fff; border: 1px solid var(--t-border); border-top-left-radius: 6px; }
body.app-tenant .message.sent .bubble { background: var(--primary, #6750a4); color: #fff; border-top-right-radius: 6px; }
body.app-tenant .date-separator span { background: #eef1f5; color: #667085; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; }
body.app-tenant .msg-footer { font-size: 11px; color: #98a2b3; }

/* 输入区 */
body.app-tenant .message-input-area {
  padding: 12px 16px 14px; background: var(--t-surface); border-top: 1px solid var(--t-border); gap: 10px;
}
body.app-tenant .mia-tools { gap: 6px; }
body.app-tenant .mia-tools .mini-btn { width: 34px; height: 34px; border-radius: 10px; color: #667085; }
body.app-tenant .mia-tools .mini-btn:hover { background: #f2f4f7; color: var(--primary); }
body.app-tenant .quick-pills { padding-bottom: 10px; gap: 8px; }
body.app-tenant .quick-pill { border: 1px solid var(--t-border); background: #f9fafb; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; color: #475467; }
body.app-tenant .quick-pill:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary, #6750a4) 8%, #fff); }
body.app-tenant .input-row { gap: 10px; align-items: flex-end; }
body.app-tenant .message-input { border: 1px solid var(--t-border); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; background: #fff; min-height: 42px; }
body.app-tenant .message-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #6750a4) 12%, transparent); }
body.app-tenant .send-btn-round {
  width: 42px; height: 42px; border-radius: 12px; background: var(--primary, #6750a4); color: #fff;
  display: grid; place-items: center; transition: filter .15s;
}
body.app-tenant .send-btn-round:hover { filter: brightness(1.06); }
body.app-tenant .send-btn-round:disabled { opacity: .45; }

/* 右侧客户资料 */
body.app-tenant .customer-panel { padding: 0 16px 16px; background: var(--t-surface); }
body.app-tenant .panel-head { padding: 14px 0 10px; border-bottom: 1px solid var(--t-border); margin-bottom: 4px; }
body.app-tenant .panel-title { font-size: 13.5px; font-weight: 700; }
body.app-tenant .profile-hero { border-bottom: 1px solid var(--t-border); padding: 18px 0 14px; margin-bottom: 10px; }
body.app-tenant .profile-hero .avatar { width: 64px !important; height: 64px !important; border-radius: 18px !important; font-size: 26px !important; margin: 0 auto; }
body.app-tenant .profile-actions .btn { height: 36px; border-radius: var(--t-radius-sm); }
body.app-tenant .prof-row { padding: 10px 0; font-size: 12.5px; }
body.app-tenant .prof-row > span:first-child { color: var(--t-muted); }

/* 其它页面：表格与工具条统一 */
body.app-tenant table thead th { background: #f9fafb; font-size: 12px; color: var(--t-muted); padding: 10px 12px; border-bottom: 1px solid var(--t-border); }
body.app-tenant table tbody td { padding: 12px; font-size: 13px; border-bottom: 1px solid var(--t-border); }
body.app-tenant .quick-btn, body.app-tenant .btn { border-radius: var(--t-radius-sm); }
body.app-tenant .segmented { background: #f2f4f7; border-radius: 12px; padding: 4px; }
body.app-tenant .segmented > .tab.active, body.app-tenant .segmented > button.active { background: #fff; color: var(--t-text); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.08); }

/* ---------- 手机端 ---------- */
@media (max-width: 980px) {
  body.app-tenant .sidebar {
    width: 100%; padding: 0 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--t-surface); border-top: 1px solid var(--t-border);
  }
  body.app-tenant .sidebar-brand, body.app-tenant .nav-label, body.app-tenant .sidebar-bottom { display: none !important; }
  body.app-tenant .sidebar-nav { flex-direction: row; align-items: center; gap: 0; padding: 0; }
  body.app-tenant .sidebar-nav a {
    flex: 1 1 0; min-width: 0; height: auto; padding: 8px 2px; flex-direction: column; gap: 3px;
    border-radius: 10px; font-size: 10px;
  }
  body.app-tenant .sidebar-nav a .label { display: none !important; }
  body.app-tenant .sidebar-nav a .label-sm { display: block !important; font-size: 10px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.app-tenant .sidebar-nav a svg { width: 21px !important; height: 21px !important; }
  body.app-tenant .sidebar-nav a.active::after { display: none; }
  body.app-tenant .topbar { height: 56px; padding: 0 12px; }
  body.app-tenant .topbar-title { font-size: 15px; }
  body.app-tenant .content { padding: 12px 12px 20px; }
  body.app-tenant .chat-panel-left { width: 100%; }
  body.app-tenant .tag-dd-menu { position: fixed; right: 12px; left: 12px; top: auto; bottom: 84px; width: auto; }
  body.app-tenant .chat-actions { border-left: none; padding-left: 0; }
  body.app-tenant .message-input-area { padding: 8px 10px 10px; }
}


/* 会话筛选 tab 不换行 */
body.app-tenant .session-tabs .tab, body.app-tenant .segmented > .tab, body.app-tenant .segmented > button { white-space: nowrap; }
body.app-tenant .session-list-header h3 { flex-wrap: wrap; gap: 8px; }

/* 商户后台 · 资料面板重塑 */
body.app-tenant .pf-info { display: flex; flex-direction: column; padding: 2px 0 6px; }
body.app-tenant .pf-item { padding: 10px 0; border-bottom: 1px solid #f1f3f7; }
body.app-tenant .pf-item:last-child { border-bottom: none; }
body.app-tenant .pf-item .k { font-size: 11px; color: #98a2b3; margin-bottom: 3px; letter-spacing: .02em; }
body.app-tenant .pf-item .v { font-size: 13px; color: var(--t-text, #121828); display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
body.app-tenant .pf-id { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #475467; }
body.app-tenant .pf-copy { flex: 0 0 auto; border: 1px solid var(--t-border, #e7e9ef); background: #fff; border-radius: 8px; font-size: 11px; padding: 3px 9px; color: #475467; cursor: pointer; transition: all .15s; }
body.app-tenant .pf-copy:hover { border-color: var(--primary, #6750a4); color: var(--primary, #6750a4); }
body.app-tenant .pf-hint { margin-top: 8px; padding: 12px; border: 1px dashed var(--t-border, #e7e9ef); border-radius: 10px; background: #fafbfc; font-size: 12px; line-height: 1.7; color: var(--t-muted, #6b7280); }
body.app-tenant .pf-flag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--danger-light, #fdecec); color: var(--danger, #d92d20); font-size: 11px; font-weight: 600; }
body.app-tenant .profile-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
body.app-tenant .profile-actions .btn { width: 100%; height: 38px; justify-content: center; }
body.app-tenant .profile-actions-row { display: flex; gap: 8px; }
body.app-tenant .profile-actions-row .btn { flex: 1 1 0; }
body.app-tenant .profile-hero .profile-sub { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* 表格里的轻量主色按钮（访客列表·对话） */
.btn-soft-primary { background: color-mix(in srgb, var(--primary, #6750a4) 12%, #fff); color: var(--primary, #6750a4); border: 1px solid transparent; font-weight: 500; }
.btn-soft-primary:hover { background: color-mix(in srgb, var(--primary, #6750a4) 20%, #fff); }

/* ==========================================================================
   运营后台 · 全新布局（2026-09-22）
   与商户后台同一套设计语言：240 白侧边栏 / 顶部工具条 / 卡片 / 表格 / 手机底部导航
   只作用于 body.app-operator
   ========================================================================== */
body.app-operator {
  --t-bg: #f6f7fb;
  --t-surface: #ffffff;
  --t-border: #e7e9ef;
  --t-text: #121828;
  --t-muted: #6b7280;
  --t-radius: 14px;
  --t-radius-sm: 10px;
  --t-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .10);
  background: var(--t-bg);
  color: var(--t-text);
}
body.app-operator .layout { background: var(--t-bg); }

/* ---------- 侧边栏 ---------- */
body.app-operator .sidebar {
  width: 240px; padding: 18px 14px 16px; gap: 0;
  background: var(--t-surface); border-right: 1px solid var(--t-border);
  display: flex; flex-direction: column; align-items: stretch;
}
body.app-operator .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 16px; }
body.app-operator .sidebar-brand .sidebar-logo {
  width: 38px; height: 38px; border-radius: 12px; margin: 0; flex-shrink: 0;
  background: var(--primary, #6750a4); display: grid; place-items: center;
}
body.app-operator .sidebar-brand .sidebar-logo svg { width: 20px; height: 20px; }
body.app-operator .sidebar-brand-text { min-width: 0; }
body.app-operator .sidebar-brand-text .brand-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--t-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-operator .sidebar-brand-text .brand-sub { font-size: 11.5px; color: var(--t-muted); white-space: nowrap; }
body.app-operator .nav-label {
  display: block; font-size: 11px; font-weight: 600; color: #98a2b3;
  letter-spacing: .08em; padding: 6px 8px 8px; text-transform: uppercase;
}
body.app-operator .sidebar-nav {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  width: 100%; flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-bottom: 8px;
}
body.app-operator .sidebar-nav a {
  position: relative; width: 100%; height: 40px; margin: 0; padding: 0 12px;
  border-radius: var(--t-radius-sm); display: flex; align-items: center; gap: 10px;
  color: #475467; font-size: 13.5px; font-weight: 500;
}
body.app-operator .sidebar-nav a::before { display: none; }
body.app-operator .sidebar-nav a svg { width: 18px !important; height: 18px !important; flex: 0 0 auto; }
body.app-operator .sidebar-nav a .label { display: inline-block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.app-operator .sidebar-nav a .label-sm { display: none !important; }
body.app-operator .sidebar-nav a:hover { background: #f2f4f7; color: var(--t-text); }
body.app-operator .sidebar-nav a.active {
  background: color-mix(in srgb, var(--primary, #6750a4) 12%, #fff);
  color: var(--primary, #6750a4); font-weight: 600;
}
body.app-operator .sidebar-nav a.active::before {
  content: ''; display: block; position: absolute; left: -14px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--primary, #6750a4);
}
body.app-operator .sidebar-bottom {
  margin-top: auto; padding: 12px 4px 0; border-top: 1px solid var(--t-border);
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
}
body.app-operator .sidebar-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.app-operator .sidebar-user .avatar {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; font-size: 14px;
  background: color-mix(in srgb, var(--primary, #6750a4) 14%, #fff);
  color: var(--primary, #6750a4); font-weight: 700; display: grid; place-items: center; position: relative;
}

body.app-operator .sidebar-user .who { min-width: 0; }
body.app-operator .sidebar-user .who .n { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-operator .sidebar-user .who .r { font-size: 11px; color: var(--t-muted); }
body.app-operator .sidebar-logout {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px;
  border: 1px solid var(--t-border); border-radius: var(--t-radius-sm);
  font-size: 13px; color: #475467; background: #fff; text-decoration: none;
}
body.app-operator .sidebar-logout:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-light, #fdecec); }

/* ---------- 顶部工具条 ---------- */
body.app-operator .topbar { height: 64px; padding: 0 24px; background: var(--t-surface); border-bottom: 1px solid var(--t-border); gap: 12px; }
body.app-operator .topbar-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; }
body.app-operator .topbar-title #siteNameSmall { font-size: 12px !important; margin-right: 6px; }
body.app-operator .topbar-user .avatar { width: 34px; height: 34px; border-radius: 10px; }
body.app-operator .topbar-user .name { font-size: 13px; font-weight: 600; }
body.app-operator .topbar-user .role { font-size: 11px; }

/* ---------- 内容 / 卡片 ---------- */
body.app-operator .content { padding: 20px 24px 32px; background: var(--t-bg); }
body.app-operator .card {
  background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-radius); box-shadow: var(--t-shadow); overflow: hidden;
}
body.app-operator .card-header { padding: 16px 20px; border-bottom: 1px solid var(--t-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.app-operator .card-title { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.app-operator .card-sub { font-size: 12px; font-weight: 400; color: var(--t-muted); }
body.app-operator .card-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.app-operator .card-body { padding: 20px; }

/* ---------- 统计卡 ---------- */
body.app-operator .stat-card {
  background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-radius); box-shadow: none; padding: 18px 20px;
}
body.app-operator .stat-card:hover { transform: none; box-shadow: var(--t-shadow); }
body.app-operator .stat-card::after { display: none; }
body.app-operator .stat-card .value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.app-operator .stat-card .label { font-size: 12.5px; color: var(--t-muted); }
body.app-operator .stat-card .icon { border-radius: 11px; }

/* ---------- 表格 ---------- */
body.app-operator .table-wrapper { overflow-x: auto; }
body.app-operator table { width: 100%; border-collapse: separate; border-spacing: 0; }
body.app-operator thead th {
  background: #f9fafb; font-size: 12px; font-weight: 600; color: var(--t-muted);
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--t-border); white-space: nowrap;
}
body.app-operator tbody td { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid #f1f3f7; vertical-align: middle; }
body.app-operator tbody tr:hover { background: #fafbfc; }
body.app-operator tbody tr:last-child td { border-bottom: none; }
body.app-operator tbody code { background: #f2f4f7; padding: 2px 8px; border-radius: 6px; font-size: 12px; color: #475467; }

/* ---------- 表单 / 按钮 / 徽章 ---------- */
body.app-operator .form-input {
  border-radius: var(--t-radius-sm); border: 1px solid var(--t-border);
  background: #f9fafb; font-size: 13px; padding: 9px 12px;
}
body.app-operator .form-input:focus {
  background: #fff; border-color: var(--primary, #6750a4);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #6750a4) 12%, transparent);
}
body.app-operator .form-label { font-size: 12.5px; color: #475467; font-weight: 500; }
body.app-operator .btn { border-radius: var(--t-radius-sm); }
body.app-operator .btn-primary { box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
body.app-operator .quick-btn {
  border-radius: 8px; padding: 5px 10px; font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--t-border); background: #fff; color: #475467; cursor: pointer;
}
body.app-operator .quick-btn:hover { border-color: var(--primary, #6750a4); color: var(--primary, #6750a4); }
body.app-operator .quick-btn.primary {
  background: color-mix(in srgb, var(--primary, #6750a4) 12%, #fff);
  color: var(--primary, #6750a4); border-color: transparent; font-weight: 500;
}
body.app-operator .quick-btn.primary:hover { background: color-mix(in srgb, var(--primary, #6750a4) 20%, #fff); }
body.app-operator .quick-btn.danger:hover { background: var(--danger-light, #fdecec); color: var(--danger); border-color: var(--danger); }
body.app-operator .badge { border-radius: 999px; font-size: 11px; padding: 3px 9px; font-weight: 500; }
body.app-operator .modal { border-radius: var(--t-radius); }

/* ---------- 创建商户：页内面板 ---------- */
body.app-operator .ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
body.app-operator .ct-section { border: 1px solid var(--t-border); border-radius: 12px; padding: 16px; background: #fcfcfd; }
body.app-operator .ct-section-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; color: var(--t-text); }
body.app-operator .ct-col-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.app-operator .ct-row { display: flex; gap: 8px; }
body.app-operator .ct-row .form-input { flex: 1 1 auto; min-width: 0; }
body.app-operator .ct-row select.form-input { flex: 0 0 128px; }
body.app-operator .ct-hint { font-size: 11.5px; color: var(--t-muted); line-height: 1.6; margin-top: 6px; }
body.app-operator .ct-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.app-operator .ct-actions .ct-hint { margin-top: 0; max-width: 60%; }
body.app-operator .ct-actions .btn { height: 40px; padding: 0 22px; flex: 0 0 auto; }
body.app-operator .ct-result { margin-top: 16px; border-radius: 12px; border: 1px solid #bbf7d0; background: #f0fdf4; padding: 14px 16px; }
body.app-operator .ct-result.warn { border-color: #fed7aa; background: #fffbeb; }
body.app-operator .ct-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
body.app-operator .ct-result-head b { font-size: 14px; }
body.app-operator .ct-result-sub { font-size: 12px; color: var(--t-muted); margin-left: 8px; }
body.app-operator .ct-result-fail { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.7; margin-bottom: 10px; }
body.app-operator .ct-result-text { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: #fff !important; line-height: 1.7; }

/* ---------- 手机端 ---------- */
@media (max-width: 980px) {
  body.app-operator .sidebar {
    width: 100%; padding: 0 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--t-surface); border-top: 1px solid var(--t-border);
  }
  body.app-operator .sidebar-brand, body.app-operator .nav-label, body.app-operator .sidebar-bottom { display: none !important; }
  body.app-operator .sidebar-nav { flex-direction: row; align-items: center; gap: 0; padding: 0; }
  body.app-operator .sidebar-nav a {
    flex: 1 1 0; min-width: 0; height: auto; padding: 8px 2px; flex-direction: column; gap: 3px;
    border-radius: 10px; font-size: 10px;
  }
  body.app-operator .sidebar-nav a .label { display: none !important; }
  body.app-operator .sidebar-nav a .label-sm { display: block !important; font-size: 10px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.app-operator .sidebar-nav a svg { width: 21px !important; height: 21px !important; }
  body.app-operator .sidebar-nav a.active::before { display: none; }
  body.app-operator .topbar { height: 56px; padding: 0 12px; }
  body.app-operator .topbar-title { font-size: 15px; }
  body.app-operator .content { padding: 12px 12px 20px; }
  body.app-operator .ct-grid { grid-template-columns: minmax(0, 1fr); }
  body.app-operator .ct-actions .ct-hint { max-width: 100%; }
  body.app-operator .card-header { padding: 12px 14px; }
  body.app-operator .card-body { padding: 14px; }
}

/* 后台 toast 落在顶栏下方，避免盖住用户信息 */
body.app-operator .toast, body.app-tenant .toast { top: 78px; }
@media (max-width: 980px) { body.app-operator .toast, body.app-tenant .toast { top: 66px; } }

/* ==========================================================================
   商户后台 · 微信入口：二维码 + 落地页预览并排，两个自定义合并成一张卡
   ========================================================================== */
body.app-tenant .wc-layout {
  display: grid; grid-template-columns: 320px 240px minmax(0, 1fr);
  gap: 16px; align-items: start;
}
body.app-tenant .wc-qr-card { width: 100%; }
body.app-tenant .wc-phone-col {
  background: #fff; border: 1px solid var(--t-border); border-radius: 16px;
  padding: 14px 12px 16px; box-shadow: var(--t-shadow);
}
body.app-tenant .wc-phone-title {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  font-size: 12.5px; font-weight: 600; color: var(--t-text); margin-bottom: 10px;
}
body.app-tenant .wc-phone-title span { font-size: 10.5px; font-weight: 400; color: var(--t-muted); }
body.app-tenant .landing-preview-phone { width: 100%; max-width: 196px; margin: 0 auto; }
body.app-tenant .lp-qr { width: 104px; height: 104px; padding: 4px; box-sizing: border-box; }
body.app-tenant .lp-qr:has(img)::after { display: none; }
body.app-tenant .wc-style-panel {
  background: #fff; border: 1px solid var(--t-border); border-radius: 16px;
  box-shadow: var(--t-shadow); padding: 18px 20px;
}
body.app-tenant .wc-style-panel .wc-style-header { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--t-border); }
body.app-tenant .wc-style-panel .wc-field + .wc-field { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--t-border); }
@media (max-width: 1440px) {
  body.app-tenant .wc-layout { grid-template-columns: 300px 224px minmax(0, 1fr); }
}
@media (max-width: 1280px) {
  body.app-tenant .wc-layout { grid-template-columns: 300px minmax(0, 1fr); }
  body.app-tenant .wc-controls { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  body.app-tenant .wc-page-layout { flex-direction: column; }
  body.app-tenant .wc-style-panel { width: auto; max-height: none; overflow: visible; margin: 0; }
  body.app-tenant .wc-layout { grid-template-columns: minmax(0, 1fr); }
  body.app-tenant .wc-qr-card, body.app-tenant .wc-phone-col, body.app-tenant .wc-controls { grid-column: auto; width: 100%; max-width: 100%; }
  body.app-tenant .wc-qr-card { margin: 0 auto; max-width: 360px; }
}

/* 手机端：消息区用弹性高度（旧样式把 #chatActive 设成 display:block + height:100%，会把聊天记录顶到固定输入框后面） */
@media (max-width: 980px) {
  body.app-tenant .chat-active-container {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  body.app-tenant .messages-area {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-y: auto;
    padding: 12px 12px calc(176px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
  }
}

/* 手机端：聊天头部改两行（名字不再被挤成竖排） */
@media (max-width: 980px) {
  body.app-tenant .chat-header-bar {
    flex-wrap: wrap; row-gap: 6px; padding: 8px 10px; gap: 8px;
  }
  body.app-tenant .chat-header-bar .mobile-back { flex: 0 0 auto; }
  body.app-tenant .chat-peer { flex: 1 1 auto; min-width: 0; }
  body.app-tenant .chat-peer-sub { display: none; }
  body.app-tenant .chat-peer-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
  body.app-tenant .chat-peer-name > span:first-child {
    font-size: 14.5px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  body.app-tenant .chat-actions {
    flex: 1 0 100%; justify-content: flex-end;
    border-left: none; padding-left: 0; padding-top: 6px;
    border-top: 1px solid var(--t-border, #e7e9ef);
  }
  body.app-tenant .chat-actions .mini-btn { width: 36px; height: 36px; }
  body.app-tenant .tag-dd-btn { padding: 0 12px !important; }
  body.app-tenant .tag-dd-btn .tag-dd-label { max-width: none; font-size: 12.5px; }
}

/* 侧边栏状态圆点已移除（用户反馈看着像在闪，去掉了） */
.sidebar-bottom .status-dot, body.app-tenant .sidebar-user .avatar .status-dot, body.app-operator .sidebar-user .avatar .status-dot { display: none !important; }

/* 二维码只放在落地页预览里（去掉单独的大卡，避免两个码） */
body.app-tenant .wc-qr-card { display: none !important; }
body.app-tenant .wc-layout { grid-template-columns: 268px minmax(0, 1fr); }
body.app-tenant .wc-phone-col { padding: 16px 14px 18px; }
body.app-tenant .wc-phone-title { margin-bottom: 12px; }
body.app-tenant .landing-preview-phone { max-width: 232px; }
body.app-tenant .lp-qr { width: 128px; height: 128px; transition: opacity .15s, width .15s, height .15s; }
body.app-tenant .lp-qr.is-loading { opacity: .4; }
body.app-tenant .wc-phone-actions { margin-top: 12px; display: flex; justify-content: center; }
body.app-tenant .wc-phone-actions .btn { width: 100%; max-width: 232px; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1280px) {
  body.app-tenant .wc-layout { grid-template-columns: 268px minmax(0, 1fr); }
  body.app-tenant .wc-controls { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  body.app-tenant .wc-layout { grid-template-columns: minmax(0, 1fr); }
  body.app-tenant .wc-phone-col { width: 100%; max-width: 360px; margin: 0 auto; }
}

/* 落地页「操作步骤」：可增删列表 */
body.app-tenant .lc-steps-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 12px; margin-bottom: 6px;
}
body.app-tenant .lc-steps { display: flex; flex-direction: column; gap: 8px; }
body.app-tenant .lc-step-row { display: flex; align-items: center; gap: 8px; }
body.app-tenant .lc-step-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; color: var(--t-muted, #6b7280);
}
body.app-tenant .lc-step-toggle input { width: 15px; height: 15px; }
body.app-tenant .lc-step-no {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary, #6750a4) 12%, #fff);
  color: var(--primary, #6750a4); font-size: 11px; font-weight: 700;
}
body.app-tenant .lc-step-row .lc-step-text { flex: 1 1 auto; min-width: 0; font-size: 13px; }
body.app-tenant .lc-step-del {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--t-border, #e7e9ef); background: #fff; color: #98a2b3;
  font-size: 12px; line-height: 1; transition: all .15s;
}
body.app-tenant .lc-step-del:hover { color: var(--danger, #d92d20); border-color: var(--danger, #d92d20); background: var(--danger-light, #fdecec); }

/* 落地页主题模板选择器（微信/QQ/支付宝/抖音） */
body.app-tenant .lc-tpl-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; }
body.app-tenant .lc-tpl-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
body.app-tenant .lc-tpl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer;
  padding: 8px; border-radius: 12px; border: 1px solid var(--t-border, #e7e9ef); background: #fff;
  transition: all .15s; text-align: left;
}
body.app-tenant .lc-tpl:hover { border-color: var(--primary, #6750a4); transform: translateY(-1px); }
body.app-tenant .lc-tpl.active { border-color: var(--primary, #6750a4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #6750a4) 14%, transparent); }
body.app-tenant .lc-tpl-swatch {
  width: 100%; height: 44px; border-radius: 8px; display: grid; place-items: center; position: relative; overflow: hidden;
}
body.app-tenant .lc-tpl-swatch i {
  width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
body.app-tenant .lc-tpl-name { font-size: 12px; font-weight: 600; color: var(--t-text, #121828); margin-top: 4px; }
body.app-tenant .lc-tpl-desc { font-size: 10.5px; color: var(--t-muted, #6b7280); }
/* 暗色模板（抖音）：预览手机也跟着变 */
body.app-tenant .landing-preview-phone.lp-dark { background: #101015; border-color: #24242f; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
body.app-tenant .landing-preview-phone.lp-dark .lp-brand { color: #e9e9ee; }
body.app-tenant .landing-preview-phone.lp-dark .lp-title { color: #ffffff; }
body.app-tenant .landing-preview-phone.lp-dark .lp-subtitle { color: #9b9ba4; }
body.app-tenant .landing-preview-phone.lp-dark .lp-step-text { color: #d7d7de; }
body.app-tenant .landing-preview-phone.lp-dark .lp-tip { background: rgba(37,244,238,.10); border-color: rgba(37,244,238,.35); color: #b9f6f2; }
body.app-tenant .landing-preview-phone.lp-dark .lp-bottom { color: #82828c; }
body.app-tenant .landing-preview-phone.lp-dark .lp-qr { border-color: #fff; }
@media (max-width: 980px) {
  body.app-tenant .lc-tpl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 客户资料面板：操作区不再两个大按钮硬碰硬 */
body.app-tenant .profile-actions {
  display: flex; flex-direction: column; gap: 6px; padding-top: 14px;
  border-top: 1px solid var(--t-border, #e7e9ef);
}
body.app-tenant .profile-actions .profile-edit {
  height: 42px; width: 100%; justify-content: center; gap: 6px;
  background: color-mix(in srgb, var(--primary, #6750a4) 12%, #fff);
  color: var(--primary, #6750a4); border: none; font-weight: 600; font-size: 13.5px;
}
body.app-tenant .profile-actions .profile-edit:hover {
  background: color-mix(in srgb, var(--primary, #6750a4) 20%, #fff);
}
body.app-tenant .profile-actions .profile-quiet-danger {
  height: 34px; width: 100%; justify-content: center; gap: 4px;
  background: transparent; border: none; color: #98a2b3; font-size: 12.5px; font-weight: 500;
}
body.app-tenant .profile-actions .profile-quiet-danger:hover { color: var(--danger, #d92d20); background: var(--danger-light, #fdecec); }

/* 语音录制 / 试听条 */
body.app-tenant .voice-rec {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger, #d92d20) 30%, #fff);
  background: color-mix(in srgb, var(--danger, #d92d20) 6%, #fff);
  border-radius: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
body.app-tenant .voice-rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--danger, #d92d20);
  animation: voicePulse 1.2s ease-in-out infinite; flex: 0 0 auto;
}
@keyframes voicePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.85); } }
body.app-tenant .voice-rec-time { font-size: 14px; font-weight: 700; color: var(--danger, #d92d20); font-variant-numeric: tabular-nums; }
body.app-tenant .voice-rec-hint { font-size: 12px; color: var(--t-muted, #6b7280); flex: 1 1 auto; }
body.app-tenant .voice-preview {
  padding: 12px; border: 1px solid var(--t-border, #e7e9ef); border-radius: 12px;
  background: #fafbfc; margin-bottom: 8px;
}
body.app-tenant .voice-preview-title { font-size: 12px; color: var(--t-muted, #6b7280); margin-bottom: 8px; }
body.app-tenant .voice-preview audio { width: 100%; height: 38px; }
body.app-tenant .voice-preview-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 980px) {
  body.app-tenant .voice-rec-hint { display: none; }
  body.app-tenant .voice-rec { gap: 8px; }
}

/* 抖音（暗色）模板：预览整块必须是深色，别出现白底白字 */
body.app-tenant .landing-preview-phone.lp-dark { background: #101015 !important; border-color: #24242f !important; }
body.app-tenant .landing-preview-phone.lp-dark .lp-status-bar { background: #1b1b22 !important; }
body.app-tenant .landing-preview-phone.lp-dark .lp-status-bar::after { background: #3a3a46 !important; }
body.app-tenant .landing-preview-phone.lp-dark .lp-content {
  background:
    radial-gradient(90% 60% at 12% 8%, rgba(254,44,85,.35), transparent 60%),
    radial-gradient(90% 60% at 88% 12%, rgba(37,244,238,.28), transparent 60%),
    #101015 !important;
  color: #f5f5f7;
}
body.app-tenant .landing-preview-phone.lp-dark .lp-brand { color: #ffffff !important; }
body.app-tenant .landing-preview-phone.lp-dark .lp-title { color: #ffffff !important; }
body.app-tenant .landing-preview-phone.lp-dark .lp-subtitle { color: #a9a9b4 !important; }
body.app-tenant .landing-preview-phone.lp-dark .lp-step-text { color: #e6e6ec !important; }
body.app-tenant .landing-preview-phone.lp-dark .lp-tip { background: rgba(37,244,238,.12) !important; border-color: rgba(37,244,238,.4) !important; color: #a9f7f3 !important; }
body.app-tenant .landing-preview-phone.lp-dark .lp-bottom { color: #8f8f99 !important; }
body.app-tenant .landing-preview-phone.lp-dark .lp-qr { background: #fff !important; }

/* 预览手机：四套平台名片版式 */
body.app-tenant .lp-hint { font-size: 10.5px; color: #9a9a9a; text-align: center; margin: 6px 0 10px; line-height: 1.5; }
/* 微信：浅灰底 + 白卡 + 6px 圆角绿按钮 */
body.app-tenant .landing-preview-phone.tpl-wechat { background: #ededed; border-color: #e2e2e2; }
body.app-tenant .landing-preview-phone.tpl-wechat .lp-content { background: #ededed !important; }
body.app-tenant .landing-preview-phone.tpl-wechat .lp-brand,
body.app-tenant .landing-preview-phone.tpl-wechat .lp-title { color: #191919 !important; }
body.app-tenant .landing-preview-phone.tpl-wechat .lp-btn { background: #07c160 !important; border-radius: 6px !important; }
body.app-tenant .landing-preview-phone.tpl-wechat .lp-qr { border-radius: 6px; }
/* QQ：顶部蓝色渐变 + 白卡 + 胶囊按钮 */
body.app-tenant .landing-preview-phone.tpl-qq { background: linear-gradient(180deg,#12b7f5 0,#12b7f5 74px,#f3f4f6 74px,#f3f4f6 100%); border-color: #dbe6f0; }
body.app-tenant .landing-preview-phone.tpl-qq .lp-content { background: linear-gradient(180deg,#12b7f5 0,#12b7f5 58px,#ffffff 58px) !important; }
body.app-tenant .landing-preview-phone.tpl-qq .lp-btn { background: linear-gradient(90deg,#12b7f5,#0a9ef0) !important; border-radius: 999px !important; }
body.app-tenant .landing-preview-phone.tpl-qq .lp-qr { border-radius: 10px; }
/* 支付宝：白底 + 顶部蓝条 + 10px 圆角蓝按钮 */
body.app-tenant .landing-preview-phone.tpl-alipay { background: #f7f8fa; border-color: #e8ecf2; }
body.app-tenant .landing-preview-phone.tpl-alipay .lp-content { background: #f7f8fa !important; border-top: 3px solid #1677ff; }
body.app-tenant .landing-preview-phone.tpl-alipay .lp-btn { background: #1677ff !important; border-radius: 10px !important; }
/* 抖音：纯黑 + 暗卡 + 渐变胶囊按钮 */
body.app-tenant .landing-preview-phone.tpl-douyin { background: #0b0b0f !important; border-color: #23232c !important; }
body.app-tenant .landing-preview-phone.tpl-douyin .lp-content { background: #0b0b0f !important; }
body.app-tenant .landing-preview-phone.tpl-douyin .lp-hint { color: #8f8f99; }
body.app-tenant .landing-preview-phone.tpl-douyin .lp-btn { background: linear-gradient(90deg,#fe2c55,#ff5c7a) !important; border-radius: 999px !important; }

/* 侧边栏高度约束：底部账号/退出登录必须留在可视区内 */
body.app-tenant .layout { height: 100vh; max-height: 100vh; overflow: hidden; }
body.app-tenant .sidebar {
  height: 100%; max-height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch;
}
body.app-tenant .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.app-tenant .sidebar-bottom { flex: 0 0 auto; margin-top: auto; }
body.app-tenant .sidebar-logout { white-space: nowrap; flex: 0 0 auto; }
body.app-tenant .sidebar-user .who { min-width: 0; }
/* 运营后台同样处理 */
body.app-operator .layout { height: 100vh; max-height: 100vh; overflow: hidden; }
body.app-operator .sidebar { height: 100%; max-height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; }
body.app-operator .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.app-operator .sidebar-bottom { flex: 0 0 auto; margin-top: auto; }
body.app-operator .sidebar-logout { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 980px) {
  body.app-tenant .layout, body.app-operator .layout { height: auto; max-height: none; overflow: visible; }
  body.app-tenant .sidebar, body.app-operator .sidebar { height: auto; max-height: none; }
}

/* 预览里的平台标志 */
body.app-tenant .lp-logo { width: 34px; height: 34px; border-radius: 9px; display: block; margin: 0 auto 6px; }

/* 修改资料 · 到期时间：增加/减少/覆盖 */
body.app-operator .te-exp-now { font-size: 12.5px; color: var(--t-muted, #6b7280); margin-bottom: 10px; }
body.app-operator .te-exp-now b { color: var(--t-text, #121828); font-weight: 600; }
body.app-operator .te-exp-modes {
  display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: #f2f4f7; margin-bottom: 12px;
}
body.app-operator .te-exp-mode {
  border: none; background: transparent; cursor: pointer; border-radius: 8px;
  padding: 6px 18px; font-size: 13px; color: #667085;
}
body.app-operator .te-exp-mode.active { background: #fff; color: var(--primary, #6750a4); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
body.app-operator .te-exp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.app-operator .te-exp-sign { font-size: 16px; font-weight: 700; color: var(--primary, #6750a4); width: 16px; text-align: center; }
body.app-operator .te-exp-quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
body.app-operator .te-exp-quick-label { font-size: 12px; color: var(--t-muted, #6b7280); }
body.app-operator .te-quick {
  border: 1px solid var(--t-border, #e7e9ef); background: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; color: #475467; cursor: pointer;
}
body.app-operator .te-quick:hover { border-color: var(--primary, #6750a4); color: var(--primary, #6750a4); background: color-mix(in srgb, var(--primary, #6750a4) 8%, #fff); }
body.app-operator .te-exp-preview {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  background: color-mix(in srgb, var(--primary, #6750a4) 8%, #fff);
  color: var(--primary, #6750a4); font-weight: 600;
}

/* 二维码中间的 Logo：平台图标预设 */
body.app-tenant .qr-logo-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
body.app-tenant .qr-logo-presets-label { font-size: 12px; color: var(--t-muted, #6b7280); }
body.app-tenant .qr-logo-preset {
  width: 40px; height: 40px; padding: 0; border-radius: 11px; border: 1px solid var(--t-border, #e7e9ef);
  background: #fff; cursor: pointer; overflow: hidden; transition: all .15s;
}
body.app-tenant .qr-logo-preset img { width: 100%; height: 100%; display: block; }
body.app-tenant .qr-logo-preset:hover { border-color: var(--primary, #6750a4); transform: translateY(-1px); }
body.app-tenant .qr-logo-preset.active { border-color: var(--primary, #6750a4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #6750a4) 16%, transparent); }

/* 尺寸选择：小/中/大 分档按钮 */
body.app-tenant .size-seg {
  display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: #f2f4f7; margin: 4px 0 2px;
}
body.app-tenant .size-seg button {
  border: none; background: transparent; cursor: pointer; border-radius: 8px;
  min-width: 62px; padding: 6px 14px; font-size: 13px; color: #667085;
}
body.app-tenant .size-seg button:hover { color: var(--primary, #6750a4); }
body.app-tenant .size-seg button.active {
  background: #fff; color: var(--primary, #6750a4); font-weight: 600;
  box-shadow: 0 1px 2px rgba(16,24,40,.08);
}

/* 消息未送达：持久说明 + 重发 */
body.app-tenant .msg-status.is-fail { color: var(--danger, #d92d20) !important; font-weight: 600; }
body.app-tenant .msg-fail-note {
  margin-top: 6px; padding: 6px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.5;
  background: var(--danger-light, #fdecec); color: var(--danger, #d92d20);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
body.app-tenant .msg-fail-retry {
  border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer;
  border-radius: 999px; padding: 1px 10px; font-size: 11.5px;
}
body.app-tenant .msg-fail-retry:hover { background: rgba(217,45,32,.08); }

/* 绑定微信号：状态徽章 + 命名按钮 */
body.app-tenant .bind-badge { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
body.app-tenant .bind-badge.ok { background: #e8f8ef; color: #0b8f52; }
body.app-tenant .bind-badge.warn { background: #fff5e6; color: #b54708; }
body.app-tenant .bind-badge.bad { background: #fdecec; color: #d92d20; font-weight: 600; }
body.app-tenant .bind-rename {
  margin-left: 6px; border: 1px solid var(--t-border, #e7e9ef); background: #fff; color: #667085;
  border-radius: 999px; font-size: 11px; padding: 0 8px; cursor: pointer; line-height: 18px;
}
body.app-tenant .bind-rename:hover { border-color: var(--primary, #6750a4); color: var(--primary, #6750a4); }
body.app-tenant .binding-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 绑定微信号：卡片式布局重做 */
body.app-tenant .binding-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 12px;
  background: #fff; border: 1px solid var(--t-border, #e7e9ef);
  border-left: 3px solid #e7e9ef; transition: box-shadow .15s, border-color .15s;
}
body.app-tenant .binding-item:hover { box-shadow: 0 2px 10px rgba(16,24,40,.06); }
body.app-tenant .binding-item.is-ok { border-left-color: #12b76a; }
body.app-tenant .binding-item.is-warn { border-left-color: #f79009; }
body.app-tenant .binding-item.is-bad { border-left-color: #d92d20; background: #fffafa; }
body.app-tenant .bind-avatar-wrap { position: relative; flex: 0 0 auto; }
body.app-tenant .bind-avatar {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary, #6750a4) 12%, #fff);
  color: var(--primary, #6750a4); font-weight: 700; font-size: 15px;
}
body.app-tenant .bind-avatar-dot {
  position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff;
}
body.app-tenant .bind-avatar-dot.ok { background: #12b76a; }
body.app-tenant .bind-avatar-dot.warn { background: #f79009; }
body.app-tenant .bind-avatar-dot.bad { background: #d92d20; }
body.app-tenant .binding-info { flex: 1 1 auto; min-width: 0; }
body.app-tenant .binding-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
body.app-tenant .binding-name { font-size: 13.5px; font-weight: 600; color: var(--t-text, #121828); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-tenant .bind-badge { flex: 0 0 auto; font-size: 10.5px; padding: 1px 8px; border-radius: 999px; font-weight: 500; }
body.app-tenant .bind-badge.ok { background: #e8f8ef; color: #0b8f52; }
body.app-tenant .bind-badge.warn { background: #fff5e6; color: #b54708; }
body.app-tenant .bind-badge.bad { background: #fdecec; color: #d92d20; font-weight: 700; }
body.app-tenant .binding-meta { font-size: 11.5px; color: var(--t-muted, #6b7280); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-tenant .binding-meta.mono { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #98a2b3; }
body.app-tenant .bind-hint { margin-top: 5px; font-size: 11.5px; color: #d92d20; background: #fdecec; border-radius: 6px; padding: 3px 8px; display: inline-block; }
/* 绑定已转移（同一微信号被新的绑定顶替）：中性灰提示，不参与轮询/发送 */
body.app-tenant .binding-item.is-moved { border-left-color: #98a2b3; background: #fafbfc; }
body.app-tenant .binding-item.is-moved .bind-avatar { background: #f2f4f7; color: #98a2b3; }
body.app-tenant .bind-badge.moved { background: #eef2f6; color: #475467; }
body.app-tenant .bind-moved-hint { margin-top: 5px; font-size: 11.5px; color: #475467; background: #f2f4f7; border-radius: 6px; padding: 4px 8px; display: block; line-height: 1.6; white-space: normal; }
body.app-tenant .bind-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
body.app-tenant .bind-actions .bind-rename,
body.app-tenant .bind-actions .bind-unbind {
  border-radius: 8px; font-size: 12px; padding: 4px 10px; cursor: pointer;
  border: 1px solid var(--t-border, #e7e9ef); background: #fff; color: #475467;
}
body.app-tenant .bind-actions .bind-rename:hover { border-color: var(--primary, #6750a4); color: var(--primary, #6750a4); }
body.app-tenant .bind-actions .bind-unbind:hover { border-color: #d92d20; color: #d92d20; background: #fffafa; }

/* 微信号被转移到其他商户：顶部主动提醒横幅（提示性蓝色、可关闭；实时 WS 或加载时检查 moved 绑定） */
body.app-tenant .moved-notice-bar { background: #f0f5ff; border-bottom: 1px solid #d6e2ff; color: #1d2939; font-size: 13px; line-height: 1.6; }
body.app-tenant .moved-notice-item { display: flex; align-items: center; gap: 10px; padding: 9px 18px; flex-wrap: wrap; }
body.app-tenant .moved-notice-item + .moved-notice-item { border-top: 1px solid #e3ebff; }
body.app-tenant .moved-notice-icon {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; background: #d6e2ff; color: #2f54eb;
  font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center;
}
body.app-tenant .moved-notice-text { flex: 1 1 320px; min-width: 200px; }
body.app-tenant .moved-notice-text b { color: #1d39c4; font-weight: 600; }
body.app-tenant .moved-notice-go {
  border: 1px solid #b8ccff; background: #fff; color: #2f54eb; border-radius: 8px;
  font-size: 12px; padding: 4px 12px; cursor: pointer; flex: 0 0 auto;
}
body.app-tenant .moved-notice-go:hover { background: #f0f5ff; border-color: #2f54eb; }
body.app-tenant .moved-notice-close {
  border: none; background: transparent; color: #667085; font-size: 16px; line-height: 1;
  cursor: pointer; padding: 2px 6px; border-radius: 6px; flex: 0 0 auto;
}
body.app-tenant .moved-notice-close:hover { background: #e3ebff; color: #1d2939; }

/* 落地页自定义：分区小标题 */
body.app-tenant .lc-sec {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--t-border, #e7e9ef);
  font-size: 12.5px; font-weight: 700; color: var(--t-text, #121828);
}
body.app-tenant .lc-sec::before {
  content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--primary, #6750a4);
}
body.app-tenant .lc-sec:first-of-type { margin-top: 6px; padding-top: 0; border-top: none; }
body.app-tenant .lc-tpl-head + .lc-tpl-list { margin-bottom: 4px; }
body.app-tenant .form-group .form-label { margin-bottom: 4px; }

/* 绑定卡片：去掉内层多余的框（老样式遗留） */
body.app-tenant .binding-info {
  padding: 0; border: none; border-radius: 0; margin-bottom: 0; background: transparent;
}
body.app-tenant .binding-line { justify-content: flex-start; }
body.app-tenant .binding-item:active { transform: none; }

/* 绑定卡片：未命名引导 */
body.app-tenant .bind-tip-label { font-size: 11px; color: #98a2b3; margin-left: 6px; }
body.app-tenant .bind-actions .bind-rename { border-color: var(--primary, #6750a4); color: var(--primary, #6750a4); font-weight: 500; }

/* 通道坏了：常驻提示条 */
body.app-tenant .dead-channel-bar {
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 10px 12px; border-radius: 10px;
  background: #fdecec; border: 1px solid #fecaca; color: #b42318; font-size: 12.5px; line-height: 1.5;
}
body.app-tenant .dead-channel-text { flex: 1 1 auto; min-width: 0; }
body.app-tenant .dead-channel-btn {
  flex: 0 0 auto; border: none; cursor: pointer; border-radius: 8px; padding: 5px 12px;
  background: #d92d20; color: #fff; font-size: 12.5px; font-weight: 600;
}
body.app-tenant .dead-channel-close {
  flex: 0 0 auto; border: none; background: transparent; color: #b42318; cursor: pointer; font-size: 13px;
}

/* 侧边栏未读提醒（客服工作台） */
body.app-tenant .sidebar-nav a { position: relative; }
body.app-tenant .nav-badge {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #ef4444; color: #fff !important; font-size: 11px; font-weight: 700;
  display: none; place-items: center; line-height: 1; box-shadow: 0 0 0 2px #fff;
}
body.app-tenant .sidebar-nav a.active .nav-badge { box-shadow: 0 0 0 2px #fff; }
@media (max-width: 980px) {
  body.app-tenant .nav-badge { right: 50%; top: 4px; transform: translateX(50%); }
}

/* ===================== 操作按钮显眼化（使用者视角：有实际用途的按钮不能长得像文字）===================== */
.quick-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 8px;
  background: #fff; border: 1px solid #d8e0ea; color: #334155;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  box-shadow: 0 1px 1px rgba(16,24,40,.03);
}
.quick-btn:hover { background: #f5f8fc; border-color: #b7c5d6; color: #1e293b; }
.quick-btn:active { background: #eef2f7; }
.quick-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(108,92,231,.35); }
.quick-btn.primary:hover { filter: brightness(1.07); background: var(--primary); color: #fff; }
.quick-btn.danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.quick-btn.danger:hover { background: #fee2e2; border-color: #fca5a5; }
.quick-btn:disabled { opacity: .5; box-shadow: none; }
/* 顶部工具条里的纯文字按钮也给出「是个按钮」的样子 */
.btn-text { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; color: #334155; font-weight: 600; }
.btn-text:hover { background: #eef2f7; border-color: #cbd5e1; color: #1e293b; }
.card-header-actions .btn-default { border-color: #d8e0ea; box-shadow: 0 1px 1px rgba(16,24,40,.03); }
.card-header-actions .btn-default:hover { border-color: #b7c5d6; background: #f5f8fc; }