.popup {
  position: absolute; /* Absolute positioning inside .msger */
  top: var(--header_height);  /*Place it below the header */
  flex: 1;
  max-width: 1200px;
  width: 100%;  /*Full width */
  height: calc(100% - var(--header_height));  /*Cover chat and input area */
  -webkit-backdrop-filter: blur(5px); /* for Safari */
  backdrop-filter: blur(5px); /* blur, because we can. */
  background-color: rgba(252, 252, 254, 0.9); /* Same background as the chat area */
  z-index: 5;  /*Place it above other elements */
  overflow: auto; /* Scroll if needed */
  padding: 10px; /* Some padding */
  border: var(--border); /* Use the same border as defined in the variables */
  border-radius: 0 0 5px 5px;
}
  
/* Style the form inside the popup as needed */
.popup label,
.popup select {
  display: block; /* Stack them vertically */
  /*margin-bottom: 10px;  Space between elements */
}

.popup input[type="text"] {
  display: block; /* Full width */
  width: 100%; /* Explicitly set to full width */
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 1em;
  background: #ddd; /* Same background color as msger-input */
}

.interaction-id-container{
  margin-top: 15px;
}


.dropdown-field {
  display: flex;
  flex-direction: column;
}

.dropdown-field select {
  width: 100%; /* Full width */
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 1em;
  background: #ddd; /* Same background color as msger-input */
}

.options-name-container, .options-avatar-container {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;  /*Allows items to wrap to the next line if they don't fit */
  margin-top: 20px;
}



.options-name-field, .options-avatar-field {
  flex: 1; /* Take up all available space */
  min-width: 200px;
}


.avatar-options label {
  display: inline-block;
  cursor: pointer;
  margin-right: 5px; /* Adjust as needed */
}

.avatar-options input[type="radio"] {
  display: none; /* Hide the radio buttons */
}



.avatar-options img {
  width: 50px; 
  height: 50px; 
  border-radius: 50%;
  background: #ddd;
  border: 2px solid transparent; 
  opacity: 0.5; /* Makes the image appear greyed out */
}

.avatar-options input[type="radio"]:checked + img {
  border-color: rgb(54, 54, 55); /* Example blue border for selected */
  opacity: 1; /* Sets full opacity for the selected image */
}

.options-button-container {
  margin-top: 15px;
}

.options-send-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 3px;
  background: var(--primary-button-color);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: var(--primary-button-transition);
  font-size: 1em;
}

.options-send-btn:disabled {
background-color: var(--primary-button-disabled-color);  
cursor: not-allowed; 
}

.options-send-btn:not(:disabled):hover {
background: var(--primary-button-hover-color);
}

.msger-options-btn {
  font-size: larger;  
  border: none;
  cursor: pointer;
  background-color: #cdcdcd00;
}

.msger-header-options {
  display: flex; /* Apply flexbox layout */
  align-items: center; /* Center the buttons vertically */
}

.msger-columns-btn {  
  border: black 1px solid;
  padding: 5px;
  cursor: pointer;
  margin-right: 20px;
  color: blanchedalmond;
  background-color: #000000;
  visibility: hidden;
}

@media (max-width: 800px) {
  .msger-columns-btn {
    visibility: visible;
  }
}