/* ================= 私信 ================= */
.topbar__nav a { position: relative; }
.nav-dot { top: 2px; right: 6px; width: 8px; height: 8px; }

body[data-route="chat"] .app { padding-bottom: 18px; }
.chat {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  height: calc(100vh - var(--topbar-h) - 44px);
  height: calc(100dvh - var(--topbar-h) - 44px);
  min-height: 420px;
}
.chat-side, .chat-main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.chat-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
}
.chat-online { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #7ed6a5; box-shadow: 0 0 0 2.5px rgba(12, 18, 21, .95); }
.chat-pick__row > .chat-online { position: static; flex: none; }
.chat-tag { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 220, 147, .16); color: var(--gold); font-size: 11px; font-style: normal; font-weight: 500; vertical-align: 1px; }
.chat-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red-dot); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }

.chat-icon-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  text-decoration: none;
  transition: background .2s;
}
.chat-icon-btn:hover { background: rgba(255, 244, 220, .1); }
.chat-icon-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 1px; }

/* ---------- 会话列表 ---------- */
.chat-side__head { display: flex; align-items: center; gap: 4px; padding: 14px 12px 10px 20px; border-bottom: 1px solid rgba(255, 244, 220, .1); }
.chat-side__title { flex: 1; font-size: 19px; font-weight: 600; letter-spacing: .08em; }
.chat-status { padding: 6px 20px; background: rgba(255, 220, 147, .08); color: var(--gold); font-size: 12px; }
.chat-list { flex: 1; overflow-y: auto; padding: 6px; }
.chat-list__empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 12px; color: var(--cream-faint); }
.chat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  color: var(--cream);
  text-decoration: none;
  transition: background .18s;
}
.chat-row:hover { background: rgba(255, 244, 220, .06); }
.chat-row.is-active { background: rgba(255, 244, 220, .11); box-shadow: inset 3px 0 0 var(--cream); }
.chat-row__avatar { position: relative; flex: none; }
.chat-row__main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.chat-row__top, .chat-row__bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-row__name { flex: 1; overflow: hidden; font-size: 14.5px; white-space: nowrap; text-overflow: ellipsis; }
.chat-row__time { flex: none; color: var(--cream-faint); font-size: 11.5px; }
.chat-row__preview { flex: 1; overflow: hidden; color: var(--cream-faint); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.chat-row.is-unread .chat-row__name { font-weight: 700; }
.chat-row.is-unread .chat-row__preview { color: var(--cream-dim); }
.chat-row__link { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; color: inherit; }
.chat-row > .chat-icon-btn { width: 34px; height: 34px; color: var(--cream-faint); }
.chat-row > .chat-icon-btn:hover { color: var(--cream); }
.chat-row > .chat-row__ok { color: #7ed6a5; }
.chat-row > .chat-row__ok:hover { color: #a4ecc2; }
.chat-list__label { padding: 10px 12px 4px; color: var(--cream-faint); font-size: 12px; letter-spacing: .06em; }

/* 好友 / 陌生人分栏 */
.chat-tabs { display: flex; flex-wrap: nowrap; margin: 10px 12px 2px; }
.chat-tabs button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; }
.chat-tabs .chat-badge { min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; }
.chat-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 12px 0; padding: 10px 10px 10px 14px; border-radius: 16px; background: rgba(255, 244, 220, .05); }
.chat-setting__text { min-width: 0; }
.chat-setting__title { font-size: 13.5px; }
.chat-setting__hint { color: var(--cream-faint); font-size: 12px; }
.chat-setting .win-toggle { flex: none; }
.chat-tag--soft { background: rgba(255, 244, 220, .1); color: var(--cream-dim); }

/* ---------- 对话 ---------- */
.chat-main > .state-box { margin: auto; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(255, 244, 220, .1); }
.chat-back { display: none; }
.chat-head__info { flex: 1; min-width: 0; }
.chat-friend-btn { flex: none; }
.chat-head__name { overflow: hidden; font-size: 15.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.chat-head__sub { color: var(--cream-faint); font-size: 12px; font-family: var(--font-num); }
.chat-head__sub.is-typing { color: #7ed6a5; font-family: var(--font); }

.chat-thread { display: flex; flex: 1; flex-direction: column; gap: 4px; overflow-y: auto; padding: 14px 18px; overscroll-behavior: contain; }
.chat-thread > .state-box { margin: auto; }
.chat-more, .chat-thread__empty { padding: 8px 0 12px; color: var(--cream-faint); font-size: 12px; text-align: center; }
.chat-thread__empty { margin: auto 0; font-size: 13.5px; }
.chat-stamp { margin: 10px 0 4px; color: var(--cream-faint); font-size: 11.5px; text-align: center; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; }
.chat-msg.is-mine { align-items: flex-end; }
.chat-msg .chat-stamp { align-self: stretch; }
.chat-bubble {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(72%, 520px);
  padding: 9px 14px;
  border-radius: 20px 20px 20px 6px;
  background: rgba(255, 244, 220, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 220, .08);
  animation: fade-up .22s ease both;
}
.chat-msg.is-mine .share-item { background: rgba(38, 41, 43, .9); }
.chat-msg.is-mine .chat-bubble { border-radius: 20px 20px 6px 20px; background: var(--cream); color: var(--ink); }
.chat-bubble.is-card { padding: 4px; }
.chat-bubble__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.5; }
.chat-read { align-self: flex-end; margin-top: 2px; color: var(--cream-faint); font-size: 11.5px; }

.chat-composer { display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px; border-top: 1px solid rgba(255, 244, 220, .1); }
.chat-blocked { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255, 244, 220, .1); color: var(--cream-dim); font-size: 13px; }
.chat-blocked > span { flex: 1; min-width: 0; }
.chat-blocked > .sky-icon { flex: none; color: var(--gold); }
.chat-composer .chat-icon-btn { color: var(--pink); }
.chat-input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  max-height: 140px;
  padding: 9px 14px;
  border: 1.5px solid rgba(255, 244, 220, .2);
  border-radius: 20px;
  background: rgba(6, 10, 12, .5);
  color: var(--cream);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  resize: none;
  outline: none;
  transition: border-color .2s;
}
.chat-input::placeholder { color: rgba(255, 244, 220, .36); }
.chat-input:focus { border-color: rgba(255, 244, 220, .6); }
.chat-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  transition: opacity .2s, transform .2s var(--ease-spring);
}
.chat-send:active { transform: scale(.92); }
.chat-send:disabled { opacity: .35; cursor: default; }

