/* 易遇 · 手机里的一场争夺 */

:root{
  --bg:#0B0B0D;
  --panel:rgba(20,20,23,.52);
  --panel-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --ink:#EDEDEF;
  --dim:#A3A3A9;
  --faint:#707077;
  --amber:#C9C9CE;
  --amber-ink:#F5F5F7;
  --warn:#D2D2D6;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.35);

  --hover:rgba(255,255,255,.045);
  --active:rgba(255,255,255,.085);
  --head:rgba(11,11,13,.58);
  --field:rgba(255,255,255,.06);
  --chip:rgba(255,255,255,.05);
  --bubble-him:rgba(255,255,255,.065);
  --bubble-him-line:rgba(255,255,255,.10);
  --bubble-me:#ECECEF;
  --bubble-me-line:#FFFFFF;
  --bubble-me-ink:#101012;
  --send-bg:#ECECEF;
  --send-ink:#0B0B0D;
  --mono-av:linear-gradient(150deg, #303036, #1B1B1F);
  --atmos-line:rgba(255,255,255,.20);
  --atmos-fill:#FFFFFF;
  --atmos-ghost:rgba(255,255,255,.22);
  --sweep:rgba(255,255,255,.10);
  --fx-a:rgba(255,255,255,.55);
  --fx-b:rgba(0,0,0,.55);
  --modal-bg:rgba(0,0,0,.62);
  --modal-box:#161618;

  --ui:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
  --display:"Didot","Bodoni MT","Bodoni 72","Playfair Display","Times New Roman",Georgia,serif;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC","SimSun",Georgia,serif;
}

/* 四个世界的底色：浅灰 → 中灰 → 深灰 → 黑 */
body[data-world="real"]{
  --bg:#E7E7EA;
  --panel:rgba(255,255,255,.50);
  --panel-2:rgba(255,255,255,.72);
  --line:rgba(0,0,0,.09);
  --line-2:rgba(0,0,0,.17);
  --ink:#131315;
  --dim:#4B4B51;
  --faint:#7B7B82;
  --amber:#131315;
  --amber-ink:#0A0A0C;
  --warn:#242428;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.07);
  --hover:rgba(0,0,0,.04);
  --active:rgba(0,0,0,.065);
  --head:rgba(231,231,234,.58);
  --field:rgba(255,255,255,.70);
  --chip:rgba(255,255,255,.62);
  --bubble-him:rgba(255,255,255,.68);
  --bubble-him-line:rgba(0,0,0,.07);
  --bubble-me:#141416;
  --bubble-me-line:#000000;
  --bubble-me-ink:#F3F3F5;
  --send-bg:#141416;
  --send-ink:#F4F4F6;
  --mono-av:linear-gradient(150deg, #F1F1F4, #DCDCE1);
  --atmos-line:rgba(0,0,0,.22);
  --atmos-fill:#0A0A0C;
  --atmos-ghost:rgba(0,0,0,.26);
  --sweep:rgba(0,0,0,.06);
  --fx-a:rgba(0,0,0,.55);
  --fx-b:rgba(255,255,255,.55);
  --modal-bg:rgba(255,255,255,.52);
  --modal-box:rgba(248,248,250,.94);
}

body[data-world="old"]{ --bg:#2A2B2F; }
body[data-world="mo"]{ --bg:#151619; }
body[data-world="star"]{ --bg:#070709; --atmos-line:rgba(255,255,255,.26); }

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  transition:background-color .9s ease, color .6s ease;
}

[hidden]{ display:none !important; }

/* ================= 背景 · 巨字 ================= */

.atmos{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.atmos::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:radial-gradient(closest-side, var(--sweep), transparent 70%);
  animation:sweep 48s ease-in-out infinite alternate;
}

@keyframes sweep{
  from{ transform:translate3d(-8%,-6%,0) scale(1); }
  to{ transform:translate3d(10%,8%,0) scale(1.18); }
}

.atmos__word{
  position:absolute;
  font-family:var(--display);
  line-height:.78;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
  transition:color .9s ease, opacity .9s ease, -webkit-text-stroke-color .9s ease;
}

.atmos__word--yiyu{
  top:-2%;
  left:-5%;
  font-size:clamp(130px,25vw,420px);
  letter-spacing:-.045em;
  color:transparent;
  -webkit-text-stroke:1px var(--atmos-line);
  opacity:.85;
  transform:rotate(-7deg);
  animation:driftY 74s ease-in-out infinite alternate, breatheY 21s ease-in-out infinite alternate;
}

.atmos__word--love{
  right:-8%;
  bottom:-14%;
  font-size:clamp(190px,38vw,620px);
  font-style:italic;
  letter-spacing:-.07em;
  color:var(--atmos-fill);
  opacity:.13;
  transform:rotate(5deg);
  animation:driftL 96s ease-in-out infinite alternate, breatheL 27s ease-in-out infinite alternate;
}

.atmos__ghost{
  position:absolute;
  right:5%;
  top:44%;
  writing-mode:vertical-rl;
  font-family:var(--display);
  font-size:clamp(26px,3.4vw,48px);
  font-style:italic;
  letter-spacing:.22em;
  color:var(--atmos-ghost);
  transition:color .9s ease;
  animation:ghostDrift 23s ease-in-out infinite alternate;
}
.atmos__ghost::after{ content:"stay"; }
body[data-world="old"] .atmos__ghost::after{ content:"sea"; }
body[data-world="mo"] .atmos__ghost::after{ content:"wait"; }
body[data-world="star"] .atmos__ghost::after{ content:"mine"; }

@keyframes driftY{
  from{ transform:translate3d(0,0,0) rotate(-7deg); }
  to{ transform:translate3d(4vw,-3vh,0) rotate(-5deg); }
}

@keyframes driftL{
  from{ transform:translate3d(0,0,0) rotate(5deg); }
  to{ transform:translate3d(-5vw,-2vh,0) rotate(3deg); }
}

@keyframes breatheY{
  from{ opacity:.62; }
  to{ opacity:.92; }
}

@keyframes breatheL{
  from{ opacity:.09; }
  to{ opacity:.16; }
}

@keyframes ghostDrift{
  from{ transform:translateY(-10px); opacity:.65; }
  to{ transform:translateY(10px); opacity:1; }
}

button{ font-family:inherit; }

/* ================= 开场 ================= */

.gate{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(255,255,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(235,235,238,.26) 0%, rgba(218,218,223,.58) 100%);
  transition:opacity .6s ease, visibility .6s;
}

.gate.is-out{ opacity:0; visibility:hidden; }

.gate__inner{ text-align:center; padding:0 24px; }

.gate__q{
  margin:0 0 clamp(34px,6vh,56px);
  font-size:.82rem;
  letter-spacing:.34em;
  text-indent:.34em;
  color:var(--dim);
  animation:gateIn .9s ease both;
}

.gate__acts{
  display:flex;
  gap:14px;
  justify-content:center;
  animation:gateIn 1.1s .12s ease both;
}

@keyframes gateIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

.gate__btn{
  min-width:132px;
  padding:.95em 1.6em;
  border-radius:2px;
  font-size:.95rem;
  letter-spacing:.26em;
  text-indent:.26em;
  cursor:pointer;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease;
}

.gate__btn--stay{
  border:1px solid #111113;
  background:#141416;
  color:#F4F4F6;
  box-shadow:0 2px 0 rgba(0,0,0,.18), 0 14px 34px rgba(0,0,0,.18);
}
.gate__btn--stay:hover,.gate__btn--stay:focus-visible{
  background:#000000;
  color:#FFFFFF;
  outline:none;
}

.gate__btn--leave{
  border:1px solid rgba(0,0,0,.22);
  background:rgba(255,255,255,.55);
  color:var(--dim);
}
.gate__btn--leave:hover,.gate__btn--leave:focus-visible{
  border-color:rgba(0,0,0,.45);
  color:var(--ink);
  outline:none;
}

.gate__disc{
  margin-top:24px;
  padding:.4em .6em;
  border:0;
  background:none;
  color:rgba(0,0,0,.3);
  font-size:.62rem;
  letter-spacing:.2em;
  cursor:pointer;
  animation:gateIn 1.1s .2s ease both;
  transition:color .25s ease;
}
.gate__disc:hover,.gate__disc:focus-visible{ color:rgba(0,0,0,.6); outline:none; }

/* ================= 离开确认 ================= */

.modal{
  position:fixed;
  inset:0;
  z-index:70;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(8px);
  animation:fadeIn .3s ease both;
}

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.modal__box{
  width:min(320px,84vw);
  padding:26px 22px 18px;
  border:1px solid var(--line-2);
  border-radius:6px;
  background:var(--modal-box);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  text-align:center;
  animation:gateIn .35s ease both;
}

.modal__box--wide{
  width:min(460px,90vw);
  padding:24px;
  text-align:left;
}
.modal__box--wide .modal__q{ margin-bottom:14px; letter-spacing:.18em; }
.modal__box--wide .modal__acts{ margin-top:18px; }

.disc{
  max-height:min(58vh,420px);
  overflow-y:auto;
  padding-right:4px;
  scrollbar-width:thin;
}
.disc p{
  margin:0 0 12px;
  font-size:.72rem;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--dim);
}
.disc p:last-child{ margin-bottom:0; }

.modal__q{
  margin:0 0 22px;
  font-size:.95rem;
  letter-spacing:.12em;
  color:var(--ink);
}

.modal__acts{ display:flex; gap:10px; }

.modal__yes,.modal__no{
  flex:1;
  padding:.75em 0;
  border-radius:2px;
  font-size:.86rem;
  letter-spacing:.2em;
  cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}

.modal__yes{
  border:1px solid var(--line-2);
  background:transparent;
  color:var(--ink);
}
.modal__yes:hover{ background:var(--ink); color:var(--bg); }

.modal__no{
  border:1px solid var(--line-2);
  background:transparent;
  color:var(--dim);
}
.modal__no:hover{ color:var(--ink); border-color:var(--ink); }

/* ================= 主布局 ================= */

.app{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:64px 340px 1fr;
  grid-template-rows:1fr;
  height:100vh;
  height:100dvh;
  background:transparent;
}

.side{ grid-column:2; grid-row:1; }
.chatpane{ grid-column:3; grid-row:1; }

/* ---------- 通讯录 ---------- */

.side{
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--panel);
  border-right:1px solid var(--line);
}

.side__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:26px 22px 17px;
  border-bottom:1px solid var(--line);
}

.side__head h1{
  margin:0;
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.34em;
  color:var(--faint);
}

.side__count{
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--faint);
}

