@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-0:#fdf8f4;--bg-1:#fffbf8;--bg-2:#f3ede8;--bg-3:#ece5de;--glass:#ffffffb3;--glass-border:#d2c3b980;--accent:#c084a0;--accent-2:#a8688a;--accent-glow:#c084a040;--accent-light:#c084a01f;--peach:#f4a57a;--lavender:#a78dc9;--text-1:#2d2025;--text-2:#7c6570;--text-3:#b8a5ad;--success:#5cb88a;--danger:#e06b6b;--radius:20px;--radius-sm:12px;--shadow:0 4px 24px #b48ca024;--shadow-lg:0 8px 40px #b48ca033;--transition:.2s cubic-bezier(.4, 0, .2, 1)}html,body,#root{height:100%}body{background:var(--bg-0);color:var(--text-1);-webkit-font-smoothing:antialiased;font-family:Plus Jakarta Sans,sans-serif;overflow:hidden}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:4px}.auth-page{background:radial-gradient(ellipse at 20% 50%, #c084a01f 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, #a78dc91a 0%, transparent 50%), radial-gradient(ellipse at 55% 90%, #f4a57a14 0%, transparent 50%), var(--bg-0);justify-content:center;align-items:center;height:100vh;display:flex}.auth-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);width:100%;max-width:420px;box-shadow:var(--shadow-lg), 0 0 0 1px #fff9 inset;padding:40px;animation:.4s slideUp}.auth-logo{text-align:center;margin-bottom:32px}.auth-logo h1{background:linear-gradient(135deg, var(--accent), var(--lavender));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:28px;font-weight:700}.auth-logo p{color:var(--text-2);margin-top:6px;font-size:14px}.auth-tabs{background:var(--bg-2);border-radius:var(--radius-sm);border:1px solid var(--glass-border);margin-bottom:28px;padding:4px;display:flex}.auth-tab{color:var(--text-2);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:9px;flex:1;padding:10px;font-family:inherit;font-size:14px;font-weight:600}.auth-tab.active{color:var(--accent);background:#fff;box-shadow:0 2px 10px #b48ca02e}.form-group{margin-bottom:16px}.form-group label{color:var(--text-2);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-input{border:1.5px solid var(--glass-border);border-radius:var(--radius-sm);width:100%;color:var(--text-1);transition:var(--transition);background:#fff;outline:none;padding:12px 16px;font-family:inherit;font-size:14px}.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--lavender));border-radius:var(--radius-sm);color:#fff;cursor:pointer;width:100%;transition:var(--transition);letter-spacing:.3px;border:none;margin-top:8px;padding:13px;font-family:inherit;font-size:15px;font-weight:700}.btn-primary:hover{box-shadow:0 8px 24px var(--accent-glow);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}.error-msg{color:var(--danger);text-align:center;margin-top:12px;font-size:13px}.chat-layout{height:100vh;display:flex;overflow:hidden}.sidebar{background:var(--bg-1);border-right:1px solid var(--glass-border);z-index:10;flex-direction:column;width:300px;min-width:300px;display:flex;position:relative}.sidebar-header{border-bottom:1px solid var(--glass-border);padding:20px 16px 16px}.sidebar-top{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.sidebar-top h2{background:linear-gradient(135deg, var(--accent), var(--lavender));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:18px;font-weight:700}.sidebar-actions{gap:8px;display:flex}.icon-btn{border:1.5px solid var(--glass-border);width:34px;height:34px;color:var(--text-2);cursor:pointer;transition:var(--transition);background:#fff;border-radius:10px;justify-content:center;align-items:center;display:flex}.icon-btn:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent);transform:scale(1.05)}.search-bar{position:relative}.search-input{background:var(--bg-2);border:1.5px solid var(--glass-border);width:100%;color:var(--text-1);transition:var(--transition);border-radius:10px;outline:none;padding:10px 12px 10px 36px;font-family:inherit;font-size:13px}.search-input::placeholder{color:var(--text-3)}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:#fff}.search-icon{color:var(--text-3);pointer-events:none;position:absolute;top:50%;left:11px;transform:translateY(-50%)}.sidebar-tabs{gap:4px;padding:12px 16px 0;display:flex}.sidebar-tab{color:var(--text-3);cursor:pointer;transition:var(--transition);letter-spacing:.3px;background:0 0;border:none;border-radius:8px;flex:1;padding:8px;font-family:inherit;font-size:12px;font-weight:700}.sidebar-tab.active{background:var(--accent-light);color:var(--accent)}.sidebar-list{flex:1;padding:8px;overflow-y:auto}.room-item{cursor:pointer;transition:var(--transition);border-radius:14px;align-items:center;gap:12px;padding:10px;display:flex;position:relative}.room-item:hover{background:var(--bg-2)}.room-item.active{background:var(--accent-light)}.room-item.active:before{content:"";background:var(--accent);border-radius:2px;width:3px;position:absolute;top:22%;bottom:22%;left:0}.room-avatar{object-fit:cover;background:var(--bg-3);border-radius:14px;flex-shrink:0;width:44px;height:44px}.room-info{flex:1;min-width:0}.room-name{color:var(--text-1);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.room-last-msg{color:var(--text-3);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:12px;overflow:hidden}.room-meta{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.room-time{color:var(--text-3);font-size:11px}.unread-badge{background:var(--accent);color:#fff;border-radius:20px;padding:2px 7px;font-size:10px;font-weight:700}.online-dot{background:var(--success);border-radius:50%;flex-shrink:0;width:8px;height:8px;box-shadow:0 0 6px #5cb88a80}.offline-dot{background:var(--text-3);border-radius:50%;flex-shrink:0;width:8px;height:8px}.sidebar-user{border-top:1px solid var(--glass-border);background:#ffffff80;align-items:center;gap:10px;padding:14px 16px;display:flex}.user-avatar-sm{object-fit:cover;border-radius:10px;width:36px;height:36px}.user-info-sm{flex:1;min-width:0}.user-info-sm .name{color:var(--text-1);font-size:13px;font-weight:600}.user-info-sm .status{color:var(--success);font-size:11px;font-weight:500}.chat-window{background:var(--bg-0);flex-direction:column;flex:1;min-width:0;display:flex}.chat-empty{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.chat-empty-icon{filter:saturate(.8);font-size:64px}.chat-empty h3{color:var(--text-1);font-size:22px;font-weight:700}.chat-empty p{color:var(--text-2);font-size:14px}.chat-header{border-bottom:1px solid var(--glass-border);background:var(--bg-1);align-items:center;gap:14px;padding:16px 24px;display:flex}.chat-header-info{flex:1;min-width:0}.chat-header-name{color:var(--text-1);font-size:16px;font-weight:700}.chat-header-sub{color:var(--text-2);font-size:12px}.messages-container{background:radial-gradient(ellipse at 80% 10%, #c084a00d 0%, transparent 50%), radial-gradient(ellipse at 10% 80%, #a78dc90a 0%, transparent 50%), var(--bg-0);flex-direction:column;flex:1;gap:2px;padding:20px 24px;display:flex;overflow-y:auto}.msg-date-divider{align-items:center;gap:12px;margin:16px 0;display:flex}.msg-date-divider span{color:var(--text-3);white-space:nowrap;font-size:11px;font-weight:600}.msg-date-divider:before,.msg-date-divider:after{content:"";background:var(--glass-border);flex:1;height:1px}.msg-group{flex-direction:column;gap:2px;margin-bottom:12px;display:flex}.msg-row{align-items:flex-end;gap:10px;display:flex}.msg-row.own{flex-direction:row-reverse}.msg-avatar{object-fit:cover;border-radius:8px;flex-shrink:0;width:30px;height:30px}.msg-avatar.hidden{visibility:hidden}.msg-bubble{word-break:break-word;border-radius:18px;padding:10px 14px;font-size:14px;line-height:1.55;animation:.2s msgIn;position:relative}.msg-bubble.other{color:var(--text-1);border:1px solid var(--glass-border);background:#fff;border-bottom-left-radius:4px;box-shadow:0 2px 8px #b48ca01a}.msg-bubble.own{background:linear-gradient(135deg, var(--accent), var(--lavender));color:#fff;box-shadow:0 4px 16px var(--accent-glow);border-bottom-right-radius:4px}.msg-sender-name{color:var(--text-3);margin-bottom:4px;font-size:11px;font-weight:700}.msg-time{opacity:.6;text-align:right;margin-top:4px;font-size:10px}.typing-indicator{color:var(--text-3);align-items:center;gap:8px;padding:4px 0;font-size:12px;display:flex}.typing-dots{gap:3px;display:flex}.typing-dots span{background:var(--accent);border-radius:50%;width:6px;height:6px;animation:1s infinite bounce}.typing-dots span:nth-child(2){animation-delay:.15s}.typing-dots span:nth-child(3){animation-delay:.3s}.chat-input-area{border-top:1px solid var(--glass-border);background:var(--bg-1);padding:16px 24px}.chat-input-row{align-items:flex-end;gap:10px;display:flex}.chat-input{border:1.5px solid var(--glass-border);color:var(--text-1);resize:none;max-height:120px;transition:var(--transition);background:#fff;border-radius:14px;outline:none;flex:1;padding:12px 16px;font-family:inherit;font-size:14px;line-height:1.5}.chat-input::placeholder{color:var(--text-3)}.chat-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.send-btn{background:linear-gradient(135deg, var(--accent), var(--lavender));color:#fff;cursor:pointer;width:44px;height:44px;transition:var(--transition);border:none;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.send-btn:hover{box-shadow:0 6px 20px var(--accent-glow);transform:scale(1.08)}.send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;background:#64465033;justify-content:center;align-items:center;padding:20px;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--bg-1);border:1px solid var(--glass-border);border-radius:var(--radius);width:100%;max-width:440px;box-shadow:var(--shadow-lg), 0 0 0 1px #fffc inset;padding:28px;animation:.25s slideUp}.modal-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.modal-header h3{color:var(--text-1);font-size:18px;font-weight:700}.modal-close{background:var(--bg-2);border:1.5px solid var(--glass-border);color:var(--text-2);cursor:pointer;width:30px;height:30px;transition:var(--transition);border-radius:8px;justify-content:center;align-items:center;display:flex}.modal-close:hover{color:var(--danger);border-color:var(--danger);background:#fde8e8}.user-pick-list{flex-direction:column;gap:4px;max-height:260px;margin:12px 0;display:flex;overflow-y:auto}.user-pick-item{cursor:pointer;transition:var(--transition);border:1.5px solid #0000;border-radius:10px;align-items:center;gap:12px;padding:10px 12px;display:flex}.user-pick-item:hover{background:var(--bg-2);border-color:var(--glass-border)}.user-pick-item.selected{background:var(--accent-light);border-color:var(--accent)}.user-pick-avatar{object-fit:cover;border-radius:10px;width:38px;height:38px}.user-pick-name{color:var(--text-1);flex:1;font-size:14px;font-weight:600}.user-pick-status{font-size:11px;font-weight:500}.online-text{color:var(--success)}.offline-text{color:var(--text-3)}.check-icon{background:var(--accent);border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;display:flex}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes msgIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-6px)}}