.call-popup {
  position: fixed;          /* positioned relative to input container */
  bottom: 120px;
  left: 8px;                /* align with left edge / padding */
  right: 8px;               /* align with right edge / padding */
  height: 700px;            /* same height */
  max-width: calc(100% - 32px); /* full width of container minus margins */
  
  background: #FFFFFF;
  border: 1px solid #ddd;
  border-radius: 16px;
  display: none;            /* hidden by default */
  flex-direction: column;
  gap: 12px;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
  
  width: 100%;
  padding: 8px 8px 16px 8px;  /* top, right, bottom, left */
}


.call-popup p {
  margin: 0;
}

.call-title {
  color: #15131B;
  padding-top: 4px;
  padding-bottom: 2px;
  font-family: Inter;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 150%;
  letter-spacing: -4%;
}
.call-section-head{
  font-family: Inter;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 150%;
  letter-spacing: -4%;
  color: #656972;
}
.call-section-head.bold {
  font-weight: 700;   /* heavier */
  color: #15131B;        /* darker */
}



.call-seperator-line {
  width: 100%;               /* span full width of popup */
  height: 1px;               /* thin horizontal line */
  background-color: #ddd;    /* light gray line */
  margin: 8px 0;             /* spacing above and below */
}


.call-to-name,
.call-to-number,
.call-from-name,
.call-connect-to-number,

.call-from-number {
  display: block;
  width: 100%;
  margin-bottom: 0px;
  height: 41px;
  align-items: center; /* vertical centering */
  padding: 10px 12px;               /* top/bottom and left/right */
  

  background: #F2F2F2;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;

  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;

  color: #333;

  outline: none;
  appearance: none;
  resize: none; 
}




/* Shared button base */
.call-button {
  width: 130px;
  height: 29px;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;      /* keeps them side by side */
  cursor: pointer;
  border: none;
  margin: 0;
  
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;

  user-select: none;
  transition: background-color 0.3s ease;
}

/* Variants */
.call-cancel {
  background-color: #FFFFFF;
  color: #000000;           /* black text */
  border: 1px solid #cccccc;   /* 1px light gray border */
}

.call-cancel:hover {
  background-color: #1a5ad7;
  color: #FFFFFF;   
}

.call-place {
  background-color: #2c72ec;
  color: white;
}

.call-place:hover {
  background-color: #1a5ad7;
}


.call-actions {
  position: absolute;    /* anchor inside popup */
  bottom: 16px;          /* distance from bottom of popup */
  left: 16px;            /* align with popup padding */
  right: 16px;           /* stretch across minus padding */
  display: flex;
  gap: 12px;             /* space between buttons */
  justify-content: flex-end; /* align buttons to right */

  font-family: Inter;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 150%;
  letter-spacing: -3%;

}



.purpose-buttons {
  display: flex;
  gap: 12px;            /* spacing between buttons */
  justify-content: flex-start;  /* left-aligned */
  height: 29px;
}

/* Optional: if you want different coloring for purpose buttons */
.call-purpose {
  background-color: #FFFFFF;
  color: #81848C;
  border: 1px solid #cccccc;
}

.call-purpose:hover {
  background-color: #bbbbbb;
}

/* Selected state */
.call-purpose.selected {
  background-color: #CCE1FF;  /* blue */
  color: #1665D5;   
  border: 1px solid #CCE1FF; /* match background */
}


.call-purpose-textarea {
  display: block;
  width: 100%;
  padding: 6px 12px;          /* same as call-to-name */
  margin-bottom: 0px;

  background: #F2F2F2;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;

  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  height: 80px;               /* double the original call-to-name height */
  color: #333;

  outline: none;
  appearance: none;
  resize: none;
}

.ai_pulse_container {
  width: 8px;
  height: 8px;
  padding-left: 25px;
  padding-top: 6px;
  overflow: visible;  /* prevent clipping */
  display: flex;
}

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

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

.ai-bot-response p {
  margin: 0;
}

/* Text pulse animation */
.pulse {
  animation: text-pulse 1.5s infinite;
}

@keyframes text-pulse {
  0%   { opacity: 0.6; }
  50%  { opacity: 1; }
  100% { opacity: 0.6; }
}