*{margin:0;padding:0;box-sizing:border-box;font-family:Mulish,sans-serif}body,html{height:100%;display:flex;justify-content:center;align-items:center;background-color:#f1f1f1}.App{min-height:100vh;display:flex;justify-content:center;align-items:center}.container{background-color:#fff;border-radius:20px;padding:30px;box-shadow:0 4px 8px #0003;max-width:500px;width:100%;margin:20px}h1,h2{color:#333;margin-bottom:20px;text-align:center}button{background-color:#007bff;color:#fff;border:none;border-radius:20px;padding:10px 20px;cursor:pointer;font-size:16px;transition:background-color .3s ease}button:hover{background-color:#0056b3}button:disabled{background-color:#ccc;cursor:not-allowed}select{padding:10px;border:1px solid #ddd;border-radius:10px;font-size:16px;margin:10px 0;width:100%;max-width:300px}.chat-container{width:360px;border-radius:20px;overflow:hidden;box-shadow:0 4px 8px #0003;background-color:#fff;display:flex;flex-direction:column}.video-container{width:100%;height:500px;position:relative}#video-element{width:100%;height:100%;object-fit:cover}#voice-button{display:flex;justify-content:center;align-items:center}#voice-button.recording{background-color:red}#chat-overlay{position:absolute;bottom:20px;width:100%;max-height:200px;overflow-y:auto;padding:10px;display:flex;flex-direction:column;align-items:flex-start;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}#chat-overlay::-webkit-scrollbar{width:6px}#chat-overlay::-webkit-scrollbar-track{background:transparent}#chat-overlay::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px}#chat-overlay::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5)}.message{background-color:#0003;color:#fff;padding:10px;border-radius:20px;margin-bottom:10px;max-width:80%;font-size:14px;word-wrap:break-word;opacity:1;transition:opacity 2s ease-in-out,transform 2s ease-in-out}.message.fade-out{opacity:.5;transform:translateY(-10px)}.user-input{display:flex;align-items:center;padding:10px;background-color:#fff;border-top:1px solid #ddd}input,textarea{font-size:16px}#textArea{flex:1;height:50px;padding:15px;border:none;border-radius:20px;outline:none;resize:none;box-shadow:0 2px 4px #0000001a;font-size:16px;touch-action:manipulation;-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:none}#textArea::placeholder{text-align:left}#send-button,#voice-button{background-color:#007bff;color:#fff;border:none;border-radius:50%;width:40px;height:40px;margin-left:10px;cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:16px;transition:all .3s ease}#send-button:hover,#voice-button:hover{transform:scale(1.05)}#send-button:disabled{background-color:#ccc;cursor:not-allowed;transform:none}#send-button:disabled:hover{background-color:#ccc;transform:none}#send-button{background-color:#28a745}#send-button:hover{background-color:#218838}#send-button:disabled{background-color:#ccc}.user-message{background-color:#0000004d;color:#fff;padding:10px;border-radius:20px;margin-bottom:10px;text-align:right;align-self:flex-end;max-width:80%;word-wrap:break-word}.sound-wave-inside{width:50px;height:50px;background-image:url(/sound.gif);background-size:contain;background-repeat:no-repeat;margin:0 auto}#loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999;display:none}.spinner{border:8px solid rgba(255,255,255,.3);border-top:8px solid white;border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}