body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{margin:0;padding:0;box-sizing:border-box}#root{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2)}.call-container{width:100%;max-width:400px;height:100vh;max-height:700px;background:#f5f5f5;border-radius:20px;box-shadow:0 10px 40px #0003;display:flex;flex-direction:column;overflow:hidden}.call-header{padding:20px;background:#fff;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:10px;min-height:70px}.call-indicator{width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,#4a90e2,#2e5c8a);animation:pulse 2s ease-in-out infinite;box-shadow:0 0 20px #4a90e24d}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}.call-time{font-size:16px;color:#333;font-weight:500}.connect-btn{padding:12px 24px;background:#4a90e2;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s}.connect-btn:hover{background:#357abd;transform:translateY(-2px);box-shadow:0 4px 12px #4a90e24d}.controls{flex:1;display:flex;align-items:center;justify-content:center;gap:30px;padding:40px 20px}.control-btn{width:64px;height:64px;border-radius:50%;border:none;background:#fff;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000001a;transition:all .3s}.control-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #00000026}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.muted{background:#f5f5f5;color:#999}.end-call-btn{width:72px;height:72px;background:#ff3b30;color:#fff}.end-call-btn:hover:not(:disabled){background:#e02d22}.transcripts-section{background:#fff;border-top:1px solid #e0e0e0;padding:16px;display:flex;flex-direction:column;min-height:200px;max-height:300px}.transcripts-title{font-size:14px;color:#4a90e2;margin-bottom:12px;display:flex;align-items:center;gap:8px}.transcripts-title:before{content:"";width:20px;height:20px;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234A90E2" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>');background-size:contain}.transcripts-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.no-transcripts{color:#999;font-size:14px;text-align:center;padding:20px}.transcript-message{padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.4;max-width:85%;word-wrap:break-word}.transcript-message.user{background:#4a90e2;color:#fff;align-self:flex-end;margin-left:auto}.transcript-message.agent{background:#f0f0f0;color:#333;align-self:flex-start}.transcripts-container::-webkit-scrollbar{width:6px}.transcripts-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.transcripts-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.transcripts-container::-webkit-scrollbar-thumb:hover{background:#a1a1a1}@media(max-width:500px){.call-container{max-width:100%;border-radius:0}}