/* Canoe transfer: quiet ink card and wallet-directed receipt. Red packets stay unchanged. */
.msg-transfer{
  width:min(258px,75vw); min-width:0; max-width:258px;
  border:0!important; border-radius:22px!important;
  background:#222b30!important; color:#fff!important;
  box-shadow:0 10px 26px #1621261a!important;
  overflow:hidden;
}
.msg-transfer .tr-top{
  display:block; padding:44px 19px 19px;
  background:radial-gradient(circle at 104% -12%,#57696376 0 23%,transparent 23.5%);
}
.msg-transfer .tr-top:before{
  content:"C A N O E   /   T R A N S F E R";
  position:absolute;top:17px;left:19px;
  font-size:9px;font-weight:600;letter-spacing:.1em;color:#c5d0cd;
  white-space:nowrap;
}
.msg-transfer .tr-ico{display:none}
.msg-transfer .tr-word b{font-size:29px;font-weight:650;line-height:1.12;letter-spacing:-.035em}
.msg-transfer .tr-word b small{font-size:22px;font-weight:550;margin-right:4px}
.msg-transfer .tr-word span{
  margin-top:12px;font-size:12px;line-height:1.4;color:#d3dcda;opacity:1;
  white-space:normal;overflow-wrap:anywhere;display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.msg-transfer .tr-foot{
  min-height:34px;padding:8px 19px;
  background:#1a2226!important;color:#cbd5d1;
  font-size:11px;letter-spacing:0;
}
.msg-transfer .tr-foot em{font-style:normal;font-size:10px;color:#abb9b3}
.msg-transfer.done{background:#60706b!important}
.msg-transfer.done .tr-top{background:radial-gradient(circle at 105% -12%,#d1ddd128 0 24%,transparent 24.5%)}
.msg-transfer.done .tr-foot{background:#4c5e58!important}
.msg-transfer.back{background:#777d7e!important}
.msg-transfer.back .tr-foot{background:#656b6c!important}
.msg-transfer.done .tr-word span,.msg-transfer.back .tr-word span{color:#f2f5f2}

/* The same palette applies to the opened transfer only. */
#payActBackdrop.canoe-transfer-detail .center-card{
  position:relative;
  width:min(340px,calc(100vw - 40px));max-width:none;
  padding:0 0 11px;background:#fcfcfa;color:#20292c;
  border:0!important;border-radius:30px;box-shadow:0 24px 60px #08101230;
  overflow:hidden;
}
#payActBackdrop.canoe-transfer-detail .cc-title{
  position:absolute;clip-path:inset(50%);width:1px;height:1px;
  overflow:hidden;white-space:nowrap;padding:0;
}
#payActBackdrop.canoe-transfer-detail .pay-detail{padding:0}
#payActBackdrop.canoe-transfer-detail .pay-hero.tr{
  display:flex;flex-direction:column;align-items:flex-start;
  min-height:276px;box-sizing:border-box;
  padding:74px 24px 23px;border-radius:0 0 30px 30px;
  text-align:left;color:#fff;background:#222b30!important;
  box-shadow:none!important;
}
#payActBackdrop.canoe-transfer-detail .pay-hero.tr:before{
  content:"C A N O E  ·  转账";display:block;position:absolute;
  top:24px;left:24px;color:#c7d2cd;font-size:11px;font-weight:600;letter-spacing:.16em;
}
#payActBackdrop.canoe-transfer-detail .pay-hero.tr:after{
  content:"";position:absolute;right:-34px;top:-35px;
  width:145px;height:145px;border-radius:50%;background:#70877a3d;
}
#payActBackdrop.canoe-transfer-detail .pay-hero-avatar{
  width:40px;height:40px;margin:0 0 7px;box-shadow:none;
}
#payActBackdrop.canoe-transfer-detail .pay-hero-who{
  position:absolute;left:75px;top:87px;right:18px;
  font-size:15px;font-weight:600;opacity:1;white-space:nowrap;
  text-overflow:ellipsis;overflow:hidden;
}
#payActBackdrop.canoe-transfer-detail .pay-hero-amt{
  order:1;margin-top:32px;font-size:40px;font-weight:650;letter-spacing:-.045em;
}
#payActBackdrop.canoe-transfer-detail .pay-hero-amt:before{
  content:"转账金额";display:block;margin-bottom:8px;font-size:12px;
  font-weight:400;letter-spacing:0;color:#afc1b9;
}
#payActBackdrop.canoe-transfer-detail .pay-hero-amt small{font-size:29px}
#payActBackdrop.canoe-transfer-detail .pay-hero-note{
  order:2;margin-top:8px;font-size:13px;font-weight:400;line-height:1.4;color:#e1e9e4;
}
#payActBackdrop.canoe-transfer-detail .pay-hero-state{
  order:3;margin:14px 0 0;padding:0;background:none;border:0;
  color:#b5c4bd;font-size:11px;
}
#payActBackdrop.canoe-transfer-detail .pay-meta{
  margin:14px 24px 0;background:transparent;border-radius:0;
}
#payActBackdrop.canoe-transfer-detail .pay-meta div{
  padding:8px 0;font-size:12px;
}
#payActBackdrop.canoe-transfer-detail .pay-meta div:first-child{display:none}
#payActBackdrop.canoe-transfer-detail .pay-meta div+div{box-shadow:none}
#payActBackdrop.canoe-transfer-detail .pay-meta span{color:#8c9693}
#payActBackdrop.canoe-transfer-detail .pay-meta b{color:#222b30}
#payActBackdrop.canoe-transfer-detail .pay-btns{margin:14px 20px 0;gap:0}
#payActBackdrop.canoe-transfer-detail .pay-btn{
  min-height:52px;border:0!important;border-radius:17px;
  background:#222b30!important;color:#fff!important;font-weight:600;box-shadow:none!important;
}
#payActBackdrop.canoe-transfer-detail .pay-btn.ghost{
  background:transparent!important;color:#8c9693!important;font-size:13px;font-weight:500;
}
#payActBackdrop.canoe-transfer-detail .pay-btn.ghost.danger{color:#747c79!important}
#payActBackdrop.canoe-transfer-detail .pay-btn small{font-size:10px}
#payActBackdrop.canoe-transfer-detail .pay-close{
  position:absolute;z-index:4;right:14px;top:15px;width:32px;height:32px;
  border:0;border-radius:50%;background:#ffffff25;color:#fff;
  font-size:23px;font-weight:300;line-height:30px;cursor:pointer;
}
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .center-card{
  background:#252b2d;color:#f4f7f5;
}
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .pay-meta b{
  color:#f4f7f5;
}
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .pay-btn.ghost{
  color:#bdc7c2!important;
}
.canoe-wallet-effect{
  position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden;
}
.canoe-wallet-target{
  position:absolute;width:62px;height:62px;display:grid;place-items:center;
  border-radius:50%;background:#222b30;color:#fff;
  box-shadow:0 14px 30px #18252a38;opacity:0;
  animation:canoe-wallet-enter .7s ease both;
}
.canoe-wallet-target svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5}
.canoe-wallet-point{position:absolute;width:5px;height:5px;border-radius:50%;background:#8fa79a;will-change:transform,opacity}
.canoe-wallet-point:nth-child(3n){background:#e2d3b6}
#payActBackdrop.canoe-transfer-detail.canoe-collecting .center-card{
  animation:canoe-transfer-dismiss .68s cubic-bezier(.3,.1,.2,1) forwards;
  pointer-events:none;
}
@keyframes canoe-wallet-enter{
  0%{opacity:0;transform:scale(.65)}
  28%,70%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.8)}
}
@keyframes canoe-transfer-dismiss{
  0%{opacity:1;transform:scale(1);filter:blur(0)}
  30%{opacity:.85}
  100%{opacity:0;transform:translateY(145px) scale(.25);filter:blur(14px)}
}
@media(prefers-reduced-motion:reduce){
  #payActBackdrop.canoe-transfer-detail.canoe-collecting .center-card,
  .canoe-wallet-target{animation:none}
}

