:root{--primary-color: #3369F3;--secondary-color: #2c3e50;--background-color: #FFF;--text-color: #1E1E1E;--error-color: #FF2F2F}body{padding:0;margin:0;color:#1e1e1e;color:var(--text-color);font-family:Arial,sans-serif;line-height:1.6;box-sizing:border-box}.login-page{width:340px;padding:30px;margin:10vh auto;border-radius:12px;box-shadow:0 0 10px #0000001a}.login-page input,.login-page button{width:100%}.login-page-title{font-size:20px;text-align:center}.input-wrapper{position:relative;margin-bottom:16px}.input,.select,.button{padding:10px;margin:0 0 10px;border:none;border-bottom:1px solid #3369F3;border-bottom:1px solid var(--primary-color);box-sizing:border-box;outline:none;transition:border-color .2s ease}.input :focus-visible,.select :focus-visible,.button :focus-visible{outline:none}.input-error-text{margin-bottom:0;border-bottom-color:#ff2f2f;border-bottom-color:var(--error-color)}.input-error{z-index:10;display:none;padding:0;margin-top:4px;color:#ff2f2f;color:var(--error-color);font-size:12px}.button{border:none;border-radius:8px;background-color:#3369f3;background-color:var(--primary-color);color:#fff;cursor:pointer;transition:background-color .3s ease}.button:hover{background-color:#2954c2}@supports (color: color-mix(in lch,red,blue)){.button:hover{background-color:color-mix(in srgb,var(--primary-color) 80%,black)}}.button:disabled{background-color:#bdc3c7;cursor:not-allowed}.button.secondary{background-color:transparent;color:#3369f3;color:var(--primary-color)}.not-found-page,.server-error-page{margin-top:20%;text-align:center}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.messenger{display:flex;height:100vh;background:#fff}.sidebar{display:flex;flex-direction:column;width:25vw;min-width:250px;border-right:1px solid #dcdcdc;background-color:#f5f5f5}.header{padding:16px 20px;background:#e0e0e0;text-align:right}.add-chat-block{display:flex}.add-chat{margin:12px 16px 12px 0}.profile-link{font-size:14px;cursor:pointer}.search{width:100%;padding:8px 12px;margin:12px 16px;border:none;border-radius:8px;background:#eaeaea;outline:none}.chat-list{padding:0;margin:0;flex-grow:1;list-style:none;overflow-y:auto}.chat-item{position:relative;display:flex;padding:12px 16px;border-top:1px solid #ececec;cursor:pointer;align-items:center;transition:background .2s}.chat-item:hover{background:#f0f4ff}.chat-item.selected{background:#dce6f9}.avatar{width:40px;height:40px;margin-right:12px;border-radius:50%;background:#ccc;flex-shrink:0}.chat-info{overflow:hidden;padding-right:15px}.chat-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-preview{color:#666;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-time{position:absolute;top:12px;right:16px;color:#999;font-size:12px}.unread-count{position:absolute;right:16px;bottom:12px;height:18px;padding:0 5px;margin-left:10px;border-radius:50%;background:#1976d2;color:#fff;font-size:11px}.delete-chat-button{position:absolute;top:5px;right:5px;display:flex;width:20px;height:20px;border:none;border-radius:50%;background-color:#ff4d4d;color:#fff;font-size:12px;font-weight:700;cursor:pointer;opacity:0;align-items:center;justify-content:center;transition:opacity .2s}.delete-chat-button:hover{background-color:#ff1a1a}.chat-item:hover .delete-chat-button{opacity:1}.chat-window{display:flex;flex-direction:column;flex-grow:1;min-width:0}.placeholder{color:#aaa;font-size:14px}.chat-header{display:flex;padding:16px 20px;border-bottom:1px solid #eee;align-items:center;justify-content:space-between;flex-shrink:0}.chat-user{align-items:center;display:flex}.chat-user .avatar.small{width:36px;height:36px;margin-right:12px;border-radius:50%;background:#ccc}.username{font-size:15px;font-weight:600}.chat-menu{color:#666;font-size:20px;cursor:pointer}.chat-body{display:flex;flex-direction:column;gap:12px;padding:16px 20px;flex-grow:1;overflow-y:auto}.chat-date{margin-bottom:8px;color:#999;font-size:12px;align-self:center}.message{position:relative;max-width:65%}.message.incoming{align-self:flex-start}.message.outgoing{align-self:flex-end}.bubble{padding:10px 14px;border-radius:16px;background:#f2f2f2;font-size:14px}.message.outgoing .bubble{background:#e4edff}.meta{margin-top:4px;color:#888;font-size:11px;text-align:right}.message-image{display:block;width:100%;max-width:260px;border-radius:12px}.chat-input{display:flex;width:100%;padding:12px 16px;border-top:1px solid #eee;align-items:center;gap:10px;flex-shrink:0}.chat-input [type=text]{padding:10px 14px;border:none;border-radius:24px;background:#f1f1f1;font-size:14px;flex:1;outline:none}.file-button,.send-button{border:none;background:none;font-size:18px;cursor:pointer}.send-button{display:flex;width:36px;height:36px;border-radius:50%;background:#2563eb;color:#fff;align-items:center;justify-content:center}.modal-overlay{position:fixed;top:0;left:0;z-index:1000;display:none;width:100%;height:100%;background-color:#00000080;justify-content:center;align-items:center}.modal-overlay_open{display:flex}.modal-content{width:90%;max-width:500px;padding:20px;border-radius:8px;background-color:#fff;box-shadow:0 2px 10px #0000001a}.profile-page{display:flex;height:100vh;background-color:#f1f1f1}.profile-page .sidebar{display:flex;width:60px;background-color:transparent;align-items:center;justify-content:center}.profile-page .back-button{width:40px;height:40px;border:none;border-radius:50%;background:#2f64ff;color:#fff;font-size:24px;cursor:pointer}.profile-page .profile-container{display:flex;padding:40px;background:#fff;align-items:center;flex-direction:column;flex-grow:1}.profile-page .profile-input{padding:6px 10px;margin:0}.profile-page .avatar.large{width:120px;height:120px;margin-bottom:12px;border-radius:50%}.profile-page .profile-name{margin-bottom:32px;font-size:18px;font-weight:600}.profile-page .profile-info{width:100%;max-width:600px;font-size:14px}.profile-page .row{display:flex;padding:10px 0;border-bottom:1px solid #eee;align-items:center;justify-content:space-between}.profile-page .label{color:#222}.profile-page .value{color:#666}.profile-page .profile-actions{display:flex;flex-direction:column;gap:12px;margin-top:32px}.profile-page .edit-link{margin:0;color:#2f64ff;-webkit-text-decoration:none;text-decoration:none}.profile-page .logout-link{margin:0;color:red;-webkit-text-decoration:none;text-decoration:none}.avatar-container{position:relative;width:130px;height:130px;border-radius:50%;cursor:pointer;overflow:hidden}.avatar-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.avatar-input{display:none}.notification{position:fixed;top:20px;right:20px;z-index:1000;min-width:250px;padding:15px 20px;border-radius:5px;color:#fff;font-size:16px;text-align:center}.notification.success{background-color:#4caf50}.notification.error{background-color:#f44336}.notification.info{background-color:#2196f3}