/* ==========================================================================
   CHAT PANEL (P4.1) + TRADE UI (P4.2) — css/chat.css
   -------------------------------------------------------------------------
   - #chat-panel: LEWY DOLNY RÓG ekranu, w stosie #left-bottom-stack
     (kolejność: LOG -> CZAT -> PANEL STEROWANIA), dyskretny — pełna
     czytelność dopiero po najechaniu kursorem / fokusie pola (:focus-within),
     kompaktowo, bez scrollbarów (najstarsze wiadomości znikają),
   - .trade-modal: modal 2-kolumnowy handlu (oferta moja ↔ partnera),
   - .trade-toast: zaproszenie do handlu (przycisk akceptacji).
   ========================================================================== */

/* ---------- CHAT ---------- */
/* Dyskretny w spoczynku: przyciemniony, nie odciąga uwagi od rozgrywki.
   Podświetla się (pełna czytelność + niebieska poświata) dopiero po
   najechaniu kursorem lub gdy pole wpisywania ma fokus. */
.chat-panel {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px 6px;
  border: 1px solid #2d3748;
  background: rgba(18, 20, 26, 0.55);
  font-family: inherit;
  opacity: 0.38;
  transition: opacity 0.18s ease, border-color 0.18s ease,
              background 0.18s ease, box-shadow 0.18s ease;
  /* #left-bottom-stack ma pointer-events:none — panel musi łapać mysz. */
  pointer-events: auto;
}

.chat-panel:hover,
.chat-panel:focus-within {
  opacity: 1;
  border-color: #4a6fa5;
  background: rgba(18, 20, 26, 0.95);
  box-shadow: 0 0 12px rgba(74, 111, 165, 0.35);
}

.chat-header {
  font-size: 8px;
  font-weight: 700;
  color: #d8c27a;
  text-transform: uppercase;
  letter-spacing: 0px;
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-hint {
  font-size: 8px;
  font-weight: 400;
  color: var(--ui-text-muted, #6b7787);
  text-transform: none;
  letter-spacing: 0px;
}

/* Stała wysokość = 6 wiadomości; najstarsze znikają (bez scrollbarów). */
.chat-messages {
  height: 78px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
}

.chat-msg {
  font-size: 8px;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge tytułu nadawcy (GM/CONTRIBUTOR) przed nickiem — komponent
   .title-badge zdefiniowany w css/hud.css (wspólny dla HUD i czatu). */
.chat-msg .title-badge {
  padding: 0 3px;
  margin-right: 3px;
  font-size: 7px;
  vertical-align: 1px;
}

.chat-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 3px;
  padding: 3px 6px;
  font-size: 8px;
  font-family: inherit;
  color: #e0e6ed;
  background: #15181f;
  border: 1px solid #2d3748;
  outline: none;
}

.chat-input:focus {
  border-color: #4a6fa5;
}

/* ---------- TRADE MODAL ---------- */
.trade-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  /* #ui-container ma pointer-events:none — bez przywrócenia przyciski
     handlu są „nieklikalne" (klik przechodzi przez modal). */
  pointer-events: auto;
}

.trade-window {
  min-width: 380px;
  max-width: 440px;
  background: rgba(18, 20, 26, 0.98);
  border: 1px solid #3a4454;
  padding: 10px 12px;
}

.trade-title {
  font-size: 12px;
  font-weight: 700;
  color: #e0e6ed;
  text-transform: uppercase;
  letter-spacing: 0px;
  margin-bottom: 8px;
}

.trade-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.trade-col-header {
  font-size: 8px;
  font-weight: 700;
  color: #d8c27a;
  text-transform: uppercase;
  letter-spacing: 0px;
  margin-bottom: 4px;
}

.trade-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.trade-slot {
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  background: var(--ui-slot, #15181f);
  border: 1px solid #2d3748;
  font-size: 8px;
  color: #c8d0dc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 2px;
}

.trade-slot.filled {
  border-color: #4a6fa5;
  background: #1a2230;
}

.trade-status {
  min-height: 16px;
  margin: 8px 0 4px;
  font-size: 8px;
  color: #8fb8d8;
  text-align: center;
}

.trade-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.trade-actions button {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
  background: #241c20;
  border: 1px solid #3a4454;
  color: #c8d0dc;
}

.trade-actions button:hover {
  border-color: #4a6fa5;
  color: #e0e6ed;
}

/* ---------- TRADE TOAST ---------- */
.trade-toast {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 230;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(18, 20, 26, 0.97);
  border: 1px solid #4a6fa5;
  font-size: 8px;
  color: #e0e6ed;
  /* #ui-container ma pointer-events:none — bez przywrócenia [AKCEPTUJ]/
     [ODRZUĆ] są nieklikalne (klik przechodzi przez toast). */
  pointer-events: auto;
}

.trade-toast button {
  font-family: inherit;
  font-size: 8px;
  padding: 3px 8px;
  cursor: pointer;
  background: #1a2230;
  border: 1px solid #3a4454;
  color: #c8d0dc;
}

.trade-toast button:hover {
  border-color: #4a6fa5;
}