/* 麦克风按钮样式 */
#voice-assistant {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
}

#voiceAssistantButton {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #764ba2;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
}

#transcriptResult {
    margin-left: 10px;
    color: white;
    font-size: 16px;
    max-width: 200px;
    word-wrap: break-word;
}

/* 添加背景色和边框 */
.transcript-bg {
    background-color: #764ba2;
    padding: 5px 10px;
    border-radius: 5px;
    margin-left: 10px;
}

/* 录音倒计时动画 */
#voiceAssistantButton.recording {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

#transcriptResult:empty {
    display: none;
}




 body {
     height: 100vh;
     display: flex;
     flex-direction: column;
     /*background: linear-gradient(135deg, #667eea, #764ba2);*/
     color: #fff;
     background-color: #60515a;
     z-index: -1;
     transition: background-color 0.5s ease;
     /* 0.5秒的背景颜色过渡效果 */
 }
 .blur-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #6c87ff, #932aff);
     background-size: cover;
     z-index: 2;
 }
 /* 添加遮罩效果 */

 .blur-background-after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.3);
     z-index: 1;
 }
 body::-webkit-scrollbar {
     display: none;
     /* For Chrome, Safari, and Opera */
 }
 .song-title {
     width: 240px;
     /* Adjust the width as needed */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 .content {
     position: relative;
     z-index: 100;
     /* 确保内容在最上层 */
     flex: 1;
     display: flex;
 }
 .right-panel {
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     overflow: hidden;
     max-height: calc(100vh - 130px);
 }
 .left-panel {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     overflow: hidden;
     max-height: calc(100vh - 130px);
 }
 .left-panel {
     width: 30%;
     padding: 15px 0;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     /*      border-radius: 15px;*/
     box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
 }
 /* Hide the scrollbar but allow scrolling */

 .left-panel {
     overflow-y: auto;
 }
 /* Custom scrollbar track */

 .left-panel::-webkit-scrollbar-track {
     background-color: transparent;
     /* Makes the track transparent */
     border-radius: 10px;
 }
 /* Custom scrollbar handle */

 .left-panel::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.2);
     /* Semi-transparent black */
     border-radius: 10px;
 }
 /* Removes default buttons at the top and bottom of the scrollbar */

 .left-panel::-webkit-scrollbar-button {
     display: none;
 }
 /* Set the size of the scrollbar */

 .left-panel::-webkit-scrollbar {
     width: 8px;
     /* Adjust the width to make the scrollbar thinner */
 }
 .left-panel {
     scrollbar-width: thin;
     /* Makes the scrollbar "thin" */
     scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
     /* Sets the handle color and track color */
 }
 .right-panel {
     width: 70%;
     padding: 15px;
 }
 .song-item {
     background: transparent;
     border-radius: 5px;
     padding: 15px;
     display: flex;
     align-items: center;
     margin-bottom: 10px;
     transition: background 0.3s ease, transform 0.2s ease;
     cursor: pointer;
 }
 .song-item:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-5px);
 }
 .song-item img {
     width: 50px;
     height: 50px;
     object-fit: cover;
     border-radius: px;
     margin-right: 10px;
 }
 .left-panel-title {
     padding: 0 15px;
 }
 .song-item .song-info h6 {
     margin-bottom: 5px;
 }
 .playing-module {
     position: relative;
     z-index: 100;
     /* 确保内容在最上层 */
     background: rgba(0, 0, 0, 0.3);
     color: #fff;
     padding: 30px 40px 40px 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* border-radius: 10px; */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
 .playing-module .btn {
     padding: 10px 20px;
     /* Increase padding to make the button larger */
     font-size: 1.5rem;
     /* Increase font size for larger icons */
     border-radius: 5px;
     /* Optional: Adjust the border-radius for rounded corners */
 }
 .playing-module .btn i {
     margin-right: 5px;
     /* Adds some space between icon and text if there's text inside the button */
 }
 .progress-bar {
     background: linear-gradient(to right, #764ba2, #667eea);
 }
 .btn-outline-light {
     border-color: #fff;
 }
 .btn-outline-light:hover {
     background: #fff;
     color: #764ba2;
 }
 #lyricsContent {
     overflow-y: scroll;
     height: 100%;
     /* Adjust based on your layout */
     text-align: center;
     scrollbar-width: none;
     /* For Firefox */
     -ms-overflow-style: none;
     /* For Internet Explorer and Edge */
 }
 #lyricsContent::-webkit-scrollbar {
     display: none;
     /* For Chrome, Safari, and Opera */
 }
 .lyric-line {
     opacity: 0.8;
     color: #CCC;
     padding: 5px 0;
     font-size: 24pt;
 }
 .current {
     opacity: 1.0;
     font-weight: bold;
     font-size: 28pt;
     color: #FFF;
     /* White color for the active line */
 }
 /* Additional CSS to initially position the first line in the middle */

 #lyricsContent::before {
     /*    content: '';*/
     display: block;
     height: 50%;
     /* Pushes the first line to the middle */
     margin-bottom: -18px;
     /* Adjust based on your font-size to align text baseline */
 }
 .current-song {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-5px);
 }