/* ============================
   1. VARIABLES & THÈMES
   ============================ */
:root {
  /* Default: espace */
  --bg-color: #0d1117;
  --bg-card: rgba(28, 31, 74, 0.8);
  --text-main: #b3e5fc;
  --accent: #b388ff;
  --accent-hover: #9370db;
  --shadow-color: rgba(147, 112, 219, 0.5);
  --btn-grad1: #682f90;
  --btn-grad2: #1e0535;
  --discord-sidebar: #2f3136;
  --discord-chat: #36393f;
  --discord-input: #40444b;
}

body.theme-espace {
  /* Default, uses Canvas in background */
}

body.theme-feu {
  --bg-color: #210000;
  --bg-card: rgba(43, 0, 0, 0.8);
  --text-main: #ffcccc;
  --accent: #ff4500;
  --accent-hover: #ff6347;
  --shadow-color: rgba(255, 69, 0, 0.5);
  --btn-grad1: #ff4500;
  --btn-grad2: #8b0000;
  background: linear-gradient(to top, #440000, #110000);
  background-size: cover;
}

body.theme-matrice {
  --bg-color: #001100;
  --bg-card: rgba(0, 31, 0, 0.8);
  --text-main: #00ff00;
  --accent: #00cc00;
  --accent-hover: #00ff00;
  --shadow-color: rgba(0, 255, 0, 0.5);
  --btn-grad1: #006600;
  --btn-grad2: #003300;
}

body.theme-ocean {
  --bg-color: #001a33;
  --bg-card: rgba(0, 43, 89, 0.8);
  --text-main: #ccf2ff;
  --accent: #00bfff;
  --accent-hover: #00ffff;
  --shadow-color: rgba(0, 191, 255, 0.5);
  --btn-grad1: #004d99;
  --btn-grad2: #002244;
  background: linear-gradient(to bottom, #001a33, #004d99);
  background-attachment: fixed;
}

/* ============================
   2. STYLES GLOBAUX
   ============================ */
body {
  background-color: var(--bg-color);
  color: var(--text-main);
  margin: 0; padding: 0;
  font-family: 'Inter', Roboto, Arial, sans-serif;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

#theme-canvas {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1; pointer-events: none;
}

body.theme-feu #theme-canvas,
body.theme-ocean #theme-canvas {
  display: none;
}

/* Header & Boutons standards */
.header-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(5px);
  z-index: 10; border-bottom: 1px solid var(--accent);
}

.user-info-section {
    display: flex; align-items: center; gap: 15px; cursor: pointer;
}

button, .btn-primary {
  font-family: inherit; font-size: 14px;
  background: linear-gradient(-45deg, var(--btn-grad1) 0%, var(--btn-grad2) 100%);
  color: white; padding: 0.6em 1em;
  border: none; border-radius: 20px;
  box-shadow: 0px 4px 10px var(--shadow-color);
  transition: all 0.3s; cursor: pointer; font-weight: bold;
}
button:hover, .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0px 6px 15px var(--shadow-color);
}
button:active { transform: scale(0.95); }

/* Inputs standards */
.input {
  background-color: rgba(0,0,0,0.5);
  color: var(--text-main);
  padding: 10px; border: 1px solid var(--accent);
  border-radius: 5px; outline: none; transition: 0.2s;
}
.input:focus {
  box-shadow: 0 0 10px var(--accent);
}

select {
  background-color: rgba(0,0,0,0.5);
  color: var(--text-main);
  border: 1px solid var(--accent);
  padding: 5px 10px; border-radius: 5px;
}

/* Central game block */
.game-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex-grow: 1; gap: 20px;
}

#score, #welcome-message {
    font-size: 24px; color: #fff; text-shadow: 0 0 10px var(--accent);
    background: var(--bg-card); padding: 15px 30px; border-radius: 12px;
    border: 1px solid var(--accent);
}

#selected-image {
    width: 250px; cursor: pointer; transition: transform 0.1s; filter: drop-shadow(0 0 20px var(--accent));
}
#selected-image:active { transform: scale(0.9); }