.contacts{
  list-style:none;
  margin:0;
  padding:6px 0 24px;
  overflow-y:auto;
  flex:1;
  scrollbar-width:thin;
  scrollbar-color:rgba(127,127,133,.35) transparent;
}
.contacts::-webkit-scrollbar{ width:4px; }
.contacts::-webkit-scrollbar-thumb{ background:rgba(127,127,133,.35); border-radius:4px; }

.side__foot{
  flex:none;
  padding:4px 14px 14px;
  text-align:center;
}
.side__disc{
  padding:.3em .5em;
  border:0;
  background:none;
  color:var(--faint);
  font-size:.56rem;
  letter-spacing:.12em;
  cursor:pointer;
  transition:color .25s ease;
}
.side__disc:hover,.side__disc:focus-visible{ color:var(--dim); outline:none; }

.crow{
  position:relative;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  transition:background-color .25s ease, opacity .4s ease, transform .4s ease;
}

.crow.is-active{ background:var(--active); }
.crow.is-active .crow__name{ color:var(--amber-ink); }

.crow.is-gone{
  opacity:0;
  transform:translateX(-18px);
  pointer-events:none;
}

.crow__main{
  display:flex;
  align-items:center;
  gap:13px;
  flex:1;
  min-width:0;
  padding:13px 10px 13px 22px;
  border:0;
  background:none;
  text-align:left;
  cursor:pointer;
  color:inherit;
  transition:background-color .25s ease;
}
.crow__main:hover{ background:var(--hover); }
.crow__main:focus-visible{ outline:1px solid var(--line-2); outline-offset:-1px; }

