*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#f0f4f8,#e8f0f7);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:0}.container{background:#fff;border-radius:16px;box-shadow:0 10px 40px #00000014;width:100%;max-width:98%;max-height:100vh;padding:70px 60px;border:1px solid #f0f4f8;display:flex;flex-direction:column}h1{text-align:center;color:#0f172a;margin-bottom:20px;font-size:2.2em;font-weight:700;letter-spacing:-.5px}.status{display:none;text-align:center;padding:20px 24px;border-radius:12px;margin-bottom:35px;font-weight:600;font-size:1em;transition:all .3s ease;letter-spacing:.3px}.status.disconnected{background:linear-gradient(135deg,#f5e6e8,#f0dfe2);color:#7c2d2d;border:1px solid #e5b8bc}.status.connected{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46;border:1px solid #86efac}.status.searching{background:linear-gradient(135deg,#fef9e7,#fef3c7);color:#78350f;border:1px solid #fcd34d;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.controls{text-align:center;margin-bottom:40px}.controls button{background:linear-gradient(135deg,#1e293b,#0f172a);color:#fff;border:1px solid #334155;padding:16px 48px;font-size:1.05em;border-radius:10px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0f172a40;font-weight:600;letter-spacing:.3px}.controls button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #47556966;background:linear-gradient(135deg,#64748b,#475569)}.controls button:active{transform:translateY(0)}.controls button.btn-stop{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 5px 15px #dc26264d;border:1px solid #ef4444}.controls button.btn-stop:hover{box-shadow:0 8px 20px #dc262666;background:linear-gradient(135deg,#ef4444,#dc2626)}.visualizers-container{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-bottom:60px;margin-top:30px}.visualizer-section{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0;background:transparent;border-radius:0;border:none}.visualizer-section:last-child{order:-1}.visualizer-label{font-weight:700;font-size:.95em;color:#0f172a;text-transform:uppercase;letter-spacing:1px;opacity:.8;margin-bottom:8px}.audio-visualizer{display:flex;justify-content:center;align-items:center;height:80px;gap:5px;padding:0;transition:all .3s ease}.bar{width:5px;border-radius:2.5px;transition:height .1s ease}.user-bar{background:linear-gradient(to top,#3b82f6,#60a5fa);box-shadow:0 0 8px #3b82f666}.assistant-bar{background:linear-gradient(to top,#f29a30,#f5b455);box-shadow:0 0 8px #f29a3066}.transcripts{background:#f8fafc;border-radius:12px;padding:30px;max-height:450px;overflow-y:auto;margin-bottom:20px;border:1px solid #e2e8f0}.transcript-item{margin-bottom:20px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.transcript-item.user{text-align:right}.transcript-label{font-weight:600;font-size:.9em;margin-bottom:5px;opacity:.7}.transcript-item.user .transcript-label{color:#475569}.transcript-item.assistant .transcript-label{color:#64748b}.transcript-text{background:#fff;padding:14px 18px;border-radius:12px;display:inline-block;max-width:80%;box-shadow:0 2px 4px #00000014;line-height:1.6;word-wrap:break-word;color:#1e293b;border:1px solid #e2e8f0}.transcript-item.user .transcript-text{background:linear-gradient(135deg,#1e293b,#0f172a);color:#fff;border:1px solid #334155}.no-transcripts{text-align:center;color:#94a3b8;font-style:italic;padding:50px 20px;font-size:.95em}.error{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#7c2d2d;padding:18px 20px;border-radius:12px;margin-bottom:20px;text-align:center;animation:shake .5s ease;border:1px solid #fca5a5;font-weight:500}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.transcripts::-webkit-scrollbar{width:8px}.transcripts::-webkit-scrollbar-track{background:#f1f5f9;border-radius:10px}.transcripts::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#94a3b8,#64748b);border-radius:10px}.transcripts::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#cbd5e1,#94a3b8)}.transcript-text strong{font-weight:700;color:inherit}.transcript-text .markdown-list{margin:10px 0;padding-left:20px;list-style-position:outside}.transcript-text .markdown-list li{margin:8px 0;line-height:1.6;padding-left:5px}.transcript-text p{margin:8px 0;line-height:1.6}.transcript-text p:first-child{margin-top:0}.transcript-text p:last-child{margin-bottom:0}@media (max-width: 768px){.container{padding:30px 20px;border-radius:12px}h1{font-size:1.8em;margin-bottom:25px}.controls{margin-bottom:30px}.controls button{padding:14px 40px;font-size:1em}.visualizers-container{grid-template-columns:1fr;gap:30px;margin-bottom:35px}.visualizer-section{padding:15px}.audio-visualizer{height:70px}.bar{width:4px;gap:3px}.transcripts{max-height:300px;padding:20px}.transcript-text{max-width:90%;padding:12px 16px}}