/*
:root {
    --body-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --msger-bg: #fff;
    --border: 2px solid #ddd;
    --left-msg-bg: #ececec;
    --right-msg-bg: #579ffb;
    --primary-button-color: rgb(67, 123, 196);
    --primary-button-hover-color: rgb(106, 158, 225);
    --primary-button-disabled-color: #ccc;
    --primary-button-transition: background 0.23s;
    --secondary-button-color: #e67e22;
    --secondary-button-hover-color: #f28540;    
    
}*/

:root {
  --body-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --msger-bg: #fff;
  --border: 2px solid #ddd;
  --left-msg-bg: #ececec;
  --right-msg-bg: #973C14;
  --primary-button-color: #973C14;
  --primary-button-hover-color: #b3571a; /* Slightly lighter shade */
  --primary-button-disabled-color: #ccc;
  --primary-button-transition: background 0.23s;
  --secondary-button-color: #e69f70;
  --secondary-button-hover-color: #f2c6a0; /* Slightly lighter shade */
  --suggested_msgs_background: #f5f5f5;
  --suggested_msgs_color: #e9b17f;
  --header_height: 60px;
}


html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

body {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligning to the top of the screen */
    height: 100vh;
    background-image: var(--body-bg);
    font-family: Helvetica, sans-serif;
    margin: 0; /* Removing margin */
}


.content-wrapper {
    display: flex;
    flex-direction: column; /* Stacking children vertically */
    width: 100%; /* Taking full width */
    max-width: 1200px;
    height: 100vh; /* Taking full viewport height */
    overflow: hidden; /* Hiding any overflow content */
}

h3 {
    font-size: large;
    margin-bottom: 3px;
  }

.columns {
    display: flex;
    height: calc(100% - var(--header_height)); 
    position:relative
}

.left-column,
.right-column {
flex: 1;
height: 100%; /* Ensuring the right column takes the full height */
}

.msger-columns-btn {
  display: flex; /* Align the text and image horizontally */
  align-items: center; /* Center vertically */
  padding: 0px;
  background-color: #ffffff00; /* Adjust as needed */
  border: none;
  cursor: pointer;
}

#left-text, #right-text {
  font-size: 14px; /* Adjust as needed */
}

#left-text {
  color: black; /* or any color you want for the initial state */
}

#right-text {
  color: gray; /* or any color you want for the initial state */
}

#toggle-icon {
  margin: 0 5px; /* Space between text and icon */
  width: 40px; /* Adjust as needed */
  height: 40px;
}

  
@media (max-width: 600px) {
    .columns {
      flex-direction: column;
    }
    .left-column,
    .right-column {
      display: none; /* Initially hide both columns */
    }
    /* Additional class to show the column when toggled */
    .show-column {
      display: block;
    }
    /* Style for the toggle button */
    .toggle-button {
      display: block;
      /* Add additional styling for the button here */
    }
  }