#startChatBtn {
    padding: 10px 18px;
    font-size: 16px;
    cursor: pointer;
}

#startChatBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-loader {
    font-weight: 500;
}

         .typing {
         font-size: 16px;
         font-weight: 500;
         display: inline-block;
         }
         .typing .dot {
         display: inline-block;
         width: 6px;
         height: 6px;
         margin-left: 4px;
         margin-top:10px;
         background: #000;
         border-radius: 50%;
         vertical-align: middle;   /* ⭐ MOST IMPORTANT */
         animation: blink 1.4s infinite both;
         }
         .user-form {
         background: linear-gradient(135deg, #ffffff, #f8f9ff);
         max-width: 420px;
         margin: auto;
         padding: 30px;
         border-radius: 16px;
         box-shadow: 0 15px 40px rgba(0,0,0,0.15);
         text-align: center;
         animation: fadeUp 0.5s ease;
         }
         .user-form h3 {
         margin-bottom: 20px;
         font-size: 22px;
         font-weight: 700;
         color: #2c3e50;
         }
         .user-form input,
         .user-form select {
         width: 100%;
         padding: 12px 14px;
         margin-bottom: 14px;
         border-radius: 10px;
         border: 1px solid #ddd;
         font-size: 14px;
         transition: all 0.25s ease;
         }
         .user-form input:focus,
         .user-form select:focus {
         outline: none;
         border-color: #7f5af0;
         box-shadow: 0 0 0 3px rgba(127,90,240,0.15);
         }
         .form-group {
         display: flex;
         gap: 10px;
         }
         .user-form button {
         width: 100%;
         padding: 14px;
         margin-top: 10px;
         background: linear-gradient(135deg, #7f5af0, #5a34e0);
         border: none;
         border-radius: 30px;
         color: #fff;
         font-size: 15px;
         font-weight: 600;
         cursor: pointer;
         transition: transform 0.2s ease, box-shadow 0.2s ease;
         }
         .user-form button:hover {
         transform: translateY(-2px);
         box-shadow: 0 10px 25px rgba(127,90,240,0.4);
         }
         /* Mobile Friendly */
         @media (max-width: 480px) {
         .form-group {
         flex-direction: column;
         }
         }
         /* Smooth Entry Animation */
         @keyframes fadeUp {
         from {
         opacity: 0;
         transform: translateY(25px);
         }
         to {
         opacity: 1;
         transform: translateY(0);
         }
         }
         .logout-link{
         color:#e74c3c;
         font-size:14px;
         font-weight:600;
         text-decoration:none;
         }
         .logout-link:hover{
         text-decoration:underline;
         }
         .chat-header{
         background:#fff;
         padding:15px;
         display:flex;
         align-items:center;
         justify-content:space-between;
         border-bottom:1px solid #ddd;
         }
         .header-left{
         display:flex;
         align-items:center;
         gap:10px;
         }
         .header-right{
         display:flex;
         align-items:center;
         }
         .logout-btn{
         color:#e74c3c;
         font-size:14px;
         cursor:pointer;
         font-weight:600;
         }
         .logout-btn:hover{
         text-decoration:underline;
         }
         .user-form{
         padding:30px;
         background:#fff;
         
         display:flex;
         flex-direction:column;
         justify-content:center;
         }
         .user-form h3{
         margin-bottom:15px;
         }
         .user-form input,
         .user-form select{
         margin-bottom:10px;
         padding:10px;
         border:1px solid #ccc;
         border-radius:6px;
         }
         .user-form button{
         padding:10px;
         background:#3498db;
         color:#fff;
         border:none;
         border-radius:6px;
         cursor:pointer;
         }
         .message {
         max-width: 70%;
         padding: 10px 14px;
         margin: 8px;
         border-radius: 10px;
         }
         .message.right {
         margin-left: auto;   /* RIGHT SIDE */
         text-align: right;
         }
         .typing {
         display: inline-flex;
         gap: 4px;
         padding: 8px 12px;
         background: #f1f1f1;
         border-radius: 12px;
         width: fit-content;
         }
         .typing span {
         width: 6px;
         height: 6px;
         background: #555;
         border-radius: 50%;
         animation: blink 1.4s infinite both;
         }
         .typing span:nth-child(2) {
         animation-delay: 0.2s;
         }
         .typing span:nth-child(3) {
         animation-delay: 0.4s;
         }
         @keyframes blink {
         0% { opacity: .2; }
         20% { opacity: 1; }
         100% { opacity: .2; }
         }
         *{
         margin:0;
         padding:0;
         box-sizing:border-box;
         font-family: "Segoe UI", sans-serif;
         }
         body{
         background:#2ecc71;
         height:100vh;
         display:flex;
         justify-content:center;
         align-items:center;
         }
         .chat-wrapper{
         width:95%;
         height:95%;
         background:#fff;
         display:flex;
         border-radius:6px;
         overflow:hidden;
         }
         /* LEFT PANEL */
         .sidebar{
         width:30%;
         background:#2c3e50;
         color:#fff;
         display:flex;
         flex-direction:column;
         }
         .profile{
         padding:20px;
         display:flex;
         align-items:center;
         border-bottom:1px solid #34495e;
         }
         .profile img{
         width:45px;
         height:45px;
         border-radius:50%;
         margin-right:10px;
         }
         .search{
         padding:15px;
         }
         .search input{
         width:100%;
         padding:8px 10px;
         border:none;
         border-radius:4px;
         }
         .contacts{
         flex:1;
         overflow-y:auto;
         }
         .contact{
         padding:15px;
         display:flex;
         align-items:center;
         cursor:pointer;
         border-bottom:1px solid #34495e;
         }
         .contact:hover{
         background:#34495e;
         }
         .contact img{
         width:40px;
         height:40px;
         border-radius:50%;
         margin-right:10px;
         }
         .contact small{
         color:#bdc3c7;
         }
         /* RIGHT CHAT PANEL */
         .chat-area{
         width:70%;
         display:flex;
         flex-direction:column;
         background:#ecf0f1;
         }
         .chat-header{
         background:#fff;
         padding:15px;
         display:flex;
         align-items:center;
         border-bottom:1px solid #ddd;
         }
         .chat-header img{
         width:45px;
         height:45px;
         border-radius:50%;
         margin-right:10px;
         }
         .chat-body{
         flex:1;
         padding:20px;
         overflow-y:auto;
         }
         .message{
         max-width:70%;
         margin-bottom:15px;
         padding:12px 15px;
         border-radius:18px;
         font-size:14px;
         line-height:1.4;
         }
         .left{
         background:#fff;
         align-self:flex-start;
         }
         .right{
         background:#3498db;
         color:#fff;
         align-self:flex-end;
         }
         .chat-footer{
         background:#fff;
         padding:15px;
         display:flex;
         border-top:1px solid #ddd;
         }
         .chat-footer input{
         flex:1;
         padding:10px;
         border:1px solid #ccc;
         border-radius:20px;
         outline:none;
         }
         .chat-footer button{
         margin-left:10px;
         padding:10px 18px;
         border:none;
         background:#3498db;
         color:#fff;
         border-radius:20px;
         cursor:pointer;
         }