.crow__av{
  flex:none;
  width:44px;
  height:44px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--panel-2);
  display:grid;
  place-items:center;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}

.crow__av img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 32%;
}

.crow__av--mono{
  font-size:1.02rem;
  letter-spacing:0;
  color:var(--dim);
  background:var(--mono-av);
}

.crow__txt{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.crow__name{
  font-size:.92rem;
  letter-spacing:.03em;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.crow__bio{
  font-size:.72rem;
  color:var(--dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.02em;
}

.crow--self .crow__name{ color:var(--amber-ink); }

.crow__del{
  flex:none;
  margin-right:12px;
  padding:.32em .6em;
  border:1px solid transparent;
  border-radius:3px;
  background:none;
  color:var(--faint);
  font-size:.68rem;
  letter-spacing:.08em;
  cursor:pointer;
  opacity:0;
  transition:opacity .25s ease, color .25s ease, border-color .25s ease;
}
.crow:hover .crow__del,
.crow__del:focus-visible{ opacity:1; border-color:var(--line-2); color:var(--dim); outline:none; }
.crow__del:hover{ background:var(--hover); color:var(--warn); }

/* ---------- 聊天 ---------- */

.chatpane{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  background:transparent;
}

.chathead{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 24px;
  border-bottom:1px solid var(--line);
  background:var(--head);
}

.backbtn{
  display:none;
  width:32px; height:32px;
  place-items:center;
  border:0; border-radius:50%;
  background:none;
  color:var(--dim);
  cursor:pointer;
}
.backbtn:hover{ color:var(--ink); }

.chathead__avatar{
  width:36px; height:36px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--line-2);
  flex:none;
}
.chathead__avatar img{ width:100%; height:100%; object-fit:cover; object-position:50% 32%; }

.chathead__who{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.chathead__name{ font-size:.9rem; letter-spacing:.05em; }
.chathead__state{ font-size:.66rem; color:var(--faint); letter-spacing:.08em; }
.chathead__state.is-typing{ color:var(--amber-ink); }

.iconbtn{
  width:36px; height:36px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:transparent;
  color:var(--dim);
  cursor:pointer;
  transition:color .25s ease, background-color .25s ease;
}
.iconbtn:hover,.iconbtn:focus-visible{ color:var(--ink); background:var(--hover); outline:none; }

/* ---------- 空状态 ---------- */

.chathint{
  display:none;
  flex:1;
  place-items:center;
  color:var(--faint);
  font-size:.76rem;
  letter-spacing:.3em;
  text-indent:.3em;
}

.chatpane.is-empty .chathint{ display:grid; }
.chatpane.is-empty .chathead{ opacity:0; pointer-events:none; }
.chatpane .chathead{ transition:opacity .38s ease; }
.chatpane.is-empty .thread,
.chatpane.is-empty .quick,
.chatpane.is-empty .composer{ display:none !important; }

body.is-dim{ filter:grayscale(.85) brightness(.58); transition:filter 1.2s ease; }

/* ---------- 消息 ---------- */

.thread{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:22px clamp(16px,4vw,40px) 10px;
  display:flex;
  flex-direction:column;
  gap:9px;
  scrollbar-width:thin;
  scrollbar-color:rgba(127,127,133,.35) transparent;
}
.thread::-webkit-scrollbar{ width:5px; }
.thread::-webkit-scrollbar-thumb{ background:rgba(127,127,133,.35); border-radius:4px; }

.msg{
  margin:0;
  max-width:min(560px,76%);
  padding:.62em .88em;
  font-size:.9rem;
  line-height:1.65;
  border-radius:16px;
  animation:pop .28s cubic-bezier(.22,.8,.3,1) both;
  word-break:break-word;
}

@keyframes pop{
  from{ opacity:0; transform:translateY(6px) scale(.985); }
  to{ opacity:1; transform:none; }
}

.msg--him{
  align-self:flex-start;
  background:var(--bubble-him);
  border:1px solid var(--bubble-him-line);
  border-bottom-left-radius:5px;
  color:var(--ink);
  box-shadow:var(--shadow);
}

.msg--me{
  align-self:flex-end;
  background:var(--bubble-me);
  border:1px solid var(--bubble-me-line);
  border-bottom-right-radius:5px;
  color:var(--bubble-me-ink);
}

.msg--sys{
  align-self:center;
  max-width:88%;
  padding:.3em 0;
  background:none;
  border:0;
  font-size:.66rem;
  letter-spacing:.1em;
  color:var(--faint);
  text-align:center;
}

.msg--photo{
  align-self:flex-start;
  padding:4px;
  background:var(--panel-2);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  max-width:min(300px,62%);
}
.msg--photo img{
  display:block;
  width:100%;
  max-height:min(400px,50vh);
  object-fit:cover;
  object-position:50% 24%;
  border-radius:12px;
}
.msg--photo figcaption{ padding:6px 8px 4px; font-size:.66rem; color:var(--faint); letter-spacing:.04em; }

.typing{
  align-self:flex-start;
  display:flex;
  gap:4px;
  padding:.8em .9em;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:16px 16px 16px 5px;
  box-shadow:var(--shadow);
}
.typing i{
  width:5px; height:5px; border-radius:50%;
  background:var(--faint);
  animation:blink 1.3s infinite;
}
.typing i:nth-child(2){ animation-delay:.18s; }
.typing i:nth-child(3){ animation-delay:.36s; }

@keyframes blink{
  0%,60%,100%{ opacity:.25; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-2px); }
}

/* ---------- 快捷语 / 输入 ---------- */

.quick{
  display:flex;
  gap:8px;
  padding:4px clamp(16px,4vw,40px) 10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.quick::-webkit-scrollbar{ display:none; }

.quick__chip{
  flex:none;
  padding:.5em .9em;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--chip);
  color:var(--dim);
  font-size:.76rem;
  letter-spacing:.02em;
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.quick__chip:hover,.quick__chip:focus-visible{
  color:var(--ink);
  border-color:var(--ink);
  background:var(--active);
  outline:none;
}

.composer{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px clamp(16px,4vw,40px) 16px;
  border-top:1px solid var(--line);
}

.composer__input{
  flex:1;
  min-width:0;
  height:42px;
  padding:0 18px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--panel-2);
  color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
  font-family:inherit;
  font-size:.88rem;
  outline:none;
  transition:border-color .25s ease;
}
.composer__input::placeholder{ color:var(--faint); }
.composer__input:focus{ border-color:var(--dim); }

.composer__send{
  flex:none;
  width:42px; height:42px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:var(--field);
  color:var(--faint);
  cursor:pointer;
  transition:background-color .25s ease, color .25s ease;
}
.composer__send.is-live{ background:var(--send-bg); color:var(--send-ink); }

/* ================= 通话 ================= */

.callscreen{
  position:fixed;
  inset:0;
  z-index:65;
  display:grid;
  place-items:center;
  background:
    radial-gradient(85% 55% at 50% 20%, rgba(255,255,255,.07), transparent 68%),
    linear-gradient(180deg, #1A1A1E 0%, #08080A 100%);
  color:#EDEDEF;
  animation:fadeIn .35s ease both;
}

.callscreen__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 30px;
}

.callscreen__state{
  margin:0 0 30px;
  font-size:.7rem;
  letter-spacing:.3em;
  color:rgba(237,237,239,.5);
}

.callscreen__avatar{
  width:98px; height:98px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  margin-bottom:18px;
}
.callscreen__avatar img{ width:100%; height:100%; object-fit:cover; object-position:50% 32%; filter:brightness(.94); }

.callscreen__name{
  margin:0 0 8px;
  font-size:1.42rem;
  letter-spacing:.32em;
  text-indent:.32em;
  color:#F2F2F4;
}

.callscreen__time{
  margin:0 0 24px;
  font-size:.78rem;
  letter-spacing:.14em;
  color:rgba(237,237,239,.55);
}

.callscreen__say{
  min-height:3.2em;
  margin:0 0 36px;
  font-size:1rem;
  line-height:1.8;
  color:#F2F2F4;
  max-width:20em;
  opacity:0;
  transition:opacity .6s ease;
}
.callscreen__say.is-on{ opacity:1; }

.callscreen__hang{
  width:60px; height:60px;
  border-radius:50%;
  border:0;
  background:#EDEDEF;
  color:#0B0B0D;
  font-size:.7rem;
  letter-spacing:.1em;
  cursor:pointer;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  transition:transform .2s ease;
}
.callscreen__hang:hover{ transform:scale(1.05); }

/* ================= 损坏特效 ================= */

.fx{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s linear;
}

.fx.is-on{ opacity:1; }

.fx__bars{ position:absolute; inset:0; overflow:hidden; }

.fx__bars span{
  position:absolute;
  left:-4%;
  width:108%;
  height:6px;
  background:rgba(255,255,255,.10);
  animation:tear .42s steps(2,end) infinite;
}

.fx__bars span:nth-child(3n){
  background:rgba(255,255,255,.42);
}
.fx__bars span:nth-child(3n+1){
  background:rgba(0,0,0,.55);
}
.fx__bars span:nth-child(5n){
  background:rgba(255,255,255,.7);
  box-shadow:0 6px 0 rgba(0,0,0,.35), 0 -6px 0 rgba(0,0,0,.35);
}

@keyframes tear{
  0%{ transform:translateX(0); }
  50%{ transform:translateX(-26px); }
  100%{ transform:translateX(14px); }
}

.fx__noise{
  position:absolute;
  inset:0;
  opacity:.34;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  background-size:180px 180px;
  animation:noiseShift .18s steps(3) infinite;
}

@keyframes noiseShift{
  0%{ transform:translate(0,0); }
  33%{ transform:translate(-8px,4px); }
  66%{ transform:translate(6px,-6px); }
}

.fx__flash{
  position:absolute;
  inset:0;
  background:#000000;
  opacity:0;
}

.fx__flash.is-on{ animation:flash .18s ease-out; }

@keyframes flash{
  0%{ opacity:.62; }
  100%{ opacity:0; }
}

body.is-glitching .app,
body.is-glitching .gate{
  animation:shake .26s steps(2,end) infinite;
}

@keyframes shake{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(-3px,2px); }
  50%{ transform:translate(3px,-1px); }
  75%{ transform:translate(-2px,-2px); }
  100%{ transform:translate(2px,1px); }
}

body.is-glitching .app{ filter:contrast(1.14); }

body.is-glitching .crow__name,
body.is-glitching .chathead__name,
body.is-glitching .crow__bio,
body.is-glitching .msg{
  text-shadow:2.2px 0 rgba(255,255,255,.5), -2.2px 0 rgba(0,0,0,.55);
}

body.is-glitching{ animation:blinkOut .3s steps(2,end) infinite; }

@keyframes blinkOut{
  0%,100%{ opacity:1; }
  50%{ opacity:.9; }
}

/* ================= 细微的活 ================= */

/* 语音条 */
.msg--voice{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  cursor:pointer;
  user-select:none;
}

.msg__wave{
  display:flex;
  align-items:center;
  gap:2px;
  height:14px;
}

.msg__wave i{
  display:block;
  width:2px;
  border-radius:1px;
  background:var(--dim);
  opacity:.6;
}

.msg--voice.is-open .msg__wave i{ animation:wave 1s ease-in-out infinite; }

@keyframes wave{
  0%,100%{ transform:scaleY(.55); }
  50%{ transform:scaleY(1); }
}

.msg__dur{
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--faint);
}

.msg__transcript{
  display:none;
  flex-basis:100%;
  padding-top:7px;
  margin-top:2px;
  border-top:1px dashed var(--line);
  font-size:.84rem;
  line-height:1.6;
  color:var(--ink);
}

.msg--voice.is-open .msg__transcript{ display:block; }

/* 撤回 */
.msg.is-recalling{
  opacity:0;
  transform:translateY(-2px) scale(.98);
  transition:opacity .36s ease, transform .36s ease;
}

/* 已读 */
.msg__read{
  display:block;
  margin-top:2px;
  font-size:.6rem;
  line-height:1.2;
  letter-spacing:.1em;
  text-align:right;
  color:inherit;
  opacity:.5;
  animation:none;
}

/* 通讯录里的未读 / 正在输入 */
.crow__dot{
  display:inline-block;
  width:6px;
  height:6px;
  margin-left:7px;
  border-radius:50%;
  background:var(--warn);
  vertical-align:2px;
  animation:dotPulse 2.2s ease-in-out infinite;
}

@keyframes dotPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}

.crow--unread .crow__bio{ color:var(--amber-ink); }

.crow__bio--typing{
  color:var(--amber-ink);
  animation:typingFade 1.4s ease-in-out infinite;
}

@keyframes typingFade{
  0%,100%{ opacity:.45; }
  50%{ opacity:1; }
}

