/* ============================================================
   WEBHOOK.LOOK - Custom Styles
   ============================================================ */

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb {
  background: #374151;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Connection status pulse */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.status-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Highlight.js dark mode override */
.dark pre code.hljs {
  background: #0d1117;
}

/* Request item new-request animation */
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.request-item:first-child {
  animation: slide-in 0.2s ease-out;
}

/* Tab content transition */
.tab-content {
  animation: fade-in 0.15s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile drawer overlay */
@media (max-width: 1023px) {
  #request-list-panel.fixed {
    width: 100%;
    background: inherit;
  }
}

/* Method badge fallback colors (used in server-rendered items) */
.method-get { background-color: #22c55e; color: white; }
.method-post { background-color: #3b82f6; color: white; }
.method-put { background-color: #eab308; color: white; }
.method-patch { background-color: #f97316; color: white; }
.method-delete { background-color: #ef4444; color: white; }
.method-head { background-color: #a855f7; color: white; }
.method-options { background-color: #6b7280; color: white; }