/* Chat Button - Fixed at bottom right */
.chat-widget-button {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: #013b4b;
   color: white;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   transition: transform 0.3s ease, background-color 0.3s ease;
   z-index: 9998;
}

/* الانيميشن بيشتغل بس في البداية */
.chat-widget-button.animate-pulse {
   animation: pulseScale 2s ease-in-out 4;
}

/* Pulse animation للفت الانتباه */
@keyframes pulseScale {
   0%,
   100% {
      transform: scale(1) translate(0, 0) rotate(0deg);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   }
   50% {
      transform: scale(1.08) translate(2px, -2px) rotate(3deg);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   }
}

/* إيقاف الانيميشن لما يكون الشات مفتوح أو الانيميشن خلص */
.chat-widget-button.active,
.chat-widget-button.animation-done {
   animation: none;
}

.chat-widget-button:hover {
   transform: scale(1.04);
   background-color: #015d73;
}

.chat-widget-button svg {
   width: 30px;
   height: 30px;
   fill: white;
}

/* الصورة والايقونة */
.chat-icon-img {
   width: 50px;
   height: 50px;
   transition: all 0.3s ease;
   opacity: 1;
}

.close-icon {
   transition: all 0.3s ease;
   opacity: 0;
   position: absolute;
   transform: rotate(0deg);
}

/* لما الشات يكون مفتوح */
.chat-widget-button.active .chat-icon-img {
   opacity: 0;
   transform: scale(0) rotate(-180deg);
}

.chat-widget-button.active .close-icon {
   opacity: 1;
   transform: rotate(180deg) scale(1);
}

/* Chat Widget Container - Popup */
.chat-widget-container {
   position: fixed;
   bottom: 100px;
   right: 30px;
   width: 400px;
   max-width: calc(100vw - 60px);
   height: 600px;
   max-height: calc(100vh - 150px);
   background-color: white;
   border-radius: 15px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
   display: none;
   flex-direction: column;
   z-index: 99999;
   overflow: hidden;
}

.chat-widget-container.active {
   display: flex;
   animation: slideUpFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUpFadeIn {
   from {
      opacity: 0;
      transform: translateY(30px) scale(0.9);
   }
   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

/* Chat Header */
.chat-header {
   background: linear-gradient(135deg, #013b4b 0%, #015d73 100%);
   color: white;
   padding: 20px;
   display: flex;
   align-items: center;
   gap: 15px;
   flex-shrink: 0;
}

.chat-header-avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #013b4b;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.header-icon-img {
   width: 40px;
   height: 40px;
}

.chat-header-avatar svg {
   width: 26px;
   height: 26px;
   fill: white;
}

.chat-header-info {
   flex: 1;
}

.chat-header-info h3 {
   font-size: 18px;
   margin-bottom: 3px;
}

.chat-header-info p {
   font-size: 13px;
   opacity: 0.9;
}

.chat-header .minimize-btn {
   background: none;
   border: none;
   color: white;
   cursor: pointer;
   font-size: 24px;
   padding: 0;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: all 0.2s;
}

.chat-header .minimize-btn:hover {
   background-color: rgba(255, 255, 255, 0.1);
   transform: rotate(90deg);
}

/* Chat Messages */
.chat-messages {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
   background: linear-gradient(to bottom, #f9f9f9 0%, #ffffff 100%);
}

.chat-messages::-webkit-scrollbar {
   width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
   background: #f1f1f1;
}

.chat-messages::-webkit-scrollbar-thumb {
   background: #013b4b;
   border-radius: 3px;
}

.message {
   display: flex;
   margin-bottom: 15px;
   animation: fadeInMessage 0.4s ease;
}

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

.message.user {
   justify-content: flex-end;
}

.message.bot {
   justify-content: flex-start;
}

.message-avatar {
   width: 35px;
   height: 35px;
   border-radius: 50%;
   background-color: #013b4b;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.message.user .message-avatar {
   background-color: #ffa500;
}

.message-avatar svg {
   width: 20px;
   height: 20px;
   fill: white;
}

.message-content {
   max-width: 75%;
   padding: 10px 14px;
   border-radius: 14px;
   font-size: 14px;
   line-height: 1.5;
   word-wrap: break-word;
}

.message.user .message-content {
   background-color: #ffa500;
   color: white;
   margin-left: 8px;
   border-bottom-left-radius: 4px;
}

.message.bot .message-content {
   background-color: #013b4b;
   color: white;
   margin-right: 8px;
   border-bottom-right-radius: 4px;
}

/* Typing Indicator */
.typing-indicator {
   display: none;
   align-items: center;
   gap: 8px;
   padding: 8px 20px;
   color: #666;
   font-size: 13px;
}

.typing-indicator.active {
   display: flex;
}

.typing-indicator .dots {
   display: flex;
   gap: 3px;
}

.typing-indicator .dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background-color: #ffa500;
   animation: bounce 1.4s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(1) {
   animation-delay: -0.32s;
}

.typing-indicator .dot:nth-child(2) {
   animation-delay: -0.16s;
}

@keyframes bounce {
   0%,
   80%,
   100% {
      transform: scale(0);
   }
   40% {
      transform: scale(1);
   }
}

/* Chat Input */
.chat-input {
   padding: 15px;
   background-color: white;
   border-top: 1px solid #e0e0e0;
   display: flex;
   gap: 10px;
   flex-shrink: 0;
}

.chat-input input {
   flex: 1;
   padding: 10px 16px;
   border: 2px solid #013b4b;
   border-radius: 20px;
   font-size: 14px;
   outline: none;
   transition: border-color 0.3s;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.chat-input input:focus {
   border-color: #ffa500;
}

.chat-input button {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #ffa500;
   color: white;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   flex-shrink: 0;
}

.chat-input button:hover {
   background-color: #ff8c00;
   transform: scale(1.05);
}

.chat-input button:disabled {
   background-color: #ccc;
   cursor: not-allowed;
   transform: none;
}

.chat-input button svg {
   width: 20px;
   height: 20px;
   fill: white;
}

/* Mobile Responsive */
@media (max-width: 768px) {
   .chat-widget-container {
      bottom: 100px;
      left: 10px;
      right: 10px;
      width: auto;
      max-width: none;
      height: calc(100vh - 150px);
   }

   .chat-widget-button {
      bottom: 20px;
      right: 20px;
   }

   .message-content {
      max-width: 80%;
      font-size: 13px;
   }
}

/* Notification Badge */
.notification-badge {
   position: absolute;
   top: -5px;
   right: -5px;
   background-color: #ff4444;
   color: white;
   border-radius: 50%;
   width: 22px;
   height: 22px;
   display: none;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   font-weight: bold;
   border: 2px solid white;
   animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {
   0%,
   100% {
      transform: scale(1);
   }
   50% {
      transform: scale(1.1);
   }
}

.notification-badge.active {
   display: flex;
}

#sendButton {
   transform: rotate(180deg);
}