:root {
  --blue:#1495ed;
  --text:#161616;
  --sub:#96989e;
  --line:#e4e4e7;
  --side:#f1f5ff;
  --chat:#f0eff2;
  --bubble:#fff;
  --header:#f1f1f1;
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
* {
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}
html,body {
  height:100%;
  margin:0;
  overflow:hidden;
}
body {
  font:15px/1.4 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  color:var(--text);
  background:var(--side);
}
button,input {
  font:inherit;
}
button {
  cursor:pointer;
}
button:disabled {
  opacity:.5;
  cursor:wait;
}
button:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:2px solid #1688e8;
  outline-offset:2px;
}
[hidden],.hidden {
  display:none!important;
}
.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip-path:inset(50%);
  white-space:nowrap;
  padding:0!important;
  border:0!important;
}
.svg-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.icon {
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
.app-shell {
  height:100dvh;
  width:100%;
  display:flex;
  overflow:hidden;
  background:var(--chat);
}
.sidebar {
  position:relative;
  display:flex;
  flex-direction:column;
  flex:none;
  width:350px;
  min-height:0;
  background:var(--side);
  border-right:1px solid var(--line);
}
.side-header {
  display:flex;
  align-items:center;
  gap:6px;
  height:60px;
  flex:none;
  padding:11px 18px 9px;
  background:linear-gradient(#edf4fe,var(--side));
}
.app-avatar {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:none;
  border-radius:50%;
  background:#83b6e6;
  color:#fff;
  overflow:hidden;
}
.app-avatar .icon {
  width:22px;
  height:22px;
  stroke-width:1.5;
}
.account {
  flex:1;
  min-width:0;
}
.account h1 {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  font-weight:500;
  line-height:1.2;
  margin:0 0 4px;
}
.account p {
  margin:0;
  display:flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  color:#383b40;
  line-height:1.3;
}
.profile-dot {
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#a7b5c9;
}
.iconbtn {
  display:grid;
  place-items:center;
  flex:none;
  border:0;
  padding:0;
  width:28px;
  height:30px;
  background:none;
  color:#17191d;
}
.iconbtn:hover {
  background:#00000006;
  border-radius:4px;
}
.list-plus .icon {
  width:26px;
  height:26px;
  stroke-width:1.8;
}
.group-search {
  position:relative;
  display:flex;
  align-items:center;
  height:33px;
  flex:none;
  margin:2px 15px 14px;
  background:#ffffffd9;
  border-radius:10px;
  color:#999b9f;
}
.group-search .icon {
  position:absolute;
  left:calc(50% - 30px);
  width:16px;
  height:16px;
  stroke-width:1.5;
  pointer-events:none;
}
.group-search input {
  height:100%;
  width:100%;
  min-width:0;
  border:0;
  background:none;
  outline:none;
  color:var(--text);
  padding:0 25px;
  text-align:center;
  text-indent:18px;
  font-size:15.5px;
  line-height:33px;
}
.group-search input::placeholder {
  color:#999b9f;
}
.group-search:focus-within .icon,.group-search:has(input:not(:placeholder-shown)) .icon {
  left:12px;
}
.group-search:focus-within input,.group-search input:not(:placeholder-shown) {
  text-align:left;
  text-indent:0;
  padding-left:35px;
}
.list-context {
  display:flex;
  align-items:center;
  gap:22px;
  flex:none;
  height:39px;
  border:0;
  background:none;
  color:#9a9da5;
  padding:0 20px 0 28px;
  text-align:left;
}
.list-context>.icon {
  width:18px;
  height:18px;
  stroke-width:1.7;
}
.list-context>span {
  font-size:14px;
  flex:1;
}
.list-context .context-chevron {
  height:15px;
  width:15px;
  transform:rotate(180deg);
  stroke-width:1.2;
}
.groups-list {
  flex:1;
  min-height:0;
  overflow:auto;
  padding:0;
  scrollbar-width:thin;
  scrollbar-color:#d5d9e2 transparent;
}
.chip {
  width:100%;
  height:66px;
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
  padding:9px 14px 9px 13px;
  border:0;
  border-radius:0;
  background:none;
  color:var(--text);
  text-align:left;
}
.chip:hover,.chip.on {
  background:#e5ebf7;
}
.avatar-wrap {
  position:relative;
  flex:none;
}
.avatar {
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:hsl(var(--hue,210) 47% 49%);
  color:#fff;
  font-size:16px;
  font-weight:500;
  overflow:hidden;
  user-select:none;
}
/* 列表头像按用户最新要求缩小；聊天来源图标保持现有尺寸。 */
.avatar-wrap > .avatar {
  width:40px;
  height:40px;
  font-size:14px;
}
.avatar img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:var(--bubble);
}
.group-copy {
  flex:1;
  min-width:0;
}
.group-line {
  display:flex;
  align-items:baseline;
  gap:7px;
  justify-content:space-between;
}
.group-name {
  font-size:15px;
  font-weight:400;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  min-width:0;
  line-height:1.2;
}
.list-empty {
  padding:32px 20px;
  font-size:13px;
  text-align:center;
  color:var(--sub);
}
.chat-panel {
  position:relative;
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--chat);
}
.chat-header {
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  gap:6px;
  height:50px;
  flex:none;
  padding:8px 10px;
  background:var(--header);
}
.back {
  width:16px;
  height:30px;
  margin-right:2px;
}
.back .icon {
  width:20px;
  height:20px;
  stroke-width:1.5;
}
.chat-heading {
  min-width:0;
  flex:1;
}
.chat-heading h2 {
  font-weight:500;
  font-size:16px;
  line-height:1.25;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-header>.iconbtn:last-child .icon {
  width:20px;
  height:20px;
  stroke-width:1.7;
}
.header-avatar {
  display:none!important;
}
.searchbar {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:7px;
  flex:none;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  background:var(--header);
}
.searchbar>.icon {
  width:17px;
  height:17px;
  color:#9b9b9b;
}
.searchbar input {
  width:0;
  flex:1;
  min-width:0;
  border:0;
  background:var(--bubble);
  color:var(--text);
  padding:8px 10px;
  border-radius:7px;
  font-size:13px;
}
.searchbar button {
  border:0;
  border-radius:5px;
  background:#1495ed;
  color:#fff;
  font-size:12px;
  padding:7px 10px;
}
.searchbar #btnClearSearch {
  background:none;
  color:var(--sub);
  padding-left:3px;
  padding-right:0;
}
.chat-scroll {
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overflow-anchor:none;
  padding:0 12px 20px;
  scrollbar-width:thin;
  scrollbar-color:#d2d1d6 transparent;
  overscroll-behavior:contain;
  outline-offset:-3px!important;
}
.feed {
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  margin:0;
}
.msg {
  min-width:0;
}
.msg + .msg {
  margin-top:22px;
}
.msg + .msg:has(> .time-separator) {
  margin-top:0;
}
.time-separator {
  display:flex;
  justify-content:center;
  font-size:11px;
  line-height:1.4;
  color:#9c9ca0;
  padding:20px 0 18px;
}
.message-row {
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.message-row>.avatar {
  width:34px;
  height:34px;
  margin-top:1px;
  font-size:12px;
}
.message-column {
  position:relative;
  min-width:0;
  max-width:min(calc(100% - 57px),620px);
}
.msg-head {
  position:relative;
  display:flex;
  align-items:center;
  min-height:18px;
  margin:0 0 5px;
  color:#a1a1a6;
  font-size:11px;
  line-height:1.25;
}
.msg-head .src {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-right:8px;
}
.copyall {
  position:absolute;
  right:0;
  top:0;
  opacity:0;
  pointer-events:none;
  background:var(--chat);
  border:0;
  border-radius:3px;
  padding:1px 5px;
  color:#91949d;
  font-size:10px;
  line-height:1.4;
}
.message-row:hover .copyall,.copyall:focus-visible {
  opacity:1;
  pointer-events:auto;
}
.msg-body {
  position:relative;
  width:fit-content;
  min-width:50px;
  max-width:100%;
  padding:8px 9px;
  border-radius:9px;
  background:var(--bubble);
  font-size:15.5px;
  line-height:1.35;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.msg-body::before {
  content:none;
}
.msg-body p {
  margin:4px 0;
}
.msg-body a {
  color:#168ae2;
  text-decoration:none;
}
.msg-body img {
  display:block;
  width:auto;
  max-width:min(100%,190px);
  height:auto;
  max-height:500px;
  object-fit:contain;
  margin:2px 0 3px;
  border-radius:2px;
}
.msg-body .tkl {
  color:#168ae2;
  cursor:pointer;
  text-decoration:none;
}
.msg-body .tkl::after {
  content:none;
}
.msg-body .searchKeyword {
  color:#ad650d;
  background:#fff0ad;
}
.img-fallback {
  padding:14px 10px;
  margin:5px 0;
  color:#a1a7b0;
  font-size:12px;
  background:#f6f6f7;
  border-radius:3px;
}
.morebar {
  padding:9px 0 0;
  text-align:center;
}
.morebar button {
  border:0;
  background:none;
  color:#a2a2a8;
  font-size:11px;
  padding:8px 15px;
}
.empty {
  padding:80px 18px;
  text-align:center;
  color:var(--sub);
  font-size:13px;
}
.empty .big {
  display:block;
  margin-bottom:12px;
  font-size:30px;
}
.new-message-slot {
  position:absolute;
  z-index:6;
  right:12px;
  bottom:calc(18px + var(--safe-b));
}
.newpill {
  border:0;
  border-radius:5px;
  background:#fff;
  color:#278edb;
  font-size:12px;
  padding:10px 13px;
  box-shadow:0 2px 10px #00000012;
}
.jump-latest {
  position:absolute;
  right:14px;
  bottom:calc(18px + var(--safe-b));
  z-index:5;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid #e3e3e6;
  border-radius:50%;
  background:var(--bubble);
  color:#a0a4ab;
  box-shadow:0 2px 8px #00000008;
}
.jump-latest .icon {
  width:19px;
  height:19px;
}
.qq-menu {
  position:absolute;
  z-index:20;
  min-width:142px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 3px 20px #0002;
  border:1px solid #e5e5e8;
  border-radius:5px;
  padding:4px;
}
.qq-menu button {
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:none;
  color:#34373c;
  font-size:13px;
  text-align:left;
  padding:11px 14px;
  border-radius:3px;
}
.qq-menu button:hover {
  background:#f4f5f7;
}
.qq-menu .icon {
  width:17px;
  height:17px;
  color:#73777e;
}
.list-menu {
  top:51px;
  right:13px;
}
.chat-menu {
  top:45px;
  right:11px;
}
.toast {
  position:fixed;
  z-index:1000;
  left:50%;
  bottom:90px;
  transform:translateX(-50%);
  max-width:85vw;
  padding:9px 15px;
  border-radius:6px;
  background:#25282ce8;
  color:white;
  font-size:13px;
}
.sheet-mask {
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  background:#0005;
  padding:22px;
}
.sheet {
  width:min(430px,100%);
  padding:20px;
  border-radius:12px;
  background:var(--bubble);
}
.sheet h3 {
  font-size:16px;
  margin:0 0 13px;
  font-weight:500;
}
.sheet .content {
  padding:12px;
  max-height:50dvh;
  overflow:auto;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  border-radius:6px;
  background:var(--chat);
  font-size:14px;
  line-height:1.6;
}
.sheet .actions {
  display:flex;
  gap:10px;
  margin-top:14px;
}
.sheet button {
  flex:1;
  border:0;
  border-radius:6px;
  background:var(--chat);
  color:var(--sub);
  padding:9px;
}
.sheet button.copy {
  background:var(--blue);
  color:white;
}
@media(max-width:760px) {
  .sidebar {
    width:100%;
    border:0;
  }
  .side-header {
    height:calc(60px + env(safe-area-inset-top,0px));
    padding-top:calc(11px + env(safe-area-inset-top,0px));
  }
  .chip:hover,.chip.on {
    background:none;
  }
  .chat-panel {
    display:none;
  }
  .chat-open .sidebar {
    display:none;
  }
  .chat-open .chat-panel {
    display:flex;
  }
  .chat-header {
    height:calc(50px + env(safe-area-inset-top,0px));
    padding-top:calc(8px + env(safe-area-inset-top,0px));
  }
  .chat-scroll {
    scrollbar-width:none;
  }
  .msg-body img {
    max-width:min(100%,32.1vw);
    max-height:400px;
  }
  .sheet-mask {
    align-items:end;
    padding:0;
  }
  .sheet {
    width:100%;
    border-radius:12px 12px 0 0;
    padding:20px 16px max(18px,var(--safe-b));
  }
  .copyall {
    display:none;
  }
  .message-column.longpress-active .copyall {
    display:block;
    opacity:1;
    pointer-events:auto;
  }
}
@media(prefers-color-scheme:dark) {
  :root {
    --text:#e5e5e7;
    --sub:#88898d;
    --line:#2a2a2f;
    --side:#191c24;
    --chat:#19191e;
    --bubble:#2b2b31;
    --header:#232329;
    color-scheme:dark;
  }
  .side-header {
    background:linear-gradient(#202633,var(--side));
  }
  .account p {
    color:#a0a2a8;
  }
  .group-search {
    background:#252832;
  }
  .list-context {
    color:#80838f;
  }
  .iconbtn {
    color:#ddd;
  }
  .qq-menu {
    background:#2b2b31;
    border-color:#3a3a40;
  }
  .qq-menu button {
    color:#ddd;
  }
  .qq-menu button:hover {
    background:#38383d;
  }
  .newpill {
    background:#2b2b31;
  }
  .img-fallback {
    background:#22232a;
  }
  .chip:hover,.chip.on {
    background:#262c39;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

/* 本机上传的左上角头像。 */
.app-avatar { overflow:hidden; }
.app-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }