/* BeKeto Chatbot Frontend Styles */

.beketo-chatbot {
   position: fixed;
   z-index: 999999;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 14px;
   line-height: 1.4;
}

.beketo-chatbot.bottom-right {
   bottom: 20px;
   right: 20px;
}

.beketo-chatbot.bottom-left {
   bottom: 20px;
   left: 20px;
}

.beketo-chatbot.bottom-left .beketo-chatbot-toggle {
   right: auto;
   left: 20px;
}

.beketo-chatbot-toggle {
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   transition: all 0.3s ease;
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 10000;
}

.beketo-chatbot-toggle:hover {
   transform: scale(1.05);
   box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

.beketo-chatbot-icon {
   color: white;
   width: 24px;
   height: 24px;
}

.beketo-chatbot-badge {
   position: absolute;
   top: -5px;
   right: -5px;
   background: #ff4757;
   color: white;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: bold;
   animation: pulse 2s infinite;
}

@keyframes pulse {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.1);
   }

   100% {
      transform: scale(1);
   }
}

.beketo-chatbot-window {
   position: fixed;
   bottom: 80px;
   width: 350px;
   max-width: calc(100vw - 40px);
   height: 500px;
   max-height: calc(100vh - 100px);
   background: white;
   border-radius: 12px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   transform: translateY(20px);
   opacity: 0;
   transition: all 0.3s ease;
   right: 20px;
   z-index: 9999;
}

.beketo-chatbot.bottom-left .beketo-chatbot-window {
   right: auto;
   left: 20px;
}

/* Ensure chatbot window stays within viewport */
.beketo-chatbot-window {
   max-width: calc(100vw - 40px);
   max-height: calc(100vh - 100px);
}

.beketo-chatbot.active .beketo-chatbot-window {
   transform: translateY(0);
   opacity: 1;
}

.beketo-chatbot-header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 15px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.beketo-chatbot-title {
   font-weight: 600;
   font-size: 16px;
}

.beketo-chatbot-close {
   background: none;
   border: none;
   color: white;
   cursor: pointer;
   padding: 5px;
   border-radius: 4px;
   transition: background 0.2s;
}

.beketo-chatbot-close:hover {
   background: rgba(255, 255, 255, 0.2);
}

.beketo-chatbot-messages {
   flex: 1;
   padding: 20px;
   overflow-y: auto;
   background: #f8f9fa;
}

.beketo-message {
   margin-bottom: 15px;
   display: flex;
   animation: messageSlide 0.3s ease;
}

@keyframes messageSlide {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

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

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

.beketo-message-assistant {
   justify-content: flex-start;
}

.beketo-message-content {
   max-width: 80%;
   padding: 12px 16px;
   border-radius: 18px;
   word-wrap: break-word;
}

.beketo-message-user .beketo-message-content {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   border-bottom-right-radius: 4px;
}

.beketo-message-assistant .beketo-message-content {
   background: white;
   color: #333;
   border: 1px solid #e0e0e0;
   border-bottom-left-radius: 4px;
}

.beketo-message-time {
   display: none;
}

/* Product Carousel in Messages */
.beketo-product-carousel {
   margin: 10px 0;
   display: flex;
   gap: 10px;
   overflow-x: auto;
   padding: 5px 0;
}

.beketo-product-item {
   min-width: 150px;
   background: white;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   padding: 10px;
   text-align: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s;
}

.beketo-product-item:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.beketo-product-item img {
   width: 100%;
   height: 80px;
   object-fit: cover;
   border-radius: 4px;
   margin-bottom: 8px;
}

.beketo-product-item h6 {
   margin: 0 0 5px 0;
   font-size: 12px;
   color: #333;
   line-height: 1.3;
   font-weight: 600;
}

.beketo-product-item .price {
   font-weight: bold;
   color: #667eea;
   font-size: 14px;
   margin: 5px 0;
}

.beketo-product-item .description {
   font-size: 10px;
   color: #666;
   line-height: 1.3;
   margin-bottom: 8px;
}

.beketo-product-item a {
   display: inline-block;
   background: #667eea;
   color: white;
   padding: 4px 8px;
   border-radius: 4px;
   text-decoration: none;
   font-size: 10px;
   transition: background 0.2s;
}

.beketo-product-item a:hover {
   background: #5a6fd8;
}

.beketo-chatbot-input-container {
   padding: 15px 20px;
   background: white;
   border-top: 1px solid #e0e0e0;
}

.beketo-chatbot-input-wrapper {
   display: flex;
   align-items: center;
   background: #f8f9fa;
   border: 1px solid #e0e0e0;
   border-radius: 20px;
   padding: 5px;
}

.beketo-chatbot-input {
   flex: 1;
   border: none;
   background: none;
   padding: 10px 15px;
   font-size: 14px;
   outline: none;
   color: #333;
}

.beketo-chatbot-input::placeholder {
   color: #999;
}

.beketo-chatbot-send {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border: none;
   color: white;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
}

.beketo-chatbot-send svg {
   height: auto !important;
   width: 16px !important;
}

.beketo-chatbot-send:hover {
   transform: scale(1.05);
}

.beketo-chatbot-send:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
}


.beketo-typing-indicator {
   display: flex;
   align-items: center;
   gap: 4px;
}

.beketo-typing-indicator span {
   width: 8px;
   height: 8px;
   background: #999;
   border-radius: 50%;
   animation: typing 1.4s infinite ease-in-out;
}

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

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

@keyframes typing {

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

   40% {
      transform: scale(1);
      opacity: 1;
   }
}

/* Handoff Form */
.beketo-handoff-form {
   background: #fff3cd;
   border: 1px solid #ffeaa7;
   border-radius: 8px;
   padding: 15px;
   margin: 10px 0;
}

