:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#000000de;background-color:#f4f4f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;min-width:320px;min-height:100vh}.chats-container{width:350px;min-width:350px;max-width:350px;height:100%;border-right:1px solid #ddd;display:flex;flex-direction:column;background:#fff}.header{color:#dfdede;margin:0;padding:16px;font-size:1.2rem;font-weight:600;text-align:center}.search-input{width:300px;padding:8px;border:1px solid #dfe1e5;border-radius:50px;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s;text-align:center}.search-input:focus{border-color:#45befb;box-shadow:0 0 0 2px #24a1de33}.chats-container ul{list-style:none;padding:0;margin:0;overflow-y:auto;flex-grow:1}.chat-item{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid #f0f2f5;cursor:pointer;transition:background .2s ease}.chat-item.selected{background-color:#e8f0f7}.chat-item:hover{background-color:#f2f6fa}.chat-item:active{background-color:#e8f0f7}.chat-avatar{width:50px;height:50px;background:linear-gradient(135deg,#6ab2f2,#08c);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;margin-right:15px;flex-shrink:0;text-transform:uppercase}.avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.chat-avatar:empty{background:#e0e0e0;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.chat-info{flex:1;min-width:0}.chat-name{margin:0;font-size:1rem;color:#1c1c1c;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-last-message{margin:4px 0 0;font-size:.85rem;color:#707579;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}.no-chats{display:flex;align-items:center;justify-content:center;height:100%;color:#aaa;font-style:italic}.chats-container ul::-webkit-scrollbar{width:6px}.chats-container ul::-webkit-scrollbar-thumb{background-color:#d1d1d1;border-radius:10px}.chat-content{flex-grow:1;display:flex;flex-direction:column;background-color:#f0f2f5;width:100%;background-size:100%;border-radius:4px;min-width:0;overflow:hidden}.chat-header{background-color:#fff;margin:0;padding:10px 10px 10px 21px;display:block;text-align:left}.chat-header h1{color:#000;font-size:1rem;font-weight:600;margin:0}.chat-header span{color:#000;font-size:.7rem;margin:0}.messages-list{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;overflow-x:hidden}.sender-name{font-size:.75rem;font-weight:700;color:#08c;display:block;margin-bottom:2px}.reply-name{font-weight:700;color:#08c}.no-messages{display:flex;justify-content:center;align-items:center;height:100%;color:#888}.reply-message{font-size:.75rem;color:#666;margin-bottom:6px;background-color:#0000000d;padding:4px 8px;border-radius:4px;border-left:3px solid #0088cc;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message{display:flex;align-items:flex-end;padding-left:20px;margin-bottom:12px;max-width:50%}.message.sent{align-self:flex-end;flex-direction:row-reverse;padding-left:0;padding-right:20px;max-width:80%}.message-avatar{width:35px;height:35px;border-radius:50%;background:#08c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;margin-right:8px;flex-shrink:0;overflow:hidden}.avatar-img{width:100%;height:100%;object-fit:cover}.message-info{background:#fff;padding:8px 12px;border-radius:12px 12px 12px 0;box-shadow:0 1px 2px #0000001a;position:relative;display:flex;flex-direction:column;width:fit-content;max-width:100%;min-width:100px}.message.sent .message-info{background:#a1d5ff;border-radius:12px 12px 0;margin-right:8px;margin-left:0}.chat-image{max-width:100%;max-height:300px;border-radius:8px;display:block;margin-bottom:4px;object-fit:contain}.message-text{margin:0;font-size:.95rem;color:#333;line-height:1.4;word-break:break-word}@keyframes flash-highlight{0%{background-color:transparent}30%{background-color:#0088cc4d}to{background-color:transparent}}.highlight-flash .message-info{animation:flash-highlight 2s ease-out}.message-time{font-size:.7rem;color:#999;text-align:right;margin-top:4px}.message-input-container{align-items:center;padding:15px;background-color:#fff;border-top:1px solid #e0e0e0}.message-input{flex:1;padding:10px 15px;border:1px solid #ccc;border-radius:20px;outline:none;margin-left:10px}.send-button{width:50px;height:50px;margin-left:10px;border:none;background-color:#08c;color:#fff;border-radius:50%;cursor:pointer;transition:background .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.send-button:hover{background-color:#069}.send-button:disabled{background-color:#ccc;cursor:not-allowed}.send-button:active{background-color:#004c73}.send-icon{width:24px;height:24px;display:block}.attach-button{width:50px;height:50px;margin-left:10px;border:none;background-color:#f0f0f0;color:#333;border-radius:50%;cursor:pointer;transition:background .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.attach-button:hover{background-color:#e0e0e0}.badge{top:-5px;right:-5px;background-color:#08c;color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px}.reply-to-message-container{display:block}.controls{display:flex}.login-container{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100vh;gap:15px}.login-container input{width:300px;padding:12px 16px;border:1px solid #dfe1e5;border-radius:10px;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}.login-container input:focus{border-color:#24a1de;box-shadow:0 0 0 2px #24a1de33}.login-container button{width:334px;padding:12px;background-color:#24a1de;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s}.login-container button:hover:not(:disabled){background-color:#2090c7}.login-container button:active:not(:disabled){transform:scale(.98)}.login-container button:disabled{background-color:#a8d5ed;cursor:not-allowed}.about{margin-bottom:20px}.about h1{color:#222;margin-bottom:8px}.about i{color:#707579;font-style:normal;font-size:14px}.error{color:red;font-size:14px;margin-top:5px}.app-viewport{display:flex;width:100vw;height:100vh;overflow:hidden}.login-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}