/* ===== NeticMeet — Design system dark/lime ===== */
:root{
  --bg:            #0E1210;
  --bg-elevated:   #151A16;
  --bg-card:       #191F1B;
  --border:        #2A322B;
  --text:          #F2F5F0;
  --text-dim:      #9AA69B;
  --text-faint:    #647065;
  --lime:          #C8FF3D;
  --lime-dim:      #8FE000;
  --lime-glow:     rgba(200,255,61,0.15);
  --danger:        #FF5D5D;
  --radius:        14px;
  --radius-sm:     9px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:
    radial-gradient(90% 60% at 15% -5%, rgba(200,255,61,0.07) 0%, transparent 55%),
    radial-gradient(70% 55% at 100% 10%, rgba(63,110,80,0.16) 0%, transparent 60%),
    radial-gradient(120% 140% at 50% -10%, #181F1A 0%, #0B0E0C 60%);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
}
a{color:inherit; text-decoration:none;}

/* Grain texturé pour un rendu premium, pas plat */
.grain-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* Halos lumineux doux, dérive lente pour donner de la profondeur */
.glow-orb{
  position:fixed; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0;
}
.glow-orb.orb-lime{
  width:480px; height:480px; top:-140px; left:-120px;
  background:radial-gradient(circle, rgba(200,255,61,0.16) 0%, transparent 70%);
  animation: deriver-1 22s ease-in-out infinite alternate;
}
.glow-orb.orb-teal{
  width:520px; height:520px; bottom:-180px; right:-160px;
  background:radial-gradient(circle, rgba(90,160,130,0.14) 0%, transparent 70%);
  animation: deriver-2 26s ease-in-out infinite alternate;
}
@keyframes deriver-1{ 0%{ transform:translate(0,0);} 100%{ transform:translate(40px, 30px);} }
@keyframes deriver-2{ 0%{ transform:translate(0,0);} 100%{ transform:translate(-35px, -25px);} }

@media (prefers-reduced-motion: reduce){
  .glow-orb{ animation:none !important; }
}

.faint-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(80% 60% at 50% 20%, black 0%, transparent 75%);
}

/* ---- Topbar ---- */
.topbar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 32px;
}
.topbar .status{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--text-dim); letter-spacing:0.3px;
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime);}

/* ---- Landing hero ---- */
.hero{
  position:relative; z-index:1;
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding: 40px 24px;
}
.hero-inner{
  width:100%; max-width:620px;
  display:flex; flex-direction:column; align-items:center; gap:36px;
}
.eyebrow{
  font-size:14px; letter-spacing:3px; color:var(--lime-dim);
  text-transform:uppercase; font-weight:700;
}
.hero h1{
  font-family:'Space Grotesk', 'Inter', sans-serif;
  font-size:46px; font-weight:700; text-align:center; line-height:1.2;
  letter-spacing:-0.5px;
}
.hero p.sub{
  color:var(--text-dim); text-align:center; font-size:17px; max-width:460px; line-height:1.6;
}

.card{
  width:100%;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:36px;
  display:flex; flex-direction:column; gap:20px;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.tabs{ display:flex; gap:8px; background:var(--bg-elevated); padding:6px; border-radius:14px; }
.tab{
  flex:1; text-align:center; padding:14px 0; border-radius:10px;
  font-size:16px; font-weight:600; color:var(--text-dim); cursor:pointer;
  transition:all .15s ease;
}
.tab.active{ background:var(--lime); color:#0E1210; }

.field label{ font-size:14.5px; color:var(--text-dim); display:block; margin-bottom:9px; font-weight:500; }
input[type="text"]{
  width:100%; background:var(--bg-elevated); border:1px solid var(--border);
  color:var(--text); padding:16px 18px; border-radius:12px;
  font-size:18px; letter-spacing:0.5px; outline:none; transition:border-color .15s ease;
}
input[type="text"]:focus{ border-color:var(--lime-dim); }
input[type="text"]::placeholder{ color:var(--text-faint); }

.btn{
  border:none; cursor:pointer; border-radius:12px;
  font-size:17px; font-weight:700; padding:17px 22px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition: transform .1s ease, filter .15s ease;
}
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--lime); color:#0E1210; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text-faint); }
.btn-danger{ background:var(--danger); color:#1a0b0b; }

.room-created{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:22px; background:var(--bg-elevated); border:1px dashed var(--lime-dim);
  border-radius:14px;
}
.room-code{
  font-family:'Space Grotesk', monospace; font-size:34px; font-weight:700;
  letter-spacing:4px; color:var(--lime);
}
.room-link{
  font-size:14px; color:var(--text-dim); word-break:break-all; text-align:center;
}
.copy-row{ display:flex; gap:10px; width:100%; }
.copy-row .btn{ flex:1; padding:13px; font-size:15px; }

footer.foot{
  position:relative; z-index:1; text-align:center; padding:18px;
  font-size:11.5px; color:var(--text-faint);
}

/* ---- Room page ---- */
.room-shell{ display:flex; flex-direction:column; height:100vh; }
.room-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--border); z-index:2;
}
.room-topbar .room-meta{ font-size:13px; color:var(--text-dim); }
.room-topbar .room-meta b{ color:var(--text); font-family:'Space Grotesk', monospace; letter-spacing:1px; }