/* 1.7.19 liquid-glass redesign. These overrides replace the earlier ink concept. */
.msg-transfer,.msg.mine .msg-transfer{
  width:min(260px,76vw);max-width:260px;border:0!important;border-radius:27px!important;
  color:#20343c!important;
  background:radial-gradient(ellipse 90% 80% at 90% -18%,#fff9,transparent 83%),
             linear-gradient(142deg,#ffffffdc,#f8fcfbd0 54%,#edf7f9ba)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.8);
  backdrop-filter:blur(26px) saturate(1.8);
  box-shadow:0 12px 30px #40606d20,0 1px 3px #57748012,
             inset 0 4px 15px #ffffff96!important;
}
.msg-transfer:active{transform:scale(.975)}
.msg-transfer::before{
  content:"";display:block!important;position:absolute;z-index:0;pointer-events:none;
  inset:-36px 24% auto -26%;height:92px;border-radius:50%;
  background:#fff9;filter:blur(30px);
}
.msg-transfer::after{
  content:"";display:block!important;position:absolute;z-index:0;pointer-events:none;
  width:130px;height:100px;right:-56px;top:-51px;border-radius:50%;
  background:#a7d2de52;filter:blur(29px);
}
.msg-transfer .tr-top{display:block;padding:47px 20px 16px;background:none!important}
.msg-transfer .tr-top::before{
  content:"转账";position:absolute;top:17px;left:20px;
  color:#69828c;font-size:12px;font-weight:600;letter-spacing:0;
}
.msg-transfer .tr-word b{color:#1d313b;font-size:31px;letter-spacing:-.04em}
.msg-transfer .tr-word b small{font-size:23px}
.msg-transfer .tr-word span{
  margin-top:13px;font-size:12px;line-height:1.45;color:#536e78;
}
.msg-transfer .tr-foot{
  min-height:27px;padding:0 20px 16px;
  background:none!important;color:#78919a;font-size:11px;
}
.msg-transfer .tr-foot em{font-size:20px;line-height:14px;font-weight:300}
.msg-transfer.done,.msg-transfer.back{
  background:linear-gradient(145deg,#f8faf9ce,#e5edefb8)!important;
  box-shadow:0 8px 22px #405c6615,inset 0 4px 12px #ffffff7e!important;
}
.msg-transfer.done .tr-top,.msg-transfer.back .tr-top{background:none!important}
.msg-transfer.done .tr-word span,.msg-transfer.back .tr-word span{color:#617b84}
.msg-transfer.done .tr-foot,.msg-transfer.back .tr-foot{background:none!important}
#payActBackdrop.canoe-transfer-detail{
  align-items:flex-end;padding:0 14px calc(14px + env(safe-area-inset-bottom));
  background:#20343b38;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
#payActBackdrop.canoe-transfer-detail .center-card{
  width:min(100%,390px);max-height:min(82vh,650px);padding:0 0 12px;
  border-radius:36px;
  background:radial-gradient(ellipse 48% 38% at 94% 0%,#ffffffbf,transparent 100%),
             linear-gradient(145deg,#ffffffdf,#f6fafadc 58%,#edf6f7d1);
  -webkit-backdrop-filter:blur(30px) saturate(1.7);
  backdrop-filter:blur(30px) saturate(1.7);
  box-shadow:0 18px 56px #2846512e,inset 0 8px 25px #ffffffa0;
  transform:translateY(36px) scale(.98);
}
#payActBackdrop.canoe-transfer-detail.show .center-card{transform:none}
#payActBackdrop.canoe-transfer-detail .center-card::before{
  content:"";position:absolute;z-index:2;left:calc(50% - 21px);top:11px;
  width:42px;height:4px;border-radius:4px;background:#9eb4bcad;
}
#payActBackdrop.canoe-transfer-detail .pay-hero.tr{
  min-height:273px;display:flex;flex-direction:column;align-items:flex-start;
  padding:85px 26px 13px;background:transparent!important;color:#1c333c;
}
#payActBackdrop.canoe-transfer-detail .pay-hero.tr::before{
  content:"转账";display:block!important;top:43px;left:26px;
  color:#263e47;font-size:18px;font-weight:650;letter-spacing:0;
}
#payActBackdrop.canoe-transfer-detail .pay-hero.tr::after{
  content:"";position:absolute;z-index:0;top:-48px;right:-58px;
  width:172px;height:172px;border-radius:50%;
  background:#b9e0e690;filter:blur(54px);
}
#payActBackdrop.canoe-transfer-detail .pay-hero-avatar{width:38px;height:38px;margin:0;order:1}
#payActBackdrop.canoe-transfer-detail .pay-hero-who{
  position:absolute;left:75px;top:94px;right:24px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;font-weight:500;line-height:25px;
}
#payActBackdrop.canoe-transfer-detail .pay-hero-amt{
  order:2;margin-top:30px;font-size:40px;line-height:1.12;color:#152f39;
}
#payActBackdrop.canoe-transfer-detail .pay-hero-amt::before{display:none}
#payActBackdrop.canoe-transfer-detail .pay-hero-note{
  order:3;margin-top:13px;font-size:13px;font-weight:400;color:#607984;
}
#payActBackdrop.canoe-transfer-detail .pay-hero-state{
  order:4;margin:9px 0 0;color:#8ba2aa;
}
#payActBackdrop.canoe-transfer-detail .pay-meta{margin:0 26px;background:transparent}
#payActBackdrop.canoe-transfer-detail .pay-meta div{min-height:28px;padding:5px 0}
#payActBackdrop.canoe-transfer-detail .pay-meta span{color:#90a3aa}
#payActBackdrop.canoe-transfer-detail .pay-meta b{color:#2e4850}
#payActBackdrop.canoe-transfer-detail .pay-btns{margin:23px 20px 0;gap:2px}
#payActBackdrop.canoe-transfer-detail .pay-btn{
  min-height:55px;border-radius:27px;
  background:#dcedf1df!important;color:#184452!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 6px 18px #7196a225,inset 0 5px 11px #ffffff90!important;
  font-size:16px;
}
#payActBackdrop.canoe-transfer-detail .pay-btn.ghost{
  background:transparent!important;color:#758c94!important;box-shadow:none!important;
}
#payActBackdrop.canoe-transfer-detail .pay-close{
  right:20px;top:34px;background:#ffffff85;color:#67818b;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
