/**
 * Mobile Chat Interface — Redesign v2
 * Bottom FAB dock → full-screen glassmorphism chat overlay
 * Bubble layout/màu sắc giữ nguyên theo quy cách file gốc app.css
 */

/* ═══════════════════════════════════════════════════
   1. RESET DESKTOP CHAT khi ở mobile
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock {
  display: none !important;
  /* Neutralize desktop .chat-dock position/size */
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

.mobile-touch.mobile-chat-open #chat-dock {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 400;
  background: transparent;
  pointer-events: none;
}

/* Override desktop .chat-dock .chat-box { width:340px; height:380px; position:relative } */
.mobile-touch #chat-dock .chat-box {
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════
   2. CHAT BOX — FULL-SCREEN GLASS OVERLAY
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock .chat-box {
  display: none !important;
  pointer-events: none;
}

.mobile-touch #chat-dock .chat-box.mobile-chat-active {
  display: flex !important;
  flex-direction: column;
  pointer-events: auto;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  z-index: 401;
  background: linear-gradient(
    180deg,
    rgba(6, 5, 16, 0.82) 0%,
    rgba(8, 6, 20, 0.75) 40%,
    rgba(5, 4, 14, 0.88) 100%
  );
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  animation: chatSlideUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
   3. CHAT HEADER
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock .chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  padding-top: max(14px, env(safe-area-inset-top, 14px));
  background: transparent;
  border-bottom: 1px solid rgba(200, 151, 58, 0.12);
  flex-shrink: 0;
  gap: 12px;
  position: relative;
  cursor: default;
}

.mobile-touch #chat-dock .chat-header::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 151, 58, 0.45), transparent);
}

.mobile-touch #chat-dock .chat-header-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-touch #chat-dock .chat-header-title::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
  flex-shrink: 0;
  animation: headerDotPulse 2.4s ease-in-out infinite;
}

@keyframes headerDotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50%       { opacity: 0.9; transform: scale(1.15); }
}

.mobile-touch #chat-dock .chat-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(232, 220, 200, 0.7);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, transform 0.18s;
  flex-shrink: 0;
}

.mobile-touch #chat-dock .chat-toggle-btn:active {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(0.9);
}

/* ═══════════════════════════════════════════════════
   4. CHAT BODY & SCROLL
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock .chat-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: transparent;
  position: relative;
  padding: 0 10px 8px;
}

.mobile-touch #chat-dock .chat-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(6, 5, 16, 0.55), transparent);
  pointer-events: none;
  z-index: 2;
}

.mobile-touch #chat-dock .chat-scroll {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 2px 2px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  font-size: 13px;
}

.mobile-touch #chat-dock .chat-scroll::-webkit-scrollbar { width: 3px; }
.mobile-touch #chat-dock .chat-scroll::-webkit-scrollbar-track { background: transparent; }
.mobile-touch #chat-dock .chat-scroll::-webkit-scrollbar-thumb {
  background: rgba(200, 151, 58, 0.25);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════
   5. CHAT ROWS — mine (phải) / other (trái)
   Đúng quy cách gốc app.css
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock .chat-row {
  display: flex;
  margin: 0 0 3px 0;
  align-items: flex-start;
  animation: msgFadeIn 0.22s ease-out both;
}

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

.mobile-touch #chat-dock .chat-row.other { justify-content: flex-start; }
.mobile-touch #chat-dock .chat-row.mine  { justify-content: flex-end; }

.mobile-touch #chat-dock .chat-row.mine  .chat-bubble-container { align-items: flex-end; }
.mobile-touch #chat-dock .chat-row.other .chat-bubble-container { align-items: flex-start; }

/* ═══════════════════════════════════════════════════
   6. AVATAR
   Chỉ hiện với .other (trái), ẩn với .mine
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock .chat-avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 6px;
  flex-shrink: 0;
  margin-top: 10px;
}

/* Tin của mình — KHÔNG có avatar */
.mobile-touch #chat-dock .chat-row.mine .chat-avatar-wrapper {
  display: none;
}

.mobile-touch #chat-dock .chat-avatar-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.mobile-touch #chat-dock .chat-avatar-circle img {
  width: 100%; height: 100%; object-fit: cover;
}

