/* ===========================================================
   ENEMY MESSAGE STYLES — RESPONSIVE
   =========================================================== */

/* HUD palette (matches info panel) */
:root{
  --hud-bg: #041014;
  --hud-panel: rgba(4,16,20,0.92);
  --hud-cyan: #00FFFF;
  --hud-cyan-soft:#bff7ff;
  --hud-border: rgba(0,255,255,0.28);
  --hud-glow: 0 0 14px rgba(0,255,255,0.18), inset 0 0 8px rgba(0,255,255,0.06);

  --msg-bubble:#241a19;
  --msg-bubble-border:#3b2a27;
  --msg-bubble-text:#ffe8c8;
  --time-amber:#ffc58a;
}

/* Container for list inserted into Info Panel */
.enemy-msg-list{
  display:grid;
  gap: clamp(4px, 0.9vw, 8px);          /* responsive gap between cards */
}

/* ===== Card ===== */
.enemy-msg-card{
  background: radial-gradient(80% 140% at 50% 0%, rgba(180,180,180,0.12) 0%, rgba(40,40,40,0) 60%),
              linear-gradient(180deg, #1e1e1e 0%, #2a2a2a 50%, #1a1a1a 100%);
  border:1px solid var(--hud-border);
  border-radius: clamp(8px, 1.2vw, 12px);
  padding: clamp(6px, 1.1vw, 10px);
  box-shadow: var(--hud-glow);
  color:#e8fbff;
  display:grid;
  gap: clamp(4px, 0.9vw, 8px);
  width: 100%;
  font-size: clamp(10px, 0.9vw, 12px);    /* base scaling for text inside card */
}

/* ===== Top area: name + logo + message bubble ===== */
.enemy-msg-top{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: clamp(4px, 0.8vw, 8px);
  row-gap: clamp(3px, 0.75vw, 6px);
  align-items:center;
}

.enemy-msg-user{ min-width:0; align-self:center; }

.enemy-msg-name{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight:800;
  letter-spacing:.01em;
  color:#d7f9ff;
}
.enemy-msg-badge{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 255, 0.12);
  border: 1px solid rgba(0, 255, 255, 0.45);
  color: #eaffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 0 8px rgba(0,255,255,0.25);
}
.enemy-msg-name-text{
  display: inline-block;
  max-width: 100%;
}

/* Logo chip at the right */
.enemy-msg-logo{
  position: relative;
  width: clamp(30px, 5.6vw, 42px);
  height: clamp(30px, 5.6vw, 42px);
  border-radius:8px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#1a242a,#0e171c);
  border:1px solid rgba(0,255,255,.22);
  box-shadow:var(--hud-glow);
  overflow:visible;
  cursor: pointer;
}
.enemy-msg-logo img{
  width:100%; height:100%; object-fit:cover;
  border-radius:7px;
}

.enemy-msg-logo[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translate(-50%, -100%);
  background: rgba(4, 16, 20, 0.95);
  color: #d7f9ff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,255,255,0.4);
  box-shadow: 0 0 10px rgba(0,255,255,0.3);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}
.enemy-msg-logo[data-tooltip]:hover::after,
.enemy-msg-logo[data-tooltip]:focus-within::after {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-4px);
}

/* Message bubble spans across the card width */
.enemy-msg-message{
  grid-column:1 / -1;
  background: var(--msg-bubble);
  border:1px solid var(--msg-bubble-border);
  border-radius:8px;
  padding: 6px 10px; /* smaller padding */
  min-height: 44px;
  position:relative;
  color: var(--msg-bubble-text);
  line-height:1.5;
  word-break:break-word;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
  font-size: clamp(10px, 0.9vw, 12px);   /* message text size */
}

/* Neon accent bar on the left edge (thin cyan glow) */
.enemy-msg-message::before{
  content:"";
  position:absolute;
  left:5px; top:5px; bottom:5px; width:2px;
  border-radius:3px;
  background:linear-gradient(180deg,#48f7ff,#00e5ff);
  box-shadow:0 0 10px rgba(0,255,255,.6);
}
.enemy-msg-body{ display:block; padding-left:7px; } /* offset from accent */

/* ===== Bottom row: attacks count + timestamp ===== */
.enemy-msg-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding-top:2px;
}

.enemy-msg-count{
  display:flex; align-items:center; gap:8px;
  color:#e8fbff;
  font-weight:700;
  letter-spacing:.02em;
  font-size: clamp(10px, 0.9vw, 12px);
}
.enemy-msg-label{ opacity:.95; }
.enemy-msg-count-value{
  font-weight:800;
  color:#ffffff;
}

/* Time at the right */
.enemy-msg-time{
  color: var(--time-amber);
  font-style:italic;
  opacity:.9;
  white-space:nowrap;
  font-size: clamp(9px, 0.85vw, 11px);
}

/* Small screens—keep everything comfy */
@media (max-width: 300px){
  .enemy-msg-name{ font-size: 11px; }
  .enemy-msg-card{ padding: 8px; }
}