@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap";:root{--primary-gradient: linear-gradient(135deg, #667eea, #764ba2);--primary-color: #6a67ea;--primary-hover: #5a57d8;--container-bg: #ffffff;--text-color: #2c3e50;--text-muted: #8d99ae;--sent-bubble: var(--primary-gradient);--received-bubble: #edf2f4;--status-message-bg: #e0f7fa}@keyframes animate-stars{0%{transform:translateY(0)}to{transform:translateY(-2000px)}}.stars-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1}.stars-bg:after{content:"";position:absolute;width:1px;height:1px;background:#fff;box-shadow:15vw 8vh #fff,9vw 79vh #fff,5vw 3vh 0 1px #fff,51vw 3vh 0 1px #fff,8vw 23vh #fff,62vw 35vh 0 1px #fff,34vw 9vh 0 1px #fff,1vw 35vh #fff,5vw 56vh 0 1px #fff,88vw 2vh #fff,44vw 59vh 0 1px #fff,4vw 8vh #fff,6vw 56vh 0 1px #fff,80vw 57vh 0 1px #fff,23vw 12vh #fff,5vw 89vh 0 1px #fff,45vw 80vh #fff,3vw 2vh #fff,34vw 4vh 0 1px #fff,90vw 12vh #fff,56vw 34vh 0 1px #fff,12vw 12vh 0 1px #fff,34vw 89vh #fff,12vw 45vh 0 1px #fff,5vw 9vh #fff,45vw 23vh 0 1px #fff,78vw 12vh #fff,90vw 45vh 0 1px #fff,67vw 34vh 0 1px #fff,23vw 78vh #fff,9vw 23vh 0 1px #fff,45vw 89vh #fff,12vw 4vh 0 1px #fff,67vw 90vh 0 1px #fff,34vw 56vh #fff,2vw 3vh 0 1px #fff;animation:animate-stars 150s linear infinite}.stars-bg:nth-of-type(2):after{width:2px;height:2px;box-shadow:2vw 40vh #fff,80vw 20vh 0 1px #fff,30vw 90vh #fff,45vw 10vh 0 1px #fff,90vw 60vh #fff,10vw 15vh 0 1px #fff;animation-duration:100s}body{font-family:Poppins,sans-serif;color:var(--text-color);background:#030815;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2%;overflow:hidden}.screen{display:none;width:100%;max-width:800px;background-color:var(--container-bg);border-radius:16px;box-shadow:0 10px 30px #0000001a;padding:2.5rem 3rem}.screen.active{display:block;animation:screenPopIn .6s cubic-bezier(.165,.84,.44,1) forwards}@keyframes screenPopIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn{border-radius:8px;font-weight:600;padding:10px 20px;transition:transform .2s ease,box-shadow .2s ease}.btn:active{transform:scale(.97)}.btn-primary{background:var(--primary-gradient);border:none;color:#fff}.btn-primary:hover{color:#fff;box-shadow:0 5px 15px #667eea80}.form-control{border-radius:8px;padding:12px;background-color:#fff;color:#333}.form-control:focus{box-shadow:0 0 0 .25rem #667eea40;border-color:var(--primary-color)}.room-option-card{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:16px;padding:2rem;text-align:center;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;will-change:transform}.room-option-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 15px 30px #0000001f}.room-option-card h3{background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}.copyright-notice{color:var(--text-muted);font-size:.8rem}#chat-messages{height:60vh;overflow-y:auto;padding:1rem 10px}.message{display:flex;flex-direction:column;margin-bottom:15px;max-width:75%;animation:messagePopIn .4s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes messagePopIn{0%{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.message.sent{align-self:flex-end;align-items:flex-end}.message.received{align-self:flex-start;align-items:flex-start}.message-bubble{padding:12px 20px;border-radius:24px;word-wrap:break-word;box-shadow:0 4px 10px #00000014}.message.sent .message-bubble{background:var(--sent-bubble);color:#fff;border-bottom-right-radius:8px}.message.received .message-bubble{background-color:var(--received-bubble);color:var(--text-color);border-bottom-left-radius:8px}.message-bubble.has-image{padding:5px}.message-bubble img{max-width:100%;border-radius:20px;display:block}.message-bubble audio{width:100%;min-width:250px}.message-info{font-size:.75rem;color:var(--text-muted);margin:4px 12px 0}#record-audio-btn.recording{background:#e74c3c;color:#fff;animation:pulse 1.5s infinite}@keyframes pulse{0%{box-shadow:0 0 #e74c3cb3}70%{box-shadow:0 0 0 10px #e74c3c00}to{box-shadow:0 0 #e74c3c00}}.status-message{text-align:center;margin:10px 0;font-size:.8rem;color:var(--text-muted);animation:fadeIn .5s}.status-message span{background-color:var(--status-message-bg);padding:4px 12px;border-radius:12px}#typing-indicator{height:20px;font-size:.85rem;font-style:italic;color:var(--text-muted);padding:0 10px;opacity:0;transition:opacity .3s ease}#typing-indicator.active{opacity:1}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;justify-content:center;align-items:center;z-index:1000;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.spinner{border:4px solid rgba(0,0,0,.1);width:40px;height:40px;border-radius:50%;border-left-color:var(--primary-color);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 767px){body{padding:0;overflow-y:auto}.screen{padding:1.5rem 1rem;border-radius:0;min-height:100vh;box-shadow:none}h1{font-size:1.8rem}h2{font-size:1.5rem}.room-option-card{padding:1.5rem}#chat-messages{height:70vh}}