.beketo-handoff-form h6 {
   margin: 0 0 10px 0;
   color: #856404;
   font-size: 14px;
}

.beketo-handoff-form input {
   width: 100%;
   padding: 8px 12px;
   border: 1px solid #ffeaa7;
   border-radius: 4px;
   font-size: 14px;
   margin-bottom: 10px;
}

.beketo-handoff-form button {
   background: #667eea;
   color: white;
   border: none;
   padding: 8px 16px;
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
   transition: background 0.2s;
}

.beketo-handoff-form button:hover {
   background: #5a6fd8;
}

/* System Messages */
.beketo-system-message {
   background: #d1ecf1;
   color: #0c5460;
   border: 1px solid #bee5eb;
   border-radius: 8px;
   padding: 12px 16px;
   margin: 10px 0;
   font-size: 13px;
   text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
   .beketo-chatbot-window {
      width: calc(100vw - 20px);
      height: calc(100vh - 120px);
      bottom: 80px;
      right: 10px;
      left: 10px;
      max-width: calc(100vw - 20px);
      max-height: calc(100vh - 120px);
      position: fixed;
   }

   .beketo-chatbot.bottom-left .beketo-chatbot-window {
      right: 10px;
      left: 10px;
   }

   .beketo-chatbot-toggle {
      width: 50px;
      height: 50px;
      bottom: 20px;
      right: 20px;
   }

   .beketo-chatbot.bottom-left .beketo-chatbot-toggle {
      right: auto;
      left: 20px;
   }

   .beketo-chatbot-icon {
      width: 20px;
      height: 20px;
   }

   .beketo-chatbot-header {
      padding: 12px 15px;
   }

   .beketo-chatbot-title {
      font-size: 16px;
   }

   .beketo-chatbot-messages {
      padding: 10px;
   }

   .beketo-message {
      margin-bottom: 12px;
   }

   .beketo-message-content {
      padding: 10px 12px;
      font-size: 14px;
   }

   .beketo-chatbot-input-container {
      padding: 10px;
   }

   .beketo-chatbot-input {
      font-size: 14px;
      padding: 8px 12px;
   }

   .beketo-chatbot-send {
      width: 40px;
      height: 40px;
   }
}

@media (max-width: 480px) {
   .beketo-chatbot-window {
      width: calc(100vw - 16px);
      height: calc(100vh - 100px);
      bottom: 70px;
      right: 8px;
      left: 8px;
      max-width: calc(100vw - 16px);
      max-height: calc(100vh - 100px);
   }

   .beketo-chatbot.bottom-left .beketo-chatbot-window {
      right: 8px;
      left: 8px;
   }

   .beketo-chatbot-toggle {
      width: 45px;
      height: 45px;
      bottom: 15px;
      right: 15px;
   }

   .beketo-chatbot.bottom-left .beketo-chatbot-toggle {
      right: auto;
      left: 15px;
   }

   .beketo-chatbot-icon {
      width: 18px;
      height: 18px;
   }

   .beketo-chatbot-header {
      padding: 10px 12px;
   }

   .beketo-chatbot-title {
      font-size: 15px;
   }

   .beketo-chatbot-messages {
      padding: 8px;
   }

   .beketo-message-content {
      padding: 8px 10px;
      font-size: 13px;
   }

   .beketo-chatbot-input-container {
      padding: 8px;
   }

   .beketo-chatbot-input {
      font-size: 13px;
      padding: 6px 10px;
   }

   .beketo-chatbot-send {
      width: 36px;
      height: 36px;
   }
}

/* Extra small screens */
@media (max-width: 360px) {
   .beketo-chatbot-window {
      width: calc(100vw - 12px);
      height: calc(100vh - 80px);
      bottom: 60px;
      right: 6px;
      left: 6px;
      max-width: calc(100vw - 12px);
      max-height: calc(100vh - 80px);
   }

   .beketo-chatbot.bottom-left .beketo-chatbot-window {
      right: 6px;
      left: 6px;
   }

   .beketo-chatbot-toggle {
      width: 40px;
      height: 40px;
      bottom: 10px;
      right: 10px;
   }

   .beketo-chatbot.bottom-left .beketo-chatbot-toggle {
      right: auto;
      left: 10px;
   }

   .beketo-chatbot-icon {
      width: 16px;
      height: 16px;
   }

   .beketo-chatbot-header {
      padding: 8px 10px;
   }

   .beketo-chatbot-title {
      font-size: 14px;
   }

   .beketo-chatbot-messages {
      padding: 6px;
   }

   .beketo-message-content {
      padding: 6px 8px;
      font-size: 12px;
   }

   .beketo-chatbot-input-container {
      padding: 6px;
   }

   .beketo-chatbot-input {
      font-size: 12px;
      padding: 5px 8px;
   }

   .beketo-chatbot-send {
      width: 32px;
      height: 32px;
   }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
   .beketo-chatbot-window {
      height: calc(100vh - 60px);
      max-height: calc(100vh - 60px);
      bottom: 50px;
   }

   .beketo-chatbot-toggle {
      bottom: 10px;
      right: 10px;
   }

   .beketo-chatbot.bottom-left .beketo-chatbot-toggle {
      right: auto;
      left: 10px;
   }
}

/* Scrollbar Styling */
.beketo-chatbot-messages::-webkit-scrollbar {
   width: 6px;
}

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

.beketo-chatbot-messages::-webkit-scrollbar-thumb {
   background: #c1c1c1;
   border-radius: 3px;
}

.beketo-chatbot-messages::-webkit-scrollbar-thumb:hover {
   background: #a8a8a8;
}