/* =========================================================
   NELIAXO v0.7 — style.css (full)
   - Design sombre par défaut
   - Compatibilité complète avec v0.6.9d.2 + ajouts v0.7
   - Bandeau info (auth), profil sidebar, modale paramètres
   - Thème clair optionnel via :root.light
   ========================================================= */

/* ===========================
   VARIABLES (DARK THEME)
   =========================== */
:root{
  --bg:#18191c;
  --panel:#202225;
  --panel2:#2f3136;
  --line:#3a3b3e;

  --text:#ffffff;
  --muted:#9ca3af;

  --brand:#4ec9b0;
  --blue:#3b82f6;
  --green:#16a34a;
  --red:#ef4444;
  --orange:#f59e0b;

  --shadow: 0 10px 30px rgba(0,0,0,.35);

  /* accents */
  --accent-1:#a5f3fc;
  --accent-2:#22d3ee;

  /* states */
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --info:#38bdf8;

  /* misc */
  --focus:#60a5fa;
  --ring: 0 0 0 3px rgba(96,165,250,.35);
}

/* ===========================
   THEME CLAIR OPTIONNEL
   =========================== */
:root.light{
  --bg:#f6f7f9;
  --panel:#ffffff;
  --panel2:#eef2f7;
  --line:#d7dde6;

  --text:#0f172a;
  --muted:#64748b;

  --brand:#06b6d4;
  --blue:#2563eb;
  --green:#16a34a;
  --red:#ef4444;
  --orange:#f59e0b;

  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --accent-1:#0ea5e9;
  --accent-2:#06b6d4;
  --focus:#2563eb;
}

/* ===========================
   RESET & BASE
   =========================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }
button{ font:inherit; }
input,button,textarea{ color:inherit; }
a{ color:inherit; text-decoration:none; }
.hidden{ display:none !important; }
[disabled]{ opacity:.6; pointer-events:none; }

/* Focus visible accessible */
:where(button, [role="button"], a, input, textarea, select):focus{
  outline:none;
  box-shadow: var(--ring);
}

/* ===========================
   AUTH (login/register)
   =========================== */
.auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.auth-card{
  width:100%;
  max-width:460px;
  background:var(--panel2);
  border-radius:16px;
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid #00000020;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px 0;
}
.brand-icon{ width:36px; height:36px; border-radius:8px; }
.brand span{ font-weight:800; letter-spacing:.2px; }

.update-banner{
  background: #f59e0b1f;
  color: #facc15;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 10px;
  margin: 8px 0 12px;
  line-height: 1.45;
  border: 1px solid #facc1533;
}

.legal-note{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin-top:14px;
  opacity:.9;
}

.auth-tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.auth-tabs button{
  flex:1;
  padding:10px 12px;
  border:none;
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
  transition: transform .05s ease, background .2s ease;
}
.auth-tabs button:hover{ background:#26282c; }
.auth-tabs .active{
  outline:2px solid var(--brand);
}

.auth-form .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:10px 0;
}
.auth-form .field span{
  font-size:13px;
  color:#e5e7eb;
}
.auth-form input[type="text"],
.auth-form input[type="password"]{
  width:100%;
  padding:11px 12px;
  border:none;
  border-radius:10px;
  background:#1f2023;
  color:var(--text);
}

.pw-field{
  position:relative;
}
.eye{
  position:absolute;
  right:8px;
  top:30px;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  color:#d1d5db;
  cursor:pointer;
  padding:4px 6px;
  border-radius:8px;
}
.eye:hover{ color:#fff; background:#2a2c31; }

.checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#e5e7eb;
  margin-top:4px;
}