/* ---------- 弹窗 ---------- */
.modal--chat-pick, .modal--compose { width: min(460px, calc(100vw - 32px)); }
.chat-pick {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(620px, calc(100vh - 80px));
  padding: 18px 18px 16px;
  border-radius: 22px;
  outline: none;
  background: linear-gradient(180deg, rgba(24, 32, 40, .97), rgba(12, 18, 24, .98));
  box-shadow: inset 0 0 0 1.5px rgba(255, 244, 220, .16), 0 30px 90px rgba(0, 0, 0, .55);
  color: var(--cream);
  animation: panel-in .24s var(--ease-spring) both;
}
.chat-pick__head { display: flex; align-items: center; justify-content: space-between; }
.chat-pick__title { font-size: 17px; font-weight: 600; letter-spacing: .06em; }
.chat-pick__list { display: flex; flex-direction: column; gap: 2px; min-height: 120px; overflow-y: auto; margin: 0 -6px; }
.chat-pick__label { padding: 6px 10px 2px; color: var(--cream-faint); font-size: 12px; }
.chat-pick__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 10px; color: var(--cream-faint); text-align: center; }
.chat-pick__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--cream);
  text-align: left;
  transition: background .18s;
}
.chat-pick__row:hover, .chat-pick__row:focus-visible { background: rgba(255, 244, 220, .08); outline: none; }
.chat-pick__row > .sky-icon { color: var(--cream-faint); }
.chat-pick__thumb { flex: none; width: 46px; height: 46px; overflow: hidden; border-radius: 10px; background: var(--well); }
.chat-pick__thumb img { width: 100%; height: 100%; object-fit: cover; }
.chat-pick__main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.chat-pick__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-pick__sub { color: var(--cream-faint); font-size: 12px; font-family: var(--font-num); }

.chat-profile__label { display: flex; flex-direction: column; gap: 6px; color: var(--cream-dim); font-size: 13px; }
.chat-profile__id { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--cream-dim); font-size: 13px; }
.chat-profile__id code { color: var(--cream); font-family: var(--font-mono); }
.chat-profile__hint { color: var(--cream-faint); font-size: 12px; line-height: 1.6; }
.chat-profile__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* 收藏卡片上的分享按钮 */
.fav-card__share { right: 40px; color: var(--cream-faint); }
.fav-card__share .sky-icon { fill: none; }
.fav-card__share:hover { background: rgba(255, 244, 220, .12); color: var(--cream); }
.fav-card:has(.fav-card__share) .fav-card__body { padding-right: 60px; }

@media (max-width: 760px) {
  .chat { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .chat:not(.has-thread) .chat-main, .chat.has-thread .chat-side { display: none; }
  .chat-back { display: grid; margin-left: -8px; }
  .chat-bubble { max-width: 84%; }
  .chat-head, .chat-thread { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 640px) {
  .chat { height: calc(100dvh - var(--topbar-h) - 30px); }
}
@media (max-width: 400px) {
  .chat-head .chat-friend-btn { width: 36px; padding: 0; border-radius: 50%; }
  .chat-head .chat-friend-btn__text { display: none; }
}