.mobile-touch #chat-dock .chat-avatar-circle .avatar-fallback { font-size: 12px; }

/* Tin nhắn liên tiếp cùng người: thụt vào 32px (26px avatar + 6px gap) */
.mobile-touch #chat-dock .chat-row.other .chat-bubble-wrapper:has(.chat-bubble-consecutive) { margin-left: 32px; }
.mobile-touch #chat-dock .chat-row.other .consecutive-wrapper { margin-left: 32px; }

/* ═══════════════════════════════════════════════════
   7. SENDER NAME & TIMESTAMP
   Tên chỉ hiện với .other, ẩn với .mine
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock .chat-sender-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
}

.mobile-touch #chat-dock .chat-row.mine .chat-sender-info { display: none; }

.mobile-touch #chat-dock .chat-sender-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1px;
}

.mobile-touch #chat-dock .chat-sender-timestamp {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.mobile-touch #chat-dock .chat-name {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2px;
  display: block;
}

.mobile-touch #chat-dock .chat-row.mine .chat-name { display: none; }

/* ═══════════════════════════════════════════════════
   8. BUBBLE — kích thước & bo góc gốc
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock .chat-bubble {
  display: inline-block;
  width: auto;
  max-width: 62vw;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  hyphens: none;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-touch #chat-dock .chat-row.mine  .chat-bubble { border-bottom-right-radius: 4px; }
.mobile-touch #chat-dock .chat-row.other .chat-bubble { border-bottom-left-radius: 4px; }

.mobile-touch #chat-dock .chat-text {
  word-break: normal;
  overflow-wrap: break-word;
  display: inline;
  white-space: pre-wrap;
  hyphens: none;
}

/* ═══════════════════════════════════════════════════
   9. MÀU BUBBLE THEO TỪNG KÊNH — copy đúng từ gốc
   ═══════════════════════════════════════════════════ */

/* ── PUBLIC / VILLAGE ── */
.mobile-touch #chat-dock .chat-bubble.mine {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.mobile-touch #chat-dock .chat-bubble.other {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  border: 1px solid rgba(200, 210, 220, 0.5);
  color: #2d3748;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.mobile-touch #chat-dock .chat-row.team-chat .chat-bubble.other {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  border: 1px solid rgba(200, 210, 220, 0.5);
  color: #2d3748;
}
.mobile-touch #chat-dock .chat-bubble.mine:hover  { box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }
.mobile-touch #chat-dock .chat-bubble.other:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); }

.mobile-touch #chat-dock .chat-bubble.mine  .mention    { color: #ffe66d; font-weight: 700; }
.mobile-touch #chat-dock .chat-bubble.mine  .mention-me { color: #ffe66d; font-weight: 700; background: rgba(255,255,255,.15); padding: 1px 4px; border-radius: 3px; }
.mobile-touch #chat-dock .chat-bubble.other .mention    { color: #667eea; font-weight: 700; background: rgba(102,126,234,.15); padding: 1px 4px; border-radius: 3px; }
.mobile-touch #chat-dock .chat-bubble.other .mention-me { color: #667eea; font-weight: 700; background: rgba(102,126,234,.2);  padding: 1px 4px; border-radius: 3px; }