/* 点一下头像 */
.chathead__avatar{ cursor:pointer; }
.chathead__avatar.is-nudge{ animation:nudge .5s ease; }

@keyframes nudge{
  0%,100%{ transform:translateX(0) rotate(0); }
  22%{ transform:translateX(-2px) rotate(-2.5deg); }
  48%{ transform:translateX(2px) rotate(2deg); }
  72%{ transform:translateX(-1px) rotate(-1deg); }
}

/* 通话里，你也能说话 */
.callscreen__acts{
  display:flex;
  align-items:center;
  gap:30px;
}

.callscreen__talk{
  width:60px;
  height:60px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.06);
  color:#EDEDEF;
  font-size:.7rem;
  letter-spacing:.1em;
  cursor:pointer;
  transition:background-color .25s ease, border-color .25s ease;
}
.callscreen__talk:hover,
.callscreen__talk:focus-visible{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.5);
  outline:none;
}

.callscreen__sheet{
  position:absolute;
  left:50%;
  bottom:130px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  width:min(300px,82vw);
  max-height:calc(100vh - 300px);
  max-height:calc(100dvh - 300px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
  scrollbar-width:thin;
  animation:gateIn .3s ease both;
}

.callscreen__sheet button{
  padding:.72em 1em;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(10,10,12,.72);
  color:#EDEDEF;
  font-size:.8rem;
  letter-spacing:.04em;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background-color .2s ease, border-color .2s ease;
}
.callscreen__sheet button:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.44);
}

