/* 1) Make the whole viewport a flex column */
body {
  display: flex;
  flex-direction: column;
  align-items: left;
  font-family: sans-serif;
  margin: 0;
  background: #f5f5f5;
}

.container {
  display: flex;
  height: 100vh; /* Make the container take the full viewport height */
  align-items: flex-start; 
}

.left-column {
  /* flex: 1; Takes up remaining space */
  width: 60%; /* Set a fixed width for the right column */
  padding: 10px; /* Add some padding */
  display: flex;
  flex-direction: column; /* Stack the panels vertically */
}

.right-column {
  width: 40%; /* Set a fixed width for the right column */
  padding: 25px; /* Add some padding */
  display: flex;
  flex-direction: column; /* Stack the panels vertically */
}

.function-card {
  padding: 0.8em;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.function-card strong {
  color: #1976d2;
}
.function-card ul {
  color: #555;
}
button {
  border: none;
  padding: 0.5em 1em;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.2s;
}
button:hover {
  opacity: 0.9;
}
#connectButton {
  background: #2196f3;
  color: white;
}
.voice-start {
  background: #4caf50;
  color: white;
}
.voice-stop {
  background: #f44336;
  color: white;
}
/* chat history container */
.message-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-message {
  align-self: flex-end;
  background-color: #E6E6FA; /* #b388ff */
  color: #4B0082; /* white */
  border-radius: 18px 18px 0 18px;
  padding: 10px 14px;
  max-width: 70%;
  animation: fadeIn 0.3s ease-in-out;
  text-align: justify;
}

.ai-message {
  align-self: flex-start;
  /* background-color: #f0f0f0;  */
  background: transparent;
  border: 1px solid black;
  border-radius: 18px 18px 18px 0;
  padding: 10px 14px;
  max-width: 70%;
  animation: fadeIn 0.3s ease-in-out;
  text-align: justify;
}

.tool-message {
  align-self: flex-start;
  background-color: #ececec;
  /* background: transparent;  #d0d0d0; */
  border: 2px solid black;
  border-radius: 12px 12px 12px 12px;
  padding: 10px 14px;
  margin-top: 10px; /* padding-top:  */
  margin-bottom: 10px;
  width: 60%;
  animation: fadeIn 0.3s ease-in-out;
  text-align: justify;
}

.latency {
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
  margin: 4px;
}

.latency-user {
  text-align: right;
  align-self: flex-end;
  margin-right: 14px;
}

.latency-ai {
  text-align: left;
  align-self: flex-start;
  margin-left: 14px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Centered layout container */
main {
  /* width: 60%; */
  /* max-width: 800px; */
  display: flex;
  flex-direction: column;
  padding: 1rem;
  box-sizing: border-box;
}

/* Header centered */
header {
  width: 100%;
  max-width: 800px;
  text-align: center;
  padding: 1rem 0;
}

/* Chat container scrollable */
.chat-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
  height: 60vh; 70vh */
}

/* Chat container scrollable */
.chat-container-reverse {
  display: flex;
  flex-direction: column-reverse; /* Reverse order */
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
  max-height: 70vh;
}

/* Input bar now below chat */
.input-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background: white;
  padding: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* Input field grows with text */
textarea {
  flex: 1;
  resize: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.4;
  height: 2.5rem; /* match button height */
  overflow-y: auto;
  box-sizing: border-box;
}

/* Icon buttons */
.icon-button {
  font-size: 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

/* at the bottom of styles.css */
.icon-button.voice-active {
  background: #f44336;
  color: white;
}
.icon-button.voice-active .icon-mic {
  /* if you’re using an SVG, you can also change its fill here */
  fill: white;
}

#uploadButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.visual-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.visual-row > #visualizer {
  height:40px;
  flex: 0 0 25%;
  width: auto; 
  max-width: 400px;
  margin: 0; auto;
  margin-bottom: 0.75rem;
  border-radius: 16px;
  opacity: 0.9;
  transition: all 0.2s ease-in-out;
}

/* transcript pane takes remaining space */
.visual-row > #transcription {
  flex: 1;
  max-height: calc(1.4em * 3); /* cap to ~4 lines of text */
  overflow-y: auto;
  white-space: pre-wrap;
  min-height: 40px;      
  padding:15px 15px 30px 15px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #333;
  text-align: justify;
}

.blinker {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.transcription-area {
  transition: all 0.2s ease;
  font-size: 1rem;
}

.big_text {
  font-size: 1.3rem;
}

.highlight {
  background-color:  #e0f2ff;
  color: black;
  padding: 0 2px;
  border-radius: 4px;
}


/* Utility class to hide elements */
.hidden {
  display: none!important;
}



/* Styles for tab buttons container */
.tab-buttons {
  display: flex;
  justify-content: space-around; /* Distribute buttons evenly */
  margin-bottom: 10px;
  background-color: #eee;
  border-radius: 8px;
  padding: 5px;
}

/* Styles for individual tab buttons */
.tab-button {
  flex-grow: 1; /* Allow buttons to take equal width */
  padding: 10px 15px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  color: #555;
  transition: all 0.3s ease;
  border-radius: 5px;
}

.tab-button:hover {
  background-color: #ddd;
}

.tab-button.active {
  background-color: #2196f3; /* Highlight active tab */
  color: white;
}

/* Hide all tab content by default */
.tab-content {
  display: none;
  flex-grow: 1; /* Allow tab content to fill available space */
  border: 1.5px solid #ccc; /* Keep existing border style */
  padding: 10px;
  overflow-y: auto; /* Enable scrolling for content */
  height: calc(100% - 60px); /* Adjust height based on tab button height */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Show only the active tab content */
.tab-content.active {
  display: flex; /* Use flexbox for vertical stacking of log settings and log */
  flex-direction: column;
}

/* Remove individual panel height and border-radius styles as they are now handled by tab-content */
#menu-panel,
#service-panel,
#about-panel,
#events-panel, 
#log-panel {
  /* Remove or modify these styles if they conflict with tab-content styles */
  border: none; /* Let tab-content handle the border */
  height: auto; /* Let tab-content manage height */
  border-radius: 0;
  padding: 0; /* Let tab-content handle padding */
}
.service-panel {
  font-size: 0.8em;
}
/* Add this to your styles_2col.css */
.menu-image {
  max-width: 100%; /* Ensures the image never overflows its parent container */
  height: auto;    /* Maintains the image's aspect ratio */
  display: block;  /* Removes extra space below the image, useful if it's the only content */
  margin: 0 auto;  /* Centers the image if its width is less than 100% of the container */
  object-fit: contain; /* Ensures the whole image is visible within its boundaries without cropping */
  /* You might add some padding or border if desired */
  padding: 10px;
  box-sizing: border-box; /* Ensures padding doesn't push the image out of max-width */
}

/* Ensure the log pre element within the tab takes available space */
#log {
    flex-grow: 1;
    margin-top: 10px; /* Space between log settings and log */
}

/* Adjust the height of events-log to fit within its tab */
#events-log {
    flex-grow: 1;
}

#about-panel {
  text-align: justify;
}