/* ---------- 闲聊聊天室 ---------- */
.chat-lobby { max-width: 960px; margin: 0 auto; padding: 28px 16px 60px; }
.lobby-head { text-align: center; margin-bottom: 26px; }
.lobby-head h1 { font-size: 30px; font-weight: 800; color: #14212e; margin: 0 0 8px; }
.lobby-head p { color: #747474; font-size: 14px; margin: 0; }

.zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.zone-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border-radius: 16px; padding: 20px;
  box-shadow: 0 2px 12px rgba(20,50,90,.06);
  border: 1px solid rgba(20,50,90,.06);
  transition: transform .25s, box-shadow .25s;
  text-decoration: none; color: inherit;
}
.zone-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(46,163,242,.16); }
.zone-icon {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: linear-gradient(135deg, #e8f4fe, #d3e9fb);
}
.zone-main { flex: 1; min-width: 0; }
.zone-name { font-size: 18px; font-weight: 800; color: #14212e; }
.zone-tag {
  font-size: 11px; font-weight: 400; color: #fff; background: #9aa5b5;
  border-radius: 8px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px;
}
.zone-desc { font-size: 13px; color: #747474; margin: 4px 0 8px; }
.zone-preview {
  font-size: 12px; color: #9aa5b5; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.zone-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.zone-online { font-size: 12px; color: #3c9a50; white-space: nowrap; }
.online-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #3c9a50; margin-right: 5px;
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.zone-enter { font-size: 13px; color: #2ea3f2; font-weight: 700; }
.lobby-empty, .lobby-tip { text-align: center; color: #9aa5b5; margin-top: 24px; font-size: 14px; }
.lobby-tip a { color: #2ea3f2; }

/* ---------- 聊天室 ---------- */
.chat-room { max-width: 1080px; margin: 0 auto; padding: 20px 16px 40px; }
.room-head {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 14px; padding: 14px 18px;
  box-shadow: 0 2px 12px rgba(20,50,90,.06); margin-bottom: 14px;
}
.room-back { color: #2ea3f2; font-size: 14px; white-space: nowrap; text-decoration: none; }
.room-title { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.room-icon { font-size: 34px; }
.room-title h1 { font-size: 20px; margin: 0; color: #14212e; font-weight: 800; }
.room-title p { font-size: 12px; color: #9aa5b5; margin: 2px 0 0; }
.room-online { font-size: 13px; color: #3c9a50; white-space: nowrap; }
.room-online b { font-size: 16px; }

.room-body { display: flex; gap: 14px; align-items: stretch; }
.msg-wrap {
  flex: 1; min-width: 0; background: #fff; border-radius: 14px;
  box-shadow: 0 2px 12px rgba(20,50,90,.06);
  display: flex; flex-direction: column; overflow: hidden;
}
.msg-list {
  height: 480px; overflow-y: auto; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 14px;
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(46,163,242,.05), transparent 60%),
    #fbfcfe;
}
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg.mine { flex-direction: row-reverse; }
.msg-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; background: linear-gradient(135deg, #e8f4fe, #cde7fa);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #2ea3f2;
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-body { max-width: 70%; display: flex; flex-direction: column; }
.msg.mine .msg-body { align-items: flex-end; }
.msg-name { font-size: 12px; color: #9aa5b5; margin-bottom: 3px; }
.msg-bubble {
  display: inline-block; padding: 9px 13px; border-radius: 4px 14px 14px 14px;
  background: #fff; border: 1px solid rgba(20,50,90,.08);
  font-size: 14px; line-height: 1.65; color: #2b2b2b;
  word-break: break-word; box-shadow: 0 1px 4px rgba(20,50,90,.05);
}
.msg.mine .msg-bubble {
  background: linear-gradient(135deg, #2ea3f2, #1e88e5); color: #fff;
  border: none; border-radius: 14px 4px 14px 14px;
}
.msg-time { font-size: 11px; color: #c3cad4; margin-top: 3px; }
img.msg-sticker, video.msg-sticker { max-width: 150px; max-height: 150px; border-radius: 8px; display: block; }

/* 输入区 */
.composer {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 14px; border-top: 1px solid rgba(20,50,90,.07); background: #fff;
}
.composer-tools { display: flex; gap: 2px; }
.composer-tools button {
  border: none; background: none; font-size: 22px; cursor: pointer;
  padding: 4px 6px; border-radius: 8px; line-height: 1;
}
.composer-tools button:hover { background: #f0f4f9; }
.msg-input {
  flex: 1; border: 1px solid rgba(20,50,90,.12); border-radius: 20px;
  padding: 9px 16px; font-size: 14px; outline: none; min-width: 0;
}
.msg-input:focus { border-color: #2ea3f2; box-shadow: 0 0 0 3px rgba(46,163,242,.12); }
.send-btn {
  border: none; cursor: pointer; border-radius: 20px; padding: 9px 22px;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #2ea3f2, #1e88e5);
}
.send-btn:disabled { opacity: .5; cursor: default; }
.composer-tip { font-size: 11px; color: #c3cad4; text-align: center; margin: 0; padding: 6px 0 10px; background: #fff; }

/* 表情 / 表情包面板 */
.panel {
  border-top: 1px solid rgba(20,50,90,.07); background: #fff;
  padding: 12px 14px; max-height: 190px; overflow-y: auto;
}
.emoji-panel { display: flex; flex-wrap: wrap; gap: 2px; }
.emoji-panel[hidden], .sticker-panel[hidden] { display: none; }
.emoji-item {
  border: none; background: none; font-size: 24px; cursor: pointer;
  padding: 5px; border-radius: 8px; line-height: 1;
}
.emoji-item:hover { background: #f0f4f9; transform: scale(1.15); }
.sticker-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sticker-grid img {
  width: 74px; height: 74px; object-fit: contain; cursor: pointer;
  border: 1px solid rgba(20,50,90,.08); border-radius: 10px; padding: 4px;
  background: #fbfcfe; transition: transform .15s;
}
.sticker-grid img:hover { transform: scale(1.1); border-color: #2ea3f2; }
.panel-empty { color: #9aa5b5; font-size: 13px; text-align: center; margin: 8px 0; }
.panel-note { font-size: 12px; color: #9aa5b5; margin: 10px 0 0; }
.panel-note b { color: #e5534b; }

/* 在线成员侧栏 */
.member-side {
  width: 190px; flex-shrink: 0; background: #fff; border-radius: 14px;
  box-shadow: 0 2px 12px rgba(20,50,90,.06); padding: 16px 14px;
  align-self: flex-start; max-height: 560px; overflow-y: auto;
}
.member-side h3 { font-size: 14px; font-weight: 800; color: #14212e; margin: 0 0 12px; }
.member-list { display: flex; flex-direction: column; gap: 10px; }
.member { display: flex; align-items: center; gap: 9px; }
.member-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, #e8f4fe, #cde7fa);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #2ea3f2;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-name {
  font-size: 13px; color: #3c4a5c; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .member-side { display: none; }
  .msg-list { height: 60vh; }
  .msg-body { max-width: 82%; }
  .room-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .online-dot { animation: none; }
  .zone-card, .emoji-item, .sticker-grid img { transition: none; }
  .map-ring { animation: none; }
}

/* ---------- 闲聊大厅：操场背景图 + 木牌热点 ---------- */
.lobby-map {
  position: relative;
  aspect-ratio: 3 / 2;
  background: url('../images/chat-lobby-bg.webp') center / cover no-repeat;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(20,50,90,.14);
  border: 1px solid rgba(20,50,90,.08);
}
.map-hotspot {
  position: absolute;
  display: block;
  border-radius: 14px;
  cursor: pointer;
  transition: box-shadow .25s, background-color .25s;
}
.map-hotspot:hover, .map-hotspot:focus-visible {
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 26px rgba(255,196,66,.95);
  outline: none;
}
.map-ring {
  position: absolute;
  right: 10%; top: 12%;
  width: 14px; height: 14px; border-radius: 50%;
  background: #3c9a50;
  box-shadow: 0 0 0 0 rgba(60,154,80,.7);
  animation: map-ping 1.8s infinite;
  pointer-events: none;
}
@keyframes map-ping {
  0% { box-shadow: 0 0 0 0 rgba(60,154,80,.7); }
  70% { box-shadow: 0 0 0 14px rgba(60,154,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(60,154,80,0); }
}
.map-chip {
  position: absolute;
  transform: translateY(-50%);
  background: rgba(18,26,36,.78);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.map-chip .online-dot { animation: pulse 1.6s infinite; }
.lobby-map .lobby-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
@media (max-width: 768px) {
  .map-chip { font-size: 10px; padding: 5px 9px; }
  .map-ring { width: 10px; height: 10px; }
}

/* ---------- 闲聊大厅：左右分栏（左背景图 / 右聊天室） ---------- */
.chat-split-page {
  padding: calc(60px + 12px) 10px 12px; /* 全幅无留白，顶部留出固定导航条高度 */
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: 12px;
}
.split-head h1 { font-size: 24px; font-weight: 800; color: #14212e; margin: 0 0 4px; }
.split-head p { color: #747474; font-size: 13px; margin: 0; }
.chat-split { flex: 1; min-height: 0; display: flex; gap: 16px; }
.split-map {
  flex: 2 1 0%; min-width: 0; min-height: 0; /* 背景图占 4 成 */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
/* 背景图在左半区尽可能大：宽高比 3/2 保持不变，热点不错位 */
.split-map .lobby-map { width: min(100%, calc((100dvh - 250px) * 1.5)); flex-shrink: 0; }
.map-extra { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mini-card {
  background: #fff; border: 1px solid rgba(20,50,90,.1); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: #14212e; text-decoration: none;
  box-shadow: 0 2px 8px rgba(20,50,90,.06);
}
.mini-card:hover { border-color: #2ea3f2; color: #2ea3f2; }
.split-room {
  flex: 3 1 0%; min-width: 0; min-height: 0; /* 聊天室占 6 成 */
  background: #fff; border-radius: 18px;
  box-shadow: 0 12px 40px rgba(20,50,90,.10);
  border: 1px solid rgba(20,50,90,.08);
  display: flex; flex-direction: column; overflow: hidden;
}
.room-placeholder { margin: auto; text-align: center; color: #9aa5b5; font-size: 14px; padding: 24px; }
.room-placeholder-icon { font-size: 44px; margin-bottom: 10px; }
.room-placeholder p { margin: 6px 0; line-height: 1.8; }
.room-loading { margin: auto; color: #9aa5b5; font-size: 14px; }
/* 分栏里的聊天室占满右 pane */
.split-room .chat-room {
  max-width: none; margin: 0; padding: 14px; height: 100%;
  display: flex; flex-direction: column; min-height: 0;
}
.split-room .room-head { margin-bottom: 10px; padding: 10px 14px; }
.split-room .room-body { flex: 1; min-height: 0; }
.split-room .msg-wrap { min-height: 0; }
.split-room .msg-list { height: auto; flex: 1; min-height: 0; }
.split-room .member-side { display: none; }
@media (max-width: 900px) {
  .chat-split-page { height: auto; min-height: 100dvh; }
  .chat-split { flex-direction: column; }
  .split-map .lobby-map { width: min(100%, 620px); }
  .split-room { min-height: 72vh; }
}

/* ---------- 聊天室精美化 ---------- */
/* 顶栏：柔光渐变 */
.room-head {
  background: linear-gradient(120deg, #eaf5fe 0%, #ffffff 55%, #fdf6ec 100%);
  border: 1px solid rgba(46,163,242,.14);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(46,163,242,.10);
}
.room-icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: linear-gradient(135deg, #2ea3f2, #6fc3ff);
  box-shadow: 0 4px 12px rgba(46,163,242,.35);
}
.room-back {
  border: 1px solid rgba(46,163,242,.25); border-radius: 999px;
  padding: 6px 14px; background: rgba(255,255,255,.7);
  transition: background .2s, color .2s;
}
.room-back:hover { background: #2ea3f2; color: #fff; }
.room-online {
  background: rgba(60,154,80,.10); border-radius: 999px; padding: 6px 12px;
}
/* 气泡：更柔和的圆角与阴影 */
.msg-bubble { border-radius: 6px 18px 18px 18px; box-shadow: 0 2px 8px rgba(20,50,90,.07); }
.msg.mine .msg-bubble {
  border-radius: 18px 6px 18px 18px;
  box-shadow: 0 4px 14px rgba(46,163,242,.35);
}
/* 被@到的消息整条淡黄高亮 */
.msg.mentioned .msg-bubble {
  background: #fff8e6; border-color: rgba(255,180,60,.55);
  box-shadow: 0 0 0 3px rgba(255,196,66,.25), 0 2px 8px rgba(20,50,90,.07);
}
.msg.mine.mentioned .msg-bubble { background: linear-gradient(135deg, #ffb442, #ff9435); }
/* @人名 */
.mention {
  color: #1e88e5; background: rgba(46,163,242,.12);
  border-radius: 6px; padding: 0 4px; font-weight: 700; white-space: nowrap;
}
.msg.mine .mention { color: #fff; background: rgba(255,255,255,.28); }
/* 输入区：悬浮胶囊 */
.composer {
  border-top: none; background: transparent; padding: 10px 14px 4px;
}
.input-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.msg-input {
  width: 100%; border: 1px solid rgba(20,50,90,.10);
  box-shadow: 0 2px 10px rgba(20,50,90,.06);
}
.send-btn {
  box-shadow: 0 4px 14px rgba(46,163,242,.35);
  transition: transform .15s, box-shadow .15s;
}
.send-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(46,163,242,.45); }
.composer-tools button { transition: transform .15s, background .15s; }
.composer-tools button:hover { transform: scale(1.12); }
/* @联想下拉 */
.mention-list {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px);
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(20,50,90,.16);
  border: 1px solid rgba(20,50,90,.08); z-index: 50;
}
.mention-list[hidden] { display: none; }
.mention-item {
  display: block; width: 100%; text-align: left;
  border: none; background: none; padding: 9px 14px;
  font-size: 13px; color: #2b2b2b; cursor: pointer;
}
.mention-item:hover { background: #eaf5fe; color: #1e88e5; font-weight: 700; }
/* 可@的成员 */
.member.mentionable { cursor: pointer; border-radius: 8px; padding: 3px 5px; margin: -3px -5px; transition: background .15s; }
.member.mentionable:hover { background: #eaf5fe; }
/* ---------- 小礼物 ---------- */
.gift-panel[hidden] { display: none; }
.gift-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.gift-item {
  border: 1px solid rgba(20,50,90,.08);
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  border-radius: 14px; padding: 10px 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.gift-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255,180,66,.7);
  box-shadow: 0 10px 22px rgba(255,170,40,.28);
}
.gift-item.selected {
  border-color: #ffb442;
  box-shadow: 0 0 0 3px rgba(255,180,66,.30), 0 10px 22px rgba(255,170,40,.28);
  transform: translateY(-2px);
}
.gift-item-emoji {
  font-size: 34px; line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(255,150,30,.30));
}
.gift-item-name { font-size: 12px; color: #5a6b80; }
/* 数量选择器 */
.gift-qty {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(20,50,90,.14);
}
.gift-qty[hidden] { display: none; }
.gift-qty-label { font-size: 13px; color: #5a6b80; font-weight: 700; }
.qty-presets { display: flex; gap: 6px; }
.qty-presets button {
  border: 1px solid rgba(20,50,90,.14); background: #fff; cursor: pointer;
  border-radius: 999px; padding: 5px 13px; font-size: 12px; color: #5a6b80;
  transition: all .15s;
}
.qty-presets button.on, .qty-presets button:hover {
  background: linear-gradient(135deg, #ffb442, #ff9435);
  border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 4px 12px rgba(255,170,40,.35);
}
.qty-input {
  width: 76px; border: 1px solid rgba(20,50,90,.14); border-radius: 999px;
  padding: 6px 10px; font-size: 13px; outline: none; text-align: center;
}
.qty-input:focus { border-color: #ffb442; box-shadow: 0 0 0 3px rgba(255,180,66,.18); }
.qty-send {
  border: none; cursor: pointer; border-radius: 999px; padding: 7px 22px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #ffb442, #ff7b35);
  box-shadow: 0 4px 14px rgba(255,150,40,.40);
  transition: transform .15s;
}
.qty-send:hover { transform: translateY(-1px); }
/* 聊天流里的礼物：透明居中通告，不套气泡背景 */
.msg.gift-msg { justify-content: center; }
.gift-announce {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: none; padding: 2px 6px;
  animation: gift-pop .45s cubic-bezier(.2,1.6,.4,1);
}
.gift-announce-emoji {
  font-size: 46px; line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(255,150,30,.35));
}
.gift-announce-text { font-size: 14px; color: #6b7a90; }
.gift-announce-text b { color: #e07b1a; }
.gift-announce-text b:first-child { color: #1e88e5; }
.msg-time.gift-time { width: 100%; text-align: center; }
/* 送出礼物时的全屏动态效果（罩在聊天室内） */
.chat-room { position: relative; }
.gift-show {
  position: absolute; inset: 0; z-index: 60; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(420px 320px at 50% 45%, rgba(255,196,66,.20), transparent 70%);
  animation: gift-show-in .3s ease-out;
  transition: opacity .5s;
}
.gift-show.out { opacity: 0; }
.gift-show-emoji {
  font-size: 108px; line-height: 1;
  filter: drop-shadow(0 12px 26px rgba(255,150,30,.5));
  animation: gift-show-pop .55s cubic-bezier(.2,1.5,.4,1);
}
.gift-show-text {
  font-size: 16px; color: #8a5a1a; background: rgba(255,255,255,.92);
  padding: 8px 20px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(255,150,30,.25);
}
.gift-show-text b { color: #e07b1a; }
.gift-show .spark {
  position: absolute; color: #ffc442; font-size: 22px;
  opacity: 0; animation: spark-float 1.7s ease-out forwards;
}
.gift-show .s1 { left: 30%; top: 55%; animation-delay: .1s; }
.gift-show .s2 { left: 68%; top: 50%; animation-delay: .25s; font-size: 16px; }
.gift-show .s3 { left: 42%; top: 62%; animation-delay: .4s; font-size: 26px; }
.gift-show .s4 { left: 58%; top: 60%; animation-delay: .15s; font-size: 14px; }
.gift-show .s5 { left: 50%; top: 48%; animation-delay: .5s; }
@keyframes gift-show-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gift-show-pop {
  0% { transform: scale(.2) rotate(-14deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes spark-float {
  0% { opacity: 0; transform: translateY(10px) scale(.5); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.2) rotate(40deg); }
}
@keyframes gift-pop {
  0% { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes gift-bounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-card, .gift-emoji { animation: none; }
  .send-btn:hover:not(:disabled), .gift-item:hover,
  .composer-tools button:hover { transform: none; }
}
@media (max-width: 768px) {
  .gift-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 输入区：现代悬浮胶囊 ---------- */
.composer {
  margin: 10px 12px 2px;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(20,50,90,.09);
  border-radius: 26px;
  box-shadow: 0 10px 28px rgba(20,50,90,.12);
  padding: 6px 6px 6px 4px;
  display: flex; gap: 2px; align-items: center;
  transition: border-color .2s, box-shadow .2s;
}
.composer:focus-within {
  border-color: rgba(46,163,242,.55);
  box-shadow: 0 10px 28px rgba(46,163,242,.20);
}
.composer-tools { display: flex; gap: 0; }
.composer-tools button {
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.msg-input {
  border: none; background: transparent; box-shadow: none;
  padding: 10px 6px; border-radius: 0;
}
.msg-input:focus { border: none; box-shadow: none; }
.send-btn {
  width: 42px; height: 42px; border-radius: 50%; padding: 0; flex-shrink: 0;
  font-size: 19px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.composer-tip { background: transparent; }

/* ---------- 系统广播 ---------- */
.msg.sys-msg { justify-content: center; flex-direction: column; align-items: center; }
.sys-notice {
  max-width: 88%;
  background: #fff7e6; border: 1px solid #f0cf7e; color: #8a5a00;
  border-radius: 12px; padding: 9px 16px; font-size: 13px; line-height: 1.7;
  text-align: center; box-shadow: 0 2px 8px rgba(180,130,20,.10);
}
.sys-time { margin-top: 4px; }

/* ---------- 阅后即焚 ---------- */
.burn-box { min-width: 190px; }
.burn-sealed {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 16px 18px; cursor: pointer;
  background: repeating-linear-gradient(45deg, #fff8f0, #fff8f0 12px, #fff3e6 12px, #fff3e6 24px);
  border: 2px dashed #e8a13c; border-radius: 14px;
  font-size: 30px; color: #7a4a00; text-align: left;
}
.burn-sealed span { font-size: 14px; font-weight: 700; line-height: 1.6; }
.burn-sealed small { font-size: 12px; color: #a3762a; font-weight: 400; }
.burn-sealed:hover { border-color: #d18a1f; background: #fff6e8; }
.burn-bar { height: 6px; background: #f0e2c8; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.burn-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #f5a623, #e8543f); border-radius: 3px; }
.burn-done {
  padding: 18px 22px; text-align: center; color: #9a9a9a; font-size: 14px;
  background: #f5f5f5; border: 1px dashed #d5d5d5; border-radius: 14px;
}

/* ---------- 闲聊大厅动态背景 ---------- */
.lobby-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none; /* 视频不拦截点击，木牌热点照常可点 */
}
@media (prefers-reduced-motion: reduce) {
  .lobby-bg-video { display: none; } /* 减弱动态偏好时回落到静态底图 */
}

/* 表情包按钮：Q版小鸡圆形徽章 */
.composer-tools .sticker-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #fff8e3, #ffe6a3);
  border: 2px solid #f2c14e;
  box-shadow: 0 2px 8px rgba(242, 193, 78, .35);
  padding: 2px; overflow: hidden;
}
.composer-tools .sticker-btn img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; display: block; pointer-events: none;
}
.composer-tools .sticker-btn:hover {
  transform: scale(1.15) rotate(-8deg);
  box-shadow: 0 4px 16px rgba(242, 193, 78, .55);
  background: linear-gradient(135deg, #fff3cf, #ffdf8e);
}

/* 表情包消息：去气泡边框，透明显示 */
.msg-bubble.bubble-sticker {
  background: transparent; border: none; box-shadow: none; padding: 0;
}
.msg.mine .msg-bubble.bubble-sticker { background: transparent; }
/* 纯表情消息：大字、透明、无气泡 */
.msg-bubble.bubble-emoji {
  background: transparent; border: none; box-shadow: none;
  font-size: 42px; line-height: 1.3; padding: 2px 4px;
}
.msg.mine .msg-bubble.bubble-emoji { background: transparent; color: inherit; }