/* ── Chat Mundial – CodePlay ───────────────────────────────── */

/* Layout */
.chat-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.5rem;
  height: calc(100vh - 120px);
  min-height: 600px;
}
@media (max-width: 900px) {
  .chat-layout { grid-template-columns: 1fr; height: auto; }
}

/* ── Chat Panel ─────────────────────────────────────────────── */
.chat-panel {
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #1a1a2e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 16px;
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: rgba(138, 43, 226, 0.12);
  border-bottom: 1px solid var(--border, #2a2a4a);
}
.chat-header__left { display: flex; align-items: center; gap: .75rem; }
.chat-world-icon { font-size: 1.8rem; }
.chat-header__left h2 { margin: 0; font-size: 1.1rem; }
.chat-online { font-size: .75rem; color: #22c55e; font-weight: 600; }
.chat-pulse { font-size: 1.4rem; transition: opacity .3s; }

/* ── Feed ───────────────────────────────────────────────────── */
.chat-feed {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  scroll-behavior: smooth;
}
.chat-feed::-webkit-scrollbar { width: 4px; }
.chat-feed::-webkit-scrollbar-thumb { background: rgba(138,43,226,.4); border-radius: 4px; }

/* message base */
.chat-msg {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  animation: msgIn .2s ease;
  max-width: 100%;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-icon, .msg-avatar { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.msg-body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  flex: 1;
  min-width: 0;
}
.msg-time { font-size: .65rem; color: #666; }
.msg-text { font-size: .85rem; line-height: 1.4; word-break: break-word; }
.msg-username { font-size: .7rem; font-weight: 700; color: #a78bfa; }
.msg-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #f59e0b; }

/* system message */
.chat-msg--system .msg-text { color: #9ca3af; }

/* mission announce */
.chat-msg--mission {
  background: rgba(245, 158, 11, 0.06);
  border-left: 3px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: .4rem .6rem;
}

/* user message */
.chat-msg--user { }
.chat-msg--me .msg-body { align-items: flex-end; }
.chat-msg--me .msg-text {
  background: rgba(138,43,226,.2);
  border-radius: 12px 12px 2px 12px;
  padding: .4rem .7rem;
  display: inline-block;
}

/* mission complete */
.chat-msg--complete {
  background: rgba(34,197,94,.06);
  border-left: 3px solid #22c55e;
  border-radius: 0 8px 8px 0;
  padding: .4rem .6rem;
}

/* reward tags */
.reward-tag {
  display: inline-block;
  background: rgba(168,85,247,.15);
  border: 1px solid rgba(168,85,247,.3);
  border-radius: 4px;
  padding: .05rem .3rem;
  font-size: .7rem;
  font-weight: 700;
  color: #c084fc;
  margin-left: .25rem;
}

/* ── Input Row ──────────────────────────────────────────────── */
.chat-input-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border, #2a2a4a);
  background: rgba(0,0,0,.15);
}
.chat-avatar-input { font-size: 1.3rem; flex-shrink: 0; }
.chat-input {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 8px;
  padding: .5rem .75rem;
  color: inherit;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
}
.chat-input:focus { border-color: #a78bfa; }

/* ── Mission Sidebar ────────────────────────────────────────── */
.mission-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--card-bg, #1a1a2e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 16px;
  padding: 1.25rem;
  overflow-y: auto;
}
.mission-sidebar::-webkit-scrollbar { width: 3px; }
.mission-sidebar::-webkit-scrollbar-thumb { background: rgba(138,43,226,.3); border-radius: 3px; }

.mission-sidebar__header h3 { margin: 0 0 .25rem; font-size: 1rem; }
.mission-next-timer { font-size: .75rem; color: #9ca3af; }

/* Sidebar mission card */
.sidebar-missions-list { display: flex; flex-direction: column; gap: .6rem; }
.sidebar-mission-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--m-color, #a855f7);
  border-radius: 10px;
  padding: .7rem .85rem;
  transition: transform .15s;
}
.sidebar-mission-card:hover { transform: translateY(-1px); }
.smc-head { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .4rem; }
.smc-icon { font-size: 1.3rem; flex-shrink: 0; }
.smc-info strong { display: block; font-size: .85rem; }
.smc-info small  { color: #9ca3af; font-size: .72rem; line-height: 1.3; }
.smc-foot { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.smc-rewards { font-size: .72rem; color: #c084fc; font-weight: 700; flex: 1; }
.smc-timer { font-size: .7rem; color: #9ca3af; }

/* Accepted section */
.accepted-section h4 { margin: 0 0 .5rem; font-size: .9rem; color: #22c55e; }
.accepted-list { display: flex; flex-direction: column; gap: .5rem; }
.accepted-card {
  background: rgba(34,197,94,.05);
  border: 1px solid rgba(34,197,94,.2);
  border-radius: 10px;
  padding: .6rem .75rem;
}
.accepted-card--ready { border-color: #22c55e; background: rgba(34,197,94,.1); }
.ac-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; font-size: .82rem; }
.ac-foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.verify-hint { font-size: .7rem; color: #ef4444; }

/* empty hint */
.empty-hint { color: #666; font-size: .8rem; text-align: center; padding: .5rem 0; }

/* Extra button sizes */
.btn--xs { padding: .2rem .5rem; font-size: .72rem; }
.btn--outline {
  background: transparent;
  border: 1px solid currentColor;
  color: #a78bfa;
}

/* ── Reward Popup ───────────────────────────────────────────── */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100; }
.overlay.hidden, .reward-popup.hidden { display:none; }
.reward-popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: #1a1a2e;
  border: 2px solid #a855f7;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  z-index: 101;
  min-width: 280px;
}
.popup-icon { font-size: 3rem; margin-bottom: .5rem; }
.popup-reward-row { display:flex; gap:.75rem; justify-content:center; align-items:center; flex-wrap:wrap; margin: .75rem 0; }
.reward-xp.big   { font-size:1.4rem; font-weight:800; color:#a78bfa; }
.reward-money.big{ font-size:1.4rem; font-weight:800; color:#22c55e; }
.bonus-badge { background:#f59e0b; color:#000; border-radius:6px; padding:.15rem .5rem; font-size:.75rem; font-weight:800; }