:root {
  --bg: #f3f7fc;
  --panel: #ffffff;
  --panel-soft: #f8fbff;
  --text: #172033;
  --muted: #718096;
  --border: #e4edf7;
  --primary: #1677ff;
  --primary-dark: #0b5ed7;
  --primary-soft: #eaf3ff;
  --success: #16a34a;
  --danger: #ef4444;
  --warning: #d97706;
  --shadow: 0 22px 60px rgba(23, 43, 77, 0.08);
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(22, 119, 255, 0.12), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(14, 165, 233, 0.10), transparent 34%),
    var(--bg);
  font-family: var(--font);
  text-rendering: optimizeLegibility;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted);
}

.chat-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.app-shell {
  width: min(880px, 100%);
  height: min(900px, calc(100dvh - 40px));
  min-height: 580px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.notice-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  color: #8a6500;
  background: #fff9e8;
  border-bottom: 1px solid #fff0bd;
  font-size: 13px;
}

.notice-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d9ae36;
  border-radius: 50%;
  color: #b68200;
  font-size: 12px;
  font-weight: 700;
}

.notice-action {
  margin-left: 8px;
  padding: 4px 11px;
  color: #9a7200;
  background: #fff;
  border: 1px solid #e9ce79;
  border-radius: 999px;
  font-size: 12px;
}

.notice-action:hover {
  background: #fff7dc;
}

