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

/* --- Lokale Inter-Schriftarten (DSGVO-konform) --- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Fade-In Animationen --- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}
.animate-fade-in {
  animation: fade-in 0.4s cubic-bezier(.29, .7, .41, 1.05);
}

/* Alternative Fade-In */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}
.animate-fadeIn {
  animation: fadeIn 0.7s cubic-bezier(.25, .8, .25, 1);
}

/* --- Shake (Error/Attention) --- */
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.animate-shake {
  animation: shake 0.5s linear;
}

/* --- Chat Scrollbar --- */
#chat-messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(30, 64, 175, 0.10) rgba(0, 0, 0, 0.01);
}
#chat-messages::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}
#chat-messages::-webkit-scrollbar-thumb {
  background: rgba(30, 64, 175, 0.10);
  border-radius: 10px;
}
#chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 700px) {
    .text-sm { font-size: 15px !important; }
    .text-xs { font-size: 12px !important; }
    .p-3 { padding: 0.7rem !important; }
    .rounded-xl { border-radius: 16px !important; }
    .rounded-2xl { border-radius: 20px !important; }
    .w-14, .h-20 { width: 56px !important; height: 80px !important; }
  }
  @media (max-width: 480px) {
    .px-2, .sm\:px-6, .sm\:px-7 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .py-5, .sm\:py-8, .sm\:py-10 { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; }
    .gap-4 { gap: 0.7rem !important; }
    .w-14, .h-20 { width: 44px !important; height: 60px !important; }
  }