fix & feat: resolve user reports #1 through #8 (TTS voice & speed, modals, scrollbar, CEFR hint, SRS grammar exclusion, global word lookup)

app/static/css/components.css

@@ -347,6 +347,25 @@
     will-change: transform;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-color) transparent;
+}
+
+.app-drawer::-webkit-scrollbar {
+    width: 6px;
+}
+
+.app-drawer::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.app-drawer::-webkit-scrollbar-thumb {
+    background-color: var(--border-color);
+    border-radius: 9999px;
+}
+
+.app-drawer::-webkit-scrollbar-thumb:hover {
+    background-color: var(--text-muted);
 }
 
 .app-drawer.active {
@@ -684,9 +703,11 @@ body.drawer-open {
     border-radius: var(--radius-lg);
     width: 100%;
     max-width: 520px;
+    max-height: min(90vh, 90dvh);
     box-shadow: var(--shadow-lg);
     display: flex;
     flex-direction: column;
+    overflow: hidden;
 }
 
 .modal-header {
@@ -695,6 +716,7 @@ body.drawer-open {
     align-items: center;
     padding: 16px 20px;
     border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
 }
 
 .modal-header h3 {
@@ -707,6 +729,19 @@ body.drawer-open {
     display: flex;
     flex-direction: column;
     gap: 14px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-color) transparent;
+}
+
+.modal-body::-webkit-scrollbar {
+    width: 6px;
+}
+
+.modal-body::-webkit-scrollbar-thumb {
+    background-color: var(--border-color);
+    border-radius: 9999px;
 }
 
 .modal-footer {
@@ -715,12 +750,44 @@ body.drawer-open {
     gap: 10px;
     padding: 14px 20px;
     border-top: 1px solid var(--border-color);
+    flex-shrink: 0;
 }
 
 .modal-sm {
     max-width: 420px;
 }
 
+/* Audio Control Group & Slow Speed Controls */
+.audio-ctrl-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    vertical-align: middle;
+}
+
+.audio-slow-btn {
+    font-size: 11px !important;
+    font-weight: 600;
+    padding: 2px 7px !important;
+    height: 24px;
+    line-height: 1;
+    border-radius: 4px;
+    background: var(--bg-hover);
+    border: 1px solid var(--border-color);
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+}
+
+.audio-slow-btn:hover {
+    background: var(--bg-surface-elevated);
+    color: var(--text-main);
+    border-color: var(--primary);
+}
+
 /* Navigation Additions */
 .nav-center {
     display: flex;