html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  font-family: 'Inter', sans-serif;
}

body {
  font-family: sans-serif;
  background-color: #FFFFFF;
}

.chat-container {
  /* Main container for the chat */
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh; /* Full height of the viewport */
  background: #FFFFFF;
  box-sizing: border-box; /* Ensures padding doesn't add to width */
  padding-top: 8px;
  padding-right: 8px;
  padding-left: 8px;
  padding-bottom: 0; /* Remove bottom padding to let input-row handle it */
}

.chat {
  /* Chat area - For all Messages and BOT responses */
  flex: 1;
  width: 100%;
  padding-bottom: 15px;
  background: #fff;
  overflow-y: auto;
  border-radius: 12px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.input-row {
  /* Input area for user messages - Holds input box and button */
  position: relative; 
  background: #F2F2F2;
  bottom: 20px;        /* ⬅️ distance up from the bottom */
  display: flex;
  width: 100%;
  min-height: 86px;
  padding: 8 8 16px 8;
  border-radius: 12px;
  border: 0px;
  gap: 8px;
  align-items: center;
  flex-shrink: 0; /* Prevent the input row from shrinking */
}

#userInput {
  position: absolute;           /* 🔑 Anchor inside input-row */
  top: 8px;                     /* distance from top */
  left: 8px;                    /* distance from left */
  flex: 1;
  padding: 10px;
  max-width: 90%; 
  width: 90%;
  font-size: 1rem;
  border-radius: 12px;
  background: transparent;
  border: 0px;
  outline: none;
  min-width: 0; /* Allows flex item to shrink below its content size */
}


#userInput {
  right: 80px;               /* Leaves space for button */
  padding: 10px;
  font-size: 1rem;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #000;
  box-sizing: border-box;
  outline: none;

  height: auto;
  line-height: 100%;
  max-height: calc(1.5em * 2 + 20px); /* 2 lines + padding */
  max-width: 90%;
  overflow-y: auto;
  resize: none;              /* Prevent manual resizing */
  width: 90%;

  /* Font Specifics */
  font-family: Inter;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: -4%;

}


.inputbutton {
  position: absolute;           /* 🔑 Anchor inside input-row */
  bottom: 4px;                  /* distance from bottom */
  right: 8px;                   /* distance from right */
  width: 28px;
  height: 28px;
  cursor: pointer;
  fill: #352E3D; /* Default color */
  transition: fill 0.3s ease; /* Smooth color transition */
}

/* Call button on the left */
.callbutton {
  position: absolute;       /* anchor inside input-row */
  bottom: 4px;              /* same vertical alignment as send button */
  left: 12px;                /* distance from the left edge */
  width: 28px;              /* match your inputbutton size or adjust */
  height: 28px;
  cursor: pointer;
  fill: #352E3D;            /* match your inputbutton icon color */
  transition: fill 0.3s ease; /* smooth hover color transition */

  width: 28;
  height: 28; 
  gap: 10px;
  angle: 0 deg;
  opacity: 1;
  border-radius: 8px;
  padding: 4px;

}




/* Message Styles */
/* User Messages ---------------------------------------------------------------- */
.question-row {
  display: flex;
  justify-content: flex-end;  /* aligns the inner content to the right */
  margin-left: auto; /* Push the whole row to the right */
  padding: 0 4px;              /* Add only modest horizontal padding */
  margin: 8px 0;                /* Vertical spacing only */
  box-sizing: border-box;      /* Prevent padding from inflating width */
}

.user-msg {
  display: flex;
  align-items: flex-end;           /* Align both to bottom */
  gap: 8px;
  margin-left: auto;               /* <- THIS pushes the message+avatar group to the far right */
}

.message-q {
  background: #f0f0f0;
  align-items: flex-end;           /* Align both to bottom */
  padding: 10px 14px;              /* Padding inside message bubble */
  word-wrap: break-word;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  max-width: 200px;

  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 18px;
}

.your-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-left: 8px;
  border: 1px solid #ccc;
  background-image: url('../img/avatar.png'); /* Replace with actual path */
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  align-self: flex-end;
}
/* User Messages ---------------------------------------------------------------- */




/* Message Styles */
/* Bot Messages ---------------------------------------------------------------- */
.response-row {
  display: flex;
  gap: 8px;
  padding: 0 4px;
  margin: 8px 0;
  box-sizing: border-box;

  align-items: flex-start; /* ⬅️ key change: align everything at the top */
  position: relative;
}

.bot-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-image: url('../img/bot-avatar.png');
  background-size: cover;
  background-position: center;
  flex-shrink: 0;

  /* ⬇️ avatar aligns with bottom of the bot-response */
  margin-top: auto;
}

.bot-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bot-response {
  padding-top: 6px;
  word-wrap: break-word;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  max-width: 300px;
}

.bot-response p {
  margin: 0;
}

.feedback-row {
  margin-top: 4px;
  font-size: 13px;
  color: #555;
}

/* Bot Messages ---------------------------------------------------------------- */

/* Feedback Style ---------------------------------------------------------------- */
.feedback-row {
  display: flex;
  align-items: flex-start;
  margin-top: 4px;
  font-size: 13px;
  color: #555;
}

.fb-space {
  width: 40px; /* 34px + 16px gap on left/right */
  flex-shrink: 0;
}

.feedback-action {
  /* feedback content */
}

/* Feedback Style ---------------------------------------------------------------- */





/* Optional: remove margins from common block elements inside .message */
.message p {
  margin: 0 0 0.5em 0;
}
.message ul,
.message ol {
  margin: 0 0 0.5em 1.2em;
}
.message h1, .message h2, .message h3, .message h4, .message h5, .message h6 {
  margin: 0.3em 0;
  font-weight: 600;
}

.message_pulse_container {
  width: 8px;
  height: 8px;
  overflow: visible;  /* prevent clipping */
  display: flex;
}

.message_pulse_img {
  width: 100%;
  height: 100%;
  animation: pulseShadeOpacity 1.5s infinite ease-in-out;
}

@keyframes pulseShadeOpacity {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}