/* bubble：爱豆群 bubble */

.bb-view{
  --bb-pink:#FF6B9D;
  --bb-purple:#9B7BFF;
  position:relative;
  background:
    radial-gradient(90% 50% at 100% 0%, rgba(155,123,255,.2), transparent 50%),
    radial-gradient(80% 40% at 0% 0%, rgba(255,107,157,.22), transparent 45%),
    var(--bg);
}
html[data-theme="dark"] .bb-view{
  background:
    radial-gradient(90% 50% at 100% 0%, rgba(155,123,255,.12), transparent 50%),
    radial-gradient(80% 40% at 0% 0%, rgba(255,107,157,.12), transparent 45%),
    var(--bg);
}

.bb-head{
  display:flex; align-items:center; gap:10px;
  padding:var(--head-top) 14px 10px; flex-shrink:0;
}
.bb-brand{ flex:1; min-width:0; }
.bb-brand b{
  font-family:var(--font-num); font-size:22px; font-weight:800;
  background:linear-gradient(90deg, var(--bb-pink), var(--bb-purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bb-brand span{ display:block; font-size:11px; color:var(--gray-2); margin-top:1px; }

.bb-idol-card{
  margin:0 14px 12px; padding:14px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,107,157,.18), rgba(155,123,255,.18));
  border:1px solid var(--hairline);
  display:flex; gap:12px; align-items:center; flex-shrink:0;
}
.bb-idol-card img{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; box-shadow:0 4px 12px rgba(255,107,157,.25);
}
.bb-idol-card .bb-idol-txt{ flex:1; min-width:0; }
.bb-idol-card .bb-idol-txt b{ display:block; font-size:16px; color:var(--ink); }
.bb-idol-card .bb-idol-txt span{ display:block; font-size:12px; color:var(--gray-1); margin-top:2px; }

.bb-tabs{
  display:flex; margin:0 14px 8px; padding:3px;
  border-radius:12px; background:rgba(var(--tint-rgb),.05); flex-shrink:0;
}
.bb-tab{
  flex:1; height:34px; border:0; border-radius:10px;
  background:transparent; color:var(--gray-1);
  font:600 13px/1 var(--font-body); cursor:pointer;
}
.bb-tab.active{
  background:var(--card); color:var(--bb-pink);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.bb-body{
  flex:1; min-height:0; overflow:auto;
  padding:4px 12px calc(16px + var(--foot-bottom));
  -webkit-overflow-scrolling:touch;
}
.bb-panel{ display:none; }
.bb-panel.active{ display:block; }

.bb-stat-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;
}
.bb-stat{
  border-radius:14px; background:var(--card); border:1px solid var(--hairline);
  padding:12px 8px; text-align:center;
}
.bb-stat b{ display:block; font-family:var(--font-num); font-size:18px; color:var(--ink); }
.bb-stat span{ font-size:11px; color:var(--gray-2); }
.bb-mem-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.bb-mem-acts{ margin-top:10px; }
.bb-mem-acts .bb-btn{ width:100%; }
.bb-mem-tabs{
  display:flex; gap:6px; margin:0 0 10px; padding:3px;
  border-radius:12px; background:rgba(var(--tint-rgb),.05);
}
.bb-mem-tab{
  flex:1; height:32px; border:0; border-radius:10px;
  background:transparent; color:var(--gray-1);
  font:600 12px/1 var(--font-body); cursor:pointer;
}
.bb-mem-tab.on{
  background:var(--card); color:var(--bb-pink);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.bb-mem-tag{
  font:700 10px/1 var(--font-body); color:var(--bb-purple);
  margin-bottom:6px;
}
.bb-mem-title{
  display:block; font-size:13px; color:var(--ink); margin:0 0 4px;
}
.bb-mem-card{
  padding:12px 14px; border-radius:14px; margin-bottom:8px;
  background:var(--card); border:1px solid var(--hairline);
}
.bb-mem-card p{
  margin:0; font:400 13px/1.5 var(--font-body); color:var(--ink);
  white-space:pre-wrap; word-break:break-word;
}
.bb-mem-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; font-size:11px; color:var(--gray-2);
}
.bb-mem-del{
  border:0; background:transparent; color:var(--bb-pink);
  font:600 12px/1 var(--font-body); cursor:pointer; padding:4px 0;
}
.bb-set-ava{
  display:flex; align-items:center; gap:12px;
}
.bb-set-ava-img, .bb-set-ava img{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  background:linear-gradient(145deg, #FFD6E7, #E8D9FF);
}
.bb-btn.ghost{
  width:auto; height:36px; padding:0 14px; margin-top:0;
  background:rgba(var(--tint-rgb),.08); color:var(--ink); font-weight:600;
}

.bb-sec-head{
  display:flex; align-items:center; gap:8px;
  padding:6px 4px 10px;
}
.bb-sec-head b{ flex:1; font:700 14px/1.2 var(--font-body); color:var(--ink); }
.bb-sec-sub{ font-size:11px; color:var(--gray-2); }
.bb-sec-btn{
  height:28px; padding:0 12px; border:0; border-radius:999px;
  background:linear-gradient(90deg, var(--bb-pink), var(--bb-purple));
  color:#fff; font:700 12px/1 var(--font-body); cursor:pointer;
}

.bb-row{
  display:flex; gap:12px; align-items:center;
  width:100%; text-align:left; border:0; padding:12px;
  margin-bottom:8px; border-radius:16px;
  background:var(--card); border:1px solid var(--hairline);
  cursor:pointer; color:inherit; font:inherit;
}
.bb-row-ava{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-size:22px;
  background:linear-gradient(145deg, #FFD6E7, #E8D9FF);
  position:relative; overflow:hidden;
}
.bb-row-ava img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.bb-row-ava-g{ font-size:22px; }
.bb-fan-dot{
  position:absolute; right:0; top:0; width:10px; height:10px;
  border-radius:50%; background:var(--bb-pink); border:2px solid var(--card);
}
.bb-row-info{ flex:1; min-width:0; }
.bb-row-info b{ display:block; font-size:14px; color:var(--ink); }
.bb-row-info span{
  display:block; font-size:12px; color:var(--gray-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bb-pending{
  font-style:normal; font-size:10px; font-weight:700;
  color:#fff; background:#F5A623; padding:1px 6px; border-radius:4px;
  vertical-align:middle;
}
.bb-row-meta{ text-align:right; flex-shrink:0; }
.bb-row-meta .bb-time{ font-size:10px; color:var(--gray-3); }
.bb-badge{
  display:inline-block; margin-top:4px; min-width:18px; padding:1px 6px;
  border-radius:999px; background:var(--bb-pink); color:#fff;
  font:700 10px/1.4 var(--font-num); text-align:center;
}

.bb-empty{ text-align:center; padding:36px 20px; color:var(--gray-2); min-height:48px; }
.bb-empty.soft{ padding:24px 20px; }
.bb-empty b{ display:block; color:var(--ink); margin-bottom:6px; }
.bb-empty b:empty{ display:none; margin:0; }

.bb-soft-note{
  font-size:12px; color:var(--gray-2); line-height:1.65;
  padding:4px 6px 8px; margin:8px 0 0;
}
.bb-form-card{
  padding:14px; border-radius:16px; background:var(--card);
  border:1px solid var(--hairline); margin-bottom:12px;
}
.bb-form-card label{
  display:block; font:600 12px/1 var(--font-body); color:var(--gray-1); margin-bottom:8px;
}
.bb-form-card label b{ color:var(--bb-pink); font-family:var(--font-num); }
.bb-input, .bb-textarea{
  width:100%; box-sizing:border-box; border:0; border-radius:10px;
  background:var(--fill); color:var(--ink);
  font:500 14px/1.4 var(--font-body); padding:10px 12px; outline:0;
}
.bb-textarea{ min-height:72px; resize:vertical; margin-top:8px; }
.bb-range{ width:100%; accent-color:var(--bb-pink); }
.bb-btn{
  width:100%; height:42px; border:0; border-radius:12px; margin-top:10px;
  background:linear-gradient(90deg, var(--bb-pink), var(--bb-purple));
  color:#fff; font:700 14px/1 var(--font-body); cursor:pointer;
}
.bb-btn:disabled{ opacity:.55; cursor:wait; }
.bb-mood-row{ display:flex; flex-wrap:wrap; gap:8px; }
.bb-mood-chip{
  height:32px; padding:0 12px; border:1px solid var(--hairline);
  border-radius:999px; background:var(--fill); color:var(--gray-1);
  font:600 12px/1 var(--font-body); cursor:pointer;
}
.bb-mood-chip.on{
  border-color:transparent;
  background:linear-gradient(90deg, var(--bb-pink), var(--bb-purple));
  color:#fff;
}
.bb-mood-hint{
  margin:10px 0 0; font-size:11px; color:var(--gray-2); line-height:1.5;
}

/* 群聊 / 私聊 */
.bb-chat-view{ position:relative; background:var(--bg); }

.bb-chat-head{
  display:flex; align-items:center; gap:10px;
  padding:var(--head-top) 12px 10px;
  border-bottom:1px solid var(--hairline); flex-shrink:0;
  background:var(--card);
}
.bb-chat-head .bb-chat-ava{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-size:18px;
  background:linear-gradient(145deg, #FFD6E7, #E8D9FF);
  overflow:hidden;
}
.bb-chat-head .bb-chat-ava img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.bb-chat-head .bb-chat-name{ flex:1; min-width:0; }
.bb-chat-head .bb-chat-name b{ display:block; font-size:15px; color:var(--ink); }
.bb-chat-head .bb-chat-name span{ font-size:11px; color:var(--bb-purple); }

.bb-chat-body{
  flex:1; min-height:0; overflow:auto;
  padding:14px 12px; -webkit-overflow-scrolling:touch;
}

.bb-g-row{
  display:flex; gap:8px; align-items:flex-end;
  margin-bottom:12px; max-width:100%;
}
.bb-g-row.idol{ justify-content:flex-end; }
.bb-g-ava{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:linear-gradient(145deg, #FFD6E7, #E8D9FF);
}
.bb-g-ava img{ width:100%; height:100%; object-fit:cover; }
.bb-g-stack{ max-width:78%; min-width:0; }
.bb-g-name{
  display:block; font-size:11px; color:var(--gray-2);
  margin:0 0 3px 2px;
}
.bb-g-bubble, .bb-bubble{
  max-width:100%; padding:10px 12px;
  border-radius:16px; font:400 14px/1.45 var(--font-body);
  word-break:break-word; white-space:pre-wrap;
}
.bb-g-bubble.fan, .bb-bubble.fan{
  background:var(--fill); color:var(--ink);
  border-bottom-left-radius:4px;
}
.bb-g-bubble.idol, .bb-bubble.idol{
  background:linear-gradient(135deg, var(--bb-pink), var(--bb-purple));
  color:#fff; border-bottom-right-radius:4px; margin-left:auto;
}
.bb-bubble{ max-width:78%; margin-bottom:10px; }
.bb-bubble.fan{ margin-right:auto; }
.bb-bubble.idol{ margin-left:auto; }
.bb-bubble-time{
  display:block; font-size:10px; opacity:.55; margin-top:4px;
}

.bb-typing{
  flex-shrink:0; padding:4px 14px; font-size:11px; color:var(--gray-2);
}

.bb-chat-foot{
  flex-shrink:0;
  display:flex; gap:8px; align-items:flex-end;
  padding:8px 12px calc(8px + var(--foot-bottom));
  border-top:1px solid var(--hairline); background:var(--card);
}
.bb-chat-foot textarea{
  flex:1; min-height:40px; max-height:100px; resize:none;
  border:0; border-radius:12px; background:var(--fill);
  color:var(--ink); font:500 14px/1.4 var(--font-body);
  padding:10px 12px; outline:0;
}
.bb-chat-send{
  height:40px; padding:0 14px; border:0; border-radius:12px;
  background:linear-gradient(90deg, var(--bb-pink), var(--bb-purple));
  color:#fff; font:700 13px/1 var(--font-body); cursor:pointer; flex-shrink:0;
}
.bb-chat-reply{
  position:relative;
  width:40px; height:40px; border:0; border-radius:12px;
  background:rgba(var(--tint-rgb),.08); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; flex-shrink:0;
}
.bb-chat-reply svg{
  width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.bb-chat-reply.due::after{
  content:''; position:absolute; right:5px; top:5px;
  width:7px; height:7px; border-radius:50%; background:#F5A623;
  box-shadow:0 0 0 2px var(--card);
}
.bb-chat-reply:disabled{ opacity:.45; }

/* ---- bubble 聊天页完善：公告 / 日期分割 / 快捷语 / 头像按钮 / 资料卡 ---- */
.bb-chat-head .bb-chat-name{ background:none; border:0; text-align:left; cursor:pointer; font:inherit; padding:0; }
.bb-chat-head .bb-chat-ava{ border:0; cursor:pointer; font:inherit; }
.bb-group-ava{ font-size:20px; }
.bb-head-btn{ flex-shrink:0; }
.bb-online-dot{ display:flex; align-items:center; gap:4px; font-size:10px; color:#22a06b; font-weight:700; flex-shrink:0; }
.bb-online-dot i{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); animation:bbPulse 2s infinite; }
@keyframes bbPulse{ 50%{ opacity:.5; } }
.bb-notice{
  flex-shrink:0; margin:8px 12px 0; padding:8px 12px; border-radius:12px;
  background:linear-gradient(90deg, rgba(255,107,157,.1), rgba(155,123,255,.1));
  border:1px dashed rgba(155,123,255,.35);
  font-size:11px; color:var(--gray-1); text-align:center; line-height:1.5;
}
.bb-day{
  display:flex; align-items:center; gap:8px; margin:14px 0 10px;
  font-size:11px; color:var(--gray-2);
}
.bb-day::before,.bb-day::after{ content:''; flex:1; height:1px; background:var(--hairline); }
.bb-day span{ background:var(--fill); padding:3px 12px; border-radius:999px; }
.bb-g-bubble,.bb-bubble{ box-shadow:0 2px 10px rgba(20,10,40,.06); position:relative; }
.bb-g-bubble.idol,.bb-bubble.idol{ box-shadow:0 6px 18px rgba(255,107,157,.28); }
.bb-g-ava{ cursor:pointer; }
.bb-chat-body{ background:radial-gradient(120% 30% at 50% 0%, rgba(255,107,157,.06), transparent 60%); }
.bb-quick{ flex-shrink:0; display:flex; gap:8px; overflow-x:auto; padding:8px 12px 0; scrollbar-width:none; }
.bb-quick::-webkit-scrollbar{ display:none; }
.bb-quick:empty{ display:none; }
.bb-quick-chip{
  flex-shrink:0; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  height:32px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,107,157,.35);
  background:rgba(255,107,157,.08); color:var(--ink); font:600 12px/1 var(--font-body); cursor:pointer;
}
.bb-quick-chip:active{ transform:scale(.96); }
.bb-dots{ display:inline-flex; gap:3px; margin-right:6px; vertical-align:middle; }
.bb-dots i{ width:5px; height:5px; border-radius:50%; background:var(--bb-pink); animation:bbBlink 1s infinite; }
.bb-dots i:nth-child(2){ animation-delay:.2s; } .bb-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes bbBlink{ 50%{ opacity:.25; transform:translateY(-2px); } }
.bb-fan-card{ overflow:hidden; }
.bb-fan-hero{
  display:flex; gap:12px; align-items:center; padding:18px 18px 14px;
  background:linear-gradient(135deg, rgba(255,107,157,.2), rgba(155,123,255,.2));
}
.bb-fan-hero img{ width:60px; height:60px; border-radius:50%; object-fit:cover; border:2px solid #fff; }
.bb-fan-hero b{ display:block; font-size:16px; }
.bb-fan-hero span{ font-size:12px; color:var(--gray-1); }
.bb-fan-bio{ font-size:13px; line-height:1.6; color:var(--ink); background:var(--fill); border-radius:12px; padding:10px 12px; }
.bb-members-card .pick-list{ max-height:40vh; }
.bb-member-row{ display:flex; gap:10px; align-items:center; padding:9px 10px; border-radius:12px; }
.bb-member-row img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.bb-member-row b{ display:block; font-size:13px; } .bb-member-row span{ font-size:11px; color:var(--gray-2); }