/* */

/* ================================== */

/* CHATBOT STYLES (ENHANCED & SEPARATE) */

/* ================================== */

:root {

  --primary: #0a0a0a;

  --secondary: #121212;

  --accent: #1a1a1a;

  --text: #e0e0e0;

  --light-text: #a0a0a0;

  --highlight: #00f2ea;

  --border: rgba(255, 255, 255, 0.1);

}



.chatbot-toggle-btn {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 65px;

    height: 65px;

    background: var(--highlight);

    color: var(--primary);

    border: none;

    border-radius: 50%;

    font-size: 2rem;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 5px 20px rgba(0, 242, 234, 0.3);

    z-index: 1001;

    cursor: none;

    transition: transform 0.3s ease;

    animation: pulse-chat 2s infinite;

}



@keyframes pulse-chat {

    0% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(0, 242, 234, 0.7);

    }

    70% {

        transform: scale(1);

        box-shadow: 0 0 0 20px rgba(0, 242, 234, 0);

    }

    100% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(0, 242, 234, 0);

    }

}



.chatbot-toggle-btn:hover {

    transform: scale(1.1);

    animation: none;

}

.chatbot-toggle-btn i {

  position: absolute;

  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

}

.chatbot-toggle-btn .close-icon {

  transform: rotate(-90deg);

  opacity: 0;

}

.chatbot-widget.active + .chatbot-toggle-btn .open-icon {

  transform: rotate(90deg);

  opacity: 0;

}

.chatbot-widget.active + .chatbot-toggle-btn .close-icon {

  transform: rotate(0deg);

  opacity: 1;

}



.chatbot-widget {

  position: fixed;

  bottom: 110px;

  right: 30px;

  width: 370px;

  max-width: calc(100vw - 40px);

  height: 600px;

  max-height: calc(100vh - 130px);

  background: rgba(26, 26, 26, 0.85);

  backdrop-filter: blur(10px);

  border-radius: 20px;

  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border: 1px solid var(--border);

  z-index: 1000;

  transform: translateY(50px) scale(0.9);

  opacity: 0;

  transform-origin: bottom right;

  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;

  pointer-events: none;

}

.chatbot-widget.active {

  transform: translateY(0) scale(1);

  opacity: 1;

  pointer-events: auto;

}



.chatbot-header {

  display: flex;

  align-items: center;

  padding: 20px;

  background: rgba(42, 42, 42, 0.8);

  border-bottom: 1px solid var(--border);

  flex-shrink: 0;

}

.chatbot-avatar {

  width: 45px;

  height: 45px;

  border-radius: 50%;

  background: var(--highlight);

  color: var(--primary);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.6rem;

  margin-right: 15px;

  flex-shrink: 0;

}

.chatbot-name {

  font-size: 1.1rem;

  font-weight: bold;

  color: #fff;

  margin: 0;

}

.chatbot-status {

  font-size: 0.85rem;

  color: var(--light-text);

  margin: 0;

}



.chatbot-messages {

  flex-grow: 1;

  padding: 20px;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.chatbot-messages::-webkit-scrollbar {

  width: 8px;

}

.chatbot-messages::-webkit-scrollbar-track {

  background: transparent;

}

.chatbot-messages::-webkit-scrollbar-thumb {

  background-color: var(--accent);

  border-radius: 10px;

  border: 2px solid var(--secondary);

}

.message {

  display: flex;

  max-width: 85%;

  opacity: 0;

  animation: message-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

}

.message.bot { align-self: flex-start; }

.message.user { margin-left: auto; flex-direction: row-reverse; }

.message-bubble {

  padding: 12px 18px;

  border-radius: 20px;

  line-height: 1.5;

  font-size: 0.95rem;

}

.message.bot .message-bubble {

  background: var(--accent);

  color: var(--text);

  border-bottom-left-radius: 5px;

}

.message.user .message-bubble {

  background: var(--highlight);

  color: var(--primary);

  border-bottom-right-radius: 5px;

}



.feedback-container {

    margin-top: 10px;

    border-top: 1px solid var(--border);

    padding-top: 10px;

}



.feedback-container button {

    background: none;

    border: none;

    color: var(--light-text);

    cursor: pointer;

    font-size: 1rem;

    margin-right: 10px;

    transition: color 0.3s;

}



.feedback-container button:hover {

    color: var(--highlight);

}



.chatbot-input-area {

  padding: 20px;

  border-top: 1px solid var(--border);

  background: rgba(26, 26, 26, 0.8);

  flex-shrink: 0;

}

#chatbot-form {

  display: flex;

  gap: 10px;

}

#chatbot-input {

  flex-grow: 1;

  background: var(--primary);

  border: 1px solid var(--border);

  border-radius: 25px;

  padding: 12px 20px;

  color: var(--text);

  font-size: 1rem;

  transition: border-color 0.3s, box-shadow 0.3s;

}

#chatbot-input:focus {

  outline: none;

  border-color: var(--highlight);

  box-shadow: 0 0 15px var(--shadow);

}

#chatbot-form button {

  width: 50px;

  height: 50px;

  flex-shrink: 0;

  border-radius: 50%;

  border: none;

  background: var(--highlight);

  color: var(--primary);

  font-size: 1.2rem;

  cursor: none;

  transition: transform 0.2s ease;

}



/* Keyframe Animations */

@keyframes message-pop-in {

  from { opacity: 0; transform: translateY(20px) scale(0.9); }

  to { opacity: 1; transform: translateY(0) scale(1); }

}

.typing-indicator { display: flex; align-items: center; padding: 10px 0; }

.typing-indicator span { height: 8px; width: 8px; margin: 0 2px; background-color: var(--light-text); border-radius: 50%; display: inline-block; animation: bounce 1.4s infinite ease-in-out both; }

.typing-indicator span:nth-of-type(2) { animation-delay: -0.2s; }

.typing-indicator span:nth-of-type(3) { animation-delay: -0.4s; }

@keyframes bounce {

  0%, 80%, 100% { transform: scale(0); }

  40% { transform: scale(1.0); }

}