/* list.css — 聊天列表（.ls-*）：大标题、朋友的今天横条（我的今天 + 再记录一条）、聊天行（按下/左滑操作/未读/置顶/正在输入/在线小点）、
   新用户空状态（朋友快捷入口）、搜索面板、发起聊天弹窗（朋友列表 / 建群多选 / 群资料） */

.app-view.ls-root { background: var(--bg); }

/* 在线小点的颜色（浅色 / 深色两套）；弹窗在 #overlays 里，所以 .ls-compose 也要定义 */
.ls-root, .ls-compose { --ls-online: #3E9F68; --ls-online-text: #2F7D52; --ls-ring: var(--bg); }
.ls-compose { --ls-ring: var(--surface); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ls-root, :root:not([data-theme="light"]) .ls-compose { --ls-online: #6CCB94; --ls-online-text: #86D6A8; }
}
:root[data-theme="dark"] .ls-root, :root[data-theme="dark"] .ls-compose { --ls-online: #6CCB94; --ls-online-text: #86D6A8; }

.ls-online {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ls-online);
  box-shadow: 0 0 0 2px var(--ls-ring);
  opacity: 0;
  transform: scale(.3);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2);
}
.ls-online::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ls-online); opacity: 0; }
.is-online .ls-online { opacity: 1; transform: none; }
.is-ping .ls-online::after { animation: ls-ping 1200ms var(--ease-out); }
@keyframes ls-ping { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

/* ---------- 顶部大标题 ---------- */
.ls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 8px 20px;
}
.ls-head-actions, .ls-compact-actions { display: flex; gap: 2px; color: var(--ink); }
.ls-compact-actions .ui-icon-btn { width: 44px; height: 44px; }

/* ---------- 朋友的今天 ---------- */
.ls-stories { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 16px; }
.ls-label { padding: 0 20px; }
.ls-strip {
  display: flex;
  gap: 12px;
  padding: 4px 20px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ls-strip::-webkit-scrollbar { display: none; }
.ls-strip.is-grabbing { cursor: grabbing; }

.ls-story {
  position: relative;
  flex: none;
  width: 112px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  border-radius: 14px;
  text-align: left;
  color: var(--ink);
  transition: transform var(--dur-1) var(--ease-out);
  -webkit-user-drag: none;
}
.ls-story:active { transform: scale(.97); }
.ls-story:focus-visible { outline-offset: 4px; }
.ls-story-pic {
  position: relative;
  display: block;
  height: 132px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-soft);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--c-deep);
  transition: box-shadow var(--dur-4) var(--ease-out);
}
.ls-story-pic > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  transition: opacity var(--dur-4) var(--ease-out), filter var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
@media (hover: hover) {
  .ls-story:hover .ls-story-pic > img { transform: scale(1.04); }
}
.ls-story-char {
  position: absolute;
  left: 7px;
  top: 6px;
  --size: 24px;
  padding: 3px 4px 2px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--c-deep);
  box-shadow: 0 2px 6px rgba(31, 29, 26, .12);
  transition: opacity var(--dur-4);
}
.ls-story-txt { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; min-width: 0; }
.ls-story-line {
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur-4);
}
.ls-story-meta { font-size: 11px; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-story-new {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-deep);
  box-shadow: 0 0 0 2px var(--bg);
  transition: opacity var(--dur-3), transform var(--dur-3) var(--ease-out);
}
.ls-story.is-seen .ls-story-pic { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px transparent; }
.ls-story.is-seen .ls-story-pic > img { opacity: .62; filter: saturate(.55); }
.ls-story.is-seen .ls-story-char { opacity: .8; }
.ls-story.is-seen .ls-story-line { color: var(--muted); }
.ls-story.is-seen .ls-story-new { opacity: 0; transform: scale(.3); }

/* 封面图加载完再淡入（加载前露出 --c-soft 底色） */
.ls-story .ls-story-pic:not(.is-loaded) > img { opacity: 0; }
/* 发布中的「我的今天」：轻微呼吸 */
.ls-story.is-pending .ls-story-pic > img { animation: ls-breath 1100ms ease-in-out infinite alternate; }
@keyframes ls-breath { from { opacity: .45; } to { opacity: .85; } }

/* 我的今天：右下角「+」再记录一条（包一层，按钮不能嵌套） */
.ls-story-me { position: relative; flex: none; display: flex; }
.ls-strip > .is-leaving { pointer-events: none; overflow: hidden; }
.ls-story-plus {
  position: absolute;
  left: 88px;
  top: 108px;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 0 0 3px var(--bg);
  transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2);
}
.ls-story-plus:active { transform: scale(.88); }
@media (hover: hover) { .ls-story-plus:hover { transform: scale(1.1) rotate(90deg); } }
.ls-story-plus:focus-visible { outline-offset: 3px; }

