*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.container{max-width:800px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}.header{text-align:center;color:#fff;margin-bottom:20px}.header h1{font-size:2.5rem;margin-bottom:10px}.header p{opacity:.9}.chat-container{flex:1 1;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden}.status-bar{padding:15px 20px;background:#f8f9fa;border-bottom:1px solid #e9ecef;justify-content:space-between}.status,.status-bar{display:flex;align-items:center}.status{gap:8px}.status-dot{width:10px;height:10px;border-radius:50%}.status-dot.connected{background:#28a745}.status-dot.searching{background:#ffc107;animation:pulse 1.5s infinite}.status-dot.disconnected{background:#dc3545}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.controls{display:flex;gap:10px}.btn{padding:8px 16px;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover:not(:disabled){background:#5a6fd6}.btn-danger{background:#dc3545;color:#fff}.btn-danger:hover:not(:disabled){background:#c82333}.btn-success{background:#28a745;color:#fff}.btn-success:hover:not(:disabled){background:#218838}.messages{flex:1 1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;min-height:400px;max-height:500px}.message{max-width:70%;padding:12px 16px;border-radius:16px;word-wrap:break-word}.message.sent{align-self:flex-end;background:#667eea;color:#fff;border-bottom-right-radius:4px}.message.received{align-self:flex-start;background:#f1f3f4;color:#333;border-bottom-left-radius:4px}.message.system{align-self:center;background:#e9ecef;color:#666;font-size:.875rem;padding:8px 16px}.typing-indicator{align-self:flex-start;padding:12px 16px;background:#f1f3f4;border-radius:16px;border-bottom-left-radius:4px;display:flex;gap:4px}.typing-indicator span{width:8px;height:8px;background:#999;border-radius:50%;animation:bounce 1.4s ease-in-out infinite}.typing-indicator span:first-child{animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.input-area{padding:20px;border-top:1px solid #e9ecef;display:flex;gap:10px}.input-area input{flex:1 1;padding:12px 16px;border:2px solid #e9ecef;border-radius:24px;font-size:1rem;outline:none;transition:border-color .2s}.input-area input:focus{border-color:#667eea}.input-area input:disabled{background:#f8f9fa}.input-area button{padding:12px 24px;background:#667eea;color:#fff;border:none;border-radius:24px;font-weight:500;cursor:pointer;transition:background .2s}.input-area button:hover:not(:disabled){background:#5a6fd6}.input-area button:disabled{background:#ccc;cursor:not-allowed}.welcome-screen{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}.welcome-screen h2{color:#333;margin-bottom:20px}.welcome-screen p{color:#666;margin-bottom:30px;max-width:400px}.location-status{font-size:.875rem;color:#666;margin-top:15px}.location-status.error{color:#dc3545}.distance-info{font-size:.75rem;color:#888;margin-top:4px}@media (max-width:600px){.container{padding:10px}.header h1{font-size:1.75rem}.messages{min-height:300px}.message{max-width:85%}.controls{flex-wrap:wrap}.btn{padding:6px 12px;font-size:.875rem}}