/* ================= 标签栏 ================= */

.tabs{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  padding:16px 9px;
  background:var(--panel);
  border-right:1px solid var(--line);
}

.tabs__btn{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:58px;
  padding:0;
  border:0;
  border-radius:8px;
  background:none;
  color:var(--faint);
  font-size:.58rem;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color .25s ease, background-color .25s ease;
}
.tabs__btn svg{ width:20px; height:20px; }
.tabs__btn:hover{ background:var(--hover); color:var(--dim); }
.tabs__btn.is-active{ color:var(--ink); }
.tabs__btn.is-active::before{
  content:"";
  position:absolute;
  left:2px;
  top:16px;
  bottom:16px;
  width:2px;
  border-radius:2px;
  background:var(--ink);
}
.tabs__btn:focus-visible{ outline:1px solid var(--line-2); outline-offset:-2px; }

.tabs__dot{
  position:absolute;
  top:14px;
  right:calc(50% - 18px);
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--warn);
  box-shadow:0 0 0 2px var(--panel);
  animation:dotPulse 2.2s ease-in-out infinite;
}

.tabs__btn.is-born{ animation:tabBorn .9s ease; }

@keyframes tabBorn{
  0%{ opacity:0; transform:scale(.9); }
  40%{ opacity:1; transform:scale(1.06); }
  100%{ opacity:1; transform:none; }
}

/* ================= 朋友圈 / 日记 ================= */

.momentspane,
.diarypane{
  display:none;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(127,127,133,.35) transparent;
}
.momentspane::-webkit-scrollbar,
.diarypane::-webkit-scrollbar{ width:5px; }
.momentspane::-webkit-scrollbar-thumb,
.diarypane::-webkit-scrollbar-thumb{ background:rgba(127,127,133,.35); border-radius:4px; }

.app[data-view="moments"] .momentspane,
.app[data-view="diary"] .diarypane{ display:flex; }

