/* ═══════════════════════════════════════════════════
   PULSE — Response Panel & Modals
   ═══════════════════════════════════════════════════ */

/* ═══ RESPONSE META BAR ═══ */
.resp-meta{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--bg1);flex-shrink:0;}
.resp-status{font-family:var(--mono);font-size:0.73rem;font-weight:700;padding:3px 10px;border-radius:var(--r);}
.resp-status.s2{background:rgba(29,233,182,.12);color:var(--green);}
.resp-status.s3{background:rgba(84,212,250,.1);color:var(--blue);}
.resp-status.s4{background:rgba(245,166,35,.12);color:var(--amber);}
.resp-status.s5{background:rgba(255,71,87,.12);color:var(--red);}
.resp-time{font-family:var(--mono);font-size:0.67rem;color:var(--text3);}
.resp-size{font-family:var(--mono);font-size:0.67rem;color:var(--text3);}
.resp-meta-spacer{flex:1;}
.resp-copy-btn{padding:4px 12px;border-radius:var(--r);font-family:var(--mono);font-size:0.64rem;background:var(--bg3);border:1px solid var(--border2);color:var(--text3);transition:all .15s;}
.resp-copy-btn:hover{border-color:var(--border3);color:var(--text);}

/* Pretty / Raw toggle */
.resp-view-toggle{display:flex;border-radius:var(--r);overflow:hidden;border:1px solid var(--border2);flex-shrink:0;}
.rvt-btn{padding:3px 10px;font-family:var(--mono);font-size:0.62rem;background:transparent;color:var(--text3);cursor:pointer;transition:all .15s;}
.rvt-btn.active{background:var(--bg4);color:var(--amber);}

/* ═══ JSON VIEWER ═══ */
.json-viewer{padding:16px;font-family:var(--mono);font-size:0.74rem;line-height:1.75;white-space:pre-wrap;word-break:break-word;color:var(--text2);}
.json-key{color:var(--amber);}
.json-str{color:var(--green);}
.json-num{color:var(--blue);}
.json-bool{color:var(--purple);}
.json-null{color:var(--text3);}
.json-bracket{color:var(--text3);}

/* Response headers table */
.resp-header-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border);transition:background .1s;}
.resp-header-row:hover{background:var(--bg2);}
.resp-header-key{padding:7px 12px;font-family:var(--mono);font-size:0.71rem;color:var(--amber);border-right:1px solid var(--border);}
.resp-header-val{padding:7px 12px;font-family:var(--mono);font-size:0.71rem;color:var(--text2);word-break:break-all;}

/* Raw response */
.resp-text{padding:16px;font-family:var(--mono);font-size:0.73rem;color:var(--text2);white-space:pre-wrap;word-break:break-word;line-height:1.65;}

/* ═══ EMPTY & LOADING STATES ═══ */
.empty-resp{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--text3);text-align:center;padding:3rem;}
.empty-icon{font-size:2.4rem;opacity:.12;margin-bottom:6px;}
.empty-title{font-size:0.85rem;font-weight:600;color:var(--text2);}
.empty-hint{font-size:0.7rem;line-height:1.65;font-family:var(--mono);}

.loading-resp{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;}
.loading-bar{width:220px;height:2px;background:var(--bg4);border-radius:1px;overflow:hidden;}
.loading-bar-inner{height:100%;background:linear-gradient(90deg,transparent,var(--amber),transparent);animation:loading-sweep 1s ease-in-out infinite;width:50%;}
@keyframes loading-sweep{0%{transform:translateX(-100%);}100%{transform:translateX(540px);}}
.loading-text{font-family:var(--mono);font-size:0.7rem;color:var(--text3);}
.loading-dots{display:flex;gap:4px;}
.loading-dots span{width:4px;height:4px;border-radius:50%;background:var(--amber);animation:dot-bounce .8s ease infinite;}
.loading-dots span:nth-child(2){animation-delay:.15s;}
.loading-dots span:nth-child(3){animation-delay:.3s;}
@keyframes dot-bounce{0%,100%{transform:translateY(0);opacity:.3;}50%{transform:translateY(-4px);opacity:1;}}

/* ═══ MODALS ═══ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  z-index:1000;display:flex;align-items:center;justify-content:center;
  animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r3);
  padding:26px;width:580px;max-width:92vw;max-height:80vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:slideUp .2s ease;
}
@keyframes slideUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.modal-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:.02em;}
.modal-sub{font-size:0.72rem;color:var(--text3);font-family:var(--mono);margin-bottom:22px;}
.modal-input{background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:9px 12px;border-radius:var(--r);font-family:var(--mono);font-size:0.74rem;width:100%;transition:border-color .15s;margin-bottom:8px;}
.modal-input:focus{border-color:var(--amber);outline:none;box-shadow:0 0 0 2px var(--amber4);}
.modal-input::placeholder{color:var(--text4);}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;}

/* ═════════════════════════════════════════════════
   RESPONSE MOBILE RESPONSIVE
   ═════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .resp-meta {
    padding: 6px 10px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .resp-status {
    font-size: 0.65rem;
    padding: 2px 8px;
  }

  .resp-time, .resp-size {
    font-size: 0.62rem;
  }

  .resp-copy-btn {
    padding: 3px 8px;
    font-size: 0.6rem;
  }

  .rvt-btn {
    padding: 2px 8px;
    font-size: 0.58rem;
  }

  .json-viewer {
    padding: 12px;
    font-size: 0.7rem;
  }

  .resp-header-row {
    grid-template-columns: 1fr 1fr;
  }

  .resp-header-key,
  .resp-header-val {
    padding: 5px 8px;
    font-size: 0.65rem;
  }

  .resp-text {
    padding: 12px;
    font-size: 0.7rem;
  }

  .empty-resp {
    padding: 2rem;
  }

  .empty-icon {
    font-size: 2rem;
  }

  .empty-title {
    font-size: 0.8rem;
  }

  .empty-hint {
    font-size: 0.65rem;
  }

  .modal {
    width: 90vw;
    padding: 20px;
  }

  .modal-title {
    font-size: 0.95rem;
    margin-bottom: 3px;
  }

  .modal-sub {
    font-size: 0.68rem;
    margin-bottom: 16px;
  }

  .modal-input {
    padding: 7px 10px;
    font-size: 0.7rem;
    margin-bottom: 6px;
  }

  .modal-footer {
    gap: 6px;
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  .resp-meta {
    padding: 5px 8px;
    gap: 6px;
  }

  .resp-status {
    font-size: 0.62rem;
    padding: 2px 6px;
  }

  .resp-time, .resp-size {
    font-size: 0.6rem;
  }

  .resp-copy-btn {
    padding: 2px 6px;
    font-size: 0.55rem;
  }

  .json-viewer {
    padding: 10px;
    font-size: 0.67rem;
    line-height: 1.6;
  }

  .resp-header-row {
    grid-template-columns: 1fr;
  }

  .resp-header-key {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 5px 8px;
  }

  .resp-header-val {
    padding: 5px 8px;
  }

  .resp-text {
    padding: 10px;
    font-size: 0.67rem;
  }

  .empty-resp {
    padding: 1.5rem;
  }

  .modal {
    width: 95vw;
    max-height: 85vh;
    padding: 16px;
  }

  .modal-title {
    font-size: 0.9rem;
  }

  .modal-sub {
    font-size: 0.63rem;
    margin-bottom: 12px;
  }

  .modal-input {
    padding: 6px 8px;
    font-size: 0.65rem;
  }
}