.user-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.user-card{background:#fff;border-radius:20px;padding:50px 40px;box-shadow:0 20px 60px #0000004d;max-width:500px;width:100%}.back-link{color:#667eea;text-decoration:none;font-weight:600;margin-bottom:20px;display:inline-block;transition:color .3s}.back-link:hover{color:#764ba2}.welcome-section{text-align:center;margin-bottom:30px}.welcome-section h1{font-size:2rem;color:#333;margin-bottom:10px}.welcome-section p{color:#666;font-size:1rem}.name-form{display:flex;flex-direction:column;gap:20px}.form-field{display:flex;flex-direction:column;gap:8px}.form-field label{font-weight:600;color:#555;font-size:.9rem}.name-input{padding:15px 20px;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;transition:border-color .3s}.name-input:focus{outline:none;border-color:#667eea}.start-btn{padding:15px 30px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .3s,box-shadow .3s}.start-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.connection-status{margin-top:20px;text-align:center}.status-connected{color:#4caf50;font-weight:600}.status-disconnected{color:#f44336;font-weight:600}.spinner{border:4px solid rgba(102,126,234,.2);border-top:4px solid #667eea;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin:0 auto 20px}.chat-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.chat-window{background:#fff;border-radius:20px;width:100%;max-width:800px;height:600px;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d;overflow:hidden}.header-info h2{margin-bottom:5px}.room-id{font-size:.9rem;opacity:.9}.status-badge{padding:8px 15px;border-radius:20px;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:8px}.status-badge.active{background:#4caf5033}.status-badge.waiting{background:#ffc10733}.status-dot{width:10px;height:10px;border-radius:50%;animation:pulse 2s infinite}.status-dot.online{background:#4caf50;box-shadow:0 0 8px #4caf5099}.status-dot.offline{background:#ffc107;box-shadow:0 0 8px #ffc10799}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.user-message{align-items:flex-end}.user-message .message-content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 18px;border-radius:18px 18px 4px;max-width:70%;word-wrap:break-word}.user-message .message-time{font-size:.75rem;color:#999;margin-top:4px;text-align:right}.admin-message{align-items:flex-start}.admin-message .message-content{background:#fff;color:#333;padding:12px 18px;border-radius:18px 18px 18px 4px;max-width:70%;word-wrap:break-word;box-shadow:0 2px 5px #0000001a}.admin-message .message-time{font-size:.75rem;color:#999;margin-top:4px;text-align:left}.system-message{align-items:center}.system-message .message-content{background:#e3f2fd;color:#1976d2;padding:8px 16px;border-radius:12px;text-align:center;font-size:.9rem;max-width:90%}.message-form{display:flex;gap:10px;padding:20px;background:#fff;border-top:1px solid #e0e0e0}.message-input:disabled{background:#f5f5f5;cursor:not-allowed}.chat-ended-banner{background:#fff3cd;padding:15px;text-align:center;border-top:1px solid #ffc107}.return-home-btn{color:#667eea;text-decoration:none;font-weight:600;padding:8px 20px;border:2px solid #667eea;border-radius:20px;display:inline-block;transition:all .3s}.return-home-btn:hover{background:#667eea;color:#fff}.admin-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.admin-dashboard{display:flex;height:calc(100vh - 40px);background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px #0000004d}.sidebar{width:320px;background:#f8f9fa;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}.sidebar-header{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;padding:20px;display:flex;justify-content:space-between;align-items:center}.sidebar-header h2{font-size:1.3rem;margin:0}.header-actions{display:flex;gap:10px}.logout-btn{background:#fff3;border:2px solid white;color:#fff;font-size:1.2rem;width:40px;height:40px;border-radius:50%;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}.logout-btn:hover{background:#fff;transform:rotate(15deg)}.admin-info{padding:12px 20px;background:#e3f2fd;border-bottom:1px solid #e0e0e0;color:#1976d2;font-size:.85rem}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:#fff}.spinner{border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.connection-status{padding:15px 20px;text-align:center;background:#fff;border-bottom:1px solid #e0e0e0}.status-online{color:#4caf50;font-weight:600}.status-offline{color:#f44336;font-weight:600}.rooms-list{flex:1;overflow-y:auto;padding:20px}.rooms-list h3{font-size:1rem;color:#666;margin-bottom:15px;text-transform:uppercase;letter-spacing:.5px}.no-rooms{text-align:center;padding:40px 20px;color:#999}.no-rooms p{font-weight:600;margin-bottom:5px}.room-item{background:#fff;border-radius:12px;padding:15px;margin-bottom:10px;cursor:pointer;transition:all .3s;border:2px solid transparent;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:visible}.room-item:hover{border-color:#667eea;transform:translate(5px)}.room-item.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.room-item.new-room-highlight{animation:fieryPulse 2s ease-in-out infinite,scaleIn .5s ease-out;border:2px solid #ff6b6b;background:linear-gradient(135deg,#fff5f5,#ffe5e5);box-shadow:0 0 20px #ff6b6b99,0 0 40px #ff6b6b66,0 0 60px #ff6b6b33,inset 0 0 20px #ff6b6b1a}.room-item.new-room-highlight:before{content:"🔥";position:absolute;left:-10px;top:-10px;font-size:1.5rem;animation:fireFloat 1s ease-in-out infinite;z-index:10}.room-item.new-room-highlight:after{content:"NEW";position:absolute;right:-5px;top:-8px;background:linear-gradient(135deg,#ff6b6b,#ff4757);color:#fff;padding:4px 10px;border-radius:12px;font-size:.7rem;font-weight:700;box-shadow:0 4px 12px #ff6b6b80;animation:bounce .6s ease-in-out infinite;z-index:10}@keyframes fieryPulse{0%,to{box-shadow:0 0 20px #ff6b6b99,0 0 40px #ff6b6b66,0 0 60px #ff6b6b33,inset 0 0 20px #ff6b6b1a;border-color:#ff6b6b}50%{box-shadow:0 0 30px #ff6b6bcc,0 0 60px #ff6b6b99,0 0 90px #ff6b6b66,inset 0 0 30px #ff6b6b33;border-color:#ff4757}}@keyframes scaleIn{0%{transform:scale(.8) translate(-20px);opacity:0}50%{transform:scale(1.05) translate(10px)}to{transform:scale(1) translate(0);opacity:1}}@keyframes fireFloat{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-10deg)}75%{transform:translateY(-4px) rotate(10deg)}}@keyframes bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.1)}}.room-item.has-unread{animation:messagePulse 2s ease-in-out infinite;border-left:4px solid #4caf50;background:linear-gradient(to right,#e8f5e9,#fff 20%)}.room-item.has-unread:not(.active){box-shadow:0 0 15px #4caf504d}.unread-badge{position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;min-width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;box-shadow:0 4px 12px #4caf5080;animation:badgeBounce .8s ease-in-out infinite,badgeGlow 2s ease-in-out infinite;z-index:10;border:2px solid white}@keyframes messagePulse{0%,to{box-shadow:0 0 10px #4caf504d}50%{box-shadow:0 0 20px #4caf5080}}@keyframes badgeBounce{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes badgeGlow{0%,to{box-shadow:0 4px 12px #4caf5080}50%{box-shadow:0 4px 20px #4caf50cc}}.room-info strong{display:block;font-size:1rem;margin-bottom:4px}.room-info small{font-size:.85rem;opacity:.8}.room-item.active .room-info small{opacity:.9}.badge{padding:4px 10px;border-radius:12px;font-size:.75rem;font-weight:600;display:flex;align-items:center;gap:6px}.badge.waiting{background:#fff3cd;color:#856404}.badge.active{background:#d4edda;color:#155724}.room-item.active .badge{background:#ffffff4d;color:#fff}.badge-dot{width:8px;height:8px;border-radius:50%;animation:badgePulse 2s infinite}.badge-dot.waiting-dot{background:#ffc107}.badge-dot.active-dot{background:#4caf50}.room-item.active .badge-dot{background:#fff}@keyframes badgePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}.main-chat{flex:1;display:flex;flex-direction:column}.chat-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px 30px;display:flex;justify-content:space-between;align-items:center}.chat-header-info h2{margin-bottom:5px}.chat-header-info small{opacity:.9}.end-chat-btn{padding:10px 20px;background:#fff3;color:#fff;border:2px solid white;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s}.end-chat-btn:hover{background:#fff;color:#f5576c}.no-chat-selected{flex:1;display:flex;align-items:center;justify-content:center;background:#f5f5f5}.empty-state{text-align:center;color:#999}.empty-icon{font-size:4rem;display:block;margin-bottom:20px}.empty-state h2{color:#666;margin-bottom:10px}.messages-area{flex:1;overflow-y:auto;padding:20px;background:#f5f5f5}.message{margin-bottom:15px;animation:fadeIn .3s ease-in;display:flex;flex-direction:column}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.admin-message{align-items:flex-end}.admin-message .message-content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 18px;border-radius:18px 18px 4px;max-width:70%;word-wrap:break-word}.admin-message .message-time{font-size:.75rem;color:#999;margin-top:4px;text-align:right}.user-message{align-items:flex-start}.user-message .message-content{background:#fff;color:#333;padding:12px 18px;border-radius:18px 18px 18px 4px;max-width:70%;word-wrap:break-word;box-shadow:0 2px 5px #0000001a}.user-message .message-time{font-size:.75rem;color:#999;margin-top:4px;text-align:left}.sender-label{display:block;margin-bottom:4px;font-size:.85rem;opacity:.9;font-weight:600}.message-text{display:block}.quick-replies{padding:15px 20px;background:#f8f9fa;border-top:1px solid #e0e0e0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.quick-replies-label{font-weight:600;color:#666;font-size:.9rem;margin-right:10px}.quick-reply-btn{padding:8px 15px;background:#fff;border:2px solid #667eea;color:#667eea;border-radius:20px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s;white-space:nowrap}.quick-reply-btn:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translateY(-2px);box-shadow:0 5px 15px #667eea4d}.message-form{display:flex;gap:10px;padding:15px 20px;background:#fff;border-top:1px solid #e0e0e0}.message-input{flex:1;padding:12px 20px;border:2px solid #e0e0e0;border-radius:25px;font-size:1rem;transition:border-color .3s}.message-input:focus{outline:none;border-color:#667eea}.send-btn{padding:12px 25px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:25px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.send-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.send-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.admin-dashboard{flex-direction:column}.sidebar{width:100%;height:40%}.main-chat{height:60%}}.admin-login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e3c72,#2a5298,#7e22ce);padding:20px}.admin-login-card{background:#fff;border-radius:20px;padding:50px 40px;box-shadow:0 20px 60px #0006;max-width:450px;width:100%;animation:slideIn .5s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.lock-icon{font-size:4rem;text-align:center;margin-bottom:20px;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.admin-login-card h1{text-align:center;font-size:2rem;color:#333;margin-bottom:10px}.subtitle{text-align:center;color:#666;margin-bottom:30px;font-size:1rem}.error-message{background:#fee;border:2px solid #f44336;color:#c62828;padding:12px 15px;border-radius:10px;margin-bottom:20px;font-size:.9rem;animation:shake .5s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600;color:#555;font-size:.9rem}.form-group input{padding:14px 18px;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;transition:all .3s}.form-group input:focus{outline:none;border-color:#7e22ce;box-shadow:0 0 0 3px #7e22ce1a}.login-btn{padding:16px 30px;background:linear-gradient(135deg,#7e22ce,#1e3c72);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s;margin-top:10px}.login-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px #7e22ce66}.login-btn:disabled{opacity:.6;cursor:not-allowed}.security-notice{margin-top:25px;text-align:center;color:#999}.security-notice small{display:flex;align-items:center;justify-content:center;gap:5px}.home-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.home-card{background:#fff;border-radius:20px;padding:60px 40px;box-shadow:0 20px 60px #0000004d;text-align:center;max-width:500px;width:100%}.home-card h1{font-size:2.5rem;margin-bottom:10px;color:#333}.subtitle{color:#666;font-size:1.1rem;margin-bottom:40px}.button-group{display:flex;flex-direction:column;gap:15px;margin-bottom:40px}.btn{padding:18px 30px;border-radius:12px;border:none;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:10px}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.btn-secondary{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 10px 25px #f5576c66}.icon{font-size:1.5rem}.features{display:flex;justify-content:space-around;margin-top:30px;padding-top:30px;border-top:1px solid #eee}.feature{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.9rem;color:#666}.feature-icon{font-size:1.5rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}#root{min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}