/* ==========================================================================
   ChatContainer v2 · Phase 1 Foundation
   Styles the .g-chat column's live messages with avatars, role badges,
   timestamps, and proper compose row. Built to override mock rendering
   without removing the surrounding .chat-head / .chat-body / .ch-pill DOM.
   ========================================================================== */

/* Message base */
.msg-v2 {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  line-height: 1.35;
  animation: msgFadeIn 0.15s ease-out;
}
@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-v2.deleted {
  opacity: 0.4;
}
.msg-v2.deleted .msg-content {
  font-style: italic;
  color: #666;
}
.msg-v2.deleted .msg-content::after { content: ' [deleted]'; }

/* Avatar */
.msg-avatar {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1a1a1a;
  overflow: hidden;
  margin-top: 1px;
}
.msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.msg-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eee;
  font-weight: 800;
  font-size: 10px;
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: -0.02em;
}

/* Body */
.msg-body {
  flex: 1;
  min-width: 0;
}

.msg-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 1px;
}

.msg-name {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 11px;
}

/* Role badges · dot next to the name */
.msg-badge {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
.msg-badge[data-role="staff"],
.msg-badge[data-role="admin"]    { background: var(--acid, #CCFF00); box-shadow: 0 0 0 2px rgba(204,255,0,0.15); }
.msg-badge[data-role="mod"]      { background: var(--cyan, #00E5FF); box-shadow: 0 0 0 2px rgba(0,229,255,0.15); }
.msg-badge[data-role="founding"] { background: var(--amber, #FFB800); box-shadow: 0 0 0 2px rgba(255,184,0,0.15); }
.msg-badge[data-role="realtime"] { background: var(--cyan, #00E5FF); }
.msg-badge[data-role="registered_free"],
.msg-badge[data-role="free"]     { background: #666; }
.msg-badge[data-role="bot"]      { background: var(--acid, #CCFF00); }
.msg-badge[data-role="guest"]    { background: #333; }

/* Role-based name colors */
.msg-name[data-role="staff"],
.msg-name[data-role="admin"]    { color: var(--acid, #CCFF00); }
.msg-name[data-role="mod"]      { color: var(--cyan, #00E5FF); }
.msg-name[data-role="founding"] { color: var(--amber, #FFB800); }
.msg-name[data-role="realtime"] { color: var(--cyan, #00E5FF); }
.msg-name[data-role="registered_free"],
.msg-name[data-role="free"]     { color: #ccc; }
.msg-name[data-role="bot"]      { color: var(--acid, #CCFF00); font-weight: 900; }
.msg-name[data-role="guest"]    { color: #888; }
/* Specialist colors */
.msg-name[data-role="sniper"]      { color: var(--blood, #FF2D2D); }
.msg-name[data-role="opener"]      { color: var(--cyan, #00E5FF); }
.msg-name[data-role="overnighter"] { color: var(--violet, #B794F4); }
.msg-name[data-role="runner"]      { color: var(--win, #00FF88); }
.msg-name[data-role="stalker"]     { color: var(--violet, #B794F4); }
.msg-name[data-role="trapper"]     { color: var(--amber, #FFB800); }
.msg-name[data-role="coach"]       { color: var(--violet, #B794F4); }
.msg-name[data-role="general"]     { color: var(--acid, #CCFF00); }
.msg-name[data-role="forge"]       { color: var(--amber, #FFB800); }

/* Timestamp */
.msg-time {
  font-size: 9px;
  color: #555;
  font-family: 'JetBrains Mono', monospace;
}

/* Content */
.msg-content {
  color: #ededed;
  word-break: break-word;
  white-space: pre-wrap;
}
.msg-content a {
  color: var(--acid, #CCFF00);
  text-decoration: none;
}
.msg-content a:hover {
  text-decoration: underline;
}

/* Reactions row */
.msg-reactions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.msg-reaction {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  font-size: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(204,255,0,0.05);
  cursor: pointer;
  transition: all 0.1s;
}
.msg-reaction:hover { border-color: var(--acid); }
.msg-reaction.me-reacted {
  border-color: var(--acid);
  background: rgba(204,255,0,0.15);
}

/* System messages */
.msg-system {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #666;
  text-align: center;
  padding: 4px 0;
  border-top: 1px dashed rgba(255,255,255,0.05);
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  margin: 6px 0;
}

/* Compose row */
#chatV2ComposeRow {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #030303;
  align-items: center;
}
#chatV2Input {
  flex: 1;
  padding: 8px 10px;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: #eee;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s;
}
#chatV2Input:focus {
  border-color: var(--acid, #CCFF00);
}
#chatV2Input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#chatV2Send {
  padding: 8px 14px;
  background: var(--acid, #CCFF00);
  color: #000;
  border: none;
  border-radius: 4px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.08s;
}
#chatV2Send:hover:not(:disabled) { transform: translateY(-1px); }
#chatV2Send:active:not(:disabled) { transform: translateY(0); }
#chatV2Send:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Connection banner */
#chatV2Banner {
  padding: 4px 10px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  background: rgba(255,45,45,0.1);
  color: var(--blood, #FF2D2D);
  border-top: 1px solid rgba(255,45,45,0.2);
  border-bottom: 1px solid rgba(255,45,45,0.2);
  display: none;
}
#chatV2Banner.show { display: block; }
#chatV2Banner.reconnecting { background: rgba(255,184,0,0.1); color: var(--amber, #FFB800); border-color: rgba(255,184,0,0.2); }
#chatV2Banner.cooldown { background: rgba(204,255,0,0.08); color: var(--acid, #CCFF00); border-color: rgba(204,255,0,0.2); }

/* Channel pill active state override (matches existing .ch-pill) */
.ch-pill.v2-active {
  background: rgba(204,255,0,0.15) !important;
  color: var(--acid, #CCFF00) !important;
  border-color: var(--acid, #CCFF00) !important;
  cursor: pointer;
}
.ch-pill[data-v2-channel] {
  cursor: pointer;
  transition: all 0.1s;
}
.ch-pill[data-v2-channel]:hover {
  border-color: rgba(204,255,0,0.5);
}
.ch-pill.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Typing indicator */
#chatV2Typing {
  padding: 2px 10px;
  font-size: 10px;
  color: #666;
  font-family: 'JetBrains Mono', monospace;
  font-style: italic;
  min-height: 14px;
}