/* Shared with the age notice: theme colors, quiet borders and soft surfaces. */
body.pages-suggest-suggest .page-container[data-v-bdef4f12] {
  --message-line: color-mix(in srgb, var(--ds-muted, #7a808a) 14%, transparent);
  --message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5a8.5 8.5 0 0 1-8.5 8.5 9 9 0 0 1-4-.9L3 20.5l1.4-4.7a8.5 8.5 0 1 1 16.1-4.3Z'/%3E%3Cpath d='M8 11.5h.01M12 11.5h.01M16 11.5h.01' stroke-width='2.5'/%3E%3C/svg%3E");
  box-sizing: border-box;
  min-height: calc(100vh - var(--window-bottom, 0px));
  background: radial-gradient(ellipse 100% 300px at 50% 0, var(--ds-glow, #f9eabd), transparent), var(--ds-bg, #f6f8fb);
  color: var(--ds-text, #20242b);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.page-container[data-v-bdef4f12] .header-area {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  height: auto;
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 22px 26px;
}
.page-container[data-v-bdef4f12] .message-heading-copy { min-width: 0; }
.page-container[data-v-bdef4f12] .message-page-title { display: block; color: var(--ds-text, #20242b); font-size: 28px; font-weight: 750; letter-spacing: -.8px; line-height: 1.35; }
.page-container[data-v-bdef4f12] .message-page-subtitle { display: block; margin-top: 8px; color: var(--ds-muted, #7a808a); font-size: 12px; line-height: 1.6; letter-spacing: .5px; }
.page-container[data-v-bdef4f12] .message-heading-icon {
  display: grid;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ds-muted, #7a808a) 12%, transparent);
  border-radius: 17px;
  background: var(--ds-glass, rgba(255,255,255,.62));
  box-shadow: 0 5px 16px rgb(20 28 42 / 3%);
}
.page-container[data-v-bdef4f12] .message-heading-icon::after { width: 25px; height: 25px; background: var(--ds-text, #20242b); -webkit-mask: var(--message-icon) center / contain no-repeat; mask: var(--message-icon) center / contain no-repeat; content: ''; }
.page-container[data-v-bdef4f12] .content-area { box-sizing: border-box; max-width: 560px; margin: 0 auto; padding: 0 18px calc(116px + env(safe-area-inset-bottom, 0px)); }
.page-container[data-v-bdef4f12] .official-tab { gap: 20px; }
.page-container[data-v-bdef4f12] .quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.page-container[data-v-bdef4f12] .quick-card {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  margin: 0;
  padding: 12px 10px;
  overflow: hidden;
  border: 1px solid var(--message-line);
  border-radius: 21px;
  background: var(--ds-surface, #fff);
  box-shadow: 0 8px 24px rgb(20 28 42 / 4%), 0 1px 3px rgb(20 28 42 / 2%);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.page-container[data-v-bdef4f12] .quick-card::after { position: absolute; top: 50%; right: 10px; width: 5px; height: 5px; border-top: 1.5px solid var(--ds-muted, #7a808a); border-right: 1.5px solid var(--ds-muted, #7a808a); content: ''; opacity: .7; transform: translateY(-50%) rotate(45deg); }
.page-container[data-v-bdef4f12] .quick-card:active { transform: scale(.98); box-shadow: 0 2px 8px rgb(20 28 42 / 4%); }
.page-container[data-v-bdef4f12] .quick-card > .uv-icon,
.page-container[data-v-bdef4f12] .quick-icon > .uv-icon { display: none; }
.page-container[data-v-bdef4f12] .quick-icon { display: grid; flex: 0 0 28px; width: 28px; height: 28px; margin: 0 8px 0 0; place-items: center; border: 1px solid color-mix(in srgb, var(--ds-accent, #e4b525) 18%, transparent); border-radius: 10px; background: var(--ds-soft, #fff5ce); }
.page-container[data-v-bdef4f12] .notice-icon {
  --quick-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4M12 2V1'/%3E%3C/svg%3E");
}
.page-container[data-v-bdef4f12] .service-icon {
  --quick-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-2a8 8 0 0 1 16 0v2M4 11H3a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h3v-7ZM20 11h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-3v-7ZM20 18c0 3-3 4-8 4'/%3E%3C/svg%3E");
}
.page-container[data-v-bdef4f12] .quick-icon::after { width: 17px; height: 17px; background: var(--ds-text, #20242b); -webkit-mask: var(--quick-icon) center / contain no-repeat; mask: var(--quick-icon) center / contain no-repeat; content: ''; }
.page-container[data-v-bdef4f12] .quick-info { min-width: 0; padding-right: 8px; }
.page-container[data-v-bdef4f12] .quick-title { display: block; margin: 0 0 3px; color: var(--ds-text, #20242b); font-size: 14px; font-weight: 650; line-height: 20px; letter-spacing: -.2px; }
.page-container[data-v-bdef4f12] .quick-desc { display: block; overflow: hidden; color: var(--ds-muted, #7a808a); font-size: 10px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.page-container[data-v-bdef4f12] .im-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 2px 0; }
.page-container[data-v-bdef4f12] .message-section-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.page-container[data-v-bdef4f12] .message-section-title { color: var(--ds-text, #20242b); font-size: 17px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.page-container[data-v-bdef4f12] .message-section-count { padding: 1px 6px; border: 1px solid var(--message-line); border-radius: 7px; color: var(--ds-muted, #7a808a); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; }
.page-container[data-v-bdef4f12] .im-header-control { position: relative; display: flex; align-items: center; flex: 0 0 152px; box-sizing: border-box; width: 152px; height: 38px; padding: 4px; overflow: hidden; border: 1px solid var(--message-line); border-radius: 12px; background: color-mix(in srgb, var(--ds-surface, #fff) 65%, transparent); }
.page-container[data-v-bdef4f12] .im-header-slider { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 9px; background: var(--ds-text, #20242b); box-shadow: 0 2px 5px rgb(20 28 42 / 12%); transition: transform .28s cubic-bezier(.22,.68,.12,1); }
.page-container[data-v-bdef4f12] .im-header-control.is-all .im-header-slider { transform: translateX(100%); border-radius: 9px; }
.page-container[data-v-bdef4f12] .im-header-option { position: relative; z-index: 1; flex: 1; height: 30px; min-width: 0; padding: 0; color: var(--ds-muted, #7a808a); font-size: 12px; font-weight: 500; line-height: 30px; text-align: center; cursor: pointer; transition: color .2s ease; }
.page-container[data-v-bdef4f12] .im-header-option.active { color: var(--ds-surface, #fff); font-weight: 650; }
.page-container[data-v-bdef4f12] .im-card { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.page-container[data-v-bdef4f12] .im-scroll { flex: none; height: auto; overflow: visible; padding: 0; }
.page-container[data-v-bdef4f12] .im-row { position: relative; box-sizing: border-box; min-height: 90px; margin-bottom: 11px; padding: 16px; border: 1px solid var(--message-line); border-radius: 20px; background: var(--ds-surface, #fff); box-shadow: 0 5px 18px rgb(20 28 42 / 3%); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background-color .18s ease; }
.page-container[data-v-bdef4f12] .im-row:active { transform: scale(.99); background: color-mix(in srgb, var(--ds-soft, #fff5ce) 20%, var(--ds-surface, #fff)); }
.page-container[data-v-bdef4f12] .im-row:last-child { margin-bottom: 0; border: 1px solid var(--message-line); }
.page-container[data-v-bdef4f12] .im-row:has(.im-unread-badge) { border-color: color-mix(in srgb, var(--ds-accent, #e4b525) 28%, var(--message-line)); }
.page-container[data-v-bdef4f12] .im-avatar-wrap { position: relative; flex: 0 0 50px; width: 50px; height: 50px; margin-right: 13px; overflow: visible; }
.page-container[data-v-bdef4f12] .im-avatar { display: block; box-sizing: border-box; width: 50px; height: 50px; flex: 0 0 50px; margin-right: 0; border: 2px solid var(--ds-surface, #fff); border-radius: 4px; background: var(--ds-bg, #f6f8fb); box-shadow: 0 3px 10px rgb(20 28 42 / 8%); }
.page-container[data-v-bdef4f12] .im-body { flex: 1; min-width: 0; }
.page-container[data-v-bdef4f12] .im-line1 { display: flex; align-items: center; justify-content: flex-start; gap: 7px; margin-bottom: 8px; }
.page-container[data-v-bdef4f12] .im-peer-heading { display: flex; flex: 1; align-items: center; gap: 7px; min-width: 0; }
.page-container[data-v-bdef4f12] .im-peer-heading .im-peer { flex: 0 1 auto; min-width: 0; color: var(--ds-text, #20242b); font-size: 15px; font-weight: 650; line-height: 1.4; }
.page-container[data-v-bdef4f12] .im-role-tag { display: inline-flex; flex-shrink: 0; align-items: center; max-width: 60px; padding: 1px 5px; overflow: hidden; border: 1px solid var(--message-line); border-radius: 5px; background: var(--ds-bg, #f6f8fb); color: var(--ds-muted, #7a808a); font-size: 10px; font-weight: 500; line-height: 15px; white-space: nowrap; }
.page-container[data-v-bdef4f12] .im-role-service { border-color: #caecd8; background: #e3f7eb; color: #229153; }
.page-container[data-v-bdef4f12] .im-role-goon { border-color: #f4e4a7; background: #fff3c7; color: #a87500; }
.page-container[data-v-bdef4f12] .im-line2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.page-container[data-v-bdef4f12] .im-preview { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--ds-muted, #7a808a); font-size: 12px; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.page-container[data-v-bdef4f12] .im-time { flex-shrink: 0; margin: 0; color: var(--ds-muted, #7a808a); font-size: 10px; line-height: 1.5; font-variant-numeric: tabular-nums; opacity: .85; }
.page-container[data-v-bdef4f12] .im-line3 { display: none; }
.page-container[data-v-bdef4f12] .im-row .im-avatar-wrap .im-unread-badge { top: -5px; right: -6px; left: auto; min-width: 18px; height: 18px; border: 2px solid var(--ds-surface, #fff); font-size: 10px; box-shadow: none; }
.page-container[data-v-bdef4f12] .im-empty { box-sizing: border-box; min-height: 252px; padding: 38px 18px; border: 1px solid var(--message-line); border-radius: 22px; background: var(--ds-surface, #fff); box-shadow: 0 8px 24px rgb(20 28 42 / 3%); text-align: center; }
.page-container[data-v-bdef4f12] .message-empty-icon { display: grid; width: 64px; height: 64px; margin-bottom: 18px; place-items: center; border: 1px solid color-mix(in srgb, var(--ds-accent, #e4b525) 15%, transparent); border-radius: 21px; background: var(--ds-soft, #fff5ce); }
.page-container[data-v-bdef4f12] .message-empty-icon::after { width: 29px; height: 29px; background: var(--ds-text, #20242b); -webkit-mask: var(--message-icon) center / contain no-repeat; mask: var(--message-icon) center / contain no-repeat; content: ''; opacity: .7; }
.page-container[data-v-bdef4f12] .im-empty-text { display: block; margin: 0; color: var(--ds-text, #20242b); font-size: 15px; font-weight: 650; line-height: 1.6; }
.page-container[data-v-bdef4f12] .message-empty-description { display: block; max-width: 250px; margin-top: 8px; color: var(--ds-muted, #7a808a); font-size: 12px; line-height: 1.8; }
.page-container[data-v-bdef4f12] .im-loading { gap: 18px; }
.page-container[data-v-bdef4f12] .im-spinner { border-color: var(--message-line); border-top-color: var(--ds-accent, #e4b525); }
.page-container[data-v-bdef4f12] .contact-modal { overflow: hidden; border: 1px solid var(--message-line); border-radius: 24px; background: var(--ds-surface, #fff); color: var(--ds-text, #20242b); box-shadow: 0 16px 48px rgb(20 28 42 / 12%); }
.page-container[data-v-bdef4f12] .modal-header { border-bottom-color: var(--message-line); }
.page-container[data-v-bdef4f12] .modal-title,
.page-container[data-v-bdef4f12] .contact-name { color: var(--ds-text, #20242b); }
.page-container[data-v-bdef4f12] .contact-desc { color: var(--ds-muted, #7a808a); }
.page-container[data-v-bdef4f12] .contact-item { border-color: var(--message-line); border-radius: 16px; background: var(--ds-bg, #f6f8fb); }
.page-container[data-v-bdef4f12] .contact-avatar { border-radius: 14px; }
.page-container[data-v-bdef4f12] .modal-btn { border-radius: 13px; background: var(--ds-text, #20242b); color: var(--ds-surface, #fff); box-shadow: none; }
@media (max-width: 360px) {
  .page-container[data-v-bdef4f12] .header-area { padding: 27px 18px 23px; }
  .page-container[data-v-bdef4f12] .content-area { padding-right: 14px; padding-left: 14px; }
  .page-container[data-v-bdef4f12] .message-page-title { font-size: 26px; }
  .page-container[data-v-bdef4f12] .quick-actions { gap: 10px; }
  .page-container[data-v-bdef4f12] .quick-card { min-height: 76px; padding: 12px 10px; }
  .page-container[data-v-bdef4f12] .im-header-control { flex-basis: 140px; width: 140px; }
  .page-container[data-v-bdef4f12] .message-section-title { font-size: 16px; }
  .page-container[data-v-bdef4f12] .im-row { padding: 14px 12px; }
  .page-container[data-v-bdef4f12] .im-avatar-wrap { width: 46px; height: 46px; flex-basis: 46px; margin-right: 10px; }
  .page-container[data-v-bdef4f12] .im-avatar { width: 46px; height: 46px; flex-basis: 46px; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-container[data-v-bdef4f12] .quick-card,
  .page-container[data-v-bdef4f12] .im-row,
  .page-container[data-v-bdef4f12] .im-header-slider,
  .page-container[data-v-bdef4f12] .im-header-option { transition: none; }
}