:root{--primary-color: #3369F3;--secondary-color: #2c3e50;--background-color: #FFFFFF;--text-color: #1E1E1E;--error-color: #FF2F2F}body{font-family:Arial,sans-serif;line-height:1.6;color:#1e1e1e;color:var(--text-color);box-sizing:border-box;margin:0;padding:0}.login-page{width:340px;margin:10vh auto;border-radius:12px;padding:30px;box-shadow:0 0 10px #0000001a}.login-page input,.login-page button{width:100%}.login-page__title{font-size:20px;text-align:center}.input,.select,.button{margin:0 0 10px;padding:10px;box-sizing:border-box;border:none;outline:none;border-bottom:1px solid #3369F3;border-bottom:1px solid var(--primary-color)}.input:focus-visible,.select:focus-visible,.button:focus-visible{outline:none}.button{background-color:#3369f3;background-color:var(--primary-color);border-radius:8px;color:#fff;border:none;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{color:#3369f3;color:var(--primary-color);background-color:transparent}.not-found-page,.server-error-page{text-align:center;margin-top:20%}.messenger{display:flex;height:100vh;background:#fff}.sidebar{width:25vw;background-color:#f5f5f5;border-right:1px solid #dcdcdc;display:flex;flex-direction:column}.header{text-align:right;background:#e0e0e0;padding:16px 20px}.profile-link{font-size:14px;color:#888;cursor:pointer}.search{margin:12px 16px;padding:8px 12px;border:none;border-radius:8px;background:#eaeaea;outline:none;width:100%}.chat-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex-grow:1}.chat-item{position:relative;display:flex;align-items:center;padding:12px 16px;border-top:1px solid #ececec;transition:background .2s;cursor:pointer}.chat-item:hover{background:#f0f4ff}.chat-item.selected{background:#dce6f9}.avatar{width:40px;height:40px;border-radius:50%;background:#ccc;flex-shrink:0;margin-right:12px}.chat-info{overflow:hidden;padding-right:15px}.chat-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-preview{font-size:13px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-time{position:absolute;top:12px;right:16px;font-size:12px;color:#999}.unread-count{position:absolute;right:16px;bottom:12px;background:#1976d2;color:#fff;font-size:11px;height:18px;padding:0 5px;border-radius:50%;margin-left:10px}.chat-window{flex-grow:1;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 20px 0}.placeholder{color:#aaa;font-size:14px}.chat-header{display:flex;width:100%;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding:0 20px 16px}.chat-user{display:flex;align-items:center}.chat-user .avatar.small{width:36px;height:36px;background:#ccc;border-radius:50%;margin-right:12px}.username{font-weight:600;font-size:15px}.chat-menu{font-size:20px;color:#666;cursor:pointer}.chat-body{flex:1;padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;width:100%}.chat-date{align-self:center;font-size:12px;color:#999;margin-bottom:8px}.message{max-width:65%;position:relative}.message.incoming{align-self:flex-start}.message.outgoing{align-self:flex-end}.bubble{background:#f2f2f2;padding:10px 14px;border-radius:16px;font-size:14px}.message.outgoing .bubble{background:#e4edff}.meta{font-size:11px;color:#888;margin-top:4px;text-align:right}.message-image{width:100%;max-width:260px;border-radius:12px;display:block}.chat-input{display:flex;align-items:center;border-top:1px solid #eee;padding:12px 16px;gap:10px;width:100%}.chat-input input[type=text]{flex:1;padding:10px 14px;border-radius:24px;border:none;background:#f1f1f1;font-size:14px;outline:none}.file-button,.send-button{background:none;border:none;font-size:18px;cursor:pointer}.send-button{background:#2563eb;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}.profile-page{display:flex;height:100vh;background-color:#f1f1f1}.profile-page .sidebar{width:60px;background-color:transparent;display:flex;align-items:center;justify-content:center}.profile-page .back-button{background:#2f64ff;color:#fff;font-size:24px;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer}.profile-page .profile-container{flex-grow:1;background:#fff;padding:40px;display:flex;flex-direction:column;align-items:center}.profile-page .profile-input{margin:0;padding:6px 10px}.profile-page .avatar.large{width:120px;height:120px;border-radius:50%;margin-bottom:12px}.profile-page .profile-name{font-weight:600;font-size:18px;margin-bottom:32px}.profile-page .profile-info{width:100%;max-width:600px;font-size:14px}.profile-page .row{display:flex;justify-content:space-between;padding:10px 0;align-items:center;border-bottom:1px solid #eee}.profile-page .label{color:#222}.profile-page .value{color:#666}.profile-page .profile-actions{margin-top:32px;display:flex;flex-direction:column;gap:12px}.profile-page .edit-link{color:#2f64ff;-webkit-text-decoration:none;text-decoration:none;margin:0}.profile-page .logout-link{color:red;-webkit-text-decoration:none;text-decoration:none;margin:0}