@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&display=swap");

:root {
  --background: 220 14% 98%;
  --foreground: 220 13% 13%;

  --card: 0 0% 100%;
  --card-foreground: 220 13% 13%;

  --primary: 220 83% 52%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 14% 92%;
  --secondary-foreground: 220 13% 13%;

  --muted: 220 14% 92%;
  --muted-foreground: 220 9% 46%;

  --accent: 74 100% 70%;
  --accent-foreground: 220 13% 13%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 14% 90%;
  --input: 220 14% 90%;
  --ring: 220 83% 52%;

  --radius: 1.25rem;

  --lime: 74 100% 70%;
  --lime-foreground: 220 13% 13%;
  --dark-surface: 220 13% 13%;
  --dark-surface-foreground: 0 0% 100%;

  --glass-bg: 0 0% 100% / 0.6;
  --glass-border: 0 0% 100% / 0.4;
  --glass-blur: 20px;
}
button {
  border:none;
}
* {
  border-color: hsl(var(--border));
}
a {
  text-decoration: none;
}
html,
body {
  font-family: "Almarai", system-ui, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.glass {
  background: hsl(var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid hsl(var(--glass-border));
}

.glass-card {
  border-radius: 1rem;
  background: hsl(var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid hsl(var(--glass-border));
}

.card-shadow {
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}

.card-shadow-hover {
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.06), 0 8px 24px -4px rgba(0, 0, 0, 0.1);
}

.icon-token {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid currentColor;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.8;
}

.donut {
  position: relative;
  width: 12rem;
  height: 12rem;
  border-radius: 9999px;
  background: conic-gradient(var(--donut-colors));
}

.donut::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 9999px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
}

.modal-backdrop {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

.sidebar-link.is-active-link {
  background-color: hsl(var(--dark-surface));
  color: hsl(var(--dark-surface-foreground));
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45);
}

.sidebar-link.is-inactive-link {
  color: hsl(var(--muted-foreground));
}

.sidebar-link.is-inactive-link:hover {
  background: rgba(255, 255, 255, 0.6);
  color: hsl(var(--foreground));
}

.chat-tab.is-active-tab {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45);
}

.chat-tab.is-inactive-tab {
  color: hsl(var(--muted-foreground));
}

.chat-tab.is-inactive-tab:hover {
  background: hsl(var(--secondary));
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.login-page-gradient {
    --tw-blur: blur(64px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    background-color: rgb(225 29 72 / 0.1);
    height: 24rem;
    width:24rem;
    position: absolute;
    top: 0;
    left: 0;
    
    bottom: 0;
    z-index: 2;

}

.login-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
  max-width: 490px;
  padding: 20px;
}
.login-card img {
  margin:10px auto;
}
.overflow-visible {
  overflow:visible !important;
}