body {
  font-family: 'Inter', sans-serif;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* AI Visualizer Effect */
@property --ai-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --ai-length {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --ai-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --ai-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --ai-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.ai-visualizer {
  --s: 40vmin;
  --p: calc(var(--s) / 4);
  width: var(--s);
  height: var(--s);
  background: radial-gradient(
        60% 75% at center,
        var(--bg-color) 50%,
        transparent 50%
       ),
       radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%);
  padding: var(--p);
  place-items: center;
  position: relative;
  border-radius: 50%;
  transform: scale(1.4);
  margin: 0 auto;
}

:root {
  --ai-count: 4;
  --ai-radius: 6vmin;
}

@keyframes ai-animation {
  from {
    --ai-angle: 360deg;
    --ai-length: 0.35;
    --ai-opacity: 1;
  }

  30% {
    --ai-length: 1.5;
  }

  70% {
    --ai-opacity: 0.4;
    --ai-length: 0.05;
  }

  98% {
    --ai-opacity: 0.7;
  }

  to {
    --ai-angle: 0deg;
    --ai-length: 0.35;
    --ai-opacity: 1;
  }
}

.ai-particle {
  opacity: 0.9;
  position: absolute;
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  --offset-per-item: calc(360deg / var(--ai-count));
  --current-angle-offset: calc(var(--offset-per-item) * var(--i) + var(--ai-angle));
  translate: calc(
      cos(var(--current-angle-offset)) * var(--ai-radius) + var(--ai-x, 0)
    )
    calc(sin(var(--current-angle-offset)) * var(--ai-radius) * -1);
  scale: calc(0.6 + var(--ai-length));
  animation: ai-animation 5.5s cubic-bezier(0.45, -0.35, 0.16, 1.5) infinite;
  transition: opacity 0.3s linear;
  opacity: var(--ai-opacity, 1);
}

.ai-particle:nth-child(1) {
  --i: 0;
}

.ai-particle:nth-child(2) {
  --i: 1;
}

.ai-particle:nth-child(3) {
  --i: 2;
}

.ai-particle:nth-child(4) {
  --i: 3;
}

.ai-particle1 {
  background: #79e3ee;
  background: radial-gradient(50% 50% at center, #79e3ee, #e7e7fb);
  background: radial-gradient(50% 50% at center, #c979ee, #74bcd6);

  --ai-x: 1vmin;
  width: 16vmin;
  height: 16vmin;
  animation-timing-function: cubic-bezier(0.12, 0.32, 0.68, 0.24);
}

.ai-particle2 {
  background: radial-gradient(50% 50% at center, #ef788c, #e7e7fb);
  width: 15vmin;
  height: 15vmin;
}

.ai-particle3 {
  background: radial-gradient(50% 50% at center, #eb7fc6, transparent);
  width: 5vmin;
  height: 5vmin;
  opacity: 0.6;
  --ai-x: -1vmin;
}

.ai-particle4 {
  background: #6d67c8;
  animation-timing-function: cubic-bezier(0.39, -0.03, 0.75, 0.47);
}

.ai-container {
  overflow: hidden;
  background: transparent;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
}

.ai-glass {
  overflow: hidden;
  position: absolute;
  --w: 0.5vmin;
  inset: calc(var(--p) - var(--w));
  border-radius: 50%;
  backdrop-filter: blur(1.3vmin);
  box-shadow: 0 0 8vmin color-mix(in srgb, black, transparent 70%);
  background: radial-gradient(
    10vmin at 70% 30%,
    rgba(255, 255, 255, 0.7),
    transparent
  );
}

.ai-glass:after {
  content: "";
  position: absolute;
  inset: 0;
  --c: rgba(255, 255, 255, 0.03);
  --w: 0.0625rem;
  --g: 0.1875rem;

  background: repeating-linear-gradient(
    var(--c),
    var(--c),
    var(--w),
    transparent var(--w),
    transparent calc(var(--w) + var(--g))
  );
  border-radius: inherit;
  border: 1vmin rgba(255, 255, 255, 0.1) solid;
}

@property --ai-value {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --ai-width-ratio {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --ai-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --ai-width: 1vmin;
  --ai-duration: 8s;
}

.ai-rings {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  inset: 0;
  perspective: 11rem;
  opacity: .9;
}

.ai-rings:before,
.ai-rings:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 0, 0, 1);
  border-radius: 50%;
  --ai-width-ratio: 1;
  border: calc(var(--ai-width) * var(--ai-width-ratio)) solid transparent;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  background: linear-gradient(
    white,
    blue,
    magenta,
    violet,
    lightyellow) border-box;
  mask-composite: exclude;
  animation: ai-ring var(--ai-duration) ease-in-out infinite;
  --start: 180deg;
  --ai-value: var(--start);
  --ai-scale: 1;
  transform: rotateY(var(--ai-value)) rotateX(var(--ai-value)) rotateZ(var(--ai-value))
    scale(var(--ai-scale));
}

.ai-rings:before {
  --start: 180deg;
}

.ai-rings:after {
  --start: 90deg;
}

.ai-rings > .ai-rings:before {
  --start: 360deg;
}

.ai-rings > .ai-rings:after {
  --start: 270deg;
}

@keyframes ai-ring {
  from {
    --ai-value: var(--start);
    --ai-scale: 1;
  }
  50% {
    --ai-scale: 1.2;
    --ai-width-ratio: 1.5;
  }
  70% {
    --ai-scale: 1;
    --ai-value: calc(var(--start) + 180deg);
    --ai-width-ratio: 1;
  }

  80% {
    --ai-scale: 1.2;
    --ai-width-ratio: 1.5;
  }

  to {
    --ai-value: calc(var(--start) + 360deg);
    --ai-scale: 1;
    --ai-width-ratio: 1;
  }
}

/* General chat and UI styling */
.chat-message {
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  max-width: 80%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chat-message.user {
  background-color: #3b82f6;
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
}

.chat-message.ai {
  background-color: #e2e8f0;
  color: #334155;
  align-self: flex-start;
  border-bottom-left-radius: 0.25rem;
}

.chat-history::-webkit-scrollbar {
  width: 8px;
}

.chat-history::-webkit-scrollbar-track {
  background: #f0f2f5;
  border-radius: 10px;
}

.chat-history::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.chat-history::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.chat-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
  border-color: #3b82f6;
}

/* Dark Mode Styles */
html[data-theme="dark"] body {
    background-color: #1a1a1a; /* Dark black background */
    color: #e0e0e0; /* Light text for general content */
}

html[data-theme="dark"] header,
html[data-theme="dark"] footer,
html[data-theme="dark"] .bg-white {
    background-color: #2d2d2d !important; /* Dark grey for header, footer, main card */
    color: #e0e0e0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15); /* Darker shadow */
}

html[data-theme="dark"] .text-gray-600 {
    color: #c0c0c0; /* Lighter text for footer copyright */
}

/* Gradient for header/footer top border in Dark Mode */
html[data-theme="dark"] .header-gradient-border,
html[data-theme="dark"] .footer-gradient-border {
    background-image: linear-gradient(to right, #4d82ef, #8a2be2); /* Blue to Purple gradient */
}

/* Dark mode for chat box elements */
html[data-theme="dark"] #chatHistory {
    background-color: #252525; /* Dark background for chat history */
    border-color: #444444; /* Darker border */
}

html[data-theme="dark"] .chat-message.ai {
    background-color: #4a4a4a; /* Darker background for AI messages */
    color: #e0e0e0; /* Light text for AI messages */
}

html[data-theme="dark"] .chat-input {
    background-color: #3d3d3d; /* Darker background for chat input */
    border-color: #555555; /* Darker border for chat input */
    color: #e0e0e0; /* Light text in input fields */
}

html[data-theme="dark"] .chat-input::placeholder {
    color: #a0a0a0; /* Lighter placeholder text */
}

html[data-theme="dark"] .chat-history::-webkit-scrollbar-track {
    background: #2d2d2d;
}

html[data-theme="dark"] .chat-history::-webkit-scrollbar-thumb {
    background: #666666;
}

html[data-theme="dark"] .chat-history::-webkit-scrollbar-thumb:hover {
    background: #888888;
}

/* Dark mode toggle icon rotation */
.moon-icon.rotate-180 {
    transform: rotate(180deg);
}

/* Fade out animation for AI Visualizer and Welcome Message only */
.fade-out {
    animation: fadeOut 0.8s ease-out forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
        pointer-events: none;
        visibility: hidden;
    }
}

/* Hide faded elements completely and adjust layout */
.fade-out {
    animation: fadeOut 0.8s ease-out forwards;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Adjust main container when elements are hidden */
.chat-started main {
    padding-top: 2rem !important;
}

/* Ensure header is never affected by animations */
header {
    animation: none !important;
    transform: none !important;
}