/* 记录今天（虚线卡） */
.ls-story.ls-story-add { width: 100px; }
.ls-story-dash {
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px dashed color-mix(in srgb, var(--muted) 62%, transparent);
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 12px;
  transition: background-color var(--dur-2), border-color var(--dur-2);
}
.ls-story-dash .ui-ico { transition: transform var(--dur-3) var(--ease-spring); }
@media (hover: hover) {
  .ls-story-add:hover .ls-story-dash { background: var(--surface-2); border-color: var(--muted); }
  .ls-story-add:hover .ls-story-dash .ui-ico { transform: rotate(90deg); }
}
.ls-story-add .ls-story-meta { padding: 0 2px; }

.ls-sep { height: 1px; margin: 0 20px; background: var(--line); }

/* ---------- 聊天行 ---------- */
.ls-list { position: relative; display: flex; flex-direction: column; padding: 6px 0 28px; }
.ls-row {
  position: relative;
  flex: none;
  overflow: hidden;
  background: var(--bg);
  touch-action: pan-y;
}
.ls-row.is-leaving { pointer-events: none; }

/* 左滑露出的操作：三个按钮随滑动距离按比例展开（JS 设 transform），::after 补齐间隙 */
.ls-acts {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 216px;
  visibility: hidden;
}
.ls-row.is-revealed .ls-acts { visibility: visible; }
.ls-act {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .5px;
}
.ls-act::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(100% - 1px); width: 180px; background: inherit; }
.ls-act > * { position: relative; z-index: 1; }
.ls-act:focus-visible { outline-offset: -4px; }
.ls-act-ic { display: inline-flex; }
.ls-act-pin { left: 0; background: var(--c-soft); color: var(--c-ink); }
.ls-act-read { left: 72px; background: var(--c-deep); color: var(--c-on-deep); }
.ls-act-del { left: 144px; background: var(--danger); color: var(--on-danger); }
.ls-row.is-swiping .ls-main, .ls-row.is-swiping .ls-act { will-change: transform; }

.ls-main {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 20px;
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  transition: background-color var(--dur-2) var(--ease-out), border-radius var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ls-row.is-swiping .ls-main { transition: background-color var(--dur-2); }
.ls-main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-soft);
  opacity: 0;
  pointer-events: none;
}
.ls-main:focus-visible { outline-offset: -3px; border-radius: 14px; }
.ls-row.is-pinned, .ls-row.is-pinned .ls-main { background: var(--surface-2); }
@media (hover: hover) {
  .ls-main:hover { background: color-mix(in srgb, var(--ink) 3%, var(--bg)); }
  .ls-row.is-pinned .ls-main:hover { background: color-mix(in srgb, var(--ink) 3%, var(--surface-2)); }
  .ls-main:active { background: color-mix(in srgb, var(--ink) 6%, var(--bg)); }
  .ls-row.is-pinned .ls-main:active { background: color-mix(in srgb, var(--ink) 6%, var(--surface-2)); }
}
.ls-main.ui-pressing {
  transform: scale(.98);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 6%, var(--bg));
}
.ls-row.is-pinned .ls-main.ui-pressing { background: color-mix(in srgb, var(--ink) 6%, var(--surface-2)); }
/* 长按菜单期间：浮起的行是缩进一点的圆角卡片（ui.menu 克隆此刻的样式；菜单收起后再弹回整行） */
.ls-main.is-lifted { --ls-ring: var(--surface); transform: scale(.955); border-radius: 18px; background: var(--surface); }
.ls-row.is-pinned .ls-main.is-lifted { background: var(--surface); }
.ls-main.no-tr { transition: none; }
.ls-main.is-tap::before { background: var(--ink); animation: ls-flash-tap 460ms var(--ease-out); }
.ls-row.is-new .ls-main::before { animation: ls-flash-new 1200ms var(--ease-out); }
@keyframes ls-flash-tap { 0% { opacity: .07; } 100% { opacity: 0; } }
@keyframes ls-flash-new { 0% { opacity: 0; } 16% { opacity: .5; } 100% { opacity: 0; } }

.ls-main .ui-char { transition: color var(--dur-3) var(--ease-out); }
.ls-ava { position: relative; }
.ls-ava > .ls-online { right: -3px; top: 27px; }
.ls-row.is-pinned { --ls-ring: var(--surface-2); }
.ls-main .ui-colorbar { transition: background-color var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out); }
.ls-row.is-unread .ls-ava > .ui-colorbar { --w: 20px; }