/* ── WOLF ── */
.mobile-touch #chat-dock .chat-bubble.mine.wolf-self {
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid rgba(255, 77, 77, 0.4);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px rgba(255, 77, 77, 0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.mobile-touch #chat-dock .chat-bubble.mine.wolf-self::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,77,77,0.08) 0%, transparent 50%);
  border-radius: inherit; pointer-events: none;
}
.mobile-touch #chat-dock .chat-bubble.other.wolf-other {
  background: linear-gradient(145deg, #8b0000 0%, #5c0000 100%);
  border: 2px solid rgba(255, 100, 100, 0.3);
  color: #fff;
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 15px rgba(139,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}
.mobile-touch #chat-dock .chat-bubble.other.wolf-other::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(255,100,100,0.12) 0%, transparent 50%);
  border-radius: inherit; pointer-events: none;
}
.mobile-touch #chat-dock .chat-row.team-chat .chat-bubble.mine.wolf-self:hover   { box-shadow: 0 6px 16px rgba(255,77,77,.35), inset 0 1px 0 rgba(255,255,255,.08); border-color: rgba(255,77,77,.6); }
.mobile-touch #chat-dock .chat-row.team-chat .chat-bubble.other.wolf-other:hover  { box-shadow: 0 6px 20px rgba(139,0,0,.55), inset 0 1px 0 rgba(255,255,255,.15); border-color: rgba(255,100,100,.5); }
.mobile-touch #chat-dock .chat-bubble.mine.wolf-self  .mention    { color: #ff4d4d; font-weight: 700; text-shadow: 0 0 8px rgba(255,77,77,.5); }
.mobile-touch #chat-dock .chat-bubble.mine.wolf-self  .mention-me { color: #ff4d4d; font-weight: 700; background: rgba(255,77,77,.2); padding: 1px 4px; border-radius: 3px; text-shadow: 0 0 8px rgba(255,77,77,.5); }
.mobile-touch #chat-dock .chat-bubble.other.wolf-other .mention    { color: #000; font-weight: 700; background: rgba(255,255,255,.35); padding: 1px 4px; border-radius: 3px; }
.mobile-touch #chat-dock .chat-bubble.other.wolf-other .mention-me { color: #000; font-weight: 700; background: rgba(255,255,255,.45); padding: 1px 4px; border-radius: 3px; }

/* ── COUPLE ── */
.mobile-touch #chat-dock .chat-bubble.mine.couple-self {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  border: 2px solid rgba(168, 237, 234, 0.5);
  color: #2d3748;
  border-bottom-right-radius: 4px;
  box-shadow: 0 3px 10px rgba(168, 237, 234, 0.3);
  font-weight: 500;
}
.mobile-touch #chat-dock .chat-bubble.other.couple-other {
  background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
  border: 2px solid rgba(255, 234, 167, 0.5);
  color: #2d3436;
  border-bottom-left-radius: 4px;
  box-shadow: 0 3px 10px rgba(253, 203, 110, 0.3);
  font-weight: 500;
}
.mobile-touch #chat-dock .chat-row.team-chat .chat-bubble.mine.couple-self:hover   { box-shadow: 0 5px 15px rgba(168,237,234,.45); border-color: rgba(168,237,234,.7); }
.mobile-touch #chat-dock .chat-row.team-chat .chat-bubble.other.couple-other:hover  { box-shadow: 0 5px 15px rgba(253,203,110,.45); border-color: rgba(255,234,167,.7); }
.mobile-touch #chat-dock .chat-bubble.mine.couple-self   .mention    { color: #e17055; font-weight: 700; background: rgba(225,112,85,.15); padding: 1px 4px; border-radius: 3px; }
.mobile-touch #chat-dock .chat-bubble.mine.couple-self   .mention-me { color: #e17055; font-weight: 700; background: rgba(225,112,85,.2);  padding: 1px 4px; border-radius: 3px; }
.mobile-touch #chat-dock .chat-bubble.other.couple-other .mention    { color: #d63031; font-weight: 700; background: rgba(214,48,49,.15);  padding: 1px 4px; border-radius: 3px; }
.mobile-touch #chat-dock .chat-bubble.other.couple-other .mention-me { color: #d63031; font-weight: 700; background: rgba(214,48,49,.2);   padding: 1px 4px; border-radius: 3px; }

