@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 241, 245, 249;
  --background-end-rgb: 226, 232, 240;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(135deg, rgb(var(--background-start-rgb)), rgb(var(--background-end-rgb)));
  min-height: 100vh;
}

.proxy-frame {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  overflow: hidden;
}

.device-mobile .proxy-frame {
  max-width: 375px;
  margin: 0 auto;
}

.loading-spinner {
  border: 3px solid #e2e8f0;
  border-top: 3px solid #3bbfad;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Smooth transitions for interactive elements */
button, a, input {
  transition: all 0.15s ease;
}

/* Custom scrollbar for log panels */
.log-panel::-webkit-scrollbar {
  width: 6px;
}
.log-panel::-webkit-scrollbar-track {
  background: #1a2e44;
}
.log-panel::-webkit-scrollbar-thumb {
  background: #3bbfad;
  border-radius: 3px;
}