/*
  Styles for the Wholistics corner chat bubble.

  This stylesheet is intentionally scoped to only the elements within the
  chat widget.  It borrows the colour palette and layout from the
  full‑page Wholistics chat while adapting it to a floating pop‑out form.
*/

:root {
  --chat-toggle-scale: 2;
  --chat-toggle-base-size: 60px;
  --chat-toggle-offset: 20px;
  --chat-popup-gap: 10px;
  --chat-toggle-size: calc(var(--chat-toggle-base-size) * var(--chat-toggle-scale));
}

/* Basic reset */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Calibri', 'Montserrat', 'Open Sans', sans-serif;
  background: transparent;
}

/* Toggle button styling */
#chatbot-toggle {
  width: var(--chat-toggle-size);
  height: var(--chat-toggle-size);
  border: none;
  border-radius: 50%;
  background-color: #467c7f; /* Primary header colour */
  color: #ffffff;
  font-size: calc(14px * var(--chat-toggle-scale));
  cursor: pointer;
  display: block;
  transition: background-color 0.3s ease;
}
#chatbot-toggle:hover {
  background-color: #3a686a; /* Darker shade on hover */
}

/* Chat bubble container */
#chatbot-bubble {
  position: fixed;
  bottom: calc(var(--chat-toggle-offset) + var(--chat-toggle-size) + var(--chat-popup-gap));
  right: 20px;
  width: 420px;
  height: 600px;
  background: #f0f0f0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid #ccc;
  display: none; /* Hidden by default */
  flex-direction: column;
  z-index: 9998;
  overflow: hidden;
  max-height: 90vh;
}

/* Top bar of the chat bubble */
.top-bar {
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  border-bottom: 3px solid #467c7f;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
}

/* Language switch button for MDPP / ESP bots.  When present, it appears
   in the upper left of the top bar.  The button shows text indicating
   the target language and reloads the chat with the alternate `bot` 
   query parameter when clicked. */
.lang-switch {
  position: absolute;
  left: 10px;
  top: 10px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: #467c7f;
  color: white;
  font-size: 9px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 0 8px;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
}
.lang-switch:hover {
  background-color: #3a686a;
}

/* The container for the logo or title is injected via JS into this span */
#chatbot-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Constrain images placed inside the header so they do not distort
   the top bar.  Both height and width are limited relative to the
   header container, and object-fit ensures the logo scales down
   proportionally. */
#chatbot-header img {
  /* Scale the logo conservatively inside the top bar.  These values
     ensure the image never exceeds the bar's height and remains
     comfortably sized on small screens. */
  /* Reduce the size of the logo further to allow the green divider line
     beneath the top bar to remain visible when using the slim banner. */
  max-height: 10%;
  max-width: 35%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Close button inside the top bar */
#close-bubble {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background-color: #467c7f;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: background-color 0.2s ease;
}
#close-bubble:hover {
  background-color: #3a686a;
}

/* Layout container for the chat application.  When applied to the root
   element inside the chat bubble, this flexbox ensures that the chat
   messages expand to fill all available space between the top bar and
   the input area. */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Scrollable region for messages */
.chat-container {
  overflow-y: auto;
  padding: 10px;
  background: #f0f0f0;
  flex: 1;
  box-sizing: border-box;
}

/* Input area at the bottom */
.input-container {
  padding: 8px;
  background: #ffffff;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
  grid-row: 2;
  display: flex;
  align-items: center;
}

.input-container input {
  flex: 1;
  margin-right: 8px;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
}

.input-container button {
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  background: #F15F38; /* Accent colour for send button */
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: inherit;
}
.input-container button:hover {
  background-color: #d85432; /* Darker shade on hover */
}

/* Message container */
.message {
  display: flex;
  margin: 10px 0;
}
.message.assistant {
  justify-content: flex-start;
}
.message.user {
  justify-content: flex-end;
}

.message-content {
  max-width: 60%;
  padding: 10px 30px;
  border-radius: 30px;
  word-wrap: break-word;
  font-family: inherit;
  background: #ffffff;
  color: #333333;
}

/* Styling for user messages */
.message.user .message-content {
  border: 2px solid #467c7f; /* User colour */
  margin-right: 10px;
}

/* Styling for assistant messages */
.message.assistant .message-content {
  border: 2px solid #F15F38; /* Assistant colour */
  margin-left: 10px;
}

/* Avatars */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
  object-fit: cover;
}

/* Thinking dots animation */
@keyframes blink {
  0%   { opacity: 0.2; }
  20%  { opacity: 1;   }
  100% { opacity: 0.2; }
}
.thinking-dots .dot {
  display: inline-block;
  animation: blink 1.4s infinite both;
  margin: 0 4px;
  font-size: 2em;
  color: #F15F38;
}
.thinking-dots .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.thinking-dots .dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Fullscreen mode for mobile: bubble occupies the entire viewport */
.fullscreen-mode {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  max-height: 100% !important;
}

/* Disclaimer text styling */
.disclaimer {
  font-size: 0.8em;
  color: #666666;
  margin: 8px 0;
  text-align: center;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  #chatbot-bubble {
    width: 300px;
    height: 500px;
  }
  #chatbot-bubble.fullscreen-mode {
    width: 100% !important;
    height: 100% !important;
  }
  .message-content {
    font-size: 14px;
    max-width: 70%;
  }
  /* When the virtual keyboard is open on mobile, keep the input visible */
  .input-container {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 12px 8px;
    width: 100%;
    box-sizing: border-box;
  }
  /* Increase touch targets for mobile */
  .input-container input {
    height: 40px;
    font-size: 16px;
  }
  .input-container button {
    height: 40px;
    min-width: 60px;
  }
}

/* Import fonts (in case the browser loads this CSS directly) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Open+Sans:wght@400;500;600&display=swap');