接続復旧チェックマーク通知(自動フェードアウト)

<div class="d11-14-02-wrap">
          <div class="d11-14-02-frame">
            <div class="d11-14-02-notice" id="d1958Notice">
              <svg viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="11" fill="#10b981"/><path d="M7 12.5l3 3 7-7.5" stroke="#fff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
              <span>接続が復旧しました</span>
            </div>
            <div class="d11-14-02-body" id="d1958Body">
              <p class="d11-14-02-line">同期待ちのデータを送信しています…</p>
              <p class="d11-14-02-line">最新のコンテンツに更新中…</p>
            </div>
          </div>
          <button type="button" class="d11-14-02-toggle" id="d1958Toggle">オフラインにする</button>
        </div>

.prev.d11-14-02{align-items:flex-start;justify-content:flex-start}
        .d11-14-02-wrap{width:100%}
        .d11-14-02-frame{position:relative;height:150px;overflow:hidden;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3}
        .d11-14-02-notice{position:absolute;top:10px;left:50%;transform:translate(-50%,-12px);opacity:0;display:flex;align-items:center;gap:7px;background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;font-size:11px;font-weight:700;padding:7px 12px;border-radius:99px;transition:opacity .35s ease,transform .35s ease;z-index:3;white-space:nowrap}
        .d11-14-02-notice.show{opacity:1;transform:translate(-50%,0)}
        .d11-14-02-body{padding:16px 12px;display:flex;flex-direction:column;gap:8px;transition:opacity .3s}
        .d11-14-02-body.dim{opacity:.4}
        .d11-14-02-line{margin:0;font-size:11.5px;color:#374151;background:#fff;border:1px solid #eef0f3;border-radius:8px;padding:8px 10px}
        .d11-14-02-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-02-toggle:hover{background:#f3f4f6}
        .d11-14-02-toggle[disabled]{opacity:.5;cursor:default}

(function(){
        var root=document.querySelector('.d11-14-02');
        var notice=root.querySelector('#d1958Notice');
        var body=root.querySelector('#d1958Body');
        var btn=root.querySelector('#d1958Toggle');
        var offline=false;
        btn.addEventListener('click',function(){
          if(btn.disabled)return;
          offline=!offline;
          body.classList.toggle('dim',offline);
          if(offline){
            btn.textContent='接続を復旧する';
          }else{
            btn.disabled=true;
            btn.textContent='復旧処理中…';
            notice.classList.add('show');
            setTimeout(function(){
              notice.classList.remove('show');
              btn.disabled=false;
              btn.textContent='オフラインにする';
            },1600);
          }
        });
      })();