:root{--bg-color: #f8fafc;--primary: #3b82f6;--secondary: #e11d48;--text: #1e293b;--bubble-me: #3b82f6;--bubble-them: #e2e8f0;--text-me: #ffffff;--text-them: #1e293b;--header-height: 60px;--popover-z-index: 1050;--backdrop-z-index: 1040;--toast-z-index: 1100}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:Inter,sans-serif;background-color:var(--bg-color);color:var(--text);display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;margin:0}header{background:#fff;padding:1rem;display:flex;align-items:center;box-shadow:0 1px 3px #0000000d;z-index:10;height:var(--header-height);position:sticky;top:0}h1{font-size:1.1rem;font-weight:600;flex-grow:1;text-align:center}#back-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;padding-right:1rem}main{flex-grow:1;padding:1.5rem}.hidden{display:none!important}.welcome-text{text-align:center;margin-bottom:2rem;color:#64748b}.user-cards{display:flex;gap:1rem;justify-content:center}.user-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:2rem;width:45%;display:flex;flex-direction:column;align-items:center;gap:1rem;cursor:pointer;transition:transform .1s}.user-card:active{transform:scale(.98)}.avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:700}.avatar.sam{background-color:var(--primary)}.avatar.rachel{background-color:var(--secondary)}.scenario-item{background:#fff;padding:1.25rem;border-radius:1rem;margin-bottom:1rem;border:1px solid #e2e8f0;cursor:pointer}.scenario-title{font-weight:600;margin-bottom:.25rem}.scenario-desc{font-size:.875rem;color:#64748b}#chat-container{display:flex;flex-direction:column;gap:1rem;padding-bottom:2rem}.bubble-row{display:flex;flex-direction:column;max-width:85%}.bubble-row.me{align-self:flex-end;align-items:flex-end}.bubble-row.them{align-self:flex-start;align-items:flex-start}.bubble-content{display:flex;align-items:center;gap:.5rem}.bubble-row.me .bubble-content{flex-direction:row-reverse}.bubble-row.them .bubble-content{flex-direction:row}.bubble{padding:.75rem 1rem;border-radius:1.25rem;font-size:1rem;line-height:1.4;box-shadow:0 1px 2px #0000000d}.me .bubble{background-color:var(--bubble-me);color:var(--text-me);border-bottom-right-radius:.25rem}.them .bubble{background-color:var(--bubble-them);color:var(--text-them);border-bottom-left-radius:.25rem;cursor:pointer}.them .bubble.blurred{color:transparent;text-shadow:0 0 8px rgba(0,0,0,.3);-webkit-user-select:none;user-select:none}.them .bubble.blurred .verb-clickable{color:transparent;text-shadow:0 0 8px rgba(0,0,0,.3);border-bottom-color:transparent}.speaker-label{font-size:.75rem;color:#94a3b8;margin-bottom:.25rem;margin-left:.5rem}.me .speaker-label{display:none}.translation{font-size:.75rem;margin-top:.25rem;opacity:.8;font-style:italic;display:none}.bubble.show-translation .translation{display:block}.tts-button{background:#3b82f626;border:none;border-radius:50%;width:36px;height:36px;min-width:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;padding:0;transition:all .2s}.bubble-row.them .tts-button{background:#00000014}.tts-button:hover{background:#3b82f640;transform:scale(1.05)}.bubble-row.them .tts-button:hover{background:#00000026}.tts-button:active{transform:scale(.95)}.tts-button.playing{background:#3b82f64d}.bubble-row.them .tts-button.playing{background:#0003}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#1e293b;color:#fff;padding:1rem 1.5rem;border-radius:.75rem;box-shadow:0 4px 12px #0000004d;z-index:var(--toast-z-index);max-width:90%;text-align:center;font-size:.875rem;line-height:1.4;animation:slideUp .3s ease-out}.toast.warning{background:#f59e0b;color:#1e293b}.toast.error{background:#ef4444;color:#fff}@keyframes slideUp{0%{transform:translate(-50%) translateY(100px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.verb-clickable{cursor:pointer;border-bottom:2px dotted rgba(59,130,246,.4);padding-bottom:1px;transition:all .2s;display:inline-block;position:relative}.verb-clickable:hover{border-bottom-color:#3b82f6cc;color:#3b82f6}.me .bubble .verb-clickable{border-bottom-color:#fff9}.me .bubble .verb-clickable:hover{border-bottom-color:#ffffffe6;color:inherit}.verb-clickable.verb-active{border-bottom-color:#3b82f6;border-bottom-style:solid;background-color:#3b82f61a;padding:0 3px;margin:0 -3px;border-radius:3px}.me .bubble .verb-clickable.verb-active{background-color:#ffffff40;border-bottom-color:#ffffffe6}.verb-popover{position:fixed;z-index:var(--popover-z-index);background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026,0 0 0 1px #0000000d;max-width:400px;width:90vw;max-height:60vh;overflow-y:auto;animation:popoverSlideIn .2s ease-out;user-select:none;-webkit-user-select:none;-webkit-overflow-scrolling:touch;overflow-x:hidden}@keyframes popoverSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.verb-popover.popover-above{animation:popoverSlideInAbove .2s ease-out}@keyframes popoverSlideInAbove{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.verb-popover-header{padding:.75rem 1rem;border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:12px 12px 0 0;position:sticky;top:0;z-index:1}.verb-popover-close{position:absolute;top:.75rem;right:.75rem;background:#0000000d;border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.5rem;line-height:1;color:#64748b;transition:all .2s}.verb-popover-close:hover{background:#0000001a;color:#1e293b;transform:scale(1.1)}.verb-popover-close:active{transform:scale(.95)}.verb-infinitive{font-size:1.25rem;font-weight:600;color:#1e293b;margin-bottom:.25rem;padding-right:2rem}.verb-translation{font-size:.875rem;color:#64748b;font-style:italic}.verb-conjugation-tables{padding:.75rem}.verb-tense-section{margin-bottom:1rem}.verb-tense-section:last-child{margin-bottom:0}.verb-tense-label{font-size:.75rem;font-weight:600;text-transform:uppercase;color:#3b82f6;letter-spacing:.05em;margin-bottom:.5rem;padding:0 .5rem}.verb-forms{background:#f8fafc;border-radius:8px;padding:.5rem}.verb-form-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem .5rem;border-radius:4px;transition:background .15s}.verb-form-row:hover{background:#3b82f60d}.verb-form-row.current-form{background:#3b82f626;font-weight:600}.verb-person{font-size:.875rem;color:#64748b;min-width:80px}.verb-form{font-size:.875rem;color:#1e293b;text-align:right}.verb-form-row.current-form .verb-form{color:#3b82f6}.verb-popover::-webkit-scrollbar{width:8px}.verb-popover::-webkit-scrollbar-track{background:#f1f5f9;border-radius:0 12px 12px 0}.verb-popover::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.verb-popover::-webkit-scrollbar-thumb:hover{background:#94a3b8}.verb-popover-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#0003;z-index:var(--backdrop-z-index);display:none;animation:fadeIn .2s ease-out}.verb-popover-backdrop.visible{display:block}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.show-voices-button{margin-top:2rem;padding:.75rem 1.5rem;background:#fff;border:2px solid #e2e8f0;border-radius:.75rem;color:#64748b;font-size:.875rem;cursor:pointer;transition:all .2s;display:block;margin-left:auto;margin-right:auto}.show-voices-button:hover{border-color:#cbd5e1;background:#f8fafc;color:#475569}.show-voices-button:active{transform:scale(.98)}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;padding:1rem;animation:fadeIn .2s ease-out}.modal-content{background:#fff;border-radius:1rem;max-width:600px;width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}.modal-header h2{font-size:1.25rem;font-weight:600;color:#1e293b;margin:0}.close-modal{background:#0000000d;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.75rem;line-height:1;color:#64748b;transition:all .2s}.close-modal:hover{background:#0000001a;color:#1e293b}.close-modal:active{transform:scale(.95)}.modal-body{padding:1.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.voice-summary{background:#f8fafc;padding:1rem;border-radius:.5rem;margin-bottom:1.5rem;border:1px solid #e2e8f0}.voice-summary-title{font-size:.875rem;font-weight:600;color:#1e293b;margin-bottom:.5rem}.voice-summary-stat{font-size:.875rem;color:#64748b;margin-bottom:.25rem}.voice-summary-stat strong{color:#1e293b}.voice-section{margin-bottom:1.5rem}.voice-section:last-child{margin-bottom:0}.voice-section-title{font-size:.875rem;font-weight:600;text-transform:uppercase;color:#3b82f6;letter-spacing:.05em;margin-bottom:.75rem}.voice-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;padding:.75rem 1rem;margin-bottom:.5rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.voice-item:last-child{margin-bottom:0}.voice-info{flex-grow:1}.voice-name{font-size:.875rem;font-weight:600;color:#1e293b;margin-bottom:.25rem}.voice-details{font-size:.75rem;color:#64748b;display:flex;flex-wrap:wrap;gap:.5rem}.voice-detail-tag{background:#fff;padding:.125rem .5rem;border-radius:.25rem;border:1px solid #e2e8f0}.voice-test-btn{background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:.5rem;padding:.5rem .75rem;color:#3b82f6;font-size:.75rem;cursor:pointer;transition:all .2s;white-space:nowrap}.voice-test-btn:hover{background:#3b82f633;border-color:#3b82f680}.voice-test-btn:active{transform:scale(.95)}.voice-test-btn.playing{background:#3b82f64d;border-color:#3b82f699}.gender-indicator{display:inline-block;padding:.125rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:600}.gender-indicator.male{background:#3b82f61a;color:#3b82f6}.gender-indicator.female{background:#e11d481a;color:#e11d48}.gender-indicator.neutral{background:#64748b1a;color:#64748b}@media (max-width: 640px){.verb-popover{max-width:calc(100vw - 20px);font-size:.9rem;max-height:60vh}.verb-infinitive{font-size:1.25rem}.verb-form-row{padding:.5rem}.verb-popover-backdrop.visible{display:block}#chat-container{padding-bottom:3rem}.modal-content{max-height:90vh}.voice-item{flex-direction:column;align-items:stretch}.voice-test-btn{align-self:flex-start}}