/* ── MEDIUM ── */
.mobile-touch #chat-dock .chat-bubble.mine.medium-self {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 2px solid rgba(118, 75, 162, 0.4);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 3px 12px rgba(118,75,162,0.3), 0 0 20px rgba(118,75,162,0.15);
}
.mobile-touch #chat-dock .chat-bubble.mine.medium-self::after {
  content: ''; position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(45deg, #667eea, #764ba2, #667eea);
  border-radius: 16px; z-index: -1; opacity: 0.3; filter: blur(8px);
}
.mobile-touch #chat-dock .chat-bubble.other.medium-other {
  background: linear-gradient(135deg, #e0e7ff 0%, #d1d5ff 100%);
  border: 2px solid rgba(209, 213, 255, 0.6);
  color: #1e1b4b;
  border-bottom-left-radius: 4px;
  box-shadow: 0 3px 10px rgba(224, 231, 255, 0.4);
}
.mobile-touch #chat-dock .chat-bubble.other.medium-other::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(118,75,162,0.03) 10px, rgba(118,75,162,0.03) 20px);
  border-radius: inherit; pointer-events: none;
}
.mobile-touch #chat-dock .chat-row.team-chat .chat-bubble.mine.medium-self:hover   { box-shadow: 0 5px 16px rgba(118,75,162,.45), 0 0 25px rgba(118,75,162,.25); border-color: rgba(118,75,162,.6); }
.mobile-touch #chat-dock .chat-row.team-chat .chat-bubble.other.medium-other:hover  { box-shadow: 0 5px 14px rgba(224,231,255,.55); border-color: rgba(209,213,255,.8); }
.mobile-touch #chat-dock .chat-bubble.mine.medium-self   .mention    { color: #ffe66d; font-weight: 700; text-shadow: 0 0 10px rgba(255,230,109,.5); }
.mobile-touch #chat-dock .chat-bubble.mine.medium-self   .mention-me { color: #ffe66d; font-weight: 700; background: rgba(255,230,109,.2); padding: 1px 4px; border-radius: 3px; text-shadow: 0 0 10px rgba(255,230,109,.5); }
.mobile-touch #chat-dock .chat-bubble.other.medium-other .mention    { color: #7c3aed; font-weight: 700; background: rgba(124,58,237,.15); padding: 1px 4px; border-radius: 3px; }
.mobile-touch #chat-dock .chat-bubble.other.medium-other .mention-me { color: #7c3aed; font-weight: 700; background: rgba(124,58,237,.2);  padding: 1px 4px; border-radius: 3px; }

/* ── DEAD ── */
.mobile-touch #chat-dock .chat-bubble.mine.dead-self {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border: 2px solid rgba(149, 165, 166, 0.4);
  color: #ecf0f1;
  border-bottom-right-radius: 4px;
  box-shadow: 0 3px 12px rgba(44,62,80,0.4), 0 0 15px rgba(149,165,166,0.2);
}
.mobile-touch #chat-dock .chat-bubble.mine.dead-self::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(149,165,166,0.08) 0%, transparent 70%);
  border-radius: inherit; pointer-events: none;
}
.mobile-touch #chat-dock .chat-bubble.other.dead-other {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  border: 2px solid rgba(127, 140, 141, 0.5);
  color: #2c3e50;
  border-bottom-left-radius: 4px;
  box-shadow: 0 3px 10px rgba(149,165,166,0.3);
}
.mobile-touch #chat-dock .chat-bubble.other.dead-other::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 50%);
  border-radius: inherit; pointer-events: none;
}
.mobile-touch #chat-dock .chat-row.team-chat .chat-bubble.mine.dead-self:hover   { box-shadow: 0 5px 16px rgba(44,62,80,.5), 0 0 20px rgba(149,165,166,.3); border-color: rgba(149,165,166,.6); }
.mobile-touch #chat-dock .chat-row.team-chat .chat-bubble.other.dead-other:hover  { box-shadow: 0 5px 14px rgba(149,165,166,.45); border-color: rgba(127,140,141,.7); }
.mobile-touch #chat-dock .chat-bubble.mine.dead-self   .mention    { color: #e74c3c; font-weight: 700; text-shadow: 0 0 8px rgba(231,76,60,.4); }
.mobile-touch #chat-dock .chat-bubble.mine.dead-self   .mention-me { color: #e74c3c; font-weight: 700; background: rgba(231,76,60,.2); padding: 1px 4px; border-radius: 3px; text-shadow: 0 0 8px rgba(231,76,60,.4); }
.mobile-touch #chat-dock .chat-bubble.other.dead-other .mention    { color: #c0392b; font-weight: 700; background: rgba(192,57,43,.15); padding: 1px 4px; border-radius: 3px; }
.mobile-touch #chat-dock .chat-bubble.other.dead-other .mention-me { color: #c0392b; font-weight: 700; background: rgba(192,57,43,.2);  padding: 1px 4px; border-radius: 3px; }