.file-field{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.file-btn{
  background:var(--panel);
  color:#e5e7eb;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}
.hint{ color:#9ca3af; font-size:13px; }

.primary{
  width:100%;
  padding:11px 12px;
  background:var(--brand);
  color:#002b2b;
  border:none;
  border-radius:10px;
  cursor:pointer;
  margin-top:8px;
  font-weight:700;
  transition:transform .05s ease, filter .2s ease;
}
.primary:hover{ filter:brightness(.95); }
.primary:active{ transform:scale(0.99); }

.error{
  min-height:18px;
  color:#f87171;
  font-size:14px;
  margin:6px 0 0;
}

/* ===========================
   APP LAYOUT
   =========================== */
#app{
  height:100vh;
  display:flex;
  overflow:hidden;
}

/* ----- Sidebar (desktop fixe, mobile drawer) ----- */
#sidebar{
  width:300px;
  background:var(--panel);
  border-right:2px solid var(--line);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition: transform .25s ease;
}
.logo-section{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo{ width:40px; height:40px; border-radius:10px; }
.app-name{ margin:0; }

.changelog{
  background:#4ec9b020;
  border-left:4px solid var(--brand);
  padding:10px;
  border-radius:10px;
  font-size:13px;
  color:#a5f3fc;
  line-height:1.4;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}

.signed-as{
  margin:0;
  color:#eaeaea;
  font-size:14px;
}
.logout-btn{
  background:var(--red);
  color:#fff;
  border:none;
  padding:10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}

.main-nav ul{
  list-style:none;
  padding:0;
  margin:0;
}
.nav-item{
  padding:10px 0;
  cursor:pointer;
  border-radius:8px;
  transition:background .2s ease, color .2s ease;
}
.nav-item:hover{ color:var(--brand); background:#26282c; }

.dm-section h3{
  margin:10px 0 6px;
  color:#d4d4d8;
  font-size:14px;
}
#dm-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:auto;
  padding-right:4px;
}
#dm-list .dm{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  padding:6px 8px;
  border-radius:10px;
  cursor:pointer;
  transition: background .2s ease;
}
#dm-list .dm:hover{ background:#26282c; }
#dm-list .avatar{
  width:32px; height:32px; border-radius:50%; object-fit:cover;
}
#dm-list .name{ flex:1; }
#dm-list .notif{
  position:absolute;
  right:8px;
  top:6px;
  background:#dc2626;
  color:#fff;
  border-radius:999px;
  font-size:12px;
  padding:2px 7px;
  min-width:22px;
  text-align:center;
}

