/* Custom scrollbar styles */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* loading spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  border: 3px solid rgba(99, 102, 241, 0.3);
  border-top-color: #4338ca;
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  animation: spin 1s linear infinite;
}

/* Custom styles (no default outline, using border/ring) */
input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px #a5b4fc;
}

#send-btn:focus-visible,
#cancel-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

/* Tab styles */
.tab-active {
  border-color: #4f46e5;
  color: #4f46e5;
  background-color: #eef2ff;
}

.tab-inactive {
  border-color: transparent;
  color: #6b7280;
}

.tab-inactive:hover {
  border-color: #d1d5db;
  color: #374151;
  background-color: #f9fafb;
}

/* Style for key-value pair rows */
.kv-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kv-row input {
  flex-grow: 1;
}

.kv-row button {
  flex-shrink: 0;
}

/* History Item Style */
.history-item {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: background-color 150ms ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-item:hover {
  background-color: #f3f4f6;
}

.history-item span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  margin-right: 1rem;
}