ステータスバー風トップ通知(スワイプで閉じる)

<div class="d11-03-12-phone">
          <div class="d11-03-12-screen">
            <div class="d11-03-12-content">ホーム画面</div>
            <div class="d11-03-12-toast" id="d11-03-12-toast">
              <span class="d11-03-12-ic">🔔</span>
              <span class="d11-03-12-txt">新しいメッセージが届きました</span>
            </div>
          </div>
        </div>

.d11-03-12-phone{width:190px;height:240px;border-radius:24px;border:6px solid #1f2937;background:#fff;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15)}
        .d11-03-12-screen{position:absolute;inset:0;background:linear-gradient(160deg,#eef2ff,#fff)}
        .d11-03-12-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px;font-weight:600}
        .d11-03-12-toast{position:absolute;left:8px;right:8px;top:10px;display:flex;align-items:center;gap:8px;background:rgba(30,34,48,.92);color:#fff;padding:10px 12px;border-radius:14px;font-size:11px;box-shadow:0 8px 20px rgba(0,0,0,.25);touch-action:none;cursor:grab}
        .d11-03-12-ic{font-size:15px;flex:none}
        .d11-03-12-txt{flex:1;line-height:1.4}

(function(){
        var root=document.getElementById('item-11-03-12');if(!root)return;
        var toast=root.querySelector('#d11-03-12-toast');
        var sy=0,dy=0,drag=false;
        toast.addEventListener('pointerdown',function(e){drag=true;sy=e.clientY;toast.style.transition='none';toast.setPointerCapture(e.pointerId);});
        toast.addEventListener('pointermove',function(e){if(!drag)return;dy=Math.min(0,e.clientY-sy);toast.style.transform='translateY('+dy+'px)';toast.style.opacity=String(1+dy/60);});
        toast.addEventListener('pointerup',function(){if(!drag)return;drag=false;toast.style.transition='transform .25s,opacity .25s';
          if(dy<-40){toast.style.transform='translateY(-80px)';toast.style.opacity='0';}
          else{toast.style.transform='';toast.style.opacity='1';}
          dy=0;
        });
      })();