/* ── Dead avatar — grayscale ── */
.mobile-touch #chat-dead-box .chat-avatar-circle { background: radial-gradient(circle at 30% 25%, rgba(180,185,190,0.9), rgba(120,125,130,0.95)); border: 2px solid rgba(150,155,160,0.5); box-shadow: 0 0 0 2px rgba(130,135,140,0.6), 0 0 12px rgba(149,165,166,0.3); }
.mobile-touch #chat-dead-box .chat-avatar-circle img { filter: grayscale(100%) brightness(0.85) contrast(1.1); opacity: 0.9; }
.mobile-touch #chat-dead-box .chat-avatar-circle .avatar-fallback { filter: grayscale(100%) brightness(0.85); opacity: 0.85; }
.mobile-touch #chat-dead-box .chat-row:hover .chat-avatar-circle { box-shadow: 0 0 0 2px rgba(150,155,160,0.8), 0 0 18px rgba(149,165,166,0.45); border-color: rgba(170,175,180,0.7); }

/* ── Prestige avatar glow ── */
.mobile-touch #chat-dock .chat-row.player-prestige-1 .chat-avatar-circle { background: radial-gradient(circle at 30% 25%, rgba(255,244,186,.95), rgba(198,142,20,.96)); border: 1px solid rgba(255,228,138,.92); box-shadow: 0 0 0 2px rgba(255,214,102,.82), 0 0 18px rgba(255,205,70,.48), 0 0 32px rgba(255,196,44,.34); }
.mobile-touch #chat-dock .chat-row.player-prestige-2 .chat-avatar-circle { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.96), rgba(156,172,205,.94)); border: 1px solid rgba(236,241,255,.92); box-shadow: 0 0 0 2px rgba(240,245,255,.9), 0 0 18px rgba(220,230,255,.46), 0 0 30px rgba(190,205,240,.3); }
.mobile-touch #chat-dock .chat-row.player-prestige-3 .chat-avatar-circle { background: radial-gradient(circle at 30% 25%, rgba(255,228,205,.96), rgba(165,96,56,.94)); border: 1px solid rgba(235,188,156,.9); box-shadow: 0 0 0 2px rgba(214,148,104,.82), 0 0 18px rgba(204,124,78,.42), 0 0 30px rgba(168,94,54,.28); }
.mobile-touch #chat-dock .chat-row.player-prestige-1 .chat-avatar-circle img,
.mobile-touch #chat-dock .chat-row.player-prestige-2 .chat-avatar-circle img,
.mobile-touch #chat-dock .chat-row.player-prestige-3 .chat-avatar-circle img { filter: saturate(1.08) brightness(1.04); }
.mobile-touch #chat-dock .chat-row.player-prestige-1 .chat-bubble-wrapper,
.mobile-touch #chat-dock .chat-row.player-prestige-2 .chat-bubble-wrapper,
.mobile-touch #chat-dock .chat-row.player-prestige-3 .chat-bubble-wrapper { padding: 0; border-radius: 0; background: none; box-shadow: none; }

/* ═══════════════════════════════════════════════════
   10. CHAT INPUT ROW — Messenger / WhatsApp style
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock .chat-input-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  padding: 8px 10px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  background: rgba(5, 4, 14, 0.75);
  border-top: 1px solid rgba(200, 151, 58, 0.09);
  flex-shrink: 0;
  position: relative;
}

/* Quote preview & mention list vẫn giữ nguyên */
.mobile-touch #chat-dock .chat-input-row > div:not(:last-child) {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Hàng input + nút gửi: flex ngang */
.mobile-touch #chat-dock .chat-input-row .chat-inp-wrap,
.mobile-touch #chat-dock .chat-input-row > .chat-inp,
.mobile-touch #chat-dock .chat-input-row > .send-btn {
  /* handled below */
}

/* Wrapper bên trong chat-input-row — input + send nằm cùng hàng */
.mobile-touch #chat-dock .chat-input-row {
  /* Override: dùng flex-row cho hàng cuối (inp + btn) */
}