.chat-header {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand-mark {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #1677ff, #21c6ff);
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(22, 119, 255, 0.22);
  font-size: 18px;
  font-weight: 800;
}

.agent-mark {
  background: linear-gradient(145deg, #0f766e, #14b8a6);
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.22);
}

.brand-title {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.brand-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.header-actions,
.agent-header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ghost-btn,
.status-pill,
.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
}

.ghost-btn {
  color: #406080;
  background: #f5f9ff;
  border: 1px solid #d9e8fb;
}

.ghost-btn:hover {
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.status-pill {
  color: #8b5f00;
  background: #fff8e6;
  border: 1px solid #f3dfaa;
}

.status-pill.connected {
  color: #15803d;
  background: #effcf3;
  border-color: #bce9c9;
}

.status-pill.disconnected {
  color: #b42318;
  background: #fff1f0;
  border-color: #ffd2cc;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}

.chat-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.message-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 22px 12px;
  scroll-behavior: smooth;
}

.history-start {
  width: max-content;
  max-width: 100%;
  margin: 2px auto 20px;
  color: #8a9ab0;
  font-size: 12px;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.date-separator {
  align-self: center;
  margin: 4px 0 6px;
  padding: 4px 10px;
  color: #8a9ab0;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #edf3f9;
  border-radius: 999px;
  font-size: 11px;
}

.avatar-hidden { visibility:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.message.grouped { margin-top:-7px; }

.message {
  max-width: min(82%, 620px);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  animation: message-in 180ms ease-out both;
}

.message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message.agent {
  align-self: flex-start;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #1677ff, #45a2ff);
  border-radius: 50%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(22, 119, 255, 0.18);
}

.message.agent .avatar {
  background: linear-gradient(145deg, #0f766e, #2bb7a8);
  box-shadow: 0 5px 12px rgba(15, 118, 110, 0.18);
}

.message-body {
  min-width: 0;
}

.message.user .message-body {
  text-align: right;
}

.message-meta .meta-name { color: #333333; font-weight: 800; font-size: 12.5px; }
.message-meta .meta-time { color: #8593DC; font-weight: 400; font-size: 12px; }
.message > .avatar { margin-top: 1px; }
.message > .avatar { margin-top: 1px; }

.message-meta {
  margin: 0 4px 5px;
  color: #8a9ab0;
  font-size: 11px;
  white-space: nowrap;
}


.message-meta {
  text-align: right;
}


.message-meta {
  text-align: left;
}

.bubble {
  display: inline-block;
  max-width: 100%;
  padding: 10px 13px;
  border-radius: 16px;
  line-height: 1.55;
  font-size: 14px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.message.user .bubble {
  color: #fff;
  background: linear-gradient(145deg, #1677ff, #4096ff);
  border-bottom-right-radius: 5px;
  box-shadow: 0 7px 18px rgba(22, 119, 255, 0.16);
}

.message.agent .bubble {
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
  box-shadow: 0 6px 18px rgba(31, 56, 88, 0.045);
}

.message.sending .bubble {
  opacity: 0.78;
}

.message.failed .bubble {
  background: #fff1f0;
  color: #b42318;
  border: 1px solid #ffd2cc;
  box-shadow: none;
}

.message-status {
  margin: 5px 4px 0;
  color: #8a9ab0;
  font-size: 10px;
}

.message.failed .message-status {
  color: var(--danger);
}

.image-bubble {
  padding: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.image-bubble img {
  display: block;
  width: min(250px, 100%);
  max-height: 260px;
  object-fit: contain;
  border-radius: 10px;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: #8a9ab0;
  font-size: 11px;
}

.typing-indicator > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9cb0c7;
  animation: typing 1s infinite ease-in-out;
}

.typing-indicator > span:nth-child(2) {
  animation-delay: 0.12s;
}

.typing-indicator > span:nth-child(3) {
  animation-delay: 0.24s;
}

.typing-indicator em {
  margin-left: 4px;
  font-style: normal;
}

@keyframes typing {
  0%, 60%, 100% {
    opacity: 0.38;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.scroll-bottom {
  position: absolute;
  right: 22px;
  bottom: 102px;
  z-index: 5;
  padding: 7px 12px;
  color: var(--primary-dark);
  background: #fff;
  border: 1px solid #cfe4ff;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(31, 76, 145, 0.13);
  font-size: 12px;
  font-weight: 650;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 12px 18px 7px;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--border);
}

.composer textarea {
  flex: 1;
  min-width: 0;
  max-height: 126px;
  min-height: 42px;
  resize: none;
  padding: 11px 13px;
  color: var(--text);
  background: #f6f9fd;
  border: 1px solid #dce8f5;
  border-radius: 13px;
  line-height: 1.45;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
}

.composer textarea:focus {
  background: #fff;
  border-color: #9ec9ff;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.10);
}

.icon-btn,
.send-btn {
  flex: 0 0 auto;
  height: 42px;
  border-radius: 12px;
  font-weight: 700;
}

.icon-btn {
  width: 42px;
  color: #4c6582;
  background: #f4f8fd;
  border: 1px solid #dce8f5;
  font-size: 24px;
  line-height: 1;
}

.icon-btn:hover {
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-color: #b9d8ff;
}

.send-btn {
  min-width: 76px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(145deg, #1677ff, #4096ff);
  border: 0;
  box-shadow: 0 8px 18px rgba(22, 119, 255, 0.18);
}

.send-btn:disabled {
  cursor: not-allowed;
  color: #fff;
  opacity: 0.46;
  box-shadow: none;
}

.composer-hint {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 21px 10px;
  color: #98a7ba;
  background: #fff;
  font-size: 10px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 50;
  max-width: min(88vw, 420px);
  transform: translateX(-50%);
  padding: 10px 14px;
  color: #fff;
  background: rgba(23, 32, 51, 0.94);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  animation: toast-in 180ms ease-out both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Agent console */
.agent-page {
  height: 100dvh;
  overflow: hidden;
  padding: 16px;
}

.agent-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.agent-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.agent-name-field {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 11px;
  color: var(--muted);
  background: #f7fafd;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
}

.agent-name-field input {
  width: 92px;
  padding: 3px 4px;
  color: var(--text);
  background: #fff;
  border: 1px solid #e1eaf4;
  border-radius: 8px;
  outline: none;
  font-size: 12px;
}

.agent-name-field input:focus {
  border-color: #9ec9ff;
}

.agent-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
}

.session-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fbfdff;
  border-right: 1px solid var(--border);
}

.sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 16px 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 750;
}

.count-badge {
  min-width: 24px;
  padding: 2px 7px;
  color: #406080;
  background: #eef5fd;
  border-radius: 999px;
  text-align: center;
  font-size: 11px;
}

.sidebar-search {
  padding: 7px 12px 10px;
}

.sidebar-search input {
  width: 100%;
  padding: 9px 11px;
  color: var(--text);
  background: #fff;
  border: 1px solid #dde8f3;
  border-radius: 11px;
  outline: none;
  font-size: 12px;
}

.sidebar-search input:focus {
  border-color: #9ec9ff;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.08);
}

.session-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.session-item {
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 11px 10px;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  text-align: left;
  transition: background 140ms, border-color 140ms;
}

.session-item:hover {
  background: #f3f8ff;
}

.session-item.active {
  background: var(--primary-soft);
  border-color: #cfe4ff;
}

.session-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #45627f;
  background: #eaf2fb;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
}

.online-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  background: #b7c3d1;
  border: 2px solid #fff;
  border-radius: 50%;
}

.online-dot.online {
  background: var(--success);
}

.session-content {
  min-width: 0;
  flex: 1;
}

.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.session-name {
  overflow: hidden;
  color: #26364b;
  font-size: 13px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-time {
  flex: 0 0 auto;
  color: #9aabbf;
  font-size: 10px;
}

.session-preview {
  margin-top: 4px;
  overflow: hidden;
  color: #7c8ca0;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: #9aabbf;
  font-size: 10px;
}

.unread-badge {
  min-width: 18px;
  margin-left: auto;
  padding: 2px 5px;
  color: #fff;
  background: #ef4444;
  border-radius: 999px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
}

.agent-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.agent-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
}

.empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: #3b82f6;
  background: #eaf3ff;
  border-radius: 18px;
  font-size: 21px;
  font-weight: 800;
}

.agent-empty h2 {
  margin: 0 0 8px;
  font-size: 17px;
}

.agent-empty p {
  max-width: 360px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.primary-link {
  padding-inline: 15px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 8px 18px rgba(22, 119, 255, 0.18);
}

.agent-chat {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.conversation-header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
}

.conversation-header strong {
  display: block;
  font-size: 15px;
}

.conversation-header .muted {
  display: block;
  margin-top: 2px;
  font-size: 10px;
}

.online-label {
  padding: 5px 9px;
  color: #15803d;
  background: #effcf3;
  border: 1px solid #bce9c9;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
}

.online-label.offline {
  color: #64748b;
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.quick-replies {
  display: flex;
  gap: 7px;
  padding: 9px 18px 0;
  overflow-x: auto;
  background: #fff;
}

.quick-chip {
  flex: 0 0 auto;
  padding: 6px 10px;
  color: #45627f;
  background: #f5f9ff;
  border: 1px solid #dce9f8;
  border-radius: 999px;
  font-size: 11px;
}

.quick-chip:hover {
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-color: #b9d8ff;
}

@media (max-width: 860px) {
  .chat-page {
    padding: 0;
  }

  .app-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
  }

  .chat-header {
    min-height: 66px;
    padding: 10px 12px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand-title {
    font-size: 15px;
  }

  .ghost-btn {
    display: none;
  }

  .message-scroll {
    padding-inline: 13px;
  }

  .avatar-hidden { visibility:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.message.grouped { margin-top:-7px; }

.message {
    max-width: 90%;
  }

  .composer {
    padding-inline: 11px;
  }

  .composer-hint {
    padding-inline: 14px;
  }

  .agent-page {
    padding: 0;
  }

  .agent-shell {
    border-radius: 0;
  }

  .agent-header {
    min-height: 68px;
    padding: 10px 12px;
  }

  .agent-header-actions {
    gap: 6px;
  }

  .agent-name-field span {
    display: none;
  }

  .agent-name-field {
    padding-left: 8px;
  }

  .agent-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .session-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .session-list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 7px;
  }

  .session-item {
    min-width: 220px;
  }

  .quick-replies {
    padding-inline: 11px;
  }
}

.message .bubble.image-only {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.session-empty {
  padding: 30px 14px;
  color: #98a7ba;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
}

.conversation-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ip-label {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: #2f5f8f;
  background: #f1f7ff;
  border: 1px solid #d5e6fa;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
}

.ip-label:hover:not(:disabled) {
  color: var(--primary-dark);
  background: #e6f1ff;
  border-color: #b8d7ff;
}

.ip-label:disabled {
  cursor: default;
  color: #95a4b7;
  background: #f5f7fa;
  border-color: #e4e9ef;
}

.session-meta {
  min-width: 0;
}

.session-ip {
  max-width: 110px;
  overflow: hidden;
  color: #7d8da2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitor-note-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: #fffaf0;
  border-bottom: 1px solid #f1e3bf;
}

.visitor-note-label {
  flex: 0 0 auto;
  color: #9a6b00;
  font-size: 11px;
  font-weight: 750;
}

.visitor-note-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  color: #5c4300;
  background: #fff;
  border: 1px solid #ead9a8;
  border-radius: 9px;
  outline: none;
  font-size: 12px;
}

.visitor-note-input:focus {
  border-color: #e0b74d;
  box-shadow: 0 0 0 3px rgba(224, 183, 77, 0.12);
}

.visitor-note-input:disabled {
  background: #f7f4ec;
  color: #9aa4b2;
}

.save-note-btn {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  color: #fff;
  background: #b8860b;
  border: 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
}

.save-note-btn:hover:not(:disabled) {
  background: #9a6b00;
}

.save-note-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.session-note {
  margin-top: 4px;
  overflow: hidden;
  color: #a16207;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .visitor-note-bar {
    padding-inline: 11px;
  }

  .visitor-note-label {
    display: none;
  }
}

.auto-reply-settings {
  margin: 0 12px 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4edf7;
  border-radius: 12px;
}

.auto-reply-settings summary {
  padding: 9px 11px;
  color: #365070;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.auto-reply-settings summary::-webkit-details-marker {
  display: none;
}

.auto-reply-settings summary::after {
  float: right;
  color: #93a6bb;
  content: '+';
}

.auto-reply-settings[open] summary::after {
  content: '-';
}

.auto-reply-body {
  padding: 0 11px 10px;
}

.auto-reply-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: #60758d;
  font-size: 11px;
}

.auto-reply-toggle input {
  accent-color: var(--primary);
}

.auto-reply-body textarea {
  width: 100%;
  min-height: 60px;
  max-height: 120px;
  resize: vertical;
  padding: 8px 9px;
  color: var(--text);
  background: #f8fbff;
  border: 1px solid #dce8f5;
  border-radius: 9px;
  outline: none;
  font-size: 12px;
  line-height: 1.45;
}

.auto-reply-body textarea:focus {
  border-color: #9ec9ff;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.08);
}

.auto-reply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
}

.auto-reply-status {
  color: #8a9ab0;
  font-size: 10px;
}

.save-auto-reply-btn {
  height: 28px;
  padding: 0 10px;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.save-auto-reply-btn:hover:not(:disabled) {
  background: var(--primary-dark);
}

.save-auto-reply-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* High-contrast auto-reply settings header */
.auto-reply-settings {
  border: 1px solid #1677ff;
  background: #fff;
  box-shadow: 0 8px 20px rgba(22, 119, 255, 0.14);
}

.auto-reply-settings summary {
  color: #fff;
  background: linear-gradient(135deg, #1677ff, #4096ff);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.auto-reply-settings summary::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  vertical-align: 1px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24);
  content: '';
}

.auto-reply-settings summary::after {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.auto-reply-settings[open] summary {
  background: linear-gradient(135deg, #0b5ed7, #1677ff);
}

.auto-reply-settings summary:hover {
  filter: brightness(1.06);
}

/* Visitor identity row: badge - status dot - note - IP */
.visitor-badge-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 1px;
}


.visitor-status-dot {
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13);
}

.visitor-status-dot.offline {
  background: #c4cfdc;
  box-shadow: 0 0 0 3px rgba(196, 207, 220, 0.18);
}

.visitor-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.visitor-note-value {
  flex: 0 0 auto;
  max-width: 120px;
  overflow: hidden;
  color: #d9480f;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitor-separator {
  flex: 0 0 auto;
  color: #8a9ab0;
  font-size: 12px;
}

.visitor-ip-value {
  min-width: 0;
  overflow: hidden;
  color: #3b82f6;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}


.session-right {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.session-right .unread-badge {
  margin-left: 0;
}

.session-preview.typing-preview {
  color: #1677ff;
  font-weight: 650;
}

.notify-bar {
  display: flex;
  gap: 7px;
  padding: 0 12px 10px;
}

.notify-btn {
  flex: 1;
  height: 32px;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border: 0;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 750;
}

.notify-btn.off {
  background: #94a3b8;
}

.notify-btn.test-btn {
  flex: 0 0 54px;
  color: #35618f;
  background: #eef5fd;
  border: 1px solid #d5e6fa;
}

.notify-btn.test-btn:hover {
  background: #e2efff;
}

.mute-session-btn {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 10px;
  color: #15803d;
  background: #effcf3;
  border: 1px solid #bce9c9;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 750;
}

.mute-session-btn.off {
  color: #b42318;
  background: #fff1f0;
  border-color: #ffd2cc;
}

.mute-session-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.mute-badge {
  padding: 2px 5px;
  color: #b42318;
  background: #fff1f0;
  border: 1px solid #ffd2cc;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
}


.visitor-nickname {
  flex: 0 0 auto;
  color: #7c3aed;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.session-preview-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.session-preview-row .session-preview {
  flex: 1;
  min-width: 0;
}

.session-preview-row .session-right {
  flex: 0 0 auto;
}

.visitor-note-input {
  flex: 0 0 120px;
  width: 120px;
  text-align: center;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.mute-session-btn {
  margin-left: auto;
}

.visitor-note-bar {
  gap: 7px;
}

.visitor-note-bar .mute-session-btn {
  margin-left: 0;
}

.session-status-text {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 650;
}

.session-status-text.online {
  color: #16a34a;
}

.session-status-text.offline {
  color: #d97706;
}

/* Agent chat + visitor info panel */
.agent-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.chat-column {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.agent-info-panel {
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  background: #fbfdff;
  border-left: 1px solid var(--border);
}

.info-card {
  margin-bottom: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 13px;
}

.info-card h3 {
  margin: 0 0 10px;
  color: #334155;
  font-size: 13px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font-size: 11px;
}

.info-row > span {
  flex: 0 0 42px;
  color: var(--muted);
}

.info-row > strong {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.mini-copy-btn {
  flex: 0 0 auto;
  padding: 3px 6px;
  color: #35618f;
  background: #eef5fd;
  border: 1px solid #d5e6fa;
  border-radius: 6px;
  font-size: 10px;
}

.mini-copy-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.quick-reply-editor {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.quick-reply-editor input {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  color: var(--text);
  background: #f8fbff;
  border: 1px solid #dce8f5;
  border-radius: 8px;
  outline: none;
  font-size: 11px;
}

.quick-reply-editor input:focus {
  border-color: #9ec9ff;
}

.quick-reply-editor button {
  flex: 0 0 auto;
  padding: 0 9px;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.quick-reply-list {
  max-height: 330px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.quick-reply-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #f5f9ff;
  border: 1px solid #dce9f8;
  border-radius: 9px;
}

.quick-reply-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #365070;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.quick-send-btn,
.quick-delete-btn {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
}

.quick-send-btn {
  color: #fff;
  background: var(--primary);
  border: 0;
}

.quick-delete-btn {
  color: #b42318;
  background: #fff1f0;
  border: 1px solid #ffd2cc;
}

.quick-reply-empty {
  padding: 10px;
  color: #98a7ba;
  text-align: center;
  font-size: 11px;
}

@media (max-width: 1050px) {
  .agent-chat {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}

@media (max-width: 900px) {
  .agent-chat {
    grid-template-columns: 1fr;
  }

  .agent-info-panel {
    display: none;
  }
}

/* Make quick reply content easier to read */
.quick-reply-card h3 {
  color: #1d3557;
  font-size: 14px;
  font-weight: 800;
}

.quick-reply-text {
  color: #1d3557;
  font-weight: 750;
}

.quick-reply-editor input {
  color: #1d3557;
  font-weight: 650;
}

.quick-reply-row {
  background: #eff6ff;
  border-color: #cfe1f6;
}

/* strongest quick reply readability */
.quick-reply-card h3 {
  color: #0f2f57;
  font-weight: 850;
}

.quick-reply-card .quick-reply-text {
  color: #0f2f57;
  font-weight: 850;
}

/* 后台登录、设备安全和用户时长管理 */
.admin-identity {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 10px;
  color: #31577f;
  background: #f5f9ff;
  border: 1px solid #d9e8fb;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}
.danger-ghost { color: #b42318 !important; background: #fff6f5 !important; border-color: #ffd5d0 !important; }
.security-card { width: min(760px, 100%); }
.accounts-card { width: min(920px, 100%); }
.account-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.account-summary-grid > div {
  min-width: 0;
  padding: 12px;
  background: #f7faff;
  border: 1px solid #e2edf9;
  border-radius: 12px;
}
.account-summary-grid span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.account-summary-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 18px 0 10px; }
.section-title-row h4 { margin: 0; font-size: 15px; }
.section-title-row p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.section-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.device-list { display: grid; gap: 9px; max-height: 310px; overflow-y: auto; padding-right: 2px; }
.device-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e3edf8;
  border-radius: 12px;
}
.device-item.current { background: #f3f9ff; border-color: #bcdcff; }
.device-main { min-width: 0; }
.device-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.device-title strong { font-size: 13px; }
.device-badge { padding: 3px 7px; color: #0b5ed7; background: #eaf3ff; border-radius: 999px; font-size: 10px; font-weight: 750; }
.device-badge.online { color: #15803d; background: #effcf3; }
.device-badge.offline { color: #64748b; background: #f1f5f9; }
.device-meta { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.device-actions { display: flex; align-items: center; }
.password-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e7eef7; }
.password-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 10px; }
.password-form label { display: grid; gap: 6px; color: #475569; font-size: 12px; }
.password-form input, .account-form input, .account-form select {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  color: var(--text);
  background: #f8fbff;
  border: 1px solid #dce8f5;
  border-radius: 10px;
  outline: none;
}
.password-form input:focus, .account-form input:focus, .account-form select:focus { border-color: #9ec9ff; box-shadow: 0 0 0 3px rgba(22,119,255,.08); }
.account-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 11px; padding: 14px; background: #f7faff; border: 1px solid #e2edf9; border-radius: 14px; }
.account-form label { display: grid; gap: 6px; color: #475569; font-size: 12px; }
.account-form label small { color: var(--muted); font-weight: 500; }
.account-form .full { grid-column: 1 / -1; }
.account-list-heading { margin-top: 24px; }
.account-list { display: grid; gap: 10px; max-height: 380px; overflow-y: auto; padding-right: 2px; }
.account-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px;
  background: #fff;
  border: 1px solid #e3edf8;
  border-radius: 13px;
}
.account-item.owner { background: #f5f9ff; border-color: #c9e0fb; }
.account-item.disabled, .account-item.expired { background: #fbfcfe; opacity: .8; }
.account-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.account-title strong { font-size: 14px; }
.account-status { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.account-status.active { color: #15803d; background: #effcf3; }
.account-status.warning { color: #b45309; background: #fff8e6; }
.account-status.expired, .account-status.disabled { color: #b42318; background: #fff1f0; }
.account-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.account-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.security-alert {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 130;
  width: min(430px, calc(100% - 36px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  padding: 14px;
  color: #4b3100;
  background: #fffaf0;
  border: 1px solid #f1d89a;
  border-radius: 15px;
  box-shadow: 0 18px 50px rgba(85,58,0,.18);
  animation: securitySlideIn .24s ease-out;
}
.security-alert-icon { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: #d97706; border-radius: 9px; font-weight: 900; }
.security-alert-copy strong { display: block; font-size: 13px; }
.security-alert-copy p { margin: 4px 0 2px; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.security-alert-copy small { color: #8a6500; font-size: 10px; }
.security-alert-actions { display: flex; gap: 5px; }
@keyframes securitySlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .agent-header-actions .admin-identity { display: none; }
  .account-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .password-form, .account-form { grid-template-columns: 1fr; }
  .account-form .full { grid-column: auto; }
  .device-item, .account-item { grid-template-columns: 1fr; }
  .device-actions, .account-actions { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .agent-header {
    min-height: auto;
    flex-wrap: wrap;
  }
  .agent-header-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .agent-header-actions .ghost-btn {
    display: inline-flex;
  }
  .agent-header-actions .admin-identity {
    display: none;
  }
}

.message-status.receipt { color:#718096 !important; font-size:11px; opacity:.9; }


/* Simplified agent header: keep only visitor link, domain manager, logout, connection */
.agent-header #adminIdentity,
.agent-header #accountManageBtn,
.agent-header #securityBtn {
  display: none !important;
}
/* Hide internal session id and message count in active conversation header */
#activeSessionId {
  display: none !important;
}
/* Visitor clear and ban controls */
.sidebar-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-heading .count-badge {
  margin-left: auto;
}
.conversation-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.mini-danger-btn {
  min-height: 28px;
  padding: 4px 9px;
  color: #b42318;
  background: #fff5f4;
  border: 1px solid #ffd5d0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.mini-danger-btn:hover {
  color: #8f1d14;
  background: #ffece9;
  border-color: #ffb8ae;
}
@media(max-width: 680px) {
  .conversation-actions {
    margin-left: 0;
  }
}
/* Clear/ban labels are wider; let the header wrap cleanly on small screens */
@media(max-width: 680px) {
  .conversation-header {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .conversation-actions {
    margin-left: 0;
    order: 3;
  }
  .mini-danger-btn {
    padding: 4px 8px;
    font-size: 10.5px;
  }
}

/* Visitor: restore an existing conversation with a restore code */
.restore-btn {
  padding: 6px 13px;
  color: #1677ff;
  background: #eaf3ff;
  border: 1px solid #cfe4ff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.restore-btn:hover {
  background: #dcebff;
}
.restore-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f2f8ff;
  border-bottom: 1px solid #dbeafe;
}
.restore-form input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  color: var(--text);
  background: #fff;
  border: 1px solid #cfe4ff;
  border-radius: 50%;
  overflow: hidden;
  font-size: 13px;
  outline: none;
}
.restore-form input:focus {
  border-color: #9ec9ff;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
}
.restore-form button {
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 50%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.restore-form button[type="submit"] {
  color: #fff;
  background: var(--primary);
}
.restore-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: default;
}
.restore-form button#restoreCancelBtn {
  color: #4a5a70;
  background: #fff;
  border-color: var(--border);
}
@media(max-width: 560px) {
  .restore-btn {
    padding: 5px 10px;
    font-size: 11px;
  }
  .restore-form {
    padding: 8px 10px;
  }
}

/* Visitor: manual "refresh chat" button next to Send */
.refresh-btn {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 14px;
  color: #4c6582;
  background: #f4f8fd;
  border: 1px solid #dce8f5;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.refresh-btn:hover {
  color: var(--primary-dark);
  background: #eaf3ff;
  border-color: #bcd9ff;
}
.refresh-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
@media(max-width: 560px) {
  .refresh-btn {
    padding: 0 9px;
    font-size: 12px;
  }
}

/* Visitor ban / unban toggle */
.mini-danger-btn.unban {
  color: #1677ff;
  background: #eaf3ff;
  border-color: #cfe4ff;
}
.mini-danger-btn.unban:hover {
  color: #0b5ed7;
  background: #dcebff;
  border-color: #9ec9ff;
}
.ban-badge {
  padding: 2px 7px;
  color: #b42318;
  background: #fff1f0;
  border: 1px solid #ffd3ce;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}
.session-item.banned {
  background: #fffafa;
}

/* Visitor list row: cleaner hierarchy + spacing */
.visitor-nickname {
  font-size: 13px;
  color: #5b21b6;
  letter-spacing: 0.01em;
}
.visitor-note-value {
  max-width: 76px;
  padding: 1px 7px;
  color: #c2410c;
  background: #fff3e6;
  border: 1px solid #ffe0c2;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}
.visitor-separator {
  color: #c3ccd8;
  font-size: 11px;
}
.visitor-ip-value {
  color: #8a9ab0;
  font-size: 11px;
  font-weight: 600;
}
.session-preview-row {
  flex-wrap: nowrap;
  gap: 8px;
}
.session-preview {
  color: #8595aa;
}
.session-status-text {
  font-weight: 700;
}
.session-time {
  color: #a8b6c6;
}

/* Conversation actions now live in the note bar, on the same row as 备注 */
.visitor-note-bar {
  flex-wrap: wrap;
  row-gap: 8px;
}
.visitor-note-bar .conversation-actions {
  order: 0;
  margin-left: auto;
}
.visitor-note-bar .online-label {
  flex: 0 0 auto;
}
@media(max-width: 900px) {
  .visitor-note-bar .conversation-actions {
    margin-left: auto;
  }
}

/* Visitor name at the front of the note row, so the agent knows who this is */
.note-visitor-name {
  flex: 0 0 auto;
  max-width: 150px;
  margin-right: 2px;
  padding-right: 11px;
  overflow: hidden;
  color: #5b21b6;
  border-right: 1px solid #ecd9a8;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- Workspace polish ---------- */
/* Slimmer, calmer scrollbars (Windows default ones look heavy) */
* {
  scrollbar-width: thin;
  scrollbar-color: #c7d5e6 transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd8e8;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #aec2da;
  background-clip: content-box;
}

/* 消息提醒 used to be a full-width saturated green bar - calm it down */
.notify-btn {
  color: #15803d;
  background: #eafaf0;
  border: 1px solid #bce9c9;
  font-weight: 700;
}
.notify-btn:hover {
  background: #dcf6e6;
}
.notify-btn.off {
  color: #64748b;
  background: #f1f5f9;
  border-color: #e2e8f0;
}

/* Header: keep the action row tidy when it wraps, and separate the danger action */
.agent-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
}
.header-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 22px;
  background: var(--border);
}

/* Smallest labels get a readability floor */
.mute-badge {
  font-size: 10px;
}
.session-status-text,
.session-time {
  font-size: 10.5px;
}

/* ================= Workspace polish pass 2 ================= */

/* 5 Shared radius tokens (keeps cards / controls / pills consistent) */
:root {
  --radius-card: 16px;
  --radius-control: 10px;
}
.info-card,
.quick-reply-card {
  border-radius: var(--radius-card);
}
.session-item {
  border-radius: 12px;
}

/* 1 Header settings menu */
.settings-wrap {
  position: relative;
}
.settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 232px;
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(23, 43, 77, 0.16);
}
.settings-row {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.settings-row input {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  color: var(--text);
  background: #f8fbff;
  border: 1px solid #dce8f5;
  border-radius: var(--radius-control);
  outline: none;
  font-size: 13px;
}
.settings-row input:focus {
  background: #fff;
  border-color: #9ec9ff;
}
.settings-item {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  color: #31577f;
  background: #f7fbff;
  border: 1px solid #d9e7f7;
  border-radius: var(--radius-control);
  text-align: center;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.settings-item:hover {
  background: #eaf3ff;
  border-color: #bcd9ff;
}

/* 2 Red is reserved for real danger; routine actions stay calm until hover */
.mini-soft-btn {
  min-height: 28px;
  padding: 4px 9px;
  color: #56677d;
  background: #f6f9fd;
  border: 1px solid #e2ebf6;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}
.mini-soft-btn:hover {
  color: #b42318;
  background: #fff5f4;
  border-color: #ffd5d0;
}
.mini-soft-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.mute-session-btn.off {
  color: #b45309;
  background: #fff8e6;
  border-color: #fcd9a4;
}
.visitor-note-value {
  color: #b45309;
  background: #fff7e6;
  border-color: #fcd9a4;
}

/* 3 Nicer empty state */
.agent-empty {
  padding: 34px 26px;
}
.empty-icon {
  width: 66px;
  height: 66px;
  margin-bottom: 16px;
  color: #2563eb;
  background: linear-gradient(160deg, #eaf3ff, #dbeafe);
  border: 1px solid #cfe2ff;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
  font-size: 24px;
}
.agent-empty h2 {
  font-size: 18px;
}
.agent-empty p {
  max-width: 380px;
  color: #6b7f99;
}
.agent-empty .primary-link {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
}

/* 4 Quick replies: reveal row actions on hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .quick-reply-row .quick-send-btn,
  .quick-reply-row .quick-delete-btn {
    opacity: 0;
    transition: opacity 140ms ease;
  }
  .quick-reply-row:hover .quick-send-btn,
  .quick-reply-row:hover .quick-delete-btn,
  .quick-reply-row:focus-within .quick-send-btn,
  .quick-reply-row:focus-within .quick-delete-btn {
    opacity: 1;
  }
}

/* Right info panel: more room + easier-to-read text */
.agent-chat {
  grid-template-columns: minmax(0, 1fr) 330px;
}
.agent-info-panel {
  padding: 14px;
}
.info-card {
  padding: 14px;
}
.info-card h3 {
  margin-bottom: 12px;
  font-size: 14px;
}
.info-row {
  min-height: 32px;
  font-size: 12px;
}
.info-row > span {
  flex: 0 0 46px;
}
.mini-copy-btn {
  padding: 3px 7px;
  font-size: 11px;
}
.quick-reply-editor input {
  min-height: 34px;
  font-size: 12px;
}
.quick-reply-row {
  padding: 8px 9px;
}
.quick-reply-text {
  font-size: 12px;
}
@media (max-width: 1050px) {
  .agent-chat {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}

/* Quick replies: make them big and easy to scan (like the usual send-button list) */
.quick-reply-card h3 {
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.quick-reply-list {
  gap: 8px;
}
.quick-reply-row {
  padding: 12px;
  gap: 10px;
  border-radius: 12px;
  background: #f4f9ff;
  border-color: #d7e7f8;
}
.quick-reply-text {
  color: #14365f;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.quick-send-btn {
  min-height: 34px;
  padding: 0 16px;
  color: #1d4ed8;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}
.quick-send-btn:hover {
  background: #c7ddfd;
  border-color: #9ec5fb;
}
.quick-delete-btn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
}
/* the send button stays visible; only delete waits for hover */
@media (hover: hover) and (pointer: fine) {
  .quick-reply-row .quick-send-btn {
    opacity: 1;
  }
}

/* Explanation under the restore code */
.info-hint {
  margin: 8px 0 0;
  padding: 8px 10px;
  color: #5b6b80;
  background: #f4f8fd;
  border: 1px solid #e2ebf6;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.6;
}
.info-hint b {
  color: #31577f;
  font-weight: 800;
}

/* Notice bar in error state (e.g. dead member link) */
.notice-bar.error {
  color: #b42318;
  background: #fff5f4;
  border-bottom-color: #ffd5d0;
}
.notice-bar.error .notice-icon {
  color: #b42318;
  border-color: #f2a9a1;
}

/* Account remaining time chip */
.account-remaining {
  flex: 0 0 auto;
  padding: 6px 10px;
  color: #15803d;
  background: #effcf3;
  border: 1px solid #bce9c9;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.account-remaining.warn {
  color: #b45309;
  background: #fff8e6;
  border-color: #fcd9a4;
}
.account-remaining.expired {
  color: #b42318;
  background: #fff5f4;
  border-color: #ffd5d0;
}

@media(max-width: 680px) {
  .account-remaining {
    font-size: 11px;
    padding: 5px 8px;
  }
}

/* Re-rendered (existing) messages must not replay the entrance animation */
.message.no-anim {
  animation: none !important;
}

/* 备用链接管理 */
.qr-link-input { width:100%; min-height:36px; padding:8px 10px; color:#172033; background:#fff; border:1px solid #d8e2ef; border-radius:9px; outline:none; font-size:12px; }
.qr-link-input:focus { border-color:#91c1ff; box-shadow:0 0 0 3px rgba(22,119,255,.09); }
.qr-link-list { display:grid; gap:6px; margin-top:10px; max-height:190px; overflow:auto; }
.qr-link-empty { margin:0; color:#8a9bb0; font-size:11px; line-height:1.6; }
.qr-link-item { display:flex; align-items:center; gap:8px; padding:7px 9px; background:#f7fbff; border:1px solid #e2edf9; border-radius:9px; font-size:11px; color:#365070; }
.qr-link-item span { flex:1; min-width:0; word-break:break-all; }
.qr-link-item button { flex:none; padding:3px 9px; color:#c2413a; background:#fff5f4; border:1px solid #f0c8c4; border-radius:6px; font-size:11px; font-weight:700; cursor:pointer; }
.qr-link-item button:hover { background:#ffe9e7; }
/* 快捷回复：图片功能 */
.quick-reply-editor .quick-image-btn { background:#eef5ff; color:#0f65e8; border-color:#cfe0f8; }
.quick-reply-editor .quick-image-btn:hover { background:#e2eefe; }
.quick-reply-thumb { width:64px; height:64px; flex:none; object-fit:cover; border:1px solid #dbe7f5; border-radius:10px; cursor:pointer; background:#fff; }
.quick-reply-thumb:hover { border-color:#91c1ff; }
.quick-reply-row.is-image { align-items:center; }
.quick-reply-row.is-image .quick-reply-text { flex:1; min-width:0; color:#5b6b80; font-size:12px; }
/* 表情：跳动动画（类似微信动图表情） */
@keyframes emoji-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-5px) scale(1.16) rotate(-4deg); }
  70% { transform: translateY(0) scale(0.96) rotate(3deg); }
}
@keyframes emoji-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* 表情栏（微信风格：平时不动，点按才有反馈） */
.emoji-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 2px;
  max-height: 190px;
  overflow-y: auto;
  padding: 8px 6px;
  margin: 0 0 8px;
  background: #f7f8fa;
  border: 1px solid #eceef2;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
  animation: emoji-panel-in .18s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes emoji-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.emoji-panel button {
  padding: 6px 0;
  font-size: 20px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  animation: none;
  transition: background-color .12s ease, transform .12s ease;
}
.emoji-panel button:hover { background: #e9edf2; transform: none; animation: none; }
.emoji-panel button:active { background: #dde3ea; transform: scale(.88); animation: none; }

/* 聊天里发送的纯表情：放大 + 轻微起伏（像微信动图表情，不转圈） */
.emoji-text { font-size:34px; line-height:1.45; letter-spacing:2px; }
.emoji-text .anim-emoji { display:inline-block; animation:emoji-soft 1.6s ease-in-out infinite; will-change:transform; }
@keyframes emoji-soft {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-4px) scale(1.07); }
  70% { transform: translateY(-1px) scale(1.02); }
}

@media(max-width:900px){ .emoji-panel { grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); max-height:170px; } }
/* 访客页：安全会话徽标 */
.secure-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; color:#15803d; background:#effcf3; border:1px solid #bce9c9; border-radius:999px; font-size:12px; font-weight:750; white-space:nowrap; user-select:none; }
.secure-check { display:grid; place-items:center; width:16px; height:16px; color:#fff; background:#10b981; border-radius:50%; font-size:11px; font-weight:900; line-height:1; animation:secure-breathe 2.4s ease-in-out infinite; }
@keyframes secure-breathe {
  0%, 100% { box-shadow:0 0 0 0 rgba(16,185,129,.45); }
  50% { box-shadow:0 0 0 5px rgba(16,185,129,0); }
}
@media(max-width:600px){ .secure-pill { padding:5px 9px; font-size:11px; } }
/* ================= 客服昵称输入框：移到左上角并做得醒目 ================= */
.agent-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}
.agent-name-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  color: #1d6fd0;
  background: #eaf3ff;
  border: 1px solid #b9d7ff;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.agent-name-field > span { display: inline !important; }
.agent-name-field input {
  width: 118px;
  padding: 5px 9px;
  color: #12263f;
  background: #fff;
  border: 1px solid #8fc2ff;
  border-radius: 8px;
  outline: none;
  font-size: 13px;
  font-weight: 700;
}
.agent-name-field input::placeholder { color: #9db4cd; font-weight: 500; }
.agent-name-field input:focus {
  border-color: #2f86e6;
  box-shadow: 0 0 0 3px rgba(47,134,230,.18);
}
@media (max-width: 900px) {
  .agent-header-left { width: 100%; gap: 10px; justify-content: space-between; }
  .agent-name-field { padding: 5px 8px; }
  .agent-name-field input { width: 96px; font-size: 12px; }
}

/* ================= 快捷回复：编辑器统一 + 图片可带文字 ================= */
.quick-reply-card .quick-reply-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background: #f2f8ff;
  border: 1px solid #d9e7f8;
  border-radius: 12px;
}
.quick-reply-card .quick-reply-editor #quickReplyInput {
  grid-column: 1 / -1;
  flex: none;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  color: #14365f;
  background: #fff;
  border: 1px solid #cfdff1;
  border-radius: 10px;
  outline: none;
  font-size: 13px;
  font-weight: 650;
}
.quick-reply-card .quick-reply-editor #quickReplyInput::placeholder {
  color: #93a8c0;
  font-weight: 500;
}
.quick-reply-card .quick-reply-editor #quickReplyInput:focus {
  border-color: #6faefc;
  box-shadow: 0 0 0 3px rgba(47,134,230,.14);
}
.quick-reply-card .quick-reply-editor button {
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.quick-reply-card .quick-reply-editor #addQuickReplyBtn {
  color: #fff;
  background: linear-gradient(180deg, #3f8df6, #1f6fe0);
  border: 1px solid #1f6fe0;
  box-shadow: 0 2px 7px rgba(31,111,224,.26);
}
.quick-reply-card .quick-reply-editor #addQuickReplyBtn:hover {
  background: linear-gradient(180deg, #4f98f8, #2a78e6);
}
.quick-reply-card .quick-reply-editor .quick-image-btn {
  color: #1f6fe0;
  background: #fff;
  border: 1px solid #9cc4f5;
  box-shadow: 0 2px 7px rgba(31,111,224,.10);
}
.quick-reply-card .quick-reply-editor .quick-image-btn:hover {
  background: #e8f2ff;
  border-color: #6faefc;
}
.quick-reply-row.is-image .quick-reply-text {
  color: #14365f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ============ 访客行内操作条：备注 / 声音开关 / 清除消息 / 封禁用户 ============ */
.session-item { cursor: pointer; }
.session-item:focus-visible { outline: 2px solid #8fc2ff; outline-offset: -2px; }

.session-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #dce8f6;
}

.session-note-input {
  width: 64px;
  height: 27px;
  padding: 0 8px;
  color: #8a5a00;
  background: #fffaf0;
  border: 1px solid #f0d6a4;
  border-radius: 8px;
  outline: none;
  font-size: 12px;
  font-weight: 700;
}
.session-note-input::placeholder { color: #bda169; font-weight: 500; }
.session-note-input:focus {
  background: #fff;
  border-color: #e0ac4a;
  box-shadow: 0 0 0 3px rgba(224, 172, 74, .16);
}

.session-act-btn {
  flex: 0 0 auto;
  height: 27px;
  padding: 0 9px;
  color: #1f5fd0;
  background: #eaf3ff;
  border: 1px solid #c9e0fb;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.session-act-btn:hover { background: #dbeafd; border-color: #a9cdf8; }
.session-act-btn.off { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.session-act-btn.danger { color: #c0392b; background: #fff3f1; border-color: #f6cfc8; }
.session-act-btn.danger:hover { background: #ffe7e2; }
.session-act-btn.danger.unban { color: #15803d; background: #eefcf3; border-color: #bce9c9; }
.session-act-btn.danger.unban:hover { background: #e2f9ea; }

@media (max-width: 420px) {
  .session-actions { flex-wrap: wrap; }
  .session-note-input { flex: 1 1 60px; }
}

/* 聊天顶部：访客名字 + 备注小标签 */
.note-visitor-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  color: #8a5a00;
  background: #fff6e3;
  border: 1px solid #f0d6a4;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

/* 访客行变高后，状态圆点固定在第一行旁边 */
.session-item > .visitor-badge-wrap {
  align-self: flex-start;
  margin-top: 5px;
}

/* 备注小标签：跟在昵称后面（点一下就能改） */
.session-note-input {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 9px;
  color: #b45309;
  background: #fff8ec;
  border: 1px dashed #ecc98f;
  border-radius: 999px;
  outline: none;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  transition: border-color .14s ease, background .14s ease;
}
.session-note-input.filled {
  color: #d9480f;
  background: #fff6e5;
  border: 1px solid #f2d19a;
}
.session-note-input::placeholder { color: #c0a476; font-weight: 600; }
.session-note-input:focus {
  background: #fff;
  border-style: solid;
  border-color: #e0ac4a;
  box-shadow: 0 0 0 3px rgba(224, 172, 74, .16);
}

/* 声音开关：只显示图标 */
.session-act-btn.icon-only {
  width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.session-act-btn.icon-only svg { display: block; }

/* ============ 访客行操作：统一的小胶囊按钮（图标 + 文字） ============ */
.session-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #eaf1f9;
}
.session-act-btn {
  flex: 0 0 auto;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  color: #35507a;
  background: #fff;
  border: 1px solid #dce8f6;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.session-act-btn > svg { flex: 0 0 auto; display: block; }
.session-act-btn > span { display: block; }
.session-act-btn:hover { color: #1f5fd0; background: #f3f8ff; border-color: #bcd8fa; }
.session-act-btn.off { color: #93a3b6; background: #f8fafc; border-color: #e7edf4; }
.session-act-btn.off:hover { color: #64748b; background: #f1f5f9; border-color: #dde5ee; }
.session-act-btn.danger { color: #c0392b; background: #fffdfd; border-color: #f2d5d0; }
.session-act-btn.danger:hover { color: #b42318; background: #fff2f0; border-color: #e9b5ac; }
.session-act-btn.danger.unban { color: #15803d; background: #fdfffe; border-color: #cbe8d5; }
.session-act-btn.danger.unban:hover { color: #15803d; background: #eefcf3; border-color: #a9dcbb; }

/* ============ 访客行：按钮与「在线/时间」同一排 ============ */
.session-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eaf1f9;
}
.session-action-row .session-actions {
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  gap: 5px;
}
.session-action-row .session-act-btn { padding: 0 8px; }
.session-action-row .session-right { flex: 0 0 auto; gap: 4px; }
.session-typing-text {
  color: #16a34a;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  animation: typing-blink 1.3s ease-in-out infinite;
}
@keyframes typing-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@media (max-width: 400px) {
  .session-action-row { flex-wrap: wrap; row-gap: 6px; }
}

/* ============ 聊天顶部：访客昵称 + 备注（排版优化） ============ */
.visitor-note-bar {
  gap: 12px;
  padding: 10px 18px;
}
.note-visitor-name {
  flex: 0 1 auto;
  max-width: 240px;
  margin: 0;
  padding: 0 14px 0 0;
  overflow: hidden;
  color: #4c1d95;
  border-right: 1px solid #e6d7b0;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: .03em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-visitor-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 11px;
  color: #b45309;
  background: #fff6e5;
  border: 1px solid #f0cf95;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(180, 83, 9, .08);
}
.note-visitor-tag .note-tag-label {
  color: #bb8b41;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
}
.note-visitor-tag b { font-weight: 850; }
@media (max-width: 480px) {
  .note-visitor-name { max-width: 130px; font-size: 15px; }
}

/* ============ 聊天顶部：访客 ● 昵称 │ 地区  备注 ============ */
.visitor-note-bar {
  gap: 9px;
  padding: 10px 18px;
  flex-wrap: wrap;
  row-gap: 6px;
}
.note-visitor-label {
  flex: 0 0 auto;
  padding: 3px 9px;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.note-visitor-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .16);
}
.note-visitor-dot.offline {
  background: #c4cfdc;
  box-shadow: 0 0 0 3px rgba(196, 207, 220, .18);
}
.note-visitor-name {
  flex: 0 1 auto;
  max-width: 200px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #4c1d95;
  border-right: 0;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: .03em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-visitor-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 15px;
  background: #e0d3b0;
}
.note-visitor-address {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #476b96;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .note-visitor-name { max-width: 120px; font-size: 15px; }
  .note-visitor-address { font-size: 12px; }
}

/* ============ 聊天顶部：干净的访客信息条 ============ */
.visitor-note-bar {
  gap: 10px;
  padding: 11px 18px;
  background: #fbfcfe;
  border-bottom: 1px solid #eef2f7;
  flex-wrap: wrap;
  row-gap: 6px;
}
.note-visitor-label {
  flex: 0 0 auto;
  padding: 0;
  color: #9aa7b8;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}
.note-visitor-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: none;
}
.note-visitor-dot.offline {
  background: #cbd5e1;
  box-shadow: none;
}
.note-visitor-name {
  flex: 0 1 auto;
  max-width: 220px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #3730a3;
  border-right: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-visitor-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 13px;
  background: #e2e8f0;
}
.note-visitor-address {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .note-visitor-name { max-width: 130px; font-size: 14px; }
  .note-visitor-address { font-size: 12px; }
}

/* ============ 聊天顶部：按模板排版【访客】● 昵称 - 地区 ============ */
.visitor-note-bar {
  gap: 10px;
  padding: 11px 18px;
  background: #fbfcfe;
  border-bottom: 1px solid #eef2f7;
  flex-wrap: wrap;
  row-gap: 6px;
}
.note-visitor-label {
  flex: 0 0 auto;
  padding: 3px 9px;
  color: #fff;
  background: #f4511e;
  border: 0;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.35;
}
.note-visitor-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2196f3;
  box-shadow: none;
}
.note-visitor-dot.offline {
  background: #cbd5e1;
  box-shadow: none;
}
.note-visitor-name {
  flex: 0 1 auto;
  max-width: 240px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #303133;
  border-right: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-visitor-divider {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  background: none;
  color: #c0c4cc;
  font-size: 13px;
  font-weight: 700;
}
.note-visitor-address {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #303133;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .note-visitor-name { max-width: 140px; font-size: 14px; }
  .note-visitor-address { font-size: 13px; }
}

/* ================= 客服工作台整体优化（视觉统一版） ================= */

/* 外壳：更柔和的边框和阴影 */
.agent-shell {
  background: #fff;
  border: 1px solid #eaeff6;
  box-shadow: 0 18px 40px rgba(23, 43, 77, .08);
}
.agent-header {
  min-height: 68px;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid #eef2f7;
}

/* ---------- 左侧会话栏 ---------- */
.session-sidebar {
  background: #fff;
  border-right: 1px solid #eef2f7;
}
.sidebar-heading { padding: 16px 14px 10px; gap: 8px; }
.sidebar-heading > span:first-child {
  color: #1e293b;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
}
.sidebar-heading .count-badge {
  margin-right: auto;
  color: #2563eb;
  background: #eaf3ff;
  font-weight: 800;
}
.sidebar-heading .mini-soft-btn {
  min-height: 26px;
  padding: 3px 9px;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e8eef5;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.sidebar-heading .mini-soft-btn:hover {
  color: #b42318;
  background: #fff5f4;
  border-color: #f5cfc9;
}
.sidebar-search { padding: 4px 14px 10px; }
.sidebar-search input {
  min-height: 36px;
  padding: 0 12px;
  color: #1e293b;
  background: #f8fafc;
  border: 1px solid #e8eef5;
  border-radius: 10px;
  font-size: 12.5px;
}
.sidebar-search input:focus {
  background: #fff;
  border-color: #9ec9ff;
  box-shadow: 0 0 0 3px rgba(47, 134, 230, .12);
}

/* 消息提醒：改成软开关 */
.notify-bar { padding: 0 14px 10px; gap: 8px; }
.notify-btn {
  flex: 1;
  height: 34px;
  color: #15803d;
  background: #eefcf3;
  border: 1px solid #c7ecd5;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}
.notify-btn:hover { background: #e2f8ea; }
.notify-btn.off { color: #64748b; background: #f4f6f9; border-color: #e6ebf1; }
.notify-btn.test-btn {
  flex: 0 0 56px;
  color: #475569;
  background: #fff;
  border: 1px solid #e6ebf1;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.notify-btn.test-btn:hover { color: #1f5fd0; background: #f3f8ff; border-color: #cfe0fb; }

/* 访客进入自动回复：改成浅色卡片 */
.auto-reply-settings {
  margin: 0 14px 10px;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}
.auto-reply-settings summary {
  padding: 10px 12px;
  color: #334155;
  background: #fbfcfe;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0;
}
.auto-reply-settings summary::before {
  width: 7px;
  height: 7px;
  margin-right: 8px;
  vertical-align: 1px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
}
.auto-reply-settings summary::after {
  color: #94a3b8;
  font-size: 16px;
  font-weight: 700;
}
.auto-reply-settings summary:hover { background: #f3f8ff; filter: none; }
.auto-reply-settings[open] summary {
  background: #f3f8ff;
  border-bottom: 1px solid #e8eef5;
}
.auto-reply-body { padding: 12px; }
.auto-reply-toggle { margin-bottom: 8px; color: #475569; font-size: 12px; }
.auto-reply-body textarea {
  background: #f8fafc;
  border: 1px solid #e8eef5;
  border-radius: 10px;
  font-size: 12.5px;
}

/* ---------- 中间聊天区 ---------- */
#agentMessageScroll { background: #f8fafc; }
#agentMessageScroll .history-start { color: #9aa7b8; }
#agentComposer {
  margin: 0;
  padding: 12px 16px 10px;
  background: #fff;
  border-top: 1px solid #eef2f7;
}

/* ---------- 右侧信息栏 ---------- */
.agent-info-panel {
  padding: 14px;
  background: #fff;
  border-left: 1px solid #eef2f7;
}
.info-card,
.quick-reply-card {
  padding: 14px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid #e9eff7;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.info-card h3,
.quick-reply-card h3 {
  margin: 0 0 12px;
  color: #1e293b;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
}
.info-row strong { color: #1e293b; font-weight: 750; }
.info-row > span { color: #94a3b8; font-weight: 700; }

/* ==================== 客服工作台 · 高级质感皮肤 ==================== */
/* 只作用于 .agent-page（工作台），访客页不受影响 */

/* 画布：两处极淡的光晕 + 冷调渐变，让白色面板浮起来 */
.agent-page {
  padding: 18px;
  background:
    radial-gradient(1100px 520px at 8% -12%, #eaf2ff 0%, rgba(234, 242, 255, 0) 62%),
    radial-gradient(900px 460px at 102% -6%, #eafaf4 0%, rgba(234, 250, 244, 0) 58%),
    linear-gradient(180deg, #f6f8fc 0%, #eef2f8 100%);
}

/* 外壳：多层柔和阴影 */
.agent-page .agent-shell {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 14px 34px rgba(15, 23, 42, .07),
    0 44px 90px -46px rgba(15, 23, 42, .20);
}

/* 顶栏 */
.agent-page .agent-header {
  min-height: 72px;
  padding: 14px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fdfeff 100%);
  border-bottom: 1px solid #eef2f7;
}
.agent-page .brand-mark {
  width: 40px;
  height: 40px;
  background: linear-gradient(150deg, #0f766e 0%, #10b981 100%);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(13, 148, 136, .26), inset 0 1px 0 rgba(255, 255, 255, .35);
  font-size: 17px;
}
.agent-page .brand-title { color: #0f172a; font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.agent-page .brand-subtitle { color: #94a3b8; font-size: 11.5px; letter-spacing: .02em; }

/* 顶栏按钮：白底细边，更精致 */
.agent-page .ghost-btn {
  min-height: 32px;
  padding: 6px 12px;
  color: #475569;
  background: #fff;
  border: 1px solid #e6ecf4;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.agent-page .ghost-btn:hover {
  color: #1d4ed8;
  background: #f5f9ff;
  border-color: #cddffa;
  box-shadow: 0 3px 10px rgba(37, 99, 235, .12);
}
.agent-page .ghost-btn.danger-ghost { color: #b42318; border-color: #f4d3ce; }
.agent-page .ghost-btn.danger-ghost:hover { background: #fff5f4; border-color: #eeb5ac; color: #912018; }
.agent-page .status-pill {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 750;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* 侧栏 */
.agent-page .session-sidebar {
  background: #fcfdff;
  border-right: 1px solid #eef2f7;
}

/* 会话卡片：选中时像被"抬起" */
.agent-page .session-item {
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.agent-page .session-item:hover { background: #f7faff; border-color: #eaf1fb; }
.agent-page .session-item.active {
  background: linear-gradient(180deg, #f4f8ff 0%, #eef4ff 100%);
  border-color: #cfe0fb;
  box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .35);
}

/* 聊天区 */
.agent-page #agentMessageScroll { background: #f7f9fc; }
.agent-page .message.agent .bubble {
  color: #1e293b;
  background: #fff;
  border: 1px solid #e9eef6;
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
}
.agent-page .message.user .bubble {
  background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .55);
}

/* 输入区 */
.agent-page #agentComposer {
  padding: 14px 18px 10px;
  background: #fff;
  border-top: 1px solid #eef2f7;
}
.agent-page #agentComposer textarea {
  background: #f7f9fc;
  border: 1px solid #e6ecf4;
  border-radius: 12px;
}
.agent-page #agentComposer textarea:focus {
  background: #fff;
  border-color: #bcd3f8;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}
.agent-page .send-btn {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .65);
}
.agent-page .send-btn:hover { filter: brightness(1.04); }
.agent-page .icon-btn {
  color: #64748b;
  background: #f7f9fc;
  border: 1px solid #e6ecf4;
  border-radius: 12px;
}
.agent-page .icon-btn:hover { color: #2563eb; background: #f1f6ff; border-color: #cfe0fb; }

/* 右侧信息卡 */
.agent-page .agent-info-panel {
  background: #fcfdff;
  border-left: 1px solid #eef2f7;
}
.agent-page .info-card,
.agent-page .quick-reply-card {
  background: #fff;
  border: 1px solid #edf1f7;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -18px rgba(15, 23, 42, .35);
}
.agent-page .info-card h3,
.agent-page .quick-reply-card h3 {
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .02em;
}
.agent-page .info-row + .info-row { border-top: 1px solid #f5f8fc; }

/* 细滚动条 */
.agent-page ::-webkit-scrollbar { width: 10px; height: 10px; }
.agent-page ::-webkit-scrollbar-track { background: transparent; }
.agent-page ::-webkit-scrollbar-thumb {
  background: #dbe3ee;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
.agent-page ::-webkit-scrollbar-thumb:hover { background: #c3cddc; background-clip: content-box; border: 3px solid transparent; }

/* 顶栏「客服昵称」：与其它按钮统一的质感 */
.agent-page .agent-name-field {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #e6ecf4;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.agent-page .agent-name-field > span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.agent-page .agent-name-field input {
  width: 96px;
  height: 26px;
  padding: 0 8px;
  color: #0f172a;
  background: #f7f9fc;
  border: 1px solid #e6ecf4;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
}
.agent-page .agent-name-field input:focus {
  background: #fff;
  border-color: #bcd3f8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

/* ==================== 图片版 3D 表情（黄脸） ==================== */
.emoji-panel button { padding: 3px 0; }
.emoji-panel img.emoji-face {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  pointer-events: none;
}
.emoji-panel button:hover { background: #e9edf2; }
.emoji-panel button:active { transform: scale(.9); }
.emoji-text .anim-emoji { line-height: 0; vertical-align: middle; }
.emoji-text img.emoji-pic {
  display: block;
  width: 38px;
  height: 38px;
}

/* 表情再放大一点，更像微信那种大小 */
.emoji-panel { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); padding: 8px; }
.emoji-panel button { padding: 4px 0; }
.emoji-panel img.emoji-face { width: 34px; height: 34px; }
.emoji-text img.emoji-pic { width: 42px; height: 42px; }

/* 离线时长：放在地区后面，避免和按钮挤在一起重叠 */
.visitor-offline-tag {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 1px 8px;
  color: #8a97a8;
  background: #f1f5f9;
  border: 1px solid #e6ebf1;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
/* 操作条放不下就换行，绝不重叠 */
.session-action-row { flex-wrap: wrap; row-gap: 6px; }
.session-action-row .session-right { margin-left: auto; }

/* ===== 访客行（第 3 版）：状态统一放地区后面，操作只留一个图标 ===== */
.agent-page .visitor-status-tag {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.agent-page .visitor-status-tag.online {
  color: #15803d;
  background: #eefcf3;
  border: 1px solid #c7ecd5;
}
.agent-page .visitor-status-tag.offline {
  color: #8a97a8;
  background: #f1f5f9;
  border: 1px solid #e6ebf1;
}
.agent-page .session-ban-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c0392b;
  background: #fff;
  border: 1px solid #f2d5d0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.agent-page .session-ban-btn:hover { background: #fff2f0; border-color: #e9b5ac; }
.agent-page .session-ban-btn.unban { color: #15803d; border-color: #cbe8d5; }
.agent-page .session-ban-btn.unban:hover { background: #eefcf3; border-color: #a9dcbb; }
.agent-page .session-ban-btn svg { display: block; }

/* 第 4 版：封禁图标跟在状态后面，第二行只留时间 */
.agent-page .visitor-identity { gap: 6px; }
.agent-page .visitor-identity .session-ban-btn {
  flex: 0 0 auto;
  width: 26px;
  height: 24px;
  margin-left: 2px;
  border-radius: 7px;
}
.agent-page .session-action-row {
  margin-top: 3px;
  padding-top: 0;
  border-top: 0;
  justify-content: flex-end;
}
.agent-page .session-action-row .session-actions { display: none; }

/* 状态后面的封禁按钮：去掉旧的内边距，保证和状态同一行居中对齐 */
.agent-page .visitor-identity .session-actions {
  margin: 0;
  padding: 0;
  border: 0;
  gap: 0;
  flex: 0 0 auto;
}

/* ==================== 审美审计后的统一化（只作用于工作台） ==================== */
/* 字体：中文优先 + 数字等宽，减少长时间盯屏的视觉疲劳 */
.agent-page {
  --font: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ink-1: #0f172a;
  --ink-2: #334155;
  --ink-3: #64748b;
  --ink-4: #94a3b8;
  --line: #e9eef5;
  --surface-2: #f8fafc;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-soft: #eff4ff;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
.agent-page .session-time,
.agent-page .session-status-text,
.agent-page .account-remaining,
.agent-page .count-badge { font-variant-numeric: tabular-nums; }

/* 文字层级：标题最深最粗，次要信息统一灰阶 */
.agent-page .brand-title { color: var(--ink-1); font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.agent-page .brand-subtitle { color: var(--ink-4); font-size: 11.5px; }
.agent-page .sidebar-heading > span:first-child { color: var(--ink-1); font-size: 14px; font-weight: 800; }
.agent-page .info-card h3,
.agent-page .quick-reply-card h3 { color: var(--ink-1); font-size: 13.5px; font-weight: 800; }
.agent-page .visitor-nickname { color: var(--ink-1); font-weight: 800; }
.agent-page .visitor-ip-value { color: var(--ink-4); font-weight: 650; }

/* 主色统一成一套蓝（原来有 3 种蓝混用） */
.agent-page .count-badge { color: var(--accent); background: var(--accent-soft); }
.agent-page .ghost-btn:hover { color: var(--accent-dark); border-color: #cddffa; }
.agent-page .send-btn {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 6px 14px -8px rgba(37, 99, 235, .5);
}
.agent-page .session-item.active {
  background: linear-gradient(180deg, #f6f9ff 0%, #eef4ff 100%);
  border-color: #d3e2fb;
  box-shadow: 0 6px 16px -10px rgba(37, 99, 235, .35);
}

/* 间距统一到 4px 节奏 */
.agent-page .sidebar-heading { padding: 14px 14px 8px; }
.agent-page .sidebar-search { padding: 2px 14px 10px; }
.agent-page .notify-bar { padding: 0 14px 10px; }
.agent-page .auto-reply-settings { margin: 0 14px 10px; }
.agent-page .session-list { padding: 6px 10px 10px; }
.agent-page .session-item { padding: 11px 12px; }

/* 每行不再放重复的状态圆点（状态胶囊已经说明了） */
.agent-page .visitor-badge-wrap { display: none; }

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .agent-page *,
  .agent-page *::before,
  .agent-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* 自己发的消息：时间+名字靠右，跟蓝色气泡对齐（原来被甩到最左边） */
.message.user .message-meta { text-align: right; }
.message.agent .message-meta { text-align: left; }

/* 系统表情（[微笑] 那套）*/
.emoji-panel img.emoji-face { width: 34px; height: 34px; }
img.emoji-inline {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 1px;
  vertical-align: -5px;
}
.emoji-text img.emoji-pic { width: 42px; height: 42px; }

/* 备注：没写过就一点也不显示（选中也不显示）；桌面端鼠标移上去才露出输入框，手机端选中时露出 */
.agent-page .session-note-input:not(.filled) { display: none; }
@media (hover: hover) and (pointer: fine) {
  .agent-page .session-item:hover .session-note-input:not(.filled) { display: inline-block; }
}
@media (hover: none), (pointer: coarse) {
  .agent-page .session-item.active .session-note-input:not(.filled) { display: inline-block; }
}
.agent-page .session-note-input:focus { display: inline-block !important; }

/* 顶部备注：去掉「备注」两个字和橙色胶囊，跟旁边文字同一套颜色字体 */
.agent-page .note-visitor-tag,
.note-visitor-tag {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: #303133;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}
.note-visitor-tag .note-tag-label { display: none; }
.note-visitor-tag b { font-weight: 700; }

/* 「访客」旁边的状态点：在线用蓝色（跟图片一致），离线灰 */
.note-visitor-dot {
  width: 10px;
  height: 10px;
  background: #1e88e5;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, .16);
}
.note-visitor-dot.offline {
  background: #c4cfdc;
  box-shadow: 0 0 0 3px rgba(196, 207, 220, .18);
}


/* 「访客」旁边的状态点：在线用亮蓝色（与用户给的参考图一致），离线灰 */
.note-visitor-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0a8efe;
  box-shadow: 0 0 0 3px rgba(10, 142, 254, .18);
}
.note-visitor-dot.offline {
  background: #c4cfdc;
  box-shadow: 0 0 0 3px rgba(196, 207, 220, .18);
}


/* 访客昵称恢复以前那种紫色：比深灰更醒目，也和橙色备注标签区分开 */
.agent-page .visitor-nickname {
  color: #5b21b6;
}


/* ================= 访客行 5 个模块统一成一套「胶囊」节奏（备注 / 地区 / 状态 / 封禁） ================= */
/* 1) 整行：统一间距，窄屏自动换行，不再挤压 */
.agent-page .visitor-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
}
/* 2) 昵称：紫色标题，过长时省略 */
.agent-page .visitor-identity .visitor-nickname {
  flex: 0 1 auto;
  max-width: 132px;
  overflow: hidden;
  color: #5b21b6;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 3) 隐藏旧的「·」分隔符：每一项已经是独立胶囊，不需要它 */
.agent-page .visitor-identity .visitor-separator { display: none; }
/* 4) 备注 / 地区 / 状态：同一高度、同一圆角、同一字号 */
.agent-page .visitor-identity .session-note-input,
.agent-page .visitor-identity .visitor-ip-value,
.agent-page .visitor-identity .visitor-status-tag {
  flex: 0 0 auto;
  height: 22px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}
.agent-page .visitor-identity .visitor-ip-value,
.agent-page .visitor-identity .visitor-status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 备注：橙色 */
.agent-page .visitor-identity .session-note-input { text-align: center; }
.agent-page .visitor-identity .session-note-input.filled {
  color: #c2410c;
  background: #fff6e8;
  border-color: #f4d7a6;
}
.agent-page .visitor-identity .session-note-input::placeholder { color: #c0a476; font-weight: 600; }
/* 地区：浅灰蓝 */
.agent-page .visitor-identity .visitor-ip-value {
  max-width: 156px;
  overflow: hidden;
  color: #64748b;
  background: #f4f7fb;
  border-color: #e6ecf4;
  font-weight: 650;
  text-overflow: ellipsis;
}
/* 状态：在线绿、离线灰 */
.agent-page .visitor-identity .visitor-status-tag { margin-left: 0; padding: 0 9px; }
.agent-page .visitor-identity .visitor-status-tag.online { color: #15803d; background: #eefcf3; border-color: #c7ecd5; }
.agent-page .visitor-identity .visitor-status-tag.offline { color: #8a97a8; background: #f4f7fb; border-color: #e6ecf4; }
/* 5) 封禁：和胶囊同高的圆形图标按钮 */
.agent-page .visitor-identity .session-actions { margin: 0; padding: 0; border: 0; gap: 0; }
.agent-page .visitor-identity .session-ban-btn {
  width: 22px;
  height: 22px;
  margin-left: 0;
  border-radius: 999px;
  color: #d1493c;
  background: #fff;
  border: 1px solid #f2d5d0;
}
.agent-page .visitor-identity .session-ban-btn svg { width: 13px; height: 13px; }
.agent-page .visitor-identity .session-ban-btn.unban { color: #15803d; border-color: #cbe8d5; }
/* 窄屏：稍收紧，避免换行后太散 */
@media (max-width: 520px) {
  .agent-page .visitor-identity { gap: 5px; }
  .agent-page .visitor-identity .visitor-ip-value { max-width: 122px; }
}


/* ===== 统一配色：地区 / 离线 用同一个灰；备注 999 / 封禁图标 用同一个暖橙红 ===== */
/* 地区和离线：文字、底色、描边完全一致 */
.agent-page .visitor-identity .visitor-ip-value,
.agent-page .visitor-identity .visitor-status-tag.offline {
  color: #8a97a8;
  background: #f4f7fb;
  border-color: #e6ecf4;
  font-weight: 700;
}
/* 备注和封禁：文字 / 图标颜色一致，描边同色系 */
.agent-page .visitor-identity .session-note-input.filled {
  color: #c2410c;
  background: #fff6e8;
  border-color: #f4d7a6;
}
.agent-page .visitor-identity .session-ban-btn {
  color: #c2410c;
  background: #fff;
  border-color: #f4d7a6;
}
.agent-page .visitor-identity .session-ban-btn:hover {
  color: #9a3412;
  background: #fff6e8;
  border-color: #e9bd83;
}
/* 已封禁时的解封按钮仍是绿色（表示可以恢复），只有这一种状态例外 */
.agent-page .visitor-identity .session-ban-btn.unban {
  color: #15803d;
  background: #fff;
  border-color: #cbe8d5;
}
.agent-page .visitor-identity .session-ban-btn.unban:hover {
  background: #eefcf3;
  border-color: #a9dcbb;
}


/* 封禁图标加一点粗细，让它的颜色看起来和 "999" 一样浓 */
.agent-page .visitor-identity .session-ban-btn svg { width: 14px; height: 14px; }
.agent-page .visitor-identity .session-ban-btn svg path { stroke-width: 2.15; }


/* 解封按钮也统一成和 "999" 一样的橙红（封禁/解封靠图标区分） */
.agent-page .visitor-identity .session-ban-btn.unban,
.agent-page .visitor-identity .session-ban-btn.unban:hover {
  color: #c2410c;
  border-color: #f4d7a6;
}
.agent-page .visitor-identity .session-ban-btn.unban { background: #fff; }
.agent-page .visitor-identity .session-ban-btn.unban:hover { background: #fff6e8; border-color: #e9bd83; }


/* 「已封禁」小标签也跟着统一成同一个橙红，整行不会跳出第二个红色 */
.agent-page .ban-badge {
  color: #c2410c;
  background: #fff6e8;
  border-color: #f4d7a6;
}