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

.anycontext-overlay {
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100vh;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99998;
}

.anycontext-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  min-height: 100vh;
  width: 100%;
  max-width: 31%; /* Responsive width */
  z-index: 99999;
  padding: 8px 16px; /* px-4 py-2 */
}

.anycontext-sidebar-content {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 95vh;
  background-color: white;
  border-radius: 8px; /* rounded-lg */
  padding: 8px; /* px-2 */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

.anycontext-close-button {
  position: absolute;
  right: 0;
  padding: 8px; /* p-2 */
  border-radius: 4px; /* rounded-md */
  margin: 8px; /* m-2 */
}

.anycontext-close-button:hover {
  background-color: rgba(114, 87, 255, 0.5); /* hover:bg-[#7257ff]/50 */
  color: white; /* hover:text-white */
}

.anycontext-open-button {
  color: white;
  background-color: #7257ff50; /* bg-indigo-600 */
  background-opacity: 75%;
  cursor: pointer;
  padding: 8px; /* px-4 py-2 */
  border-radius: 4px 0 0 4px; /* rounded-l-md */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.anycontext-header {
  margin: 16px; /* m-4 */
  font-weight: 600; /* font-semibold */
  font-size: 1.25rem; /* text-xl */
  color: black;
}

.anycontext-icon {
  height: 24px; /* h-6 */
  width: 24px; /* w-6 */
}