/* Input kiểu iMessage pill */
.mobile-touch #chat-dock .chat-inp {
  flex: 1;
  min-width: 0;
  /* Chiều cao tự co giãn */
  height: 42px;
  padding: 11px 14px 11px 14px;
  font-size: 15px;
  line-height: 1.35;
  font-family: var(--font);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(200, 151, 58, 0.22);
  border-radius: 21px;
  color: var(--moon);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
  transition: border-color 0.2s, background 0.2s;
  /* Không wrap kỳ lạ */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-touch #chat-dock .chat-inp::placeholder {
  color: rgba(176, 184, 200, 0.38);
}

.mobile-touch #chat-dock .chat-inp:focus {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(200, 151, 58, 0.5);
  box-shadow: 0 0 12px rgba(200, 151, 58, 0.18);
  white-space: normal;
  overflow: auto;
  text-overflow: clip;
}

/* Nút GỬI — tròn, ẩn chữ, mũi tên CSS */
.mobile-touch #chat-dock .send-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  padding: 0;
  margin-left: 8px;
  border: none;
  cursor: pointer;
  /* Màu vàng cam đồng bộ theme game */
  background: linear-gradient(135deg, #C8973A 0%, #e0a83e 100%);
  box-shadow: 0 2px 10px rgba(200, 151, 58, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  /* Ẩn text "Gửi" */
  font-size: 0;
  color: transparent;
  overflow: visible;
}

/* Mũi tên ▶ vẽ thuần CSS */
.mobile-touch #chat-dock .send-btn::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 11px;
  border-color: transparent transparent transparent #ffffff;
  margin-left: 2px; /* căn giữa quang học */
  pointer-events: none;
}

.mobile-touch #chat-dock .send-btn:active {
  transform: scale(0.87);
  box-shadow: 0 1px 4px rgba(200, 151, 58, 0.3);
}

/* Hàng input + button nằm ngang nhau */
.mobile-touch #chat-dock .chat-input-row {
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Quote và mention chiếm toàn chiều rộng, đẩy inp+btn xuống */
.mobile-touch #chat-dock .chat-quote-preview,
.mobile-touch #chat-dock .mention-list {
  flex: 0 0 100%;
  width: 100%;
}

/* Quote preview */
.mobile-touch #chat-dock .chat-quote-preview {
  padding: 7px 10px;
  border-left: 3px solid var(--gold);
  background: rgba(200,151,58,0.07);
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}

.mobile-touch #chat-dock .chat-quote-from {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.mobile-touch #chat-dock .chat-quote-text {
  font-size: 12px;
  color: rgba(232,220,200,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

/* ═══════════════════════════════════════════════════
   FIX 2 — Reaction button & pill: icon căn đúng giữa
   ═══════════════════════════════════════════════════ */

/* Nút thêm reaction (dấu +😊 bên cạnh bubble) */
.mobile-touch #chat-dock .chat-react-btn,
.mobile-touch #chat-dock .reaction-add-btn,
.mobile-touch #chat-dock button[class*="react"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  padding: 2px 5px !important;
  font-size: 15px !important;
  /* Reset bất kỳ offset lạ nào */
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

.mobile-touch #chat-dock .chat-react-btn span,
.mobile-touch #chat-dock .reaction-add-btn span,
.mobile-touch #chat-dock button[class*="react"] span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  font-size: inherit !important;
}

/* Reaction pill — hiển thị count + emoji dưới/cạnh bubble */
.mobile-touch #chat-dock .chat-reactions,
.mobile-touch #chat-dock .message-reactions,
.mobile-touch #chat-dock .reaction-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 3px;
}

.mobile-touch #chat-dock .reaction-item,
.mobile-touch #chat-dock .chat-reaction,
.mobile-touch #chat-dock [class*="reaction-pill"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px;
  line-height: 1 !important;
  padding: 2px 7px !important;
  border-radius: 10px;
  font-size: 13px !important;
  vertical-align: middle !important;
}

