/* ==========================================================
   BubbleChat - Desktop Layout (3 columnas)
   Objetivo:
   - Desktop: izquierda / centro (teléfono) / derecha
   - Centro: todo (video + topbar + bottombar + acciones + gate) dentro del "teléfono"
   - Móvil: intacto (este CSS solo aplica >= 900px)
   ========================================================== */

@media (min-width: 900px) {

  /* --- Reset de base para escritorio --- */
  html, body {
    height: 100%;
    margin: 0;
    background: #000;
    overflow: hidden; /* en desktop el scroll lo hace el feed */
  }

  /* 3 columnas */
  body{
    display:grid;
    grid-template-columns: 1fr 430px 1fr;
    grid-template-rows: 100%;
    align-items: stretch;
    justify-items: stretch;
  }

  /* Paneles laterales */
  .desktop-left{
    grid-column: 1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 18px;
  }

  .desktop-right{
    grid-column: 3;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 18px;
  }

  /* Placeholder panel estilo */
  .dPanel{
    width: min(520px, 100%);
    height: min(86vh, 820px);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 16px;
    color: rgba(255,255,255,.92);
  }
  .dTitle{font:800 14px system-ui,-apple-system,Segoe UI,Roboto,Arial;margin-bottom:8px}
  .dText{font:600 12px system-ui,-apple-system,Segoe UI,Roboto,Arial;opacity:.75}

  /* --- Centro (teléfono) --- */
  main.feed{
    grid-column: 2;

    /* “teléfono” */
    width: 430px !important;
    height: 86vh !important;

    border-radius: 22px;
    overflow: hidden;
    background:#000;

    /* clave: los overlays (topbar/rightActions/bottombar/gate) se anclan acá */
    position: relative !important;

    box-shadow: 0 25px 70px rgba(0,0,0,.60);

    /* scroll interno */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ✅ evitar 100vw/100vh (que causaba "zoom") */
  main.feed.feed{
    width: 430px !important;
  }
  .slide{
    width: 100% !important;
    height: 100% !important;     /* cada slide ocupa el alto del teléfono */
  }
  .slide > video.reel{
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    transform: none !important;
    object-fit: cover !important;
  }

  /* --- Topbar / Bottombar: en desktop deben vivir dentro del teléfono --- */
  .topbar{
    position: absolute !important; /* NO fixed */
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;

    width: 100% !important;
    padding: 10px 12px 10px !important;

    border-radius: 0 !important;
    z-index: 20;
  }

  .bottombar{
    position: absolute !important; /* NO fixed */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    padding: 10px 12px 10px !important;

    border-radius: 0 !important;
    z-index: 20;
  }

  /* --- Acciones a la derecha: dentro del teléfono --- */
  .rightActions{
    position: absolute !important;
    right: 10px !important;
    bottom: 110px !important; /* arriba de bottombar */
    top: auto !important;
    transform: none !important;
    z-index: 18;
  }

  /* --- Gate (playGate): en desktop debe cubrir solo el teléfono --- */
  .playGate{
    position: absolute !important; /* NO fixed */
    inset: 0 !important;
    border-radius: 22px;
  }

  /* Para que el "cold" blur no afecte todo el body, solo el teléfono */
  .playGate.is-cold{
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(16px) saturate(1.05);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
  }

  /* Paused ya lo tienes transparente y pointer-events none */
  .playGate.is-paused{
    background: rgba(0,0,0,0);
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    pointer-events:none !important;
  }

  /* --- Ajustes menores: que todo quede “encajado” --- */
  .feed{ scrollbar-width:none; -ms-overflow-style:none; }
  .feed::-webkit-scrollbar{ width:0;height:0; }

}

/* pantallas grandes: un poco más ancho */
@media (min-width: 1400px){
  @media (min-width: 900px){
    body{ grid-template-columns: 1fr 460px 1fr; }
    main.feed{ width: 460px !important; }
  }
}