.ls-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ls-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-row.is-unread .ls-name { font-weight: 700; }
.ls-prev { display: grid; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.ls-row.is-unread .ls-prev { color: var(--ink-2); }
.ls-prev > span {
  grid-area: 1 / 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 220ms var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.ls-prev-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--c-deep);
  font-weight: 500;
  opacity: 0;
  transform: translateY(7px);
}
.ls-prev-typing .ui-typing > i { width: 4px; height: 4px; }
/* 群聊「名字 正在输入」：名字可以省略，「正在输入」和三个点不被挤掉 */
.ls-prev-typing > .ls-typing-who { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: -1px; }
.ls-prev-typing > .ls-typing-who.is-count { margin-right: -5px; }
.ls-prev-typing > .ls-typing-t, .ls-prev-typing > .ui-typing { flex: none; }
.ls-row.is-typing .ls-prev-text { opacity: 0; transform: translateY(-7px); }
.ls-row.is-typing .ls-prev-typing { opacity: 1; transform: none; }
.ls-draft { color: var(--c-deep); font-weight: 600; }
.ls-hint { color: var(--placeholder); }

.ls-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ls-time { font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-row.is-unread .ls-time { color: var(--ink-2); }
.ls-flags { display: flex; align-items: center; gap: 5px; min-height: 20px; }
.ls-mute { display: none; color: var(--placeholder); }
.ls-row.is-muted .ls-mute { display: inline-flex; }
.ls-badge-slot { display: inline-flex; align-items: center; gap: 4px; }
.ls-badge { transition: background-color var(--dur-3), color var(--dur-3); }

.ls-listwrap { position: relative; }

/* ---------- 新用户空状态：还没有聊天 + 朋友快捷入口 ---------- */
.ls-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 44px 0 36px;
  text-align: center;
}
.ls-empty.is-leaving { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.ls-empty-ic { display: inline-flex; margin-bottom: 6px; color: var(--placeholder); }
.ls-empty-t { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ls-empty-sub { padding: 0 32px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.ls-quick {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 18px 20px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}
.ls-quick::-webkit-scrollbar { display: none; }
.ls-qk:first-child { margin-left: auto; }
.ls-qk:last-child { margin-right: auto; }
.ls-qk {
  flex: none;
  width: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-radius: 16px;
  color: var(--ink);
  transition: transform var(--dur-1) var(--ease-out);
}
.ls-qk:active { transform: scale(.94); }
.ls-qk:focus-visible { outline-offset: 2px; }
.ls-qk-tile {
  position: relative;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: var(--c-soft);
  transition: background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-2), transform var(--dur-3) var(--ease-spring);
}
.ls-qk-tile > .ui-char { --size: 34px; color: var(--c-wm); transition: color var(--dur-3); }
.ls-qk-tile > .ls-online { right: -3px; top: -3px; width: 12px; height: 12px; }
.ls-qk-name { max-width: 66px; font-size: 12px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .ls-qk:hover .ls-qk-tile { transform: translateY(-2px); box-shadow: var(--shadow-1); } }
.ls-qk.is-busy .ls-qk-tile { animation: ls-breath 700ms ease-in-out infinite alternate; }
.ls-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.ls-empty-acts:not(:has(> :not([hidden]))) { display: none; }
.ls-copy { gap: 6px; }
.ls-copy .ui-ico { color: var(--ink-2); }

/* ---------- 搜索 ---------- */
.ls-search {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.ls-search-bar { flex: none; display: flex; align-items: center; gap: 2px; padding: 16px 6px 8px 16px; }
.ls-search-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 0 0 12px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  transition: background-color var(--dur-2), box-shadow var(--dur-2);
}
.ls-search-field:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.ls-search-ic { display: inline-flex; flex: none; }
.ls-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.3;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ls-search-input::-webkit-search-cancel-button, .ls-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.ls-search-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--muted);
  visibility: hidden;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-spring), visibility 0s linear var(--dur-2);
}
.ls-search-clear > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--placeholder);
  color: var(--surface);
}
.ls-search-field.has-q .ls-search-clear { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-spring); }
.ls-search-cancel {
  flex: none;
  min-width: 56px;
  height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 16px;
  color: var(--ink);
  transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.ls-search-cancel:active { transform: scale(.94); }
@media (hover: hover) { .ls-search-cancel:hover { background: var(--surface-2); } }
.ls-search-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 28px;
}
.ls-search-body::-webkit-scrollbar { display: none; }

