/* styles.css */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
textarea:focus {
  outline: none;
  border: 1px solid #007bff;
}
.d-flex{
  display: flex !important;
}
.flex-1{
  flex: 1;
}
.justify-between{
  justify-content: space-between;
}
.txt-red{
  color: red;
}
.txt-green{
  color: green;
}
.btn{
  width:fit-content
}
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 10px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative; /* Ensure container is the positioning context */
}

.upload-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.ps p{
  font-size: 12px;
  margin-bottom: 4px;
}
.ps p u{
  margin: 0 2px;
}
.title{
  font-style: oblique;
}
#input-text {
  height: 100px;
  padding: 6px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 18px;
  /* border: 1px solid #ccc; */
  resize: vertical;
}

button {
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.compare-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.compare-section > div {
  width: 48%;
}

#original-text, #split-text {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  min-height: 100px;
  position: relative; /* For positioning pseudo-elements */
  overflow: hidden; /* Ensure pseudo-elements do not overflow the container */
}


/* Floating controls at the bottom */
.controls.floating-controls {
  width: 320px;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  
}

.controls.floating-controls button {
  background-color: rgba(0, 132, 255, 0.5);
  color: #fff;
}

/* Pseudo-element styles for highlighting */
span.green-highlight {
  position: relative;
  z-index: 1;
}

span.green-highlight {
  border: 2px solid lightgreen;
}

.highlight-container{
 display: initial; 
 line-height: 2;
 position: relative;
}
.highlight-container.red-highlight {
  border: 2px solid red;
  padding: 4px 0;
}
 /* {
  border: 2px solid lightcoral;
} */

/* Change selection color to pink */
::selection {
  background: pink;
}
.gray-text {
  color: gray;
}
.by{
  font-size: 14px;
  text-align: center;
}

.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: -80px; /* Initially hidden outside the viewport */
  width: 50px;
  height: 50px;
  background-color: #007bff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: right 0.3s;
  
  animation: donghua 2.4s infinite;
}

.scroll-to-top.show {
  right: 20px; /* Slide into view */
}
@keyframes donghua {
  0% {
      transform: scale(0.80);
      /* 注意rgba中的a的设置 */
      box-shadow: 0 0 0 0 rgb(0, 123, 255,60%)
  }

  60% {
      transform: scale(1);
      box-shadow: 0 0 0 16px rgba(204, 73, 152, 0%);
  }

  100% {
      transform: scale(0.80);
      box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);
  }
}