/* Define default styles using CSS variables */
:root {
  --chat-window-bg: #fff;
  --header-height: 60px;
  --header-title-color: #000000;
  --header-title-fontsize: 18px;
  --header-title-fontweight: 400;
  --header-icon-size: 11.6px;
  --header-image-width: 166px;
  --header-image-height: 25px;
  --header-bg: #0070bf;
  --link-color: #0070bf;
  --user-message-bg: #4a90e2;
  --user-message-color: #ffffff;
  --system-message-bg: #4a90e2;
  --system-message-color: #ffffff;
  --system-message-avatar-width: 40px;
  --system-message-avatar-height: 40px;
  --body-title-color: #ffffff;
  --body-title-fontsize: 20px;
  --body-title-fontweight: 400;
  --body-description-color: #000000;
  --body-description-fontsize: 16px;
  --body-description-fontweight: 400;
  --body-image-radius: 10px;
  --body-image-width: 48px;
  --body-image-height: 48px;
  --input-height: 48px;
  --input-radius: 30px;
  --input-text-color: #000000;
  --input-text-fontsize: 16px;
  --input-text-fontweight: 400;
  --input-border-color: #cccccc;
  --chat-input-background-color: #ffffff;
  --input-send-icon-size: 32px;
  --chat-input-border-color: linear-gradient(
    to right,
    rgb(8, 80, 120) 1%,
    rgb(67, 145, 161) 47%,
    rgb(72, 101, 219) 66%,
    rgb(133, 216, 206) 99%
  );
  --chip-text-color: #ffffff;
  --chip-background-color: #ffffff;
  --chip-border-color: #d9ebf4;
  --chip-height: 30px;
  --scroll-down-image-size: 75px;
  --like-icon-color: #666666;
  --chat-font-family:
    var(--font--rubik), sans-serif; /* Default font with fallback */
}

/* Use the variables in your styles */
html {
  /* Better mobile viewport handling */
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  overflow: hidden;
  direction: rtl;
  font-family: var(--chat-font-family);
  /* Use percentage instead of viewport units for iframe compatibility */
  height: 100%;
  position: relative;

  /* Prevent zoom on input focus for iOS */
  -webkit-text-size-adjust: 100%;
}

* {
  font-family: var(--chat-font-family);
}

*::-webkit-scrollbar {
  display: none;
}

/* .vfrc-chat-window {
    background-color: var(--chat-window-bg);
} */

/* User Message Style */
.vfrc-user-response .vfrc-message {
  background-color: var(--user-message-bg);
  color: var(--user-message-color);
}

/* System Message Style */
.vfrc-system-response .vfrc-message {
  background-color: var(--system-message-bg);
  color: var(--system-message-color);
}

.vfrc-chat {
  background: transparent !important;
  overflow: visible !important;
  flex-grow: 1;
  padding-bottom: 150px;
}
.vfrc-chat--dialog {
  overflow: visible !important;
}

.vfrc-prompt {
  display: none !important;
}

.vfrc-system-response {
  display: flex;
  gap: 5px;
}

.vfrc-header {
  display: none !important;
}
.vfrc-footer {
  /* direction: rtl; */
  display: none;
}
.vfrc-assistant-info {
  display: none !important;
}
.vfrc-chat--spacer {
  display: none !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* A general class for fade-in animation */
.animate-fadeInUp {
  animation: fadeInUp 0.5s ease forwards;
}

/* Utility classes for delays */
.animate-delay-1 {
  animation-delay: 0.3s;
}
.animate-delay-2 {
  animation-delay: 0.6s;
}

/* Mobile-specific styles */
@media screen and (max-width: 768px) {
  /* Prevent zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
    -webkit-appearance: none;
    appearance: none;
  }

  /* Better scroll behavior for mobile */
  * {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
  }
}

/* Make streaming audio visualization non-selectable */
.voice-waveform,
.audio-visualization,
.streaming-waveform,
.recording-timer,
.voice-timer {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Make streaming text content non-selectable while streaming */
.streaming-message,
.streaming-text,
.typing-text {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}