Update app.py

app.py

@@ -531,57 +531,102 @@ textarea, input, .gr-textbox, .gr-textbox * {
   background-color: #62A34B;
 }
 
-/* ===== MUSIC CORE ===== */
+/* ===== MUSIC WRAP: BCE card altına konacaksa FIXED'i kaldır ===== */
 .pb-music-wrap{
-  position:fixed;
-  right:14px;
-  bottom:14px;
-  z-index:9999;
-  width:min(360px, 92vw);
-  background:rgba(0,0,0,0.75);
-  border: 1px solid var(--terminal-glow);
-  border-radius:14px;
-  padding:10px 12px;
-  box-shadow: 0 0 10px var(--terminal-glow);
-  backdrop-filter: blur(6px);
-  overflow-x: hidden;
-  overflow-y: hidden;
-  font-family: var(--terminal-font);
+  margin-top: 12px;
+  background: rgba(0,0,0,0.80);
+  border: 1px solid rgba(0,255,65,0.55);
+  border-radius: 14px;
+  padding: 10px 12px;
+  box-shadow: 0 0 12px rgba(0,255,65,0.18), 0 0 22px rgba(0,255,65,0.10) inset;
+  overflow: hidden !important;     /* dış scroll yok */
 }
-.pb-music-title{ color:#d9ffe0; margin:0 0 6px 0; font-size:0.95rem; letter-spacing:0.06em; font-family: var(--terminal-font);}
-.pb-music-wrap a{ color:#9affc0; text-decoration:none; font-family: var(--terminal-font);}
-.pb-music-wrap a:hover{ text-decoration:underline; font-family: var(--terminal-font);}
 
-/* === AUDIO PLAYER NEON SCROLL === */
+/* Gradio Audio (waveform) wrapper’ları */
+.pb-audio,
+.pb-audio *{
+  font-family: var(--terminal-font) !important;
+}
 
-.pb-audio audio{
-  filter: hue-rotate(85deg) saturate(1.2) brightness(1.05);
+/* asıl component wrapper */
+.pb-audio .component-wrapper[data-testid="waveform-Audio"]{
+  background: transparent !important;
+  overflow: hidden !important;     /* iç scroll yok */
 }
 
-/* WebKit timeline */
-.pb-audio audio::-webkit-media-controls-timeline{
-  height:4px;
-  background:rgba(0,255,65,0.15);
-  border-radius:999px;
-  box-shadow:0 0 6px rgba(0,255,65,0.35);
+/* waveform alanı */
+.pb-audio .waveform-container{
+  border-radius: 12px;
+  border: 1px solid rgba(0,255,65,0.35);
+  background: rgba(0,0,0,0.55);
+  overflow: hidden !important;
+  box-shadow: 0 0 10px rgba(0,255,65,0.12) inset;
+}
+
+/* #waveform canvas/div */
+.pb-audio #waveform{
+  filter: hue-rotate(85deg) saturate(1.25) brightness(1.08);
 }
 
-/* time display */
-.pb-audio audio::-webkit-media-controls-current-time-display,
-.pb-audio audio::-webkit-media-controls-time-remaining-display{
-  color:#9affc0;
-  font-family:'VT323', monospace;
-  text-shadow:0 0 4px rgba(0,255,65,0.6);
+/* timestamps */
+.pb-audio .timestamps{
+  margin-top: 6px;
+  color: #9affc0 !important;
+  text-shadow: 0 0 6px rgba(0,255,65,0.35);
+}
+.pb-audio .timestamps time{
+  color: #9affc0 !important;
+  font-size: 0.95rem;
 }
 
-/* thumb — NOT: bu selector bazı tarayıcılarda çalışmıyor */
-.pb-audio audio::-webkit-slider-thumb{
-  appearance:none;
-  width:10px;
-  height:10px;
-  background:#00ff41;
-  border-radius:50%;
-  box-shadow:0 0 6px rgba(0,255,65,0.9), 0 0 12px rgba(0,255,65,0.6);
+/* Controls bar */
+.pb-audio .controls{
+  margin-top: 8px;
+  padding: 8px 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(0,255,65,0.35);
+  background: rgba(0,0,0,0.60);
+  overflow: hidden !important;
+}
+
+/* Buttons (neon terminal) */
+.pb-audio button{
+  border-radius: 12px !important;
+  border: 1px solid rgba(0,255,65,0.55) !important;
+  background: rgba(0,0,0,0.65) !important;
+  color: var(--terminal-fg) !important;
+  box-shadow: 0 0 10px rgba(0,255,65,0.18);
+}
+.pb-audio button:hover{
+  box-shadow: 0 0 14px rgba(0,255,65,0.28), 0 0 18px rgba(0,255,65,0.16) inset;
+}
+.pb-audio button:active{
+  transform: translateY(1px);
+}
+
+/* Play/Pause’u öne çıkar */
+.pb-audio .play-pause-button{
+  border: 1px solid rgba(0,255,65,0.85) !important;
+  box-shadow: 0 0 16px rgba(0,255,65,0.28), 0 0 22px rgba(0,255,65,0.15) inset;
+}
+
+/* Speed button (1x) */
+.pb-audio .playback span{
+  color: #d9ffe0 !important;
+  text-shadow: 0 0 6px rgba(0,255,65,0.25);
+}
+
+/* Scroll tamamen kapansın (bu komponent bazen overflow üretir) */
+.pb-audio .component-wrapper,
+.pb-audio .controls,
+.pb-audio .waveform-container{
+  scrollbar-width: none;
+}
+.pb-audio .component-wrapper::-webkit-scrollbar,
+.pb-audio .controls::-webkit-scrollbar,
+.pb-audio .waveform-container::-webkit-scrollbar{
+  width: 0 !important;
+  height: 0 !important;
 }
 </style>
 """