/* Chat Public Container */
.public-chat-wrapper {
    width: 90%; max-width: 600px;
    background: var(--bg-card); border-radius: 12px;
    border: 1px solid var(--accent);
    padding: 15px; display: flex; flex-direction: column;
    height: 350px; margin-bottom: 20px;
}
#public-chat {
    flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 15px; padding-right: 10px;
}
.public-msg {
    display: flex; gap: 10px; background: rgba(0,0,0,0.3); padding: 8px; border-radius: 8px;
}
.public-msg.self {
    flex-direction: row-reverse; background: rgba(255,255,255,0.05); border: 1px solid var(--accent);
}
.public-msg-content { display: flex; flex-direction: column; font-size: 14px; }
.public-msg-header { font-size: 12px; color: #aaa; margin-bottom: 4px; display:flex; gap: 8px; align-items: center;}
.public-msg.self .public-msg-header { justify-content: flex-end; }
.public-form { display: flex; gap: 10px; }
.public-form input { flex-grow: 1; }

/* ============================
   3. CHAT PRIVÉ (STYLE DISCORD)
   ============================ */
.discord-layout {
    display: flex; height: 100vh; overflow: hidden; background: var(--bg-color); width: 100vw; margin:0;
}
.discord-sidebar {
    width: 280px; background: var(--discord-sidebar); color: #8e9297;
    display: flex; flex-direction: column;
}
.discord-header {
    height: 48px; min-height: 48px; border-bottom: 1px solid #202225;
    display: flex; align-items: center; padding: 0 16px; font-weight: bold; color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); justify-content: space-between;
}
.discord-user-list {
    flex-grow: 1; overflow-y: auto; padding: 8px;
}
.discord-user-item {
    display: flex; align-items: center; padding: 8px; border-radius: 4px; cursor: pointer; gap: 10px; transition: 0.1s;
    position: relative;
}
.discord-user-item:hover { background: #393c43; color: #dcddde; }
.discord-user-item.active { background: #42464d; color: white; }

.status-dot {
    width: 10px; height: 10px; border-radius: 50%;
    position: absolute; bottom: 8px; left: 40px; border: 2px solid var(--discord-sidebar);
}
.status-dot.online { background: #3ba55c; }
.status-dot.offline { background: #747f8d; }

.unread-badge {
    background: #ed4245; color: white; font-size: 12px; font-weight: bold;
    padding: 2px 6px; border-radius: 10px; margin-left: auto; display: none;
}

.discord-chat-area {
    flex-grow: 1; display: flex; flex-direction: column; background: var(--discord-chat);
}
.discord-messages {
    flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 2px;
}
.discord-input-container {
    padding: 0 20px 20px 20px;
}
.discord-input-wrapper {
    background: var(--discord-input); border-radius: 8px; display: flex; align-items: center; padding: 5px 15px;
}
.discord-input-wrapper input {
    background: transparent; border: none; color: #dcddde; flex-grow: 1; padding: 10px 0; outline: none; font-size:15px;
}
.discord-input-wrapper button {
    background: transparent; box-shadow: none; padding: 5px; color: #b9bbbe;
}
.discord-input-wrapper button:hover { color: white; transform: none; }

/* Grouped messages */
.d-msg-group {
    display: flex; gap: 16px; margin-top: 17px;
}
.d-msg-avatar { width: 40px; height: 40px; flex-shrink: 0; }
.d-msg-content { flex-grow: 1; }
.d-msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.d-msg-author { font-weight: 500; color: white; font-size: 16px; }
.d-msg-time { font-size: 12px; color: #72767d; }
.d-msg-text { font-size: 15px; color: #dcddde; line-height: 1.375rem; word-break: break-word;}
.d-msg-text.read-receipt { font-size: 11px; color: #3ba55c; margin-top: 4px;}

.date-separator {
    display: flex; align-items: center; text-align: center; color: #72767d; margin: 24px 0 8px 0; font-size: 12px; font-weight: bold;
}
.date-separator::before, .date-separator::after {
    content: ''; flex: 1; border-bottom: 1px solid #42464d; margin: 0 10px;
}

/* Scrollbar webkit custom for discord layout */
::-webkit-scrollbar { width: 8px; height: 8px;}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #202225; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #18191c; }

/* Global Forms */
.auth-box {
    background: var(--bg-card); padding: 40px; border-radius: 12px;
    border: 1px solid var(--accent);
    display: flex; flex-direction: column; gap: 15px;
    box-shadow: 0 0 20px var(--shadow-color);
    width: 300px; text-align: center;
}
.auth-box h2 { margin-top: 0; }
.auth-box input, .auth-box select { width: 100%; box-sizing: border-box;}

/* Vue Amis (Add Friend / Pending) */
.friends-view {
    display: none; padding: 20px; flex-direction: column; gap: 20px; color: #dcddde; flex-grow: 1; overflow-y: auto;
}
.friends-view.active { display: flex; }
.add-friend-section {
    background: #36393f; padding: 20px; border-radius: 8px; border: 1px solid #202225;
}
.add-friend-input {
    display: flex; gap: 10px; margin-top: 10px;
}
.add-friend-input input {
    flex-grow: 1; padding: 10px; border-radius: 5px; border: 1px solid #202225; background: #40444b; color: white; outline: none;
}
.pending-requests-section {
    margin-top: 20px;
}
.pending-request-item {
    display: flex; justify-content: space-between; align-items: center; padding: 10px;
    background: #2f3136; border-radius: 5px; margin-bottom: 10px; border: 1px solid #202225;
}
.pending-request-info {
    display: flex; gap: 10px; align-items: center;
}
.pending-actions { padding: 5px 10px; font-size: 12px; }
.btn-accept { background: #3ba55c; }
.btn-reject { background: #ed4245; }
.clicker-id-display {
    font-size: 11px; color: #b9bbbe; margin-top: 2px;
}