:root {
  --bg: #0a0b10;
  --panel: #14161f;
  --panel-2: #1c2029;
  --border: #272c3a;
  --text: #eef0f5;
  --text-dim: #99a1b3;
  --accent: #7c6cf0;
  --accent-2: #22d3ee;
  --accent-gradient: linear-gradient(135deg, #7c6cf0, #22d3ee);
  --accent-hover: #6a5ae0;
  --danger: #ff5b7a;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 45px -22px rgba(0, 0, 0, 0.65), 0 4px 14px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Fond degrade tres subtil (deux lueurs douces sur un fond quasi noir) :
     ajoute de la profondeur sans nuire a la lisibilite du texte au-dessus. */
  background:
    radial-gradient(circle at 15% -10%, rgba(124, 108, 240, 0.16), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.10), transparent 50%),
    var(--bg);
  background-attachment: fixed;
}

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-2); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--border); background-clip: padding-box; }

.hidden { display: none !important; }

.screen {
  min-height: 100vh;
  display: flex;
}

/* ===== Landing ===== */
#landing {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.landing-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%), var(--panel);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 36px;
  box-shadow: var(--shadow-soft);
}

.landing-card h1 {
  margin: 0 0 8px;
  font-size: 30px;
  letter-spacing: -0.02em;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 24px;
}

.landing-card label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 108, 240, 0.2);
}

button {
  cursor: pointer;
  font-size: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 10px 14px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover { background: #262b38; transform: translateY(-1px); }
button:active { transform: translateY(0); }
button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

button.primary {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 24px -8px rgba(124, 108, 240, 0.55);
}

button.primary:hover { filter: brightness(1.08); box-shadow: 0 14px 30px -8px rgba(124, 108, 240, 0.65); }

.landing-actions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.join-row {
  display: flex;
  gap: 8px;
}

.join-row input { flex: 1; }

.hint {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Bouton de bascule FR / ourdou phonetique. Sur la landing page il flotte en
   coin (la carte a deja position:relative) ; dans la barre du haut, il suit
   simplement le fil normal du flex apres la presence (dernier a droite). */
.lang-toggle-btn {
  font-size: 12px;
  padding: 6px 10px;
  white-space: nowrap;
}

#lang-toggle-landing {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* ===== App shell ===== */
#app {
  flex-direction: column;
  width: 100%;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  background: rgba(20, 22, 31, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.room-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.room-label { color: var(--text-dim); }

.room-info code {
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 1.5px;
  color: var(--accent-2);
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.tab-btn.active {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(124, 108, 240, 0.6);
}

/* Onglets desactives pendant un partage d'ecran actif sur une autre
   plateforme (evite de masquer accidentellement la video en cours). */
.tab-btn.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.presence {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.presence .user-chip {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.presence .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 6px rgba(61, 220, 132, 0.8);
}

.main-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  min-height: 0;
}

.video-area {
  padding: 18px;
  min-width: 0;
  overflow: auto;
}

.platform-panel { display: none; }
.platform-panel.active { display: block; }

.yt-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.yt-controls input { flex: 1; }

#yt-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

#yt-player, #yt-player iframe {
  width: 100%;
  height: 100%;
}

.placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-dim);
  padding: 24px;
  font-size: 14px;
  line-height: 1.6;
  pointer-events: none;
}

.screen-share-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%), var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  max-width: 900px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-soft);
}

.screen-share-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}

/* Bouton affiche quand l'autoplay est bloque par le navigateur (frequent sur
   Safari/iOS) : le flux est bien recu mais ne demarre pas tout seul. */
.video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  background: rgba(10, 11, 16, 0.85);
  backdrop-filter: blur(6px);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.screen-share-viewer video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 34px;
  height: 34px;
  padding: 0;
  background: rgba(10, 11, 16, 0.65);
  color: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}

.fullscreen-btn:hover { background: rgba(10, 11, 16, 0.85); }

/* Reglage manuel du decalage audio, cote spectateur uniquement : sur certains
   reseaux (mobile/longue distance), le son du partage d'ecran arrive avant
   l'image. Plutot que de deviner un reglage reseau unique qui marche pour
   tout le monde, on laisse la personne qui regarde retarder le son jusqu'a
   ce que ca corresponde a l'image, chez elle. Place juste au-dessus du
   lecteur (jamais par-dessus la video) ; le bouton 🔊 deplie le reste vers
   la droite et le replie. */
