:root{--bg-color: #f8fafc;--primary: #3b82f6;--secondary: #e11d48;--text: #1e293b;--bubble-me: #3b82f6;--bubble-them: #e2e8f0;--text-me: #ffffff;--text-them: #1e293b}*{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);height:100vh;display:flex;flex-direction:column}header{background:#fff;padding:1rem;display:flex;align-items:center;box-shadow:0 1px 3px #0000000d;z-index:10;height:60px}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;overflow-y:auto}.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}.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}.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:1000;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}}