/* ----- Profil (bas de sidebar) ----- */
.sidebar-profile{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--panel2);
  border-radius:12px;
  padding:8px 10px;
  border:1px solid #2a2c31;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.35);
}
.sidebar-profile img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid var(--line);
}
.sidebar-profile .me-meta{
  flex:1;
  margin-left:10px;
  color:var(--text);
  font-size:14px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.sidebar-profile .settings-btn{
  background:var(--panel);
  color:var(--text);
  border:none;
  font-size:18px;
  border-radius:10px;
  width:38px; height:38px;
  cursor:pointer;
  transition: background .2s ease, color .2s ease, transform .05s ease;
}
.sidebar-profile .settings-btn:hover{ background:var(--brand); color:#001; }
.sidebar-profile .settings-btn:active{ transform:scale(.98); }

/* ----- Chat zone ----- */
#chat{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--panel2);
  min-width:0;
}
.chat-header{
  position:relative;
  background:#1e1f22;
  border-bottom:2px solid var(--line);
  padding:14px 48px; /* espace pour le bouton mobile */
  text-align:center;
}
.chat-title{
  margin:0;
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
}

.mobile-logo{
  display:none;
  position:absolute;
  left:10px; top:6px;
  width:44px; height:44px;
  border:none;
  border-radius:12px;
  background:#26282c;
  cursor:pointer;
  padding:0;
  align-items:center; justify-content:center;
}
.mobile-logo img{ width:28px; height:28px; border-radius:8px; }

.chat-messages{
  flex:1;
  padding:12px;
  overflow-y:auto;
  scroll-behavior:smooth;
  contain: content;
}

/* Message (style Discord-like) */
.message{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:6px 4px;
}
.message .msg-avatar{
  width:36px; height:36px; border-radius:50%; object-fit:cover;
}
.message .msg-body{
  flex:1;
  min-width:0;
}
.message .msg-head{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.message .msg-author{
  font-weight:800;
}
.message .msg-time{
  color:var(--muted);
  font-size:12px;
}
.message .msg-text{
  margin:2px 0 0;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}
.message .msg-images{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.message .msg-images img{
  max-width:180px; max-height:180px;
  border-radius:8px; object-fit:cover;
  border:1px solid #00000020;
}

/* Images unifiées (aussi utilisées par v0.6.9d.2) */
.msg-img{
  max-width: 300px;
  max-height: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 6px;
  border:1px solid #00000020;
}

/* Own messages accent */
.message.me .msg-author{ color:var(--brand); }

/* Input line */
.chat-input{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-top:2px solid var(--line);
  background:var(--panel);
}
#message-input{
  flex:1;
  background:#1f2023;
  color:#fff;
  border:none;
  border-radius:20px;
  padding:12px 14px;
}
.plus-btn,.send-btn{
  width:44px; height:44px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  transition: transform .05s ease, filter .2s ease;
}
.plus-btn{ background:#3a3b3e; color:#fff; font-size:22px; }
.plus-btn:hover{ filter:brightness(.95); }
.send-btn{ background:var(--blue); color:#fff; font-size:20px; }
.send-btn:hover{ filter:brightness(.95); }
.plus-btn:active,.send-btn:active{ transform:scale(.98); }

/* ===========================
   POPUP / MODALES
   =========================== */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  z-index:50;
  backdrop-filter: blur(2px);
}
.popup-content{
  background:var(--panel2);
  width:380px; max-width:92vw;
  border-radius:14px;
  padding:16px;
  box-shadow:var(--shadow);
  text-align:center;
  border:1px solid #00000020;
}
.friend-search-row{
  display:flex;
  gap:8px;
}
.friend-search-row input{
  flex:1;
  padding:10px 12px;
  border:none; border-radius:10px;
  background:#1f2023; color:#fff;
}
.primary{
  background:var(--brand);
  color:#002b2b;
  border:none; border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
}
.friend-result{ margin-top:12px; }
.avatar-large{
  width:64px; height:64px;
  border-radius:50%;
  object-fit:cover;
}
.friend-actions{
  display:flex; justify-content:center; gap:8px; margin:10px 0;
}
.btn-green{
  background:var(--green);
  border:none; color:#fff;
  padding:8px 10px; border-radius:10px; cursor:pointer;
}
.btn-grey{
  background:#4b5563;
  border:none; color:#fff;
  padding:8px 10px; border-radius:10px; cursor:pointer;
}
.ghost{
  background:transparent;
  color:#ddd; border:1px solid #4b5563;
  padding:8px 10px; border-radius:10px; cursor:pointer;
  width:100%;
}

/* ===========================
   MODALE PARAMÈTRES
   =========================== */
.settings-content{
  width: 440px;
  max-width: 95vw;
  background: var(--panel2);
  border-radius: 16px;
  padding: 18px;
  text-align: left;
  border:1px solid #00000020;
}
.settings-content h3{
  text-align:center;
  margin: 6px 0 14px;
  color: var(--brand);
  font-size: 18px;
  font-weight: 800;
}
.settings-group{
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.settings-group h4{
  font-size: 15px;
  color: #e5e7eb;
  margin-bottom: 8px;
}
.settings-group .row{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.settings-group label{
  font-size: 14px;
  color: #ddd;
}
.settings-group input[type="text"],
.settings-group input[type="password"],
.settings-group input[type="file"]{
  background: #1f2023;
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 10px;
}
.settings-group input:disabled{ opacity: 0.5; cursor: not-allowed; }
.settings-group .wip{ font-size: 11px; color: #f87171; }
.settings-group .radio{
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #ccc; margin: 4px 0;
}
.settings-group .radio input{ accent-color: var(--brand); }
#settings-close{ width: 100%; margin-top: 14px; }

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1024px){
  #sidebar{ width:280px; }
}
@media (max-width: 900px){
  #sidebar{
    transform: translateX(-100%);
    position: fixed; top:0; left:0; bottom:0;
    width: 82%; max-width: 320px; z-index: 40; background: var(--panel);
    box-shadow: var(--shadow);
  }
  #sidebar.open{ transform: translateX(0); }
  .mobile-logo{ display:flex; }
}
@media (min-width: 901px){ .mobile-logo{ display:none; } }

@media (max-width: 768px){
  .chat-messages{ padding:10px; }
  .message .msg-images img{ max-width:44vw; max-height:44vw; }
  .sidebar-profile{
    padding:6px 8px;
  }
  .sidebar-profile img{ width:32px; height:32px; }
  .sidebar-profile .settings-btn{ width:34px; height:34px; }
}

/* ===========================
   SCROLLBARS (facultatif)
   =========================== */
.chat-messages::-webkit-scrollbar{ width:10px; }
.chat-messages::-webkit-scrollbar-track{ background:#1f2023; }
.chat-messages::-webkit-scrollbar-thumb{
  background:#3a3b3e; border-radius:8px;
}

#dm-list::-webkit-scrollbar{ width:8px; }
#dm-list::-webkit-scrollbar-thumb{
  background:#2a2c31; border-radius:8px;
}

/* ===========================
   UTILITAIRES / UI HELPERS
   =========================== */
.u-flex{ display:flex; }
.u-center{ display:flex; align-items:center; justify-content:center; }
.u-col{ display:flex; flex-direction:column; gap:8px; }
.u-gap-4{ gap:4px; }
.u-gap-8{ gap:8px; }
.u-gap-12{ gap:12px; }
.u-mt-8{ margin-top:8px; }
.u-mt-12{ margin-top:12px; }
.u-mt-16{ margin-top:16px; }
.u-mb-8{ margin-bottom:8px; }
.u-w-100{ width:100%; }
.u-text-muted{ color:var(--muted); }

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; padding:2px 8px; border-radius:999px;
  background:#374151; color:#fff;
}
.badge.green{ background:#10b981; }
.badge.blue{ background:#3b82f6; }
.badge.orange{ background:#f59e0b; }
.badge.red{ background:#ef4444; }

/* boutons secondaires */
.btn{
  padding:9px 12px;
  border-radius:10px;
  border:1px solid #00000020;
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{ filter:brightness(.98); }
.btn:active{ transform:scale(.98); }
.btn.outline{
  background:transparent;
  border:1px solid var(--line);
}
.btn.ghost{
  background:transparent;
  color:#ddd; border:1px solid #4b5563;
}

/* tooltips simples */
.tooltip{
  position:relative;
}
.tooltip:hover::after{
  content:attr(data-tip);
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:calc(100% + 8px);
  background:#111; color:#fff;
  font-size:12px; padding:6px 8px; border-radius:6px;
  white-space:nowrap; box-shadow:var(--shadow);
  pointer-events:none;
}

/* ===========================
   ANIMATIONS / FEEDBACK
   =========================== */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}
.fade-in{ animation:fadeIn .18s ease-out both; }

@keyframes pulse{
  0%,100%{ opacity:.6; }
  50%{ opacity:1; }
}
.pulse{ animation:pulse 1.2s infinite; }

/* skeleton loaders */
.skeleton{
  background: linear-gradient(90deg, #00000015, #ffffff10, #00000015);
  background-size:200% 100%;
  animation: sk 1.2s linear infinite;
  border-radius:8px;
}
@keyframes sk{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

/* ===========================
   FORMES / INPUTS EXTRA
   =========================== */
.input{
  background:#1f2023; border:none; border-radius:10px; padding:10px 12px;
  color:var(--text);
}
.select{
  background:#1f2023; border:none; border-radius:10px; padding:10px 12px;
  color:var(--text);
}

/* ===========================
   ÉTATS / ALERTES
   =========================== */
.alert{
  padding:10px 12px; border-radius:10px; font-size:14px;
  display:flex; gap:10px; align-items:flex-start;
}
.alert.info{ background:#38bdf820; color:#bae6fd; border:1px solid #38bdf840; }
.alert.warn{ background:#f59e0b20; color:#fde68a; border:1px solid #f59e0b40; }
.alert.danger{ background:#ef444420; color:#fecaca; border:1px solid #ef444440; }
.alert.success{ background:#22c55e20; color:#bbf7d0; border:1px solid #22c55e40; }

/* ===========================
   OVERRIDES FINES
   =========================== */
/* DM badge caché */
.dm .notif.hidden{ display:none; }

/* Accessibilité boutons ronds */
.plus-btn:focus-visible,.send-btn:focus-visible,
.settings-btn:focus-visible,.mobile-logo:focus-visible{
  box-shadow: var(--ring);
}

/* ===========================
   FIN — NELIAXO v0.7
   =========================== */
/* Fix input username visibility */
input[type="text"],
input[type="password"],
input[type="email"] {
  background: #1f2023 !important;
  color: var(--text) !important;
  border: none;
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
}

/* Placeholder color */
input::placeholder {
  color: #9ca3af !important;
}

/* Specifically for register/login username fields (just in case) */
#login-username,
#reg-username {
  background: #1f2023;
  color: var(--text);
}