.audio-delay-control {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 8px;
  background: rgba(10, 11, 16, 0.65);
  color: #fff;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.audio-delay-control button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.audio-delay-control button:hover { background: rgba(255, 255, 255, 0.2); }

.audio-delay-control .audio-delay-toggle { font-size: 15px; }

/* Replie : largeur nulle et invisible (donc aussi hors de la navigation au
   clavier). Deplie : le panneau "glisse" vers la droite. */
.audio-delay-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease, visibility 0s linear 0.25s;
}

.audio-delay-control.open .audio-delay-panel {
  max-width: 240px;
  opacity: 1;
  margin-left: 6px;
  visibility: visible;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .audio-delay-panel { transition: none; }
}

/* Ecran tactile : boutons assez grands pour viser au doigt. */
@media (pointer: coarse) {
  .audio-delay-control { font-size: 13px; }
  .audio-delay-panel { gap: 8px; }
  .audio-delay-control.open .audio-delay-panel { margin-left: 8px; }
  .audio-delay-control button { width: 36px; height: 36px; font-size: 18px; }
  .audio-delay-control .audio-delay-toggle { font-size: 20px; }
}

#audio-delay-value {
  min-width: 34px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Indicateur discret (resolution / debit reel / codec / relais TURN ou
   direct / raison de degradation) affiche pendant un partage d'ecran :
   permet de verifier objectivement l'effet d'un reglage reseau plutot que
   de deviner, lisible directement a l'ecran (utile sur mobile). */
.screen-stats-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 6;
  background: rgba(10, 11, 16, 0.65);
  color: #fff;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.2px;
  white-space: normal;
  max-width: calc(100% - 16px);
  pointer-events: none;
}

/* "Faux" plein ecran en CSS plutot que l'API Fullscreen native : celle-ci
   n'est pas supportee sur un <div> par Safari iOS (seulement sur <video>,
   et sans possibilite d'afficher la camera par-dessus). Cette approche
   fonctionne de la meme facon sur tous les navigateurs/appareils. */
.screen-share-viewer.css-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh; /* repli pour les navigateurs sans support de dvh */
  /* Sur Chrome Android, 100vh se base sur la hauteur MAXIMALE theorique du
     viewport (barre d'adresse masquee), pas sur la zone reellement visible a
     l'instant T (barre d'adresse affichee ou non selon le defilement) - ce
     conteneur pouvait donc etre plus grand/mal aligne que ce qui s'affiche
     vraiment a l'ecran. 100dvh (viewport dynamique) suit la hauteur
     reellement visible ; ignore silencieusement par les navigateurs qui ne
     le supportent pas, qui gardent alors le repli 100vh ci-dessus. */
  height: 100dvh;
  aspect-ratio: auto;
  z-index: 1000;
  border-radius: 0;
  border: none;
  margin: 0;
}

/* Position de repli pour la bulle camera en plein ecran (son style inline
   issu d'un glisser-depose est efface avant d'entrer en plein ecran, voir
   app.js) : garantit qu'elle reste toujours visible a l'ecran, notamment en
   mode paysage sur mobile ou le viewport est beaucoup moins haut. */
.screen-share-viewer.css-fullscreen .camera-widget {
  top: 16px;
  right: 16px;
  bottom: auto;
}

/* Le bouton passe a gauche en plein ecran : a droite, il se retrouverait
   recouvert (donc inaccessible) par la bulle camera positionnee juste
   au-dessus, plus grande. */
.screen-share-viewer.css-fullscreen .fullscreen-btn {
  left: 16px;
  right: auto;
}

.screen-share-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* En dehors du lecteur (jamais par-dessus la video, pour ne pas la cacher a
   celui qui regarde), mais assez grands pour rester bien visibles. */
.remote-request-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.request-pause-btn, .request-forward-btn {
  flex: 1;
  background: var(--panel-2);
  border: 2px solid var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 16px;
  border-radius: var(--radius);
  cursor: pointer;
}

.request-pause-btn:hover, .request-forward-btn:hover {
  background: #262b38;
  border-color: var(--accent-2);
}

/* Notification bien visible, au centre de l'ecran, cote de la personne qui
   partage : elle ne doit pas pouvoir la manquer quand on lui demande une
   pause ou d'avancer la lecture. */
.request-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Doit rester au-dessus du plein ecran CSS (z-index 1000), sinon la
     notification s'affiche derriere la video sans que rien ne le signale. */
  z-index: 2000;
  background: rgba(10, 11, 16, 0.9);
  backdrop-filter: blur(12px);
  border: 2px solid var(--accent);
  color: #fff;
  padding: 28px 44px;
  border-radius: 18px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  max-width: 80vw;
  box-shadow: 0 20px 55px -15px rgba(124, 108, 240, 0.5), 0 16px 48px rgba(0, 0, 0, 0.55);
  animation: request-popup-in 0.2s ease-out;
}

