オフライン→オンライン切替時のトースト通知

<div class="d11-14-11-wrap">
          <div class="d11-14-11-frame">
            <div class="d11-14-11-body">
              <p class="d11-14-11-line">設定: 通知の受信をオンにしています</p>
              <p class="d11-14-11-line">プロフィール: 最終ログイン今日</p>
            </div>
            <div class="d11-14-11-toast" id="d1967Toast"></div>
          </div>
          <button type="button" class="d11-14-11-toggle" id="d1967Toggle">オフラインにする</button>
        </div>

.prev.d11-14-11{align-items:flex-start;justify-content:flex-start}
        .d11-14-11-wrap{width:100%}
        .d11-14-11-frame{position:relative;height:150px;overflow:hidden;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3}
        .d11-14-11-body{padding:14px 12px;display:flex;flex-direction:column;gap:8px}
        .d11-14-11-line{margin:0;font-size:11.5px;color:#374151;background:#fff;border:1px solid #eef0f3;border-radius:8px;padding:8px 10px}
        .d11-14-11-toast{position:absolute;left:8px;right:8px;bottom:8px;transform:translateY(140%);opacity:0;border-radius:8px;padding:8px 10px;font-size:11px;font-weight:700;color:#fff;text-align:center;transition:transform .3s ease,opacity .3s ease;z-index:4}
        .d11-14-11-toast.show{transform:translateY(0);opacity:1}
        .d11-14-11-toast.is-offline{background:#dc2626}
        .d11-14-11-toast.is-online{background:#059669}
        .d11-14-11-toggle{margin-top:10px;width:100%;padding:9px;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#374151;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s}
        .d11-14-11-toggle:hover{background:#f3f4f6}

(function(){
        var root=document.querySelector('.d11-14-11');
        var toast=root.querySelector('#d1967Toast');
        var btn=root.querySelector('#d1967Toggle');
        var offline=false,hideTimer=null;
        btn.addEventListener('click',function(){
          offline=!offline;
          toast.classList.remove('is-offline','is-online');
          toast.classList.add(offline?'is-offline':'is-online');
          toast.textContent=offline?'オフラインになりました':'オンラインに戻りました';
          toast.classList.add('show');
          if(hideTimer)clearTimeout(hideTimer);
          hideTimer=setTimeout(function(){toast.classList.remove('show');},1800);
          btn.textContent=offline?'オンラインにする':'オフラインにする';
        });
      })();