.mobile-touch #chat-dock .reaction-item .emoji,
.mobile-touch #chat-dock .reaction-item span:first-child,
.mobile-touch #chat-dock .chat-reaction .emoji {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  font-size: 14px !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════
   11. SCROLL TO BOTTOM BUTTON
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock .chat-scroll-to-latest-btn {
  position: absolute;
  bottom: 70px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(20, 16, 40, 0.85);
  border: 1px solid rgba(200, 151, 58, 0.3);
  color: var(--gold);
  font-size: 18px;
  cursor: pointer;
  display: none; align-items: center; justify-content: center;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.mobile-touch #chat-dock .chat-scroll-to-latest-btn.visible { display: flex; animation: scrollBtnBounce 1.6s ease-in-out infinite; }
@keyframes scrollBtnBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ═══════════════════════════════════════════════════
   12. FAB DOCK — NẰM NGANG PHÍA DƯỚI
   ═══════════════════════════════════════════════════ */

.mobile-chat-channel-tabs, .mobile-chat-tab,
.mobile-chat-tab-icon, .mobile-chat-tab-label { display: none !important; }

/* Ẩn role card / action buttons trong panel trên mobile (hiện qua modal thay thế) */
/* game-mobile-panel vẫn hiển thị — chỉ game-chat-fabs được tách ra fixed */

/* FAB container: fixed bottom, tách hoàn toàn khỏi flow */
.mobile-touch .game-chat-fab-container,
.mobile-touch #game-chat-fabs {
  position: fixed !important;
  bottom: max(18px, env(safe-area-inset-bottom, 18px)) !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  z-index: 380;
  pointer-events: none;
  padding: 0 20px 20px;
  /* reset any inherited layout from parent */
  width: 100% !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}

.mobile-touch.mobile-chat-open .game-chat-fab-container,
.mobile-touch.mobile-chat-open #game-chat-fabs { display: none !important; }

.mobile-touch .game-chat-fab {
  pointer-events: auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  background: rgba(14, 12, 28, 0.9);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
  animation: fabPopIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mobile-touch .game-chat-fab[data-chat-channel="public"] { box-shadow: 0 4px 20px rgba(102,126,234,0.3), 0 0 0 1.5px rgba(102,126,234,0.35); }
.mobile-touch .game-chat-fab[data-chat-channel="wolf"]   { box-shadow: 0 4px 20px rgba(220,20,60,0.35),   0 0 0 1.5px rgba(220,20,60,0.4); }
.mobile-touch .game-chat-fab[data-chat-channel="couple"] { box-shadow: 0 4px 20px rgba(255,143,171,0.3),  0 0 0 1.5px rgba(255,143,171,0.35); }
.mobile-touch .game-chat-fab[data-chat-channel="medium"] { box-shadow: 0 4px 20px rgba(167,139,250,0.3),  0 0 0 1.5px rgba(167,139,250,0.38); }
.mobile-touch .game-chat-fab[data-chat-channel="dead"]   { box-shadow: 0 4px 20px rgba(120,120,140,0.25), 0 0 0 1.5px rgba(149,165,166,0.3); }

@keyframes fabPopIn {
  from { opacity: 0; transform: scale(0.4) translateY(20px); }
  60%  { transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.mobile-touch .game-chat-fab:active { transform: scale(0.84); }

.mobile-touch .game-chat-fab::after {
  content: attr(data-label);
  position: absolute;
  bottom: -18px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(232, 220, 200, 0.5);
  white-space: nowrap;
  pointer-events: none;
  text-transform: uppercase;
  font-family: var(--font);
}

.mobile-touch .game-chat-fab .fab-unread-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B);
  color: #fff; border-radius: 9px;
  font-size: 10px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
  border: 1.5px solid rgba(6, 5, 16, 0.9);
  box-shadow: 0 2px 8px rgba(255, 59, 59, 0.5);
  z-index: 2;
  animation: badgePop 2s ease-in-out infinite;
  font-family: var(--font);
}
.mobile-touch .game-chat-fab .fab-unread-badge.show { display: flex; }
@keyframes badgePop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

/* ═══════════════════════════════════════════════════
   13. MENTION LIST
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock .mention-list {
  position: absolute;
  bottom: 100%; left: 0; right: 0;
  max-height: 130px; overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px; z-index: 500;
  display: none;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.5);
}
.mobile-touch #chat-dock .mention-list.show { display: flex; flex-direction: column; }
.mobile-touch #chat-dock .mention-item { padding: 10px 12px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; display: flex; align-items: center; gap: 8px; background: rgba(20,20,30,0.95); }
.mobile-touch #chat-dock .mention-item:last-child { border-bottom: none; }
.mobile-touch #chat-dock .mention-item:active { background: rgba(200,151,58,0.2); }

/* ═══════════════════════════════════════════════════
   14. KEYBOARD & LANDSCAPE
   ═══════════════════════════════════════════════════ */

.mobile-touch #chat-dock.keyboard-open .chat-box.mobile-chat-active {
  max-height: calc(100dvh - var(--kb-offset, 0px));
}

