/* Watchlist item animations */
.watchlist-item-enter {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease-out;
}

.watchlist-item-enter-active {
  opacity: 1;
  transform: translateY(0);
}

[id^="watchlist_item_"] {
  transition: all 0.3s ease-in-out;
}

[id^="watchlist_item_"]:not(.initial-load) {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
    background-color: var(--color-success-50);
    border-left: 4px solid var(--color-success-400);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    background-color: transparent;
    border-left: none;
  }
}

.watchlist-item-new {
  background-color: var(--color-success-50);
  border-left: 4px solid var(--color-success-400);
  animation: highlightNew 3s ease-out forwards;
}

@keyframes highlightNew {
  0% {
    background-color: var(--color-success-50);
    border-left: 4px solid var(--color-success-400);
  }
  100% {
    background-color: transparent;
    border-left: none;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  padding-top: 0;
}

main {
  min-height: calc(100vh - 4rem);
}

nav {
  will-change: backdrop-filter;
  transform: translateZ(0);
}

nav.sticky {
  transition: backdrop-filter 0.3s ease, background-color 0.3s ease;
}

nav a {
  transition: all 0.2s ease-in-out;
}

nav a.border-blue-500 {
  position: relative;
  transition: all 0.2s ease-in-out;
}

nav a.border-blue-500::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-700));
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

nav a.border-blue-500:hover {
  color: var(--color-primary-700);
  transform: translateY(-1px);
}

.user-settings-form input[type="password"] {
  font-family: monospace;
  letter-spacing: 0.125em;
}

.user-settings-form input[disabled] {
  background-color: var(--color-gray-50);
  color: var(--color-gray-600);
  cursor: not-allowed;
}

.error-message {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.active-chat-wrapper a {
  background-color: var(--color-primary-50);
  border-left: 4px solid var(--color-primary-600);
  padding-left: calc(0.75rem - 0.25rem);
}

body.chat-page {
  overflow: hidden;
  height: 100vh;
}

body.chat-page main#main {
  padding-top: 4rem;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  margin: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  overflow: visible;
}

@supports not (backdrop-filter: blur(12px)) {
  .backdrop-blur-md {
    background-color: rgba(255, 255, 255, 0.95);
  }
}