.room-body{ flex:1; display:flex; min-height:0; }
.stage{
  flex:1; display:grid; gap:10px; padding:16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: minmax(140px, 1fr);
  align-content:start;
}
.tile{
  position:relative; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden; display:flex;
  align-items:center; justify-content:center; min-height:140px;
}
.tile video{ width:100%; height:100%; object-fit:cover; }
.tile .name-tag{
  position:absolute; left:8px; bottom:8px; font-size:11.5px;
  background:rgba(0,0,0,0.55); padding:3px 8px; border-radius:6px; color:var(--text);
}
.tile .avatar{
  width:52px; height:52px; border-radius:50%; background:var(--bg-elevated);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--lime);
  font-size:18px; border:1px solid var(--border);
}

.sidepanel{
  width:300px; border-left:1px solid var(--border); display:flex; flex-direction:column;
  background:var(--bg-elevated);
}
.sidepanel.hidden{ display:none; }
.sidepanel-tabs{ display:flex; border-bottom:1px solid var(--border); }
.sidepanel-tabs .tab{ border-radius:0; background:transparent; padding:11px 0; }
.sidepanel-tabs .tab.active{ background:transparent; color:var(--lime); border-bottom:2px solid var(--lime); }
.panel-content{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }

.participant-row{ display:flex; align-items:center; gap:10px; font-size:13.5px; padding:6px 0; }
.participant-row .dot{ width:7px; height:7px; }

.chat-msg{ font-size:13px; line-height:1.4; }
.chat-msg .who{ color:var(--lime-dim); font-weight:600; margin-right:6px; }
.chat-input-row{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--border); }
.chat-input-row input{ flex:1; }

.controls-bar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px; border-top:1px solid var(--border); z-index:2;
}
.ctrl-btn{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg-card); color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.ctrl-btn:hover{ border-color:var(--text-faint); }
.ctrl-btn.off{ background:var(--danger); border-color:var(--danger); color:#1a0b0b; }
.ctrl-btn.active-panel{ background:var(--lime); border-color:var(--lime); color:#0E1210; }
.ctrl-btn.hangup{ width:54px; background:var(--danger); border-color:var(--danger); color:#1a0b0b; }

.waiting-badge{
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim);
}

@media (max-width: 760px){
  .sidepanel{ position:fixed; right:0; top:0; bottom:0; width:82vw; z-index:10; }
  .stage{ padding:10px; }
}

/* ---- Réactions emoji ---- */
.reactions-popup{
  position:fixed; bottom:78px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:8px; z-index:5; box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.reactions-popup.hidden{ display:none; }
.reaction-choice{
  background:transparent; border:none; font-size:22px; cursor:pointer;
  padding:6px; border-radius:8px; transition:background .15s ease, transform .1s ease;
}
.reaction-choice:hover{ background:var(--bg-elevated); transform:scale(1.15); }

.floating-emoji{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  font-size:28px; pointer-events:none; z-index:3;
  animation: flotter 1.8s ease-out forwards;
}
@keyframes flotter{
  0%   { opacity:0; transform:translate(-50%, 0) scale(0.6); }
  15%  { opacity:1; transform:translate(-50%, -10px) scale(1.1); }
  100% { opacity:0; transform:translate(-50%, -110px) scale(1); }
}

/* ---- Photos d'ambiance en arrière-plan ---- */
.bg-photos{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.bg-photos img{
  position:absolute; object-fit:cover; filter:grayscale(55%) brightness(0.55) contrast(1.05);
  opacity:0.5;
}
.bg-photos .photo-1{ top:-5%; left:-8%; width:38%; height:55%; border-radius:24px; }
.bg-photos .photo-2{ top:8%; right:-10%; width:34%; height:48%; border-radius:24px; }
.bg-photos .photo-3{ bottom:-8%; left:22%; width:32%; height:46%; border-radius:24px; }
.bg-photos-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 60% at 15% -5%, rgba(200,255,61,0.05) 0%, transparent 55%),
    radial-gradient(70% 55% at 100% 10%, rgba(63,110,80,0.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(11,14,12,0.88) 0%, rgba(11,14,12,0.94) 40%, #0B0E0C 75%);
}

@media (max-width: 900px){
  .bg-photos{ display:none; }
}