/* Chatify - styles.css
   Style moderne, responsive, glassmorphism léger */
:root{
  --bg:#0f1724;
  --panel:#0b1220;
  --muted:#9aa6b2;
  --accent:#6ee7b7;
  --accent-2:#60a5fa;
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.02);
  --radius:12px;
  --max-width:1100px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,#071029 0%, #081227 60%);color:#e6eef6}
.chat-app{display:flex;gap:18px;max-width:var(--max-width);margin:28px auto;padding:18px}
.sidebar{width:270px;background:linear-gradient(180deg,var(--glass),var(--glass-2));border-radius:var(--radius);padding:16px;backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(2,6,23,0.6)}
.brand{display:flex;align-items:center;gap:12px;padding-bottom:8px}
.brand .logo{width:44px;height:44px;border-radius:10px}
.brand h1{font-size:18px;margin:0}
.search input{width:100%;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.contacts{list-style:none;padding:10px 0;margin:8px 0;max-height:520px;overflow:auto}
.contact{display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;cursor:pointer}
.contact:hover{background:rgba(255,255,255,0.02)}
.contact.active{background:linear-gradient(90deg, rgba(96,165,250,0.08), rgba(110,231,183,0.04));}
.avatar{width:44px;height:44px;border-radius:10px;object-fit:cover}
.avatar.small{width:40px;height:40px}
.meta{display:flex;flex-direction:column}
.meta .muted{font-size:12px;color:var(--muted)}
.sidebar-footer{padding-top:10px;border-top:1px solid rgba(255,255,255,0.03);display:flex;justify-content:center}
.sidebar-footer button{background:transparent;border:1px dashed rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;color:var(--muted)}
.chat-panel{flex:1;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel),#071227);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.02)}
.contact-info{display:flex;gap:12px;align-items:center}
.chat-actions button{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px 10px;border-radius:8px;color:var(--muted);margin-left:6px}
.messages{flex:1;padding:20px;overflow:auto;background-image:linear-gradient(0deg, rgba(255,255,255,0.01), transparent);display:flex;flex-direction:column;gap:12px}
.msg{max-width:72%;padding:10px 14px;border-radius:14px;color:#071227;background:linear-gradient(180deg,#e6f7ef,#bff3d9);align-self:flex-start}
.msg.incoming{background:rgba(255,255,255,0.06);color:var(--muted);align-self:flex-start;border-radius:14px}
.msg.outgoing{background:linear-gradient(180deg,var(--accent),#34d399);color:#042018;align-self:flex-end}
.msg small{display:block;font-size:11px;color:rgba(0,0,0,0.35);margin-top:6px}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,0.02);align-items:center}
.composer input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.composer button{padding:10px 14px;border-radius:10px;border:none;background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#042018}
.muted{color:var(--muted);font-size:13px}
/* Responsiveness */
@media (max-width:900px){
  .chat-app{flex-direction:column;margin:12px;padding:12px}
  .sidebar{width:100%;display:flex;overflow:auto}
  .chat-panel{width:100%}
}

/* Styles pour la page de réinitialisation */
.reset-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:36px;background:linear-gradient(160deg,#071227 0%, #081631 60%)}
.card{width:100%;max-width:480px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.04);backdrop-filter: blur(10px);padding:28px;border-radius:14px;box-shadow:0 10px 40px rgba(2,6,23,0.65)}
.brand{text-align:center;margin-bottom:12px}
.brand .logo{width:76px;height:76px;margin:0 auto 8px}
.brand h1{margin:0;font-size:20px}
.lead{color:var(--muted);font-size:13px;margin-top:6px}
.reset-form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.reset-form label{font-size:13px;color:var(--muted)}
.reset-form input[type="password"]{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:inherit;font-size:15px}
.actions{display:flex;gap:10px;align-items:center;margin-top:6px}
button.primary{flex:1;padding:11px 14px;border-radius:10px;border:0;background:linear-gradient(90deg,#6C5CE7,#00B894);color:white;font-weight:700;cursor:pointer;transition:transform .12s ease}
button.primary:disabled{opacity:0.6;cursor:default}
a.ghost{display:inline-block;padding:10px 14px;border-radius:10px;color:var(--muted);text-decoration:none;background:transparent;border:1px solid rgba(255,255,255,0.03)}
.message{margin-top:10px;font-size:14px;min-height:22px}
.small{font-size:12px;color:var(--muted);text-align:center;margin-top:12px}

/* Hero/CTA button styles and subtle animations */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.btn.primary{background:linear-gradient(90deg,#6C5CE7,#00B894);color:#fff;border:0}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.hero-illustration{width:100%;max-width:420px;display:block}

/* floating animation for illustration */
.hero-illustration{animation:float 6s ease-in-out infinite}
@keyframes float{
  0%{transform:translateY(0) rotate(-0.5deg)}
  50%{transform:translateY(-10px) rotate(0.5deg)}
  100%{transform:translateY(0) rotate(-0.5deg)}
}

/* entrance animation for hero columns */
.hero-left, .hero-right{opacity:0;transform:translateY(8px);transition:all 520ms cubic-bezier(.2,.9,.2,1)}
.hero-left.visible, .hero-right.visible{opacity:1;transform:none}

/* small responsive tweaks for the hero */
@media (max-width:900px){
  .hero-inner{flex-direction:column-reverse;gap:18px}
  .hero-right{display:flex;justify-content:center}
}