/* ============================================================
   CHAT.CSS — Quick emote bar + speech bubbles at players
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   EMOTE BAR — fixed bottom strip, only visible during game
   ───────────────────────────────────────────────────────────── */
#emote-bar {
  position: fixed;
  bottom: 14px;
  left: 14px;
  transform: none;
  z-index: 60;
  display: none;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  max-width: 340px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.62) 100%);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 28px rgba(var(--neon-1-rgb), 0.2);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
}
#emote-bar.visible {
  display: flex;
  animation: emoteBarIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes emoteBarIn {
  from { opacity: 0; transform: translateY(20px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

#emote-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-1), var(--neon-2), transparent);
  opacity: 0.5;
  border-radius: 100px 100px 0 0;
}

.emote-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--line-2);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.18s, box-shadow 0.18s, background 0.18s;
  padding: 0;
  font-family: inherit;
}
.emote-btn:hover:not(:disabled) {
  transform: scale(1.18) translateY(-4px);
  border-color: var(--neon-1);
  background: rgba(var(--neon-1-rgb), 0.12);
  box-shadow:
    0 8px 20px rgba(var(--neon-1-rgb), 0.4),
    0 0 20px rgba(var(--neon-1-rgb), 0.3),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.emote-btn:active:not(:disabled) { transform: scale(1.05); }
.emote-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Text emote pill — wider, shows the phrase */
.emote-btn.emote-btn-text {
  width: auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 100px;
  font-family: var(--body-font, 'Outfit', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.emote-btn.emote-btn-text:hover:not(:disabled) {
  color: #fff;
  transform: scale(1.06) translateY(-2px);
}

/* Vertical divider between emoji and text emote groups */
.emote-bar-sep {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, transparent, var(--line-2), transparent);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Wider bubble when content is text instead of emoji */
.emote-bubble.text-mode {
  width: auto;
  height: auto;
  min-width: 90px;
  font-size: 0.85rem;
  font-family: var(--body-font, 'Outfit', sans-serif);
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  border-radius: 18px;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.emote-btn:disabled::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: conic-gradient(rgba(255,255,255,0.18) var(--cd, 0deg), transparent 0);
  pointer-events: none;
}
.emote-btn { position: relative; }

/* ─────────────────────────────────────────────────────────────
   EMOTE BUBBLE — pops next to a player avatar when they emote
   ───────────────────────────────────────────────────────────── */
.emote-bubble {
  position: absolute;
  z-index: 65;
  pointer-events: none;
  font-size: 2.6rem;
  line-height: 1;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(0,0,0,0.92), rgba(0,0,0,0.75));
  border: 1.5px solid rgba(var(--neon-1-rgb), 0.55);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.7),
    0 0 24px rgba(var(--neon-1-rgb), 0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
  animation: emoteBubblePop 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: center bottom;
}
@keyframes emoteBubblePop {
  0%   { opacity: 0; transform: scale(0.3)  translateY(20px) rotate(-12deg); }
  18%  { opacity: 1; transform: scale(1.18) translateY(-6px) rotate(4deg); }
  32%  { transform: scale(0.96) translateY(0)   rotate(0deg); }
  45%  { transform: scale(1.02) translateY(-2px); }
  60%  { transform: scale(1)    translateY(0); }
  80%  { opacity: 1; transform: scale(1) translateY(-4px); }
  100% { opacity: 0; transform: scale(0.85) translateY(-26px); }
}

/* Speech tail pointing down */
.emote-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: rgba(0,0,0,0.92);
  border-right: 1.5px solid rgba(var(--neon-1-rgb), 0.55);
  border-bottom: 1.5px solid rgba(var(--neon-1-rgb), 0.55);
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}

/* Variant tints based on emote vibe */
.emote-bubble.kind-fire   { border-color: rgba(255,140,42,0.7); box-shadow: 0 12px 32px rgba(0,0,0,0.7), 0 0 28px rgba(255,140,42,0.5); }
.emote-bubble.kind-fire::after  { border-right-color: rgba(255,140,42,0.7); border-bottom-color: rgba(255,140,42,0.7); }
.emote-bubble.kind-cool   { border-color: rgba(var(--neon-2-rgb), 0.7); box-shadow: 0 12px 32px rgba(0,0,0,0.7), 0 0 28px rgba(var(--neon-2-rgb), 0.5); }
.emote-bubble.kind-cool::after  { border-right-color: rgba(var(--neon-2-rgb), 0.7); border-bottom-color: rgba(var(--neon-2-rgb), 0.7); }
.emote-bubble.kind-skull  { border-color: rgba(255,64,112,0.7); box-shadow: 0 12px 32px rgba(0,0,0,0.7), 0 0 28px rgba(255,64,112,0.5); }
.emote-bubble.kind-skull::after { border-right-color: rgba(255,64,112,0.7); border-bottom-color: rgba(255,64,112,0.7); }
.emote-bubble.kind-clap   { border-color: rgba(40,224,140,0.7); box-shadow: 0 12px 32px rgba(0,0,0,0.7), 0 0 28px rgba(40,224,140,0.5); }
.emote-bubble.kind-clap::after  { border-right-color: rgba(40,224,140,0.7); border-bottom-color: rgba(40,224,140,0.7); }

/* Bubble position offsets per player position */
.emote-bubble[data-pos="bottom"] { top: -68px; left: 50%; transform: translateX(-50%); }
.emote-bubble[data-pos="top"]    { bottom: -68px; left: 50%; transform: translateX(-50%); }
.emote-bubble[data-pos="top"]::after { bottom: auto; top: -7px; transform: translateX(-50%) rotate(225deg); }
.emote-bubble[data-pos="left"]   { right: -68px; top: 50%; transform: translateY(-50%); }
.emote-bubble[data-pos="left"]::after { bottom: 50%; left: -7px; transform: translateY(50%) rotate(135deg); }
.emote-bubble[data-pos="right"]  { left: -68px; top: 50%; transform: translateY(-50%); }
.emote-bubble[data-pos="right"]::after { bottom: 50%; right: -7px; left: auto; transform: translateY(50%) rotate(-45deg); }

@media (max-width: 760px) {
  #emote-bar { padding: 6px 10px; gap: 4px; }
  .emote-btn { width: 36px; height: 36px; font-size: 1.2rem; }
}