/*
 * Lecteur de réels — disposition « à la Facebook » (resources/views/reels/video-full-screen.blade.php).
 * Barre du haut, vidéo entière sur fond noir, colonne d'actions à droite (icônes blanches sans pastille,
 * compteur dessous), auteur + Suivre + légende en bas à gauche, barre de lecture fine, champ commentaire.
 * Complète public/js/reels/reels.css (structure de base, panneau des commentaires) sans le modifier.
 */

#videoReel.rv { --rv-safe-top: env(safe-area-inset-top, 0px); --rv-safe-bottom: env(safe-area-inset-bottom, 0px); }

#videoReel.rv .video-container { position: relative; background: #000; }

@media (max-width: 767.98px) {
  /* Plein écran bord à bord (le ratio 9:16 de reels.css débordait sur les téléphones allongés) */
  #videoReel.rv .video-container { width: 100%; height: 100%; aspect-ratio: auto; }
}

/* Vidéo entière, centrée sur fond noir (une vidéo horizontale garde des bandes noires, comme Facebook) */
#videoReel.rv video#videoPlayer { object-fit: contain; background: #000; }
@media (max-width: 767.98px) { #videoReel.rv video#videoPlayer { border-radius: 0; } }

/* Dégradés de lisibilité */
#videoReel.rv .rv-shade-top {
  position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
}
#videoReel.rv .user-overlay { min-height: 300px; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); }
@media (max-width: 767.98px) { #videoReel.rv .rv-shade-top, #videoReel.rv .user-overlay { border-radius: 0; } }
@media (min-width: 768px) { #videoReel.rv .rv-shade-top { border-radius: 16px 16px 0 0; } }

#videoReel.rv .video-overlay { z-index: 3; }
#videoReel.rv .play-icon svg { width: 64px; height: 64px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* ── Barre du haut ── */
#videoReel.rv .rv-topbar {
  position: absolute; z-index: 6;
  top: calc(8px + var(--rv-safe-top)); left: 6px; right: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
#videoReel.rv .rv-topbar-right { display: flex; align-items: center; gap: 4px; }
#videoReel.rv .rv-icon-btn {
  position: static; inset: auto;
  width: 46px; height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; text-decoration: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
#videoReel.rv .rv-icon-btn:hover, #videoReel.rv .rv-icon-btn:focus { color: #fff; background: rgba(255,255,255,.08); outline: none; }
#videoReel.rv .rv-icon-btn:active { transform: scale(.9); }
#videoReel.rv .rv-icon-btn svg { width: 25px; height: 25px; }
#videoReel.rv .close-button { font-size: 28px; }
/* « … » cerclé, comme sur la capture */
#videoReel.rv .rv-more-ring i {
  width: 34px; height: 34px; border: 2.5px solid #fff; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}

/* ── Colonne d'actions ── */
#videoReel.rv .action-buttons {
  position: absolute; z-index: 5;
  right: 6px; bottom: calc(128px + var(--rv-safe-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
#videoReel.rv .rv-action { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; }
#videoReel.rv .action-button {
  width: 52px; height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: transparent; color: #fff;
  font-size: 32px; line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
  transition: transform .15s ease;
}
#videoReel.rv .action-button:hover { background: transparent; }
#videoReel.rv .action-button:active { transform: scale(.86); }
#videoReel.rv .action-button i { line-height: 1; }
#videoReel.rv .rv-flip { display: inline-block; transform: scaleX(-1); }
#videoReel.rv .rv-count {
  color: #fff; font-size: 14px; font-weight: 600; line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); white-space: nowrap; font-variant-numeric: tabular-nums;
}
#videoReel.rv #iconLikeReel.bi-heart-fill { color: #ff3b5c !important; }
#videoReel.rv .action-buttons .lm-loomer-icon.d-none + .rv-tip-label { display: none; }
#videoReel.rv .action-buttons .dropdown-menu { border: 0; border-radius: 14px; padding: 6px; }
#videoReel.rv .action-buttons .dropdown-item { border-radius: 9px; padding: 9px 12px; }
@media (max-width: 767.98px) {
  /* Menu « … » en panneau du bas (styles.css), calé en bas d'écran : cette page n'a pas de barre de navigation */
  #videoReel.rv .action-buttons .dropdown-menu {
    bottom: calc(10px + var(--rv-safe-bottom)) !important;
    transform: none !important; width: auto !important; max-width: none !important; z-index: 1060;
  }
}

/* ── Auteur, Suivre, légende ── */
#videoReel.rv .rv-bottom {
  position: absolute; z-index: 4;
  left: 14px; right: 78px; bottom: calc(78px + var(--rv-safe-bottom));
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
#videoReel.rv .user-info { position: static; display: flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; }
#videoReel.rv .user-avatar { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; border: 2px solid rgba(255,255,255,.9); }
#videoReel.rv .user-info .user-link {
  color: #fff; font-size: 17px; font-weight: 700; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#videoReel.rv .type-reel { margin: 0; font-size: 15px; color: #fff; }
#videoReel.rv .rv-follow {
  flex: 0 0 auto; margin-left: 4px;
  padding: 5px 14px; border: 1.5px solid rgba(255,255,255,.85); border-radius: 9px;
  background: transparent; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer;
}
#videoReel.rv .rv-follow:active { background: rgba(255,255,255,.15); }

#videoReel.rv .text-reel {
  position: static; margin: 0; padding: 0; max-width: 100%;
  color: #fff; font-size: 16px; line-height: 1.35; text-shadow: 0 1px 3px rgba(0,0,0,.5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#videoReel.rv .text-reel:empty { display: none; }
