@import "tailwindcss";
@import "leaflet/dist/leaflet.css";
@import "react-day-picker/style.css";

:root {
  --background: #ffffff;
  --foreground: #111827;
  --muted: #f4f5f8;
  --muted-foreground: #667085;
  --border: #e6e8ef;
  --primary: #20212b;
  --primary-foreground: #ffffff;
  --radius: 1.25rem;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgb(168 173 188 / 55%) transparent;
}

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

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgb(168 173 188 / 45%);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgb(102 112 133 / 65%);
  background-clip: padding-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

.rdp-root {
  --rdp-accent-color: #111827;
  --rdp-accent-background-color: #f4f5f8;
}

@layer base {
  a {
    color: inherit;
    text-decoration: none;
  }
}

button,
input {
  font: inherit;
}

.soft-card {
  border-radius: 24px;
  background: var(--muted);
}

@keyframes chat-message-blink {
  0%, 100% {
    background-color: transparent;
  }
  25%, 75% {
    background-color: rgb(51 144 236 / 18%);
  }
}

.blink-highlight {
  animation: chat-message-blink 0.55s ease-in-out 2;
  border-radius: 18px;
}

.id-shadow {
  box-shadow: 0 24px 70px rgb(22 26 43 / 12%);
}