.app[data-view="moments"] .momentspane,
.app[data-view="diary"] .diarypane{ grid-column:2 / 4; grid-row:1; }

.app[data-view="moments"] .side,
.app[data-view="diary"] .side,
.app[data-view="moments"] .chatpane,
.app[data-view="diary"] .chatpane{ display:none; }

/* ---- 朋友圈 ---- */

.moments{
  width:100%;
  max-width:660px;
  margin:0 auto;
  padding-bottom:90px;
}

.mo-cover{
  position:relative;
  height:clamp(170px,26vh,240px);
  overflow:hidden;
  background:#1A1A1E;
}
.mo-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
  filter:grayscale(1) brightness(.72) contrast(1.05);
  transform:scale(1.02);
}
.mo-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.62) 100%);
}
.mo-cover__sign{
  position:absolute;
  right:18px;
  bottom:16px;
  z-index:1;
  margin:0;
  font-size:.68rem;
  letter-spacing:.14em;
  color:rgba(255,255,255,.78);
}

.mo-me{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  gap:14px;
  margin-top:-24px;
  padding:0 20px 20px;
  border-bottom:1px solid var(--line);
}
.mo-me__av{
  flex:none;
  width:64px;
  height:64px;
  border-radius:8px;
  overflow:hidden;
  border:2px solid var(--bg);
  box-shadow:var(--shadow);
}
.mo-me__av img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.mo-me__who{ padding-bottom:3px; min-width:0; }
.mo-me__name{ margin:0 0 3px; font-size:.98rem; letter-spacing:.08em; color:var(--ink); }
.mo-me__sig{
  margin:0;
  font-size:.66rem;
  letter-spacing:.04em;
  color:var(--faint);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mo{
  display:flex;
  gap:12px;
  padding:20px;
  border-bottom:1px solid var(--line);
}
.mo.is-fresh{ animation:moFresh 2.8s ease; }
@keyframes moFresh{
  0%{ background:transparent; }
  12%{ background:var(--hover); }
  70%{ background:var(--hover); }
  100%{ background:transparent; }
}
.mo__av{
  flex:none;
  width:38px;
  height:38px;
  border-radius:5px;
  overflow:hidden;
  border:1px solid var(--line);
}
.mo__av img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.mo__body{ flex:1; min-width:0; }
.mo__name{ margin:0; font-size:.8rem; letter-spacing:.05em; color:var(--ink); }
.mo__tag{
  display:inline-block;
  margin-left:8px;
  padding:.14em .5em;
  border:1px solid var(--line-2);
  border-radius:3px;
  font-size:.56rem;
  letter-spacing:.1em;
  color:var(--faint);
  vertical-align:2px;
}
.mo__text{
  margin:7px 0 0;
  font-size:.88rem;
  line-height:1.78;
  color:var(--ink);
  white-space:pre-line;
}
.mo__text--more{ color:var(--dim); font-style:italic; }
.mo__text.is-locked{
  filter:blur(5px);
  opacity:.8;
  cursor:pointer;
  user-select:none;
}
.mo__lock{
  margin:8px 0 0;
  font-size:.62rem;
  letter-spacing:.12em;
  color:var(--faint);
}
.mo__lock.is-warn{ animation:shake .36s ease; color:var(--ink); }
.mo__more{
  margin-top:6px;
  padding:0;
  border:0;
  background:none;
  color:var(--faint);
  font-size:.6rem;
  letter-spacing:.16em;
  cursor:pointer;
}
.mo__more:hover{ color:var(--ink); }
.mo__img{ margin:10px 0 0; max-width:min(380px,100%); }
.mo__img img{
  display:block;
  width:100%;
  max-height:380px;
  object-fit:cover;
  border-radius:4px;
}
.mo__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  font-size:.62rem;
  color:var(--faint);
}
.mo__time{ letter-spacing:.08em; }
.mo__like{
  padding:.3em .55em;
  border:1px solid transparent;
  border-radius:999px;
  background:none;
  color:var(--faint);
  font-size:.66rem;
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.mo__like:hover{ color:var(--ink); border-color:var(--line-2); }
.mo__like.is-on{ color:var(--ink); background:var(--hover); }
.mo__cmts{
  margin-top:8px;
  padding:8px 11px;
  background:var(--hover);
  border-radius:4px;
  font-size:.72rem;
  line-height:1.75;
}
.mo__cmt{ margin:0; color:var(--dim); }
.mo__cmt + .mo__cmt{ margin-top:2px; }
.mo__cmt b{ font-weight:500; color:var(--ink); }

/* ---- 日记 ---- */

.diary{
  width:100%;
  max-width:620px;
  margin:0 auto;
  padding:clamp(40px,8vh,72px) 26px 130px;
}

.diaryhead{ margin-bottom:38px; }
.diaryhead__kicker{
  margin:0 0 10px;
  font-family:var(--serif);
  font-size:1.5rem;
  letter-spacing:.22em;
  color:var(--ink);
}
.diaryhead__sub{
  margin:0;
  font-size:.64rem;
  letter-spacing:.26em;
  color:var(--faint);
}

.diary__entry{
  position:relative;
  padding:0 0 44px 22px;
  border-left:1px solid var(--line-2);
}
.diary__entry::before{
  content:"";
  position:absolute;
  left:-3px;
  top:6px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--faint);
}
.diary__date{
  margin:0 0 10px;
  font-size:.64rem;
  letter-spacing:.2em;
  color:var(--faint);
}
.diary__text{
  margin:0;
  font-family:var(--serif);
  font-size:.98rem;
  line-height:2.05;
  letter-spacing:.01em;
  color:var(--ink);
  white-space:pre-line;
}
.diary__entry--stain .diary__text{
  -webkit-mask-image:radial-gradient(120% 120% at 30% 20%, #000 60%, rgba(0,0,0,.55) 100%);
  mask-image:radial-gradient(120% 120% at 30% 20%, #000 60%, rgba(0,0,0,.55) 100%);
}
.diary__entry--torn{ border-left-style:dashed; cursor:pointer; }
.diary__torn{
  margin:0;
  font-size:.8rem;
  letter-spacing:.12em;
  color:var(--faint);
}
.diary__ghost{
  display:none;
  margin:12px 0 0;
  font-family:var(--serif);
  font-size:.9rem;
  font-style:italic;
  letter-spacing:.18em;
  color:var(--dim);
}
.diary__entry--torn.is-revealed .diary__torn{ opacity:.45; }
.diary__entry--torn.is-revealed .diary__ghost{ display:block; animation:gateIn .5s ease both; }
.diary__entry--today::before{
  background:var(--ink);
  box-shadow:0 0 0 3px var(--hover);
}
.diary__entry--today .diary__date{ color:var(--ink); }
.diary__blank{
  margin:0;
  font-size:.62rem;
  letter-spacing:.24em;
  color:var(--faint);
  text-align:center;
}

/* ================= 手机 ================= */

@media (max-width:860px){
  .app{
    grid-template-columns:1fr;
    grid-template-rows:1fr;
  }

  .side,
  .chatpane,
  .momentspane,
  .diarypane{
    grid-area:1 / 1;
    height:100vh;
    height:100dvh;
  }

  .tabs{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:45;
    grid-column:auto;
    grid-row:auto;
    flex-direction:row;
    align-items:stretch;
    gap:0;
    height:calc(56px + env(safe-area-inset-bottom));
    padding:0 0 env(safe-area-inset-bottom);
    border-right:0;
    border-top:1px solid var(--line);
    background:var(--head);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
  }
  .tabs__btn{
    flex:1;
    height:56px;
    gap:3px;
    border-radius:0;
    font-size:.56rem;
  }
  .tabs__btn svg{ width:21px; height:21px; }
  .tabs__btn.is-active::before{
    left:50%;
    top:0;
    bottom:auto;
    width:24px;
    height:2px;
    transform:translateX(-50%);
  }
  .tabs__dot{ top:10px; right:calc(50% - 17px); }

  .app[data-view="chat"] .tabs{ display:none; }

  .app[data-view="chat"] .side,
  .app[data-view="chat"] .momentspane,
  .app[data-view="chat"] .diarypane{ display:none; }

  .app[data-view="contacts"] .chatpane,
  .app[data-view="contacts"] .momentspane,
  .app[data-view="contacts"] .diarypane{ display:none; }

  .app[data-view="moments"] .side,
  .app[data-view="moments"] .chatpane,
  .app[data-view="moments"] .diarypane{ display:none; }
  .app[data-view="moments"] .momentspane{
    display:flex;
    grid-area:1 / 1;
  }

  .app[data-view="diary"] .side,
  .app[data-view="diary"] .chatpane,
  .app[data-view="diary"] .momentspane{ display:none; }
  .app[data-view="diary"] .diarypane{
    display:flex;
    grid-area:1 / 1;
  }

  .backbtn{ display:grid; }

  .side__head{ padding-top:calc(24px + env(safe-area-inset-top)); }

  .chathead{
    padding-top:calc(12px + env(safe-area-inset-top));
  }

  .composer{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); }

  .crow__del{ opacity:1; }

  .contacts{ padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
  .side__foot{ padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
  .momentspane,
  .diarypane{ padding-top:env(safe-area-inset-top); }
  .moments{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .diary{ padding-bottom:calc(124px + env(safe-area-inset-bottom)); }

  .gate__acts{ flex-direction:column; gap:10px; }
  .gate__btn{ width:min(240px,72vw); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}