/* ===== 基础重置 ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #f0f2f5;
  color: #1a1a2e;
  line-height: 1.6;
  min-height: 100vh;
}

/* ===== 容器 ===== */
.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

/* ===== 头部 ===== */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  text-align: center;
  padding: 26px 20px;
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.header p {
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ===== 卡片 ===== */
.card {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* ===== 表单布局 ===== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}

.field .opt {
  font-weight: 400;
  color: #999;
  font-size: 0.78rem;
}

.field select,
.field input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  background: #fff;
  transition: border-color 0.2s;
}

.field select:focus,
.field input:focus {
  border-color: #667eea;
}

.hint {
  display: block;
  font-size: 0.75rem;
  color: #aaa;
  margin-top: 4px;
}

.span-2 {
  grid-column: span 2;
}

/* ===== 操作区 ===== */
.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

/* ===== 按钮 ===== */
.btn {
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: #667eea;
  color: #fff;
}

.btn-primary:hover {
  background: #5a6fd6;
}

#resetBtn {
  background: #eef0f6;
  color: #555;
}

#resetBtn:hover {
  background: #e2e5ef;
}

.quota {
  font-size: 0.78rem;
  color: #888;
  margin-left: auto;
  text-align: right;
}

/* 配额胶囊（剩余可查询行数） */
.quota-pill {
  background: #eef0fb;
  color: #4a62b8;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ===== 按钮加载动画 ===== */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== 结果区 ===== */
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.result-meta {
  font-size: 0.85rem;
  color: #666;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pager-bottom {
  justify-content: center;
  margin-top: 14px;
}

.page-btn {
  padding: 6px 12px;
  border: 1.5px solid #dcdfe8;
  background: #fff;
  border-radius: 7px;
  font-size: 0.82rem;
  color: #555;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.page-btn:hover:not(:disabled) {
  background: #667eea;
  border-color: #667eea;
  color: #fff;
}

.page-btn.active {
  background: #667eea;
  border-color: #667eea;
  color: #fff;
  font-weight: 700;
}

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

.msg-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.placeholder {
  text-align: center;
  color: #999;
  padding: 36px 12px;
  font-size: 0.92rem;
}

.placeholder.error {
  color: #ef4444;
}

/* ===== 消息卡片 ===== */
.msg-card {
  border: 1px solid #eceef4;
  border-left: 4px solid #c8cbe0;
  border-radius: 10px;
  padding: 10px 14px;
  background: #fbfbfe;
}

.msg-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.msg-sender {
  font-weight: 700;
  font-size: 0.92rem;
  color: #3b3f63;
}

.msg-time {
  font-size: 0.76rem;
  color: #9aa0b4;
  margin-left: auto;
  white-space: nowrap;
}

.msg-content {
  font-size: 0.92rem;
  color: #333;
  word-break: break-word;
  white-space: pre-wrap;
}

.muted {
  color: #b6bac9;
  font-size: 0.85rem;
}

.reply-quote {
  display: inline-block;
  background: #eef0fb;
  color: #5a6fd6;
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 0.78rem;
  margin-bottom: 4px;
}

/* ===== 消息类型配色（左边框 + 徽章） ===== */
.type-badge {
  font-size: 0.72rem;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
}

/* 按类型给左边框与徽章着色 */
.type-text     { border-left-color: #8ea8f2; }
.type-refer    { border-left-color: #7f8ff0; }
.type-sticker  { border-left-color: #b58af2; }
.type-img      { border-left-color: #6ec1a8; }
.type-video    { border-left-color: #57b2a0; }
.type-pats     { border-left-color: #e8a87c; }
.type-link     { border-left-color: #5ba0e0; }
.type-file     { border-left-color: #8d9db5; }
.type-misc     { border-left-color: #b0b7c9; }
.type-history  { border-left-color: #c39bd3; }
.type-gift     { border-left-color: #e57373; }
.type-hongbao  { border-left-color: #ef5350; }
.type-charge   { border-left-color: #ffb74d; }
.type-pay      { border-left-color: #ff8a65; }
.type-acceptpay{ border-left-color: #4db6ac; }
.type-cover    { border-left-color: #f06292; }
.type-introduce{ border-left-color: #90a4ae; }
.type-revoke   { border-left-color: #a1887f; }
.type-rename   { border-left-color: #a3a9f0; }
.type-invite   { border-left-color: #7e57c2; }
.type-admin    { border-left-color: #78909c; }
.type-sysmsg   { border-left-color: #b0bec5; }
.type-encrypted{ border-left-color: #90a4ae; }

/* 每个类型徽章的背景色（浅色） */
.type-badge-text     { background: #e8edfb; color: #4a62b8; }
.type-badge-refer    { background: #e6e9fc; color: #5563d8; }
.type-badge-sticker  { background: #f1e8fc; color: #8250c8; }
.type-badge-img      { background: #e3f3ee; color: #2e8b6e; }
.type-badge-video    { background: #dff0ed; color: #2b7d70; }
.type-badge-pats     { background: #fdeee0; color: #b36a2e; }
.type-badge-link     { background: #e2eefb; color: #2f6fb5; }
.type-badge-file     { background: #eaeef4; color: #5d6f8a; }
.type-badge-misc     { background: #eef0f5; color: #7a8299; }
.type-badge-history  { background: #f5ebfa; color: #8e44ad; }
.type-badge-gift     { background: #fdeaea; color: #c0392b; }
.type-badge-hongbao  { background: #fdecec; color: #d32f2f; }
.type-badge-charge   { background: #fff3e0; color: #b26a00; }
.type-badge-pay      { background: #ffe9e2; color: #c2492b; }
.type-badge-acceptpay{ background: #e0f2f0; color: #2b7d70; }
.type-badge-cover    { background: #fce4ec; color: #c2185b; }
.type-badge-introduce{ background: #eceff1; color: #546e7a; }
.type-badge-revoke   { background: #f1e8e4; color: #8d6e63; }
.type-badge-rename   { background: #eaecfd; color: #5c60d0; }
.type-badge-invite   { background: #ede7f6; color: #5e35b1; }
.type-badge-admin    { background: #eceff1; color: #546e7a; }
.type-badge-sysmsg   { background: #eceff1; color: #78909c; }
.type-badge-encrypted{ background: #eceff1; color: #78909c; }

/* ===== 响应式 ===== */
@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .span-2 {
    grid-column: span 1;
  }
  .msg-time {
    margin-left: 0;
    width: 100%;
  }
  .quota {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
}