/* ============================================================
   v99-chat-shop-ui.css  (claude-chatshop-1)  [CHAT-SHOP-UI 2026-06-13]
   ------------------------------------------------------------
   Polish design du CHAT (global/guilde/ami) et de la BOUTIQUE.
   Cible les ids/classes STABLES (cartographie) sans toucher au JS :
   chat → #chat-screen #chat-content #chat-messages #chat-input
   shop → #market-screen .grid-3 #market-grid .equip-slot .market-item
   Chargé en dernier → !important pour battre les styles inline legacy.
   ============================================================ */

/* ── CHAT : zone messages plus soignée ── */
#chat-messages {
  background: linear-gradient(180deg, rgba(10,12,21,0.92), rgba(14,12,24,0.96)) !important;
  border: 1px solid rgba(129,236,255,0.12) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(129,236,255,0.35) transparent;
}
#chat-messages::-webkit-scrollbar { width: 7px; }
#chat-messages::-webkit-scrollbar-thumb { background: rgba(129,236,255,0.3); border-radius: 4px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }

/* champ de saisie + envoi modernisés */
#chat-input {
  background: rgba(0,0,0,0.45) !important;
  border: 1.5px solid rgba(129,236,255,0.25) !important;
  border-radius: 12px !important;
  color: #eaf2ff !important;
  padding: 11px 14px !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}
#chat-input:focus {
  border-color: rgba(129,236,255,0.6) !important;
  box-shadow: 0 0 0 3px rgba(129,236,255,0.12) !important;
}
/* le bouton d'envoi à côté de l'input (frère direct) */
#chat-input + button, #chat-content button[onclick*="send" i] {
  border-radius: 12px !important;
  font-weight: 800 !important;
}

/* onglets de chat (boutons dans le header de #chat-content) : pilules */
#chat-content > div:first-child button {
  border-radius: 10px !important;
  transition: transform .12s, background .15s !important;
}
#chat-content > div:first-child button:active { transform: scale(0.96) !important; }

/* ── BOUTIQUE (marketplace) ── */
#market-screen .grid-3, #market-grid {
  gap: 12px !important;
}
#market-screen .equip-slot, #market-screen .market-item {
  border-radius: 16px !important;
  transition: transform .14s, box-shadow .14s, border-color .14s !important;
}
#market-screen .equip-slot:hover, #market-screen .market-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45) !important;
}
/* le bouton ACHETER plus net */
#market-screen .equip-slot button, #market-screen .market-item button {
  border-radius: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

/* grilles boutique en 2 colonnes sur mobile.
   [FIX 2026-06-13] cible les VRAIES grilles .grid-3 (#market-grid, #familiars-shop,
   #spells-shop, #magicweapons-shop) — les #*-grid sont des wrappers display:none.
   #market-screen .grid-3 les couvre toutes (elles sont dans #market-screen). */
@media (max-width: 560px){
  #market-screen .grid-3, #market-grid,
  #familiars-shop, #spells-shop, #magicweapons-shop {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #market-screen .equip-slot, #market-screen .market-item { padding: 13px !important; }
}

/* sélecteur d'avatars : carte un poil plus douce */
#avatar-selector-modal video, #avatar-selector-modal img { border-radius: 10px !important; }