.websocket-chat{display:flex;flex-direction:column;height:100vh;max-width:800px;margin:0 auto;border:1px solid #ddd;border-radius:8px;overflow:hidden}.chat-header{background:#f8f9fa;padding:1rem;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.chat-header h2{margin:0;color:#333}.status-indicators{display:flex;gap:1rem}.status{font-size:.9rem;padding:.25rem .5rem;border-radius:4px;background:#e9ecef}.status.connected{background:#d1edff;color:#0d6efd}.status.authenticated{background:#d4edda;color:#155724}.messages-container{flex:1;overflow-y:auto;padding:1rem;background:#fff}.message{margin-bottom:1rem;display:flex;flex-direction:column}.user-message{align-items:flex-end}.ai-message{align-items:flex-start}.message-content{max-width:70%;padding:.75rem 1rem;border-radius:12px;position:relative;word-wrap:break-word}.user-message .message-content{background:#007bff;color:#fff;border-bottom-right-radius:4px}.ai-message .message-content{background:#f8f9fa;color:#333;border:1px solid #dee2e6;border-bottom-left-radius:4px}.message-text{margin:0;white-space:pre-wrap;font-family:inherit}.streaming-indicator{animation:blink 1s infinite;color:#007bff;font-weight:700}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.message-timestamp{font-size:.75rem;color:#6c757d;margin-top:.25rem;padding:0 .5rem}.progress-indicator{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:1rem;margin-bottom:1rem}.progress-message{font-size:.9rem;color:#856404;margin-bottom:.5rem}.progress-bar{width:100%;height:8px;background:#fff;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.progress-fill{height:100%;background:linear-gradient(90deg,#007bff,#0056b3);transition:width .3s ease}.progress-percentage{font-size:.8rem;color:#856404;text-align:right}.input-container{padding:1rem;border-top:1px solid #ddd;background:#f8f9fa;display:flex;gap:.5rem}.input-container textarea{flex:1;border:1px solid #ced4da;border-radius:6px;padding:.75rem;font-family:inherit;font-size:1rem;resize:vertical;min-height:60px}.input-container textarea:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.input-container textarea:disabled{background:#e9ecef;color:#6c757d}.send-button{background:#007bff;color:#fff;border:none;border-radius:6px;padding:.75rem 1.5rem;font-size:1rem;cursor:pointer;transition:background-color .2s;min-width:100px}.send-button:hover:not(:disabled){background:#0056b3}.send-button:disabled{background:#6c757d;cursor:not-allowed}@media(max-width:768px){.websocket-chat{height:100vh;border-radius:0;border:none}.chat-header{flex-direction:column;align-items:flex-start;gap:.5rem}.status-indicators{flex-direction:column;gap:.25rem}.message-content{max-width:85%}.input-container{flex-direction:column}.send-button{align-self:flex-end}}.call-controls{display:flex;flex-direction:column;gap:1rem;padding:1rem}.video-container{display:flex;gap:1rem}.video-container video{width:50%;border:1px solid #ddd;border-radius:8px}.button-container{display:flex;gap:1rem}