.ls-hint-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 24px 24px; text-align: center; }
.ls-hint-box .ui-ico { color: var(--placeholder); }
.ls-hint-text { font-size: 14px; line-height: 1.6; color: var(--muted); }
.ls-hint-sub { font-size: 12px; color: var(--placeholder); }
.ls-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ls-chip {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.ls-chip:active { transform: scale(.95); }
@media (hover: hover) { .ls-chip:hover { background: color-mix(in srgb, var(--ink) 8%, var(--surface-2)); } }
.ls-chip-label { font-size: 12px; color: var(--placeholder); }

.ls-res-sec { padding: 16px 20px 6px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.ls-res {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 9px 20px;
  color: var(--ink);
  text-align: left;
  transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
@media (hover: hover) { .ls-res:hover { background: color-mix(in srgb, var(--ink) 3%, var(--bg)); } }
.ls-res:active { background: var(--surface-2); }
.ls-res:focus-visible { outline-offset: -3px; border-radius: 14px; }
.ls-res-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ls-res-ava { position: relative; flex: none; display: inline-flex; }
.ls-res-ava > .ls-online { right: -4px; top: 21px; width: 9px; height: 9px; }
.ls-res.is-busy { opacity: .7; }
.ls-res-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ls-res-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-res-time { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ls-res-sub { font-size: 14px; line-height: 1.45; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-hl {
  padding: 0 1px;
  border-radius: 2px;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--c-soft) 90%, transparent) 58%);
  color: var(--c-deep);
  font-weight: 700;
}
.ls-res-empty { padding-top: 56px; }

/* ---------- 发起聊天弹窗 ---------- */
/* 标题栏右侧「建群 / 取消」 */
.ls-cmp-mode {
  margin-left: auto;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.ls-cmp-mode:active { transform: scale(.94); }
@media (hover: hover) { .ls-cmp-mode:hover { background: var(--surface-2); } }
.ls-compose .ui-sheet-title { flex: 1; min-width: 0; }

.ls-cmp { position: relative; }
.ls-cmp-pane.is-ghost { position: absolute; left: 0; right: 0; pointer-events: none; }

.ls-pick-list { display: flex; flex-direction: column; gap: 2px; margin: 0 -10px; }
.ls-pick {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--ink);
  text-align: left;
  transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
@media (hover: hover) { .ls-pick:hover { background: var(--surface-2); --ls-ring: var(--surface-2); } }
.ls-pick:active { transform: scale(.98); background: var(--surface-2); --ls-ring: var(--surface-2); }
.ls-pick-ava { position: relative; }
.ls-pick-ava > .ls-online { right: -4px; top: 21px; width: 9px; height: 9px; }
.ls-pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ls-pick-name { font-size: 16px; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-pick-sub { font-size: 13px; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-pick-pres { transition: color var(--dur-3); }
.ls-pick.is-online .ls-pick-pres { color: var(--ls-online-text); }
.ls-pick-swatch {
  flex: none;
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-deep) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-on-deep);
  transition: background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring);
}
.ls-pick-swatch .ui-ico { opacity: 0; transform: scale(.4); transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-spring); }
.ls-pick.is-picked { background: var(--surface-2); --ls-ring: var(--surface-2); }
.ls-pick.is-picked .ls-pick-swatch { background: var(--c-deep); transform: scale(1.12); }
.ls-pick.is-picked .ls-pick-swatch .ui-ico { opacity: 1; transform: none; }
/* 打开对话的请求慢时：色块里转圈 */
.ls-pick-spin {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0;
  transition: opacity var(--dur-2);
}
.ls-pick.is-loading .ls-pick-spin { opacity: 1; animation: ls-spin 760ms linear infinite; }
.ls-pick.is-loading .ls-pick-swatch .ui-ico { opacity: 0; }
@keyframes ls-spin { to { transform: rotate(360deg); } }

/* 建群多选：右侧色块变成可勾选的圆圈 */
.ls-compose.is-multi .ls-pick-swatch { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 62%, transparent); }
.ls-compose.is-multi .ls-pick.is-sel { --ls-ring: color-mix(in srgb, var(--c-soft) 34%, var(--surface)); background: var(--ls-ring); }
.ls-compose.is-multi .ls-pick.is-sel .ls-pick-swatch { background: var(--c-deep); box-shadow: inset 0 0 0 1.5px var(--c-deep); transform: scale(1.08); }
.ls-compose.is-multi .ls-pick.is-sel .ls-pick-swatch .ui-ico { opacity: 1; transform: none; }

