/* Transcription engine UI: options row, speaker labels. Loaded by /app/ and /app/upload/. */
.engine-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  margin: 14px 0 4px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.engine-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.engine-options select {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: white;
  color: var(--text-primary);
  max-width: 100%;
}

.engine-options .engine-note {
  flex-basis: 100%;
  font-size: 0.85rem;
}

.speaker-chip {
  display: inline-block;
  margin-right: 8px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  vertical-align: baseline;
}

.speaker-chip:hover,
.speaker-chip:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.spk-0 { background: #E6F4EA; color: #1E6B2E; }
.spk-1 { background: #E3EEFB; color: #1F4E8C; }
.spk-2 { background: #FDEBDD; color: #8A4513; }
.spk-3 { background: #F1E6F7; color: #66307F; }
.spk-4 { background: #FDE7EA; color: #962334; }
.spk-5 { background: #E2F4F4; color: #1D6464; }
.spk-6 { background: #F4F1DE; color: #6B5D12; }
.spk-7 { background: #ECECEC; color: #3D3D3D; }

.basil-line .transcript-text {
  overflow-wrap: anywhere;
}

.engine-options [hidden] {
  display: none;
}