/* styles_social.css — Contacts, profile, friends, search, settings, sidebar */
/* 扫一扫 */
.scan-container { background: #111 !important; display: flex; flex-direction: column; height: 100%; position: relative; z-index: 10; contain: layout style paint; }
.scan-viewfinder-area{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:0;
}
.scan-box {
  width: 220px; height: 220px;
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  border-radius: var(--radius-xs);
}
.scan-corner{
  position:absolute;
  width:24px;height:24px;
  border-color:var(--brand);
  border-style:solid;
}
.scan-corner-tl{ top:-1px;left:-1px; border-width:3px 0 0 3px; }
.scan-corner-tr{ top:-1px;right:-1px; border-width:3px 3px 0 0; }
.scan-corner-bl{ bottom:-1px;left:-1px; border-width:0 0 3px 3px; }
.scan-corner-br{ bottom:-1px;right:-1px; border-width:0 3px 3px 0; }
.scan-line {
  position: absolute; top: 0; left: 5%; width:90%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand) 30%, var(--brand) 70%, transparent);
  box-shadow: 0 0 12px var(--brand);
  animation: scanMove 2.5s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes scanMove { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(220px); opacity: 0; } }
.scan-hint-text{
  margin-top:20px;
  font-size: var(--font-caption);
  color:rgba(255,255,255,0.6);
  text-align:center;
}
.scan-bottom-actions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  padding:20px 8px 24px;
  background:rgba(0,0,0,0.3);
  flex-shrink:0;
}
.scan-action-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  color:rgba(255,255,255,0.85);
  cursor:pointer;
  padding:8px 4px;
  font-size: var(--font-micro);
  outline:none;
}
.scan-action-item:active{ opacity:.6; }
.scan-action-icon{
  width:48px;height:48px;
  border-radius: var(--radius-card);
  background:rgba(255,255,255,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: var(--font-3xl);
}
.scan-action-label{
  font-size: var(--font-mini);
  white-space:nowrap;
}
.scan-manual-panel{
  position:absolute;
  bottom:0;left:0;right:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:0;
  z-index:20;
  transition:transform .25s ease;
  will-change:transform;
  contain:layout style paint;
}
.scan-manual-panel.hidden{ display:none; }
.scan-manual-card{
  background:#fff;
  border-radius: var(--radius-xl) 16px 0 0;
  padding:24px 20px 30px;
}
.scan-manual-title{
  font-size: var(--font-body);
  font-weight:600;
  color:#333;
  margin-bottom:16px;
  text-align:center;
}
.scan-manual-input{
  width:100%;
  height:44px;
  border:1px solid #e8e8e8;
  border-radius: var(--radius-md);
  padding:0 14px;
  font-size: var(--font-lg);
  background:#f8f8f8;
  outline:none;
  box-sizing:border-box;
  color:#333;
}
.scan-manual-input:focus{ border-color:var(--brand); background:#fff; }
.scan-manual-submit{
  width:100%;
  height:44px;
  margin-top:14px;
  border:none;
  border-radius: var(--radius-md);
  background:var(--brand);
  color:#fff;
  font-size: var(--font-lg);
  font-weight:600;
  cursor:pointer;
}
.scan-manual-submit:active{ opacity:.8; }

/* V38 contacts UI polish */
.contacts-surface{background:#f7f8fa;}
.contact-row,
#friendsList .friend-item,
#blacklistList .friend-item,
#friendRequestsList .friend-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius: var(--radius-lg);
  background:#fff;
  margin:8px 12px;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.contact-avatar{width:40px;height:40px;flex:0 0 40px;}
.contact-main{min-width:0;flex:1;}
.contact-title{
  font-size: var(--font-body);
  line-height:1.35;
  font-weight:600;
  color:var(--color-dark);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.contact-subtitle{
  margin-top:2px;
  font-size: var(--font-micro);
  line-height:1.4;
  color:var(--color-gray);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.contact-group-header,
#friendsList .group-title,
#groupManageList .group-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:14px 14px 6px;
  padding:0 2px;
}
.contact-group-title{
  font-size: var(--font-body-sm);
  line-height:1.4;
  font-weight:700;
  color:#374151;
}
.contact-group-count{
  font-size: var(--font-micro);
  line-height:1.4;
  color:#9ca3af;
}

.publish-hint{
  margin-top:10px;
  font-size: var(--font-micro);
  color:#999;
}
.publish-hint.error{ color:#dc2626; }
.publish-hint.success{ color:#16a34a; }

.ui-input{
  min-height:40px;
  border-radius: var(--radius-card);
  border:1px solid var(--color-border);
  padding:0 12px;
  font-size: var(--font-body-sm);
  line-height:1.4;
  background:#fff;
}
.ui-btn{
  min-height:34px;
  padding:0 12px;
  border-radius: var(--radius-md);
  border:1px solid var(--color-border);
  font-size: var(--font-caption);
  line-height:1;
  font-weight:600;
  background:#fff;
  color:#374151;
}
.ui-btn.primary{background:#2563eb;border-color:#2563eb;color:#fff;}
.ui-btn.ghost{background:#fff;}
.ui-btn.danger{background:#fff;border-color:#fecaca;color:#dc2626;}


/* V39 contacts polish */
.contact-card{
  border:1px solid rgba(229,231,235,.9);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.contact-row-dense{
  padding-top:10px;
  padding-bottom:10px;
}
.contact-actions,
.contact-footer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 12px 12px;
}
.contact-inline-btn{
  min-height:32px;
  padding:0 10px;
  border-radius:9px;
}
.contact-inline-btn.stack-gap{
  margin-left:0;
}
#groupManagePage .contact-row,
#friendRequestsPage .contact-row,
#blacklistPage .contact-row{
  align-items:flex-start;
}
#groupManagePage .contact-main,
#friendRequestsPage .contact-main,
#blacklistPage .contact-main{
  padding-top:1px;
}
#groupManagePage .contact-title,
#friendRequestsPage .contact-title,
#blacklistPage .contact-title{
  font-size: var(--font-lg);
}
#groupManagePage .contact-subtitle,
#friendRequestsPage .contact-subtitle,
#blacklistPage .contact-subtitle{
  font-size: var(--font-micro);
  line-height:1.45;
}
#groupManagePage .ui-input,
#friendRequestsPage .ui-input,
#blacklistPage .ui-input,
#contactsPage .ui-input{
  width:100%;
  box-sizing:border-box;
}

.message-read-receipt{margin-top:4px;display:inline-flex;align-items:center;gap:4px;font-size: var(--font-mini);line-height:1.2;text-align:right;padding-right:2px;justify-content:flex-end;}
.message-read-receipt .receipt-dot{width:4px;height:4px;border-radius: var(--radius-full);display:inline-block;opacity:.9;}
.message-read-receipt.is-read{color:var(--primary);}
.message-read-receipt.is-read .receipt-dot{background:var(--primary);}
.message-read-receipt.is-unread{color:var(--text-muted);}
.message-read-receipt.is-unread .receipt-dot{background:var(--text-muted);}
.message-row:not(.me) .message-read-receipt{display:none;}


/* V55 profile detail redesign */
.profile-detail-page{ background:#f5f6f8; }
.profile-hero{
  position:relative; padding:20px 16px 16px;
  background:#fff;
  color:#1a1a1a; overflow:hidden;
  /* Prevent this hero from being flex-shrunk by the parent .chat-list-view
     (which is display:flex; flex-direction:column). Because .profile-hero
     has overflow:hidden, its flex min-height defaults to 0, so without an
     explicit flex-shrink:0 it gets squeezed on tall-screen devices and the
     signature row at the bottom gets clipped by the sibling store card. */
  flex-shrink:0;
}
.profile-hero-backdrop{ display:none; }
.profile-hero-main{ position:relative; display:flex; align-items:center; gap:14px; }
.profile-hero-avatar{ flex:0 0 64px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.profile-hero-info{ min-width:0; flex:1; }
.profile-hero-send-btn{
  border:1px solid #ff5722;
  background:#ff5722;
  color:#fff;
  border-radius:20px;
  height:34px;
  padding:0 16px;
  font-size: var(--font-caption);
  font-weight:600;
  white-space:nowrap;
}
.profile-hero-send-btn:active{ opacity:.85; }
.profile-hero-send-btn.hidden{ display:none; }
.profile-hero-more-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:0;
  border-radius: var(--radius-full);
  background:transparent;
  color:#999;
  font-size: var(--font-4xl);
  line-height:1;
}
.profile-hero-name{
  display:block; font-size: var(--font-3xl); line-height:1.3; font-weight:700; color:#1a1a1a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.profile-hero-id{ margin-top:4px; font-size: var(--font-caption); line-height:1.4; color:#999; font-family:monospace; }
.profile-hero-signature{
  position:relative; margin-top:12px; font-size: var(--font-caption); line-height:1.5;
  color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-top:12px; border-top:1px solid #f0f0f0;
}
.profile-detail-card{
  margin:10px 12px 0; background:#fff; border-radius: var(--radius-card);
  box-shadow:0 1px 4px rgba(0,0,0,.05); overflow:hidden;
}
.profile-detail-row{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:none; border-bottom:1px solid #f0f1f3;
  padding:16px; font-size: var(--font-body); color:var(--color-dark);
}
.profile-detail-arrow{ color:#c0c4cc; font-size: var(--font-2xl); line-height:1; }
.profile-detail-meta{ padding:14px 16px; }
.profile-meta-title{ font-size: var(--font-micro); color:#9aa0aa; }
.profile-meta-value{ margin-top:6px; font-size: var(--font-lg); color:var(--color-dark); }
.profile-stranger-hint{
  margin:0 16px 16px; padding:10px 12px; border-radius: var(--radius-card);
  background:#fff7ed; color:#c2410c; font-size: var(--font-caption); line-height:1.45;
}
.profile-stranger-hint.hidden{ display:none; }
.profile-primary-actions{ display:flex; gap:10px; padding:12px 12px 12px; }
.profile-primary-actions.hidden{ display:none; }
.profile-primary-btn, .profile-secondary-btn{
  flex:1; min-height:42px; border-radius: var(--radius-card); font-size: var(--font-lg); font-weight:700;
}
.profile-secondary-btn{ border:1px solid #c8d1de; color:#334155; background:#fff; }
.profile-secondary-btn.hidden{ display:none; }
.profile-action-card{ padding:0; overflow:hidden; }
.profile-action-btn{
  width:100%; border:none; background:#fff; padding:20px 16px;
  font-size: var(--font-title-primary); font-weight:700; color:var(--color-dark); border-bottom:1px solid #f0f1f3;
}
.profile-action-btn.danger{ color:#ef4444; }
.profile-action-cancel-btn{
  width:100%; margin-top:10px; border:none; background:#fff; color:#8e8e93;
  padding:16px; border-radius: var(--radius-lg); font-size: var(--font-title-primary); font-weight:700;
}


/* Contact card picker */
#contactCardPickerPage{ background:var(--color-bg-secondary) !important; display:flex; flex-direction:column; }
.ccp-toolbar{
  padding:10px 12px;
  background:var(--color-bg-secondary);
}
.ccp-search-input{
  width:100%;
  height:36px;
  border:1px solid #e8e8e8;
  border-radius: var(--radius-sm);
  padding:0 10px;
  font-size: var(--font-body-sm);
  background:#fff;
  outline:none;
  box-sizing:border-box;
}
.ccp-search-input:focus{ border-color:var(--brand); }
.ccp-list{
  flex:1;
  overflow-y:auto;
  background:var(--color-bg-secondary);
}
.ccp-list .qq-group-header{
  background:#f7f7f7;
  padding:10px 16px;
  font-size: var(--font-caption);
  color:#666;
  font-weight:500;
}
.ccp-list .qq-group-content{ background:#fff; }
.ccp-friend-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:#fff;
  border:none;
  width:100%;
  text-align:left;
  cursor:pointer;
  border-bottom:0.5px solid #f0f0f0;
  font-size: var(--font-lg);
  outline:none;
}
.ccp-friend-row:active{ background:#ececec; }
.ccp-friend-row.selected{ background:#e6f7ee; }
.ccp-friend-row .avatar{ width:40px; height:40px; font-size: var(--font-body); flex-shrink:0; }
.ccp-friend-info{ flex:1; min-width:0; }
.ccp-friend-name{
  font-weight:500;
  color:#333;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ccp-friend-id{
  font-size: var(--font-micro);
  color:#999;
  margin-top:2px;
}
.ccp-check{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid #d0d0d0;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s,border-color .15s;
}
.ccp-friend-row.selected .ccp-check{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  font-size: var(--font-caption);
}
.ccp-confirm-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:#fff;
  border-top:1px solid #e8e8e8;
  flex-shrink:0;
}
.ccp-confirm-bar.hidden{ display:none; }
.ccp-selected-info{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.ccp-selected-avatar .avatar{ width:36px; height:36px; font-size: var(--font-body-sm); }
.ccp-selected-name{
  font-size: var(--font-body-sm);
  font-weight:500;
  color:#333;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ccp-confirm-btn{
  border:none;
  background:var(--brand);
  color:#fff;
  font-size: var(--font-lg);
  font-weight:600;
  padding:10px 24px;
  border-radius: var(--radius-base);
  cursor:pointer;
  flex-shrink:0;
  transition:opacity .15s;
}
.ccp-confirm-btn:active{ opacity:.7; }
.ccp-empty{
  text-align:center;
  padding:60px 20px;
  color:#999;
  font-size: var(--font-body-sm);
}
.clickable-card{cursor:pointer;}


.chat-swipe-row{
  position:relative;
  overflow:hidden;
  background:#f2f2f6;
}
.chat-swipe-content{
  position:relative;
  z-index:2;
  transform:translateX(0);
  transition:transform .2s ease;
  will-change:transform;
  touch-action: pan-y;
}
.chat-swipe-content.swipe-dragging{
  transition:none;
}
.chat-swipe-row.revealed .chat-swipe-content{
  transform:translateX(-156px);
}
.chat-swipe-actions{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:156px;
  display:flex;
  z-index:1;
}
.chat-swipe-pin-btn{
  width:78px;
  border:0;
  background:#ff9500;
  color:#fff;
  font-size: var(--font-body-sm);
  font-weight:600;
}
.chat-swipe-delete-btn{
  width:78px;
  border:0;
  background:#ff3b30;
  color:#fff;
  font-size: var(--font-body-sm);
  font-weight:600;
}

/* ── Settings form pages (change password / phone) ── */
.settings-form-page{
  background:var(--color-bg-secondary) !important;
  padding:16px 14px !important;
}
.settings-form-card{
  background:#fff;
  border-radius: var(--radius-lg);
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.settings-form-label{
  font-size: var(--font-caption);
  color:var(--color-gray);
  font-weight:500;
  margin-top:8px;
}
.settings-form-label:first-child{
  margin-top:0;
}
.settings-form-input{
  width:100%;
  height:44px;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:#f9fafb;
  padding:0 14px;
  font-size: var(--font-lg);
  color:#1f2937;
  outline:none;
  box-sizing:border-box;
  transition:border-color .2s,box-shadow .2s;
}
.settings-form-input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(7,193,96,.12);
  background:#fff;
}
.settings-form-input::placeholder{
  color:#c0c4cc;
}
.settings-code-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.settings-code-row .settings-form-input{
  flex:1;
  min-width:0;
}
.settings-code-btn{
  flex-shrink:0;
  height:44px;
  padding:0 16px;
  border:1px solid var(--brand);
  border-radius: var(--radius-md);
  background:#fff;
  color:var(--brand);
  font-size: var(--font-body-sm);
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s;
}
.settings-code-btn:active{
  background:#ecfdf5;
}
.settings-code-btn:disabled{
  border-color:#d1d5db;
  color:#9ca3af;
  cursor:not-allowed;
}
.settings-form-submit{
  margin-top:16px;
  width:100%;
  height:46px;
  border:none;
  border-radius: var(--radius-md);
  background:var(--brand);
  color:#fff;
  font-size: var(--font-body);
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s;
}
.settings-form-submit:active{
  opacity:.85;
}

.payment-code-card{
  background:#fff;
  border-radius: var(--radius-pill);
  border:1px solid #ebedf0;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.payment-code-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 2px;
}
.payment-code-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.payment-code-meta strong{
  font-size: var(--font-lg);
  color:var(--color-dark);
}
.payment-code-meta span{
  font-size: var(--font-micro);
  color:#8b93a1;
}
.payment-code-preview{
  width:72px;
  height:72px;
  border-radius: var(--radius-card);
  border:1px dashed #d1d5db;
  background:#f9fafb;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9ca3af;
  font-size:28px;
  overflow:hidden;
}
#sellerPaymentPage .secondary-btn{
  width:100%;
}


/* Legal & About pages */
.legal-page { background: #fff !important; }
.legal-content { padding: 20px 18px; overflow-y: auto; flex: 1; }
.legal-content h3 { font-size: 20px; font-weight: 700; color: #111; margin: 0 0 4px; text-align: center; }
.legal-content h4 { font-size: 15px; font-weight: 600; color: #333; margin: 20px 0 8px; }
.legal-content p { font-size: var(--font-body-sm); color: #555; line-height: 1.8; margin: 0 0 6px; }
.legal-content .legal-update { font-size: var(--font-micro); color: #999; text-align: center; margin-bottom: 20px; }
.about-content { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 40px 20px 20px; }
.about-logo-section { text-align: center; margin-bottom: 30px; }
.about-logo-section h3 { font-size: 22px; font-weight: 700; margin: 16px 0 4px; color: #111; }
.about-version { font-size: var(--font-body-sm); color: #999; margin: 0; }
.about-links { width: 100%; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; margin-bottom: 30px; }
.about-links .chat-item { border-bottom: 0.5px solid #f0f0f0; }
.about-copyright { font-size: var(--font-micro); color: #c0c0c0; margin-top: auto; }

/* ── Add Friend Page ── */
.add-friend-search-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  background:#fff;
  border-bottom:1px solid #f0f0f0;
}
.add-friend-search-wrap{
  flex:1;
  position:relative;
}
.add-friend-search-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
.add-friend-search-wrap input{
  width:100%;
  height:40px;
  border:none;
  border-radius: var(--radius-md);
  background:#f2f2f6;
  padding:0 12px 0 36px;
  font-size: var(--font-body-sm);
  color:#1f2937;
  outline:none;
  box-sizing:border-box;
}
.add-friend-search-wrap input:focus{
  box-shadow:0 0 0 2px rgba(7,193,96,.2);
}
.add-friend-search-wrap input::placeholder{
  color:#b0b7c3;
}
.add-friend-search-bar button{
  flex-shrink:0;
  height:40px;
  padding:0 18px;
  border:none;
  border-radius: var(--radius-md);
  background:var(--brand);
  color:#fff;
  font-size: var(--font-body-sm);
  font-weight:600;
  cursor:pointer;
}
.add-friend-search-bar button:active{
  opacity:.85;
}
.add-friend-search-bar button:disabled{
  opacity:.5;
}
.add-friend-myid{
  text-align:center;
  padding:16px;
  color:#999;
  font-size: var(--font-caption);
}
.add-friend-myid strong{
  color:#333;
  font-family:monospace;
  font-size: var(--font-lg);
}

/* Search result card */
.add-friend-result{
  padding:16px;
}
.add-friend-result.hidden{display:none;}
.add-friend-card{
  background:#fff;
  border-radius: var(--radius-lg);
  padding:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.add-friend-card-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.add-friend-avatar{
  width:52px;
  height:52px;
  border-radius: var(--radius-card);
  background:var(--brand);
  color:#fff;
  font-size: var(--font-2xl);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.add-friend-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.add-friend-info{
  flex:1;
  min-width:0;
}
.add-friend-name{
  font-size: var(--font-body);
  font-weight:600;
  color:#111;
  margin-bottom:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.add-friend-meta{
  font-size: var(--font-micro);
  color:#999;
}
.add-friend-sig{
  font-size: var(--font-caption);
  color:#666;
  padding:10px 0;
  border-top:1px solid #f5f5f5;
  line-height:1.5;
}
.add-friend-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.add-friend-add-btn{
  flex:1;
  height:40px;
  border:none;
  border-radius: var(--radius-md);
  background:var(--brand);
  color:#fff;
  font-size: var(--font-lg);
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s;
}
.add-friend-add-btn:active{opacity:.85;}
.add-friend-add-btn:disabled{opacity:.5;}
.add-friend-add-btn.already{
  background:#f0f0f0;
  color:#999;
  cursor:default;
}

/* Empty state */
.add-friend-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:60px 20px;
  color:#ccc;
}
.add-friend-empty.hidden{display:none;}
.add-friend-empty-icon{margin-bottom:12px;}
.add-friend-empty p{
  font-size: var(--font-body-sm);
  color:#999;
  margin:0;
}

/* ===== Left Sidebar Avatar Bar ===== */
.sidebar-panel{
  width:132px;
  flex-shrink:0;
  background:#ebebeb;
  display:flex;
  flex-direction:column;
  border-right:0.5px solid var(--line);
  overflow:hidden;
  transition:width var(--transition-base);
  contain:layout style;
}
.sidebar-panel.sidebar-collapsed{
  width:62px;
}
.sidebar-panel.sidebar-hidden-mode{
  width:0;
  border-right:none;
}
.sidebar-panel.sidebar-tab-hidden{
  width:0;
  border-right:none;
}
/* sidebar toggle button moved to topbar */
.sidebar-list{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-top:max(60px, calc(env(safe-area-inset-top) + 50px));
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.15) transparent;
  overscroll-behavior-y:contain;
}
.sidebar-list::-webkit-scrollbar{
  width:3px;
}
.sidebar-list::-webkit-scrollbar-track{
  background:transparent;
}
.sidebar-list::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);
  border-radius:4px;
}
.sidebar-list::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,.25);
}
.sidebar-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 6px 8px;
  cursor:pointer;
  border-bottom:0.5px solid rgba(0,0,0,.06);
  position:relative;
  transition:background .15s;
}
.sidebar-item:active{ background:rgba(0,0,0,.06); }
.sidebar-item.is-active{ background:rgba(0,0,0,.08); }
.sidebar-item-avatar{
  width:42px;
  height:42px;
  border-radius: var(--radius-base);
  background:linear-gradient(135deg,#a1c4fd,#c2e9fb);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: var(--font-title-primary);
  font-weight:600;
  flex-shrink:0;
  overflow:hidden;
  position:relative;
}
.sidebar-item-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.sidebar-badge{
  position:absolute;
  top:2px;
  right:2px;
  min-width:16px;
  height:16px;
  background:#f44336;
  color:#fff;
  font-size: var(--font-xs);
  font-weight:700;
  border-radius: var(--radius-xl);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  line-height:1;
  box-sizing:border-box;
  z-index:2;
}
.sidebar-badge-dot{
  position:absolute;
  top:2px;
  right:2px;
  width:8px;
  height:8px;
  background:#f44336;
  border-radius:50%;
  z-index:2;
}
.sidebar-item-name{
  margin-top:4px;
  font-size: var(--font-caption);
  color:#333;
  font-weight:500;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  line-height:1.3;
}
.sidebar-item-preview{
  font-size: var(--font-micro);
  color:#999;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  line-height:1.3;
  margin-top:1px;
}
/* collapsed mode: hide text */
.sidebar-collapsed .sidebar-item-name,
.sidebar-collapsed .sidebar-item-preview{
  display:none;
}
.sidebar-collapsed .sidebar-item{
  padding:8px 6px;
}