/* 还没有别的朋友 */
.ls-cmp-none { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 12px; text-align: center; }
.ls-cmp-none-ic { display: inline-flex; margin-bottom: 4px; color: var(--placeholder); }
.ls-cmp-none-t { font-size: 16px; font-weight: 600; color: var(--ink); }
.ls-cmp-none-s { font-size: 14px; line-height: 1.5; color: var(--muted); }
.ls-cmp-none .ls-copy { margin-top: 10px; }

/* 底栏：单选时不显示；多选时 已选头像 +「下一步」；群资料时「上一步」+「创建群聊」 */
.ls-compose:not(.is-multi):not(.is-form) .ui-sheet-foot { display: none; }
.ls-cmp-foot { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ls-cmp-selwrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.ls-cmp-sel { display: flex; align-items: center; flex: none; max-width: 60%; overflow: hidden; padding: 3px; }
.ls-cmp-sel:empty { display: none; }
.ls-cmp-chip {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--c-soft);
  box-shadow: 0 0 0 2px var(--surface);
}
.ls-cmp-chip + .ls-cmp-chip { margin-left: -8px; }
.ls-cmp-chip > .ui-char { --size: 19px; color: var(--c-wm); }
.ls-cmp-selhint { min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-cmp-next { flex: none; min-width: 116px; }
.ls-cmp-back, .ls-cmp-create { display: none; }
.ls-compose.is-form .ls-cmp-selwrap, .ls-compose.is-form .ls-cmp-next { display: none; }
.ls-compose.is-form .ls-cmp-back { display: inline-flex; flex: none; gap: 2px; padding-left: 10px; }
.ls-compose.is-form .ls-cmp-create { display: inline-flex; flex: 1; }
.ls-cmp-create { position: relative; transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3), transform var(--dur-1) var(--ease-out); }
.ls-cmp-create:disabled { cursor: default; }
.ls-cmp-create-t { transition: opacity var(--dur-2); }
.ls-cmp-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0;
  transition: opacity var(--dur-2);
}
.ls-cmp-create.is-loading .ls-cmp-create-t { opacity: 0; }
.ls-cmp-create.is-loading .ls-cmp-spin { opacity: 1; animation: ls-spin 760ms linear infinite; }

/* 群资料：预览（群字方块 + 群名 + 成员）、群名、群字、颜色 */
.ls-grp { display: flex; flex-direction: column; gap: 14px; padding: 2px 0 4px; }
.ls-grp-head { display: flex; align-items: center; gap: 16px; padding: 2px 0; }
.ls-grp-tile {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
  background: var(--c-soft);
}
.ls-grp-char { --size: 46px; color: var(--c-wm); }
.ls-grp-wipe { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--c-soft); }
.ls-grp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ls-grp-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ls-grp-members {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ls-grp-row { display: flex; gap: 10px; }
.ls-grp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ls-grp-field-name { flex: 1; }
.ls-grp-field-char { flex: none; width: 76px; }
.ls-grp-label { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.ls-grp-charin { padding: 6px 8px; text-align: center; font-family: var(--font-char); font-size: 24px; line-height: 30px; }
.ls-grp-note { margin-top: -6px; font-size: 12px; line-height: 1.5; color: var(--placeholder); }
.ls-grp-colors { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; margin: 0 -6px; }
.ls-grp-sw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 7px 0 5px;
  border-radius: 12px;
  transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
@media (hover: hover) { .ls-grp-sw:hover { background: var(--surface-2); } }
.ls-grp-sw:active { transform: scale(.92); }
.ls-grp-sw:focus-visible { outline-offset: -2px; }
.ls-grp-sw-chip {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--c-soft);
  box-shadow: inset 0 0 0 1px rgba(31, 29, 26, .08);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.ls-grp-sw-chip > i {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--c-deep);
  transition: width var(--dur-3) var(--ease-spring), height var(--dur-3) var(--ease-spring), border-radius var(--dur-3);
}
.ls-grp-sw[aria-checked="true"] .ls-grp-sw-chip { box-shadow: inset 0 0 0 1px rgba(31, 29, 26, .08), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--c-deep); }
.ls-grp-sw[aria-checked="true"] .ls-grp-sw-chip > i { width: 12px; height: 12px; border-radius: 4px; }
.ls-grp-sw-n { font-size: 11px; line-height: 1.2; color: var(--muted); white-space: nowrap; transition: color var(--dur-2); }
.ls-grp-sw[aria-checked="true"] .ls-grp-sw-n { color: var(--ink); font-weight: 600; }

/* 我的今天（我有 24 小时内的故事才出现，代替「记录今天」）：没有"未看"描边和小圆点；纯文字帧没有封面图时露出浅色底 */
.ls-story.is-mine .ls-story-pic { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--line); }
.ls-story.is-mine .ls-story-new { display: none; }