/*
 * room.css — live room (canvas, HUD, chat, panels d'interaction meuble/avatar).
 * Les patterns communs (boutons HUD, panels overlay/latéraux, headers,
 * tooltips de grille) sont dans game_shared.css.
 */

/* ===== Layout ===== */
.room-page-wrapper {
  display: flex;
  justify-content: center;
}

.room-container {
  position: relative;
  display: inline-block;
}

.room-canvas {
  display: block;
}

/* Les panels communs (game-panel-overlay/game-side-panel) sont ancrés au
   viewport par défaut (position:fixed, pensé pour l'éditeur) — en live room
   ils doivent rester dans .room-container (qui a la taille du canvas, pas
   forcément celle de l'écran). */
.game-panel-overlay,
.game-side-panel {
  position: absolute;
}

/* ===== Boutons HUD ===== */
.room-chat-button   { bottom: 3rem; right: 1rem;   padding: 0.4rem 0.8rem; }
.room-mute-button   { bottom: 3rem; right: 6rem;   padding: 0.4rem 0.6rem; }
.room-deafen-button { bottom: 3rem; right: 9.5rem; padding: 0.4rem 0.6rem; }

/* ===== Chat (panel latéral) ===== */
.room-chat-panel { width: 280px; }

.room-chat-header {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--game-gold);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-chat-list {
  display: block;
  flex: 1;
  overflow-y: auto;
}
.room-chat-list.is-hidden { display: none; }

.room-chat-conversation {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.room-chat-conversation.is-open { display: flex; }

.room-chat-back-button {
  background: none;
  border: none;
  border-bottom: 1px solid #333;
  color: var(--game-gold);
  font-family: monospace;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  text-align: left;
}

.room-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.room-chat-input-row {
  border-top: 1px solid var(--game-gold);
  padding: 0.4rem;
}

/* Contenu généré dynamiquement par chat.js */
.room-chat-create-button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 2px solid var(--game-gold);
  color: var(--game-gold);
  font-family: monospace;
  padding: 0.6rem 0.5rem;
  cursor: pointer;
  font-weight: bold;
}

.room-chat-list-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #333;
}

.room-chat-list-row-button {
  flex: 1;
  text-align: left;
  background: none;
  border: none;
  color: var(--game-gold);
  font-family: monospace;
  padding: 0.6rem 0.5rem;
  cursor: pointer;
}
.room-chat-list-row-button.is-group { color: #f0c060; }

.room-chat-list-icon-button {
  background: none;
  border: none;
  color: var(--game-gold);
  font-family: monospace;
  padding: 0.6rem 0.4rem;
  cursor: pointer;
}
.room-chat-list-icon-button.is-group { color: #f0c060; }

.room-chat-empty {
  color: #888;
  padding: 0.5rem;
  font-size: 0.8rem;
  margin: 0;
}

.room-chat-group-name-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--game-bg-input);
  color: var(--game-gold);
  border: none;
  border-bottom: 1px solid var(--game-gold);
  font-family: monospace;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.room-chat-member-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #222;
  color: var(--game-gold);
  font-family: monospace;
  cursor: pointer;
}

.room-chat-create-group-button {
  display: block;
  width: 100%;
  background: var(--game-gold);
  color: var(--game-bg-button);
  border: none;
  font-family: monospace;
  padding: 0.5rem;
  margin-top: 0.5rem;
  cursor: pointer;
  font-weight: bold;
}

.room-chat-message { margin: 0.3rem 0; }
.room-chat-message.is-me { text-align: right; }

.room-chat-message-meta {
  font-size: 0.7rem;
  color: #888;
  display: block;
}

.room-chat-message-bubble {
  padding: 0.2rem 0.5rem;
  display: inline-block;
  max-width: 90%;
  word-break: break-word;
  background: #2a2a3a;
}
.room-chat-message-bubble.is-me { background: #2a3a6a; }

/* ===== Modal d'interaction (confirmation générique) ===== */
.room-modal {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--game-bg-button);
  border: 3px solid var(--game-gold);
  color: var(--game-gold);
  font-family: monospace;
  padding: 2rem;
  min-width: 320px;
  z-index: 10;
  text-align: center;
}
.room-modal.is-open { display: block; }

.room-modal-content { margin: 0 0 1rem; }

.room-modal-close-button {
  background: var(--game-gold);
  color: var(--game-bg-button);
  border: none;
  padding: 0.4rem 1rem;
  font-family: monospace;
  cursor: pointer;
}

/* Pile verticale de sections dans un panel (chest/mailboxes : "mon
   inventaire" + grille du meuble, espacées de 1rem). */
.room-panel-section-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ===== Largeur de contenu par panel (le wrapper .game-panel-overlay centre,
   chaque panel précise sa propre largeur max) ===== */