#videoReel.rv .text-reel.is-expanded { display: block; -webkit-line-clamp: unset; max-height: 38vh; overflow-y: auto; }
#videoReel.rv .rv-more {
  margin-top: -6px; padding: 0; border: 0; background: none;
  color: rgba(255,255,255,.75); font-size: 16px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.5); cursor: pointer;
}

/* ── Barre de lecture fine sur toute la largeur (lecture / pause au toucher de la vidéo) ── */
#videoReel.rv .video-controls {
  position: absolute; z-index: 4;
  left: 0; right: 0; bottom: calc(66px + var(--rv-safe-bottom)); gap: 0;
}
#videoReel.rv .video-controls #playPauseButton,
#videoReel.rv .video-controls .time-display { display: none; }
#videoReel.rv .progress-container-reels { height: 3px; border-radius: 0; background: rgba(255,255,255,.25); }
#videoReel.rv .progress-bar-reels { background: #fff; }

/* ── Champ commentaire ── */
#videoReel.rv .rv-comment-bar {
  position: absolute; z-index: 4;
  left: 12px; right: 12px; bottom: calc(10px + var(--rv-safe-bottom));
}
#videoReel.rv .rv-comment-input {
  width: 100%; height: 46px; padding: 0 16px 0 20px;
  display: flex; align-items: center; gap: 16px;
  border: 1.5px solid rgba(255,255,255,.8); border-radius: 23px;
  background: rgba(0,0,0,.25); color: rgba(255,255,255,.85); cursor: text;
}
#videoReel.rv .rv-comment-input span { flex: 1; min-width: 0; text-align: left; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#videoReel.rv .rv-comment-input i { font-size: 22px; color: #fff; }

/* ── Vidéo horizontale : bouton Plein écran sous l'image (position calculée par le script) ── */
#videoReel.rv .rv-fullscreen {
  position: absolute; z-index: 4; left: 50%; top: 60%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 0; border-radius: 22px;
  background: rgba(70,70,70,.85); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap;
}
#videoReel.rv .rv-fullscreen i { font-size: 18px; }

/* Panneau des commentaires au-dessus des barres */
#videoReel.rv .comment-container.show { z-index: 30; }
@media (max-width: 1499px) {
  #videoReel.rv .comment-container { border-radius: 18px 18px 0 0; }
  #videoReel.rv .comment-container::before {
    content: ""; flex: 0 0 auto; width: 36px; height: 4px; margin: 8px auto 0;
    border-radius: 2px; background: rgba(127,127,127,.45);
  }
  #videoReel.rv .comment-header { padding-top: 10px; }
}
#videoReel.rv .comment-title { font-size: 16px; font-weight: 700; margin: 0; }

/* Ordinateur : flèches à droite de la vidéo */
#videoReel.rv .nav-button { width: 44px; height: 44px; background: rgba(255,255,255,.14); }
#videoReel.rv .nav-button:hover { background: rgba(255,255,255,.24); }

/* ── Partager : panneau du bas avec les applications ── */
#videoReel.rv .rvs { position: fixed; inset: 0; z-index: 1070; display: none; }
#videoReel.rv .rvs.is-open { display: block; }
#videoReel.rv .rvs-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
#videoReel.rv .rvs-panel {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  padding: 8px 16px calc(16px + var(--rv-safe-bottom));
  border-radius: 18px 18px 0 0; background: #fff; color: #111827;
  animation: rvsIn .2s ease-out;
}
@media (min-width: 768px) {
  #videoReel.rv .rvs-panel { top: 50%; bottom: auto; transform: translate(-50%, -50%); border-radius: 18px; padding-bottom: 18px; animation: none; }
}
@keyframes rvsIn { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
[data-bs-theme="dark"] #videoReel.rv .rvs-panel { background: #1c1c1e; color: #f5f5f7; }
#videoReel.rv .rvs-handle { width: 36px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: rgba(127,127,127,.35); }
#videoReel.rv .rvs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#videoReel.rv .rvs-title { margin: 0; font-size: 17px; font-weight: 700; color: inherit; }
#videoReel.rv .rvs-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(127,127,127,.12); color: inherit; font-size: 15px; }
#videoReel.rv .rvs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; margin-bottom: 16px; }
#videoReel.rv .rvs-app {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; color: inherit; text-decoration: none; cursor: pointer;
}
#videoReel.rv .rvs-app:hover { text-decoration: none; color: inherit; }
#videoReel.rv .rvs-app:active .rvs-ico { transform: scale(.92); }
#videoReel.rv .rvs-app small { font-size: 12.5px; font-weight: 500; line-height: 1.2; text-align: center; color: inherit; opacity: .85; }
#videoReel.rv .rvs-ico {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px; transition: transform .12s ease;
}
#videoReel.rv .rvs-messenger { background: linear-gradient(45deg, #0a7cff 0%, #a033ff 60%, #ff5280 100%); }
#videoReel.rv .rvs-link { display: flex; gap: 8px; }
#videoReel.rv .rvs-link input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid rgba(127,127,127,.3) !important; border-radius: 12px !important;
  background: rgba(127,127,127,.08); color: inherit; font-size: 14px !important;
}
#videoReel.rv .rvs-link button {
  flex: 0 0 auto; height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 12px; background: #111827; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
}
[data-bs-theme="dark"] #videoReel.rv .rvs-link button { background: #f5f5f7; color: #111827; }
#videoReel.rv .rvs-link button i { font-size: 18px; }