@media (max-height: 500px) and (orientation: landscape) {
  .mobile-touch #chat-dock .chat-header { padding: 8px 14px; }
  .mobile-touch #chat-dock .chat-scroll { padding: 8px 2px; }
  .mobile-touch #chat-dock .chat-inp { height: 36px; font-size: 14px; }
  .mobile-touch #chat-dock .send-btn { width: 36px; height: 36px; }
  .mobile-touch #chat-dock .send-btn::after { border-width: 5px 0 5px 9px; }
  .mobile-touch .game-chat-fab { width: 44px; height: 44px; font-size: 18px; }
}

/* ═══════════════════════════════════════════════════
   15. REDUCED MOTION
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .mobile-touch #chat-dock .chat-box.mobile-chat-active,
  .mobile-touch #chat-dock .chat-row,
  .mobile-touch .game-chat-fab { animation: none !important; }
}
/* ═══════════════════════════════════════════════════
   17. OVERRIDE app.css — BẮT BUỘC dùng !important
   vì app.css có .chat-dock .chat-bubble specificity = (0,2,0)
   trong khi mobile-touch + #chat-dock = (0,1,1) thắng,
   nhưng một số rule trong app.css vẫn leak qua → dùng !important
   ═══════════════════════════════════════════════════ */

/* CORE BUBBLE — override .chat-dock .chat-bubble từ app.css */
.mobile-touch #chat-dock .chat-bubble {
  max-width: min(68vw, 260px) !important;
  padding: 7px 11px !important;
  border-radius: 18px !important;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  width: auto !important;
  /* Bubble tự co theo nội dung, không bị kéo rộng */
  display: inline-block !important;
}

/* Đuôi bubble kiểu Messenger */
.mobile-touch #chat-dock .chat-row.mine  .chat-bubble { border-bottom-right-radius: 5px !important; }
.mobile-touch #chat-dock .chat-row.other .chat-bubble { border-bottom-left-radius:  5px !important; }

/* Tin liên tiếp cùng người: KHÔNG có đuôi */
.mobile-touch #chat-dock .chat-row.other .chat-bubble.chat-bubble-consecutive {
  border-bottom-left-radius: 18px !important;
  border-top-left-radius: 4px !important;
}

/* CHAT-BOX: override width:340px; height:380px từ app.css */
.mobile-touch #chat-dock .chat-box.mobile-chat-active {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
}

/* CHAT BODY & SCROLL */
.mobile-touch #chat-dock .chat-body {
  padding: 0 8px 6px !important;
  font-size: 14.5px !important;
}
.mobile-touch #chat-dock .chat-scroll {
  font-size: 14.5px !important;
  padding: 6px 4px 4px !important;
  max-height: none !important;
}

/* INPUT ROW — override height:32px từ app.css */
.mobile-touch #chat-dock .chat-inp {
  height: 38px !important;
  padding: 9px 14px !important;
  font-size: 15px !important;
  border-radius: 19px !important;
}
.mobile-touch #chat-dock .send-btn {
  height: 42px !important;
  width: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  flex-shrink: 0 !important;
}

/* AVATAR — override width:32px từ app.css */
.mobile-touch #chat-dock .chat-avatar-circle {
  width: 28px !important;
  height: 28px !important;
}

/* ROW spacing */
.mobile-touch #chat-dock .chat-row {
  margin: 0 0 2px 0 !important;
  align-items: flex-end !important;
}