.room-panel-content              { width: 100%; }
.room-chest-content               { max-width: 420px; }
.room-incomming-mailbox-content   { max-width: 560px; }
.room-outgoing-mailbox-content    { max-width: 580px; }
.room-portal-content              { max-width: 360px; }
.room-project-flower-content      { max-width: 460px; }
.room-inventory-content           { max-width: 420px; }
.room-settings-content             { max-width: 380px; }

/* ===== Paramètres — pensé pour grandir (keybinding, graphismes...) le jour
   où un 2e réglage apparaît réellement ; une seule ligne pour l'instant. ===== */
.room-settings-button { top: 6rem; right: 1rem; padding: 0.4rem 0.6rem; font-size: 1.2rem; }

.room-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.room-settings-label {
  font-size: 0.9rem;
}

/* ===== Grilles d'inventaire (chest/mailboxes/inventaire) — grid-template-
   columns reste posé en JS (nombre de colonnes dynamique par contexte). ===== */
.room-inventory-grid {
  display: grid;
  gap: 3px;
}

.room-inventory-cell {
  border: 1px solid #555;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.room-inventory-cell.is-filled { border-color: var(--game-gold); }

.room-inventory-cell-icon {
  image-rendering: pixelated;
  width: 28px;
  height: 28px;
}

/* ===== Mailboxes (upload/download) ===== */
.room-mailbox-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

/* Petit bouton contour doré — mailboxes (Uploader/Télécharger), réglages
   (plein écran...). */
.room-outline-button {
  background: none;
  border: 1px solid var(--game-gold);
  color: var(--game-gold);
  font-family: monospace;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}

.room-mailbox-pending-grid {
  display: grid;
  gap: 3px;
  margin-bottom: 3px;
}

.room-mailbox-pending-cell {
  border: 1px dashed var(--game-gold);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--game-gold);
  font-size: 10px;
  opacity: 0.6;
}

.room-progress-container {
  display: none;
  margin-top: 0.8rem;
  width: 100%;
  min-width: 80px;
}
.room-progress-container.is-visible { display: block; }

.room-progress-track {
  background: #333;
  border: 1px solid var(--game-gold);
  height: 12px;
}

.room-progress-bar {
  background: var(--game-gold);
  height: 100%;
  width: 0%;
  transition: width 0.15s;
}

.room-progress-text {
  font-size: 0.7rem;
  text-align: center;
  margin-top: 0.2rem;
  color: #aaa;
}

/* ===== Portail ===== */
.room-portal-destination-button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid var(--game-gold);
  color: var(--game-gold);
  font-family: monospace;
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
}
.room-portal-destination-button:hover { background: #1a1a3e; }

.room-portal-message {
  color: #888;
  font-size: 0.85rem;
}

/* ===== Fleur de projet ===== */
.room-flower-objectives-list { margin-bottom: 1rem; }

.room-flower-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.room-flower-label {
  flex: 1;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-flower-range {
  width: 100px;
  accent-color: var(--game-gold);
  cursor: pointer;
}

.room-flower-progress-label {
  width: 3.5ch;
  text-align: right;
  font-size: 0.85rem;
}

.room-flower-delete-button {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 0.2rem;
}

.room-flower-add-form {
  display: flex;
  gap: 0.5rem;
}

.room-flower-new-label {
  flex: 1;
  background: var(--game-bg-input);
  color: var(--game-gold);
  border: 1px solid var(--game-gold);
  font-family: monospace;
  padding: 0.3rem 0.5rem;
}

.room-flower-add-button {
  background: var(--game-gold);
  color: var(--game-bg-button);
  border: none;
  font-family: monospace;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}

/* ===== Panel avatar (clic sur un autre joueur) ===== */
.room-avatar-panel {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--game-bg-panel);
  border: 2px solid var(--game-gold);
  color: var(--game-gold);
  font-family: monospace;
  padding: 1.5rem;
  z-index: 10;
  min-width: 220px;
}
.room-avatar-panel.is-open { display: block; }

.room-avatar-panel-body {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.room-avatar-panel-canvas {
  image-rendering: pixelated;
  width: 96px;
  height: 192px;
  flex-shrink: 0;
  background: var(--game-bg-input);
  border: 1px solid #c8a96e44;
}

.room-avatar-panel-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
  word-break: break-all;
}

.room-avatar-panel-close { width: 100%; }

/* ===== Inventaire — sélecteur de statut ===== */
.room-status-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #c8a96e44;
}

.room-status-label {
  font-size: 0.8rem;
  color: #aaa;
}

.room-status-dot {
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.room-status-dot.is-active { outline: 2px solid #fff; }
.room-status-dot--disponible      { background: #2ecc71; }
.room-status-dot--inactif         { background: #e67e22; }
.room-status-dot--ne_pas_deranger { background: #e74c3c; }