/* =========================================
   GIAO DIỆN TEXT TO SPEECH (SOFT NEO-BRUTALISM)
========================================= */
:root {
    --neo-border: 3px solid #111111;
    --neo-shadow: 5px 5px 0px #111111;
    --neo-shadow-hover: 8px 8px 0px #111111;
    --neo-shadow-active: 0px 0px 0px #111111;
    
    --bg-main: #faf9f6;
    --bg-card: #ffffff;
    --clr-primary: #8fb8ed; /* Xanh pastel */
    --clr-success: #b5e48c; /* Xanh mạ pastel */
    --clr-danger:  #ffadad; /* Đỏ pastel */
    --clr-warning: #ffd6a5; /* Cam pastel */
}

.tts-soft-wrapper {
    max-width: 850px; margin: 0 auto;
    font-family: system-ui, -apple-system, sans-serif;
    color: #111; background: var(--bg-main);
    padding: 25px; border: var(--neo-border); border-radius: 16px;
    box-shadow: var(--neo-shadow);
}
.tts-soft-wrapper * { box-sizing: border-box; }

.tts-soft-header {
    background: var(--bg-card); padding: 20px;
    border: var(--neo-border); border-radius: 12px;
    text-align: center; margin-bottom: 25px; box-shadow: var(--neo-shadow);
}
.tts-soft-header h2 { margin: 0 0 10px 0; font-size: 1.8rem; font-weight: 900; text-transform: uppercase;}
.tts-soft-header p { margin: 0; font-weight: 600; font-size: 1rem; color: #444;}

/* Input Area */
.tts-input-section { position: relative; margin-bottom: 25px; }
.box-title { display: block; font-weight: 800; font-size: 1.1rem; margin-bottom: 10px; text-transform: uppercase;}
.neo-textarea {
    width: 100%; height: 200px; padding: 20px;
    font-family: inherit; font-size: 1.1rem; line-height: 1.5; color: #111;
    background: var(--bg-card); border: var(--neo-border); border-radius: 12px;
    box-shadow: inset 4px 4px 0px rgba(0,0,0,0.05); resize: vertical; outline: none;
    transition: all 0.2s;
}
.neo-textarea:focus { border-color: #000; box-shadow: inset 0px 0px 0px, var(--neo-shadow); transform: translate(-2px, -2px);}
.btn-small-float {
    position: absolute; top: 40px; right: 15px;
    background: var(--clr-warning); border: 2px solid #111; border-radius: 8px;
    padding: 6px 12px; font-weight: 800; font-size: 0.8rem; cursor: pointer;
    box-shadow: 2px 2px 0px #111; transition: all 0.15s;
}
.btn-small-float:active { transform: translate(2px, 2px); box-shadow: 0 0 0; }

/* Controls Box */
.tts-controls-box {
    background: var(--bg-card); border: var(--neo-border); border-radius: 12px;
    padding: 25px; box-shadow: var(--neo-shadow); margin-bottom: 25px;
}
.control-group { margin-bottom: 20px; }
.label-title { display: block; font-weight: 800; font-size: 1rem; margin-bottom: 10px;}

.neo-select-wrapper { position: relative; }
.neo-select {
    width: 100%; appearance: none;
    background: #f5f5f5; border: var(--neo-border); border-radius: 8px;
    padding: 14px 20px; font-family: inherit; font-size: 1rem; font-weight: 700;
    cursor: pointer; outline: none; box-shadow: 3px 3px 0px #111; transition: all 0.2s;
}
.neo-select:focus { transform: translate(-2px, -2px); box-shadow: 5px 5px 0px #111; background: #fff;}
.neo-select-wrapper::after {
    content: "▼"; position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%); pointer-events: none; font-size: 1rem;
}

.sliders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.label-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 0.95rem; margin-bottom: 10px;}
.label-row span { background: #eee; border: 2px solid #111; padding: 2px 10px; border-radius: 6px; box-shadow: 2px 2px 0px #111;}

/* Custom Slider Neo-Brutalism */
.neo-slider { -webkit-appearance: none; width: 100%; background: transparent; }
.neo-slider:focus { outline: none; }
.neo-slider::-webkit-slider-runnable-track { width: 100%; height: 12px; background: #eee; border-radius: 6px; border: 2px solid #111; }
.neo-slider::-webkit-slider-thumb { height: 26px; width: 26px; border-radius: 50%; background: var(--clr-primary); border: 3px solid #111; cursor: pointer; -webkit-appearance: none; margin-top: -9px; box-shadow: 2px 2px 0px #111; transition: transform 0.1s;}
.neo-slider::-webkit-slider-thumb:active { transform: scale(1.15); }

/* Buttons */
.tts-action-bar { display: flex; gap: 15px; margin-bottom: 20px;}
.tts-action-bar button {
    padding: 16px; font-family: inherit; font-size: 1.1rem; font-weight: 900; text-transform: uppercase;
    border: var(--neo-border); border-radius: 12px; cursor: pointer;
    box-shadow: var(--neo-shadow); transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.tts-action-bar button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: var(--neo-shadow-active); }
.tts-action-bar button:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(1); box-shadow: none; transform: none;}

.neo-btn-primary { flex: 2; background: var(--clr-success); }
.neo-btn-action { flex: 1; background: var(--clr-warning); }
.neo-btn-danger { flex: 1; background: var(--clr-danger); }

/* Animation Sóng âm thanh */
.tts-status-bar {
    background: #111; color: #fff; padding: 15px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; gap: 15px;
    font-weight: 700; font-size: 1.1rem; border: var(--neo-border);
}
/* CẬP NHẬT TRẠNG THÁI word count */
.neo-word-count {
    margin-left: auto; /* Đẩy sang phải cùng */
    background: #333;
    color: var(--clr-success);
    border: 2px solid #fff;
    padding: 3px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 800;
}
.sound-wave { display: flex; gap: 4px; align-items: center; height: 20px; opacity: 0.3; transition: 0.3s;}
.sound-wave.playing { opacity: 1; }
.sound-wave span { display: block; width: 6px; height: 100%; background: var(--clr-success); border-radius: 3px; animation: bounce 1s infinite ease-in-out; transform-origin: bottom;}
.sound-wave span:nth-child(1) { animation-delay: 0.0s; }
.sound-wave span:nth-child(2) { animation-delay: 0.2s; }
.sound-wave span:nth-child(3) { animation-delay: 0.4s; }
.sound-wave span:nth-child(4) { animation-delay: 0.2s; }
.sound-wave span:nth-child(5) { animation-delay: 0.0s; }

@keyframes bounce { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
/* Khi không phát âm thanh thì tắt animation */
.sound-wave:not(.playing) span { animation: none; transform: scaleY(0.2); }

@media (max-width: 700px) {
    .sliders-grid { grid-template-columns: 1fr; gap: 20px;}
    .tts-action-bar { flex-direction: column; }
}