#transcriptPanelOutlet {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: hidden;
}

.active-transcript-panel {
  /* flex: 0 0 50%; */
  width: 50%;
  /* flex: 0 0 auto; */
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

/* output containers */

.output {
  flex: 1;
  border: none;
  /* height: 100%; */
}

.transcript-button-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  width: 100%;

  margin-bottom: 1rem;
}

.transcript-button-container button,
.transcript-button-container .js-dropdown-container {
  flex: 1;
}

.transcript-controls-container {
  border-bottom: 1px solid var(--grey);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.transcript-output {
  padding: 0.5rem;
  padding-bottom: 3rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: 1em;
  line-height: 1.5;
  color: #333;
  border: none;

  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Custom Notes section */
.custom-note-section {
  display: flex;
  flex-direction: column;
}

.custom-note-section textarea {
  padding: 10px;
}
.custom-note-instructions {
  font-size: 14px;
}

.custom-note-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.custom-note-buttons button {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  background-color: var(--blue);
  color: var(--white);
}

.custom-note-buttons button.btn-clear {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: var(--primaryText);
  padding-left: 0;
}
.custom-note-buttons button.btn-clear:hover {
  text-decoration: underline;
}

.custom-note-header {
  background-color: transparent;
  border: 1px solid var(--grey);
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  user-select: none;
}

.custom-note-header:hover {
  background-color: var(--baseColorHover);
}
.custom-note-header:active {
  background-color: var(--baseColorActive);
}
.custom-note-content {
  border: 1px solid var(--grey);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background-color: var(--lightGrey);
  padding: 1rem;
}

.custom-note-section i.static {
  margin-right: 0.5rem;
}

/* custom instructions toggle */
.custom-note-section.minimized i.dynamic {
  transform: rotate(-180deg);
}

.custom-note-section.minimized .custom-note-content {
  display: none;
}

.custom-note-section.minimized .custom-note-header {
  border-radius: 0.5rem;
}

/* custom notes textbox */
#noteInput {
  width: 100%;
  height: 120px;
  /* resize: none; */
  border: 1px solid var(--grey);
  margin-top: 1rem;
  border-radius: 0.5rem;
}

.transcript-tab-panel {
  padding: 1rem;
  /* padding-bottom: 3rem; */
  display: flex;
  flex-direction: column;
  /* height: 100%; */
  /* height: calc(100vh - 180px - 1rem); */
  height: 100%;
  overflow-y: hidden;
}

#addNoteBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 144px;
  background-color: var(--blue);
  color: var(--primaryTextInverse);
  border: none;
  border-radius: 0.5rem;
}
#addNoteBtn:hover {
  background-color: var(--primaryAccentHover);
}
#addNoteBtn:active {
  background-color: var(--primaryAccentActive);
}

.btn-tab-transcript > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: visible;
}

.beta-badge {
  position: absolute;
  /* POSITIONING LOGIC */
  top: -0.8em !important; /* Moves it up roughly half the text height */
  right: -1rem;
  margin-left: 2px !important; /* Adds a tiny gap between text and badge */

  /* VISUAL STYLING (Pill shape) */
  font-size: 10px !important; /* Make it smaller than the label text */
  font-weight: 700 !important;
  line-height: 1 !important; /* Tighter line height prevents layout shifts */
  /* padding: 2px 4px !important; */
  padding: 0 !important;
  color: var(--primaryAccent) !important;
  white-space: nowrap !important; /* Prevents the badge from squishing */
  pointer-events: none !important ; /* Optional: clicks pass through to the button */
}

@media (max-width: 768px) {
  /* Notes input field */
  #noteInput {
    width: 100%;
    max-width: 100%;
    padding: 15px;
    min-height: 150px;
    border-radius: 8px;
    border: 1px solid #ddd;
    resize: vertical;
    margin: 0;
    margin-top: 1rem;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 80px;
    min-height: 80px;
  }

  .custom-note-section {
    width: 100%;
    margin: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }

  /* Buttons container */
  .transcript-button-container {
    gap: 10px;

    flex-wrap: nowrap;
    justify-content: space-between;

    transition: none;
    animation: none;
    -webkit-transition: none;
    -webkit-animation: none;
    will-change: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    visibility: visible;

    overflow: visible;
    contain: none;
    content-visibility: visible;
  }

  .transcript-output {
    max-height: 360px;
  }
}