*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:system-ui,sans-serif;color:#1e293b;line-height:1.6}#root{min-height:100vh}.container{max-width:640px;margin:0 auto;display:flex;flex-direction:column;height:100vh}.header{padding:1rem 1.5rem;border-bottom:1px solid #e2e8f0}.header h1{font-size:1.5rem;font-weight:700}.controls{display:flex;gap:.5rem;padding:.75rem 1.5rem;border-bottom:1px solid #e2e8f0}.controls button{padding:.5rem 1rem;border:1px solid #e2e8f0;border-radius:.5rem;background:#fff;font-size:.875rem;cursor:pointer;transition:background-color .15s}.controls button:hover{background:#f1f5f9}.controls button:disabled{opacity:.4;cursor:not-allowed}.chat{flex:1;overflow-y:auto;padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.75rem}.bubble{max-width:80%;padding:.75rem 1rem;border-radius:1rem;cursor:pointer;transition:box-shadow .15s}.bubble:hover{box-shadow:0 2px 8px #0000001a}.bubble-a{align-self:flex-start;background:#dbeafe;border-bottom-left-radius:.25rem}.bubble-b{align-self:flex-end;background:#dcfce7;border-bottom-right-radius:.25rem}.bubble-active{box-shadow:0 0 0 2px #3b82f6,0 2px 8px #3b82f64d}.speaker-name{font-size:.75rem;font-weight:700;margin-bottom:.25rem;color:#475569}.bubble-text{font-size:.9375rem}.loading{text-align:center;padding:2rem;color:#64748b}