@keyframes request-popup-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Notification de chat en coin, discrete mais impossible a manquer meme en
   plein ecran (meme logique de z-index que .request-popup/.toast : au-dessus
   du plein ecran CSS, qui est a 1000). */
.chat-popup {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 2000;
  max-width: min(320px, calc(100vw - 48px));
  background: rgba(10, 11, 16, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  animation: request-popup-in 0.2s ease-out;
  word-break: break-word;
}

.chat-popup-author {
  font-weight: 700;
  color: var(--accent-2);
}

.share-screen-btn {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 24px -10px rgba(124, 108, 240, 0.6);
}

.share-screen-btn:hover { filter: brightness(1.08); }

.stop-share-btn {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-weight: 600;
}

/* ===== Chat ===== */
.chat-panel {
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  min-height: 0;
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.chat-panel-header button {
  padding: 4px 8px;
  font-size: 13px;
  background: transparent;
  border: none;
  color: var(--text-dim);
}

.chat-panel-header button:hover { color: var(--text); background: var(--panel-2); transform: none; }

/* Repli le chat pour agrandir la zone video (l'espace se recupere surtout
   utile sur mobile) ; les messages continuent d'arriver via la popup
   .chat-popup, donc rien n'est manque en le refermant. */
.main-grid.chat-collapsed { grid-template-columns: 1fr; }
.main-grid.chat-collapsed .chat-panel { display: none; }

.chat-toggle-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 150;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(124, 108, 240, 0.7);
}

.chat-toggle-btn:hover { filter: brightness(1.08); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-msg {
  max-width: 90%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}

.chat-msg.self {
  align-self: flex-end;
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
}

.chat-msg .meta {
  display: block;
  font-size: 10px;
  opacity: 0.7;
  margin-bottom: 2px;
}

.chat-msg.system {
  align-self: center;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-style: italic;
  font-size: 12px;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}

.chat-form input { flex: 1; }

/* ===== Camera widget (draggable) ===== */
.camera-widget {
  position: fixed;
  top: 130px; /* sous la barre du haut + l'en-tete du chat, pour ne pas les recouvrir */
  right: 24px;
  width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  z-index: 100;
  touch-action: none;
  user-select: none;
}

.camera-drag-handle {
  cursor: grab;
  position: relative;
  background: #000;
  aspect-ratio: 4 / 3;
}

.camera-drag-handle:active { cursor: grabbing; }

#local-video, #remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#remote-video {
  position: absolute;
  inset: 0;
}

#local-video {
  position: absolute;
  width: 35%;
  height: 35%;
  bottom: 6px;
  right: 6px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--panel);
  z-index: 2;
}

/* when no remote peer yet, local video takes full frame */
.camera-widget.no-remote #local-video {
  position: static;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
}
.camera-widget.no-remote #remote-video { display: none; }

.camera-buttons {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel);
}

/* Icones plutot que du texte ("Couper la camera"...) : la bulle reste
   compacte (moins haute, plus de place pour la video) sans rien perdre en
   clarte - l'etat actif/coupe reste visible via la couleur (.off). */
.camera-buttons button {
  flex: 1;
  padding: 6px 4px;
  font-size: 18px;
  line-height: 1;
}

.camera-buttons button.off {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28, 32, 41, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 2000; /* au-dessus du plein ecran CSS (1000) */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Bandeau persistant pendant une coupure (le toast, lui, disparait seul). */
.conn-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  background: #b45309;
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  text-align: center;
  z-index: 2001; /* au-dessus du toast et du plein ecran CSS */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

@media (max-width: 860px) {
  .main-grid { grid-template-columns: 1fr; }
  .chat-panel { border-left: none; border-top: 1px solid var(--border); height: 300px; }

  /* La barre du haut peut passer sur 2-3 lignes en portrait (salon + tabs +
     presence qui passent a la ligne faute de place) : sa hauteur totale
     devient alors imprevisible et peut depasser le top:130px prevu pour le
     desktop, ce qui faisait disparaitre la bulle camera derriere elle. On
     l'ancre donc depuis le bas du viewport (independant de la barre du haut),
     juste au-dessus du bouton de chat replie pour ne pas se chevaucher. */
  .camera-widget {
    top: auto;
    bottom: 96px;
    right: 12px;
    width: 130px;
  }
}