/* 聊天 */
.chat-list{padding:12px 12px 4px}

/* 消息行: 头像 + 内容区 横向布局 */
.crow{display:flex;gap:8px;margin-bottom:14px;align-items:flex-start}
.crow.me{flex-direction:row-reverse}
.crow .av{flex:0 0 auto}

/* 内容区(含时间+气泡): 限制最大宽度, 允许收缩, 纵向排列 */
.crow>.cbody{flex:0 1 auto;min-width:0;max-width:76%;display:flex;flex-direction:column;align-items:flex-start}
.crow.me>.cbody{align-items:flex-end}

/* 气泡: 撑满内容区宽度以内, 正常换行(修复文字竖排) */
.cbub{max-width:100%;width:fit-content;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.55;word-break:break-word;white-space:normal;box-shadow:0 2px 8px rgba(20,21,26,.05)}
.cbub.me{background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.cbub.other{background:#fff;border-bottom-left-radius:5px}

/* 时间戳 */
.crow .tmt{font-size:10px;color:#B7BCC7;margin-bottom:3px;text-align:left}
.crow.me .tmt{text-align:right}

/* 对方昵称(头像旁) */
.chat-other-name{font-size:11px;color:#8a8f99;margin-bottom:3px;margin-left:2px;font-weight:600}

/* 群聊发送者昵称 */
.g-sender-name{font-size:11px;color:#8a8f99;margin-bottom:2px;margin-left:4px}

/* 已读回执 */
.msg-read{font-size:10px;color:#B7BCC7;margin-top:3px}
.msg-read.rd{color:#5BB7FF}

/* 消息举报按钮 */
.msg-report{font-size:12px;opacity:.35;margin-top:3px;margin-left:2px;cursor:pointer;user-select:none;-webkit-user-select:none;transition:opacity .15s}
.msg-report:hover{opacity:1}
.crow.me .msg-report{display:none}
.msg-read.un{color:#B7BCC7}

/* 礼物消息气泡 - 3D立体 */
.gift-msg{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#FFF5F8 0%,#FFEAF2 50%,#FFE0EC 100%);border:1.5px solid #FFB8D4;border-radius:16px;padding:12px 16px;max-width:100%;box-shadow:0 4px 16px rgba(255,100,150,.2),inset 0 1px 0 rgba(255,255,255,.7);position:relative;overflow:hidden}
.gift-msg::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.4) 0%,transparent 60%);animation:giftShine 3s ease-in-out infinite}
@keyframes giftShine{0%,100%{transform:translate(-30%,-30%)}50%{transform:translate(30%,30%)}}
.gift-msg .gift-ic{font-size:38px;line-height:1;flex:0 0 auto;filter:drop-shadow(0 3px 6px rgba(255,80,130,.45));animation:giftBounce 2s ease-in-out infinite;position:relative;z-index:1}
@keyframes giftBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.08)}}
.gift-msg .gift-info{display:flex;flex-direction:column;min-width:0;position:relative;z-index:1}
.gift-msg .gift-nm{font-size:14px;font-weight:800;color:#E0407A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.gift-msg .gift-px{font-size:11px;color:#C77BA0;margin-top:2px;font-weight:600}
.gift-msg.e-epic{background:linear-gradient(135deg,#F3E8FF,#E9D5FF);border-color:#C084FC;box-shadow:0 4px 20px rgba(160,107,255,.3)}
.gift-msg.e-legend{background:linear-gradient(135deg,#FFFBEB,#FEF3C7);border-color:#F59E0B;box-shadow:0 4px 24px rgba(245,158,11,.35)}
.gift-msg.e-glory{background:linear-gradient(135deg,#FEF2F2,#FECACA);border-color:#EF4444;box-shadow:0 4px 28px rgba(239,68,68,.4)}

/* ============================================================
   全屏礼物动画 V2 (抖音式: Canvas物理粒子 + 暗角 + 体积光柱 + 镜头光晕)
   ============================================================ */
.gift-fs{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;transition:opacity .5s ease}
.gift-fs.ge-v2{background:transparent}
/* 暗角背景: 中心透光+边缘压暗 */
.ge-vignette{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at center,rgba(20,10,40,.35) 0%,rgba(10,5,25,.7) 45%,rgba(0,0,0,.92) 100%);
  animation:geVignetteIn .4s ease forwards;}
@keyframes geVignetteIn{from{opacity:0}to{opacity:1}}
/* Canvas粒子层 */
.ge-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
/* 体积光柱(传说/荣耀级): 6道旋转光束 */
.ge-rays{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1;pointer-events:none}
.ge-rays::before,.ge-rays::after{content:'';position:absolute;left:-3px;top:-45vh;width:6px;height:90vh;
  background:linear-gradient(to bottom,transparent,rgba(255,215,0,.5),rgba(255,107,53,.4),transparent);
  filter:blur(3px);transform-origin:50% 50%;animation:geRaySpin 3s linear infinite}
.ge-rays::after{animation-duration:4s;animation-direction:reverse;opacity:.7}
.ge-rays span{position:absolute;left:-3px;top:-45vh;width:6px;height:90vh;
  background:linear-gradient(to bottom,transparent,rgba(255,215,0,.45),transparent);
  filter:blur(4px);transform-origin:50% 50%;animation:geRaySpin 3.5s linear infinite}
.ge-rays span:nth-child(1){transform:rotate(60deg)}
.ge-rays span:nth-child(2){transform:rotate(120deg)}
.ge-rays span:nth-child(3){transform:rotate(180deg)}
.ge-rays span:nth-child(4){transform:rotate(240deg)}
.ge-rays span:nth-child(5){transform:rotate(300deg)}
@keyframes geRaySpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* 镜头光晕(荣耀级) */
.ge-flare{position:absolute;left:50%;top:45%;width:300px;height:300px;margin:-150px 0 0 -150px;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,215,0,.5) 0%,rgba(255,107,53,.25) 30%,transparent 60%);
  filter:blur(8px);animation:geFlarePulse 2s ease-in-out infinite}
.ge-flare::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.6) 0%,transparent 40%);
  animation:geFlareCore 1.5s ease-in-out infinite}
@keyframes geFlarePulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.3);opacity:1}}
@keyframes geFlareCore{0%,100%{opacity:.4}50%{opacity:.9}}
/* 礼物主体包裹 */
.ge-ic-wrap{position:relative;z-index:3;text-align:center;animation:geIcWrapIn .6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes geIcWrapIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
/* 礼物图标: 强辉光+呼吸缩放 */
.ge-ic{position:relative;z-index:3;margin:0 auto;
  filter:drop-shadow(0 0 30px rgba(255,200,80,.6)) drop-shadow(0 0 60px rgba(255,100,50,.4));
  animation:geIcGlow 2s ease-in-out infinite}
.ge-ic svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
@keyframes geIcGlow{0%,100%{filter:drop-shadow(0 0 30px rgba(255,200,80,.6)) drop-shadow(0 0 60px rgba(255,100,50,.4))}50%{filter:drop-shadow(0 0 50px rgba(255,220,120,.9)) drop-shadow(0 0 100px rgba(255,140,60,.7))}}
/* 各动画类型 */
.ge-ic.anim-float{animation:fsFloat 2.8s cubic-bezier(.22,1,.36,1),geIcGlow 2s ease-in-out infinite}
.ge-ic.anim-pop{animation:fsPop 2.4s cubic-bezier(.34,1.56,.64,1),geIcGlow 2s ease-in-out infinite}
.ge-ic.anim-sparkle{animation:fsSparkle 2.8s ease,geIcGlow 2s ease-in-out infinite}
.ge-ic.anim-fly{animation:fsFly 3.2s cubic-bezier(.4,0,.2,1),geIcGlow 2s ease-in-out infinite}
.ge-ic.anim-rise{animation:fsRise 3.4s cubic-bezier(.55,0,.55,1) forwards,geIcGlow 2s ease-in-out infinite}
.ge-ic.anim-firework{animation:fsFirework 3.4s ease,geIcGlow 2s ease-in-out infinite}
.ge-ic.anim-dragon{animation:fsDragon 4s cubic-bezier(.4,0,.2,1) forwards,geIcGlow 2s ease-in-out infinite}
.ge-ic.anim-swim{animation:fsSwim 3.2s ease,geIcGlow 2s ease-in-out infinite}
@keyframes fsFloat{0%{transform:translateY(60vh) scale(.2) rotate(-25deg);opacity:0}20%{opacity:1}45%{transform:translateY(-18px) scale(1.25) rotate(6deg)}65%{transform:translateY(-10px) scale(1.1) rotate(-3deg)}100%{transform:translateY(-90px) scale(.92) rotate(0);opacity:0}}
@keyframes fsPop{0%{transform:scale(0) rotate(-180deg);opacity:0}30%{transform:scale(1.4) rotate(12deg);opacity:1}45%{transform:scale(.9) rotate(-6deg)}60%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1.12) rotate(0);opacity:0}}
@keyframes fsSparkle{0%{transform:scale(.3);opacity:0}18%{transform:scale(1.3);opacity:1}38%{transform:scale(1)}55%{transform:scale(1.18) rotate(8deg)}100%{transform:scale(1.6) translateY(-60px);opacity:0}}
@keyframes fsFly{0%{transform:translateX(-130vw) translateY(30vh) rotate(-35deg) scale(.4);opacity:0}18%{opacity:1}50%{transform:translateX(0) translateY(-6vh) rotate(0) scale(1.2)}80%{opacity:1}100%{transform:translateX(130vw) translateY(-32vh) rotate(35deg) scale(.5);opacity:0}}
@keyframes fsRise{0%{transform:translateY(115vh) scale(.4) rotate(-15deg);opacity:0}12%{opacity:1}55%{transform:translateY(-14vh) scale(1.2) rotate(6deg);opacity:1}100%{transform:translateY(-125vh) scale(.6) rotate(12deg);opacity:0}}
@keyframes fsFirework{0%{transform:scale(0);opacity:0}10%{transform:scale(1.45);opacity:1}22%{transform:scale(1)}38%{filter:drop-shadow(0 0 60px #FFD700) drop-shadow(0 0 120px #FF6B35);transform:scale(1.18)}100%{transform:scale(2.4);opacity:0}}
@keyframes fsDragon{0%{transform:translateY(125vh) translateX(-40vw) scale(.4) rotate(-25deg);opacity:0}12%{opacity:1;filter:drop-shadow(0 0 50px #FFD700)}42%{transform:translateY(-10vh) translateX(10vw) scale(1.55) rotate(10deg);filter:drop-shadow(0 0 80px #FF4500) drop-shadow(0 0 140px #FFD700)}100%{transform:translateY(-135vh) translateX(28vw) scale(.6) rotate(28deg);opacity:0}}
@keyframes fsSwim{0%{transform:translateX(-75vw) translateY(15vh) scale(.5) rotate(-8deg);opacity:0}18%{opacity:1}50%{transform:translateX(0) translateY(-14vh) scale(1.2) rotate(5deg)}80%{opacity:1}100%{transform:translateX(75vw) translateY(15vh) scale(.5) rotate(8deg);opacity:0}}
/* 礼物文字 */
.ge-txt{position:relative;z-index:4;margin-top:24px;color:#fff;font-size:18px;font-weight:800;
  text-shadow:0 2px 16px rgba(0,0,0,.8),0 0 30px rgba(255,200,80,.5);animation:geTxtIn 2.6s ease forwards}
.ge-txt b{font-size:30px;color:#FFD700;text-shadow:0 0 25px #FFD700,0 0 50px #FF6B35}
@keyframes geTxtIn{0%{transform:translateY(30px) scale(.8);opacity:0}15%{opacity:1;transform:translateY(0) scale(1)}85%{opacity:1}100%{transform:translateY(-20px);opacity:0}}
/* 大额礼物震屏(衰减曲线) */
.gift-fs.shake{animation:fsShake .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes fsShake{0%,100%{transform:translate(0,0) scale(1)}10%{transform:translate(-10px,6px) scale(1.02)}20%{transform:translate(10px,-6px) scale(1.01)}30%{transform:translate(-7px,-5px) scale(1.01)}40%{transform:translate(7px,5px)}50%{transform:translate(-4px,3px)}60%{transform:translate(4px,-3px)}70%{transform:translate(-2px,2px)}80%{transform:translate(2px,-2px)}}
/* 翻卡抽乐聊币 */
.lucky-mask{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;animation:fsFade .3s ease}
.lucky-box{width:90%;max-width:360px;background:linear-gradient(160deg,#2a1a4a,#1a0f2e);border:2px solid #FFD700;border-radius:20px;padding:24px 20px;text-align:center;box-shadow:0 0 40px rgba(255,215,0,.4)}
.lucky-box h3{margin:0 0 6px;color:#FFD700;font-size:20px}
.lucky-box p{margin:0 0 18px;color:#ccc;font-size:13px}
.lucky-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.lucky-card{aspect-ratio:3/4;perspective:800px;cursor:pointer}
.lucky-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s ease}
.lucky-card.flipped .lucky-card-inner{transform:rotateY(180deg)}
.lucky-card-front,.lucky-card-back{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font-weight:800}
.lucky-card-front{background:linear-gradient(135deg,#FFD700,#FF8C00);color:#5C3A00;font-size:28px;box-shadow:0 4px 12px rgba(255,140,0,.4)}
.lucky-card-back{background:linear-gradient(135deg,#fff,#FFE4B5);color:#E65100;font-size:18px;transform:rotateY(180deg);flex-direction:column;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.lucky-card-back .lc-amt{font-size:24px;color:#DAA520;font-weight:900}
.lucky-card.back-done .lucky-card-front{background:linear-gradient(135deg,#888,#555)}
.lucky-result{margin-top:10px;font-size:16px;color:#FFD700;font-weight:700}
.lucky-close{margin-top:16px;padding:10px 28px;background:linear-gradient(90deg,#FFD700,#FF8C00);color:#5C3A00;border:none;border-radius:20px;font-size:14px;font-weight:800;cursor:pointer}
@keyframes fsTxt{0%{transform:translateY(20px);opacity:0}30%{opacity:1}100%{transform:translateY(-10px);opacity:0}}

/* 坐骑/座驾特效标签 */
.msg-fx{display:inline-block;font-size:11px;font-weight:700;color:#B8860B;background:linear-gradient(90deg,#FFF8E1,#FFECB3);padding:2px 10px;border-radius:10px;margin-bottom:4px;box-shadow:0 1px 3px rgba(184,134,11,.2);border:1px solid #FFE082}
.crow.me .msg-fx{background:linear-gradient(90deg,#FFE0B2,#FFCC80);color:#E65100;border-color:#FFB74D}

/* 引用回复 */
.quote-bub{font-size:12px;color:#6B7280;background:rgba(0,0,0,.05);border-left:3px solid var(--blue);padding:6px 10px;border-radius:0 8px 8px 0;margin-bottom:5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow.me .quote-bub{background:rgba(255,255,255,.25);color:rgba(255,255,255,.9);border-left-color:rgba(255,255,255,.7)}
.quote-bar{display:flex;align-items:center;gap:8px;background:#FFF8E1;border-top:1px solid #FFE082;padding:8px 14px;font-size:13px}
.quote-bar .qb-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6B7280}
.quote-bar .qb-txt b{color:#E0407A}
.quote-bar .qb-x{color:#B7BCC7;font-size:16px;cursor:pointer;padding:0 6px;flex:0 0 auto}

/* 输入栏 */
.chat-input{flex:0 0 auto;background:#fff;border-top:1px solid var(--line);padding:9px 12px calc(9px + var(--safe-b));display:flex;gap:8px;align-items:center}
.chat-input input{border-radius:999px;background:#F4F6FA;border:0;padding:11px 15px;flex:1 1 auto;min-width:0;font-size:14px}
.chat-input .send{background:var(--grad);color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14px;flex:0 0 auto}
.chat-input .plus{font-size:22px;color:#9AA0AE;flex:0 0 auto;width:30px;text-align:center}
.chat-input .ci-btn{flex:0 0 auto;font-size:22px;width:36px;height:36px;line-height:36px;text-align:center;cursor:pointer;border:0;background:transparent;border-radius:50%;padding:0}
.chat-input .ci-btn:active{background:#F0F1F5}

/* 表情面板 */
.emoji-panel{display:none;flex:0 0 auto;background:#fff;border-top:1px solid var(--line);max-height:230px;overflow-y:auto;padding:8px 10px;animation:slideUp .2s ease}
.emoji-panel.on{display:block}
.emoji-item{display:inline-block;font-size:26px;text-align:center;padding:3px 0;cursor:pointer;border-radius:8px;line-height:1.3;width:12.5%}
.emoji-item:active{background:#F0F1F5}

/* 礼物面板 */
.gift-panel{display:none;flex:0 0 auto;background:#fff;border-top:1px solid var(--line);max-height:300px;overflow-y:auto;animation:slideUp .2s ease}
.gift-panel.on{display:block}
.gift-panel-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;font-weight:800;font-size:15px;color:#333}
.gift-panel-h .gift-close{color:#B7BCC7;font-size:16px;cursor:pointer;padding:2px 6px}
.gift-panel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:4px 14px 16px}
.gift-opt{position:relative;background:linear-gradient(160deg,#ffffff,#f7f8fc);border-radius:14px;padding:10px 4px;text-align:center;border:1.5px solid transparent;cursor:pointer;transition:.15s;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.gift-opt:active{transform:scale(.92);border-color:var(--pink);background:#FFF5F8}
.gift-opt::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 50%);pointer-events:none}
.gift-opt-ic{font-size:30px;line-height:1.1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.15));position:relative;z-index:1}
.gift-opt-nm{font-size:11px;font-weight:700;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.gift-opt-px{font-size:10px;color:#ff6a00;font-weight:700;margin-top:1px;position:relative;z-index:1}
.gift-opt.e-epic{background:linear-gradient(160deg,#faf5ff,#f3e8ff);box-shadow:0 3px 10px rgba(160,107,255,.2)}
.gift-opt.e-legend{background:linear-gradient(160deg,#fffbeb,#fef3c7);box-shadow:0 3px 12px rgba(245,158,11,.25)}
.gift-opt.e-glory{background:linear-gradient(160deg,#fef2f2,#fee2e2);box-shadow:0 4px 14px rgba(239,68,68,.3)}
.gift-opt.e-epic .gift-opt-ic{filter:drop-shadow(0 2px 6px rgba(160,107,255,.5))}
.gift-opt.e-legend .gift-opt-ic{filter:drop-shadow(0 2px 7px rgba(245,158,11,.6))}
.gift-opt.e-glory .gift-opt-ic{filter:drop-shadow(0 2px 8px rgba(239,68,68,.7))}

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

/* 用户主页 */
.up-head{background:var(--grad);padding:0 18px 20px;color:#fff}
.up-hero{display:flex;gap:14px;align-items:flex-end;margin-top:-30px}
.up-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px}
.up-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.kv{display:flex;gap:8px;font-size:13px;color:#4B5563;padding:5px 0}
.kv b{color:#9AA0AE;font-weight:600;width:52px;flex:0 0 auto}
/* 弹层 */
.mask{position:fixed;inset:0;background:rgba(10,12,20,.45);z-index:40;opacity:0;transition:.2s;visibility:hidden;backdrop-filter:blur(2px)}
.mask.on{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;z-index:41;transform:translateY(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);max-height:82vh;display:flex;flex-direction:column;padding-bottom:var(--safe-b)}
.sheet.on{transform:none}
.sheet-h{padding:16px 18px 10px;display:flex;align-items:center;font-weight:800;font-size:16px;border-bottom:1px solid var(--line)}
.sheet-b{overflow-y:auto;padding:14px 16px calc(16px + var(--safe-b))}
.gift-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gcell{background:#F8F9FC;border-radius:14px;padding:10px 4px;text-align:center;border:1.5px solid transparent;transition:.15s}
.gcell.on{border-color:var(--pink);background:#FFF5F8}
.gcell .gi{font-size:26px}
.gcell .gn{font-size:11px;font-weight:700;margin-top:3px}
.gcell .gp{font-size:10px;color:#B7BCC7;margin-top:1px}
.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);background:rgba(20,21,26,.9);color:#fff;padding:12px 20px;border-radius:14px;font-size:13.5px;font-weight:600;z-index:99;opacity:0;transition:.18s;pointer-events:none;max-width:78vw;text-align:center;line-height:1.5}
.toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* 平板 / iPad 适配 */
@media(min-width:820px){
  .app{max-width:1100px;margin:0 auto;background:var(--bg);box-shadow:0 0 60px rgba(20,21,26,.08);border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .topbar{padding-left:24px;padding-right:24px}
  .masonry{column-count:3;padding:16px;column-gap:14px}
  .ugrid{grid-template-columns:repeat(4,1fr);padding:16px}
  .panel,.mlist{margin-left:16px;margin-right:16px}
  .tabbar{max-width:1100px;left:50%;transform:translateX(-50%)}
  .chat-list{padding:16px 30px}
  .gift-grid{grid-template-columns:repeat(6,1fr)}
  .emoji-item{width:8.33%}
  .gift-panel-grid{grid-template-columns:repeat(6,1fr)}
}