html[data-theme="dark"] .msg-transfer,
html[data-theme="dark"] .msg.mine .msg-transfer{
  background:linear-gradient(145deg,#59686bc7,#34474bb8)!important;
  color:#f8faf9!important;box-shadow:0 15px 32px #0004,inset 0 4px 15px #ffffff28!important;
}
html[data-theme="dark"] .msg-transfer .tr-word b{color:#f8faf9}
html[data-theme="dark"] .msg-transfer .tr-word span,
html[data-theme="dark"] .msg-transfer .tr-foot,
html[data-theme="dark"] .msg-transfer .tr-top::before{color:#d7e4e7}
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .center-card{
  background:linear-gradient(145deg,#455358eb,#283a3feb);
  color:#f7fbfc;box-shadow:0 18px 56px #0007,inset 0 8px 24px #ffffff20;
}
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .pay-hero.tr,
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .pay-hero-amt,
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .pay-hero.tr::before,
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .pay-meta b{color:#f7fbfc}
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .pay-hero-note,
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .pay-hero-state,
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .pay-meta span{color:#c6d5d9}
html[data-theme="dark"] #payActBackdrop.canoe-transfer-detail .pay-btn{
  background:#d4eaf0e0!important;color:#173842!important;
}
.canoe-wallet-target{
  width:90px;height:42px;border-radius:23px;display:flex;
  align-items:center;justify-content:center;gap:7px;
  color:#487988;background:#e4f3f4d9;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 8px 22px #466b7929,inset 0 4px 11px #fff9;
  animation:canoe-wallet-arrive .75s ease both;
}
.canoe-wallet-target svg{width:22px;height:22px}
.canoe-wallet-target span{font-size:11px;font-weight:600}
.canoe-wallet-point{width:4px;height:4px;background:#a7cbd4}
.canoe-wallet-point:nth-child(4n){background:#fff}
#payActBackdrop.canoe-transfer-detail.canoe-collecting .center-card{
  animation:canoe-transfer-gather .7s cubic-bezier(.25,.5,.2,1) forwards;
}
@keyframes canoe-wallet-arrive{
  0%{opacity:0;transform:translateY(12px) scale(.8)}
  30%,72%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(5px) scale(.92)}
}
@keyframes canoe-transfer-gather{
  0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  30%{opacity:.83;transform:translateY(12px) scale(.97)}
  100%{opacity:0;transform:translateY(145px) scale(.58);filter:blur(10px)}
}